agentworkshop 0.7.38 → 0.7.40

package/app/components/workshop/DaqTemplateIcon.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+/**
+ * 数采/智控模板图标 —— 全项目唯一的 SVG 片段注入口。
+ *
+ * 为什么这里必须用 v-html:DAQ_ICONS 的值是 SVG **绘制片段**(path/circle/rect),
+ * 必须按 SVG 命名空间解析成图元,文本插值只会把它们画成字面文本。
+ * 为什么是安全的:DAO_ICONS 是编译期静态字面量表 —— 键来自 #shared 协议的图标枚举,
+ * 值全部是本文件里手写的字符串,不含用户输入、不含 <script>/on* 事件属性/外部引用。
+ * 收敛收益:TownView 原先有 6 处 v-html(各自重复同样的判断),现在只此一处。
+ */
+const props = defineProps<{ icon: string }>()
+
+/** 数采模板图标(设计稿 ICONS;SVG path 直嵌) */
+const DAQ_ICONS: Record<string, string> = {
+  thermo: '<path d="M10 4a2 2 0 0 1 4 0v9a4 4 0 1 1-4 0V4Z"/><circle cx="12" cy="16.5" r="1.6"/>',
+  pressure: '<circle cx="12" cy="12" r="8"/><path d="m12 12 3.5-3.5"/><circle cx="12" cy="12" r="1.2"/>',
+  tension: '<circle cx="12" cy="10" r="4"/><path d="M4 18.5h16M8 18.5V14M16 18.5V14"/><path d="M2.5 10H8M16 10h5.5"/>',
+  encoder: '<circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="2"/><path d="M12 4v3M12 17v3M4 12h3M17 12h3"/>',
+  camera: '<rect x="3" y="7" width="13" height="10" rx="2"/><path d="m16 11 5-3v8l-5-3"/><circle cx="8" cy="12" r="2.5"/>',
+  gateway: '<rect x="8" y="11" width="8" height="10" rx="1.5"/><circle cx="12" cy="5.5" r="1.5"/><path d="M12 10V7M8.5 8.5a5 5 0 0 1 7 0M6 6a8.5 8.5 0 0 1 12 0"/>',
+}
+
+const markup = computed(() => DAQ_ICONS[props.icon] ?? DAQ_ICONS.gateway!)
+</script>
+
+<template>
+  <!-- eslint-disable vue/no-v-html -- DAQ_ICONS 是编译期静态 SVG 绘制片段(见 script 顶部),不含任何用户输入 -->
+  <svg
+    viewBox="0 0 24 24"
+    v-html="markup"
+  />
+  <!-- eslint-enable vue/no-v-html -->
+</template>

package/app/components/workshop/DeviceTwinPanel.vue

