diff --git a/src/App.tsx b/src/App.tsx index 8da84c5..ecae686 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,6 +12,7 @@ import { App as ChatApp } from './pages/chat-manager'; import { App as GitHubApp } from './pages/github'; import { App as UserAppApp } from './pages/app'; import { App as FileApp } from './pages/file'; +import { App as OrgApp } from './pages/org'; import '@abearxiong/container/dist/container.css'; @@ -33,6 +34,7 @@ export const App = () => { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/modules/layout/LayoutUser.tsx b/src/modules/layout/LayoutUser.tsx new file mode 100644 index 0000000..edfd3fd --- /dev/null +++ b/src/modules/layout/LayoutUser.tsx @@ -0,0 +1,99 @@ +import { useShallow } from 'zustand/react/shallow'; +import { useLayoutStore } from './store'; +import clsx from 'clsx'; +import { Button, Dropdown, message } from 'antd'; +import { + CloseOutlined, + CodeOutlined, + DashboardOutlined, + HomeOutlined, + MessageOutlined, + ReadOutlined, + RocketOutlined, + SmileOutlined, + SwapOutlined, + SwitcherOutlined, +} from '@ant-design/icons'; +import { useNavigate } from 'react-router'; +import { useMemo } from 'react'; +const meun = [ + { + title: 'Your profile', + icon: , + link: '/map', + }, + { + title: 'Your orgs', + icon: , + link: '/panel/edit/list', + }, +]; +export const LayoutUser = () => { + const { open, setOpen, ...store } = useLayoutStore( + useShallow((state) => ({ + open: state.openUser, // + setOpen: state.setOpenUser, + me: state.me, + switchOrg: state.switchOrg, + })), + ); + const navigate = useNavigate(); + const items = useMemo(() => { + const orgs = store.me?.orgs || []; + return orgs.map((item) => { + return { + label: item, + key: item, + icon: , + }; + }); + }, [store.me]); + return ( +
+
{ + setOpen(false); + }}>
+
+
+ User: {store.me?.username} +
+ {items.length > 0 && ( + { + store.switchOrg(item.key, 'org'); + }, + }}> + + + )} + +
+
+
+ {meun.map((item, index) => { + return ( +
{ + if (item.link) { + navigate(item.link); + } else { + message.info('Coming soon'); + } + }}> +
{item.icon}
+
{item.title}
+
+ ); + })} +
+
+
+ ); +}; diff --git a/src/modules/layout/Menu.tsx b/src/modules/layout/Menu.tsx index c43f22d..edeebae 100644 --- a/src/modules/layout/Menu.tsx +++ b/src/modules/layout/Menu.tsx @@ -1,8 +1,20 @@ import { useShallow } from 'zustand/react/shallow'; -import { useMenuStore } from './store'; +import { useLayoutStore } from './store'; import clsx from 'clsx'; import { Button, message } from 'antd'; -import { CloseOutlined, CodeOutlined, DashboardOutlined, HomeOutlined, MessageOutlined, ReadOutlined, RocketOutlined, SmileOutlined } from '@ant-design/icons'; +import { + AppstoreOutlined, + CloseOutlined, + CodeOutlined, + DashboardOutlined, + FolderOutlined, + HomeOutlined, + MessageOutlined, + ReadOutlined, + RocketOutlined, + SmileOutlined, + SwitcherOutlined, +} from '@ant-design/icons'; import { useNavigate } from 'react-router'; const meun = [ { @@ -15,6 +27,16 @@ const meun = [ icon: , link: '/panel/edit/list', }, + { + title: 'User App', + icon: , + link: '/app/edit/list', + }, + { + title: 'File App', + icon: , + link: '/file/edit/list', + }, { title: 'Prompt', icon: , @@ -35,13 +57,18 @@ const meun = [ icon: , link: '/chat/chat-prompt/list', }, + { + title: 'Org', + icon: , + link: '/org/edit/list', + }, { title: 'About', icon: , }, ]; export const LayoutMenu = () => { - const { open, setOpen } = useMenuStore(useShallow((state) => ({ open: state.open, setOpen: state.setOpen }))); + const { open, setOpen } = useLayoutStore(useShallow((state) => ({ open: state.open, setOpen: state.setOpen }))); const navigate = useNavigate(); return (
diff --git a/src/modules/layout/index.tsx b/src/modules/layout/index.tsx index 5675d75..20bdfc4 100644 --- a/src/modules/layout/index.tsx +++ b/src/modules/layout/index.tsx @@ -1,21 +1,33 @@ import { AiMoudle } from '@/pages/ai-chat'; -import { MenuOutlined } from '@ant-design/icons'; -import { Button } from 'antd'; +import { MenuOutlined, SwapOutlined } from '@ant-design/icons'; +import { Button, Tooltip } from 'antd'; import { Outlet } from 'react-router-dom'; import { LayoutMenu } from './Menu'; -import { useMenuStore } from './store'; +import { useLayoutStore } from './store'; import { useShallow } from 'zustand/react/shallow'; +import { useEffect } from 'react'; +import { LayoutUser } from './LayoutUser'; type LayoutMainProps = { title?: React.ReactNode; children?: React.ReactNode; }; export const LayoutMain = (props: LayoutMainProps) => { - const menuStore = useMenuStore( + const menuStore = useLayoutStore( useShallow((state) => { - return { open: state.open, setOpen: state.setOpen }; + return { + open: state.open, + setOpen: state.setOpen, // + getMe: state.getMe, + me: state.me, + setOpenUser: state.setOpenUser, + switchOrg: state.switchOrg, + }; }), ); + useEffect(() => { + menuStore.getMe(); + }, []); return (
@@ -26,7 +38,26 @@ export const LayoutMain = (props: LayoutMainProps) => { menuStore.setOpen(true); }} icon={}> -
{props.title}
+
+ {props.title} +
+ {menuStore.me?.type === 'org' && ( +
+ + + +
+ )} +
menuStore.setOpenUser(true)}>
+
menuStore.setOpenUser(true)}> + {menuStore.me?.username} +
+
+
{
+ ); }; diff --git a/src/modules/layout/store/index.ts b/src/modules/layout/store/index.ts index 2fe81e5..43a5443 100644 --- a/src/modules/layout/store/index.ts +++ b/src/modules/layout/store/index.ts @@ -1,10 +1,58 @@ +import { query } from '@/modules/query'; +import { message } from 'antd'; import { create } from 'zustand'; -export type MenuStore = { +type Me = { + id?: string; + username?: string; + needChangePassword?: boolean; + role?: string; + description?: string; + type?: 'user' | 'org'; + orgs?: string[]; +}; +export type LayoutStore = { open: boolean; setOpen: (open: boolean) => void; + me: Me; + setMe: (me: Me) => void; + getMe: () => Promise; + openUser: boolean; + setOpenUser: (openUser: boolean) => void; + switchOrg: (username?: string, type?: 'user' | 'org') => Promise; }; -export const useMenuStore = create((set) => ({ +export const useLayoutStore = create((set) => ({ open: false, setOpen: (open) => set({ open }), + me: {}, + setMe: (me) => set({ me }), + getMe: async () => { + const res = await query.post({ + path: 'user', + key: 'me', + }); + if (res.code === 200) { + set({ me: res.data }); + } + }, + openUser: false, + setOpenUser: (openUser) => set({ openUser }), + switchOrg: async (username?: string, type?: string) => { + const res = await query.post({ + path: 'user', + key: 'switchOrg', + data: { + username, + type, + }, + }); + if (res.code === 200) { + const { token } = res.data; + query.saveToken(token); + message.success('Switch success'); + window.location.reload(); + } else { + message.error(res.message || 'Request failed'); + } + }, })); diff --git a/src/modules/query.ts b/src/modules/query.ts index 9584cf5..1e15221 100644 --- a/src/modules/query.ts +++ b/src/modules/query.ts @@ -2,6 +2,7 @@ import { Query, QueryClient } from '@kevisual/query'; import { QueryWs } from '@kevisual/query/ws'; import { modal } from './redirect-to-login'; import { create } from 'zustand'; +import { message } from 'antd'; export const query = new QueryClient(); query.beforeRequest = async (config) => { if (config.headers) { @@ -13,7 +14,12 @@ query.beforeRequest = async (config) => { return config; }; query.afterResponse = async (res) => { - if (res.code === 401 || res.code === 403) { + if (res.code === 401) { + if (!res?.message) { + message.error('Unauthorized'); + } + } + if (res.code === 403) { modal.setOpen(true); } return res; diff --git a/src/pages/app/edit/AppVersionList.tsx b/src/pages/app/edit/AppVersionList.tsx index ad99e19..d0f79fc 100644 --- a/src/pages/app/edit/AppVersionList.tsx +++ b/src/pages/app/edit/AppVersionList.tsx @@ -1,12 +1,13 @@ -import { useParams } from 'react-router'; +import { useNavigation, useParams } from 'react-router'; import { useAppVersionStore } from '../store'; import { useShallow } from 'zustand/react/shallow'; -import { useEffect } from 'react'; -import { Button, Form, Input, Modal } from 'antd'; -import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons'; +import { useCallback, useEffect, useMemo, useState } from 'react'; +import { Button, Form, Input, Modal, Tooltip } from 'antd'; +import { CloudUploadOutlined, DeleteOutlined, EditOutlined, FileOutlined, LeftOutlined, PlusOutlined } from '@ant-design/icons'; import { isObjectNull } from '@/utils/is-null'; import { useNavigate } from 'react-router'; import { FileUpload } from '../modules/FileUpload'; +import clsx from 'clsx'; const FormModal = () => { const [form] = Form.useForm(); const containerStore = useAppVersionStore( @@ -86,13 +87,19 @@ export const AppVersionList = () => { return { list: state.list, getList: state.getList, + key: state.key, setKey: state.setKey, setShowEdit: state.setShowEdit, + formData: state.formData, setFormData: state.setFormData, deleteData: state.deleteData, + publishVersion: state.publishVersion, + app: state.app, }; }), ); + const navigate = useNavigate(); + const [isUpload, setIsUpload] = useState(false); useEffect(() => { // fetch app version list if (appKey) { @@ -100,6 +107,9 @@ export const AppVersionList = () => { versionStore.getList(); } }, []); + const appVersion = useMemo(() => { + return versionStore.app?.version || ''; + }, [versionStore.app]); return (
@@ -111,33 +121,68 @@ export const AppVersionList = () => { icon={} />
-
- -
-
-
+ +
+
+ +
+ +
{versionStore.list.map((item, index) => { + const isPublish = item.version === appVersion; + const color = isPublish ? 'bg-green-500' : ''; return ( -
-
{item.version}
+
+
+ {item.version} -
+ +
+
+
+
-
@@ -147,7 +192,63 @@ export const AppVersionList = () => {
+
+ {isUpload && ( +
+
+ +
+ +
+ )} +
); }; +export const AppVersionFile = () => { + const versionStore = useAppVersionStore( + useShallow((state) => { + return { + formData: state.formData, + }; + }), + ); + const versionFiles = useMemo(() => { + if (!versionStore.formData?.data) return []; + const files = versionStore.formData.data.files || []; + return files; + }, [versionStore.formData]); + return ( + <> +
version: {versionStore.formData.version}
+
+
+ Files + +
+
+ {versionFiles.map((file, index) => { + const prefix = versionStore.formData.key + '/' + versionStore.formData.version + '/'; + const _path = file.path || ''; + const path = _path.replace(prefix, ''); + return ( +
+ {/*
{file.name}
*/} +
{path}
+
+ ); + })} +
+
+ + ); +}; diff --git a/src/pages/app/edit/List.tsx b/src/pages/app/edit/List.tsx index aa41c79..e00a92e 100644 --- a/src/pages/app/edit/List.tsx +++ b/src/pages/app/edit/List.tsx @@ -1,8 +1,8 @@ import { useShallow } from 'zustand/react/shallow'; import { useUserAppStore } from '../store'; import { useEffect } from 'react'; -import { Button, Form, Input, Modal } from 'antd'; -import { PlusOutlined } from '@ant-design/icons'; +import { Button, Form, Input, Modal, Select, Tooltip } from 'antd'; +import { DeleteOutlined, EditOutlined, PlusOutlined, UnorderedListOutlined } from '@ant-design/icons'; import { isObjectNull } from '@/utils/is-null'; import { useNavigate } from 'react-router'; import { FileUpload } from '../modules/FileUpload'; @@ -61,12 +61,23 @@ const FormModal = () => { + + + + + +
); }; diff --git a/src/pages/app/store/app-version.ts b/src/pages/app/store/app-version.ts index 62252b3..a21bd05 100644 --- a/src/pages/app/store/app-version.ts +++ b/src/pages/app/store/app-version.ts @@ -1,20 +1,25 @@ import { create } from 'zustand'; import { query } from '@/modules'; import { message } from 'antd'; +import { isObjectNull } from '@/utils/is-null'; type AppVersionStore = { showEdit: boolean; setShowEdit: (showEdit: boolean) => void; formData: any; setFormData: (formData: any) => void; + updateByFromData: () => void; loading: boolean; setLoading: (loading: boolean) => void; key: string; setKey: (key: string) => void; list: any[]; getList: () => Promise; + app: any; + getApp: (key: string, force?: boolean) => Promise; updateData: (data: any) => Promise; deleteData: (id: string) => Promise; + publishVersion: (data: any) => Promise; }; export const useAppVersionStore = create((set, get) => { return { @@ -22,6 +27,16 @@ export const useAppVersionStore = create((set, get) => { setShowEdit: (showEdit) => set({ showEdit }), formData: {}, setFormData: (formData) => set({ formData }), + updateByFromData: () => { + const { formData, list } = get(); + const data = list.map((item) => { + if (item.id === formData.id) { + return formData; + } + return item; + }); + set({ list: data }); + }, loading: false, setLoading: (loading) => set({ loading }), key: '', @@ -38,6 +53,7 @@ export const useAppVersionStore = create((set, get) => { key, }, }); + get().getApp(key); set({ loading: false }); if (res.code === 200) { set({ list: res.data }); @@ -45,6 +61,25 @@ export const useAppVersionStore = create((set, get) => { message.error(res.message || 'Request failed'); } }, + app: {}, + getApp: async (key, force) => { + const { app } = get(); + if (!force && !isObjectNull(app)) { + return; + } + const res = await query.post({ + path: 'user-app', + key: 'get', + data: { + key, + }, + }); + if (res.code === 200) { + set({ app: res.data }); + } else { + message.error(res.message || 'Request failed'); + } + }, updateData: async (data) => { const { getList } = get(); const res = await query.post({ @@ -74,5 +109,22 @@ export const useAppVersionStore = create((set, get) => { message.error(res.message || 'Request failed'); } }, + publishVersion: async (data) => { + const { getList } = get(); + const loaded = message.loading('Publishing...', 0); + const res = await query.post({ + path: 'app', + key: 'publish', + data, + }); + loaded(); + if (res.code === 200) { + message.success('Success'); + // getList(); + get().getApp(get().key, true); + } else { + message.error(res.message || 'Request failed'); + } + }, }; }); diff --git a/src/pages/org/edit/List.tsx b/src/pages/org/edit/List.tsx new file mode 100644 index 0000000..2ab5df9 --- /dev/null +++ b/src/pages/org/edit/List.tsx @@ -0,0 +1,212 @@ +import { Button, Input, message, Modal, Table, Tooltip } from 'antd'; +import { Fragment, useEffect, useMemo, useState } from 'react'; +import { useOrgStore } from '../store'; +import { useShallow } from 'zustand/react/shallow'; +import { Form } from 'antd'; +import { useNavigate } from 'react-router'; +import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, PlusOutlined, SwapOutlined } from '@ant-design/icons'; +import clsx from 'clsx'; +import { isObjectNull } from '@/utils/is-null'; +import { CardBlank } from '@/components/card/CardBlank'; +import { useLayoutStore } from '@/modules/layout/store'; + +const FormModal = () => { + const [form] = Form.useForm(); + const userStore = useOrgStore( + useShallow((state) => { + return { + showEdit: state.showEdit, + setShowEdit: state.setShowEdit, + formData: state.formData, + updateData: state.updateData, + setFormData: state.setFormData, + }; + }), + ); + useEffect(() => { + const open = userStore.showEdit; + if (open) { + const isNull = isObjectNull(userStore.formData); + if (isNull) { + form.setFieldsValue({}); + } else form.setFieldsValue(userStore.formData); + } + }, [userStore.showEdit, userStore.formData]); + const onFinish = async (values: any) => { + userStore.updateData(values); + }; + const onClose = () => { + userStore.setShowEdit(false); + form.setFieldsValue({}); + userStore.setFormData({}); + }; + const isEdit = userStore.formData.id; + return ( + userStore.setShowEdit(false)} + destroyOnClose + footer={false} + width={800} + onCancel={onClose}> +
+ + + + + + + + + + + +
+
+ ); +}; +export const List = () => { + const navicate = useNavigate(); + const userStore = useOrgStore( + useShallow((state) => { + return { + setFormData: state.setFormData, + setShowEdit: state.setShowEdit, + list: state.list, + deleteData: state.deleteData, + getList: state.getList, + loading: state.loading, + updateData: state.updateData, + formData: state.formData, + }; + }), + ); + const layoutStore = useLayoutStore( + useShallow((state) => { + return { + switchOrg: state.switchOrg, + }; + }), + ); + const [codeEdit, setCodeEdit] = useState(false); + const [code, setCode] = useState(''); + useEffect(() => { + userStore.getList(); + }, []); + + const onAdd = () => { + userStore.setFormData({}); + userStore.setShowEdit(true); + }; + return ( +
+
+ +
+
+
+
+ {userStore.list.length > 0 && + userStore.list.map((item) => { + return ( + +
{ + setCode(item.code); + userStore.setFormData(item); + setCodeEdit(true); + }}> +
+
{ + e.stopPropagation(); + // message.success('copy code success'); + }}> + {item.username || '-'} +
+
{item.description ? item.description : '-'}
+
+
+ + + + + + + +
+
+
+ ); + })} + {userStore.list.length == 0 &&
No Data
} + +
+
+
+
+
+ + +
+
+
+ { + // setCode(value); + }} + className='h-full max-h-full scrollbar' + style={{ overflow: 'auto' }} + /> +
+
+
+ +
+ ); +}; diff --git a/src/pages/org/index.tsx b/src/pages/org/index.tsx new file mode 100644 index 0000000..b014bd1 --- /dev/null +++ b/src/pages/org/index.tsx @@ -0,0 +1,13 @@ +import { Navigate, Route, Routes } from 'react-router-dom'; +import { List } from './edit/List'; +import { Main } from './layouts'; +export const App = () => { + return ( + + }> + }> + } /> + + + ); +}; diff --git a/src/pages/org/layouts/index.tsx b/src/pages/org/layouts/index.tsx new file mode 100644 index 0000000..be7811e --- /dev/null +++ b/src/pages/org/layouts/index.tsx @@ -0,0 +1,4 @@ +import { LayoutMain } from '@/modules/layout'; +export const Main = () => { + return ; +}; diff --git a/src/pages/org/store/index.ts b/src/pages/org/store/index.ts new file mode 100644 index 0000000..a09c34d --- /dev/null +++ b/src/pages/org/store/index.ts @@ -0,0 +1,69 @@ +import { create } from 'zustand'; +import { query } from '@/modules'; +import { message } from 'antd'; +type OrgStore = { + showEdit: boolean; + setShowEdit: (showEdit: boolean) => void; + formData: any; + setFormData: (formData: any) => void; + loading: boolean; + setLoading: (loading: boolean) => void; + list: any[]; + getList: () => Promise; + updateData: (data: any) => Promise; + deleteData: (id: string) => Promise; +}; +export const useOrgStore = create((set, get) => { + return { + showEdit: false, + setShowEdit: (showEdit) => set({ showEdit }), + formData: {}, + setFormData: (formData) => set({ formData }), + loading: false, + setLoading: (loading) => set({ loading }), + list: [], + getList: async () => { + set({ loading: true }); + + const res = await query.post({ + path: 'org', + key: 'list', + }); + set({ loading: false }); + if (res.code === 200) { + set({ list: res.data }); + } else { + message.error(res.message || 'Request failed'); + } + }, + updateData: async (data) => { + const { getList } = get(); + const res = await query.post({ + path: 'org', + key: 'update', + data, + }); + if (res.code === 200) { + message.success('Success'); + set({ showEdit: false, formData: [] }); + getList(); + } else { + message.error(res.message || 'Request failed'); + } + }, + deleteData: async (id) => { + const { getList } = get(); + const res = await query.post({ + path: 'org', + key: 'delete', + id, + }); + if (res.code === 200) { + getList(); + message.success('Success'); + } else { + message.error(res.message || 'Request failed'); + } + }, + }; +}); diff --git a/src/pages/panel/deck/index.tsx b/src/pages/panel/deck/index.tsx index 56277fd..2947906 100644 --- a/src/pages/panel/deck/index.tsx +++ b/src/pages/panel/deck/index.tsx @@ -11,6 +11,7 @@ import { CloseOutlined, MessageOutlined, SaveOutlined, SelectOutlined } from '@a import { useDeckPageStore } from './deck-store'; import { FormModal } from './Model.tsx'; import { useAiStore } from '@/pages/ai-chat/index.tsx'; + export const useListener = (id?: string, opts?: any) => { const { refresh } = opts || {}; const connected = useStore((state) => state.connected); @@ -269,14 +270,10 @@ export const Deck = () => { deckPageStore.setPageData([..._pageData]); }; const init = async (data: any[]) => { - console.log( - 'init', - data.filter((item) => item.codeId), - ); // console.log('data', data, ref.current); const container = new ContainerEdit({ root: ref.current!, - data: data.filter((item) => item.codeId), + data: data, showChild: true, // edit: false, }); diff --git a/src/pages/panel/edit/List.tsx b/src/pages/panel/edit/List.tsx index 8055f1f..77cf6b8 100644 --- a/src/pages/panel/edit/List.tsx +++ b/src/pages/panel/edit/List.tsx @@ -7,8 +7,10 @@ import copy from 'copy-to-clipboard'; import { useNavigate } from 'react-router'; import { useToCodeEditor } from '@/pages/code-editor'; import { CardBlank } from '@/components/card/CardBlank'; -import { DeleteOutlined, EditOutlined, ForkOutlined, GoldOutlined, PlusOutlined, ToolOutlined } from '@ant-design/icons'; +import { CloudUploadOutlined, DeleteOutlined, EditOutlined, ForkOutlined, GoldOutlined, PlusOutlined, ToolOutlined } from '@ant-design/icons'; import { isObjectNull } from '@/utils/is-null'; +import { PublishFormModal } from './modal/PublishFormModal'; + const FormModal = () => { const [form] = Form.useForm(); const editStore = useEditStore( @@ -97,6 +99,7 @@ export const List = () => { deleteData: state.deleteData, getList: state.getList, loading: state.loading, + setShowPublishModal: state.setShowPublishModal, }; }), ); @@ -160,6 +163,15 @@ export const List = () => { icon={} /> + +
+
); }; diff --git a/src/pages/panel/edit/modal/PublishFormModal.tsx b/src/pages/panel/edit/modal/PublishFormModal.tsx new file mode 100644 index 0000000..6c7212c --- /dev/null +++ b/src/pages/panel/edit/modal/PublishFormModal.tsx @@ -0,0 +1,97 @@ +import { useEditStore } from '../../store'; +import { Button, Input, message, Modal, Tooltip } from 'antd'; +import { useEffect, version } from 'react'; +import { useShallow } from 'zustand/react/shallow'; +import { Form } from 'antd'; +import { CloudUploadOutlined, DeleteOutlined, EditOutlined, ForkOutlined, GoldOutlined, PlusOutlined, ToolOutlined } from '@ant-design/icons'; +import { isObjectNull } from '@/utils/is-null'; + +export const PublishFormModal = () => { + const [form] = Form.useForm(); + const editStore = useEditStore( + useShallow((state) => { + return { + showEdit: state.showPublishModal, + setShowEdit: state.setShowPublishModal, + formData: state.formData, + setFormData: state.setFormData, + updateData: state.updateData, + publishData: state.publishData, + }; + }), + ); + useEffect(() => { + const open = editStore.showEdit; + if (open) { + if (isObjectNull(editStore.formData.data)) { + form.setFieldsValue({ + publish: {}, + }); + } else + form.setFieldsValue({ + ...editStore.formData, + publish: { + ...editStore.formData?.publish, + }, + }); + } + }, [editStore.showEdit, editStore.formData]); + const onFinish = async (values: any) => { + editStore.updateData(values); + }; + const onClose = () => { + editStore.setShowEdit(false); + form.resetFields(); + editStore.setFormData({}); + }; + const isEdit = editStore.formData.publish?.id; + const onPublish = () => { + // @ts-ignore + const values = form.getFieldsValue(); + editStore.publishData(values); + }; + return ( + +
+ + + + + + + + 发布 +
+ } + /> + + + + + + + + + + + ); +}; diff --git a/src/pages/panel/store/edit.ts b/src/pages/panel/store/edit.ts index 6eb4f28..2b12c7e 100644 --- a/src/pages/panel/store/edit.ts +++ b/src/pages/panel/store/edit.ts @@ -13,6 +13,9 @@ type EditStore = { getList: () => Promise; updateData: (data: any) => Promise; deleteData: (id: string) => Promise; + showPublishModal: boolean; + setShowPublishModal: (showPublishModal: boolean) => void; + publishData: (data: any) => Promise; }; export const useEditStore = create((set, get) => { return { @@ -49,6 +52,27 @@ export const useEditStore = create((set, get) => { message.error(res.message || 'Request failed'); } }, + publishData: async (data) => { + const { getList, list } = get(); + const res = await query.post({ + path: 'page', + key: 'publish', + data, + }); + if (res.code === 200) { + message.success('Success'); + set({ formData: res.data }); + const newList = list.map((item) => { + if (item.id === data.id) { + return res.data; + } + return item; + }); + set({ list: newList }); + } else { + message.error(res.message || 'Request failed'); + } + }, deleteData: async (id) => { const { getList } = get(); const res = await query.post({ @@ -63,5 +87,7 @@ export const useEditStore = create((set, get) => { message.error(res.message || 'Request failed'); } }, + showPublishModal: false, + setShowPublishModal: (showPublishModal) => set({ showPublishModal }), }; }); diff --git a/src/pages/panel/store/panel.ts b/src/pages/panel/store/panel.ts index 4c81c0d..a90d5ee 100644 --- a/src/pages/panel/store/panel.ts +++ b/src/pages/panel/store/panel.ts @@ -70,7 +70,7 @@ export const usePanelStore = create((set, get) => { }, }); if (res.code === 200) { - message.success('Success'); + message.success('Success', 1); set( produce((state) => { state.data = res.data; @@ -92,7 +92,7 @@ export const usePanelStore = create((set, get) => { }, }); if (res.code === 200) { - message.success('Success'); + message.success('Success', 1); // getList(); } else { message.error(res.message || 'Request failed'); @@ -114,7 +114,7 @@ export const usePanelStore = create((set, get) => { loaded(); set({ loading: false }); if (res.code === 200) { - message.success('Success'); + message.success('Update Style Success', 1); // getList(); return true; } else { diff --git a/src/pages/user/edit/List.tsx b/src/pages/user/edit/List.tsx index 4862107..fde1356 100644 --- a/src/pages/user/edit/List.tsx +++ b/src/pages/user/edit/List.tsx @@ -4,7 +4,7 @@ import { useUserStore } from '../store'; import { useShallow } from 'zustand/react/shallow'; import { Form } from 'antd'; import { useNavigate } from 'react-router'; -import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined } from '@ant-design/icons'; +import { EditOutlined, SettingOutlined, LinkOutlined, SaveOutlined, DeleteOutlined, LeftOutlined, PlusOutlined } from '@ant-design/icons'; import clsx from 'clsx'; import { isObjectNull } from '@/utils/is-null'; import { CardBlank } from '@/components/card/CardBlank'; @@ -106,7 +106,10 @@ export const List = () => { userStore.setShowEdit(true); }; return ( -
+
+
+ +
diff --git a/src/pages/user/layouts/index.tsx b/src/pages/user/layouts/index.tsx index 378382a..be7811e 100644 --- a/src/pages/user/layouts/index.tsx +++ b/src/pages/user/layouts/index.tsx @@ -1,46 +1,4 @@ -import { PlusOutlined } from '@ant-design/icons'; -import { Button } from 'antd'; -import { Outlet, useLocation } from 'react-router'; -import { useUserStore } from '../store'; -import { useEffect } from 'react'; -import { useShallow } from 'zustand/react/shallow'; - +import { LayoutMain } from '@/modules/layout'; export const Main = () => { - const containerStore = useUserStore( - useShallow((state) => { - return { - setFormData: state.setFormData, - setShowEdit: state.setShowEdit, - }; - }), - ); - const location = useLocation(); - const isEdit = location.pathname.includes('edit/list'); - return ( -
-
- User -
-
-
-
- -
-
-
-
- ); + return ; };