agentworkshop 0.7.22 → 0.7.24

package/app/pages/daq/index.vue

@@ -2225,7 +2225,7 @@ tr.row-recipe-alarm td:first-child { box-shadow: inset 3px 0 0 var(--tone-danger
 .infra-banner .txt a { color: var(--accent); text-decoration: underline; }
 .infra-banner .txt b { font-weight: 600; }
 .infra-banner .txt small { margin-left: 8px; font-size: 10.5px; opacity: 0.75; }
-.infra-banner .pill-btn { flex: 0 0 auto; color: var(--paper-raised); text-decoration: none; }
+.infra-banner .pill-btn { flex: 0 0 auto; }
 
 /* ---------- 未确认报警条(S5) ---------- */
 .alarm-bar {
@@ -2351,16 +2351,6 @@ tr.row-recipe-alarm td:first-child { box-shadow: inset 3px 0 0 var(--tone-danger
 }
 .hint { font-size: 10px; color: var(--ink-fainter); }
 .test-row { display: flex; gap: 10px; align-items: center; margin: 6px 0 4px; }
-.pill-btn {
-  padding: 7px 14px;
-  font-size: 12.5px;
-  cursor: pointer;
-  color: var(--paper-raised);
-  background: var(--accent);
-  border: 1px solid var(--accent);
-  border-radius: var(--radius-pill);
-}
-.pill-btn:disabled { opacity: 0.5; cursor: default; }
 .test-result { font-family: var(--font-mono); font-size: 11px; }
 .test-result.ok { color: var(--tone-success-dot); }
 .test-result.bad { color: var(--tone-danger-dot); }
@@ -2383,17 +2373,6 @@ tr.row-recipe-alarm td:first-child { box-shadow: inset 3px 0 0 var(--tone-danger
 .tpl-table .range { font-size: 11.5px; color: var(--ink-soft); }
 .tpl-table .empty { color: var(--ink-fainter); font-size: 12px; text-align: center; padding: 14px 0; }
 .tpl-table .actions { white-space: nowrap; }
-.mini-btn {
-  padding: 3px 10px;
-  font-size: 11.5px;
-  cursor: pointer;
-  color: var(--ink-soft);
-  background: var(--paper-deep);
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius-chip);
-}
-.mini-btn.danger { color: var(--tone-danger-dot); }
-.mini-btn:hover { border-color: var(--accent); color: var(--accent); }
 
 /* ---------- 节点筛选工具条 ---------- */
 .tbl-toolbar {

package/app/pages/dcw/[id].vue

@@ -2443,7 +2443,7 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 .write-row { display: flex; gap: 6px; align-items: center; }
 .write-inp { width: 92px; padding: 4px 8px; }
 .write-btn { padding: 5px 12px; }
-.mini-btn { padding: 4px 10px; font-size: 11.5px; cursor: pointer; color: var(--ink-soft); background: var(--paper-deep); border: 1px solid var(--line-strong); border-radius: var(--radius-chip); margin-right: 4px; }
+.mini-btn { margin-right: 4px; }
 .mini-btn.danger { color: var(--tone-danger-dot); }
 .mini-btn:hover { border-color: var(--accent); color: var(--accent); }
 .inp { padding: 5px 9px; font-size: 12.5px; color: var(--ink); background: var(--paper-deep); border: 1px solid var(--line-strong); border-radius: var(--radius-chip); }
@@ -2497,9 +2497,6 @@ h1 { margin: 2px 0 4px; font-size: 30px; font-weight: 400; letter-spacing: -0.01
 .ver-diff { margin: 4px 0 0; font-size: 11px; color: var(--ink-faint); }
 .sec-label { margin: 14px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
 .runs { margin-top: 6px; }
-.pill-btn { padding: 6px 14px; font-size: 12.5px; cursor: pointer; color: var(--paper-raised); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-pill); }
-.pill-btn.outline { color: var(--ink); background: var(--paper-raised); border-color: var(--line-strong); }
-.pill-btn:disabled { opacity: 0.5; cursor: default; }
 
 .modal-mask { position: fixed; z-index: 50; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--scrim); backdrop-filter: blur(2px); }
 .modal { width: 680px; max-width: 94vw; max-height: 88vh; overflow-y: auto; padding: 22px 24px; background: var(--surface-glass-strong); backdrop-filter: var(--aurora-blur); -webkit-backdrop-filter: var(--aurora-blur); border: 1px solid var(--glass-line); border-radius: var(--radius-panel); box-shadow: var(--glass-edge), var(--shadow-float); }

package/app/pages/dcw/index.vue

@@ -925,25 +925,7 @@ const builtinCount = computed(() => dcw.templates.filter(t => t.builtin).length)
   border-radius: var(--radius-panel-sm);
 }
 .lc-ctl .inp:focus { outline: none; border-color: var(--tone-success-dot); box-shadow: 0 0 0 3px var(--accent-soft); }
-.pill-btn {
-  flex: none;
-  height: 30px;
-  padding: 0 14px;
-  font-size: 11.5px;
-  font-weight: 600;
-  color: var(--on-accent);
-  background: var(--accent);
-  border: 0;
-  border-radius: var(--radius-panel-sm);
-  cursor: pointer;
-  transition: background 0.15s, box-shadow 0.15s;
-}
-.pill-btn:hover:not(:disabled) { background: var(--accent-strong); box-shadow: 0 0 14px var(--accent-soft); }
-.pill-btn:disabled { opacity: 0.4; cursor: default; }
-.pill-btn.danger,
-.pill-btn.stop { background: var(--tone-danger-bg); color: var(--tone-danger-dot); }
-.pill-btn.danger:hover:not(:disabled),
-.pill-btn.stop:hover:not(:disabled) { background: color-mix(in srgb, var(--tone-danger-dot) 26%, transparent); box-shadow: none; }
+.lc-ctl .pill-btn { flex: none; }
 .lc-manage {
   font-size: 11.5px;
   font-weight: 600;
@@ -1065,15 +1047,4 @@ const builtinCount = computed(() => dcw.templates.filter(t => t.builtin).length)
 .tpl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
 .tpl-sem { flex: 1; color: var(--ink-faint); }
 textarea.inp { height: auto; padding: 6px 9px; font-size: 11.5px; resize: vertical; }
-.mini-btn {
-  padding: 4px 10px;
-  font-size: 10.5px;
-  color: var(--ink-faint);
-  background: var(--paper-deep);
-  border: 1px solid var(--line-strong);
-  border-radius: 7px;
-  cursor: pointer;
-}
-.mini-btn:hover { border-color: var(--ink-faint); color: var(--ink); }
-.mini-btn.danger { color: var(--tone-danger-dot); }
 </style>

package/app/pages/logs/index.vue

@@ -1,14 +1,12 @@
 <template>
   <div class="page">
-    <!-- 页头:标题 + 手动记录入口 -->
-    <header class="head">
+    <!-- 页头(aw-page-head 规范:kicker + 大标题 + 描述)+ 手动记录入口 -->
+    <header class="aw-page-head">
       <div>
         <p class="aw-kicker">
           agentworkshop / audit log
         </p>
-        <h1 class="h1">
-          {{ $t('logs.title') }}
-        </h1>
+        <h1>{{ $t('logs.title') }}</h1>
         <p class="sub">
           {{ $t('logs.sub') }}
         </p>
@@ -182,67 +180,78 @@
           </tr>
         </thead>
         <tbody>
-          <tr
+          <template
             v-for="row in opsLog.results"
-            :key="`${row.id}-${row.at}`"
+            :key="row.id"
           >
-            <td class="mono dim">
-              {{ fmtTime(row.at) }}
-            </td>
-            <td>
-              <span
-                class="src-badge"
-                :class="row.actorKind"
-              >{{ srcLabel(row.actorKind) }}</span>
-            </td>
-            <td class="actor">
-              {{ row.actorName || row.actor || '—' }}
-            </td>
-            <td>
-              <span
-                class="kind-chip"
-                :class="row.kind"
-              >{{ kindLabel(row.kind) }}</span>
-            </td>
-            <td class="summary">
-              {{ row.summary }}
-              <small class="mono dim action">{{ row.action }}</small>
-            </td>
-            <td class="scope">
-              <span
-                v-if="lineName(row.lineId)"
-                class="scope-chip"
-                :title="$t('logs.fLine')"
-              >{{ lineName(row.lineId) }}</span>
-              <span
-                v-if="productName(row.productId)"
-                class="scope-chip"
-                :title="$t('logs.fProduct')"
-              >{{ productName(row.productId) }}</span>
-              <span
-                v-if="recipeName(row.recipeId)"
-                class="scope-chip"
-                :title="'Recipe'"
-              >{{ recipeName(row.recipeId) }}</span>
-              <span
-                v-if="!row.lineId && !row.productId && !row.recipeId"
-                class="dim"
-              >—</span>
-            </td>
-            <td class="detail-cell">
-              <button
-                v-if="row.detailJson && row.detailJson !== '{}'"
-                class="mini-btn"
-                @click="toggle(row)"
+            <tr>
+              <td class="mono dim">
+                {{ fmtTime(row.at) }}
+              </td>
+              <td>
+                <span
+                  class="src-badge"
+                  :class="row.actorKind"
+                >{{ srcLabel(row.actorKind) }}</span>
+              </td>
+              <td class="actor">
+                {{ row.actorName || row.actor || '—' }}
+              </td>
+              <td>
+                <span
+                  class="kind-chip"
+                  :class="row.kind"
+                >{{ kindLabel(row.kind) }}</span>
+              </td>
+              <td class="summary">
+                {{ row.summary }}
+                <small class="mono dim action">{{ row.action }}</small>
+              </td>
+              <td class="scope">
+                <span
+                  v-if="lineName(row.lineId)"
+                  class="scope-chip"
+                  :title="$t('logs.fLine')"
+                >{{ lineName(row.lineId) }}</span>
+                <span
+                  v-if="productName(row.productId)"
+                  class="scope-chip"
+                  :title="$t('logs.fProduct')"
+                >{{ productName(row.productId) }}</span>
+                <span
+                  v-if="recipeName(row.recipeId)"
+                  class="scope-chip"
+                  :title="'Recipe'"
+                >{{ recipeName(row.recipeId) }}</span>
+                <span
+                  v-if="!row.lineId && !row.productId && !row.recipeId"
+                  class="dim"
+                >—</span>
+              </td>
+              <td class="detail-cell">
+                <button
+                  v-if="hasDetail(row)"
+                  class="mini-btn"
+                  @click="toggle(row)"
+                >
+                  {{ expandedId === row.id ? $t('logs.fold') : $t('logs.expand') }}
+                </button>
+                <span
+                  v-else
+                  class="dim"
+                >{{ $t('logs.noDetail') }}</span>
+              </td>
+            </tr>
+            <!-- 详情行内展开:紧贴事件行,点击即见(不再沉到表尾) -->
+            <tr v-if="expandedId === row.id">
+              <td
+                colspan="7"
+                class="detail-td"
               >
-                {{ expanded === row ? $t('logs.fold') : $t('logs.expand') }}
-              </button>
-              <span
-                v-else
-                class="dim"
-              >—</span>
-            </td>
-          </tr>
+                <pre class="detail-box mono">{{ pretty(row.detailJson) }}</pre>
+              </td>
+            </tr>
+          </template>
           <tr>
             <td
               v-if="opsLog.results.length === 0"
@@ -259,10 +268,6 @@
           </tr>
         </tbody>
       </table>
-      <pre
-        v-if="expanded"
-        class="detail-box mono"
-      >{{ pretty(expanded.detailJson) }}</pre>
     </section>
 
     <!-- 人工记录弹窗 -->
@@ -284,6 +289,14 @@
               :placeholder="$t('logs.mSummaryPh')"
             />
           </label>
+          <label class="m-f">
+            <span>{{ $t('logs.mDetail') }}</span>
+            <textarea
+              v-model="manual.detail"
+              rows="2"
+              :placeholder="$t('logs.mDetailPh')"
+            />
+          </label>
           <div class="m-grid">
             <label class="m-f">
               <span>{{ $t('logs.fLine') }}</span>
@@ -385,9 +398,10 @@ const opsLog = useOpsLog()
 const KINDS = ['write', 'manual', 'alarm', 'line', 'recipe', 'rollback', 'daq', 'system'] as const
 
 const q = reactive({ lineId: '', productId: '', recipeId: '', actorKind: '', kind: '', text: '' })
-const expanded = ref<OpsLogRow | null>(null)
+/** 当前展开详情的行(audit_log 行 id;null = 全部收起) */
+const expandedId = ref<number | null>(null)
 const manualOpen = ref(false)
-const manual = reactive({ summary: '', lineId: '', productId: '', recipeId: '' })
+const manual = reactive({ summary: '', detail: '', lineId: '', productId: '', recipeId: '' })
 
 const hasFilter = computed(() => !!(q.lineId || q.productId || q.recipeId || q.actorKind || q.kind || q.text.trim()))
 const productsOfLine = computed(() => dcw.products.filter(p => !q.lineId || p.lineId === q.lineId))
@@ -404,7 +418,7 @@ function doQuery(): void {
     q: q.text.trim(),
     limit: 300,
   })
-  expanded.value = null
+  expandedId.value = null
 }
 
 function resetFilters(): void {
@@ -419,6 +433,7 @@ function resetFilters(): void {
 
 function openManual(): void {
   manual.summary = ''
+  manual.detail = ''
   manual.lineId = q.lineId
   manual.productId = q.productId
   manual.recipeId = q.recipeId
@@ -427,11 +442,13 @@ function openManual(): void {
 
 async function submitManual(): Promise<void> {
   try {
+    const note = manual.detail.trim()
     await opsLog.postManual({
       summary: manual.summary.trim(),
       lineId: manual.lineId,
       productId: manual.productId,
       recipeId: manual.recipeId,
+      ...(note ? { detail: { note } } : {}),
     })
     message.success(tt('logs.mOk'))
     manualOpen.value = false
@@ -442,8 +459,13 @@ async function submitManual(): Promise<void> {
   }
 }
 
+/** 该行是否带结构化详情(空对象 = 无) */
+function hasDetail(row: OpsLogRow): boolean {
+  return !!row.detailJson && row.detailJson !== '{}'
+}
+
 function toggle(row: OpsLogRow): void {
-  expanded.value = expanded.value === row ? null : row
+  expandedId.value = expandedId.value === row.id ? null : row.id
 }
 
 function pretty(json: string): string {
@@ -496,10 +518,8 @@ export default { name: 'OpsLogsPage' }
 
 <style scoped>
 .page { display: flex; flex-direction: column; gap: 12px; }
-.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
-.h1 { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 20px; font-weight: 700; color: var(--ink); }
-.sub { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-faint); }
-.head-actions { display: flex; gap: 10px; align-items: center; }
+.head-actions { display: flex; gap: 10px; align-items: center; padding-bottom: 4px; }
+.sub { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-faint); }
 .live-dot {
   width: 8px; height: 8px; border-radius: 50%;
   background: var(--tone-success-dot);
@@ -530,12 +550,6 @@ export default { name: 'OpsLogsPage' }
   border: 1px solid var(--glass-line); border-radius: 7px; outline: none;
 }
 .inp-sel:focus { border-color: color-mix(in srgb, var(--tone-info-dot) 55%, transparent); }
-.mini-btn {
-  padding: 6px 11px; font-size: 12px; color: var(--ink-soft);
-  background: var(--frost-bg); border: 1px solid var(--glass-line); border-radius: 7px;
-  cursor: pointer;
-}
-.mini-btn:hover { border-color: color-mix(in srgb, var(--tone-info-dot) 45%, transparent); }
 
 .table-card {
   background: var(--surface-glass);
@@ -569,10 +583,12 @@ export default { name: 'OpsLogsPage' }
 }
 .detail-cell { white-space: nowrap; }
 .empty { padding: 22px 0 !important; color: var(--ink-faint); text-align: center; }
+/* 详情行内展开:紧贴事件行的整行 pre 面板 */
+.detail-td { padding: 0 !important; }
 .detail-box {
   max-height: 260px; margin: 0; padding: 10px 14px; overflow: auto;
-  font-size: 11.5px; color: var(--ink-soft);
-  background: var(--frost-bg); border-top: 1px solid var(--glass-line);
+  font-size: 11.5px; color: var(--ink-soft); white-space: pre-wrap; word-break: break-word;
+  background: var(--paper-deep); border-top: 1px solid var(--glass-line);
 }
 .src-badge {
   display: inline-block; padding: 1px 8px; font-size: 10.5px;
@@ -616,8 +632,4 @@ export default { name: 'OpsLogsPage' }
 .m-f textarea:focus, .m-f .inp-sel:focus { border-color: color-mix(in srgb, var(--tone-info-dot) 55%, transparent); }
 .m-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
 .m-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
-.ghost-btn {
-  padding: 7px 14px; font-size: 12.5px; color: var(--ink-soft);
-  background: transparent; border: 1px solid var(--glass-line); border-radius: 8px; cursor: pointer;
-}
 </style>

package/app/pages/monitor.vue

@@ -293,73 +293,50 @@ const processColumns = computed(() => [
     </a-card>
 
     <template v-else>
-      <!-- 概要统计 -->
-      <a-row
-        :gutter="[16, 16]"
-        class="summary"
-      >
-        <a-col
-          :xs="12"
-          :md="6"
-        >
-          <a-card class="aw-panel stat">
-            <p class="stat-label">
-              {{ t('monitor.channels') }}
-            </p>
-            <p class="stat-value aw-mono">
-              {{ snapshot?.counts.channels ?? '–' }}
-            </p>
-          </a-card>
-        </a-col>
-        <a-col
-          :xs="12"
-          :md="6"
-        >
-          <a-card class="aw-panel stat">
-            <p class="stat-label">
-              {{ t('monitor.agents') }}
-            </p>
-            <p class="stat-value aw-mono">
-              {{ snapshot?.counts.agents ?? '–' }}
-            </p>
-          </a-card>
-        </a-col>
-        <a-col
-          :xs="12"
-          :md="6"
-        >
-          <a-card class="aw-panel stat">
-            <p class="stat-label">
-              {{ t('monitor.aliveProcesses') }}
-            </p>
-            <p class="stat-value aw-mono">
-              {{ snapshot?.counts.aliveProcesses ?? '–' }}
-              <span
-                v-if="(snapshot?.counts.orphanProcesses ?? 0) > 0"
-                class="orphan-badge"
-              >
-                +{{ snapshot?.counts.orphanProcesses }} {{ t('monitor.orphan') }}
-              </span>
-            </p>
-          </a-card>
-        </a-col>
-        <a-col
-          :xs="12"
-          :md="6"
-        >
-          <a-card class="aw-panel stat">
-            <p class="stat-label">
-              {{ t('monitor.server') }}
-            </p>
-            <p class="stat-value aw-mono small">
-              PID {{ snapshot?.serverPid ?? '–' }} · {{ snapshot ? uptimeText(snapshot.uptimeMs) : '' }}
-            </p>
-            <p class="stat-updated">
-              {{ lastUpdated }} · {{ t('monitor.updated') }} {{ snapshot?.generatedAt ?? '' }}
-            </p>
-          </a-card>
-        </a-col>
-      </a-row>
+      <!-- 概要统计(CSS grid:antd Grid 样式在部分构建下缺失,col 会退化 100% 宽) -->
+      <div class="stat-grid">
+        <a-card class="aw-panel stat">
+          <p class="stat-label">
+            {{ t('monitor.channels') }}
+          </p>
+          <p class="stat-value aw-mono">
+            {{ snapshot?.counts.channels ?? '–' }}
+          </p>
+        </a-card>
+        <a-card class="aw-panel stat">
+          <p class="stat-label">
+            {{ t('monitor.agents') }}
+          </p>
+          <p class="stat-value aw-mono">
+            {{ snapshot?.counts.agents ?? '–' }}
+          </p>
+        </a-card>
+        <a-card class="aw-panel stat">
+          <p class="stat-label">
+            {{ t('monitor.aliveProcesses') }}
+          </p>
+          <p class="stat-value aw-mono">
+            {{ snapshot?.counts.aliveProcesses ?? '–' }}
+            <span
+              v-if="(snapshot?.counts.orphanProcesses ?? 0) > 0"
+              class="orphan-badge"
+            >
+              +{{ snapshot?.counts.orphanProcesses }} {{ t('monitor.orphan') }}
+            </span>
+          </p>
+        </a-card>
+        <a-card class="aw-panel stat">
+          <p class="stat-label">
+            {{ t('monitor.server') }}
+          </p>
+          <p class="stat-value aw-mono small">
+            PID {{ snapshot?.serverPid ?? '–' }} · {{ snapshot ? uptimeText(snapshot.uptimeMs) : '' }}
+          </p>
+          <p class="stat-updated">
+            {{ lastUpdated }} · {{ t('monitor.updated') }} {{ snapshot?.generatedAt ?? '' }}
+          </p>
+        </a-card>
+      </div>
 
       <!-- ChannelRuntime 表 -->
       <a-card
@@ -603,10 +580,21 @@ const processColumns = computed(() => [
   align-items: center;
 }
 
-.summary {
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
   margin-bottom: 16px;
 }
 
+@media (max-width: 1100px) {
+  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (max-width: 640px) {
+  .stat-grid { grid-template-columns: 1fr; }
+}
+
 .stat {
   height: 100%;
 }