upgrade

detailed logs
upgrade
2026-03-28 20:24:06 -04:00 · 2026-03-28 20:19:15 -04:00 · 2026-03-27 18:00:30 -04:00 · 2026-03-27 17:56:24 -04:00 · 2026-03-27 17:50:06 -04:00 · 2026-03-27 17:45:35 -04:00
70 changed files with 2030 additions and 554 deletions
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
-# Tauri + Vue + TypeScript
+# AI Translate Client

-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+使用 AI 模型进行翻译的客户端。使用 Gemini 编写。

-## Recommended IDE Setup
+更新版本：手动修改 `package.json` 文件中的版本号，然后运行 `pnpm sync-version` 。

- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)
+图标由 Gemini 生成。
--- a/app-icon.png
+++ b/app-icon.png
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tauri + Vue + Typescript App</title>
+    <title>AI Translate Client</title>
  </head>

  <body>
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "gemmatrans-client",
+  "name": "ai-translate-client",
  "private": true,
-  "version": "0.1.2",
+  "version": "0.3.7",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/spec/prd.md
+++ b/spec/prd.md
@@ -1,85 +0,0 @@
-# PRD: GemmaTrans Desktop Client
-
-## 1. Project Overview
-**GemmaTrans** is a lightweight, high-performance desktop translation client built with **Tauri** and **Vue 3**. It is designed to act as a modern frontend for the **TranslateGemma** model running on a local or remote **Ollama** instance (including over private networks like Tailscale). The application prioritizes speed, privacy, and a professional "Google Translate" aesthetic.
-
---
-
-## 2. Technical Stack
-* **Core Framework:** [Tauri](https://tauri.app/) (Rust backend for system-level API access).
-* **Frontend Framework:** [Vue 3](https://vuejs.org/) (Composition API).
-* **Styling:** [Tailwind CSS](https://tailwindcss.com/) (Minimalist, modern utility-first CSS).
-* **Package Manager:** `pnpm`.
-* **State Management:** [Pinia](https://pinia.vuejs.org/) (To persist user settings and prompt templates).
-* **Icons:** [Lucide Vue Next](https://lucide.dev/).
-
---
-
-## 3. User Interface (UI) Requirements
-The UI should be **Modern, Minimalist, and Functional**, mimicking the clean layout of Google Translate.
-
-### 3.1 Main Translation Interface
-* **Split-Pane Layout:**
-    * **Left (Source):** Input text area with a header for language selection.
-    * **Right (Target):** Read-only text area for the translation result, with a header for the target language selection.
-* **Language Selection:** Dropdowns supporting both **Full Name** (e.g., English) and **ISO Code** (e.g., en).
-* **Actions:** * "Translate" button (with loading state).
-    * "Copy" button on the target pane.
-    * "Clear" button on the source pane.
-
-### 3.2 Settings View
-* **API Configuration:** A text input for the `Ollama API Address` (e.g., `http://100.x.y.z:11434`).
-* **Output Control:** A toggle switch for `Enable Streaming` (renders text as it is generated).
-* **Prompt Engineering:** A large text area for the `System Prompt Template`.
-
---
-
-## 4. Functional Requirements
-
-### 4.1 Prompt Engineering Engine
-The application must dynamically inject variables into the user-provided template before sending the request to the Ollama API.
-
-**Default Template:**
-> You are a professional {SOURCE_LANG} ({SOURCE_CODE}) to {TARGET_LANG} ({TARGET_CODE}) translator. Your goal is to accurately convey the meaning and nuances of the original {SOURCE_LANG} text while adhering to {TARGET_LANG} grammar, vocabulary, and cultural sensitivities.
-> Produce only the {TARGET_LANG} translation, without any additional explanations or commentary. Please translate the following {SOURCE_LANG} text into {TARGET_LANG}:
-> 
-> {TEXT}
-
-### 4.2 Template Variables
-The engine must support and correctly replace the following tokens:
-* `{SOURCE_LANG}`: Full name of the input language (e.g., "Chinese").
-* `{SOURCE_CODE}`: Short code of the input language (e.g., "zh-Hans").
-* `{TARGET_LANG}`: Full name of the output language (e.g., "English").
-* `{TARGET_CODE}`: Short code of the output language (e.g., "en").
-* `{TEXT}`: The actual content provided by the user.
-
-### 4.3 Ollama Integration
-* Support for the `/api/generate` endpoint.
-* Ability to handle both `stream: true` (progressive UI updates) and `stream: false` (batch updates).
-* Support for connecting to any valid URL provided in Settings, ensuring compatibility with Tailscale IPs.
-
---
-
-## 5. Technical Implementation Details
-
-### 5.1 Language Mapping (Default Configuration)
-The application will provide a default list of languages:
-| Language | Code |
-| :--- | :--- |
-| English | en |
-| Chinese | zh-Hans |
-| Japanese | ja |
-| Spanish | es |
-| French | fr |
-| German | de |
-
-### 5.2 Persistence
-* All settings (API Address, Stream Toggle, and Custom Prompt Template) must be stored in the user's local application data folder to ensure they are remembered across restarts.
-
---
-
-## 6. Success Metrics
-* **Connectivity:** Seamless communication with an Ollama instance over a Tailscale network.
-* **UX:** The "Streaming" mode should feel responsive with no UI lag during high-token-per-second generation.
-
---
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -17,6 +17,20 @@ dependencies = [
 "memchr",
 ]

+[[package]]
+name = "ai-translate-client"
+version = "0.3.7"
+dependencies = [
+ "futures-util",
+ "reqwest 0.12.28",
+ "serde",
+ "serde_json",
+ "tauri",
+ "tauri-build",
+ "tauri-plugin-http",
+ "tauri-plugin-opener",
+]
+
 [[package]]
 name = "alloc-no-stdlib"
 version = "2.0.4"
@@ -554,7 +568,7 @@ dependencies = [
 "bitflags 2.11.0",
 "core-foundation 0.10.1",
 "core-graphics-types",
- "foreign-types",
+ "foreign-types 0.5.0",
 "libc",
 ]

@@ -996,6 +1010,15 @@ version = "0.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d9c4f5dac5e15c24eb999c26181a6ca40b39fe946cbe4c263c7209467bc83af2"

+[[package]]
+name = "foreign-types"
+version = "0.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f6f339eb8adc052cd2ca78910fda869aefa38d22d5cb648e6485e4d3fc06f3b1"
+dependencies = [
+ "foreign-types-shared 0.1.1",
+]
+
 [[package]]
 name = "foreign-types"
 version = "0.5.0"
@@ -1003,7 +1026,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d737d9aa519fb7b749cbc3b962edcf310a8dd1f4b67c91c4f83975dbdd17d965"
 dependencies = [
 "foreign-types-macros",
- "foreign-types-shared",
+ "foreign-types-shared 0.3.1",
 ]

 [[package]]
@@ -1017,6 +1040,12 @@ dependencies = [
 "syn 2.0.117",
 ]

+[[package]]
+name = "foreign-types-shared"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "00b0228411908ca8685dba7fc2cdd70ec9990a6e753e89b6ac91a84c40fbaf4b"
+
 [[package]]
 name = "foreign-types-shared"
 version = "0.3.1"
@@ -1234,18 +1263,6 @@ dependencies = [
 "x11",
 ]

-[[package]]
-name = "gemmatrans-client"
-version = "0.1.2"
-dependencies = [
- "serde",
- "serde_json",
- "tauri",
- "tauri-build",
- "tauri-plugin-http",
- "tauri-plugin-opener",
-]
-
 [[package]]
 name = "generic-array"
 version = "0.14.7"
@@ -1609,6 +1626,22 @@ dependencies = [
 "webpki-roots",
 ]

+[[package]]
+name = "hyper-tls"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "70206fc6890eaca9fde8a0bf71caa2ddfc9fe045ac9e5c70df101a7dbde866e0"
+dependencies = [
+ "bytes",
+ "http-body-util",
+ "hyper",
+ "hyper-util",
+ "native-tls",
+ "tokio",
+ "tokio-native-tls",
+ "tower-service",
+]
+
 [[package]]
 name = "hyper-util"
 version = "0.1.20"
@@ -2156,6 +2189,23 @@ dependencies = [
 "windows-sys 0.60.2",
 ]

+[[package]]
+name = "native-tls"
+version = "0.2.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "87de3442987e9dbec73158d5c715e7ad9072fda936bb03d19d7fa10e00520f0e"
+dependencies = [
+ "libc",
+ "log",
+ "openssl",
+ "openssl-probe",
+ "openssl-sys",
+ "schannel",
+ "security-framework",
+ "security-framework-sys",
+ "tempfile",
+]
+
 [[package]]
 name = "ndk"
 version = "0.9.0"
@@ -2465,6 +2515,50 @@ dependencies = [
 "pathdiff",
 ]

+[[package]]
+name = "openssl"
+version = "0.10.75"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "08838db121398ad17ab8531ce9de97b244589089e290a384c900cb9ff7434328"
+dependencies = [
+ "bitflags 2.11.0",
+ "cfg-if",
+ "foreign-types 0.3.2",
+ "libc",
+ "once_cell",
+ "openssl-macros",
+ "openssl-sys",
+]
+
+[[package]]
+name = "openssl-macros"
+version = "0.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a948666b637a0f465e8564c73e89d4dde00d72d4d473cc972f390fc3dcee7d9c"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn 2.0.117",
+]
+
+[[package]]
+name = "openssl-probe"
+version = "0.1.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d05e27ee213611ffe7d6348b942e8f942b37114c00cc03cec254295a4a17852e"
+
+[[package]]
+name = "openssl-sys"
+version = "0.9.111"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "82cab2d520aa75e3c58898289429321eb788c3106963d0dc886ec7a5f4adc321"
+dependencies = [
+ "cc",
+ "libc",
+ "pkg-config",
+ "vcpkg",
+]
+
 [[package]]
 name = "option-ext"
 version = "0.2.0"
@@ -3150,16 +3244,19 @@ dependencies = [
 "cookie_store 0.22.1",
 "encoding_rs",
 "futures-core",
+ "futures-util",
 "h2",
 "http",
 "http-body",
 "http-body-util",
 "hyper",
 "hyper-rustls",
+ "hyper-tls",
 "hyper-util",
 "js-sys",
 "log",
 "mime",
+ "native-tls",
 "percent-encoding",
 "pin-project-lite",
 "quinn",
@@ -3170,13 +3267,16 @@ dependencies = [
 "serde_urlencoded",
 "sync_wrapper",
 "tokio",
+ "tokio-native-tls",
 "tokio-rustls",
+ "tokio-util",
 "tower",
 "tower-http",
 "tower-service",
 "url",
 "wasm-bindgen",
 "wasm-bindgen-futures",
+ "wasm-streams 0.4.2",
 "web-sys",
 "webpki-roots",
 ]
@@ -3211,7 +3311,7 @@ dependencies = [
 "url",
 "wasm-bindgen",
 "wasm-bindgen-futures",
- "wasm-streams",
+ "wasm-streams 0.5.0",
 "web-sys",
 ]

@@ -3313,6 +3413,15 @@ dependencies = [
 "winapi-util",
 ]

+[[package]]
+name = "schannel"
+version = "0.1.28"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "891d81b926048e76efe18581bf793546b4c0eaf8448d72be8de2bbee5fd166e1"
+dependencies = [
+ "windows-sys 0.61.2",
+]
+
 [[package]]
 name = "schemars"
 version = "0.8.22"
@@ -3370,6 +3479,29 @@ version = "1.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "94143f37725109f92c262ed2cf5e59bce7498c01bcc1502d7b9afe439a4e9f49"

+[[package]]
+name = "security-framework"
+version = "2.11.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "897b2245f0b511c87893af39b033e5ca9cce68824c4d7e7630b5a1d339658d02"
+dependencies = [
+ "bitflags 2.11.0",
+ "core-foundation 0.9.4",
+ "core-foundation-sys",
+ "libc",
+ "security-framework-sys",
+]
+
+[[package]]
+name = "security-framework-sys"
+version = "2.15.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cc1f0cbffaac4852523ce30d8bd3c5cdc873501d96ff467ca09b6767bb8cd5c0"
+dependencies = [
+ "core-foundation-sys",
+ "libc",
+]
+
 [[package]]
 name = "selectors"
 version = "0.24.0"
@@ -4316,6 +4448,16 @@ dependencies = [
 "syn 2.0.117",
 ]

+[[package]]
+name = "tokio-native-tls"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbae76ab933c85776efabc971569dd6119c580d8f5d448769dec1764bf796ef2"
+dependencies = [
+ "native-tls",
+ "tokio",
+]
+
 [[package]]
 name = "tokio-rustls"
 version = "0.26.4"
@@ -4676,6 +4818,12 @@ dependencies = [
 "wasm-bindgen",
 ]

+[[package]]
+name = "vcpkg"
+version = "0.2.15"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "accd4ea62f7bb7a82fe23066fb0957d48ef677f6eeb8215f372f52e48bb32426"
+
 [[package]]
 name = "version-compare"
 version = "0.2.1"
@@ -4838,6 +4986,19 @@ dependencies = [
 "wasmparser",
 ]

+[[package]]
+name = "wasm-streams"
+version = "0.4.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "15053d8d85c7eccdbefef60f06769760a563c7f0a9d6902a13d35c7800b0ad65"
+dependencies = [
+ "futures-util",
+ "js-sys",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
 [[package]]
 name = "wasm-streams"
 version = "0.5.0"
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,8 +1,8 @@
 [package]
-name = "gemmatrans-client"
-version = "0.1.2"
-description = "A Tauri App"
-authors = ["you"]
+name = "ai-translate-client"
+version = "0.3.7"
+description = "A client using AI models to translate"
+authors = ["Julian"]
 edition = "2021"

 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
@@ -11,7 +11,7 @@ edition = "2021"
 # The `_lib` suffix may seem redundant but it is necessary
 # to make the lib name unique and wouldn't conflict with the bin name.
 # This seems to be only an issue on Windows, see https://github.com/rust-lang/cargo/issues/8519
-name = "gemmatrans_client_lib"
+name = "ai_translate_client_lib"
 crate-type = ["staticlib", "cdylib", "rlib"]

 [build-dependencies]
@@ -23,4 +23,6 @@ tauri-plugin-opener = "2"
 tauri-plugin-http = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
+reqwest = { version = "0.12", features = ["json", "stream"] }
+futures-util = "0.3"

--- a/src-tauri/icons/128x128.png
+++ b/src-tauri/icons/128x128.png
--- a/src-tauri/icons/128x128@2x.png
+++ b/src-tauri/icons/128x128@2x.png
--- a/src-tauri/icons/32x32.png
+++ b/src-tauri/icons/32x32.png
--- a/src-tauri/icons/64x64.png
+++ b/src-tauri/icons/64x64.png
--- a/src-tauri/icons/Square107x107Logo.png
+++ b/src-tauri/icons/Square107x107Logo.png
--- a/src-tauri/icons/Square142x142Logo.png
+++ b/src-tauri/icons/Square142x142Logo.png
--- a/src-tauri/icons/Square150x150Logo.png
+++ b/src-tauri/icons/Square150x150Logo.png
--- a/src-tauri/icons/Square284x284Logo.png
+++ b/src-tauri/icons/Square284x284Logo.png
--- a/src-tauri/icons/Square30x30Logo.png
+++ b/src-tauri/icons/Square30x30Logo.png
--- a/src-tauri/icons/Square310x310Logo.png
+++ b/src-tauri/icons/Square310x310Logo.png
--- a/src-tauri/icons/Square44x44Logo.png
+++ b/src-tauri/icons/Square44x44Logo.png
--- a/src-tauri/icons/Square71x71Logo.png
+++ b/src-tauri/icons/Square71x71Logo.png
--- a/src-tauri/icons/Square89x89Logo.png
+++ b/src-tauri/icons/Square89x89Logo.png
--- a/src-tauri/icons/StoreLogo.png
+++ b/src-tauri/icons/StoreLogo.png
--- a/src-tauri/icons/android/mipmap-anydpi-v26/ic_launcher.xml
+++ b/src-tauri/icons/android/mipmap-anydpi-v26/ic_launcher.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <background android:drawable="@color/ic_launcher_background"/>
+</adaptive-icon>
--- a/src-tauri/icons/android/mipmap-hdpi/ic_launcher.png
+++ b/src-tauri/icons/android/mipmap-hdpi/ic_launcher.png
--- a/src-tauri/icons/android/mipmap-hdpi/ic_launcher_foreground.png
+++ b/src-tauri/icons/android/mipmap-hdpi/ic_launcher_foreground.png
--- a/src-tauri/icons/android/mipmap-hdpi/ic_launcher_round.png
+++ b/src-tauri/icons/android/mipmap-hdpi/ic_launcher_round.png
--- a/src-tauri/icons/android/mipmap-mdpi/ic_launcher.png
+++ b/src-tauri/icons/android/mipmap-mdpi/ic_launcher.png
--- a/src-tauri/icons/android/mipmap-mdpi/ic_launcher_foreground.png
+++ b/src-tauri/icons/android/mipmap-mdpi/ic_launcher_foreground.png
--- a/src-tauri/icons/android/mipmap-mdpi/ic_launcher_round.png
+++ b/src-tauri/icons/android/mipmap-mdpi/ic_launcher_round.png
--- a/src-tauri/icons/android/mipmap-xhdpi/ic_launcher.png
+++ b/src-tauri/icons/android/mipmap-xhdpi/ic_launcher.png
--- a/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_foreground.png
+++ b/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_foreground.png
--- a/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_round.png
+++ b/src-tauri/icons/android/mipmap-xhdpi/ic_launcher_round.png
--- a/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher.png
+++ b/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher.png
--- a/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_foreground.png
+++ b/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_foreground.png
--- a/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_round.png
+++ b/src-tauri/icons/android/mipmap-xxhdpi/ic_launcher_round.png
--- a/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher.png
+++ b/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher.png
--- a/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_foreground.png
+++ b/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_foreground.png
--- a/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_round.png
+++ b/src-tauri/icons/android/mipmap-xxxhdpi/ic_launcher_round.png
--- a/src-tauri/icons/android/values/ic_launcher_background.xml
+++ b/src-tauri/icons/android/values/ic_launcher_background.xml
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <color name="ic_launcher_background">#fff</color>
+</resources>
--- a/src-tauri/icons/icon.icns
+++ b/src-tauri/icons/icon.icns
--- a/src-tauri/icons/icon.ico
+++ b/src-tauri/icons/icon.ico
--- a/src-tauri/icons/icon.png
+++ b/src-tauri/icons/icon.png
--- a/src-tauri/icons/ios/AppIcon-20x20@1x.png
+++ b/src-tauri/icons/ios/AppIcon-20x20@1x.png
--- a/src-tauri/icons/ios/AppIcon-20x20@2x-1.png
+++ b/src-tauri/icons/ios/AppIcon-20x20@2x-1.png
--- a/src-tauri/icons/ios/AppIcon-20x20@2x.png
+++ b/src-tauri/icons/ios/AppIcon-20x20@2x.png
--- a/src-tauri/icons/ios/AppIcon-20x20@3x.png
+++ b/src-tauri/icons/ios/AppIcon-20x20@3x.png
--- a/src-tauri/icons/ios/AppIcon-29x29@1x.png
+++ b/src-tauri/icons/ios/AppIcon-29x29@1x.png
--- a/src-tauri/icons/ios/AppIcon-29x29@2x-1.png
+++ b/src-tauri/icons/ios/AppIcon-29x29@2x-1.png
--- a/src-tauri/icons/ios/AppIcon-29x29@2x.png
+++ b/src-tauri/icons/ios/AppIcon-29x29@2x.png
--- a/src-tauri/icons/ios/AppIcon-29x29@3x.png
+++ b/src-tauri/icons/ios/AppIcon-29x29@3x.png
--- a/src-tauri/icons/ios/AppIcon-40x40@1x.png
+++ b/src-tauri/icons/ios/AppIcon-40x40@1x.png
--- a/src-tauri/icons/ios/AppIcon-40x40@2x-1.png
+++ b/src-tauri/icons/ios/AppIcon-40x40@2x-1.png
--- a/src-tauri/icons/ios/AppIcon-40x40@2x.png
+++ b/src-tauri/icons/ios/AppIcon-40x40@2x.png
--- a/src-tauri/icons/ios/AppIcon-40x40@3x.png
+++ b/src-tauri/icons/ios/AppIcon-40x40@3x.png
--- a/src-tauri/icons/ios/AppIcon-512@2x.png
+++ b/src-tauri/icons/ios/AppIcon-512@2x.png
--- a/src-tauri/icons/ios/AppIcon-60x60@2x.png
+++ b/src-tauri/icons/ios/AppIcon-60x60@2x.png
--- a/src-tauri/icons/ios/AppIcon-60x60@3x.png
+++ b/src-tauri/icons/ios/AppIcon-60x60@3x.png
--- a/src-tauri/icons/ios/AppIcon-76x76@1x.png
+++ b/src-tauri/icons/ios/AppIcon-76x76@1x.png
--- a/src-tauri/icons/ios/AppIcon-76x76@2x.png
+++ b/src-tauri/icons/ios/AppIcon-76x76@2x.png
--- a/src-tauri/icons/ios/AppIcon-83.5x83.5@2x.png
+++ b/src-tauri/icons/ios/AppIcon-83.5x83.5@2x.png
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -1,7 +1,93 @@
-// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
+use tauri::{AppHandle, Emitter};
+use serde::{Deserialize, Serialize};
+use futures_util::StreamExt;
+use reqwest::Client;
+
+#[derive(Serialize, Deserialize, Clone)]
+struct Message {
+    role: String,
+    content: String,
+}
+
+#[derive(Serialize, Deserialize, Clone)]
+struct TranslationPayload {
+    model: String,
+    messages: Vec<Message>,
+    stream: bool,
+}
+
+#[derive(Deserialize)]
+struct OpenAIResponse {
+    choices: Vec<Choice>,
+}
+
+#[derive(Deserialize)]
+struct Choice {
+    // message: Option<Message>,
+    delta: Option<Delta>,
+}
+
+#[derive(Deserialize)]
+struct Delta {
+    content: Option<String>,
+}
+
 #[tauri::command]
-fn greet(name: &str) -> String {
-    format!("Hello, {}! You've been greeted from Rust!", name)
+async fn translate(
+    app: AppHandle,
+    api_address: String,
+    api_key: String,
+    payload: TranslationPayload,
+) -> Result<String, String> {
+    let client = Client::new();
+    // Ensure URL doesn't have double slashes if api_address ends with /
+    let base_url = api_address.trim_end_matches('/');
+    let url = format!("{}/chat/completions", base_url);
+
+    let mut request = client.post(&url).json(&payload);
+
+    if !api_key.is_empty() {
+        request = request.header("Authorization", format!("Bearer {}", api_key));
+    }
+
+    let res = request
+        .send()
+        .await
+        .map_err(|e| e.to_string())?;
+
+    if !payload.stream {
+        let text = res.text().await.map_err(|e| e.to_string())?;
+        return Ok(text);
+    }
+
+    let mut stream = res.bytes_stream();
+    let mut raw_stream_log = String::new();
+
+    while let Some(item) = stream.next().await {
+        let chunk = item.map_err(|e| e.to_string())?;
+        let text = String::from_utf8_lossy(&chunk);
+        raw_stream_log.push_str(&text);
+        
+        for line in text.lines() {
+            let line = line.trim();
+            if line.is_empty() { continue; }
+            if line == "data: [DONE]" { break; }
+            
+            if let Some(data_str) = line.strip_prefix("data: ") {
+                if let Ok(json) = serde_json::from_str::<OpenAIResponse>(data_str) {
+                    if let Some(choice) = json.choices.get(0) {
+                        if let Some(delta) = &choice.delta {
+                            if let Some(content) = &delta.content {
+                                app.emit("translation-chunk", content).map_err(|e| e.to_string())?;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Ok(raw_stream_log)
 }

 #[cfg_attr(mobile, tauri::mobile_entry_point)]
@@ -9,7 +95,7 @@ pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .plugin(tauri_plugin_http::init())
-        .invoke_handler(tauri::generate_handler![greet])
+        .invoke_handler(tauri::generate_handler![translate])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
 }
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -2,5 +2,5 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

 fn main() {
-    gemmatrans_client_lib::run()
+    ai_translate_client_lib::run()
 }
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,8 +1,8 @@
 {
  "$schema": "https://schema.tauri.app/config/2",
-  "productName": "gemmatrans-client",
-  "version": "0.1.2",
-  "identifier": "top.volan.gemmatrans-client",
+  "productName": "ai-translate-client",
+  "version": "0.3.7",
+  "identifier": "top.volan.ai-translate-client",
  "build": {
    "beforeDevCommand": "pnpm dev",
    "devUrl": "http://localhost:1420",
@@ -12,7 +12,7 @@
  "app": {
    "windows": [
      {
-        "title": "gemmatrans-client",
+        "title": "AI 翻译客户端",
        "width": 1400,
        "height": 900
      }
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,22 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { 
  Settings, 
  Languages, 
-  Send, 
-  Copy, 
-  Trash2, 
-  ArrowRightLeft,
-  Loader2,
-  Check,
  FileText,
-  ChevronDown,
  Sun,
-  Moon
+  Moon,
+  Clock
 } from 'lucide-vue-next';
-import { fetch } from '@tauri-apps/plugin-http';
-import { useSettingsStore, LANGUAGES, DEFAULT_TEMPLATE } from './stores/settings';
+import { useSettingsStore } from './stores/settings';
 import pkg from '../package.json';
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { cn } from './lib/utils';

-function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
+// Import newly separated views
+import TranslationView from './components/TranslationView.vue';
+import SettingsView from './components/SettingsView.vue';
+import LogsView from './components/LogsView.vue';
+import HistoryView from './components/HistoryView.vue';

 const settings = useSettingsStore();

@@ -39,177 +33,23 @@ const toggleTheme = () => {
  settings.isDark = !settings.isDark;
 };

-const view = ref<'translate' | 'settings' | 'logs'>('translate');
+// Global Routing State
+const view = ref<'translate' | 'settings' | 'logs' | 'history'>('translate');

-// Dropdown State
-const sourceDropdownOpen = ref(false);
-const targetDropdownOpen = ref(false);
-
-const closeAllDropdowns = () => {
-  sourceDropdownOpen.value = false;
-  targetDropdownOpen.value = false;
-};
-
-const toggleDropdown = (type: 'source' | 'target') => {
-  if (type === 'source') {
-    sourceDropdownOpen.value = !sourceDropdownOpen.value;
-    targetDropdownOpen.value = false;
-  } else {
-    targetDropdownOpen.value = !targetDropdownOpen.value;
-    sourceDropdownOpen.value = false;
-  }
-};
-
-const handleGlobalClick = (e: MouseEvent) => {
-  const target = e.target as HTMLElement;
-  if (!target.closest('.lang-dropdown')) {
-    closeAllDropdowns();
-  }
-};
-
-onMounted(() => {
-  window.addEventListener('click', handleGlobalClick);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('click', handleGlobalClick);
-});
-
-// Translation State
-const sourceText = ref('');
-const targetText = ref('');
-const isTranslating = ref(false);
-const showCopyFeedback = ref(false);
-
-// Language Selection
-const sourceLangCode = computed({
-  get: () => settings.sourceLang.code,
-  set: (code) => {
-    const lang = LANGUAGES.find(l => l.code === code);
-    if (lang) settings.sourceLang = lang;
-  }
-});
-
-const targetLangCode = computed({
-  get: () => settings.targetLang.code,
-  set: (code) => {
-    const lang = LANGUAGES.find(l => l.code === code);
-    if (lang) settings.targetLang = lang;
-  }
-});
-
-const sourceLang = computed(() => settings.sourceLang);
-const targetLang = computed(() => settings.targetLang);
-
-const swapLanguages = () => {
-  const temp = { ...settings.sourceLang };
-  settings.sourceLang = { ...settings.targetLang };
-  settings.targetLang = temp;
-};
-
-const clearSource = () => {
-  sourceText.value = '';
-  targetText.value = '';
-};
-
-const copyTarget = async () => {
-  try {
-    await navigator.clipboard.writeText(targetText.value);
-    showCopyFeedback.value = true;
-    setTimeout(() => {
-      showCopyFeedback.value = false;
-    }, 2000);
-  } catch (err) {
-    console.error('Failed to copy text: ', err);
-  }
-};
-
-const translate = async () => {
-  if (!sourceText.value.trim() || isTranslating.value) return;
-
-  isTranslating.value = true;
-  targetText.value = '';
-
-  const prompt = settings.systemPromptTemplate
-    .replace(/{SOURCE_LANG}/g, sourceLang.value.englishName)
-    .replace(/{SOURCE_CODE}/g, sourceLang.value.code)
-    .replace(/{TARGET_LANG}/g, targetLang.value.englishName)
-    .replace(/{TARGET_CODE}/g, targetLang.value.code)
-    .replace(/{TEXT}/g, sourceText.value);
-
-  const requestBody = {
-    model: settings.modelName,
-    prompt: prompt,
-    stream: settings.enableStreaming
-  };
-
-  settings.addLog('request', requestBody);
-
-  try {
-    const response = await fetch(`${settings.ollamaApiAddress}/api/generate`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(requestBody)
-    });
-
-    if (!response.ok) {
-      const errorText = await response.text();
-      settings.addLog('error', { status: response.status, text: errorText });
-      throw new Error(`API error (${response.status}): ${errorText || response.statusText}`);
-    }
-
-    if (settings.enableStreaming) {
-      const reader = response.body?.getReader();
-      const decoder = new TextDecoder();
-      if (reader) {
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-          const chunk = decoder.decode(value, { stream: true });
-          const lines = chunk.split('\n');
-          for (const line of lines) {
-            if (!line.trim()) continue;
-            try {
-              const data = JSON.parse(line);
-              if (data.response) {
-                targetText.value += data.response;
-              }
-              if (data.done) {
-                settings.addLog('response', 'Stream finished');
-              }
-            } catch (e) {
-              settings.addLog('error', `Chunk parse error: ${line}`);
-            }
-          }
-        }
-      }
-    } else {
-      const data = await response.json();
-      settings.addLog('response', data);
-      targetText.value = data.response;
-    }
-  } catch (err: any) {
-    const errorMsg = err instanceof Error ? err.message : String(err);
-    settings.addLog('error', errorMsg);
-    targetText.value = `Error: ${errorMsg}`;
-  } finally {
-    isTranslating.value = false;
-  }
-};
 </script>

 <template>
-  <div class="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 font-sans selection:bg-blue-100 dark:selection:bg-blue-900 flex flex-col">
+  <div class="h-screen bg-slate-100/50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 font-sans selection:bg-blue-100 dark:selection:bg-blue-900 flex flex-col overflow-hidden">
    <!-- Header -->
-    <header class="h-14 border-b dark:border-slate-800 bg-white dark:bg-slate-900 flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm">
+    <header class="h-14 border-b dark:border-slate-800 bg-slate-50 dark:bg-slate-900 flex items-center justify-between px-6 shrink-0 sticky top-0 z-10 shadow-sm/5">
      <div class="flex items-center gap-2 cursor-pointer group" @click="view = 'translate'">
        <Languages class="w-6 h-6 text-blue-600 group-hover:scale-110 transition-transform" />
-        <h1 class="font-semibold text-lg tracking-tight">TranslateGemma</h1>
+        <h1 class="font-semibold text-lg tracking-tight">AI 翻译</h1>
      </div>
      <div class="flex items-center gap-2">
        <button 
          @click="toggleTheme"
-          class="p-2 rounded-full transition-colors hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300"
+          class="p-2 rounded-full transition-colors hover:bg-slate-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300"
          :title="settings.isDark ? '切换亮色主题' : '切换暗色主题'"
        >
          <Sun v-if="settings.isDark" class="w-5 h-5" />
@@ -217,266 +57,46 @@ const translate = async () => {
        </button>
        <button 
          @click="view = 'settings'"
-          :class="cn('p-2 rounded-full transition-colors', view === 'settings' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
+          :class="cn('p-2 rounded-full transition-colors', view === 'settings' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
          title="设置"
        >
          <Settings class="w-5 h-5" />
        </button>
        <button 
          @click="view = 'logs'"
-          :class="cn('p-2 rounded-full transition-colors', view === 'logs' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
-          title="调试日志"
+          :class="cn('p-2 rounded-full transition-colors', view === 'logs' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
+          title="日志"
        >
          <FileText class="w-5 h-5" />
        </button>
+        <button 
+          @click="view = 'history'"
+          :class="cn('p-2 rounded-full transition-colors', view === 'history' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'hover:bg-slate-200/50 dark:hover:bg-slate-800 text-slate-600 dark:text-slate-300')"
+          title="历史记录"
+        >
+          <Clock class="w-5 h-5" />
+        </button>
      </div>
    </header>

-    <main class="flex-1 flex overflow-hidden">
-      <!-- Translation View -->
-      <div v-if="view === 'translate'" class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x dark:divide-slate-800 bg-white dark:bg-slate-900 overflow-hidden">
-        <!-- Source Pane -->
-        <div class="flex-1 flex flex-col min-h-0 relative">
-          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 relative z-40">
-            <!-- Custom Source Dropdown -->
-            <div class="relative lang-dropdown min-w-[120px]">
-              <button 
-                @click.stop="toggleDropdown('source')"
-                class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors text-sm font-semibold text-slate-700 dark:text-slate-200 w-full justify-between group"
-              >
-                <span class="truncate">{{ sourceLang.displayName }}</span>
-                <ChevronDown :class="cn('w-4 h-4 text-slate-400 transition-transform duration-200', sourceDropdownOpen && 'rotate-180')" />
-              </button>
-              
-              <!-- Dropdown Menu -->
-              <transition
-                enter-active-class="transition duration-100 ease-out"
-                enter-from-class="transform scale-95 opacity-0"
-                enter-to-class="transform scale-100 opacity-100"
-                leave-active-class="transition duration-75 ease-in"
-                leave-from-class="transform scale-100 opacity-100"
-                leave-to-class="transform scale-95 opacity-0"
-              >
-                <div 
-                  v-if="sourceDropdownOpen"
-                  class="absolute left-0 mt-2 w-56 max-h-80 overflow-y-auto bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 z-50 py-2 py-1 flex flex-col custom-scrollbar"
-                >
-                  <button
-                    v-for="lang in LANGUAGES"
-                    :key="lang.code"
-                    @click="sourceLangCode = lang.code; sourceDropdownOpen = false"
-                    :class="cn(
-                      'px-4 py-2.5 text-sm text-left transition-colors flex items-center justify-between',
-                      sourceLangCode === lang.code ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50'
-                    )"
-                  >
-                    {{ lang.displayName }}
-                    <Check v-if="sourceLangCode === lang.code" class="w-3.5 h-3.5" />
-                  </button>
-                </div>
-              </transition>
-            </div>
-
-            <button @click="swapLanguages" class="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors" title="交换语言">
-              <ArrowRightLeft class="w-4 h-4 text-slate-500 dark:text-slate-400" />
-            </button>
-            <div class="ml-auto flex items-center gap-2">
-               <button @click="clearSource" class="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors" title="清空内容">
-                <Trash2 class="w-4 h-4 text-slate-500 dark:text-slate-400" />
-              </button>
-            </div>
-          </div>
-          <textarea
-            v-model="sourceText"
-            placeholder="请输入待翻译内容..."
-            class="flex-1 p-6 resize-none outline-none text-lg leading-relaxed placeholder:text-slate-300 dark:placeholder:text-slate-600 bg-transparent"
-          ></textarea>
-          <div class="p-4 border-t dark:border-slate-800 flex justify-end">
-            <button 
-              @click="translate"
-              :disabled="isTranslating || !sourceText.trim()"
-              class="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300 dark:disabled:bg-blue-900/40 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm"
-            >
-              <Loader2 v-if="isTranslating" class="w-4 h-4 animate-spin" />
-              <Send v-else class="w-4 h-4" />
-              {{ isTranslating ? '正在翻译...' : '翻译' }}
-            </button>
-          </div>
-        </div>
-
-        <!-- Target Pane -->
-        <div class="flex-1 flex flex-col min-h-0 bg-slate-50/30 dark:bg-slate-900/50 relative">
-          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-50/50 dark:bg-slate-800/30 relative z-40">
-            <!-- Custom Target Dropdown -->
-            <div class="relative lang-dropdown min-w-[120px]">
-              <button 
-                @click.stop="toggleDropdown('target')"
-                class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors text-sm font-semibold text-slate-700 dark:text-slate-200 w-full justify-between"
-              >
-                <span class="truncate">{{ targetLang.displayName }}</span>
-                <ChevronDown :class="cn('w-4 h-4 text-slate-400 transition-transform duration-200', targetDropdownOpen && 'rotate-180')" />
-              </button>
-              
-              <!-- Dropdown Menu -->
-              <transition
-                enter-active-class="transition duration-100 ease-out"
-                enter-from-class="transform scale-95 opacity-0"
-                enter-to-class="transform scale-100 opacity-100"
-                leave-active-class="transition duration-75 ease-in"
-                leave-from-class="transform scale-100 opacity-100"
-                leave-to-class="transform scale-95 opacity-0"
-              >
-                <div 
-                  v-if="targetDropdownOpen"
-                  class="absolute left-0 mt-2 w-56 max-h-80 overflow-y-auto bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 z-50 py-2 flex flex-col custom-scrollbar"
-                >
-                  <button
-                    v-for="lang in LANGUAGES"
-                    :key="lang.code"
-                    @click="targetLangCode = lang.code; targetDropdownOpen = false"
-                    :class="cn(
-                      'px-4 py-2.5 text-sm text-left transition-colors flex items-center justify-between',
-                      targetLangCode === lang.code ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50'
-                    )"
-                  >
-                    {{ lang.displayName }}
-                    <Check v-if="targetLangCode === lang.code" class="w-3.5 h-3.5" />
-                  </button>
-                </div>
-              </transition>
-            </div>
-            <div class="ml-auto flex items-center gap-2">
-              <button @click="copyTarget" class="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors relative" title="复制结果">
-                <Check v-if="showCopyFeedback" class="w-4 h-4 text-green-600" />
-                <Copy v-else class="w-4 h-4 text-slate-500 dark:text-slate-400" />
-              </button>
-            </div>
-          </div>
-          <div class="flex-1 p-6 overflow-y-auto text-lg leading-relaxed whitespace-pre-wrap">
-            <template v-if="targetText">
-              {{ targetText }}
-            </template>
-            <span v-else class="text-slate-300 dark:text-slate-600 italic">翻译结果将在此显示...</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Settings View -->
-      <div v-else-if="view === 'settings'" class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-950 p-6 md:p-10">
-        <div class="max-w-2xl mx-auto space-y-8">
-          <section>
-            <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">API 配置</h2>
-            <div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-6 space-y-4">
-              <div class="space-y-2">
-                <label class="text-sm font-medium text-slate-700 dark:text-slate-300">Ollama API 地址</label>
-                <input 
-                  v-model="settings.ollamaApiAddress"
-                  type="text" 
-                  class="w-full px-4 py-2 border dark:border-slate-700 rounded-lg bg-transparent focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-slate-900 dark:text-slate-100"
-                  placeholder="http://localhost:11434"
-                />
-              </div>
-              <div class="space-y-2">
-                <label class="text-sm font-medium text-slate-700 dark:text-slate-300">Ollama 模型名称</label>
-                <input 
-                  v-model="settings.modelName"
-                  type="text" 
-                  class="w-full px-4 py-2 border dark:border-slate-700 rounded-lg bg-transparent focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100"
-                  placeholder="translategemma:12b"
-                />
-              </div>
-              <div class="flex items-center justify-between">
-                <div>
-                  <label class="text-sm font-medium text-slate-700 dark:text-slate-300">启用流式输出</label>
-                  <p class="text-xs text-slate-500 dark:text-slate-500">在生成时即时渲染文本</p>
-                </div>
-                <button 
-                  @click="settings.enableStreaming = !settings.enableStreaming"
-                  :class="cn(
-                    'w-12 h-6 rounded-full transition-colors relative',
-                    settings.enableStreaming ? 'bg-blue-600' : 'bg-slate-300 dark:bg-slate-700'
-                  )"
-                >
-                  <div :class="cn(
-                    'absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform',
-                    settings.enableStreaming ? 'translate-x-6' : 'translate-x-0'
-                  )"></div>
-                </button>
-              </div>
-            </div>
-          </section>
-
-          <section>
-            <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">提示词工程</h2>
-            <div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-6">
-              <div class="space-y-2">
-                <div class="flex items-center justify-between">
-                  <label class="text-sm font-medium text-slate-700 dark:text-slate-300">系统提示词模板</label>
-                  <button @click="settings.systemPromptTemplate = DEFAULT_TEMPLATE" class="text-xs text-blue-600 dark:text-blue-400 hover:underline">恢复默认值</button>
-                </div>
-                <textarea 
-                  v-model="settings.systemPromptTemplate"
-                  rows="9"
-                  class="w-full px-4 py-3 border dark:border-slate-700 rounded-lg bg-transparent focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-xs leading-relaxed text-slate-900 dark:text-slate-100"
-                ></textarea>
-                <div class="flex flex-wrap gap-2 mt-2">
-                   <span v-for="tag in ['{SOURCE_LANG}', '{SOURCE_CODE}', '{TARGET_LANG}', '{TARGET_CODE}', '{TEXT}']" :key="tag" class="px-2 py-1 bg-slate-100 dark:bg-slate-800 text-[10px] font-mono rounded border dark:border-slate-700 text-slate-600 dark:text-slate-400">{{ tag }}</span>
-                </div>
-              </div>
-            </div>
-          </section>
-        </div>
-      </div>
-
-      <!-- Logs View -->
-      <div v-else-if="view === 'logs'" class="flex-1 overflow-y-auto bg-slate-50 dark:bg-slate-950 p-6 md:p-10">
-        <div class="max-w-3xl mx-auto space-y-6">
-          <div class="flex items-center justify-between">
-            <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">调试日志</h2>
-            <button 
-              @click="settings.logs = []" 
-              class="text-xs text-red-600 dark:text-red-400 hover:underline flex items-center gap-1"
-            >
-              <Trash2 class="w-3 h-3" />
-              清空
-            </button>
-          </div>
-          <div class="bg-white dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-4 space-y-4">
-            <div v-if="settings.logs.length === 0" class="text-sm text-slate-400 dark:text-slate-500 text-center py-10 italic">
-              暂无日志记录。请尝试进行翻译。
-            </div>
-            <div 
-              v-for="(log, idx) in settings.logs" 
-              :key="idx" 
-              class="text-[11px] font-mono border-b dark:border-slate-800 last:border-0 pb-4 flex flex-col gap-2"
-            >
-              <div class="flex items-center gap-2">
-                <span class="text-slate-400 dark:text-slate-500">[{{ log.timestamp }}]</span>
-                <span 
-                  :class="cn(
-                    'px-2 py-0.5 rounded uppercase font-bold text-[11px]',
-                    log.type === 'request' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300' :
-                    log.type === 'response' ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300' :
-                    'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
-                  )"
-                >{{ log.type === 'request' ? '请求' : log.type === 'response' ? '响应' : '错误' }}</span>
-              </div>
-              <pre class="bg-slate-50 dark:bg-slate-800/50 p-3 rounded-lg overflow-x-auto text-slate-600 dark:text-slate-300 max-h-48 leading-relaxed shadow-inner border border-slate-100 dark:border-slate-700">{{ typeof log.content === 'object' ? JSON.stringify(log.content, null, 2) : log.content }}</pre>
-            </div>
-          </div>
-        </div>
-      </div>
+    <main class="flex-1 flex overflow-hidden min-h-0 relative">
+      <!-- Container for isolated views with keep-alive -->
+      <keep-alive>
+        <TranslationView v-if="view === 'translate'" />
+        <SettingsView v-else-if="view === 'settings'" />
+        <LogsView v-else-if="view === 'logs'" />
+        <HistoryView v-else-if="view === 'history'" />
+      </keep-alive>
    </main>

    <!-- Footer -->
-    <footer class="h-8 bg-slate-100 dark:bg-slate-900 border-t dark:border-slate-800 flex items-center px-4 justify-between shrink-0">
+    <footer class="h-8 bg-slate-200/40 dark:bg-slate-900 border-t dark:border-slate-800 flex items-center px-4 justify-between shrink-0">
      <div class="text-[10px] text-slate-400 dark:text-slate-500">
-        {{ settings.ollamaApiAddress }}
+        {{ settings.modelName }}
      </div>
      <div class="text-[10px] text-slate-400 dark:text-slate-500">
-        GemmaTrans v{{ pkg.version }}
+        Client v{{ pkg.version }}
      </div>
    </footer>
  </div>
 </template>
-
--- a/src/components/HistoryView.vue
+++ b/src/components/HistoryView.vue
@@ -0,0 +1,197 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { Clock, Search, ArrowRightLeft, Trash2, User, Type, Copy, Check, FileText } from 'lucide-vue-next';
+import { useSettingsStore, SPEAKER_IDENTITY_OPTIONS, TONE_REGISTER_OPTIONS } from '../stores/settings';
+import { cn } from '../lib/utils';
+import { useClipboard } from '../composables/useClipboard';
+
+const settings = useSettingsStore();
+const { activeCopyId, copyWithFeedback } = useClipboard();
+
+const searchQuery = ref('');
+const selectedHistoryId = ref<string | null>(null);
+
+const filteredHistory = computed(() => {
+  if (!searchQuery.value.trim()) return settings.history;
+  const q = searchQuery.value.toLowerCase();
+  return settings.history.filter(h => 
+    h.sourceText.toLowerCase().includes(q) || 
+    h.targetText.toLowerCase().includes(q)
+  );
+});
+
+const selectedHistoryItem = computed(() => 
+  settings.history.find(h => h.id === selectedHistoryId.value) || null
+);
+
+watch(filteredHistory, (newVal) => {
+  if (newVal.length > 0 && !selectedHistoryId.value) {
+    selectedHistoryId.value = newVal[0].id;
+  }
+}, { immediate: true });
+
+const deleteHistoryItem = (id: string) => {
+  settings.history = settings.history.filter(h => h.id !== id);
+  if (selectedHistoryId.value === id) {
+    selectedHistoryId.value = filteredHistory.value[0]?.id || null;
+  }
+};
+</script>
+<template>
+<!-- History View -->
+      <div  class="flex-1 flex overflow-hidden bg-slate-100/50 dark:bg-slate-950">
+        <!-- History List (Master) -->
+        <div class="w-80 md:w-96 border-r dark:border-slate-800 flex flex-col bg-white/60 dark:bg-slate-900/40">
+          <div class="p-4 border-b dark:border-slate-800 space-y-3">
+            <div class="relative group">
+              <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 group-focus-within:text-blue-500 transition-colors" />
+              <input 
+                v-model="searchQuery"
+                type="text"
+                placeholder="搜索历史记录..."
+                class="w-full pl-9 pr-4 py-2 bg-slate-100 dark:bg-slate-800 border-none rounded-lg text-sm outline-none focus:ring-2 focus:ring-blue-500/20 transition-all dark:text-slate-200"
+              />
+            </div>
+            <div class="flex items-center justify-between px-1">
+              <span class="text-[11px] font-bold text-slate-400 uppercase tracking-wider">共 {{ filteredHistory.length }} 条记录</span>
+              <button 
+                @click="settings.history = []"
+                class="text-[11px] text-red-500 hover:underline font-medium"
+              >清空全部</button>
+            </div>
+          </div>
+          
+          <div class="flex-1 overflow-y-auto custom-scrollbar p-2 space-y-1">
+            <div v-if="filteredHistory.length === 0" class="py-20 text-center space-y-2">
+              <Clock class="w-10 h-10 text-slate-200 dark:text-slate-800 mx-auto" />
+              <p class="text-sm text-slate-400 italic">暂无相关历史</p>
+            </div>
+            <div
+              v-for="item in filteredHistory"
+              :key="item.id"
+              @click="selectedHistoryId = item.id"
+              :class="cn(
+                'w-full p-4 rounded-xl text-left transition-all border group relative cursor-pointer',
+                selectedHistoryId === item.id 
+                  ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-100 dark:border-blue-900/50 shadow-sm' 
+                  : 'hover:bg-slate-100 dark:hover:bg-slate-800/50 border-transparent'
+              )"
+            >
+              <div class="flex items-center justify-between mb-2">
+                <div class="flex items-center gap-1.5">
+                  <span class="text-[10px] font-bold px-1.5 py-0.5 rounded bg-slate-200 dark:bg-slate-800 text-slate-500 dark:text-slate-400 uppercase">{{ item.sourceLang.code }}</span>
+                  <ArrowRightLeft class="w-3 h-3 text-slate-300" />
+                  <span class="text-[10px] font-bold px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-400 uppercase">{{ item.targetLang.code }}</span>
+                </div>
+                <span class="text-[10px] text-slate-400 font-mono">{{ item.timestamp.split(' ')[1].substring(0, 5) }}</span>
+              </div>
+              <p class="text-xs text-slate-700 dark:text-slate-200 font-medium line-clamp-2 leading-relaxed mb-1">{{ item.sourceText }}</p>
+              <p class="text-[11px] text-slate-400 dark:text-slate-500 line-clamp-1 italic">{{ item.targetText }}</p>
+              
+              <button 
+                @click.stop="deleteHistoryItem(item.id)"
+                class="absolute right-2 bottom-2 p-1.5 rounded-md text-red-400 opacity-0 group-hover:opacity-100 hover:bg-red-50 dark:hover:bg-red-900/30 transition-all"
+                title="删除此记录"
+              >
+                <Trash2 class="w-3.5 h-3.5" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- History Detail (Detail) -->
+        <div class="flex-1 flex flex-col min-w-0 bg-white dark:bg-slate-900">
+          <template v-if="selectedHistoryItem">
+            <div class="p-6 border-b dark:border-slate-800 flex items-center justify-between shrink-0 bg-slate-50/50 dark:bg-slate-800/20">
+              <div class="flex flex-col gap-1">
+                <div class="flex items-center gap-3">
+                  <h2 class="text-lg font-bold text-slate-800 dark:text-slate-100">翻译详情</h2>
+                  <span class="text-[11px] font-mono text-slate-400 bg-slate-100 dark:bg-slate-800 px-2 py-0.5 rounded">{{ selectedHistoryItem.timestamp }}</span>
+                </div>
+                <div class="flex items-center gap-3 text-xs text-slate-500">
+                  <div class="flex items-center gap-1">
+                    <User class="w-3 h-3" />
+                    {{ SPEAKER_IDENTITY_OPTIONS.find(o => o.value === (selectedHistoryItem?.speakerIdentity))?.label || selectedHistoryItem?.speakerIdentity }}
+                  </div>
+                  <span>•</span>
+                  <div class="flex items-center gap-1">
+                    <Type class="w-3 h-3" />
+                    {{ TONE_REGISTER_OPTIONS.find(o => o.value === (selectedHistoryItem?.toneRegister))?.label || selectedHistoryItem?.toneRegister }}
+                  </div>
+                  <span>•</span>
+                  <div class="font-mono text-[10px]">{{ selectedHistoryItem.modelName }}</div>
+                </div>
+              </div>
+              <div class="flex items-center gap-2">
+                 <button 
+                    @click="deleteHistoryItem(selectedHistoryItem.id)"
+                    class="flex items-center gap-2 px-3 py-2 text-xs font-medium text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors"
+                  >
+                    <Trash2 class="w-4 h-4" />
+                    删除记录
+                  </button>
+              </div>
+            </div>
+
+            <div class="flex-1 overflow-y-auto p-8 space-y-10 custom-scrollbar">
+              <!-- Source -->
+              <section class="space-y-4">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-2">
+                    <div class="w-1.5 h-4 bg-slate-300 dark:bg-slate-700 rounded-full"></div>
+                    <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest">{{ selectedHistoryItem.sourceLang.displayName }} (原文)</h3>
+                  </div>
+                  <button 
+                    @click="copyWithFeedback(selectedHistoryItem.sourceText, `history-source-${selectedHistoryItem.id}`)"
+                    class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg text-slate-400 transition-colors"
+                  >
+                    <Check v-if="activeCopyId === `history-source-${selectedHistoryItem.id}`" class="w-4 h-4 text-green-600" />
+                    <Copy v-else class="w-4 h-4" />
+                  </button>
+                </div>
+                <div class="bg-slate-50 dark:bg-slate-800/30 p-6 rounded-2xl border border-slate-100 dark:border-slate-800 text-lg leading-relaxed text-slate-700 dark:text-slate-200 whitespace-pre-wrap">
+                  {{ selectedHistoryItem.sourceText }}
+                </div>
+              </section>
+
+              <!-- Context if exists -->
+              <section v-if="selectedHistoryItem.context" class="space-y-4">
+                 <div class="flex items-center gap-2">
+                    <FileText class="w-4 h-4 text-slate-300" />
+                    <h3 class="text-xs font-black text-slate-400 uppercase tracking-widest">情景背景</h3>
+                  </div>
+                  <div class="bg-amber-50/30 dark:bg-amber-900/10 p-4 rounded-xl border border-amber-100/50 dark:border-amber-900/20 text-sm italic text-slate-500 dark:text-slate-400 leading-relaxed">
+                    {{ selectedHistoryItem.context }}
+                  </div>
+              </section>
+
+              <!-- Target -->
+              <section class="space-y-4">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-2">
+                    <div class="w-1.5 h-4 bg-blue-500 rounded-full"></div>
+                    <h3 class="text-xs font-black text-blue-500/60 uppercase tracking-widest">{{ selectedHistoryItem.targetLang.displayName }} (译文)</h3>
+                  </div>
+                  <button 
+                    @click="copyWithFeedback(selectedHistoryItem.targetText, `history-target-${selectedHistoryItem.id}`)"
+                    class="p-2 bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/50 rounded-lg text-blue-600 dark:text-blue-400 transition-colors"
+                  >
+                    <Check v-if="activeCopyId === `history-target-${selectedHistoryItem.id}`" class="w-4 h-4 text-green-600" />
+                    <Copy v-else class="w-4 h-4" />
+                  </button>
+                </div>
+                <div class="bg-blue-50/20 dark:bg-blue-900/10 p-6 rounded-2xl border border-blue-100/50 dark:border-blue-900/20 text-xl leading-relaxed font-medium text-slate-800 dark:text-slate-100 whitespace-pre-wrap shadow-sm">
+                  {{ selectedHistoryItem.targetText }}
+                </div>
+              </section>
+            </div>
+          </template>
+          <div v-else class="flex-1 flex flex-col items-center justify-center text-slate-300 dark:text-slate-800 p-10 text-center space-y-4">
+             <div class="w-20 h-20 rounded-full bg-slate-50 dark:bg-slate-800/50 flex items-center justify-center">
+                <Clock class="w-10 h-10 opacity-20" />
+             </div>
+             <p class="text-sm font-medium">请从左侧选择一条历史记录查看详情</p>
+          </div>
+        </div>
+      </div>
+</template>
--- a/src/components/LogsView.vue
+++ b/src/components/LogsView.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { FileText, Check, Copy } from 'lucide-vue-next';
+import { useSettingsStore } from '../stores/settings';
+import { cn } from '../lib/utils';
+import { useClipboard } from '../composables/useClipboard';
+
+const settings = useSettingsStore();
+const { activeCopyId, copyWithFeedback } = useClipboard();
+
+const selectedLogId = ref<string | null>(null);
+const selectedLogItem = computed(() => 
+  settings.logs.find(l => l.id === selectedLogId.value) || null
+);
+
+watch(() => settings.logs, (newVal) => {
+  if (newVal.length > 0 && !selectedLogId.value) {
+    selectedLogId.value = newVal[0].id;
+  }
+}, { immediate: true });
+
+const decodeUnicode = (str: string) => {
+  if (!str) return str;
+  try {
+    return str.replace(/\\u([0-9a-fA-F]{4})/g, (_match, grp) => {
+      return String.fromCharCode(parseInt(grp, 16));
+    });
+  } catch {
+    return str;
+  }
+};
+
+const getLogSummary = (log: any) => {
+  if (log.type === 'error') return String(log.content);
+  if (typeof log.content === 'string') return decodeUnicode(log.content);
+  if (log.content && log.content.model) return `Model: ${log.content.model}`;
+  if (log.content && log.content.score) return `Score: ${log.content.score}`;
+  return 'JSON Data';
+};
+</script>
+<template>
+<!-- Logs View -->
+      <div  class="flex-1 flex overflow-hidden bg-slate-100/50 dark:bg-slate-950">
+        <!-- Logs List (Master) -->
+        <div class="w-80 md:w-96 border-r dark:border-slate-800 flex flex-col bg-white/60 dark:bg-slate-900/40">
+          <div class="p-4 border-b dark:border-slate-800 space-y-3">
+             <div class="flex items-center justify-between">
+              <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">系统日志</h2>
+              <button 
+                @click="settings.logs = []" 
+                class="text-[11px] text-red-500 hover:underline font-medium flex items-center gap-1"
+              >
+                清空全部
+              </button>
+            </div>
+          </div>
+          
+          <div class="flex-1 overflow-y-auto custom-scrollbar p-2 space-y-1">
+            <div v-if="settings.logs.length === 0" class="py-20 text-center space-y-2">
+              <FileText class="w-10 h-10 text-slate-200 dark:text-slate-800 mx-auto" />
+              <p class="text-sm text-slate-400 italic">暂无日志记录</p>
+            </div>
+            <div
+              v-for="log in settings.logs"
+              :key="log.id"
+              @click="selectedLogId = log.id"
+              :class="cn(
+                'w-full p-4 rounded-xl text-left transition-all border group relative cursor-pointer',
+                selectedLogId === log.id 
+                  ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-100 dark:border-blue-900/50 shadow-sm' 
+                  : 'hover:bg-slate-100 dark:hover:bg-slate-800/50 border-transparent'
+              )"
+            >
+              <div class="flex items-center justify-between mb-2">
+                <span 
+                  :class="cn(
+                    'px-2 py-0.5 rounded uppercase font-bold text-[10px]',
+                    log.type === 'request' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300' :
+                    log.type === 'response' ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300' :
+                    'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
+                  )"
+                >{{ log.type === 'request' ? '请求' : log.type === 'response' ? '响应' : '错误' }}</span>
+                <span class="text-[10px] text-slate-400 font-mono">{{ log.timestamp.split(' ')[1] }}</span>
+              </div>
+              <p class="text-[11px] text-slate-500 dark:text-slate-400 line-clamp-2 font-mono leading-relaxed">{{ getLogSummary(log) }}</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Log Detail (Detail) -->
+        <div class="flex-1 flex flex-col min-w-0 bg-white dark:bg-slate-900">
+          <template v-if="selectedLogItem">
+            <div class="p-6 border-b dark:border-slate-800 flex items-center justify-between shrink-0 bg-slate-50/50 dark:bg-slate-800/20">
+              <div class="flex items-center gap-3">
+                <h2 class="text-lg font-bold text-slate-800 dark:text-slate-100">日志详情</h2>
+                <span class="text-[11px] font-mono text-slate-400 bg-slate-100 dark:bg-slate-800 px-2 py-0.5 rounded">{{ selectedLogItem.timestamp }}</span>
+                <span 
+                  :class="cn(
+                    'px-2 py-0.5 rounded uppercase font-bold text-[10px]',
+                    selectedLogItem.type === 'request' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300' :
+                    selectedLogItem.type === 'response' ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300' :
+                    'bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300'
+                  )"
+                >{{ selectedLogItem.type === 'request' ? 'Request' : selectedLogItem.type === 'response' ? 'Response' : 'Error' }}</span>
+              </div>
+              <div class="flex gap-2">
+                <button 
+                  v-if="selectedLogItem.curl"
+                  @click="copyWithFeedback(decodeUnicode(selectedLogItem.curl), `curl-${selectedLogItem.id}`)"
+                  class="flex items-center gap-2 px-3 py-2 text-xs font-medium text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/30 rounded-lg transition-colors border border-blue-100 dark:border-blue-900/50"
+                >
+                  <Check v-if="activeCopyId === `curl-${selectedLogItem.id}`" class="w-4 h-4" />
+                  <Copy v-else class="w-4 h-4" />
+                  复制 cURL
+                </button>
+                <button 
+                  @click="copyWithFeedback(decodeUnicode(typeof selectedLogItem.content === 'object' ? JSON.stringify(selectedLogItem.content, null, 2) : String(selectedLogItem.content)), `log-${selectedLogItem.id}`)"
+                  class="flex items-center gap-2 px-3 py-2 text-xs font-medium text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800 rounded-lg transition-colors border border-slate-200 dark:border-slate-700"
+                >
+                  <Check v-if="activeCopyId === `log-${selectedLogItem.id}`" class="w-4 h-4 text-green-600" />
+                  <Copy v-else class="w-4 h-4" />
+                  复制内容
+                </button>
+              </div>
+            </div>
+
+            <div class="flex-1 overflow-auto p-6 bg-slate-50/30 dark:bg-slate-900/50 custom-scrollbar space-y-6">
+               <div v-if="selectedLogItem.curl" class="space-y-2">
+                  <h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest px-1">cURL 请求命令</h3>
+                  <pre class="font-mono text-[11px] leading-relaxed p-4 bg-slate-950 text-blue-400 rounded-xl border border-slate-800 whitespace-pre-wrap break-all shadow-inner">{{ decodeUnicode(selectedLogItem.curl) }}</pre>
+               </div>
+               
+               <div class="space-y-2">
+                  <h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest px-1">{{ selectedLogItem.type === 'request' ? 'Payload (JSON)' : 'Response Data' }}</h3>
+                  <pre class="font-mono text-[11px] leading-relaxed p-4 bg-slate-950 text-slate-300 rounded-xl border border-slate-800 whitespace-pre-wrap break-all shadow-inner">{{ decodeUnicode(typeof selectedLogItem.content === 'object' ? JSON.stringify(selectedLogItem.content, null, 2) : selectedLogItem.content) }}</pre>
+               </div>
+            </div>
+          </template>
+          <div v-else class="flex-1 flex flex-col items-center justify-center text-slate-300 dark:text-slate-800 p-10 text-center space-y-4">
+             <div class="w-20 h-20 rounded-full bg-slate-50 dark:bg-slate-800/50 flex items-center justify-center">
+                <FileText class="w-10 h-10 opacity-20" />
+             </div>
+             <p class="text-sm font-medium">请从左侧选择一条日志查看详情</p>
+          </div>
+        </div>
+      </div>
+</template>
--- a/src/components/SettingsView.vue
+++ b/src/components/SettingsView.vue
@@ -0,0 +1,496 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { Play, Settings, Type, Save, Check, Plus, Trash2, ChevronDown, Eye, EyeOff, Pencil } from 'lucide-vue-next';
+import { useSettingsStore, DEFAULT_TEMPLATE, DEFAULT_EVALUATION_TEMPLATE, DEFAULT_REFINEMENT_TEMPLATE, type ApiProfile } from '../stores/settings';
+import { cn } from '../lib/utils';
+
+const settings = useSettingsStore();
+const settingsCategory = ref<'api' | 'general' | 'prompts'>('api');
+const showApiKey = ref(false);
+
+const newProfileName = ref('');
+const isSavingProfile = ref(false);
+
+const saveCurrentAsProfile = () => {
+  if (!newProfileName.value.trim()) return;
+  const newProfile: ApiProfile = {
+    id: crypto.randomUUID(),
+    name: newProfileName.value.trim(),
+    apiBaseUrl: settings.apiBaseUrl,
+    apiKey: settings.apiKey,
+    modelName: settings.modelName
+  };
+  settings.profiles.push(newProfile);
+  newProfileName.value = '';
+  isSavingProfile.value = false;
+};
+
+const applyProfile = (p: ApiProfile) => {
+  settings.apiBaseUrl = p.apiBaseUrl;
+  settings.apiKey = p.apiKey;
+  settings.modelName = p.modelName;
+};
+
+const deleteProfile = (id: string) => {
+  settings.profiles = settings.profiles.filter(p => p.id !== id);
+};
+
+const editingProfileId = ref<string | null>(null);
+const editProfileForm = ref<ApiProfile | null>(null);
+const showEditApiKey = ref(false);
+
+const startEditProfile = (profile: ApiProfile) => {
+  editingProfileId.value = profile.id;
+  editProfileForm.value = { ...profile };
+  showEditApiKey.value = false;
+};
+
+const cancelEditProfile = () => {
+  editingProfileId.value = null;
+  editProfileForm.value = null;
+};
+
+const saveEditProfile = () => {
+  if (!editProfileForm.value || !editingProfileId.value) return;
+  if (!editProfileForm.value.name.trim()) return;
+  
+  const index = settings.profiles.findIndex(p => p.id === editingProfileId.value);
+  if (index !== -1) {
+    settings.profiles[index] = { ...editProfileForm.value };
+  }
+  
+  editingProfileId.value = null;
+  editProfileForm.value = null;
+};
+
+const evaluationProfileDropdownOpen = ref(false);
+const toggleDropdown = (type: string) => {
+  if (type === 'evaluationProfile') evaluationProfileDropdownOpen.value = !evaluationProfileDropdownOpen.value;
+};
+
+const currentEvaluationProfileLabel = computed(() => {
+  if (!settings.evaluationProfileId) return '使用主翻译配置（默认）';
+  const profile = settings.profiles.find(p => p.id === settings.evaluationProfileId);
+  return profile ? `${profile.name} — ${profile.modelName}` : '使用主翻译配置（默认）';
+});
+
+const handleGlobalClick = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (!target.closest('.lang-dropdown')) {
+    evaluationProfileDropdownOpen.value = false;
+  }
+};
+
+onMounted(() => window.addEventListener('click', handleGlobalClick));
+onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
+</script>
+<template>
+<!-- Settings View -->
+      <div  class="flex-1 flex overflow-hidden bg-slate-100/50 dark:bg-slate-950">
+        <!-- Settings Sidebar (Master) -->
+        <div class="w-64 border-r dark:border-slate-800 flex flex-col bg-white/60 dark:bg-slate-900/40">
+          <div class="p-4 border-b dark:border-slate-800 shrink-0">
+             <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">系统设置</h2>
+          </div>
+          <nav class="flex-1 overflow-y-auto p-3 space-y-1">
+            <button 
+              @click="settingsCategory = 'api'"
+              :class="cn(
+                'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
+                settingsCategory === 'api' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800/50'
+              )"
+            >
+              <div :class="cn('p-1.5 rounded-md', settingsCategory === 'api' ? 'bg-blue-100 dark:bg-blue-900/50' : 'bg-slate-100 dark:bg-slate-800')">
+                <Play class="w-4 h-4" />
+              </div>
+              API 与模型
+            </button>
+            <button 
+              @click="settingsCategory = 'general'"
+              :class="cn(
+                'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
+                settingsCategory === 'general' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800/50'
+              )"
+            >
+              <div :class="cn('p-1.5 rounded-md', settingsCategory === 'general' ? 'bg-blue-100 dark:bg-blue-900/50' : 'bg-slate-100 dark:bg-slate-800')">
+                <Settings class="w-4 h-4" />
+              </div>
+              常规设置
+            </button>
+            <button 
+              @click="settingsCategory = 'prompts'"
+              :class="cn(
+                'w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors',
+                settingsCategory === 'prompts' ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400' : 'text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-800/50'
+              )"
+            >
+              <div :class="cn('p-1.5 rounded-md', settingsCategory === 'prompts' ? 'bg-blue-100 dark:bg-blue-900/50' : 'bg-slate-100 dark:bg-slate-800')">
+                <Type class="w-4 h-4" />
+              </div>
+              提示词工程
+            </button>
+          </nav>
+        </div>
+
+        <!-- Settings Content (Detail) -->
+        <div class="flex-1 overflow-y-auto p-6 md:p-10 custom-scrollbar bg-slate-50/30 dark:bg-transparent">
+          <div class="max-w-3xl mx-auto space-y-8 pb-20">
+            
+            <!-- API & Models -->
+            <template v-if="settingsCategory === 'api'">
+              <div class="mb-6 border-b dark:border-slate-800 pb-4">
+                <h1 class="text-2xl font-bold text-slate-800 dark:text-slate-100">API 与模型</h1>
+                <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">配置与大语言模型通信的接口地址和凭证。</p>
+              </div>
+
+              <section>
+                <div class="flex items-center justify-between mb-4">
+                  <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">当前接口配置</h2>
+                  <div v-if="!isSavingProfile" class="flex items-center gap-2">
+                     <button 
+                      @click="isSavingProfile = true"
+                      class="text-xs flex items-center gap-1.5 text-blue-600 dark:text-blue-400 hover:underline px-2 py-1 rounded"
+                    >
+                      <Save class="w-3.5 h-3.5" />
+                      保存为预设
+                    </button>
+                  </div>
+                  <div v-else class="flex items-center gap-2 bg-white dark:bg-slate-800 p-1 rounded-lg border dark:border-slate-700 shadow-sm animate-in fade-in zoom-in duration-200">
+                    <input 
+                      v-model="newProfileName"
+                      type="text"
+                      placeholder="输入预设名称..."
+                      class="text-xs px-2 py-1 bg-transparent outline-none w-32 dark:text-slate-200"
+                      @keyup.enter="saveCurrentAsProfile"
+                    />
+                    <button 
+                      @click="saveCurrentAsProfile"
+                      :disabled="!newProfileName.trim()"
+                      class="p-1 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/30 rounded disabled:opacity-50"
+                    >
+                      <Check class="w-3.5 h-3.5" />
+                    </button>
+                    <button 
+                      @click="isSavingProfile = false; newProfileName = ''"
+                      class="p-1 text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 rounded"
+                    >
+                      <Plus class="w-3.5 h-3.5 rotate-45" />
+                    </button>
+                  </div>
+                </div>
+                <div class="bg-white/80 dark:bg-slate-900 rounded-2xl shadow-sm border dark:border-slate-800 p-6 space-y-4">
+                  <div class="space-y-2">
+                    <label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Base URL</label>
+                    <input 
+                      v-model="settings.apiBaseUrl"
+                      type="text" 
+                      class="w-full px-4 py-2.5 border dark:border-slate-700 rounded-xl bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100"
+                      placeholder="https://api.openai.com/v1"
+                    />
+                  </div>
+                  <div class="space-y-2">
+                    <label class="text-sm font-medium text-slate-700 dark:text-slate-300">API Key</label>
+                    <div class="relative">
+                      <input 
+                        v-model="settings.apiKey"
+                        :type="showApiKey ? 'text' : 'password'" 
+                        class="w-full pl-4 pr-12 py-2.5 border dark:border-slate-700 rounded-xl bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100"
+                        placeholder="sk-..."
+                      />
+                      <button 
+                        @click="showApiKey = !showApiKey"
+                        type="button"
+                        class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors focus:outline-none"
+                      >
+                        <Eye v-if="showApiKey" class="w-5 h-5" />
+                        <EyeOff v-else class="w-5 h-5" />
+                      </button>
+                    </div>
+                  </div>
+                  <div class="space-y-2">
+                    <label class="text-sm font-medium text-slate-700 dark:text-slate-300">Model Name</label>
+                    <input 
+                      v-model="settings.modelName"
+                      type="text" 
+                      class="w-full px-4 py-2.5 border dark:border-slate-700 rounded-xl bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100"
+                      placeholder="gpt-3.5-turbo"
+                    />
+                  </div>
+                </div>
+              </section>
+
+              <section>
+                <h2 class="text-sm font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-4">API 配置预设库</h2>
+                <div class="bg-slate-200/20 dark:bg-slate-900 rounded-xl shadow-sm border dark:border-slate-800 p-2 space-y-1">
+                  <div v-if="settings.profiles.length === 0" class="p-8 text-center text-sm text-slate-400 dark:text-slate-600 italic">
+                    暂无预设配置。修改上方配置并点击“保存为预设”。
+                  </div>
+                  <div 
+                    v-for="profile in settings.profiles" 
+                    :key="profile.id"
+                  >
+                    <!-- 编辑模式 -->
+                    <div v-if="editingProfileId === profile.id && editProfileForm" class="p-4 bg-white dark:bg-slate-800/80 rounded-xl border border-blue-200 dark:border-blue-800/50 shadow-sm space-y-3 my-1">
+                      <div class="space-y-1.5">
+                        <label class="text-[11px] font-medium text-slate-500 uppercase tracking-wider">预设名称</label>
+                        <input v-model="editProfileForm.name" type="text" class="w-full px-3 py-2 border dark:border-slate-700 rounded-lg bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all text-sm text-slate-900 dark:text-slate-100" placeholder="预设名称" />
+                      </div>
+                      <div class="space-y-1.5">
+                        <label class="text-[11px] font-medium text-slate-500 uppercase tracking-wider">API Base URL</label>
+                        <input v-model="editProfileForm.apiBaseUrl" type="text" class="w-full px-3 py-2 border dark:border-slate-700 rounded-lg bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100" />
+                      </div>
+                      <div class="space-y-1.5">
+                        <label class="text-[11px] font-medium text-slate-500 uppercase tracking-wider">API Key</label>
+                        <div class="relative">
+                          <input v-model="editProfileForm.apiKey" :type="showEditApiKey ? 'text' : 'password'" class="w-full pl-3 pr-10 py-2 border dark:border-slate-700 rounded-lg bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100" />
+                          <button @click="showEditApiKey = !showEditApiKey" type="button" class="absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors focus:outline-none p-1">
+                            <Eye v-if="showEditApiKey" class="w-4 h-4" />
+                            <EyeOff v-else class="w-4 h-4" />
+                          </button>
+                        </div>
+                      </div>
+                      <div class="space-y-1.5">
+                        <label class="text-[11px] font-medium text-slate-500 uppercase tracking-wider">Model Name</label>
+                        <input v-model="editProfileForm.modelName" type="text" class="w-full px-3 py-2 border dark:border-slate-700 rounded-lg bg-slate-50/50 dark:bg-slate-950 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 outline-none transition-all font-mono text-sm text-slate-900 dark:text-slate-100" />
+                      </div>
+                      <div class="flex items-center justify-end gap-2 pt-2">
+                        <button @click="cancelEditProfile" class="px-4 py-2 text-xs font-medium text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 rounded-lg transition-colors">取消</button>
+                        <button @click="saveEditProfile" :disabled="!editProfileForm.name.trim()" class="px-4 py-2 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg transition-colors">保存修改</button>
+                      </div>
+                    </div>
+
+                    <!-- 正常显示模式 -->
+                    <div v-else class="p-3 flex items-center justify-between group hover:bg-white dark:hover:bg-slate-800 transition-colors rounded-lg border border-transparent hover:border-slate-200 dark:hover:border-slate-700">
+                      <div class="flex flex-col gap-1 min-w-0">
+                        <span class="text-sm font-bold text-slate-700 dark:text-slate-200 truncate">{{ profile.name }}</span>
+                        <div class="flex items-center gap-2 text-[10px] text-slate-500 dark:text-slate-400 font-mono bg-slate-100 dark:bg-slate-950 px-2 py-0.5 rounded w-fit">
+                          <span class="truncate max-w-32">{{ profile.modelName }}</span>
+                          <span class="opacity-30">•</span>
+                          <span class="truncate max-w-48">{{ profile.apiBaseUrl }}</span>
+                        </div>
+                      </div>
+                      <div class="flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <button 
+                          @click="applyProfile(profile)"
+                          class="flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 text-blue-600 hover:bg-blue-100 dark:bg-blue-900/30 dark:text-blue-400 dark:hover:bg-blue-900/50 rounded-lg transition-colors text-xs font-medium shadow-sm"
+                        >
+                          <Play class="w-3 h-3 fill-current" />
+                          应用
+                        </button>
+                        <button 
+                          @click="startEditProfile(profile)"
+                          class="p-1.5 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/30 rounded-lg transition-colors"
+                          title="编辑"
+                        >
+                          <Pencil class="w-4 h-4" />
+                        </button>
+                        <button 
+                          @click="deleteProfile(profile.id)"
+                          class="p-1.5 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg transition-colors"
+                          title="删除"
+                        >
+                          <Trash2 class="w-4 h-4" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>                </div>
+              </section>
+            </template>
+
+            <!-- General Settings -->
+            <template v-if="settingsCategory === 'general'">
+              <div class="mb-6 border-b dark:border-slate-800 pb-4">
+                <h1 class="text-2xl font-bold text-slate-800 dark:text-slate-100">常规设置</h1>
+                <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">调整软件的翻译行为和质量审计规则。</p>
+              </div>
+
+              <div class="bg-white/80 dark:bg-slate-900 rounded-2xl shadow-sm border dark:border-slate-800 p-6 space-y-6">
+                <!-- Streaming -->
+                <div class="flex items-center justify-between">
+                  <div class="space-y-0.5">
+                    <label class="text-sm font-semibold text-slate-800 dark:text-slate-200">流式输出</label>
+                    <p class="text-xs text-slate-500 dark:text-slate-400">在模型生成文本时逐字渲染，提升响应速度体验。</p>
+                  </div>
+                  <button 
+                    @click="settings.enableStreaming = !settings.enableStreaming"
+                    :class="cn(
+                      'w-12 h-6 rounded-full transition-colors relative focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shrink-0',
+                      settings.enableStreaming ? 'bg-blue-600' : 'bg-slate-300 dark:bg-slate-700'
+                    )"
+                  >
+                    <div :class="cn(
+                      'absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform shadow-sm',
+                      settings.enableStreaming ? 'translate-x-6' : 'translate-x-0'
+                    )"></div>
+                  </button>
+                </div>
+
+                <div class="h-px bg-slate-100 dark:bg-slate-800"></div>
+
+                <!-- Auto Evaluation -->
+                <div class="flex items-center justify-between">
+                  <div class="space-y-0.5">
+                    <label class="text-sm font-semibold text-slate-800 dark:text-slate-200">自动质量审计</label>
+                    <p class="text-xs text-slate-500 dark:text-slate-400">翻译完成后，自动启动一个次级请求来评估翻译的准确度和语气，并提供改进建议。</p>
+                  </div>
+                  <button 
+                    @click="settings.enableEvaluation = !settings.enableEvaluation"
+                    :class="cn(
+                      'w-12 h-6 rounded-full transition-colors relative focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shrink-0',
+                      settings.enableEvaluation ? 'bg-blue-600' : 'bg-slate-300 dark:bg-slate-700'
+                    )"
+                  >
+                    <div :class="cn(
+                      'absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform shadow-sm',
+                      settings.enableEvaluation ? 'translate-x-6' : 'translate-x-0'
+                    )"></div>
+                  </button>
+                </div>
+
+                <div class="h-px bg-slate-100 dark:bg-slate-800"></div>
+
+                <!-- Audit Profile Selector -->
+                <div class="space-y-3">
+                  <div class="space-y-0.5">
+                    <label class="text-sm font-semibold text-slate-800 dark:text-slate-200 flex items-center gap-1.5">
+                      审计模型
+                    </label>
+                    <p class="text-xs text-slate-500 dark:text-slate-400">强烈建议选择更强大的模型以获得精准反馈。</p>
+                  </div>
+                    
+                    <!-- Custom Evaluation Profile Dropdown -->
+                    <div class="relative lang-dropdown w-full max-w-md">
+                      <button 
+                        @click.stop="toggleDropdown('evaluationProfile')"
+                        class="flex items-center justify-between w-full px-4 py-2 border dark:border-slate-700 rounded-xl bg-slate-50 dark:bg-slate-950 hover:bg-slate-100 dark:hover:bg-slate-800 transition-all text-sm text-slate-700 dark:text-slate-200 group shadow-sm"
+                      >
+                        <span class="truncate font-medium">{{ currentEvaluationProfileLabel }}</span>
+                        <ChevronDown :class="cn('w-4 h-4 text-slate-400 transition-transform duration-200 group-hover:text-blue-500', evaluationProfileDropdownOpen && 'rotate-180')" />
+                      </button>
+                      
+                      <transition
+                        enter-active-class="transition duration-100 ease-out"
+                        enter-from-class="transform scale-95 opacity-0"
+                        enter-to-class="transform scale-100 opacity-100"
+                        leave-active-class="transition duration-75 ease-in"
+                        leave-from-class="transform scale-100 opacity-100"
+                        leave-to-class="transform scale-95 opacity-0"
+                      >
+                        <div 
+                          v-if="evaluationProfileDropdownOpen"
+                          class="absolute left-0 mt-2 w-full max-h-60 overflow-y-auto bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 z-50 py-2 flex flex-col custom-scrollbar"
+                        >
+                          <button
+                            @click="settings.evaluationProfileId = null; evaluationProfileDropdownOpen = false"
+                            :class="cn(
+                              'px-4 py-3 text-sm text-left transition-colors flex items-center justify-between',
+                              settings.evaluationProfileId === null ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 font-bold' : 'text-slate-600 hover:bg-slate-50 dark:text-slate-300 dark:hover:bg-slate-700/50'
+                            )"
+                          >
+                            <span class="font-semibold">使用当前主翻译配置（不推荐）</span>
+                            <Check v-if="settings.evaluationProfileId === null" class="w-4 h-4" />
+                          </button>
+                          <div class="h-px bg-slate-100 dark:bg-slate-700 my-1 mx-2"></div>
+                          <button
+                            v-for="profile in settings.profiles"
+                            :key="profile.id"
+                            @click="settings.evaluationProfileId = profile.id; evaluationProfileDropdownOpen = false"
+                            :class="cn(
+                              'px-4 py-3 text-sm text-left transition-colors flex items-center justify-between',
+                              settings.evaluationProfileId === profile.id ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50'
+                            )"
+                          >
+                            <div class="flex flex-col gap-0.5 min-w-0">
+                              <span class="truncate font-semibold">{{ profile.name }}</span>
+                              <span class="text-[10px] opacity-60 font-mono">{{ profile.modelName }}</span>
+                            </div>
+                            <Check v-if="settings.evaluationProfileId === profile.id" class="w-4 h-4 shrink-0" />
+                          </button>
+                        </div>
+                      </transition>
+                    </div>
+                </div>
+
+              </div>
+            </template>
+
+            <!-- Prompt Engineering -->
+            <template v-if="settingsCategory === 'prompts'">
+              <div class="mb-6 border-b dark:border-slate-800 pb-4">
+                <h1 class="text-2xl font-bold text-slate-800 dark:text-slate-100">提示词工程</h1>
+                <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">深度定制 AI 的系统指令，修改变量占位符将改变其核心逻辑。</p>
+              </div>
+
+              <div class="space-y-8">
+                <!-- Translation Prompt -->
+                <div class="bg-white/80 dark:bg-slate-900 rounded-2xl shadow-sm border dark:border-slate-800 overflow-hidden flex flex-col">
+                  <div class="px-5 py-3 border-b dark:border-slate-800 bg-slate-50 dark:bg-slate-950 flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                      <div class="w-2 h-2 rounded-full bg-blue-500"></div>
+                      <h3 class="text-sm font-bold text-slate-700 dark:text-slate-200">主翻译系统指令</h3>
+                    </div>
+                    <button @click="settings.systemPromptTemplate = DEFAULT_TEMPLATE" class="text-xs text-blue-600 dark:text-blue-400 hover:underline font-medium">恢复默认</button>
+                  </div>
+                  <textarea 
+                    v-model="settings.systemPromptTemplate"
+                    rows="8"
+                    class="w-full p-5 bg-transparent outline-none font-mono text-xs leading-relaxed text-slate-800 dark:text-slate-300 resize-y"
+                    spellcheck="false"
+                  ></textarea>
+                  <div class="px-5 py-3 bg-slate-50 dark:bg-slate-950 border-t dark:border-slate-800">
+                    <div class="flex flex-wrap gap-1.5">
+                      <span v-for="tag in ['{SOURCE_CODE}', '{TARGET_CODE}', '{SOURCE_LANG}', '{TARGET_LANG}', '{SPEAKER_IDENTITY}', '{TONE_REGISTER}']" :key="tag" class="px-2 py-0.5 bg-white dark:bg-slate-800 text-[10px] font-mono rounded-md border dark:border-slate-700 text-slate-500 shadow-sm">{{ tag }}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Evaluation Prompt -->
+                <div class="bg-white/80 dark:bg-slate-900 rounded-2xl shadow-sm border dark:border-slate-800 overflow-hidden flex flex-col">
+                  <div class="px-5 py-3 border-b dark:border-slate-800 bg-slate-50 dark:bg-slate-950 flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                      <div class="w-2 h-2 rounded-full bg-amber-500"></div>
+                      <h3 class="text-sm font-bold text-slate-700 dark:text-slate-200">质量审计指令</h3>
+                    </div>
+                    <button @click="settings.evaluationPromptTemplate = DEFAULT_EVALUATION_TEMPLATE" class="text-xs text-blue-600 dark:text-blue-400 hover:underline font-medium">恢复默认</button>
+                  </div>
+                  <textarea 
+                    v-model="settings.evaluationPromptTemplate"
+                    rows="12"
+                    class="w-full p-5 bg-transparent outline-none font-mono text-xs leading-relaxed text-slate-800 dark:text-slate-300 resize-y"
+                    spellcheck="false"
+                  ></textarea>
+                  <div class="px-5 py-3 bg-slate-50 dark:bg-slate-950 border-t dark:border-slate-800">
+                    <div class="flex flex-wrap gap-1.5">
+                      <span v-for="tag in ['{SOURCE_LANG}', '{TARGET_LANG}', '{SPEAKER_IDENTITY}', '{TONE_REGISTER}', '{CONTEXT}']" :key="tag" class="px-2 py-0.5 bg-white dark:bg-slate-800 text-[10px] font-mono rounded-md border dark:border-slate-700 text-slate-500 shadow-sm">{{ tag }}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Refinement Prompt -->
+                <div class="bg-white/80 dark:bg-slate-900 rounded-2xl shadow-sm border dark:border-slate-800 overflow-hidden flex flex-col">
+                  <div class="px-5 py-3 border-b dark:border-slate-800 bg-slate-50 dark:bg-slate-950 flex items-center justify-between">
+                    <div class="flex items-center gap-2">
+                      <div class="w-2 h-2 rounded-full bg-green-500"></div>
+                      <h3 class="text-sm font-bold text-slate-700 dark:text-slate-200">定向润色指令</h3>
+                    </div>
+                    <button @click="settings.refinementPromptTemplate = DEFAULT_REFINEMENT_TEMPLATE" class="text-xs text-blue-600 dark:text-blue-400 hover:underline font-medium">恢复默认</button>
+                  </div>
+                  <textarea 
+                    v-model="settings.refinementPromptTemplate"
+                    rows="8"
+                    class="w-full p-5 bg-transparent outline-none font-mono text-xs leading-relaxed text-slate-800 dark:text-slate-300 resize-y"
+                    spellcheck="false"
+                  ></textarea>
+                  <div class="px-5 py-3 bg-slate-50 dark:bg-slate-950 border-t dark:border-slate-800">
+                    <div class="flex flex-wrap gap-1.5">
+                      <span v-for="tag in ['{SOURCE_LANG}', '{TARGET_LANG}', '{SPEAKER_IDENTITY}', '{TONE_REGISTER}', '{CONTEXT}']" :key="tag" class="px-2 py-0.5 bg-white dark:bg-slate-800 text-[10px] font-mono rounded-md border dark:border-slate-700 text-slate-500 shadow-sm">{{ tag }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </template>
+
+          </div>
+        </div>
+      </div>
+</template>
--- a/src/components/TranslationView.vue
+++ b/src/components/TranslationView.vue
@@ -0,0 +1,659 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ChevronDown, Check, ArrowRightLeft, Trash2, FileText, Plus, Loader2, Send, User, Type, Copy, Save } from 'lucide-vue-next';
+import { invoke } from '@tauri-apps/api/core';
+import { listen } from '@tauri-apps/api/event';
+import { useSettingsStore, LANGUAGES, SPEAKER_IDENTITY_OPTIONS, TONE_REGISTER_OPTIONS } from '../stores/settings';
+import { cn } from '../lib/utils';
+import { useClipboard } from '../composables/useClipboard';
+
+const settings = useSettingsStore();
+const { activeCopyId, copyWithFeedback } = useClipboard();
+
+const sourceDropdownOpen = ref(false);
+const targetDropdownOpen = ref(false);
+const speakerDropdownOpen = ref(false);
+const toneDropdownOpen = ref(false);
+
+const closeAllDropdowns = () => {
+  sourceDropdownOpen.value = false;
+  targetDropdownOpen.value = false;
+  speakerDropdownOpen.value = false;
+  toneDropdownOpen.value = false;
+};
+
+const toggleDropdown = (type: 'source' | 'target' | 'speaker' | 'tone') => {
+  const states = {
+    source: sourceDropdownOpen,
+    target: targetDropdownOpen,
+    speaker: speakerDropdownOpen,
+    tone: toneDropdownOpen
+  };
+  const targetState = states[type];
+  const currentValue = targetState.value;
+  closeAllDropdowns();
+  targetState.value = !currentValue;
+};
+
+const handleGlobalClick = (e: MouseEvent) => {
+  const target = e.target as HTMLElement;
+  if (!target.closest('.lang-dropdown')) {
+    closeAllDropdowns();
+  }
+};
+
+onMounted(() => window.addEventListener('click', handleGlobalClick));
+onUnmounted(() => window.removeEventListener('click', handleGlobalClick));
+
+const sourceText = ref('');
+const context = ref('');
+const targetText = ref('');
+const isTranslating = ref(false);
+const currentHistoryId = ref<string | null>(null);
+
+interface Suggestion { id: number; text: string; importance: number; }
+interface EvaluationResult { score: number; analysis: string; suggestions?: Suggestion[]; }
+
+const evaluationResult = ref<EvaluationResult | null>(null);
+const isEvaluating = ref(false);
+const isRefining = ref(false);
+const selectedSuggestionIds = ref<number[]>([]);
+const appliedSuggestionIds = ref<number[]>([]);
+
+const toggleSuggestion = (id: number) => {
+  if (!selectedSuggestionIds.value) selectedSuggestionIds.value = [];
+  const index = selectedSuggestionIds.value.indexOf(id);
+  if (index > -1) selectedSuggestionIds.value.splice(index, 1);
+  else selectedSuggestionIds.value.push(id);
+};
+
+let unlisten: (() => void) | null = null;
+onMounted(async () => {
+  unlisten = await listen<string>('translation-chunk', (event) => {
+    if (isTranslating.value || isRefining.value) {
+      targetText.value += event.payload;
+    }
+  });
+});
+onUnmounted(() => { if (unlisten) unlisten(); });
+
+const sourceLangCode = computed({
+  get: () => settings.sourceLang.code,
+  set: (code) => { const lang = LANGUAGES.find(l => l.code === code); if (lang) settings.sourceLang = lang; }
+});
+
+const targetLangCode = computed({
+  get: () => settings.targetLang.code,
+  set: (code) => { const lang = LANGUAGES.find(l => l.code === code); if (lang) settings.targetLang = lang; }
+});
+
+const sourceLang = computed(() => settings.sourceLang);
+const targetLang = computed(() => settings.targetLang);
+
+const currentSpeakerLabel = computed(() => SPEAKER_IDENTITY_OPTIONS.find(opt => opt.value === settings.speakerIdentity)?.label || '男性');
+const currentToneLabel = computed(() => TONE_REGISTER_OPTIONS.find(opt => opt.value === settings.toneRegister)?.label || '正式专业');
+
+const swapLanguages = () => {
+  const temp = { ...settings.sourceLang };
+  settings.sourceLang = { ...settings.targetLang };
+  settings.targetLang = temp;
+};
+
+const clearSource = () => {
+  sourceText.value = '';
+  targetText.value = '';
+  evaluationResult.value = null;
+};
+
+const generateCurl = (apiBaseUrl: string, apiKey: string, body: any) => {
+  const fullUrl = `${apiBaseUrl.replace(/\/$/, '')}/chat/completions`;
+  const maskedKey = apiKey ? `${apiKey.slice(0, 6)}...${apiKey.slice(-4)}` : 'YOUR_API_KEY';
+  return `curl "${fullUrl}" \\
+  -H "Content-Type: application/json" \\
+  -H "Authorization: Bearer ${maskedKey}" \\
+  -d '${JSON.stringify(body, null, 2)}'`;
+};
+
+const evaluateTranslation = async () => {
+  if (!targetText.value) return;
+  isEvaluating.value = true;
+  evaluationResult.value = null;
+  selectedSuggestionIds.value = [];
+  appliedSuggestionIds.value = [];
+
+  let apiBaseUrl = settings.apiBaseUrl;
+  let apiKey = settings.apiKey;
+  let modelName = settings.modelName;
+
+  if (settings.evaluationProfileId) {
+    const profile = settings.profiles.find(p => p.id === settings.evaluationProfileId);
+    if (profile) {
+      apiBaseUrl = profile.apiBaseUrl;
+      apiKey = profile.apiKey;
+      modelName = profile.modelName;
+    }
+  }
+
+  const evaluationSystemPrompt = settings.evaluationPromptTemplate
+    .replace(/{SOURCE_LANG}/g, sourceLang.value.englishName)
+    .replace(/{TARGET_LANG}/g, targetLang.value.englishName)
+    .replace(/{SPEAKER_IDENTITY}/g, settings.speakerIdentity)
+    .replace(/{TONE_REGISTER}/g, settings.toneRegister)
+    .replace(/{CONTEXT}/g, context.value || 'None');
+
+  const evaluationUserPrompt = `[Source Text]\n${sourceText.value}\n\n[Translated Text]\n${targetText.value}`;
+
+  const requestBody = {
+    model: modelName,
+    messages: [ { role: "system", content: evaluationSystemPrompt }, { role: "user", content: evaluationUserPrompt } ],
+    stream: false
+  };
+
+  settings.addLog('request', { type: 'evaluation', ...requestBody }, generateCurl(apiBaseUrl, apiKey, requestBody));
+
+  try {
+    const response = await invoke<string>('translate', { apiAddress: apiBaseUrl, apiKey: apiKey, payload: requestBody });
+    try {
+      // 解析 API 的原始响应 JSON
+      const fullResponseJson = JSON.parse(response);
+      settings.addLog('response', fullResponseJson);
+      
+      const content = fullResponseJson.choices?.[0]?.message?.content || response;
+      const jsonStr = content.replace(/```json\s?|\s?```/g, '').trim();
+      evaluationResult.value = JSON.parse(jsonStr);
+    } catch (parseErr) {
+      console.error('Failed to parse evaluation result:', response);
+      settings.addLog('error', `Evaluation parsing error: ${response}`);
+    }
+  } catch (err: any) {
+    settings.addLog('error', `Evaluation error: ${String(err)}`);
+  } finally {
+    isEvaluating.value = false;
+  }
+};
+
+const refineTranslation = async () => {
+  if (!targetText.value || isRefining.value) return;
+  const selectedTexts = evaluationResult.value?.suggestions?.filter(s => selectedSuggestionIds.value?.includes(s.id)).map(s => s.text);
+  if (!selectedTexts || selectedTexts.length === 0) return;
+
+  isRefining.value = true;
+  const originalTranslation = targetText.value;
+  targetText.value = ''; 
+
+  let apiBaseUrl = settings.apiBaseUrl;
+  let apiKey = settings.apiKey;
+  let modelName = settings.modelName;
+
+  if (settings.evaluationProfileId) {
+    const profile = settings.profiles.find(p => p.id === settings.evaluationProfileId);
+    if (profile) {
+      apiBaseUrl = profile.apiBaseUrl;
+      apiKey = profile.apiKey;
+      modelName = profile.modelName;
+    }
+  }
+
+  const refinementSystemPrompt = settings.refinementPromptTemplate
+    .replace(/{SOURCE_LANG}/g, sourceLang.value.englishName)
+    .replace(/{TARGET_LANG}/g, targetLang.value.englishName)
+    .replace(/{SPEAKER_IDENTITY}/g, settings.speakerIdentity)
+    .replace(/{TONE_REGISTER}/g, settings.toneRegister)
+    .replace(/{CONTEXT}/g, context.value || 'None');
+
+  const formattedSuggestions = selectedTexts.map((text, i) => `${i + 1}. ${text}`).join('\n');
+  const refinementUserPrompt = `[Source Text]\n${sourceText.value}\n\n[Current Translation]\n${originalTranslation}\n\n[User Feedback]\n${formattedSuggestions}`;
+
+  const requestBody = {
+    model: modelName,
+    messages: [ { role: "system", content: refinementSystemPrompt }, { role: "user", content: refinementUserPrompt } ],
+    stream: settings.enableStreaming
+  };
+
+  settings.addLog('request', { type: 'refinement', ...requestBody }, generateCurl(apiBaseUrl, apiKey, requestBody));
+
+  try {
+    const response = await invoke<string>('translate', { apiAddress: apiBaseUrl, apiKey: apiKey, payload: requestBody });
+    
+    if (settings.enableStreaming) {
+      settings.addLog('response', targetText.value);
+    } else {
+      const fullResponseJson = JSON.parse(response);
+      settings.addLog('response', fullResponseJson);
+      targetText.value = fullResponseJson.choices?.[0]?.message?.content || response;
+    }
+    
+    if (evaluationResult.value?.suggestions) {
+      appliedSuggestionIds.value.push(...selectedSuggestionIds.value);
+      selectedSuggestionIds.value = [];
+    }
+    
+    if (currentHistoryId.value) {
+      settings.updateHistoryItem(currentHistoryId.value, {
+        targetText: targetText.value
+      });
+    }
+  } catch (err: any) {
+    const errorMsg = String(err);
+    settings.addLog('error', errorMsg);
+    targetText.value = `Error: ${errorMsg}`;
+  } finally {
+    isRefining.value = false;
+  }
+};
+
+const translate = async () => {
+  if (!sourceText.value.trim() || isTranslating.value) return;
+
+  isTranslating.value = true;
+  currentHistoryId.value = null;
+  targetText.value = '';
+  evaluationResult.value = null;
+
+  const systemMessage = settings.systemPromptTemplate
+    .replace(/{SOURCE_LANG}/g, sourceLang.value.englishName)
+    .replace(/{SOURCE_CODE}/g, sourceLang.value.code)
+    .replace(/{TARGET_LANG}/g, targetLang.value.englishName)
+    .replace(/{TARGET_CODE}/g, targetLang.value.code)
+    .replace(/{SPEAKER_IDENTITY}/g, settings.speakerIdentity)
+    .replace(/{TONE_REGISTER}/g, settings.toneRegister);
+
+  const userMessage = context.value 
+    ? `[Context]\n${context.value}\n\n[Text to Translate]\n${sourceText.value}`
+    : `[Text to Translate]\n${sourceText.value}`;
+
+  const requestBody = {
+    model: settings.modelName,
+    messages: [ { role: "system", content: systemMessage }, { role: "user", content: userMessage } ],
+    stream: settings.enableStreaming
+  };
+
+  settings.addLog('request', requestBody, generateCurl(settings.apiBaseUrl, settings.apiKey, requestBody));
+
+  try {
+    const response = await invoke<string>('translate', { apiAddress: settings.apiBaseUrl, apiKey: settings.apiKey, payload: requestBody });
+    
+    let finalTargetText = '';
+    if (settings.enableStreaming) {
+      finalTargetText = targetText.value;
+      settings.addLog('response', response);
+    } else {
+      const fullResponseJson = JSON.parse(response);
+      settings.addLog('response', fullResponseJson);
+      finalTargetText = fullResponseJson.choices?.[0]?.message?.content || response;
+      targetText.value = finalTargetText;
+    }
+
+    currentHistoryId.value = settings.addHistory({
+      sourceLang: { ...sourceLang.value },
+      targetLang: { ...targetLang.value },
+      sourceText: sourceText.value,
+      targetText: finalTargetText,
+      context: context.value,
+      speakerIdentity: settings.speakerIdentity,
+      toneRegister: settings.toneRegister,
+      modelName: settings.modelName
+    });
+  } catch (err: any) {
+    const errorMsg = String(err);
+    settings.addLog('error', errorMsg);
+    targetText.value = `Error: ${errorMsg}`;
+  } finally {
+    isTranslating.value = false;
+  }
+
+  if (settings.enableEvaluation) await evaluateTranslation();
+};
+</script>
+<template>
+<!-- Translation View -->
+      <div  class="flex-1 flex flex-col md:flex-row divide-y md:divide-y-0 md:divide-x dark:divide-slate-800 bg-white/50 dark:bg-slate-900 overflow-hidden h-full">
+        <!-- Source Pane -->
+        <div class="flex-1 flex flex-col min-h-0 relative h-full">
+          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-100/40 dark:bg-slate-800/30 relative z-40 shrink-0">
+            <!-- Custom Source Dropdown -->
+            <div class="relative lang-dropdown min-w-30">
+              <button 
+                @click.stop="toggleDropdown('source')"
+                class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors text-sm font-semibold text-slate-700 dark:text-slate-200 w-full justify-between group"
+              >
+                <span class="truncate">{{ sourceLang.displayName }}</span>
+                <ChevronDown :class="cn('w-4 h-4 text-slate-400 transition-transform duration-200', sourceDropdownOpen && 'rotate-180')" />
+              </button>
+              
+              <!-- Dropdown Menu -->
+              <transition
+                enter-active-class="transition duration-100 ease-out"
+                enter-from-class="transform scale-95 opacity-0"
+                enter-to-class="transform scale-100 opacity-100"
+                leave-active-class="transition duration-75 ease-in"
+                leave-from-class="transform scale-100 opacity-100"
+                leave-to-class="transform scale-95 opacity-0"
+              >
+                <div 
+                  v-if="sourceDropdownOpen"
+                  class="absolute left-0 mt-2 w-56 max-h-80 overflow-y-auto bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 z-50 py-2 flex flex-col custom-scrollbar"
+                >
+                  <button
+                    v-for="lang in LANGUAGES"
+                    :key="lang.code"
+                    @click="sourceLangCode = lang.code; sourceDropdownOpen = false"
+                    :class="cn(
+                      'px-4 py-2.5 text-sm text-left transition-colors flex items-center justify-between',
+                      sourceLangCode === lang.code ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50'
+                    )"
+                  >
+                    {{ lang.displayName }}
+                    <Check v-if="sourceLangCode === lang.code" class="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              </transition>
+            </div>
+
+            <button @click="swapLanguages" class="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors" title="交换语言">
+              <ArrowRightLeft class="w-4 h-4 text-slate-500 dark:text-slate-400" />
+            </button>
+            <div class="ml-auto flex items-center gap-2">
+               <button @click="clearSource" class="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors" title="清空内容">
+                <Trash2 class="w-4 h-4 text-slate-500 dark:text-slate-400" />
+              </button>
+            </div>
+          </div>
+                      <textarea
+                      v-model="sourceText"
+                      placeholder="请输入待翻译内容..."
+                      class="flex-1 p-6 resize-none outline-none text-lg leading-relaxed placeholder:text-slate-300 dark:placeholder:text-slate-600 bg-transparent min-h-0"
+                    ></textarea>
+          
+                    <!-- Context Input Area -->
+                    <div class="px-6 py-3 bg-slate-200/20 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 group/context relative">
+                       <div class="flex items-center justify-between mb-1.5 h-5">
+                          <div class="flex items-center gap-1.5">
+                            <FileText class="w-4 h-4 text-slate-400" />
+                            <span class="text-[12px] font-bold text-slate-400 uppercase tracking-widest">情景背景 (可选)</span>
+                          </div>
+                          <button 
+                            v-if="context"
+                            @click="context = ''"
+                            class="p-1 hover:bg-slate-200 dark:hover:bg-slate-700 rounded opacity-0 group-hover/context:opacity-100 transition-opacity"
+                            title="清空背景"
+                          >
+                            <Plus class="w-3 h-3 rotate-45 text-slate-400" />
+                          </button>
+                       </div>
+                       <textarea
+                          v-model="context"
+                          placeholder="在此输入背景信息，有助于提升翻译准确度..."
+                          class="w-full bg-transparent border-none outline-none text-sm text-slate-500 dark:text-slate-400 resize-none h-14 leading-normal placeholder:italic placeholder:text-slate-300 dark:placeholder:text-slate-600"
+                       ></textarea>
+                    </div>
+          
+                    <div class="p-4 border-t dark:border-slate-800 bg-slate-50/30 dark:bg-transparent flex justify-end shrink-0">            <button 
+              @click="translate"
+              :disabled="isTranslating || isEvaluating || isRefining || !sourceText.trim()"
+              class="bg-blue-600 hover:bg-blue-700 disabled:bg-blue-300 dark:disabled:bg-blue-900/40 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm"
+            >
+              <Loader2 v-if="isTranslating" class="w-4 h-4 animate-spin" />
+              <Send v-else class="w-4 h-4" />
+              {{ isTranslating ? '正在翻译...' : '翻译' }}
+            </button>
+          </div>
+        </div>
+<!-- Target Pane -->
+        <div class="flex-1 flex flex-col min-h-0 bg-slate-100/20 dark:bg-slate-900/50 relative h-full">
+          <div class="flex items-center gap-3 px-6 py-3 border-b dark:border-slate-800 bg-slate-100/40 dark:bg-slate-800/30 relative z-40 shrink-0">
+            <!-- Custom Target Dropdown -->
+            <div class="relative lang-dropdown min-w-30">
+              <button 
+                @click.stop="toggleDropdown('target')"
+                class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors text-sm font-semibold text-slate-700 dark:text-slate-200 w-full justify-between"
+              >
+                <span class="truncate">{{ targetLang.displayName }}</span>
+                <ChevronDown :class="cn('w-4 h-4 text-slate-400 transition-transform duration-200', targetDropdownOpen && 'rotate-180')" />
+              </button>
+              
+              <!-- Dropdown Menu -->
+              <transition
+                enter-active-class="transition duration-100 ease-out"
+                enter-from-class="transform scale-95 opacity-0"
+                enter-to-class="transform scale-100 opacity-100"
+                leave-active-class="transition duration-75 ease-in"
+                leave-from-class="transform scale-100 opacity-100"
+                leave-to-class="transform scale-95 opacity-0"
+              >
+                <div 
+                  v-if="targetDropdownOpen"
+                  class="absolute left-0 mt-2 w-56 max-h-80 overflow-y-auto bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 z-50 py-2 flex flex-col custom-scrollbar"
+                >
+                  <button
+                    v-for="lang in LANGUAGES"
+                    :key="lang.code"
+                    @click="targetLangCode = lang.code; targetDropdownOpen = false"
+                    :class="cn(
+                      'px-4 py-2.5 text-sm text-left transition-colors flex items-center justify-between',
+                      targetLangCode === lang.code ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50'
+                    )"
+                  >
+                    {{ lang.displayName }}
+                    <Check v-if="targetLangCode === lang.code" class="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              </transition>
+            </div>
+
+            <!-- Speaker Identity Dropdown -->
+            <div class="relative lang-dropdown min-w-24">
+              <button 
+                @click.stop="toggleDropdown('speaker')"
+                class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors text-sm font-medium text-slate-600 dark:text-slate-300 w-full justify-between group"
+                title="说话人身份"
+              >
+                <div class="flex items-center gap-1.5 truncate">
+                  <User class="w-3.5 h-3.5 text-slate-400" />
+                  <span class="truncate">{{ currentSpeakerLabel }}</span>
+                </div>
+                <ChevronDown :class="cn('w-3.5 h-3.5 text-slate-400 transition-transform duration-200 shrink-0', speakerDropdownOpen && 'rotate-180')" />
+              </button>
+              
+              <transition
+                enter-active-class="transition duration-100 ease-out"
+                enter-from-class="transform scale-95 opacity-0"
+                enter-to-class="transform scale-100 opacity-100"
+                leave-active-class="transition duration-75 ease-in"
+                leave-from-class="transform scale-100 opacity-100"
+                leave-to-class="transform scale-95 opacity-0"
+              >
+                <div 
+                  v-if="speakerDropdownOpen"
+                  class="absolute left-0 mt-2 w-40 max-h-80 overflow-y-auto bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 z-50 py-2 flex flex-col custom-scrollbar"
+                >
+                  <button
+                    v-for="opt in SPEAKER_IDENTITY_OPTIONS"
+                    :key="opt.value"
+                    @click="settings.speakerIdentity = opt.value; speakerDropdownOpen = false"
+                    :class="cn(
+                      'px-4 py-2 text-sm text-left transition-colors flex items-center justify-between',
+                      settings.speakerIdentity === opt.value ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50'
+                    )"
+                  >
+                    {{ opt.label }}
+                    <Check v-if="settings.speakerIdentity === opt.value" class="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              </transition>
+            </div>
+
+            <!-- Tone & Register Dropdown -->
+            <div class="relative lang-dropdown min-w-32">
+              <button 
+                @click.stop="toggleDropdown('tone')"
+                class="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-slate-200/60 dark:hover:bg-slate-700/60 transition-colors text-sm font-medium text-slate-600 dark:text-slate-300 w-full justify-between group"
+                title="语气风格"
+              >
+                <div class="flex items-center gap-1.5 truncate">
+                  <Type class="w-3.5 h-3.5 text-slate-400" />
+                  <span class="truncate">{{ currentToneLabel }}</span>
+                </div>
+                <ChevronDown :class="cn('w-3.5 h-3.5 text-slate-400 transition-transform duration-200 shrink-0', toneDropdownOpen && 'rotate-180')" />
+              </button>
+              
+              <transition
+                enter-active-class="transition duration-100 ease-out"
+                enter-from-class="transform scale-95 opacity-0"
+                enter-to-class="transform scale-100 opacity-100"
+                leave-active-class="transition duration-75 ease-in"
+                leave-from-class="transform scale-100 opacity-100"
+                leave-to-class="transform scale-95 opacity-0"
+              >
+                <div 
+                  v-if="toneDropdownOpen"
+                  class="absolute left-0 mt-2 w-56 max-h-80 overflow-y-auto bg-white dark:bg-slate-800 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 z-50 py-2 flex flex-col custom-scrollbar"
+                >
+                  <button
+                    v-for="opt in TONE_REGISTER_OPTIONS"
+                    :key="opt.value"
+                    @click="settings.toneRegister = opt.value; toneDropdownOpen = false"
+                    :class="cn(
+                      'px-4 py-2.5 text-sm text-left transition-colors flex flex-col gap-0.5',
+                      settings.toneRegister === opt.value ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 font-bold' : 'text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700/50'
+                    )"
+                  >
+                    <div class="flex items-center justify-between w-full">
+                      {{ opt.label }}
+                      <Check v-if="settings.toneRegister === opt.value" class="w-3.5 h-3.5" />
+                    </div>
+                    <span class="text-[10px] opacity-60 font-normal truncate">{{ opt.description }}</span>
+                  </button>
+                </div>
+              </transition>
+            </div>
+
+            <div class="ml-auto flex items-center gap-2">
+              <button @click="copyWithFeedback(targetText, 'main-target')" class="p-1.5 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors relative" title="复制结果">
+                <Check v-if="activeCopyId === 'main-target'" class="w-4 h-4 text-green-600" />
+                <Copy v-else class="w-4 h-4 text-slate-500 dark:text-slate-400" />
+              </button>
+            </div>
+          </div>
+          <div class="flex-1 p-6 overflow-y-auto text-lg leading-relaxed whitespace-pre-wrap min-h-0">
+            <template v-if="targetText">
+              {{ targetText }}
+            </template>
+            <span v-else class="text-slate-300 dark:text-slate-600 italic">翻译结果将在此显示...</span>
+          </div>
+
+          <!-- Evaluation Results -->
+          <div v-if="isEvaluating || evaluationResult" class="px-6 py-4 bg-slate-200/20 dark:bg-slate-800/20 border-t border-dashed dark:border-slate-800 space-y-4 animate-in fade-in slide-in-from-bottom-2 duration-500 overflow-y-auto max-h-80 shrink-0">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center gap-2">
+                <div :class="cn(
+                  'w-2 h-2 rounded-full',
+                  isEvaluating ? 'bg-blue-400 animate-pulse' : (evaluationResult?.score && evaluationResult.score >= 80 ? 'bg-green-500' : evaluationResult?.score && evaluationResult.score >= 60 ? 'bg-amber-500' : 'bg-red-500')
+                )"></div>
+                <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest">质量审计</h3>
+              </div>
+              <div v-if="evaluationResult" :class="cn(
+                'text-lg font-black font-mono',
+                evaluationResult.score >= 80 ? 'text-green-600' : evaluationResult.score >= 60 ? 'text-amber-600' : 'text-red-600'
+              )">
+                {{ evaluationResult.score }} <span class="text-[10px] font-normal opacity-50">/ 100</span>
+              </div>
+              <div v-else-if="isEvaluating" class="flex items-center gap-1.5 text-xs text-blue-500 font-medium">
+                <Loader2 class="w-3 h-3 animate-spin" />
+                正在审计...
+              </div>
+            </div>
+
+            <div v-if="evaluationResult" class="space-y-3">
+              <div class="bg-slate-50 dark:bg-slate-800/40 p-3 rounded-lg border border-slate-100 dark:border-slate-800/60">
+                <p class="text-xs text-slate-600 dark:text-slate-300 leading-relaxed">
+                  {{ evaluationResult.analysis }}
+                </p>
+              </div>
+              
+              <div v-if="evaluationResult.suggestions && evaluationResult.suggestions.length > 0" class="space-y-4 pt-2">
+                <!-- Pending Suggestions -->
+                <div v-if="evaluationResult.suggestions.some(s => !appliedSuggestionIds.includes(s.id))" class="space-y-2">
+                  <div class="flex items-center gap-2">
+                    <div class="w-2 h-2 rounded-full bg-blue-500"></div>
+                    <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest">修改建议</h3>
+                  </div>
+                  <div class="space-y-2">
+                    <div 
+                      v-for="sug in evaluationResult.suggestions.filter(s => !appliedSuggestionIds.includes(s.id))" 
+                      :key="sug.id"
+                      @click="toggleSuggestion(sug.id)"
+                      :class="cn(
+                        'flex items-start gap-3 p-3 rounded-xl border transition-all cursor-pointer group',
+                        selectedSuggestionIds?.includes(sug.id) 
+                          ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800' 
+                          : 'bg-white dark:bg-slate-800/40 border-slate-100 dark:border-slate-800 hover:border-slate-300 dark:hover:border-slate-700'
+                      )"
+                    >
+                      <div :class="cn(
+                        'w-4 h-4 rounded border mt-0.5 shrink-0 flex items-center justify-center transition-colors',
+                        selectedSuggestionIds?.includes(sug.id) ? 'bg-blue-600 border-blue-600' : 'border-slate-300 dark:border-slate-600'
+                      )">
+                        <Check v-if="selectedSuggestionIds?.includes(sug.id)" class="w-3.5 h-3.5 text-white" stroke-width="4" />
+                      </div>
+                      <div class="flex-1 space-y-1.5 min-w-0">
+                        <p class="text-xs text-slate-700 dark:text-slate-200 leading-normal">{{ sug.text }}</p>
+                        <div class="flex items-center gap-2">
+                          <div class="flex-1 h-1 bg-slate-100 dark:bg-slate-700 rounded-full overflow-hidden">
+                            <div 
+                              class="h-full rounded-full transition-all duration-1000"
+                              :class="sug.importance >= 80 ? 'bg-red-500' : sug.importance >= 40 ? 'bg-amber-500' : 'bg-blue-500'"
+                              :style="{ width: `${sug.importance}%` }"
+                            ></div>
+                          </div>
+                          <span class="text-[9px] font-bold opacity-40 uppercase tracking-tighter w-8 shrink-0">{{ sug.importance }}%</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Applied Suggestions -->
+                <div v-if="appliedSuggestionIds.length > 0" class="space-y-2 border-t dark:border-slate-800 pt-4">
+                  <div class="flex items-center gap-2">
+                    <div class="w-2 h-2 rounded-full bg-slate-400"></div>
+                    <h3 class="text-xs font-bold text-slate-400 uppercase tracking-widest">已润色</h3>
+                  </div>
+                  <div class="space-y-2">
+                    <div 
+                      v-for="sug in evaluationResult.suggestions.filter(s => appliedSuggestionIds.includes(s.id))" 
+                      :key="'applied-' + sug.id"
+                      class="p-3 rounded-xl border border-slate-100 dark:border-slate-800/60 bg-white/30 dark:bg-slate-800/20 opacity-70"
+                    >
+                      <p class="text-xs text-slate-500 dark:text-slate-400 leading-normal">{{ sug.text }}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 border-t dark:border-slate-800 bg-slate-50/30 dark:bg-transparent flex justify-end gap-2 shrink-0">
+            <button 
+              @click="refineTranslation"
+              v-if="evaluationResult && evaluationResult.suggestions && evaluationResult.suggestions.length > 0"
+              :disabled="isRefining || isEvaluating || isTranslating || selectedSuggestionIds.length === 0"
+              class="bg-blue-600 enabled:hover:bg-blue-700 disabled:bg-blue-300 dark:disabled:bg-blue-900/40 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm"
+            >
+              <Loader2 v-if="isRefining" class="w-4 h-4 animate-spin" />
+              <Save v-else class="w-4 h-4" />
+              {{ isRefining ? '正在润色...' : '润色' }}
+            </button>
+            <button 
+              @click="evaluateTranslation"
+              :disabled="isEvaluating || isTranslating || isRefining || !targetText.trim()"
+              class="bg-blue-600 enabled:hover:bg-blue-700 disabled:bg-blue-300 dark:disabled:bg-blue-900/40 text-white px-6 py-2.5 rounded-lg font-medium transition-all flex items-center gap-2 shadow-sm"
+            >
+              <Loader2 v-if="isEvaluating" class="w-4 h-4 animate-spin" />
+              <Check v-else class="w-4 h-4" />
+              {{ isEvaluating ? '正在审计...' : '审计' }}
+            </button>
+          </div>
+        </div>
+      </div>
+</template>
--- a/src/composables/useClipboard.ts
+++ b/src/composables/useClipboard.ts
@@ -0,0 +1,21 @@
+import { ref } from 'vue';
+
+const activeCopyId = ref<string | null>(null);
+
+export function useClipboard() {
+  const copyWithFeedback = async (text: string, id: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      activeCopyId.value = id;
+      setTimeout(() => {
+        if (activeCopyId.value === id) {
+          activeCopyId.value = null;
+        }
+      }, 2000);
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+    }
+  };
+
+  return { activeCopyId, copyWithFeedback };
+}
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -1,70 +1,227 @@
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { defineStore } from 'pinia';
 import { useLocalStorage } from '@vueuse/core';

 export interface Language {
-  displayName: string; // UI 显示的中文名，如 "英语(英国)"
+  displayName: string; // UI 显示的中文名，如 "英语（英国）"
  englishName: string; // 文件中的第二列，用于 {SOURCE_LANG}
  code: string;        // 文件中的第一列，用于 {SOURCE_CODE}
 }

 export const LANGUAGES: Language[] = [
-  { displayName: '中文(简体)', englishName: 'Simplified Chinese', code: 'zh-Hans' },
-  { displayName: '中文(繁体)', englishName: 'Traditional Chinese', code: 'zh-Hant' },
-  { displayName: '英语', englishName: 'English', code: 'en' },
+  { displayName: '中文（简体）', englishName: 'Simplified Chinese', code: 'zh-Hans' },
+  { displayName: '中文（繁体）', englishName: 'Traditional Chinese', code: 'zh-Hant' },
+  { displayName: '英语（美国）', englishName: 'American English', code: 'en-US' },
+  { displayName: '英语（英国）', englishName: 'British English', code: 'en-GB' },
+  { displayName: '西班牙语', englishName: 'Spanish', code: 'es' },
+  { displayName: '葡萄牙语', englishName: 'Portuguese', code: 'pt' },
  { displayName: '日语', englishName: 'Japanese', code: 'ja' },
  { displayName: '韩语', englishName: 'Korean', code: 'ko' },
  { displayName: '法语', englishName: 'French', code: 'fr' },
  { displayName: '德语', englishName: 'German', code: 'de' },
-  { displayName: '西班牙语', englishName: 'Spanish', code: 'es' },
  { displayName: '意大利语', englishName: 'Italian', code: 'it' },
  { displayName: '俄语', englishName: 'Russian', code: 'ru' },
-  { displayName: '葡萄牙语', englishName: 'Portuguese', code: 'pt' },
  { displayName: '越南语', englishName: 'Vietnamese', code: 'vi' },
  { displayName: '泰语', englishName: 'Thai', code: 'th' },
  { displayName: '阿拉伯语', englishName: 'Arabic', code: 'ar' },
 ];

