TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelZone ​

⚡WASM 驱动
🧬移植自 [DataV]

科幻面板-佐恩 是 TechUI Scifi 面板系列中的通用区域界定容器。

它移植并重构自开源项目 @jiaminghi/data-view (原型 dv-border-box-7)。它采用了标准化的 “四角加固 (Corner Reinforcement)” 设计语言。在基础矩形边框的之上，通过四个角落显著的 L 型括弧 进行结构加强 。

它的线条更为硬朗锐利，它支持允许独立定义基础边框色与角标装饰色，能够创造出丰富的色彩层次。这使其成为适配性极高的万能默认容器，适合用于任何需要明确边界的模块。

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

基础用法 ​

默认形态 ​

默认情况下，DV5 会渲染一个带有细边框的矩形，四个角落覆盖有加粗的 L 型括弧。

vue
<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelZone>
      <div class="box-content">
        <span>Module Loaded</span>
      </div>
    </ScifiPanelZone>
  </div>
</template>

视觉变体 ​

DV5 的配置允许您在“强装饰”和“纯边框”之间切换。

括弧装饰 (Decoration) ​

DV5 的核心视觉特征是四角的括弧。

  • True (默认): 显示四角的 L 型括弧，强调边界感。
  • False: 隐藏四角括弧，仅保留基础矩形边框。
vue
<template>
  <div class="grid">
    <ScifiPanelZone />

    <ScifiPanelZone :decoration="false">
      <div class="p-4">Plain Border</div>
    </ScifiPanelZone>
  </div>
</template>

线条粗细 (Border Width) ​

borderWidth 同时影响基础边框和角部括弧的粗细。

  • 增加此值可以让面板看起来更坚固，类似重型装甲。
vue
<template>
  <ScifiPanelZone 
    :borderWidth="3" 
    :backgroundOpacity="0.8"
  >
    <div class="p-4">Heavy Duty</div>
  </ScifiPanelZone>
</template>

发光效果 (Glow) ​

开启 glow 后，边框和括弧都会产生柔和的光晕。由于 DV5 线条连贯，发光效果非常均匀，适合做全息窗口。

vue
<template>
  <ScifiPanelZone 
    :glow="true" 
    className="dv5-neon"
  />
</template>

CSS变量 ​

DV5 的双色结构（基础线 + 角部装饰）非常适合做双色主题。

案例：赤红风暴风格 (Crimson Storm) ​

这种风格使用暗红色作为基础，亮红色作为角部高亮，营造警示或战斗氛围。

vue
<template>
  <ScifiPanelZone 
    className="panel-crimson"
    :backgroundBlur="true"
    :backgroundOpacity="0.6"
  >
    <div class="alert-info">
      WARNING: BREACH DETECTED
    </div>
  </ScifiPanelZone>
</template>

<style lang="less">
.panel-crimson {
  /* 基础边框：暗红 */
  --sf-panel-bd: #7f1d1d;
  
  /* 角部括弧：鲜红 */
  --sf-panel-hlite: #ef4444;
  
  /* 背景：深红黑 */
  --sf-panel-bg: rgba(69, 10, 10, 0.7);
  
  /* 发光：橙红 */
  --sf-panel-glow: #f87171;
}
</style>

API 参考 ​

Props ​

属性名说明类型默认值
decoration装饰开关。是否显示四角的 L 型括弧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 致以诚挚的谢意与敬意！