From 8996fd6ecbab369996f86c64882728ef2fac0c59 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Mon, 27 Sep 2021 18:14:18 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E9=85=8D=E8=89=B2?= =?UTF-8?q?=E6=96=B9=E6=A1=88=E6=8F=92=E4=BB=B6=E6=94=AF=E6=8C=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/App.tsx | 15 ++------------- web/src/components/modals/SettingsView/System.tsx | 6 ++++++ web/src/init.tsx | 2 ++ web/src/plugin/PluginStore/ManualInstall.tsx | 3 ++- web/src/plugin/common/reg.ts | 8 ++++++++ web/src/styles/antd/index.less | 1 + web/src/styles/antd/overwrite.less | 5 +++-- web/src/styles/antd/theme.less | 9 +++++++++ web/src/utils/dom-helper.ts | 12 ++++++++++++ 9 files changed, 45 insertions(+), 16 deletions(-) create mode 100644 web/src/styles/antd/theme.less create mode 100644 web/src/utils/dom-helper.ts diff --git a/web/src/App.tsx b/web/src/App.tsx index ef9a7fb6..4d157112 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from 'react'; +import React from 'react'; import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'; import { TcProvider, useColorScheme, useLanguage } from 'tailchat-shared'; import clsx from 'clsx'; @@ -7,6 +7,7 @@ import { ConfigProvider as AntdProvider } from 'antd'; import { parseColorScheme } from './utils/color-scheme-helper'; import { Helmet } from 'react-helmet'; import { useRecordMeasure } from './utils/measure-helper'; +import { getPopupContainer } from './utils/dom-helper'; const MainRoute = Loadable(() => import('./routes/Main').then((module) => module.MainRoute) @@ -21,18 +22,6 @@ const InviteRoute = Loadable(() => ); const AppProvider: React.FC = React.memo((props) => { - const getPopupContainer = useCallback( - (triggerNode: HTMLElement): HTMLElement => { - const appRoot = document.querySelector('#tailchat-app'); - if (appRoot) { - return appRoot; - } - - return document.body; - }, - [] - ); - return ( diff --git a/web/src/components/modals/SettingsView/System.tsx b/web/src/components/modals/SettingsView/System.tsx index 08bf96b0..a220a725 100644 --- a/web/src/components/modals/SettingsView/System.tsx +++ b/web/src/components/modals/SettingsView/System.tsx @@ -1,4 +1,5 @@ import { FullModalField } from '@/components/FullModal/Field'; +import { pluginColorScheme } from '@/plugin/common'; import { Select } from 'antd'; import React, { useCallback } from 'react'; import { showToasts, t, useColorScheme } from 'tailchat-shared'; @@ -45,6 +46,11 @@ export const SettingsSystem: React.FC = React.memo(() => { {t('暗黑模式')} {t('亮色模式')} {t('自动')} + {pluginColorScheme.map((pcs, i) => ( + + {pcs.label} + + ))} } /> diff --git a/web/src/init.tsx b/web/src/init.tsx index 78961b87..ae801ce8 100644 --- a/web/src/init.tsx +++ b/web/src/init.tsx @@ -8,6 +8,7 @@ import { setToasts, setTokenGetter, } from 'tailchat-shared'; +import { getPopupContainer } from './utils/dom-helper'; import { getUserJWT } from './utils/jwt-helper'; const webStorage = buildStorage(window.localStorage); @@ -39,6 +40,7 @@ setAlert((options) => { await options.onConfirm(); } }, + getContainer: getPopupContainer, }); }); diff --git a/web/src/plugin/PluginStore/ManualInstall.tsx b/web/src/plugin/PluginStore/ManualInstall.tsx index d9d68e41..6d0b7a84 100644 --- a/web/src/plugin/PluginStore/ManualInstall.tsx +++ b/web/src/plugin/PluginStore/ManualInstall.tsx @@ -1,6 +1,6 @@ import { Button, Input } from 'antd'; import React, { useMemo, useState } from 'react'; -import { isValidJson, t, useAsyncRequest } from 'tailchat-shared'; +import { isValidJson, showToasts, t, useAsyncRequest } from 'tailchat-shared'; import { pluginManager } from '../manager'; import { parsePluginManifest } from '../utils'; @@ -9,6 +9,7 @@ export const ManualInstall: React.FC = React.memo(() => { const [{ loading }, handleInstallPlugin] = useAsyncRequest(async () => { pluginManager.installPlugin(parsePluginManifest(json)); + showToasts(t('安装成功'), 'success'); }, [json]); const invalid = useMemo(() => !isValidJson(json), [json]); diff --git a/web/src/plugin/common/reg.ts b/web/src/plugin/common/reg.ts index 7ae89b99..83afb05d 100644 --- a/web/src/plugin/common/reg.ts +++ b/web/src/plugin/common/reg.ts @@ -68,3 +68,11 @@ export const [chatInputActions, regChatInputAction] = buildRegList(); export { regSocketEventListener }; + +/** + * 注册配色方案 + */ +export const [pluginColorScheme, regPluginColorScheme] = buildRegList<{ + label: string; + name: string; +}>(); diff --git a/web/src/styles/antd/index.less b/web/src/styles/antd/index.less index 6f50751a..a68b79c9 100644 --- a/web/src/styles/antd/index.less +++ b/web/src/styles/antd/index.less @@ -1,2 +1,3 @@ @import "./overwrite.less"; +@import "./theme.less"; @import "./dark.less"; diff --git a/web/src/styles/antd/overwrite.less b/web/src/styles/antd/overwrite.less index 5b260a3a..4a3a3fd7 100644 --- a/web/src/styles/antd/overwrite.less +++ b/web/src/styles/antd/overwrite.less @@ -1,6 +1,7 @@ /** - * 这里主要是处理tailwindcss与 antd 一起用的时候的兼容问题 - * 与重写部分antd的样式 + * 这里主要是 + * - 处理tailwindcss与 antd 一起用的时候的兼容问题 + * - 与重写部分antd的样式 */ .ant-message .anticon { diff --git a/web/src/styles/antd/theme.less b/web/src/styles/antd/theme.less new file mode 100644 index 00000000..9d9e8b86 --- /dev/null +++ b/web/src/styles/antd/theme.less @@ -0,0 +1,9 @@ +// antd 主题色支持 +#tailchat-app { + --tc-primary-color: rgb(24, 144, 255); + + .ant-btn-primary { + background: var(--tc-primary-color); + border-color: var(--tc-primary-color); + } +} diff --git a/web/src/utils/dom-helper.ts b/web/src/utils/dom-helper.ts new file mode 100644 index 00000000..f66c28c0 --- /dev/null +++ b/web/src/utils/dom-helper.ts @@ -0,0 +1,12 @@ +/** + * 返回tailchat逻辑根节点 + * 如果找不到根节点则返回body + */ +export function getPopupContainer() { + const appRoot = document.querySelector('#tailchat-app'); + if (appRoot) { + return appRoot; + } + + return document.body; +}