<!-- components/layout/AppSidebar.vue -->
<template>
  <aside class="fixed left-0 top-0 z-30 h-screen w-64 border-r border-slate-200 bg-white flex flex-col">
    <!-- Logo 区域 -->
    <div class="flex h-14 items-center border-b border-slate-200 px-4">
      <img src="/logo.svg" alt="EdgeOS" class="h-8" />
      <span class="ml-2 text-lg font-semibold text-slate-900">EdgeOS</span>
    </div>

    <!-- 导航菜单 -->
    <nav class="flex-1 space-y-1 p-2">
      <NuxtLink
        v-for="item in navItems"
        :key="item.path"
        :to="item.path"
        class="flex items-center gap-3 rounded-none px-4 py-2 text-sm text-slate-700 hover:bg-slate-50"
        :class="{ 'border-l-2 border-l-sky-500 bg-slate-50 text-slate-900': isActive(item.path) }"
      >
        <component :is="item.icon" class="h-5 w-5" />
        {{ item.name }}
      </NuxtLink>
    </nav>

    <!-- 底部状态区 -->
    <div class="border-t border-slate-200 p-4">
      <div class="flex items-center gap-2">
        <StatusIndicator status="online" />
        <span class="text-xs text-slate-500">网关已连接</span>
      </div>
      <p class="mt-2 text-xs text-slate-400">v0.0.1</p>
    </div>
  </aside>
</template>

<!-- components/layout/AppHeader.vue -->
<template>
  <header class="fixed left-64 right-0 top-0 z-20 h-14 border-b border-slate-200 bg-white">
    <div class="flex h-full items-center justify-between px-6">
      <!-- 面包屑 -->
      <Breadcrumb :items="breadcrumbs" separator="/" />

      <!-- 右侧操作区 -->
      <div class="flex items-center gap-4">
        <!-- 全局搜索 -->
        <button
          @click="openCommandPalette"
          class="flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-1.5 text-sm text-slate-500 hover:bg-slate-50"
        >
          <Search class="h-4 w-4" />
          <span class="hidden sm:inline">搜索...</span>
          <kbd class="hidden text-xs text-slate-400 sm:inline-block">Ctrl+K</kbd>
        </button>

        <!-- 用户菜单 -->
        <DropdownMenu>
          <DropdownMenuTrigger as-child>
            <button class="flex h-8 w-8 items-center justify-center rounded-full bg-slate-100">
              <User class="h-4 w-4 text-slate-600" />
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" class="rounded-lg border-slate-200">
            <DropdownMenuItem>个人设置</DropdownMenuItem>
            <DropdownMenuItem>退出登录</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  </header>
</template>

<div class="flex items-center gap-4 text-xs font-mono text-slate-500">
  <span>RUNNING</span>
  <span>Devices: {{ devices }}</span>
  <span>Alarm: {{ alarms }}</span>
  <span>Latency: {{ latency }}ms</span>
  <span>Loss: {{ loss }}%</span>
</div>

<!-- 使用 shadcn Table 组件，配合自定义样式 -->
<Table class="border-collapse border border-slate-200">
  <TableHeader class="bg-slate-50">
    <TableRow class="border-b border-slate-200 hover:bg-transparent">
      <TableHead class="h-10 px-3 text-xs font-semibold text-slate-500">
        设备名称
      </TableHead>
      <!-- 更多列... -->
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow
      v-for="row in data"
      :key="row.id"
      class="border-b border-slate-200 hover:bg-slate-50"
      :class="{ 'border-l-2 border-l-sky-500 bg-sky-50/50': selectedId === row.id }"
    >
      <TableCell class="px-3 py-0">
        <EdgeDeviceCell :device="row" />
      </TableCell>
      <!-- 更多单元格... -->
    </TableRow>
  </TableBody>
</Table>

<!-- components/edge/EdgeDeviceCell.vue -->
<template>
  <div class="flex flex-col items-start gap-0.5 py-1.5">
    <span class="max-w-[200px] truncate text-sm font-medium leading-none text-slate-900">
      {{ device.name }}
    </span>
    <span class="font-mono text-[10px] leading-none text-slate-500">
      ID: {{ device.id }}
    </span>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  device: {
    name: string
    id: string
  }
}>()
</script>

<!-- 大数据量时启用虚拟滚动 -->
<script setup lang="ts">
import { useVirtualizer } from '@tanstack/vue-virtual'

const parentRef = ref<HTMLElement>()
const rowVirtualizer = useVirtualizer({
  count: data.value.length,
  getScrollElement: () => parentRef.value,
  estimateSize: () => 40, // 行高 40px
  overscan: 10,
})
</script>

