feat: add global announcement

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

@@ -266,6 +266,7 @@
   "kaefc1e64": "Password reset successful, now back to login page",
   "kaf403ef0": "Light Mode",
   "kaf51d834": "Reset to default",
+  "kb01f8383": "Learn More",
   "kb030fbd1": "Member List",
   "kb0584341": "Usage Count",
   "kb07659b0": "Repeat password",
@@ -357,7 +358,6 @@
   "ke3d797fd": "Drop files to send into current converse",
   "ke59ffe49": "Muted, there are {{remain}} left",
   "ke6da074f": "The message was withdrawn successfully",
-  "kea977d95": "The following users are offline",
   "kec46a57f": "Add members",
   "kecb51e2c": "Old password",
   "kecbb0e45": "System",

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

@@ -266,6 +266,7 @@
   "kaefc1e64": "密码重置成功，现在回到登录页",
   "kaf403ef0": "亮色模式",
   "kaf51d834": "重置为默认值",
+  "kb01f8383": "了解更多",
   "kb030fbd1": "成员列表",
   "kb0584341": "使用次数",
   "kb07659b0": "重复密码",
@@ -357,7 +358,6 @@
   "ke3d797fd": "拖放文件以发送到当前会话",
   "ke59ffe49": "禁言中, 还剩 {{remain}}",
   "ke6da074f": "消息撤回成功",
-  "kea977d95": "以下用户已离线",
   "kec46a57f": "添加成员",
   "kecb51e2c": "旧密码",
   "kecbb0e45": "系统",

client/shared/model/config.ts

