CardWindowHeader 窗口标题栏
模拟复古操作系统的窗口标题栏：左侧三色状态指示灯、居中等宽大写标题、右侧 ASCII 风格窗口控制符。支持多模自适应架构：既可在展示面板中作为纯静态装饰层，也可开箱即用地作为具备键盘聚焦与无障碍支持的实体控制按钮组。
预览
交互控制模式（工控实体按钮）
> LAST_EVENT: 等待操作...
> 点击右侧 [ _ ] [ □ ] [ X ] 或左侧红黄绿指示灯可直接触发动作并支持 Tab 聚焦。
默认静态装饰模式
> CPU ██████████░░░░ 68%
> MEM ███████░░░░░░░ 47%
> STATUS: ALL SYSTEMS NOMINAL (静态展示，无 a11y 负担)
隐藏控制符（纯标题栏）
自定义操作区插槽
安装
pnpm dlx brutx-vue@latest add card-window-header用法
基础用法（静态装饰）
<script setup>
import { CardWindowHeader } from 'brutx-ui-vue'
</script>
<template>
<div class="border-3 border-brutal shadow-brutal">
<CardWindowHeader title="System Monitor v2.0" />
<div class="p-4">窗口内容区…</div>
</div>
</template>交互控制模式
通过声明 closable、minimizable、maximizable 开启对应动作按钮，支持键盘 Tab 导航、Enter / Space 触发与 @close / @minimize / @maximize 事件监听。
<script setup>
import { ref } from 'vue'
import { CardWindowHeader } from 'brutx-ui-vue'
const isCollapsed = ref(false)
function onClose() {
console.log('窗口关闭')
}
function onMinimize() {
isCollapsed.value = !isCollapsed.value
}
</script>
<template>
<div class="border-3 border-brutal shadow-brutal">
<CardWindowHeader
title="Terminal_Shell"
closable
minimizable
maximizable
interactive-lamps
@close="onClose"
@minimize="onMinimize"
/>
<div v-show="!isCollapsed" class="p-4">可折叠的控制台内容…</div>
</div>
</template>自定义操作区插槽
actions 插槽优先级最高，可放置任意自定义操作按钮。
<template>
<CardWindowHeader title="Config Editor">
<template #actions>
<Button size="sm" variant="accent">SAVE</Button>
</template>
</CardWindowHeader>
</template>API 参考
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
title必填 | string | — | 居中显示的窗口标题，采用等宽字体和大写样式，超长内容截断。 |
详情声明类型string 默认值详情
来源packages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
showControls | boolean | undefined | true | 在没有 actions 插槽且三个交互按钮均未开启时，显示右侧静态 ASCII 控制符。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
closable | boolean | undefined | false | 启用右侧关闭按钮；actions 插槽存在时该按钮由插槽替代。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
minimizable | boolean | undefined | false | 启用右侧最小化按钮；actions 插槽存在时该按钮由插槽替代。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
maximizable | boolean | undefined | false | 启用右侧最大化按钮；actions 插槽存在时该按钮由插槽替代。 |
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
interactiveLamps | boolean | undefined | false | 让左侧指示灯可触发对应操作：红色关闭、黄色最小化、绿色最大化。
|
详情声明类型boolean | undefined 字面量
默认值详情
来源packages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
closeAriaLabel | string | undefined | undefined运行时回退: | 右侧关闭按钮的无障碍名称。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
minimizeAriaLabel | string | undefined | undefined运行时回退: | 右侧最小化按钮的无障碍名称。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
maximizeAriaLabel | string | undefined | undefined运行时回退: | 右侧最大化按钮的无障碍名称。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
class | string | undefined | undefined | 合并到窗口标题栏根容器的自定义 CSS 类。 |
详情声明类型string | undefined 默认值详情
来源packages/ui/src/components/card-window-header/CardWindowHeader.vue | |||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
@close | [event: MouseEvent | KeyboardEvent] | 激活关闭按钮或可交互的红色指示灯时发出；由使用方执行实际关闭。 |
详情声明类型[event: MouseEvent | KeyboardEvent] 来源packages/ui/src/components/card-window-header/CardWindowHeader.vue | ||
@minimize | [event: MouseEvent | KeyboardEvent] | 激活最小化按钮或可交互的黄色指示灯时发出；由使用方执行实际折叠或最小化。 |
详情声明类型[event: MouseEvent | KeyboardEvent] 来源packages/ui/src/components/card-window-header/CardWindowHeader.vue | ||
@maximize | [event: MouseEvent | KeyboardEvent] | 激活最大化按钮或可交互的绿色指示灯时发出；由使用方执行实际展开或最大化。 |
详情声明类型[event: MouseEvent | KeyboardEvent] 来源packages/ui/src/components/card-window-header/CardWindowHeader.vue | ||
| 名称 | 签名或类型 | 说明 |
|---|---|---|
#actions | {} | 替换整个右侧操作区，优先于内置交互按钮和静态 ASCII 控制符。 |
详情声明类型{}来源packages/ui/src/components/card-window-header/CardWindowHeader.vue | ||
可访问性
- 模式自适应：未声明交互 props 时，控制符与指示灯自动打上
aria-hidden="true"，对屏幕阅读器零噪音；开启交互 props 时，自动升级为语义化<button>并绑定精准的aria-label。 - 键盘导航：交互按钮内置
FOCUS_RING_CLASSES粗野主义高对比焦点环，支持 Tab 键聚焦与 Enter / Space 键激活。