feat: 功能重构

JackySoft · Dec 18, 2024 · 60f7f93 · 60f7f93
1 parent b4796c8
commit 60f7f93
Show file tree

Hide file tree

Showing 27 changed files with 504 additions and 689 deletions.
diff --git a/packages/admin/src/pages/page/index.tsx b/packages/admin/src/pages/page/index.tsx
@@ -66,7 +66,6 @@ export default function () {
             pageId: res.id,
             pageName: res.name,
             remark: res.remark,
-            isPublic: res.isPublic,
             stgPublishId: res.stgPublishId,
             prePublishId: res.prePublishId,
             prdPublishId: res.prdPublishId,

diff --git a/packages/docs/src/page/json.md b/packages/docs/src/page/json.md
@@ -67,8 +67,6 @@
       "timeout": 8,
       "timeoutErrorMessage": "请求超时，请稍后再试"
     },
-    "isPublic": 1,
-    "isEdit": 1,
     "preview_img": null,
     "stgPublishId": 0,
     "prePublishId": 0,

diff --git a/packages/editor/src/App.less b/packages/editor/src/App.less
@@ -4,19 +4,13 @@ html[data-theme='dark'] {
   // 系统风格
   --mars-primary-color: #7d33ff;
   --mars-border-color: #e8e9eb;
-  // 暗黑主题
-  --mars-theme-color: #000;
-  // 暗黑主题文字颜色
-  --mars-theme-text-color: #fff;
-  // 暗黑主题次级文字颜色
-  --mars-theme-text-secondary-color: #b4b4b4;
-  --mars-theme-border-color: transparent;
-  // 卡片边框颜色
-  --mars-theme-card-border-color: #303030;
-  // 卡片文字颜色
+  --mars-theme-color: #000; // 暗黑主题
+  --mars-theme-text-color: #fff; // 暗黑主题文字颜色
+  --mars-theme-text-secondary-color: #b4b4b4; // 暗黑主题次级文字颜色
+  --mars-theme-border-color: transparent; // 卡片边框颜色
+  --mars-theme-card-border-color: #303030; // 卡片文字颜色
   --mars-theme-card-text-color: rgba(255, 255, 255, 0.85);
-  // 暗黑背景颜色
-  --mars-theme-bg-color: #1e2430;
+  --mars-theme-bg-color: #1e2430; // 暗黑背景颜色
   --mars-cross-bg: url('/imgs/cross-bg-dark.png');
   background-color: #141414;
 }
@@ -25,9 +19,10 @@ html {
   --mars-border-color: #e8e9eb;
   --mars-theme-color: #fff;
   --mars-theme-text-color: #000;
+  --mars-theme-text-secondary-color: #00000073;
   --mars-theme-border-color: #e8e9eb;
   --mars-theme-card-border-color: #f0f0f0;
   --mars-theme-card-text-color: #000000bd;
-  --mars-theme-bg-color: #f5f5f5;
+  --mars-theme-bg-color: #f9f9f9;
   --mars-cross-bg: url('/imgs/cross-bg.png');
 }
diff --git a/packages/editor/src/api/index.ts b/packages/editor/src/api/index.ts
@@ -73,13 +73,18 @@ export const getProjectList = (params: ProjectListParams) => {
   return request.get('/project/list', params);
 };
 
+// 获取我名下所有项目列表
+export const getAllProjects = () => {
+  return request.get('/project/queryAllProjects');
+};
+
 // 新增项目
 export const addProject = (params: ProjectCreateParams) => {
   return request.post('/project/create', params);
 };
 
 // 删除项目
