TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelRanger ​

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

科幻面板-游骑兵 是 TechUI Scifi 面板系列中的垂直约束型容器。

它移植并重构自开源项目 @jiaminghi/data-view (原型 dv-border-box-6)。它采用了独特的 “双侧夹持 (Lateral Clamping)” 设计语言。视觉重心位于面板的左右两侧，由厚重的竖向括弧界定边界，同时在四个角落配置了精密计算的微型锚点 。

这种设计在视觉上构建了一种强烈的**“战术夹持感”，仿佛将内容稳固地锁定在垂直通道中。它极度适合用于约束垂直排列的信息流**（如系统日志、功能菜单、时间轴），或者作为版面两侧的边缘界定容器，有效增强页面的纵向秩序感。

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

基础用法 ​

默认形态 ​

默认情况下，DV3 会渲染一个带有细边框的矩形，左右两侧附加加粗的竖条装饰，四角带有小圆点。

vue
<template>
  <div style="width: 400px; height: 300px;">
    <ScifiPanelRanger>
      <div class="list-container">
        <ul>
          <li>Module A [OK]</li>
          <li>Module B [OK]</li>
          <li>Module C [OK]</li>
        </ul>
      </div>
    </ScifiPanelRanger>
  </div>
</template>

视觉变体 ​

DV3 的配置项主要集中在对“括弧”和“锚点”的微调上。

装饰与边框 (Decoration & Border) ​

DV3 的结构分为三层：背景、细边框、粗装饰。

  • decoration: 控制左右两侧的粗竖条是否显示。
  • borderd: 控制连接整体的细边框是否显示。
vue
<template>
  <div class="grid">
    <ScifiPanelRanger :borderd="false">
      <div class="p-4">Side Brackets Only</div>
    </ScifiPanelRanger>

    <ScifiPanelRanger :decoration="false">
      <div class="p-4">Dots Only</div>
    </ScifiPanelRanger>
  </div>
</template>

锚点定制 (Dots) ​

四个角落的锚点细节可以通过参数调整，这在原始 DataV 组件基础上进行了增强。

  • dotSize: 锚点的像素大小。
  • dotOffset: 锚点距离顶点的偏移距离。
vue
<template>
  <ScifiPanelRanger 
    :decoration="false"
    :dotSize="5"
    :dotOffset="8"
    :borderWidth="2"
  >
    <div class="content">Custom Dots</div>
  </ScifiPanelRanger>
</template>

发光效果 (Glow) ​

开启 glow 后，左右两侧的竖条和四角锚点会产生明显的光晕。

vue
<template>
  <ScifiPanelRanger 
    :glow="true" 
    className="dv3-neon"
  />
</template>

CSS变量 ​

DV3 的配色主要由两条颜色定义：边框色（细线）和高亮色（粗竖条+锚点）。

案例：泰坦灰风格 (Titan Grey) ​

这种风格使用低饱和度的灰色和白色，打造类似机械外壳的工业质感。

vue
<template>
  <ScifiPanelRanger 
    className="panel-titan"
    :borderd="false"
    :backgroundOpacity="0.8"
  >
    <div class="mech-info">
      ARMOR STATUS: 100%
    </div>
  </ScifiPanelRanger>
</template>

<style lang="less">
.panel-titan {
  /* 基础边框色 (如果有) */
  --sf-panel-bd: #4b5563;
  
  /* 竖条与锚点：亮白 */
  --sf-panel-hlite: #f3f4f6;
  
  /* 背景色：深灰机械色 */
  --sf-panel-bg: rgba(31, 41, 55, 0.9);
  
  /* 发光色：冷白 */
  --sf-panel-glow: #e5e7eb;
}
</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 致以诚挚的谢意与敬意！