TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelClip ​

⚡WASM 驱动
🧬移植自 [DataV]

科幻面板-克利普 是 TechUI Scifi 面板系列中的强力护盾型容器。

它移植并重构自开源项目 @jiaminghi/data-view (原型 dv-border-box-10)。它是对 DV5 (佐恩) 的重装增强版。虽然在结构上延续了经典的“矩形+四角”布局，但 DV6 在四个角落采用了加宽的线条与高饱和度的色彩填充 ，显著提升了组件的视觉权重。

这种设计赋予了容器一种坚不可摧的 “能量护盾 (Energy Shield)” 质感，仿佛将内部内容与外部环境进行了强力物理隔绝。它非常适合用于承载 核心业务数据、关键监控画面 或 主控制台，在保证边界清晰的同时，传递出安全与稳固的心理暗示。

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

基础用法 ​

默认形态 ​

默认情况下，DV6 会渲染一个高对比度的边框：基础线条较细，而四个角落的 L 型括弧则显著加粗且高亮。

vue
<template>
  <div style="width: 450px; height: 300px;">
    <ScifiPanelClip>
      <div class="shield-content">
        <h3>CORE SYSTEM</h3>
        <p>Protection Level: MAX</p>
      </div>
    </ScifiPanelClip>
  </div>
</template>

视觉变体 ​

DV6 的设计重点在于“强壮”，因此其变体配置主要用于调节视觉冲击力。

结构拆解 (Structure) ​

您可以独立控制基础边框线 (borderd) 和 角部强力装饰 (decoration)。

  • borderd: false: 隐藏连接线，仅保留四角重型括弧，形成开放式布局。
  • decoration: false: 隐藏四角括弧，仅保留基础矩形线，瞬间变身为极简边框。
vue
<template>
  <div class="grid">
    <ScifiPanelClip :borderd="false">
      <div class="p-4">Open Shield</div>
    </ScifiPanelClip>

    <ScifiPanelClip :decoration="false">
      <div class="p-4">Closed Line</div>
    </ScifiPanelClip>
  </div>
</template>

工业加固 (Heavy Industrial) ​

结合 borderWidth 和背景虚化，可以打造出非常厚实的工业面板风格。

vue
<template>
  <ScifiPanelClip 
    :borderWidth="3"
    :backgroundBlur="true"
    :backgroundOpacity="0.6"
  >
    <div class="content">ARMORED GLASS</div>
  </ScifiPanelClip>
</template>

能量过载 (Glow) ​

开启 glow 后，加粗的四角括弧会产生强烈的光晕，仿佛护盾充能完毕。

vue
<template>
  <ScifiPanelClip 
    :glow="true" 
    className="dv6-overload"
  />
</template>

CSS变量 ​

DV6 的色彩逻辑非常适合高对比配色。

案例：黄金罗盘风格 (Golden Compass) ​

这种风格使用金黄色作为高亮装饰，深褐色作为背景，营造出一种皇家或高级指挥官的视觉体验。

vue
<template>
  <ScifiPanelClip 
    className="panel-gold-shield"
    :backgroundOpacity="0.8"
    :glow="true"
  >
    <div class="command-center">
      COMMANDER AUTHORIZED
    </div>
  </ScifiPanelClip>
</template>

<style lang="less">
.panel-gold-shield {
  /* 基础边框：暗金/古铜 */
  --sf-panel-bd: #92400e;
  
  /* 强力括弧：亮金 */
  --sf-panel-hlite: #f59e0b;
  
  /* 背景：深褐 */
  --sf-panel-bg: rgba(69, 26, 3, 0.85);
  
  /* 发光：金光 */
  --sf-panel-glow: #fbbf24;
}
</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 致以诚挚的谢意与敬意！