feat: 启用后端自动启动与 Setup 引导流程增强

主要修改点:

1. 网络绑定扩展至 Server
   - .env.example: SERVER_HOST/VITE_SERVER_HOST 从 127.0.0.1 改为 0.0.0.0
   - server/src/app/core/config.py: 默认 app_host 从 127.0.0.1 改为 0.0.0.0

2. 启动脚本重构(重命名以区分职责)
   - server/start.sh → server/server_start.sh
   - web/start.sh → web/web_start.sh
   - 根目录 start.sh: 更新调用路径(./start.sh → ./server_start.sh, ./web_start.sh)
   - 根目录 start.sh: 新增 setup_ready() 检测函数
   - 根目录 start.sh: server_probe_host() 支持 0.0.0.0 探测转换为 127.0.0.1
   - 根目录 start.sh: start_setup_web() 新增 X_FINANCIAL_FORCE_SETUP=true

3. API URL 动态化 (web/src/services/api.js)
   - 从 localStorage 持久化读取 API Base URL
   - 新增 setRuntimeApiBaseUrl() / getRuntimeApiBaseUrl() 导出函数
   - buildUrl() 改用运行时 runtimeApiBaseUrl

4. 浏览器 Host 智能解析 (web/vite.config.js)
   - 新增 resolveBrowserApiHost(): 根据 server_host/web_host 配置决定浏览器端使用的 API Host
   - buildApiBaseUrl() 改用 resolveBrowserApiHost()
   - 新增后端启动状态管理: backendStartState / cloneBackendStartState() / updateBackendStep()
   - 后端启动分 5 步追踪: config → deps → server → health → done
   - 新增 backendStartPromise 避免重复启动

5. Setup 表单逻辑增强 (web/src/composables/useSetupView.js)
   - 新增 shouldExposeServerHost(): 判断浏览器 host 是否非本地
   - 新增 resolveInitialServerHost(): 当浏览器访问且 server_host 为本地时暴露 0.0.0.0
   - buildPayload(): 根据 shouldExposeServerHost() 自动将 127.0.0.1/localhost 转为 0.0.0.0

6. Bootstrap API 扩展 (web/src/services/bootstrap.js)
   - 新增 startBootstrapBackend(): POST /bootstrap/backend 触发后端启动
   - 新增 fetchBootstrapBackendStatus(): GET /bootstrap/backend 查询后端状态

7. Session 导航增强 (web/src/composables/useSystemState.js)
   - 新增 resolveBrowserApiBaseUrl(): 智能解析浏览器端 API Base URL
   - installSessionNavigation(): 调用 fetchBootstrapState() 同步引导状态
   - 新增 reconcileEntryRoute(): 根据引导状态协调路由
   - VITE_SERVER_HOST 默认值从 127.0.0.1 改为 0.0.0.0

8. Setup 视图增强 (web/src/views/SetupRouteView.vue)
   - 向 SetupView 传递启动进度相关 props: startupCountdownSeconds, startupLog, startupSteps, startupVisible, progressMessage

9. CSS 新增 (web/src/assets/styles/views/setup-view.css)
   - .setup-complete-progress: 进度文字样式
   - .setup-modal-backdrop: 模态框遮罩
   - .setup-startup-modal: 启动模态框容器
   - .setup-startup-head / .setup-startup-body / .setup-startup-spinner: 模态框头部/内容/加载动画
   - .setup-startup-steps / .setup-startup-step: 步骤列表及单个步骤
   - .setup-startup-step.is-running / .is-success / .is-failed: 步骤状态样式
   - .setup-startup-log: 启动日志区域
This commit is contained in:
2026-05-08 10:52:54 +08:00
parent 828e8f5aaf
commit c5486dd3d3
13 changed files with 778 additions and 30 deletions

View File

@@ -204,6 +204,15 @@
width: 100%;
}
.setup-complete-progress {
display: flex;
align-items: center;
gap: 8px;
color: rgba(209, 250, 229, 0.86);
font-size: 13px;
line-height: 1.5;
}
.setup-panel {
padding: 36px;
display: grid;
@@ -522,6 +531,185 @@
transform: none;
}
.setup-modal-backdrop {
position: fixed;
inset: 0;
z-index: 50;
padding: 24px;
display: grid;
place-items: center;
background: rgba(3, 20, 15, 0.72);
backdrop-filter: blur(10px);
}
.setup-startup-modal {
width: min(1120px, 100%);
max-height: calc(100vh - 48px);
overflow: hidden;
padding: 24px;
border: 1px solid rgba(110, 231, 183, 0.22);
border-radius: 8px;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 20px;
background:
radial-gradient(circle at top right, rgba(16, 185, 129, 0.16), transparent 18rem),
linear-gradient(180deg, #05251d 0%, #081611 100%);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
}
.setup-startup-head {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: flex-start;
}
.setup-startup-head h2 {
margin-top: 4px;
color: #ffffff;
font-size: 22px;
}
.setup-startup-head span {
display: block;
margin-top: 8px;
color: rgba(209, 250, 229, 0.78);
font-size: 13px;
line-height: 1.6;
}
.setup-startup-spinner {
width: 54px;
height: 54px;
border: 1px solid rgba(110, 231, 183, 0.26);
border-radius: 50%;
display: grid;
place-items: center;
flex: 0 0 auto;
color: #a7f3d0;
background: rgba(6, 78, 59, 0.34);
}
.setup-startup-spinner .pi {
font-size: 22px;
}
.setup-startup-spinner strong {
color: #ffffff;
font-size: 20px;
}
.setup-startup-body {
min-height: 0;
display: grid;
grid-template-columns: minmax(330px, 0.86fr) minmax(460px, 1.14fr);
gap: 18px;
}
.setup-startup-steps {
min-height: 0;
overflow: auto;
padding-right: 2px;
display: grid;
align-content: start;
gap: 10px;
}
.setup-startup-step {
padding: 14px;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 8px;
display: grid;
grid-template-columns: 24px 1fr;
gap: 12px;
background: rgba(15, 23, 42, 0.24);
}
.setup-startup-step .pi {
margin-top: 2px;
color: rgba(209, 250, 229, 0.46);
}
.setup-startup-step strong {
color: #f8fffb;
font-size: 14px;
}
.setup-startup-step span {
display: block;
margin-top: 4px;
color: rgba(209, 250, 229, 0.68);
font-size: 12px;
line-height: 1.5;
}
.setup-startup-step.is-running {
border-color: rgba(59, 130, 246, 0.34);
}
.setup-startup-step.is-running .pi {
color: #93c5fd;
}
.setup-startup-step.is-success {
border-color: rgba(16, 185, 129, 0.32);
}
.setup-startup-step.is-success .pi {
color: #34d399;
}
.setup-startup-step.is-error {
border-color: rgba(248, 113, 113, 0.36);
}
.setup-startup-step.is-error .pi {
color: #f87171;
}
.setup-startup-console {
min-height: 0;
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 8px;
overflow: hidden;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
background: rgba(2, 6, 23, 0.42);
}
.setup-startup-console-head {
min-height: 44px;
padding: 0 14px;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: rgba(15, 23, 42, 0.5);
}
.setup-startup-console-head strong {
color: #e2e8f0;
font-size: 13px;
}
.setup-startup-console-head span {
color: rgba(148, 163, 184, 0.9);
font-size: 12px;
}
.setup-startup-log {
min-height: 0;
overflow: auto;
padding: 14px;
color: rgba(226, 232, 240, 0.84);
font-size: 12px;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
@media (max-width: 1180px) {
.setup-page {
grid-template-columns: 1fr;
@@ -546,6 +734,32 @@
grid-template-columns: 1fr;
}
.setup-modal-backdrop {
padding: 14px;
}
.setup-startup-modal {
max-height: calc(100vh - 28px);
padding: 18px;
}
.setup-startup-head {
align-items: center;
}
.setup-startup-body {
grid-template-columns: 1fr;
}
.setup-startup-steps,
.setup-startup-console {
max-height: none;
}
.setup-startup-log {
max-height: 260px;
}
.field-span-2 {
grid-column: auto;
}