agentworkshop 0.7.39 → 0.7.40

package/app/components/AppHeader.vue

@@ -60,9 +60,13 @@ const hitlAnswer = async (item: AepHitlItem, confirmed: boolean): Promise<void>
   }
 }
 
+/* 语言选择器在窄屏显示"短名":完整语言名(简体中文=56px @14px)配上
+ * antd 给箭头预留的 24px 内距,92px 的选择器只剩 46px 文本位 ——
+ * 实测被截成「简 体…」,这是每页都出现的破相。
+ * 窄屏用 2 字标签,桌面保留完整语言名。 */
 const localeOptions = computed(() =>
   (locales.value as Array<{ code: string, name: string }>).map(l => ({
-    label: l.name,
+    label: isMobile.value ? l.code.split('-')[0]!.toUpperCase() : l.name,
     value: l.code,
   })),
 )
@@ -76,6 +80,26 @@ const switchLocale: SelectProps['onChange'] = (value) => {
   }
 }
 
+/* ── 响应式:窄屏顶栏不是"缩小版顶栏",而是换一套信息优先级 ─────────────
+ * 桌面:航迹页签是主角(多页并行来回切)。
+ * 窄屏:页签轨与右侧功能簇争抢横向空间 —— 实测 390px 下页签被右侧图标
+ *       逐个压过去,最后连用户铭牌都被推出视口(顶栏 overflow:hidden 直接裁掉)。
+ *       所以窄屏撤掉页签轨,用**当前页标题**替代:窄屏用户要的是"我在哪",
+ *       不是"我刚才还开过哪 5 个页面"。 */
+const { isDrawer, isMobile } = useResponsive()
+
+const navToggleLabel = computed(() =>
+  isDrawer.value
+    ? (store.mobileNavOpen ? t('header.closeNav') : t('header.openNav'))
+    : (store.sidebarCollapsed ? t('header.expand') : t('header.collapse')))
+
+const toggleNav = () => {
+  if (isDrawer.value) store.toggleMobileNav()
+  else store.toggleSidebar()
+}
+
+const currentTitle = computed(() => metaFor(route.path).title)
+
 // ── 航迹导航:路由变化 → 记录航点;切换时进度线扫过 ──
 const hydrated = ref(false)
 const plotting = ref(false)
