diff --git a/packages/components/src/select/index.tsx b/packages/components/src/select/index.tsx index 4c9d090..cd73fe6 100644 --- a/packages/components/src/select/index.tsx +++ b/packages/components/src/select/index.tsx @@ -1,13 +1,15 @@ import { MenuItem, Select as MuiSelect, SelectProps as MuiSelectProps } from '@mui/material'; +import React from 'react'; type SelectProps = { options?: { label: string; value: string }[]; } & MuiSelectProps; -export const Select = (props: SelectProps) => { +export const Select = React.forwardRef((props: SelectProps, ref) => { const { options, ...rest } = props; + console.log(props, 'props'); return ( - + {options?.map((option) => ( {option.label} @@ -15,4 +17,4 @@ export const Select = (props: SelectProps) => { ))} ); -}; +}); diff --git a/src/App.tsx b/src/App.tsx index d5c89da..069893d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,7 @@ import { App as FileApp } from './pages/file'; import { App as OrgApp } from './pages/org'; import { App as ConfigApp } from './pages/config'; import { App as PayApp } from './pages/pay'; +import { App as DomainApp } from './pages/domain'; import { basename } from './modules/basename'; import { Redirect } from './modules/Redirect'; import { CustomThemeProvider } from '@kevisual/components/theme/index.tsx'; @@ -80,6 +81,7 @@ export const App = () => { } /> } /> } /> + } /> 404} /> 404} /> diff --git a/src/modules/layout/LayoutUser.tsx b/src/modules/layout/LayoutUser.tsx index 1a38972..3ff6384 100644 --- a/src/modules/layout/LayoutUser.tsx +++ b/src/modules/layout/LayoutUser.tsx @@ -6,10 +6,10 @@ import { Button } from '@mui/material'; import { message } from '@/modules/message'; import SmileOutlined from '@ant-design/icons/SmileOutlined'; import SwitcherOutlined from '@ant-design/icons/SwitcherOutlined'; -import { useMemo } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { query, queryLogin } from '../query'; import { useNewNavigate } from '../navicate'; -import { LogOut, Map, SquareUser, Users, X } from 'lucide-react'; +import { LogOut, Map, SquareUser, Users, X, ArrowDownLeftFromSquareIcon } from 'lucide-react'; import { useTranslation } from 'react-i18next'; import React from 'react'; @@ -22,6 +22,13 @@ export const LayoutUser = () => { switchOrg: state.switchOrg, })), ); + const [isAdmin, setIsAdmin] = useState(false); + useEffect(() => { + queryLogin.cacheStore.getCurrentUser().then((res) => { + const org = res?.orgs || []; + setIsAdmin(org.includes('admin')); + }); + }, []); const navigate = useNewNavigate(); const { t } = useTranslation(); const meun = [ @@ -40,6 +47,11 @@ export const LayoutUser = () => { icon: , link: '/map', }, + { + title: t('Domain'), + icon: , + link: '/domain/edit/list', + }, ]; const items = useMemo(() => { const orgs = store.me?.orgs || []; diff --git a/src/pages/app/edit/List.tsx b/src/pages/app/edit/List.tsx index 784c8e6..ae91e5c 100644 --- a/src/pages/app/edit/List.tsx +++ b/src/pages/app/edit/List.tsx @@ -27,6 +27,7 @@ import { useTranslation } from 'react-i18next'; import { TextField, InputAdornment } from '@mui/material'; import { useForm, Controller } from 'react-hook-form'; import { pick } from 'lodash-es'; +import copy from 'copy-to-clipboard'; const FormModal = () => { const defaultValues = { @@ -295,7 +296,17 @@ export const List = () => { -
+
+ +
{ + copy(item.id); + message.success('复制成功'); + }}> + {item.id} +
+
{item.domain && (
{t('app.domain')}: {item.domain} diff --git a/src/pages/domain/edit/List.tsx b/src/pages/domain/edit/List.tsx new file mode 100644 index 0000000..5c6e04a --- /dev/null +++ b/src/pages/domain/edit/List.tsx @@ -0,0 +1,174 @@ +import { useEffect } from 'react'; +import { appDomainStatus, useDomainStore } from '../store'; +import { + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Paper, + Button, + Modal, + TextField, + Dialog, + DialogContent, + DialogTitle, + useTheme, +} from '@mui/material'; +import { useForm, Controller } from 'react-hook-form'; +import { pick } from 'lodash-es'; +import { Select } from '@kevisual/components/select/index.tsx'; + +const TableList = () => { + const { list, setList, getDomainList, updateDomain, setShowEditModal, setFormData, deleteDomain } = useDomainStore(); + useEffect(() => { + getDomainList(); + }, []); + + return ( + + + + + ID + Domain + App ID + UID + Status + 操作 + + + + {list.map((domain) => ( + + {domain.id} + {domain.domain} + {domain.appId} + {domain.uid} + {domain.status} + + + + + + ))} + +
+
+ ); +}; + +const FomeModal = () => { + const { showEditModal, setShowEditModal, formData, updateDomain } = useDomainStore(); + const { + register, + handleSubmit, + formState: { errors }, + reset, + getValues, + setValue, + control, + } = useForm(); + useEffect(() => { + if (!showEditModal) return; + if (formData?.id) { + reset(formData); + } else { + reset({ + status: 'running', + }); + } + }, [formData]); + const onSubmit = async (data: any) => { + // 处理表单提交逻辑 + const _formData = pick(data, ['domain', 'appId', 'status', 'id']); + if (formData.id) { + _formData.id = formData.id; + } + const res = await updateDomain(_formData); + if (res.code === 200) { + setShowEditModal(false); + } + }; + const theme = useTheme(); + const defultProps = theme.components?.MuiTextField?.defaultProps; + return ( + setShowEditModal(false)}> + 添加域名 + +
+
+ } + /> + } + /> + ( +