feat: add custom serverName render in login view

client/shared/i18n/langs/en-US/translation.json

@@ -119,7 +119,6 @@
   "k5f91e72c": "Built Plugins",
   "k5fc9ccb6": "Operation too frequently",
   "k609d9f28": "Please enter the server address (example: http://127.0.0.1:11000)",
-  "k61313787": "Login Tailchat",
   "k61a1db2": "Already applied",
   "k62051fcc": "Upload failed",
   "k620a58f8": "Guest Login",
@@ -266,6 +265,7 @@
   "kbef5b92e": "Copy Link",
   "kc14b2ea3": "Back",
   "kc1afdd08": "Don't worry, you can make changes anytime after this",
+  "kc1bfb977": "Login {{serverName}}",
   "kc2d30ab7": "Plugin Name",
   "kc54eb75": "In Alpha mode, some functions that are still in the testing stage will be opened. If there is any problem, welcome to feedback.",
   "kc625cd59": "Summary",

client/shared/i18n/langs/zh-CN/translation.json

@@ -119,7 +119,6 @@
   "k5f91e72c": "内置插件",
   "k5fc9ccb6": "操作过于频繁",
   "k609d9f28": "请输入服务器地址(示例: http://127.0.0.1:11000)",
-  "k61313787": "登录 Tailchat",
   "k61a1db2": "已申请",
   "k62051fcc": "上传失败",
   "k620a58f8": "游客访问",
@@ -266,6 +265,7 @@
   "kbef5b92e": "复制链接",
   "kc14b2ea3": "返回",
   "kc1afdd08": "不要担心, 在此之后你可以随时进行变更",
+  "kc1bfb977": "登录 {{serverName}}",
   "kc2d30ab7": "插件名",
   "kc54eb75": "在 Alpha 模式下会有一些尚处于测试阶段的功能将会被开放，如果出现问题欢迎反馈",
   "kc625cd59": "概述",

client/shared/index.tsx

@@ -213,6 +213,9 @@ export { setupRedux } from './redux/setup';
 export { reduxStore, ReduxProvider } from './redux/store';
 export type { AppStore, AppState, AppDispatch } from './redux/store';
 
+// store
+export { useGlobalConfigStore } from './store/globalConfig';
+
 // utils
 export { joinArray } from './utils/array-helper';
 export { NAME_REGEXP, SYSTEM_USERID } from './utils/consts';

client/shared/model/config.ts

@@ -1,7 +1,6 @@
 import { request } from '../api/request';
-import { globalActions } from '../redux/slices';
+import { useGlobalConfigStore } from '../store/globalConfig';
-import { defaultGlobalConfig } from '../redux/slices/global';
+import { defaultGlobalConfig } from '../utils/consts';
-import { reduxStore } from '../redux/store';
 
 /**
  * 后端的全局设置
@@ -16,21 +15,24 @@ export interface GlobalConfig {
    * 是否在注册时校验邮箱
    */
   emailVerification: boolean;
+
+  /**
+   * 服务器名
+   */
+  serverName?: string;
 }
 
 export function getGlobalConfig(): GlobalConfig {
-  return reduxStore.getState().global.config;
+  return useGlobalConfigStore.getState();
 }
 
 export async function fetchGlobalClientConfig(): Promise<GlobalConfig> {
   const { data: config } = await request.get('/api/config/client');
 
-  reduxStore.dispatch(
+  useGlobalConfigStore.setState({
-    globalActions.setGlobalConfig({
     ...defaultGlobalConfig,
     ...config,
-    })
+  });
-  );
 
   return config;
 }

client/shared/package.json

@@ -26,7 +26,8 @@
     "socket.io-client": "^4.1.2",
     "socket.io-msgpack-parser": "^3.0.2",
     "url-regex": "^5.0.0",
