前端修饰与渲染处理

2026-04-26 03:34:47 +08:00
parent 35eff3faf6
commit 6b5ddac178
114 changed files with 18465 additions and 132 deletions
--- a/client/src/layouts/LeftPanel/LeftPanel.vue
+++ b/client/src/layouts/LeftPanel/LeftPanel.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="left-panel">
+    <TabSwitcher v-model="activeTab" :tabs="tabs">
+      <!-- Placeholder components for each tab -->
+      <div v-if="activeTab === 'world'" class="tab-placeholder">
+        <h3>World Info</h3>
+        <p>世界书管理页面（待实现）</p>
+      </div>
+      <div v-if="activeTab === 'api'" class="tab-placeholder">
+        <h3>API Configuration</h3>
+        <p>API 配置页面（待实现）</p>
+      </div>
+      <div v-if="activeTab === 'presets'" class="tab-placeholder">
+        <h3>Presets</h3>
+        <p>预设管理页面（待实现）</p>
+      </div>
+      <div v-if="activeTab === 'gallery'" class="tab-placeholder">
+        <h3>Gallery</h3>
+        <p>画廊页面（待实现）</p>
+      </div>
+      <div v-if="activeTab === 'characters'" class="tab-placeholder">
+        <h3>AI Character Cards</h3>
+        <p>AI 角色卡管理页面（待实现）</p>
+      </div>
+    </TabSwitcher>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import TabSwitcher from '@/components/common/TabSwitcher/TabSwitcher.vue';
+
+const activeTab = ref('world');
+
+const tabs = [
+  { id: 'world', label: 'World' },
+  { id: 'api', label: 'API' },
+  { id: 'presets', label: 'Presets' },
+  { id: 'gallery', label: 'Gallery' },
+  { id: 'characters', label: 'Characters' }
+];
+</script>
+
+<style scoped>
+.left-panel {
+  flex: 0 0 20%;
+  min-width: 0;
+  max-width: none;
+  background-color: var(--color-bg-secondary);
+  border-right: 1px solid var(--color-border);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-xs);
+  transition: box-shadow var(--transition-normal);
+}
+
+.tab-placeholder {
+  padding: var(--spacing-lg);
+  height: 100%;
+  overflow-y: auto;
+  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 */
+.left-panel::-webkit-scrollbar {
+  width: 6px;
+}
+
+.left-panel::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.left-panel::-webkit-scrollbar-thumb {
+  background-color: var(--color-border);
+  border-radius: var(--radius-full);
+}
+
+.left-panel::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-text-muted);
+}
+</style>