feat(ui): add file explorer, TTS UI, views and routing

Add a file tree UI and corresponding composable for local file management.
Introduce TTS menu and player components for voice synthesis integration.
Add new EditorView and DocsView routes and update SettingsPanel view switching.
Enhance Mermaid plugin with improved styling and action buttons.

src/components/SettingsPanel.vue

@@ -1,11 +1,14 @@
 <script setup>
 import { ref, watch, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { useSettingsStore } from '../stores/settings'
 import { useTheme } from '../composables/useTheme'
 import packageJson from '../../package.json'
 
 const store = useSettingsStore()
 const { setTheme } = useTheme()
+const router = useRouter()
+const route = useRoute()
 
 const VERSION = packageJson.version || '0.0.0'
 
@@ -129,6 +132,11 @@ const handleImageUpload = (event) => {
 }
 
 const t = (key) => store.t[key]
+
+const switchView = (view) => {
+  router.push(view === 'editor' ? '/' : '/docs')
+  closePanel()
+}
 </script>
 
 <template>
@@ -197,6 +205,38 @@ const t = (key) => store.t[key]
           </div>
         </section>
 
+        <!-- View Switch -->
+        <section class="settings-section">
+          <h3>{{ t('view') || '视图' }}</h3>
+          <div class="view-switch">
+            <button 
+              class="view-btn" 
+              :class="{ active: route.path === '/' }" 
+              @click="switchView('editor')"
+            >
+              <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 20h9"></path>
+                <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path>
+              </svg>
+              <span>{{ t('editor') || '编辑器' }}</span>
+            </button>
+            <button 
+              class="view-btn" 
+              :class="{ active: route.path === '/docs' }" 
+              @click="switchView('docs')"
+            >
+              <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                <polyline points="14 2 14 8 20 8"></polyline>
+                <line x1="16" y1="13" x2="8" y2="13"></line>
+                <line x1="16" y1="17" x2="8" y2="17"></line>
+                <polyline points="10 9 9 9 8 9"></polyline>
+              </svg>
+              <span>{{ t('docs') || '文档' }}</span>
+            </button>
+          </div>
+        </section>
+
         <!-- Model Section -->
         <section class="settings-section">
           <h3>{{ t('modelIntelligence') }}</h3>
@@ -311,16 +351,15 @@ const t = (key) => store.t[key]
 
 .settings-panel {
   position: fixed;
-  top: 10vh;
-  bottom: auto;
+  top: 0;
+  bottom: 0;
   left: 0;
   width: 350px;
-  max-height: 80vh;
   background: var(--panel-bg);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-right: 1px solid var(--panel-border);
-  border-radius: 0 12px 12px 0;
+  border-radius: 0 8px 8px 0;
   box-shadow: var(--panel-shadow);
   z-index: 10000;
   transform: translateX(-100%);
@@ -351,8 +390,8 @@ const t = (key) => store.t[key]
 /* Mobile Fullscreen */
 @media (max-width: 640px) {
   .settings-panel {
-    top: 10vh;
-    max-height: 80vh;
+    top: 0;
+    bottom: 0;
     width: 100%;
     border-right: none;
     border-radius: 0;
@@ -568,5 +607,38 @@ const t = (key) => store.t[key]
   font-size: 0.8rem;
   opacity: 0.7;
 }
+
+.view-switch {
+  display: flex;
+  gap: 8px;
+}
+
+.view-btn {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--panel-border);
+  background: var(--ghost-code-bg);
+  color: var(--muted-text);
+  cursor: pointer;
+  font-size: 0.9rem;
+  transition: all 0.2s;
+}
+
+.view-btn:hover {
+  color: var(--app-text);
+  border-color: var(--focus-ring);
+}
+
+.view-btn.active {
+  background: var(--app-bg);
+  color: var(--app-text);
+  border-color: var(--focus-ring);
+  font-weight: 600;
+}
 </style>