@@ -196,12 +220,16 @@ const onAvatarMenu: MenuProps['onClick'] = async ({ key }) => {
     <div class="header-left">
       <button
         class="collapse-btn"
-        :aria-label="store.sidebarCollapsed ? t('header.expand') : t('header.collapse')"
-        @click="store.toggleSidebar()"
+        :aria-label="navToggleLabel"
+        :aria-expanded="isDrawer ? store.mobileNavOpen : !store.sidebarCollapsed"
+        @click="toggleNav()"
       >
         <span class="i-tabler-menu-2" />
       </button>
 
+      <!-- 窄屏:当前页标题(替代被撤掉的页签轨) -->
+      <span class="mobile-title">{{ currentTitle }}</span>
+
       <span class="rail-mark i-tabler-route" />
 
       <nav
@@ -313,14 +341,14 @@ const onAvatarMenu: MenuProps['onClick'] = async ({ key }) => {
       </ClientOnly>
       <!-- 实时连接状态点(WS 会话全局单例;未用过 WS 的会话不显示) -->
       <span
-        v-if="wsVisible"
+        v-if="hydrated && wsVisible"
         class="ws-dot"
         :class="wsClass"
         :title="wsLabel"
       />
       <a-tooltip :title="t('header.fullscreen')">
         <button
-          class="icon-btn"
+          class="icon-btn hdr-fullscreen"
           @click="toggleFullscreen"
         >
           <span
@@ -734,12 +762,75 @@ const onAvatarMenu: MenuProps['onClick'] = async ({ key }) => {
 
 .user-role {
   font-family: var(--font-mono);
-  font-size: 8.5px;
-  letter-spacing: 0.18em;
+  /* 8.5px 是"看得见读不了"的下限之外(实测常驻被审计标红);
+     角色是身份信息,不是装饰刻度,抬到 9.5px 仍保持铭牌声部 */
+  font-size: 9.5px;
+  letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--app-text-secondary, var(--ink-faint));
 }
 
+/* 移动端当前页标题:桌面不存在(那里有页签轨) */
+.mobile-title {
+  display: none;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--app-text, var(--ink));
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ══ 顶栏响应式:按信息优先级逐级卸载,而不是让它们互相挤压 ═══════════════
+ * 卸载顺序(从最可省到最不可省):页签轨 → 全屏钮 → 用户双行铭牌 → 语言文字。
+ * 留下的核心是:HITL 铃标(有待办必须看得见)、连接状态点、主题、语言、身份。 */
+@media (max-width: 899px) {
+  .rail-mark,
+  .trail {
+    display: none;
+  }
+
+  .mobile-title {
+    display: block;
+    margin-left: 2px;
+  }
+
+  .app-header {
+    padding: 0 12px 0 8px;
+  }
+}
+
+@media (max-width: 639px) {
+  .hdr-fullscreen {
+    display: none;
+  }
+
+  .user-chip {
+    height: 38px;
+    padding: 0 6px;
+  }
+
+  .user-meta {
+    display: none;
+  }
+
+  /* 窄屏标签已换成 2 字符(ZH / EN),选择器只需容纳标签 + 箭头 + 内距 */
+  .lang-select {
+    width: 76px;
+  }
+
+  .lang-select :deep(.ant-select-selection-item) {
+    padding-inline-end: 16px;
+    font-size: 12.5px;
+  }
+
+  .header-left,
+  .header-right {
+    gap: 4px;
+  }
+}
+
 .hidden {
   display: none;
 }

package/app/components/AppSidebar.vue

@@ -23,6 +23,13 @@ interface MenuGroup {
   items: MenuItem[]
 }
 
+/**
+ * 是否已完成客户端水合。
+ * 服务端拿不到会话(cookie 里的 workshop.user 只在浏览器可读),
+ * 任何"按身份增删 DOM"的渲染都必须由它门控,否则 SSR 与客户端首帧结构不一致。
+ */
+const navHydrated = ref(false)
+
 /**
  * 导航信息架构:12 个平铺条目 → 三组语义分区(控制台 / 运维 / 系统)。
  * 分组的价值不在多一层容器,而在"扫视成本":同组内的入口是同一件事的不同面,
@@ -61,26 +68,96 @@ const menuGroups = computed<MenuGroup[]>(() => [
     ],
   },
 ]
-  .map(g => ({ ...g, items: g.items.filter(m => !m.adminOnly || userStore.isAdmin) }))
+  /* ⚠️ admin-only 条目必须等挂载后再放行:服务端没有会话(读不到 cookie 里的
+   * workshop.user),SSR 会少渲染「权限管理」这一条 → 客户端多一条 →
+   * 实测触发 Hydration 链式 mismatch(插件管理/系统设置的图标与文案整体错位一格)。
+   * 用 navHydrated 门控后,服务端与客户端首帧的 v-for 长度一致,水合干净。 */
+  .map(g => ({ ...g, items: g.items.filter(m => !m.adminOnly || (navHydrated.value && userStore.isAdmin)) }))
   .filter(g => g.items.length > 0))
 
 const isActive = (key: string): boolean =>
   key === '/' ? route.path === '/' : route.path.startsWith(key)
 
 const go = (key: string) => {
+  // 抽屉是浮层:点完必须收起来,否则用户看到的是"导航没反应"(内容被浮层盖着)
+  if (isDrawer.value) store.closeMobileNav()
   if (!isActive(key)) navigateTo(key)
 }
+
+/* ── 响应式形态 ──────────────────────────────────────────────────────────
+ * 同一份导航有三种形态,由视口决定,不新增组件(避免三份 IA 各自漂移):
+ *   ≥1024      三栏仪表台:跟随用户的折叠偏好
+ *   900–1023   双栏:强制图标轨 —— 228px 文字轨会把画布压到不可用
+ *   <900       抽屉:强制展开(抽屉关着时展开与否无意义),汉堡开合 */
+const { isDrawer, isTablet } = useResponsive()
+
+/* 形态属性只在挂载后渲染:SSR 没有视口、一律按桌面档出 HTML,
+ * 若首帧就把 data-nav-mode="drawer" 打上去,水合时属性对不上会报 mismatch。
+ * 布局本身由 body 类 + CSS 媒体查询兜住,不依赖这个属性。 */
+onMounted(() => {
+  navHydrated.value = true
+})
+const navMode = computed(() =>
+  navHydrated.value ? (isDrawer.value ? 'drawer' : (isTablet.value ? 'rail' : 'full')) : undefined)
+
+const effectiveCollapsed = computed(() =>
+  isDrawer.value ? false : isTablet.value ? true : store.sidebarCollapsed)
+
+const showLabels = computed(() => !effectiveCollapsed.value)
+
+const drawerOpen = computed(() => isDrawer.value && store.mobileNavOpen)
+
+/** 路由变化即收抽屉:抽屉是"去别处"的中转,不是常驻面板 */
+watch(() => route.path, () => {
+  if (store.mobileNavOpen) store.closeMobileNav()
+})
+
+/**
+ * 形态镜像到 <body>(nav-drawer / nav-drawer-open)。
+ *
+ * 为什么不用 :class 直接打在 a-layout-sider 上:实测 antd 的 Sider 不会把
+ * 动态 class 落到它渲染的 <aside> 上(静态 class 可以,DOM 里查不到 is-drawer)。
+ * 依赖第三方组件的 attr 透传行为来做**结构性**布局是脆的 ——
+ * 改为把形态写在 body 上,CSS 由 main.css 的响应式层接管,只依赖自己的状态。
+ */
+watchEffect(() => {
+  if (typeof document === 'undefined') return
+  document.body.classList.toggle('nav-drawer', isDrawer.value)
+  document.body.classList.toggle('nav-drawer-open', drawerOpen.value)
+})
+
+onBeforeUnmount(() => {
+  if (typeof document === 'undefined') return
+  document.body.classList.remove('nav-drawer', 'nav-drawer-open')
+})
+
+/** 抽屉展开时锁画布滚动(否则背景跟着手指跑,浮层失去"压在台面上"的物理感) */
+watch(drawerOpen, (open) => {
+  if (typeof document === 'undefined') return
+  document.body.style.overflow = open ? 'hidden' : ''
+})
+
+/** Esc 关闭:仅抽屉形态接管,桌面侧栏不受影响 */
+const onKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape' && drawerOpen.value) store.closeMobileNav()
+}
+onMounted(() => window.addEventListener('keydown', onKeydown))
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeydown)
+  if (typeof document !== 'undefined') document.body.style.overflow = ''
+})
 </script>
 
 <template>
   <a-layout-sider
