100 lines
2.4 KiB
Vue
100 lines
2.4 KiB
Vue
<template>
|
||
<div class="left-panel">
|
||
<TabSwitcher v-model="activeTab" :tabs="tabs">
|
||
<!-- Placeholder components for each tab -->
|
||
<div v-if="activeTab === 'world'" class="tab-placeholder">
|
||
<h3>World Info</h3>
|
||
<p>世界书管理页面（待实现）</p>
|
||
</div>
|
||
<div v-if="activeTab === 'api'" class="tab-placeholder">
|
||
<h3>API Configuration</h3>
|
||
<p>API 配置页面（待实现）</p>
|
||
</div>
|
||
<div v-if="activeTab === 'presets'" class="tab-placeholder">
|
||
<h3>Presets</h3>
|
||
<p>预设管理页面（待实现）</p>
|
||
</div>
|
||
<div v-if="activeTab === 'gallery'" class="tab-placeholder">
|
||
<h3>Gallery</h3>
|
||
<p>画廊页面（待实现）</p>
|
||
</div>
|
||
<div v-if="activeTab === 'characters'" class="tab-placeholder">
|
||
<h3>AI Character Cards</h3>
|
||
<p>AI 角色卡管理页面（待实现）</p>
|
||
</div>
|
||
</TabSwitcher>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue';
|
||
import TabSwitcher from '@/components/common/TabSwitcher/TabSwitcher.vue';
|
||
|
||
const activeTab = ref('world');
|
||
|
||
const tabs = [
|
||
{ id: 'world', label: 'World' },
|
||
{ id: 'api', label: 'API' },
|
||
{ id: 'presets', label: 'Presets' },
|
||
{ id: 'gallery', label: 'Gallery' },
|
||
{ id: 'characters', label: 'Characters' }
|
||
];
|
||
</script>
|
||
|
||
<style scoped>
|
||
.left-panel {
|
||
flex: 0 0 20%;
|
||
min-width: 0;
|
||
max-width: none;
|
||
background-color: var(--color-bg-secondary);
|
||
border-right: 1px solid var(--color-border);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: var(--shadow-xs);
|
||
transition: box-shadow var(--transition-normal);
|
||
}
|
||
|
||
.tab-placeholder {
|
||
padding: var(--spacing-lg);
|
||
height: 100%;
|
||
overflow-y: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.tab-placeholder h3 {
|
||
font-size: 1rem;
|
||
font-weight: 600;
|
||
color: var(--color-text-primary);
|
||
margin-bottom: var(--spacing-sm);
|
||
}
|
||
|
||
.tab-placeholder p {
|
||
font-size: 0.85rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Custom scrollbar for webkit browsers */
|
||
.left-panel::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.left-panel::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.left-panel::-webkit-scrollbar-thumb {
|
||
background-color: var(--color-border);
|
||
border-radius: var(--radius-full);
|
||
}
|
||
|
||
.left-panel::-webkit-scrollbar-thumb:hover {
|
||
background-color: var(--color-text-muted);
|
||
}
|
||
</style>
|