feat: add layout and org

2024-10-08 02:44:11 +08:00 · 2024-10-08 02:44:11 +08:00 · ec5c64d03a
commit ec5c64d03a
parent fd99875461
21 changed files with 962 additions and 130 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -12,6 +12,7 @@ import { App as ChatApp } from './pages/chat-manager';
 import { App as GitHubApp } from './pages/github';
 import { App as UserAppApp } from './pages/app';
 import { App as FileApp } from './pages/file';
+import { App as OrgApp } from './pages/org';

 import '@abearxiong/container/dist/container.css';

@ -33,6 +34,7 @@ export const App = () => {
            <Route path='/prompt/*' element={<PromptApp />} />
            <Route path='/agent/*' element={<AiAgentApp />} />
            <Route path='/user/*' element={<UserApp />} />
+            <Route path='/org/*' element={<OrgApp />} />
            <Route path='/chat/*' element={<ChatApp />} />
            <Route path='/github/*' element={<GitHubApp />} />
            <Route path='/app/*' element={<UserAppApp />} />
--- a/src/modules/layout/LayoutUser.tsx
+++ b/src/modules/layout/LayoutUser.tsx
@ -0,0 +1,99 @@
+import { useShallow } from 'zustand/react/shallow';
+import { useLayoutStore } from './store';
+import clsx from 'clsx';
+import { Button, Dropdown, message } from 'antd';
+import {
+  CloseOutlined,
+  CodeOutlined,
+  DashboardOutlined,
+  HomeOutlined,
+  MessageOutlined,
+  ReadOutlined,
+  RocketOutlined,
+  SmileOutlined,
+  SwapOutlined,
+  SwitcherOutlined,
+} from '@ant-design/icons';
+import { useNavigate } from 'react-router';
+import { useMemo } from 'react';
+const meun = [
+  {
+    title: 'Your profile',
+    icon: <HomeOutlined />,
+    link: '/map',
+  },
+  {
+    title: 'Your orgs',
+    icon: <DashboardOutlined />,
+    link: '/panel/edit/list',
+  },
+];
+export const LayoutUser = () => {
+  const { open, setOpen, ...store } = useLayoutStore(
+    useShallow((state) => ({
+      open: state.openUser, //
+      setOpen: state.setOpenUser,
+      me: state.me,
+      switchOrg: state.switchOrg,
+    })),
+  );
+  const navigate = useNavigate();
+  const items = useMemo(() => {
+    const orgs = store.me?.orgs || [];
+    return orgs.map((item) => {
+      return {
+        label: item,
+        key: item,
+        icon: <SmileOutlined />,
+      };
+    });
+  }, [store.me]);
+  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'
+        onClick={() => {
+          setOpen(false);
+        }}></div>
+      <div className='w-[400px] h-full absolute top-0 right-0 bg-white rounded-l-lg'>
+        <div className='flex justify-between p-6 font-bold items-center border-b'>
+          User: {store.me?.username}
+          <div className='flex gap-4'>
+            {items.length > 0 && (
+              <Dropdown
+                placement='bottomRight'
+                menu={{
+                  items: items,
+                  onClick: (item) => {
+                    store.switchOrg(item.key, 'org');
+                  },
+                }}>
+                <Button icon={<SwapOutlined />} onClick={() => {}}></Button>
+              </Dropdown>
+            )}
+            <Button icon={<CloseOutlined />} onClick={() => setOpen(false)}></Button>
+          </div>
+        </div>
+        <div className='mt-3 font-medium'>
+          {meun.map((item, index) => {
+            return (
+              <div
+                key={index}
+                className='flex items-center p-4 hover:bg-gray-100 cursor-pointer'
+                onClick={() => {
+                  if (item.link) {
+                    navigate(item.link);
+                  } else {
+                    message.info('Coming soon');
+                  }
+                }}>
+                <div className='mr-4'>{item.icon}</div>
+                <div>{item.title}</div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/src/modules/layout/Menu.tsx
+++ b/src/modules/layout/Menu.tsx
@ -1,8 +1,20 @@
 import { useShallow } from 'zustand/react/shallow';
-import { useMenuStore } from './store';
+import { useLayoutStore } from './store';
 import clsx from 'clsx';
 import { Button, message } from 'antd';
-import { CloseOutlined, CodeOutlined, DashboardOutlined, HomeOutlined, MessageOutlined, ReadOutlined, RocketOutlined, SmileOutlined } from '@ant-design/icons';
+import {
+  AppstoreOutlined,
+  CloseOutlined,
+  CodeOutlined,
+  DashboardOutlined,
+  FolderOutlined,
+  HomeOutlined,
+  MessageOutlined,
+  ReadOutlined,
+  RocketOutlined,
+  SmileOutlined,
+  SwitcherOutlined,
+} from '@ant-design/icons';
 import { useNavigate } from 'react-router';
 const meun = [
  {
@ -15,6 +27,16 @@ const meun = [
    icon: <DashboardOutlined />,
    link: '/panel/edit/list',
  },
+  {
+    title: 'User App',
+    icon: <AppstoreOutlined />,
+    link: '/app/edit/list',
+  },
+  {
+    title: 'File App',
+    icon: <FolderOutlined />,
+    link: '/file/edit/list',
+  },
  {
    title: 'Prompt',
    icon: <MessageOutlined />,
@ -35,13 +57,18 @@ const meun = [
    icon: <ReadOutlined />,
    link: '/chat/chat-prompt/list',
  },
+  {
+    title: 'Org',
+    icon: <SwitcherOutlined />,
+    link: '/org/edit/list',
+  },
  {
    title: 'About',
    icon: <SmileOutlined />,
  },
 ];
 export const LayoutMenu = () => {
-  const { open, setOpen } = useMenuStore(useShallow((state) => ({ open: state.open, setOpen: state.setOpen })));
+  const { open, setOpen } = useLayoutStore(useShallow((state) => ({ open: state.open, setOpen: state.setOpen })));
  const navigate = useNavigate();
  return (
    <div className={clsx('w-full h-full absolute z-20', !open && 'hidden')}>
--- a/src/modules/layout/index.tsx
+++ b/src/modules/layout/index.tsx
@ -1,21 +1,33 @@
 import { AiMoudle } from '@/pages/ai-chat';
-import { MenuOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import { MenuOutlined, SwapOutlined } from '@ant-design/icons';
+import { Button, Tooltip } from 'antd';
 import { Outlet } from 'react-router-dom';
 import { LayoutMenu } from './Menu';
-import { useMenuStore } from './store';
+import { useLayoutStore } from './store';
 import { useShallow } from 'zustand/react/shallow';
+import { useEffect } from 'react';
+import { LayoutUser } from './LayoutUser';

 type LayoutMainProps = {
  title?: React.ReactNode;
  children?: React.ReactNode;
 };
 export const LayoutMain = (props: LayoutMainProps) => {
-  const menuStore = useMenuStore(
+  const menuStore = useLayoutStore(
    useShallow((state) => {
-      return { open: state.open, setOpen: state.setOpen };
+      return {
+        open: state.open,
+        setOpen: state.setOpen, //
+        getMe: state.getMe,
+        me: state.me,
+        setOpenUser: state.setOpenUser,
+        switchOrg: state.switchOrg,
+      };
    }),
  );
+  useEffect(() => {
+    menuStore.getMe();
+  }, []);
  return (
    <div className='flex w-full h-full flex-col relative'>
      <LayoutMenu />
@ -26,7 +38,26 @@ export const LayoutMain = (props: LayoutMainProps) => {
            menuStore.setOpen(true);
          }}
          icon={<MenuOutlined />}></Button>
-        <div className='flex flex-grow justify-between'>{props.title}</div>
+        <div className='flex flex-grow justify-between'>
+          {props.title}
+          <div className='mr-4 flex gap-4 items-center'>
+            {menuStore.me?.type === 'org' && (
+              <div>
+                <Tooltip title='Switch To User'>
+                  <Button
+                    icon={<SwapOutlined />}
+                    onClick={() => {
+                      menuStore.switchOrg('', 'user');
+                    }}></Button>
+                </Tooltip>
+              </div>
+            )}
+            <div className='w-8 h-8 rounded-full bg-blue-200 avatar cursor-pointer' onClick={() => menuStore.setOpenUser(true)}></div>
+            <div className='cursor-pointer' onClick={() => menuStore.setOpenUser(true)}>
+              {menuStore.me?.username}
+            </div>
+          </div>
+        </div>
      </div>
      <div
        className='flex'
@ -40,6 +71,7 @@ export const LayoutMain = (props: LayoutMainProps) => {
        </div>
        <AiMoudle />
      </div>
+      <LayoutUser />
    </div>
  );
 };
--- a/src/modules/layout/store/index.ts
+++ b/src/modules/layout/store/index.ts
@ -1,10 +1,58 @@
+import { query } from '@/modules/query';
+import { message } from 'antd';
 import { create } from 'zustand';

-export type MenuStore = {
+type Me = {
+  id?: string;
+  username?: string;
+  needChangePassword?: boolean;
+  role?: string;
+  description?: string;
+  type?: 'user' | 'org';
+  orgs?: string[];
+};
+export type LayoutStore = {
  open: boolean;
  setOpen: (open: boolean) => void;
+  me: Me;
+  setMe: (me: Me) => void;
+  getMe: () => Promise<void>;
+  openUser: boolean;
+  setOpenUser: (openUser: boolean) => void;
+  switchOrg: (username?: string, type?: 'user' | 'org') => Promise<void>;
 };
-export const useMenuStore = create<MenuStore>((set) => ({
+export const useLayoutStore = create<LayoutStore>((set) => ({
  open: false,
  setOpen: (open) => set({ open }),
+  me: {},
+  setMe: (me) => set({ me }),
+  getMe: async () => {
+    const res = await query.post({
+      path: 'user',
+      key: 'me',
+    });
+    if (res.code === 200) {
+      set({ me: res.data });
+    }
+  },
+  openUser: false,
+  setOpenUser: (openUser) => set({ openUser }),
+  switchOrg: async (username?: string, type?: string) => {
+    const res = await query.post({
+      path: 'user',
+      key: 'switchOrg',
+      data: {
+        username,
+        type,
+      },
+    });
+    if (res.code === 200) {
+      const { token } = res.data;
+      query.saveToken(token);
+      message.success('Switch success');
+      window.location.reload();
+    } else {
+      message.error(res.message || 'Request failed');
+    }
+  },
 }));
--- a/src/modules/query.ts
+++ b/src/modules/query.ts
@ -2,6 +2,7 @@ import { Query, QueryClient } from '@kevisual/query';
 import { QueryWs } from '@kevisual/query/ws';
 import { modal } from './redirect-to-login';
 import { create } from 'zustand';
+import { message } from 'antd';
 export const query = new QueryClient();
 query.beforeRequest = async (config) => {
  if (config.headers) {
@ -13,7 +14,12 @@ query.beforeRequest = async (config) => {
  return config;
 };
 query.afterResponse = async (res) => {
-  if (res.code === 401 || res.code === 403) {
+  if (res.code === 401) {
+    if (!res?.message) {
+      message.error('Unauthorized');
+    }
+  }
+  if (res.code === 403) {
    modal.setOpen(true);
  }
  return res;
--- a/src/pages/app/edit/AppVersionList.tsx
+++ b/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>
+    </>
+  );
+};
--- a/src/pages/app/edit/List.tsx
+++ b/src/pages/app/edit/List.tsx
@ -1,8 +1,8 @@
 import { useShallow } from 'zustand/react/shallow';
 import { useUserAppStore } from '../store';
 import { useEffect } from 'react';
-import { Button, Form, Input, Modal } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import { Button, Form, Input, Modal, Select, Tooltip } from 'antd';
+import { DeleteOutlined, EditOutlined, PlusOutlined, UnorderedListOutlined } from '@ant-design/icons';
 import { isObjectNull } from '@/utils/is-null';
 import { useNavigate } from 'react-router';
 import { FileUpload } from '../modules/FileUpload';
@ -61,12 +61,23 @@ const FormModal = () => {
        <Form.Item name='title' label='title'>
          <Input />
        </Form.Item>
+        <Form.Item name='domain' label='domain'>
+          <Input />
+        </Form.Item>
        <Form.Item name='key' label='key'>
          <Input />
        </Form.Item>
        <Form.Item name='description' label='description'>
          <Input.TextArea rows={4} />
        </Form.Item>
+        <Form.Item name='status' label='status'>
+          <Select
+            options={[
+              { label: 'Running', value: 'running' },
+              { label: 'Stop', value: 'stop' },
+            ]}
+          />
+        </Form.Item>
        <Form.Item label=' ' colon={false}>
          <Button type='primary' htmlType='submit'>
            Submit
@ -87,6 +98,9 @@ export const List = () => {
        list: state.list,
        getList: state.getList,
        setShowEdit: state.setShowEdit,
+        formData: state.formData,
+        setFormData: state.setFormData,
+        deleteData: state.deleteData,
      };
    }),
  );
@ -109,13 +123,32 @@ export const List = () => {
            <div className='flex flex-wrap gap-2'>
              {userAppStore.list.map((item) => {
                return (
-                  <div
-                    className='card border-t w-[300px] '
-                    key={item.id}
-                    onClick={() => {
-                      navicate(`/app/${item.key}/verison/list`);
-                    }}>
-                    <div className='card-title'>{item.title}</div>
+                  <div className='card border-t w-[300px] ' key={item.id}>
+                    <div className='card-title' onClick={() => {}}>
+                      {item.title}
+                    </div>
+                    <div className='mt-2'>
+                      <Button.Group>
+                        <Tooltip title={'Edit'}>
+                          <Button
+                            icon={<EditOutlined />}
+                            onClick={() => {
+                              userAppStore.setFormData(item);
+                              userAppStore.setShowEdit(true);
+                            }}></Button>
+                        </Tooltip>
+                        <Tooltip title={'App Version List'}>
+                          <Button
+                            icon={<UnorderedListOutlined />}
+                            onClick={() => {
+                              navicate(`/app/${item.key}/verison/list`);
+                            }}></Button>
+                        </Tooltip>
+                        <Tooltip title={'Delete'}>
+                          <Button icon={<DeleteOutlined />} onClick={() => userAppStore.deleteData(item.id)}></Button>
+                        </Tooltip>
+                      </Button.Group>
+                    </div>
                  </div>
                );
              })}
--- a/src/pages/app/modules/FileUpload.tsx
+++ b/src/pages/app/modules/FileUpload.tsx
@ -1,3 +1,8 @@
+import { Button, message } from 'antd';
+import { useCallback, useRef } from 'react';
+import { useAppVersionStore } from '../store';
+import { useShallow } from 'zustand/react/shallow';
+
 export type FileType = {
  name: string;
  size: number;
@ -6,51 +11,86 @@ export type FileType = {
 };

 export const FileUpload = () => {
-  const onChange = async (e) => {
-    console.log(e.target.files);
-    // webkitRelativePath
-    let files = Array.from(e.target.files) as any[];
-    console.log(files);
-    // 过滤 文件 .DS_Store
-    files = files.filter((file) => {
-      if (file.webkitRelativePath.startsWith('__MACOSX')) {
-        return false;
+  const ref = useRef<HTMLInputElement | null>(null);
+  const appVersionStore = useAppVersionStore(
+    useShallow((state) => {
+      return {
+        formData: state.formData,
+        setFormData: state.setFormData,
+        updateByFromData: state.updateByFromData,
+      };
+    }),
+  );
+  const onChange = useCallback(
+    async (e) => {
+      console.log(e.target.files);
+      // webkitRelativePath
+      let files = Array.from(e.target.files) as any[];
+      console.log(files);
+      // 过滤 文件 .DS_Store
+      files = files.filter((file) => {
+        if (file.webkitRelativePath.startsWith('__MACOSX')) {
+          return false;
+        }
+        return !file.name.startsWith('.');
+      });
+      if (files.length === 0) {
+        console.log('no files');
+        return;
      }
-      return !file.name.startsWith('.');
-    });
-    if (files.length === 0) {
-      console.log('no files');
-      return;
-    }
-    const root = files[0].webkitRelativePath.split('/')[0];
-    const formData = new FormData();
-    files.forEach((file) => {
-      // relativePath 去除第一级
-      const webkitRelativePath = file.webkitRelativePath.replace(root + '/', '');
-      formData.append('file', file, webkitRelativePath); // 保留文件夹路径
-    });
-    formData.append('appKey','codeflow');
-    formData.append('version', '0.0.2');
-    const res = await fetch('/api/app/upload', {
-      method: 'POST',
-      body: formData,//
-      headers: {
-        Authorization: 'Bearer ' + localStorage.getItem('token'),
-      },
-    });
-    console.log(res);
-  };
+      const root = files[0].webkitRelativePath.split('/')[0];
+      const formData = new FormData();
+      files.forEach((file) => {
+        // relativePath 去除第一级
+        const webkitRelativePath = file.webkitRelativePath.replace(root + '/', '');
+        formData.append('file', file, webkitRelativePath); // 保留文件夹路径
+      });
+      const key = appVersionStore.formData.key;
+      const version = appVersionStore.formData.version;
+      formData.append('appKey', key);
+      formData.append('version', version);
+      const res = await fetch('/api/app/upload', {
+        method: 'POST',
+        body: formData, //
+        headers: {
+          Authorization: 'Bearer ' + localStorage.getItem('token'),
+        },
+      }).then((res) => res.json());
+      if (res?.code === 200) {
+        appVersionStore.setFormData(res.data);
+        appVersionStore.updateByFromData();
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+      // 清理之前上传的文件
+      e.target.value = '';
+    },
+    [appVersionStore.formData],
+  );

  return (
    <div>
-      文件上传:
      <input
+        className='hidden'
+        ref={ref}
        type='file'
        // @ts-ignore
        webkitdirectory='true'
        multiple
        onChange={onChange}
      />
+      <Button
+        onClick={() => {
+          const key = appVersionStore.formData.key;
+          const version = appVersionStore.formData.version;
+          if (!key || !version) {
+            message.error('请先选择应用和版本');
+            return;
+          }
+          ref.current!.click();
+        }}>
+        上传文件夹
+      </Button>
    </div>
  );
 };
--- a/src/pages/app/store/app-version.ts
+++ b/src/pages/app/store/app-version.ts
@ -1,20 +1,25 @@
 import { create } from 'zustand';
 import { query } from '@/modules';
 import { message } from 'antd';
+import { isObjectNull } from '@/utils/is-null';

 type AppVersionStore = {
  showEdit: boolean;
  setShowEdit: (showEdit: boolean) => void;
  formData: any;
  setFormData: (formData: any) => void;
+  updateByFromData: () => void;
  loading: boolean;
  setLoading: (loading: boolean) => void;
  key: string;
  setKey: (key: string) => void;
  list: any[];
  getList: () => Promise<void>;
+  app: any;
+  getApp: (key: string, force?: boolean) => Promise<void>;
  updateData: (data: any) => Promise<void>;
  deleteData: (id: string) => Promise<void>;
+  publishVersion: (data: any) => Promise<void>;
 };
 export const useAppVersionStore = create<AppVersionStore>((set, get) => {
  return {
@ -22,6 +27,16 @@ export const useAppVersionStore = create<AppVersionStore>((set, get) => {
    setShowEdit: (showEdit) => set({ showEdit }),
    formData: {},
    setFormData: (formData) => set({ formData }),
+    updateByFromData: () => {
+      const { formData, list } = get();
+      const data = list.map((item) => {
+        if (item.id === formData.id) {
+          return formData;
+        }
+        return item;
+      });
+      set({ list: data });
+    },
    loading: false,
    setLoading: (loading) => set({ loading }),
    key: '',
@ -38,6 +53,7 @@ export const useAppVersionStore = create<AppVersionStore>((set, get) => {
          key,
        },
      });
+      get().getApp(key);
      set({ loading: false });
      if (res.code === 200) {
        set({ list: res.data });
@ -45,6 +61,25 @@ export const useAppVersionStore = create<AppVersionStore>((set, get) => {
        message.error(res.message || 'Request failed');
      }
    },
+    app: {},
+    getApp: async (key, force) => {
+      const { app } = get();
+      if (!force && !isObjectNull(app)) {
+        return;
+      }
+      const res = await query.post({
+        path: 'user-app',
+        key: 'get',
+        data: {
+          key,
+        },
+      });
+      if (res.code === 200) {
+        set({ app: res.data });
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
    updateData: async (data) => {
      const { getList } = get();
      const res = await query.post({
@ -74,5 +109,22 @@ export const useAppVersionStore = create<AppVersionStore>((set, get) => {
        message.error(res.message || 'Request failed');
      }
    },
+    publishVersion: async (data) => {
+      const { getList } = get();
+      const loaded = message.loading('Publishing...', 0);
+      const res = await query.post({
+        path: 'app',
+        key: 'publish',
+        data,
+      });
+      loaded();
+      if (res.code === 200) {
+        message.success('Success');
+        // getList();
+        get().getApp(get().key, true);
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
  };
 });
--- a/src/pages/org/edit/List.tsx
+++ b/src/pages/org/edit/List.tsx
@ -0,0 +1,212 @@
+import { Button, Input, message, Modal, Table, Tooltip } from 'antd';
+import { Fragment, useEffect, useMemo, useState } from 'react';
+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 clsx from 'clsx';
+import { isObjectNull } from '@/utils/is-null';
+import { CardBlank } from '@/components/card/CardBlank';
+import { useLayoutStore } from '@/modules/layout/store';
+
+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);
+    form.setFieldsValue({});
+    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='description' label='description'>
+          <Input.TextArea rows={4} />
+        </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 List = () => {
+  const navicate = useNavigate();
+  const userStore = useOrgStore(
+    useShallow((state) => {
+      return {
+        setFormData: state.setFormData,
+        setShowEdit: state.setShowEdit,
+        list: state.list,
+        deleteData: state.deleteData,
+        getList: state.getList,
+        loading: state.loading,
+        updateData: state.updateData,
+        formData: state.formData,
+      };
+    }),
+  );
+  const layoutStore = useLayoutStore(
+    useShallow((state) => {
+      return {
+        switchOrg: state.switchOrg,
+      };
+    }),
+  );
+  const [codeEdit, setCodeEdit] = useState(false);
+  const [code, setCode] = useState('');
+  useEffect(() => {
+    userStore.getList();
+  }, []);
+
+  const onAdd = () => {
+    userStore.setFormData({});
+    userStore.setShowEdit(true);
+  };
+  return (
+    <div className='w-full h-full flex'>
+      <div className='p-2'>
+        <Button onClick={onAdd} icon={<PlusOutlined />}></Button>
+      </div>
+      <div className='flex flex-grow overflow-hidden h-full'>
+        <div className='flex-grow overflow-auto scrollbar bg-gray-100'>
+          <div className='flex  flex-wrap   gap-x-10 gap-y-4 rounded pt-10  justify-center'>
+            {userStore.list.length > 0 &&
+              userStore.list.map((item) => {
+                return (
+                  <Fragment key={item.id}>
+                    <div
+                      className='flex text-sm gap flex-col w-[400px] max-h-[400px] bg-white p-4 rounded-lg'
+                      key={item.id}
+                      onClick={() => {
+                        setCode(item.code);
+                        userStore.setFormData(item);
+                        setCodeEdit(true);
+                      }}>
+                      <div className='px-4 cursor-pointer'>
+                        <div
+                          className='font-bold'
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            // message.success('copy code success');
+                          }}>
+                          {item.username || '-'}
+                        </div>
+                        <div className='font-light text-xs mt-2'>{item.description ? item.description : '-'}</div>
+                      </div>
+                      <div className='flex mt-2 '>
+                        <Button.Group>
+                          <Button
+                            onClick={(e) => {
+                              userStore.setFormData(item);
+                              userStore.setShowEdit(true);
+                              setCodeEdit(false);
+                              e.stopPropagation();
+                            }}
+                            icon={<EditOutlined />}></Button>
+                          <Button
+                            onClick={(e) => {
+                              userStore.deleteData(item.id);
+                              e.stopPropagation();
+                            }}
+                            icon={<DeleteOutlined />}></Button>
+                          <Tooltip title='Switch to Org'>
+                            <Button
+                              icon={<SwapOutlined />}
+                              onClick={() => {
+                                layoutStore.switchOrg(item.username);
+                              }}></Button>
+                          </Tooltip>
+                        </Button.Group>
+                      </div>
+                    </div>
+                  </Fragment>
+                );
+              })}
+            {userStore.list.length == 0 && <div className='text-center'>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', 'hidden')}>
+          <div className='bg-white  p-2'>
+            <div className='mt-2 ml-2 flex gap-2'>
+              <Button
+                onClick={() => {
+                  setCodeEdit(false);
+                  userStore.setFormData({});
+                }}
+                icon={<LeftOutlined />}></Button>
+              <Button
+                onClick={() => {
+                  console.log('save', userStore.formData);
+                  userStore.updateData({ ...userStore.formData, code });
+                }}
+                icon={<SaveOutlined />}></Button>
+            </div>
+          </div>
+          <div className='h-[94%] p-2 rounded-2 shadow-sm'>
+            <Input.TextArea
+              value={code}
+              onChange={(value) => {
+                // setCode(value);
+              }}
+              className='h-full max-h-full scrollbar'
+              style={{ overflow: 'auto' }}
+            />
+          </div>
+        </div>
+      </div>
+      <FormModal />
+    </div>
+  );
+};
--- a/src/pages/org/index.tsx
+++ b/src/pages/org/index.tsx
@ -0,0 +1,13 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { List } from './edit/List';
+import { Main } from './layouts';
+export const App = () => {
+  return (
+    <Routes>
+      <Route element={<Main />}>
+        <Route path='/' element={<Navigate to='/org/edit/list' />}></Route>
+        <Route path='edit/list' element={<List />} />
+      </Route>
+    </Routes>
+  );
+};
--- a/src/pages/org/layouts/index.tsx
+++ b/src/pages/org/layouts/index.tsx
@ -0,0 +1,4 @@
+import { LayoutMain } from '@/modules/layout';
+export const Main = () => {
+  return <LayoutMain title='User' />;
+};
--- a/src/pages/org/store/index.ts
+++ b/src/pages/org/store/index.ts
@ -0,0 +1,69 @@
+import { create } from 'zustand';
+import { query } from '@/modules';
+import { message } from 'antd';
+type OrgStore = {
+  showEdit: boolean;
+  setShowEdit: (showEdit: boolean) => void;
+  formData: any;
+  setFormData: (formData: any) => void;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  list: any[];
+  getList: () => Promise<void>;
+  updateData: (data: any) => Promise<void>;
+  deleteData: (id: string) => Promise<void>;
+};
+export const useOrgStore = create<OrgStore>((set, get) => {
+  return {
+    showEdit: false,
+    setShowEdit: (showEdit) => set({ showEdit }),
+    formData: {},
+    setFormData: (formData) => set({ formData }),
+    loading: false,
+    setLoading: (loading) => set({ loading }),
+    list: [],
+    getList: async () => {
+      set({ loading: true });
+
+      const res = await query.post({
+        path: 'org',
+        key: 'list',
+      });
+      set({ loading: false });
+      if (res.code === 200) {
+        set({ list: res.data });
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+    updateData: async (data) => {
+      const { getList } = get();
+      const res = await query.post({
+        path: 'org',
+        key: 'update',
+        data,
+      });
+      if (res.code === 200) {
+        message.success('Success');
+        set({ showEdit: false, formData: [] });
+        getList();
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+    deleteData: async (id) => {
+      const { getList } = get();
+      const res = await query.post({
+        path: 'org',
+        key: 'delete',
+        id,
+      });
+      if (res.code === 200) {
+        getList();
+        message.success('Success');
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
+  };
+});
--- a/src/pages/panel/deck/index.tsx
+++ b/src/pages/panel/deck/index.tsx
@ -11,6 +11,7 @@ import { CloseOutlined, MessageOutlined, SaveOutlined, SelectOutlined } from '@a
 import { useDeckPageStore } from './deck-store';
 import { FormModal } from './Model.tsx';
 import { useAiStore } from '@/pages/ai-chat/index.tsx';
+
 export const useListener = (id?: string, opts?: any) => {
  const { refresh } = opts || {};
  const connected = useStore((state) => state.connected);
@ -269,14 +270,10 @@ export const Deck = () => {
    deckPageStore.setPageData([..._pageData]);
  };
  const init = async (data: any[]) => {
-    console.log(
-      'init',
-      data.filter((item) => item.codeId),
-    );
    // console.log('data', data, ref.current);
    const container = new ContainerEdit({
      root: ref.current!,
-      data: data.filter((item) => item.codeId),
+      data: data,
      showChild: true,
      // edit: false,
    });
--- a/src/pages/panel/edit/List.tsx
+++ b/src/pages/panel/edit/List.tsx
@ -7,8 +7,10 @@ import copy from 'copy-to-clipboard';
 import { useNavigate } from 'react-router';
 import { useToCodeEditor } from '@/pages/code-editor';
 import { CardBlank } from '@/components/card/CardBlank';
-import { DeleteOutlined, EditOutlined, ForkOutlined, GoldOutlined, PlusOutlined, ToolOutlined } from '@ant-design/icons';
+import { CloudUploadOutlined, DeleteOutlined, EditOutlined, ForkOutlined, GoldOutlined, PlusOutlined, ToolOutlined } from '@ant-design/icons';
 import { isObjectNull } from '@/utils/is-null';
+import { PublishFormModal } from './modal/PublishFormModal';
+
 const FormModal = () => {
  const [form] = Form.useForm();
  const editStore = useEditStore(
@ -97,6 +99,7 @@ export const List = () => {
        deleteData: state.deleteData,
        getList: state.getList,
        loading: state.loading,
+        setShowPublishModal: state.setShowPublishModal,
      };
    }),
  );
@ -160,6 +163,15 @@ export const List = () => {
                            icon={<ToolOutlined />}
                          />
                        </Tooltip>
+                        <Tooltip title='Publish'>
+                          <Button
+                            onClick={() => {
+                              editStore.setFormData(item);
+                              editStore.setShowPublishModal(true);
+                            }}
+                            icon={<CloudUploadOutlined />}
+                          />
+                        </Tooltip>
                        <Tooltip title='delete'>
                          <Button
                            onClick={() => {
@ -179,6 +191,7 @@ export const List = () => {
        </div>
      </div>
      <FormModal />
+      <PublishFormModal />
    </div>
  );
 };
--- a/src/pages/panel/edit/modal/PublishFormModal.tsx
+++ b/src/pages/panel/edit/modal/PublishFormModal.tsx
@ -0,0 +1,97 @@
+import { useEditStore } from '../../store';
+import { Button, Input, message, Modal, Tooltip } from 'antd';
+import { useEffect, version } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { Form } from 'antd';
+import { CloudUploadOutlined, DeleteOutlined, EditOutlined, ForkOutlined, GoldOutlined, PlusOutlined, ToolOutlined } from '@ant-design/icons';
+import { isObjectNull } from '@/utils/is-null';
+
+export const PublishFormModal = () => {
+  const [form] = Form.useForm();
+  const editStore = useEditStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showPublishModal,
+        setShowEdit: state.setShowPublishModal,
+        formData: state.formData,
+        setFormData: state.setFormData,
+        updateData: state.updateData,
+        publishData: state.publishData,
+      };
+    }),
+  );
+  useEffect(() => {
+    const open = editStore.showEdit;
+    if (open) {
+      if (isObjectNull(editStore.formData.data)) {
+        form.setFieldsValue({
+          publish: {},
+        });
+      } else
+        form.setFieldsValue({
+          ...editStore.formData,
+          publish: {
+            ...editStore.formData?.publish,
+          },
+        });
+    }
+  }, [editStore.showEdit, editStore.formData]);
+  const onFinish = async (values: any) => {
+    editStore.updateData(values);
+  };
+  const onClose = () => {
+    editStore.setShowEdit(false);
+    form.resetFields();
+    editStore.setFormData({});
+  };
+  const isEdit = editStore.formData.publish?.id;
+  const onPublish = () => {
+    // @ts-ignore
+    const values = form.getFieldsValue();
+    editStore.publishData(values);
+  };
+  return (
+    <Modal title={'Version Publish'} open={editStore.showEdit} onClose={onClose} 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={['publish', 'id']} hidden>
+          <Input />
+        </Form.Item>
+        <Form.Item name={['publish', 'key']} label='key'>
+          <Input disabled={isEdit} />
+        </Form.Item>
+        <Form.Item name={['publish', 'version']} label='version'>
+          <Input
+            disabled={isEdit}
+            addonAfter={
+              <div className='cursor-pointer hover:text-gray-400' onClick={onPublish}>
+                发布
+              </div>
+            }
+          />
+        </Form.Item>
+        <Form.Item name={['publish', 'description']} label='description'>
+          <Input.TextArea rows={4} />
+        </Form.Item>
+        <Form.Item label=' ' colon={false}>
+          <Button type='primary' htmlType='submit'>
+            Save
+          </Button>
+          <Button className='ml-2' htmlType='reset' onClick={onClose}>
+            Cancel
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
--- a/src/pages/panel/store/edit.ts
+++ b/src/pages/panel/store/edit.ts
@ -13,6 +13,9 @@ type EditStore = {
  getList: () => Promise<void>;
  updateData: (data: any) => Promise<void>;
  deleteData: (id: string) => Promise<void>;
+  showPublishModal: boolean;
+  setShowPublishModal: (showPublishModal: boolean) => void;
+  publishData: (data: any) => Promise<void>;
 };
 export const useEditStore = create<EditStore>((set, get) => {
  return {
@ -49,6 +52,27 @@ export const useEditStore = create<EditStore>((set, get) => {
        message.error(res.message || 'Request failed');
      }
    },
+    publishData: async (data) => {
+      const { getList, list } = get();
+      const res = await query.post({
+        path: 'page',
+        key: 'publish',
+        data,
+      });
+      if (res.code === 200) {
+        message.success('Success');
+        set({ formData: res.data });
+        const newList = list.map((item) => {
+          if (item.id === data.id) {
+            return res.data;
+          }
+          return item;
+        });
+        set({ list: newList });
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
    deleteData: async (id) => {
      const { getList } = get();
      const res = await query.post({
@ -63,5 +87,7 @@ export const useEditStore = create<EditStore>((set, get) => {
        message.error(res.message || 'Request failed');
      }
    },
+    showPublishModal: false,
+    setShowPublishModal: (showPublishModal) => set({ showPublishModal }),
  };
 });
--- a/src/pages/panel/store/panel.ts
+++ b/src/pages/panel/store/panel.ts
@ -70,7 +70,7 @@ export const usePanelStore = create<PanelStore>((set, get) => {
        },
      });
      if (res.code === 200) {
-        message.success('Success');
+        message.success('Success', 1);
        set(
          produce((state) => {
            state.data = res.data;
@ -92,7 +92,7 @@ export const usePanelStore = create<PanelStore>((set, get) => {
        },
      });
      if (res.code === 200) {
-        message.success('Success');
+        message.success('Success', 1);
        // getList();
      } else {
        message.error(res.message || 'Request failed');
@ -114,7 +114,7 @@ export const usePanelStore = create<PanelStore>((set, get) => {
      loaded();
      set({ loading: false });
      if (res.code === 200) {
-        message.success('Success');
+        message.success('Update Style Success', 1);
        // getList();
        return true;
      } else {
--- a/src/pages/user/edit/List.tsx
+++ b/src/pages/user/edit/List.tsx
@ -4,7 +4,7 @@ import { useUserStore } from '../store';
 import { useShallow } from 'zustand/react/shallow';
 import { Form } from 'antd';
 import { useNavigate } from 'react-router';
-import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined } from '@ant-design/icons';
+import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, PlusOutlined } from '@ant-design/icons';
 import clsx from 'clsx';
 import { isObjectNull } from '@/utils/is-null';
 import { CardBlank } from '@/components/card/CardBlank';
@ -106,7 +106,10 @@ export const List = () => {
    userStore.setShowEdit(true);
  };
  return (
-    <div className='w-full h-full flex flex-col'>
+    <div className='w-full h-full flex'>
+      <div className='p-2'>
+        <Button onClick={onAdd} icon={<PlusOutlined />}></Button>
+      </div>
      <div className='flex flex-grow overflow-hidden h-full'>
        <div className='flex-grow overflow-auto scrollbar bg-gray-100'>
          <div className='flex  flex-wrap   gap-x-10 gap-y-4 rounded pt-10  justify-center'>
--- a/src/pages/user/layouts/index.tsx
+++ b/src/pages/user/layouts/index.tsx
@ -1,46 +1,4 @@
-import { PlusOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
-import { Outlet, useLocation } from 'react-router';
-import { useUserStore } from '../store';
-import { useEffect } from 'react';
-import { useShallow } from 'zustand/react/shallow';
-
+import { LayoutMain } from '@/modules/layout';
 export const Main = () => {
-  const containerStore = useUserStore(
-    useShallow((state) => {
-      return {
-        setFormData: state.setFormData,
-        setShowEdit: state.setShowEdit,
-      };
-    }),
-  );
-  const location = useLocation();
-  const isEdit = location.pathname.includes('edit/list');
-  return (
-    <div className='flex w-full h-full flex-col'>
-      <div className='layout-menu'>
-        User
-        <Button
-          className={!isEdit ? 'hidden' : 'hidden'}
-          icon={<PlusOutlined />}
-          onClick={() => {
-            console.log('add');
-            containerStore.setFormData({});
-            containerStore.setShowEdit(true);
-          }}
-        />
-      </div>
-      <div
-        className='flex'
-        style={{
-          height: 'calc(100vh - 3rem)',
-        }}>
-        <div className='flex-grow overflow-hidden'>
-          <div className='w-full h-full rounded-lg'>
-            <Outlet />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+  return <LayoutMain title='User' />;
 };