🎨 refactor(ui): modernize setup page

- Refactored system initialization page using TailwindCSS 3 and SemiUI components
- Changed layout from step navigation to single page display for all configurations
- Modified top area from vertical to more compact horizontal layout
- Updated gradient color scheme from blue/purple to orange/pink
- Fixed form field name duplication issues and optimized Form implementation
- Changed usage mode selection from three-column grid to vertical layout
- Replaced usage mode card icons from settings to more appropriate Layers icon
- Added specific prompts for different database types (SQLite/MySQL/PostgreSQL)
- Removed configuration summary section while keeping the initialization button
- Fixed useSetupCheck issue by using SetupCheck as a direct component for proper redirection

Author: Apple\Apple

web/src/App.js

@@ -25,7 +25,7 @@ import Playground from './pages/Playground/index.js';
 import OAuth2Callback from './components/auth/OAuth2Callback.js';
 import PersonalSetting from './components/settings/PersonalSetting.js';
 import Setup from './pages/Setup/index.js';
-import { useSetupCheck } from './hooks/useSetupCheck.js';
+import SetupCheck from './components/layout/SetupCheck.js';
 
 const Home = lazy(() => import('./pages/Home'));
 const Detail = lazy(() => import('./pages/Detail'));
@@ -35,7 +35,7 @@ function App() {
   const location = useLocation();
 
   return (
-    <useSetupCheck>
+    <SetupCheck>
       <Routes>
         <Route
           path='/'
@@ -290,7 +290,7 @@ function App() {
         />
         <Route path='*' element={<NotFound />} />
       </Routes>
-    </useSetupCheck>
+    </SetupCheck>
   );
 }
 

web/src/components/layout/SetupCheck.js

@@ -0,0 +1,18 @@
+import React, { useContext, useEffect } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { StatusContext } from '../../context/Status';
+
+const SetupCheck = ({ children }) => {
+  const [statusState] = useContext(StatusContext);
+  const location = useLocation();
+
+  useEffect(() => {
+    if (statusState?.status?.setup === false && location.pathname !== '/setup') {
+      window.location.href = '/setup';
+    }
+  }, [statusState?.status?.setup, location.pathname]);
+
+  return children;
+};
+
+export default SetupCheck; 

web/src/hooks/useSetupCheck.js

@@ -13,7 +13,7 @@ export function useTokenKeys(id) {
       if (fetchedKeys.length === 0) {
         showError('当前没有可用的启用令牌，请确认是否有令牌处于启用状态！');
         setTimeout(() => {
-          window.location.href = '/token';
+          window.location.href = '/console/token';
         }, 1500); // 延迟 1.5 秒后跳转
       }
       setKeys(fetchedKeys);

web/src/hooks/useTokenKeys.js

@@ -1367,7 +1367,7 @@
   "提示 {{nonCacheInput}} tokens + 缓存 {{cacheInput}} tokens * {{cacheRatio}} / 1M tokens * ${{price}} + 补全 {{completion}} tokens / 1M tokens * ${{compPrice}} * 分组 {{ratio}} = ${{total}}": "Prompt {{nonCacheInput}} tokens + cache {{cacheInput}} tokens * {{cacheRatio}} / 1M tokens * ${{price}} + completion {{completion}} tokens / 1M tokens * ${{compPrice}} * group {{ratio}} = ${{total}}",
   "缓存 Tokens": "Cache Tokens",
   "系统初始化": "System initialization",
-  "管理员账号已经初始化过，请继续设置系统参数": "The admin account has already been initialized, please continue to set the system parameters",
+  "管理员账号已经初始化过，请继续设置其他参数": "The admin account has already been initialized, please continue to set other parameters",
   "管理员账号": "Admin account",
   "请输入管理员用户名": "Please enter the admin username",
   "请输入管理员密码": "Please enter the admin password",
@@ -1532,5 +1532,24 @@
   "搜索条件": "Search Conditions",
   "加载中...": "Loading...",
   "暂无公告": "No Notice",
-  "操练场": "Playground"
+  "操练场": "Playground",
+  "欢迎使用，请完成以下设置以开始使用系统": "Welcome to use, please complete the following settings to start using the system",
+  "数据库信息": "Database Information",
+  "您正在使用 MySQL 数据库。MySQL 是一个可靠的关系型数据库管理系统，适合生产环境使用。": "You are using the MySQL database. MySQL is a reliable relational database management system, suitable for production environments.",
+  "您正在使用 PostgreSQL 数据库。PostgreSQL 是一个功能强大的开源关系型数据库系统，提供了出色的可靠性和数据完整性，适合生产环境使用。": "You are using the PostgreSQL database. PostgreSQL is a powerful open-source relational database system that provides excellent reliability and data integrity, suitable for production environments.",
+  "设置系统管理员的登录信息": "Set the login information for the system administrator",
+  "选择适合您使用场景的模式": "Select the mode suitable for your usage scenario",
+  "使用模式说明": "Usage mode description",
+  "计费模式": "Billing mode",
+  "多用户支持": "Multi-user support",
+  "个人使用": "Personal use",
+  "功能演示": "Function demonstration",
+  "体验试用": "Experience trial",
+  "默认模式": "Default Mode",
+  "无需计费": "No Charge",
+  "演示体验": "Demo Experience",
+  "提供基础功能演示，方便用户了解系统特性。": "Provide basic feature demonstrations to help users understand the system features.",
+  "适用于为多个用户提供服务的场景": "Suitable for scenarios where multiple users are provided.",
+  "适用于个人使用的场景，不需要设置模型价格": "Suitable for personal use, no need to set model price.",
+  "适用于展示系统功能的场景，提供基础功能演示": "Suitable for scenarios where the system functions are displayed, providing basic feature demonstrations."
 }