TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelProtocol ​

⚡WASM 驱动
⭐明星组件
🧬移植自 [DataV]

科幻面板-铁律 是 TechUI Scifi 面板系列中的经典重构容器。

它移植并重构自开源项目 @jiaminghi/data-view (dv-border-box-11)，由 aYin 进行了深度二次开发与重构，使其完全融入 TechUI 的统一配置体系。

它采用了严谨的 “中轴对称” 设计语言，拥有一个固定且醒目的顶部标题栏 。标题栏两侧集成了持续闪烁的矩形呼吸灯，这种动态装饰不仅平衡了视觉重心，更为界面注入了持续的生命力。

这种设计使其非常适合作为 核心图表容器 或 次级页面主框架，其自带的“呼吸感”能有效打破数据大屏的沉闷，在强调秩序的同时提升界面的活跃度。

提示：该组件可以通过 ScifiPanelDV1 或其语义化别名 ScifiPanelProtocol 进行调用。

基础用法 ​

默认形态 ​

默认情况下，DV1 会渲染一个带有顶部标题栏的边框。

⚠️ 标题宽度适配

DV1 的 SVG 路径是基于数学计算绘制的。如果您的标题较长，必须手动设置 titleWidth，否则边框线条会穿过文字。

vue
<template>
  <div style="width: 500px; height: 300px;">
    <ScifiPanelProtocol title="核心数据监控" :titleWidth="200">
      <div class="content-box">
        内容区域...
      </div>
    </ScifiPanelProtocol>
  </div>
</template>

视觉变体 ​

DV1 的视觉核心在于其顶部的装饰动画。

装饰动画 (Decoration) ​

标题栏两侧有动态闪烁的矩形块。

  • True (默认): 显示动态装饰，增加科技感。
  • False: 隐藏装饰，仅保留静态边框，视觉更干净。
vue
<template>
  <div class="grid">
    <ScifiPanelProtocol title="Dynamic Mode" />

    <ScifiPanelProtocol 
      title="Static Mode" 
      :decoration="false" 
    />
  </div>
</template>

装饰配色 (Color Alt) ​

通过 decorationColorAlt 可以改变顶部装饰的配色逻辑（交换高亮色与焦点颜色）。

  • False: 默认配色。
  • True: 使用变体配色，通常用于让装饰更醒目。
vue
<template>
  <ScifiPanelProtocol 
    title="High Contrast" 
    :decorationColorAlt="true" 
    :titleWidth="180"
  />
</template>

边框与光效 ​

支持 TechUI 标准的边框粗细调整和全局发光效果。

vue
<template>
  <ScifiPanelProtocol 
    title="NEON FRAME" 
    :borderWidth="3"
    :glow="true"
    className="dv1-neon"
  />
</template>

CSS变量 ​

DV1 完美支持 TechUI 的 CSS 变量系统。通过覆盖以下变量，您可以轻松实现“数据蓝”、“琥珀警报”等多种风格。

案例：数据蓝风格 (Data Blue) ​

vue
<template>
  <ScifiPanelProtocol 
    className="panel-data-blue"
    title="SERVER NODE"
    :backgroundBlur="true"
    :backgroundOpacity="0.6"
  />
</template>

<style lang="less">
.panel-data-blue {
  /* 边框：深青 */
  --sf-panel-bd: #1d4ed8;
  
  /* 装饰/文字：亮青 */
  --sf-panel-fc: #60a5fa;
  --sf-panel-hlite: #93c5fd;
  
  /* 背景 */
  --sf-panel-bg: rgba(30, 58, 138, 0.4);
}
</style>

API 参考 ​

Props ​

属性名说明类型默认值
title标题内容。显示在顶部中央String—
titleWidth标题宽度 (px)。需手动适配文字长度Number150
decoration动画开关。是否显示标题两侧的动态装饰Booleantrue
decorationColorAlt装饰变体。是否使用异色装饰Booleanfalse
borderd是否显示边框Booleantrue
borderWidth边框线条宽度 (px)Number—
backgroundOpacity背景不透明度 (0-1)Number—
backgroundBlur是否开启背景毛玻璃Booleanfalse
glow是否开启外发光Booleanfalse
glowOpacity外发光强度 (0-1)Number—
className自定义容器类名String—

CSS Variables ​

您可以在组件的父级或通过 className 覆盖以下变量，以控制组件的配色与外观。

变量名说明默认值参考
--sf-panel-bg面板背景填充色var(--scifi-bg)
--sf-panel-bgop背景不透明度var(--cpt-panel-bgop, 1)
--sf-panel-bd边框线条颜色var(--scifi-bd)
--sf-panel-bdw边框线条宽度var(--cpt-panel-bdw, 1px)
--sf-panel-fc标题文字颜色var(--scifi-fc)
--sf-panel-hlite高光颜色var(--scifi-hlite)
--sf-panel-focus焦点颜色var(--scifi-focus)
--sf-panel-glow内发光颜色var(--scifi-focus)
--sf-panel-glowop内发光不透明度var(--cpt-panel-glowop, .5)
--sf-panel-shadow容器阴影var(--shadow-weak)
--sf-panel-scale整体缩放比例var(--cpt-panel-scale)

致谢 ​

JiaMing
JiaMing
Github

此组件移植自开源组件 jiaminghi/data-view，在此基础上基于 TechUI 全局主题，进行了深度定制，并添加了诸多的API，大大增强了本组件的能力。

在此，向作者 JiaMing 致以诚挚的谢意与敬意！