update

src/pages/home/module/SuccessModal.tsx

@@ -0,0 +1,55 @@
+import { Dialog, DialogContent, DialogTitle } from '@mui/material';
+import { useShallow } from 'zustand/shallow';
+import { useHomeStore } from '../store';
+import { useMemo } from 'react';
+import { useLayoutStore } from '@/modules/layout/store';
+export const Label = ({ label, children }: { label: string; children: React.ReactNode }) => {
+  return (
+    <div className='text-sm text-gray-500 w-full flex gap-2'>
+      <div className='min-w-[60px]'>{label}</div>
+      <div className=''>{children}</div>
+    </div>
+  );
+};
+export const SuccessModal = () => {
+  const { openSuccessModal, setOpenSuccessModal, appKey, version, filename } = useHomeStore(
+    useShallow((state) => ({
+      openSuccessModal: state.openSuccessModal,
+      setOpenSuccessModal: state.setOpenSuccessModal,
+      appKey: state.appKey, //
+      version: state.version, //
+      filename: state.filename, //
+    })),
+  );
+  const { me } = useLayoutStore(useShallow((state) => ({ me: state.me })));
+  const link = useMemo(() => {
+    const _currentHref = new URL(window.location.href);
+    const username = me?.username;
+    const newHref = new URL(`/${username}/${appKey}/`, _currentHref.origin);
+    return newHref.toString();
+  }, [me, appKey]);
+  return (
+    <Dialog open={openSuccessModal} onClose={() => setOpenSuccessModal(false)}>
+      <DialogTitle className='text-black'>部署成功</DialogTitle>
+      <DialogContent>
+        <div className='flex flex-col gap-2 w-[400px] min-h-[100px] text-black'>
+          <Label label='应用 Key: '>{appKey}</Label>
+          <Label label='版本:'>{version}</Label>
+          <Label label='访问地址:'>
+            <a href={link} className='text-blue-500' target='_blank' rel='noreferrer'>
+              {link}
+            </a>
+          </Label>
+          <Label label='配置地址:'>
+            <a href={`/app/edit/list`} className='text-blue-500' target='_self' rel='noreferrer'>
+              {`/app/edit/list`}
+            </a>
+          </Label>
+          <div className='mt-1 text-gray-500 italic' style={{ fontSize: 10 }}>
+            注: 如果需要其他人访问，需要设置共享。
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};