refactor: 拆分和优化 ChatPage 组件

package.json

@@ -151,5 +151,6 @@
     "type": "git",
     "url": "https://github.com/Haleclipse/Claudix"
   },
-  "license": "AGPL-3.0"
+  "license": "AGPL-3.0",
+  "packageManager": "pnpm@9.12.1+sha1.7084e7df42ee1d221994c2c2599277a2a937f050"
 }

src/webview/src/App.vue

@@ -2,25 +2,10 @@
   <div class="app-wrapper">
     <main class="app-main">
       <div class="page-container">
-        <Motion
-          :animate="pageAnimation"
-          :transition="{ duration: 0.3, ease: 'easeOut' }"
-          class="motion-wrapper"
-        >
-          <SessionsPage
-            v-if="currentPage === 'sessions'"
-            key="sessions"
-            @switch-to-chat="handleSwitchToChat"
-          />
-          <ChatPage
-            v-else-if="currentPage === 'chat'"
-            key="chat"
-            @switch-to-sessions="switchToPage('sessions')"
-          />
-          <SettingsPage
-            v-else-if="currentPage === 'settings'"
-            key="settings"
-          />
+        <Motion :animate="pageAnimation" :transition="{ duration: 0.3, ease: 'easeOut' }" class="motion-wrapper">
+          <SessionsPage v-if="currentPage === 'sessions'" key="sessions" @switch-to-chat="handleSwitchToChat" />
+          <ChatPage v-else-if="currentPage === 'chat'" key="chat" @switch-to-sessions="switchToPage('sessions')" />
+          <SettingsPage v-else-if="currentPage === 'settings'" key="settings" />
           <!-- IconTestPage -->
           <!-- <IconTestPage
             v-else-if="currentPage === 'icontest'"
@@ -36,7 +21,7 @@
 import { ref, onMounted, provide } from 'vue';
 import { Motion } from 'motion-v';
 import SessionsPage from './pages/SessionsPage.vue';
-import ChatPage from './pages/ChatPage.vue';
+import ChatPage from './pages/ChatPage/index.vue';
 import SettingsPage from './pages/SettingsPage.vue';
 import './styles/claude-theme.css';
 import { useRuntime } from './composables/useRuntime';

src/webview/src/components/IconButton.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+const props = defineProps<{
+  icon: string;
+  title?: string;
+  size?: number;
+}>();
+
+defineEmits<{
+  (e: 'click'): void;
+}>();
+
+const buttonSize = props.size || 24;
+const iconSize = Math.floor(buttonSize * 0.5);
+</script>
+
+<template>
+  <button class="icon-btn" :title="title" :style="{ width: `${buttonSize}px`, height: `${buttonSize}px` }"
+    @click="$emit('click')">
+    <span :class="['codicon', `codicon-${icon}`]" :style="{ fontSize: `${iconSize}px` }"></span>
+  </button>
+</template>
+
+<style scoped>
+.icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--vscode-titleBar-activeForeground);
+  border-radius: 3px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  opacity: 0.7;
+}
+
+.icon-btn:hover {
+  background: var(--vscode-toolbar-hoverBackground);
+  opacity: 1;
+}
+</style>