kevisual/kevisual-center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add app and config

Browse Source
This commit is contained in:
熊潇 2025-03-23 02:59:41 +08:00
parent 063837350b
commit 1d97ff88b9
24 changed files with 351 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/components/src/index.tsx
View File

@ -1 +1,6 @@
export * from './theme';
/**
* 输入组件, 使用theme的defaultProps
*/
export * from './input/TextField';

23
packages/components/src/input/TextField.tsx Normal file
View File

@ -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>
);
};

17
packages/components/src/select/TagsInput.tsx
View File

@ -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} />}
/>
);
};

35
packages/components/src/theme/index.tsx
View File

@ -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 = () => {};

2
packages/resources/src/index.ts
View File

@ -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';

4
packages/resources/src/pages/file/draw/modules/DatePicker.tsx
View File

@ -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}

24
packages/resources/src/pages/file/draw/modules/MetaForm.tsx
View File

@ -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} />

30
packages/resources/src/pages/file/draw/modules/SelectPicker.tsx
View File

@ -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',
},
}));

54
packages/resources/src/pages/file/modules/PermissionManager.tsx
View File

@ -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;
if (item === 'expiration-time') {
control = <DatePicker value={formData[item] || ''} onChange={(date) => onChangeValue(item, date)} />;
} else if (item === 'usernames') {
control = <SelectPicker 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={
const label = (
<div className='flex items-center gap-1'>
{item}
{t(item)}
{tips && (
<Tooltip title={tips}>
<HelpCircle size={16} />
</Tooltip>
)}
</div>
}
sx={{
alignItems: 'flex-start',
'& .MuiFormControlLabel-label': {
textAlign: 'left',
width: '100%',
},
}}
/>
);
if (item === 'expiration-time') {
control = <DatePicker className='mt-1' value={formData[item] || ''} onChange={(date) => onChangeValue(item, date)} />;
} else if (item === 'usernames') {
control = <TagsInput value={formData[item] || []} onChange={(value) => onChangeValue(item, value)} />;
} else {
control = <KeyTextField name={item} value={formData[item] || ''} onChange={(value) => onChangeValue(item, value)} />;
}
return <FormControlLabel key={item} labelPlacement='top' control={control} label={label} />;
})}
</form>
);

63
packages/resources/src/pages/file/modules/PermissionModal.tsx Normal file
View File

@ -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,
};
};

25
public/locales/en/translation.json
View File

@ -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"
}

25
public/locales/zh/translation.json
View File

@ -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": "应用版本"
}

1
src/App.tsx
View File

@ -85,6 +85,7 @@ export const App = () => {
</Router>
</div>
</AntProvider>
<div id='for-drawer'></div>
<div id='for-modal'></div>
<ToastContainer />
</CustomThemeProvider>

25
src/modules/layout/LayoutUser.tsx
View File

@ -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();
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>

12
src/modules/layout/Menu.tsx
View File

@ -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>
);

32
src/modules/layout/index.tsx
View File

@ -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>
)}

9
src/modules/query.ts
View File

@ -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');
});

8
src/pages/app/edit/List.tsx
View File

@ -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

95
src/pages/config/edit/List.tsx
View File

@ -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' />}
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' variant='outlined' fullWidth margin='normal' multiline rows={4} />}
)}
/>
<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>
);
};

2
src/pages/config/store/config.ts
View File

@ -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[];

2
src/pages/container/edit/List.tsx
View File

@ -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 && (

1
src/pages/org/edit/UserList.tsx
View File

@ -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();

2
submodules/query-login

@ -1 +1 @@
Subproject commit 24f091ac792342ea295496cf8ff49f6c79ab47a6
Subproject commit 9ba45c37c2d642e7ae0a0856a29ba3f3cd61d2c9

15
vite.config.ts
View File

@ -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,
},
},