feat: add app and config

2025-03-23 02:59:41 +08:00 · 2025-03-23 02:59:41 +08:00 · 1d97ff88b9
commit 1d97ff88b9
parent 063837350b
24 changed files with 351 additions and 176 deletions
--- a/packages/components/src/index.tsx
+++ b/packages/components/src/index.tsx
@ -1 +1,6 @@
 export * from './theme';
+
+/**
+ * 输入组件, 使用theme的defaultProps
+ */
+export * from './input/TextField';
--- a/packages/components/src/input/TextField.tsx
+++ b/packages/components/src/input/TextField.tsx
@ -0,0 +1,23 @@
+import { TextField as MuiTextField, TextFieldProps, Tooltip } from '@mui/material';
+import { useTheme } from '../theme';
+import { HelpCircle } from 'lucide-react';
+
+export const TextField = (props: TextFieldProps) => {
+  const theme = useTheme();
+  const defaultProps = theme.components?.MuiTextField?.defaultProps;
+  return <MuiTextField {...defaultProps} {...props} />;
+};
+
+export const TextFieldLabel = ({ children, tips, label }: { children?: React.ReactNode; tips?: string; label?: any }) => {
+  return (
+    <div className='flex items-center gap-1'>
+      {label}
+      {children}
+      {tips && (
+        <Tooltip title={tips}>
+          <HelpCircle size={16} />
+        </Tooltip>
+      )}
+    </div>
+  );
+};
--- a/packages/components/src/select/TagsInput.tsx
+++ b/packages/components/src/select/TagsInput.tsx
@ -6,9 +6,10 @@ type TagsInputProps = {
  value: string[];
  onChange: (value: string[]) => void;
  placeholder?: string;
-  label?: string;
+  label?: any;
+  showLabel?: boolean;
 };
