FxIconColumn 双列图标栏
@fx/layouts 双列布局（two-column / mixed-two-column）第一列的垂直图标栏，只渲染一级菜单的图标（FxTooltip 显示名称）。纯 UI 组件：active 态 + select 事件（无 hover 跟随，extra 列只随点击/路由变化），背景跟随主题 token，状态机由 useExtraMenu 在 BasicLayout 接线。第一列顶部的小 Logo 由消费方经 FxLayout #icon slot 一并放入（BasicLayout 已内置）。
基础用法
vue
<script setup lang="ts">
/**
* FxIconColumn 基础示例：一级图标栏 + active 态 + select 事件
*/
import { ref } from "vue"
import { FxIconColumn } from "@fx/layouts"
import type { LayoutMenuNode } from "@fx/layouts"
const menus: LayoutMenuNode[] = [
{
id: 1,
name: "系统管理",
path: "/system",
icon: "ep:setting",
menu_type: "directory",
children: [],
},
{
id: 2,
name: "监控",
path: "/monitor",
icon: "ep:monitor",
menu_type: "menu",
children: [],
},
{
id: 3,
name: "关于",
path: "/about",
icon: null,
menu_type: "menu",
children: [],
},
]
const activeId = ref<string | null>("/system")
const log = ref<string[]>([])
function onSelect(menu: LayoutMenuNode) {
activeId.value = menu.path
log.value.unshift(`select: ${menu.name}`)
}
</script>
<template>
<div class="demo-icon-column">
<div class="demo-column-wrap">
<FxIconColumn :items="menus" :active-id="activeId" @select="onSelect" />
</div>
<ul class="demo-log">
<li v-for="(item, i) in log.slice(0, 5)" :key="i">{{ item }}</li>
<li v-if="!log.length">（点击图标查看事件）</li>
</ul>
</div>
</template>
<style scoped>
.demo-icon-column {
display: flex;
gap: 16px;
}
.demo-column-wrap {
width: 64px;
height: 200px;
border-radius: 8px;
background-color: var(--fx-color-sidebar, #f5f7fa);
border: 1px solid var(--fx-border-color, #eee);
}
.demo-log {
margin: 0;
padding: 0 0 0 16px;
font-size: 12px;
list-style: none;
color: #888;
}
</style>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
vue
<FxLogo :title="title" :show-text="false" @click="goHome" />
<FxIconColumn
:items="menus"
:active-id="extra.extraActiveMenu.value"
@select="extra.handleMixedMenuSelect"
/>1
2
3
4
5
6
2
3
4
5
6
Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| items | 一级菜单列表（仅渲染 icon + tooltip） | LayoutMenuNode[] | —（必填） |
| active-id | 激活项 path | string | null | — |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| select | 点击图标（接线 handleMixedMenuSelect） | (menu: LayoutMenuNode) |