TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelQuad ​

⚡WASM 驱动
🧬移植自 [DataV]

科幻面板-库德 是 TechUI Scifi 面板系列中的通用极简型容器。

它移植并重构自开源项目 @jiaminghi/data-view (原型 dv-border-box-2)。它采用了低噪点的 “四点锚定 (Quad-Anchor)” 设计语言。视觉结构极为纯粹：由一圈闭合的精细实线勾勒边界，并在四个角落配置了微型的几何锚点 。

这种“少即是多”的克制设计赋予了它极强的通用性。它几乎可以无缝融入任何类型的 UI 布局，特别是那些不需要喧宾夺主的次级内容区域或高密度数据卡片，在提供必要边界的同时，保持画面的整洁与呼吸感。

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

基础用法 ​

默认形态 ​

默认情况下，DV4 会渲染一个带有细边框的矩形，四个角落带有微小的装饰点。

vue
<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelQuad>
      <div class="info-container">
        <p>系统运行正常</p>
        <p>CPU 温度: 45°C</p>
      </div>
    </ScifiPanelQuad>
  </div>
</template>

视觉变体 ​

DV4 的配置项允许您控制“线”与“点”的显示逻辑，从而在极简的基础上通过细节传达不同的状态。

结构控制 (Structure) ​

DV4 的视觉元素分为两部分：基础边框线 (borderd) 和 角落装饰 (decoration)。

  • borderd: false: 隐藏线条，仅保留四角锚点（如果装饰开启）或背景。
  • decoration: false: 隐藏四角锚点，仅保留矩形线条。
vue
<template>
  <div class="grid">
    <ScifiPanelQuad :decoration="false">
      <div class="p-4">Frame Only</div>
    </ScifiPanelQuad>

    <ScifiPanelQuad :borderd="false">
      <div class="p-4">Dots Only</div>
    </ScifiPanelQuad>
  </div>
</template>

锚点定制 (Dots Customization) ​

您可以自由调整四角锚点的大小和位置，使其更具侵略性或更加隐蔽。

  • dotSize: 锚点的直径/大小 (px)。
  • dotOffset: 锚点距离边框顶点的向内偏移量 (px)。
vue
<template>
  <ScifiPanelQuad 
    :dotSize="5"
    :dotOffset="5"
    :borderWidth="2"
  >
    <div class="content">Strong Anchors</div>
  </ScifiPanelQuad>
</template>

发光效果 (Glow) ​

虽然设计极简，但开启 glow 后，纤细的线条和锚点会发出锐利的光芒，非常适合高科技风格的 HUD 界面。

vue
<template>
  <ScifiPanelQuad 
    :glow="true" 
    className="dv4-neon"
  />
</template>

CSS变量 ​

DV4 的配色逻辑非常清晰：边框色 (--sf-panel-bd) 控制线条，高亮色 (--sf-panel-hlite) 控制四角的锚点。

案例：翡翠潜行风格 (Emerald Stealth) ​

这种风格使用暗绿色调，打造一种低调、隐蔽的监控界面质感。

vue
<template>
  <ScifiPanelQuad 
    className="panel-emerald"
    :dotSize="4"
    :backgroundOpacity="0.8"
  >
    <div class="stealth-info">
      SIGNAL: STABLE
    </div>
  </ScifiPanelQuad>
</template>

<style lang="less">
.panel-emerald {
  /* 边框线：暗绿 */
  --sf-panel-bd: #065f46;
  
  /* 锚点：荧光绿 */
  --sf-panel-hlite: #34d399;
  
  /* 背景：极深绿黑 */
  --sf-panel-bg: rgba(2, 44, 34, 0.9);
  
  /* 发光色 */
  --sf-panel-glow: #10b981;
}
</style>

API 参考 ​

Props ​

属性名说明类型默认值
decoration装饰开关。是否显示四角的锚点装饰Booleantrue
borderd边框开关。是否显示基础矩形线条Booleantrue
dotSize锚点大小 (px)。控制四角圆点/方块的尺寸Number2
dotOffset锚点偏移 (px)。控制锚点距离角落的向内缩进Number0
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 致以诚挚的谢意与敬意！