feat: add web ui version switch

.github/workflows/linux-release.yml

@@ -5,8 +5,8 @@ permissions:
 on:
   push:
     tags:
-      - '*'
-      - '!*-alpha*'
+      - "*"
+      - "!*-alpha*"
 jobs:
   release:
     runs-on: ubuntu-latest
@@ -26,10 +26,19 @@ jobs:
           npm install
           REACT_APP_VERSION=$(git describe --tags) npm run build
           cd ..
+      - name: Build New Frontend
+        env:
+          CI: ""
+        run: |
+          cd web_v2
+          npm install
+          REACT_APP_VERSION=$(git describe --tags) npm run build
+          mv build ../web/build/_v2
+          cd ..
       - name: Set up Go
         uses: actions/setup-go@v3
         with:
-          go-version: '>=1.18.0'
+          go-version: ">=1.18.0"
       - name: Build Backend (amd64)
         run: |
           go mod download
@@ -51,4 +60,4 @@ jobs:
           draft: true
           generate_release_notes: true
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/macos-release.yml

@@ -5,8 +5,8 @@ permissions:
 on:
   push:
     tags:
-      - '*'
-      - '!*-alpha*'
+      - "*"
+      - "!*-alpha*"
 jobs:
   release:
     runs-on: macos-latest
@@ -26,10 +26,19 @@ jobs:
           npm install
           REACT_APP_VERSION=$(git describe --tags) npm run build
           cd ..
+      - name: Build New Frontend
+        env:
+          CI: ""
+        run: |
+          cd web_v2
+          npm install
+          REACT_APP_VERSION=$(git describe --tags) npm run build
+          mv build ../web/build/_v2
+          cd ..
       - name: Set up Go
         uses: actions/setup-go@v3
         with:
-          go-version: '>=1.18.0'
+          go-version: ">=1.18.0"
       - name: Build Backend
         run: |
           go mod download

.github/workflows/windows-release.yml

@@ -5,8 +5,8 @@ permissions:
 on:
   push:
     tags:
-      - '*'
-      - '!*-alpha*'
+      - "*"
+      - "!*-alpha*"
 jobs:
   release:
     runs-on: windows-latest
@@ -29,10 +29,19 @@ jobs:
           npm install
           REACT_APP_VERSION=$(git describe --tags) npm run build
           cd ..
+      - name: Build New Frontend
+        env:
+          CI: ""
+        run: |
+          cd web_v2
+          npm install
+          REACT_APP_VERSION=$(git describe --tags) npm run build
+          mv build ../web/build/_v2
+          cd ..
       - name: Set up Go
         uses: actions/setup-go@v3
         with:
-          go-version: '>=1.18.0'
+          go-version: ">=1.18.0"
       - name: Build Backend
         run: |
           go mod download
@@ -45,4 +54,4 @@ jobs:
           draft: true
           generate_release_notes: true
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Dockerfile

@@ -7,6 +7,13 @@ COPY ./web .
 COPY ./VERSION .
 RUN DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat VERSION) npm run build
 
+WORKDIR /build_v2
+COPY web_v2/package.json .
+RUN npm install
+COPY ./web_v2 .
+COPY ./VERSION .
+RUN DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat VERSION) npm run build
+
 FROM golang AS builder2
 
 ENV GO111MODULE=on \
@@ -18,6 +25,7 @@ ADD go.mod go.sum ./
 RUN go mod download
 COPY . .
 COPY --from=builder /build/build ./web/build
+COPY --from=builder /build_v2/build ./web/build/_v2
 RUN go build -ldflags "-s -w -X 'one-api/common.Version=$(cat VERSION)' -extldflags '-static'" -o one-api
 
 FROM alpine
@@ -30,4 +38,4 @@ RUN apk update \
 COPY --from=builder2 /build/one-api /
 EXPOSE 3000
 WORKDIR /data
-ENTRYPOINT ["/one-api"]
+ENTRYPOINT ["/one-api"]

main.go

@@ -3,24 +3,22 @@ package main
 import (
 	"embed"
 	"fmt"
-	"github.com/gin-contrib/sessions"
-	"github.com/gin-contrib/sessions/cookie"
-	"github.com/gin-gonic/gin"
 	"one-api/common"
 	"one-api/controller"
 	"one-api/middleware"
 	"one-api/model"
 	"one-api/router"
 	"os"
 	"strconv"
+
+	"github.com/gin-contrib/sessions"
+	"github.com/gin-contrib/sessions/cookie"
+	"github.com/gin-gonic/gin"
 )
 
-//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")
@@ -95,7 +93,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

@@ -3,14 +3,15 @@ package router
 import (
 	"embed"
 	"fmt"
-	"github.com/gin-gonic/gin"
 	"net/http"
 	"one-api/common"
 	"os"
 	"strings"
+
+	"github.com/gin-gonic/gin"
 )
 
-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 +21,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,17 +2,18 @@ package router
 
 import (
 	"embed"
-	"github.com/gin-contrib/gzip"
-	"github.com/gin-contrib/static"
-	"github.com/gin-gonic/gin"
 	"net/http"
 	"one-api/common"
 	"one-api/controller"
 	"one-api/middleware"
 	"strings"
+
+	"github.com/gin-contrib/gzip"
+	"github.com/gin-contrib/static"
+	"github.com/gin-gonic/gin"
 )
 
