# premise

这是我在展会看到的友商上位机 UI（`assets/paxini.jpg`）的风格参考，希望做一份相近气质的前端界面。前端由你负责实现与迭代。

## 约束（长期有效）

- 使用 `Svelte + TypeScript`
- 页面拆分成 `HudPanel`、`CenterStage`、`SignalChart`
- 不引入大型 UI 库
- 主色调：近黑背景 + 青蓝 / 荧光绿 / 橙红
- 主界面整体是“一整块 board”，通过渐变过渡，不做强分块
- 不做明显流光/扫光动画（可有静态纹理层次）
- 样式集中在组件内或 `theme` 文件
- 布局优先 `grid/flex`，仅在必要位置使用绝对定位
- 后续对接 Tauri，组件层不要把数据源写死

---

# 当前实现基线（已完成）

## Step1：主背景

- 已完成近黑全屏背景、弱渐变、暗角和轻噪声层
- `:root/html/body` 背景已与主界面统一，避免拖动窗口出现黑边断层

## Step2：TitleBar + ControlBar + 主布局

- 已完成窗口按钮（最小化 / 最大化切换 / 关闭）
- 已完成 ControlBar：
  - 配置菜单组（打开/关闭/校准/参数）
  - 连接状态卡片
  - 串口下拉框
  - 中英文切换
  - 设备信息行（设备/采样率/通道）
- 页面主结构已固定为：`TitleBar + ControlBar + WebGL2 Area`

## Step2-1：Tauri 交互与窗口体验

- TitleBar 已支持拖动（`data-tauri-drag-region`）
- 默认窗口大小自动尝试调整到屏幕约 `3/4`
- 已连接 Tauri window commands：

```ts
invoke("win_minimize");
invoke("win_toggle_maximize");
invoke("win_close");
```

## Step3：HUD 面板与数据演示

- 左右两侧悬浮曲线面板已完成
- 有数据时入场并渲染，无数据时退场（当前 demo：5s 开/关周期）
- 折线、渐变填充、边框与深色半透明底已完成
- 底部量程条已完成

---

# 当前前端结构（请按此扩展）

## 1) `src/routes/+page.svelte`

- 页面编排与状态管理
- 维护 `signalPanels`、语言、连接状态、串口、配置菜单选中态
- 将左右面板分流后传给 `CenterStage`
- 处理 Tauri invoke（窗口控制）

## 2) `src/lib/components/HudPanel.svelte`

- 只负责顶部控制区 UI 与交互事件分发
- 通过事件向外抛出：
  - `windowcontrol`
  - `localechange`
  - `configlink`
  - `portchange`

## 3) `src/lib/components/CenterStage.svelte`

- 承载 WebGL2 主区域和左右悬浮 rail
- 接收 `leftPanels/rightPanels` 并在 rail 内渲染 `SignalChart`
- 通过 `ResizeObserver` 动态计算：
  - `panel-zone` 顶部起始位置
  - 左右 rail 缩放比例（低高度窗口可自适应）
- 侧边定位策略：贴边但保留 `edge inset` 安全距离

## 4) `src/lib/components/SignalChart.svelte`

- 单个曲线面板渲染组件
- 仅消费结构化数据，不关心数据来源
- 支持 `side`（left/right）与 `active`（入场/退场）状态

---

# 关键布局规则（避免回归）

- WebGL2 区域占据下半主容器
- HUD 曲线面板浮在 WebGL2 上方，但贴近左右边缘，不遮挡中间核心区域
- 左右面板必须挂在 `CenterStage` 的 rail 容器内
- 不再使用命名 slot 传曲线面板（曾导致面板落到错误容器）
- 调试用彩色边框已移除，保持正式视觉

---

# 数据接入约定（统一结构）

```ts
type SignalTone = "cyan" | "lime" | "orange";
type SignalPanelSide = "left" | "right";

interface HudSignalSeries {
  id: string;
  tone: SignalTone;
  points: number[];
}

interface HudSignalIcon {
  id: string;
  label: string;
  tone: SignalTone;
}

interface HudSignalPanel {
  id: string;
  code: string;
  title: string;
  side: SignalPanelSide;
  active: boolean;
  series: HudSignalSeries[];
  icons: HudSignalIcon[];
}

interface HudPacket {
  ts: number;
  panels: HudSignalPanel[];
}
```

统一入口：

```ts
let signalPanels: HudSignalPanel[] = [];

function applyPacket(packet: HudPacket) {
  signalPanels = packet.panels;
}
```

---

# Step3 数据源 Demo（可替换）

## Demo A：本地 Mock

```ts
function startMockFeed(push: (packet: HudPacket) => void): () => void {
  let hasData = false;
  const cycle = setInterval(() => {
    hasData = !hasData;
    push({
      ts: Date.now(),
      panels: hasData ? buildRandomPanels() : buildInactivePanels()
    });
  }, 5000);

  const tick = setInterval(() => {
    if (hasData) {
      push({
        ts: Date.now(),
        panels: evolvePanels()
      });
    }
  }, 1200);

  return () => {
    clearInterval(cycle);
    clearInterval(tick);
  };
}
```

## Demo B：Tauri invoke 轮询

```ts
import { invoke } from "@tauri-apps/api/core";

async function fetchHudPacket(): Promise<HudPacket> {
  return await invoke<HudPacket>("hud_get_packet");
}
```

## Demo C：Tauri 事件推送

```ts
import { listen, type UnlistenFn } from "@tauri-apps/api/event";

async function startTauriStream(push: (packet: HudPacket) => void): Promise<() => void> {
  const unlisten: UnlistenFn = await listen<HudPacket>("hud_stream", (event) => {
    push(event.payload);
  });
  return () => unlisten();
}
```

## Demo D：WebSocket

```ts
function startWebSocket(push: (packet: HudPacket) => void): () => void {
  const ws = new WebSocket("ws://127.0.0.1:9001/hud");
  ws.onmessage = (e) => push(JSON.parse(e.data) as HudPacket);
  return () => ws.close();
}
```

---

# 其他接口建议（主控区联动）

```ts
invoke("sensor_connect", { port: "COM3" });
invoke("sensor_disconnect");

invoke("sensor_set_sample_rate", { hz: 120 });
invoke("sensor_set_channels", { channels: [1, 2, 3, 4] });

invoke("sensor_start_stream");
invoke("sensor_stop_stream");

invoke("sensor_get_status");
```

---

# step3 前端细节调整

1. 添加对串口连接失败的提醒
2. 连接成功后，连接按钮变成断开按钮点击就断开连接

# step 4 webgl2

1. 黑色背景，科技感 UI 容器
2. 一个 64x64 的压力矩阵
3. 用 InstancedMesh 渲染 4096 个小圆柱或小圆环
4. 每个实例根据 value 更新位置、缩放、颜色
5. 支持 OrbitControls 旋转缩放
6. 内置一个假数据生成器，能模拟脚印从无到有再消失
7. 数据更新用平滑插值，不要跳变
8. 左侧显示总压力、最大值、平均值
9. 支持 2D/3D 模式切换，但第一版 2D 可以只是俯视正交投影

# step4 config panel

我需要一个panel来进行参数配置，有以下配置（后面会加）

1. 点阵数量，目前默认是64*64，我希望可以自定义
2. range上下限，我希望可以自定义max和min来映射颜色