fix(cloudflare): 统一隧道弹窗宽度并发布 v1.6.2

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file.
 
+## [v1.6.2] - 2026-09-28
+
+### 修复
+
+- **Cloudflare 隧道弹窗宽度**：`n-modal` 的宽度原先写在 scoped class 上，没有传到 naive-ui 的 modal 根节点，部分视口下弹窗被拉成 100%。现在改为与其他页面一致的 `:style` 写法：编辑弹窗 `min(720px, 96vw)`、详情弹窗 `min(760px, 96vw)`、二进制弹窗 `min(560px, 94vw)`
+
+### 变更
+
+- 版本号提升到 1.6.2；`AgentVersion` 保持 **0.14.1**
+
+### 测试
+
+- `npm run typecheck`、`npm run build` 通过
+
 ## [v1.6.1] - 2026-09-28
 
 ### 修复

VERSION

@@ -1 +1 @@
-1.6.1
+1.6.2

docs/README.md

@@ -1,7 +1,7 @@
 # Fonu 文档索引
 
 > 维护约定：新增方案 / 审查文档时在下方登记；方案落地后在「状态」列标注实施结果，并给已被推翻的描述加时效说明。
-> 最近更新：2026-09-28（v1.6.1）
+> 最近更新：2026-09-28（v1.6.2）
 
 ## 方案与设计（本目录）
 

docs/system-upgrade.md

@@ -238,16 +238,16 @@ FONU_VERSION=<旧版本> docker compose up -d --no-deps --force-recreate fonu
 
 ## 10. 在线升级验证
 
-示例页面用于验证升级结果。v1.6.1 的验证流程：
+示例页面用于验证升级结果。v1.6.2 的验证流程：
 
 1. 确认当前线上实例为 v1.3.0，且 `fonu-updater` sidecar 已运行。
-2. 确认远端 `main` 分支的 `VERSION` 为 `1.6.1`。
+2. 确认远端 `main` 分支的 `VERSION` 为 `1.6.2`。
 3. 在侧栏看到「一键升级」后点击并确认。
 4. 等待升级弹窗显示成功，页面自动刷新。
 5. 打开侧栏「示例页面」，确认：
    - 页面路由为 `/example`；
-   - 页面显示的版本为 `1.6.1`；
+   - 页面显示的版本为 `1.6.2`；
-   - 页面显示验证标识 `v1.6.1-example-page`；
+   - 页面显示验证标识 `v1.6.2-example-page`；
    - 页面显示独立的「本次升级验证」区块；
    - 「升级验证」显示为「通过」。
 

web/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "fonu-web",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "fonu-web",
-      "version": "1.6.1",
+      "version": "1.6.2",
       "dependencies": {
         "@codemirror/commands": "^6.11.1",
         "@codemirror/lang-javascript": "^6.2.5",

web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fonu-web",
   "private": true,
-  "version": "1.6.1",
+  "version": "1.6.2",
   "packageManager": "npm@10.9.4",
   "type": "module",
   "scripts": {

web/src/views/CloudflareView.vue

@@ -37,7 +37,7 @@
     </div>
   </FonuCard>
 
-  <n-modal v-model:show="editorVisible" preset="card" class="cf-modal" :title="editing ? '编辑隧道' : '新建隧道'">
+  <n-modal v-model:show="editorVisible" preset="card" :style="{ width: 'min(720px, 96vw)' }" :title="editing ? '编辑隧道' : '新建隧道'">
     <div class="cf-modal__body">
       <n-alert :type="form.mode === 'token-remote' ? 'warning' : 'info'" :bordered="false" class="cf-mode-alert">
         {{ modeHint }}
@@ -79,7 +79,7 @@
     </template>
   </n-modal>
 
-  <n-modal v-model:show="detailVisible" preset="card" class="cf-modal cf-modal--wide" :title="detailTunnel?.name || '隧道详情'">
+  <n-modal v-model:show="detailVisible" preset="card" :style="{ width: 'min(760px, 96vw)' }" :title="detailTunnel?.name || '隧道详情'">
     <div v-if="detailTunnel" class="cf-detail">
       <div class="cf-detail__stats">
         <div class="cf-stat"><label>状态</label><StatusBadge :kind="statusKind(detailStatus?.status || detailTunnel.status)" :text="statusText(detailStatus?.status || detailTunnel.status)" /></div>
@@ -108,7 +108,7 @@
     </template>
   </n-modal>
 
-  <n-modal v-model:show="binaryVisible" preset="card" class="cf-modal" title="cloudflared 二进制">
+  <n-modal v-model:show="binaryVisible" preset="card" :style="{ width: 'min(560px, 94vw)' }" title="cloudflared 二进制">
     <div class="cf-modal__body">
       <div class="cf-binary">
         <div><label>当前版本</label><strong class="mono">{{ binaryVersion || '未安装' }}</strong></div>
@@ -414,8 +414,6 @@ useVisibilityPolling(refreshDetail, 3000, { enabled: detailVisible })
 .cf-row__main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
 .cf-row__actions { display: flex; gap: 6px; flex-wrap: wrap; }
 .cf-meta { font-size: 12px; color: var(--fonu-text-secondary); }
-.cf-modal { width: 720px; max-width: 94vw; }
-.cf-modal--wide { width: 780px; }
 .cf-modal__body { max-height: 68vh; overflow: auto; padding-right: 4px; }
 .cf-modal__footer { display: flex; justify-content: flex-end; gap: 8px; }
 .cf-mode-alert { margin-bottom: 4px; }

web/src/views/ExampleView.vue

@@ -8,7 +8,7 @@
     </template>
   </PageHeader>
 
-  <n-alert type="success" :bordered="false" class="example-alert" title="v1.6.1 示例页面验证标识已生效">
+  <n-alert type="success" :bordered="false" class="example-alert" title="v1.6.2 示例页面验证标识已生效">
     当前页面由 v{{ version }} 提供，验证标识为 <span class="mono">{{ verificationMarker }}</span>。
     如果你是在升级后首次看到这行内容，说明前端构建、镜像重建和服务重启均已成功。
   </n-alert>
@@ -19,7 +19,7 @@
       <strong class="example-proof__value">{{ verificationRound }}</strong>
     </div>
     <div class="example-proof__hint">
-      看到这个新区块，说明前端资源已经从旧版本切换到 v1.6.1。
+      看到这个新区块，说明前端资源已经从旧版本切换到 v1.6.2。
     </div>
   </div>
 
@@ -33,16 +33,16 @@
     <StatCard label="本次验证标识" :value="verificationMarker" sub="用于区分升级前后的前端资源" tone="blue" value-small>
       <template #icon><n-icon :component="FlashOutline" /></template>
     </StatCard>
-    <StatCard label="页面状态" value="已更新" sub="v1.6.1 前端资源已加载" tone="teal">
+    <StatCard label="页面状态" value="已更新" sub="v1.6.2 前端资源已加载" tone="teal">
       <template #icon><n-icon :component="CheckmarkCircleOutline" /></template>
     </StatCard>
   </div>
 
   <FonuCard title="本次示例页变化" subtitle="用于确认升级后的页面内容确实发生变化">
     <ul class="example-changes">
-      <li>页面版本提示更新为 v1.6.1。</li>
+      <li>页面版本提示更新为 v1.6.2。</li>
-      <li>「本次升级验证」区块和页面状态同步更新为 v1.6.1。</li>
+      <li>「本次升级验证」区块和页面状态同步更新为 v1.6.2。</li>
-      <li>验证标识更新为 <span class="mono">v1.6.1-example-page</span>。</li>
+      <li>验证标识更新为 <span class="mono">v1.6.2-example-page</span>。</li>
     </ul>
   </FonuCard>
 
@@ -87,8 +87,8 @@ const message = useMessage()
 const version = ref(__APP_VERSION__)
 const checkedAt = ref('')
 const refreshing = ref(false)
-const verificationRound = 'v1.6.1'
+const verificationRound = 'v1.6.2'
-const verificationMarker = 'v1.6.1-example-page'
+const verificationMarker = 'v1.6.2-example-page'
 
 async function refreshVersion() {
   refreshing.value = true