+export const SPEAKER_IDENTITY_OPTIONS = [
+  { label: '男性', value: 'Male' },
+  { label: '女性', value: 'Female' },
+  { label: '中性', value: 'Gender-neutral' },
+];
+
+export const TONE_REGISTER_OPTIONS = [
+  { label: '自动识别', value: 'Auto-detect', description: '分析并保持原文的语气、情绪和礼貌程度' },
+  { label: '正式专业', value: 'Formal & Professional', description: '商务邮件、法律合同、官方报告' },
+  { label: '礼貌客气', value: 'Polite & Respectful', description: '与长辈、客户或初次见面的人交流' },
+  { label: '礼貌随和', value: 'Polite & Conversational', description: '得体但不刻板的日常对话' },
+  { label: '中性标准', value: 'Neutral & Standard', description: '维基百科、说明书、客观的新闻报道' },
+  { label: '非正式', value: 'Casual & Informal', description: '朋友聊天、社交媒体、非正式简讯' },
+  { label: '亲切友好', value: 'Warm & Friendly', description: '社区信函、给朋友的建议、温馨提示' },
+  { label: '严谨权威', value: 'Strict & Authoritative', description: '警示标志、强制规定、上级指令' },
+  { label: '热情生动', value: 'Enthusiastic & Vivid', description: '广告文案、旅游推荐、博主推文' },
+];
+
 export const DEFAULT_TEMPLATE = `You are a professional {SOURCE_LANG} ({SOURCE_CODE}) to {TARGET_LANG} ({TARGET_CODE}) translator. Your goal is to accurately convey the meaning and nuances of the original {SOURCE_LANG} text while adhering to {TARGET_LANG} grammar, vocabulary, and cultural sensitivities.
-Produce only the {TARGET_LANG} translation, without any additional explanations or commentary. Please translate the following {SOURCE_LANG} text into {TARGET_LANG}:

+[Constraints]
+1. Speaker Identity: {SPEAKER_IDENTITY}. Ensure all grammatical agreements and self-referential terms in {TARGET_LANG} reflect this.
+2. Tone & Register: {TONE_REGISTER}. (If set to 'Auto-detect', analyze the tone, formality, and emotional nuance of the source text and faithfully replicate it. Do not neutralize strong emotions or unique styles.)
+3. Produce ONLY the {TARGET_LANG} translation, without any additional explanations, notes, or commentary.
+4. If [Context] is provided, use it strictly to disambiguate polysemous words. DO NOT add any factual information or descriptive details from the [Context] that are not present in the [Text to Translate].`;

