refactor: 统一代码风格并更新依赖配置

- 统一使用单引号替代双引号 - 移除不必要的分号 - 更新prettier配置使用更宽松的格式 - 添加eslint配置文件和相关依赖 - 更新package.json中的脚本和依赖版本
2026-04-10 10:39:41 +08:00
parent 4d578b3f0b
commit c738e638cf
15 changed files with 1004 additions and 429 deletions
--- a/src/main.js
+++ b/src/main.js
@@ -1,10 +1,10 @@
-import { app, BrowserWindow } from 'electron';
-import path from 'node:path';
-import started from 'electron-squirrel-startup';
+import { app, BrowserWindow } from 'electron'
+import path from 'node:path'
+import started from 'electron-squirrel-startup'

 // Handle creating/removing shortcuts on Windows when installing/uninstalling.
 if (started) {
-  app.quit();
+  app.quit()
 }

 const createWindow = () => {
@@ -15,42 +15,42 @@ const createWindow = () => {
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
-  });
+  })

  // and load the index.html of the app.
  if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
-    mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
+    mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL)
  } else {
-    mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
+    mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`))
  }

  // Open the DevTools.
-  mainWindow.webContents.openDevTools();
-};
+  mainWindow.webContents.openDevTools()
+}

 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.whenReady().then(() => {
-  createWindow();
+  createWindow()

  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
-      createWindow();
+      createWindow()
    }
-  });
-});
+  })
+})

 // Quit when all windows are closed, except on macOS. There, it's common
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
 app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
-    app.quit();
+    app.quit()
  }
-});
+})

 // In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and import them here.
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -1,50 +1,53 @@
-import { app, BrowserWindow, shell, ipcMain } from 'electron';
-import path from 'node:path';
-import fs from 'node:fs';
-import net from 'node:net';
-import { spawn } from 'node:child_process';
-import started from 'electron-squirrel-startup';
+import { app, BrowserWindow, shell, ipcMain } from 'electron'
+import path from 'node:path'
+import fs from 'node:fs'
+import net from 'node:net'
+import { spawn } from 'node:child_process'
+import started from 'electron-squirrel-startup'

-if (started) app.quit();
+if (started) app.quit()

 // ========== OpenCode 服务管理 ==========
-const DEFAULT_PORT = 4096;
-let opencodeProcess = null;
-let opencodePort = null;
-let opencodeStarting = null;
+const DEFAULT_PORT = 4096
+let opencodeProcess = null
+let opencodePort = null
+let opencodeStarting = null

 function isPortAvailable(port) {
  return new Promise((resolve) => {
-    const server = net.createServer();
-    server.once('error', () => resolve(false));
-    server.once('listening', () => server.close(() => resolve(true)));
-    server.listen(port, '127.0.0.1');
-  });
+    const server = net.createServer()
+    server.once('error', () => resolve(false))
+    server.once('listening', () => server.close(() => resolve(true)))
+    server.listen(port, '127.0.0.1')
+  })
 }

 async function resolvePort() {
-  let port = DEFAULT_PORT;
+  let port = DEFAULT_PORT
  while (!(await isPortAvailable(port))) {
-    port++;
-    if (port > 65535) throw new Error('没有可用的端口');
+    port++
+    if (port > 65535) throw new Error('没有可用的端口')
  }
-  return port;
+  return port
 }

 function waitForReady(port, timeout = 15000) {
  return new Promise((resolve, reject) => {
-    const start = Date.now();
+    const start = Date.now()
    const check = () => {
-      const socket = net.createConnection({ port, host: '127.0.0.1' });
-      socket.once('connect', () => { socket.end(); resolve(); });
+      const socket = net.createConnection({ port, host: '127.0.0.1' })
+      socket.once('connect', () => {
+        socket.end()
+        resolve()
+      })
      socket.once('error', () => {
-        socket.destroy();
-        if (Date.now() - start >= timeout) return reject(new Error('OpenCode 服务启动超时'));
-        setTimeout(check, 300);
-      });
-    };
-    check();
-  });
+        socket.destroy()
+        if (Date.now() - start >= timeout) return reject(new Error('OpenCode 服务启动超时'))
+        setTimeout(check, 300)
+      })
+    }
+    check()
+  })
 }

 function buildInfo() {
@@ -52,112 +55,115 @@ function buildInfo() {
    running: !!opencodeProcess,
    port: opencodePort,
    url: opencodePort ? `http://127.0.0.1:${opencodePort}` : null,
-  };
+  }
 }

 function buildEnv(exeDir) {
-  const env = { ...process.env };
+  const env = { ...process.env }
  for (const key of Object.keys(env)) {
-    if (key.startsWith('npm_')) delete env[key];
+    if (key.startsWith('npm_')) delete env[key]
  }
-  env.INIT_CWD = exeDir;
-  env.PWD = exeDir;
-  return env;
+  env.INIT_CWD = exeDir
+  env.PWD = exeDir
+  return env
 }

 function getExePath() {
  // 开发模式：__dirname = .vite/build，往上两级到项目根
  // 打包模式：用 process.resourcesPath
  if (app.isPackaged) {
-    return path.join(process.resourcesPath, 'opencode.exe');
+    return path.join(process.resourcesPath, 'opencode.exe')
  }
-  return path.join(__dirname, '..', '..', 'resources', 'windows', 'x64', 'opencode.exe');
+  return path.join(__dirname, '..', '..', 'resources', 'windows', 'x64', 'opencode.exe')
 }

 async function startOpencode() {
-  if (opencodeProcess) return buildInfo();
-  if (opencodeStarting) return opencodeStarting;
+  if (opencodeProcess) return buildInfo()
+  if (opencodeStarting) return opencodeStarting

  opencodeStarting = (async () => {
-    const exePath = getExePath();
-    console.log('[opencode] exe path:', exePath);
-    const exeDir = path.dirname(exePath);
-    await fs.promises.access(exePath, fs.constants.F_OK);
+    const exePath = getExePath()
+    console.log('[opencode] exe path:', exePath)
+    const exeDir = path.dirname(exePath)
+    await fs.promises.access(exePath, fs.constants.F_OK)

-    opencodePort = await resolvePort();
+    opencodePort = await resolvePort()
    opencodeProcess = spawn(exePath, ['serve', '--port', String(opencodePort)], {
      cwd: exeDir,
      windowsHide: true,
      env: buildEnv(exeDir),
-    });
+    })

-    opencodeProcess.stdout?.on('data', (d) => console.log(`[opencode] ${d.toString().trim()}`));
-    opencodeProcess.stderr?.on('data', (d) => console.error(`[opencode error] ${d.toString().trim()}`));
-    opencodeProcess.once('error', (e) => console.error('[opencode spawn error]', e));
+    opencodeProcess.stdout?.on('data', (d) => console.log(`[opencode] ${d.toString().trim()}`))
+    opencodeProcess.stderr?.on('data', (d) => console.error(`[opencode error] ${d.toString().trim()}`))
+    opencodeProcess.once('error', (e) => console.error('[opencode spawn error]', e))
    opencodeProcess.once('close', (code) => {
-      console.log(`[opencode exited] code=${code}`);
-      opencodeProcess = null;
-      opencodePort = null;
-      opencodeStarting = null;
-    });
+      console.log(`[opencode exited] code=${code}`)
+      opencodeProcess = null
+      opencodePort = null
+      opencodeStarting = null
+    })

