实现标签页的增删

app/public/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4870215 */
-  src: url('iconfont.woff2?t=1742992580860') format('woff2'),
-       url('iconfont.woff?t=1742992580860') format('woff'),
-       url('iconfont.ttf?t=1742992580860') format('truetype');
+  src: url('iconfont.woff2?t=1743002215431') format('woff2'),
+       url('iconfont.woff?t=1743002215431') format('woff'),
+       url('iconfont.ttf?t=1743002215431') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-close:before {
+  content: "\e615";
+}
+
 .icon-blank:before {
   content: "\e602";
 }

app/src/components/main-panel/chat/index.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="interaction-module">
+        <h2>交互测试模块</h2>
+        <!-- 交互测试模块内容将在这里实现 -->
+    </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'chat' });
+</script>
+
+<style scoped>
+.interaction-module {
+    padding: 20px;
+    height: 100%;
+}
+</style>

app/src/components/main-panel/index.vue

@@ -5,9 +5,15 @@
 				class="tab"
 				v-for="(tab, index) of tabs.content"
 				:key="index"
+				:class="{ 'active-tab': tabs.activeIndex === index }"
+				@click="setActiveTab(index)"
 			>
 				<span :class="`iconfont ${tab.icon}`"></span>
 				<span>{{ tab.name }}</span>
+				<span 
+					class="iconfont icon-close"
+					@click.stop="closeTab(index)"
+				></span>
 			</span>
 			<span
 				class="add-button iconfont icon-add"
@@ -23,13 +29,12 @@
 
 <script setup lang="ts">
 import { defineComponent } from 'vue';
-import { addNewTab, tabs } from './panel';
+import { addNewTab, tabs, setActiveTab, closeTab } from './panel';
 
 defineComponent({ name: 'main-panel' });
 </script>
 
 <style>
-
 .main-panel-container {
 	display: flex;
 	justify-content: center;
@@ -53,7 +58,8 @@ defineComponent({ name: 'main-panel' });
 	background-color: var(--background);
 	display: flex;
 	align-items: center;
-
+    user-select: none;
+	padding: 0 10px;
 }
 
 .tabs-container .tab {
@@ -61,16 +67,28 @@ defineComponent({ name: 'main-panel' });
 	border-radius: .5em;
 	background-color: var(--sidebar);
 	padding: 10px;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	transition: var(--animation-3s);
+	position: relative;
+}
+
+.tabs-container .tab:hover {
+	background-color: var(--sidebar-hover);
+}
+
+.tabs-container .tab.active-tab {
+	background-color: var(--main-color);
+	color: white;
 }
 
 .tabs-container .tab .iconfont {
 	margin-right: 10px;
 }
 
-.tabs-container .add-button {
-	height: 20px;
-	width: 20px;
-	border-radius: .5em;
+.tabs-container .icon-close {
+    margin-left: 10px;
 }
 
 .tabs-container .add-button {
@@ -92,4 +110,14 @@ defineComponent({ name: 'main-panel' });
 	transition: var(--animation-3s);
 }
 
+.close-icon {
+	margin-left: 8px;
+	font-size: 14px;
+	padding: 2px;
+	border-radius: 50%;
+}
+
+.close-icon:hover {
+	background-color: rgba(255, 255, 255, 0.2);
+}
 </style>

app/src/components/main-panel/panel.ts

@@ -1,5 +1,11 @@
 import { reactive } from 'vue';
 
+interface Tab {
+	name: string;
+	icon: string;
+	type: string;
+}
+
 export const tabs = reactive({
 	content: [
 		{
@@ -7,9 +13,35 @@ export const tabs = reactive({
 			icon: 'icon-blank',
 			type: 'blank'
 		}
-	],
+	] as Tab[],
+	activeIndex: 0
 });
 
+let tabCounter = 1;
+
 export function addNewTab() {
-	console.log();
+	const newTab = {
+		name: `新标签页 ${tabCounter++}`,
+		icon: 'icon-blank',
+		type: 'blank'
+	};
+	tabs.content.push(newTab);
+	tabs.activeIndex = tabs.content.length - 1;
+}
+
+export function setActiveTab(index: number) {
+	if (index >= 0 && index < tabs.content.length) {
+		tabs.activeIndex = index;
+	}
+}
+
+export function closeTab(index: number) {
+	if (tabs.content.length <= 1) return; // 至少保留一个标签页
+	
+	tabs.content.splice(index, 1);
+	
+	// 调整活动标签索引
+	if (tabs.activeIndex >= index) {
+		tabs.activeIndex = Math.max(0, tabs.activeIndex - 1);
+	}
 }

app/src/components/main-panel/prompt/index.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="lexicon-module">
+        <h2>题词模块</h2>
+        <!-- 题词模块内容将在这里实现 -->
+    </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'prompt' });
+</script>
+
+<style scoped>
+.lexicon-module {
+    padding: 20px;
+    height: 100%;
+}
+</style>

app/src/components/main-panel/resource/index.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="resource-module">
+        <h2>资源模块</h2>
+        <!-- 资源模块内容将在这里实现 -->
+    </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'resource' });
+</script>
+
+<style scoped>
+.resource-module {
+    padding: 20px;
+    height: 100%;
+}
+</style>

app/src/components/main-panel/tool/index.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="tools-module">
+        <h2>工具模块</h2>
+        <!-- 工具模块内容将在这里实现 -->
+    </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'tool' });
+</script>
+
+<style scoped>
+.tools-module {
+    padding: 20px;
+    height: 100%;
+}
+</style>