feat: add HeaderScript option to render header script

Purpose: To load third-party statistical tracking code.

.gitignore

@@ -4,4 +4,5 @@ upload
 *.exe
 *.db
 build
-*.db-journal
+*.db-journal
+logs

common/constants.go

@@ -14,6 +14,7 @@ var Version = "v0.0.0"            // this hard coding will be replaced automatic
 var SystemName = "One API"
 var ServerAddress = "http://localhost:3000"
 var Footer = ""
+var HeaderScript = ""
 var Logo = ""
 var TopUpLink = ""
 var ChatLink = ""

controller/misc.go

@@ -24,6 +24,7 @@ func GetStatus(c *gin.Context) {
 			"system_name":         common.SystemName,
 			"logo":                common.Logo,
 			"footer_html":         common.Footer,
+			"header_script":       common.HeaderScript,
 			"wechat_qrcode":       common.WeChatAccountQRCodeImageURL,
 			"wechat_login":        common.WeChatAuthEnabled,
 			"server_address":      common.ServerAddress,

i18n/en.json

@@ -246,6 +246,9 @@
   "页脚": "Footer",
   "在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码": "Enter the new footer here, leave blank to use the default footer, supports HTML code.",
   "设置页脚": "Set Footer",
+  "Header自定义脚本": "Custom Header Script",
+  "在此输入新的header自定义脚本，支持 第三方 HTML/script 代码": "Enter the new header custom script here, supports third-party HTML/script code.",
+  "设置Header自定义脚本": "Set Custom Header Script",
   "新版本": "New Version",
   "关闭": "Close",
   "密码已重置并已复制到剪贴板": "Password has been reset and copied to clipboard",

model/option.go

@@ -50,6 +50,7 @@ func InitOptionMap() {
 	common.OptionMap["About"] = ""
 	common.OptionMap["HomePageContent"] = ""
 	common.OptionMap["Footer"] = common.Footer
+	common.OptionMap["HeaderScript"] = common.HeaderScript
 	common.OptionMap["SystemName"] = common.SystemName
 	common.OptionMap["Logo"] = common.Logo
 	common.OptionMap["ServerAddress"] = ""
@@ -179,6 +180,8 @@ func updateOptionMap(key string, value string) (err error) {
 		common.GitHubClientSecret = value
 	case "Footer":
 		common.Footer = value
+	case "HeaderScript":
+		common.HeaderScript = value
 	case "SystemName":
 		common.SystemName = value
 	case "Logo":

web/src/App.js

@@ -24,6 +24,7 @@ import EditRedemption from './pages/Redemption/EditRedemption';
 import TopUp from './pages/TopUp';
 import Log from './pages/Log';
 import Chat from './pages/Chat';
+import useHeaderScript from './hooks/useHeaderScript';
 
 const Home = lazy(() => import('./pages/Home'));
 const About = lazy(() => import('./pages/About'));
@@ -48,6 +49,7 @@ function App() {
       localStorage.setItem('system_name', data.system_name);
       localStorage.setItem('logo', data.logo);
       localStorage.setItem('footer_html', data.footer_html);
+      localStorage.setItem('header_script', data.header_script || '');
       localStorage.setItem('quota_per_unit', data.quota_per_unit);
       localStorage.setItem('display_in_currency', data.display_in_currency);
       if (data.chat_link) {
@@ -85,6 +87,8 @@ function App() {
     }
   }, []);
 
+  useHeaderScript();
+
   return (
     <Routes>
       <Route

web/src/components/OtherSetting.js

@@ -6,6 +6,7 @@ import { marked } from 'marked';
 const OtherSetting = () => {
   let [inputs, setInputs] = useState({
     Footer: '',
+    HeaderScript: '',
     Notice: '',
     About: '',
     SystemName: '',
@@ -66,6 +67,10 @@ const OtherSetting = () => {
     await updateOption('Footer', inputs.Footer);
   };
 
+  const submitHeaderScript = async () => {
+    await updateOption('HeaderScript', inputs.HeaderScript);
+  };
+
   const submitSystemName = async () => {
     await updateOption('SystemName', inputs.SystemName);
   };
@@ -165,6 +170,17 @@ const OtherSetting = () => {
             />
           </Form.Group>
           <Form.Button onClick={submitAbout}>保存关于</Form.Button>
+          <Form.Group widths='equal'>
+            <Form.TextArea
+              label='Header自定义脚本'
+              placeholder='在此输入新的header自定义脚本，支持 第三方 HTML/script 代码'
+              value={inputs.HeaderScript}
+              name='HeaderScript'
+              onChange={handleInputChange}
+              style={{ minHeight: 100 }}
+            />
+          </Form.Group>
+          <Form.Button onClick={submitHeaderScript}>设置Header自定义脚本</Form.Button>
           <Message>移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目。</Message>
           <Form.Group widths='equal'>
             <Form.Input

web/src/components/SystemSetting.js

@@ -17,7 +17,6 @@ const SystemSetting = () => {
     SMTPFrom: '',
     SMTPToken: '',
     ServerAddress: '',
-    Footer: '',
     WeChatAuthEnabled: '',
     WeChatServerAddress: '',
     WeChatServerToken: '',

web/src/helpers/utils.js

@@ -36,6 +36,10 @@ export function getFooterHTML() {
   return localStorage.getItem('footer_html');
 }
 
+export function getHeaderScript() {
+  return localStorage.getItem('header_script');
+}
+
 export async function copy(text) {
   let okay = true;
   try {

web/src/hooks/useHeaderScript.js

@@ -0,0 +1,24 @@
+// 从localStorage中获取 headerScript
+// 用useEffect将headerScript插入到页面中
+
+import { useEffect, useRef } from 'react';
+import { getHeaderScript } from '../helpers';
+
+const useHeaderScript = () => {
+  const oldScript = useRef('');
+  const headerScript = getHeaderScript();
+
+  useEffect(() => {
+    if (!oldScript.current || oldScript.current !== headerScript) {
+      if (headerScript) {
+        // Insert the code into the header
+        document.head.innerHTML += headerScript;
+        oldScript.current = headerScript;
+      }
+    }
+  }, [headerScript]);
+
+  return headerScript;
+};
+
+export default useHeaderScript;