fix: 1.修复首页项目点击问题。 2.优化项目和页面样式，保证一屏展示。

JackySoft · Aug 19, 2024 · a2ca5b5 · a2ca5b5
1 parent 2b1606b
commit a2ca5b5
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 45 deletions.
diff --git a/packages/editor/src/layout/components/Header/index.module.less b/packages/editor/src/layout/components/Header/index.module.less
@@ -73,7 +73,7 @@
 .user {
   display: flex;
   align-items: center;
-  gap: 30px;
+  gap: 15px;
   .avatar {
     display: flex;
     align-items: center;

diff --git a/packages/editor/src/layout/components/Header/index.tsx b/packages/editor/src/layout/components/Header/index.tsx
@@ -256,7 +256,7 @@ const Header = memo(() => {
             </Button>
           )}
           <a href="http://docs.marsview.cc" target="_blank">
-            文档
+            使用文档
           </a>
           <Popover
             content={

diff --git a/packages/editor/src/pages/home/PageList.tsx b/packages/editor/src/pages/home/PageList.tsx
@@ -137,9 +137,9 @@ export default function Index() {
           <div className={styles.updateUser}>
             <span style={{ marginRight: 10 }}>
               <UserOutlined style={{ fontSize: 15, marginRight: 5 }} />
-              {item.user_name}
+              {item.user_name.split('@')?.[0]}
             </span>
-            <span>更新时间：{dayjs(item.updated_at).fromNow()}</span>
+            <span>更新于 {dayjs(item.updated_at).fromNow()}</span>
           </div>
         </div>
         <div className={styles.itemFooter}>
@@ -195,7 +195,7 @@ export default function Index() {
         <div className={styles.paginationContainer}>
           {total > 0 ? (
             <Pagination
-              style={{ textAlign: 'right', marginTop: 16 }}
+              style={{ textAlign: 'right' }}
               total={total}
               current={current}
               showSizeChanger

diff --git a/packages/editor/src/pages/home/ProjectList.tsx b/packages/editor/src/pages/home/ProjectList.tsx
@@ -1,5 +1,5 @@
 import { Card, Col, Dropdown, Layout, Row, Pagination, Spin, Empty, Button, Form } from 'antd';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import type { MenuProps } from 'antd';
 import { UserOutlined, DeleteOutlined, LinkOutlined, LockOutlined, PlusOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
@@ -68,32 +68,34 @@ export default function Index() {
   };
 
   // 访问地址
-  const items: MenuProps['items'] = [
-    {
-      key: 'stg',
-      label: (
-        <a href={`${import.meta.env.VITE_ADMIN_URL}/project/stg/${projectId}`} target="_blank">
-          STG
-        </a>
-      ),
-    },
-    {
-      key: 'pre',
-      label: (
-        <a href={`${import.meta.env.VITE_ADMIN_URL}/project/pre/${projectId}`} target="_blank">
-          PRE
-        </a>
-      ),
-    },
-    {
-      key: 'prod',
-      label: (
-        <a href={`${import.meta.env.VITE_ADMIN_URL}/project/prd/${projectId}`} target="_blank">
-          PRD
-        </a>
-      ),
-    },
-  ];
+  const getItems: (projectId: number) => MenuProps['items'] = (projectId: number) => {
+    return [
+      {
+        key: 'stg',
+        label: (
+          <a href={`${import.meta.env.VITE_ADMIN_URL}/project/stg/${projectId}`} target="_blank">
+            STG
+          </a>
+        ),
+      },
+      {
+        key: 'pre',
+        label: (
+          <a href={`${import.meta.env.VITE_ADMIN_URL}/project/pre/${projectId}`} target="_blank">
+            PRE
+          </a>
+        ),
+      },
+      {
+        key: 'prod',
+        label: (
+          <a href={`${import.meta.env.VITE_ADMIN_URL}/project/prd/${projectId}`} target="_blank">
+            PRD
+          </a>
+        ),
+      },
+    ];
+  };
 
   // 切换页码和每页条数回调
   const handleChange = (_current: number, size: number) => {
@@ -110,14 +112,6 @@ export default function Index() {
     navigate(`/project/${id}/config`);
   };
 
-  // 访问地址
-  const handleVisit = (projectId: number, isAuth: boolean) => {
-    if (!isAuth) {
-      return message.warning('该项目未授权，无法访问');
-    }
-    setProjectId(projectId);
-  };
-
   // 提交搜索
   const handleSearch = () => {
     setCurrent(1);
@@ -134,8 +128,8 @@ export default function Index() {
           background: isAuth ? 'none' : "url('/imgs/cross-bg.png')",
         }}
         actions={[
-          <Dropdown key="link" menu={{ items: isAuth ? items : [] }} trigger={['click']}>
-            <div onClick={() => handleVisit(item.id, isAuth)}>
+          <Dropdown key="link" menu={{ items: isAuth ? getItems(item.id) : [] }} trigger={['click']}>
+            <div>
               <LinkOutlined />
               <span className={styles.gabLeft}>访问地址</span>
             </div>
@@ -157,9 +151,9 @@ export default function Index() {
                 <p style={{ color: 'rgba(0, 0, 0, 0.88)' }}>{item.remark || '暂无描述'}</p>
                 <p style={{ marginTop: 10 }}>
                   <UserOutlined style={{ fontSize: 14, marginRight: 5 }} />
-                  {item.user_name}
+                  {item.user_name.split('@')?.[0]}
                   &nbsp;&nbsp;
-                  {dayjs(item.updated_at).format('YYYY/MM/DD HH:mm')}
+                  {dayjs(item.updated_at).format('YYYY-MM-DD HH:mm')}
                 </p>
               </>
             }

diff --git a/packages/editor/src/pages/home/index.module.less b/packages/editor/src/pages/home/index.module.less
@@ -29,7 +29,7 @@
 }
 .itemContent {
   position: relative;
-  height: 120px;
+  height: 111px;
   cursor: pointer;
 }
 .itemHeader {
@@ -76,6 +76,7 @@
   flex-direction: column;
   :global {
     .ant-card-body {
+      padding-inline: 12px;
       padding-bottom: 12px;
     }
     .ant-card-actions {