ScifiPanel 科技面板综述

TechUI Scifi Panel 是专为构建高密度、高未来感数据大屏（Data Dashboard）而设计的容器组件库。

这一系列组件不仅仅是简单的边框，它们是构建赛博朋克（Cyberpunk）、科幻（Sci-Fi）以及军武风格（Tactical）界面的基础单元。通过 SVG 路径计算、WASM 渲染加速以及纯 CSS 的极致性能优化，ScifiPanel 提供了从轻量级装饰到重型装甲风格的全方位解决方案。

设计理念

• SVG 与 CSS 的混合动力: 核心复杂的几何路径采用 SVG 实时计算（保证任意尺寸下的清晰度），而高性能的动态效果（如发光、模糊）则充分利用 CSS3 硬件加速。
• 高度可配置 (Configurable): 摒弃了传统大屏切图“死板”的缺点。几乎所有面板都支持 borderWidth（线宽）、backgroundOpacity（背景透明度）、glow（发光）以及几何变换（旋转/镜像）。
• 主题自适应 (Theming): 全系组件内置 CSS 变量接口。只需修改几个 CSS 变量，即可瞬间从“联邦蓝”切换至“赤红风暴”或“黑客矩阵”风格。

关于命名与别名

为了平衡开发稳定性与代码可读性，TechUI Scifi 面板组件采用了双重命名策略。每个组件都拥有一个固定的原始序列名和一个语义化的别名。

• 原始序列名 (Fixed Serial Name)
  • 例如：ScifiPanelA1、ScifiPanelDV5
  • 这是组件的底层物理 ID，基于开发序列命名。它是永久固定且不可变更的。如果您希望您的代码在未来的版本迭代中保持绝对的向后兼容性，建议优先使用此名称。
• 语义化别名 (Semantic Alias)
  • 例如：ScifiPanelAlpha、ScifiPanelZone
  • 这是基于外观风格或设计隐喻命名的快捷方式，旨在提高代码的可读性。

注意：随着设计语言的演进，个别别名可能会在后期版本中进行语义微调或更名（例如从防御风格调整为通用风格）。虽然我们会尽量保持兼容，但在跨大版本升级时请留意相关变更日志。

组件家族

ScifiPanel 目前包含四大系列，共计 20+ 个独立组件，满足不同层级的布局需求。

ScifiPanelA 系列 (切角与凹槽)

关键词： Title · Chamfer · Notch

该系列专为 “带标题的独立模块” 设计。它们拥有复杂的几何切角或物理凹槽来容纳标题文字。

• A1 (切角面板): 旗舰组件，支持 16 种几何变换，标题可位于任意角落。
• A2 (工业凹槽): 硬朗的内陷式标题槽，适合重工业或军事风格。
• A3 (三角角标): 极简的角部徽章，适合用于序号 (No.1) 或状态标识。

ScifiPanelB 系列 (装饰与边界)

关键词： Focus · Brackets · Infinity

该系列为 “无标题装饰容器”。它们通过线条的包围感来强化内容的独立性。

• B1 (四角防护): 经典的 L 型四角包围，营造聚焦感。
• B2 (上下夹具): 电影画幅般的上下横梁，适合宽屏内容。
• B3 (战术角标): 敏捷的斜切或直角定位点，适合密集列表。
• B4 (无限视界): 全封闭的多层边框，营造深邃的无限镜效果。

ScifiPanelDV 系列 (DataV 移植增强)

关键词： Dynamic · Animation · DataV

该系列移植自优秀的开源项目 @jiaminghi/data-view。 我们保留了原版 dv-border-box 经典的动态 SVG 路径动画（如流光、呼吸、闪烁），并进行了深度重构：

• 统一 API: 将原版蛇形命名 (title_width) 统一为小驼峰 (titleWidth)。
• 样式增强: 增加了 TechUI 特有的毛玻璃 (backgroundBlur)、全局发光 (glow) 和 CSS 变量换肤支持。
• 组件映射:
• DV1 ~ DV3: 动态标题与重型装饰。
• DV4 ~ DV6: 锚点与括弧的多种变体。
• DV7 ~ DV9: 圆角流光与动态巡航。

TuiPanel 系列 (纯 CSS 轻量化)

关键词： Performance · Border-Radius · Lightweight

• TuiPanelA1（别名TuiPanelZero）: 唯一的 纯 CSS 实现组件。它支持 圆角 (Border Radius)，渲染开销极低，非常适合用于包裹按钮、输入框或在大规模长列表中使用。

快速上手

<template>
  <div class="dashboard-grid">
    <ScifiPanelAlpha title="SYSTEM STATUS" :borderWidth="2">
      <div class="content">NORMAL</div>
    </ScifiPanelAlpha>

    <ScifiPanelFlow :aniDuration="2" :glow="true">
      <div class="content">SCANNING...</div>
    </ScifiPanelFlow>
  </div>
</template>