-    await waitForReady(opencodePort);
-    return buildInfo();
-  })();
+    await waitForReady(opencodePort)
+    return buildInfo()
+  })()

  try {
-    return await opencodeStarting;
+    return await opencodeStarting
  } catch (err) {
-    opencodeProcess?.kill();
-    opencodeProcess = null;
-    opencodePort = null;
-    opencodeStarting = null;
-    throw err;
+    opencodeProcess?.kill()
+    opencodeProcess = null
+    opencodePort = null
+    opencodeStarting = null
+    throw err
  }
 }

 function stopOpencode() {
-  opencodeProcess?.kill();
-  opencodeProcess = null;
-  opencodePort = null;
-  opencodeStarting = null;
+  opencodeProcess?.kill()
+  opencodeProcess = null
+  opencodePort = null
+  opencodeStarting = null
 }

 // ========== IPC Handlers ==========
 function registerIpcHandlers() {
-  ipcMain.handle('opencode:start', () => startOpencode());
-  ipcMain.handle('opencode:stop', () => { stopOpencode(); return buildInfo(); });
-  ipcMain.handle('opencode:info', () => buildInfo());
-  ipcMain.handle('opencode:port', () => opencodePort);
+  ipcMain.handle('opencode:start', () => startOpencode())
+  ipcMain.handle('opencode:stop', () => {
+    stopOpencode()
+    return buildInfo()
+  })
+  ipcMain.handle('opencode:info', () => buildInfo())
+  ipcMain.handle('opencode:port', () => opencodePort)

  ipcMain.handle('opencode:health', async () => {
-    if (!opencodePort) throw new Error('OpenCode 服务未启动');
-    const res = await fetch(`http://127.0.0.1:${opencodePort}/global/health`);
-    if (!res.ok) throw new Error(`健康检查失败: ${res.status}`);
-    return res.json();
-  });
+    if (!opencodePort) throw new Error('OpenCode 服务未启动')
+    const res = await fetch(`http://127.0.0.1:${opencodePort}/global/health`)
+    if (!res.ok) throw new Error(`健康检查失败: ${res.status}`)
+    return res.json()
+  })

  ipcMain.handle('opencode:session:create', async (_e, data) => {
-    if (!opencodePort) throw new Error('OpenCode 服务未启动');
+    if (!opencodePort) throw new Error('OpenCode 服务未启动')
    const res = await fetch(`http://127.0.0.1:${opencodePort}/session`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data ?? {}),
-    });
-    if (!res.ok) throw new Error(`创建会话失败: ${res.status}`);
-    return res.json();
-  });
+    })
+    if (!res.ok) throw new Error(`创建会话失败: ${res.status}`)
+    return res.json()
+  })

  ipcMain.handle('opencode:session:send', async (_e, sessionId, text) => {
-    if (!opencodePort) throw new Error('OpenCode 服务未启动');
+    if (!opencodePort) throw new Error('OpenCode 服务未启动')
    const res = await fetch(`http://127.0.0.1:${opencodePort}/session/${sessionId}/message`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ parts: [{ type: 'text', text }] }),
-    });
-    if (!res.ok) throw new Error(`发送消息失败: ${res.status}`);
-    return res.json();
-  });
+    })
+    if (!res.ok) throw new Error(`发送消息失败: ${res.status}`)
+    return res.json()
+  })
 }

 // ========== 窗口 ==========