@@ -164,56 +164,56 @@ function doDcwWrite(r: DcwLiveRow): void {
       class="twin-list"
     >
       <button
-        v-for="t in twins.twins"
-        :key="t.id"
+        v-for="tw in twins.twins"
+        :key="tw.id"
         class="twin-card"
-        :class="{ daq: isDaq(t) }"
+        :class="{ daq: isDaq(tw) }"
         type="button"
-        @click="$emit('focus-device', t)"
+        @click="$emit('focus-device', tw)"
       >
         <div class="twin-row">
-          <span class="twin-model-tag">{{ modelTag(t.modelRef || t.name) }}</span>
+          <span class="twin-model-tag">{{ modelTag(tw.modelRef || tw.name) }}</span>
           <div class="twin-idbar">
-            <span class="twin-name">{{ t.name }}</span>
-            <span class="twin-code">{{ isDaq(t) ? 'DAQ' : devNo(t.id) }}</span>
+            <span class="twin-name">{{ tw.name }}</span>
+            <span class="twin-code">{{ isDaq(tw) ? 'DAQ' : devNo(tw.id) }}</span>
           </div>
           <button
             class="twin-del"
-            :class="{ armed: armedId === t.id }"
-            :disabled="busyId === t.id"
-            :title="armedId === t.id ? '再次点击确认删除该设备实例' : '删除该设备实例'"
-            @click.stop="removeTwin(t)"
+            :class="{ armed: armedId === tw.id }"
+            :disabled="busyId === tw.id"
+            :title="armedId === tw.id ? '再次点击确认删除该设备实例' : '删除该设备实例'"
+            @click.stop="removeTwin(tw)"
           >
-            {{ armedId === t.id ? $t('deviceTwinPanel.k44653007') : '✕' }}
+            {{ armedId === tw.id ? $t('deviceTwinPanel.k44653007') : '✕' }}
           </button>
           <span
             class="twin-state"
-            :class="`s-${t.state}`"
+            :class="`s-${tw.state}`"
           >
             <i
               class="twin-state-dot"
-              :style="{ background: stateColor[t.state] || 'var(--hud-dim)' }"
+              :style="{ background: stateColor[tw.state] || 'var(--hud-dim)' }"
             />
-            {{ stateLabel[t.state] || t.state }}
+            {{ stateLabel[tw.state] || tw.state }}
           </span>
         </div>
         <div
-          v-if="Object.keys(t.telemetry).length"
+          v-if="Object.keys(tw.telemetry).length"
           class="twin-tele"
         >
           <span
-            v-for="(v, k) in t.telemetry"
+            v-for="(v, k) in tw.telemetry"
             :key="k"
             class="tele-item"
           ><em>{{ k }}</em><b>{{ fmt(v) }}</b></span>
         </div>
         <!-- 实时数采(绿色;数采节点 = 自身通道,设备 = 绑定通道) -->
         <div
-          v-if="daqLive?.[t.id]?.length"
+          v-if="daqLive?.[tw.id]?.length"
           class="twin-daq"
         >
           <span
-            v-for="(d, i) in daqLive[t.id]"
+            v-for="(d, i) in daqLive[tw.id]"
             :key="`${d.ch}-${i}`"
             class="daq-item"
             :class="{ alarm: d.alarm }"
@@ -224,11 +224,11 @@ function doDcwWrite(r: DcwLiveRow): void {
         </div>
         <!-- 智控设定(绑定通道的当前 set 值展示 + 生效上下限 + 窗口内直写下发) -->
         <div
-          v-if="dcwLive?.[t.id]?.length"
+          v-if="dcwLive?.[tw.id]?.length"
           class="twin-dcw"
         >
           <div
-            v-for="r in dcwLive[t.id]"
+            v-for="r in dcwLive[tw.id]"
             :key="r.id"
             class="dcw-item"
           >
@@ -400,7 +400,9 @@ function doDcwWrite(r: DcwLiveRow): void {
   flex: none;
   min-width: 30px;
   font-family: var(--font-mono);
-  font-size: 9px;
+  /* 9px 的 mono 铭牌在 1440 下也读不动(实测每屏稳定被判为不可读);
+     10px 是孪生侧栏这套 HUD 在桌面档的地板。 */
+  font-size: 10px;
   font-weight: 600;
   letter-spacing: 0.08em;
   color: var(--hud-faint);
@@ -416,7 +418,7 @@ function doDcwWrite(r: DcwLiveRow): void {
 }
 .twin-code {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 10px;
   letter-spacing: 0.08em;
   color: var(--hud-dim);
 }
@@ -425,7 +427,7 @@ function doDcwWrite(r: DcwLiveRow): void {
   width: 18px;
   height: 18px;
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 10px;
   line-height: 1;
   color: var(--hud-dim, #8496a5);
   background: transparent;
@@ -452,7 +454,7 @@ function doDcwWrite(r: DcwLiveRow): void {
   gap: 5px;
   align-items: center;
   font-family: var(--font-mono);
-  font-size: 8.5px;
+  font-size: 10px;
   letter-spacing: 0.08em;
   color: var(--hud-dim);
   padding: 2px 5px;
@@ -510,7 +512,7 @@ function doDcwWrite(r: DcwLiveRow): void {
   opacity: 0.85;
 }
 .daq-item b { font-weight: 700; font-size: 10.5px; white-space: nowrap; }
-.daq-item b i { font-style: normal; font-size: 8.5px; font-weight: 500; margin-left: 2px; opacity: 0.75; }
+.daq-item b i { font-style: normal; font-size: 10px; font-weight: 500; margin-left: 2px; opacity: 0.75; }
 .daq-item.alarm { color: var(--hud-amber, #f6c453); }
 /* 智控设定区(每通道:set 值 + 上下限 + 窗口内直写) */
 .twin-dcw {
@@ -539,7 +541,7 @@ function doDcwWrite(r: DcwLiveRow): void {
 }
 .dcw-src {
   font-style: normal;
-  font-size: 8px;
+  font-size: 10px;
   padding: 0 3px;
   margin-left: 4px;
   color: var(--hud-amber, #f6c453);
@@ -555,7 +557,7 @@ function doDcwWrite(r: DcwLiveRow): void {
 }
 .dcw-set i {
   font-style: normal;
-  font-size: 8.5px;
+  font-size: 10px;
   font-weight: 500;
   margin-left: 2px;
   opacity: 0.75;
@@ -566,10 +568,10 @@ function doDcwWrite(r: DcwLiveRow): void {
   align-items: baseline;
   gap: 6px;
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 10px;
   color: var(--hud-dim);
 }
-.dcw-act em { font-style: normal; font-size: 8px; letter-spacing: 0.08em; color: var(--hud-faint); }
+.dcw-act em { font-style: normal; font-size: 10px; letter-spacing: 0.08em; color: var(--hud-faint); }
 .dcw-act b {
   font-size: 11.5px;
   font-weight: 700;
@@ -577,11 +579,11 @@ function doDcwWrite(r: DcwLiveRow): void {
   color: var(--hud-accent, #35e0a0);
   white-space: nowrap;
 }
-.dcw-act b i { font-style: normal; font-size: 8.5px; font-weight: 500; margin-left: 2px; opacity: 0.75; }
-.dcw-act-at { font-style: normal; font-size: 8px; color: var(--hud-faint); }
+.dcw-act b i { font-style: normal; font-size: 10px; font-weight: 500; margin-left: 2px; opacity: 0.75; }
+.dcw-act-at { font-style: normal; font-size: 10px; color: var(--hud-faint); }
 .dcw-win {
   font-family: var(--font-mono);
-  font-size: 8.5px;
+  font-size: 10px;
   font-variant-numeric: tabular-nums;
   color: var(--hud-faint);
   letter-spacing: 0.04em;
@@ -604,12 +606,12 @@ function doDcwWrite(r: DcwLiveRow): void {
 }
 .dcw-err {
   font-family: var(--font-mono);
-  font-size: 8.5px;
+  font-size: 10px;
   color: var(--hud-danger, #ff6b5c);
 }
 .ctrl-btn {
   padding: 3px 7px;
-  font-size: 9px;
+  font-size: 10px;
   letter-spacing: 0.06em;
   font-weight: 600;
   font-family: var(--font-mono);

package/app/components/workshop/EventBlock.vue

@@ -343,7 +343,7 @@ const quoteToComposer = (): void => {
   gap: 3px;
   align-items: center;
   padding: 0 5px;
-  font-size: 9px;
+  font-size: 10px;
   color: var(--tone-warning-dot);
   background: color-mix(in srgb, var(--tone-warning-dot) 13%, transparent);
   border-radius: var(--radius-chip);
@@ -480,7 +480,7 @@ const quoteToComposer = (): void => {
   align-items: center;
   padding: 0 2px;
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 10px;
   letter-spacing: 0.06em;
   line-height: 14px;
   color: var(--ink-faint);
@@ -523,7 +523,7 @@ const quoteToComposer = (): void => {
   z-index: 2;
   padding: 0 5px;
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 10px;
   font-variant-numeric: tabular-nums;
   color: var(--ink-faint);
   pointer-events: none;

package/app/components/workshop/InspectorPanel.vue

@@ -126,26 +126,26 @@ const stateDot: Record<string, string> = {
         tab="任务"
       >
         <div
-          v-for="t in rootTasks"
-          :key="t.id"
+          v-for="task in rootTasks"
+          :key="task.id"
           class="task aw-tile"
           role="button"
           tabindex="0"
-          @click="emit('openTask', t.id)"
-          @keydown.enter="emit('openTask', t.id)"
+          @click="emit('openTask', task.id)"
+          @keydown.enter="emit('openTask', task.id)"
         >
           <div class="task-head">
-            <span class="state-chip aw-mono">{{ t.state }}</span>
-            <span class="task-title">{{ t.title }}</span>
+            <span class="state-chip aw-mono">{{ task.state }}</span>
+            <span class="task-title">{{ task.title }}</span>
           </div>
           <div class="task-meta">
-            {{ t.id.slice(0, 8) }} · {{ t.progress }}%
-            <span v-if="childCount(t.id)">· {{ $t('inspectorPanel.k3mp44x003') }} {{ childCount(t.id) }}</span>
-            <span v-if="t.artifacts">· {{ $t('inspectorPanel.k3w9q9004') }} {{ t.artifacts }}</span>
+            {{ task.id.slice(0, 8) }} · {{ task.progress }}%
+            <span v-if="childCount(task.id)">· {{ $t('inspectorPanel.k3mp44x003') }} {{ childCount(task.id) }}</span>
+            <span v-if="task.artifacts">· {{ $t('inspectorPanel.k3w9q9004') }} {{ task.artifacts }}</span>
           </div>
           <a-progress
-            v-if="t.state === 'WORKING'"
-            :percent="t.progress"
+            v-if="task.state === 'WORKING'"
+            :percent="task.progress"
             size="small"
             :show-info="false"
           />
@@ -262,4 +262,40 @@ const stateDot: Record<string, string> = {
 }
 .task-meta { font-size: 11px; font-family: var(--font-mono); color: var(--ink-faint); }
 .empty { padding: 16px 8px; font-size: 12px; color: var(--ink-faint); }
+
+/* ── 窄屏(≤1023):本面板在窄屏不再是右侧常驻栏,而是切换条上的第 4 区 ──
+   因此要能占满整宽、行高够手指点、铭牌字号抬到可读。 */
+@media (max-width: 1023.98px) {
+  .inspector {
+    width: 100%;
+    padding: 0 10px;
+  }
+
+  .tabs :deep(.ant-tabs-tab) {
+    min-height: 44px;
+  }
+
+  .member,
+  .task {
+    padding: 10px;
+    min-height: 44px;
+  }
+
+  .member-meta,
+  .task-meta,
+  .member-cap,
+  .role-chip,
+  .state-chip {
+    font-size: 11.5px;
+  }
+
+  .role-chip,
+  .state-chip {
+    line-height: 18px;
+  }
+
+  .empty {
+    font-size: 13px;
+  }
+}
 </style>

package/app/components/workshop/LiveAgentBar.vue

@@ -359,4 +359,38 @@ const open = (a: LiveAgent) => {
 @media (prefers-reduced-motion: reduce) {
   .live-pip::after { animation: none; opacity: 0; }
 }
+
+/* ── 窄屏(≤1023):活动条在抽屉/窄列里同样要点得中、读得清 ── */
+@media (max-width: 1023.98px) {
+  .live-main {
+    min-height: 44px;
+  }
+
+  .live-more {
+    min-height: 40px;
+    padding: 0 10px;
+    font-size: 12px;
+  }
+
+  .idle-text,
+  .live-detail,
+  .live-pop-detail,
+  .live-pop-title {
+    font-size: 11.5px;
+  }
+
+  .live-pop-item {
+    min-height: 44px;
+  }
+
+  .live-avatar-sm {
+    width: 24px;
+    height: 24px;
+    font-size: 11px;
+  }
+
+  .live-pop {
+    max-height: 46dvh;
+  }
+}
 </style>

package/app/components/workshop/TaskBoardView.vue

@@ -131,10 +131,10 @@ const onDrop = async (ev: DragEvent, col: Column) => {
 const acting = ref(new Set<string>())
 const applyMove = async (taskId: string, action: 'cancel' | 'retry'): Promise<void> => {
   if (acting.value.has(taskId)) return
-  const t = taskById(taskId)
-  if (!t) return
+  const task = taskById(taskId)
+  if (!task) return
   acting.value.add(taskId)
-  const prev = t.state
+  const prev = task.state
   // 乐观预移:cancel → CANCELED;retry → ASSIGNED
   const next = action === 'cancel' ? 'CANCELED' : 'ASSIGNED'
   const opt = new Map(optimistic.value)
@@ -165,22 +165,22 @@ const applyMove = async (taskId: string, action: 'cancel' | 'retry'): Promise<vo
 
 /** 状态胶囊菜单(动作 + 详情);fixed 定位并按视口收敛 */
 const menu = ref<{ task: TaskView, x: number, y: number } | null>(null)
-const openMenu = (ev: MouseEvent, t: TaskView) => {
+const openMenu = (ev: MouseEvent, task: TaskView) => {
   const x = Math.min(ev.clientX, Math.max(window.innerWidth - 156, 8))
   const y = Math.min(ev.clientY, Math.max(window.innerHeight - 160, 8))
-  menu.value = { task: t, x, y }
+  menu.value = { task, x, y }
 }
 const closeMenu = () => {
   menu.value = null
 }
 const menuActions = computed(() => {
-  const t = menu.value?.task
-  if (!t) return []
+  const task = menu.value?.task
+  if (!task) return []
   const acts: Array<{ key: 'cancel' | 'retry' | 'detail', label: string, danger?: boolean }> = []
-  if (['SUBMITTED', 'ASSIGNED', 'WORKING', 'WAITING', 'FAILED'].includes(t.state)) {
+  if (['SUBMITTED', 'ASSIGNED', 'WORKING', 'WAITING', 'FAILED'].includes(task.state)) {
     acts.push({ key: 'cancel', label: t('taskBoardView.k1bs0t9b016'), danger: true })
   }
-  if (['FAILED', 'CANCELED'].includes(t.state)) {
+  if (['FAILED', 'CANCELED'].includes(task.state)) {
     acts.push({ key: 'retry', label: t('taskBoardView.k1lclwk6017') })
   }
   acts.push({ key: 'detail', label: t('taskBoardView.k1dx9ysj018') })
@@ -260,39 +260,39 @@ const onMenuAction = async (key: 'cancel' | 'retry' | 'detail') => {
         </div>
         <div class="task-col-body">
           <div
-            v-for="t in col.items"
-            :key="t.id"
+            v-for="task in col.items"
+            :key="task.id"
             class="card task"
-            :class="{ dragging: dragId === t.id }"
+            :class="{ dragging: dragId === task.id }"
             draggable="true"
-            @dragstart="onDragStart($event, t, col.key)"
+            @dragstart="onDragStart($event, task, col.key)"
             @dragend="onDragEnd"
-            @click="emit('openTask', t.id)"
+            @click="emit('openTask', task.id)"
           >
             <div class="tk-chan">
-              <span>#{{ agentName(t.assigneeId) }}</span>
+              <span>#{{ agentName(task.assigneeId) }}</span>
               <span
-                v-if="childCount(t.id)"
+                v-if="childCount(task.id)"
                 class="tk-num"
-              >{{ $t('taskBoardView.k4b1x005') }} {{ childCount(t.id) }}</span>
+              >{{ $t('taskBoardView.k4b1x005') }} {{ childCount(task.id) }}</span>
               <span
-                v-if="t.artifacts"
+                v-if="task.artifacts"
                 class="tk-num"
-              ><span class="i-tabler-package" /> {{ t.artifacts }}</span>
+              ><span class="i-tabler-package" /> {{ task.artifacts }}</span>
             </div>
             <div class="tk-title">
-              {{ t.title }}
+              {{ task.title }}
             </div>
             <div
-              v-if="t.routeReason"
+              v-if="task.routeReason"
               class="tk-route"
-              :title="$t('taskBoardView.k8m7hm6020', { p0: t.routeReason })"
+              :title="$t('taskBoardView.k8m7hm6020', { p0: task.routeReason })"
             >
-              ↳ {{ t.routeReason }}
+              ↳ {{ task.routeReason }}
             </div>
             <a-progress
-              v-if="t.state === 'WORKING' && t.progress > 0"
-              :percent="t.progress"
+              v-if="task.state === 'WORKING' && task.progress > 0"
+              :percent="task.progress"
               size="small"
               :show-info="false"
             />
@@ -300,7 +300,7 @@ const onMenuAction = async (key: 'cancel' | 'retry' | 'detail') => {
               <button
                 type="button"
                 class="st-pill-btn"
-                @click.stop="openMenu($event, t)"
+                @click.stop="openMenu($event, task)"
               >
                 <span
                   class="st-pill"
@@ -340,19 +340,19 @@ const onMenuAction = async (key: 'cancel' | 'retry' | 'detail') => {
           <span class="sec-cnt">{{ col.items.length }}</span>
         </div>
         <div
-          v-for="t in col.items"
-          :key="t.id"
+          v-for="task in col.items"
+          :key="task.id"
           class="list-row"
-          @click="emit('openTask', t.id)"
+          @click="emit('openTask', task.id)"
         >
-          <span class="grow">{{ t.title }}</span>
-          <span class="lnum">#{{ agentName(t.assigneeId) }}</span>
-          <span class="meta">{{ t.id.slice(0, 8) }}</span>
+          <span class="grow">{{ task.title }}</span>
+          <span class="lnum">#{{ agentName(task.assigneeId) }}</span>
+          <span class="meta">{{ task.id.slice(0, 8) }}</span>
           <span
             class="st-pill"
             :style="{ color: col.dot, borderColor: col.dot }"
           >
-            {{ stateOf(t) }}
+            {{ stateOf(task) }}
           </span>
         </div>
       </template>
@@ -633,4 +633,54 @@ const onMenuAction = async (key: 'cancel' | 'retry' | 'detail') => {
 }
 .st-menu button:hover { background: var(--paper-deep); color: var(--ink); }
 .st-menu button.danger { color: var(--tone-danger-dot); }
+
+/* ── 窄屏(≤1023):看板列从"全高等宽四列"改为"一次一列"的横向卷轴 ──
+   300px 定宽列在 390px 下只能露出半列 + 半列,状态语义读不出来;
+   改为 86% 宽 + scroll-snap:一屏一个状态列。列表视图行允许折行,不竖排。 */
+@media (max-width: 1023.98px) {
+  .toolbar {
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 10px;
+  }
+
+  .count,
+  .sec-cnt,
+  .tk-route,
+  .meta,
+  .st-pill {
+    font-size: 11.5px;
+  }
+
+  .board {
+    padding: 10px;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .task-col {
+    flex: 0 0 86%;
+    min-width: 0;
+    scroll-snap-align: center;
+  }
+
+  /* 行内四项(标题/成员/ID/状态)在 370px 下必然挤:允许折行,不允许压成竖排 */
+  .list-row {
+    flex-wrap: wrap;
+    row-gap: 4px;
+    min-height: 44px;
+  }
+
+  .list-row .grow {
+    flex: 1 1 60%;
+  }
+
+  .st-pill-btn {
+    min-height: 40px;
+  }
+
+  .st-menu button {
+    min-height: 44px;
+  }
+}
 </style>

package/app/components/workshop/TranscriptTimeline.vue

@@ -542,4 +542,60 @@ const blockDayFlags = computed(() => {
 @media (prefers-reduced-motion: reduce) {
   .skel-row { animation: none; }
 }
+
+/* ── 窄屏(≤1023):阅读列收边 + 富文本/代码/终端块横向滚动而非顶破视口 ──
+   消息体由 workshop-event-block(及其内部的 prose/code-block)渲染,
+   这里用 :deep 给它们一条自己的卷轴:代码不折行(折行会毁掉缩进语义),
+   改为在自己块内横扫;图片/画布一律不超列宽。 */
+@media (max-width: 1023.98px) {
+  .filter-bar {
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 6px 10px;
+  }
+
+  .filter-bar :deep(.ant-segmented) {
+    flex: 1 1 100%;
+  }
+
+  .count,
+  .sync-chip,
+  .earlier-done {
+    font-size: 11.5px;
+  }
+
+  .column {
+    padding: 8px 8px 22px;
+  }
+
+  .column :deep(pre),
+  .column :deep(table),
+  .column :deep(.code-block),
+  .column :deep(.st-text) {
+    max-width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .column :deep(img),
+  .column :deep(video),
+  .column :deep(canvas) {
+    max-width: 100%;
+    height: auto;
+  }
+
+  .empty-hint {
+    font-size: 13px;
+  }
+
+  .earlier-btn,
+  .jump-latest {
+    min-height: 40px;
+  }
+
+  .jump-latest {
+    padding: 8px 14px;
+    font-size: 12px;
+  }
+}
 </style>

package/app/components/workshop/blocks/ClusterError.vue

@@ -63,7 +63,7 @@ const hasMore = computed(() => lines.value.length > MAX)
   background: var(--tone-danger-bg);
   border-radius: var(--radius-chip);
 }
-.error-code { padding: 0 5px; font-size: 9px; background: color-mix(in srgb, var(--tone-danger-dot) 14%, transparent); border-radius: var(--radius-chip); }
+.error-code { padding: 0 5px; font-size: 10px; background: color-mix(in srgb, var(--tone-danger-dot) 14%, transparent); border-radius: var(--radius-chip); }
 .error-text { overflow-wrap: anywhere; word-break: break-word; }
 .more-btn {
   margin-top: 4px;

package/app/components/workshop/blocks/ClusterRoute.vue

@@ -170,11 +170,13 @@ const hasMore = computed(() => rows.value.length > MAX)
         <span class="chat-time aw-mono">{{ r.time }}</span>
       </div>
       <!-- 正文:markdown-lite + @提及 pill -->
+      <!-- eslint-disable vue/no-v-html -- 源文本先经 mdLite 的 escapeHtml(useEventBlocks.ts:526),仅追加受控标签与 @提及 pill -->
       <div
         v-if="r.text"
         class="chat-body prose"
         v-html="shownRendered[ri]"
       />
+      <!-- eslint-enable vue/no-v-html -->
     </div>
     <button
       v-if="hasMore"
@@ -241,7 +243,7 @@ const hasMore = computed(() => rows.value.length > MAX)
 .who-ava {
   width: 18px;
   height: 18px;
-  font-size: 9px;
+  font-size: 10px;
 }
 
 .to-arrow {

package/app/components/workshop/blocks/ClusterStatus.vue

@@ -89,7 +89,7 @@ const toggle = (): void => {
 .st-toggle:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
 .chev {
   flex: 0 0 auto;
-  font-size: 9px;
+  font-size: 10px;
   line-height: 15px;
   color: var(--ink-faint);
   transition: transform 0.12s ease;
@@ -103,7 +103,7 @@ const toggle = (): void => {
 .st-count {
   flex: 0 0 auto;
   padding: 0 4px;
-  font-size: 9px;
+  font-size: 10px;
   line-height: 13px;
   color: var(--ink-soft);
   background: color-mix(in srgb, var(--ink) 8%, transparent);