81 lines
3.0 KiB
Vue
81 lines
3.0 KiB
Vue
<script setup>
|
||
// session/SessionRail.vue —— 左栏折叠后的 64px 图标轨（FR-SHELL-004 的 B2 侧）
|
||
// 会话/图谱/设置三个 rail-item；会话项当前，带左侧渐变竖条。
|
||
import { T } from '../../i18n/labels.js';
|
||
|
||
defineProps({
|
||
active: { type: Boolean, default: true },
|
||
});
|
||
|
||
const emit = defineEmits(['open', 'goto-kg', 'goto-settings']);
|
||
</script>
|
||
|
||
<template>
|
||
<div class="collapsed-rail">
|
||
<button class="rail-item" :class="{ active }" :title="T.railSession" type="button" @click="emit('open')">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
|
||
</svg>
|
||
</button>
|
||
<button class="rail-item" :title="T.railKg" type="button" @click="emit('goto-kg')">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
|
||
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
|
||
</svg>
|
||
</button>
|
||
<button class="rail-item" :title="T.railSettings" type="button" @click="emit('goto-settings')">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||
<circle cx="12" cy="12" r="3" />
|
||
<path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.7 1.7 0 0 0-1.87-.34 1.7 1.7 0 0 0-1 1.55V21a2 2 0 1 1-4 0v-.09a1.7 1.7 0 0 0-1-1.55 1.7 1.7 0 0 0-1.87.34l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.7 1.7 0 0 0 .34-1.87 1.7 1.7 0 0 0-1.55-1H3a2 2 0 1 1 0-4h.09a1.7 1.7 0 0 0 1.55-1 1.7 1.7 0 0 0-.34-1.87l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.7 1.7 0 0 0 1.87.34h0a1.7 1.7 0 0 0 1-1.55V3a2 2 0 1 1 4 0v.09a1.7 1.7 0 0 0 1 1.55h0a1.7 1.7 0 0 0 1.87-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.7 1.7 0 0 0-.34 1.87v0a1.7 1.7 0 0 0 1.55 1H21a2 2 0 1 1 0 4h-.09a1.7 1.7 0 0 0-1.55 1z" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 兜底样式（类名按 UI_SPEC §3 / §7） */
|
||
.collapsed-rail {
|
||
display: flex;
|
||
flex-direction: row; /* 展开态：三个图标横向一排 */
|
||
align-items: center;
|
||
gap: 14px;
|
||
width: 100%;
|
||
padding: 0 14px 14px;
|
||
margin-top: auto; /* 居底：与折叠态同一元素，切换时 Y 高度不变 */
|
||
}
|
||
.rail-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 34px;
|
||
height: 34px;
|
||
border-radius: var(--pa-r-md);
|
||
color: var(--pa-ink-muted);
|
||
position: relative;
|
||
transition: background 0.2s var(--pa-ease), color 0.2s var(--pa-ease);
|
||
cursor: pointer;
|
||
}
|
||
.rail-item:hover {
|
||
background: var(--pa-surface-2);
|
||
color: var(--pa-ink);
|
||
}
|
||
.rail-item svg {
|
||
width: 17px;
|
||
height: 17px;
|
||
}
|
||
.rail-item.active {
|
||
color: var(--pa-ink);
|
||
background: var(--pa-surface-2);
|
||
}
|
||
.rail-item.active::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -8px;
|
||
top: 8px;
|
||
bottom: 8px;
|
||
width: 2px;
|
||
background: var(--pa-gradient);
|
||
border-radius: 2px;
|
||
}
|
||
</style>
|