规定数据类型

client/src/App.vue

@@ -0,0 +1,15 @@
+<template>
+  <router-view />
+</template>
+
+<script setup lang="ts">
+// Root component
+</script>
+
+<style>
+#app {
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+}
+</style>

client/src/components/CenterPanel/CenterPanel.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="center-panel">
+    <p>Center Panel - Chat Interface</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+// CenterPanel component placeholder
+</script>
+
+<style scoped>
+.center-panel {
+  flex: 1;
+  background-color: var(--color-bg-primary);
+  overflow-y: auto;
+}
+</style>

client/src/components/LeftPanel/LeftPanel.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="left-panel">
+    <p>Left Panel - Character List & Chat History</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+// LeftPanel component placeholder
+</script>
+
+<style scoped>
+.left-panel {
+  width: 300px;
+  background-color: var(--color-bg-secondary);
+  border-right: 1px solid var(--color-border);
+  overflow-y: auto;
+}
+</style>

client/src/components/RightPanel/RightPanel.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="right-panel">
+    <p>Right Panel - Character Detail & Workflow Editor</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+// RightPanel component placeholder
+</script>
+
+<style scoped>
+.right-panel {
+  width: 400px;
+  background-color: var(--color-bg-secondary);
+  border-left: 1px solid var(--color-border);
+  overflow-y: auto;
+}
+</style>

client/src/components/TopBar/TopBar.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="top-bar">
+    <h1>SillyTavern Repalice</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+// TopBar component placeholder
+</script>
+
+<style scoped>
+.top-bar {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  padding: 0 var(--spacing-md);
+  background-color: var(--color-bg-secondary);
+  border-bottom: 1px solid var(--color-border);
+}
+</style>

client/src/layouts/MainLayout/MainLayout.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="main-layout">
+    <TopBar />
+    <div class="main-content">
+      <LeftPanel />
+      <CenterPanel />
+      <RightPanel />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import TopBar from '@/components/TopBar/TopBar.vue';
+import LeftPanel from '@/components/LeftPanel/LeftPanel.vue';
+import CenterPanel from '@/components/CenterPanel/CenterPanel.vue';
+import RightPanel from '@/components/RightPanel/RightPanel.vue';
+</script>
+
+<style scoped>
+.main-layout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  background-color: var(--color-bg-primary);
+  color: var(--color-text-primary);
+}
+
+.main-content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+</style>

client/src/main.ts

@@ -0,0 +1,14 @@
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import App from './App.vue';
+import router from './router';
+import './styles/reset.css';
+import './styles/variables.css';
+
+const app = createApp(App);
+const pinia = createPinia();
+
+app.use(pinia);
+app.use(router);
+
+app.mount('#app');

client/src/router/index.ts

@@ -0,0 +1,35 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import MainLayout from '@/layouts/MainLayout/MainLayout.vue';
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      component: MainLayout,
+      children: [
+        {
+          path: '',
+          redirect: '/chat',
+        },
+        {
+          path: 'chat',
+          name: 'Chat',
+          component: () => import('@/components/CenterPanel/CenterPanel.vue'),
+        },
+        {
+          path: 'characters',
+          name: 'Characters',
+          component: () => import('@/components/LeftPanel/LeftPanel.vue'),
+        },
+        {
+          path: 'character/:id',
+          name: 'CharacterDetail',
+          component: () => import('@/components/RightPanel/RightPanel.vue'),
+        },
+      ],
+    },
+  ],
+});
+
+export default router;

client/src/stores/useAppStore.ts

@@ -0,0 +1,24 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useAppStore = defineStore('app', () => {
+  // State
+  const theme = ref<'light' | 'dark'>('dark');
+  const sidebarCollapsed = ref(false);
+  
+  // Actions
+  function toggleTheme() {
+    theme.value = theme.value === 'light' ? 'dark' : 'light';
+  }
+  
+  function toggleSidebar() {
+    sidebarCollapsed.value = !sidebarCollapsed.value;
+  }
+  
+  return {
+    theme,
+    sidebarCollapsed,
+    toggleTheme,
+    toggleSidebar,
+  };
+});

client/src/styles/reset.css

@@ -0,0 +1,49 @@
+/* CSS Reset */
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+button {
+  border: none;
+  background: none;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+}
+
+input,
+textarea,
+select {
+  font: inherit;
+  color: inherit;
+}
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}

client/src/styles/variables.css

@@ -0,0 +1,72 @@
+/* CSS Variables */
+:root {
+  /* Colors - Dark Theme (Default) */
+  --color-bg-primary: #1a1a1a;
+  --color-bg-secondary: #252525;
+  --color-bg-tertiary: #303030;
+  
+  --color-text-primary: #e0e0e0;
+  --color-text-secondary: #b0b0b0;
+  --color-text-muted: #808080;
+  
+  --color-border: #404040;
+  --color-border-light: #505050;
+  
+  --color-accent: #6c63ff;
+  --color-accent-hover: #7b73ff;
+  --color-accent-active: #5a52d5;
+  
+  --color-success: #4caf50;
+  --color-warning: #ff9800;
+  --color-error: #f44336;
+  
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  
+  /* Border Radius */
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-full: 9999px;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
+  
+  /* Transitions */
+  --transition-fast: 150ms ease;
+  --transition-normal: 250ms ease;
+  --transition-slow: 350ms ease;
+  
+  /* Z-index layers */
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+}
+
+/* Light Theme */
+[data-theme='light'] {
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #f5f5f5;
+  --color-bg-tertiary: #e8e8e8;
+  
+  --color-text-primary: #212121;
+  --color-text-secondary: #616161;
+  --color-text-muted: #9e9e9e;
+  
+  --color-border: #e0e0e0;
+  --color-border-light: #d0d0d0;
+  
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
+}