From eb163d9c94e7a534b78bfe82c143f3caa46e3502 Mon Sep 17 00:00:00 2001
From: "1808837298@qq.com" <1808837298@qq.com>
Date: Sun, 2 Mar 2025 00:46:54 +0800
Subject: [PATCH] feat: Add self-use mode and demo site mode indicators to
 HeaderBar

---
 controller/misc.go              |  1 +
 web/src/components/HeaderBar.js | 56 ++++++++++++++++++++++++++++++---
 2 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/controller/misc.go b/controller/misc.go
index 1ea0c133..fe6b986f 100644
--- a/controller/misc.go
+++ b/controller/misc.go
@@ -67,6 +67,7 @@ func GetStatus(c *gin.Context) {
 			"mj_notify_enabled":        setting.MjNotifyEnabled,
 			"chats":                    setting.Chats,
 			"demo_site_enabled":        setting.DemoSiteEnabled,
+			"self_use_mode_enabled":    setting.SelfUseModeEnabled,
 		},
 	})
 	return
diff --git a/web/src/components/HeaderBar.js b/web/src/components/HeaderBar.js
index c9105e71..68169ed2 100644
--- a/web/src/components/HeaderBar.js
+++ b/web/src/components/HeaderBar.js
@@ -21,15 +21,17 @@ import {
   IconUser,
   IconLanguage
 } from '@douyinfe/semi-icons';
-import { Avatar, Button, Dropdown, Layout, Nav, Switch } from '@douyinfe/semi-ui';
+import { Avatar, Button, Dropdown, Layout, Nav, Switch, Tag } from '@douyinfe/semi-ui';
 import { stringToColor } from '../helpers/render';
 import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 import { StyleContext } from '../context/Style/index.js';
+import { StatusContext } from '../context/Status/index.js';
 
 const HeaderBar = () => {
   const { t, i18n } = useTranslation();
   const [userState, userDispatch] = useContext(UserContext);
   const [styleState, styleDispatch] = useContext(StyleContext);
+  const [statusState, statusDispatch] = useContext(StatusContext);
   let navigate = useNavigate();
   const [currentLang, setCurrentLang] = useState(i18n.language);
 
@@ -40,6 +42,10 @@ const HeaderBar = () => {
   const isNewYear =
     (currentDate.getMonth() === 0 && currentDate.getDate() === 1);
 
+  // Check if self-use mode is enabled
+  const isSelfUseMode = statusState?.status?.self_use_mode_enabled || false;
+  const isDemoSiteMode = statusState?.status?.demo_site_enabled || false;
+
   let buttons = [
     {
       text: t('首页'),
@@ -166,7 +172,7 @@ const HeaderBar = () => {
             onSelect={(key) => {}}
             header={styleState.isMobile?{
               logo: (
-                <>
+                <div style={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
                   {
                     !styleState.showSider ?
                       <Button icon={<IconMenu />} theme="light" aria-label={t('展开侧边栏')} onClick={
@@ -176,13 +182,52 @@ const HeaderBar = () => {
                         () => styleDispatch({ type: 'SET_SIDER', payload: false })
                       } />
                   }
-                </>
+                  {(isSelfUseMode || isDemoSiteMode) && (
+                    <Tag 
+                      color={isSelfUseMode ? 'purple' : 'blue'}
+                      style={{ 
+                        position: 'absolute',
+                        top: '-8px',
+                        right: '-15px',
+                        fontSize: '0.7rem',
+                        padding: '0 4px',
+                        height: 'auto',
+                        lineHeight: '1.2',
+                        zIndex: 1,
+                        pointerEvents: 'none'
+                      }}
+                    >
+                      {isSelfUseMode ? t('自用模式') : t('演示站点')}
+                    </Tag>
+                  )}
+                </div>
               ),
             }:{
               logo: (
                 <img src={logo} alt='logo' />
               ),
-              text: systemName,
+              text: (
+                <div style={{ position: 'relative', display: 'inline-block' }}>
+                  {systemName}
+                  {(isSelfUseMode || isDemoSiteMode) && (
+                    <Tag 
+                      color={isSelfUseMode ? 'purple' : 'blue'}
+                      style={{ 
+                        position: 'absolute', 
+                        top: '-10px', 
+                        right: '-25px', 
+                        fontSize: '0.7rem',
+                        padding: '0 4px',
+                        whiteSpace: 'nowrap',
+                        zIndex: 1,
+                        boxShadow: '0 0 3px rgba(255, 255, 255, 0.7)'
+                      }}
+                    >
+                      {isSelfUseMode ? t('自用模式') : t('演示站点')}
+                    </Tag>
+                  )}
+                </div>
+              ),
             }}
             items={buttons}
             footer={
@@ -266,7 +311,8 @@ const HeaderBar = () => {
                       icon={<IconUser />}
                     />
                     {
-                      !styleState.isMobile && (
+                      // Hide register option in self-use mode
+                      !styleState.isMobile && !isSelfUseMode && (
                         <Nav.Item
                           itemKey={'register'}
                           text={t('注册')}