perf: publish change and panel to App

2024-10-09 18:11:08 +08:00 · 2024-10-09 18:11:08 +08:00 · 6b91b62ab9
commit 6b91b62ab9
parent 7747dcbea6
14 changed files with 347 additions and 40 deletions
--- a/package.json
+++ b/package.json
@ -9,7 +9,8 @@
    "lint": "eslint .",
    "preview": "vite preview",
    "prune": "pnpm store prune && rimraf node_modules/.vite",
-    "deploy": "rsync -avz --delete ./dist/ light:/root/apps/envision/web"
+    "deploy": "rsync -avz --delete ./dist/ light:/root/apps/envision/web",
+    "pub": "pnpm run build && pnpm run deploy"
  },
  "dependencies": {
    "@abearxiong/container": "0.0.1-alpha.11",
--- a/src/modules/layout/LayoutUser.tsx
+++ b/src/modules/layout/LayoutUser.tsx
@ -25,7 +25,12 @@ const meun = [
  {
    title: 'Your orgs',
    icon: <DashboardOutlined />,
-    link: '/panel/edit/list',
+    link: '/org/edit/list',
+  },
+  {
+    title: 'Site Map',
+    icon: <HomeOutlined />,
+    link: '/map',
  },
 ];
 export const LayoutUser = () => {
--- a/src/modules/layout/Menu.tsx
+++ b/src/modules/layout/Menu.tsx
@ -72,7 +72,11 @@ export const LayoutMenu = () => {
  const navigate = useNavigate();
  return (
    <div className={clsx('w-full h-full absolute z-20', !open && 'hidden')}>
-      <div className='bg-white w-full absolute h-full opacity-60 z-0'></div>
+      <div
+        className='bg-white w-full absolute h-full opacity-60 z-0'
+        onClick={() => {
+          setOpen(false);
+        }}></div>
      <div className='w-[300px] h-full absolute top-0 left-0 bg-white'>
        <div className='flex justify-between p-6 font-bold items-center'>
          Envision
--- a/src/pages/app/edit/List.tsx
+++ b/src/pages/app/edit/List.tsx
@ -2,7 +2,7 @@ import { useShallow } from 'zustand/react/shallow';
 import { useUserAppStore } from '../store';
 import { useEffect } from 'react';
 import { Button, Form, Input, Modal, Select, Tooltip } from 'antd';
-import { DeleteOutlined, EditOutlined, LinkOutlined, PlusOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import { CodeOutlined, DashboardOutlined, DeleteOutlined, EditOutlined, LinkOutlined, PlusOutlined, UnorderedListOutlined } from '@ant-design/icons';
 import { isObjectNull } from '@/utils/is-null';
 import { useNavigate } from 'react-router';
 import { FileUpload } from '../modules/FileUpload';
@ -110,12 +110,22 @@ export const List = () => {
  }, []);
  return (
    <div className='w-full h-full flex bg-slate-100'>
-      <div className='p-2 h-full bg-white'>
+      <div className='p-2 h-full bg-white flex flex-col gap-2'>
        <Button
          onClick={() => {
            userAppStore.setShowEdit(true);
          }}
          icon={<PlusOutlined />}></Button>
+        <Tooltip title='To Panel'>
+          <Button onClick={() => navicate('/panel')} icon={<DashboardOutlined />}></Button>
+        </Tooltip>
+        <Tooltip title='To Container'>
+          <Button
+            onClick={() => {
+              navicate('/container');
+            }}
+            icon={<CodeOutlined />}></Button>
+        </Tooltip>
      </div>
      <div className='flex-grow'>
        <div className='w-full h-full p-4'>
@ -145,7 +155,7 @@ export const List = () => {
                          <Button
                            icon={<UnorderedListOutlined />}
                            onClick={() => {
-                              navicate(`/app/${item.key}/verison/list`);
+                              navicate(`/app/${item.key}/version/list`);
                            }}></Button>
                        </Tooltip>
                        <Tooltip title={'App Version List'}>
--- a/src/pages/app/index.tsx
+++ b/src/pages/app/index.tsx
@ -8,7 +8,7 @@ export const App = () => {
      <Route element={<Main />}>
        <Route path='/' element={<Navigate to='/app/edit/list' />}></Route>
        <Route path='edit/list' element={<List />} />
-        <Route path='/:appKey/verison/list' element={<AppVersionList />} />
+        <Route path='/:appKey/version/list' element={<AppVersionList />} />
      </Route>
    </Routes>
  );
--- a/src/pages/container/edit/List.tsx
+++ b/src/pages/container/edit/List.tsx
@ -6,7 +6,17 @@ import { useShallow } from 'zustand/react/shallow';
 import { Form } from 'antd';
 import copy from 'copy-to-clipboard';
 import { useNavigate } from 'react-router';
-import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, MessageOutlined, PlusOutlined } from '@ant-design/icons';
+import {
+  EditOutlined,
+  SettingOutlined,
+  LinkOutlined,
+  SaveOutlined,
+  DeleteOutlined,
+  LeftOutlined,
+  MessageOutlined,
+  PlusOutlined,
+  DashboardOutlined,
+} from '@ant-design/icons';
 import clsx from 'clsx';
 import { isObjectNull } from '@/utils/is-null';
 import { CardBlank } from '@/components/card/CardBlank';
@ -125,8 +135,13 @@ export const ContainerList = () => {
  };
  return (
    <div className='w-full h-full flex '>
-      <div className='p-2'>
+      <div className='p-2 flex flex-col gap-2'>
+        <Tooltip title='add'>
          <Button onClick={onAdd} icon={<PlusOutlined />}></Button>
+        </Tooltip>
+        <Tooltip title='To Panel'>
+          <Button onClick={() => navicate('/panel')} icon={<DashboardOutlined />}></Button>
+        </Tooltip>
      </div>
      <div className='flex flex-grow overflow-hidden h-full'>
        <div className='flex-grow overflow-auto scrollbar bg-gray-100'>
@ -200,12 +215,12 @@ export const ContainerList = () => {
                  </Fragment>
                );
              })}
-            <CardBlank className='w-[400px]' />
            {containerStore.list.length == 0 && (
              <div className='text-center' key={'no-data'}>
                No Data
              </div>
            )}
+            <CardBlank className='w-[400px]' />
          </div>
        </div>
        <div className={clsx('bg-gray-100 border-l border-bg-slate-300 w-[600px] flex-shrink-0', !codeEdit && 'hidden')}>
--- a/src/pages/map/index.tsx
+++ b/src/pages/map/index.tsx
@ -12,7 +12,7 @@ const serverPath = [
  },
  {
    path: 'app',
-    links: ['edit/list', ':app/verison/list'],
+    links: ['edit/list', ':app/version/list'],
  },
  {
    path: 'file',
--- a/src/pages/org/edit/List.tsx
+++ b/src/pages/org/edit/List.tsx
@ -4,7 +4,17 @@ import { useOrgStore } from '../store';
 import { useShallow } from 'zustand/react/shallow';
 import { Form } from 'antd';
 import { useNavigate } from 'react-router';
-import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, PlusOutlined, SwapOutlined } from '@ant-design/icons';
+import {
+  EditOutlined,
+  SettingOutlined,
+  LinkOutlined,
+  SaveOutlined,
+  DeleteOutlined,
+  LeftOutlined,
+  PlusOutlined,
+  SwapOutlined,
+  UnorderedListOutlined,
+} from '@ant-design/icons';
 import clsx from 'clsx';
 import { isObjectNull } from '@/utils/is-null';
 import { CardBlank } from '@/components/card/CardBlank';
@ -146,6 +156,7 @@ export const List = () => {
                      </div>
                      <div className='flex mt-2 '>
                        <Button.Group>
+                          <Tooltip title='Edit'>
                            <Button
                              onClick={(e) => {
                                userStore.setFormData(item);
@ -154,6 +165,15 @@ export const List = () => {
                                e.stopPropagation();
                              }}
                              icon={<EditOutlined />}></Button>
+                          </Tooltip>
+                          <Tooltip title='User List'>
+                            <Button
+                              onClick={(e) => {
+                                navicate(`/org/edit/user/${item.id}`);
+                                e.stopPropagation();
+                              }}
+                              icon={<UnorderedListOutlined />}></Button>
+                          </Tooltip>
                          <Button
                            onClick={(e) => {
                              Modal.confirm({
--- a/src/pages/org/edit/UserList.tsx
+++ b/src/pages/org/edit/UserList.tsx
@ -0,0 +1,176 @@
+import { useShallow } from 'zustand/react/shallow';
+import { useOrgStore } from '../store';
+import { useNavigation, useParams } from 'react-router';
+import { useEffect } from 'react';
+import { Button, Input, message, Modal, Select, Tooltip } from 'antd';
+import { DeleteOutlined, EditOutlined, LeftOutlined, PlusOutlined } from '@ant-design/icons';
+import { Form } from 'antd';
+import { useNavigate } from 'react-router';
+import { isObjectNull } from '@/utils/is-null';
+
+const FormModal = () => {
+  const [form] = Form.useForm();
+  const userStore = useOrgStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showEdit,
+        setShowEdit: state.setShowEdit,
+        formData: state.formData,
+        updateData: state.updateData,
+        setFormData: state.setFormData,
+      };
+    }),
+  );
+  useEffect(() => {
+    const open = userStore.showEdit;
+    if (open) {
+      const isNull = isObjectNull(userStore.formData);
+      if (isNull) {
+        form.setFieldsValue({});
+      } else form.setFieldsValue(userStore.formData);
+    }
+  }, [userStore.showEdit, userStore.formData]);
+  const onFinish = async (values: any) => {
+    userStore.updateData(values);
+  };
+  const onClose = () => {
+    userStore.setShowEdit(false);
+    userStore.setFormData({});
+  };
+  const isEdit = userStore.formData.id;
+  return (
+    <Modal
+      title={isEdit ? 'Edit' : 'Add'}
+      open={userStore.showEdit}
+      onClose={() => userStore.setShowEdit(false)}
+      destroyOnClose
+      footer={false}
+      width={800}
+      onCancel={onClose}>
+      <Form
+        form={form}
+        onFinish={onFinish}
+        labelCol={{
+          span: 4,
+        }}
+        wrapperCol={{
+          span: 20,
+        }}>
+        <Form.Item name='id' hidden>
+          <Input />
+        </Form.Item>
+        <Form.Item name='username' label='username'>
+          <Input disabled={isEdit} />
+        </Form.Item>
+        <Form.Item name='role' label='role'>
+          <Select
+            options={[
+              {
+                label: 'admin',
+                value: 'admin',
+              },
+              {
+                label: 'user',
+                value: 'user',
+              },
+            ]}></Select>
+        </Form.Item>
+        <Form.Item label=' ' colon={false}>
+          <Button type='primary' htmlType='submit'>
+            Submit
+          </Button>
+          <Button className='ml-2' htmlType='reset' onClick={onClose}>
+            Cancel
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export const UserList = () => {
+  const param = useParams();
+  const navicate = useNavigate();
+  const orgStore = useOrgStore(
+    useShallow((state) => {
+      return {
+        users: state.users,
+        org: state.org,
+        setOrgId: state.setOrgId,
+        getOrg: state.getOrg,
+        setFormData: state.setFormData,
+        setShowEdit: state.setShowEdit,
+      };
+    }),
+  );
+  useEffect(() => {
+    if (param.id) {
+      orgStore.setOrgId(param.id);
+      orgStore.getOrg();
+    }
+    return () => {
+      orgStore.setFormData({});
+    };
+  }, []);
+  return (
+    <div className='w-full h-full bg-gray-200 flex'>
+      <div className='p-2 bg-white mr-2'>
+        <Button
+          icon={<PlusOutlined />}
+          onClick={() => {
+            // orgStore.setShowEdit(true);
+            message.info('Coming soon');
+          }}></Button>
+      </div>
+      <div className='p-4 pt-12  flex-grow relative'>
+        <div className='absolute top-2'>
+          <Tooltip title='返回'>
+            <Button
+              onClick={() => {
+                navicate(-1);
+              }}
+              icon={<LeftOutlined />}></Button>
+          </Tooltip>
+        </div>
+        <div className='p-4  bg-white  rounded-lg border shadow-md h-full'>
+          <div className='flex gap-4'>
+            {orgStore.users.map((item) => {
+              const isOwner = item.role === 'owner';
+              return (
+                <div key={item.id} className='card w-[300px] border-t justify-between p-2 border-b'>
+                  <div className='card-title capitalize'>username: {item.username}</div>
+                  <div className='flex gap-2 capitalize'>{item.role || '-'}</div>
+                  <div className='mt-2'>
+                    <Button.Group>
+                      <Tooltip title='Edit'>
+                        <Button
+                          icon={<EditOutlined />}
+                          disabled={isOwner}
+                          onClick={() => {
+                            // orgStore.setFormData(item);
+                            // orgStore.setShowEdit(true);
+                            message.info('Coming soon');
+                          }}></Button>
+                      </Tooltip>
+                      <Tooltip title='delete'>
+                        <Button
+                          icon={<DeleteOutlined />}
+                          disabled={isOwner}
+                          onClick={() => {
+                            //
+                            message.info('Coming soon');
+                          }}></Button>
+                      </Tooltip>
+                    </Button.Group>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+
+      <FormModal />
+    </div>
+  );
+};
--- a/src/pages/org/index.tsx
+++ b/src/pages/org/index.tsx
@ -1,12 +1,15 @@
 import { Navigate, Route, Routes } from 'react-router-dom';
 import { List } from './edit/List';
 import { Main } from './layouts';
+import { UserList } from './edit/UserList';
+
 export const App = () => {
  return (
    <Routes>
      <Route element={<Main />}>
        <Route path='/' element={<Navigate to='/org/edit/list' />}></Route>
        <Route path='edit/list' element={<List />} />
+        <Route path='edit/user/:id' element={<UserList />} />
      </Route>
    </Routes>
  );
--- a/src/pages/org/store/index.ts
+++ b/src/pages/org/store/index.ts
@ -12,6 +12,12 @@ type OrgStore = {
  getList: () => Promise<void>;
  updateData: (data: any) => Promise<void>;
  deleteData: (id: string) => Promise<void>;
+  org: any;
+  setOrg: (org: any) => void;
+  users: { id: string; username: string; role?: string }[];
+  orgId: string;
+  setOrgId: (orgId: string) => void;
+  getOrg: () => Promise<any>;
 };
 export const useOrgStore = create<OrgStore>((set, get) => {
  return {
@ -65,5 +71,26 @@ export const useOrgStore = create<OrgStore>((set, get) => {
        message.error(res.message || 'Request failed');
      }
    },
+    org: {},
+    setOrg: (org) => set({ org }),
+    orgId: '',
+    setOrgId: (orgId) => set({ orgId }),
+    users: [],
+    getOrg: async () => {
+      const { orgId } = get();
+      const loaded = message.loading('Loading...', 0);
+      const res = await query.post({
+        path: 'org',
+        key: 'get',
+        id: orgId,
+      });
+      loaded();
+      if (res.code === 200) {
+        const { org, users } = res.data || {};
+        set({ org, users });
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
  };
 });
--- a/src/pages/panel/edit/List.tsx
+++ b/src/pages/panel/edit/List.tsx
@ -8,13 +8,19 @@ import { useNavigate } from 'react-router';
 import { useToCodeEditor } from '@/pages/code-editor';
 import { CardBlank } from '@/components/card/CardBlank';
 import {
+  AppstoreFilled,
+  AppstoreOutlined,
+  ArrowRightOutlined,
  CloudDownloadOutlined,
  CloudUploadOutlined,
+  CodeOutlined,
  DeleteOutlined,
  EditOutlined,
  ForkOutlined,
  GoldOutlined,
  PlusOutlined,
+  RocketFilled,
+  RollbackOutlined,
  ToolOutlined,
 } from '@ant-design/icons';
 import { isObjectNull } from '@/utils/is-null';
@ -119,7 +125,8 @@ export const List = () => {

  return (
    <div className='w-full h-full flex bg-gray-200'>
-      <div className='p-2 bg-white rounded-r-lg'>
+      <div className='p-2 bg-white rounded-r-lg flex flex-col gap-2'>
+        <Tooltip title='Add'>
          <Button
            className='w-10 '
            icon={<PlusOutlined />}
@ -127,12 +134,31 @@ export const List = () => {
              editStore.setFormData({});
              editStore.setShowEdit(true);
            }}></Button>
+        </Tooltip>
+        <Tooltip title='To App'>
+          <Button
+            onClick={() => {
+              navicate('/app');
+            }}
+            icon={<AppstoreOutlined />}></Button>
+        </Tooltip>
+        <Tooltip title='To Container'>
+          <Button
+            onClick={() => {
+              navicate('/container');
+            }}
+            icon={<CodeOutlined />}></Button>
+        </Tooltip>
      </div>
      <div className='flex-grow overflow-scroll scrollbar mt-4'>
        <div className=''>
          <div className=' flex flex-wrap gap-10 justify-center h-full overflow-auto scrollbar'>
            {editStore.list.length > 0 &&
              editStore.list.map((item, index) => {
+                const publish = item.publish;
+                if (publish.id) {
+                  console.log(item, item.publish);
+                }
                return (
                  <div className='card w-[300px]' key={index}>
                    <div className='card-title'>{item.title}</div>
@ -181,6 +207,17 @@ export const List = () => {
                            icon={<CloudUploadOutlined />}
                          />
                        </Tooltip>
+                        {item.publish?.id && (
+                          <Tooltip title={`转到${item?.publish.key || ''} App Version List`}>
+                            <Button
+                              onClick={() => {
+                                const app = '/app/' + item?.publish?.key + '/version/list';
+                                navicate(app);
+                              }}
+                              icon={<ArrowRightOutlined />}
+                            />
+                          </Tooltip>
+                        )}
                        <Tooltip title='Download'>
                          <Button
                            onClick={() => {
@ -209,8 +246,8 @@ export const List = () => {
                  </div>
                );
              })}
-            <CardBlank className='w-[300px]' />
            {editStore.list.length === 0 && <div className='text-center text-gray-500'>No data</div>}
+            <CardBlank className='w-[300px]' />
          </div>
        </div>
      </div>
--- a/src/pages/panel/edit/modal/PublishFormModal.tsx
+++ b/src/pages/panel/edit/modal/PublishFormModal.tsx
@ -74,9 +74,11 @@ export const PublishFormModal = () => {
          <Input
            disabled={isEdit}
            addonAfter={
+              !isEdit && (
                <div className='cursor-pointer hover:text-gray-400' onClick={onPublish}>
                  发布
                </div>
+              )
            }
          />
        </Form.Item>
@ -84,12 +86,19 @@ export const PublishFormModal = () => {
          <Input.TextArea rows={4} />
        </Form.Item>
        <Form.Item label=' ' colon={false}>
+          <div className='flex gap-2'>
            <Button type='primary' htmlType='submit'>
              Save
            </Button>
-          <Button className='ml-2' htmlType='reset' onClick={onClose}>
+            <Button className='' htmlType='reset' onClick={onClose}>
              Cancel
            </Button>
+            {isEdit && (
+              <Button type='default' danger className='ml-4' onClick={onPublish}>
+                Publish
+              </Button>
+            )}
+          </div>
        </Form.Item>
      </Form>
    </Modal>
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit 66aae218f3962f2e5ab8f22f3a463b74d5e17362
+Subproject commit bff92667f4bed0f8d15ed5e6fe1c75ce22480bd2