feat: 添加store

2025-03-23 21:43:15 +08:00
parent cbbb48af97
commit ef50106e5c
9 changed files with 105 additions and 28 deletions
--- a/src/globals.css
+++ b/src/globals.css
@@ -19,16 +19,16 @@ h3 {
  @apply text-lg font-bold;
 }
@utility card-subtitle {
-  @apply text-sm text-gray-500;
+  @apply text-sm ;
 }
@utility card-description {
-  @apply text-gray-700 break-words;
+  @apply break-words;
 }
@utility card-code {
  @apply bg-gray-100 p-2;
 }
@utility card-body {
-  @apply text-gray-700;
+  @apply p-2;
 }
@utility card-key {
  @apply text-xs;
--- a/src/pages/config/edit/List.tsx
+++ b/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>
--- a/src/pages/config/store/config.ts
+++ b/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('获取配置失败');
+    }
+  },
 }));