feat: 优化编辑器

JackySoft · Dec 18, 2024 · 07842ec · 07842ec
1 parent 174db3d
commit 07842ec
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 50 deletions.
diff --git a/packages/editor/src/layout/components/Header/index.module.less b/packages/editor/src/layout/components/Header/index.module.less
@@ -80,7 +80,6 @@
   .avatar {
     display: flex;
     align-items: center;
-    margin-right: 30px;
     cursor: pointer;
   }
 }

diff --git a/packages/editor/src/layout/components/Header/index.tsx b/packages/editor/src/layout/components/Header/index.tsx
@@ -262,22 +262,30 @@ const Header = memo(() => {
         {/* 用户信息&发布&发布记录 */}
         <div className={styles.user}>
           <Space>
-            <Popover
-              placement="bottom"
-              content={
-                <>
-                  <img width={150} src={`https://imgcloud.cdn.bcebos.com/f35323e9a2625a85909cb6f02.png`} />
-                  <p style={{ textAlign: 'center' }}>请备注：marsview</p>
-                </>
-              }
-            >
-              <Button type="text" style={{ color: 'var(--mars-theme-text-color)' }}>
-                联系我
-              </Button>
-            </Popover>
-            <Button type="text" style={{ color: 'var(--mars-theme-text-color)' }} onClick={() => window.open('http://docs.marsview.cc', '_blank')}>
-              帮助文档
-            </Button>
+            {isEditPage ? null : (
+              <>
+                <Popover
+                  placement="bottom"
+                  content={
+                    <>
+                      <img width={150} src={`https://imgcloud.cdn.bcebos.com/f35323e9a2625a85909cb6f02.png`} />
+                      <p style={{ textAlign: 'center' }}>请备注：marsview</p>
+                    </>
+                  }
+                >
+                  <Button type="text" style={{ color: 'var(--mars-theme-text-color)' }}>
+                    联系我
+                  </Button>
+                </Popover>
+                <Button
+                  type="text"
+                  style={{ color: 'var(--mars-theme-text-color)' }}
+                  onClick={() => window.open('http://docs.marsview.cc', '_blank')}
+                >
+                  帮助文档
+                </Button>
+              </>
+            )}
             <Switch
               checkedChildren={<MoonFilled />}
               unCheckedChildren={<SunOutlined />}
@@ -353,8 +361,8 @@ const Header = memo(() => {
             {
               <a href="https://github.com/JackySoft/marsview" className={styles.githubCorner} aria-label="View source on GitHub" target="_blank">
                 <svg
-                  width="50"
-                  height="50"
+                  width="40"
+                  height="40"
                   viewBox="0 0 250 250"
                   style={{ fill: '#7d33ff', color: '#fff', position: 'absolute', top: 0, border: 0, right: 0 }}
                   aria-hidden="true"

diff --git a/packages/editor/src/layout/components/Menu/index.module.less b/packages/editor/src/layout/components/Menu/index.module.less
@@ -2,7 +2,11 @@
 .leftTool {
   :global {
     .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab {
-      padding: 8px 5px 8px 17px;
+      padding: 8px;
+      justify-content: center;
+    }
+    .ant-tabs-tab .anticon:not(:last-child) {
+      margin-right: 0;
     }
   }
 }

diff --git a/packages/editor/src/layout/components/Menu/index.tsx b/packages/editor/src/layout/components/Menu/index.tsx
@@ -1,5 +1,5 @@
 import { lazy, Suspense } from 'react';
-import { Col, Row, Space, Tabs, Tooltip } from 'antd';
+import { Col, Flex, Row, Space, Tabs, Tooltip } from 'antd';
 import {
   AppstoreOutlined,
   PartitionOutlined,
@@ -32,30 +32,33 @@ const VariableList = lazy(() => import('./Variable/VariableList'));
 const panels = [
   {
     key: 'ComponentPanel',
-    icon: <AppstoreOutlined />,
+    icon: <AppstoreOutlined style={{ fontSize: 16 }} />,
+    label: '组件',
     title: (
       <Space>
-        <span>组件物料</span>
+        <span>组件</span>
         <Tooltip title="无需拖拽，直接点击就能添加到画布中。">
           <QuestionCircleOutlined />
         </Tooltip>
       </Space>
     ),
-    component: () => {
+    children: () => {
       return <ComponentPanel />;
     },
   },
   {
     key: 'home',
-    icon: <ProjectOutlined />,
+    icon: <ProjectOutlined style={{ fontSize: 16 }} />,
+    label: '页面',
     title: '页面列表',
-    component: () => {
+    children: () => {
       return <PageList />;
     },
   },
   {
     key: 'OutlinePanel',
-    icon: <PartitionOutlined />,
+    icon: <PartitionOutlined style={{ fontSize: 16 }} />,
+    label: '大纲',
     title: (
       <Space>
         <span>页面大纲</span>
@@ -64,39 +67,43 @@ const panels = [
         </Tooltip>
       </Space>
     ),
-    component: () => {
+    children: () => {
       return <OutlinePanel />;
     },
   },
   {
     key: 'CodingPanel',
-    icon: <CodeOutlined />,
+    icon: <CodeOutlined style={{ fontSize: 16 }} />,
+    label: '代码',
     title: '页面JSON',
-    component: () => {
+    children: () => {
       return <CodingPanel />;
     },
   },
   {
     key: 'ApiList',
-    icon: <ApiOutlined />,
+    icon: <ApiOutlined style={{ fontSize: 16 }} />,
+    label: '接口',
     title: '页面接口',
-    component: () => {
+    children: () => {
       return <ApiList />;
     },
   },
   {
     key: 'Variable',
-    icon: <FunctionOutlined />,
+    icon: <FunctionOutlined style={{ fontSize: 16 }} />,
+    label: '变量',
     title: '页面变量',
-    component: () => {
+    children: () => {
       return <VariableList />;
     },
   },
   {
     key: 'Member',
-    icon: <UsergroupAddOutlined />,
+    icon: <UsergroupAddOutlined style={{ fontSize: 16 }} />,
+    label: '成员',
     title: '页面成员',
-    component: () => {
+    children: () => {
       return <MemberList />;
     },
   },
@@ -113,16 +120,17 @@ const Menu = () => {
         size={'small'}
         defaultActiveKey={panels[0].key}
         tabPosition="left"
-        tabBarStyle={{ width: '50px', height: 'calc(100vh - 64px)' }}
+        tabBarStyle={{ width: 50, height: 'calc(100vh - 64px)' }}
         className={styles.leftTool}
         centered={true}
         items={panels.map((item) => {
           return {
             key: item.key,
             label: (
-              <Tooltip placement="right" title={item.title}>
+              <Flex vertical justify="center" align="center" gap={5}>
                 {item.icon}
-              </Tooltip>
+                <span style={{ fontSize: 12 }}>{item.label}</span>
+              </Flex>
             ),
             children: (
               <div style={{ marginLeft: -10, marginRight: 10 }}>
@@ -131,7 +139,7 @@ const Menu = () => {
                     <span style={{ fontWeight: 'bold' }}>{item.title}</span>
                   </Col>
                 </Row>
-                <Suspense fallback={<SpinLoading />}>{item.component?.()}</Suspense>
+                <Suspense fallback={<SpinLoading />}>{item.children?.()}</Suspense>
               </div>
             ),
           };

diff --git a/packages/editor/src/pages/admin/user/CreateUser.tsx b/packages/editor/src/pages/admin/user/CreateUser.tsx
@@ -109,7 +109,7 @@ export default function CreateMenu(props: IModalProp<UserItem>) {
   return (
     <>
       <Modal
-        title={action === 'create' ? '创建用户' : '编辑用户'}
+        title={action === 'create' ? '添加用户' : '编辑用户'}
         width={600}
         open={visible}
         okText="确定"
@@ -119,7 +119,7 @@ export default function CreateMenu(props: IModalProp<UserItem>) {
         onCancel={handleCancel}
       >
         <Spin spinning={loading}>
-          <Form form={form} labelAlign="right" labelCol={{ span: 4 }} initialValues={{ systemRole: 1 }}>
+          <Form form={form} layout="vertical" labelCol={{ span: 4 }} initialValues={{ systemRole: 1 }} style={{ marginTop: 20 }}>
             <Form.Item hidden name="id">
               <Input />
             </Form.Item>
@@ -130,7 +130,12 @@ export default function CreateMenu(props: IModalProp<UserItem>) {
               </Radio.Group>
             </Form.Item>
             {action === 'create' && (
-              <Form.Item label="用户" name="user_info" rules={[{ required: true, message: '请输入用户邮箱' }]}>
+              <Form.Item
+                label="用户"
+                name="user_info"
+                rules={[{ required: true, message: '请输入用户邮箱' }]}
+                extra="该用户必须为系统已注册用户，最终通过此角色来控制用户访问"
+              >
                 <Select
                   labelInValue
                   filterOption={false}
@@ -145,7 +150,7 @@ export default function CreateMenu(props: IModalProp<UserItem>) {
 
             {/* 只有普通用户才需要设置角色 */}
             {systemRole === 2 && (
-              <Form.Item label="角色" name="roleId" rules={[{ required: true, message: '请输入菜单名称' }]}>
+              <Form.Item label="角色" name="roleId" rules={[{ required: true, message: '请输入菜单名称' }]} extra="若没有角色，可先去角色列表创建">
                 <Select showSearch>
                   {roleList.map((item) => (
                     <Select.Option key={item.id} value={item.id}>

diff --git a/packages/editor/src/pages/admin/user/index.tsx b/packages/editor/src/pages/admin/user/index.tsx
@@ -162,7 +162,7 @@ export default function MenuList() {
         }
         action={
           <Button type="primary" onClick={handleCreate}>
-            新增
+            添加
           </Button>
         }
       >

diff --git a/packages/editor/src/pages/home/project/components/ProjectCard.tsx b/packages/editor/src/pages/home/project/components/ProjectCard.tsx
@@ -30,7 +30,7 @@ export default function Category({ list }: { list: Project.ProjectItem[] }) {
     {
       key: 'config',
       icon: <SettingOutlined />,
-      label: '设置',
+      label: '项目配置',
     },
     {
       type: 'divider',
@@ -72,7 +72,7 @@ export default function Category({ list }: { list: Project.ProjectItem[] }) {
               </h3>
             </div>
             {/* 卡片内容 */}
-            <div className={styles.cardContent}>
+            <div className={styles.cardContent} onClick={() => handleDoubleClick(project.id)}>
               <Paragraph className={styles.description}>{project.remark}</Paragraph>
               <div className={styles.metaInfo}>
                 <UserOutlined className={styles.metaIcon} />
@@ -86,12 +86,11 @@ export default function Category({ list }: { list: Project.ProjectItem[] }) {
               </div>
             </div>
             {/* 卡片更多 */}
-            <Flex align="center" className={styles.moreInfo}>
-              <div>双击查看页面</div>
+            <div className={styles.moreInfo}>
               <Dropdown menu={{ items, onClick }} arrow placement="bottomRight" trigger={['click']}>
                 <MoreOutlined className={styles.moreIcon} onClick={() => setItem(project)} />
               </Dropdown>
-            </Flex>
+            </div>
             {/* 项目Logo */}
             <Avatar src={project.logo} className={styles.projectLogo} />
           </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -162,7 +162,7 @@ export default function MenuList() { @@
             }
             action={
               <Button type="primary" onClick={handleCreate}>
-                新增
+                添加
               </Button>
             }
           >
@@ Expand Down @@