feat: 增加配色方案插件支持

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<HTMLElement>('#tailchat-app');
-      if (appRoot) {
-        return appRoot;
-      }
-
-      return document.body;
-    },
-    []
-  );
-
   return (
     <BrowserRouter>
       <TcProvider>

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(() => {
             <Select.Option value="dark">{t('暗黑模式')}</Select.Option>
             <Select.Option value="light">{t('亮色模式')}</Select.Option>
             <Select.Option value="auto">{t('自动')}</Select.Option>
+            {pluginColorScheme.map((pcs, i) => (
+              <Select.Option key={pcs.name + i} value={pcs.name}>
+                {pcs.label}
+              </Select.Option>
+            ))}
           </Select>
         }
       />

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,
   });
 });
 

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]);

web/src/plugin/common/reg.ts

@@ -68,3 +68,11 @@ export const [chatInputActions, regChatInputAction] =
   buildRegList<ChatInputAction>();
 
 export { regSocketEventListener };
+
+/**
+ * 注册配色方案
+ */
+export const [pluginColorScheme, regPluginColorScheme] = buildRegList<{
+  label: string;
+  name: string;
+}>();

web/src/styles/antd/index.less

@@ -1,2 +1,3 @@
 @import "./overwrite.less";
+@import "./theme.less";
 @import "./dark.less";

web/src/styles/antd/overwrite.less

@@ -1,6 +1,7 @@
 /**
- * 这里主要是处理tailwindcss与 antd 一起用的时候的兼容问题
- * 与重写部分antd的样式
+ * 这里主要是
+ * - 处理tailwindcss与 antd 一起用的时候的兼容问题
+ * - 与重写部分antd的样式
  */
 
 .ant-message .anticon {

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);
+  }
+}

web/src/utils/dom-helper.ts

@@ -0,0 +1,12 @@
+/**
+ * 返回tailchat逻辑根节点
+ * 如果找不到根节点则返回body
+ */
+export function getPopupContainer() {
+  const appRoot = document.querySelector<HTMLElement>('#tailchat-app');
+  if (appRoot) {
+    return appRoot;
+  }
+
+  return document.body;
+}