<!-- components/edge/QualityBar.vue -->
<template>
  <div class="h-1.5 w-full bg-slate-200">
    <div
      class="h-full"
      :style="{
        width: value + '%',
        background: color
      }"
    />
  </div>
</template>

2.8 行状态强化（工业重点）
<TableRow
  :class="[
    row.status === 'fault' && 'border-l-2 border-l-red-500',
    row.status === 'critical' && 'border-l-2 border-l-red-700 bg-red-50/30'
  ]"
>

👉 工业系统必须做到：故障一眼可见（边框优先于颜色块）

---

## 3. 实时监控组件 (Monitoring Components)

### 3.1 状态指示器 (The "Pulse" Standard)

工业状态不仅靠颜色，还要靠“动态感知”，让操作人员在余光中也能感知状态变化。

**色彩语义**：
| 状态 | 颜色 | 动画 | 语义 |
| :--- | :--- | :--- | :--- |
| **运行中** | `emerald-500` | `animate-pulse` | 系统正常、逻辑通过、在线 |
| **待机/离线** | `amber-500` | 无 | 离线/待机、非致命警告、连接中断 |
| **故障** | `red-500` | `animate-pulse` | 指令超时、硬件故障、通讯中断 |
| **未知** | `slate-400` | 无 | 状态未上报、初始化中 |

**双层脉冲动画实现**：
```vue
<!-- components/edge/StatusIndicator.vue -->
<template>
  <div class="relative flex h-2 w-2">
    <!-- 外层脉冲环 (仅运行和故障状态显示) -->
    <span
      v-if="showPulse"
      class="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
      :class="pulseColorClass"
    ></span>
    <!-- 内层实心点 -->
    <span
      class="relative inline-flex h-2 w-2 rounded-full"
      :class="dotColorClass"
    ></span>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  status: 'running' | 'standby' | 'fault' | 'unknown'
}>()

const showPulse = computed(() => props.status === 'running' || props.status === 'fault')

const dotColorClass = computed(() => {
  switch (props.status) {
    case 'running': return 'bg-emerald-500'
    case 'standby': return 'bg-amber-500'
    case 'fault': return 'bg-red-500'
    default: return 'bg-slate-400'
  }
})

const pulseColorClass = computed(() => {
  switch (props.status) {
    case 'running': return 'bg-emerald-400'
    case 'fault': return 'bg-red-400'
    default: return ''
  }
})
</script>

<template>
  <div class="flex items-center gap-2">
    <StatusIndicator :status="status" />

    <div class="flex gap-3 text-[10px] font-mono text-slate-500">
      <span>L {{ latency }}ms</span>
      <span>J {{ jitter }}</span>
      <span>P {{ loss }}%</span>
    </div>
  </div>
</template>

<!-- components/edge/EdgeProtocolBadge.vue -->
<template>
  <span
    class="inline-flex items-center rounded-[2px] px-1.5 py-0.5 font-mono text-[10px] font-medium leading-none text-white"
    :class="bgColorClass"
  >
    {{ displayName }}
  </span>
</template>

<script setup lang="ts">
const props = defineProps<{
  protocol: 'modbus' | 'modbus-rtu' | 'opcua' | 'mqtt' | 'iec104' | 'bacnet' | string
}>()

const protocolMap: Record<string, { name: string; color: string }> = {
  modbus: { name: 'Modbus/TCP', color: 'bg-sky-500' },
  'modbus-rtu': { name: 'Modbus/RTU', color: 'bg-sky-600' },
  opcua: { name: 'OPC UA', color: 'bg-indigo-500' },
  mqtt: { name: 'MQTT', color: 'bg-emerald-500' },
  iec104: { name: 'IEC 104', color: 'bg-purple-500' },
  bacnet: { name: 'BACnet', color: 'bg-amber-600' },
}

const config = computed(() => protocolMap[props.protocol] || { name: props.protocol.toUpperCase(), color: 'bg-slate-500' })
const displayName = computed(() => config.value.name)
const bgColorClass = computed(() => config.value.color)
</script>

<!-- components/edge/MetricCard.vue -->
<template>
  <div class="border border-slate-200 bg-white p-4">
    <div class="flex items-center justify-between">
      <span class="text-xs font-medium uppercase tracking-wide text-slate-500">{{ label }}</span>
      <StatusIndicator v-if="showStatus" :status="status" />
    </div>
    <div class="mt-2 flex items-baseline gap-1">
      <span class="text-2xl font-semibold text-slate-900">{{ value }}</span>
      <span class="text-sm text-slate-500">{{ unit }}</span>
    </div>
    <div v-if="trend" class="mt-2 flex items-center gap-1">
      <ArrowUp v-if="trend > 0" class="h-3 w-3 text-emerald-500" />
      <ArrowDown v-else class="h-3 w-3 text-red-500" />
      <span class="text-xs" :class="trend > 0 ? 'text-emerald-600' : 'text-red-600'">
        {{ Math.abs(trend) }}%
      </span>
      <span class="text-xs text-slate-400">较昨日</span>
    </div>
  </div>
</template>

<div :class="value > threshold ? 'animate-pulse text-red-500' : ''">


---

## 3.4 工业拓扑视图（Topology System）

工业系统必须具备设备拓扑结构：


EdgeX Gateway
├── Channel
│ ├── Device
│ ├── Points

---

### UI结构：

- 左：树结构（Tree）
- 右：设备详情 + 实时状态

---

### 状态传播可视化：

- 子节点故障 → 父节点染色
- Channel 故障 → 整体标红

---

### 实现建议：

```vue
<Tree :data="topology">

