agentworkshop 0.7.53 → 0.7.58

package/app/components/dcw/DcwMesArtifacts.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+/**
+ * MES 点位产物弹窗 —— dataHook/图像落盘产物的浏览与预览。
+ * 列表来自 GET /api/workshop/dcw/mes-artifacts(node_id);图像/SVG 经
+ * /mes-artifacts/file 内联预览(csv/json 新窗口打开)。组件自取数,页面零状态。
+ */
+import { ref, watch } from 'vue'
+import { narrowFetch } from '~/stores/workshop/narrow-fetch'
+
+const props = defineProps<{
+  nodeId: string
+  nodeName: string
+}>()
+
+const open = defineModel<boolean>('open', { required: true })
+
+interface ArtifactItem { name: string, bytes: number, mime: string, mtime: string | null }
+const items = ref<ArtifactItem[]>([])
+const loading = ref(false)
+const error = ref('')
+const preview = ref<ArtifactItem | null>(null)
+
+async function refresh(): Promise<void> {
+  if (!props.nodeId) return
+  loading.value = true
+  error.value = ''
+  try {
+    // narrowFetch:narrow 化的 $fetch,绕开 Nuxt 路由类型推导的 TS2589(运行时同一函数)
+    const r = await narrowFetch<{ data?: { artifacts?: ArtifactItem[] } }>('/api/workshop/dcw/mes-artifacts', {
+      query: { node_id: props.nodeId, limit: 60 },
+    })
+    items.value = r.data?.artifacts ?? []
+  }
+  catch (err) {
+    error.value = err instanceof Error ? err.message : String(err)
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+watch(open, (v) => {
+  if (v) {
+    preview.value = null
+    void refresh()
+  }
+})
+
+const fileUrl = (name: string): string => `/api/workshop/dcw/mes-artifacts/file?node_id=${encodeURIComponent(props.nodeId)}&name=${encodeURIComponent(name)}`
+const isImage = (a: ArtifactItem): boolean => a.mime.startsWith('image/')
+const fmtBytes = (b: number): string => b >= 1024 * 1024 ? `${(b / 1024 / 1024).toFixed(1)}MB` : `${Math.max(1, Math.round(b / 1024))}KB`
+</script>
+
+<template>
+  <div
+    v-if="open"
+    class="modal-mask"
+    @click.self="open = false"
+  >
+    <div class="modal mes-artifacts-modal">
+      <h3 class="m-title">
+        {{ $t('dcwDetail.mesArtifactsTitle') }} · {{ nodeName || nodeId }}
+      </h3>
+
+      <div class="art-toolbar">
+        <button
+          class="mini-btn"
+          :disabled="loading"
+          @click="refresh()"
+        >
+          {{ loading ? '···' : $t('dcwDetail.mesArtifactsRefresh') }}
+        </button>
+        <span
+          v-if="error"
+          class="test-result bad"
+        >✗ {{ error }}</span>
+        <span
+          v-else
+          class="dim"
+        >{{ items.length }}</span>
+      </div>
+
+      <div class="art-body">
+        <p
+          v-if="!loading && items.length === 0"
+          class="dim"
+        >
+          {{ $t('dcwDetail.mesArtifactsEmpty') }}
+        </p>
+        <ul
+          v-else
+          class="art-list"
+        >
+          <li
+            v-for="a in items"
+            :key="a.name"
+            :class="{ on: preview?.name === a.name }"
+            @click="preview = a"
+          >
+            <span class="mono">{{ a.name }}</span>
+            <small class="dim">{{ fmtBytes(a.bytes) }} · {{ a.mtime?.slice(5, 19).replace('T', ' ') ?? '' }}</small>
+          </li>
+        </ul>
+        <div
+          v-if="preview"
+          class="art-preview"
+        >
+          <img
+            v-if="isImage(preview)"
+            :src="fileUrl(preview.name)"
+            :alt="preview.name"
+          >
+          <span
+            v-else
+            class="dim"
+          >{{ $t('dcwDetail.mesArtifactsBinary') }}</span>
+          <a
+            class="mini-btn"
+            :href="fileUrl(preview.name)"
+            target="_blank"
+            rel="noopener"
+          >{{ $t('dcwDetail.mesArtifactsOpen') }} {{ preview.name }}</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 本页行级样式:scoped 内仅放本组件私有布局;通用词法(.mini-btn/.modal-mask/.mono/.dim)在 main.css */
+.mes-artifacts-modal { min-width: 560px; max-width: 860px; }
+.art-toolbar { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
+.art-body { display: flex; gap: 12px; max-height: 60vh; overflow: auto; }
+.art-list { list-style: none; margin: 0; padding: 0; min-width: 260px; }
+.art-list li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
+.art-list li:hover, .art-list li.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
+.art-preview { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
+.art-preview img { max-width: 100%; max-height: 46vh; border: 1px solid var(--line-faint, rgba(255,255,255,.1)); border-radius: 6px; background: #0d1b2a; }
+.art-preview pre { max-width: 100%; max-height: 40vh; overflow: auto; font-size: 12px; }
+</style>

package/app/components/dcw/DcwNodesTable.vue

@@ -5,6 +5,7 @@
  */
 import type { DcwNodeView } from '#shared/dcw-protocol'
 import { reactive } from 'vue'
+import { dcwDriverBadgeKey } from '~/utils/dcw-driver-badge'
 
 defineProps<{
   lineNodes: DcwNodeView[]
@@ -24,9 +25,18 @@ const emit = defineEmits<{
   'read': [nodeId: string]
   'write': [nodeId: string, value: number]
   'patch-step-limit': [nodeId: string, value: number | null]
+  'artifacts': [nodeId: string]
   'remove': [nodeId: string]
 }>()
 
+const { t } = useI18n()
+
+/** 边缘层徽标文案(mes-rest=「MES 边缘层」;mock/s7-stub=「无协议转换」;真实协议自明不加) */
+function drvBadge(driver: string): string {
+  const key = dcwDriverBadgeKey(driver)
+  return key ? t(key) : ''
+}
+
 /** 直写输入框逐节点暂存(与页面 useDcwWrites 的 setInputs 同一个对象) */
 const setInputs = defineModel<Record<string, number | ''>>('setInputs', { required: true })
 const stepDrafts = reactive<Record<string, number | '' | null>>({})
@@ -69,6 +79,10 @@ function saveStep(n: DcwNodeView): void {
             <td>
               <span class="mono dim">{{ n.id.slice(0, 8) }}</span>
               <b>{{ n.name }}</b>
+              <span
+                v-if="drvBadge(n.driver)"
+                class="drv-badge"
+              >{{ drvBadge(n.driver) }}</span>
               <small class="mono ch">{{ dcwTemplateRefCh(n.templateRef) }}</small>
             </td>
             <td>
@@ -182,6 +196,14 @@ function saveStep(n: DcwNodeView): void {
               <small class="dim">{{ $t('dcwDetail.stepCurrent', { p0: n.stepLimit ?? $t('dcwDetail.stepUnset') }) }} {{ n.unit }}</small>
             </td>
             <td class="right">
+              <button
+                v-if="n.driver === 'mes-rest'"
+                class="mini-btn"
+                :title="$t('dcwDetail.mesArtifactsTitle')"
+                @click="emit('artifacts', n.id)"
+              >
+                {{ $t('dcwDetail.mesArtifactsBtn') }}
+              </button>
               <button
                 class="mini-btn danger"
                 @click="emit('remove', n.id)"
@@ -222,6 +244,8 @@ function saveStep(n: DcwNodeView): void {
 .nodes-table th { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--line-strong); }
 .nodes-table td b { margin-left: 8px; }
 .ch { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-faint); }
+/* 边缘层徽标(仅 mes-rest/mock/s7-stub;极简单行小 pill,协议名自明者不加) */
+.drv-badge { display: inline-block; margin-left: 7px; padding: 1px 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--ink-faint); border: 1px solid var(--line-strong); border-radius: 4px; vertical-align: 1px; }
 .right { text-align: right; }
 .val { font-size: 13px; }
 .val small { margin-left: 3px; color: var(--ink-faint); }

package/app/components/dcw/DcwParamApprovalCard.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+/**
+ * HITL 下发参数审批卡(产线详情页)—— 本产线控制节点的 Agent 写入待批项。
+ * 数据与裁决由页面 useDcwParamApprovals 独占持有(经 props/emit 回抛,与节点表同模式);
+ * 空态由页面 v-if 收敛(整卡不渲染,避免噪音)。三态语义:同意=立即执行;
+ * 拒绝=Agent 按原值继续(意见逐字回流);超时=默认不同意(卡头小字常驻)。
+ */
+import type { DcwApprovalRow } from '../../pages/dcw/composables/useDcwParamApprovals'
+
+defineProps<{
+  items: DcwApprovalRow[]
+  decidingId: string
+  remainingSec: (a: DcwApprovalRow) => number
+  agentName: (a: DcwApprovalRow) => string
+  nodeName: (a: DcwApprovalRow) => string
+}>()
+
+const emit = defineEmits<{ decide: [id: string, approved: boolean] }>()
+
+const comments = defineModel<Record<string, string>>('comments', { required: true })
+</script>
+
+<template>
+  <section class="aw-tile ap-card">
+    <div class="ap-head">
+      <b>{{ $t('dcwDetail.apTitle') }}</b>
+      <span class="ap-count mono">{{ items.length }}</span>
+      <small class="ap-rule">{{ $t('dcwDetail.apRule') }}</small>
+    </div>
+    <div
+      v-for="ap in items"
+      :key="ap.id"
+      class="ap-row"
+    >
+      <div class="ap-main">
+        <div class="ap-line">
+          <span class="ap-node">{{ nodeName(ap) }}</span>
+          <span class="ap-detail">{{ ap.detail }}</span>
+        </div>
+        <small class="ap-meta">
+          <span class="mono">{{ $t('dcwDetail.apInitiator') }} {{ agentName(ap) }}</span>
+          <span
+            v-if="Number.isFinite(remainingSec(ap))"
+            class="ap-ttl mono"
+            :class="{ urgent: remainingSec(ap) <= 30 }"
+          >⏱ {{ remainingSec(ap) }}s {{ $t('dcwDetail.apTimeout') }}</span>
+          <span
+            v-else
+            class="ap-ttl mono hold"
+          >⏱ 等待人工裁决(hold 模式,不自动拒绝)</span>
+        </small>
+      </div>
+      <input
+        v-model="comments[ap.id]"
+        class="inp ap-comment"
+        :placeholder="$t('dcwDetail.apCommentPh')"
+      >
+      <div class="ap-actions">
+        <button
+          class="mini-btn ap-ok"
+          :disabled="decidingId === ap.id"
+          @click="emit('decide', ap.id, true)"
+        >
+          {{ $t('dcwDetail.apApprove') }}
+        </button>
+        <button
+          class="mini-btn danger"
+          :disabled="decidingId === ap.id"
+          @click="emit('decide', ap.id, false)"
+        >
+          {{ $t('dcwDetail.apReject') }}
+        </button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+/* 共享工具类随标记搬入本组件:scoped 的 data-v 归属不跨组件,
+   凡在多组件出现的规则(.mono/.dim/.inp/.mini-btn/... 等)在此各持一份逐字相同的副本。 */
+
+.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+
+.ap-card { padding: 12px 18px; margin-bottom: 14px; border-color: color-mix(in srgb, var(--tone-warning-dot) 35%, transparent); }
+.ap-head { display: flex; gap: 8px; align-items: baseline; }
+.ap-head b { font-size: 13.5px; }
+.ap-count { padding: 0 7px; font-size: 11.5px; color: var(--tone-warning-dot); border: 1px solid var(--tone-warning-dot); border-radius: 4px; }
+.ap-rule { margin-left: auto; font-size: 10.5px; color: var(--ink-faint); }
+
+.ap-row { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--divider-hair); }
+.ap-row:first-of-type { border-top: 0; margin-top: 8px; }
+.ap-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+.ap-line { display: flex; gap: 8px; align-items: baseline; min-width: 0; flex-wrap: wrap; }
+.ap-node { font-weight: 600; font-size: 12.5px; }
+.ap-detail { font-size: 12px; color: var(--ink-soft); overflow-wrap: anywhere; }
+.ap-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--ink-faint); }
+.ap-ttl { color: var(--tone-warning-dot); }
+.ap-ttl.urgent { color: var(--tone-danger-dot); }
+.ap-ttl.hold { color: var(--tone-info-dot); }
+.ap-comment { flex: none; width: 240px; padding: 5px 9px; font-size: 12px; }
+.ap-actions { display: flex; flex: none; gap: 6px; }
+.ap-ok { color: var(--tone-success-dot); }
+
+@media (max-width: 900px) {
+/* ══ 窄屏自适应层(≤900 手持/平板竖):审批行落成一列,触摸目标 ≥40px ══ */
+  .ap-card { padding: 12px; }
+  .ap-rule { margin-left: 0; }
+  .ap-row { flex-wrap: wrap; }
+  .ap-comment { flex: 1 1 100%; width: auto; }
+  .ap-actions { margin-left: auto; }
+  .mini-btn,
+  .inp {
+    min-height: 40px;
+  }
+}
+</style>