-    "yup": "^0.32.9"
+    "yup": "^0.32.9",
+    "zustand": "^4.3.6"
   },
   "devDependencies": {
     "@types/crc": "^3.4.0",

client/shared/redux/slices/global.ts

@@ -1,10 +1,4 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import type { GlobalConfig } from '../../model/config';
-
-export const defaultGlobalConfig: GlobalConfig = {
-  uploadFileLimit: 1 * 1024 * 1024,
-  emailVerification: false,
-};
 
 export interface GlobalState {
   /**
@@ -12,13 +6,11 @@ export interface GlobalState {
    */
   networkStatus: 'initial' | 'connected' | 'reconnecting' | 'disconnected';
   reconnectNum: number;
-  config: GlobalConfig;
 }
 
 const initialState: GlobalState = {
   networkStatus: 'initial',
   reconnectNum: 0,
-  config: defaultGlobalConfig,
 };
 
 const globalSlice = createSlice({
@@ -34,9 +26,6 @@ const globalSlice = createSlice({
     incReconnectNum(state) {
       state.reconnectNum += 1;
     },
-    setGlobalConfig(state, action: PayloadAction<GlobalConfig>) {
-      state.config = action.payload;
-    },
   },
 });
 

client/shared/store/globalConfig.ts

@@ -0,0 +1,17 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { GlobalConfig } from '../model/config';
+import { defaultGlobalConfig } from '../utils/consts';
+
+type GlobalConfigState = GlobalConfig;
+
+export const useGlobalConfigStore = create<GlobalConfigState>()(
+  persist(
+    (set) => ({
+      ...defaultGlobalConfig,
+    }),
+    {
+      name: 'globalConfigStore',
+    }
+  )
+);

client/shared/utils/consts.ts

@@ -1,3 +1,5 @@
+import type { GlobalConfig } from '../model/config';
+
 /**
  * 昵称合法性匹配
  * 最大八个汉字内容或者16字英文
@@ -15,3 +17,8 @@ export const LANGUAGE_KEY = 'i18n:language';
  * 系统用户id
  */
 export const SYSTEM_USERID = '000000000000000000000000';
+
+export const defaultGlobalConfig: GlobalConfig = {
+  uploadFileLimit: 1 * 1024 * 1024,
+  emailVerification: false,
+};

client/web/src/routes/Entry/LoginView.tsx

@@ -1,6 +1,13 @@
 import { Icon } from 'tailchat-design';
 import { Divider } from 'antd';
-import { isValidStr, loginWithEmail, t, useAsyncFn } from 'tailchat-shared';
+import {
+  isValidStr,
+  loginWithEmail,
+  t,
+  useAppSelector,
+  useAsyncFn,
+  useGlobalConfigStore,
+} from 'tailchat-shared';
 import React, { useEffect, useState } from 'react';
 import { Spinner } from '../../components/Spinner';
 import { string } from 'yup';
@@ -43,6 +50,7 @@ export const LoginView: React.FC = React.memo(() => {
   const navigate = useNavigate();
   const navRedirect = useSearchParam('redirect');
   const { pathname } = useLocation();
+  const serverName = useGlobalConfigStore((state) => state.serverName);
 
   useEffect(() => {
     tryAutoLogin()
@@ -80,7 +88,11 @@ export const LoginView: React.FC = React.memo(() => {
 
   return (
     <div className="w-96 text-white relative">
-      <div className="mb-4 text-2xl">{t('登录 Tailchat')}</div>
+      <div className="mb-4 text-2xl">
+        {t('登录 {{serverName}}', {
+          serverName: serverName || 'Tailchat',
+        })}
+      </div>
 
       <div>
         <div className="mb-4">

pnpm-lock.yaml

@@ -350,6 +350,7 @@ importers:
       socket.io-msgpack-parser: ^3.0.2
       url-regex: ^5.0.0
       yup: ^0.32.9
+      zustand: ^4.3.6
     dependencies:
       '@reduxjs/toolkit': 1.8.5_kkwg4cbsojnjnupd3btipussee
       '@tanstack/react-query': 4.3.4_react@18.2.0
@@ -371,6 +372,7 @@ importers:
       socket.io-msgpack-parser: 3.0.2
       url-regex: 5.0.0
       yup: 0.32.11
+      zustand: 4.3.6_react@18.2.0
     devDependencies:
       '@types/crc': 3.8.0
       '@types/lodash': 4.14.184
@@ -40456,6 +40458,22 @@ packages:
       use-sync-external-store: 1.2.0_react@18.2.0
     dev: false
 
+  /zustand/4.3.6_react@18.2.0:
+    resolution: {integrity: sha512-6J5zDxjxLE+yukC2XZWf/IyWVKnXT9b9HUv09VJ/bwGCpKNcaTqp7Ws28Xr8jnbvnZcdRaidztAPsXFBIqufiw==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      immer: '>=9.0'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      immer:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      use-sync-external-store: 1.2.0_react@18.2.0
+    dev: false
+
   /zwitch/1.0.5:
     resolution: {integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==}