feat: 优化页面

JackySoft · Sep 13, 2024 · cb60090 · cb60090
1 parent b95f600
commit cb60090
Show file tree

Hide file tree

Showing 23 changed files with 71 additions and 66 deletions.
diff --git a/.github/imgs/logo.png b/.github/imgs/logo.png
diff --git a/.github/imgs/qrcode.jpg b/.github/imgs/qrcode.jpg
diff --git a/packages/admin/public/imgs/logo.png b/packages/admin/public/imgs/logo.png
diff --git a/packages/admin/public/imgs/mini-logo.png b/packages/admin/public/imgs/mini-logo.png
diff --git a/packages/admin/src/components/Header/Header.tsx b/packages/admin/src/components/Header/Header.tsx
@@ -14,7 +14,7 @@ import styles from './index.module.less';
  */
 const Header = memo(() => {
   const [avatar, setAvatar] = useState('');
-  const { userName } = usePageStore((state) => state.userInfo);
+  const { userName = '-' } = usePageStore((state) => state.userInfo);
   const { projectInfo, collapsed, updateCollapsed } = useProjectStore();
   const navigate = useNavigate();
 

diff --git a/packages/admin/src/components/Logo/Logo.tsx b/packages/admin/src/components/Logo/Logo.tsx
@@ -11,9 +11,9 @@ function Logo() {
   useEffect(() => {
     // 左右布局模式下，Logo背景需要跟着主题色变化
     if (projectInfo.menu_theme_color === 'dark') {
-      setStyle({ backgroundColor: '#001529', color: '#fff', height: 60, padding: '0 24px' });
+      setStyle({ backgroundColor: '#001529', color: '#fff', height: 60, padding: '10px 24px' });
     } else {
-      setStyle({ backgroundColor: '#fff', color: '#000', height: 60, padding: '0 24px' });
+      setStyle({ backgroundColor: '#fff', color: '#000', height: 60, padding: '10px 24px' });
     }
     /**
      * 1. 名称是中文，7个字，正常显示。
@@ -34,7 +34,7 @@ function Logo() {
       }}
       style={style}
     >
-      <img src={projectInfo.logo || 'https://marsview.cdn.bcebos.com/mars-logo.png'} width={38} />
+      <img src={projectInfo.logo || 'https://marsview.cdn.bcebos.com/mars-logo.png'} />
       {!collapsed && (
         <span className={styles.logoName} style={nameStyle}>
           {projectInfo.name}

diff --git a/packages/admin/src/components/Logo/index.module.less b/packages/admin/src/components/Logo/index.module.less
@@ -1,11 +1,14 @@
 .logo {
-  width: 255px;
   font-size: 20px;
   display: flex;
   align-items: center;
   gap: 15px;
   cursor: pointer;
   color: #fff;
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
 }
 .logoName {
   white-space: nowrap;

diff --git a/packages/admin/src/pages/console/HomeHeader.tsx b/packages/admin/src/pages/console/HomeHeader.tsx
@@ -8,8 +8,7 @@ function HomeHeader() {
   return (
     <div className={style.homeHeader}>
       <div className={style.logo}>
-        <img width={38} src="/imgs/mars-logo.png" alt="logo" />
-        工作台
+        <img width={130} src="/imgs/logo.png" alt="logo" />
       </div>
       <Dropdown
         menu={{

diff --git a/packages/admin/src/pages/login/Login.tsx b/packages/admin/src/pages/login/Login.tsx
@@ -38,8 +38,7 @@ export default function Login() {
         </div>
         <div className={style.form}>
           <div className={style.title}>
-            <img src="/imgs/mars-logo.png" width={45} />
-            <span>Marsview</span>
+            <img src="/imgs/logo.png" width={150} />
           </div>
           <Form name="basic" layout="vertical" className={style.form} onFinish={onFinish} autoComplete="off" size="large" form={form}>
             <Form.Item<FieldType> name="userName" rules={[{ required: true, message: '请输入邮箱' }]}>

diff --git a/packages/admin/src/pages/page/index.tsx b/packages/admin/src/pages/page/index.tsx
@@ -48,12 +48,13 @@ export default function () {
     <ConfigProvider
       locale={locale}
       theme={{
+        cssVar: true,
+        hashed: false,
         token: {
           colorPrimary: theme,
           colorLink: theme,
           colorInfo: theme,
         },
-        hashed: false,
       }}
     >
       <Page />

diff --git a/packages/editor/index.html b/packages/editor/index.html
@@ -5,8 +5,12 @@
     <link rel="icon" type="image/svg+xml" href="/imgs/mars-logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Marsview低代码平台</title>
+    <meta
+      name="description"
+      content="Marsview 是一款中后台方向的低代码可视化搭建平台，开发者可以在平台上创建项目、页面和组件，支持事件交互、接口调用、数据联动和逻辑编排等，开发者还可通过微服务快速集成到自己的业务系统中。
+      "
+    />
     <link rel="preconnect" href="http://www.marsview.cc" />
-    <link rel="preconnect" href="https://cdn.staticfile.net" />
     <link rel="preconnect" href="http://mars-api.marsview.cc" />
     <link rel="preconnect" href="https://marsview.cdn.bcebos.com/" />
     <style>

diff --git a/packages/editor/public/imgs/logo.png b/packages/editor/public/imgs/logo.png
diff --git a/packages/editor/public/imgs/mini-logo.png b/packages/editor/public/imgs/mini-logo.png
diff --git a/packages/editor/src/App.tsx b/packages/editor/src/App.tsx
@@ -1,5 +1,5 @@
 import { RouterProvider } from 'react-router-dom';
-import { ConfigProvider, App as AntdApp } from 'antd';
+import { ConfigProvider, App as AntdApp, theme } from 'antd';
 import router from './router';
 import AntdGlobal from '@/utils/AntdGlobal';
 import locale from 'antd/locale/zh_CN';
@@ -15,6 +15,8 @@ function App() {
     <ConfigProvider
       locale={locale}
       theme={{
+        cssVar: true,
+        hashed: false,
         token: {
           colorPrimary: '#7D33FF',
           colorLink: '#7D33FF',

diff --git a/packages/editor/src/components/Searchbar/SearchBar.tsx b/packages/editor/src/components/Searchbar/SearchBar.tsx
@@ -1,22 +1,15 @@
 import { memo } from 'react';
-import { Button, Form, Input, Radio, Space } from 'antd';
+import { Button, Form, Input, Space } from 'antd';
 import { PlusOutlined, RedoOutlined } from '@ant-design/icons';
 import styles from './index.module.less';
 
 const SearchBar = memo((props: any) => {
   const { form, from, submit, refresh, onCreate } = props;
-  const options = [
-    { label: '我的', value: 1 },
-    { label: '市场', value: 2 },
-  ];
   return (
     <>
       <div className={styles.searchBar}>
         <div className={styles.searchBarForm}>
           <Form form={form} layout="inline" initialValues={{ type: 1 }}>
-            <Form.Item name="type">
-              <Radio.Group options={options} onChange={submit} optionType="button" buttonStyle="solid" />
-            </Form.Item>
             <Form.Item name="keyword" style={{ width: 200 }}>
               <Input placeholder={`请输入${from}名称`} onPressEnter={submit} />
             </Form.Item>

diff --git a/packages/editor/src/layout/components/Header/index.module.less b/packages/editor/src/layout/components/Header/index.module.less
@@ -21,7 +21,6 @@
   font-size: 20px;
   display: flex;
   align-items: center;
-  gap: 10px;
   cursor: pointer;
 }
 .menu {

diff --git a/packages/editor/src/layout/components/Header/index.tsx b/packages/editor/src/layout/components/Header/index.tsx
@@ -185,8 +185,7 @@ const Header = memo(() => {
     <>
       <Layout.Header className={isNav ? styles.homeHeader : styles.layoutHeader}>
         <div className={styles.logo} onClick={goHome}>
-          <img src="/imgs/mars-logo.png" width={40} />
-          <span>Marsview</span>
+          <img src="/imgs/logo.png" width={130} />
         </div>
         {/* 首页 - 导航菜单 */}
         {isNav && (
@@ -252,18 +251,20 @@ const Header = memo(() => {
             </Button>
           )}
           <a href="http://docs.marsview.cc" target="_blank">
-            使用文档
+            开发文档
           </a>
-          <Popover
-            content={
-              <>
-                <Image width={200} src="https://marsview.cdn.bcebos.com/qrcode.jpg" preview={false} />
-                <p style={{ textAlign: 'center', color: '#7d33ff' }}>微信交流群</p>
-              </>
-            }
-          >
-            <img width={20} src="https://marsview.cdn.bcebos.com/wechat.png" />
-          </Popover>
+          {!isEditPage && (
+            <Popover
+              content={
+                <>
+                  <Image width={200} src="https://marsview.cdn.bcebos.com/qrcode.jpg" preview={false} />
+                  <p style={{ textAlign: 'center', color: '#7d33ff' }}>微信交流群</p>
+                </>
+              }
+            >
+              <img width={20} src="https://marsview.cdn.bcebos.com/wechat.png" />
+            </Popover>
+          )}
 
           {/* 用户头像 */}
           <div className={styles.avatar}>
@@ -300,23 +301,25 @@ const Header = memo(() => {
             </Dropdown>
           </div>
           {/* github开源地址 */}
-          <a href="https://github.com/JackySoft/marsview" aria-label="github" target="_blank">
-            <svg
-              className={styles.github}
-              viewBox="0 0 1024 1024"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              p-id="4250"
-              width="20"
-              height="20"
-            >
-              <path
-                d="M512 12.64c-282.752 0-512 229.216-512 512 0 226.208 146.72 418.144 350.144 485.824 25.6 4.736 35.008-11.104 35.008-24.64 0-12.192-0.48-52.544-0.704-95.328-142.464 30.976-172.512-60.416-172.512-60.416-23.296-59.168-56.832-74.912-56.832-74.912-46.464-31.776 3.52-31.136 3.52-31.136 51.392 3.616 78.464 52.768 78.464 52.768 45.664 78.272 119.776 55.648 148.992 42.56 4.576-33.088 17.856-55.68 32.512-68.48-113.728-12.928-233.28-56.864-233.28-253.024 0-55.904 20-101.568 52.768-137.44-5.312-12.896-22.848-64.96 4.96-135.488 0 0 43.008-13.76 140.832 52.48 40.832-11.36 84.64-17.024 128.16-17.248 43.488 0.192 87.328 5.888 128.256 17.248 97.728-66.24 140.64-52.48 140.64-52.48 27.872 70.528 10.336 122.592 5.024 135.488 32.832 35.84 52.704 81.536 52.704 137.44 0 196.64-119.776 239.936-233.792 252.64 18.368 15.904 34.72 47.04 34.72 94.816 0 68.512-0.608 123.648-0.608 140.512 0 13.632 9.216 29.6 35.168 24.576 203.328-67.776 349.856-259.616 349.856-485.76 0-282.784-229.248-512-512-512z"
-                fill="#2c2c2c"
-                p-id="4251"
-              ></path>
-            </svg>
-          </a>
+          {!isEditPage && (
+            <a href="https://github.com/JackySoft/marsview" aria-label="github" target="_blank">
+              <svg
+                className={styles.github}
+                viewBox="0 0 1024 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                p-id="4250"
+                width="20"
+                height="20"
+              >
+                <path
+                  d="M512 12.64c-282.752 0-512 229.216-512 512 0 226.208 146.72 418.144 350.144 485.824 25.6 4.736 35.008-11.104 35.008-24.64 0-12.192-0.48-52.544-0.704-95.328-142.464 30.976-172.512-60.416-172.512-60.416-23.296-59.168-56.832-74.912-56.832-74.912-46.464-31.776 3.52-31.136 3.52-31.136 51.392 3.616 78.464 52.768 78.464 52.768 45.664 78.272 119.776 55.648 148.992 42.56 4.576-33.088 17.856-55.68 32.512-68.48-113.728-12.928-233.28-56.864-233.28-253.024 0-55.904 20-101.568 52.768-137.44-5.312-12.896-22.848-64.96 4.96-135.488 0 0 43.008-13.76 140.832 52.48 40.832-11.36 84.64-17.024 128.16-17.248 43.488 0.192 87.328 5.888 128.256 17.248 97.728-66.24 140.64-52.48 140.64-52.48 27.872 70.528 10.336 122.592 5.024 135.488 32.832 35.84 52.704 81.536 52.704 137.44 0 196.64-119.776 239.936-233.792 252.64 18.368 15.904 34.72 47.04 34.72 94.816 0 68.512-0.608 123.648-0.608 140.512 0 13.632 9.216 29.6 35.168 24.576 203.328-67.776 349.856-259.616 349.856-485.76 0-282.784-229.248-512-512-512z"
+                  fill="#2c2c2c"
+                  p-id="4251"
+                ></path>
+              </svg>
+            </a>
+          )}
         </div>
       </Layout.Header>
     </>

diff --git a/packages/editor/src/pages/editor/editor.tsx b/packages/editor/src/pages/editor/editor.tsx
@@ -259,6 +259,8 @@ const Editor = () => {
   return (
     <ConfigProvider
       theme={{
+        cssVar: true,
+        hashed: false,
         token: {
           colorPrimary: theme || '#1677ff',
           colorLink: theme || '#1677ff',

diff --git a/packages/editor/src/pages/home/ProjectList.tsx b/packages/editor/src/pages/home/ProjectList.tsx
@@ -123,7 +123,7 @@ export default function Index() {
         <div className={styles.projectCard} onClick={() => handleAction(item.id, item.is_edit)}>
           <Card.Meta
             style={{ cursor: isAuth ? 'pointer' : 'not-allowed' }}
-            avatar={<img src={item.logo} style={{ width: 32 }} />}
+            avatar={<img src={item.logo} style={{ width: 50 }} />}
             title={item.name}
             description={
               <>

diff --git a/packages/editor/src/pages/home/lib/components/InitValue.ts b/packages/editor/src/pages/home/lib/components/InitValue.ts
@@ -25,7 +25,7 @@ export default ({ id, type, config }, ref) => {
 
 // 默认组件样式
 export const defaultLessCode = `.bgColor{
-  background-color: coral;
+  background-color: #4096ff;
   height: 150px;
   padding: 50px;
   text-align: center;

diff --git a/packages/editor/src/pages/login/Login.tsx b/packages/editor/src/pages/login/Login.tsx
@@ -87,8 +87,7 @@ export default function Login() {
         <div className={style.form}>
           {type === 'login' ? (
             <div className={style.title}>
-              <img src="/imgs/mars-logo.png" width={45} />
-              <span>Marsview</span>
+              <img src="/imgs/logo.png" width={150} />
             </div>
           ) : (
             <div className={style.title}>邮箱注册</div>

diff --git a/packages/editor/src/pages/welcome/Welcome.tsx b/packages/editor/src/pages/welcome/Welcome.tsx
@@ -34,8 +34,7 @@ export default function Welcome() {
         }}
       >
         <div className={style.logo}>
-          <img src="/imgs/mars-logo-light.png" width="40" />
-          <span>Marsview</span>
+          <img src="/imgs/logo.png" width="150" />
         </div>
         <div className={style.doc}>
           <a href="http://docs.marsview.cc" target="_blank">
@@ -50,7 +49,7 @@ export default function Welcome() {
                 p-id="4251"
               ></path>
             </svg>
-            <span>Github</span>
+            <span>GitHub</span>
           </a>
         </div>
       </section>
@@ -60,8 +59,8 @@ export default function Welcome() {
           <h1 className={style.title}>Marsview 低代码搭建平台</h1>
           <p className={style.desc}>让搭建更简单，让开发更高效</p>
           <div className={style.count}>
-            服务了 <CountUp end={1000} duration={3} />+ 个项目，
-            <CountUp end={1000} duration={3} />+ 个页面
+            服务 <CountUp end={1000} duration={3} />+ 项目，
+            <CountUp end={1000} duration={3} />+ 页面
           </div>
           <div className={style.btnGroup}>
             <Button type="primary" ghost size="large" onClick={openDoc}>
@@ -123,7 +122,7 @@ export default function Welcome() {
         </div>
       </section>
       <section className={style.footer}>
-        <img src="/imgs/mars-logo-light.png" />
+        <img src="/imgs/logo.png" />
         <h1>欢迎使用 Marsview 零代码搭建平台</h1>
         <Link to="/projects">
           <Button type="primary" size="large">

diff --git a/packages/editor/src/pages/welcome/index.module.less b/packages/editor/src/pages/welcome/index.module.less
@@ -7,6 +7,7 @@
   top: 0;
   height: 64px;
   width: 100%;
+  font-size: 18px;
   z-index: 100;
   display: flex;
   justify-content: space-between;
@@ -33,7 +34,7 @@
       display: flex;
       align-items: center;
       gap: 10px;
-      color: #eee;
+      color: #fff;
     }
   }
 }
@@ -71,15 +72,16 @@
       font-size: 38px;
       margin-top: 30px;
       margin-bottom: 50px;
-      background: linear-gradient(60deg, #fff, rgb(144, 0, 255), rgb(0, 72, 255), rgb(0, 255, 136), rgb(255, 136, 0));
-      background-clip: text;
-      color: transparent;
+      color: #fff;
       span {
         display: inline-block;
         width: 150px;
         font-size: 54px;
         font-weight: bold;
         text-align: center;
+        background: linear-gradient(60deg, #fff, rgb(144, 0, 255));
+        background-clip: text;
+        color: transparent;
       }
     }
     .btnGroup {
@@ -140,7 +142,7 @@
     margin-block: 30px;
   }
   img {
-    width: 100px;
+    width: 150px;
   }
 }
 .beian {