144 lines
3.5 KiB
Vue
144 lines
3.5 KiB
Vue
<template>
|
||
<div class="right-panel">
|
||
<DualTabSwitcher v-model="selectedTabs" :tabs="tabs">
|
||
<div class="panel-content">
|
||
<div
|
||
v-if="selectedTabs.includes('rag')"
|
||
class="panel-section"
|
||
:class="{ 'has-divider': selectedTabs.length === 2 }"
|
||
>
|
||
<div class="tab-placeholder">
|
||
<h3>RAG Information</h3>
|
||
<p>RAG 信息页面（待实现）</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="selectedTabs.includes('worldentries')"
|
||
class="panel-section"
|
||
:class="{ 'has-divider': selectedTabs.length === 2 && selectedTabs.indexOf('worldentries') < selectedTabs.length - 1 }"
|
||
>
|
||
<div class="tab-placeholder">
|
||
<h3>World Info Entries</h3>
|
||
<p>世界书条目页面（待实现）</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="selectedTabs.includes('dynamictable')"
|
||
class="panel-section"
|
||
:class="{ 'has-divider': selectedTabs.length === 2 && selectedTabs.indexOf('dynamictable') < selectedTabs.length - 1 }"
|
||
>
|
||
<div class="tab-placeholder">
|
||
<h3>Dynamic Table</h3>
|
||
<p>动态表格页面（待实现）</p>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-if="selectedTabs.includes('dice')"
|
||
class="panel-section"
|
||
>
|
||
<div class="tab-placeholder">
|
||
<h3>Dice Roller</h3>
|
||
<p>骰子页面（待实现）</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DualTabSwitcher>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue';
|
||
import DualTabSwitcher from '@/components/common/DualTabSwitcher/DualTabSwitcher.vue';
|
||
|
||
// 默认选中两个页面
|
||
const selectedTabs = ref(['rag', 'worldentries']);
|
||
|
||
const tabs = [
|
||
{ id: 'rag', label: 'RAG' },
|
||
{ id: 'worldentries', label: 'World Entries' },
|
||
{ id: 'dynamictable', label: 'Dynamic Table' },
|
||
{ id: 'dice', label: 'Dice' }
|
||
];
|
||
</script>
|
||
|
||
<style scoped>
|
||
.right-panel {
|
||
flex: 0 0 20%;
|
||
min-width: 0;
|
||
max-width: none;
|
||
background-color: var(--color-bg-secondary);
|
||
border-left: 1px solid var(--color-border);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: var(--shadow-xs);
|
||
transition: box-shadow var(--transition-normal);
|
||
}
|
||
|
||
.panel-content {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.panel-section {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
/* 当有两个页面时，第一个页面添加底部分隔线 */
|
||
.panel-section.has-divider {
|
||
border-bottom: 1px solid var(--color-border-light);
|
||
}
|
||
|
||
/* 当只有一个页面选中时，占据全部空间 */
|
||
.panel-section:only-child {
|
||
flex: 1;
|
||
}
|
||
|
||
.tab-placeholder {
|
||
padding: var(--spacing-lg);
|
||
height: 100%;
|
||
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 */
|
||
.right-panel::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.right-panel::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.right-panel::-webkit-scrollbar-thumb {
|
||
background-color: var(--color-border);
|
||
border-radius: var(--radius-full);
|
||
}
|
||
|
||
.right-panel::-webkit-scrollbar-thumb:hover {
|
||
background-color: var(--color-text-muted);
|
||
}
|
||
</style>
|