feat: 增加字体放大插件

apps/cli/templates/client-plugin/{{id}}/src/index.tsx

@@ -1,3 +1,4 @@
-const PLUGIN_NAME = '{{id}}';
+const PLUGIN_ID = '{{id}}';
+const PLUGIN_NAME = '{{name}}';
 
-console.log(`Plugin ${PLUGIN_NAME} is loaded`);
+console.log(`Plugin ${PLUGIN_NAME}(${PLUGIN_ID}) is loaded`);

apps/cli/templates/server-plugin-web/{{id}}/web/plugins/{{id}}/src/index.tsx

@@ -1,3 +1,4 @@
-const PLUGIN_NAME = '{{id}}';
+const PLUGIN_ID = '{{id}}';
+const PLUGIN_NAME = '{{name}}';
 
-console.log(`Plugin ${PLUGIN_NAME} is loaded`);
+console.log(`Plugin ${PLUGIN_NAME}(${PLUGIN_ID}) is loaded`);

client/shared/model/user.ts

@@ -349,6 +349,8 @@ export async function modifyUserExtra(
 export async function getUserSettings(): Promise<UserSettings> {
   const { data } = await request.get('/api/user/getUserSettings');
 
+  sharedEvent.emit('userSettingsUpdate', data);
+
   return data;
 }
 

client/web/plugins/com.msgbyte.biggerfont/manifest.json

@@ -0,0 +1,9 @@
+{
+  "label": "字号放大",
+  "name": "com.msgbyte.biggerfont",
+  "url": "/plugins/com.msgbyte.biggerfont/index.js",
+  "version": "0.0.0",
+  "author": "moonrailgun",
+  "description": "为Tailchat增加放大字号的功能,方便不同用户群体",
+  "requireRestart": true
+}

client/web/plugins/com.msgbyte.biggerfont/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@plugins/com.msgbyte.biggerfont",
+  "main": "src/index.tsx",
+  "version": "0.0.0",
+  "description": "为Tailchat增加放大字号的功能,方便不同用户群体",
+  "private": true,
+  "scripts": {
+    "sync:declaration": "tailchat declaration github"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.191",
+    "@types/styled-components": "^5.1.26",
+    "react": "18.2.0",
+    "styled-components": "^5.3.6"
+  }
+}

client/web/plugins/com.msgbyte.biggerfont/src/const.ts

@@ -0,0 +1,3 @@
+export const PLUGIN_ID = 'com.msgbyte.biggerfont';
+
+export const PLUGIN_CONFIG = `${PLUGIN_ID}.config`;

client/web/plugins/com.msgbyte.biggerfont/src/index.tsx

@@ -0,0 +1,49 @@
+import {
+  regPluginSettings,
+  getCachedUserSettings,
+  sharedEvent,
+} from '@capital/common';
+import { PLUGIN_CONFIG, PLUGIN_ID } from './const';
+import { Translate } from './translate';
+import _get from 'lodash/get';
+
+console.log(`Plugin ${PLUGIN_ID} is loaded`);
+
+regPluginSettings({
+  name: PLUGIN_CONFIG,
+  label: Translate.name,
+  position: 'system',
+  type: 'select',
+  defaultValue: '',
+  options: [
+    { label: Translate.default, value: '' },
+    { label: Translate.md, value: 'md' },
+    { label: Translate.lg, value: 'lg' },
+    { label: Translate.xl, value: 'xl' },
+  ],
+});
+
+getCachedUserSettings().then((settings) => {
+  updateFontsize(settings);
+});
+
+sharedEvent.on('userSettingsUpdate', (settings) => {
+  updateFontsize(settings);
+});
+
+function updateFontsize(settings: any) {
+  const fontSize = _get(settings, PLUGIN_CONFIG);
+
+  if (typeof settings === 'object' && typeof fontSize === 'string') {
+    if (fontSize === '') {
+      // 清除字号设置
+      document.documentElement.style.fontSize = undefined;
+    } else if (fontSize === 'md') {
+      document.documentElement.style.fontSize = '18px';
+    } else if (fontSize === 'lg') {
+      document.documentElement.style.fontSize = '20px';
+    } else if (fontSize === 'xl') {
+      document.documentElement.style.fontSize = '22px';
+    }
+  }
+}

client/web/plugins/com.msgbyte.biggerfont/src/translate.ts

@@ -0,0 +1,18 @@
+import { localTrans } from '@capital/common';
+
+export const Translate = {
+  name: localTrans({
+    'zh-CN': '放大字号',
+    'en-US': 'Increase font size',
+  }),
+  default: localTrans({ 'zh-CN': '默认', 'en-US': 'Default' }),
+  md: localTrans({ 'zh-CN': '中号', 'en-US': 'Middle' }),
+  lg: localTrans({
+    'zh-CN': '大号',
+    'en-US': 'Large',
+  }),
+  xl: localTrans({
+    'zh-CN': '特大号',
+    'en-US': 'Extra Large',
+  }),
+};

client/web/plugins/com.msgbyte.biggerfont/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "jsx": "react",
+    "importsNotUsedAsValues": "error"
+  }
+}

client/web/plugins/com.msgbyte.biggerfont/types/tailchat.d.ts

@@ -0,0 +1,2 @@
+declare module '@capital/common';
+declare module '@capital/component';

client/web/registry.json

@@ -134,5 +134,14 @@
     "author": "moonrailgun",
     "description": "提供在线听音乐服务，内容来自网络",
     "requireRestart": true
+  },
+  {
+    "label": "字号放大",
+    "name": "com.msgbyte.biggerfont",
+    "url": "/plugins/com.msgbyte.biggerfont/index.js",
+    "version": "0.0.0",
+    "author": "moonrailgun",
+    "description": "为Tailchat增加放大字号的功能,方便不同用户群体",
+    "requireRestart": true
   }
 ]

client/web/src/components/FullModal/Factory.tsx

@@ -10,6 +10,7 @@ export type FullModalFactoryConfig = {
   name: string;
   label: string;
   desc?: string;
+  defaultValue?: any;
 } & (
   | {
       type: 'text';

client/web/src/components/modals/SettingsView/System.tsx

@@ -48,7 +48,7 @@ export const SettingsSystem: React.FC = React.memo(() => {
           return (
             <FullModalFactory
               key={item.name}
-              value={_get(settings, item.name, false)}
+              value={_get(settings, item.name, item.defaultValue ?? false)}
               onChange={(val) => {
                 setSettings({
                   [item.name]: val,

pnpm-lock.yaml

@@ -622,6 +622,21 @@ importers:
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
 
+  client/web/plugins/com.msgbyte.biggerfont:
+    specifiers:
+      '@types/lodash': ^4.14.191
+      '@types/styled-components': ^5.1.26
+      lodash: ^4.17.21
+      react: 18.2.0
+      styled-components: ^5.3.6
+    dependencies:
+      lodash: 4.17.21
+    devDependencies:
+      '@types/lodash': 4.14.191
+      '@types/styled-components': 5.1.26
+      react: 18.2.0
+      styled-components: 5.3.6_react@18.2.0
+
   client/web/plugins/com.msgbyte.draw:
     specifiers:
       '@types/react-canvas-draw': ^1.1.1