guanlan-src/app_frontEnd/web/src/views/Workbench.vue

<script setup lang="ts">
/**
 * 工作台（P11）：页签容器。页签清单与重构前 `app.js` 的 `TABS` **完全一致**（9 个）。
 *
 * 已迁移：overview（总览）。其余页签先如实标"迁移中"，不做假界面 ——
 * 用户令要求"逐页签迁移、对拍通过再删 Python 源码"，所以未迁移的页签必须一眼可见。
 */
import { computed } from 'vue'
import { t } from '../i18n/zh'
import { DONE, TABS } from '../lib/tabs'
import { winName } from '../lib/render'
import Component from './Component.vue'
import Energy from './Energy.vue'
import Fault from './Fault.vue'
import Overview from './Overview.vue'

const props = defineProps<{ d: any; tab: string; sys?: string | null }>()
const emit = defineEmits<{ (e: 'tab', id: string): void }>()

const pending = computed(() => !DONE.includes(props.tab))
</script>

<template>
  <nav class="wb-tabs">
    <button v-for="id in TABS" :key="id" :class="{ on: id === tab }" @click="emit('tab', id)">
      {{ t('tab.' + id) }}<sup v-if="!DONE.includes(id)" class="todo">迁移中</sup>
    </button>
  </nav>
  <div class="page-head">
    <h1>{{ t('tab.' + tab) }}</h1>
    <!-- 与旧 app.js:1066 逐字一致：`${t('win.label')} · ${winName(WIN)}`（对拍实逮：写成 win.l 第 1 项就错位） -->
    <span class="window-badge">{{ t('win.label') }} · {{ winName(d?.win) }}</span>
  </div>
  <Overview v-if="tab === 'overview'" :d="d" />
  <Energy v-else-if="tab === 'energy'" :d="d" />
  <Component v-else-if="tab === 'component'" :d="d" :sys="sys" />
  <Fault v-else-if="tab === 'fault'" :d="d" />
  <section v-else-if="pending" class="card">
    <h2>{{ t('tab.' + tab) }} <small>（本页签尚未迁移到 Vue）</small></h2>
    <p class="hint">
      迁移纪律：页签逐个搬，每搬一个就用 <code>tools/render_parity.mjs</code> 与重构前页面
      （现网 <code>/detail/v2</code>）对拍文案/数值/类名序列，**通过后**才删对应的 Python 前端源码。
      当前已迁移：{{ DONE.join('、') }}。
    </p>
  </section>
</template>

<style scoped>
.wb-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 0; }
.wb-tabs button {
  padding: 6px 12px; border: 1px solid var(--line); background: #fff; border-radius: 4px 4px 0 0;
  cursor: pointer; color: var(--ink);
}
.wb-tabs button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.todo { font-size: 10px; color: var(--muted); margin-left: 2px; }
.wb-tabs button.on .todo { color: #ffe9a8; }
.page-head { display: flex; align-items: baseline; gap: 12px; padding: 10px 18px 0; }
.page-head h1 { font-size: 18px; margin: 0; }
.window-badge { color: var(--muted); font-size: 12.5px; }
</style>