feat: able to add more UI theme (#860)

.github/workflows/linux-release.yml

@@ -18,14 +18,14 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-      - name: Build Frontend
+      - name: Build Frontend (theme default)
         env:
           CI: ""
         run: |
-          cd web
+          cd web/default
           npm install
           REACT_APP_VERSION=$(git describe --tags) npm run build
-          cd ..
+          cd ../..
       - name: Set up Go
         uses: actions/setup-go@v3
         with:

.github/workflows/macos-release.yml

@@ -18,14 +18,14 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-      - name: Build Frontend
+      - name: Build Frontend (theme default)
         env:
           CI: ""
         run: |
-          cd web
+          cd web/default
           npm install
           REACT_APP_VERSION=$(git describe --tags) npm run build
-          cd ..
+          cd ../..
       - name: Set up Go
         uses: actions/setup-go@v3
         with:

.github/workflows/windows-release.yml

@@ -21,14 +21,14 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: 16
-      - name: Build Frontend
+      - name: Build Frontend (theme default)
         env:
           CI: ""
         run: |
-          cd web
+          cd web/default
           npm install
           REACT_APP_VERSION=$(git describe --tags) npm run build
-          cd ..
+          cd ../..
       - name: Set up Go
         uses: actions/setup-go@v3
         with:

Dockerfile

@@ -1,11 +1,18 @@
 FROM node:16 as builder
 
 WORKDIR /build
-COPY web/package.json .
-RUN npm install
 COPY ./web .
 COPY ./VERSION .
-RUN DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat VERSION) npm run build
+RUN themes=$(cat THEMES) \
+    && IFS=$'\n' \
+        && for theme in $themes; do \
+            theme_path="web/$theme" \
+            && echo "Building theme: $theme" \
+            && cd $theme_path \
+            && npm install \
+            && DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat VERSION) npm run build \
+            && cd /app \
+        done
 
 FROM golang AS builder2
 

common/constants.go

@@ -100,6 +100,8 @@ var RelayTimeout = GetOrDefault("RELAY_TIMEOUT", 0) // unit is second
 
 var GeminiSafetySetting = GetOrDefaultString("GEMINI_SAFETY_SETTING", "BLOCK_NONE")
 
+var Theme = GetOrDefaultString("THEME", "default")
+
 const (
 	RequestIdKey = "X-Oneapi-Request-Id"
 )

main.go

@@ -15,15 +15,12 @@ import (
 	"strconv"
 )
 
-//go:embed web/build
+//go:embed web/build/*
 var buildFS embed.FS
 
