feat: 添加store

src/pages/config/edit/List.tsx

@@ -18,6 +18,7 @@ import { toast } from 'react-toastify';
 import { isEmpty, pick } from 'lodash-es';
 import { usePermissionModal } from '@kevisual/resources/index.ts';
 import React from 'react';
+import { queryLogin } from '@/modules';
 type DataYamlEditProps = {
   onSave: (data: any) => Promise<void>;
   type?: 'yaml' | 'json';
@@ -188,10 +189,15 @@ export const MyController = React.forwardRef(
   },
 );
 export const List = () => {
-  const { list, getConfig, setShowEdit, setFormData, deleteConfig, updateData, formData, detectConfig } = useConfigStore();
+  const { list, getConfigList, setShowEdit, setFormData, deleteConfig, updateData, formData, detectConfig, onOpenKey } = useConfigStore();
   const [modal, contextHolder] = useModal();
+  const [isAdmin, setIsAdmin] = useState<boolean>(false);
   useEffect(() => {
-    getConfig();
+    getConfigList();
+    queryLogin.cacheStore.getCurrentUser().then((res) => {
+      const org = res?.orgs || [];
+      setIsAdmin(org.includes('admin'));
+    });
   }, []);
   const { setOpen, contextHolder: contextHolderPermission } = usePermissionModal({
     onSave: async (values) => {
@@ -206,25 +212,27 @@ export const List = () => {
       return true;
     },
   });
-  console.log(list);
   const { t } = useTranslation();
+
   return (
     <div className='w-full h-full flex bg-gray-100'>
       <div className='h-full bg-white'>
         <div className='p-2'>
-          <IconButton
-            onClick={() => {
-              setShowEdit(true);
-              setFormData({});
-            }}>
-            <Plus size={16} />
-          </IconButton>
+          <Tooltip title={t('Add Config Tips')}>
+            <IconButton
+              onClick={() => {
+                setShowEdit(true);
+                setFormData({});
+              }}>
+              <Plus size={16} />
+            </IconButton>
+          </Tooltip>
         </div>
       </div>
 
       <div className=' grow p-4 '>
         <div className='flex pb-4 gap-4'>
-          <Tooltip title={t('从config的json的配置的数据同步过来。')}>
+          <Tooltip title={t('从上传的[config/1.0.0]路径的的json的配置的数据同步过来。')}>
             <Button
               variant='contained'
               color='primary'
@@ -235,16 +243,51 @@ export const List = () => {
               {t('Detect')}
             </Button>
           </Tooltip>
+          <Tooltip title={t('Upload Config Tips')}>
+            <Button
+              variant='contained'
+              color='primary'
+              size='small'
+              onClick={() => {
+                onOpenKey('upload.json');
+              }}>
+              {t('Upload Config')}
+            </Button>
+          </Tooltip>
+          <Tooltip title={t('Workspace Config Tips')}>
+            <Button
+              variant='contained'
+              color='primary'
+              size='small'
+              onClick={() => {
+                onOpenKey('workspace.json');
+              }}>
+              {t('Workspace Config')}
+            </Button>
+          </Tooltip>
+          {isAdmin && (
+            <Tooltip title={t('VIP Config Tips')}>
+              <Button
+                variant='contained'
+                color='primary'
+                size='small'
+                onClick={() => {
+                  onOpenKey('vip.json');
+                }}>
+                {t('VIP Config')}
+              </Button>
+            </Tooltip>
+          )}
         </div>
         <div className='w-full bg-white rounded-lg p-2 scrollbar ' style={{ height: 'calc(100% - 80px)' }}>
           <div className='flex flex-wrap gap-2 '>
             {list.map((item) => (
               <div className='card w-[300px] ' key={item.id}>
                 <div className='card-title flex font-bold justify-between'>{item.title}</div>
-                <div className='card-content'>
-                  <div className='flex gap-2'>
-                    <div>{t('Description')}:</div>
-                    <div>{item.description}</div>
+                <div className='t'>
+                  <div className='flex gap-2 '>
+                    <div className='shrink-0'>{t('Description')}:</div>
+                    <div className='break-all grow'>{item.description}</div>
                   </div>
                   <div className='flex gap-2'>
                     <div>{t('Key')}:</div>

src/pages/config/store/config.ts

@@ -7,7 +7,7 @@ export const queryConfig = new QueryConfig({ query: query as any });
 
 interface ConfigStore {
   list: any[];
-  getConfig: () => Promise<void>;
+  getConfigList: () => Promise<void>;
   updateData: (data: any, opts?: { refresh?: boolean }) => Promise<any>;
   showEdit: boolean;
   setShowEdit: (showEdit: boolean) => void;
@@ -15,11 +15,12 @@ interface ConfigStore {
   setFormData: (formData: any) => void;
   deleteConfig: (id: string) => Promise<void>;
   detectConfig: () => Promise<void>;
+  onOpenKey: (key: string) => Promise<void>;
 }
 
 export const useConfigStore = create<ConfigStore>((set, get) => ({
   list: [],
-  getConfig: async () => {
+  getConfigList: async () => {
     const res = await queryConfig.listConfig();
     if (res.code === 200) {
       set({ list: res.data?.list || [] });
@@ -30,7 +31,7 @@ export const useConfigStore = create<ConfigStore>((set, get) => ({
     if (res.code === 200) {
       get().setFormData(res.data);
       if (opts?.refresh ?? true) {
-        get().getConfig();
+        get().getConfigList();
       }
       toast.success('保存成功');
     } else {
@@ -45,7 +46,7 @@ export const useConfigStore = create<ConfigStore>((set, get) => ({
   deleteConfig: async (id: string) => {
     const res = await queryConfig.deleteConfig(id);
     if (res.code === 200) {
-      get().getConfig();
+      get().getConfigList();
       toast.success('删除成功');
     } else {
       toast.error('删除失败');
@@ -61,4 +62,17 @@ export const useConfigStore = create<ConfigStore>((set, get) => ({
       toast.error('检测失败');
     }
   },
+  onOpenKey: async (key: string) => {
+    const { setFormData, setShowEdit, getConfigList } = get();
+    const res = await queryConfig.getConfigByKey(key);
+    if (res.code === 200) {
+      const data = res.data;
+      setFormData(data);
+      setShowEdit(true);
+      getConfigList();
+    } else {
+      console.log(res);
+      toast.error('获取配置失败');
+    }
+  },
 }));