-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())
@@ -23,6 +24,20 @@ func SetWebRouter(router *gin.Engine, buildFS embed.FS, indexPage []byte) {
 			return
 		}
 		c.Header("Cache-Control", "no-cache")
+
+		var filePath string
+		if strings.HasPrefix(c.Request.RequestURI, "/_v2") {
+			filePath = "web/build/_v2/index.html"
+		} else {
+			filePath = "web/build/index.html"
+		}
+
+		indexPage, err := buildFS.ReadFile(filePath)
+		if err != nil {
+			controller.RelayNotFound(c)
+			return
+		}
+
 		c.Data(http.StatusOK, "text/html; charset=utf-8", indexPage)
 	})
 }

web/src/App.js

@@ -69,7 +69,26 @@ function App() {
     }
   };
 
+  const checkVersion = () => {
+    const ui_version = localStorage.getItem('ui_version');
+    if (ui_version === 'v2') {
+      // 检测特殊的路由，如果是/oauth/github || /register || /user/reset 需要携带参数
+      let pathname = window.location.pathname;
+      if (
+        pathname === '/oauth/github' ||
+        pathname === '/register' ||
+        pathname === '/user/reset'
+      ) {
+        window.location.href = '/_v2' + pathname + window.location.search;
+        return;
+      }
+
+      window.location.href = '/_v2';
+    }
+  };
+
   useEffect(() => {
+    checkVersion();
     loadUser();
     loadStatus().then();
     let systemName = getSystemName();
@@ -252,11 +271,11 @@ function App() {
       <Route
         path='/topup'
         element={
-        <PrivateRoute>
-          <Suspense fallback={<Loading></Loading>}>
-            <TopUp />
-          </Suspense>
-        </PrivateRoute>
+          <PrivateRoute>
+            <Suspense fallback={<Loading></Loading>}>
+              <TopUp />
+            </Suspense>
+          </PrivateRoute>
         }
       />
       <Route
@@ -283,9 +302,7 @@ function App() {
           </Suspense>
         }
       />
-      <Route path='*' element={
-          <NotFound />
-      } />
+      <Route path='*' element={<NotFound />} />
     </Routes>
   );
 }

web/src/components/Header.js

@@ -213,6 +213,14 @@ const Header = () => {
                 className='btn btn-link'
               />
             )}
+            <Menu.Item
+                name='体验新版UI'
+                onClick={() => {
+                  localStorage.setItem('ui_version', 'v2');
+                  window.location.href = '/_v2';
+                }}
+                className='btn btn-link'
+            />
           </Menu.Menu>
         </Container>
       </Menu>

web_v2/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "proxy": "http://127.0.0.1:3000",
   "private": true,
-  "homepage": "",
+  "homepage": "/_v2",
   "dependencies": {
     "@emotion/cache": "^11.9.3",
     "@emotion/react": "^11.9.3",

web_v2/src/config.js

@@ -1,7 +1,7 @@
 const config = {
   // basename: only at build time to set, and Don't add '/' at end off BASENAME for breadcrumbs, also Don't put only '/' use blank('') instead,
   // like '/berry-material-react/react/default'
-  basename: '/',
+  basename: '/_v2',
   defaultPath: '/panel/dashboard',
   fontFamily: `'Roboto', sans-serif, Helvetica, Arial, sans-serif`,
   borderRadius: 12,

web_v2/src/layout/MainLayout/LogoSection/index.js

@@ -5,7 +5,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { ButtonBase } from '@mui/material';
 
 // project imports
-import config from 'config';
 import Logo from 'ui-component/Logo';
 import { MENU_OPEN } from 'store/actions';
 
@@ -15,7 +14,7 @@ const LogoSection = () => {
   const defaultId = useSelector((state) => state.customization.defaultId);
   const dispatch = useDispatch();
   return (
-    <ButtonBase disableRipple onClick={() => dispatch({ type: MENU_OPEN, id: defaultId })} component={Link} to={config.basename}>
+    <ButtonBase disableRipple onClick={() => dispatch({ type: MENU_OPEN, id: defaultId })} component={Link} to="/">
       <Logo />
     </ButtonBase>
   );

web_v2/src/layout/MinimalLayout/Header/index.js

@@ -38,6 +38,17 @@ const Header = () => {
         <Button component={Link} variant="text" to="/about" color={pathname === '/about' ? 'primary' : 'inherit'}>
           关于
         </Button>
+
+        <Button
+          variant="text"
+          color="inherit"
+          onClick={() => {
+            localStorage.setItem('ui_version', 'v1');
+            window.location.href = '/';
+          }}
+        >
+          返回旧版UI
+        </Button>
         {account.user ? (
           <Button component={Link} variant="contained" to="/panel" color="primary">
             控制台

web_v2/src/utils/api.js

@@ -2,6 +2,7 @@ import { showError } from './common';
 import axios from 'axios';
 import { store } from 'store/index';
 import { LOGIN } from 'store/actions';
+import config from 'config';
 
 export const API = axios.create({
   baseURL: process.env.REACT_APP_SERVER ? process.env.REACT_APP_SERVER : '/'
@@ -13,7 +14,7 @@ API.interceptors.response.use(
     if (error.response?.status === 401) {
       localStorage.removeItem('user');
       store.dispatch({ type: LOGIN, payload: null });
-      window.location.href = '/login';
+      window.location.href = config.basename + '/login';
     }
 
     if (error.response?.data?.message) {