TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelVeil ​

⚡WASM 驱动
🧬移植自 [DataV]

科幻面板-维尔 是 TechUI Scifi 面板系列中的非对称战术容器。

它移植并重构自开源项目 @jiaminghi/data-view (原型 dv-border-box-13)。它打破了传统面板的对称惯例，采用了独特的 “对角平衡 (Diagonal Balance)” 设计语言。由显著的切角 (Chamfer) 与 三段式虚线装饰 构成 ，而另外两个角落则保持极简。

这种非对称的构造打破了界面的呆板感，创造出一种动态的**“倾斜趋势”。它极度适合用于 左右分栏布局（例如通过翻转实现对向呼应），或者用于承载那些需要强调流动性与变化感**的数据模块，让界面布局更加灵动。

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

基础用法 ​

默认形态 ​

默认情况下，DV8 会渲染一个对角线装饰的边框。左上和右下带有切角和虚线细节。

vue
<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelVeil>
      <div class="tactical-box">
        <h3>SECTOR A</h3>
      </div>
    </ScifiPanelVeil>
  </div>
</template>

视觉变体 ​

由于是对角设计，DV8 最重要的配置就是旋转与镜像，以适配不同的布局位置。

旋转与布局 (Rotate) ​

通过 rotate 属性，您可以改变重型切角的位置。

  • 无 (Default): 装饰在 左上 & 右下。
  • rotate="y": 左右镜像。装饰变更为 右上 & 左下。
  • rotate="x": 上下镜像。装饰变更为 左下 & 右上。
  • rotate="all" (或 "z"): 中心旋转 180 度。
vue
<template>
  <div class="grid">
    <ScifiPanelVeil>
      <div class="p-4">Mode A</div>
    </ScifiPanelVeil>

    <ScifiPanelVeil rotate="y">
      <div class="p-4">Mode B</div>
    </ScifiPanelVeil>
  </div>
</template>

结构控制 (Structure) ​

  • borderd: 控制是否显示连接切角的细实线。
  • decoration: 控制切角处的虚线装饰细节。
vue
<template>
  <ScifiPanelVeil 
    :borderd="false" 
    :backgroundOpacity="0.6"
  >
    <div class="content">CHAMFER BLOCK</div>
  </ScifiPanelVeil>
</template>

发光效果 (Glow) ​

开启 glow 后，切角处的虚线装饰会变得非常亮眼，像是指示灯在闪烁。

vue
<template>
  <ScifiPanelVeil 
    :glow="true" 
    className="dv8-neon"
  />
</template>

CSS变量 ​

DV8 的战术风格非常适合深色系的军武配色。

案例：暗夜行动风格 (Night Ops) ​

这种风格使用深蓝色和灰色，模拟夜视仪或战术平板的界面。

vue
<template>
  <ScifiPanelVeil 
    className="panel-night-ops"
    :backgroundBlur="true"
    :backgroundOpacity="0.5"
    rotate="y"
  >
    <div class="ops-info">
      MISSION TIME: 02:00:00
    </div>
  </ScifiPanelVeil>
</template>

<style lang="less">
.panel-night-ops {
  /* 基础边框：灰蓝 */
  --sf-panel-bd: #374151;
  
  /* 虚线装饰：亮白/青 */
  --sf-panel-hlite: #e5e7eb;
  
  /* 背景：深灰蓝 */
  --sf-panel-bg: rgba(17, 24, 39, 0.8);
  
  /* 发光：冷光 */
  --sf-panel-glow: #60a5fa;
}
</style>

API 参考 ​

Props ​

属性名说明类型默认值
rotate旋转模式。控制对角线的方向 (x, y, z/all)String—
decoration装饰开关。是否显示切角处的虚线细节Booleantrue
borderd边框开关。是否显示连接线条Booleantrue
borderWidth边框线条宽度 (px)Number—
backgroundOpacity背景不透明度 (0-1)Number—
backgroundBlur是否开启背景毛玻璃Booleanfalse
glow是否开启外发光Booleanfalse
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 致以诚挚的谢意与敬意！