-export const delProject = (params: { id: number }) => {
+export const delProject = (params: { id: number; type?: string }) => {
   return request.post('/project/delete', params);
 };
 

diff --git a/packages/editor/src/api/pageMember.ts b/packages/editor/src/api/pageMember.ts
@@ -18,7 +18,7 @@ export interface PageItem {
   id: number;
   name: string;
   remark: string;
-  isPublic: number;
+  projectId: number;
 }
 
 /**

diff --git a/packages/editor/src/api/types/index.ts b/packages/editor/src/api/types/index.ts
@@ -6,6 +6,7 @@ export interface PageParams {
   keyword?: string;
   pageNum: number;
   pageSize?: number;
+  projectId: number;
 }
 
 export interface PageItem {
@@ -23,7 +24,6 @@ export interface PageItem {
   preState: number;
   prdState: number;
   previewImg: string;
-  isPublic: number;
 }
 
 export interface PageReqParams {
@@ -69,8 +69,8 @@ export namespace Project {
     logo: string;
     userId: number;
     userName: string;
-    isPublic: number;
     updatedAt: string;
+    count: number;
   }
 }
 /**
@@ -122,7 +122,6 @@ export interface ProjectCreateParams {
   name: string;
   remark?: string;
   logo: string;
-  isPublic: number;
 }
 
 export interface ProjectUpdateParams extends ProjectCreateParams {

diff --git a/packages/editor/src/components/CreatePage.tsx b/packages/editor/src/components/CreatePage.tsx
@@ -1,8 +1,9 @@
-import { Input, Modal, Form, Radio } from 'antd';
+import { Input, Modal, Form, Select, Space, Flex } from 'antd';
 import { useImperativeHandle, useState, MutableRefObject } from 'react';
-import { createPageData, updatePageData } from '@/api';
+import { createPageData, updatePageData, getAllProjects } from '@/api';
 import { PageItem } from '@/api/pageMember';
-import { usePageStore } from '@/stores/pageStore';
+import { Project } from '@/api/types';
+import { useSearchParams } from 'react-router-dom';
 /**
  * 创建页面
  */
@@ -19,18 +20,31 @@ const CreatePage = (props: IModalProp) => {
   const [type, setType] = useState<'create' | 'edit'>('create');
   const [recordId, setRecordId] = useState(0);
   const [loading, setLoading] = useState(false);
-  const userId = usePageStore((store) => store.userInfo.userId);
-
+  const [projectList, setProjectList] = useState<Project.ProjectItem[]>([]);
+  const [searchParams] = useSearchParams();
   // 暴露方法
   useImperativeHandle(props.createRef, () => ({
-    open(record?: PageItem) {
+    async open(record?: PageItem) {
+      const list = await getAllProjects();
+      setProjectList(
+        list.map((item: Project.ProjectItem) => {
+          return {
+            name: item.name,
+            id: item.id,
+            logo: item.logo,
+            remark: item.remark,
+          };
+        }),
+      );
       if (record) {
         setType('edit');
         setRecordId(record.id);
         form.setFieldsValue(record);
       } else {
+        const projectId = searchParams.get('projectId');
         setType('create');
         setRecordId(0);
+        if (projectId) form.setFieldValue('projectId', Number(projectId));
       }
       setVisible(true);
     },
@@ -77,31 +91,28 @@ const CreatePage = (props: IModalProp) => {
       okText="确定"
       cancelText="取消"
     >
-      <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} initialValues={{ isPublic: 1, isEdit: 1 }}>
+      <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 16 }}>
         <Form.Item label="名称" name="name" rules={[{ required: true, message: '请输入页面名称' }]}>
           <Input placeholder="请输入页面名称" maxLength={15} showCount />
         </Form.Item>
         <Form.Item label="描述" name="remark">
           <Input placeholder="请输入页面描述" maxLength={20} showCount />
         </Form.Item>
-        <Form.Item
-          label="权限"
-          name="isPublic"
-          rules={[{ required: true, message: '请选择访问类型' }]}
-          extra="公开页面支持所有人访问。私有页面仅自己可访问。"
-        >
-          <Radio.Group>
-            <Radio value={1}>公开</Radio>
-            <Radio value={2}>私有</Radio>
-            {/* 普通用户暂不开放模板设置 */}
-            {userId == 50 ? <Radio value={3}>公开模板</Radio> : null}
-          </Radio.Group>
-        </Form.Item>
-        <Form.Item label="模式" name="isEdit" rules={[{ required: true, message: '请选择编辑模式' }]} extra="公开后设置他人可查看或编辑；">
-          <Radio.Group>
-            <Radio value={1}>编辑</Radio>
-            <Radio value={2}>查看</Radio>
-          </Radio.Group>
+        <Form.Item label="所属项目" name="projectId" rules={[{ required: true, message: '请选择所属项目' }]}>
+          <Select
+            placeholder="请选择所属项目"
+            options={projectList}
+            fieldNames={{ label: 'name', value: 'id' }}
+            optionRender={(option) => (
+              <Space>
+                <img src={option.data.logo} style={{ maxWidth: 50, maxHeight: 50 }} />
+                <Flex vertical>
+                  <span>{option.data.name}</span>
+                  <span>{option.data.remark}</span>
+                </Flex>
+              </Space>
+            )}
+          />
         </Form.Item>
       </Form>
     </Modal>

diff --git a/packages/editor/src/components/CreateProject.tsx b/packages/editor/src/components/CreateProject.tsx
@@ -1,4 +1,4 @@
-import { Input, Modal, Form, Radio } from 'antd';
+import { Input, Modal, Form } from 'antd';
 import { useImperativeHandle, useState, forwardRef, memo } from 'react';
 import { addProject } from '@/api';
 import UploadImages from './UploadImages/UploadImages';
@@ -52,12 +52,7 @@ const CreateProject = (props: { update: () => void }, ref: any) => {
       okText="确定"
       cancelText="取消"
     >
-      <Form
-        form={form}
-        labelCol={{ span: 5 }}
-        wrapperCol={{ span: 16 }}
-        initialValues={{ logo: 'https://marsview.cdn.bcebos.com/mars-logo.png', isPublic: 1 }}
-      >
+      <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} initialValues={{ logo: 'https://marsview.cdn.bcebos.com/mars-logo.png' }}>
         <Form.Item label="名称" name="name" rules={[{ required: true, message: '请输入页面名称' }]}>
           <Input placeholder="请输入项目名称" maxLength={15} showCount />
         </Form.Item>
@@ -67,12 +62,6 @@ const CreateProject = (props: { update: () => void }, ref: any) => {
         <Form.Item label="LOGO" name="logo" rules={[{ required: true, message: '请上传项目Logo' }]}>
           <UploadImages />
         </Form.Item>
-        <Form.Item label="权限" name="isPublic" rules={[{ required: true, message: '请选择访问类型' }]} extra="公开项目支持所有人访问，但不可修改。">
-          <Radio.Group>
-            <Radio value={1}>公开</Radio>
-            <Radio value={2}>私有</Radio>
-          </Radio.Group>
-        </Form.Item>
       </Form>
     </Modal>
   );

diff --git a/packages/editor/src/components/Searchbar/SearchBar.tsx b/packages/editor/src/components/Searchbar/SearchBar.tsx
@@ -1,9 +1,11 @@
 import { memo } from 'react';
-import { Button, Form, Input, Radio, Space, Segmented } from 'antd';
-import { PlusOutlined, RedoOutlined, BarsOutlined, AppstoreOutlined } from '@ant-design/icons';
+import { Button, Form, Input, Radio, Space, Segmented, Tooltip } from 'antd';
+import { PlusOutlined, RedoOutlined, BarsOutlined, AppstoreOutlined, ArrowRightOutlined, ArrowLeftOutlined } from '@ant-design/icons';
 import styles from './index.module.less';
+import { useLocation } from 'react-router-dom';
 
 const SearchBar = memo((props: any) => {
+  const { pathname } = useLocation();
   const { form, from, submit, refresh, onCreate } = props;
   const options = [
     { label: '我的', value: 1 },
@@ -34,14 +36,21 @@ const SearchBar = memo((props: any) => {
           </Form>
         </div>
         <Space>
-          <Segmented
-            onChange={(value) => props.onViewChange(value)}
-            options={[
-              { value: 'project', icon: <AppstoreOutlined /> },
-              { value: 'list', icon: <BarsOutlined /> },
-            ]}
-          />
-          <Button type="dashed" style={{ marginRight: '10px' }} icon={<PlusOutlined />} onClick={onCreate}>
+          {pathname === '/projects' && (
+            <Segmented
+              onChange={(value) => props.onViewChange(value)}
+              options={[
+                { value: 'project', icon: <AppstoreOutlined /> },
+                { value: 'list', icon: <BarsOutlined /> },
+              ]}
+            />
+          )}
+          {pathname === '/project/pages' && (
+            <Tooltip title="返回">
+              <Button icon={<ArrowLeftOutlined />} shape="circle" onClick={() => history.back()}></Button>
+            </Tooltip>
+          )}
+          <Button type="dashed" icon={<PlusOutlined />} onClick={onCreate}>
             新建{from}
           </Button>
           <Button shape="circle" icon={<RedoOutlined />} onClick={() => refresh()}></Button>

diff --git a/packages/editor/src/layout/components/Header/index.tsx b/packages/editor/src/layout/components/Header/index.tsx
@@ -36,7 +36,7 @@ const Header = memo(() => {
 
   const {
     userInfo,
-    page: { pageId, pageName, remark, isPublic, isEdit, ...pageData },
+    page: { pageId, pageName, remark, ...pageData },
     mode,
     theme,
     setMode,
@@ -58,30 +58,25 @@ const Header = memo(() => {
   const goHome = () => {
     setMode('edit');
     // 点击Logo返回最近操作的列表，对用户友好
-    const isProject = /project\/\d+\/\w+/.test(location.pathname);
+    const isProject = /projects\/\d+\/\w+/.test(location.pathname);
     const isPage = /editor\/\d+\/(edit|publishHistory)/.test(location.pathname);
     const isLib = /lib\/\d+/.test(location.pathname);
     const isTmpl = /editor\/\d+\/template/.test(location.pathname);
-    if (isProject) navigate('/projects');
-    if (isPage) navigate('/pages');
-    if (isLib) navigate('/libs');
-    if (isTmpl) navigate('/templates');
+    if (isProject) return navigate('/projects');
+    if (isPage) return navigate('/projects');
+    if (isLib) return navigate('/libs');
+    if (isTmpl) return navigate('/templates');
     navigate('/projects');
   };
 
   // Tab切换项
   const items: MenuProps['items'] = useMemo(
     () => [
       {
-        label: '项目列表',
+        label: '我的项目',
         key: 'projects',
         icon: <ProjectOutlined style={{ fontSize: 16 }} />,
       },
-      {
-        label: '页面列表',
-        key: 'pages',
-        icon: <OneToOneOutlined style={{ fontSize: 16 }} />,
-      },
       {
         label: '组件库',
         key: 'libs',
@@ -107,7 +102,7 @@ const Header = memo(() => {
   );
 
   useEffect(() => {
-    if (['/projects', '/pages', '/libs', '/templates', '/workflows', '/cloud'].includes(location.pathname)) {
+    if (['/projects', '/libs', '/lib', '/templates', '/workflows', '/cloud'].includes(location.pathname)) {
       setNav(true);
       setNavKey([location.pathname.slice(1)]);
     } else {
@@ -160,8 +155,6 @@ const Header = memo(() => {
           id: pageId,
           name: pageName,
           remark: remark,
-          isPublic: isPublic ?? 1,
-          isEdit: isEdit ?? 1,
           pageData: pageInfo,
         });
         updatePageState({ env: 'all' });

diff --git a/packages/editor/src/layout/components/Menu/CodingPanel.tsx b/packages/editor/src/layout/components/Menu/CodingPanel.tsx
@@ -46,16 +46,14 @@ const CodingPanel = () => {
       message.error('页面数据格式异常，请检查重试');
       return;
     }
-    const { pageName, remark, isPublic, isEdit, ...pageData } = value.page;
+    const { pageName, remark, ...pageData } = value.page;
     /**
      * 页面ID和用户信息不允许修改
      */
     const params = {
       id: page.pageId,
       name: pageName,
       remark,
-      isPublic,
-      isEdit,
       pageData: JSON.stringify({
         ...pageData,
         pageId: undefined,
@@ -81,8 +79,6 @@ const CodingPanel = () => {
         pageId: page.pageId,
         pageName,
         remark,
-        isPublic,
-        isEdit,
         previewImg: page.previewImg,
         stgPublishId: page.stgPublishId,
         prePublishId: page.prePublishId,