feat(ui): umi ui 界面优化 (#11118)

* feat(ui): umi ui 界面优化 * feat(ui): 提交 pnpm-lock.yaml * feat(ui): umi ui 界面优化 * feat(ui): 删除 esbuilt-kit --------- Co-authored-by: yuyuehui.yyh <yuyuehui.yyh@digital-engine.com>
umijs · May 11, 2023 · 4f982c7 · 4f982c7
1 parent 3c50f76
commit 4f982c7
Show file tree

Hide file tree

Showing 12 changed files with 272 additions and 23 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/ui/.umirc.ts b/ui/.umirc.ts
@@ -23,6 +23,7 @@ export default {
       'ant-design:bug-outlined',
       'ant-design:bulb-outlined',
       'ant-design:star-outlined',
+      'ant-design:info-circle-outlined',
       'local:sun',
       'local:moon',
     ],

diff --git a/ui/app.tsx b/ui/app.tsx
@@ -12,7 +12,9 @@ ${globalCSS}
 
   &.dark {
     --bg-color: #151515;
-    --bg-hover-color: #1c1c1d;
+    --bg-hover-color: #333;
+    --bg-active-color: #117cf3;
+    --bg-active-text-color: #fff;
     --highlight-color: #117cf3;
     --text-color: #9a9a9a;
     --accent-color: #ffffff;
@@ -23,7 +25,9 @@ ${globalCSS}
   }
 
   --bg-color: #fff;
-  --bg-hover-color: #fefefe;
+  --bg-hover-color: #f4f4f4;
+  --bg-active-color: #e6f4ff;
+  --bg-active-text-color: #117cf3;
   --highlight-color: #117cf3;
   --text-color: #333;
   --accent-color: #000;

diff --git a/ui/components/Logo.tsx b/ui/components/Logo.tsx
@@ -6,7 +6,7 @@ const Wrapper = styled.div`
   align-items: center;
   justify-content: space-between;
   padding: 1.25rem 1rem;
-  border-bottom: 1px solid var(--subtle-color);
+  // border-bottom: 1px solid var(--subtle-color);
 
   .logo-left {
     display: flex;

diff --git a/ui/components/Menu.tsx b/ui/components/Menu.tsx
@@ -4,11 +4,14 @@ import { Icon, NavLink, styled, useSnapshot } from 'umi';
 
 const Wrapper = styled.div`
   & > div {
+    padding: 0.25rem;
+
     a {
       display: flex;
       align-items: center;
-      padding: 0.75rem 1.25rem;
-      border-bottom: 1px solid var(--subtle-color);
+      padding: 0.5rem 1.25rem;
+      border-radius: 5px;
+      // border-bottom: 1px solid var(--subtle-color);
 
       span {
         margin-right: 0.5rem;
@@ -17,8 +20,9 @@ const Wrapper = styled.div`
     a:hover {
       background: var(--bg-hover-color);
     }
-    .active {
-      color: var(--highlight-color);
+    a.active {
+      background: var(--bg-active-color);
+      color: var(--bg-active-text-color);
     }
   }
 `;

diff --git a/ui/components/imports/ViewButton.tsx b/ui/components/imports/ViewButton.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { Icon, styled } from 'umi';
 
 interface IProps {
-  options: { icon: string; value: string }[];
+  options: { icon?: string; value: string; str?: string }[];
   onChange: (v: string) => void;
   value: string;
 }
@@ -48,7 +48,11 @@ export const ViewButton: FC<IProps> = ({ value, options = [], onChange }) => {
             className={value === opt.value ? 'view active' : 'view'}
             onClick={() => onChange(opt.value)}
           >
-            <Icon width="24" height="24" icon={`ant-design:${opt.icon}`} />
+            {opt.icon ? (
+              <Icon width="24" height="24" icon={`ant-design:${opt.icon}`} />
+            ) : (
+              opt.str
+            )}
           </span>
         );
       })}