@@ -174,45 +180,41 @@ const createWindow = () => {
    },
    titleBarStyle: 'hiddenInset',
    show: false,
-  });
+  })

-  mainWindow.once('ready-to-show', () => mainWindow.show());
+  mainWindow.once('ready-to-show', () => mainWindow.show())

  mainWindow.webContents.setWindowOpenHandler(({ url }) => {
-    shell.openExternal(url);
-    return { action: 'deny' };
-  });
+    shell.openExternal(url)
+    return { action: 'deny' }
+  })

  // 注入 baseUrl，让渲染进程的 getBaseUrl() 能拿到正确端口
  mainWindow.webContents.on('did-finish-load', () => {
    if (opencodePort) {
-      mainWindow.webContents.executeJavaScript(
-        `window.__opencodeBaseUrl = 'http://127.0.0.1:${opencodePort}'`
-      );
+      mainWindow.webContents.executeJavaScript(`window.__opencodeBaseUrl = 'http://127.0.0.1:${opencodePort}'`)
    }
-  });
+  })

  if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
-    mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
+    mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL)
  } else {
-    mainWindow.loadFile(
-      path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`)
-    );
+    mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`))
  }
-};
+}

 app.whenReady().then(() => {
-  registerIpcHandlers();
-  createWindow();
+  registerIpcHandlers()
+  createWindow()

  app.on('activate', () => {
-    if (BrowserWindow.getAllWindows().length === 0) createWindow();
-  });
-});
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  })
+})

 app.on('window-all-closed', () => {
-  stopOpencode();
-  if (process.platform !== 'darwin') app.quit();
-});
+  stopOpencode()
+  if (process.platform !== 'darwin') app.quit()
+})