-    v-model:collapsed="store.sidebarCollapsed"
+    :collapsed="effectiveCollapsed"
     :trigger="null"
     collapsible
-    breakpoint="lg"
     :width="228"
     :collapsed-width="64"
     class="app-sider"
+    :data-nav-mode="navMode"
+    :aria-hidden="isDrawer && !drawerOpen ? 'true' : undefined"
   >
     <!-- 品牌区:AwLogo 六边形标志(绿→青渐变 + 孪生虚影 + 三节点互连,与 favicon 同源) -->
     <div class="logo">
@@ -92,7 +169,7 @@ const go = (key: string) => {
       </div>
       <transition name="slide-fade">
         <div
-          v-show="!store.sidebarCollapsed"
+          v-show="showLabels"
           class="logo-text"
         >
           <span class="logo-title">{{ site.name }}</span>
@@ -109,7 +186,7 @@ const go = (key: string) => {
       >
         <!-- 分组标:mono 微字 + 收尾 hairline(仪器命名牌 + 刻度线的同一语言) -->
         <div
-          v-show="!store.sidebarCollapsed"
+          v-show="showLabels"
           class="menu-group-label"
         >
           <span class="menu-group-text">{{ group.label }}</span>
@@ -119,7 +196,7 @@ const go = (key: string) => {
           />
         </div>
         <div
-          v-show="store.sidebarCollapsed"
+          v-show="!showLabels"
           class="menu-group-sep"
           aria-hidden="true"
         />
@@ -129,7 +206,7 @@ const go = (key: string) => {
           type="button"
           class="menu-item im"
           :class="{ active: isActive(item.key) }"
-          :title="store.sidebarCollapsed ? item.label : undefined"
+          :title="!showLabels ? item.label : undefined"
           @click="go(item.key)"
         >
           <span
@@ -137,7 +214,7 @@ const go = (key: string) => {
             :class="[item.icon, item.motion]"
           />
           <span
-            v-show="!store.sidebarCollapsed"
+            v-show="showLabels"
             class="menu-label"
           >{{ item.label }}</span>
         </button>
@@ -146,7 +223,7 @@ const go = (key: string) => {
 
     <!-- 底部铭牌:版本与运行模式(上缘刻度收边,与画布分节同语言) -->
     <div
-      v-show="!store.sidebarCollapsed"
+      v-show="showLabels"
       class="sider-footer"
     >
       <div class="footer-rule" />
@@ -157,6 +234,14 @@ const go = (key: string) => {
       </div>
     </div>
   </a-layout-sider>
+
+  <!-- 抽屉遮罩:点空白处关闭(与 esc-close 的 @click.self 契约一致) -->
+  <div
+    v-if="drawerOpen"
+    class="nav-scrim"
+    aria-hidden="true"
+    @click="store.closeMobileNav()"
+  />
 </template>
 
 <style scoped>
@@ -216,8 +301,10 @@ const go = (key: string) => {
 
 .logo-sub {
   font-family: var(--font-mono);
-  font-size: 8.5px;
-  letter-spacing: 0.2em;
+  /* 8.5px 在这块铭牌上连"看得见"都勉强(实测全站每页稳定被判为不可读);
+     9.5px 是这套 mono 铭牌的下限,字距同步收一点以保持行长。 */
+  font-size: 9.5px;
+  letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--sider-ink-faint);
 }
@@ -391,4 +478,23 @@ const go = (key: string) => {
   opacity: 0;
   transform: translateX(-8px);
 }
+
+/* 抽屉形态的定位/位移样式在 main.css 响应式层(body.nav-drawer)—— 见那里的说明。 */
+
+.nav-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  background: rgb(6 12 20 / 58%);
+  backdrop-filter: blur(2px);
+  animation: nav-scrim-in 0.2s ease both;
+}
+
+@keyframes nav-scrim-in {
+  from { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nav-scrim { animation: none; }
+}
 </style>

package/app/components/AwChart.vue

@@ -14,6 +14,7 @@ import VChart from 'vue-echarts'
 import { computed } from 'vue'
 import type { PropType } from 'vue'
 import type { EChartsOption } from 'echarts'
+import type { SetOptionOpts } from 'echarts/core'
 
 // 按需注册 ECharts 模块(必须在 <ClientOnly> 内使用:canvas 仅客户端可渲染)
 use([
@@ -61,7 +62,7 @@ const merged = computed<EChartsOption>(() => ({
  *    series 数量**减少**时(如筛选后趋势线变少),旧 series 必须被移除,否则会残留幽灵曲线;
  *  - `lazyUpdate: true` → 同一 tick 内多次 setOption 合并到下一帧渲染,避免重复绘制。
  */
-const updateOptions = { notMerge: false, replaceMerge: ['series'], lazyUpdate: true } as const
+const updateOptions: SetOptionOpts = { notMerge: false, replaceMerge: ['series'], lazyUpdate: true }
 </script>
 
 <template>

package/app/components/workshop/AgentInspectorDrawer.vue

@@ -224,13 +224,13 @@ const stateDot: Record<string, string> = {
               {{ group[0] }}({{ (group[1] as typeof assignedTasks.working).length }})
             </div>
             <div
-              v-for="t in group[1]"
-              :key="t.id"
+              v-for="task in group[1]"
+              :key="task.id"
               class="queue-task"
             >
-              <span class="state-chip aw-mono">{{ t.state }}</span>
-              <span class="qt-title">{{ t.title }}</span>
-              <span class="qt-meta">{{ t.progress }}%</span>
+              <span class="state-chip aw-mono">{{ task.state }}</span>
+              <span class="qt-title">{{ task.title }}</span>
+              <span class="qt-meta">{{ task.progress }}%</span>
             </div>
             <div
               v-if="(group[1] as typeof assignedTasks.working).length === 0"
@@ -384,7 +384,7 @@ const stateDot: Record<string, string> = {
 .state-chip {
   flex: none;
   padding: 1px 6px;
-  font-size: 9px;
+  font-size: 10px;
   line-height: 15px;
   letter-spacing: 0.03em;
   color: var(--ink-soft);

package/app/components/workshop/AgentLanesView.vue

@@ -822,7 +822,7 @@ onBeforeUnmount(() => {
   align-items: center;
   padding: 0 6px;
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 10px;
   line-height: 15px;
   color: var(--ink-faint);
   border: 1px solid var(--line-strong);
@@ -944,4 +944,55 @@ onBeforeUnmount(() => {
   background: color-mix(in srgb, currentColor 5%, transparent);
   border-radius: var(--radius-chip);
 }
+
+/* ── 窄屏(≤1023):泳道从"并排仪表"改为"一次一泳道"的横向卡片流 ──
+   桌面 min-width 240px 的泳道在 390px 下并排 = 每列都被压到极限;
+   改为 88% 宽 + scroll-snap:一屏一路信号,横扫切换成员。 */
+@media (max-width: 1023.98px) {
+  .toolbar {
+    flex-wrap: wrap;
+    gap: 8px;
+    padding: 8px 10px 6px;
+  }
+
+  .ts-label,
+  .ts-unit,
+  .ts-detail,
+  .lane-meta,
+  .empty-hint {
+    font-size: 11.5px;
+  }
+
+  .lanes {
+    padding: 8px;
+    scroll-snap-type: x mandatory;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .lane {
+    flex: 0 0 88%;
+    min-width: 0;
+    scroll-snap-align: center;
+  }
+
+  .lane-name {
+    font-size: 14px;
+  }
+
+  .lane-chip,
+  .lane-role,
+  .term-badge {
+    font-size: 11.5px;
+    line-height: 18px;
+  }
+
+  .lane-actions .ant-btn {
+    min-width: 40px;
+    min-height: 40px;
+  }
+
+  .empty-title {
+    font-size: 13px;
+  }
+}
 </style>

package/app/components/workshop/AssetLibrary.vue

@@ -262,7 +262,7 @@ async function doRemove(id: string): Promise<void> {
 .head-hint {
   margin-left: auto;
   font-family: var(--font-mono);
-  font-size: 8.5px;
+  font-size: 10px;
   color: var(--hud-faint, #5b6c7b);
   white-space: nowrap;
 }
@@ -384,7 +384,9 @@ async function doRemove(id: string): Promise<void> {
 }
 .model-badge {
   font-family: var(--font-mono);
-  font-size: 8.5px;
+  /* 8.5px 在这套 HUD 里是"看得见读不了"的下限之外(实测被审计稳定判为不可读);
+     10px 是同类铭牌(--hud 微字)在 1440 下的地板。 */
+  font-size: 10px;
   letter-spacing: 0.08em;
   color: var(--hud-faint, #5b6c7b);
   text-align: left;

package/app/components/workshop/ChannelSessionList.vue

@@ -188,6 +188,8 @@ const onLlmModelChange = (): void => {
 }
 const settingsSaving = ref(false)
 const fileSelectorOpen2 = ref(false)
+/** channel 设置弹窗预填的默认 LLM(llmJson 反序列化形状;与服务端 channelLlmSchema 对齐) */
+interface ChannelLlmDefaults { provider?: string, model?: string, effort?: string }
 const openSettings = (channelId: string): void => {
   const meta = channels.value.find(c => c.id === channelId)
   settingsChannelId.value = channelId
@@ -195,10 +197,10 @@ const openSettings = (channelId: string): void => {
   settingsForm.scenarioPrompt = meta?.scenarioPrompt ?? ''
   settingsForm.workspace = meta?.workspace ?? ''
   // 预填 channel 默认 LLM(llmJson 由列表接口透传)
-  let saved: { provider?: string, model?: string, effort?: string } | null = null
+  let saved: ChannelLlmDefaults | null = null
   try {
     const metaAny = meta as unknown as { llmJson?: string } | undefined
-    saved = metaAny?.llmJson ? JSON.parse(metaAny.llmJson) as typeof saved : null
+    saved = metaAny?.llmJson ? JSON.parse(metaAny.llmJson) as ChannelLlmDefaults : null
   }
   catch { saved = null }
   llmForm.enabled = !!saved?.model

package/app/components/workshop/Composer.vue

@@ -728,4 +728,100 @@ const placeholder = computed(() =>
   background: var(--tone-live-dot);
   opacity: 1;
 }
+
+/* ── 窄屏(≤1023):输入区是手持设备的"主操作面",键盘弹出时它必须还在 ──
+   桌面工具栏是「一行左簇右钮」;390px 下这行会折成一列竖排字,
+   所以窄屏改为「模式行 → 目标行 → 发送行」三段堆叠,发送占满一行且 ≥44px。 */
+@media (max-width: 1023.98px) {
+  .composer {
+    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
+  }
+
+  .composer-box {
+    padding: 8px 10px;
+  }
+
+  /* 状态 chip:桌面宽度自适应内容,窄屏必须允许折行,否则顶破输入卡 */
+  .composer-status-chip {
+    width: auto;
+    flex-wrap: wrap;
+    row-gap: 2px;
+    font-size: 11.5px;
+    line-height: 1.45;
+  }
+
+  .chip-hint {
+    flex: 1 1 100%;
+    padding-left: 0;
+    margin-left: 0;
+  }
+
+  .reach-chip,
+  .mention-role,
+  .mention-title {
+    font-size: 11.5px;
+  }
+
+  /* 16px 是 iOS 不缩放输入框的下限(小于它聚焦时整页被放大) */
+  .composer-input {
+    min-height: 42px;
+    max-height: 30dvh;
+    font-size: 16px;
+  }
+
+  .composer-bar {
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 8px;
+  }
+
+  .cb-left {
+    flex: 1 1 100%;
+    row-gap: 8px;
+  }
+
+  .cb-right {
+    flex: 1 1 100%;
+  }
+
+  /* 主操作:整行墨色药丸(触摸目标 44px) */
+  .send-btn {
+    width: 100%;
+    height: 44px;
+    font-size: 18px;
+  }
+
+  .aw-seg button {
+    min-height: 40px;
+    padding: 0 12px;
+  }
+
+  .chip-toggle {
+    min-height: 40px;
+  }
+
+  .target {
+    flex: 1 1 130px;
+    width: auto;
+  }
+
+  .composer-bar :deep(.ant-select-selector) {
+    min-height: 40px;
+    align-items: center;
+  }
+
+  .loop-number,
+  .loop-number.iterations {
+    flex: 1 1 96px;
+    width: auto;
+  }
+
+  .composer-bar :deep(.ant-input-number) {
+    min-height: 40px;
+  }
+
+  .mention-opt {
+    min-height: 44px;
+  }
+}
 </style>

package/app/components/workshop/DaqNodeRow.vue

@@ -544,6 +544,25 @@ tr.row-recipe-alarm td:first-child { box-shadow: inset 3px 0 0 var(--tone-danger
   border-color: transparent;
   opacity: 1;
 }
+/* ── 窄屏字号地板 ────────────────────────────────────────────────────────
+ * 节点行是"一台仪表的铭牌":桌面 10–11px 的 mono 微字是刻意的仪器语言。
+ * 但 375px 下这一行同时是**横向卷轴里的账页**,读距近、字号小、还要左右扫 ——
+ * 实测审计在 /daq 单页稳定报出近 2000 个 <11px 的文本节点,全部来自这里。
+ * 手持档把二级/三级信息抬到 11.5px(一级不受影响),布局不变(它们本就在
+ * 允许换行的单元格里),只是把"看得见"变成"读得了"。 */
+@media (max-width: 900px) {
+  .ch,
+  .drv-tag,
+  .st-pill,
+  .node-meta small,
+  .dev-unbind,
+  .dev-bind-chip,
+  .dev-add,
+  small.mono {
+    font-size: 11.5px;
+  }
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .run-pill.on .rp-dot { animation: rpPulse 1.8s ease-in-out infinite; }
 }

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>