-export const TagsInput = ({ value, onChange, placeholder = 'Add a tag', label = 'Tags' }: TagsInputProps) => {
+export const TagsInput = ({ value, onChange, placeholder = '', label = '', showLabel = false }: TagsInputProps) => {
  const [tags, setTags] = useState<string[]>(value);
  useEffect(() => {
    setTags(value);
@ -26,6 +27,9 @@ export const TagsInput = ({ value, onChange, placeholder = 'Add a tag', label =
        // setTags(newValue as string[]);
        onChange(newValue as string[]);
      }}
+      sx={{
+        width: '100%',
+      }}
      renderTags={(value: string[], getTagProps) => {
        const id = randomid();
        const com = value.map((option: string, index: number) => (
@ -33,6 +37,13 @@ export const TagsInput = ({ value, onChange, placeholder = 'Add a tag', label =
            variant='outlined'
            sx={{
              borderColor: 'primary.main',
+              borderRadius: '4px',
+              '&:hover': {
+                borderColor: 'primary.main',
+              },
+              '& .MuiChip-deleteIcon': {
+                color: 'secondary.main',
+              },
            }}
            label={option}
            {...getTagProps({ index })}
@ -41,7 +52,7 @@ export const TagsInput = ({ value, onChange, placeholder = 'Add a tag', label =
        ));
        return <Fragment key={id}>{com}</Fragment>;
      }}
-      renderInput={(params) => <TextField {...params} variant='outlined' label={label} placeholder={placeholder} />}
+      renderInput={(params) => <TextField {...params} label={showLabel ? label : ''} placeholder={placeholder} />}
    />
  );
 };
--- a/packages/components/src/theme/index.tsx
+++ b/packages/components/src/theme/index.tsx
@ -35,19 +35,21 @@ const generateShadows = (color: string): Shadows => {
    `0px 13px 17px -8px ${color}`,
  ];
 };
+const primaryMain = amber[300]; // #ffc107
+const secondaryMain = amber[500]; // #ffa000
 export const themeOptions: ThemeOptions = {
  // @ts-ignore
  // cssVariables: true,
  palette: {
    primary: {
-      main: '#ffc107', // amber[300]
+      main: primaryMain, // amber[300]
    },
    secondary: {
-      main: '#ffa000', // amber[500]
+      main: secondaryMain, // amber[500]
    },
    divider: amber[200],
    common: {
-      white: '#ffa000',
+      white: secondaryMain,
    },
    text: {
      primary: amber[600],
@ -78,7 +80,7 @@ export const themeOptions: ThemeOptions = {
          '&.MuiButton-contained': {
            color: '#ffffff',
            ':hover': {
-              color: amber[500],
+              color: secondaryMain,
            },
          },
        },
@ -96,6 +98,7 @@ export const themeOptions: ThemeOptions = {
    MuiTextField: {
      defaultProps: {
        fullWidth: true,
+        size: 'small',
        slotProps: {
          inputLabel: {
            shrink: true,
@ -121,6 +124,11 @@ export const themeOptions: ThemeOptions = {
        },
      },
    },
+    MuiAutocomplete: {
+      defaultProps: {
+        size: 'small',
+      },
+    },
    MuiSelect: {
      styleOverrides: {
        root: {
@ -156,7 +164,10 @@ export const themeOptions: ThemeOptions = {
    MuiFormControlLabel: {
      defaultProps: {
        labelPlacement: 'top',
-        sx: {
+      },
+      styleOverrides: {
+        root: {
+          color: amber[600],
          alignItems: 'flex-start',
          '& .MuiFormControlLabel-label': {
            textAlign: 'left',
@ -170,9 +181,18 @@ export const themeOptions: ThemeOptions = {
          },
        },
      },
+    },
+    MuiMenuItem: {
      styleOverrides: {
        root: {
-          color: amber[600],
+          '&.Mui-selected': {
+            backgroundColor: amber[500],
+            color: '#ffffff',
+            '&:hover': {
+              backgroundColor: amber[600],
+              color: '#ffffff',
+            },
+          },
        },
      },
    },
@ -201,3 +221,6 @@ export const CustomThemeProvider = ({ children, themeOptions: customThemeOptions
  const theme = createTheme(customThemeOptions || themeOptions);
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 };
+
+// TODO: think
+export const getComponentProps = () => {};
--- a/packages/resources/src/index.ts
+++ b/packages/resources/src/index.ts
@ -1,3 +1,5 @@
 export { KeyParse, keysTips } from './pages/file/modules/key-parse';
+export { PermissionManager } from './pages/file/modules/PermissionManager.tsx';
+export { PermissionModal, usePermissionModal } from './pages/file/modules/PermissionModal.tsx';
 export { iText } from './i-text/index.ts';
 export * from './pages/upload/app';
--- a/packages/resources/src/pages/file/draw/modules/DatePicker.tsx
+++ b/packages/resources/src/pages/file/draw/modules/DatePicker.tsx
@ -1,6 +1,7 @@
 import ReactDatePicker from 'antd/es/date-picker';
 import { styled, useTheme } from '@mui/material';
 import 'antd/es/date-picker/style/index';
+import { useTranslation } from 'react-i18next';
 interface DatePickerProps {
  value?: Date | null;
  onChange?: (date: Date | null) => void;
@ -8,13 +9,14 @@ interface DatePickerProps {
 }

 export const DatePickerCom = ({ value, onChange, className }: DatePickerProps) => {
+  const { t } = useTranslation();
  const theme = useTheme();
  const primaryColor = theme.palette.primary.main;
  return (
    <div className={className}>
      <ReactDatePicker
        placement='topLeft'
-        placeholder='请选择日期'
+        placeholder={t('Select Date')}
        value={value}
        showNow={false}
        // showTime={true}
--- a/packages/resources/src/pages/file/draw/modules/MetaForm.tsx
+++ b/packages/resources/src/pages/file/draw/modules/MetaForm.tsx
@ -7,10 +7,10 @@ import { toast } from 'react-toastify';
 import { create } from 'zustand';
 import { uniq } from 'lodash-es';
 import { DatePicker } from './DatePicker';
-import { SelectPicker } from './SelectPicker';
 import { DialogKey } from './DialogKey';
 import { keysTips, KeyParse } from '../../modules/key-parse';
 import { KeyShareSelect, KeyTextField } from '../../modules/PermissionManager';
+import { TagsInput } from '@kevisual/center-components/select/TagsInput.tsx';
 export const setShareKeysOperate = (value: 'public' | 'protected' | 'private') => {
  const keys = ['password', 'usernames', 'expiration-time'];
  const deleteKeys = keys.map((item) => {
@ -187,7 +187,7 @@ export const MetaForm = () => {
          </div>
        </div>
      </Box>
-      <form>
+      <form className='flex flex-col gap-1 pb-4'>
        {keys.map((key) => {
          let control: React.ReactNode | null = null;
          if (key === 'share') {
@ -195,7 +195,7 @@ export const MetaForm = () => {
          } else if (key === 'expiration-time') {
            control = <DatePicker value={formData[key]} onChange={(date) => handleFormDataChange(key, date)} />;
          } else if (key === 'usernames') {
-            control = <SelectPicker value={formData[key] || []} onChange={(value) => handleFormDataChange(key, value)} />;
+            control = <TagsInput value={formData[key] || []} showLabel={false} onChange={(value) => handleFormDataChange(key, value)} />;
          } else {
            control = <KeyTextField name={key} value={formData[key] || ''} onChange={(value) => handleFormDataChange(key, value)} />;
          }
@ -226,23 +226,7 @@ export const MetaForm = () => {
              </div>
            );
          };
-          return (
-            <div key={key} className='flex flex-col gap-2'>
-              <FormControlLabel
-                key={key}
-                label={<Label />}
-                labelPlacement='top'
-                control={control}
-                sx={{
-                  alignItems: 'flex-start',
-                  '& .MuiFormControlLabel-label': {
-                    textAlign: 'left',
-                    width: '100%',
-                  },
-                }}
-              />
-            </div>
-          );
+          return <FormControlLabel key={key} labelPlacement={'top'} label={<Label />} control={control} />;
        })}
      </form>
      <DialogKey onAdd={addMetaKey} />
--- a/packages/resources/src/pages/file/draw/modules/SelectPicker.tsx
+++ b/packages/resources/src/pages/file/draw/modules/SelectPicker.tsx
@ -1,30 +0,0 @@
-import { styled } from '@mui/material';
-import Select from 'antd/es/select';
-import 'antd/es/select/style/index';
-
-interface SelectPickerProps {
-  value: string[];
-  onChange: (value: string[]) => void;
-  className?: string;
-}
-
-export const SelectPickerCom = ({ value, onChange, className }: SelectPickerProps) => {
-  return <Select className={className} style={{ width: '100%' }} popupClassName='hidden' showSearch={false} mode='tags' value={value} onChange={onChange} />;
-};
-export const SelectPicker = styled(SelectPickerCom)(({ theme }) => ({
-
-  '& .ant-select-selection-item': {
-    backgroundColor: 'var(--color-primary) !important',
-    color: 'white !important',
-  },
-  '& svg': {
-    color: 'white !important',
-  },
-  '& svg:hover': {
-    color: '#ccc !important',
-  },
-  '& .ant-select-arrow': {
-    // color: 'var(--color-primary) !important',
-    display: 'none !important',
-  },
-}));
--- a/packages/resources/src/pages/file/modules/PermissionManager.tsx
+++ b/packages/resources/src/pages/file/modules/PermissionManager.tsx
@ -1,12 +1,13 @@
 import { useEffect, useState } from 'react';
 import { KeyParse, getTips } from './key-parse';
-import { FormControlLabel, TextField, Select, MenuItem, FormGroup, Tooltip } from '@mui/material';
+import { FormControlLabel, TextField, Select, MenuItem, Tooltip } from '@mui/material';
 import { DatePicker } from '../draw/modules/DatePicker';
-import { SelectPicker } from '../draw/modules/SelectPicker';
+import { TagsInput } from '@kevisual/center-components/select/TagsInput.tsx';
 import { HelpCircle } from 'lucide-react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 export const KeyShareSelect = ({ name, value, onChange }: { name: string; value: string; onChange?: (value: string) => void }) => {
+  const { t } = useTranslation();
  return (
    <Select
      variant='outlined'
@ -18,14 +19,14 @@ export const KeyShareSelect = ({ name, value, onChange }: { name: string; value:
        width: '100%',
        marginBottom: '16px',
      }}>
-      <MenuItem value='public' title='公开'>
-        公开
+      <MenuItem value='public' title={t('Public')}>
+        {t('Public')}
      </MenuItem>
-      <MenuItem value='protected' title='受保护'>
-        受保护
+      <MenuItem value='protected' title={t('Protected')}>
+        {t('Protected')}
      </MenuItem>
-      <MenuItem value='private' title='私有'>
-        私有
+      <MenuItem value='private' title={t('Private')}>
+        {t('Private')}
      </MenuItem>
    </Select>
  );
@ -85,8 +86,9 @@ export const PermissionManager = ({ value, onChange, className }: PermissionMana
  };
  const tips = getTips('share', i18n.language);
  return (
-    <form className={clsx('flex flex-col gap-2', className)}>
+    <form className={clsx('flex flex-col w-full gap-2', className)}>
      <FormControlLabel
+        labelPlacement='top'
        control={<KeyShareSelect name='share' value={formData?.share} onChange={(value) => onChangeValue('share', value)} />}
        label={
          <div className='flex items-center gap-1'>
@ -99,38 +101,26 @@ export const PermissionManager = ({ value, onChange, className }: PermissionMana
      />
      {keys.map((item: any) => {
        let control: React.ReactNode | null = null;
+        const tips = getTips(item);
+
+        const label = (
+          <div className='flex items-center gap-1'>
+            {t(item)}
+            {tips && (
+              <Tooltip title={tips}>
+                <HelpCircle size={16} />
+              </Tooltip>
+            )}
+          </div>
+        );
        if (item === 'expiration-time') {
-          control = <DatePicker value={formData[item] || ''} onChange={(date) => onChangeValue(item, date)} />;
+          control = <DatePicker className='mt-1' value={formData[item] || ''} onChange={(date) => onChangeValue(item, date)} />;
        } else if (item === 'usernames') {
-          control = <SelectPicker value={formData[item] || []} onChange={(value) => onChangeValue(item, value)} />;
+          control = <TagsInput value={formData[item] || []} onChange={(value) => onChangeValue(item, value)} />;
        } else {
          control = <KeyTextField name={item} value={formData[item] || ''} onChange={(value) => onChangeValue(item, value)} />;
        }
-        const tips = getTips(item);
-        return (
-          <FormControlLabel
-            labelPlacement='top'
-            key={item}
-            control={control}
-            label={
-              <div className='flex items-center gap-1'>
-                {item}
-                {tips && (
-                  <Tooltip title={tips}>
-                    <HelpCircle size={16} />
-                  </Tooltip>
-                )}
-              </div>
-            }
-            sx={{
-              alignItems: 'flex-start',
-              '& .MuiFormControlLabel-label': {
-                textAlign: 'left',
-                width: '100%',
-              },
-            }}
-          />
-        );
+        return <FormControlLabel key={item} labelPlacement='top' control={control} label={label} />;
      })}
    </form>
  );
--- a/packages/resources/src/pages/file/modules/PermissionModal.tsx
+++ b/packages/resources/src/pages/file/modules/PermissionModal.tsx
@ -0,0 +1,63 @@
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { PermissionManager } from './PermissionManager';
+import { useEffect, useState } from 'react';
+
+type PermissionModalProps = {
+  open: boolean;
+  onClose: () => void;
+  value: Record<string, any>;
+  onChange: (value: Record<string, any>) => void;
+  onSave: () => void;
+};
+export const PermissionModal = ({ open, onClose, value, onChange, onSave }: PermissionModalProps) => {
+  const { t } = useTranslation();
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>{t('app.share')}</DialogTitle>
+      <DialogContent sx={{ width: '400px' }}>
+        <PermissionManager value={value} onChange={onChange} />
+        <DialogActions>
+          <Button onClick={onClose}>{t('Cancel')}</Button>
+          <Button color='primary' onClick={onSave}>
+            {t('Submit')}
+          </Button>
+        </DialogActions>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+type UsePermissionModalProps = {
+  /**
+   * 保存回调
+   */
+  onSave: (values: Record<string, any>) => Promise<boolean>;
+};
+export const usePermissionModal = ({ onSave }: UsePermissionModalProps) => {
+  const [open, setOpen] = useState(false);
+  const [formData, setFormData] = useState<Record<string, any>>({});
+  const onChange = (value: Record<string, any>) => {
+    setFormData(value);
+  };
+  const _onSave = async () => {
+    const res = await onSave(formData);
+    if (res) {
+      setOpen(false);
+    }
+  };
+  const contextHolder = <PermissionModal open={open} onClose={() => setOpen(false)} value={formData} onChange={onChange} onSave={_onSave} />;
+  return {
+    open,
+    setOpen: (open: boolean, fromData?: any) => {
+      setOpen(open);
+      if (open) {
+        setFormData(fromData ?? {});
+      }
+    },
+    setFormData: (values: any) => {
+      setFormData({ ...formData, ...values });
+    },
+    contextHolder,
+  };
+};
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@ -47,7 +47,28 @@
  "app": {
    "domain": "Domain",
    "version": "Version",
-    "runtime": "Can run environment"
+    "runtime": "Can run environment",
+    "share": "Share Config"
  },
-  "Share": "Share"
+  "Share": "Share",
+  "Switch To User": "Switch To User",
+  "Language changed to": "Language changed to",
+  "en": "English",
+  "zh": "Chinese",
+  "Config": "Config",
+  "Tags": "Tags",
+  "Add a tag": "Add a tag",
+  "Tags Input": "Tags Input",
+  "Public": "Public",
+  "Protected": "Protected",
+  "Private": "Private",
+  "Input User Name": "Input User Name",
+  "Select Date": "Select Date",
+  "Permission": "Permission Manager",
+  "password": "Password",
+  "expiration-time": "Expiration Time",
+  "usernames": "Usernames",
+  "content-type": "Content Type",
+  "app-source": "App Source",
+  "app-version": "App Version"
 }
--- a/public/locales/zh/translation.json
+++ b/public/locales/zh/translation.json
@ -47,7 +47,28 @@
  "app": {
    "domain": "访问域名",
    "version": "版本",
-    "runtime": "可以运行的环境"
+    "runtime": "可以运行的环境",
+    "share": "共享配置"
  },
-  "Share": "分享"
+  "Share": "分享",
+  "Switch To User": "切换到用户",
+  "Language changed to": "语言已切换到",
+  "en": "英语",
+  "zh": "中文",
+  "Config": "配置",
+  "Tags": "标签",
+  "Add a tag": "添加一个标签",
+  "Tags Input": "标签输入",
+  "Public": "公开",
+  "Protected": "受保护",
+  "Private": "私有",
+  "Input User Name": "输入用户名称",
+  "Select Date": "选择日期",
+  "Permission": "权限管理",
+  "password": "密码",
+  "expiration-time": "过期时间",
+  "usernames": "用户名",
+  "content-type": "内容类型",
+  "app-source": "应用来源",
+  "app-version": "应用版本"
 }
--- a/src/App.tsx
+++ b/src/App.tsx
@ -85,6 +85,7 @@ export const App = () => {
          </Router>
        </div>
      </AntProvider>
+      <div id='for-drawer'></div>
      <div id='for-modal'></div>
      <ToastContainer />
    </CustomThemeProvider>
--- a/src/modules/layout/LayoutUser.tsx
+++ b/src/modules/layout/LayoutUser.tsx
@ -3,13 +3,13 @@ import { useLayoutStore } from './store';
 import clsx from 'clsx';
 import { Menu, MenuItem, Tooltip } from '@mui/material';
 import { Button } from '@mui/material';
-import { IconButton } from '@kevisual/center-components/button/index.tsx';
 import { message } from '@/modules/message';
-import { DashboardOutlined, HomeOutlined, LogoutOutlined, SmileOutlined } from '@ant-design/icons';
+import SmileOutlined from '@ant-design/icons/SmileOutlined';
+import SwitcherOutlined from '@ant-design/icons/SwitcherOutlined';
 import { useMemo } from 'react';
-import { query } from '../query';
+import { query, queryLogin } from '../query';
 import { useNewNavigate } from '../navicate';
-import { Users, X } from 'lucide-react';
+import { LogOut, Map, SquareUser, Users, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import React from 'react';

@ -27,17 +27,17 @@ export const LayoutUser = () => {
  const meun = [
    {
      title: t('Your profile'),
-      icon: <HomeOutlined />,
+      icon: <SquareUser size={16} />,
      link: '/user/profile',
    },
    {
      title: t('Your orgs'),
-      icon: <DashboardOutlined />,
+      icon: <SwitcherOutlined />,
      link: '/org/edit/list',
    },
    {
      title: t('Site Map'),
-      icon: <HomeOutlined />,
+      icon: <Map size={16} />,
      link: '/map',
    },
  ];
@ -110,12 +110,17 @@ export const LayoutUser = () => {
        </div>
        <div
          className='flex items-center p-4 hover:bg-secondary hover:text-white  cursor-pointer'
-          onClick={() => {
-            query.removeToken();
-            window.open('/user/login', '_self');
+          onClick={async () => {
+            const res = await queryLogin.logout();
+            // console.log(res);
+            if (res.success) {
+              window.open('/user/login', '_self');
+            } else {
+              message.error(res.message || 'Logout failed');
+            }
          }}>
          <div className='mr-4'>
-            <LogoutOutlined />
+            <LogOut size={16} />
          </div>
          <div>{t('Login Out')}</div>
        </div>
--- a/src/modules/layout/Menu.tsx
+++ b/src/modules/layout/Menu.tsx
@ -3,8 +3,13 @@ import { useLayoutStore } from './store';
 import clsx from 'clsx';
 import { Button } from '@mui/material';
 import { message } from '@/modules/message';
-import { AppstoreOutlined, CodeOutlined, FolderOutlined, HomeOutlined, SmileOutlined, SwitcherOutlined } from '@ant-design/icons';
-import { X } from 'lucide-react';
+import HomeOutlined from '@ant-design/icons/HomeOutlined';
+import AppstoreOutlined from '@ant-design/icons/AppstoreOutlined';
+import FolderOutlined from '@ant-design/icons/FolderOutlined';
+import CodeOutlined from '@ant-design/icons/CodeOutlined';
+import SwitcherOutlined from '@ant-design/icons/SwitcherOutlined';
+import SmileOutlined from '@ant-design/icons/SmileOutlined';
+import { X, Settings } from 'lucide-react';
 import { useNewNavigate } from '../navicate';
 import { useTranslation } from 'react-i18next';

@ -36,6 +41,7 @@ export const LayoutMenu = () => {
      icon: <SwitcherOutlined />,
      link: '/org/edit/list',
    },
+    { title: t('Config'), icon: <Settings size={16} />, link: '/config/edit/list' },
    {
      title: t('About'),
      icon: <SmileOutlined />,
@ -72,7 +78,7 @@ export const LayoutMenu = () => {
                  }
                  setOpen(false);
                }}>
-                <div className='w-6 h-6'>{item.icon}</div>
+                <div className='w-6 h-6 flex items-center justify-center'>{item.icon}</div>
                <div>{item.title}</div>
              </div>
            );
--- a/src/modules/layout/index.tsx
+++ b/src/modules/layout/index.tsx
@ -14,6 +14,8 @@ import i18n from 'i18next';

 import { IconButton } from '@kevisual/center-components/button/index.tsx';
 import { Languages } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';

 type LayoutMainProps = {
  title?: React.ReactNode;
@ -64,10 +66,11 @@ export const LayoutMain = (props: LayoutMainProps) => {

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
+    toast.success(t('Language changed to') + ' ' + t(lng));
    handleClose();
  };
  const currentLanguage = i18n.language;
-
+  const { t } = useTranslation();
  return (
    <div className='flex w-full h-full flex-col relative'>
      <LayoutMenu />
@ -89,10 +92,27 @@ export const LayoutMain = (props: LayoutMainProps) => {
            <div>
              <Tooltip title={currentLanguage === 'en' ? 'English' : 'Chinese'}>
                <IconButton onClick={handleClick} variant='contained'>
-                  <Languages />
+                  <Languages size={16} />
                </IconButton>
              </Tooltip>
-              <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+              <Menu
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleClose}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'left',
+                }}
+                transformOrigin={{
+                  vertical: -2,
+                  horizontal: 52,
+                }}
+                sx={{
+                  '& .MuiButtonBase-root.Mui-selected': {
+                    backgroundColor: 'primary.main',
+                    color: 'white',
+                  },
+                }}>
                <MenuItem selected={currentLanguage === 'en'} onClick={() => changeLanguage('en')}>
                  English
                </MenuItem>
@ -103,13 +123,13 @@ export const LayoutMain = (props: LayoutMainProps) => {
            </div>
            {menuStore.me?.type === 'org' && (
              <div>
-                <Tooltip title='Switch To User'>
-                  <Button
+                <Tooltip title={t('Switch To User')}>
+                  <IconButton
                    onClick={() => {
                      menuStore.switchOrg('', 'user');
                    }}>
                    <SwapOutlined />
-                  </Button>
+                  </IconButton>
                </Tooltip>
              </div>
            )}
--- a/src/modules/query.ts
+++ b/src/modules/query.ts
@ -33,15 +33,6 @@ export const request = query.post;

 export const ws = query.qws?.ws;

-// 当连接成功时
-// query.qws.ws.onopen = () => {
-//   console.log('Connected to WebSocket server');
-// };
-
-// // 处理 WebSocket 关闭
-// query.qws.ws.onclose = () => {
-//   console.log('Disconnected from WebSocket server');
-// };
 query.qws.listenConnect(() => {
  console.log('Connected to WebSocket server');
 });
--- a/src/pages/app/edit/List.tsx
+++ b/src/pages/app/edit/List.tsx
@ -167,7 +167,7 @@ const ShareModal = () => {
      onClose={() => {
        containerStore.setShowEdit(false);
      }}>
-      <DialogTitle>{iText.share.title}</DialogTitle>
+      <DialogTitle>{t('app.share')}</DialogTitle>
      <DialogContent>
        <div className='flex flex-col gap-2 w-[400px] '>
          <PermissionManager
@ -178,6 +178,12 @@ const ShareModal = () => {
          />
          <FormControlLabel
            label={t('app.runtime')}
+            labelPlacement='top'
+            sx={{
+              '& .MuiFormControlLabel-label': {
+                width: '100%',
+              },
+            }}
            control={
              <Select
                multiple
--- a/src/pages/config/edit/List.tsx
+++ b/src/pages/config/edit/List.tsx
@ -1,11 +1,14 @@
-import { useEffect, useState } from 'react';
+import { JSX, useEffect, useState } from 'react';
 import { useConfigStore } from '../store/config';
 import { CardBlank } from '@/components/card';
-import { Button, ButtonGroup, Divider, Drawer, Tab, Tabs, Tooltip } from '@mui/material';
-import { Edit, Plus, Save, Trash, X } from 'lucide-react';
+import { Button, ButtonGroup, Divider, Drawer, FormControlLabel, Tab, Tabs, Tooltip, useTheme } from '@mui/material';
+import { Edit, Plus, Save, Share, Trash, X } from 'lucide-react';
+import ShareAltOutlined from '@ant-design/icons/ShareAltOutlined';
 import { useModal } from '@kevisual/center-components/modal/Confirm.tsx';
 import { useForm, Controller } from 'react-hook-form';
-import { TextField } from '@mui/material';
+import { useController } from 'react-hook-form';
+
+import { TextField, TextFieldLabel } from '@kevisual/center-components/input/TextField.tsx';
 import { useTranslation } from 'react-i18next';
 import { IconButton } from '@kevisual/center-components/button/index.tsx';
 import { useShallow } from 'zustand/shallow';
@ -13,7 +16,8 @@ import { load, dump } from 'js-yaml';
 import CodeEditor from '@uiw/react-textarea-code-editor';
 import { toast } from 'react-toastify';
 import { isEmpty, pick } from 'lodash-es';
-
+import { usePermissionModal } from '@kevisual/resources/index.ts';
+import React from 'react';
 type DataYamlEditProps = {
  onSave: (data: any) => Promise<void>;
  type?: 'yaml' | 'json';
@ -42,7 +46,6 @@ export const DataYamlEdit = ({ onSave, type }: DataYamlEditProps) => {
      }
    }
  }, [formData]);
-  console.log(formData);
  const handleSave = () => {
    let data: any = {};
    try {
@ -109,14 +112,16 @@ export const DrawerEdit = () => {
    await updateData({ ...values, id: formData.id }, { refresh: true });
  };
  const onSubmit = (data) => {
-    console.log('Form Data:', data);
    const pickValue = pick(data, ['title', 'key', 'description']);
    onSave(pickValue);
  };
+  const theme = useTheme();
+  const defaultProps = theme.components?.MuiTextField?.defaultProps;
  return (
    <Drawer
      open={showEdit}
      anchor='right'
+      container={document.getElementById('for-drawer')}
      slotProps={{
        paper: {
          sx: {
@ -139,22 +144,21 @@ export const DrawerEdit = () => {
          <Tab label='JSON Config' value='json' />
        </Tabs>
        {tab === 'base' && (
-          <form onSubmit={handleSubmit(onSubmit)} className='w-full p-2'>
-            <Controller
-              name='title'
-              control={control}
-              render={({ field }) => <TextField {...field} label='Title' variant='outlined' fullWidth margin='normal' />}
-            />
+          <form onSubmit={handleSubmit(onSubmit)} className='w-full p-2 flex flex-col gap-6'>
+            <Controller control={control} name='title' render={({ field }) => <TextField {...field} label='Title' />} />
            <Controller
              name='key'
              control={control}
-              render={({ field }) => <TextField {...field} label='Key' variant='outlined' fullWidth margin='normal' />}
-            />
-            <Controller
-              name='description'
-              control={control}
-              render={({ field }) => <TextField {...field} label='Description' variant='outlined' fullWidth margin='normal' multiline rows={4} />}
+              render={({ field }) => (
+                <TextField
+                  {...field}
+                  label={
+                    <TextFieldLabel label='Key' tips='Key is the unique identifier for the configuration. if set and id is none will change data by key;' />
+                  }
+                />
+              )}
            />
+            <Controller name='description' control={control} render={({ field }) => <TextField {...field} label='Description' multiline rows={4} />} />
            <Button type='submit' variant='contained' color='primary'>
              {t('Submit')}
            </Button>
@ -174,14 +178,36 @@ export const DrawerEdit = () => {
    </Drawer>
  );
 };
-
+export const MyController = React.forwardRef(
+  ({ control, name, Component, componentProps }: { control: any; name: string; Component: (props: any) => JSX.Element; componentProps: any }, ref) => {
+    const theme = useTheme();
+    const defaultProps = theme.components?.MuiTextField?.defaultProps;
+    console.log(defaultProps, 'defaultProps');
+    const { field } = useController({ control, name });
+    return <Component {...field} {...componentProps} ref={ref} />;
+  },
+);
 export const List = () => {
-  const { list, getConfig, setShowEdit, setFormData, deleteConfig } = useConfigStore();
+  const { list, getConfig, setShowEdit, setFormData, deleteConfig, updateData, formData } = useConfigStore();
  const [modal, contextHolder] = useModal();
  useEffect(() => {
    getConfig();
  }, []);
+  const { setOpen, contextHolder: contextHolderPermission } = usePermissionModal({
+    onSave: async (values) => {
+      const permission = values;
+      console.log(permission, formData.id);
+      if (permission && formData.id) {
+        const res = await updateData({ data: { permission }, id: formData.id }, { refresh: true });
+        console.log(res);
+        return res.code === 200;
+      }
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      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'>
@ -191,17 +217,26 @@ export const List = () => {
              setShowEdit(true);
              setFormData({});
            }}>
-            <Plus />
+            <Plus size={16} />
          </IconButton>
        </div>
      </div>
-      <div className=' grow p-4'>
+      <div className=' grow p-4 '>
        <div className='w-full h-full bg-white rounded-lg p-2 scrollbar '>
-          <div className='flex flex-wrap gap-2'>
+          <div className='flex flex-wrap gap-2 '>
            {list.map((item) => (
-              <div className='card w-[300px]' key={item.id}>
+              <div className='card w-[300px] ' key={item.id}>
                <div className='card-title flex font-bold justify-between'>{item.title}</div>
-                <div className='card-content'>{item.description}</div>
+                <div className='card-content'>
+                  <div className='flex gap-2'>
+                    <div>{t('Description')}:</div>
+                    <div>{item.description}</div>
+                  </div>
+                  <div className='flex gap-2'>
+                    <div>{t('Key')}:</div>
+                    <div>{item.key}</div>
+                  </div>
+                </div>
                <div className='card-footer flex justify-end'>
                  <ButtonGroup variant='contained'>
                    <Button
@ -211,6 +246,15 @@ export const List = () => {
                      }}>
                      <Edit />
                    </Button>
+                    <Tooltip title={t('Permission')}>
+                      <Button
+                        onClick={() => {
+                          setFormData(item);
+                          setOpen(true, item.data?.permission);
+                        }}>
+                        <ShareAltOutlined style={{ fontSize: 20 }} />
+                      </Button>
+                    </Tooltip>
                    <Button
                      onClick={() => {
                        modal.confirm({
@ -233,6 +277,7 @@ export const List = () => {
      </div>
      <DrawerEdit />
      {contextHolder}
+      {contextHolderPermission}
    </div>
  );
 };
--- a/src/pages/config/store/config.ts
+++ b/src/pages/config/store/config.ts
@ -3,7 +3,7 @@ import { query } from '@/modules/query';
 import { toast } from 'react-toastify';
 import { QueryConfig } from '@kevisual/query-config';

-export const queryConfig = new QueryConfig({ query });
+export const queryConfig = new QueryConfig({ query: query as any });

 interface ConfigStore {
  list: any[];
--- a/src/pages/container/edit/List.tsx
+++ b/src/pages/container/edit/List.tsx
@ -83,7 +83,7 @@ const FormModal = () => {
            control={control}
            defaultValue={[]}
            render={({ field }) => {
-              return <TagsInput key={'tags'} label='Tags' placeholder='添加标签' value={field.value} onChange={(value) => field.onChange(value)} />;
+              return <TagsInput key={'tags'} showLabel label={t('Tags')} value={field.value} onChange={(value) => field.onChange(value)} />;
            }}
          />
          {!isEdit && (
--- a/src/pages/org/edit/UserList.tsx
+++ b/src/pages/org/edit/UserList.tsx
@ -16,7 +16,6 @@ import { useModal } from '@kevisual/center-components/modal/Confirm.tsx';
 import { TextField } from '@mui/material';
 import { Select } from '@kevisual/center-components/select/index.tsx';
 import { useForm, Controller } from 'react-hook-form';
-import EditOutlined from '@ant-design/icons/EditOutlined';

 const FormModal = () => {
  const { control, handleSubmit, reset } = useForm();
--- a/submodules/query-login
+++ b/submodules/query-login
@ -1 +1 @@
-Subproject commit 24f091ac792342ea295496cf8ff49f6c79ab47a6
+Subproject commit 9ba45c37c2d642e7ae0a0856a29ba3f3cd61d2c9
--- a/vite.config.ts
+++ b/vite.config.ts
@ -32,13 +32,7 @@ if (true) {
      target: backend,
      changeOrigin: true,
      ws: true,
-      rewrite: (path: any) => path.replace(/^\/api/, '/api'),
-    },
-    '/api/router': {
-      target: backendWss,
-      changeOrigin: true,
-      ws: true,
-      rewriteWsOrigin: true,
+      cookieDomainRewrite: 'localhost',
      rewrite: (path: any) => path.replace(/^\/api/, '/api'),
    },
    '/user/login': {
@ -81,13 +75,6 @@ export default defineConfig({
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/api'),
      },
-      '/api/router': {
-        target: 'wss://localhost:4005',
-        changeOrigin: true,
-        ws: true,
-        rewriteWsOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, '/api'),
-      },
      ...proxy,
    },
  },