diff --git a/src/background/core/configManager/wordMark.ts b/src/background/core/configManager/wordMark.ts index 427e2710..244440c5 100644 --- a/src/background/core/configManager/wordMark.ts +++ b/src/background/core/configManager/wordMark.ts @@ -1,5 +1,4 @@ import { - WordMarkConfigKey, IWordMarkConfig, defaultWordMarkConfig, } from '@/isomorphic/constant/wordMark'; @@ -11,30 +10,22 @@ import Storage from '../storage'; class WordMarkConfigManager { async get() { - const config: IWordMarkConfig = - (await Storage.get(STORAGE_KEYS.SETTINGS.WORD_MARK_CONFIG)) || {}; - - // 做一次 config 的合并，保证获取时一定包含 config 中的每一个元素 - for (const _key of Object.keys(defaultWordMarkConfig)) { - const key = _key as keyof IWordMarkConfig; - const value = config[key]; - if (typeof value === 'undefined') { - config[key] = defaultWordMarkConfig[key] as never; - } - } - - return config; + const config = await this.getStorageConfig(); + return this.transformConfig(config); } - async update(key: string, value: any, option?: IConfigManagerOption) { - const config = await this.get(); + async update( + key: keyof IWordMarkConfig, + value: any, + option?: IConfigManagerOption, + ) { + const config = await this.getStorageConfig(); const result: IWordMarkConfig = { ...config, [key]: value, }; - // enable 改变时，将 disable url 全部清空 - if (key === WordMarkConfigKey.enable) { + if (key === 'enable') { result.disableUrl = []; } await Chrome.storage.local.set({ @@ -58,12 +49,42 @@ class WordMarkConfigManager { if (tab.id) { Chrome.tabs.sendMessage(tab.id, { action: ContentScriptEvents.WordMarkConfigChange, - data: config, + data: this.transformConfig(config), }); } } }); } + + private async getStorageConfig() { + const config: IWordMarkConfig = + (await Storage.get(STORAGE_KEYS.SETTINGS.WORD_MARK_CONFIG)) || {}; + + // 做一次 config 的合并，保证获取时一定包含 config 中的每一个元素 + for (const _key of Object.keys(defaultWordMarkConfig)) { + const key = _key as keyof IWordMarkConfig; + const value = config[key]; + if (typeof value === 'undefined') { + config[key] = defaultWordMarkConfig[key] as never; + } + } + return config; + } + + private transformConfig(config: IWordMarkConfig) { + const disableFunction = config.disableFunction; + + const result = { + ...config, + filterInnerPinList: config.innerPinList.filter( + item => !disableFunction.includes(item), + ), + filterToolbars: config.toolbars.filter( + item => !disableFunction.includes(item), + ), + }; + return result; + } } export const wordMarkConfigManager = new WordMarkConfigManager(); diff --git a/src/components/WordMarkLayout/context.ts b/src/components/WordMarkLayout/context.ts index ad0ffb66..e644b1db 100644 --- a/src/components/WordMarkLayout/context.ts +++ b/src/components/WordMarkLayout/context.ts @@ -1,5 +1,11 @@ import { createContext } from 'react'; import { IWordMarkConfig } from '@/isomorphic/constant/wordMark'; +import { WordMarkOptionTypeEnum } from '@/isomorphic/constants'; -export type IWordMarkContext = IWordMarkConfig; -export const WordMarkContext = createContext({} as IWordMarkContext); +export type IWordMarkContext = IWordMarkConfig & { + filterInnerPinList: Array; + filterToolbars: Array; +}; +export const WordMarkContext = createContext( + {} as IWordMarkContext, +); diff --git a/src/core/bridge/background/configManager.ts b/src/core/bridge/background/configManager.ts index b28f9c84..2aae7391 100644 --- a/src/core/bridge/background/configManager.ts +++ b/src/core/bridge/background/configManager.ts @@ -2,7 +2,6 @@ import { BackgroundEvents } from '@/isomorphic/background'; import { OperateConfigManagerEnum, IConfigManagerOption, - ManagerType, ManagerKey, } from '@/isomorphic/background/configManager'; import type { ICallBridgeImpl } from './index'; @@ -10,9 +9,9 @@ import type { ICallBridgeImpl } from './index'; export function createConfigManagerBridge(impl: ICallBridgeImpl) { return { configManager: { - async update( - managerType: ManagerType, - key: ManagerKey, + async update( + managerType: T, + key: ManagerKey[T], value: any, option?: IConfigManagerOption, ): Promise { @@ -33,7 +32,7 @@ export function createConfigManagerBridge(impl: ICallBridgeImpl) { }); }, - async get(managerType: ManagerType): Promise { + async get(managerType: T): Promise { return new Promise(resolve => { impl( BackgroundEvents.OperateManagerConfig, diff --git a/src/isomorphic/background/configManager.ts b/src/isomorphic/background/configManager.ts index 56ad9c11..d52c69d2 100644 --- a/src/isomorphic/background/configManager.ts +++ b/src/isomorphic/background/configManager.ts @@ -6,8 +6,12 @@ export enum OperateConfigManagerEnum { update = 'update', } -export type ManagerType = 'wordMark' | 'levitate'; -export type ManagerKey = WordMarkConfigKey | LevitateConfigKey; +export type ManagerKey = { + wordMark: WordMarkConfigKey, + levitate: LevitateConfigKey +}; + +export type ManagerType = keyof ManagerKey; export interface IConfigManagerOption { notice?: boolean; diff --git a/src/isomorphic/constant/levitate.ts b/src/isomorphic/constant/levitate.ts index b098c2e3..a720f691 100644 --- a/src/isomorphic/constant/levitate.ts +++ b/src/isomorphic/constant/levitate.ts @@ -1,6 +1,4 @@ -export type LevitateConfigKey = 'enable' | 'disableUrl' | 'position'; - -export interface ILevitateConfig { +export type ILevitateConfig = { disableUrl: Array<{ origin: string; icon: string; @@ -9,6 +7,8 @@ export interface ILevitateConfig { enable: boolean; } +export type LevitateConfigKey = keyof ILevitateConfig; + export const defaultLevitateConfig: ILevitateConfig = { enable: true, disableUrl: [], diff --git a/src/isomorphic/constant/wordMark.ts b/src/isomorphic/constant/wordMark.ts index 158baf4b..0103b8c6 100644 --- a/src/isomorphic/constant/wordMark.ts +++ b/src/isomorphic/constant/wordMark.ts @@ -1,39 +1,34 @@ import { ISavePosition } from '@/core/bridge/background/request/mine'; import { WordMarkOptionTypeEnum } from '../constants'; -export enum WordMarkConfigKey { +export type IWordMarkConfig = { // 是否开启 - enable = 'enable', + enable: boolean; // 剪藏默认存储地址 - defaultSavePosition = 'defaultSavePosition', + defaultSavePosition: ISavePosition; // 划词置顶的操作 - innerPinList = 'innerPinList', + innerPinList: Array; // 禁用页面的 url - disableUrl = 'disableUrl', + disableUrl: Array; // 剪藏时唤起面板 - evokePanelWhenClip = 'evokePanelWhenClip', + evokePanelWhenClip: boolean; // 剪藏面板的排序规则 - toolbars = 'toolbars', + toolbars: Array; // 换次面板快捷键 - evokeWordMarkShortKey = 'evokeWordMarkShortKey', -} + evokeWordMarkShortKey: string; -export interface IWordMarkConfig { - [WordMarkConfigKey.enable]: boolean; - [WordMarkConfigKey.defaultSavePosition]: ISavePosition; - [WordMarkConfigKey.innerPinList]: Array; - [WordMarkConfigKey.disableUrl]: Array; - [WordMarkConfigKey.evokePanelWhenClip]: boolean; - [WordMarkConfigKey.toolbars]: Array; - [WordMarkConfigKey.evokeWordMarkShortKey]: string; + // 用户关闭的划词的某个功能 + disableFunction: Array; } +export type WordMarkConfigKey = keyof IWordMarkConfig; + export const defaultWordMarkConfig: IWordMarkConfig = { enable: false, defaultSavePosition: { @@ -49,4 +44,5 @@ export const defaultWordMarkConfig: IWordMarkConfig = { evokePanelWhenClip: false, toolbars: [WordMarkOptionTypeEnum.clipping, WordMarkOptionTypeEnum.translate], evokeWordMarkShortKey: '', + disableFunction: [], }; diff --git a/src/isomorphic/link-helper.ts b/src/isomorphic/link-helper.ts index 2f148522..ab47a3a3 100644 --- a/src/isomorphic/link-helper.ts +++ b/src/isomorphic/link-helper.ts @@ -18,9 +18,9 @@ const LinkHelper = { joinGroup: 'https://www.yuque.com/yuque/yuque-browser-extension/welcome#BQrrd', settingPage: chrome.runtime.getURL('setting.html'), - wordMarkSettingPage: `${chrome.runtime.getURL('setting.html')}?page=wordMark`, - shortcutSettingPage: `${chrome.runtime.getURL('setting.html')}?page=shortcut`, - sidePanelSettingPage: `${chrome.runtime.getURL('setting.html')}?page=sidePanel`, + wordMarkSettingPage: `${chrome.runtime.getURL('setting.html')}#wordMark`, + shortcutSettingPage: `${chrome.runtime.getURL('setting.html')}#shortcut`, + sidePanelSettingPage: `${chrome.runtime.getURL('setting.html')}#sidePanel`, }; export default LinkHelper; diff --git a/src/pages/inject/LevitateBall/app.tsx b/src/pages/inject/LevitateBall/app.tsx index cfdc054f..efdf8f43 100644 --- a/src/pages/inject/LevitateBall/app.tsx +++ b/src/pages/inject/LevitateBall/app.tsx @@ -69,7 +69,8 @@ function App() { const onCloseLevitateBall = () => { let disableType: DisableType = 'disableOnce'; - Modal.confirm({ + const modal = Modal.confirm({}); + modal.update({ content: (
- diff --git a/src/pages/inject/WordMark/Inner/DisableMenu.tsx b/src/pages/inject/WordMark/Inner/DisableMenu.tsx index 87a45be0..d431f07a 100644 --- a/src/pages/inject/WordMark/Inner/DisableMenu.tsx +++ b/src/pages/inject/WordMark/Inner/DisableMenu.tsx @@ -1,26 +1,20 @@ import React from 'react'; import { __i18n } from '@/isomorphic/i18n'; import LinkHelper from '@/isomorphic/link-helper'; -import { WordMarkConfigKey } from '@/isomorphic/constant/wordMark'; import { backgroundBridge } from '@/core/bridge/background'; import styles from './DisableMenu.module.less'; function DisableMenu() { const disableForever = () => { - backgroundBridge.configManager.update( - 'wordMark', - WordMarkConfigKey.enable, - false, - { - notice: true, - }, - ); + backgroundBridge.configManager.update('wordMark', 'enable', false, { + notice: true, + }); }; const disableForPage = () => { backgroundBridge.configManager.update( 'wordMark', - WordMarkConfigKey.disableUrl, + 'disableUrl', `${window.location.origin}${window.location.pathname}`, { notice: true, diff --git a/src/pages/inject/WordMark/Inner/OperateMenu.tsx b/src/pages/inject/WordMark/Inner/OperateMenu.tsx index a7491fcc..f0d331ae 100644 --- a/src/pages/inject/WordMark/Inner/OperateMenu.tsx +++ b/src/pages/inject/WordMark/Inner/OperateMenu.tsx @@ -4,7 +4,6 @@ import { PushpinOutlined, PushpinFilled } from '@ant-design/icons'; import classnames from 'classnames'; import { backgroundBridge } from '@/core/bridge/background'; import { WordMarkOptionTypeEnum } from '@/isomorphic/constants'; -import { WordMarkConfigKey } from '@/isomorphic/constant/wordMark'; import { useWordMarkContext } from '@/components/WordMarkLayout/useWordMarkContext'; import DragList from '@/components/DragList'; import { ToolbarItem, toolbars as defaultToolbars } from '../constants'; @@ -26,11 +25,7 @@ function OperateMenu(props: IOperateMenuProps) { const updateToolbar = (list: ToolbarItem[]) => { const result = list.map(item => item.id) as WordMarkOptionTypeEnum[]; setToolbarKeys(result); - backgroundBridge.configManager.update( - 'wordMark', - WordMarkConfigKey.toolbars, - result, - ); + backgroundBridge.configManager.update('wordMark', 'toolbars', result); }; const toolbars = useMemo(() => { @@ -47,7 +42,9 @@ function OperateMenu(props: IOperateMenuProps) { return (
!wordMarkContext.disableFunction.includes(item.id as any), + )} renderItem={item => { const { type, name, icon } = item; const pinned = pinList.includes(type); diff --git a/src/pages/inject/WordMark/Inner/index.tsx b/src/pages/inject/WordMark/Inner/index.tsx index 65cc45b1..d28f762e 100644 --- a/src/pages/inject/WordMark/Inner/index.tsx +++ b/src/pages/inject/WordMark/Inner/index.tsx @@ -1,8 +1,7 @@ -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { Popover } from 'antd'; import Icon, { CloseOutlined } from '@ant-design/icons'; import { WordMarkOptionTypeEnum } from '@/isomorphic/constants'; -import { WordMarkConfigKey } from '@/isomorphic/constant/wordMark'; import { backgroundBridge } from '@/core/bridge/background'; import { useWordMarkContext } from '@/components/WordMarkLayout/useWordMarkContext'; import YuqueLogo from '@/assets/svg/yuque-logo.svg'; @@ -20,7 +19,7 @@ function InnerWordMark(props: InnerWordMarkProps) { const { executeCommand } = props; const wordMarkContext = useWordMarkContext(); const [pinedTools, setPinedTools] = useState( - wordMarkContext.innerPinList, + wordMarkContext.filterInnerPinList, ); const handlePin = useCallback((type: WordMarkOptionTypeEnum) => { @@ -28,15 +27,15 @@ function InnerWordMark(props: InnerWordMarkProps) { const result = tools.includes(type) ? tools.filter(t => t !== type) : [type, ...tools]; - backgroundBridge.configManager.update( - 'wordMark', - WordMarkConfigKey.innerPinList, - result, - ); + backgroundBridge.configManager.update('wordMark', 'innerPinList', result); return result; }); }, []); + useEffect(() => { + setPinedTools(wordMarkContext.filterInnerPinList); + }, [wordMarkContext]); + return (
(StepMessage.onStart); const [type, setType] = useState(defaultType); const [loading, setLoading] = useState(true); @@ -89,7 +91,10 @@ function WordMarkPanel(props: WordMarkPanelProps) {
{toolbars.map(item => { - if ([WordMarkOptionTypeEnum.clipping].includes(item.type)) { + if ( + [WordMarkOptionTypeEnum.clipping].includes(item.type) || + wordMarkContext.disableFunction.includes(item.id as any) + ) { return null; } return ( diff --git a/src/pages/inject/WordMark/app.tsx b/src/pages/inject/WordMark/app.tsx index f14fd053..924250b1 100644 --- a/src/pages/inject/WordMark/app.tsx +++ b/src/pages/inject/WordMark/app.tsx @@ -236,7 +236,10 @@ function WordMarkApp() { }, [wordMarkContext]); return ( -
+
>; id: string; + desc: string; } export const toolbars: ToolbarItem[] = [ @@ -16,11 +17,13 @@ export const toolbars: ToolbarItem[] = [ type: WordMarkOptionTypeEnum.clipping, name: __i18n('剪藏'), icon: Clipping, + desc: __i18n('对划词内容中英文互译') }, { id: WordMarkOptionTypeEnum.translate, type: WordMarkOptionTypeEnum.translate, name: __i18n('翻译'), icon: Translate, + desc: __i18n('将划词内容剪藏到语雀'), }, ]; diff --git a/src/pages/setting/about/index.module.less b/src/pages/setting/about/index.module.less index cfad0e9f..6a6d4cce 100644 --- a/src/pages/setting/about/index.module.less +++ b/src/pages/setting/about/index.module.less @@ -5,6 +5,7 @@ flex-direction: column; gap: 10px; font-size: @font-size; + height: calc(100vh - 76px); .title { color: @text-primary; diff --git a/src/pages/setting/app.module.less b/src/pages/setting/app.module.less index c926ab3b..aed54c64 100644 --- a/src/pages/setting/app.module.less +++ b/src/pages/setting/app.module.less @@ -3,12 +3,15 @@ .pageWrapper { height: 100vh; width: 100vw; - display: flex; .left { + position: fixed; + left: 0; + top: 0; width: 256px; - flex: 0 0 auto; background: #FCFCFC; padding: 24px 16px; + overflow-y: auto; + height: 100vh; .header { font-size: 20px; @@ -18,47 +21,63 @@ margin-bottom: 24px; } - .menu { - margin: 0; - display: flex; - flex-direction: column; - gap: 10px; + :global { + .yuque-chrome-extension-anchor { + margin: 0; + display: flex; + flex-direction: column; + gap: 10px; - .menuItem { - padding: 5px 16px; - font-size: @font-size; - line-height: 22px; - color: @text-primary; - border-radius: 6px; - cursor: pointer; + .yuque-chrome-extension-anchor-link { + padding: 5px 16px; + font-size: @font-size; + line-height: 22px; + color: @text-primary; + border-radius: 6px; + cursor: pointer; + + .yuque-chrome-extension-anchor-link-title { + color: @text-primary; + } + } + + .yuque-chrome-extension-anchor-ink-visible { + display: none !important; + } - &:hover { + .yuque-chrome-extension-anchor-link-active { + font-weight: 500; background-color: @grey-2; + color: @text-primary; + + .yuque-chrome-extension-anchor-link-title { + color: @text-primary; + } } - } - .menuItemSelect { - font-weight: 500; - background-color: @grey-2; + &::before { + display: none; + } } } } .right { + margin-left: 256px; width: calc(100vw - 256px); - padding: 24px 50px; - overflow-y: auto; + padding: 0 56px; + max-width: 668px; - .pageTitle { - font-size: 20px; - line-height: 28px; - color: @text-primary; - font-weight: 500; - margin-bottom: 24px; + .pageItem { + margin-bottom: 36px; + + .pageTitle { + font-size: 20px; + line-height: 28px; + color: @text-primary; + font-weight: 500; + padding: 24px 0; + } } } } - -.hidden { - display: none; -} diff --git a/src/pages/setting/app.tsx b/src/pages/setting/app.tsx index b37652cb..5a06089a 100644 --- a/src/pages/setting/app.tsx +++ b/src/pages/setting/app.tsx @@ -1,5 +1,5 @@ -import React, { useMemo, useState } from 'react'; -import classnames from 'classnames'; +import React from 'react'; +import { Anchor } from 'antd'; import { initI18N } from '@/isomorphic/i18n'; import AccountLayout from '@/components/AccountLayout'; import AntdLayout from '@/components/AntdLayout'; @@ -29,88 +29,73 @@ enum Page { about = 'about', } -const menus = [ +const anchorMenus = [ { - name: __i18n('通用设置'), + title: __i18n('通用设置'), key: Page.general, - page: , + href: `#${Page.general}`, }, { - name: __i18n('快捷键设置'), + title: __i18n('快捷键设置'), key: Page.shortcut, - page: , + href: `#${Page.shortcut}`, }, { - name: __i18n('侧边栏'), + title: __i18n('侧边栏'), key: Page.sidePanel, - page: , + href: `#${Page.sidePanel}`, }, { - name: __i18n('划词工具栏'), + title: __i18n('划词工具栏'), key: Page.wordMark, - page: , + href: `#${Page.wordMark}`, }, { - name: __i18n('帮助与反馈'), + title: __i18n('帮助与反馈'), key: Page.help, - page: , + href: `#${Page.help}`, }, { - name: __i18n('关于语雀插件'), + title: __i18n('关于语雀插件'), key: Page.about, - page: , + href: `#${Page.about}`, }, ]; function App() { - const queryString = window.location.search; - const urlParams = new URLSearchParams(queryString); - const queryPage = urlParams.get('page') as Page; - const defaultPage = Object.values(Page).includes(queryPage) - ? queryPage - : Page.general; - - const [page, setPage] = useState(defaultPage); - const title = useMemo(() => { - return menus.find(item => item.key === page)?.name; - }, [page]); - return (
{__i18n('语雀浏览器插件')}
-
- {menus.map(item => { - return ( -
setPage(item.key)} - key={item.key} - > - {item.name} -
- ); - })} -
+
-
{title}
- {menus.map(item => { - return ( -
- {item.page} -
- ); - })} +
+
{__i18n('通用设置')}
+ +
+
+
{__i18n('快捷键设置')}
+ +
+
+
{__i18n('侧边栏')}
+ +
+
+
{__i18n('划词工具栏')}
+ +
+
+
{__i18n('帮助与反馈')}
+ +
+
+
{__i18n('关于语雀插件')}
+ +
diff --git a/src/pages/setting/common.module.less b/src/pages/setting/common.module.less new file mode 100644 index 00000000..0943d211 --- /dev/null +++ b/src/pages/setting/common.module.less @@ -0,0 +1,42 @@ +@import '~@/styles/parameters.less'; + +// 子标题 +.h2Title { + font-size: @font-size-lg; + line-height: 24px; + margin-bottom: 16px; + font-weight: 500; +} + +.configItem { + display: flex; + justify-content: space-between; + + .desc { + font-size: @font-size; + display: flex; + align-items: center; + } +} + +// 每个大块的 config 配置样式 +.configCard { + padding: 24px 0; + border-bottom: 1px solid @border-light-color; + color: @text-primary; +} + +.body { + display: flex; + flex-direction: column; + gap: 12px; +} + +.configCard:first-child { + padding-top: 0; +} + +.configCard:last-child { + border-bottom: 1px solid transparent; + padding-bottom: 0; +} diff --git a/src/pages/setting/general/index.module.less b/src/pages/setting/general/index.module.less index adf71814..31b14bb8 100644 --- a/src/pages/setting/general/index.module.less +++ b/src/pages/setting/general/index.module.less @@ -1,4 +1,5 @@ @import '~@/styles/parameters.less'; +@import '../common.module.less'; .title { margin-bottom: 16px; @@ -14,7 +15,7 @@ padding: 10px 16px; font-size: 14px; align-items: center; - max-width: 804px; + max-width: 668px; } .avatar { diff --git a/src/pages/setting/help/index.module.less b/src/pages/setting/help/index.module.less index f33ebec3..33a66604 100644 --- a/src/pages/setting/help/index.module.less +++ b/src/pages/setting/help/index.module.less @@ -23,23 +23,7 @@ } } - .line { - background-color: @border-light-color; - height: 1px; - margin: 12px 0; - } - - .joinUs { - .title { - color: @text-primary; - font-weight: 500; - font-size: @font-size-lg; - line-height: 24px; - margin: 12px 0 16px; - } - - .img { - width: 146px; - } + .link:last-child { + margin-bottom: 0; } } diff --git a/src/pages/setting/shortcut/index.module.less b/src/pages/setting/shortcut/index.module.less index defc600c..5a3b73a4 100644 --- a/src/pages/setting/shortcut/index.module.less +++ b/src/pages/setting/shortcut/index.module.less @@ -1,64 +1,22 @@ @import '~@/styles/parameters.less'; - -.configWrapper { - max-width: 668px; - - .pageDesc { - font-size: @font-size; - display: flex; - justify-content: space-between; - color: @text-primary; - padding-bottom: 24px; - border-bottom: 1px solid @border-light-color; - - .setting { - margin-left: auto; - color: @link-color; - text-decoration: none; - cursor: pointer; - - .icon { - transform: rotate(-90deg); - } +@import '../common.module.less'; + +.pageDesc { + font-size: @font-size; + display: flex; + justify-content: space-between; + color: @text-primary; + padding-bottom: 24px; + border-bottom: 1px solid @border-light-color; + + .setting { + margin-left: auto; + color: @link-color; + text-decoration: none; + cursor: pointer; + + .icon { + transform: rotate(-90deg); } } - - .card { - padding: 24px 0; - border-bottom: 1px solid @border-light-color; - color: @text-primary; - - .title { - font-size: @font-size-lg; - line-height: 24px; - margin-bottom: 16px; - font-weight: 500; - } - - .body { - display: flex; - flex-direction: column; - gap: 12px; - - .configItem { - display: flex; - justify-content: space-between; - - .desc { - font-size: @font-size; - display: flex; - align-items: center; - } - } - } - } - - .card:first-child { - padding-top: 0; - } - - .card:last-child { - border-bottom: 1px solid transparent; - } } - diff --git a/src/pages/setting/shortcut/index.tsx b/src/pages/setting/shortcut/index.tsx index 5ec3c3f4..f311dd22 100644 --- a/src/pages/setting/shortcut/index.tsx +++ b/src/pages/setting/shortcut/index.tsx @@ -14,7 +14,7 @@ function Shortcut() { }; return ( -
+ <>
{__i18n( @@ -26,8 +26,8 @@ function Shortcut() {
-
-
{__i18n('侧边栏')}
+
+
{__i18n('侧边栏')}
{__i18n('快捷唤起侧边栏')}
@@ -39,8 +39,8 @@ function Shortcut() {
-
-
{__i18n('剪藏方式')}
+
+
{__i18n('剪藏方式')}
{__i18n('选取剪藏')}
@@ -56,7 +56,7 @@ function Shortcut() {
-
+ ); } diff --git a/src/pages/setting/sidePanel/index.module.less b/src/pages/setting/sidePanel/index.module.less deleted file mode 100644 index 767d85a5..00000000 --- a/src/pages/setting/sidePanel/index.module.less +++ /dev/null @@ -1,46 +0,0 @@ -@import '~@/styles/parameters.less'; - -.configWrapper { - max-width: 668px; - - .card { - padding: 24px 0; - border-bottom: 1px solid @border-light-color; - color: @text-primary; - .body { - display: flex; - flex-direction: column; - gap: 12px; - - .configItem { - display: flex; - justify-content: space-between; - - :global { - .yuque-chrome-extension-select-arrow { - color: @text-color-secondary; - } - } - } - - .desc { - font-size: @font-size; - display: flex; - align-items: center; - } - - .disableUrlCard { - margin-top: 12px; - } - } - } - - .card:first-child { - padding-top: 0; - } - - .card:last-child { - border-bottom: 1px solid transparent; - } -} - diff --git a/src/pages/setting/sidePanel/index.tsx b/src/pages/setting/sidePanel/index.tsx index 4e185511..f27c3496 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 './index.module.less'; +import styles from '../common.module.less'; function Shortcut() { const [config, setConfig] = useState({} as ILevitateConfig); @@ -42,13 +42,14 @@ function Shortcut() { return (
-
+
{__i18n('展示侧边栏悬浮气泡')}
onConfigChange('enable', !config.enable)} + size='small' />
{!!config.disableUrl?.length && ( diff --git a/src/pages/setting/wordMark/index.module.less b/src/pages/setting/wordMark/index.module.less index d0850e9c..35862e93 100644 --- a/src/pages/setting/wordMark/index.module.less +++ b/src/pages/setting/wordMark/index.module.less @@ -1,59 +1,36 @@ @import '~@/styles/parameters.less'; +@import '../common.module.less'; + +.more { + margin-top: 40px; + color: @link-color; + display: inline-block; + cursor: pointer; + outline-style: none; + text-decoration: none; +} -.configWrapper { - max-width: 668px; - - .card { - padding: 24px 0; - border-bottom: 1px solid @border-light-color; +.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; + gap: 8px; color: @text-primary; + font-size: @font-size; + align-items: center; - .title { - font-size: @font-size-lg; - line-height: 24px; - margin-bottom: 16px; - font-weight: 500; - } - - .body { - display: flex; - flex-direction: column; - gap: 12px; + .toolbarSettingName { + flex: 1 1 auto; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; - .configItem { - display: flex; - justify-content: space-between; - - .desc { - font-size: @font-size; - display: flex; - align-items: center; - } - - :global { - .yuque-chrome-extension-select-arrow { - color: @text-color-secondary; - } - } + .toolbarSettingDesc { + color: @text-color-secondary; } } } - - .card:first-child { - padding-top: 0; - } - - .card:last-child { - border-bottom: 1px solid transparent; - } - - .more { - margin-top: 40px; - color: @link-color; - display: inline-block; - cursor: pointer; - outline-style: none; - text-decoration: none; - } } - diff --git a/src/pages/setting/wordMark/index.tsx b/src/pages/setting/wordMark/index.tsx index efa8770c..71e17d95 100644 --- a/src/pages/setting/wordMark/index.tsx +++ b/src/pages/setting/wordMark/index.tsx @@ -1,5 +1,8 @@ -import React, { useEffect, useState } from 'react'; -import { Select, Switch } from 'antd'; +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 { WordMarkOptionTypeEnum } from '@/isomorphic/constants'; import { __i18n } from '@/isomorphic//i18n'; import { IWordMarkConfig, @@ -56,6 +59,18 @@ const windows = [ function WordMark() { const [config, setConfig] = useState(null); + const toolBarSettings = useMemo(() => { + const result = config?.toolbars.map(item => { + const enable = !config?.disableFunction.includes(item); + const info = toolbars.find(t => item === t.type) as ToolbarItem; + return { + enable, + ...info, + }; + }); + return result; + }, [config]); + const onConfigChange = async (key: WordMarkConfigKey, value: any) => { await backgroundBridge.configManager.update('wordMark', key, value, { notice: true, @@ -66,6 +81,19 @@ function WordMark() { }); }; + const onEnableFunctionChange = ( + id: WordMarkOptionTypeEnum, + enable: boolean, + ) => { + let result = config?.disableFunction; + if (!enable) { + result?.push(id); + } else { + result = result?.filter(item => item !== id); + } + onConfigChange('disableFunction', result); + }; + useEffect(() => { backgroundBridge.configManager.get('wordMark').then(res => { setConfig(res); @@ -78,16 +106,15 @@ function WordMark() { return (
-
-
{__i18n('全局设置')}
+
+
{__i18n('全局设置')}
{__i18n('默认启动划词工具栏')}
- onConfigChange(WordMarkConfigKey.enable, !config.enable) - } + onChange={() => onConfigChange('enable', !config.enable)} + size="small" />
{!config.enable && ( @@ -96,11 +123,11 @@ function WordMark() { {__i18n('选中文本 + 按指定修饰键唤起')}