135 lines
3.4 KiB
Vue
135 lines
3.4 KiB
Vue
<template>
|
|
<a-config-provider :theme="themeStore.antdThemeConfig">
|
|
<div :class="$style.container">
|
|
<a-layout :class="$style.layout">
|
|
<a-layout-content :class="$style.content">
|
|
<div :class="$style.contentHeader">
|
|
<a-tabs v-model:activeKey="activeKey" :class="$style.tabs">
|
|
<a-tab-pane key="chat" tab="CHAT"></a-tab-pane>
|
|
<a-tab-pane key="examples" tab="用例"></a-tab-pane>
|
|
<a-tab-pane key="flow" tab="流程图"></a-tab-pane>
|
|
<a-tab-pane key="docCode" tab="文档"></a-tab-pane>
|
|
<a-tab-pane key="docs" tab="帮助"></a-tab-pane>
|
|
</a-tabs>
|
|
<div :class="$style.actions">
|
|
<a-button type="text" @click="openSettings">
|
|
<template #icon><setting-outlined /></template>
|
|
</a-button>
|
|
</div>
|
|
</div>
|
|
<component :is="currentComponent" />
|
|
</a-layout-content>
|
|
</a-layout>
|
|
|
|
<!-- 设置模态框 -->
|
|
<SettingsModal v-model:visible="showSettingsModal" />
|
|
</div>
|
|
</a-config-provider>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, onMounted } from 'vue';
|
|
import { SettingOutlined } from '@ant-design/icons-vue';
|
|
import ChatPanel from './components/ChatPanel.vue';
|
|
import ExamplesPanel from './components/ExamplesPanel.vue';
|
|
import FlowPanel from './components/FlowPanel.vue';
|
|
import DocsPanel from './components/DocsPanel.vue';
|
|
import SettingsModal from './components/SettingsModal.vue';
|
|
import { useThemeStore } from './store/themeStore';
|
|
import DocCodePanel from './components/DocCodePanel.vue';
|
|
|
|
// 当前选中的选项卡
|
|
const activeKey = ref('chat');
|
|
|
|
// 是否显示设置模态框
|
|
const showSettingsModal = ref(false);
|
|
|
|
// 组件映射表
|
|
const componentMap = {
|
|
chat: ChatPanel,
|
|
examples: ExamplesPanel,
|
|
flow: FlowPanel,
|
|
docCode: DocCodePanel,
|
|
docs: DocsPanel
|
|
};
|
|
|
|
// 当前显示的组件
|
|
const currentComponent = computed(() => {
|
|
const key = activeKey.value as keyof typeof componentMap;
|
|
const component = componentMap[key];
|
|
if (!component) {
|
|
console.warn(`未找到组件: ${key}，使用默认组件 ChatPanel`);
|
|
return ChatPanel; // 返回默认组件
|
|
}
|
|
return component;
|
|
});
|
|
|
|
// 打开设置模态框
|
|
const openSettings = () => {
|
|
showSettingsModal.value = true;
|
|
};
|
|
|
|
const themeStore = useThemeStore();
|
|
|
|
onMounted(() => {
|
|
// 请求主题颜色
|
|
themeStore.initialize();
|
|
|
|
// 监听来自VSCode的消息
|
|
window.addEventListener('message', event => {
|
|
const message = event.data;
|
|
if (message.type === 'themeColors') {
|
|
themeStore.setThemeColors(message.colors);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style module lang="scss">
|
|
.container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background-color: var(--vscode-editor-background);
|
|
}
|
|
|
|
.layout {
|
|
height: 100%;
|
|
}
|
|
|
|
.content {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.contentHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--vscode-panel-border);
|
|
background-color: var(--vscode-editor-background);
|
|
}
|
|
|
|
.tabs {
|
|
flex: 1;
|
|
:global(.ant-tabs-nav) {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
margin-right: 8px;
|
|
|
|
button {
|
|
color: var(--vscode-description-foreground);
|
|
|
|
&:hover {
|
|
color: var(--vscode-foreground);
|
|
background-color: var(--vscode-list-hover-background);
|
|
}
|
|
}
|
|
}
|
|
</style> |