Merge branch 'songquanpeng:main' into base

2024-01-10 13:52:19 +08:00 · 2024-01-10 13:52:19 +08:00 · a1e3c9a710
commit a1e3c9a710
parent 1bcba4c5af d062bc60e4
240 changed files with 14417 additions and 102 deletions
--- a/.github/workflows/linux-release.yml
+++ b/.github/workflows/linux-release.yml
@ -7,6 +7,11 @@ on:
    tags:
      - '*'
      - '!*-alpha*'
+  workflow_dispatch:
+    inputs:
+      name:
+        description: 'reason'
+        required: false
 jobs:
  release:
    runs-on: ubuntu-latest
@ -18,13 +23,13 @@ jobs:
      - uses: actions/setup-node@v3
        with:
          node-version: 16
-      - name: Build Frontend
+      - name: Build Frontend (theme default)
        env:
          CI: ""
        run: |
          cd web
-          npm install
-          REACT_APP_VERSION=$(git describe --tags) npm run build
+          git describe --tags > VERSION
+          REACT_APP_VERSION=$(git describe --tags) chmod u+x ./build.sh && ./build.sh
          cd ..
      - name: Set up Go
        uses: actions/setup-go@v3
--- a/.github/workflows/macos-release.yml
+++ b/.github/workflows/macos-release.yml
@ -7,6 +7,11 @@ on:
    tags:
      - '*'
      - '!*-alpha*'
+  workflow_dispatch:
+    inputs:
+      name:
+        description: 'reason'
+        required: false
 jobs:
  release:
    runs-on: macos-latest
@ -18,13 +23,13 @@ jobs:
      - uses: actions/setup-node@v3
        with:
          node-version: 16
-      - name: Build Frontend
+      - name: Build Frontend (theme default)
        env:
          CI: ""
        run: |
          cd web
-          npm install
-          REACT_APP_VERSION=$(git describe --tags) npm run build
+          git describe --tags > VERSION
+          REACT_APP_VERSION=$(git describe --tags) chmod u+x ./build.sh && ./build.sh
          cd ..
      - name: Set up Go
        uses: actions/setup-go@v3
--- a/.github/workflows/windows-release.yml
+++ b/.github/workflows/windows-release.yml
@ -7,6 +7,11 @@ on:
    tags:
      - '*'
      - '!*-alpha*'
+  workflow_dispatch:
+    inputs:
+      name:
+        description: 'reason'
+        required: false
 jobs:
  release:
    runs-on: windows-latest
@ -21,14 +26,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:
--- a/17
+++ b/17
@ -1,10 +1,15 @@
 FROM node:16 as builder

-WORKDIR /build
-COPY web/package.json .
-RUN npm install
-COPY ./web .
+WORKDIR /web
 COPY ./VERSION .
+COPY ./web .
+
+WORKDIR /web/default
+RUN npm install
+RUN DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat VERSION) npm run build
+
+WORKDIR /web/berry
+RUN npm install
 RUN DISABLE_ESLINT_PLUGIN='true' REACT_APP_VERSION=$(cat VERSION) npm run build

 FROM golang AS builder2
@ -17,7 +22,7 @@ WORKDIR /build
 ADD go.mod go.sum ./
 RUN go mod download
 COPY . .
-COPY --from=builder /build/build ./web/build
+COPY --from=builder /web/build ./web/build
 RUN go build -ldflags "-s -w -X 'one-api/common.Version=$(cat VERSION)' -extldflags '-static'" -o one-api

 FROM alpine
@ -30,4 +35,4 @@ RUN apk update \
 COPY --from=builder2 /build/one-api /
 EXPOSE 3000
 WORKDIR /data
-ENTRYPOINT ["/one-api"]
+ENTRYPOINT ["/one-api"]
--- a/README.en.md
+++ b/README.en.md
@ -3,7 +3,7 @@
 </p>

 <p align="center">
-  <a href="https://github.com/songquanpeng/one-api"><img src="https://raw.githubusercontent.com/songquanpeng/one-api/main/web/public/logo.png" width="150" height="150" alt="one-api logo"></a>
+  <a href="https://github.com/songquanpeng/one-api"><img src="https://raw.githubusercontent.com/songquanpeng/one-api/main/web/default/public/logo.png" width="150" height="150" alt="one-api logo"></a>
 </p>

 <div align="center">
--- a/README.ja.md
+++ b/README.ja.md
@ -3,7 +3,7 @@
 </p>

 <p align="center">
-  <a href="https://github.com/songquanpeng/one-api"><img src="https://raw.githubusercontent.com/songquanpeng/one-api/main/web/public/logo.png" width="150" height="150" alt="one-api logo"></a>
+  <a href="https://github.com/songquanpeng/one-api"><img src="https://raw.githubusercontent.com/songquanpeng/one-api/main/web/default/public/logo.png" width="150" height="150" alt="one-api logo"></a>
 </p>

 <div align="center">
--- a/README.md
+++ b/README.md
@ -4,7 +4,7 @@


 <p align="center">
-  <a href="https://github.com/songquanpeng/one-api"><img src="https://raw.githubusercontent.com/songquanpeng/one-api/main/web/public/logo.png" width="150" height="150" alt="one-api logo"></a>
+  <a href="https://github.com/songquanpeng/one-api"><img src="https://raw.githubusercontent.com/songquanpeng/one-api/main/web/default/public/logo.png" width="150" height="150" alt="one-api logo"></a>
 </p>

 <div align="center">
