impr: 功能体验优化

JackySoft · Oct 9, 2024 · e0653f9 · e0653f9
1 parent 16fdca1
commit e0653f9
Show file tree

Hide file tree

Showing 15 changed files with 50 additions and 58 deletions.
diff --git a/packages/admin/index.html b/packages/admin/index.html
@@ -13,7 +13,6 @@
     <link rel="preconnect" href="http://admin.marsview.cc" />
     <link rel="preconnect" href="http://mars-api.marsview.cc" />
     <link rel="preconnect" href="https://marsview.cdn.bcebos.com/" />
-    <link href="https://marsview.cdn.bcebos.com/static/antd%405.21.1/reset.css" rel="stylesheet" />
     <style>
       html,
       body {

diff --git a/packages/admin/src/components/Menu/Menu.tsx b/packages/admin/src/components/Menu/Menu.tsx
@@ -74,7 +74,7 @@ const MenuComponent: React.FC = () => {
         onClick={onClick}
         theme={projectInfo.menu_theme_color as MenuTheme}
         selectedKeys={selectedKeys}
-        style={{ height: 'calc(100vh - 60px)', border: 'none', overflowY: 'auto' }}
+        style={{ height: 'calc(100vh - 64px)', border: 'none', overflowY: 'auto' }}
         mode={projectInfo.menu_mode}
         inlineCollapsed={collapsed}
         items={menuList}

diff --git a/packages/admin/src/layout/layout.tsx b/packages/admin/src/layout/layout.tsx
@@ -71,7 +71,7 @@ const AdminLayout = () => {
 
   // 计算渲染区容器实际高度
   let height = 64;
-  let calcHeight = 'calc(100vh - 60px)';
+  let calcHeight = '';
   if (projectInfo.tag) {
     height += 50;
   }

diff --git a/packages/editor/index.html b/packages/editor/index.html
@@ -13,7 +13,6 @@
     <link rel="preconnect" href="http://www.marsview.cc" />
     <link rel="preconnect" href="http://mars-api.marsview.cc" />
     <link rel="preconnect" href="https://marsview.cdn.bcebos.com/" />
-    <link href="https://marsview.cdn.bcebos.com/static/antd%405.21.1/reset.css" rel="stylesheet" />
     <style>
       * {
         margin: 0;

diff --git a/packages/editor/src/components/Searchbar/SearchBar.tsx b/packages/editor/src/components/Searchbar/SearchBar.tsx
@@ -7,7 +7,7 @@ const SearchBar = memo((props: any) => {
   const { form, from, submit, refresh, onCreate } = props;
   const options = [
     { label: '我的', value: 1 },
-    { label: '市场', value: 2 },
+    { label: '他的', value: 2 },
   ];
 
   return (

diff --git a/packages/editor/src/layout/components/Header/PublishPopover.tsx b/packages/editor/src/layout/components/Header/PublishPopover.tsx
@@ -1,4 +1,4 @@
-import { Button } from 'antd';
+import { Button, Space, Tooltip } from 'antd';
 import { CheckOutlined, ClockCircleOutlined, LoadingOutlined } from '@ant-design/icons';
 import { usePageStore } from '@/stores/pageStore';
 import { publishPage } from '@/api';
@@ -49,18 +49,20 @@ export default function Publish() {
   }
   return (
     <div className={styles.publishPopover}>
-      <Button type={stg_publish_id ? 'link' : 'text'} danger={stg_state === 4} onClick={() => publishToEnv('stg')}>
-        STG
-        {!loading1 ? stg_state >= 3 ? <CheckOutlined /> : <ClockCircleOutlined /> : <LoadingOutlined />}
-      </Button>
-      <Button type={pre_publish_id ? 'link' : 'text'} danger={pre_state === 4} onClick={() => publishToEnv('pre')}>
-        PRE
-        {!loading2 ? pre_state >= 3 ? <CheckOutlined /> : <ClockCircleOutlined /> : <LoadingOutlined />}
-      </Button>
-      <Button type={prd_publish_id ? 'link' : 'text'} danger={prd_state === 4} onClick={() => publishToEnv('prd')}>
-        PRD
-        {!loading3 ? prd_state >= 3 ? <CheckOutlined /> : <ClockCircleOutlined /> : <LoadingOutlined />}
-      </Button>
+      <Space size={10}>
+        <Button type={stg_publish_id || stg_state >= 3 ? 'link' : 'text'} danger={stg_state === 4} onClick={() => publishToEnv('stg')}>
+          <Tooltip title="测试环境"> STG</Tooltip>
+          {!loading1 ? stg_state >= 3 ? <CheckOutlined /> : <ClockCircleOutlined /> : <LoadingOutlined />}
+        </Button>
+        <Button type={pre_publish_id || pre_state >= 3 ? 'link' : 'text'} danger={pre_state === 4} onClick={() => publishToEnv('pre')}>
+          <Tooltip title="预发布环境">PRE</Tooltip>
+          {!loading2 ? pre_state >= 3 ? <CheckOutlined /> : <ClockCircleOutlined /> : <LoadingOutlined />}
+        </Button>
+        <Button type={prd_publish_id || prd_state >= 3 ? 'link' : 'text'} danger={prd_state === 4} onClick={() => publishToEnv('prd')}>
+          <Tooltip title="生产环境">PRD</Tooltip>
+          {!loading3 ? prd_state >= 3 ? <CheckOutlined /> : <ClockCircleOutlined /> : <LoadingOutlined />}
+        </Button>
+      </Space>
     </div>
   );
 }
diff --git a/packages/editor/src/layout/components/Header/index.module.less b/packages/editor/src/layout/components/Header/index.module.less
@@ -84,8 +84,5 @@
   vertical-align: middle;
 }
 .publishPopover {
-  padding: 10px;
-  button {
-    margin-left: 10px;
-  }
+  padding: 20px;
 }
diff --git a/packages/editor/src/layout/components/Header/index.tsx b/packages/editor/src/layout/components/Header/index.tsx
@@ -244,7 +244,7 @@ const Header = memo(() => {
         <div className={styles.user}>
           {isEditPage && mode === 'edit' && (
             <>
-              <Popover placement="bottom" content={<Publish />}>
+              <Popover placement="bottom" content={<Publish />} trigger="click">
                 <Button type="primary">
                   发布
                   <CaretDownFilled />

diff --git a/packages/editor/src/pages/admin/config/index.tsx b/packages/editor/src/pages/admin/config/index.tsx
@@ -121,7 +121,7 @@ const Config: React.FC = memo(() => {
           </Radio.Group>
         </Form.Item>
         <Form.Item label="系统主题色" name="system_theme_color">
-          <ColorPicker />
+          <ColorPicker {...props} />
         </Form.Item>
         <Form.Item label="面包屑" name="breadcrumb" valuePropName="checked">
           <Switch {...props} />

diff --git a/packages/editor/src/pages/editor/editor.tsx b/packages/editor/src/pages/editor/editor.tsx
@@ -301,7 +301,7 @@ const Editor = () => {
           useMouseDrag={true}
           useWheelScroll={true}
           useAutoZoom={true}
-          zoomRange={[0.1, 10]}
+          zoomRange={[0.5, 3]}
           margin={100}
         >
           {/* 编辑器 */}

diff --git a/packages/editor/src/pages/home/LibList.tsx b/packages/editor/src/pages/home/LibList.tsx
@@ -7,6 +7,7 @@ import { usePageStore } from '@/stores/pageStore';
 import { message } from '@/utils/AntdGlobal';
 import SearchBar from '@/components/Searchbar/SearchBar';
 import CreateLib from '@/layout/components/Header/CreateLib';
+import dayjs from 'dayjs';
 import style from './index.module.less';
 
 /**
@@ -80,8 +81,11 @@ export default () => {
           <h2>{item.name}</h2>
           <p className={style.remark}>{item.description || '暂无描述'}</p>
           <p>
-            <UserOutlined style={{ fontSize: 14, marginRight: 5 }} />
-            {item.user_name} {item.created_at}
+            <span style={{ marginRight: 10 }}>
+              <UserOutlined style={{ fontSize: 14, marginRight: 5 }} />
+              {item.user_name.split('@')?.[0]}
+            </span>
+            <span>更新于 {dayjs(item.updated_at).fromNow()}</span>
           </p>
         </div>
         <Space>

diff --git a/packages/editor/src/pages/home/PageList.tsx b/packages/editor/src/pages/home/PageList.tsx
@@ -95,8 +95,9 @@ export default function Index() {
     if (type === 'delete') {
       Modal.confirm({
         title: '确认',
-        content: '确认删除吗？',
+        content: '删除后，该页面无法恢复，请谨慎操作。',
         okText: '确认',
+        okButtonProps: { danger: true },
         cancelText: '取消',
         onOk: async () => {
           await delPageData({
@@ -143,16 +144,16 @@ export default function Index() {
           </div>
         </div>
         <div className={styles.itemFooter}>
-          <Tooltip title="效果图预览">
+          <Tooltip title="预览">
             <EyeOutlined onClick={() => handleAction('preview', item, isAuth)} />
           </Tooltip>
-          <Tooltip title="页面复制">
+          <Tooltip title="复制">
             <CopyOutlined onClick={() => handleAction('copy', item, isAuth)} />
           </Tooltip>
-          <Tooltip title="页面删除">
+          <Tooltip title="删除">
             <DeleteOutlined onClick={() => handleAction('delete', item, isAuth)} />
           </Tooltip>
-          <Tooltip title="页面访问">
+          <Tooltip title="访问">
             <SendOutlined
               onClick={() => {
                 window.open(`http://admin.marsview.cc/page/stg/${item.id}`, '_blank');
@@ -171,7 +172,7 @@ export default function Index() {
         {total > 0 || loading ? (
           <>
             <div className={styles.pagesContent}>
-              <Spin spinning={loading} size="large">
+              <Spin spinning={loading} size="large" tip="加载中...">
                 <Row gutter={[20, 20]}>
                   {content.map((item: PageItem, index: number) => {
                     return (

diff --git a/packages/editor/src/pages/home/ProjectList.tsx b/packages/editor/src/pages/home/ProjectList.tsx
@@ -1,7 +1,7 @@
-import { Card, Col, Layout, Row, Pagination, Spin, Empty, Button, Form } from 'antd';
 import { useEffect, useState } from 'react';
-import { UserOutlined, DeleteOutlined, LockOutlined, PlusOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
+import { Card, Col, Layout, Row, Pagination, Spin, Empty, Button, Form } from 'antd';
+import { UserOutlined, DeleteOutlined, LockOutlined, PlusOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs';
 import { getProjectList, delProject } from '@/api';
 import { Project } from '@/api/types';
@@ -89,6 +89,13 @@ export default function Index() {
 
   // 项目卡片
   const CardItem: React.FC<ProjectCardItemProps> = ({ item, isAuth }) => {
+    const getEnvTag = (env: 'stg' | 'pre' | 'prd', name: string) => {
+      return (
+        <a href={`${import.meta.env.VITE_ADMIN_URL}/project/stg/${item.id}`} target="_blank">
+          {name}
+        </a>
+      );
+    };
     return (
       <Card
         hoverable
@@ -97,27 +104,9 @@ export default function Index() {
           background: isAuth ? 'none' : "url('/imgs/cross-bg.png')",
         }}
         actions={[
-          item.id ? (
-            <a href={`${import.meta.env.VITE_ADMIN_URL}/project/stg/${item.id}`} target="_blank">
-              STG
-            </a>
-          ) : (
-            <span style={{ cursor: 'not-allowed' }}>STG</span>
-          ),
-          item.id ? (
-            <a href={`${import.meta.env.VITE_ADMIN_URL}/project/pre/${item.id}`} target="_blank">
-              PRE
-            </a>
-          ) : (
-            <span style={{ cursor: 'not-allowed' }}>PRE</span>
-          ),
-          item.id ? (
-            <a href={`${import.meta.env.VITE_ADMIN_URL}/project/prd/${item.id}`} target="_blank">
-              PRD
-            </a>
-          ) : (
-            <span style={{ cursor: 'not-allowed' }}>PRD</span>
-          ),
+          item.id ? getEnvTag('stg', 'STG') : <span style={{ cursor: 'not-allowed' }}>STG</span>,
+          item.id ? getEnvTag('pre', 'PRE') : <span style={{ cursor: 'not-allowed' }}>PRE</span>,
+          item.id ? getEnvTag('prd', 'PRD') : <span style={{ cursor: 'not-allowed' }}>PRD</span>,
         ]}
       >
         <div className={styles.projectCard} onClick={() => handleAction(item.id, item.is_edit)}>
@@ -155,7 +144,7 @@ export default function Index() {
         {total > 0 || loading ? (
           <>
             <div className={styles.projectList}>
-              <Spin spinning={loading} size="large">
+              <Spin spinning={loading} size="large" tip="加载中...">
                 <Row gutter={[20, 20]}>
                   {projectList.map((item: Project.ProjectItem, index) => {
                     return (

diff --git a/packages/editor/src/pages/home/index.module.less b/packages/editor/src/pages/home/index.module.less
@@ -124,7 +124,7 @@
     align-items: center;
     padding-inline: 10px;
     border-bottom: 1px solid @border-color;
-    height: 120px;
+    height: 110px;
     .itemInfo {
       .remark {
         color: #505052;

diff --git a/packages/editor/src/pages/welcome/index.module.less b/packages/editor/src/pages/welcome/index.module.less
@@ -30,6 +30,7 @@
     align-items: center;
     gap: 20px;
     line-height: 17px;
+    font-weight: 300;
     a {
       display: flex;
       align-items: center;