diff --git a/src/assets/svg/action-delete.svg b/src/assets/svg/action-delete.svg new file mode 100644 index 00000000..f5ae7b3f --- /dev/null +++ b/src/assets/svg/action-delete.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/DisableUrlCard/index.module.less b/src/components/DisableUrlCard/index.module.less index ef1f9ca5..ee307bbc 100644 --- a/src/components/DisableUrlCard/index.module.less +++ b/src/components/DisableUrlCard/index.module.less @@ -1,50 +1,38 @@ @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; - .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 index efd59158..d353bfd5 100644 --- 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 ( -
+ {options.map((item, index) => { return ( -
- - {item.origin} -
props.onDelete(item, index)} - > - + +
+ + {item.origin} +
props.onDelete(item, index)} + > + +
-
+ ); })} -
+ ); } diff --git a/src/pages/setting/app.module.less b/src/pages/setting/app.module.less index aed54c64..2261b546 100644 --- a/src/pages/setting/app.module.less +++ b/src/pages/setting/app.module.less @@ -66,10 +66,10 @@ margin-left: 256px; width: calc(100vw - 256px); padding: 0 56px; - max-width: 668px; + max-width: 768px; .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 index 5a06089a..7e739f17 100644 --- 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 ( - - -
-
-
{__i18n('语雀浏览器插件')}
- -
-
-
-
{__i18n('通用设置')}
- -
-
-
{__i18n('快捷键设置')}
- -
-
-
{__i18n('侧边栏')}
- -
-
-
{__i18n('划词工具栏')}
- -
-
-
{__i18n('帮助与反馈')}
- -
-
-
{__i18n('关于语雀插件')}
- -
-
+
+
+
{__i18n('语雀浏览器插件')}
+ +
+
+
+
{__i18n('通用设置')}
+
- - +
+
{__i18n('快捷键设置')}
+ +
+
+
{__i18n('侧边栏')}
+ +
+
+
{__i18n('划词工具栏')}
+ +
+
+
{__i18n('帮助与反馈')}
+ +
+
+
{__i18n('关于语雀插件')}
+ +
+
+
); } diff --git a/src/pages/setting/common.module.less b/src/pages/setting/common.module.less index 0943d211..e98cfd19 100644 --- 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 index af5f2328..1f8698a9 100644 --- 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(); +root.render( + + + + + , +); diff --git a/src/pages/setting/sidePanel/index.module.less b/src/pages/setting/sidePanel/index.module.less new file mode 100644 index 00000000..685143db --- /dev/null +++ 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 index f27c3496..7779c538 100644 --- 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 index 35862e93..f5aa3e10 100644 --- a/src/pages/setting/wordMark/index.module.less +++ b/src/pages/setting/wordMark/index.module.less @@ -13,7 +13,6 @@ .toolbarSettingWrapper { .toolbarSettingItem { background-color: rgba(0, 0, 0, 0.03); - border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; display: flex; padding: 12px 12px; @@ -34,3 +33,7 @@ } } } + +.iconWrapper { + font-size: @font-size-lg; +} diff --git a/src/pages/setting/wordMark/index.tsx b/src/pages/setting/wordMark/index.tsx index 71e17d95..590840a5 100644 --- 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={ + + } />
)}