feat: add layout and org

src/pages/app/edit/AppVersionList.tsx

@@ -1,12 +1,13 @@
-import { useParams } from 'react-router';
+import { useNavigation, useParams } from 'react-router';
 import { useAppVersionStore } from '../store';
 import { useShallow } from 'zustand/react/shallow';
-import { useEffect } from 'react';
-import { Button, Form, Input, Modal } from 'antd';
-import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Button, Form, Input, Modal, Tooltip } from 'antd';
+import { CloudUploadOutlined, DeleteOutlined, EditOutlined, FileOutlined, LeftOutlined, PlusOutlined } from '@ant-design/icons';
 import { isObjectNull } from '@/utils/is-null';
 import { useNavigate } from 'react-router';
 import { FileUpload } from '../modules/FileUpload';
+import clsx from 'clsx';
 const FormModal = () => {
   const [form] = Form.useForm();
   const containerStore = useAppVersionStore(
@@ -86,13 +87,19 @@ export const AppVersionList = () => {
       return {
         list: state.list,
         getList: state.getList,
+        key: state.key,
         setKey: state.setKey,
         setShowEdit: state.setShowEdit,
+        formData: state.formData,
         setFormData: state.setFormData,
         deleteData: state.deleteData,
+        publishVersion: state.publishVersion,
+        app: state.app,
       };
     }),
   );
+  const navigate = useNavigate();
+  const [isUpload, setIsUpload] = useState(false);
   useEffect(() => {
     // fetch app version list
     if (appKey) {
@@ -100,6 +107,9 @@ export const AppVersionList = () => {
       versionStore.getList();
     }
   }, []);
+  const appVersion = useMemo(() => {
+    return versionStore.app?.version || '';
+  }, [versionStore.app]);
   return (
     <div className='w-full h-full flex bg-slate-100'>
       <div className='p-2 bg-white'>
@@ -111,33 +121,68 @@ export const AppVersionList = () => {
           icon={<PlusOutlined />}
         />
       </div>
-      <div>
-        <FileUpload />
-      </div>
-      <div className='flex-grow h-full'>
-        <div className='w-full h-full p-4'>
+
+      <div className='flex-grow h-full relative'>
+        <div className='absolute top-2 left-4'>
+          <Tooltip title='返回' placement='bottom'>
+            <Button
+              onClick={() => {
+                navigate('/app/edit/list');
+              }}
+              icon={<LeftOutlined />}
+            />
+          </Tooltip>
+        </div>
+
+        <div className='w-full h-full p-4 pt-12'>
           <div className='w-full h-full rounded-lg bg-white'>
             <div className='flex gap-2 flex-wrap p-4'>
               {versionStore.list.map((item, index) => {
+                const isPublish = item.version === appVersion;
+                const color = isPublish ? 'bg-green-500' : '';
                 return (
-                  <div className='card border-t' key={index}>
-                    <div>{item.version}</div>
+                  <div className='card border-t w-[300px]' key={index}>
+                    <div className={'flex items-center justify-between'}>
+                      {item.version}
 
-                    <div>
+                      <Tooltip title={isPublish ? 'published' : ''}>
+                        <div className={clsx('ml-4 rounded-full w-4 h-4', color)}></div>
+                      </Tooltip>
+                    </div>
+                    <div className='mt-4'>
                       <Button.Group>
-                        <Button
+                        {/* <Button
                           onClick={() => {
                             versionStore.setFormData(item);
                             versionStore.setShowEdit(true);
                           }}
                           icon={<EditOutlined />}
-                        />
-                        <Button
-                          onClick={() => {
-                            versionStore.deleteData(item.id);
-                          }}
-                          icon={<DeleteOutlined />}
-                        />
+                        /> */}
+                        <Tooltip title='Delete'>
+                          <Button
+                            onClick={() => {
+                              versionStore.deleteData(item.id);
+                            }}
+                            icon={<DeleteOutlined />}
+                          />
+                        </Tooltip>
+                        <Tooltip title='使用当前版本，发布为此版本'>
+                          <Button
+                            icon={<CloudUploadOutlined />}
+                            onClick={() => {
+                              versionStore.publishVersion({ id: item.id });
+                            }}
+                          />
+                        </Tooltip>
+                        <Tooltip title='文件管理'>
+                          <Button
+                            icon={<FileOutlined />}
+                            onClick={() => {
+                              versionStore.setFormData(item);
+                              setIsUpload(true);
+                            }}
+                          />
+                        </Tooltip>
                       </Button.Group>
                     </div>
                   </div>
@@ -147,7 +192,63 @@ export const AppVersionList = () => {
           </div>
         </div>
       </div>
+      <div className='flex-shrink'>
+        {isUpload && (
+          <div className='bg-white p-2 w-[600px]'>
+            <div className='header flex items-center gap-2'>
+              <Tooltip title='返回'>
+                <Button
+                  onClick={() => {
+                    setIsUpload(false);
+                  }}
+                  icon={<LeftOutlined />}
+                />
+              </Tooltip>
+              <div className='font-bold'>{versionStore.key}</div>
+            </div>
+            <AppVersionFile />
+          </div>
+        )}
+      </div>
       <FormModal />
     </div>
   );
 };
+export const AppVersionFile = () => {
+  const versionStore = useAppVersionStore(
+    useShallow((state) => {
+      return {
+        formData: state.formData,
+      };
+    }),
+  );
+  const versionFiles = useMemo(() => {
+    if (!versionStore.formData?.data) return [];
+    const files = versionStore.formData.data.files || [];
+    return files;
+  }, [versionStore.formData]);
+  return (
+    <>
+      <div>version: {versionStore.formData.version}</div>
+      <div className='border rounded-md my-2'>
+        <div className='flex gap-2 items-center border-b py-2 px-2'>
+          Files
+          <FileUpload />
+        </div>
+        <div className='mt-2'>
+          {versionFiles.map((file, index) => {
+            const prefix = versionStore.formData.key + '/' + versionStore.formData.version + '/';
+            const _path = file.path || '';
+            const path = _path.replace(prefix, '');
+            return (
+              <div className='flex gap-2 px-4 py-2 border-b' key={index}>
+                {/* <div className='w-[100px] truncate'>{file.name}</div> */}
+                <div>{path}</div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </>
+  );
+};