@@ -50,6 +50,14 @@ export interface GlobalConfig {
    * 是否禁用添加好友功能
    */
   disableAddFriend?: boolean;
+
+  announcement?:
+    | false
+    | {
+        id: string;
+        text: string;
+        link?: string;
+      };
 }
 
 export function getGlobalConfig(): GlobalConfig {

client/shared/utils/consts.ts

@@ -27,4 +27,5 @@ export const defaultGlobalConfig: GlobalConfig = {
   disableCreateGroup: false,
   disablePluginStore: false,
   disableAddFriend: false,
+  announcement: false,
 };

client/web/src/components/GlobalAnnouncementBar.tsx

@@ -0,0 +1,43 @@
+import { useLocalStorageState } from '@/hooks/useLocalStorage';
+import { Button } from 'antd';
+import React from 'react';
+import { Icon } from 'tailchat-design';
+import { t, useGlobalConfigStore } from 'tailchat-shared';
+
+export const GlobalAnnouncementBar: React.FC = React.memo(() => {
+  const announcementInfo = useGlobalConfigStore((state) => state.announcement);
+  const [ackId, setAckId] = useLocalStorageState('ackGlobalAnnouncement');
+
+  if (!announcementInfo) {
+    return null;
+  }
+
+  if (ackId === announcementInfo.id) {
+    // 如果该公告已读，也不展示
+    return null;
+  }
+
+  return (
+    <div className="text-center bg-indigo-400 text-white relative">
+      {announcementInfo.text}
+
+      {announcementInfo.link && (
+        <Button
+          type="link"
+          className="text-indigo-700 font-bold ml-2"
+          size="small"
+          onClick={() => window.open(announcementInfo.link)}
+        >
+          {t('了解更多')}
+        </Button>
+      )}
+
+      <Icon
+        className="absolute top-0.5 right-1 opacity-80 hover:opacity-100 cursor-pointer text-xl"
+        icon="mdi:close-circle-outline"
+        onClick={() => setAckId(announcementInfo.id)}
+      />
+    </div>
+  );
+});
+GlobalAnnouncementBar.displayName = 'GlobalAnnouncementBar';

client/web/src/routes/Main/index.tsx

@@ -1,3 +1,4 @@
+import { GlobalAnnouncementBar } from '@/components/GlobalAnnouncementBar';
 import { GlobalTemporaryTip } from '@/components/GlobalTemporaryTip';
 import { useRecordMeasure } from '@/utils/measure-helper';
 import React from 'react';
@@ -17,6 +18,8 @@ const MainRoute: React.FC = React.memo(() => {
       <div className="flex flex-col h-full">
         <GlobalTemporaryTip />
 
+        <GlobalAnnouncementBar />
+
         <div className="flex flex-1 overflow-hidden">
           <Navbar />
 

server/admin/src/client/i18n.ts

@@ -65,6 +65,13 @@ export const i18n: TushanContextProps['i18n'] = {
             allowCreateGroup: 'Allow Create Group',
             serverName: 'Server Name',
             serverEntryImage: 'Server Entry Page Image',
+            configPanel: 'Config',
+            announcementPanel: 'Announcement',
+            announcementEnable: 'Is Enable Announcement',
+            announcementText: 'Announcement Text',
+            announcementLink: 'Announcement Link',
+            announcementLinkTip:
+              'This content is optional, and it is the address to announce more content',
           },
           cache: {
             cleanTitle: 'Are you sure you want to clear the cache?',
@@ -235,6 +242,12 @@ export const i18n: TushanContextProps['i18n'] = {
             allowCreateGroup: '允许创建群组',
             serverName: '服务器名',
             serverEntryImage: '服务器登录图',
+            configPanel: '配置',
+            announcementPanel: '公告',
+            announcementEnable: '是否启用公告',
+            announcementText: '公告文本',
+            announcementLink: '公告链接',
+            announcementLinkTip: '该内容可选，为公告更多内容的地址',
           },
           cache: {
             cleanTitle: '确定要清理缓存么？',

server/admin/src/client/routes/system/index.tsx

@@ -11,7 +11,10 @@ import {
   Upload,
   useTranslation,
   Card,
+  Tabs,
+  Switch,
 } from 'tushan';
+import _get from 'lodash/get';
 import { IconCheck, IconClose, IconDelete } from 'tushan/icon';
 import { TailchatImage } from '../../components/TailchatImage';
 
@@ -45,7 +48,7 @@ export const SystemConfig: React.FC = React.memo(() => {
           value: val,
         });
         fetchConfig();
-        Message.success('Success');
+        Message.success(t('tushan.common.success'));
       } catch (err) {
         console.log(err);
         Message.error(String(err));
@@ -88,6 +91,31 @@ export const SystemConfig: React.FC = React.memo(() => {
     }
   );
 
+  const [{}, handleChangeAnnouncement] = useAsyncRequest(
+    async (values: { enable: boolean; link: string; text: string }) => {
+      console.log(values);
+      const { enable = false, link = '', text = '' } = values;
+
+      if (enable) {
+        await request.patch('/config/client', {
+          key: 'announcement',
+          value: {
+            id: Date.now(),
+            text,
+            link,
+          },
+        });
+      } else {
+        await request.patch('/config/client', {
+          key: 'announcement',
+          value: false,
+        });
+      }
+
+      Message.success(t('tushan.common.success'));
+    }
+  );
+
   if (loading) {
     return <Spin />;
   }
@@ -99,6 +127,8 @@ export const SystemConfig: React.FC = React.memo(() => {
 
   return (
     <Card>
+      <Tabs>
+        <Tabs.TabPane key={0} title={t('custom.config.configPanel')}>
           <Form>
             <Form.Item label={t('custom.config.uploadFileLimit')}>
               {config.uploadFileLimit}
@@ -163,7 +193,52 @@ export const SystemConfig: React.FC = React.memo(() => {
               </div>
             </Form.Item>
           </Form>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane key={1} title={t('custom.config.announcementPanel')}>
+          <Form
+            initialValues={
+              config['announcement']
+                ? {
+                    enable: true,
+                    text: _get(config, ['announcement', 'text'], ''),
+                    link: _get(config, ['announcement', 'link'], ''),
+                  }
+                : { enable: false, text: '', link: '' }
+            }
+            onSubmit={handleChangeAnnouncement}
+          >
+            <Form.Item
+              label={t('custom.config.announcementEnable')}
+              field="enable"
+            >
+              <SwitchFormInput />
+            </Form.Item>
+            <Form.Item label={t('custom.config.announcementText')} field="text">
+              <Input maxLength={120} />
+            </Form.Item>
+            <Form.Item
+              label={t('custom.config.announcementLink')}
+              field="link"
+              tooltip={t('custom.config.announcementLinkTip')}
+            >
+              <Input placeholder="https://tailchat.msgbyte.com/" />
+            </Form.Item>
+            <Form.Item label={' '}>
+              <Button htmlType="submit">{t('tushan.common.submit')}</Button>
+            </Form.Item>
+          </Form>
+        </Tabs.TabPane>
+      </Tabs>
     </Card>
   );
 });
 SystemConfig.displayName = 'SystemConfig';
+
+export const SwitchFormInput: React.FC<{
+  value?: boolean;
+  onChange?: (val: boolean) => void;
+}> = React.memo((props) => {
+  return <Switch checked={props.value} onChange={props.onChange} />;
+});
+SwitchFormInput.displayName = 'SwitchFormInput';