feat: update dashboard and release UI

static/app.css

@@ -34,6 +34,10 @@
   display: none;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 html,
 body {
   margin: 0;
@@ -44,9 +48,7 @@ body {
   position: relative;
   color: var(--text);
   font-family: "IBM Plex Sans", "PingFang SC", "Noto Sans SC", sans-serif;
-  background:
+  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
-    radial-gradient(circle at top right, color-mix(in oklab, var(--accent) 8%, transparent), transparent 30%),
-    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
 }
 
 body::before {
@@ -71,17 +73,16 @@ body::before {
 
 .boot-indicator {
   position: fixed;
-  left: 50%;
+  right: 24px;
-  top: 22px;
+  top: 18px;
   z-index: 60;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   min-height: 40px;
   padding: 0 14px;
-  transform: translateX(-50%);
   border: 1px solid color-mix(in oklab, var(--line) 90%, var(--panel-strong));
-  border-radius: 14px;
+  border-radius: 8px;
   background: linear-gradient(180deg, color-mix(in oklab, var(--panel-strong) 96%, var(--accent-soft)) 0%, var(--panel) 100%);
   box-shadow: 0 16px 32px rgba(33, 46, 76, 0.1);
   color: var(--muted);
@@ -390,7 +391,7 @@ body.auth-page {
 .control-bar,
 .panel {
   border: 1px solid var(--line);
-  border-radius: 18px;
+  border-radius: 10px;
   background: linear-gradient(180deg, var(--panel-tint) 0%, var(--panel) 100%);
   box-shadow: var(--shadow);
 }
@@ -400,8 +401,8 @@ body.auth-page {
   top: 10px;
   z-index: 20;
   display: grid;
-  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) auto;
+  grid-template-columns: minmax(188px, 250px) minmax(0, max-content) minmax(420px, 1fr);
-  gap: 14px;
+  gap: 10px;
   align-items: center;
   min-height: 56px;
   padding: 9px 14px;
@@ -452,7 +453,7 @@ body.auth-page {
   min-height: 24px;
   padding: 0 9px;
   border: 1px solid color-mix(in oklab, var(--accent) 34%, var(--line-strong));
-  border-radius: 999px;
+  border-radius: 7px;
   background: var(--accent-soft);
   color: var(--accent);
   font-size: 11px;
@@ -473,7 +474,7 @@ body.auth-page {
   flex-wrap: wrap;
   padding: 4px;
   border: 1px solid color-mix(in oklab, var(--line) 90%, var(--panel-strong));
-  border-radius: 16px;
+  border-radius: 10px;
   background: linear-gradient(180deg, color-mix(in oklab, var(--panel-muted) 94%, var(--panel-strong)) 0%, color-mix(in oklab, var(--panel-strong) 96%, var(--panel-muted)) 100%);
   box-shadow: inset 0 1px 0 color-mix(in oklab, var(--panel-strong) 72%, transparent);
 }
@@ -497,7 +498,7 @@ body.auth-page {
   justify-content: center;
   min-height: 34px;
   padding: 0 12px;
-  border-radius: 11px;
+  border-radius: 8px;
   background: linear-gradient(180deg, color-mix(in oklab, var(--panel-strong) 98%, var(--panel-muted)) 0%, var(--panel-strong) 100%);
   cursor: pointer;
   font-size: 11px;
@@ -535,13 +536,21 @@ body.auth-page {
 
 .topbar-status {
   justify-content: flex-end;
+  flex-wrap: nowrap;
   padding: 4px;
   border: 1px solid color-mix(in oklab, var(--line) 90%, var(--panel-strong));
-  border-radius: 16px;
+  border-radius: 10px;
   background: linear-gradient(180deg, color-mix(in oklab, var(--panel-muted) 94%, var(--panel-strong)) 0%, color-mix(in oklab, var(--panel-strong) 96%, var(--panel-muted)) 100%);
   box-shadow: inset 0 1px 0 color-mix(in oklab, var(--panel-strong) 72%, transparent);
 }
 
+.topbar-status .badge,
+.topbar-status .refresh,
+.topbar-status .interval-field {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
 .control-bar {
   position: sticky;
   top: 72px;
@@ -636,15 +645,26 @@ body.auth-page {
   min-width: 320px;
   min-height: 34px;
   padding: 0 11px;
-  border-radius: 12px;
+  border-radius: 8px;
   background: color-mix(in oklab, var(--panel-muted) 88%, var(--bg-soft));
 }
 
+.topbar-search {
+  flex: 1 1 220px;
+  min-width: min(24vw, 300px);
+  max-width: 360px;
+}
+
 .search::placeholder {
   color: var(--muted);
   opacity: 0.88;
 }
 
+.search:disabled {
+  opacity: 0.58;
+  cursor: not-allowed;
+}
+
 .interval-field {
   display: inline-flex;
   align-items: center;
@@ -657,7 +677,7 @@ body.auth-page {
   min-width: 82px;
   min-height: 32px;
   padding: 0 11px;
-  border-radius: 12px;
+  border-radius: 8px;
   background: var(--panel-strong);
 }
 
@@ -959,7 +979,7 @@ body.auth-page {
 
 .status-band-item.tone-ok {
   background:
-    linear-gradient(180deg, color-mix(in oklab, var(--ok-soft) 52%, var(--panel-strong)) 0%, color-mix(in oklab, var(--ok-soft) 74%, var(--panel-muted)) 100%);
+    linear-gradient(180deg, color-mix(in oklab, var(--panel-strong) 98%, var(--ok-soft)) 0%, color-mix(in oklab, var(--panel-muted) 94%, var(--panel-strong)) 100%);
 }
 
 .status-band-item.tone-warn {
@@ -2458,6 +2478,17 @@ body.auth-page {
   font-size: 11px;
 }
 
+.infra-freshness {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  padding-top: 7px;
+  border-top: 1px solid color-mix(in oklab, var(--line) 86%, var(--panel-strong));
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 700;
+}
+
 .infra-inline-list {
   display: flex;
   gap: 8px;
@@ -3019,6 +3050,28 @@ body.auth-page {
   margin-top: 8px;
 }
 
+.release-bottom-action-bar {
+  position: sticky;
+  bottom: 12px;
+  z-index: 16;
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  margin-top: 12px;
+  padding: 8px 10px;
+  border: 1px solid var(--line-strong);
+  border-radius: 10px;
+  background: linear-gradient(180deg, color-mix(in oklab, var(--panel-strong) 98%, var(--accent-soft)) 0%, var(--panel-strong) 100%);
+  box-shadow:
+    0 14px 30px rgba(33, 46, 76, 0.12),
+    inset 0 1px 0 color-mix(in oklab, var(--panel-strong) 78%, transparent);
+}
+
+.release-action-summary.compact {
+  margin-top: 0;
+}
+
 .release-card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
@@ -4527,6 +4580,7 @@ body.auth-page {
 }
 
 .badge.warn,
+.warn-text,
 .tone-warn {
   color: var(--warn);
 }
@@ -4640,6 +4694,7 @@ body.auth-page {
   .topbar-status {
     width: 100%;
     justify-content: flex-start;
+    flex-wrap: wrap;
   }
 
   .detail-panel {
@@ -4722,8 +4777,10 @@ body.auth-page {
   }
 
   .boot-indicator {
+    left: 12px;
+    right: 12px;
     top: 14px;
-    width: calc(100% - 24px);
+    width: auto;
     justify-content: center;
   }
 
@@ -4844,6 +4901,7 @@ body.auth-page {
   }
 
   .release-action-bar,
+  .release-bottom-action-bar,
   .release-task-head,
   .log-viewer-head,
   .compact-workbench-head,

static/app.js

@@ -639,6 +639,160 @@ createApp({
       }
       return this.formatDateTime(this.payload.updatedAt);
     },
+    globalHealthTone() {
+      if (this.error) {
+        return "bad";
+      }
+      if (this.loading && !this.hasRenderableData) {
+        return "warn";
+      }
+      if (CURRENT_APP_CONTEXT.mode === "common") {
+        if (this.commonTool === "mysql" && this.mySqlAdmin.error) {
+          return "bad";
+        }
+        if (this.commonTool === "cdn" && this.cdnAdmin.error) {
+          return "bad";
+        }
+        return "neutral";
+      }
+
+      const nacosDown = !(this.payload.nacos && this.payload.nacos.ok);
+      const mongoDown = !(this.payload.mongo && this.payload.mongo.ok);
+      const serviceDown = Number(this.summary.down || 0) > 0;
+      const hostMetricDown = Number(this.summary.hostMetricDown || 0) > 0;
+      const nacosUnhealthy = Number(this.summary.nacosUnhealthyInstanceTotal || 0) > 0;
+
+      if (serviceDown || nacosDown || mongoDown) {
+        return "bad";
+      }
+      if (hostMetricDown || nacosUnhealthy) {
+        return "warn";
+      }
+      return "ok";
+    },
+    globalHealthLabel() {
+      if (this.error) {
+        return "全局异常";
+      }
+      if (this.loading && !this.hasRenderableData) {
+        return "加载中";
+      }
+      if (CURRENT_APP_CONTEXT.mode === "common") {
+        return this.globalHealthTone === "bad" ? "通用异常" : "通用在线";
+      }
+      if (this.globalHealthTone === "bad") {
+        return `全局异常 ${this.summary.down || 0}`;
+      }
+      if (this.globalHealthTone === "warn") {
+        return "需要关注";
+      }
+      return "全局正常";
+    },
+    globalSearchModel: {
+      get() {
+        if (["overview", "services", "hosts"].includes(this.activeView)) {
+          return this.keyword;
+        }
+        if (this.activeView === "infra") {
+          return this.infraKeyword;
+        }
+        if (this.activeView === "database") {
+          return this.databaseKeywordModel;
+        }
+        if (this.activeView === "config") {
+          return this.configTab === "go" ? "" : this.nacosConfig.keyword;
+        }
+        if (this.activeView === "release") {
+          return this.releaseKeyword;
+        }
+        if (this.activeView === "common") {
+          return this.commonTool === "mysql" ? this.mySqlAdmin.keyword : this.cdnAdmin.keyword;
+        }
+        return "";
+      },
+      set(value) {
+        const nextValue = String(value || "");
+        if (["overview", "services", "hosts"].includes(this.activeView)) {
+          this.keyword = nextValue;
+          return;
+        }
+        if (this.activeView === "infra") {
+          this.infraKeyword = nextValue;
+          return;
+        }
+        if (this.activeView === "database") {
+          this.databaseKeywordModel = nextValue;
+          return;
+        }
+        if (this.activeView === "config") {
+          if (this.configTab !== "go") {
+            this.nacosConfig.keyword = nextValue;
+          }
+          return;
+        }
+        if (this.activeView === "release") {
+          this.releaseKeyword = nextValue;
+          return;
+        }
+        if (this.activeView === "common") {
+          if (this.commonTool === "mysql") {
+            this.mySqlAdmin.keyword = nextValue;
+          } else {
+            this.cdnAdmin.keyword = nextValue;
+          }
+        }
+      },
+    },
+    globalSearchPlaceholder() {
+      if (["overview", "services", "hosts"].includes(this.activeView)) {
+        return "搜索主机 / 服务 / IP";
+      }
+      if (this.activeView === "infra") {
+        return this.infraTab === "mongo" ? "搜索数据库 / 指标" : this.infraTab === "tat" ? "搜索主机 / IP / 节点" : "搜索服务 / namespace / IP";
+      }
+      if (this.activeView === "database") {
+        return this.databaseSearchPlaceholder;
+      }
+      if (this.activeView === "config") {
+        return this.configTab === "history" ? "搜索操作 / 结果 / 时间" : this.configTab === "go" ? "Go Env 当前无搜索" : "搜索 dataId / group / appName";
+      }
+      if (this.activeView === "release") {
+        return "搜索服务 / 主机 / 镜像";
+      }
+      if (this.activeView === "common") {
+        return this.commonTool === "mysql" ? "搜索数据库 / 表" : "搜索 taskId / URL / 状态";
+      }
+      return "全局搜索";
+    },
+    globalSearchDisabled() {
+      return this.activeView === "config" && this.configTab === "go";
+    },
+    dataFreshnessLabel() {
+      const updatedAt = Date.parse(this.payload.updatedAt || "");
+      if (Number.isNaN(updatedAt)) {
+        return "未知";
+      }
+      const seconds = Math.max(0, Math.round((Date.now() - updatedAt) / 1000));
+      if (seconds < 60) {
+        return `${seconds}s`;
+      }
+      const minutes = Math.floor(seconds / 60);
+      if (minutes < 60) {
+        return `${minutes}m`;
+      }
+      return `${Math.floor(minutes / 60)}h`;
+    },
+    dataFreshnessTone() {
+      const updatedAt = Date.parse(this.payload.updatedAt || "");
+      if (Number.isNaN(updatedAt)) {
+        return "warn";
+      }
+      const seconds = Math.max(0, Math.round((Date.now() - updatedAt) / 1000));
+      if (seconds > 180) {
+        return "warn";
+      }
+      return "neutral";
+    },
     hasRenderableData() {
       return (
         Boolean(this.payload.updatedAt)

static/index.html

@@ -38,6 +38,8 @@
             </nav>
 
             <div class="topbar-status">
+                <span :class="['badge', globalHealthTone]">{{ globalHealthLabel }}</span>
+                <input v-model.trim="globalSearchModel" class="search topbar-search" :placeholder="globalSearchPlaceholder" :disabled="globalSearchDisabled" />
                 <span v-if="auth.username" class="badge neutral mono">{{ auth.username }}</span>
                 <span :class="['badge', loading ? 'warn' : 'neutral']">{{ loading ? '刷新中' : '在线' }}</span>
                 <span v-if="error" class="badge bad">接口异常</span>
@@ -70,8 +72,6 @@
                         <button :class="['filter-chip', densityMode === 'compact' ? 'active' : '']" @click="densityMode = 'compact'">紧凑</button>
                         <button :class="['filter-chip', densityMode === 'detail' ? 'active' : '']" @click="densityMode = 'detail'">详情</button>
                     </div>
-
-                    <input v-model.trim="keyword" class="search" placeholder="搜索主机 / 服务 / IP" />
                 </div>
             </section>
         </template>
@@ -153,11 +153,6 @@
                     >
                         {{ infraMongoDetailsOpen ? '收起次要指标' : '展开次要指标' }}
                     </button>
-                    <input
-                        v-model.trim="infraKeyword"
-                        class="search"
-                        :placeholder="infraTab === 'mongo' ? '搜索数据库 / 指标' : infraTab === 'tat' ? '搜索主机 / IP / 节点' : '搜索服务 / namespace / IP'"
-                    />
                 </div>
             </section>
         </template>
@@ -192,7 +187,6 @@
                 </div>
 
                 <div class="control-group control-group-spread">
-                    <input v-model.trim="databaseKeywordModel" class="search" :placeholder="databaseSearchPlaceholder" />
                     <button class="refresh ghost" @click="refreshDatabaseTree" :disabled="databaseTreeLoading">
                         {{ databaseTreeLoading ? '刷新中...' : '刷新树' }}
                     </button>
@@ -227,7 +221,6 @@
 
                 <div class="control-group control-group-spread">
                     <template v-if="commonTool === 'mysql'">
-                        <input v-model.trim="mySqlAdmin.keyword" class="search" placeholder="搜索数据库 / 表" />
                         <button class="refresh ghost" @click="refreshMySqlDatabases({ preserveSelection: true })" :disabled="mySqlAdmin.loading">
                             {{ mySqlAdmin.loading ? '刷新中...' : '刷新树' }}
                         </button>
@@ -240,7 +233,6 @@
                         </button>
                     </template>
                     <template v-else>
-                        <input v-model.trim="cdnAdmin.keyword" class="search" placeholder="搜索 taskId / URL / 状态" />
                         <button class="refresh ghost" @click="refreshCdnOverview()" :disabled="cdnAdmin.loading">
                             {{ cdnAdmin.loading ? '刷新中...' : '刷新记录' }}
                         </button>
@@ -271,13 +263,7 @@
                 </div>
 
                 <div class="control-group control-group-spread">
-                    <input
+                    <div v-if="configTab === 'go'" class="taskbar-inline">
-                        v-if="configTab !== 'go'"
-                        v-model.trim="nacosConfig.keyword"
-                        class="search"
-                        :placeholder="configTab === 'history' ? '搜索操作 / 结果 / 时间' : '搜索 dataId / group / appName'"
-                    />
-                    <div v-else class="taskbar-inline">
                         <span class="badge neutral">{{ goConfig.hosts.length }} 台主机</span>
                         <span :class="['badge', goConfig.diffKeys.length > 0 ? 'warn' : 'neutral']">{{ goConfig.diffKeys.length }} 差异 key</span>
                     </div>
@@ -337,7 +323,6 @@
                             <option value="frontend">前端</option>
                         </select>
                     </label>
-                    <input v-model.trim="releaseKeyword" class="search" placeholder="搜索服务 / 主机 / 镜像" />
                 </div>
             </section>
         </template>
@@ -874,6 +859,10 @@
                             <strong>{{ item.value }}</strong>
                         </span>
                     </div>
+                    <div class="infra-freshness">
+                        <span>最近 {{ formattedUpdatedAt }}</span>
+                        <span :class="dataFreshnessTone === 'warn' ? 'warn-text' : ''">延迟 {{ dataFreshnessLabel }}</span>
+                    </div>
                 </article>
             </section>
 
@@ -1266,6 +1255,8 @@
                     <span>主机 {{ summary.hostTotal || 0 }}</span>
                     <span>正常 {{ summary.hostMetricOk || 0 }}</span>
                     <span :class="(summary.hostMetricDown || 0) > 0 ? 'bad-text' : 'ok-text'">异常 {{ summary.hostMetricDown || 0 }}</span>
+                    <span>最近 {{ formattedUpdatedAt }}</span>
+                    <span :class="dataFreshnessTone === 'warn' ? 'warn-text' : ''">延迟 {{ dataFreshnessLabel }}</span>
                 </div>
 
                 <div class="table-wrap">
@@ -1642,7 +1633,7 @@
                                                     <div class="action-group action-group-tight">
                                                         <button class="refresh ghost inline-button" @click="loadMySqlRowForEdit(row)">编辑</button>
                                                         <button class="refresh ghost inline-button" @click="copyMySqlRowToInsert(row)">复制</button>
-                                                        <button class="refresh ghost inline-button" @click="deleteMySqlRow(row)">删除</button>
+                                                        <button class="refresh danger inline-button" @click="deleteMySqlRow(row)">删除</button>
                                                     </div>
                                                 </td>
                                                 <td
@@ -1757,7 +1748,7 @@
                                                     </div>
                                                 </td>
                                                 <td>
-                                                    <button class="refresh ghost inline-button" @click="dropMySqlColumn(column.name)" :disabled="mySqlAdmin.columnForm.saving">删除</button>
+                                                    <button class="refresh danger inline-button" @click="dropMySqlColumn(column.name)" :disabled="mySqlAdmin.columnForm.saving">删除</button>
                                                 </td>
                                             </tr>
                                             <tr v-if="mySqlAdmin.schema.columns.length === 0">
@@ -1898,7 +1889,7 @@
                                                     </div>
                                                 </td>
                                                 <td>
-                                                    <button class="refresh ghost inline-button" @click="dropMySqlIndex(index.name)" :disabled="mySqlAdmin.indexForm.saving">删除</button>
+                                                    <button class="refresh danger inline-button" @click="dropMySqlIndex(index.name)" :disabled="mySqlAdmin.indexForm.saving">删除</button>
                                                 </td>
                                             </tr>
                                             <tr v-if="mySqlAdmin.schema.indexes.length === 0">
@@ -2288,7 +2279,7 @@
                                                         <button class="refresh ghost inline-button" @click="copyText(item.jsonText, 'mongo-doc-' + item.key)">
                                                             {{ isCopied('mongo-doc-' + item.key) ? '已复制' : '复制' }}
                                                         </button>
-                                                        <button class="refresh ghost inline-button" @click="deleteMongoDocument(item)">删除</button>
+                                                        <button class="refresh danger inline-button" @click="deleteMongoDocument(item)">删除</button>
                                                     </div>
                                                 </td>
                                                 <td class="mono">{{ item.idText || '-' }}</td>
@@ -2621,7 +2612,7 @@
                                                     </div>
                                                 </td>
                                                 <td>
-                                                    <button class="refresh ghost inline-button" @click="dropMongoIndex(index.name)" :disabled="mongoAdmin.indexForm.saving || index.name === '_id_'">删除</button>
+                                                    <button class="refresh danger inline-button" @click="dropMongoIndex(index.name)" :disabled="mongoAdmin.indexForm.saving || index.name === '_id_'">删除</button>
                                                 </td>
                                             </tr>
                                             <tr v-if="mongoAdmin.collectionDetail.indexes.length === 0">
@@ -2736,7 +2727,7 @@
                                     </header>
 
                                     <div class="action-group action-group-stack">
-                                        <button class="refresh ghost" @click="dropMongoSecondaryIndexes" :disabled="mongoAdmin.indexForm.dropAllSaving">
+                                        <button class="refresh danger" @click="dropMongoSecondaryIndexes" :disabled="mongoAdmin.indexForm.dropAllSaving">
                                             {{ mongoAdmin.indexForm.dropAllSaving ? '执行中...' : '删除二级索引' }}
                                         </button>
                                         <button class="refresh danger" @click="dropMongoCollection" :disabled="mongoAdmin.collectionOps.dropRunning">
@@ -2980,7 +2971,12 @@
                                         {{ nacosConfig.validating ? '校验中...' : '校验' }}
                                     </button>
                                     <button class="refresh ghost" @click="restoreNacosContent" :disabled="!nacosConfigDirty || nacosConfig.saving || nacosConfig.detailLoading">恢复</button>
-                                    <button class="refresh" @click="saveNacosConfig" :disabled="nacosConfig.saving || nacosConfig.detailLoading">
+                                    <button
+                                        class="refresh"
+                                        @click="saveNacosConfig"
+                                        :disabled="nacosConfig.saving || nacosConfig.detailLoading || (nacosConfigDirty && configEditorMode !== 'diff')"
+                                        :title="nacosConfigDirty && configEditorMode !== 'diff' ? '保存前先切到 Diff' : ''"
+                                    >
                                         {{ nacosConfig.saving ? '保存中...' : '保存' }}
                                     </button>
                                 </div>
@@ -3064,7 +3060,12 @@
                                 {{ goConfig.validating ? '校验中...' : '校验' }}
                             </button>
                             <button class="refresh ghost" @click="restoreGoContent" :disabled="!goConfigDirty || goConfig.loading || goConfig.saving">恢复</button>
-                            <button class="refresh" @click="saveGoConfig" :disabled="goConfig.saving || goConfig.loading">
+                            <button
+                                class="refresh"
+                                @click="saveGoConfig"
+                                :disabled="goConfig.saving || goConfig.loading || (goConfigDirty && goEditorMode !== 'diff')"
+                                :title="goConfigDirty && goEditorMode !== 'diff' ? '保存前先切到 Diff' : ''"
+                            >
                                 {{ goConfig.saving ? '保存中...' : '保存' }}
                             </button>
                         </div>
@@ -3129,18 +3130,6 @@
                         <strong>发布工作台</strong>
                         <span>构建参数 → 更新目标 → 执行日志 → 滚动重启</span>
                     </div>
-                    <div class="action-group">
-                        <button class="refresh ghost" @click="refreshReleaseTargets" :disabled="updateOps.loading || restartOps.loading || updateOps.running || restartOps.running">
-                            {{ updateOps.loading || restartOps.loading ? '刷新中...' : '刷新目标' }}
-                        </button>
-                        <button class="refresh ghost" @click="runReleasePrecheck" :disabled="updateOps.running || restartOps.running">预检查</button>
-                        <button class="refresh ghost" @click="openUpdateLogViewer" :disabled="!updateOps.operationId && !updateOps.logs.length">
-                            查看日志
-                        </button>
-                        <button class="refresh danger" @click="runServiceUpdate" :disabled="updateOps.running || updateOps.selectedServices.length === 0">
-                            {{ updateOps.running ? '更新中...' : `执行更新 ${updateOps.selectedServices.length}` }}
-                        </button>
-                    </div>
                 </div>
 
                 <div class="release-action-summary">
@@ -3413,9 +3402,6 @@
                         <span :class="['badge', restartOps.error ? 'bad' : restartOps.running ? 'warn' : 'ok']">
                             {{ restartOps.error ? '存在错误' : restartOps.running ? '执行中' : '可操作' }}
                         </span>
-                        <button class="refresh danger" @click="runRollingRestart" :disabled="restartOps.running || restartOps.selectedServices.length === 0">
-                            {{ restartOps.running ? '重启中...' : `执行重启 ${restartOps.selectedServices.length}` }}
-                        </button>
                     </div>
                 </header>
 
@@ -3491,6 +3477,30 @@
                     </div>
                 </details>
             </section>
+
+            <section class="release-bottom-action-bar" aria-label="发布操作">
+                <div class="release-action-summary compact">
+                    <span :class="['badge', updateStatusBadgeClass()]">{{ updateStatusLabel() }}</span>
+                    <span class="badge neutral">更新 {{ updateOps.selectedServices.length }} / {{ releaseTargetRows.length }}</span>
+                    <span class="badge neutral">重启 {{ restartOps.selectedServices.length }} / {{ restartTargetRows.length }}</span>
+                    <span :class="['badge', releasePrecheck.ok ? 'ok' : releasePrecheck.ranAt ? 'warn' : 'neutral']">
+                        {{ releasePrecheck.ranAt ? releasePrecheck.title : '未预检查' }}
+                    </span>
+                </div>
+                <div class="action-group">
+                    <button class="refresh ghost" @click="refreshReleaseTargets" :disabled="updateOps.loading || restartOps.loading || updateOps.running || restartOps.running">
+                        {{ updateOps.loading || restartOps.loading ? '刷新中...' : '刷新目标' }}
+                    </button>
+                    <button class="refresh ghost" @click="runReleasePrecheck" :disabled="updateOps.running || restartOps.running">预检查</button>
+                    <button class="refresh ghost" @click="openUpdateLogViewer" :disabled="!updateOps.operationId && !updateOps.logs.length">查看日志</button>
+                    <button class="refresh danger" @click="runServiceUpdate" :disabled="updateOps.running || updateOps.selectedServices.length === 0">
+                        {{ updateOps.running ? '更新中...' : `执行更新 ${updateOps.selectedServices.length}` }}
+                    </button>
+                    <button class="refresh danger" @click="runRollingRestart" :disabled="restartOps.running || restartOps.selectedServices.length === 0">
+                        {{ restartOps.running ? '重启中...' : `执行重启 ${restartOps.selectedServices.length}` }}
+                    </button>
+                </div>
+            </section>
         </template>
 
         <div v-if="logViewer.open" class="log-viewer-overlay" @click.self="closeLogViewer">