-//go:embed web/build/index.html
-var indexPage []byte
-
 func main() {
 	common.SetupLogger()
-	common.SysLog("One API " + common.Version + " started")
+	common.SysLog(fmt.Sprintf("One API %s started with theme %s", common.Version, common.Theme))
 	if os.Getenv("GIN_MODE") != "debug" {
 		gin.SetMode(gin.ReleaseMode)
 	}
@@ -95,7 +92,7 @@ func main() {
 	store := cookie.NewStore([]byte(common.SessionSecret))
 	server.Use(sessions.Sessions("session", store))
 
-	router.SetRouter(server, buildFS, indexPage)
+	router.SetRouter(server, buildFS)
 	var port = os.Getenv("PORT")
 	if port == "" {
 		port = strconv.Itoa(*common.Port)

router/main.go

@@ -10,7 +10,7 @@ import (
 	"strings"
 )
 
-func SetRouter(router *gin.Engine, buildFS embed.FS, indexPage []byte) {
+func SetRouter(router *gin.Engine, buildFS embed.FS) {
 	SetApiRouter(router)
 	SetDashboardRouter(router)
 	SetRelayRouter(router)
@@ -20,7 +20,7 @@ func SetRouter(router *gin.Engine, buildFS embed.FS, indexPage []byte) {
 		common.SysLog("FRONTEND_BASE_URL is ignored on master node")
 	}
 	if frontendBaseUrl == "" {
-		SetWebRouter(router, buildFS, indexPage)
+		SetWebRouter(router, buildFS)
 	} else {
 		frontendBaseUrl = strings.TrimSuffix(frontendBaseUrl, "/")
 		router.NoRoute(func(c *gin.Context) {

router/web-router.go

@@ -2,6 +2,7 @@ package router
 
 import (
 	"embed"
+	"fmt"
 	"github.com/gin-contrib/gzip"
 	"github.com/gin-contrib/static"
 	"github.com/gin-gonic/gin"
@@ -12,17 +13,22 @@ import (
 	"strings"
 )
 
-func SetWebRouter(router *gin.Engine, buildFS embed.FS, indexPage []byte) {
+func SetWebRouter(router *gin.Engine, buildFS embed.FS) {
 	router.Use(gzip.Gzip(gzip.DefaultCompression))
 	router.Use(middleware.GlobalWebRateLimit())
 	router.Use(middleware.Cache())
-	router.Use(static.Serve("/", common.EmbedFolder(buildFS, "web/build")))
+	router.Use(static.Serve("/", common.EmbedFolder(buildFS, fmt.Sprintf("web/build/%s", common.Theme))))
 	router.NoRoute(func(c *gin.Context) {
 		if strings.HasPrefix(c.Request.RequestURI, "/v1") || strings.HasPrefix(c.Request.RequestURI, "/api") {
 			controller.RelayNotFound(c)
 			return
 		}
 		c.Header("Cache-Control", "no-cache")
+		indexPage, err := buildFS.ReadFile(fmt.Sprintf("web/build/%s/index.html", common.Theme))
+		if err != nil {
+			controller.RelayNotFound(c)
+			return
+		}
 		c.Data(http.StatusOK, "text/html; charset=utf-8", indexPage)
 	})
 }

web/README.md

@@ -1,21 +1,11 @@
-# React Template
+# One API 的前端界面
+> 每个文件夹代表一个主题，欢迎提交你的主题
 
-## Basic Usages
+## 提交新的主题
+1. 在 `web` 文件夹下新建一个文件夹，文件夹名为主题名。
+2. 把你的主题文件放到这个文件夹下。
+3. 修改 `package.json` 文件，把 `build` 命令改为：`"build": "react-scripts build && mv build ../build/default"`，其中 `default` 为你的主题名。
 
-```shell
+## 主题列表
-# Runs the app in the development mode
+### default
-npm start
+默认主题
-
-# Builds the app for production to the `build` folder
-npm run build
-```
-
-If you want to change the default server, please set `REACT_APP_SERVER` environment variables before build,
-for example: `REACT_APP_SERVER=http://your.domain.com`.
-
-Before you start editing, make sure your `Actions on Save` options have `Optimize imports` & `Run Prettier` enabled.
-
-## Reference
-
-1. https://github.com/OIerDb-ng/OIerDb
-2. https://github.com/cornflourblue/react-hooks-redux-registration-login-example

web/THEMES

@@ -0,0 +1 @@
+default

web/default/README.md

@@ -0,0 +1,21 @@
+# React Template
+
+## Basic Usages
+
+```shell
+# Runs the app in the development mode
+npm start
+
+# Builds the app for production to the `build` folder
+npm run build
+```
+
+If you want to change the default server, please set `REACT_APP_SERVER` environment variables before build,
+for example: `REACT_APP_SERVER=http://your.domain.com`.
+
+Before you start editing, make sure your `Actions on Save` options have `Optimize imports` & `Run Prettier` enabled.
+
+## Reference
+
+1. https://github.com/OIerDb-ng/OIerDb
+2. https://github.com/cornflourblue/react-hooks-redux-registration-login-example

web/default/package.json

@@ -18,7 +18,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "react-scripts build && mv build ../build/default",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },