feat(cloudflare): 自动创建隧道 DNS 记录并发布 v1.7.0

web/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "fonu-web",
-  "version": "1.6.9",
+  "version": "1.7.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "fonu-web",
-      "version": "1.6.9",
+      "version": "1.7.0",
       "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.9",
+  "version": "1.7.0",
   "packageManager": "npm@10.9.4",
   "type": "module",
   "scripts": {

web/src/api/types.ts

@@ -1066,6 +1066,7 @@ export interface CfTunnel {
   auto_start: boolean
   hostnames?: string[]
   origin_service?: string
+  dns_warning?: string
   created_at: string
   updated_at: string
 }

web/src/views/CloudflareView.vue

@@ -139,7 +139,7 @@
       <n-alert v-if="tokenTestResult" :type="tokenTestOk ? 'success' : 'error'" :bordered="false" class="cf-mode-alert">
         {{ tokenTestResult }}
       </n-alert>
-      <p class="cf-hint">Fonu 使用 Account ID + API Token 调用 Cloudflare API 创建和管理隧道，不再需要手工填写 Tunnel Token。</p>
+      <p class="cf-hint">Fonu 使用 Account ID + API Token 调用 Cloudflare API 创建和管理隧道与 DNS。API Token 需要 Account: Cloudflare Tunnel: Edit、Zone: Zone: Read、Zone: DNS: Edit 权限。</p>
 
       <n-divider title-placement="left">默认网络设置</n-divider>
       <n-form label-placement="top">
@@ -310,13 +310,15 @@ async function saveTunnel() {
   }
   saving.value = true
   try {
-    if (editing.value) {
-      await api.updateCfTunnel(editing.value.id, payload)
-    } else {
-      await api.createCfTunnel(payload)
-    }
+    const result = editing.value
+      ? await api.updateCfTunnel(editing.value.id, payload)
+      : await api.createCfTunnel(payload)
     editorVisible.value = false
-    message.success('隧道已保存')
+    if (result.dns_warning) {
+      message.warning(result.dns_warning)
+    } else {
+      message.success('隧道已保存')
+    }
     await load()
   } catch (error) {
     message.error(error instanceof Error ? error.message : '保存隧道失败')

web/src/views/ExampleView.vue

@@ -8,7 +8,7 @@
     </template>
   </PageHeader>
 
-  <n-alert type="success" :bordered="false" class="example-alert" title="v1.6.9 示例页面验证标识已生效">
+  <n-alert type="success" :bordered="false" class="example-alert" title="v1.7.0 示例页面验证标识已生效">
     当前页面由 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.9。
+      看到这个新区块，说明前端资源已经从旧版本切换到 v1.7.0。
     </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.9 前端资源已加载" tone="teal">
+    <StatCard label="页面状态" value="已更新" sub="v1.7.0 前端资源已加载" tone="teal">
       <template #icon><n-icon :component="CheckmarkCircleOutline" /></template>
     </StatCard>
   </div>
 
   <FonuCard title="本次示例页变化" subtitle="用于确认升级后的页面内容确实发生变化">
     <ul class="example-changes">
-      <li>页面版本提示更新为 v1.6.9。</li>
-      <li>「本次升级验证」区块和页面状态同步更新为 v1.6.9。</li>
-      <li>验证标识更新为 <span class="mono">v1.6.9-example-page</span>。</li>
+      <li>页面版本提示更新为 v1.7.0。</li>
+      <li>「本次升级验证」区块和页面状态同步更新为 v1.7.0。</li>
+      <li>验证标识更新为 <span class="mono">v1.7.0-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.9'
-const verificationMarker = 'v1.6.9-example-page'
+const verificationRound = 'v1.7.0'
+const verificationMarker = 'v1.7.0-example-page'
 
 async function refreshVersion() {
   refreshing.value = true