From 6074cfceca7dbabfa79731f163a72c5026d06cb0 Mon Sep 17 00:00:00 2001
From: mrlee <470349233@qq.com>
Date: Sun, 27 Sep 2026 18:58:26 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E6=B7=BB=E5=8A=A0=E5=9C=A8?=
 =?UTF-8?q?=E7=BA=BF=E5=8D=87=E7=BA=A7=E9=AA=8C=E8=AF=81=E7=A4=BA=E4=BE=8B?=
 =?UTF-8?q?=E9=A1=B5=E5=B9=B6=E5=8F=91=E5=B8=83=20v1.3.1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                  |  15 ++++
 VERSION                       |   2 +-
 docs/README.md                |   4 +-
 docs/system-upgrade.md        |  15 ++++
 web/package-lock.json         |   4 +-
 web/package.json              |   2 +-
 web/src/layouts/AppLayout.vue |   2 +
 web/src/router/index.ts       |   7 ++
 web/src/views/ExampleView.vue | 131 ++++++++++++++++++++++++++++++++++
 9 files changed, 176 insertions(+), 6 deletions(-)
 create mode 100644 web/src/views/ExampleView.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b71bb77..adb9687 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file.
 
+## [v1.3.1] - 2026-09-27
+
+### 新增
+
+- **示例页面（在线升级验证页）**：新增 `/example` 页面与侧栏「示例页面」入口，页面实时读取 `/api/version`，展示当前版本、验证步骤和验证结果，用于确认一键升级后前端路由、菜单与后端版本均已更新
+
+### 变更
+
+- 版本号提升到 1.3.1；`web/package.json` 与 `web/package-lock.json` 同步对齐
+- `AgentVersion` 保持 0.12.8，本次无 Agent 行为变化
+
+### 测试
+
+- 前端类型检查、单元测试与生产构建
+
 ## [v1.3.0] - 2026-09-27
 
 ### 新增
diff --git a/VERSION b/VERSION
index f0bb29e..3a3cd8c 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-1.3.0
+1.3.1
diff --git a/docs/README.md b/docs/README.md
index 6f0e2c9..7342027 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,7 +1,7 @@
 # Fonu 文档索引
 
 > 维护约定：新增方案 / 审查文档时在下方登记；方案落地后在「状态」列标注实施结果，并给已被推翻的描述加时效说明。
-> 最近更新：2026-09-27（v1.3.0）
+> 最近更新：2026-09-27（v1.3.1）
 
 ## 方案与设计（本目录）
 
@@ -9,7 +9,7 @@
 | --- | --- | --- |
 | `project-analysis-2026-09-27.md` | 全项目详细分析（v1.2.19）：架构、模块、数据、API、前端、链路、风险与改进路线 | 当前版本快照 |
 | `improvement-roadmap-2026-09-27.md` | P0-P3 改进路线实施方案：逐项改法、测试、验收、依赖、发布与回滚 | P0-1、P0-3 已完成，其余待实施 |
-| `system-upgrade.md` | Docker Compose 一键升级：sidecar 架构、首次部署、安全边界、回滚与故障排查 | 已实施（v1.3.0） |
+| `system-upgrade.md` | Docker Compose 一键升级：sidecar 架构、首次部署、安全边界、回滚、故障排查与 v1.3.1 验证页 | 已实施（v1.3.1） |
 | `project-audit-2026-09-24.md` | 全项目审查：P0/P1/P2 分级，含精确行号与逐条修法 | **进行中**——P0 已随 v1.2.7 完成，P1 实施中 |
 | `frp-server-list-merge-plan.md` | FRP 服务端列表并入「公网服务端」页（方案 A，四步） | 步 1/2 已完成（v1.2.6）；步 3 文案收尾、步 4 死样式清理未做 |
 | `agent-capability-plan.md` | fonu-agent 能力扩展（P0/P1/P2/P3） | 已实施（agent 0.11.0）；P3 三项不做 |
diff --git a/docs/system-upgrade.md b/docs/system-upgrade.md
index 321743b..c37856d 100644
--- a/docs/system-upgrade.md
+++ b/docs/system-upgrade.md
@@ -185,3 +185,18 @@ FONU_VERSION=<旧版本> docker compose up -d --no-deps --force-recreate fonu
 - 原生 systemd 安装：需要单独的受控升级 helper；
 - 回滚到远端不存在的镜像：需要额外发布流程；
 - 升级 `fonu-updater` 自身：当前只重建 `fonu` 服务，sidecar 更新仍需一次手动 Compose 操作。
+
+## 10. v1.3.1 在线升级验证
+
+v1.3.1 新增了用于验证升级结果的示例页面。推荐的线上验证流程：
+
+1. 确认当前线上实例为 v1.3.0，且 `fonu-updater` sidecar 已运行。
+2. 确认远端 `main` 分支的 `VERSION` 为 `1.3.1`。
+3. 在侧栏看到「一键升级」后点击并确认。
+4. 等待升级弹窗显示成功，页面自动刷新。
+5. 打开侧栏「示例页面」，确认：
+   - 页面路由为 `/example`；
+   - 页面显示的版本为 `1.3.1`；
+   - 「升级验证」显示为「通过」。
+
+如果示例页面可见且版本正确，说明镜像构建、容器重建、后端版本注入和前端静态资源更新均已生效。
diff --git a/web/package-lock.json b/web/package-lock.json
index 7a3c60c..6629ad7 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "fonu-web",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "fonu-web",
-      "version": "1.3.0",
+      "version": "1.3.1",
       "dependencies": {
         "@codemirror/commands": "^6.11.1",
         "@codemirror/lang-javascript": "^6.2.5",
diff --git a/web/package.json b/web/package.json
index 02ec91e..faf6ff8 100644
--- a/web/package.json
+++ b/web/package.json
@@ -1,7 +1,7 @@
 {
   "name": "fonu-web",
   "private": true,
-  "version": "1.3.0",
+  "version": "1.3.1",
   "packageManager": "npm@10.9.4",
   "type": "module",
   "scripts": {
diff --git a/web/src/layouts/AppLayout.vue b/web/src/layouts/AppLayout.vue
index 137869c..38fd507 100644
--- a/web/src/layouts/AppLayout.vue
+++ b/web/src/layouts/AppLayout.vue
@@ -123,6 +123,7 @@ import {
   CogOutline,
   DocumentTextOutline,
   Ellipse,
+  FlashOutline,
   GitNetworkOutline,
   GridOutline,
   LockClosedOutline,
@@ -203,6 +204,7 @@ const menuDefs = [
   { label: '公网反代', key: 'public-proxy', icon: ShieldCheckmarkOutline },
   { label: '日志中心', key: 'logs', icon: DocumentTextOutline },
   { label: '系统设置', key: 'settings', icon: CogOutline },
+  { label: '示例页面', key: 'example', icon: FlashOutline },
 ]
 
 const menuOptions = computed<MenuOption[]>(() =>
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index bf832bd..4375faa 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -12,6 +12,7 @@ import FrpView from '../views/FrpView.vue'
 import AgentView from '../views/AgentView.vue'
 import ProxyRemoteView from '../views/ProxyRemoteView.vue'
 import StatusPageView from '../views/StatusPageView.vue'
+import ExampleView from '../views/ExampleView.vue'
 
 const router = createRouter({
   history: createWebHistory(),
@@ -80,6 +81,12 @@ const router = createRouter({
           component: SettingsView,
           meta: { title: '系统设置', description: '配置系统参数与运行策略' },
         },
+        {
+          path: 'example',
+          name: 'example',
+          component: ExampleView,
+          meta: { title: '示例页面', description: '用于验证在线升级是否成功生效' },
+        },
       ],
     },
   ],
diff --git a/web/src/views/ExampleView.vue b/web/src/views/ExampleView.vue
new file mode 100644
index 0000000..e49a1da
--- /dev/null
+++ b/web/src/views/ExampleView.vue
@@ -0,0 +1,131 @@
+<template>
+  <PageHeader title="示例页面" description="用于验证 Web 一键升级是否成功生效">
+    <template #actions>
+      <n-button :loading="refreshing" @click="refreshVersion">
+        <template #icon><n-icon :component="RefreshOutline" /></template>
+        刷新版本信息
+      </n-button>
+    </template>
+  </PageHeader>
+
+  <n-alert type="success" :bordered="false" class="example-alert" title="在线升级验证页面已生效">
+    当前页面由 v{{ version }} 提供。如果你是在升级后首次看到此页面，说明前端构建、镜像重建和服务重启均已成功。
+  </n-alert>
+
+  <div class="stats-row">
+    <StatCard label="当前版本" :value="`v${version}`" sub="来自 /api/version" tone="brand">
+      <template #icon><n-icon :component="CloudOutline" /></template>
+    </StatCard>
+    <StatCard label="升级验证" value="通过" sub="示例路由与菜单已加载" tone="green">
+      <template #icon><n-icon :component="CheckmarkCircleOutline" /></template>
+    </StatCard>
+    <StatCard label="验证时间" :value="checkedAt || '刚刚'" sub="页面最近一次读取版本的时间" tone="blue" value-small>
+      <template #icon><n-icon :component="FlashOutline" /></template>
+    </StatCard>
+  </div>
+
+  <FonuCard title="验证步骤" subtitle="用这个页面确认线上实例已经更新到目标版本">
+    <ol class="example-steps">
+      <li>在旧版本页面点击侧栏的「一键升级」。</li>
+      <li>等待容器重建完成，页面自动刷新或恢复访问。</li>
+      <li>打开侧栏「示例页面」，确认本页可访问。</li>
+      <li>确认页面上的版本号为 <span class="mono">v{{ version }}</span>。</li>
+    </ol>
+  </FonuCard>
+
+  <FonuCard title="验证结果" subtitle="用于确认当前前端资源与后端版本一致">
+    <div class="example-result">
+      <div><label>前端路由</label><span class="mono">/example</span></div>
+      <div><label>侧栏菜单</label><span>已加载「示例页面」</span></div>
+      <div><label>后端版本</label><span class="mono">{{ version }}</span></div>
+      <div><label>验证状态</label><StatusBadge kind="success" text="通过" /></div>
+    </div>
+  </FonuCard>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { NAlert, NButton, NIcon, useMessage } from 'naive-ui'
+import {
+  CheckmarkCircleOutline,
+  CloudOutline,
+  FlashOutline,
+  RefreshOutline,
+} from '@vicons/ionicons5'
+import { api } from '../api/client'
+import FonuCard from '../components/FonuCard.vue'
+import PageHeader from '../components/PageHeader.vue'
+import StatCard from '../components/StatCard.vue'
+import StatusBadge from '../components/StatusBadge.vue'
+import { formatDate } from '../utils/format'
+
+const message = useMessage()
+const version = ref(__APP_VERSION__)
+const checkedAt = ref('')
+const refreshing = ref(false)
+
+async function refreshVersion() {
+  refreshing.value = true
+  try {
+    const result = await api.getVersion()
+    version.value = result.version || version.value
+    checkedAt.value = formatDate(new Date().toISOString())
+  } catch (error) {
+    message.error(error instanceof Error ? error.message : '读取版本失败')
+  } finally {
+    refreshing.value = false
+  }
+}
+
+onMounted(() => {
+  void refreshVersion()
+})
+</script>
+
+<style scoped>
+.example-alert {
+  margin-bottom: var(--fonu-space-5);
+}
+
+.stats-row {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: var(--fonu-space-4);
+  margin-bottom: var(--fonu-space-5);
+}
+
+.example-steps {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding-left: 22px;
+  color: var(--fonu-text-secondary);
+  line-height: 1.7;
+}
+
+.example-result {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--fonu-space-3);
+}
+
+.example-result > div {
+  display: grid;
+  gap: 4px;
+  padding: 12px 14px;
+  border: 1px solid var(--fonu-border);
+  border-radius: var(--fonu-radius-sm);
+  background: var(--fonu-bg);
+}
+
+.example-result label {
+  font-size: 12px;
+  color: var(--fonu-text-muted);
+}
+
+@media (max-width: 640px) {
+  .example-result {
+    grid-template-columns: 1fr;
+  }
+}
+</style>