👉 没有拓扑视图，不算工业系统

---

## 4. 关键交互：防抖与反馈 (Safe Interaction)

在边缘计算系统中，**下发配置**是高危操作，UI 必须提供绝对的心理预期和安全屏障。

### 4.1 危险操作对话框

所有涉及 `Delete`、`Stop`、`Reboot`、`Reset` 的按钮，必须弹出直角对话框进行二次确认。

**实现规范**：
| 属性 | 值 |
| :--- | :--- |
| 圆角 | `rounded-lg` |
| 边框 | `1px solid #E2E8F0` |
| 宽度 | `400px` |
| 遮罩 | `bg-black/50`，无模糊 |
| 标题 | `text-slate-900 font-semibold` |
| 描述 | `text-slate-500 text-sm` |

**倒计时锁定**：确认按钮在对话框弹出后的前 `2s` 处于禁用状态，防止用户误触。


```vue
<!-- components/edge/DangerDialog.vue -->
<template>
  <DialogRoot v-model:open="open">
    <DialogPortal>
      <DialogOverlay class="fixed inset-0 bg-black/50" />
      <DialogContent class="fixed left-1/2 top-1/2 w-[400px] -translate-x-1/2 -translate-y-1/2 rounded-lg border border-slate-200 bg-white p-0">
        <DialogHeader class="border-b border-slate-200 p-4">
          <DialogTitle class="text-lg font-semibold text-slate-900">
            确认{{ actionName }}
          </DialogTitle>
        </DialogHeader>
        
        <div class="p-4">
          <DialogDescription class="text-sm text-slate-500">
            此操作将{{ actionDescription }}，是否继续？
          </DialogDescription>
        </div>

        <DialogFooter class="flex items-center justify-end gap-2 border-t border-slate-200 p-4">
          <Button variant="outline" @click="open = false" class="rounded-lg">
            取消
          </Button>
          <Button
            variant="destructive"
            :disabled="countdown > 0"
            @click="confirm"
            class="rounded-lg"
          >
            {{ countdown > 0 ? `确认 (${countdown})` : '确认' }}
          </Button>
        </DialogFooter>
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>

<script setup lang="ts">
const countdown = ref(2)
let timer: NodeJS.Timeout

watch(open, (newVal) => {
  if (newVal) {
    countdown.value = 2
    timer = setInterval(() => {
      if (countdown.value > 0) countdown.value--
      else clearInterval(timer)
    }, 1000)
  } else {
    clearInterval(timer)
  }
})
</script>

<input placeholder="输入 DELETE 确认操作" />

4.6 操作审计（新增）
所有 L3+ 操作必须记录：
type AuditLog = {
  user: string
  action: string
  target: string
  timestamp: number
}

👉 工业系统必须具备可追溯性

---

### 4.2 Toast 通知规范

| 类型 | 持续时间 | 操作 | 样式 |
| :--- | :--- | :--- | :--- |
| 成功 | 2s | 无 | 绿色边框，绿色文字 |
| 错误 | 5s | 重试按钮 | 红色边框，红色文字 |
| 警告 | 4s | 查看详情 | 橙色边框 |
| 信息 | 2s | 无 | 蓝色边框 |


```vue
<!-- 使用 shadcn toast 组件 -->
<Toast v-if="toast" :variant="toast.type" class="rounded-lg border-l-4">
  <div class="flex items-center justify-between">
    <span>{{ toast.message }}</span>
    <button v-if="toast.onRetry" @click="toast.onRetry" class="text-sm underline">
      重试
    </button>
  </div>
</Toast>