-{TEXT}`;
+export const DEFAULT_EVALUATION_TEMPLATE = `# Role
+You are an **Objective Translation Auditor**. Your task is to evaluate translation quality based on accuracy, grammar, and fundamental readability. Avoid pedantic nitpicking over synonyms, but do point out issues that hinder professional quality.
+
+# Context Info
+- **Source Language**: {SOURCE_LANG}
+- **Target Language**: {TARGET_LANG}
+- **Speaker Identity**: {SPEAKER_IDENTITY}
+- **Intended Tone/Register**: {TONE_REGISTER}
+- **Context**: {CONTEXT}
+
+# Audit Criteria
+Only penalize and provide improvements if the translation meets one of these criteria:
+1. **Semantic Error**: Objective misalignment with the source meaning or complete hallucinations.
+2. **Grammatical Error**: Clear violations of target language grammar or syntax rules.
+3. **Tone Failure**: A tone that is the opposite or significantly different from the [Intended Tone/Register].
+4. **Poor Readability**: The phrasing is so stiff, unnatural, or convoluted that it hinders smooth comprehension (e.g., obvious "translationese" or broken logic).
+
+**Note**: Do NOT penalize if the translation is simply "not the most elegant" or if there's a subjective preference for a different synonym. If it's natural enough for a native speaker to understand without effort, it's acceptable.
+
+# Instructions
+1. **Evaluation**: Compare the [Source Text] and [Translated Text] based on the [Audit Criteria].
+2. **Scoring Strategy**: 
+   - **90-100**: Accurate, grammatically sound, and flows naturally.
+   - **75-89**: Accurate meaning, but suffers from "stiff" phrasing or minor flow issues that need adjustment.
+   - **Below 75**: Contains semantic errors, severe grammar issues, or tone mismatches.
+3. **Analysis**: Provide a concise explanation in Simplified Chinese. Focus on *why* the error matters (e.g., "meaning is reversed" or "too awkward to read").
+4. **Suggestions**: Provide a list of specific, actionable suggestions. For each, assign an "importance" from 0 to 100 (0 = unnecessary/optional, 100 = critical error).
+
+# Output Format
+Respond ONLY in JSON format. The "analysis" and "text" within "suggestions" MUST be in Simplified Chinese:
+{
+  "score": number,
+  "analysis": "string",
+  "suggestions": [
+    { "id": 1, "text": "suggestion text", "importance": number }
+  ]
+}`;
+
+export const DEFAULT_REFINEMENT_TEMPLATE = `You are a senior translation editor. Your task is to refine the [Current Translation] based on specific [User Feedback], while strictly maintaining the original meaning of the [Source Text] and adhering to the established context.
+
+[Context Info]
+- Source Language: {SOURCE_LANG}
+- Target Language: {TARGET_LANG}
+- Speaker Identity: {SPEAKER_IDENTITY}
+- Intended Tone/Register: {TONE_REGISTER}
+- Context: {CONTEXT}
+
+[Instructions]
+1. Carefully review the [User Feedback] and apply the requested improvements to the [Current Translation].
+2. Ensure that the refined translation remains semantically identical to the [Source Text].
+3. Maintain the [Speaker Identity] and [Intended Tone/Register] as specified.
+4. If a piece of feedback contradicts the [Source Text], prioritize accuracy and provide a balanced refinement.
+5. Produce ONLY the refined {TARGET_LANG} translation, without any additional explanations, notes, or commentary.`;
+
+export interface ApiProfile {
+  id: string;
+  name: string;
+  apiBaseUrl: string;
+  apiKey: string;
+  modelName: string;
+}
+
+export interface HistoryItem {
+  id: string;
+  timestamp: string;
+  sourceLang: Language;
+  targetLang: Language;
+  sourceText: string;
+  targetText: string;
+  context: string;
+  speakerIdentity: string;
+  toneRegister: string;
+  modelName: string;
+}

 export const useSettingsStore = defineStore('settings', () => {
  const isDark = useLocalStorage('is-dark', false);
-  const ollamaApiAddress = useLocalStorage('ollama-api-address', 'http://localhost:11434');
+  const apiBaseUrl = useLocalStorage('api-base-url', 'http://localhost:11434/v1');
+  const apiKey = useLocalStorage('api-key', '');
  const modelName = useLocalStorage('model-name', 'translategemma:12b');
+  const profiles = useLocalStorage<ApiProfile[]>('api-profiles', []);
  const enableStreaming = useLocalStorage('enable-streaming', true);
  const systemPromptTemplate = useLocalStorage('system-prompt-template', DEFAULT_TEMPLATE);
  
+  const enableEvaluation = useLocalStorage('enable-evaluation', true);
+  const evaluationPromptTemplate = useLocalStorage('evaluation-prompt-template', DEFAULT_EVALUATION_TEMPLATE);
+  const evaluationProfileId = useLocalStorage<string | null>('evaluation-profile-id', null);
+  const refinementPromptTemplate = useLocalStorage('refinement-prompt-template', DEFAULT_REFINEMENT_TEMPLATE);
+  
  // 存储整个对象以保持一致性
  const sourceLang = useLocalStorage<Language>('source-lang-v2', LANGUAGES[0]);
  const targetLang = useLocalStorage<Language>('target-lang-v2', LANGUAGES[4]);

-  const logs = ref<{ timestamp: string; type: 'request' | 'response' | 'error'; content: any }[]>([]);
+  // 按源语言分别存储身份和语气，实现基于语言自动切换
+  const speakerIdentityMap = useLocalStorage<Record<string, string>>('speaker-identity-map', {});
+  const toneRegisterMap = useLocalStorage<Record<string, string>>('tone-register-map', {});
+
+  const speakerIdentity = computed({
+    get: () => speakerIdentityMap.value[sourceLang.value.code] || SPEAKER_IDENTITY_OPTIONS[0].value,
+    set: (val) => { speakerIdentityMap.value[sourceLang.value.code] = val; }
+  });
+
+  const toneRegister = computed({
+    get: () => toneRegisterMap.value[sourceLang.value.code] || TONE_REGISTER_OPTIONS[0].value,
+    set: (val) => { toneRegisterMap.value[sourceLang.value.code] = val; }
+  });
+
+  const logs = ref<{ id: string; timestamp: string; type: 'request' | 'response' | 'error'; content: any; curl?: string }[]>([]);
+  const history = useLocalStorage<HistoryItem[]>('translation-history-v1', []);
  
-  const addLog = (type: 'request' | 'response' | 'error', content: any) => {
+  const addLog = (type: 'request' | 'response' | 'error', content: any, curl?: string) => {
    const now = new Date();
    const timestamp = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
    
    logs.value.unshift({
+      id: crypto.randomUUID(),
      timestamp,
      type,
-      content
+      content,
+      curl
    });
-    if (logs.value.length > 20) logs.value.pop();
+    if (logs.value.length > 50) logs.value.pop(); // 稍微增加日志保留数量
+  };
+
+  const addHistory = (item: Omit<HistoryItem, 'id' | 'timestamp'>) => {
+    const now = new Date();
+    const timestamp = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
+    const id = crypto.randomUUID();
+    
+    history.value.unshift({
+      ...item,
+      id,
+      timestamp
+    });
+    
+    // 限制 100 条
+    if (history.value.length > 100) {
+      history.value = history.value.slice(0, 100);
+    }
+    
+    return id;
+  };
+
+  const updateHistoryItem = (id: string, updates: Partial<HistoryItem>) => {
+    const index = history.value.findIndex(h => h.id === id);
+    if (index !== -1) {
+      history.value[index] = { ...history.value[index], ...updates };
+    }
  };

  return {
    isDark,
-    ollamaApiAddress,
+    apiBaseUrl,
+    apiKey,
    modelName,
+    profiles,
    enableStreaming,
    systemPromptTemplate,
+    enableEvaluation,
+    evaluationPromptTemplate,
+    evaluationProfileId,
+    refinementPromptTemplate,
    sourceLang,
    targetLang,
+    speakerIdentity,
+    toneRegister,
    logs,
-    addLog
+    history,
+    addLog,
+    addHistory,
+    updateHistoryItem
  };
 });
Author	SHA1	Message	Date
Julian Freeman	ce4a42eec2	upgrade	2026-03-28 20:24:06 -04:00
Julian Freeman	ac951c31b1	detailed logs	2026-03-28 20:19:15 -04:00
Julian Freeman	f3150f06fa	upgrade	2026-03-27 18:00:30 -04:00
Julian Freeman	7de7877c64	support edit presets	2026-03-27 17:56:24 -04:00
Julian Freeman	15626ba9e1	add eye to api key	2026-03-27 17:50:06 -04:00
Julian Freeman	c719b50285	add refinement to history	2026-03-27 17:45:35 -04:00
Julian Freeman	9d3b509657	little fix	2026-03-25 19:51:50 -04:00
Julian Freeman	baaa9af1c0	split app.vue	2026-03-25 19:43:42 -04:00
Julian Freeman	847527ec79	rebuild settings ui	2026-03-25 19:29:12 -04:00
Julian Freeman	31dd4ee2b2	optimize copy feedback	2026-03-25 19:02:48 -04:00
Julian Freeman	69a8047743	rebuild logs ui	2026-03-25 18:21:07 -04:00
Julian Freeman	352047c123	support history	2026-03-25 13:27:50 -04:00
Julian Freeman	e0dd17bfff	support auto-detect tone	2026-03-25 12:45:54 -04:00
Julian Freeman	c5890bd5f2	combine gender and tone with srclang	2026-03-25 12:28:12 -04:00
Julian Freeman	96be7c67f3	improve refine ui2	2026-02-25 14:06:18 -04:00
Julian Freeman	ae1028588b	improve refine ui	2026-02-25 13:57:49 -04:00
Julian Freeman	dd06a3159b	support refinement	2026-02-25 13:22:39 -04:00
Julian Freeman	f20a9bb851	improve eval prompt	2026-02-25 12:14:33 -04:00
Julian Freeman	8294c12d17	fix eval ui on the bottom	2026-02-25 11:55:55 -04:00
Julian Freeman	55de02f5e3	improve ui and temp	2026-02-25 11:38:18 -04:00
Julian Freeman	c1b3c3b142	improve eval ui	2026-02-25 00:33:34 -04:00
Julian Freeman	a8e14269af	import eval display	2026-02-25 00:21:17 -04:00
Julian Freeman	f21366e55f	improve evaluation	2026-02-25 00:00:07 -04:00
Julian Freeman	6ff6fd3f25	support evaluation	2026-02-24 23:27:06 -04:00
Julian Freeman	f6bc4152b0	change the left bottom	2026-02-24 22:27:19 -04:00
Julian Freeman	5b493ce767	make light softer 2	2026-02-24 22:23:58 -04:00
Julian Freeman	49b96eeaeb	make light softer	2026-02-24 22:07:45 -04:00
Julian Freeman	d259b54f11	not store context	2026-02-24 22:00:56 -04:00
Julian Freeman	484dd17f1c	fix ui	2026-02-24 21:49:58 -04:00
Julian Freeman	985cfd933a	modify	2026-02-24 16:44:42 -04:00
Julian Freeman	d9f0af53c4	support provide context	2026-02-24 16:36:08 -04:00
Julian Freeman	f183cccd5b	change name to ai translate client	2026-02-23 19:57:44 -04:00
Julian Freeman	44c98f1d44	fix ui	2026-02-23 19:17:44 -04:00
Julian Freeman	f7f7556b98	support api profiles	2026-02-23 18:54:59 -04:00
Julian Freeman	f84ee6ced7	support generic openai api	2026-02-23 18:33:13 -04:00
Julian Freeman	8df295cbf5	little modify	2026-02-23 17:24:13 -04:00
Julian Freeman	2c61c19093	add identity and tone	2026-02-23 17:10:46 -04:00
Julian Freeman	fb98ab5472	fix origin problem	2026-02-22 19:58:34 -04:00
Julian Freeman	ce358e5b76	fix ui height	2026-02-22 19:51:40 -04:00
Julian Freeman	48d9c6e240	change name	2026-02-22 18:37:51 -04:00
Julian Freeman	74fe954478	change icon and others	2026-02-22 18:27:50 -04:00