feat: 优化设置页样式

yuque · Nov 1, 2023 · 3031e66 · 3031e66
1 parent 543151a
commit 3031e66
Show file tree

Hide file tree

Showing 11 changed files with 128 additions and 96 deletions.
diff --git a/src/assets/svg/action-delete.svg b/src/assets/svg/action-delete.svg
diff --git a/src/components/DisableUrlCard/index.module.less b/src/components/DisableUrlCard/index.module.less
@@ -1,50 +1,39 @@
 @import '~@/styles/parameters.less';
 
-.wrapper {
+.cardItemWrapper {
   display: flex;
+  gap: 12px;
+  padding: 12px 12px;
   align-items: center;
+  background-color: rgba(0, 0, 0, 0.03);
   border-radius: 8px;
-  box-shadow: @panel-default-box-shadow;
-  padding: 12px;
-  border: 1px solid @border-light-color;
-  flex-wrap: wrap;
-  gap: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
 
-  .cardItemWrapper {
-    display: flex;
-    gap: 12px;
-    padding: 6px 12px;
-    align-items: center;
-    background-color: @grey-2;
-    border-radius: 8px;
-    width: calc(50% - 8px);
-    border: 1px solid @border-color-primary;
-
-    .icon {
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      flex: 0 0 auto;
-    }
+  .icon {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    flex: 0 0 auto;
+  }
 
-    .name {
-      overflow: hidden;
-      flex: 1 1 auto;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
+  .name {
+    overflow: hidden;
+    flex: 1 1 auto;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
 
-    .deleteWrapper {
-      padding: 4px;
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      flex: 0 0 auto;
-      border-radius: 4px;
+  .deleteWrapper {
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    flex: 0 0 auto;
+    border-radius: 4px;
+    justify-content: center;
 
-      &:hover {
-        background-color: @bg-primary-hover;
-      }
+    &:hover {
+      background-color: @bg-primary-hover;
     }
   }
 }
diff --git a/src/components/DisableUrlCard/index.tsx b/src/components/DisableUrlCard/index.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import { DeleteOutlined } from '@ant-design/icons';
+import { Row, Col } from 'antd';
+import Icon from '@ant-design/icons';
+import ActionDelete from '@/assets/svg/action-delete.svg';
 import styles from './index.module.less';
 
 export interface IDisableUrlItem {
@@ -18,22 +20,24 @@ function DisableUrlCard(props: IDisableUrlCardProps) {
     return null;
   }
   return (
-    <div className={styles.wrapper}>
+    <Row gutter={20}>
       {options.map((item, index) => {
         return (
-          <div key={item.origin} className={styles.cardItemWrapper}>
-            <img src={item.icon} className={styles.icon} />
-            <span className={styles.name}>{item.origin}</span>
-            <div
-              className={styles.deleteWrapper}
-              onClick={() => props.onDelete(item, index)}
-            >
-              <DeleteOutlined />
+          <Col span={12} key={item.origin}>
+            <div key={item.origin} className={styles.cardItemWrapper}>
+              <img src={item.icon} className={styles.icon} />
+              <span className={styles.name}>{item.origin}</span>
+              <div
+                className={styles.deleteWrapper}
+                onClick={() => props.onDelete(item, index)}
+              >
+                <Icon component={ActionDelete} />
+              </div>
             </div>
-          </div>
+          </Col>
         );
       })}
-    </div>
+    </Row>
   );
 }
 

diff --git a/src/pages/setting/app.module.less b/src/pages/setting/app.module.less
@@ -69,7 +69,7 @@
     max-width: 668px;
 
     .pageItem {
-      margin-bottom: 36px;
+      margin-bottom: 24px;
 
       .pageTitle {
         font-size: 20px;

diff --git a/src/pages/setting/app.tsx b/src/pages/setting/app.tsx
@@ -1,8 +1,6 @@
-import React from 'react';
+import React, { useLayoutEffect } from 'react';
 import { Anchor } from 'antd';
 import { initI18N } from '@/isomorphic/i18n';
-import AccountLayout from '@/components/AccountLayout';
-import AntdLayout from '@/components/AntdLayout';
 import General from './general';
 import WordMark from './wordMark';
 import About from './about';
@@ -63,43 +61,47 @@ const anchorMenus = [
 ];
 
 function App() {
+  useLayoutEffect(() => {
+    const hash = window.location.hash;
+    if (hash) {
+      const a = document.createElement('a');
+      a.href = hash;
+      a.click();
+    }
+  }, []);
   return (
-    <AntdLayout>
-      <AccountLayout>
-        <div className={styles.pageWrapper}>
-          <div className={styles.left}>
-            <div className={styles.header}>{__i18n('语雀浏览器插件')}</div>
-            <Anchor items={anchorMenus} />
-          </div>
-          <div className={styles.right}>
-            <div id={Page.general} className={styles.pageItem}>
-              <div className={styles.pageTitle}>{__i18n('通用设置')}</div>
-              <General />
-            </div>
-            <div id={Page.shortcut} className={styles.pageItem}>
-              <div className={styles.pageTitle}>{__i18n('快捷键设置')}</div>
-              <Shortcut />
-            </div>
-            <div id={Page.sidePanel} className={styles.pageItem}>
-              <div className={styles.pageTitle}>{__i18n('侧边栏')}</div>
-              <SidePanel />
-            </div>
-            <div id={Page.wordMark} className={styles.pageItem}>
-              <div className={styles.pageTitle}>{__i18n('划词工具栏')}</div>
-              <WordMark />
-            </div>
-            <div id={Page.help} className={styles.pageItem}>
-              <div className={styles.pageTitle}>{__i18n('帮助与反馈')}</div>
-              <Help />
-            </div>
-            <div id={Page.about} className={styles.pageItem}>
-              <div className={styles.pageTitle}>{__i18n('关于语雀插件')}</div>
-              <About />
-            </div>
-          </div>
+    <div className={styles.pageWrapper}>
+      <div className={styles.left}>
+        <div className={styles.header}>{__i18n('语雀浏览器插件')}</div>
+        <Anchor items={anchorMenus} />
+      </div>
+      <div className={styles.right}>
+        <div id={Page.general} className={styles.pageItem}>
+          <div className={styles.pageTitle}>{__i18n('通用设置')}</div>
+          <General />
         </div>
-      </AccountLayout>
-    </AntdLayout>
+        <div id={Page.shortcut} className={styles.pageItem}>
+          <div className={styles.pageTitle}>{__i18n('快捷键设置')}</div>
+          <Shortcut />
+        </div>
+        <div id={Page.sidePanel} className={styles.pageItem}>
+          <div className={styles.pageTitle}>{__i18n('侧边栏')}</div>
+          <SidePanel />
+        </div>
+        <div id={Page.wordMark} className={styles.pageItem}>
+          <div className={styles.pageTitle}>{__i18n('划词工具栏')}</div>
+          <WordMark />
+        </div>
+        <div id={Page.help} className={styles.pageItem}>
+          <div className={styles.pageTitle}>{__i18n('帮助与反馈')}</div>
+          <Help />
+        </div>
+        <div id={Page.about} className={styles.pageItem}>
+          <div className={styles.pageTitle}>{__i18n('关于语雀插件')}</div>
+          <About />
+        </div>
+      </div>
+    </div>
   );
 }
 

diff --git a/src/pages/setting/common.module.less b/src/pages/setting/common.module.less
@@ -11,12 +11,12 @@
 .configItem {
   display: flex;
   justify-content: space-between;
+}
 
-  .desc {
-    font-size: @font-size;
-    display: flex;
-    align-items: center;
-  }
+.desc {
+  font-size: @font-size;
+  display: flex;
+  align-items: center;
 }
 
 // 每个大块的 config 配置样式

diff --git a/src/pages/setting/index.tsx b/src/pages/setting/index.tsx
@@ -1,9 +1,17 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import AntdLayout from '@/components/AntdLayout';
+import AccountLayout from '@/components/AccountLayout';
 import App from './app';
 
 const importAll = (r: any) => r.keys().forEach(r);
 importAll(require.context('@/assets/icons', false, /\.png$/));
 
 const root = createRoot(document.getElementById('ReactApp') as Element);
-root.render(<App />);
+root.render(
+  <AntdLayout>
+    <AccountLayout>
+      <App />
+    </AccountLayout>
+  </AntdLayout>,
+);
diff --git a/src/pages/setting/sidePanel/index.module.less b/src/pages/setting/sidePanel/index.module.less
@@ -0,0 +1,6 @@
+@import '~@/styles/parameters.less';
+@import '../common.module.less';
+
+.disableUrlCard {
+  margin-top: 18px;
+}
diff --git a/src/pages/setting/sidePanel/index.tsx b/src/pages/setting/sidePanel/index.tsx
@@ -6,7 +6,7 @@ import {
   LevitateConfigKey,
 } from '@/isomorphic/constant/levitate';
 import DisableUrlCard, { IDisableUrlItem } from '@/components/DisableUrlCard';
-import styles from '../common.module.less';
+import styles from './index.module.less';
 
 function Shortcut() {
   const [config, setConfig] = useState({} as ILevitateConfig);

diff --git a/src/pages/setting/wordMark/index.module.less b/src/pages/setting/wordMark/index.module.less
@@ -34,3 +34,7 @@
     }
   }
 }
+
+.iconWrapper {
+  font-size: @font-size-lg;
+}
diff --git a/src/pages/setting/wordMark/index.tsx b/src/pages/setting/wordMark/index.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { Select, Switch, Row, Col } from 'antd';
 import { ToolbarItem, toolbars } from '@/pages/inject/WordMark/constants';
 import Icon from '@ant-design/icons';
+import ArrowDown from '@/assets/svg/arrow-down.svg';
 import { WordMarkOptionTypeEnum } from '@/isomorphic/constants';
 import { __i18n } from '@/isomorphic//i18n';
 import {
@@ -129,6 +130,9 @@ function WordMark() {
                 onChange={(v: string) => {
                   onConfigChange('evokeWordMarkShortKey', v);
                 }}
+                suffixIcon={
+                  <Icon component={ArrowDown} className={styles.iconWrapper} />
+                }
               />
             </div>
           )}