-app.on('before-quit', () => stopOpencode());
+app.on('before-quit', () => stopOpencode())
--- a/src/preload/index.js
+++ b/src/preload/index.js
@@ -1,11 +1,11 @@
-import { contextBridge, ipcRenderer } from 'electron';
+import { contextBridge, ipcRenderer } from 'electron'

 contextBridge.exposeInMainWorld('electronAPI', {
  // 通用 IPC（保留原有）
  send: (channel, data) => ipcRenderer.send(channel, data),
  on: (channel, callback) => ipcRenderer.on(channel, (_event, ...args) => callback(...args)),
  invoke: (channel, data) => ipcRenderer.invoke(channel, data),
-});
+})

 contextBridge.exposeInMainWorld('opencode', {
  start: () => ipcRenderer.invoke('opencode:start'),
@@ -15,4 +15,4 @@ contextBridge.exposeInMainWorld('opencode', {
  health: () => ipcRenderer.invoke('opencode:health'),
  createSession: (data) => ipcRenderer.invoke('opencode:session:create', data),
  sendMessage: (sessionId, text) => ipcRenderer.invoke('opencode:session:send', sessionId, text),
-});
+})
--- a/src/renderer.js
+++ b/src/renderer.js
@@ -26,8 +26,6 @@
 * ```
 */

-import './index.css';
+import './index.css'

-console.log(
-  '👋 This message is being logged by "renderer.js", included via Vite',
-);
+console.log('👋 This message is being logged by "renderer.js", included via Vite')
--- a/src/renderer/layouts/DefaultLayout.vue
+++ b/src/renderer/layouts/DefaultLayout.vue
@@ -1,12 +1,7 @@
 <template>
  <div class="flex h-screen w-screen overflow-hidden bg-gray-50">
    <!-- 侧边栏 -->
-    <aside
-      :class="[
-        'flex flex-col bg-white border-r border-gray-200 transition-all duration-300',
-        appStore.collapsed ? 'w-16' : 'w-56',
-      ]"
-    >
+    <aside :class="['flex flex-col bg-white border-r border-gray-200 transition-all duration-300', appStore.collapsed ? 'w-16' : 'w-56']">
      <!-- Logo -->
      <div class="flex items-center h-14 px-4 border-b border-gray-200 shrink-0">
        <el-icon class="text-blue-500 text-xl shrink-0"><Monitor /></el-icon>
@@ -16,13 +11,7 @@
      </div>

      <!-- 导航菜单 -->
-      <el-menu
-        :default-active="$route.path"
-        :collapse="appStore.collapsed"
-        :collapse-transition="false"
-        router
-        class="flex-1 border-none"
-      >
+      <el-menu :default-active="$route.path" :collapse="appStore.collapsed" :collapse-transition="false" router class="flex-1 border-none">
        <el-menu-item index="/">
          <el-icon><House /></el-icon>
          <template #title>首页</template>
@@ -35,12 +24,7 @@

      <!-- 折叠按钮 -->
      <div class="p-3 border-t border-gray-200">
-        <el-button
-          :icon="appStore.collapsed ? Expand : Fold"
-          circle
-          size="small"
-          @click="appStore.toggleSidebar"
-        />
+        <el-button :icon="appStore.collapsed ? Expand : Fold" circle size="small" @click="appStore.toggleSidebar" />
      </div>
    </aside>

@@ -65,13 +49,13 @@
 </template>

 <script setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { useAppStore } from '@/stores/app';
-import { House, Monitor, Expand, Fold, Edit, ChatDotRound } from '@element-plus/icons-vue';
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useAppStore } from '@/stores/app'
+import { House, Monitor, Expand, Fold, ChatDotRound } from '@element-plus/icons-vue'

-const route = useRoute();
-const appStore = useAppStore();
+const route = useRoute()
+const appStore = useAppStore()

-const currentTitle = computed(() => route.meta?.title || appStore.title);
+const currentTitle = computed(() => route.meta?.title || appStore.title)
 </script>
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -1,21 +1,21 @@
-import { createApp } from 'vue';
-import { createPinia } from 'pinia';
-import ElementPlus from 'element-plus';
-import * as ElementPlusIconsVue from '@element-plus/icons-vue';
-import 'element-plus/dist/index.css';
-import router from './router';
-import App from './App.vue';
-import './style.css';
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import 'element-plus/dist/index.css'
+import router from './router'
+import App from './App.vue'
+import './style.css'

-const app = createApp(App);
+const app = createApp(App)

 // 注册所有 Element Plus 图标
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component);
+  app.component(key, component)
 }

-app.use(createPinia());
-app.use(router);
-app.use(ElementPlus);
+app.use(createPinia())
+app.use(router)
+app.use(ElementPlus)

-app.mount('#app');
+app.mount('#app')
--- a/src/renderer/router/index.js
+++ b/src/renderer/router/index.js
@@ -1,4 +1,4 @@
-import { createRouter, createWebHashHistory } from 'vue-router';
+import { createRouter, createWebHashHistory } from 'vue-router'

 const routes = [
  {
@@ -19,12 +19,12 @@ const routes = [
      },
    ],
  },
-];
+]

 const router = createRouter({
  // Electron 中使用 hash 模式
  history: createWebHashHistory(),
  routes,
-});
+})

-export default router;
+export default router
--- a/src/renderer/stores/app.js
+++ b/src/renderer/stores/app.js
@@ -1,13 +1,13 @@
-import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { defineStore } from 'pinia'
+import { ref } from 'vue'

 export const useAppStore = defineStore('app', () => {
-  const title = ref('My App');
-  const collapsed = ref(false);
+  const title = ref('My App')
+  const collapsed = ref(false)

  function toggleSidebar() {
-    collapsed.value = !collapsed.value;
+    collapsed.value = !collapsed.value
  }

-  return { title, collapsed, toggleSidebar };
-});
+  return { title, collapsed, toggleSidebar }
+})
--- a/src/renderer/style.css
+++ b/src/renderer/style.css
@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';

 /* =====================
   shadcn CSS 变量 (light)
--- a/src/renderer/views/chat/ChatView.vue
+++ b/src/renderer/views/chat/ChatView.vue
@@ -7,12 +7,8 @@
        <span class="status-text">{{ statusText }}</span>
      </div>
      <div class="status-actions">
-        <el-button v-if="!isRunning" size="small" type="primary" :loading="isStarting" @click="startService">
-          启动服务
-        </el-button>
-        <el-button v-else size="small" type="danger" plain @click="stopService">
-          停止服务
-        </el-button>
+        <el-button v-if="!isRunning" size="small" type="primary" :loading="isStarting" @click="startService"> 启动服务 </el-button>
+        <el-button v-else size="small" type="danger" plain @click="stopService"> 停止服务 </el-button>
      </div>
    </div>

@@ -22,12 +18,7 @@
        <el-icon :size="40" color="#c0c4cc"><ChatDotRound /></el-icon>
        <p>启动服务后开始对话</p>
      </div>
-      <div
-        v-for="msg in messages"
-        :key="msg.id"
-        class="bubble-wrap"
-        :class="msg.role"
-      >
+      <div v-for="msg in messages" :key="msg.id" class="bubble-wrap" :class="msg.role">
        <div class="bubble">
          <pre class="bubble-text">{{ msg.text }}</pre>
        </div>
@@ -43,16 +34,8 @@
        placeholder="输入消息，Ctrl+Enter 发送"
        :disabled="!isRunning || isSending"
        resize="none"
-        @keydown.ctrl.enter.prevent="send"
-      />
-      <el-button
-        type="primary"
-        :disabled="!isRunning || isSending || !inputText.trim()"
-        :loading="isSending"
-        @click="send"
-      >
-        发送
-      </el-button>
+        @keydown.ctrl.enter.prevent="send" />
+      <el-button type="primary" :disabled="!isRunning || isSending || !inputText.trim()" :loading="isSending" @click="send"> 发送 </el-button>
    </div>
  </div>
 </template>
@@ -91,7 +74,7 @@ function scrollToBottom() {
 }

 function upsertAssistantBubble(msgId, text) {
-  const existing = messages.value.find(m => m.id === msgId)
+  const existing = messages.value.find((m) => m.id === msgId)
  if (existing) {
    existing.text = text
  } else {
@@ -119,7 +102,10 @@ function connectSSE() {
      if (data.type === 'message.completed') {
        isSending.value = false
      }
-    } catch (_) {}
+    } catch (_) {
+      console.error('解析 SSE 消息失败', _)
+      return
+    }
  }

  eventSource.onerror = () => {
@@ -148,7 +134,10 @@ async function stopService() {
  isRunning.value = false
  currentSessionId.value = null
  messages.value = []
-  if (eventSource) { eventSource.close(); eventSource = null }
+  if (eventSource) {
+    eventSource.close()
+    eventSource = null
+  }
  ElMessage.info('服务已停止')
 }

@@ -181,13 +170,16 @@ async function send() {
 }

 // 初始化时同步服务状态
-window.opencode?.info().then((info) => {
-  isRunning.value = info.running
-  if (info.running) {
-    if (info.url) window.__opencodeBaseUrl = info.url
-    connectSSE()
-  }
-}).catch(() => {})
+window.opencode
+  ?.info()
+  .then((info) => {
+    isRunning.value = info.running
+    if (info.running) {
+      if (info.url) window.__opencodeBaseUrl = info.url
+      connectSSE()
+    }
+  })
+  .catch(() => {})

 onUnmounted(() => {
  if (eventSource) eventSource.close()
@@ -228,13 +220,25 @@ onUnmounted(() => {
  flex-shrink: 0;
 }

-.dot.stopped  { background: #c0c4cc; }
-.dot.starting { background: #e6a23c; animation: pulse 1s infinite; }
-.dot.running  { background: #67c23a; }
+.dot.stopped {
+  background: #c0c4cc;
+}
+.dot.starting {
+  background: #e6a23c;
+  animation: pulse 1s infinite;
+}
+.dot.running {
+  background: #67c23a;
+}

@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
 }

 .messages {
@@ -263,8 +267,12 @@ onUnmounted(() => {
  display: flex;
 }

-.bubble-wrap.user { justify-content: flex-end; }
-.bubble-wrap.assistant { justify-content: flex-start; }
+.bubble-wrap.user {
+  justify-content: flex-end;
+}
+.bubble-wrap.assistant {
+  justify-content: flex-start;
+}

 .bubble {
  max-width: 75%;
--- a/src/renderer/views/home/HomeView.vue
+++ b/src/renderer/views/home/HomeView.vue
@@ -46,12 +46,7 @@
            </div>
          </template>
          <div class="action-grid">
-            <div
-              v-for="action in actions"
-              :key="action.label"
-              class="action-item"
-              @click="action.onClick"
-            >
+            <div v-for="action in actions" :key="action.label" class="action-item" @click="action.onClick">
              <div class="action-icon" :style="{ background: action.color + '20' }">
                <el-icon :size="28" :color="action.color">
                  <component :is="action.icon" />
@@ -74,12 +69,7 @@
          </template>
          <el-scrollbar height="280px">
            <div class="recent-list">
-              <div
-                v-for="(item, index) in recents"
-                :key="index"
-                class="recent-item"
-                @click="handleFileClick(item)"
-              >
+              <div v-for="(item, index) in recents" :key="index" class="recent-item" @click="handleFileClick(item)">
                <div class="file-icon">
                  <el-icon :size="20"><Document /></el-icon>
                </div>
@@ -99,70 +89,58 @@

 <script setup>
 import { useRouter } from 'vue-router'
-import { 
-  Document, 
-  Plus, 
-  FolderOpened, 
-  Setting, 
-  Upload, 
-  Top, 
-  Bottom, 
-  Grid, 
-  Clock,
-  Timer,
-  VideoCamera
-} from '@element-plus/icons-vue'
+import { Document, Plus, FolderOpened, Setting, Upload, Top, Bottom, Grid, Clock, Timer, VideoCamera } from '@element-plus/icons-vue'

 const router = useRouter()

 const stats = [
-  { 
-    label: '文件总数', 
-    value: '128', 
+  {
+    label: '文件总数',
+    value: '128',
    trend: 12,
    icon: Document,
-    color: '#409EFF'
+    color: '#409EFF',
  },
-  { 
-    label: '今日编辑', 
-    value: '24', 
+  {
+    label: '今日编辑',
+    value: '24',
    trend: -3,
    icon: Timer,
-    color: '#67C23A'
+    color: '#67C23A',
  },
-  { 
-    label: '运行次数', 
-    value: '56', 
+  {
+    label: '运行次数',
+    value: '56',
    trend: 8,
    icon: VideoCamera,
-    color: '#E6A23C'
+    color: '#E6A23C',
  },
 ]

 const actions = [
-  { 
-    label: '新建文件', 
-    icon: Plus, 
+  {
+    label: '新建文件',
+    icon: Plus,
    color: '#409EFF',
-    onClick: () => router.push('/editor') 
+    onClick: () => router.push('/editor'),
  },
-  { 
-    label: '打开文件', 
-    icon: FolderOpened, 
+  {
+    label: '打开文件',
+    icon: FolderOpened,
    color: '#67C23A',
-    onClick: () => {} 
+    onClick: () => {},
  },
-  { 
-    label: '导入项目', 
-    icon: Upload, 
+  {
+    label: '导入项目',
+    icon: Upload,
    color: '#E6A23C',
-    onClick: () => {} 
+    onClick: () => {},
  },
-  { 
-    label: '系统设置', 
-    icon: Setting, 
+  {
+    label: '系统设置',
+    icon: Setting,
    color: '#F56C6C',
-    onClick: () => {} 
+    onClick: () => {},
  },
 ]

@@ -209,7 +187,7 @@ const handleFileClick = (item) => {
 }

 .greeting {
-  background: linear-gradient(90deg, #409EFF 0%, #67C23A 100%);
+  background: linear-gradient(90deg, #409eff 0%, #67c23a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
@@ -285,11 +263,11 @@ const handleFileClick = (item) => {
 }

 .stat-trend.up {
-  color: #67C23A;
+  color: #67c23a;
 }

 .stat-trend.down {
-  color: #F56C6C;
+  color: #f56c6c;
 }

 /* 主要内容区 */
@@ -390,7 +368,7 @@ const handleFileClick = (item) => {
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
-  color: #409EFF;
+  color: #409eff;
 }

 .file-info {
@@ -419,7 +397,7 @@ const handleFileClick = (item) => {

 .file-time {
  font-size: 12px;
-  color: #C0C4CC;
+  color: #c0c4cc;
  flex-shrink: 0;
 }
 </style>