@ -99,6 +99,7 @@ _✨ 通过标准的 OpenAI API 格式访问所有的大模型，开箱即用
    + 邮箱登录注册（支持注册邮箱白名单）以及通过邮箱进行密码重置。
    + [GitHub 开放授权](https://github.com/settings/applications/new)。
    + 微信公众号授权（需要额外部署 [WeChat Server](https://github.com/songquanpeng/wechat-server)）。
+23. 支持主题切换，设置环境变量 `THEME` 即可，默认为 `default`，欢迎 PR 更多主题，具体参考[此处](./web/README.md)。

 ## 部署
 ### 基于 Docker 进行部署
@ -366,6 +367,8 @@ graph LR
    + `DATA_GYM_CACHE_DIR`：目前该配置作用与 `TIKTOKEN_CACHE_DIR` 一致，但是优先级没有它高。
 15. `RELAY_TIMEOUT`：中继超时设置，单位为秒，默认不设置超时时间。
 16. `SQLITE_BUSY_TIMEOUT`：SQLite 锁等待超时设置，单位为毫秒，默认 `3000`。
+17. `GEMINI_SAFETY_SETTING`：Gemini 的安全设置，默认 `BLOCK_NONE`。
+18. `THEME`：系统的主题设置，默认为 `default`，具体可选值参考[此处](./web/README.md)。

 ### 命令行参数
 1. `--port <port_number>`: 指定服务器监听的端口号，默认为 `3000`。
--- a/common/constants.go
+++ b/common/constants.go
@ -98,6 +98,14 @@ var BatchUpdateInterval = GetOrDefault("BATCH_UPDATE_INTERVAL", 5)

 var RelayTimeout = GetOrDefault("RELAY_TIMEOUT", 0) // unit is second

+var GeminiSafetySetting = GetOrDefaultString("GEMINI_SAFETY_SETTING", "BLOCK_NONE")
+
+var Theme = GetOrDefaultString("THEME", "default")
+var ValidThemes = map[string]bool{
+	"default": true,
+	"berry":   true,
+}
+
 const (
 	RequestIdKey = "X-Oneapi-Request-Id"
 )
--- a/common/image/image.go
+++ b/common/image/image.go
@ -15,6 +15,9 @@ import (
 	_ "golang.org/x/image/webp"
 )

+// Regex to match data URL pattern
+var	dataURLPattern = regexp.MustCompile(`data:image/([^;]+);base64,(.*)`)
+
 func IsImageUrl(url string) (bool, error) {
 	resp, err := http.Head(url)
 	if err != nil {
@ -44,6 +47,15 @@ func GetImageSizeFromUrl(url string) (width int, height int, err error) {
 }

 func GetImageFromUrl(url string) (mimeType string, data string, err error) {
+	// Check if the URL is a data URL
+	matches := dataURLPattern.FindStringSubmatch(url)
+	if len(matches) == 3 {
+		// URL is a data URL
+		mimeType = "image/" + matches[1]
+		data = matches[2]
+		return
+	}
+
 	isImage, err := IsImageUrl(url)
 	if !isImage {
 		return
--- a/common/model-ratio.go
+++ b/common/model-ratio.go
@ -52,6 +52,8 @@ var ModelRatio = map[string]float64{
 	"gpt-3.5-turbo-16k-0613":    1.5,
 	"gpt-3.5-turbo-instruct":    0.75, // $0.0015 / 1K tokens
 	"gpt-3.5-turbo-1106":        0.5,  // $0.001 / 1K tokens
+	"davinci-002":               1,    // $0.002 / 1K tokens
+	"babbage-002":               0.2,  // $0.0004 / 1K tokens
 	"text-ada-001":              0.2,
 	"text-babbage-001":          0.25,
 	"text-curie-001":            1,
--- a/common/utils.go
+++ b/common/utils.go
@ -196,6 +196,13 @@ func GetOrDefault(env string, defaultValue int) int {
 	return num
 }

+func GetOrDefaultString(env string, defaultValue string) string {
+	if env == "" || os.Getenv(env) == "" {
+		return defaultValue
+	}
+	return os.Getenv(env)
+}
+
 func MessageWithRequestId(message string, id string) string {
 	return fmt.Sprintf("%s (request id: %s)", message, id)
 }
--- a/controller/model.go
+++ b/controller/model.go
@ -342,6 +342,24 @@ func init() {
 			Root:       "code-davinci-edit-001",
 			Parent:     nil,
 		},
+		{
+			Id:         "davinci-002",
+			Object:     "model",
+			Created:    1677649963,
+			OwnedBy:    "openai",
+			Permission: permission,
+			Root:       "davinci-002",
+			Parent:     nil,
+		},
+		{
+			Id:         "babbage-002",
+			Object:     "model",
+			Created:    1677649963,
+			OwnedBy:    "openai",
+			Permission: permission,
+			Root:       "babbage-002",
+			Parent:     nil,
+		},
 		{
 			Id:         "claude-instant-1",
 			Object:     "model",
@ -418,7 +436,7 @@ func init() {
 			Id:         "PaLM-2",
 			Object:     "model",
 			Created:    1677649963,
-			OwnedBy:    "google",
+			OwnedBy:    "google palm",
 			Permission: permission,
 			Root:       "PaLM-2",
 			Parent:     nil,
@ -427,7 +445,7 @@ func init() {
 			Id:         "gemini-pro",
 			Object:     "model",
 			Created:    1677649963,
-			OwnedBy:    "google",
+			OwnedBy:    "google gemini",
 			Permission: permission,
 			Root:       "gemini-pro",
 			Parent:     nil,
@ -436,7 +454,7 @@ func init() {
 			Id:         "gemini-pro-vision",
 			Object:     "model",
 			Created:    1677649963,
-			OwnedBy:    "google",
+			OwnedBy:    "google gemini",
 			Permission: permission,
 			Root:       "gemini-pro-vision",
 			Parent:     nil,
--- a/controller/option.go
+++ b/controller/option.go
@ -42,6 +42,14 @@ func UpdateOption(c *gin.Context) {
 		return
 	}
 	switch option.Key {
+	case "Theme":
+		if !common.ValidThemes[option.Value] {
+			c.JSON(http.StatusOK, gin.H{
+				"success": false,
+				"message": "无效的主题",
+			})
+			return
+		}
 	case "GitHubOAuthEnabled":
 		if option.Value == "true" && common.GitHubClientId == "" {
 			c.JSON(http.StatusOK, gin.H{
--- a/controller/relay-gemini.go
+++ b/controller/relay-gemini.go
@ -63,24 +63,24 @@ type GeminiChatGenerationConfig struct {
 func requestOpenAI2Gemini(textRequest GeneralOpenAIRequest) *GeminiChatRequest {
 	geminiRequest := GeminiChatRequest{
 		Contents: make([]GeminiChatContent, 0, len(textRequest.Messages)),
-		//SafetySettings: []GeminiChatSafetySettings{
-		//	{
-		//		Category:  "HARM_CATEGORY_HARASSMENT",
-		//		Threshold: "BLOCK_ONLY_HIGH",
-		//	},
-		//	{
-		//		Category:  "HARM_CATEGORY_HATE_SPEECH",
-		//		Threshold: "BLOCK_ONLY_HIGH",
-		//	},
-		//	{
-		//		Category:  "HARM_CATEGORY_SEXUALLY_EXPLICIT",
-		//		Threshold: "BLOCK_ONLY_HIGH",
-		//	},
-		//	{
-		//		Category:  "HARM_CATEGORY_DANGEROUS_CONTENT",
-		//		Threshold: "BLOCK_ONLY_HIGH",
-		//	},
-		//},
+		SafetySettings: []GeminiChatSafetySettings{
+			{
+				Category:  "HARM_CATEGORY_HARASSMENT",
+				Threshold: common.GeminiSafetySetting,
+			},
+			{
+				Category:  "HARM_CATEGORY_HATE_SPEECH",
+				Threshold: common.GeminiSafetySetting,
+			},
+			{
+				Category:  "HARM_CATEGORY_SEXUALLY_EXPLICIT",
+				Threshold: common.GeminiSafetySetting,
+			},
+			{
+				Category:  "HARM_CATEGORY_DANGEROUS_CONTENT",
+				Threshold: common.GeminiSafetySetting,
+			},
+		},
 		GenerationConfig: GeminiChatGenerationConfig{
 			Temperature:     textRequest.Temperature,
 			TopP:            textRequest.TopP,
--- a/controller/relay-image.go
+++ b/controller/relay-image.go
@ -168,6 +168,9 @@ func relayImageHelper(c *gin.Context, relayMode int) *OpenAIErrorWithStatusCode
 	var textResponse ImageResponse

 	defer func(ctx context.Context) {
+		if resp.StatusCode != http.StatusOK {
+			return
+		}
 		err := model.PostConsumeTokenQuota(tokenId, quota)
 		if err != nil {
 			common.SysError("error consuming token remain quota: " + err.Error())
--- a/controller/user.go
+++ b/controller/user.go
@ -7,6 +7,7 @@ import (
 	"one-api/common"
 	"one-api/model"
 	"strconv"
+	"time"

 	"github.com/gin-contrib/sessions"
 	"github.com/gin-gonic/gin"
@ -248,6 +249,29 @@ func GetUser(c *gin.Context) {
 	return
 }

+func GetUserDashboard(c *gin.Context) {
+	id := c.GetInt("id")
+	now := time.Now()
+	startOfDay := now.Truncate(24*time.Hour).AddDate(0, 0, -6).Unix()
+	endOfDay := now.Truncate(24 * time.Hour).Add(24*time.Hour - time.Second).Unix()
+
+	dashboards, err := model.SearchLogsByDayAndModel(id, int(startOfDay), int(endOfDay))
+	if err != nil {
+		c.JSON(http.StatusOK, gin.H{
+			"success": false,
+			"message": "无法获取统计信息",
+			"data":    nil,
+		})
+		return
+	}
+	c.JSON(http.StatusOK, gin.H{
+		"success": true,
+		"message": "",
+		"data":    dashboards,
+	})
+	return
+}
+
 func GenerateAccessToken(c *gin.Context) {
 	id := c.GetInt("id")
 	user, err := model.GetUserById(id, true)
--- a/i18n/en.json
+++ b/i18n/en.json
@ -86,6 +86,7 @@
  "该令牌已过期": "The token has expired",
  "该令牌额度已用尽": "The token quota has been used up",
  "无效的令牌": "Invalid token",
+  "令牌验证失败": "Token verification failed",
  "id 或 userId 为空！": "id or userId is empty!",
  "quota 不能为负数！": "quota cannot be negative!",
  "令牌额度不足": "Insufficient token quota",
@ -458,6 +459,7 @@
  "使用明细（总消耗额度：{renderQuota(stat.quota)}）": "Usage Details (Total Consumption Quota: {renderQuota(stat.quota)})",
  "用户名称": "User Name",
  "令牌名称": "Token Name",
+  "默认令牌": "Default Token",
  "留空则查询全部用户": "Leave blank to query all users",
  "留空则查询全部令牌": "Leave blank to query all tokens",
  "模型名称": "Model Name",
@ -526,5 +528,250 @@
  "模型版本": "Model version",
  "请输入星火大模型版本，注意是接口地址中的版本号，例如：v2.1": "Please enter the version of the Starfire model, note that it is the version number in the interface address, for example: v2.1",
  "点击查看": "click to view",
-  "请确保已在 Azure 上创建了 gpt-35-turbo 模型，并且 apiVersion 已正确填写！": "Please make sure that the gpt-35-turbo model has been created on Azure, and the apiVersion has been filled in correctly!"
+  "请确保已在 Azure 上创建了 gpt-35-turbo 模型，并且 apiVersion 已正确填写！": "Please make sure that the gpt-35-turbo model has been created on Azure, and the apiVersion has been filled in correctly!",
+  "处理中...": "Processing...",
+  "绑定成功！": "Binding successful!",
+  "登录成功！": "Login successful!",
+  "操作失败，重定向至登录界面中...": "Operation failed, redirecting to login screen...",
+  "出现错误，第 ${count} 次重试中...": "An error occurred, retrying ${count}...",
+  "首页": "Home",
+  "渠道": "Channel",
+  "令牌": "API Keys",
+  "兑换": "Redeem",
+  "充值": "Recharge",
+  "用户": "Users",
+  "日志": "Logs",
+  "设置": "Settings",
+  "关于": "About",
+  "聊天": "Chat",
+  "注销成功!": "Logout successful!",
+  "注销": "Log out",
+  "登录": "Log in",
+  "注册": "Sign up",
+  "加载{name}中...": "Loading {name}...",
+  "未登录或登录已过期，请重新登录！": "Not logged in or login has expired, please log in again!",
+  "请立刻修改默认密码！": "Please change the default password immediately!",
+  "欢迎回来": "Welcome back",
+  "没有账户？": "No account?",
+  "立刻注册": "Sign up now",
+  "用户名": "Username",
+  "密码": "Password",
+  "正在登录……": "Logging in...",
+  "忘记密码": "Forgot password",
+  "其他方式": "Other methods",
+  "微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）": "Scan the QR code with WeChat, follow the official account and enter 'verification code' to get the verification code (valid within three minutes)",
+  "验证码": "Verification code",
+  "全部用户": "All users",
+  "当前用户": "Current user",
+  "全部": "All",
+  "消费": "Consumption",
+  "管理": "Management",
+  "系统": "System",
+  "未知": "Unknown",
+  "其他模型": "Other models",
+  "复制成功": "Copy successful",
+  "使用明细": "Usages",
+  "刷新": "Refresh",
+  "收起面板": "Collapse panel",
+  "展开面板": "Expand panel",
+  "显示查询选项": "Show search options",
+  "隐藏查询选项": "Hide search options",
+  "用户名称": "User name",
+  "可选值": "Optional values",
+  "渠道 ID": "Channel ID",
+  "令牌名称": "Key name",
+  "模型名称": "Model name",
+  "起始时间": "Start time",
+  "结束时间": "End time",
+  "查询": "Query",
+  "隐藏条形图": "Hide bar chart",
+  "显示条形图": "Show bar chart",
+  "折线条形图只展示最新50条数据": "Line and bar charts only show the latest 50 pieces of data",
+  "总消耗": "Total consumption",
+  "总共调用了 {payload[0].value} 次": "A total of {payload[0].value} calls were made",
+  "{model.name}: {model.value} 次": "{model.name}: {model.value} times",
+  "总共调用了 {payload[0].value} 次 {payload[0].name}": "A total of {payload[0].value} {payload[0].name} calls were made",
+  "总消耗额度": "Total consumption limit",
+  "暂无数据": "No data available",
+  "更多数据统计图形即将到来，敬请期待！": "More data statistics graphics are coming soon, stay tuned!",
+  "复制用户名": "Copy username",
+  "{`共 ${counts} 条数据`}": "{`A total of ${counts} pieces of data`}",
+  "共 0 条数据": "A total of 0 pieces of data",
+  "选择明细分类": "Select detail category",
+  "模型倍率": "model rate",
+  "分组倍率": "group rate",
+  "新密码已复制到剪贴板：": "New password has been copied to the clipboard:",
+  "密码重置确认": "Password reset confirmation",
+  "邮箱地址": "Email address",
+  "新密码": "New password",
+  "密码已复制到剪贴板：": "Password has been copied to the clipboard:",
+  "密码重置完成": "Password reset complete",
+  "提交": "Submit",
+  "返回登录": "Return to login",
+  "请稍后重试，浏览器环境检查未通过": "Please try again later, browser environment check failed",
+  "重置邮件发送成功，请检查邮箱！": "Reset email sent successfully, please check your email!",
+  "密码重置": "Password reset",
+  "重试": "Retry",
+  "组": "Group",
+  "令牌已重置并已复制到剪贴板": "Token has been reset and copied to the clipboard",
+  "邀请链接已复制到剪切板": "Invitation link has been copied to the clipboard",
+  "系统令牌已复制到剪切板": "System token has been copied to the clipboard",
+  "请输入你的账户名以确认删除！": "Please enter your account name to confirm deletion!",
+  "账户已删除！": "Account has been deleted!",
+  "微信账户绑定成功！": "WeChat account binding successful!",
+  "请稍后几秒重试，Turnstile 正在检查用户环境！": "Please try again in a few seconds, Turnstile is checking the user environment!",
+  "验证码发送成功，请检查邮箱！": "Verification code sent successfully, please check your email!",
+  "邮箱账户绑定成功！": "Email account binding successful!",
+  "个人信息": "Personal information",
+  "编辑个人信息": "Edit personal information",
+  "生成系统访问令牌": "Generate system access token",
+  "复制邀请链接": "Copy invitation link",
+  "删除个人帐户": "Delete personal account",
+  "普通用户": "Regular user",
+  "管理员": "Administrator",
+  "超级管理员": "Super administrator",
+  "显示名称": "Display name",
+  "GitHub 账号": "GitHub account",
+  "微信账号": "WeChat account",
+  "修改个人信息只允许在电脑端进行。生成的令牌用于系统管理，而非用于请求 OpenAI 相关的服务，请知悉。": "Modifying personal information is only allowed on a computer. The generated token is for system management, not for requesting OpenAI related services. Please be aware.",
+  "可用模型": "Available models",
+  "账号绑定": "Account binding",
+  "绑定微信": "Bind WeChat",
+  "绑定 GitHub": "Bind GitHub",
+  "绑定邮箱": "Bind Email",
+  "绑定": "Bind",
+  "绑定邮箱地址": "Bind email address",
+  "输入邮箱地址": "Enter email address",
+  "重新发送": "Resend",
+  "获取验证码": "Get verification code",
+  "确认绑定": "Confirm binding",
+  "取消": "Cancel",
+  "危险操作": "Dangerous operation",
+  "您正在删除自己的帐户，将清空所有数据且不可恢复": "You are deleting your own account, all data will be cleared and cannot be recovered",
+  "输入你的账户名": "Enter your account name",
+  "以确认删除": "To confirm deletion",
+  "确认删除": "Confirm deletion",
+  "未使用": "Not used",
+  "已禁用": "Disabled",
+  "已使用": "Used",
+  "未知状态": "Unknown status",
+  "操作成功完成！": "Operation successfully completed!",
+  "搜索兑换码的 ID 和名称 ...": "Search for the ID and name of the redemption code ...",
+  "名称": "Name",
+  "状态": "Status",
+  "额度": "Quota",
+  "创建时间": "Creation time",
+  "兑换时间": "Redemption time",
+  "操作": "Operation",
+  "尚未兑换": "Not yet redeemed",
+  "已复制到剪贴板！": "Copied to clipboard!",
+  "无法复制到剪贴板，请手动复制，已将兑换码填入搜索框。": "Unable to copy to clipboard, please copy manually. The redemption code has been filled in the search box.",
+  "复制": "Copy",
+  "删除": "Delete",
+  "禁用": "Disable",
+  "启用": "Enable",
+  "编辑": "Edit",
+  "添加新的兑换码": "Add new redemption code",
+  "密码长度不得小于 8 位！": "Password length must not be less than 8 characters!",
+  "两次输入的密码不一致": "The two passwords entered do not match",
+  "注册成功！": "Registration successful!",
+  "请填写注册邮箱！": "Please fill in the registration email!",
+  "请在${verificationTimeout}秒后再试": "Please try again after ${verificationTimeout} seconds",
+  "验证码发送成功，请检查你的邮箱！": "Verification code sent successfully, please check your email!",
+  "已有账户？": "Already have an account?",
+  "请输入用户名（最长 12 位）": "Please enter a username (up to 12 characters)",
+  "请输入密码（最短 8 位，最长 20 位）": "Please enter a password (minimum 8 characters, maximum 20 characters)",
+  "请再次输入密码": "Please enter the password again",
+  "请输入邮箱地址": "Please enter an email address",
+  "秒后可重发": "Can be resent after seconds",
+  "请输入邮箱验证码": "Please enter the email verification code",
+  "已过期": "Expired",
+  "已启用": "Enabled",
+  "已耗尽": "Exhausted",
+  "无": "None",
+  "令牌密钥": "API Key",
+  "令牌状态": "Key status",
+  "已用额度": "Used quota",
+  "剩余额度": "Remaining quota",
+  "过期时间": "Expiration time",
+  "你确定要删除这个令牌吗?": "Are you sure you want to delete this key?",
+  "无法复制到剪贴板，请手动复制，已将令牌密钥填入搜索框": "Unable to copy to clipboard, please copy manually. The key key has been filled in the search box.",
+  "无限制": "Unlimited",
+  "永不过期": "Never expires",
+  "使用 API 访问令牌进行服务鉴权和计费。": "Use API Key for service authentication and billing.",
+  "API 访问令牌关系到您的个人利益，请妥善留存，不要与其他人共享，也不要保存在客户端代码中。": "API Key is related to your personal interests. Please keep it properly. Do not share it with others or save it in client code.",
+  "创建令牌": "Create Key",
+  "什么都还没有，快去创建一个令牌开始使用吧！": "Nothing yet, go create a key to start using!",
+  "你确定要删除该令牌吗": "Are you sure you want to delete this key",
+  "导出令牌信息": "Export key information",
+  "错误：未登录或登录已过期，请重新登录！": "Error: Not logged in or login has expired, please log in again!",
+  "错误：请求次数过多，请稍后再试！": "Error: Too many requests, please try again later!",
+  "错误：服务器内部错误，请联系管理员！": "Error: Server internal error, please contact the online customer service!",
+  "本站仅作演示之用，无服务端！": "This site is for demonstration purposes only, no server!",
+  "错误：": "Error:",
+  "加载首页内容失败...": "Failed to load homepage content...",
+  "系统状况": "System status",
+  "系统信息": "System information",
+  "系统信息总览": "System information overview",
+  "名称：": "Name:",
+  "版本：": "Version:",
+  "源码：": "Source code:",
+  "启动时间：": "Startup time:",
+  "系统配置": "System configuration",
+  "系统配置总览": "System configuration overview",
+  "邮箱验证：": "Email verification:",
+  "未启用": "Not enabled",
+  "Turnstile 用户校验：": "Turnstile user verification:",
+  "页面不存在": "Page does not exist",
+  "请检查你的浏览器地址是否正确": "Please check if your browser address is correct",
+  "个人设置": "Personal settings",
+  "运营设置": "Operations settings",
+  "系统设置": "System settings",
+  "其他设置": "Other settings",
+  "默认令牌": "Default key",
+  "过期时间必须在当前时间之后！": "Expiration time must be after the current time!",
+  "额度必须大于等于 0！": "Quota must be greater than or equal to 0!",
+  "过期时间格式错误！": "Expiration time format error!",
+  "创建令牌数量必须大于等于 1！": "The number of keys to create must be greater than or equal to 1!",
+  "令牌修改成功": "API Key modification successful",
+  "令牌创建成功": "API Key creation successful",
+  "更新令牌信息": "Update key information",
+  "创建新的令牌": "Create a new key",
+  "请输入名称": "Please enter a name",
+  "请输入过期时间，格式为 yyyy-MM-dd HH:mm:ss，-1 表示无限制": "Please enter the expiration time, the format is yyyy-MM-dd HH:mm:ss, -1 means unlimited",
+  "无限额度": "Unlimited quota",
+  "注意：启用无限额度后，已用额度将不再进行计算。": "Note: After enabling unlimited quota, the used quota will no longer be calculated.",
+  "等于": "Equals",
+  "请输入额度（单位：token）": "Please enter the quota (unit: token)",
+  "创建令牌数量": "Create key quantity",
+  "请输入令牌数量": "Please enter the number of keys",
+  "注意：令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制。": "Note: The quota of the key is only used to limit the maximum quota usage of the key itself, and the actual usage is subject to the remaining quota of the account.",
+  "我的令牌": "My keys",
+  "请输入额度兑换码！": "Please enter the redeem code!",
+  "充值成功！": "Recharge successful!",
+  "请求失败": "Request failed",
+  "超级管理员未设置充值链接！": "The super administrator did not set a recharge link!",
+  "充值额度": "Recharge quota",
+  "兑换中...": "Redeeming...",
+  "请点击充值以获取额度兑换码。": "Please click recharge to get the quota redemption code.",
+  "用户信息更新成功！": "User information updated successfully!",
+  "更新用户信息": "Update user information",
+  "请输入新的用户名": "Please enter a new username",
+  "请输入新的密码，最短 8 位": "Please enter a new password, at least 8 characters",
+  "请输入新的显示名称": "Please enter a new display name",
+  "分组": "Group",
+  "请选择分组": "Please select a group",
+  "请在系统设置页面编辑分组倍率以添加新的分组：": "Please edit the group rate on the system settings page to add a new group:",
+  "请输入新的剩余额度": "Please enter a new remaining quota",
+  "已绑定的 GitHub 账户": "Bound GitHub account",
+  "此项只读，需要用户通过个人设置页面的相关绑定按钮进行绑定，不可直接修改": "This item is read-only, users need to bind through the relevant binding button on the personal settings page, cannot be directly modified",
+  "已绑定的微信账户": "Bound WeChat account",
+  "已绑定的邮箱账户": "Bound email account",
+  "新版本可用：${data.version}，请使用快捷键 Shift + F5 刷新页面": "New version available: ${data.version}, please refresh the page using the shortcut key Shift + F5",
+  "无法正常连接至服务器！": "Unable to connect to the server normally!",
+  "提示：": "Input:",
+  "补全：": "Output:",
+  "搜索令牌名称": "Search key name",
+  "测试所有渠道": "Test all channels",
+  "更新已启用渠道余额": "Update the balance of enabled channels"
 }
--- a/main.go
+++ b/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", common.Version))
 	if os.Getenv("GIN_MODE") != "debug" {
 		gin.SetMode(gin.ReleaseMode)
 	}
@ -50,6 +47,7 @@ func main() {

 	// Initialize options
 	model.InitOptionMap()
+	common.SysLog(fmt.Sprintf("using theme %s", common.Theme))
 	if common.RedisEnabled {
 		// for compatibility with old versions
 		common.MemoryCacheEnabled = true
@ -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)
--- a/model/log.go
+++ b/model/log.go
@ -3,8 +3,9 @@ package model
 import (
 	"context"
 	"fmt"
-	"gorm.io/gorm"
 	"one-api/common"
+
+	"gorm.io/gorm"
 )

 type Log struct {
@ -182,3 +183,40 @@ func DeleteOldLog(targetTimestamp int64) (int64, error) {
 	result := DB.Where("created_at < ?", targetTimestamp).Delete(&Log{})
 	return result.RowsAffected, result.Error
 }
+
+type LogStatistic struct {
+	Day              string `gorm:"column:day"`
+	ModelName        string `gorm:"column:model_name"`
+	RequestCount     int    `gorm:"column:request_count"`
+	Quota            int    `gorm:"column:quota"`
+	PromptTokens     int    `gorm:"column:prompt_tokens"`
+	CompletionTokens int    `gorm:"column:completion_tokens"`
+}
+
+func SearchLogsByDayAndModel(userId, start, end int) (LogStatistics []*LogStatistic, err error) {
+	groupSelect := "DATE_FORMAT(FROM_UNIXTIME(created_at), '%Y-%m-%d') as day"
+
+	if common.UsingPostgreSQL {
+		groupSelect = "TO_CHAR(date_trunc('day', to_timestamp(created_at)), 'YYYY-MM-DD') as day"
+	}
+
+	if common.UsingSQLite {
+		groupSelect = "strftime('%Y-%m-%d', datetime(created_at, 'unixepoch')) as day"
+	}
+
+	err = DB.Raw(`
+		SELECT `+groupSelect+`,
+		model_name, count(1) as request_count,
+		sum(quota) as quota,
+		sum(prompt_tokens) as prompt_tokens,
+		sum(completion_tokens) as completion_tokens
+		FROM logs
+		WHERE type=2
+		AND user_id= ?
+		AND created_at BETWEEN ? AND ?
+		GROUP BY day, model_name
+		ORDER BY day, model_name
+	`, userId, start, end).Scan(&LogStatistics).Error
+
+	return LogStatistics, err
+}
--- a/model/option.go
+++ b/model/option.go
@ -72,6 +72,7 @@ func InitOptionMap() {
 	common.OptionMap["ChatLink"] = common.ChatLink
 	common.OptionMap["QuotaPerUnit"] = strconv.FormatFloat(common.QuotaPerUnit, 'f', -1, 64)
 	common.OptionMap["RetryTimes"] = strconv.Itoa(common.RetryTimes)
+	common.OptionMap["Theme"] = common.Theme
 	common.OptionMapRWMutex.Unlock()
 	loadOptionsFromDatabase()
 }
@ -220,6 +221,8 @@ func updateOptionMap(key string, value string) (err error) {
 		common.ChannelDisableThreshold, _ = strconv.ParseFloat(value, 64)
 	case "QuotaPerUnit":
 		common.QuotaPerUnit, _ = strconv.ParseFloat(value, 64)
+	case "Theme":
+		common.Theme = value
 	}
 	return err
 }
--- a/model/token.go
+++ b/model/token.go
@ -38,39 +38,43 @@ func ValidateUserToken(key string) (token *Token, err error) {
 		return nil, errors.New("未提供令牌")
 	}
 	token, err = CacheGetTokenByKey(key)
-	if err == nil {
-		if token.Status == common.TokenStatusExhausted {
-			return nil, errors.New("该令牌额度已用尽")
-		} else if token.Status == common.TokenStatusExpired {
-			return nil, errors.New("该令牌已过期")
+	if err != nil {
+		common.SysError("CacheGetTokenByKey failed: " + err.Error())
+		if errors.Is(err, gorm.ErrRecordNotFound) {
+			return nil, errors.New("无效的令牌")
 		}
-		if token.Status != common.TokenStatusEnabled {
-			return nil, errors.New("该令牌状态不可用")
-		}
-		if token.ExpiredTime != -1 && token.ExpiredTime < common.GetTimestamp() {
-			if !common.RedisEnabled {
-				token.Status = common.TokenStatusExpired
-				err := token.SelectUpdate()
-				if err != nil {
-					common.SysError("failed to update token status" + err.Error())
-				}
-			}
-			return nil, errors.New("该令牌已过期")
-		}
-		if !token.UnlimitedQuota && token.RemainQuota <= 0 {
-			if !common.RedisEnabled {
-				// in this case, we can make sure the token is exhausted
-				token.Status = common.TokenStatusExhausted
-				err := token.SelectUpdate()
-				if err != nil {
-					common.SysError("failed to update token status" + err.Error())
-				}
-			}
-			return nil, errors.New("该令牌额度已用尽")
-		}
-		return token, nil
+		return nil, errors.New("令牌验证失败")
 	}
-	return nil, errors.New("无效的令牌")
+	if token.Status == common.TokenStatusExhausted {
+		return nil, errors.New("该令牌额度已用尽")
+	} else if token.Status == common.TokenStatusExpired {
+		return nil, errors.New("该令牌已过期")
+	}
+	if token.Status != common.TokenStatusEnabled {
+		return nil, errors.New("该令牌状态不可用")
+	}
+	if token.ExpiredTime != -1 && token.ExpiredTime < common.GetTimestamp() {
+		if !common.RedisEnabled {
+			token.Status = common.TokenStatusExpired
+			err := token.SelectUpdate()
+			if err != nil {
+				common.SysError("failed to update token status" + err.Error())
+			}
+		}
+		return nil, errors.New("该令牌已过期")
+	}
+	if !token.UnlimitedQuota && token.RemainQuota <= 0 {
+		if !common.RedisEnabled {
+			// in this case, we can make sure the token is exhausted
+			token.Status = common.TokenStatusExhausted
+			err := token.SelectUpdate()
+			if err != nil {
+				common.SysError("failed to update token status" + err.Error())
+			}
+		}
+		return nil, errors.New("该令牌额度已用尽")
+	}
+	return token, nil
 }

 func GetTokenByIds(id int, userId int) (*Token, error) {
--- a/router/api-router.go
+++ b/router/api-router.go
@ -35,6 +35,7 @@ func SetApiRouter(router *gin.Engine) {
 			selfRoute := userRoute.Group("/")
 			selfRoute.Use(middleware.UserAuth())
 			{
+				selfRoute.GET("/dashboard", controller.GetUserDashboard)
 				selfRoute.GET("/self", controller.GetSelf)
 				selfRoute.PUT("/self", controller.UpdateSelf)
 				selfRoute.DELETE("/self", controller.DeleteSelf)
--- a/router/main.go
+++ b/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) {
--- a/router/web-router.go
+++ b/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,18 @@ import (
 	"strings"
 )

-func SetWebRouter(router *gin.Engine, buildFS embed.FS, indexPage []byte) {
+func SetWebRouter(router *gin.Engine, buildFS embed.FS) {
+	indexPageData, _ := buildFS.ReadFile(fmt.Sprintf("web/build/%s/index.html", common.Theme))
 	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")
-		c.Data(http.StatusOK, "text/html; charset=utf-8", indexPage)
+		c.Data(http.StatusOK, "text/html; charset=utf-8", indexPageData)
 	})
 }
--- a/web/README.md
+++ b/web/README.md
@ -1,21 +1,38 @@
-# React Template
+# One API 的前端界面

-## Basic Usages
+> 每个文件夹代表一个主题，欢迎提交你的主题

-```shell
-# Runs the app in the development mode
-npm start
+## 提交新的主题

-# Builds the app for production to the `build` folder
-npm run build
-```
+> 欢迎在页面底部保留你和 One API 的版权信息以及指向链接

-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`.
+1. 在 `web` 文件夹下新建一个文件夹，文件夹名为主题名。
+2. 把你的主题文件放到这个文件夹下。
+3. 修改你的 `package.json` 文件，把 `build` 命令改为：`"build": "react-scripts build && mv -f build ../build/default"`，其中 `default` 为你的主题名。
+4. 修改 `common/constants.go` 中的 `ValidThemes`，把你的主题名称注册进去。
+5. 修改 `web/THEMES` 文件，这里也需要同步修改。

-Before you start editing, make sure your `Actions on Save` options have `Optimize imports` & `Run Prettier` enabled.
+## 主题列表

-## Reference
+### 主题：default

-1. https://github.com/OIerDb-ng/OIerDb
-2. https://github.com/cornflourblue/react-hooks-redux-registration-login-example
+默认主题，由 [JustSong](https://github.com/songquanpeng) 开发。
+
+预览：
+|![image](https://github.com/songquanpeng/one-api/assets/39998050/ccfbc668-3a7f-4bc1-87da-7eacfd7bf371)|![image](https://github.com/songquanpeng/one-api/assets/39998050/a63ed547-44b9-45db-b43a-ecea07d60840)|
+|:---:|:---:|
+
+### 主题：berry
+
+由 [MartialBE](https://github.com/MartialBE) 开发。
+
+预览：
+|||
+|:---:|:---:|
+|![image](https://github.com/songquanpeng/one-api/assets/42402987/36aff5c6-c5ff-4a90-8e3d-33d5cff34cbf)|![image](https://github.com/songquanpeng/one-api/assets/42402987/9ac63b36-5140-4064-8fad-fc9d25821509)|
+|![image](https://github.com/songquanpeng/one-api/assets/42402987/fb2b1c64-ef24-4027-9b80-0cd9d945a47f)|![image](https://github.com/songquanpeng/one-api/assets/42402987/b6b649ec-2888-4324-8b2d-d5e11554eed6)|
+|![image](https://github.com/songquanpeng/one-api/assets/42402987/6d3b22e0-436b-4e26-8911-bcc993c6a2bd)|![image](https://github.com/songquanpeng/one-api/assets/42402987/eef1e224-7245-44d7-804e-9d1c8fa3f29c)|
+
+#### 开发说明
+
+请查看 [web/berry/README.md](https://github.com/songquanpeng/one-api/tree/main/web/berry/README.md)
--- a/web/THEMES
+++ b/web/THEMES
@ -0,0 +1,2 @@
+default
+berry
--- a/web/berry/.gitignore
+++ b/web/berry/.gitignore
--- a/web/berry/README.md
+++ b/web/berry/README.md
@ -0,0 +1,61 @@
+# One API 前端界面
+
+这个项目是 One API 的前端界面，它基于 [Berry Free React Admin Template](https://github.com/codedthemes/berry-free-react-admin-template) 进行开发。
+
+## 使用的开源项目
+
+使用了以下开源项目作为我们项目的一部分：
+
+- [Berry Free React Admin Template](https://github.com/codedthemes/berry-free-react-admin-template)
+- [minimal-ui-kit](minimal-ui-kit)
+
+## 开发说明
+
+当添加新的渠道时，需要修改以下地方：
+
+1. `web/berry/src/constants/ChannelConstants.js`
+
+在该文件中的 `CHANNEL_OPTIONS` 添加新的渠道
+
+```js
+export const CHANNEL_OPTIONS = {
+  //key 为渠道ID
+  1: {
+    key: 1, // 渠道ID
+    text: "OpenAI", // 渠道名称
+    value: 1, // 渠道ID
+    color: "primary", // 渠道列表显示的颜色
+  },
+};
+```
+
+2. `web/berry/src/views/Channel/type/Config.js`
+
+在该文件中的`typeConfig`添加新的渠道配置， 如果无需配置，可以不添加
+
+```js
+const typeConfig = {
+  // key 为渠道ID
+  3: {
+    inputLabel: {
+      // 输入框名称 配置
+      // 对应的字段名称
+      base_url: "AZURE_OPENAI_ENDPOINT",
+      other: "默认 API 版本",
+    },
+    prompt: {
+      // 输入框提示 配置
+      // 对应的字段名称
+      base_url: "请填写AZURE_OPENAI_ENDPOINT",
+
+      // 注意：通过判断 `other` 是否有值来判断是否需要显示 `other` 输入框， 默认是没有值的
+      other: "请输入默认API版本，例如：2023-06-01-preview",
+    },
+    modelGroup: "openai", // 模型组名称,这个值是给 填入渠道支持模型 按钮使用的。 填入渠道支持模型 按钮会根据这个值来获取模型组，如果填写默认是 openai
+  },
+};
+```
+
+## 许可证
+
+本项目中使用的代码遵循 MIT 许可证。
--- a/web/berry/jsconfig.json
+++ b/web/berry/jsconfig.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "commonjs",
+    "baseUrl": "src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}
--- a/web/berry/package.json
+++ b/web/berry/package.json
@ -0,0 +1,84 @@
+{
+  "name": "one_api_web",
+  "version": "1.0.0",
+  "proxy": "http://127.0.0.1:3000",
+  "private": true,
+  "homepage": "",
+  "dependencies": {
+    "@emotion/cache": "^11.9.3",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.88",
+    "@mui/material": "^5.8.6",
+    "@mui/system": "^5.8.6",
+    "@mui/utils": "^5.8.6",
+    "@mui/x-date-pickers": "^6.18.5",
+    "@tabler/icons-react": "^2.44.0",
+    "apexcharts": "^3.35.3",
+    "axios": "^0.27.2",
+    "dayjs": "^1.11.10",
+    "formik": "^2.2.9",
+    "framer-motion": "^6.3.16",
+    "history": "^5.3.0",
+    "marked": "^4.1.1",
+    "material-ui-popup-state": "^4.0.1",
+    "notistack": "^3.0.1",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-apexcharts": "^1.4.0",
+    "react-device-detect": "^2.2.2",
+    "react-dom": "^18.2.0",
+    "react-perfect-scrollbar": "^1.5.8",
+    "react-redux": "^8.0.2",
+    "react-router": "6.3.0",
+    "react-router-dom": "6.3.0",
+    "react-scripts": "^5.0.1",
+    "react-turnstile": "^1.1.2",
+    "redux": "^4.2.0",
+    "yup": "^0.32.11"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build && mv -f build ../build/berry",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-react"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      "defaults",
+      "not IE 11"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.4",
+    "@babel/eslint-parser": "^7.21.3",
+    "eslint": "^8.38.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-flowtype": "^8.0.3",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "immutable": "^4.3.0",
+    "prettier": "^2.8.7",
+    "sass": "^1.53.0"
+  }
+}
--- a/web/berry/public/favicon.ico
+++ b/web/berry/public/favicon.ico
--- a/web/berry/public/index.html
+++ b/web/berry/public/index.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>One API</title>
+    <link rel="icon" href="/favicon.ico" />
+    <!-- Meta Tags-->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#2296f3" />
+    <meta
+      name="description"
+      content="OpenAI 接口聚合管理，支持多种渠道包括 Azure，可用于二次分发管理 key，仅单可执行文件，已打包好 Docker 镜像，一键部署，开箱即用"
+    />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+
+  </body>
+</html>
--- a/web/berry/src/App.js
+++ b/web/berry/src/App.js
@ -0,0 +1,43 @@
+import { useSelector } from 'react-redux';
+
+import { ThemeProvider } from '@mui/material/styles';
+import { CssBaseline, StyledEngineProvider } from '@mui/material';
+
+// routing
+import Routes from 'routes';
+
+// defaultTheme
+import themes from 'themes';
+
+// project imports
+import NavigationScroll from 'layout/NavigationScroll';
+
+// auth
+import UserProvider from 'contexts/UserContext';
+import StatusProvider from 'contexts/StatusContext';
+import { SnackbarProvider } from 'notistack';
+
+// ==============================|| APP ||============================== //
+
+const App = () => {
+  const customization = useSelector((state) => state.customization);
+
+  return (
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={themes(customization)}>
+        <CssBaseline />
+        <NavigationScroll>
+          <SnackbarProvider autoHideDuration={5000} maxSnack={3} anchorOrigin={{ vertical: 'top', horizontal: 'right' }}>
+            <UserProvider>
+              <StatusProvider>
+                <Routes />
+              </StatusProvider>
+            </UserProvider>
+          </SnackbarProvider>
+        </NavigationScroll>
+      </ThemeProvider>
+    </StyledEngineProvider>
+  );
+};
+
+export default App;
--- a/web/berry/src/assets/images/404.svg
+++ b/web/berry/src/assets/images/404.svg
@ -0,0 +1,40 @@
+<svg width="480" height="360" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M0 198.781c0 41.457 14.945 79.235 39.539 107.785 28.214 32.765 69.128 53.365 114.734 53.434a148.458 148.458 0 0056.495-11.036c9.051-3.699 19.182-3.274 27.948 1.107a75.774 75.774 0 0033.957 8.011c5.023 0 9.942-.495 14.7-1.434 13.581-2.67 25.94-8.99 36.089-17.94 6.379-5.627 14.548-8.456 22.898-8.446h.142c27.589 0 53.215-8.732 74.492-23.696 19.021-13.36 34.554-31.696 44.904-53.225C474.92 234.581 480 213.388 480 190.958c0-76.931-59.774-139.305-133.498-139.305-7.516 0-14.88.663-22.063 1.899C305.418 21.42 271.355 0 232.498 0a103.647 103.647 0 00-45.879 10.661c-13.24 6.487-25.011 15.705-34.641 26.939-32.697.544-62.93 11.69-87.675 30.291C25.351 97.155 0 144.882 0 198.781z"
+    fill="url(#prefix__paint0_linear)" opacity=".2" />
+  <g filter="url(#prefix__filter0_d)">
+    <circle opacity=".15" cx="182.109" cy="97.623" r="44.623" fill="#FFC107" />
+    <circle cx="182.109" cy="97.623" r="23.406" fill="url(#prefix__paint1_linear)" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M244.878 306.611c34.56 0 62.575-28.016 62.575-62.575 0-34.56-28.015-62.576-62.575-62.576-34.559 0-62.575 28.016-62.575 62.576 0 34.559 28.016 62.575 62.575 62.575zm0-23.186c21.754 0 39.389-17.635 39.389-39.389 0-21.755-17.635-39.39-39.389-39.39s-39.389 17.635-39.389 39.39c0 21.754 17.635 39.389 39.389 39.389z"
+      fill="#061B64" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+      d="M174.965 264.592c0-4.133-1.492-5.625-5.637-5.625h-11.373v-66.611c0-4.476-1.492-5.637-5.638-5.637h-9.172a9.866 9.866 0 00-7.948 3.974l-55.03 68.274a11.006 11.006 0 00-1.957 6.787v5.968c0 4.145 1.492 5.637 5.625 5.637h54.676v21.707c0 4.133 1.492 5.625 5.625 5.625h8.12c4.146 0 5.638-1.492 5.638-5.625v-21.707h11.434c4.414 0 5.637-1.492 5.637-5.637v-7.13zm-72.42-5.625l35.966-44.415v44.415h-35.966zM411.607 264.592c0-4.133-1.492-5.625-5.638-5.625h-11.422v-66.611c0-4.476-1.492-5.637-5.637-5.637h-9.111a9.87 9.87 0 00-7.949 3.974l-55.03 68.274a11.011 11.011 0 00-1.981 6.787v5.968c0 4.145 1.492 5.637 5.626 5.637h54.687v21.707c0 4.133 1.492 5.625 5.626 5.625h8.12c4.145 0 5.637-1.492 5.637-5.625v-21.707h11.434c4.476 0 5.638-1.492 5.638-5.637v-7.13zm-72.42-5.625l35.965-44.415v44.415h-35.965z"
+      fill="#2065D1" />
+    <path opacity=".24"
+      d="M425.621 117.222a8.267 8.267 0 00-9.599-8.157 11.129 11.129 0 00-9.784-5.87h-.403a13.23 13.23 0 00-20.365-14.078 13.23 13.23 0 00-5.316 14.078h-.403a11.153 11.153 0 100 22.293h38.68v-.073a8.279 8.279 0 007.19-8.193zM104.258 199.045a7.093 7.093 0 00-7.093-7.092c-.381.007-.761.039-1.138.097a9.552 9.552 0 00-8.425-5.026h-.343a11.348 11.348 0 10-22.012 0h-.342a9.564 9.564 0 100 19.114h33.177v-.061a7.107 7.107 0 006.176-7.032z"
+      fill="#2065D1" />
+  </g>
+  <defs>
+    <linearGradient id="prefix__paint0_linear" x1="328.81" y1="424.032" x2="505.393" y2="26.048"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#2065D1" />
+      <stop offset="1" stop-color="#2065D1" stop-opacity=".01" />
+    </linearGradient>
+    <linearGradient id="prefix__paint1_linear" x1="135.297" y1="97.623" x2="182.109" y2="144.436"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFE16A" />
+      <stop offset="1" stop-color="#B78103" />
+    </linearGradient>
+    <filter id="prefix__filter0_d" x="51" y="49" width="394.621" height="277.611" filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+      <feOffset dx="8" dy="8" />
+      <feGaussianBlur stdDeviation="6" />
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow" />
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+    </filter>
+  </defs>
+</svg>
--- a/web/berry/src/assets/images/auth/auth-blue-card.svg
+++ b/web/berry/src/assets/images/auth/auth-blue-card.svg
--- a/web/berry/src/assets/images/auth/auth-pattern-dark.svg
+++ b/web/berry/src/assets/images/auth/auth-pattern-dark.svg
@ -0,0 +1,39 @@
+<svg width="670" height="903" viewBox="0 0 670 903" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="670" height="903">
+<g opacity="0.2">
+<path d="M0 0H670V903H0V0Z" fill="white"/>
+</g>
+</mask>
+<g mask="url(#mask0)">
+<path d="M2030.91 374.849L426.331 1300.78" stroke="#8492C4"/>
+<path d="M426.409 -527.071L2030.72 399.311" stroke="#8492C4"/>
+<path d="M1919.22 310.39L314.731 1236.47" stroke="#8492C4"/>
+<path d="M314.731 -462.612L1919.22 463.467" stroke="#8492C4"/>
+<path d="M1807.54 245.932L203.055 1172.01" stroke="#8492C4"/>
+<path d="M203.052 -398.154L1807.54 527.925" stroke="#8492C4"/>
+<path d="M1695.87 181.473L91.3788 1107.55" stroke="#8492C4"/>
+<path d="M91.3744 -333.695L1695.86 592.384" stroke="#8492C4"/>
+<path d="M1584.19 117.014L-20.3012 1043.09" stroke="#8492C4"/>
+<path d="M-20.3044 -269.237L1584.19 656.843" stroke="#8492C4"/>
+<path d="M1472.51 52.5562L-131.98 978.636" stroke="#8492C4"/>
+<path d="M-131.983 -204.778L1472.51 721.301" stroke="#8492C4"/>
+<path d="M1360.83 -11.9023L-243.658 914.177" stroke="#8492C4"/>
+<path d="M-243.662 -140.319L1360.83 785.76" stroke="#8492C4"/>
+<path d="M1249.15 -76.3613L-355.336 849.718" stroke="#8492C4"/>
+<path d="M-355.341 -75.8608L1249.15 850.219" stroke="#8492C4"/>
+<path d="M1137.48 -140.819L-467.014 785.26" stroke="#8492C4"/>
+<path d="M-467.017 -11.4023L1137.47 914.677" stroke="#8492C4"/>
+<path d="M1025.8 -205.278L-578.692 720.801" stroke="#8492C4"/>
+<path d="M-578.693 53.0562L1025.8 979.136" stroke="#8492C4"/>
+<path d="M914.119 -269.736L-690.371 656.343" stroke="#8492C4"/>
+<path d="M-690.379 117.515L914.111 1043.59" stroke="#8492C4"/>
+<path d="M802.441 -334.195L-802.052 591.887" stroke="#8492C4"/>
+<path d="M-802.055 181.974L802.435 1108.05" stroke="#8492C4"/>
+<path d="M690.762 -398.654L-913.728 527.426" stroke="#8492C4"/>
+<path d="M-913.731 246.432L690.759 1172.51" stroke="#8492C4"/>
+<path d="M579.084 -463.112L-1025.41 462.967" stroke="#8492C4"/>
+<path d="M-1025.41 310.891L579.083 1236.97" stroke="#8492C4"/>
+<path d="M467.406 -527.571L-1136.91 398.811" stroke="#8492C4"/>
+<path d="M-1137.09 375.35L467.397 1301.43" stroke="#8492C4"/>
+</g>
+</svg>
--- a/web/berry/src/assets/images/auth/auth-pattern.svg
+++ b/web/berry/src/assets/images/auth/auth-pattern.svg
@ -0,0 +1,39 @@
+<svg width="670" height="903" viewBox="0 0 670 903" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="670" height="903">
+<g opacity="0.2">
+<path d="M0 0H670V903H0V0Z" fill="white"/>
+</g>
+</mask>
+<g mask="url(#mask0)">
+<path d="M2030.91 374.849L426.331 1300.78" stroke="rgba(0,0,0,0.30)"/>
+<path d="M426.409 -527.071L2030.72 399.311" stroke="rgba(0,0,0,0.30)"/>
+<path d="M1919.22 310.39L314.731 1236.47" stroke="rgba(0,0,0,0.30)"/>
+<path d="M314.731 -462.612L1919.22 463.467" stroke="rgba(0,0,0,0.30)"/>
+<path d="M1807.54 245.932L203.055 1172.01" stroke="rgba(0,0,0,0.30)"/>
+<path d="M203.052 -398.154L1807.54 527.925" stroke="rgba(0,0,0,0.30)"/>
+<path d="M1695.87 181.473L91.3788 1107.55" stroke="rgba(0,0,0,0.30)"/>
+<path d="M91.3744 -333.695L1695.86 592.384" stroke="rgba(0,0,0,0.30)"/>
+<path d="M1584.19 117.014L-20.3012 1043.09" stroke="rgba(0,0,0,0.30)"/>
+<path d="M-20.3044 -269.237L1584.19 656.843" stroke="rgba(0,0,0,0.30)"/>
+<path d="M1472.51 52.5562L-131.98 978.636" stroke="rgba(0,0,0,0.30)"/>
+<path d="M-131.983 -204.778L1472.51 721.301" stroke="rgba(0,0,0,0.30)"/>
+<path d="M1360.83 -11.9023L-243.658 914.177" stroke="rgba(0,0,0,0.30)"/>
+<path d="M-243.662 -140.319L1360.83 785.76" stroke="rgba(0,0,0,0.30)"/>
+<path d="M1249.15 -76.3613L-355.336 849.718" stroke="rgba(0,0,0,0.30)"/>
+<path d="M-355.341 -75.8608L1249.15 850.219" stroke="rgba(0,0,0,0.30)"/>
+<path d="M1137.48 -140.819L-467.014 785.26" stroke="rgba(0,0,0,0.30)"/>
+<path d="M-467.017 -11.4023L1137.47 914.677" stroke="rgba(0,0,0,0.30)"/>
+<path d="M1025.8 -205.278L-578.692 720.801" stroke="rgba(0,0,0,0.30)"/>
+<path d="M-578.693 53.0562L1025.8 979.136" stroke="rgba(0,0,0,0.30)"/>
+<path d="M914.119 -269.736L-690.371 656.343" stroke="rgba(0,0,0,0.30)"/>
+<path d="M-690.379 117.515L914.111 1043.59" stroke="rgba(0,0,0,0.30)"/>
+<path d="M802.441 -334.195L-802.052 591.887" stroke="rgba(0,0,0,0.30)"/>
+<path d="M-802.055 181.974L802.435 1108.05" stroke="rgba(0,0,0,0.30)"/>
+<path d="M690.762 -398.654L-913.728 527.426" stroke="rgba(0,0,0,0.30)"/>
+<path d="M-913.731 246.432L690.759 1172.51" stroke="rgba(0,0,0,0.30)"/>
+<path d="M579.084 -463.112L-1025.41 462.967" stroke="rgba(0,0,0,0.30)"/>
+<path d="M-1025.41 310.891L579.083 1236.97" stroke="rgba(0,0,0,0.30)"/>
+<path d="M467.406 -527.571L-1136.91 398.811" stroke="rgba(0,0,0,0.30)"/>
+<path d="M-1137.09 375.35L467.397 1301.43" stroke="rgba(0,0,0,0.30)"/>
+</g>
+</svg>
--- a/web/berry/src/assets/images/auth/auth-purple-card.svg
+++ b/web/berry/src/assets/images/auth/auth-purple-card.svg
--- a/web/berry/src/assets/images/auth/auth-signup-blue-card.svg
+++ b/web/berry/src/assets/images/auth/auth-signup-blue-card.svg
--- a/web/berry/src/assets/images/auth/auth-signup-white-card.svg
+++ b/web/berry/src/assets/images/auth/auth-signup-white-card.svg
--- a/web/berry/src/assets/images/icons/earning.svg
+++ b/web/berry/src/assets/images/icons/earning.svg
@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 9H9C7.89543 9 7 9.89543 7 11V17C7 18.1046 7.89543 19 9 19H19C20.1046 19 21 18.1046 21 17V11C21 9.89543 20.1046 9 19 9Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 16C15.1046 16 16 15.1046 16 14C16 12.8954 15.1046 12 14 12C12.8954 12 12 12.8954 12 14C12 15.1046 12.8954 16 14 16Z" fill="#90CAF9"/>
+<path d="M17 9V7C17 6.46957 16.7893 5.96086 16.4142 5.58579C16.0391 5.21071 15.5304 5 15 5H5C4.46957 5 3.96086 5.21071 3.58579 5.58579C3.21071 5.96086 3 6.46957 3 7V13C3 13.5304 3.21071 14.0391 3.58579 14.4142C3.96086 14.7893 4.46957 15 5 15H7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/web/berry/src/assets/images/icons/github.svg
+++ b/web/berry/src/assets/images/icons/github.svg
@ -0,0 +1 @@
+<svg t="1702350903010" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4215" width="32" height="32"><path d="M512 85.333333C276.266667 85.333333 85.333333 276.266667 85.333333 512a426.410667 426.410667 0 0 0 291.754667 404.821333c21.333333 3.712 29.312-9.088 29.312-20.309333 0-10.112-0.554667-43.690667-0.554667-79.445333-107.178667 19.754667-134.912-26.112-143.445333-50.133334-4.821333-12.288-25.6-50.133333-43.733333-60.288-14.933333-7.978667-36.266667-27.733333-0.554667-28.245333 33.621333-0.554667 57.6 30.933333 65.621333 43.733333 38.4 64.512 99.754667 46.378667 124.245334 35.2 3.754667-27.733333 14.933333-46.378667 27.221333-57.045333-94.933333-10.666667-194.133333-47.488-194.133333-210.688 0-46.421333 16.512-84.778667 43.733333-114.688-4.266667-10.666667-19.2-54.4 4.266667-113.066667 0 0 35.712-11.178667 117.333333 43.776a395.946667 395.946667 0 0 1 106.666667-14.421333c36.266667 0 72.533333 4.778667 106.666666 14.378667 81.578667-55.466667 117.333333-43.690667 117.333334-43.690667 23.466667 58.666667 8.533333 102.4 4.266666 113.066667 27.178667 29.866667 43.733333 67.712 43.733334 114.645333 0 163.754667-99.712 200.021333-194.645334 210.688 15.445333 13.312 28.8 38.912 28.8 78.933333 0 57.045333-0.554667 102.912-0.554666 117.333334 0 11.178667 8.021333 24.490667 29.354666 20.224A427.349333 427.349333 0 0 0 938.666667 512c0-235.733333-190.933333-426.666667-426.666667-426.666667z" fill="#000000" p-id="4216"></path></svg>
--- a/web/berry/src/assets/images/icons/shape-avatar.svg
+++ b/web/berry/src/assets/images/icons/shape-avatar.svg
@ -0,0 +1 @@
+<svg height="62" viewBox="0 0 144 62" width="144" xmlns="http://www.w3.org/2000/svg"><path d="m111.34 23.88c-10.62-10.46-18.5-23.88-38.74-23.88h-1.2c-20.24 0-28.12 13.42-38.74 23.88-7.72 9.64-19.44 11.74-32.66 12.12v26h144v-26c-13.22-.38-24.94-2.48-32.66-12.12z" fill="#fff" fill-rule="evenodd"/></svg>
--- a/web/berry/src/assets/images/icons/social-google.svg
+++ b/web/berry/src/assets/images/icons/social-google.svg
@ -0,0 +1,6 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.06129 13.2253L4.31871 15.9975L1.60458 16.0549C0.793457 14.5504 0.333374 12.8292 0.333374 11C0.333374 9.23119 0.763541 7.56319 1.52604 6.09448H1.52662L3.94296 6.53748L5.00146 8.93932C4.77992 9.58519 4.65917 10.2785 4.65917 11C4.65925 11.783 4.80108 12.5332 5.06129 13.2253Z" fill="#FBBB00"/>
+<path d="M21.4804 9.00732C21.6029 9.65257 21.6668 10.3189 21.6668 11C21.6668 11.7637 21.5865 12.5086 21.4335 13.2271C20.9143 15.6722 19.5575 17.8073 17.678 19.3182L17.6774 19.3177L14.6339 19.1624L14.2031 16.4734C15.4503 15.742 16.425 14.5974 16.9384 13.2271H11.2346V9.00732H17.0216H21.4804Z" fill="#518EF8"/>
+<path d="M17.6772 19.3176L17.6777 19.3182C15.8498 20.7875 13.5277 21.6666 11 21.6666C6.93783 21.6666 3.40612 19.3962 1.60449 16.0549L5.0612 13.2253C5.96199 15.6294 8.28112 17.3408 11 17.3408C12.1686 17.3408 13.2634 17.0249 14.2029 16.4734L17.6772 19.3176Z" fill="#28B446"/>
+<path d="M17.8085 2.78892L14.353 5.61792C13.3807 5.01017 12.2313 4.65908 11 4.65908C8.21963 4.65908 5.85713 6.44896 5.00146 8.93925L1.52658 6.09442H1.526C3.30125 2.67171 6.8775 0.333252 11 0.333252C13.5881 0.333252 15.9612 1.25517 17.8085 2.78892Z" fill="#F14336"/>
+</svg>
--- a/web/berry/src/assets/images/icons/wechat.svg
+++ b/web/berry/src/assets/images/icons/wechat.svg
@ -0,0 +1 @@
+<svg t="1702350975929" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2474" width="32" height="32"><path d="M512 1024C229.23264 1024 0 794.76736 0 512S229.23264 0 512 0s512 229.23264 512 512-229.23264 512-512 512z m212.0704-290.0992l41.5744 24.064c9.216 5.3248 14.5408 1.26976 11.83744-9.03168l-9.0112-34.4064a9.76896 9.76896 0 0 1 3.76832-10.4448C813.50656 674.75456 839.68 631.0912 839.68 582.32832c0-88.28928-85.79072-159.86688-191.61088-159.86688s-191.61088 71.5776-191.61088 159.86688c0 88.2688 85.79072 159.86688 191.61088 159.86688 22.9376 0 44.91264-3.35872 65.26976-9.5232a13.55776 13.55776 0 0 1 10.73152 1.2288z m-366.63296-116.08064a271.85152 271.85152 0 0 0 89.98912 10.89536 146.61632 146.61632 0 0 1-7.7824-47.16544c0-96.31744 94.33088-174.3872 210.71872-174.3872 4.07552 0 8.11008 0.08192 12.12416 0.28672C645.2224 315.84256 549.96992 245.76 435.03616 245.76 307.87584 245.76 204.8 331.55072 204.8 437.37088c0 58.1632 31.15008 110.2848 80.32256 145.42848 4.62848 3.31776 6.7584 9.13408 5.28384 14.62272l-10.83392 40.38656c-3.2768 12.1856 2.99008 16.95744 13.88544 10.58816l49.29536-28.79488a18.59584 18.59584 0 0 1 14.68416-1.78176z m353.73056-60.74368a26.0096 26.0096 0 1 1 0-52.0192 26.0096 26.0096 0 0 1 0 52.0192z m-126.976 0a26.0096 26.0096 0 1 1 0-52.0192 26.0096 26.0096 0 0 1 0 52.0192z m-72.66304-150.69184a30.59712 30.59712 0 1 1 0-61.19424 30.59712 30.59712 0 0 1 0 61.19424z m-153.74336 0a30.59712 30.59712 0 1 1 0-61.19424 30.59712 30.59712 0 0 1 0 61.19424z" fill="#2BD418" p-id="2475"></path></svg>
--- a/web/berry/src/assets/images/invite/cover.jpg
+++ b/web/berry/src/assets/images/invite/cover.jpg
--- a/web/berry/src/assets/images/invite/cwok_casual_19.webp
+++ b/web/berry/src/assets/images/invite/cwok_casual_19.webp
--- a/web/berry/src/assets/images/logo-2.svg
+++ b/web/berry/src/assets/images/logo-2.svg
@ -0,0 +1,15 @@
+<svg viewBox="0 0 590 265" xmlns="http://www.w3.org/2000/svg" version="1.1">
+
+ <g>
+  <title>Layer 1</title>
+  <ellipse transform="rotate(103.6 287.6 32.87)" id="svg_1" ry="28.14" rx="28.47" cy="32.87" cx="287.60001" fill="#0d161f"/>
+  <path id="svg_2" d="m232.92,128.89c3.78,27.29 -1.81,55.44 -17.71,78.09a2.62,2.62 0 0 0 -0.06,2.92c1.24,1.92 2.96,5.05 5.56,4.94q5.25,-0.22 10.79,0.11a1.26,1.26 0 0 1 1.19,1.27l-0.4,42.53a1.31,1.31 0 0 1 -1.31,1.3q-16.77,-0.09 -36.53,0.01q-2.25,0.02 -3.71,-1.56q-16.02,-17.28 -31.98,-35.32c-5.13,-5.8 -10.18,-11.16 -14.86,-17.59a1.35,1.34 -31.1 0 1 0.5,-2q12.88,-6.32 22.13,-17.12q18.18,-21.23 15.08,-48.84q-2.66,-23.7 -22.4,-40.46q-23.43,-19.9 -54.88,-13.86c-4.1,0.79 -7.83,2.5 -11.72,4.12q-11.86,4.94 -20.59,14.64c-14.25,15.81 -20.07,36.4 -15.05,57.16q4.99,20.63 22.86,35.71c10.45,8.81 23.7,13.12 37.26,14.18q1.47,0.11 3.6,2.65c11.68,13.89 24.48,27.72 35.94,41.96a0.43,0.43 0 0 1 -0.21,0.68q-22.51,7.27 -47.37,5.37q-19.4,-1.47 -39.74,-11.22q-18.27,-8.75 -30.59,-21.28q-18.66,-18.98 -28.02,-43.57q-10.8,-28.4 -4.93,-58.67c1.59,-8.17 4.03,-17 7.42,-24.61q5.08,-11.38 11.61,-20.64q25.41,-36.03 68.45,-46.13q32.42,-7.61 64.23,3.92q25.31,9.17 43.2,27.31c16.85,17.09 28.91,40.01 32.24,64z" fill="#0d161f"/>
+  <path id="svg_3" d="m499.47,180.61c6.45,13.53 16.44,21.75 31.96,22q11.94,0.19 22.17,-5.36q2.21,-1.2 3.93,0.69q12.56,13.78 24.89,28.47q1.21,1.44 1.44,3.13a0.95,0.95 0 0 1 -0.36,0.89c-1.62,1.23 -3.33,2.71 -5.03,3.69q-29.37,17.01 -62.47,11.31c-20.61,-3.55 -39.05,-15.24 -51.47,-32.51q-6.4,-8.89 -9.91,-17.08c-2.62,-6.12 -4.73,-13.3 -5.41,-20.08q-3.96,-39.88 22.94,-67.74c9.48,-9.81 21.15,-16.67 34.39,-19.49c16.54,-3.53 34.64,-1.83 48.77,7.1q13.92,8.79 21.13,20.4q11.07,17.84 10.48,38.92c-0.02,0.94 -0.21,1.81 -0.85,2.54q-7.73,8.77 -18.71,20.16c-1.28,1.32 -2.61,2.26 -4.51,2.23q-24.45,-0.37 -51.64,-0.41q-5.03,0 -10.84,-0.22a0.96,0.95 -11.7 0 0 -0.9,1.36zm1.12,-37.17q-0.55,1.19 -0.63,2.34q-0.08,1.01 0.94,1.03q19.01,0.25 36.98,0.01q0.5,0 0.94,-0.22q0.57,-0.28 0.44,-0.9q-2.34,-11.6 -14.11,-15.25q-3.59,-1.11 -6.44,-0.57q-13.07,2.5 -18.12,13.56z" fill="#0d161f"/>
+  <path id="svg_4" d="m312.3,100.22a0.5,0.49 -22.1 0 0 0.84,0.35q2.76,-2.64 5.82,-4.31q8.45,-4.62 16.71,-6.57c15.81,-3.72 33.58,-3.2 48.2,3.95q24.49,11.98 35.05,35.76c4.66,10.5 5.44,22.96 5.5,35.35q0.21,49.99 -0.12,88q-0.03,3.06 -0.08,6.16a1.32,1.32 0 0 1 -1.33,1.3q-20.22,-0.18 -40.18,-0.23q-3.64,-0.01 -8.13,-0.44a1.06,1.05 -87.3 0 1 -0.95,-1.05q0.02,-45.49 -0.22,-92.99c-0.03,-6.25 -1.21,-13.88 -5.05,-18.95q-5.33,-7.03 -12.32,-10.18c-10.99,-4.93 -24.52,-1.84 -33.13,6.37q-10.01,9.53 -10.07,23.76q-0.11,25.46 -0.1,48.98c0,3.52 -0.06,8.31 -1.1,11.68c-4.37,14.04 -17.31,19.5 -31.04,16.77c-8.22,-1.64 -15.07,-7.75 -17.62,-15.62q-1.45,-4.49 -1.42,-10.2q0.3,-64.69 0.1,-129.86a0.47,0.47 0 0 1 0.47,-0.47l48.46,-0.35a1.56,1.55 89.4 0 1 1.56,1.54l0.15,11.25z" fill="#0d161f"/>
+  <path id="svg_5" d="m265.63,344.43a2.02,2.01 76.7 0 0 -1.85,-1.15l-17.03,0.24a2.25,2.22 9.3 0 0 -2.06,1.46l-2.86,7.84a2.47,2.46 -79.1 0 1 -2.38,1.62l-6.23,-0.19q-1.19,-0.04 -0.88,-1.19q1.38,-5.23 2.81,-8.7c3.41,-8.3 6.48,-16.83 10.12,-25.35q2.96,-6.93 5.21,-14.24c0.46,-1.52 1.69,-2.64 3.37,-2.63c2.02,0 4.68,-0.78 5.7,1.58q7.68,17.74 18.16,44.75q0.96,2.46 1.48,5a0.67,0.66 84.3 0 1 -0.65,0.8l-6.05,-0.02q-2.16,-0.01 -3.1,-1.96l-3.76,-7.86zm-16.73,-10.31a0.34,0.34 0 0 0 0.32,0.47l12.85,-0.36a0.34,0.34 0 0 0 0.3,-0.48l-6.84,-14.7a0.34,0.34 0 0 0 -0.62,0.02l-6.01,15.05z" fill="#0d161f"/>
+  <rect id="svg_6" rx="2.17" height="52.28" width="9.84" y="302.19" x="345.67" fill="#0d161f"/>
+  <path id="svg_7" d="m303.07,338.46l-0.15,14.42q-0.01,1.55 -1.56,1.52l-5.84,-0.12q-1.79,-0.04 -1.81,-1.83c-0.24,-15.33 -0.25,-30.89 -0.27,-47.22q-0.01,-2.99 2.55,-3.06q12.47,-0.33 20.15,0.8q8.61,1.25 12.86,9.17c2.95,5.49 2.53,13.5 -1.5,18.65c-5.57,7.14 -14.88,6.62 -23.24,6.51a1.17,1.17 0 0 0 -1.19,1.16zm-0.15,-24.81l0.16,12.72a1.72,1.72 0 0 0 1.74,1.7l6.07,-0.08a10.01,7.98 -0.7 0 0 9.91,-8.1l0,-0.2a10.01,7.98 -0.7 0 0 -10.11,-7.86l-6.07,0.08a1.72,1.72 0 0 0 -1.7,1.74z" fill="#0d161f"/>
+  <rect id="svg_8" rx="3.58" height="7.26" width="79.2" y="322.99" x="107" fill="#0d161f"/>
+  <rect id="svg_9" rx="3.81" height="7.72" width="79.1" y="322.78" x="417.27" fill="#0d161f"/>
+ </g>
+</svg>
--- a/web/berry/src/assets/images/logo.svg
+++ b/web/berry/src/assets/images/logo.svg
@ -0,0 +1,13 @@
+<svg viewBox="0 0 590 360" xmlns="http://www.w3.org/2000/svg" version="1.1">
+ <g>
+  <ellipse transform="rotate(103.6 287.6 32.87)" id="svg_1" ry="28.14" rx="28.47" cy="32.87" cx="287.60001" fill="#0d161f"/>
+  <path id="svg_2" d="m232.92,128.89c3.78,27.29 -1.81,55.44 -17.71,78.09a2.62,2.62 0 0 0 -0.06,2.92c1.24,1.92 2.96,5.05 5.56,4.94q5.25,-0.22 10.79,0.11a1.26,1.26 0 0 1 1.19,1.27l-0.4,42.53a1.31,1.31 0 0 1 -1.31,1.3q-16.77,-0.09 -36.53,0.01q-2.25,0.02 -3.71,-1.56q-16.02,-17.28 -31.98,-35.32c-5.13,-5.8 -10.18,-11.16 -14.86,-17.59a1.35,1.34 -31.1 0 1 0.5,-2q12.88,-6.32 22.13,-17.12q18.18,-21.23 15.08,-48.84q-2.66,-23.7 -22.4,-40.46q-23.43,-19.9 -54.88,-13.86c-4.1,0.79 -7.83,2.5 -11.72,4.12q-11.86,4.94 -20.59,14.64c-14.25,15.81 -20.07,36.4 -15.05,57.16q4.99,20.63 22.86,35.71c10.45,8.81 23.7,13.12 37.26,14.18q1.47,0.11 3.6,2.65c11.68,13.89 24.48,27.72 35.94,41.96a0.43,0.43 0 0 1 -0.21,0.68q-22.51,7.27 -47.37,5.37q-19.4,-1.47 -39.74,-11.22q-18.27,-8.75 -30.59,-21.28q-18.66,-18.98 -28.02,-43.57q-10.8,-28.4 -4.93,-58.67c1.59,-8.17 4.03,-17 7.42,-24.61q5.08,-11.38 11.61,-20.64q25.41,-36.03 68.45,-46.13q32.42,-7.61 64.23,3.92q25.31,9.17 43.2,27.31c16.85,17.09 28.91,40.01 32.24,64z" fill="#0d161f"/>
+  <path id="svg_3" d="m499.47,180.61c6.45,13.53 16.44,21.75 31.96,22q11.94,0.19 22.17,-5.36q2.21,-1.2 3.93,0.69q12.56,13.78 24.89,28.47q1.21,1.44 1.44,3.13a0.95,0.95 0 0 1 -0.36,0.89c-1.62,1.23 -3.33,2.71 -5.03,3.69q-29.37,17.01 -62.47,11.31c-20.61,-3.55 -39.05,-15.24 -51.47,-32.51q-6.4,-8.89 -9.91,-17.08c-2.62,-6.12 -4.73,-13.3 -5.41,-20.08q-3.96,-39.88 22.94,-67.74c9.48,-9.81 21.15,-16.67 34.39,-19.49c16.54,-3.53 34.64,-1.83 48.77,7.1q13.92,8.79 21.13,20.4q11.07,17.84 10.48,38.92c-0.02,0.94 -0.21,1.81 -0.85,2.54q-7.73,8.77 -18.71,20.16c-1.28,1.32 -2.61,2.26 -4.51,2.23q-24.45,-0.37 -51.64,-0.41q-5.03,0 -10.84,-0.22a0.96,0.95 -11.7 0 0 -0.9,1.36zm1.12,-37.17q-0.55,1.19 -0.63,2.34q-0.08,1.01 0.94,1.03q19.01,0.25 36.98,0.01q0.5,0 0.94,-0.22q0.57,-0.28 0.44,-0.9q-2.34,-11.6 -14.11,-15.25q-3.59,-1.11 -6.44,-0.57q-13.07,2.5 -18.12,13.56z" fill="#0d161f"/>
+  <path id="svg_4" d="m312.3,100.22a0.5,0.49 -22.1 0 0 0.84,0.35q2.76,-2.64 5.82,-4.31q8.45,-4.62 16.71,-6.57c15.81,-3.72 33.58,-3.2 48.2,3.95q24.49,11.98 35.05,35.76c4.66,10.5 5.44,22.96 5.5,35.35q0.21,49.99 -0.12,88q-0.03,3.06 -0.08,6.16a1.32,1.32 0 0 1 -1.33,1.3q-20.22,-0.18 -40.18,-0.23q-3.64,-0.01 -8.13,-0.44a1.06,1.05 -87.3 0 1 -0.95,-1.05q0.02,-45.49 -0.22,-92.99c-0.03,-6.25 -1.21,-13.88 -5.05,-18.95q-5.33,-7.03 -12.32,-10.18c-10.99,-4.93 -24.52,-1.84 -33.13,6.37q-10.01,9.53 -10.07,23.76q-0.11,25.46 -0.1,48.98c0,3.52 -0.06,8.31 -1.1,11.68c-4.37,14.04 -17.31,19.5 -31.04,16.77c-8.22,-1.64 -15.07,-7.75 -17.62,-15.62q-1.45,-4.49 -1.42,-10.2q0.3,-64.69 0.1,-129.86a0.47,0.47 0 0 1 0.47,-0.47l48.46,-0.35a1.56,1.55 89.4 0 1 1.56,1.54l0.15,11.25z" fill="#0d161f"/>
+  <path id="svg_5" d="m265.63,344.43a2.02,2.01 76.7 0 0 -1.85,-1.15l-17.03,0.24a2.25,2.22 9.3 0 0 -2.06,1.46l-2.86,7.84a2.47,2.46 -79.1 0 1 -2.38,1.62l-6.23,-0.19q-1.19,-0.04 -0.88,-1.19q1.38,-5.23 2.81,-8.7c3.41,-8.3 6.48,-16.83 10.12,-25.35q2.96,-6.93 5.21,-14.24c0.46,-1.52 1.69,-2.64 3.37,-2.63c2.02,0 4.68,-0.78 5.7,1.58q7.68,17.74 18.16,44.75q0.96,2.46 1.48,5a0.67,0.66 84.3 0 1 -0.65,0.8l-6.05,-0.02q-2.16,-0.01 -3.1,-1.96l-3.76,-7.86zm-16.73,-10.31a0.34,0.34 0 0 0 0.32,0.47l12.85,-0.36a0.34,0.34 0 0 0 0.3,-0.48l-6.84,-14.7a0.34,0.34 0 0 0 -0.62,0.02l-6.01,15.05z" fill="#0d161f"/>
+  <rect id="svg_6" rx="2.17" height="52.28" width="9.84" y="302.19" x="345.67" fill="#0d161f"/>
+  <path id="svg_7" d="m303.07,338.46l-0.15,14.42q-0.01,1.55 -1.56,1.52l-5.84,-0.12q-1.79,-0.04 -1.81,-1.83c-0.24,-15.33 -0.25,-30.89 -0.27,-47.22q-0.01,-2.99 2.55,-3.06q12.47,-0.33 20.15,0.8q8.61,1.25 12.86,9.17c2.95,5.49 2.53,13.5 -1.5,18.65c-5.57,7.14 -14.88,6.62 -23.24,6.51a1.17,1.17 0 0 0 -1.19,1.16zm-0.15,-24.81l0.16,12.72a1.72,1.72 0 0 0 1.74,1.7l6.07,-0.08a10.01,7.98 -0.7 0 0 9.91,-8.1l0,-0.2a10.01,7.98 -0.7 0 0 -10.11,-7.86l-6.07,0.08a1.72,1.72 0 0 0 -1.7,1.74z" fill="#0d161f"/>
+  <rect id="svg_8" rx="3.58" height="7.26" width="79.2" y="322.99" x="107" fill="#0d161f"/>
+  <rect id="svg_9" rx="3.81" height="7.72" width="79.1" y="322.78" x="417.27" fill="#0d161f"/>
+ </g>
+</svg>
--- a/web/berry/src/assets/images/users/user-round.svg
+++ b/web/berry/src/assets/images/users/user-round.svg
--- a/web/berry/src/assets/scss/_themes-vars.module.scss
+++ b/web/berry/src/assets/scss/_themes-vars.module.scss
@ -0,0 +1,157 @@
+// paper & background
+$paper: #ffffff;
+
+// primary
+$primaryLight: #eef2f6;
+$primaryMain: #2196f3;
+$primaryDark: #1e88e5;
+$primary200: #90caf9;
+$primary800: #1565c0;
+
+// secondary
+$secondaryLight: #ede7f6;
+$secondaryMain: #673ab7;
+$secondaryDark: #5e35b1;
+$secondary200: #b39ddb;
+$secondary800: #4527a0;
+
+// success Colors
+$successLight: #b9f6ca;
+$success200: #69f0ae;
+$successMain: #00e676;
+$successDark: #00c853;
+
+// error
+$errorLight: #ef9a9a;
+$errorMain: #f44336;
+$errorDark: #c62828;
+
+// orange
+$orangeLight: #fbe9e7;
+$orangeMain: #ffab91;
+$orangeDark: #d84315;
+
+// warning
+$warningLight: #fff8e1;
+$warningMain: #ffe57f;
+$warningDark: #ffc107;
+
+// grey
+$grey50: #f8fafc;
+$grey100: #eef2f6;
+$grey200: #e3e8ef;
+$grey300: #cdd5df;
+$grey500: #697586;
+$grey600: #4b5565;
+$grey700: #364152;
+$grey900: #121926;
+
+// ==============================|| DARK THEME VARIANTS ||============================== //
+
+// paper & background
+$darkBackground: #1a223f; // level 3
+$darkPaper: #111936; // level 4
+
+// dark 800 & 900
+$darkLevel1: #29314f; // level 1
+$darkLevel2: #212946; // level 2
+
+// primary dark
+$darkPrimaryLight: #eef2f6;
+$darkPrimaryMain: #2196f3;
+$darkPrimaryDark: #1e88e5;
+$darkPrimary200: #90caf9;
+$darkPrimary800: #1565c0;
+
+// secondary dark
+$darkSecondaryLight: #d1c4e9;
+$darkSecondaryMain: #7c4dff;
+$darkSecondaryDark: #651fff;
+$darkSecondary200: #b39ddb;
+$darkSecondary800: #6200ea;
+
+// text variants
+$darkTextTitle: #d7dcec;
+$darkTextPrimary: #bdc8f0;
+$darkTextSecondary: #8492c4;
+
+// ==============================|| JAVASCRIPT ||============================== //
+
+:export {
+  // paper & background
+  paper: $paper;
+
+  // primary
+  primaryLight: $primaryLight;
+  primary200: $primary200;
+  primaryMain: $primaryMain;
+  primaryDark: $primaryDark;
+  primary800: $primary800;
+
+  // secondary
+  secondaryLight: $secondaryLight;
+  secondary200: $secondary200;
+  secondaryMain: $secondaryMain;
+  secondaryDark: $secondaryDark;
+  secondary800: $secondary800;
+
+  // success
+  successLight: $successLight;
+  success200: $success200;
+  successMain: $successMain;
+  successDark: $successDark;
+
+  // error
+  errorLight: $errorLight;
+  errorMain: $errorMain;
+  errorDark: $errorDark;
+
+  // orange
+  orangeLight: $orangeLight;
+  orangeMain: $orangeMain;
+  orangeDark: $orangeDark;
+
+  // warning
+  warningLight: $warningLight;
+  warningMain: $warningMain;
+  warningDark: $warningDark;
+
+  // grey
+  grey50: $grey50;
+  grey100: $grey100;
+  grey200: $grey200;
+  grey300: $grey300;
+  grey500: $grey500;
+  grey600: $grey600;
+  grey700: $grey700;
+  grey900: $grey900;
+
+  // ==============================|| DARK THEME VARIANTS ||============================== //
+
+  // paper & background
+  darkPaper: $darkPaper;
+  darkBackground: $darkBackground;
+
+  // dark 800 & 900
+  darkLevel1: $darkLevel1;
+  darkLevel2: $darkLevel2;
+
+  // text variants
+  darkTextTitle: $darkTextTitle;
+  darkTextPrimary: $darkTextPrimary;
+  darkTextSecondary: $darkTextSecondary;
+
+  // primary dark
+  darkPrimaryLight: $darkPrimaryLight;
+  darkPrimaryMain: $darkPrimaryMain;
+  darkPrimaryDark: $darkPrimaryDark;
+  darkPrimary200: $darkPrimary200;
+  darkPrimary800: $darkPrimary800;
+
+  // secondary dark
+  darkSecondaryLight: $darkSecondaryLight;
+  darkSecondaryMain: $darkSecondaryMain;
+  darkSecondaryDark: $darkSecondaryDark;
+  darkSecondary200: $darkSecondary200;
+  darkSecondary800: $darkSecondary800;
+}
--- a/web/berry/src/assets/scss/style.scss
+++ b/web/berry/src/assets/scss/style.scss
@ -0,0 +1,128 @@
+// color variants
+@import 'themes-vars.module.scss';
+
+// third-party
+@import '~react-perfect-scrollbar/dist/css/styles.css';
+
+// ==============================|| LIGHT BOX ||============================== //
+.fullscreen .react-images__blanket {
+  z-index: 1200;
+}
+
+// ==============================|| APEXCHART ||============================== //
+
+.apexcharts-legend-series .apexcharts-legend-marker {
+  margin-right: 8px;
+}
+
+// ==============================|| PERFECT SCROLLBAR ||============================== //
+
+.scrollbar-container {
+  .ps__rail-y {
+    &:hover > .ps__thumb-y,
+    &:focus > .ps__thumb-y,
+    &.ps--clicking .ps__thumb-y {
+      background-color: $grey500;
+      width: 5px;
+    }
+  }
+  .ps__thumb-y {
+    background-color: $grey500;
+    border-radius: 6px;
+    width: 5px;
+    right: 0;
+  }
+}
+
+.scrollbar-container.ps,
+.scrollbar-container > .ps {
+  &.ps--active-y > .ps__rail-y {
+    width: 5px;
+    background-color: transparent !important;
+    z-index: 999;
+    &:hover,
+    &.ps--clicking {
+      width: 5px;
+      background-color: transparent;
+    }
+  }
+  &.ps--scrolling-y > .ps__rail-y,
+  &.ps--scrolling-x > .ps__rail-x {
+    opacity: 0.4;
+    background-color: transparent;
+  }
+}
+
+// ==============================|| ANIMATION KEYFRAMES ||============================== //
+
+@keyframes wings {
+  50% {
+    transform: translateY(-40px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes bounce {
+  0%,
+  20%,
+  53%,
+  to {
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translateZ(0);
+  }
+  40%,
+  43% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -5px, 0);
+  }
+  70% {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -7px, 0);
+  }
+  80% {
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translateZ(0);
+  }
+  90% {
+    transform: translate3d(0, -2px, 0);
+  }
+}
+
+@keyframes slideY {
+  0%,
+  50%,
+  100% {
+    transform: translateY(0px);
+  }
+  25% {
+    transform: translateY(-10px);
+  }
+  75% {
+    transform: translateY(10px);
+  }
+}
+
+@keyframes slideX {
+  0%,
+  50%,
+  100% {
+    transform: translateX(0px);
+  }
+  25% {
+    transform: translateX(-10px);
+  }
+  75% {
+    transform: translateX(10px);
+  }
+}
--- a/web/berry/src/config.js
+++ b/web/berry/src/config.js
@ -0,0 +1,29 @@
+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: '/',
+  defaultPath: '/panel/dashboard',
+  fontFamily: `'Roboto', sans-serif, Helvetica, Arial, sans-serif`,
+  borderRadius: 12,
+  siteInfo: {
+    chat_link: '',
+    display_in_currency: true,
+    email_verification: false,
+    footer_html: '',
+    github_client_id: '',
+    github_oauth: false,
+    logo: '',
+    quota_per_unit: 500000,
+    server_address: '',
+    start_time: 0,
+    system_name: 'One API',
+    top_up_link: '',
+    turnstile_check: false,
+    turnstile_site_key: '',
+    version: '',
+    wechat_login: false,
+    wechat_qrcode: ''
+  }
+};
+
+export default config;
--- a/web/berry/src/constants/ChannelConstants.js
+++ b/web/berry/src/constants/ChannelConstants.js
@ -0,0 +1,146 @@
+export const CHANNEL_OPTIONS = {
+  1: {
+    key: 1,
+    text: 'OpenAI',
+    value: 1,
+    color: 'primary'
+  },
+  14: {
+    key: 14,
+    text: 'Anthropic Claude',
+    value: 14,
+    color: 'info'
+  },
+  3: {
+    key: 3,
+    text: 'Azure OpenAI',
+    value: 3,
+    color: 'orange'
+  },
+  11: {
+    key: 11,
+    text: 'Google PaLM2',
+    value: 11,
+    color: 'orange'
+  },
+  24: {
+    key: 24,
+    text: 'Google Gemini',
+    value: 24,
+    color: 'orange'
+  },
+  15: {
+    key: 15,
+    text: '百度文心千帆',
+    value: 15,
+    color: 'default'
+  },
+  17: {
+    key: 17,
+    text: '阿里通义千问',
+    value: 17,
+    color: 'default'
+  },
+  18: {
+    key: 18,
+    text: '讯飞星火认知',
+    value: 18,
+    color: 'default'
+  },
+  16: {
+    key: 16,
+    text: '智谱 ChatGLM',
+    value: 16,
+    color: 'default'
+  },
+  19: {
+    key: 19,
+    text: '360 智脑',
+    value: 19,
+    color: 'default'
+  },
+  23: {
+    key: 23,
+    text: '腾讯混元',
+    value: 23,
+    color: 'default'
+  },
+  8: {
+    key: 8,
+    text: '自定义渠道',
+    value: 8,
+    color: 'primary'
+  },
+  22: {
+    key: 22,
+    text: '知识库：FastGPT',
+    value: 22,
+    color: 'default'
+  },
+  21: {
+    key: 21,
+    text: '知识库：AI Proxy',
+    value: 21,
+    color: 'purple'
+  },
+  20: {
+    key: 20,
+    text: '代理：OpenRouter',
+    value: 20,
+    color: 'primary'
+  },
+  2: {
+    key: 2,
+    text: '代理：API2D',
+    value: 2,
+    color: 'primary'
+  },
+  5: {
+    key: 5,
+    text: '代理：OpenAI-SB',
+    value: 5,
+    color: 'primary'
+  },
+  7: {
+    key: 7,
+    text: '代理：OhMyGPT',
+    value: 7,
+    color: 'primary'
+  },
+  10: {
+    key: 10,
+    text: '代理：AI Proxy',
+    value: 10,
+    color: 'primary'
+  },
+  4: {
+    key: 4,
+    text: '代理：CloseAI',
+    value: 4,
+    color: 'primary'
+  },
+  6: {
+    key: 6,
+    text: '代理：OpenAI Max',
+    value: 6,
+    color: 'primary'
+  },
+  9: {
+    key: 9,
+    text: '代理：AI.LS',
+    value: 9,
+    color: 'primary'
+  },
+  12: {
+    key: 12,
+    text: '代理：API2GPT',
+    value: 12,
+    color: 'primary'
+  },
+  13: {
+    key: 13,
+    text: '代理：AIGC2D',
+    value: 13,
+    color: 'primary'
+  }
+};
--- a/web/berry/src/constants/CommonConstants.js
+++ b/web/berry/src/constants/CommonConstants.js
--- a/web/berry/src/constants/SnackbarConstants.js
+++ b/web/berry/src/constants/SnackbarConstants.js
@ -0,0 +1,27 @@
+export const snackbarConstants = {
+  Common: {
+    ERROR: {
+      variant: 'error',
+      autoHideDuration: 5000
+    },
+    WARNING: {
+      variant: 'warning',
+      autoHideDuration: 10000
+    },
+    SUCCESS: {
+      variant: 'success',
+      autoHideDuration: 1500
+    },
+    INFO: {
+      variant: 'info',
+      autoHideDuration: 3000
+    },
+    NOTICE: {
+      variant: 'info',
+      autoHideDuration: 20000
+    }
+  },
+  Mobile: {
+    anchorOrigin: { vertical: 'bottom', horizontal: 'center' }
+  }
+};
--- a/web/berry/src/constants/index.js
+++ b/web/berry/src/constants/index.js
@ -0,0 +1,3 @@
+export * from './SnackbarConstants';
+export * from './CommonConstants';
+export * from './ChannelConstants';
--- a/web/berry/src/contexts/StatusContext.js
+++ b/web/berry/src/contexts/StatusContext.js
@ -0,0 +1,70 @@
+import { useEffect, useCallback, createContext } from "react";
+import { API } from "utils/api";
+import { showNotice, showError } from "utils/common";
+import { SET_SITE_INFO } from "store/actions";
+import { useDispatch } from "react-redux";
+
+export const LoadStatusContext = createContext();
+
+// eslint-disable-next-line
+const StatusProvider = ({ children }) => {
+  const dispatch = useDispatch();
+
+  const loadStatus = useCallback(async () => {
+    const res = await API.get("/api/status");
+    const { success, data } = res.data;
+    let system_name = "";
+    if (success) {
+      if (!data.chat_link) {
+        delete data.chat_link;
+      }
+      localStorage.setItem("siteInfo", JSON.stringify(data));
+      localStorage.setItem("quota_per_unit", data.quota_per_unit);
+      localStorage.setItem("display_in_currency", data.display_in_currency);
+      dispatch({ type: SET_SITE_INFO, payload: data });
+      if (
+        data.version !== process.env.REACT_APP_VERSION &&
+        data.version !== "v0.0.0" &&
+        data.version !== "" &&
+        process.env.REACT_APP_VERSION !== ""
+      ) {
+        showNotice(
+          `新版本可用：${data.version}，请使用快捷键 Shift + F5 刷新页面`
+        );
+      }
+      if (data.system_name) {
+        system_name = data.system_name;
+      }
+    } else {
+      const backupSiteInfo = localStorage.getItem("siteInfo");
+      if (backupSiteInfo) {
+        const data = JSON.parse(backupSiteInfo);
+        if (data.system_name) {
+          system_name = data.system_name;
+        }
+        dispatch({
+          type: SET_SITE_INFO,
+          payload: data,
+        });
+      }
+      showError("无法正常连接至服务器！");
+    }
+
+    if (system_name) {
+      document.title = system_name;
+    }
+  }, [dispatch]);
+
+  useEffect(() => {
+    loadStatus().then();
+  }, [loadStatus]);
+
+  return (
+    <LoadStatusContext.Provider value={loadStatus}>
+      {" "}
+      {children}{" "}
+    </LoadStatusContext.Provider>
+  );
+};
+
+export default StatusProvider;
--- a/web/berry/src/contexts/UserContext.js
+++ b/web/berry/src/contexts/UserContext.js
@ -0,0 +1,29 @@
+// contexts/User/index.jsx
+import React, { useEffect, useCallback, createContext, useState } from 'react';
+import { LOGIN } from 'store/actions';
+import { useDispatch } from 'react-redux';
+
+export const UserContext = createContext();
+
+// eslint-disable-next-line
+const UserProvider = ({ children }) => {
+  const dispatch = useDispatch();
+  const [isUserLoaded, setIsUserLoaded] = useState(false);
+
+  const loadUser = useCallback(() => {
+    let user = localStorage.getItem('user');
+    if (user) {
+      let data = JSON.parse(user);
+      dispatch({ type: LOGIN, payload: data });
+    }
+    setIsUserLoaded(true);
+  }, [dispatch]);
+
+  useEffect(() => {
+    loadUser();
+  }, [loadUser]);
+
+  return <UserContext.Provider value={{ loadUser, isUserLoaded }}> {children} </UserContext.Provider>;
+};
+
+export default UserProvider;
--- a/web/berry/src/hooks/useAuth.js
+++ b/web/berry/src/hooks/useAuth.js
@ -0,0 +1,13 @@
+import { isAdmin } from 'utils/common';
+import { useNavigate } from 'react-router-dom';
+const navigate = useNavigate();
+
+const useAuth = () => {
+  const userIsAdmin = isAdmin();
+
+  if (!userIsAdmin) {
+    navigate('/panel/404');
+  }
+};
+
+export default useAuth;
--- a/web/berry/src/hooks/useLogin.js
+++ b/web/berry/src/hooks/useLogin.js
@ -0,0 +1,78 @@
+import { API } from 'utils/api';
+import { useDispatch } from 'react-redux';
+import { LOGIN } from 'store/actions';
+import { useNavigate } from 'react-router';
+import { showSuccess } from 'utils/common';
+
+const useLogin = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const login = async (username, password) => {
+    try {
+      const res = await API.post(`/api/user/login`, {
+        username,
+        password
+      });
+      const { success, message, data } = res.data;
+      if (success) {
+        localStorage.setItem('user', JSON.stringify(data));
+        dispatch({ type: LOGIN, payload: data });
+        navigate('/panel');
+      }
+      return { success, message };
+    } catch (err) {
+      // 请求失败，设置错误信息
+      return { success: false, message: '' };
+    }
+  };
+
+  const githubLogin = async (code, state) => {
+    try {
+      const res = await API.get(`/api/oauth/github?code=${code}&state=${state}`);
+      const { success, message, data } = res.data;
+      if (success) {
+        if (message === 'bind') {
+          showSuccess('绑定成功！');
+          navigate('/panel');
+        } else {
+          dispatch({ type: LOGIN, payload: data });
+          localStorage.setItem('user', JSON.stringify(data));
+          showSuccess('登录成功！');
+          navigate('/panel');
+        }
+      }
+      return { success, message };
+    } catch (err) {
+      // 请求失败，设置错误信息
+      return { success: false, message: '' };
+    }
+  };
+
+  const wechatLogin = async (code) => {
+    try {
+      const res = await API.get(`/api/oauth/wechat?code=${code}`);
+      const { success, message, data } = res.data;
+      if (success) {
+        dispatch({ type: LOGIN, payload: data });
+        localStorage.setItem('user', JSON.stringify(data));
+        showSuccess('登录成功！');
+        navigate('/panel');
+      }
+      return { success, message };
+    } catch (err) {
+      // 请求失败，设置错误信息
+      return { success: false, message: '' };
+    }
+  };
+
+  const logout = async () => {
+    await API.get('/api/user/logout');
+    localStorage.removeItem('user');
+    dispatch({ type: LOGIN, payload: null });
+    navigate('/');
+  };
+
+  return { login, logout, githubLogin, wechatLogin };
+};
+
+export default useLogin;
--- a/web/berry/src/hooks/useRegister.js
+++ b/web/berry/src/hooks/useRegister.js
@ -0,0 +1,39 @@
+import { API } from 'utils/api';
+import { useNavigate } from 'react-router';
+import { showSuccess } from 'utils/common';
+
+const useRegister = () => {
+  const navigate = useNavigate();
+  const register = async (input, turnstile) => {
+    try {
+      const res = await API.post(`/api/user/register?turnstile=${turnstile}`, input);
+      const { success, message } = res.data;
+      if (success) {
+        showSuccess('注册成功！');
+        navigate('/login');
+      }
+      return { success, message };
+    } catch (err) {
+      // 请求失败，设置错误信息
+      return { success: false, message: '' };
+    }
+  };
+
+  const sendVerificationCode = async (email, turnstile) => {
+    try {
+      const res = await API.get(`/api/verification?email=${email}&turnstile=${turnstile}`);
+      const { success, message } = res.data;
+      if (success) {
+        showSuccess('验证码发送成功，请检查你的邮箱！');
+      }
+      return { success, message };
+    } catch (err) {
+      // 请求失败，设置错误信息
+      return { success: false, message: '' };
+    }
+  };
+
+  return { register, sendVerificationCode };
+};
+
+export default useRegister;
--- a/web/berry/src/hooks/useScriptRef.js
+++ b/web/berry/src/hooks/useScriptRef.js
@ -0,0 +1,18 @@
+import { useEffect, useRef } from 'react';
+
+// ==============================|| ELEMENT REFERENCE HOOKS  ||============================== //
+
+const useScriptRef = () => {
+  const scripted = useRef(true);
+
+  useEffect(
+    () => () => {
+      scripted.current = true;
+    },
+    []
+  );
+
+  return scripted;
+};
+
+export default useScriptRef;
--- a/web/berry/src/index.js
+++ b/web/berry/src/index.js
@ -0,0 +1,31 @@
+import { createRoot } from 'react-dom/client';
+
+// third party
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+
+// project imports
+import * as serviceWorker from 'serviceWorker';
+import App from 'App';
+import { store } from 'store';
+
+// style + assets
+import 'assets/scss/style.scss';
+import config from './config';
+
+// ==============================|| REACT DOM RENDER  ||============================== //
+
+const container = document.getElementById('root');
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+root.render(
+  <Provider store={store}>
+    <BrowserRouter basename={config.basename}>
+      <App />
+    </BrowserRouter>
+  </Provider>
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: https://bit.ly/CRA-PWA
+serviceWorker.register();
--- a/web/berry/src/layout/MainLayout/Header/ProfileSection/index.js
+++ b/web/berry/src/layout/MainLayout/Header/ProfileSection/index.js
@ -0,0 +1,173 @@
+import { useState, useRef, useEffect } from 'react';
+
+import { useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import {
+  Avatar,
+  Chip,
+  ClickAwayListener,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Paper,
+  Popper,
+  Typography
+} from '@mui/material';
+
+// project imports
+import MainCard from 'ui-component/cards/MainCard';
+import Transitions from 'ui-component/extended/Transitions';
+import User1 from 'assets/images/users/user-round.svg';
+import useLogin from 'hooks/useLogin';
+
+// assets
+import { IconLogout, IconSettings, IconUserScan } from '@tabler/icons-react';
+
+// ==============================|| PROFILE MENU ||============================== //
+
+const ProfileSection = () => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+  const customization = useSelector((state) => state.customization);
+  const { logout } = useLogin();
+
+  const [open, setOpen] = useState(false);
+  /**
+   * anchorRef is used on different componets and specifying one type leads to other components throwing an error
+   * */
+  const anchorRef = useRef(null);
+  const handleLogout = async () => {
+    logout();
+  };
+
+  const handleClose = (event) => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+
+  const handleToggle = () => {
+    setOpen((prevOpen) => !prevOpen);
+  };
+
+  const prevOpen = useRef(open);
+  useEffect(() => {
+    if (prevOpen.current === true && open === false) {
+      anchorRef.current.focus();
+    }
+
+    prevOpen.current = open;
+  }, [open]);
+
+  return (
+    <>
+      <Chip
+        sx={{
+          height: '48px',
+          alignItems: 'center',
+          borderRadius: '27px',
+          transition: 'all .2s ease-in-out',
+          borderColor: theme.palette.primary.light,
+          backgroundColor: theme.palette.primary.light,
+          '&[aria-controls="menu-list-grow"], &:hover': {
+            borderColor: theme.palette.primary.main,
+            background: `${theme.palette.primary.main}!important`,
+            color: theme.palette.primary.light,
+            '& svg': {
+              stroke: theme.palette.primary.light
+            }
+          },
+          '& .MuiChip-label': {
+            lineHeight: 0
+          }
+        }}
+        icon={
+          <Avatar
+            src={User1}
+            sx={{
+              ...theme.typography.mediumAvatar,
+              margin: '8px 0 8px 8px !important',
+              cursor: 'pointer'
+            }}
+            ref={anchorRef}
+            aria-controls={open ? 'menu-list-grow' : undefined}
+            aria-haspopup="true"
+            color="inherit"
+          />
+        }
+        label={<IconSettings stroke={1.5} size="1.5rem" color={theme.palette.primary.main} />}
+        variant="outlined"
+        ref={anchorRef}
+        aria-controls={open ? 'menu-list-grow' : undefined}
+        aria-haspopup="true"
+        onClick={handleToggle}
+        color="primary"
+      />
+      <Popper
+        placement="bottom-end"
+        open={open}
+        anchorEl={anchorRef.current}
+        role={undefined}
+        transition
+        disablePortal
+        popperOptions={{
+          modifiers: [
+            {
+              name: 'offset',
+              options: {
+                offset: [0, 14]
+              }
+            }
+          ]
+        }}
+      >
+        {({ TransitionProps }) => (
+          <Transitions in={open} {...TransitionProps}>
+            <Paper>
+              <ClickAwayListener onClickAway={handleClose}>
+                <MainCard border={false} elevation={16} content={false} boxShadow shadow={theme.shadows[16]}>
+                  <List
+                    component="nav"
+                    sx={{
+                      width: '100%',
+                      maxWidth: 350,
+                      minWidth: 150,
+                      backgroundColor: theme.palette.background.paper,
+                      borderRadius: '10px',
+                      [theme.breakpoints.down('md')]: {
+                        minWidth: '100%'
+                      },
+                      '& .MuiListItemButton-root': {
+                        mt: 0.5
+                      }
+                    }}
+                  >
+                    <ListItemButton sx={{ borderRadius: `${customization.borderRadius}px` }} onClick={() => navigate('/panel/profile')}>
+                      <ListItemIcon>
+                        <IconUserScan stroke={1.5} size="1.3rem" />
+                      </ListItemIcon>
+                      <ListItemText primary={<Typography variant="body2">设置</Typography>} />
+                    </ListItemButton>
+
+                    <ListItemButton sx={{ borderRadius: `${customization.borderRadius}px` }} onClick={handleLogout}>
+                      <ListItemIcon>
+                        <IconLogout stroke={1.5} size="1.3rem" />
+                      </ListItemIcon>
+                      <ListItemText primary={<Typography variant="body2">登出</Typography>} />
+                    </ListItemButton>
+                  </List>
+                </MainCard>
+              </ClickAwayListener>
+            </Paper>
+          </Transitions>
+        )}
+      </Popper>
+    </>
+  );
+};
+
+export default ProfileSection;
--- a/web/berry/src/layout/MainLayout/Header/index.js
+++ b/web/berry/src/layout/MainLayout/Header/index.js
@ -0,0 +1,68 @@
+import PropTypes from 'prop-types';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Avatar, Box, ButtonBase } from '@mui/material';
+
+// project imports
+import LogoSection from '../LogoSection';
+import ProfileSection from './ProfileSection';
+
+// assets
+import { IconMenu2 } from '@tabler/icons-react';
+
+// ==============================|| MAIN NAVBAR / HEADER ||============================== //
+
+const Header = ({ handleLeftDrawerToggle }) => {
+  const theme = useTheme();
+
+  return (
+    <>
+      {/* logo & toggler button */}
+      <Box
+        sx={{
+          width: 228,
+          display: 'flex',
+          [theme.breakpoints.down('md')]: {
+            width: 'auto'
+          }
+        }}
+      >
+        <Box component="span" sx={{ display: { xs: 'none', md: 'block' }, flexGrow: 1 }}>
+          <LogoSection />
+        </Box>
+        <ButtonBase sx={{ borderRadius: '12px', overflow: 'hidden' }}>
+          <Avatar
+            variant="rounded"
+            sx={{
+              ...theme.typography.commonAvatar,
+              ...theme.typography.mediumAvatar,
+              transition: 'all .2s ease-in-out',
+              background: theme.palette.secondary.light,
+              color: theme.palette.secondary.dark,
+              '&:hover': {
+                background: theme.palette.secondary.dark,
+                color: theme.palette.secondary.light
+              }
+            }}
+            onClick={handleLeftDrawerToggle}
+            color="inherit"
+          >
+            <IconMenu2 stroke={1.5} size="1.3rem" />
+          </Avatar>
+        </ButtonBase>
+      </Box>
+
+      <Box sx={{ flexGrow: 1 }} />
+      <Box sx={{ flexGrow: 1 }} />
+
+      <ProfileSection />
+    </>
+  );
+};
+
+Header.propTypes = {
+  handleLeftDrawerToggle: PropTypes.func
+};
+
+export default Header;
--- a/web/berry/src/layout/MainLayout/LogoSection/index.js
+++ b/web/berry/src/layout/MainLayout/LogoSection/index.js
@ -0,0 +1,23 @@
+import { Link } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+
+// material-ui
+import { ButtonBase } from '@mui/material';
+
+// project imports
+import Logo from 'ui-component/Logo';
+import { MENU_OPEN } from 'store/actions';
+
+// ==============================|| MAIN LOGO ||============================== //
+
+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="/">
+      <Logo />
+    </ButtonBase>
+  );
+};
+
+export default LogoSection;
--- a/web/berry/src/layout/MainLayout/Sidebar/MenuCard/index.js
+++ b/web/berry/src/layout/MainLayout/Sidebar/MenuCard/index.js
@ -0,0 +1,130 @@
+// import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+
+// material-ui
+import { styled, useTheme } from '@mui/material/styles';
+import {
+  Avatar,
+  Card,
+  CardContent,
+  // Grid,
+  // LinearProgress,
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Typography
+  // linearProgressClasses
+} from '@mui/material';
+import User1 from 'assets/images/users/user-round.svg';
+import { useNavigate } from 'react-router-dom';
+
+// assets
+// import TableChartOutlinedIcon from '@mui/icons-material/TableChartOutlined';
+
+// styles
+// const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+//   height: 10,
+//   borderRadius: 30,
+//   [`&.${linearProgressClasses.colorPrimary}`]: {
+//     backgroundColor: '#fff'
+//   },
+//   [`& .${linearProgressClasses.bar}`]: {
+//     borderRadius: 5,
+//     backgroundColor: theme.palette.primary.main
+//   }
+// }));
+
+const CardStyle = styled(Card)(({ theme }) => ({
+  background: theme.palette.primary.light,
+  marginBottom: '22px',
+  overflow: 'hidden',
+  position: 'relative',
+  '&:after': {
+    content: '""',
+    position: 'absolute',
+    width: '157px',
+    height: '157px',
+    background: theme.palette.primary[200],
+    borderRadius: '50%',
+    top: '-105px',
+    right: '-96px'
+  }
+}));
+
+// ==============================|| PROGRESS BAR WITH LABEL ||============================== //
+
+// function LinearProgressWithLabel({ value, ...others }) {
+//   const theme = useTheme();
+
+//   return (
+//     <Grid container direction="column" spacing={1} sx={{ mt: 1.5 }}>
+//       <Grid item>
+//         <Grid container justifyContent="space-between">
+//           <Grid item>
+//             <Typography variant="h6" sx={{ color: theme.palette.primary[800] }}>
+//               Progress
+//             </Typography>
+//           </Grid>
+//           <Grid item>
+//             <Typography variant="h6" color="inherit">{`${Math.round(value)}%`}</Typography>
+//           </Grid>
+//         </Grid>
+//       </Grid>
+//       <Grid item>
+//         <BorderLinearProgress variant="determinate" value={value} {...others} />
+//       </Grid>
+//     </Grid>
+//   );
+// }
+
+// LinearProgressWithLabel.propTypes = {
+//   value: PropTypes.number
+// };
+
+// ==============================|| SIDEBAR MENU Card ||============================== //
+
+const MenuCard = () => {
+  const theme = useTheme();
+  const account = useSelector((state) => state.account);
+  const navigate = useNavigate();
+
+  return (
+    <CardStyle>
+      <CardContent sx={{ p: 2 }}>
+        <List sx={{ p: 0, m: 0 }}>
+          <ListItem alignItems="flex-start" disableGutters sx={{ p: 0 }}>
+            <ListItemAvatar sx={{ mt: 0 }}>
+              <Avatar
+                variant="rounded"
+                src={User1}
+                sx={{
+                  ...theme.typography.commonAvatar,
+                  ...theme.typography.largeAvatar,
+                  color: theme.palette.primary.main,
+                  border: 'none',
+                  borderColor: theme.palette.primary.main,
+                  background: '#fff',
+                  marginRight: '12px'
+                }}
+                onClick={() => navigate('/panel/profile')}
+              ></Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              sx={{ mt: 0 }}
+              primary={
+                <Typography variant="subtitle1" sx={{ color: theme.palette.primary[800] }}>
+                  {account.user?.username}
+                </Typography>
+              }
+              secondary={<Typography variant="caption"> 欢迎回来 </Typography>}
+            />
+          </ListItem>
+        </List>
+        {/* <LinearProgressWithLabel value={80} /> */}
+      </CardContent>
+    </CardStyle>
+  );
+};
+
+export default MenuCard;
--- a/web/berry/src/layout/MainLayout/Sidebar/MenuList/NavCollapse/index.js
+++ b/web/berry/src/layout/MainLayout/Sidebar/MenuList/NavCollapse/index.js
@ -0,0 +1,158 @@
+import PropTypes from 'prop-types';
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useLocation, useNavigate } from 'react-router';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Collapse, List, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material';
+
+// project imports
+import NavItem from '../NavItem';
+
+// assets
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+import { IconChevronDown, IconChevronUp } from '@tabler/icons-react';
+
+// ==============================|| SIDEBAR MENU LIST COLLAPSE ITEMS ||============================== //
+
+const NavCollapse = ({ menu, level }) => {
+  const theme = useTheme();
+  const customization = useSelector((state) => state.customization);
+  const navigate = useNavigate();
+
+  const [open, setOpen] = useState(false);
+  const [selected, setSelected] = useState(null);
+
+  const handleClick = () => {
+    setOpen(!open);
+    setSelected(!selected ? menu.id : null);
+    if (menu?.id !== 'authentication') {
+      navigate(menu.children[0]?.url);
+    }
+  };
+
+  const { pathname } = useLocation();
+  const checkOpenForParent = (child, id) => {
+    child.forEach((item) => {
+      if (item.url === pathname) {
+        setOpen(true);
+        setSelected(id);
+      }
+    });
+  };
+
+  // menu collapse for sub-levels
+  useEffect(() => {
+    setOpen(false);
+    setSelected(null);
+    if (menu.children) {
+      menu.children.forEach((item) => {
+        if (item.children?.length) {
+          checkOpenForParent(item.children, menu.id);
+        }
+        if (item.url === pathname) {
+          setSelected(menu.id);
+          setOpen(true);
+        }
+      });
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname, menu.children]);
+
+  // menu collapse & item
+  const menus = menu.children?.map((item) => {
+    switch (item.type) {
+      case 'collapse':
+        return <NavCollapse key={item.id} menu={item} level={level + 1} />;
+      case 'item':
+        return <NavItem key={item.id} item={item} level={level + 1} />;
+      default:
+        return (
+          <Typography key={item.id} variant="h6" color="error" align="center">
+            Menu Items Error
+          </Typography>
+        );
+    }
+  });
+
+  const Icon = menu.icon;
+  const menuIcon = menu.icon ? (
+    <Icon strokeWidth={1.5} size="1.3rem" style={{ marginTop: 'auto', marginBottom: 'auto' }} />
+  ) : (
+    <FiberManualRecordIcon
+      sx={{
+        width: selected === menu.id ? 8 : 6,
+        height: selected === menu.id ? 8 : 6
+      }}
+      fontSize={level > 0 ? 'inherit' : 'medium'}
+    />
+  );
+
+  return (
+    <>
+      <ListItemButton
+        sx={{
+          borderRadius: `${customization.borderRadius}px`,
+          mb: 0.5,
+          alignItems: 'flex-start',
+          backgroundColor: level > 1 ? 'transparent !important' : 'inherit',
+          py: level > 1 ? 1 : 1.25,
+          pl: `${level * 24}px`
+        }}
+        selected={selected === menu.id}
+        onClick={handleClick}
+      >
+        <ListItemIcon sx={{ my: 'auto', minWidth: !menu.icon ? 18 : 36 }}>{menuIcon}</ListItemIcon>
+        <ListItemText
+          primary={
+            <Typography variant={selected === menu.id ? 'h5' : 'body1'} color="inherit" sx={{ my: 'auto' }}>
+              {menu.title}
+            </Typography>
+          }
+          secondary={
+            menu.caption && (
+              <Typography variant="caption" sx={{ ...theme.typography.subMenuCaption }} display="block" gutterBottom>
+                {menu.caption}
+              </Typography>
+            )
+          }
+        />
+        {open ? (
+          <IconChevronUp stroke={1.5} size="1rem" style={{ marginTop: 'auto', marginBottom: 'auto' }} />
+        ) : (
+          <IconChevronDown stroke={1.5} size="1rem" style={{ marginTop: 'auto', marginBottom: 'auto' }} />
+        )}
+      </ListItemButton>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <List
+          component="div"
+          disablePadding
+          sx={{
+            position: 'relative',
+            '&:after': {
+              content: "''",
+              position: 'absolute',
+              left: '32px',
+              top: 0,
+              height: '100%',
+              width: '1px',
+              opacity: 1,
+              background: theme.palette.primary.light
+            }
+          }}
+        >
+          {menus}
+        </List>
+      </Collapse>
+    </>
+  );
+};
+
+NavCollapse.propTypes = {
+  menu: PropTypes.object,
+  level: PropTypes.number
+};
+
+export default NavCollapse;
--- a/web/berry/src/layout/MainLayout/Sidebar/MenuList/NavGroup/index.js
+++ b/web/berry/src/layout/MainLayout/Sidebar/MenuList/NavGroup/index.js
@ -0,0 +1,61 @@
+import PropTypes from 'prop-types';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Divider, List, Typography } from '@mui/material';
+
+// project imports
+import NavItem from '../NavItem';
+import NavCollapse from '../NavCollapse';
+
+// ==============================|| SIDEBAR MENU LIST GROUP ||============================== //
+
+const NavGroup = ({ item }) => {
+  const theme = useTheme();
+
+  // menu list collapse & items
+  const items = item.children?.map((menu) => {
+    switch (menu.type) {
+      case 'collapse':
+        return <NavCollapse key={menu.id} menu={menu} level={1} />;
+      case 'item':
+        return <NavItem key={menu.id} item={menu} level={1} />;
+      default:
+        return (
+          <Typography key={menu.id} variant="h6" color="error" align="center">
+            Menu Items Error
+          </Typography>
+        );
+    }
+  });
+
+  return (
+    <>
+      <List
+        subheader={
+          item.title && (
+            <Typography variant="caption" sx={{ ...theme.typography.menuCaption }} display="block" gutterBottom>
+              {item.title}
+              {item.caption && (
+                <Typography variant="caption" sx={{ ...theme.typography.subMenuCaption }} display="block" gutterBottom>
+                  {item.caption}
+                </Typography>
+              )}
+            </Typography>
+          )
+        }
+      >
+        {items}
+      </List>
+
+      {/* group divider */}
+      <Divider sx={{ mt: 0.25, mb: 1.25 }} />
+    </>
+  );
+};
+
+NavGroup.propTypes = {
+  item: PropTypes.object
+};
+
+export default NavGroup;
--- a/web/berry/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.js
+++ b/web/berry/src/layout/MainLayout/Sidebar/MenuList/NavItem/index.js
@ -0,0 +1,115 @@
+import PropTypes from 'prop-types';
+import { forwardRef, useEffect } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { useDispatch, useSelector } from 'react-redux';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery } from '@mui/material';
+
+// project imports
+import { MENU_OPEN, SET_MENU } from 'store/actions';
+
+// assets
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+
+// ==============================|| SIDEBAR MENU LIST ITEMS ||============================== //
+
+const NavItem = ({ item, level }) => {
+  const theme = useTheme();
+  const dispatch = useDispatch();
+  const { pathname } = useLocation();
+  const customization = useSelector((state) => state.customization);
+  const matchesSM = useMediaQuery(theme.breakpoints.down('lg'));
+
+  const Icon = item.icon;
+  const itemIcon = item?.icon ? (
+    <Icon stroke={1.5} size="1.3rem" />
+  ) : (
+    <FiberManualRecordIcon
+      sx={{
+        width: customization.isOpen.findIndex((id) => id === item?.id) > -1 ? 8 : 6,
+        height: customization.isOpen.findIndex((id) => id === item?.id) > -1 ? 8 : 6
+      }}
+      fontSize={level > 0 ? 'inherit' : 'medium'}
+    />
+  );
+
+  let itemTarget = '_self';
+  if (item.target) {
+    itemTarget = '_blank';
+  }
+
+  let listItemProps = {
+    component: forwardRef((props, ref) => <Link ref={ref} {...props} to={item.url} target={itemTarget} />)
+  };
+  if (item?.external) {
+    listItemProps = { component: 'a', href: item.url, target: itemTarget };
+  }
+
+  const itemHandler = (id) => {
+    dispatch({ type: MENU_OPEN, id });
+    if (matchesSM) dispatch({ type: SET_MENU, opened: false });
+  };
+
+  // active menu item on page load
+  useEffect(() => {
+    const currentIndex = document.location.pathname
+      .toString()
+      .split('/')
+      .findIndex((id) => id === item.id);
+    if (currentIndex > -1) {
+      dispatch({ type: MENU_OPEN, id: item.id });
+    }
+    // eslint-disable-next-line
+  }, [pathname]);
+
+  return (
+    <ListItemButton
+      {...listItemProps}
+      disabled={item.disabled}
+      sx={{
+        borderRadius: `${customization.borderRadius}px`,
+        mb: 0.5,
+        alignItems: 'flex-start',
+        backgroundColor: level > 1 ? 'transparent !important' : 'inherit',
+        py: level > 1 ? 1 : 1.25,
+        pl: `${level * 24}px`
+      }}
+      selected={customization.isOpen.findIndex((id) => id === item.id) > -1}
+      onClick={() => itemHandler(item.id)}
+    >
+      <ListItemIcon sx={{ my: 'auto', minWidth: !item?.icon ? 18 : 36 }}>{itemIcon}</ListItemIcon>
+      <ListItemText
+        primary={
+          <Typography variant={customization.isOpen.findIndex((id) => id === item.id) > -1 ? 'h5' : 'body1'} color="inherit">
+            {item.title}
+          </Typography>
+        }
+        secondary={
+          item.caption && (
+            <Typography variant="caption" sx={{ ...theme.typography.subMenuCaption }} display="block" gutterBottom>
+              {item.caption}
+            </Typography>
+          )
+        }
+      />
+      {item.chip && (
+        <Chip
+          color={item.chip.color}
+          variant={item.chip.variant}
+          size={item.chip.size}
+          label={item.chip.label}
+          avatar={item.chip.avatar && <Avatar>{item.chip.avatar}</Avatar>}
+        />
+      )}
+    </ListItemButton>
+  );
+};
+
+NavItem.propTypes = {
+  item: PropTypes.object,
+  level: PropTypes.number
+};
+
+export default NavItem;
--- a/web/berry/src/layout/MainLayout/Sidebar/MenuList/index.js
+++ b/web/berry/src/layout/MainLayout/Sidebar/MenuList/index.js
@ -0,0 +1,36 @@
+// material-ui
+import { Typography } from '@mui/material';
+
+// project imports
+import NavGroup from './NavGroup';
+import menuItem from 'menu-items';
+import { isAdmin } from 'utils/common';
+
+// ==============================|| SIDEBAR MENU LIST ||============================== //
+const MenuList = () => {
+  const userIsAdmin = isAdmin();
+
+  return (
+    <>
+      {menuItem.items.map((item) => {
+        if (item.type !== 'group') {
+          return (
+            <Typography key={item.id} variant="h6" color="error" align="center">
+              Menu Items Error
+            </Typography>
+          );
+        }
+
+        const filteredChildren = item.children.filter((child) => !child.isAdmin || userIsAdmin);
+
+        if (filteredChildren.length === 0) {
+          return null;
+        }
+
+        return <NavGroup key={item.id} item={{ ...item, children: filteredChildren }} />;
+      })}
+    </>
+  );
+};
+
+export default MenuList;
--- a/web/berry/src/layout/MainLayout/Sidebar/index.js
+++ b/web/berry/src/layout/MainLayout/Sidebar/index.js
@ -0,0 +1,94 @@
+import PropTypes from 'prop-types';
+
+// material-ui
+import { useTheme } from '@mui/material/styles';
+import { Box, Chip, Drawer, Stack, useMediaQuery } from '@mui/material';
+
+// third-party
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import { BrowserView, MobileView } from 'react-device-detect';
+
+// project imports
+import MenuList from './MenuList';
+import LogoSection from '../LogoSection';
+import MenuCard from './MenuCard';
+import { drawerWidth } from 'store/constant';
+
+// ==============================|| SIDEBAR DRAWER ||============================== //
+
+const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
+  const theme = useTheme();
+  const matchUpMd = useMediaQuery(theme.breakpoints.up('md'));
+
+  const drawer = (
+    <>
+      <Box sx={{ display: { xs: 'block', md: 'none' } }}>
+        <Box sx={{ display: 'flex', p: 2, mx: 'auto' }}>
+          <LogoSection />
+        </Box>
+      </Box>
+      <BrowserView>
+        <PerfectScrollbar
+          component="div"
+          style={{
+            height: !matchUpMd ? 'calc(100vh - 56px)' : 'calc(100vh - 88px)',
+            paddingLeft: '16px',
+            paddingRight: '16px'
+          }}
+        >
+          <MenuList />
+          <MenuCard />
+          <Stack direction="row" justifyContent="center" sx={{ mb: 2 }}>
+            <Chip label={process.env.REACT_APP_VERSION} disabled chipcolor="secondary" size="small" sx={{ cursor: 'pointer' }} />
+          </Stack>
+        </PerfectScrollbar>
+      </BrowserView>
+      <MobileView>
+        <Box sx={{ px: 2 }}>
+          <MenuList />
+          <MenuCard />
+          <Stack direction="row" justifyContent="center" sx={{ mb: 2 }}>
+            <Chip label={process.env.REACT_APP_VERSION} disabled chipcolor="secondary" size="small" sx={{ cursor: 'pointer' }} />
+          </Stack>
+        </Box>
+      </MobileView>
+    </>
+  );
+
+  const container = window !== undefined ? () => window.document.body : undefined;
+
+  return (
+    <Box component="nav" sx={{ flexShrink: { md: 0 }, width: matchUpMd ? drawerWidth : 'auto' }} aria-label="mailbox folders">
+      <Drawer
+        container={container}
+        variant={matchUpMd ? 'persistent' : 'temporary'}
+        anchor="left"
+        open={drawerOpen}
+        onClose={drawerToggle}
+        sx={{
+          '& .MuiDrawer-paper': {
+            width: drawerWidth,
+            background: theme.palette.background.default,
+            color: theme.palette.text.primary,
+            borderRight: 'none',
+            [theme.breakpoints.up('md')]: {
+              top: '88px'
+            }
+          }
+        }}
+        ModalProps={{ keepMounted: true }}
+        color="inherit"
+      >
+        {drawer}
+      </Drawer>
+    </Box>
+  );
+};
+
+Sidebar.propTypes = {
+  drawerOpen: PropTypes.bool,
+  drawerToggle: PropTypes.func,
+  window: PropTypes.object
+};
+
+export default Sidebar;
--- a/web/berry/src/layout/MainLayout/index.js
+++ b/web/berry/src/layout/MainLayout/index.js
@ -0,0 +1,103 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { Outlet } from 'react-router-dom';
+import AuthGuard from 'utils/route-guard/AuthGuard';
+
+// material-ui
+import { styled, useTheme } from '@mui/material/styles';
+import { AppBar, Box, CssBaseline, Toolbar, useMediaQuery } from '@mui/material';
+import AdminContainer from 'ui-component/AdminContainer';
+
+// project imports
+import Breadcrumbs from 'ui-component/extended/Breadcrumbs';
+import Header from './Header';
+import Sidebar from './Sidebar';
+import navigation from 'menu-items';
+import { drawerWidth } from 'store/constant';
+import { SET_MENU } from 'store/actions';
+
+// assets
+import { IconChevronRight } from '@tabler/icons-react';
+
+// styles
+const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
+  ...theme.typography.mainContent,
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+  transition: theme.transitions.create(
+    'margin',
+    open
+      ? {
+          easing: theme.transitions.easing.easeOut,
+          duration: theme.transitions.duration.enteringScreen
+        }
+      : {
+          easing: theme.transitions.easing.sharp,
+          duration: theme.transitions.duration.leavingScreen
+        }
+  ),
+  [theme.breakpoints.up('md')]: {
+    marginLeft: open ? 0 : -(drawerWidth - 20),
+    width: `calc(100% - ${drawerWidth}px)`
+  },
+  [theme.breakpoints.down('md')]: {
+    marginLeft: '20px',
+    width: `calc(100% - ${drawerWidth}px)`,
+    padding: '16px'
+  },
+  [theme.breakpoints.down('sm')]: {
+    marginLeft: '10px',
+    width: `calc(100% - ${drawerWidth}px)`,
+    padding: '16px',
+    marginRight: '10px'
+  }
+}));
+
+// ==============================|| MAIN LAYOUT ||============================== //
+
+const MainLayout = () => {
+  const theme = useTheme();
+  const matchDownMd = useMediaQuery(theme.breakpoints.down('md'));
+  // Handle left drawer
+  const leftDrawerOpened = useSelector((state) => state.customization.opened);
+  const dispatch = useDispatch();
+  const handleLeftDrawerToggle = () => {
+    dispatch({ type: SET_MENU, opened: !leftDrawerOpened });
+  };
+
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <CssBaseline />
+      {/* header */}
+      <AppBar
+        enableColorOnDark
+        position="fixed"
+        color="inherit"
+        elevation={0}
+        sx={{
+          bgcolor: theme.palette.background.default,
+          transition: leftDrawerOpened ? theme.transitions.create('width') : 'none'
+        }}
+      >
+        <Toolbar>
+          <Header handleLeftDrawerToggle={handleLeftDrawerToggle} />
+        </Toolbar>
+      </AppBar>
+
+      {/* drawer */}
+      <Sidebar drawerOpen={!matchDownMd ? leftDrawerOpened : !leftDrawerOpened} drawerToggle={handleLeftDrawerToggle} />
+
+      {/* main content */}
+      <Main theme={theme} open={leftDrawerOpened}>
+        {/* breadcrumb */}
+        <Breadcrumbs separator={IconChevronRight} navigation={navigation} icon title rightAlign />
+        <AuthGuard>
+          <AdminContainer>
+            <Outlet />
+          </AdminContainer>
+        </AuthGuard>
+      </Main>
+    </Box>
+  );
+};
+
+export default MainLayout;
--- a/web/berry/src/layout/MinimalLayout/Header/index.js
+++ b/web/berry/src/layout/MinimalLayout/Header/index.js
@ -0,0 +1,75 @@
+// material-ui
+import { useTheme } from "@mui/material/styles";
+import { Box, Button, Stack } from "@mui/material";
+import LogoSection from "layout/MainLayout/LogoSection";
+import { Link } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+import { useSelector } from "react-redux";
+
+// ==============================|| MAIN NAVBAR / HEADER ||============================== //
+
+const Header = () => {
+  const theme = useTheme();
+  const { pathname } = useLocation();
+  const account = useSelector((state) => state.account);
+
+  return (
+    <>
+      <Box
+        sx={{
+          width: 228,
+          display: "flex",
+          [theme.breakpoints.down("md")]: {
+            width: "auto",
+          },
+        }}
+      >
+        <Box component="span" sx={{ flexGrow: 1 }}>
+          <LogoSection />
+        </Box>
+      </Box>
+
+      <Box sx={{ flexGrow: 1 }} />
+      <Box sx={{ flexGrow: 1 }} />
+      <Stack spacing={2} direction="row">
+        <Button
+          component={Link}
+          variant="text"
+          to="/"
+          color={pathname === "/" ? "primary" : "inherit"}
+        >
+          首页
+        </Button>
+        <Button
+          component={Link}
+          variant="text"
+          to="/about"
+          color={pathname === "/about" ? "primary" : "inherit"}
+        >
+          关于
+        </Button>
+        {account.user ? (
+          <Button
+            component={Link}
+            variant="contained"
+            to="/panel"
+            color="primary"
+          >
+            控制台
+          </Button>
+        ) : (
+          <Button
+            component={Link}
+            variant="contained"
+            to="/login"
+            color="primary"
+          >
+            登入
+          </Button>
+        )}
+      </Stack>
+    </>
+  );
+};
+
+export default Header;
--- a/web/berry/src/layout/MinimalLayout/index.js
+++ b/web/berry/src/layout/MinimalLayout/index.js
@ -0,0 +1,39 @@
+import { Outlet } from 'react-router-dom';
+import { useTheme } from '@mui/material/styles';
+import { AppBar, Box, CssBaseline, Toolbar } from '@mui/material';
+import Header from './Header';
+import Footer from 'ui-component/Footer';
+
+// ==============================|| MINIMAL LAYOUT ||============================== //
+
+const MinimalLayout = () => {
+  const theme = useTheme();
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+      <CssBaseline />
+      <AppBar
+        enableColorOnDark
+        position="fixed"
+        color="inherit"
+        elevation={0}
+        sx={{
+          bgcolor: theme.palette.background.default,
+          flex: 'none'
+        }}
+      >
+        <Toolbar>
+          <Header />
+        </Toolbar>
+      </AppBar>
+      <Box sx={{ flex: '1 1 auto', overflow: 'auto' }} paddingTop={'64px'}>
+        <Outlet />
+      </Box>
+      <Box sx={{ flex: 'none' }}>
+        <Footer />
+      </Box>
+    </Box>
+  );
+};
+
+export default MinimalLayout;
--- a/web/berry/src/layout/NavMotion.js
+++ b/web/berry/src/layout/NavMotion.js
@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import { motion } from 'framer-motion';
+
+// ==============================|| ANIMATION FOR CONTENT ||============================== //
+
+const NavMotion = ({ children }) => {
+  const motionVariants = {
+    initial: {
+      opacity: 0,
+      scale: 0.99
+    },
+    in: {
+      opacity: 1,
+      scale: 1
+    },
+    out: {
+      opacity: 0,
+      scale: 1.01
+    }
+  };
+
+  const motionTransition = {
+    type: 'tween',
+    ease: 'anticipate',
+    duration: 0.4
+  };
+
+  return (
+    <motion.div initial="initial" animate="in" exit="out" variants={motionVariants} transition={motionTransition}>
+      {children}
+    </motion.div>
+  );
+};
+
+NavMotion.propTypes = {
+  children: PropTypes.node
+};
+
+export default NavMotion;
--- a/web/berry/src/layout/NavigationScroll.js
+++ b/web/berry/src/layout/NavigationScroll.js
@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+// ==============================|| NAVIGATION SCROLL TO TOP ||============================== //
+
+const NavigationScroll = ({ children }) => {
+  const location = useLocation();
+  const { pathname } = location;
+
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth'
+    });
+  }, [pathname]);
+
+  return children || null;
+};
+
+NavigationScroll.propTypes = {
+  children: PropTypes.node
+};
+
+export default NavigationScroll;
--- a/web/berry/src/menu-items/index.js
+++ b/web/berry/src/menu-items/index.js
@ -0,0 +1,18 @@
+import panel from './panel';
+
+// ==============================|| MENU ITEMS ||============================== //
+
+const menuItems = {
+  items: [panel],
+  urlMap: {}
+};
+
+// Initialize urlMap
+menuItems.urlMap = menuItems.items.reduce((map, item) => {
+  item.children.forEach((child) => {
+    map[child.url] = child;
+  });
+  return map;
+}, {});
+
+export default menuItems;
--- a/web/berry/src/menu-items/panel.js
+++ b/web/berry/src/menu-items/panel.js
@ -0,0 +1,104 @@
+// assets
+import {
+  IconDashboard,
+  IconSitemap,
+  IconArticle,
+  IconCoin,
+  IconAdjustments,
+  IconKey,
+  IconGardenCart,
+  IconUser,
+  IconUserScan
+} from '@tabler/icons-react';
+
+// constant
+const icons = { IconDashboard, IconSitemap, IconArticle, IconCoin, IconAdjustments, IconKey, IconGardenCart, IconUser, IconUserScan };
+
+// ==============================|| DASHBOARD MENU ITEMS ||============================== //
+
+const panel = {
+  id: 'panel',
+  type: 'group',
+  children: [
+    {
+      id: 'dashboard',
+      title: '总览',
+      type: 'item',
+      url: '/panel/dashboard',
+      icon: icons.IconDashboard,
+      breadcrumbs: false,
+      isAdmin: false
+    },
+    {
+      id: 'channel',
+      title: '渠道',
+      type: 'item',
+      url: '/panel/channel',
+      icon: icons.IconSitemap,
+      breadcrumbs: false,
+      isAdmin: true
+    },
+    {
+      id: 'token',
+      title: '令牌',
+      type: 'item',
+      url: '/panel/token',
+      icon: icons.IconKey,
+      breadcrumbs: false
+    },
+    {
+      id: 'log',
+      title: '日志',
+      type: 'item',
+      url: '/panel/log',
+      icon: icons.IconArticle,
+      breadcrumbs: false
+    },
+    {
+      id: 'redemption',
+      title: '兑换',
+      type: 'item',
+      url: '/panel/redemption',
+      icon: icons.IconCoin,
+      breadcrumbs: false,
+      isAdmin: true
+    },
+    {
+      id: 'topup',
+      title: '充值',
+      type: 'item',
+      url: '/panel/topup',
+      icon: icons.IconGardenCart,
+      breadcrumbs: false
+    },
+    {
+      id: 'user',
+      title: '用户',
+      type: 'item',
+      url: '/panel/user',
+      icon: icons.IconUser,
+      breadcrumbs: false,
+      isAdmin: true
+    },
+    {
+      id: 'profile',
+      title: '我的',
+      type: 'item',
+      url: '/panel/profile',
+      icon: icons.IconUserScan,
+      breadcrumbs: false,
+      isAdmin: false
+    },
+    {
+      id: 'setting',
+      title: '设置',
+      type: 'item',
+      url: '/panel/setting',
+      icon: icons.IconAdjustments,
+      breadcrumbs: false,
+      isAdmin: true
+    }
+  ]
+};
+
+export default panel;
--- a/web/berry/src/routes/MainRoutes.js
+++ b/web/berry/src/routes/MainRoutes.js
@ -0,0 +1,73 @@
+import { lazy } from 'react';
+
+// project imports
+import MainLayout from 'layout/MainLayout';
+import Loadable from 'ui-component/Loadable';
+
+const Channel = Loadable(lazy(() => import('views/Channel')));
+const Log = Loadable(lazy(() => import('views/Log')));
+const Redemption = Loadable(lazy(() => import('views/Redemption')));
+const Setting = Loadable(lazy(() => import('views/Setting')));
+const Token = Loadable(lazy(() => import('views/Token')));
+const Topup = Loadable(lazy(() => import('views/Topup')));
+const User = Loadable(lazy(() => import('views/User')));
+const Profile = Loadable(lazy(() => import('views/Profile')));
+const NotFoundView = Loadable(lazy(() => import('views/Error')));
+
+// dashboard routing
+const Dashboard = Loadable(lazy(() => import('views/Dashboard')));
+
+// ==============================|| MAIN ROUTING ||============================== //
+
+const MainRoutes = {
+  path: '/panel',
+  element: <MainLayout />,
+  children: [
+    {
+      path: '',
+      element: <Dashboard />
+    },
+    {
+      path: 'dashboard',
+      element: <Dashboard />
+    },
+    {
+      path: 'channel',
+      element: <Channel />
+    },
+    {
+      path: 'log',
+      element: <Log />
+    },
+    {
+      path: 'redemption',
+      element: <Redemption />
+    },
+    {
+      path: 'setting',
+      element: <Setting />
+    },
+    {
+      path: 'token',
+      element: <Token />
+    },
+    {
+      path: 'topup',
+      element: <Topup />
+    },
+    {
+      path: 'user',
+      element: <User />
+    },
+    {
+      path: 'profile',
+      element: <Profile />
+    },
+    {
+      path: '404',
+      element: <NotFoundView />
+    }
+  ]
+};
+
+export default MainRoutes;
--- a/web/berry/src/routes/OtherRoutes.js
+++ b/web/berry/src/routes/OtherRoutes.js
@ -0,0 +1,58 @@
+import { lazy } from 'react';
+
+// project imports
+import Loadable from 'ui-component/Loadable';
+import MinimalLayout from 'layout/MinimalLayout';
+
+// login option 3 routing
+const AuthLogin = Loadable(lazy(() => import('views/Authentication/Auth/Login')));
+const AuthRegister = Loadable(lazy(() => import('views/Authentication/Auth/Register')));
+const GitHubOAuth = Loadable(lazy(() => import('views/Authentication/Auth/GitHubOAuth')));
+const ForgetPassword = Loadable(lazy(() => import('views/Authentication/Auth/ForgetPassword')));
+const ResetPassword = Loadable(lazy(() => import('views/Authentication/Auth/ResetPassword')));
+const Home = Loadable(lazy(() => import('views/Home')));
+const About = Loadable(lazy(() => import('views/About')));
+const NotFoundView = Loadable(lazy(() => import('views/Error')));
+
+// ==============================|| AUTHENTICATION ROUTING ||============================== //
+
+const OtherRoutes = {
+  path: '/',
+  element: <MinimalLayout />,
+  children: [
+    {
+      path: '',
+      element: <Home />
+    },
+    {
+      path: '/about',
+      element: <About />
+    },
+    {
+      path: '/login',
+      element: <AuthLogin />
+    },
+    {
+      path: '/register',
+      element: <AuthRegister />
+    },
+    {
+      path: '/reset',
+      element: <ForgetPassword />
+    },
+    {
+      path: '/user/reset',
+      element: <ResetPassword />
+    },
+    {
+      path: '/oauth/github',
+      element: <GitHubOAuth />
+    },
+    {
+      path: '/404',
+      element: <NotFoundView />
+    }
+  ]
+};
+
+export default OtherRoutes;
--- a/web/berry/src/routes/index.js
+++ b/web/berry/src/routes/index.js
@ -0,0 +1,11 @@
+import { useRoutes } from 'react-router-dom';
+
+// routes
+import MainRoutes from './MainRoutes';
+import OtherRoutes from './OtherRoutes';
+
+// ==============================|| ROUTING RENDER ||============================== //
+
+export default function ThemeRoutes() {
+  return useRoutes([MainRoutes, OtherRoutes]);
+}
--- a/web/berry/src/serviceWorker.js
+++ b/web/berry/src/serviceWorker.js
@ -0,0 +1,128 @@
+// This optional code is used to register a service worker.
+// register() is not called by default.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on subsequent visits to a page, after all the
+// existing tabs open on the page have been closed, since previously cached
+// resources are updated in the background.
+
+// To learn more about the benefits of this model and instructions on how to
+// opt-in, read https://bit.ly/CRA-PWA
+
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === '[::1]' ||
+    // 127.0.0.0/8 are considered localhost for IPv4.
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
+);
+
+function registerValidSW(swUrl, config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then((registration) => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker == null) {
+          return;
+        }
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              // At this point, the updated precached content has been fetched,
+              // but the previous service worker will still serve the older
+              // content until all client tabs are closed.
+              console.log('New content is available and will be used when all tabs for this page are closed. See https://bit.ly/CRA-PWA.');
+
+              // Execute callback
+              if (config && config.onUpdate) {
+                config.onUpdate(registration);
+              }
+            } else {
+              // At this point, everything has been precached.
+              // It's the perfect time to display a
+              // "Content is cached for offline use." message.
+              console.log('Content is cached for offline use.');
+
+              // Execute callback
+              if (config && config.onSuccess) {
+                config.onSuccess(registration);
+              }
+            }
+          }
+        };
+      };
+    })
+    .catch((error) => {
+      console.error('Error during service worker registration:', error);
+    });
+}
+
+function checkValidServiceWorker(swUrl, config) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl, {
+    headers: { 'Service-Worker': 'script' }
+  })
+    .then((response) => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      const contentType = response.headers.get('content-type');
+      if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then((registration) => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl, config);
+      }
+    })
+    .catch(() => {
+      console.log('No internet connection found. App is running in offline mode.');
+    });
+}
+
+export function register(config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (isLocalhost) {
+        // This is running on localhost. Let's check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl, config);
+
+        // Add some additional logging to localhost, pointing developers to the
+        // service worker/PWA documentation.
+        navigator.serviceWorker.ready.then(() => {
+          console.log('This web app is being served cache-first by a service worker. To learn more, visit https://bit.ly/CRA-PWA');
+        });
+      } else {
+        // Is not localhost. Just register service worker
+        registerValidSW(swUrl, config);
+      }
+    });
+  }
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready
+      .then((registration) => {
+        registration.unregister();
+      })
+      .catch((error) => {
+        console.error(error.message);
+      });
+  }
+}
--- a/web/berry/src/store/accountReducer.js
+++ b/web/berry/src/store/accountReducer.js
@ -0,0 +1,24 @@
+import * as actionTypes from './actions';
+
+export const initialState = {
+  user: undefined
+};
+
+const accountReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case actionTypes.LOGIN:
+      return {
+        ...state,
+        user: action.payload
+      };
+    case actionTypes.LOGOUT:
+      return {
+        ...state,
+        user: undefined
+      };
+    default:
+      return state;
+  }
+};
+
+export default accountReducer;
--- a/web/berry/src/store/actions.js
+++ b/web/berry/src/store/actions.js
@ -0,0 +1,9 @@
+// action - customization reducer
+export const SET_MENU = '@customization/SET_MENU';
+export const MENU_TOGGLE = '@customization/MENU_TOGGLE';
+export const MENU_OPEN = '@customization/MENU_OPEN';
+export const SET_FONT_FAMILY = '@customization/SET_FONT_FAMILY';
+export const SET_BORDER_RADIUS = '@customization/SET_BORDER_RADIUS';
+export const SET_SITE_INFO = '@siteInfo/SET_SITE_INFO';
+export const LOGIN = '@account/LOGIN';
+export const LOGOUT = '@account/LOGOUT';
--- a/web/berry/src/store/constant.js
+++ b/web/berry/src/store/constant.js
@ -0,0 +1,4 @@
+// theme constant
+export const gridSpacing = 3;
+export const drawerWidth = 260;
+export const appDrawerWidth = 320;
--- a/web/berry/src/store/customizationReducer.js
+++ b/web/berry/src/store/customizationReducer.js
@ -0,0 +1,46 @@
+// project imports
+import config from 'config';
+
+// action - state management
+import * as actionTypes from './actions';
+
+export const initialState = {
+  isOpen: [], // for active default menu
+  defaultId: 'default',
+  fontFamily: config.fontFamily,
+  borderRadius: config.borderRadius,
+  opened: true
+};
+
+// ==============================|| CUSTOMIZATION REDUCER ||============================== //
+
+const customizationReducer = (state = initialState, action) => {
+  let id;
+  switch (action.type) {
+    case actionTypes.MENU_OPEN:
+      id = action.id;
+      return {
+        ...state,
+        isOpen: [id]
+      };
+    case actionTypes.SET_MENU:
+      return {
+        ...state,
+        opened: action.opened
+      };
+    case actionTypes.SET_FONT_FAMILY:
+      return {
+        ...state,
+        fontFamily: action.fontFamily
+      };
+    case actionTypes.SET_BORDER_RADIUS:
+      return {
+        ...state,
+        borderRadius: action.borderRadius
+      };
+    default:
+      return state;
+  }
+};
+
+export default customizationReducer;
--- a/web/berry/src/store/index.js
+++ b/web/berry/src/store/index.js
@ -0,0 +1,9 @@
+import { createStore } from 'redux';
+import reducer from './reducer';
+
+// ==============================|| REDUX - MAIN STORE ||============================== //
+
+const store = createStore(reducer);
+const persister = 'Free';
+
+export { store, persister };
--- a/web/berry/src/store/reducer.js
+++ b/web/berry/src/store/reducer.js
@ -0,0 +1,16 @@
+import { combineReducers } from 'redux';
+
+// reducer import
+import customizationReducer from './customizationReducer';
+import accountReducer from './accountReducer';
+import siteInfoReducer from './siteInfoReducer';
+
+// ==============================|| COMBINE REDUCER ||============================== //
+
+const reducer = combineReducers({
+  customization: customizationReducer,
+  account: accountReducer,
+  siteInfo: siteInfoReducer
+});
+
+export default reducer;
--- a/web/berry/src/store/siteInfoReducer.js
+++ b/web/berry/src/store/siteInfoReducer.js
@ -0,0 +1,18 @@
+import config from 'config';
+import * as actionTypes from './actions';
+
+export const initialState = config.siteInfo;
+
+const siteInfoReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case actionTypes.SET_SITE_INFO:
+      return {
+        ...state,
+        ...action.payload
+      };
+    default:
+      return state;
+  }
+};
+
+export default siteInfoReducer;
--- a/web/berry/src/themes/compStyleOverride.js
+++ b/web/berry/src/themes/compStyleOverride.js
@ -0,0 +1,256 @@
+export default function componentStyleOverrides(theme) {
+  const bgColor = theme.colors?.grey50;
+  return {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          fontWeight: 500,
+          borderRadius: '4px',
+          '&.Mui-disabled': {
+            color: theme.colors?.grey600
+          }
+        }
+      }
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          '&:hover': {
+            backgroundColor: theme.colors?.grey100
+          }
+        }
+      }
+    }, //MuiAutocomplete-popper MuiPopover-root
+    MuiAutocomplete: {
+      styleOverrides: {
+        popper: {
+          // 继承 MuiPopover-root
+          boxShadow: '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)',
+          borderRadius: '12px',
+          color: '#364152'
+        },
+        listbox: {
+          // 继承 MuiPopover-root
+          padding: '0px',
+          paddingTop: '8px',
+          paddingBottom: '8px'
+        },
+        option: {
+          fontSize: '16px',
+          fontWeight: '400',
+          lineHeight: '1.334em',
+          alignItems: 'center',
+          paddingTop: '6px',
+          paddingBottom: '6px',
+          paddingLeft: '16px',
+          paddingRight: '16px'
+        }
+      }
+    },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          color: theme.darkTextPrimary,
+          '&:hover': {
+            backgroundColor: theme.colors?.grey200
+          }
+        }
+      }
+    },
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0
+      },
+      styleOverrides: {
+        root: {
+          backgroundImage: 'none'
+        },
+        rounded: {
+          borderRadius: `${theme?.customization?.borderRadius}px`
+        }
+      }
+    },
+    MuiCardHeader: {
+      styleOverrides: {
+        root: {
+          color: theme.colors?.textDark,
+          padding: '24px'
+        },
+        title: {
+          fontSize: '1.125rem'
+        }
+      }
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: '24px'
+        }
+      }
+    },
+    MuiCardActions: {
+      styleOverrides: {
+        root: {
+          padding: '24px'
+        }
+      }
+    },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          color: theme.darkTextPrimary,
+          paddingTop: '10px',
+          paddingBottom: '10px',
+          '&.Mui-selected': {
+            color: theme.menuSelected,
+            backgroundColor: theme.menuSelectedBack,
+            '&:hover': {
+              backgroundColor: theme.menuSelectedBack
+            },
+            '& .MuiListItemIcon-root': {
+              color: theme.menuSelected
+            }
+          },
+          '&:hover': {
+            backgroundColor: theme.menuSelectedBack,
+            color: theme.menuSelected,
+            '& .MuiListItemIcon-root': {
+              color: theme.menuSelected
+            }
+          }
+        }
+      }
+    },
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          color: theme.darkTextPrimary,
+          minWidth: '36px'
+        }
+      }
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        primary: {
+          color: theme.textDark
+        }
+      }
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        input: {
+          color: theme.textDark,
+          '&::placeholder': {
+            color: theme.darkTextSecondary,
+            fontSize: '0.875rem'
+          }
+        }
+      }
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          background: bgColor,
+          borderRadius: `${theme?.customization?.borderRadius}px`,
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.colors?.grey400
+          },
+          '&:hover $notchedOutline': {
+            borderColor: theme.colors?.primaryLight
+          },
+          '&.MuiInputBase-multiline': {
+            padding: 1
+          }
+        },
+        input: {
+          fontWeight: 500,
+          background: bgColor,
+          padding: '15.5px 14px',
+          borderRadius: `${theme?.customization?.borderRadius}px`,
+          '&.MuiInputBase-inputSizeSmall': {
+            padding: '10px 14px',
+            '&.MuiInputBase-inputAdornedStart': {
+              paddingLeft: 0
+            }
+          }
+        },
+        inputAdornedStart: {
+          paddingLeft: 4
+        },
+        notchedOutline: {
+          borderRadius: `${theme?.customization?.borderRadius}px`
+        }
+      }
+    },
+    MuiSlider: {
+      styleOverrides: {
+        root: {
+          '&.Mui-disabled': {
+            color: theme.colors?.grey300
+          }
+        },
+        mark: {
+          backgroundColor: theme.paper,
+          width: '4px'
+        },
+        valueLabel: {
+          color: theme?.colors?.primaryLight
+        }
+      }
+    },
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          borderColor: theme.divider,
+          opacity: 1
+        }
+      }
+    },
+    MuiAvatar: {
+      styleOverrides: {
+        root: {
+          color: theme.colors?.primaryDark,
+          background: theme.colors?.primary200
+        }
+      }
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          '&.MuiChip-deletable .MuiChip-deleteIcon': {
+            color: 'inherit'
+          }
+        }
+      }
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottom: '1px solid rgb(241, 243, 244)',
+          textAlign: 'center'
+        },
+        head: {
+          color: theme.darkTextSecondary,
+          backgroundColor: 'rgb(244, 246, 248)'
+        }
+      }
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          '&:hover': {
+            backgroundColor: 'rgb(244, 246, 248)'
+          }
+        }
+      }
+    },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          color: theme.paper,
+          background: theme.colors?.grey700
+        }
+      }
+    }
+  };
+}
--- a/web/berry/src/themes/index.js
+++ b/web/berry/src/themes/index.js
@ -0,0 +1,55 @@
+import { createTheme } from '@mui/material/styles';
+
+// assets
+import colors from 'assets/scss/_themes-vars.module.scss';
+
+// project imports
+import componentStyleOverrides from './compStyleOverride';
+import themePalette from './palette';
+import themeTypography from './typography';
+
+/**
+ * Represent theme style and structure as per Material-UI
+ * @param {JsonObject} customization customization parameter object
+ */
+
+export const theme = (customization) => {
+  const color = colors;
+
+  const themeOption = {
+    colors: color,
+    heading: color.grey900,
+    paper: color.paper,
+    backgroundDefault: color.paper,
+    background: color.primaryLight,
+    darkTextPrimary: color.grey700,
+    darkTextSecondary: color.grey500,
+    textDark: color.grey900,
+    menuSelected: color.secondaryDark,
+    menuSelectedBack: color.secondaryLight,
+    divider: color.grey200,
+    customization
+  };
+
+  const themeOptions = {
+    direction: 'ltr',
+    palette: themePalette(themeOption),
+    mixins: {
+      toolbar: {
+        minHeight: '48px',
+        padding: '16px',
+        '@media (min-width: 600px)': {
+          minHeight: '48px'
+        }
+      }
+    },
+    typography: themeTypography(themeOption)
+  };
+
+  const themes = createTheme(themeOptions);
+  themes.components = componentStyleOverrides(themeOption);
+
+  return themes;
+};
+
+export default theme;
--- a/web/berry/src/themes/palette.js
+++ b/web/berry/src/themes/palette.js
@ -0,0 +1,73 @@
+/**
+ * Color intention that you want to used in your theme
+ * @param {JsonObject} theme Theme customization object
+ */
+
+export default function themePalette(theme) {
+  return {
+    mode: 'light',
+    common: {
+      black: theme.colors?.darkPaper
+    },
+    primary: {
+      light: theme.colors?.primaryLight,
+      main: theme.colors?.primaryMain,
+      dark: theme.colors?.primaryDark,
+      200: theme.colors?.primary200,
+      800: theme.colors?.primary800
+    },
+    secondary: {
+      light: theme.colors?.secondaryLight,
+      main: theme.colors?.secondaryMain,
+      dark: theme.colors?.secondaryDark,
+      200: theme.colors?.secondary200,
+      800: theme.colors?.secondary800
+    },
+    error: {
+      light: theme.colors?.errorLight,
+      main: theme.colors?.errorMain,
+      dark: theme.colors?.errorDark
+    },
+    orange: {
+      light: theme.colors?.orangeLight,
+      main: theme.colors?.orangeMain,
+      dark: theme.colors?.orangeDark
+    },
+    warning: {
+      light: theme.colors?.warningLight,
+      main: theme.colors?.warningMain,
+      dark: theme.colors?.warningDark
+    },
+    success: {
+      light: theme.colors?.successLight,
+      200: theme.colors?.success200,
+      main: theme.colors?.successMain,
+      dark: theme.colors?.successDark
+    },
+    grey: {
+      50: theme.colors?.grey50,
+      100: theme.colors?.grey100,
+      500: theme.darkTextSecondary,
+      600: theme.heading,
+      700: theme.darkTextPrimary,
+      900: theme.textDark
+    },
+    dark: {
+      light: theme.colors?.darkTextPrimary,
+      main: theme.colors?.darkLevel1,
+      dark: theme.colors?.darkLevel2,
+      800: theme.colors?.darkBackground,
+      900: theme.colors?.darkPaper
+    },
+    text: {
+      primary: theme.darkTextPrimary,
+      secondary: theme.darkTextSecondary,
+      dark: theme.textDark,
+      hint: theme.colors?.grey100
+    },
+    background: {
+      paper: theme.paper,
+      default: theme.backgroundDefault
+    }
+  };
+}
--- a/web/berry/src/themes/typography.js
+++ b/web/berry/src/themes/typography.js
@ -0,0 +1,137 @@
+/**
+ * Typography used in theme
+ * @param {JsonObject} theme theme customization object
+ */
+
+export default function themeTypography(theme) {
+  return {
+    fontFamily: theme?.customization?.fontFamily,
+    h6: {
+      fontWeight: 500,
+      color: theme.heading,
+      fontSize: '0.75rem'
+    },
+    h5: {
+      fontSize: '0.875rem',
+      color: theme.heading,
+      fontWeight: 500
+    },
+    h4: {
+      fontSize: '1rem',
+      color: theme.heading,
+      fontWeight: 600
+    },
+    h3: {
+      fontSize: '1.25rem',
+      color: theme.heading,
+      fontWeight: 600
+    },
+    h2: {
+      fontSize: '1.5rem',
+      color: theme.heading,
+      fontWeight: 700
+    },
+    h1: {
+      fontSize: '2.125rem',
+      color: theme.heading,
+      fontWeight: 700
+    },
+    subtitle1: {
+      fontSize: '0.875rem',
+      fontWeight: 500,
+      color: theme.textDark
+    },
+    subtitle2: {
+      fontSize: '0.75rem',
+      fontWeight: 400,
+      color: theme.darkTextSecondary
+    },
+    caption: {
+      fontSize: '0.75rem',
+      color: theme.darkTextSecondary,
+      fontWeight: 400
+    },
+    body1: {
+      fontSize: '0.875rem',
+      fontWeight: 400,
+      lineHeight: '1.334em'
+    },
+    body2: {
+      letterSpacing: '0em',
+      fontWeight: 400,
+      lineHeight: '1.5em',
+      color: theme.darkTextPrimary
+    },
+    button: {
+      textTransform: 'capitalize'
+    },
+    customInput: {
+      marginTop: 1,
+      marginBottom: 1,
+      '& > label': {
+        top: 23,
+        left: 0,
+        color: theme.grey500,
+        '&[data-shrink="false"]': {
+          top: 5
+        }
+      },
+      '& > div > input': {
+        padding: '30.5px 14px 11.5px !important'
+      },
+      '& legend': {
+        display: 'none'
+      },
+      '& fieldset': {
+        top: 0
+      }
+    },
+    otherInput: {
+      marginTop: 1,
+      marginBottom: 1
+    },
+    mainContent: {
+      backgroundColor: theme.background,
+      width: '100%',
+      minHeight: 'calc(100vh - 88px)',
+      flexGrow: 1,
+      padding: '20px',
+      marginTop: '88px',
+      marginRight: '20px',
+      borderRadius: `${theme?.customization?.borderRadius}px`
+    },
+    menuCaption: {
+      fontSize: '0.875rem',
+      fontWeight: 500,
+      color: theme.heading,
+      padding: '6px',
+      textTransform: 'capitalize',
+      marginTop: '10px'
+    },
+    subMenuCaption: {
+      fontSize: '0.6875rem',
+      fontWeight: 500,
+      color: theme.darkTextSecondary,
+      textTransform: 'capitalize'
+    },
+    commonAvatar: {
+      cursor: 'pointer',
+      borderRadius: '8px'
+    },
+    smallAvatar: {
+      width: '22px',
+      height: '22px',
+      fontSize: '1rem'
+    },
+    mediumAvatar: {
+      width: '34px',
+      height: '34px',
+      fontSize: '1.2rem'
+    },
+    largeAvatar: {
+      width: '44px',
+      height: '44px',
+      fontSize: '1.5rem'
+    }
+  };
+}
--- a/web/berry/src/ui-component/AdminContainer.js
+++ b/web/berry/src/ui-component/AdminContainer.js
@ -0,0 +1,11 @@
+import { styled } from '@mui/material/styles';
+import { Container } from '@mui/material';
+
+const AdminContainer = styled(Container)(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    paddingLeft: '0px',
+    paddingRight: '0px'
+  }
+}));
+
+export default AdminContainer;
--- a/web/berry/src/ui-component/Footer.js
+++ b/web/berry/src/ui-component/Footer.js
@ -0,0 +1,37 @@
+// material-ui
+import { Link, Container, Box } from '@mui/material';
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+// ==============================|| FOOTER - AUTHENTICATION 2 & 3 ||============================== //
+
+const Footer = () => {
+  const siteInfo = useSelector((state) => state.siteInfo);
+
+  return (
+    <Container sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '64px' }}>
+      <Box sx={{ textAlign: 'center' }}>
+        {siteInfo.footer_html ? (
+          <div className="custom-footer" dangerouslySetInnerHTML={{ __html: siteInfo.footer_html }}></div>
+        ) : (
+          <>
+            <Link href="https://github.com/songquanpeng/one-api" target="_blank">
+              {siteInfo.system_name} {process.env.REACT_APP_VERSION}{' '}
+            </Link>
+            由{' '}
+            <Link href="https://github.com/songquanpeng" target="_blank">
+              JustSong
+            </Link>{' '}
+            构建，主题 berry 来自{' '}
+            <Link href="https://github.com/MartialBE" target="_blank">
+              MartialBE
+            </Link>{' '}，源代码遵循
+            <Link href="https://opensource.org/licenses/mit-license.php"> MIT 协议</Link>
+          </>
+        )}
+      </Box>
+    </Container>
+  );
+};
+
+export default Footer;
--- a/web/berry/src/ui-component/Label.js
+++ b/web/berry/src/ui-component/Label.js
@ -0,0 +1,158 @@
+/*
+ * Label.js
+ *
+ * This file uses code from the Minimal UI project, available at
+ * https://github.com/minimal-ui-kit/material-kit-react/blob/main/src/components/label/label.jsx
+ *
+ * Minimal UI is licensed under the MIT License. A copy of the license is included below:
+ *
+ * MIT License
+ *
+ * Copyright (c) 2021 Minimal UI (https://minimals.cc/)
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import PropTypes from 'prop-types';
+import { forwardRef } from 'react';
+
+import Box from '@mui/material/Box';
+import { useTheme } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
+
+// ----------------------------------------------------------------------
+
+const Label = forwardRef(({ children, color = 'default', variant = 'soft', startIcon, endIcon, sx, ...other }, ref) => {
+  const theme = useTheme();
+
+  const iconStyles = {
+    width: 16,
+    height: 16,
+    '& svg, img': { width: 1, height: 1, objectFit: 'cover' }
+  };
+
+  return (
+    <StyledLabel
+      ref={ref}
+      component="span"
+      ownerState={{ color, variant }}
+      sx={{
+        ...(startIcon && { pl: 0.75 }),
+        ...(endIcon && { pr: 0.75 }),
+        ...sx
+      }}
+      theme={theme}
+      {...other}
+    >
+      {startIcon && <Box sx={{ mr: 0.75, ...iconStyles }}> {startIcon} </Box>}
+
+      {children}
+
+      {endIcon && <Box sx={{ ml: 0.75, ...iconStyles }}> {endIcon} </Box>}
+    </StyledLabel>
+  );
+});
+
+Label.propTypes = {
+  children: PropTypes.node,
+  endIcon: PropTypes.object,
+  startIcon: PropTypes.object,
+  sx: PropTypes.object,
+  variant: PropTypes.oneOf(['filled', 'outlined', 'ghost', 'soft']),
+  color: PropTypes.oneOf(['default', 'primary', 'secondary', 'info', 'success', 'warning', 'orange', 'error'])
+};
+
+export default Label;
+
+const StyledLabel = styled(Box)(({ theme, ownerState }) => {
+  // const lightMode = theme.palette.mode === 'light';
+
+  const filledVariant = ownerState.variant === 'filled';
+
+  const outlinedVariant = ownerState.variant === 'outlined';
+
+  const softVariant = ownerState.variant === 'soft';
+
+  const ghostVariant = ownerState.variant === 'ghost';
+
+  const defaultStyle = {
+    ...(ownerState.color === 'default' && {
+      // FILLED
+      ...(filledVariant && {
+        color: theme.palette.grey[300],
+        backgroundColor: theme.palette.text.primary
+      }),
+      // OUTLINED
+      ...(outlinedVariant && {
+        color: theme.palette.grey[500],
+        border: `2px solid ${theme.palette.grey[500]}`
+      }),
+      // SOFT
+      ...(softVariant && {
+        color: theme.palette.text.secondary,
+        backgroundColor: alpha(theme.palette.grey[500], 0.16)
+      })
+    })
+  };
+
+  const colorStyle = {
+    ...(ownerState.color !== 'default' && {
+      // FILLED
+      ...(filledVariant && {
+        color: theme.palette.background.paper,
+        backgroundColor: theme.palette[ownerState.color]?.main
+      }),
+      // OUTLINED
+      ...(outlinedVariant && {
+        backgroundColor: 'transparent',
+        color: theme.palette[ownerState.color]?.main,
+        border: `2px solid ${theme.palette[ownerState.color]?.main}`
+      }),
+      // SOFT
+      ...(softVariant && {
+        color: theme.palette[ownerState.color]['dark'],
+        backgroundColor: alpha(theme.palette[ownerState.color]?.main, 0.16)
+      }),
+      // GHOST
+      ...(ghostVariant && {
+        color: theme.palette[ownerState.color]?.main
+      })
+    })
+  };
+
+  return {
+    height: 24,
+    minWidth: 24,
+    lineHeight: 0,
+    borderRadius: 6,
+    cursor: 'default',
+    alignItems: 'center',
+    whiteSpace: 'nowrap',
+    display: 'inline-flex',
+    justifyContent: 'center',
+    // textTransform: 'capitalize',
+    padding: theme.spacing(0, 0.75),
+    fontSize: theme.typography.pxToRem(12),
+    fontWeight: theme.typography.fontWeightBold,
+    transition: theme.transitions.create('all', {
+      duration: theme.transitions.duration.shorter
+    }),
+    ...defaultStyle,
+    ...colorStyle
+  };
+});
--- a/web/berry/src/ui-component/Loadable.js
+++ b/web/berry/src/ui-component/Loadable.js
@ -0,0 +1,15 @@
+import { Suspense } from 'react';
+
+// project imports
+import Loader from './Loader';
+
+// ==============================|| LOADABLE - LAZY LOADING ||============================== //
+
+const Loadable = (Component) => (props) =>
+  (
+    <Suspense fallback={<Loader />}>
+      <Component {...props} />
+    </Suspense>
+  );
+
+export default Loadable;
--- a/web/berry/src/ui-component/Loader.js
+++ b/web/berry/src/ui-component/Loader.js
@ -0,0 +1,21 @@
+// material-ui
+import LinearProgress from '@mui/material/LinearProgress';
+import { styled } from '@mui/material/styles';
+
+// styles
+const LoaderWrapper = styled('div')({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  zIndex: 1301,
+  width: '100%'
+});
+
+// ==============================|| LOADER ||============================== //
+const Loader = () => (
+  <LoaderWrapper>
+    <LinearProgress color="primary" />
+  </LoaderWrapper>
+);
+
+export default Loader;
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				<svg t="1702350903010" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4215" width="32" height="32"><path d="M512 85.333333C276.266667 85.333333 85.333333 276.266667 85.333333 512a426.410667 426.410667 0 0 0 291.754667 404.821333c21.333333 3.712 29.312-9.088 29.312-20.309333 0-10.112-0.554667-43.690667-0.554667-79.445333-107.178667 19.754667-134.912-26.112-143.445333-50.133334-4.821333-12.288-25.6-50.133333-43.733333-60.288-14.933333-7.978667-36.266667-27.733333-0.554667-28.245333 33.621333-0.554667 57.6 30.933333 65.621333 43.733333 38.4 64.512 99.754667 46.378667 124.245334 35.2 3.754667-27.733333 14.933333-46.378667 27.221333-57.045333-94.933333-10.666667-194.133333-47.488-194.133333-210.688 0-46.421333 16.512-84.778667 43.733333-114.688-4.266667-10.666667-19.2-54.4 4.266667-113.066667 0 0 35.712-11.178667 117.333333 43.776a395.946667 395.946667 0 0 1 106.666667-14.421333c36.266667 0 72.533333 4.778667 106.666666 14.378667 81.578667-55.466667 117.333333-43.690667 117.333334-43.690667 23.466667 58.666667 8.533333 102.4 4.266666 113.066667 27.178667 29.866667 43.733333 67.712 43.733334 114.645333 0 163.754667-99.712 200.021333-194.645334 210.688 15.445333 13.312 28.8 38.912 28.8 78.933333 0 57.045333-0.554667 102.912-0.554666 117.333334 0 11.178667 8.021333 24.490667 29.354666 20.224A427.349333 427.349333 0 0 0 938.666667 512c0-235.733333-190.933333-426.666667-426.666667-426.666667z" fill="#000000" p-id="4216"></path></svg>
				`@ -0,0 +1 @@`
				`<svg height="62" viewBox="0 0 144 62" width="144" xmlns="http://www.w3.org/2000/svg"><path d="m111.34 23.88c-10.62-10.46-18.5-23.88-38.74-23.88h-1.2c-20.24 0-28.12 13.42-38.74 23.88-7.72 9.64-19.44 11.74-32.66 12.12v26h144v-26c-13.22-.38-24.94-2.48-32.66-12.12z" fill="#fff" fill-rule="evenodd"/></svg>`
				`@ -0,0 +1 @@`
				<svg t="1702350975929" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2474" width="32" height="32"><path d="M512 1024C229.23264 1024 0 794.76736 0 512S229.23264 0 512 0s512 229.23264 512 512-229.23264 512-512 512z m212.0704-290.0992l41.5744 24.064c9.216 5.3248 14.5408 1.26976 11.83744-9.03168l-9.0112-34.4064a9.76896 9.76896 0 0 1 3.76832-10.4448C813.50656 674.75456 839.68 631.0912 839.68 582.32832c0-88.28928-85.79072-159.86688-191.61088-159.86688s-191.61088 71.5776-191.61088 159.86688c0 88.2688 85.79072 159.86688 191.61088 159.86688 22.9376 0 44.91264-3.35872 65.26976-9.5232a13.55776 13.55776 0 0 1 10.73152 1.2288z m-366.63296-116.08064a271.85152 271.85152 0 0 0 89.98912 10.89536 146.61632 146.61632 0 0 1-7.7824-47.16544c0-96.31744 94.33088-174.3872 210.71872-174.3872 4.07552 0 8.11008 0.08192 12.12416 0.28672C645.2224 315.84256 549.96992 245.76 435.03616 245.76 307.87584 245.76 204.8 331.55072 204.8 437.37088c0 58.1632 31.15008 110.2848 80.32256 145.42848 4.62848 3.31776 6.7584 9.13408 5.28384 14.62272l-10.83392 40.38656c-3.2768 12.1856 2.99008 16.95744 13.88544 10.58816l49.29536-28.79488a18.59584 18.59584 0 0 1 14.68416-1.78176z m353.73056-60.74368a26.0096 26.0096 0 1 1 0-52.0192 26.0096 26.0096 0 0 1 0 52.0192z m-126.976 0a26.0096 26.0096 0 1 1 0-52.0192 26.0096 26.0096 0 0 1 0 52.0192z m-72.66304-150.69184a30.59712 30.59712 0 1 1 0-61.19424 30.59712 30.59712 0 0 1 0 61.19424z m-153.74336 0a30.59712 30.59712 0 1 1 0-61.19424 30.59712 30.59712 0 0 1 0 61.19424z" fill="#2BD418" p-id="2475"></path></svg>