diff --git a/README.md b/README.md
index 0affd56..b5df6f4 100644
--- a/README.md
+++ b/README.md
@@ -1,15 +1,16 @@
 # 在线工具箱（tool.xpcool.com）
 
-纯前端在线工具站：**Vite + Vue3 + Pinia + TypeScript + UnoCSS + TDesign**。15 个常用工具，所有文件处理与计算均在浏览器本地完成，**不上传任何用户数据到服务器**。
+纯前端在线工具站：**Vite + Vue3 + Pinia + TypeScript + UnoCSS + TDesign**。27 个常用工具，所有文件处理与计算均在浏览器本地完成，**不上传任何用户数据到服务器**（翻译工具除外，见隐私说明）。
 
 ## 功能特性
 
-- 15 个实用工具：图片压缩/裁剪、二维码生成解析、JSON 格式化、时间戳转换、Base64 编解码、JWT 解析、Cron 表达式、进制转换、哈希计算、身份证解析、地址解析、URL 解析、翻译、图片 OCR 识别
+- 27 个实用工具：图片压缩/裁剪、二维码生成解析、JSON 格式化、时间戳转换、Base64 编解码、JWT 解析、Cron 表达式、进制转换、哈希计算、身份证解析、地址解析、URL 解析、翻译、图片 OCR 识别、UUID 生成、正则测试、命名转换、色值转换、单位换算、YAML ↔ JSON、字数统计、人民币大写、简繁转换、日期计算、密码生成、HTTP 状态码速查
 - 左侧固定导航 + 中间内容区；PC Web 与移动端 H5 响应式适配（移动端为抽屉导航）
 - 暗黑 / 浅色主题切换，选择持久化，刷新不丢失
 - 每个工具独立路由、独立本地历史记录（localStorage）
 - 所有文件上传支持点击选择 + 拖拽上传，图片自动缩略图回显；图片压缩支持批量、按质量/限制大小、等比缩放与 ZIP 批量下载
 - 翻译工具参考有道翻译的交互：中/英/韩/日互译、双栏对照、单词释义（拼音 + 词性释义 + 例句）、真人发音朗读、逐句对照与来源标注
+- 开发常用工具全覆盖：UUID 批量生成、正则测试与替换预览、命名风格转换、色值转换、单位换算、YAML/JSON 互转、HTTP 状态码速查
 - 通用组件：拖拽上传、复制按钮、下载按钮、错误提示、历史记录面板
 - 全部能力由浏览器原生 API、WebAssembly 与 npm 前端库实现，无任何 mock 后端接口、无 CDN 脚本引入
 
@@ -25,7 +26,7 @@
 | 样式 | UnoCSS 原子类 + SCSS（使用 TDesign 设计令牌变量） |
 | 路由 | Vue Router 4（History 模式） |
 
-工具依赖：`qrcode`、`jsqr`、`cropperjs`、`browser-image-compression`、`tesseract.js`、`cron-parser`、`spark-md5`、`jszip`、`pinyin-pro`（全部通过 npm 安装）。
+工具依赖：`qrcode`、`jsqr`、`cropperjs`、`browser-image-compression`、`tesseract.js`、`cron-parser`、`spark-md5`、`jszip`、`pinyin-pro`、`js-yaml`、`opencc-js`（全部通过 npm 安装）。
 
 ## 快速开始
 
@@ -68,6 +69,18 @@ pnpm preview
 | `/url-parse` | URL 解析 |
 | `/translate` | 翻译（中英韩日） |
 | `/ocr` | 图片 OCR 识别 |
+| `/uuid` | UUID 生成 |
+| `/regex-test` | 正则测试 |
+| `/case-convert` | 命名风格转换 |
+| `/color-convert` | 色值转换 |
+| `/unit-convert` | 单位换算 |
+| `/yaml-json` | YAML ↔ JSON 转换 |
+| `/word-count` | 字数统计 |
+| `/rmb-upper` | 人民币大写转换 |
+| `/zh-convert` | 简繁转换 |
+| `/date-calc` | 日期计算 |
+| `/password-gen` | 密码生成器 |
+| `/http-status` | HTTP 状态码速查 |
 
 ## 目录结构
 
diff --git a/agents.md b/agents.md
index 01e3108..132c220 100644
--- a/agents.md
+++ b/agents.md
@@ -57,7 +57,7 @@ export interface ToolItem {
 2. 在 `tools.ts` 的 `tools` 数组末尾追加一条配置，`component` 使用 `() => import('@/views/<tool-name>/<ToolName>View.vue')`。
 3. 完成——菜单、首页卡片、路由、文档标题自动生效。可运行 `pnpm type-check` 验证。
 
-**注意：** `path` 必须与页面内 `useHistory('xxx')` 的 key 一致（历史记录约定），并避免与现有 15 个 path 重复。
+**注意：** `path` 必须与页面内 `useHistory('xxx')` 的 key 一致（历史记录约定），并避免与现有 27 个 path 重复。
 
 ### 3.2 历史记录约定
 
@@ -103,6 +103,18 @@ export interface ToolItem {
 | URL 解析 | `views/url-parse` | 原生 `URL` / `URLSearchParams` | 无协议输入自动补 `https://`；构造器用 `searchParams.append` 自动编码 |
 | 翻译 | `views/translate` | 有道演示接口 + 腾讯翻译君（翻译）；`dict.youdao.com/dictvoice`（发音）；Free Dictionary API → Datamuse（词典）；`pinyin-pro`（拼音） | **唯一需要联网的工具**，界面参考有道翻译：语言对/场景下拉、双栏对照、字符计数、单词释义（拼音+词性释义+例句）、发音朗读、逐句对照、反馈按钮、来源标注（有道AI翻译标准模型/腾讯翻译君）。翻译接口：语言码映射 zh-CN→zh-CHS（有道）/zh（腾讯）；「自动检测」用脚本特征兜底判定（中文/日文/韩文/英文）；两个接口依次尝试降级；免费接口有频率限制（411），页面已提示。**发音**：`dict.youdao.com/dictvoice?audio=<文本>&type=<2=美音|0=中文/韩文>` 免签，日文不支持（500），日文译文改用有道接口返回的签名 `tSpeakUrl`（仅有道成功时可用，否则隐藏按钮）。**词典**：英文单词先查 `api.dictionaryapi.dev`（含音标/例句，部分地区网络不稳），超时降级 `api.datamuse.com/words?sp=<词>&md=d`（defs 为 "词性\t释义" 文本，需 split）。中文源词拼音由 pinyin-pro 本地生成（`toneType: 'symbol'`）。**已知限制**：有道演示接口不支持 en→ja（errorCode 102，自动降级腾讯）；「逐句对照」按句拆分后逐句翻译（并发 3、最多 15 句）；「AI 润色」仅保留入口（需官方 Key，点击展示说明） |
 | OCR | `views/ocr` | `tesseract.js`（WASM） | 见第 5 节离线说明 |
+| UUID 生成 | `views/uuid` | 原生 `crypto.getRandomValues` | RFC 4122 v4（版本/变体位手工写入）；支持数量 1-100、大写、去连字符；历史存生成结果文本（截断 300 字符），点击按行恢复 |
+| 正则测试 | `views/regex-test` | 原生 `RegExp` | exec 循环收集匹配：**无 g 时只取第一处**、空匹配需手动推进 lastIndex 防死循环；高亮用 segments 数组 + span 渲染（禁止 v-html）；替换用 `text.replace(re, $1)`；历史存 JSON 快照（pattern/flags/text），解析失败静默忽略 |
+| 命名转换 | `views/case-convert` | 纯 TS 分词 | 先按非字母数字切分（中文每汉字一词元），再用插空格法切 camelCase 边界（避免 lookbehind 兼容问题）；输出 6 种风格 |
+| 色值转换 | `views/color-convert` | 手写 RGB/HSL/HSV 公式 | 解析 #RGB/#RRGGBB/#RRGGBBAA、rgb(a)、hsl(a)；原生 `<input type="color">` + 预设色板；预览文字色按相对亮度自动切换（暗黑模式可读） |
+| 单位换算 | `views/unit-convert` | 纯 TS 单位表（factor 基准换算） | 8 类单位；**温度特殊**（C/F/K 三向公式不走 factor）；结果 `toPrecision(6)` 去尾零；切换类别自动重置为该类前两个单位 |
+| YAML ↔ JSON | `views/yaml-json` | `js-yaml`（命名导入 `load`/`dump`，勿用 default import） | YAML 未加引号的日期字符串会被隐式解析为日期，页面已提示；空输入/`load` 返回 undefined 需显式报错 |
+| 字数统计 | `views/word-count` | 原生正则 + `TextEncoder` | 10 项实时统计；阅读时长 = 汉字/400 + 英文单词/200；历史在输入失焦时记录（无转换按钮，避免打字刷屏） |
+| 人民币大写 | `views/rmb-upper` | 纯 TS + BigInt 整数运算 | 金额按字符串处理并转「整数 + 分」的整数运算，**避免浮点精度**；每 4 位一组（个/万/亿/万亿），组间补零规则已用测试样例覆盖（0/10/1001/100000/负数/角分） |
+| 简繁转换 | `views/zh-convert` | `opencc-js`（`import * as OpenCC`，Converter 顶层创建复用） | cn↔tw 标准映射，不含台湾用语变体；**体积大**（懒加载 chunk 约 500KB gzip），如需减小可改 CustomConverter 按需加载词典 |
+| 日期计算 | `views/date-calc` | 原生 Date（本地时间构造） | 三个 tab：差值/推算/年龄生肖。`parseDate` 用 `new Date(y, m-1, d)` + 回读校验防时区偏移与 2 月 30 类非法日期；月/年推算先归 1 号再 setMonth/setFullYear，溢出钳制到目标月最后一天；生肖 `((year-4)%12+12)%12` 正模 |
+| 密码生成 | `views/password-gen` | `crypto.getRandomValues` + 拒绝采样 | 每种选中字符集至少出现一次 + Fisher-Yates 洗牌；t-slider 数值用外部 `<span>` 显示（label 不能传函数）；强度 = 长度×log2(池大小) 分四档 |
+| HTTP 状态码 | `views/http-status` | 内置静态数据（56 条，1xx-5xx） | 搜索（code/短语/中文）+ 分类筛选；历史存搜索词 |
 
 ## 5. OCR 特殊说明（重要）
 
@@ -165,4 +177,4 @@ pnpm preview        # 预览 dist
 - **PWA / 离线**：可接入 `vite-plugin-pwa`，配合第 5 节 OCR 离线方案实现完全离线工具站。
 - **国际化**：文案目前硬编码中文，若需 i18n 建议 vue-i18n，工具注册表的 `name/desc` 改为 key。
 - **体积优化**：TDesign 目前全量注册（约 1.4MB gzip 373KB），若追求极致可改按需引入（unplugin-vue-components + TDesignResolver）。
-- **更多工具**：色值转换、UUID 生成、正则测试、YAML 转换（js-yaml）、图片格式互转（canvas）等均可按现有模式快速复制。
+- **更多工具**：图片格式互转（canvas）、Markdown 预览（markdown-it）、SQL 格式化（sql-formatter）、CSS 渐变生成器、番茄钟、BMI/贷款计算器等均可按现有模式快速复制。
diff --git a/package.json b/package.json
index b2ac503..c8b4751 100644
--- a/package.json
+++ b/package.json
@@ -12,11 +12,14 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
+    "@types/js-yaml": "^4.0.9",
     "browser-image-compression": "^2.0.2",
     "cron-parser": "^4.9.0",
     "cropperjs": "^1.6.2",
+    "js-yaml": "^5.3.0",
     "jsqr": "^1.4.0",
     "jszip": "^3.10.1",
+    "opencc-js": "^1.4.1",
     "pinia": "^3.0.1",
     "pinyin-pro": "^3.29.3",
     "qrcode": "^1.5.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c0778d3..dca9e07 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@types/js-yaml':
+        specifier: ^4.0.9
+        version: 4.0.9
       browser-image-compression:
         specifier: ^2.0.2
         version: 2.0.2
@@ -17,12 +20,18 @@ importers:
       cropperjs:
         specifier: ^1.6.2
         version: 1.6.2
+      js-yaml:
+        specifier: ^5.3.0
+        version: 5.3.0
       jsqr:
         specifier: ^1.4.0
         version: 1.4.0
       jszip:
         specifier: ^3.10.1
         version: 3.10.1
+      opencc-js:
+        specifier: ^1.4.1
+        version: 1.4.1
       pinia:
         specifier: ^3.0.1
         version: 3.0.4(typescript@5.7.3)(vue@3.5.41(typescript@5.7.3))
@@ -691,6 +700,9 @@ packages:
   '@types/estree@1.0.9':
     resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
+  '@types/js-yaml@4.0.9':
+    resolution: {integrity: sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==}
+
   '@types/lodash-es@4.17.12':
     resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
 
@@ -881,6 +893,9 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -1121,6 +1136,10 @@ packages:
     resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
     hasBin: true
 
+  js-yaml@5.3.0:
+    resolution: {integrity: sha512-muutsYr+e2+d3rTgUGslq5rxbBlUy3cJ61IsHag2QNDQV+7zXWjkUpmALIajhrlLlrgRUiymj6U3zUr/TMK84Q==}
+    hasBin: true
+
   jsqr@1.4.0:
     resolution: {integrity: sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A==}
 
@@ -1205,6 +1224,9 @@ packages:
   ofetch@1.5.1:
     resolution: {integrity: sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==}
 
+  opencc-js@1.4.1:
+    resolution: {integrity: sha512-2lPLcrg7cnh1ATSduOxhnk/jq6KlR6w+5Ihl4wF7Z5e5Rva4vxTyugV5rZ7EiUCOZl+EDOLetIix+BhgYDCC+A==}
+
   opencollective-postinstall@2.0.3:
     resolution: {integrity: sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==}
     hasBin: true
@@ -1912,6 +1934,8 @@ snapshots:
 
   '@types/estree@1.0.9': {}
 
+  '@types/js-yaml@4.0.9': {}
+
   '@types/lodash-es@4.17.12':
     dependencies:
       '@types/lodash': 4.17.25
@@ -2210,6 +2234,8 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.2
 
+  argparse@2.0.1: {}
+
   balanced-match@1.0.2: {}
 
   binary-extensions@2.3.0: {}
@@ -2452,6 +2478,10 @@ snapshots:
 
   jiti@2.7.0: {}
 
+  js-yaml@5.3.0:
+    dependencies:
+      argparse: 2.0.1
+
   jsqr@1.4.0: {}
 
   jszip@3.10.1:
@@ -2527,6 +2557,8 @@ snapshots:
       node-fetch-native: 1.6.7
       ufo: 1.6.4
 
+  opencc-js@1.4.1: {}
+
   opencollective-postinstall@2.0.3: {}
 
   p-limit@2.3.0:
diff --git a/src/router/tools.ts b/src/router/tools.ts
index 3ccea4e..e07dedf 100644
--- a/src/router/tools.ts
+++ b/src/router/tools.ts
@@ -15,6 +15,15 @@ import {
   LinkIcon,
   TranslateIcon,
   BrowseIcon,
+  RefreshIcon,
+  ControlPlatformIcon,
+  Palette1Icon,
+  SwapIcon,
+  FileCodeIcon,
+  ChartIcon,
+  MoneyIcon,
+  InternetIcon,
+  KeyIcon,
 } from 'tdesign-icons-vue-next'
 
 /**
@@ -145,4 +154,88 @@ export const tools: ToolItem[] = [
     icon: BrowseIcon,
     component: () => import('@/views/ocr/OcrView.vue'),
   },
+  {
+    path: 'uuid',
+    name: 'UUID 生成',
+    desc: '批量生成 UUID v4，支持大小写与去连字符',
+    icon: RefreshIcon,
+    component: () => import('@/views/uuid/UuidView.vue'),
+  },
+  {
+    path: 'regex-test',
+    name: '正则测试',
+    desc: '实时测试正则匹配、分组与替换，匹配高亮显示',
+    icon: ControlPlatformIcon,
+    component: () => import('@/views/regex-test/RegexTestView.vue'),
+  },
+  {
+    path: 'case-convert',
+    name: '命名转换',
+    desc: '驼峰、蛇形、短横线等命名风格一键互转',
+    icon: CodeIcon,
+    component: () => import('@/views/case-convert/CaseConvertView.vue'),
+  },
+  {
+    path: 'color-convert',
+    name: '色值转换',
+    desc: 'HEX、RGB、HSL、HSV 互转，取色器 + 预设色板',
+    icon: Palette1Icon,
+    component: () => import('@/views/color-convert/ColorConvertView.vue'),
+  },
+  {
+    path: 'unit-convert',
+    name: '单位换算',
+    desc: '长度、质量、温度、数据存储等 8 类单位换算',
+    icon: SwapIcon,
+    component: () => import('@/views/unit-convert/UnitConvertView.vue'),
+  },
+  {
+    path: 'yaml-json',
+    name: 'YAML ↔ JSON',
+    desc: 'YAML 与 JSON 双向转换，报错定位清晰',
+    icon: FileCodeIcon,
+    component: () => import('@/views/yaml-json/YamlJsonView.vue'),
+  },
+  {
+    path: 'word-count',
+    name: '字数统计',
+    desc: '统计字符、汉字、单词、段落与阅读时长',
+    icon: ChartIcon,
+    component: () => import('@/views/word-count/WordCountView.vue'),
+  },
+  {
+    path: 'rmb-upper',
+    name: '人民币大写',
+    desc: '数字金额转人民币大写，处理角分与负数',
+    icon: MoneyIcon,
+    component: () => import('@/views/rmb-upper/RmbUpperView.vue'),
+  },
+  {
+    path: 'zh-convert',
+    name: '简繁转换',
+    desc: '简体与繁体中文互转（opencc 词库）',
+    icon: TranslateIcon,
+    component: () => import('@/views/zh-convert/ZhConvertView.vue'),
+  },
+  {
+    path: 'date-calc',
+    name: '日期计算',
+    desc: '日期差值、推算与年龄生肖星座计算',
+    icon: CalendarIcon,
+    component: () => import('@/views/date-calc/DateCalcView.vue'),
+  },
+  {
+    path: 'password-gen',
+    name: '密码生成',
+    desc: '随机强密码批量生成，含强度评估',
+    icon: KeyIcon,
+    component: () => import('@/views/password-gen/PasswordGenView.vue'),
+  },
+  {
+    path: 'http-status',
+    name: 'HTTP 状态码',
+    desc: '常用 HTTP 状态码速查，支持搜索与分类',
+    icon: InternetIcon,
+    component: () => import('@/views/http-status/HttpStatusView.vue'),
+  },
 ]
diff --git a/src/views/case-convert/CaseConvertView.vue b/src/views/case-convert/CaseConvertView.vue
new file mode 100644
index 0000000..ab3fcf6
--- /dev/null
+++ b/src/views/case-convert/CaseConvertView.vue
@@ -0,0 +1,157 @@
+<!-- 命名转换：把输入串切分为词元，实时生成 camelCase / PascalCase / snake_case / kebab-case 等 6 种风格 -->
+<template>
+  <div class="page-wrap">
+    <h2 class="page-title">命名转换</h2>
+    <p class="page-desc">输入变量名或短语，实时转换为 camelCase、PascalCase、snake_case、kebab-case 等 6 种常见命名风格。</p>
+
+    <t-card class="tool-section" title="输入">
+      <t-input
+        v-model="input"
+        placeholder="输入变量名，例如 my_user_name 或 myUserName"
+        clearable
+        @enter="saveHistory"
+      />
+    </t-card>
+
+    <ErrorAlert :message="error" @close="error = ''" />
+
+    <t-card v-if="words.length" class="tool-section" title="转换结果">
+      <div class="convert-list">
+        <div v-for="row in resultRows" :key="row.name" class="convert-row">
+          <span class="convert-label">{{ row.name }}</span>
+          <code class="convert-value">{{ row.value }}</code>
+          <CopyButton :text="row.value" label="复制" />
+        </div>
+      </div>
+    </t-card>
+
+    <HistoryPanel
+      :items="history.items"
+      @select="onHistorySelect"
+      @remove="history.remove"
+      @clear="history.clear"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import ErrorAlert from '@/components/common/ErrorAlert.vue'
+import CopyButton from '@/components/common/CopyButton.vue'
+import HistoryPanel from '@/components/common/HistoryPanel.vue'
+import { useHistory } from '@/composables/useHistory'
+
+const history = useHistory('case-convert')
+
+const input = ref('')
+// 本页为实时转换、无校验失败场景，error 仅用于保持全站页面结构一致
+const error = ref('')
+
+/**
+ * 将输入切分为全小写词元数组：
+ * 先按非字母数字切分（下划线/连字符/空格等作为分隔符），中文每个汉字视为独立词元；
+ * 再把连续字母数字串按 camelCase 边界（小写/数字→大写、字母→数字、数字→字母）细分。
+ */
+function tokenize(s: string): string[] {
+  const words: string[] = []
+  const segments = s.match(/[a-zA-Z0-9]+|[\u4e00-\u9fa5]/g) ?? []
+  for (const seg of segments) {
+    if (/^[\u4e00-\u9fa5]$/.test(seg)) {
+      words.push(seg)
+      continue
+    }
+    // 在驼峰边界插入空格再切分，最后统一转小写
+    const parts = seg
+      .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+      .replace(/([A-Za-z])(\d)/g, '$1 $2')
+      .replace(/(\d)([A-Za-z])/g, '$1 $2')
+      .split(/\s+/)
+      .map((w) => w.toLowerCase())
+    words.push(...parts)
+  }
+  return words
+}
+
+const words = computed(() => tokenize(input.value))
+
+/** 单词首字母大写（对中文词元无副作用） */
+function capitalize(w: string): string {
+  return w.charAt(0).toUpperCase() + w.slice(1)
+}
+
+/** 6 种命名风格的实时输出 */
+const outputs = computed(() => {
+  const ws = words.value
+  return {
+    camel: ws.map((w, i) => (i === 0 ? w : capitalize(w))).join(''),
+    pascal: ws.map(capitalize).join(''),
+    snake: ws.join('_'),
+    upperSnake: ws.join('_').toUpperCase(),
+    kebab: ws.join('-'),
+    space: ws.join(' '),
+  }
+})
+
+/** 供模板遍历的展示行（风格名固定宽度放左侧） */
+const resultRows = computed(() => [
+  { name: 'camelCase', value: outputs.value.camel },
+  { name: 'PascalCase', value: outputs.value.pascal },
+  { name: 'snake_case', value: outputs.value.snake },
+  { name: 'UPPER_SNAKE_CASE', value: outputs.value.upperSnake },
+  { name: 'kebab-case', value: outputs.value.kebab },
+  { name: '空格分隔', value: outputs.value.space },
+])
+
+/** 回车把当前输入存入历史 */
+function saveHistory() {
+  if (input.value.trim()) history.add(input.value)
+}
+
+function onHistorySelect(text: string) {
+  input.value = text
+}
+</script>
+
+<style scoped>
+.convert-list {
+  display: flex;
+  flex-direction: column;
+}
+.convert-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 0;
+  border-bottom: 1px solid var(--td-border-level-1-color);
+}
+.convert-row:last-child {
+  border-bottom: none;
+}
+.convert-label {
+  width: 150px;
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--td-text-color-secondary);
+}
+.convert-value {
+  flex: 1;
+  min-width: 0;
+  padding: 6px 10px;
+  border-radius: 6px;
+  background: var(--td-bg-color-secondarycontainer);
+  font-family: monospace;
+  font-size: 13px;
+  color: var(--td-text-color-primary);
+  overflow-wrap: anywhere;
+}
+@media (max-width: 767px) {
+  /* 窄屏下风格名与内容上下排列，避免横向滚动 */
+  .convert-row {
+    flex-wrap: wrap;
+  }
+  .convert-label {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/views/color-convert/ColorConvertView.vue b/src/views/color-convert/ColorConvertView.vue
new file mode 100644
index 0000000..6e97f4b
--- /dev/null
+++ b/src/views/color-convert/ColorConvertView.vue
@@ -0,0 +1,400 @@
+<template>
+  <div class="page-wrap">
+    <h2 class="page-title">色值转换</h2>
+    <p class="page-desc">HEX / RGB / HSL / HSV 相互转换，支持取色器与预设色板，全部计算在本地完成。</p>
+
+    <t-card class="tool-section" title="输入颜色">
+      <t-input
+        v-model="input"
+        placeholder="#3B82F6 / rgb(59,130,246) / hsl(217,91%,60%)"
+        clearable
+        @change="parse"
+      />
+      <div class="form-row" style="margin-top: 12px">
+        <span class="form-label">取色</span>
+        <input v-model="picker" type="color" class="color-picker" @change="onPickerChange" />
+      </div>
+      <div class="form-row" style="margin-top: 12px">
+        <span class="form-label">预设</span>
+        <div class="preset-row">
+          <button
+            v-for="p in presets"
+            :key="p"
+            type="button"
+            class="preset-dot"
+            :style="{ backgroundColor: p }"
+            :title="p"
+            @click="applyPreset(p)"
+          />
+        </div>
+      </div>
+    </t-card>
+
+    <ErrorAlert :message="error" @close="error = ''" />
+
+    <t-card v-if="result" class="tool-section" title="转换结果">
+      <div class="preview-block" :style="previewStyle">{{ result.hex }}</div>
+      <div v-for="row in outputRows" :key="row.label" class="output-row">
+        <span class="output-label">{{ row.label }}</span>
+        <div class="code-block output-value">{{ row.value }}</div>
+        <CopyButton :text="row.value" :label="`复制 ${row.label}`" />
+      </div>
+      <div class="channel-grid">
+        <div v-for="c in channels" :key="c.label" class="channel-item">
+          <span class="channel-label">{{ c.label }}</span>
+          <span class="channel-value">{{ c.value }}</span>
+        </div>
+      </div>
+    </t-card>
+
+    <HistoryPanel
+      :items="history.items"
+      @select="onHistorySelect"
+      @remove="history.remove"
+      @clear="history.clear"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 色值转换：手写 RGB/HSL/HSV 转换公式，解析 HEX/RGB(A)/HSL(A) 输入并输出四种色值表示。
+import { computed, ref } from 'vue'
+import ErrorAlert from '@/components/common/ErrorAlert.vue'
+import CopyButton from '@/components/common/CopyButton.vue'
+import HistoryPanel from '@/components/common/HistoryPanel.vue'
+import { useHistory } from '@/composables/useHistory'
+
+interface Rgb {
+  r: number
+  g: number
+  b: number
+}
+
+interface ColorResult {
+  hex: string
+  rgb: string
+  hsl: string
+  hsv: string
+  r: number
+  g: number
+  b: number
+  h: number
+  s: number
+  l: number
+  v: number
+}
+
+const input = ref('')
+const picker = ref('#3B82F6')
+const error = ref('')
+const result = ref<ColorResult | null>(null)
+const history = useHistory('color-convert')
+
+// 预设色板：仅此处的色块本身允许硬编码颜色
+const presets = [
+  '#3B82F6',
+  '#EF4444',
+  '#22C55E',
+  '#F59E0B',
+  '#8B5CF6',
+  '#EC4899',
+  '#14B8A6',
+  '#F97316',
+  '#64748B',
+  '#0F172A',
+]
+
+/** 去掉多余尾零：先 toFixed(1) 保留 1 位小数，再经 Number 转回最短表示 */
+function fmt(n: number): string {
+  return String(Number(n.toFixed(1)))
+}
+
+function toHex(rgb: Rgb): string {
+  const part = (v: number): string => v.toString(16).padStart(2, '0')
+  return `#${part(rgb.r)}${part(rgb.g)}${part(rgb.b)}`
+}
+
+/** HSL → RGB 标准公式（h 0-360，s/l 0-1），返回 0-255 整数 */
+function hslToRgb(h: number, s: number, l: number): Rgb {
+  const c = (1 - Math.abs(2 * l - 1)) * s
+  const hp = h / 60
+  const x = c * (1 - Math.abs((hp % 2) - 1))
+  let r = 0
+  let g = 0
+  let b = 0
+  if (hp < 1) {
+    r = c
+    g = x
+  } else if (hp < 2) {
+    r = x
+    g = c
+  } else if (hp < 3) {
+    g = c
+    b = x
+  } else if (hp < 4) {
+    g = x
+    b = c
+  } else if (hp < 5) {
+    r = x
+    b = c
+  } else {
+    r = c
+    b = x
+  }
+  const m = l - c / 2
+  return { r: Math.round((r + m) * 255), g: Math.round((g + m) * 255), b: Math.round((b + m) * 255) }
+}
+
+/** RGB → HSL 标准公式，h 0-360、s/l 0-100 */
+function rgbToHsl(rgb: Rgb): { h: number; s: number; l: number } {
+  const r = rgb.r / 255
+  const g = rgb.g / 255
+  const b = rgb.b / 255
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const l = (max + min) / 2
+  const d = max - min
+  if (d === 0) return { h: 0, s: 0, l: l * 100 } // 灰阶无色相
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+  let h: number
+  if (max === r) h = (g - b) / d + (g < b ? 6 : 0)
+  else if (max === g) h = (b - r) / d + 2
+  else h = (r - g) / d + 4
+  return { h: h * 60, s: s * 100, l: l * 100 }
+}
+
+/** RGB → HSV 标准公式，h 0-360、s/v 0-100 */
+function rgbToHsv(rgb: Rgb): { h: number; s: number; v: number } {
+  const r = rgb.r / 255
+  const g = rgb.g / 255
+  const b = rgb.b / 255
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const d = max - min
+  let h = 0
+  if (d !== 0) {
+    if (max === r) h = (g - b) / d + (g < b ? 6 : 0)
+    else if (max === g) h = (b - r) / d + 2
+    else h = (r - g) / d + 4
+    h *= 60
+  }
+  const s = max === 0 ? 0 : (d / max) * 100
+  return { h, s, v: max * 100 }
+}
+
+/**
+ * 解析颜色字符串，支持 #RGB、#RRGGBB、#RRGGBBAA（Alpha 忽略）、
+ * rgb()/rgba()、hsl()/hsla()，失败返回 null。
+ */
+function parseColor(raw: string): Rgb | null {
+  const s = raw.trim().toLowerCase()
+  if (!s) return null
+  // 短 HEX：#RGB，每位重复一次
+  let m = /^#([0-9a-f]{3})$/.exec(s)
+  if (m) {
+    const d = m[1]
+    return {
+      r: parseInt(d[0] + d[0], 16),
+      g: parseInt(d[1] + d[1], 16),
+      b: parseInt(d[2] + d[2], 16),
+    }
+  }
+  // 长 HEX：#RRGGBB 或 #RRGGBBAA（末尾 Alpha 不影响色值，直接忽略）
+  m = /^#([0-9a-f]{6})(?:[0-9a-f]{2})?$/.exec(s)
+  if (m) {
+    return {
+      r: parseInt(m[1].slice(0, 2), 16),
+      g: parseInt(m[1].slice(2, 4), 16),
+      b: parseInt(m[1].slice(4, 6), 16),
+    }
+  }
+  // rgb()/rgba()：Alpha 忽略，分量需在 0-255 内
+  m = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*[\d.]+%?)?\s*\)$/.exec(s)
+  if (m) {
+    const r = Number(m[1])
+    const g = Number(m[2])
+    const b = Number(m[3])
+    if (r <= 255 && g <= 255 && b <= 255) return { r, g, b }
+    return null
+  }
+  // hsl()/hsla()：色相任意角度（归一化到 0-360），饱和/亮度需在 0-100 内
+  m = /^hsla?\(\s*(-?[\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*[\d.]+%?)?\s*\)$/.exec(s)
+  if (m) {
+    const h = ((Number(m[1]) % 360) + 360) % 360
+    const sat = Number(m[2])
+    const light = Number(m[3])
+    if (sat > 100 || light > 100) return null
+    return hslToRgb(h, sat / 100, light / 100)
+  }
+  return null
+}
+
+function parse() {
+  error.value = ''
+  const raw = input.value.trim()
+  if (!raw) {
+    result.value = null
+    return
+  }
+  const rgb = parseColor(raw)
+  if (!rgb) {
+    result.value = null
+    error.value = '无法解析该颜色，支持 #RGB、#RRGGBB、#RRGGBBAA、rgb()/rgba()、hsl()/hsla() 格式'
+    return
+  }
+  const hsl = rgbToHsl(rgb)
+  const hsv = rgbToHsv(rgb)
+  result.value = {
+    r: rgb.r,
+    g: rgb.g,
+    b: rgb.b,
+    hex: toHex(rgb),
+    rgb: `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`,
+    hsl: `hsl(${fmt(hsl.h)}, ${fmt(hsl.s)}%, ${fmt(hsl.l)}%)`,
+    hsv: `hsv(${fmt(hsv.h)}, ${fmt(hsv.s)}%, ${fmt(hsv.v)}%)`,
+    h: hsl.h,
+    s: hsl.s,
+    l: hsl.l,
+    v: hsv.v,
+  }
+  history.add(raw)
+}
+
+function onPickerChange() {
+  // 原生取色器：把选中的十六进制值回填输入框并立即解析
+  input.value = picker.value
+  parse()
+}
+
+function applyPreset(hex: string) {
+  input.value = hex
+  parse()
+}
+
+function onHistorySelect(text: string) {
+  input.value = text
+  parse()
+}
+
+const outputRows = computed<{ label: string; value: string }[]>(() => {
+  const c = result.value
+  if (!c) return []
+  return [
+    { label: 'HEX', value: c.hex },
+    { label: 'RGB', value: c.rgb },
+    { label: 'HSL', value: c.hsl },
+    { label: 'HSV', value: c.hsv },
+  ]
+})
+
+/** 预览色块样式：背景为当前色，文字按相对亮度自动选择深/浅色，两种主题下都可读 */
+const previewStyle = computed((): Record<string, string> => {
+  const c = result.value
+  if (!c) return {}
+  const lum = (0.299 * c.r + 0.587 * c.g + 0.114 * c.b) / 255
+  return {
+    backgroundColor: c.hex,
+    color: lum > 0.5 ? 'var(--td-text-color-primary)' : 'var(--td-text-color-anti)',
+  }
+})
+
+const channels = computed<{ label: string; value: number }[]>(() => {
+  const c = result.value
+  if (!c) return []
+  return [
+    { label: 'R', value: c.r },
+    { label: 'G', value: c.g },
+    { label: 'B', value: c.b },
+    { label: 'H', value: Math.round(c.h) },
+    { label: 'S', value: Math.round(c.s) },
+    { label: 'L', value: Math.round(c.l) },
+    { label: 'V', value: Math.round(c.v) },
+  ]
+})
+</script>
+
+<style scoped>
+.form-label {
+  width: 56px;
+  flex-shrink: 0;
+  font-size: 14px;
+  color: var(--td-text-color-secondary);
+}
+.color-picker {
+  width: 48px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--td-border-level-1-color);
+  border-radius: 6px;
+  background: var(--td-bg-color-container);
+  cursor: pointer;
+}
+.preset-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.preset-dot {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 6px;
+  border: 1px solid var(--td-border-level-1-color);
+  cursor: pointer;
+}
+.preview-block {
+  height: 96px;
+  border-radius: 8px;
+  border: 1px solid var(--td-border-level-1-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: monospace;
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+.output-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+.output-label {
+  width: 40px;
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--td-text-color-secondary);
+}
+.output-value {
+  flex: 1;
+  min-width: 0;
+}
+.channel-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 8px;
+  margin-top: 16px;
+}
+.channel-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border: 1px solid var(--td-border-level-1-color);
+  border-radius: 6px;
+  background: var(--td-bg-color-container);
+}
+.channel-label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--td-text-color-secondary);
+}
+.channel-value {
+  font-family: monospace;
+  font-size: 13px;
+  color: var(--td-text-color-primary);
+}
+</style>
diff --git a/src/views/date-calc/DateCalcView.vue b/src/views/date-calc/DateCalcView.vue
new file mode 100644
index 0000000..0acbec0
--- /dev/null
+++ b/src/views/date-calc/DateCalcView.vue
@@ -0,0 +1,409 @@
+<!-- 日期计算：日期差值 / 日期推算 / 年龄生肖，全部按本地时间计算，无时区偏移 -->
+<template>
+  <div class="page-wrap">
+    <h2 class="page-title">日期计算</h2>
+    <p class="page-desc">计算两个日期的差值、按天/周/月/年推算日期，以及年龄、生肖与星座。</p>
+
+    <t-tabs v-model="tab">
+      <!-- 日期差值 -->
+      <t-tab-panel value="date-diff" label="日期差值">
+        <t-card class="tool-section" title="选择两个日期">
+          <div class="form-row">
+            <span class="form-label">日期 A</span>
+            <t-date-picker
+              v-model="dateA"
+              allow-input
+              clearable
+              format="YYYY-MM-DD"
+              value-type="YYYY-MM-DD"
+              placeholder="选择日期 A"
+            />
+          </div>
+          <div class="form-row" style="margin-top: 12px">
+            <span class="form-label">日期 B</span>
+            <t-date-picker
+              v-model="dateB"
+              allow-input
+              clearable
+              format="YYYY-MM-DD"
+              value-type="YYYY-MM-DD"
+              placeholder="选择日期 B"
+            />
+          </div>
+          <div class="form-actions">
+            <t-button theme="primary" @click="calcDiff">计算</t-button>
+          </div>
+        </t-card>
+        <ErrorAlert :message="error1" @close="error1 = ''" />
+        <t-card v-if="diffResult" class="tool-section" title="计算结果">
+          <div class="code-block">{{ diffResult }}</div>
+          <div class="form-actions">
+            <CopyButton :text="diffResult" />
+          </div>
+        </t-card>
+      </t-tab-panel>
+
+      <!-- 日期推算 -->
+      <t-tab-panel value="date-add" label="日期推算">
+        <t-card class="tool-section" title="输入基准日期与偏移量">
+          <div class="form-row">
+            <span class="form-label">基准日期</span>
+            <t-date-picker
+              v-model="baseDate"
+              allow-input
+              clearable
+              format="YYYY-MM-DD"
+              value-type="YYYY-MM-DD"
+              placeholder="选择基准日期"
+            />
+          </div>
+          <div class="form-row" style="margin-top: 12px">
+            <span class="form-label">偏移量</span>
+            <t-input-number v-model="addNum" :min="1" :max="100000" theme="normal" />
+            <t-select v-model="addUnit" :options="unitOptions" class="form-select" />
+            <t-radio-group v-model="addDir" variant="default-filled">
+              <t-radio-button value="after">之后</t-radio-button>
+              <t-radio-button value="before">之前</t-radio-button>
+            </t-radio-group>
+          </div>
+          <p class="form-tip">
+            月份/年份加减时，若原日期超过目标月最后一天（如 1 月 31 日加 1 个月），结果自动钳制到目标月最后一天。
+          </p>
+          <div class="form-actions">
+            <t-button theme="primary" @click="calcAdd">计算</t-button>
+          </div>
+        </t-card>
+        <ErrorAlert :message="error2" @close="error2 = ''" />
+        <t-card v-if="addResult" class="tool-section" title="推算结果">
+          <div class="code-block">{{ addResult }}</div>
+          <div class="form-actions">
+            <CopyButton :text="addResult" />
+          </div>
+        </t-card>
+      </t-tab-panel>
+
+      <!-- 年龄生肖 -->
+      <t-tab-panel value="age" label="年龄生肖">
+        <t-card class="tool-section" title="选择出生日期">
+          <div class="form-row">
+            <span class="form-label">出生日期</span>
+            <t-date-picker
+              v-model="birthDate"
+              allow-input
+              clearable
+              format="YYYY-MM-DD"
+              value-type="YYYY-MM-DD"
+              placeholder="选择出生日期"
+            />
+          </div>
+          <div class="form-actions">
+            <t-button theme="primary" @click="calcAge">计算</t-button>
+          </div>
+        </t-card>
+        <ErrorAlert :message="error3" @close="error3 = ''" />
+        <t-card v-if="ageResult" class="tool-section" title="年龄与生肖">
+          <div class="code-block">{{ ageResult }}</div>
+          <div class="form-actions">
+            <CopyButton :text="ageResult" />
+          </div>
+        </t-card>
+      </t-tab-panel>
+    </t-tabs>
+
+    <HistoryPanel
+      :items="history.items"
+      @select="onHistorySelect"
+      @remove="history.remove"
+      @clear="history.clear"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import ErrorAlert from '@/components/common/ErrorAlert.vue'
+import CopyButton from '@/components/common/CopyButton.vue'
+import HistoryPanel from '@/components/common/HistoryPanel.vue'
+import { useHistory } from '@/composables/useHistory'
+
+/** 历史记录结构：不同面板各存所需字段，恢复时按 tab 回填并计算 */
+interface DateCalcHistory {
+  tab: string
+  a?: string
+  b?: string
+  base?: string
+  n?: number
+  unit?: string
+  dir?: string
+  birth?: string
+}
+
+const history = useHistory('date-calc')
+const tab = ref('date-diff')
+
+/* ---------- 公共日期工具 ---------- */
+
+/** 解析 YYYY-MM-DD 字符串；按本地时间构造，避免 new Date('YYYY-MM-DD') 按 UTC 解析导致的时区偏移 */
+function parseDate(s: string): Date | null {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s.trim())
+  if (!m) return null
+  const y = Number(m[1])
+  const mo = Number(m[2])
+  const d = Number(m[3])
+  const date = new Date(y, mo - 1, d)
+  // 回读校验，过滤 2023-02-30 这类构造时会被自动进位的非法日期
+  if (date.getFullYear() !== y || date.getMonth() !== mo - 1 || date.getDate() !== d) return null
+  return date
+}
+
+/** 输出 YYYY-MM-DD 字符串 */
+function formatDate(d: Date): string {
+  const pad = (n: number) => String(n).padStart(2, '0')
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
+}
+
+/** 返回「星期X」 */
+const WEEKDAYS = ['日', '一', '二', '三', '四', '五', '六']
+function weekdayName(d: Date): string {
+  return `星期${WEEKDAYS[d.getDay()]}`
+}
+
+/** 今天的 YYYY-MM-DD 字符串（本地时间） */
+function todayStr(): string {
+  return formatDate(new Date())
+}
+
+/** 两个日期相差的天数：用 UTC 毫秒差计算，避免本地夏令时导致的 23/25 小时天误差 */
+function diffDays(a: Date, b: Date): number {
+  return Math.round(
+    (Date.UTC(b.getFullYear(), b.getMonth(), b.getDate()) -
+      Date.UTC(a.getFullYear(), a.getMonth(), a.getDate())) /
+      86400000,
+  )
+}
+
+/* ---------- 日期差值 ---------- */
+const dateA = ref(todayStr())
+const dateB = ref(todayStr())
+const error1 = ref('')
+const diffResult = ref('')
+
+function calcDiff() {
+  error1.value = ''
+  diffResult.value = ''
+  const a = parseDate(dateA.value)
+  const b = parseDate(dateB.value)
+  if (!a || !b) {
+    error1.value = '请选择合法的日期'
+    return
+  }
+  const diff = diffDays(a, b)
+  const absDays = Math.abs(diff)
+  // 按 365.25 天/年、30.44 天/月 折算近似「年 月 天」
+  const years = Math.floor(absDays / 365.25)
+  const months = Math.floor((absDays - years * 365.25) / 30.44)
+  const days = Math.round(absDays - years * 365.25 - months * 30.44)
+  const relation =
+    diff > 0
+      ? `${dateB.value} 比 ${dateA.value} 晚`
+      : diff < 0
+        ? `${dateB.value} 比 ${dateA.value} 早`
+        : '两个日期相同'
+  diffResult.value = [
+    `相差天数：${absDays} 天（${relation}）`,
+    `约 ${years} 年 ${months} 个月 ${days} 天`,
+    `相差周数：${(diff / 7).toFixed(1)} 周`,
+    `${dateA.value} 是 ${weekdayName(a)}；${dateB.value} 是 ${weekdayName(b)}`,
+  ].join('\n')
+  history.add(JSON.stringify({ tab: 'date-diff', a: dateA.value, b: dateB.value }))
+}
+
+/* ---------- 日期推算 ---------- */
+const baseDate = ref(todayStr())
+const addNum = ref(1)
+const addUnit = ref('day')
+const addDir = ref('after')
+const error2 = ref('')
+const addResult = ref('')
+
+const unitOptions = [
+  { label: '天', value: 'day' },
+  { label: '周', value: 'week' },
+  { label: '月', value: 'month' },
+  { label: '年', value: 'year' },
+]
+
+/** 按整月/整年加减；原日期超过目标月最后一天（如 1 月 31 日加 1 个月）时钳制到当月最后一天 */
+function addMonthsOrYears(base: Date, delta: number, unit: 'month' | 'year'): Date {
+  const d = new Date(base)
+  const day = base.getDate()
+  // 先归到当月 1 号再做加减，避免 setMonth/setFullYear 把溢出日期自动进位
+  d.setDate(1)
+  if (unit === 'month') d.setMonth(d.getMonth() + delta)
+  else d.setFullYear(d.getFullYear() + delta)
+  const lastDay = new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate()
+  d.setDate(Math.min(day, lastDay))
+  return d
+}
+
+function calcAdd() {
+  error2.value = ''
+  addResult.value = ''
+  const base = parseDate(baseDate.value)
+  if (!base) {
+    error2.value = '请选择合法的基准日期'
+    return
+  }
+  const n = addNum.value
+  if (!Number.isFinite(n) || n <= 0) {
+    error2.value = '偏移量必须是正整数'
+    return
+  }
+  const sign = addDir.value === 'after' ? 1 : -1
+  let result: Date
+  if (addUnit.value === 'month' || addUnit.value === 'year') {
+    result = addMonthsOrYears(base, sign * n, addUnit.value)
+  } else {
+    // 天/周按毫秒加减（1 天 = 86400000 毫秒）
+    const ms = n * (addUnit.value === 'week' ? 7 : 1) * 86400000
+    result = new Date(base.getTime() + sign * ms)
+  }
+  addResult.value = `目标日期：${formatDate(result)}（${weekdayName(result)}）`
+  history.add(
+    JSON.stringify({ tab: 'date-add', base: baseDate.value, n, unit: addUnit.value, dir: addDir.value }),
+  )
+}
+
+/* ---------- 年龄生肖 ---------- */
+const birthDate = ref('')
+const error3 = ref('')
+const ageResult = ref('')
+
+const SHENGXIAO = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪']
+
+/** 生肖：公式 (year - 4) % 12；负年份需先取正模再查表 */
+function zodiac(year: number): string {
+  return SHENGXIAO[(((year - 4) % 12) + 12) % 12]
+}
+
+/** 星座：按月日区间查表；12.22–1.19 为跨年的摩羯座，单独判断 */
+function constellation(d: Date): string {
+  const v = (d.getMonth() + 1) * 100 + d.getDate()
+  const table: Array<{ name: string; from: number; to: number }> = [
+    { name: '水瓶座', from: 120, to: 218 },
+    { name: '双鱼座', from: 219, to: 320 },
+    { name: '白羊座', from: 321, to: 419 },
+    { name: '金牛座', from: 420, to: 520 },
+    { name: '双子座', from: 521, to: 621 },
+    { name: '巨蟹座', from: 622, to: 722 },
+    { name: '狮子座', from: 723, to: 822 },
+    { name: '处女座', from: 823, to: 922 },
+    { name: '天秤座', from: 923, to: 1023 },
+    { name: '天蝎座', from: 1024, to: 1122 },
+    { name: '射手座', from: 1123, to: 1221 },
+  ]
+  if (v >= 1222 || v <= 119) return '摩羯座'
+  return table.find((c) => v >= c.from && v <= c.to)?.name ?? '摩羯座'
+}
+
+function calcAge() {
+  error3.value = ''
+  ageResult.value = ''
+  const birth = parseDate(birthDate.value)
+  if (!birth) {
+    error3.value = '请选择合法的出生日期'
+    return
+  }
+  const now = new Date()
+  // 统一用零点时刻比较，保证「是否已过生日」与天数统计口径一致
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+  if (birth.getTime() > today.getTime()) {
+    error3.value = '出生日期不能晚于今天'
+    return
+  }
+  // 周岁：今年生日未到则减 1
+  let fullYears = today.getFullYear() - birth.getFullYear()
+  if (today.getTime() < new Date(today.getFullYear(), birth.getMonth(), birth.getDate()).getTime()) {
+    fullYears--
+  }
+  // 精确年龄：逐段计算年/月/天，天数不够时向上个月借
+  let y = today.getFullYear() - birth.getFullYear()
+  let m = today.getMonth() - birth.getMonth()
+  let d = today.getDate() - birth.getDate()
+  if (d < 0) {
+    m--
+    d += new Date(today.getFullYear(), today.getMonth(), 0).getDate()
+  }
+  if (m < 0) {
+    y--
+    m += 12
+  }
+  // 已活天数（含今天）
+  const lived = diffDays(birth, today) + 1
+  ageResult.value = [
+    `周岁：${fullYears} 岁`,
+    `精确年龄：${y} 岁 ${m} 个月 ${d} 天`,
+    `已活天数：${lived} 天（含今天）`,
+    `生肖：${zodiac(birth.getFullYear())}`,
+    `星座：${constellation(birth)}`,
+  ].join('\n')
+  history.add(JSON.stringify({ tab: 'age', birth: birthDate.value }))
+}
+
+function onHistorySelect(text: string) {
+  // 历史内容为 JSON，按 tab 恢复对应面板输入并自动计算；非 JSON 旧数据忽略
+  try {
+    const h = JSON.parse(text) as Partial<DateCalcHistory> | null
+    if (!h || typeof h.tab !== 'string') return
+    if (h.tab === 'date-diff' && typeof h.a === 'string' && typeof h.b === 'string') {
+      tab.value = 'date-diff'
+      dateA.value = h.a
+      dateB.value = h.b
+      calcDiff()
+    } else if (h.tab === 'date-add' && typeof h.base === 'string') {
+      tab.value = 'date-add'
+      baseDate.value = h.base
+      if (typeof h.n === 'number') addNum.value = h.n
+      if (h.unit === 'day' || h.unit === 'week' || h.unit === 'month' || h.unit === 'year') {
+        addUnit.value = h.unit
+      }
+      if (h.dir === 'after' || h.dir === 'before') addDir.value = h.dir
+      calcAdd()
+    } else if (h.tab === 'age' && typeof h.birth === 'string') {
+      tab.value = 'age'
+      birthDate.value = h.birth
+      calcAge()
+    }
+  } catch {
+    // 忽略无法解析的历史内容
+  }
+}
+</script>
+
+<style scoped>
+.form-label {
+  width: 56px;
+  flex-shrink: 0;
+  font-size: 14px;
+  color: var(--td-text-color-secondary);
+}
+.form-select {
+  width: 110px;
+}
+.form-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+  flex-wrap: wrap;
+}
+.form-tip {
+  margin: 12px 0 0;
+  font-size: 12px;
+  color: var(--td-text-color-placeholder);
+}
+/* 日期选择器：窄屏下占满可用宽度，避免固定宽度撑出横向滚动条 */
+:deep(.t-date-picker) {
+  width: 100%;
+  max-width: 340px;
+}
+</style>
diff --git a/src/views/http-status/HttpStatusView.vue b/src/views/http-status/HttpStatusView.vue
new file mode 100644
index 0000000..7ef327c
--- /dev/null
+++ b/src/views/http-status/HttpStatusView.vue
@@ -0,0 +1,274 @@
+<!-- HTTP 状态码：内置常用状态码表，支持按分类与关键词（状态码/短语/中文说明）检索与复制 -->
+<template>
+  <div class="page-wrap">
+    <h2 class="page-title">HTTP 状态码</h2>
+    <p class="page-desc">查询常用 HTTP 状态码的含义，支持按状态码、英文短语与中文说明搜索。</p>
+
+    <t-card class="tool-section" title="查询">
+      <div class="form-row">
+        <t-input
+          v-model="search"
+          class="form-input"
+          placeholder="搜索状态码、短语或说明，例如 404 / Not Found / 限流"
+          clearable
+          @enter="saveHistory"
+        />
+        <t-select v-model="category" :options="categoryOptions" class="form-select" />
+      </div>
+    </t-card>
+
+    <ErrorAlert :message="error" @close="error = ''" />
+
+    <t-card class="tool-section" title="状态码列表">
+      <p class="summary">共 {{ filtered.length }} 条</p>
+      <template v-if="filtered.length">
+        <div v-for="g in grouped" :key="g.key" class="status-group">
+          <h3 class="status-group-title">{{ g.title }}</h3>
+          <div class="status-list">
+            <div v-for="s in g.items" :key="s.code" class="status-row">
+              <span class="status-code">{{ s.code }}</span>
+              <span class="status-phrase">{{ s.phrase }}</span>
+              <span class="status-desc">{{ s.desc }}</span>
+              <t-button
+                variant="text"
+                size="small"
+                shape="square"
+                title="复制"
+                @click="copyText(`${s.code} ${s.phrase}`)"
+              >
+                <template #icon><CopyIcon /></template>
+              </t-button>
+            </div>
+          </div>
+        </div>
+      </template>
+      <p v-else class="empty-tip">未找到匹配的状态码，换个关键词试试</p>
+    </t-card>
+
+    <HistoryPanel
+      :items="history.items"
+      @select="onHistorySelect"
+      @remove="history.remove"
+      @clear="history.clear"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { CopyIcon } from 'tdesign-icons-vue-next'
+import ErrorAlert from '@/components/common/ErrorAlert.vue'
+import HistoryPanel from '@/components/common/HistoryPanel.vue'
+import { useHistory } from '@/composables/useHistory'
+import { copyText } from '@/composables/useClipboard'
+
+const history = useHistory('http-status')
+
+interface StatusItem {
+  /** 状态码 */
+  code: number
+  /** 英文短语 */
+  phrase: string
+  /** 中文说明 */
+  desc: string
+}
+
+/** 常用 HTTP 状态码表（覆盖 1xx–5xx 全部常用码，共 56 条） */
+const STATUS_LIST: StatusItem[] = [
+  // 1xx 信息响应
+  { code: 100, phrase: 'Continue', desc: '继续：请求已收到，客户端应继续发送剩余部分' },
+  { code: 101, phrase: 'Switching Protocols', desc: '切换协议：服务器同意切换协议（如升级到 WebSocket）' },
+  { code: 102, phrase: 'Processing', desc: '处理中：服务器已收到请求并正在处理（WebDAV）' },
+  { code: 103, phrase: 'Early Hints', desc: '早期提示：在最终响应前返回提示头，用于预加载资源' },
+  // 2xx 成功
+  { code: 200, phrase: 'OK', desc: '请求成功' },
+  { code: 201, phrase: 'Created', desc: '已创建：请求成功且创建了新资源' },
+  { code: 202, phrase: 'Accepted', desc: '已接受：请求已被接受，但尚未处理完成' },
+  { code: 203, phrase: 'Non-Authoritative Information', desc: '非权威信息：返回内容来自缓存或代理，而非源服务器' },
+  { code: 204, phrase: 'No Content', desc: '无内容：请求成功，但响应体为空' },
+  { code: 205, phrase: 'Reset Content', desc: '重置内容：请求成功，客户端应重置表单视图' },
+  { code: 206, phrase: 'Partial Content', desc: '部分内容：成功返回范围请求的部分数据（断点续传）' },
+  // 3xx 重定向
+  { code: 300, phrase: 'Multiple Choices', desc: '多种选择：请求有多个可选响应，需用户或客户端选择' },
+  { code: 301, phrase: 'Moved Permanently', desc: '永久重定向：资源已永久移动到新地址' },
+  { code: 302, phrase: 'Found', desc: '临时重定向：资源暂时位于新地址' },
+  { code: 303, phrase: 'See Other', desc: '查看其他：应使用 GET 请求重定向到另一地址' },
+  { code: 304, phrase: 'Not Modified', desc: '未修改：资源未变化，可使用缓存' },
+  { code: 305, phrase: 'Use Proxy', desc: '使用代理：必须通过指定代理访问（已废弃）' },
+  { code: 307, phrase: 'Temporary Redirect', desc: '临时重定向：临时重定向且不改变请求方法' },
+  { code: 308, phrase: 'Permanent Redirect', desc: '永久重定向：永久重定向且不改变请求方法' },
+  // 4xx 客户端错误
+  { code: 400, phrase: 'Bad Request', desc: '请求错误：请求语法错误或无法被理解' },
+  { code: 401, phrase: 'Unauthorized', desc: '未授权：需要身份认证' },
+  { code: 402, phrase: 'Payment Required', desc: '需要付费：预留状态码，用于未来的支付场景' },
+  { code: 403, phrase: 'Forbidden', desc: '禁止访问：服务器理解请求但拒绝执行' },
+  { code: 404, phrase: 'Not Found', desc: '资源不存在：请求的资源找不到' },
+  { code: 405, phrase: 'Method Not Allowed', desc: '方法不允许：请求方法不被该资源支持' },
+  { code: 406, phrase: 'Not Acceptable', desc: '不可接受：无法生成客户端可接受的内容' },
+  { code: 407, phrase: 'Proxy Authentication Required', desc: '需要代理认证：必须先通过代理认证' },
+  { code: 408, phrase: 'Request Timeout', desc: '请求超时：服务器等待请求超时' },
+  { code: 409, phrase: 'Conflict', desc: '冲突：请求与资源当前状态冲突' },
+  { code: 410, phrase: 'Gone', desc: '已删除：资源已永久删除且无转发地址' },
+  { code: 411, phrase: 'Length Required', desc: '需要长度：缺少 Content-Length 请求头' },
+  { code: 412, phrase: 'Precondition Failed', desc: '前置条件失败：请求头中的前置条件不满足' },
+  { code: 413, phrase: 'Payload Too Large', desc: '载荷过大：请求体超过服务器限制' },
+  { code: 414, phrase: 'URI Too Long', desc: 'URI 过长：请求 URI 超过服务器可解析长度' },
+  { code: 415, phrase: 'Unsupported Media Type', desc: '不支持的媒体类型：请求格式不被支持' },
+  { code: 416, phrase: 'Range Not Satisfiable', desc: '范围无效：请求的范围无法满足' },
+  { code: 417, phrase: 'Expectation Failed', desc: '预期失败：Expect 请求头无法满足' },
+  { code: 418, phrase: "I'm a teapot", desc: '我是茶壶：愚人节玩笑状态码（RFC 2324）' },
+  { code: 422, phrase: 'Unprocessable Entity', desc: '无法处理：请求语义错误，服务器无法处理其内容' },
+  { code: 423, phrase: 'Locked', desc: '已锁定：资源被锁定（WebDAV）' },
+  { code: 424, phrase: 'Failed Dependency', desc: '依赖失败：当前请求依赖的另一请求失败' },
+  { code: 426, phrase: 'Upgrade Required', desc: '需要升级：客户端应升级协议（如 HTTPS）' },
+  { code: 428, phrase: 'Precondition Required', desc: '需要前置条件：请求必须带条件头，防止丢失更新' },
+  { code: 429, phrase: 'Too Many Requests', desc: '请求过多：请求频率超限（限流）' },
+  { code: 431, phrase: 'Request Header Fields Too Large', desc: '请求头过大：请求头字段超过服务器限制' },
+  { code: 451, phrase: 'Unavailable For Legal Reasons', desc: '法律原因不可用：因法律原因无法提供资源' },
+  // 5xx 服务器错误
+  { code: 500, phrase: 'Internal Server Error', desc: '服务器内部错误' },
+  { code: 501, phrase: 'Not Implemented', desc: '未实现：服务器不支持请求的功能' },
+  { code: 502, phrase: 'Bad Gateway', desc: '网关错误：网关或代理收到上游无效响应' },
+  { code: 503, phrase: 'Service Unavailable', desc: '服务不可用：服务器暂时过载或维护中' },
+  { code: 504, phrase: 'Gateway Timeout', desc: '网关超时：网关或代理等待上游响应超时' },
+  { code: 505, phrase: 'HTTP Version Not Supported', desc: '版本不支持：服务器不支持的 HTTP 协议版本' },
+  { code: 507, phrase: 'Insufficient Storage', desc: '存储不足：服务器存储空间不足（WebDAV）' },
+  { code: 508, phrase: 'Loop Detected', desc: '检测到循环：请求处理过程中检测到无限循环' },
+  { code: 510, phrase: 'Not Extended', desc: '未扩展：需要进一步扩展才能完成请求' },
+  { code: 511, phrase: 'Network Authentication Required', desc: '需要网络认证：需要网络认证才能访问' },
+]
+
+const search = ref('')
+const category = ref('all')
+// 本页无校验失败场景，error 仅用于保持全站页面结构一致
+const error = ref('')
+
+const categoryOptions = [
+  { label: '全部分类', value: 'all' },
+  { label: '1xx 信息响应', value: '1' },
+  { label: '2xx 成功', value: '2' },
+  { label: '3xx 重定向', value: '3' },
+  { label: '4xx 客户端错误', value: '4' },
+  { label: '5xx 服务器错误', value: '5' },
+]
+
+const GROUP_TITLES: Record<number, string> = {
+  1: '1xx 信息响应',
+  2: '2xx 成功',
+  3: '3xx 重定向',
+  4: '4xx 客户端错误',
+  5: '5xx 服务器错误',
+}
+
+/** 按分类与关键词过滤：状态码、英文短语、中文说明均参与匹配（不区分大小写） */
+const filtered = computed(() => {
+  const kw = search.value.trim().toLowerCase()
+  return STATUS_LIST.filter((s) => {
+    if (category.value !== 'all' && Math.floor(s.code / 100) !== Number(category.value)) return false
+    if (!kw) return true
+    return String(s.code).includes(kw) || s.phrase.toLowerCase().includes(kw) || s.desc.includes(kw)
+  })
+})
+
+/** 将过滤结果按 1xx–5xx 分组，便于分类小标题展示 */
+const grouped = computed(() => {
+  const groups: Array<{ key: number; title: string; items: StatusItem[] }> = []
+  for (const s of filtered.value) {
+    const k = Math.floor(s.code / 100)
+    let g = groups.find((x) => x.key === k)
+    if (!g) {
+      g = { key: k, title: GROUP_TITLES[k] ?? `${k}xx`, items: [] }
+      groups.push(g)
+    }
+    g.items.push(s)
+  }
+  return groups
+})
+
+/** 回车把当前搜索词存入历史 */
+function saveHistory() {
+  const kw = search.value.trim()
+  if (kw) history.add(kw)
+}
+
+function onHistorySelect(text: string) {
+  search.value = text
+}
+</script>
+
+<style scoped>
+.form-input {
+  max-width: 420px;
+}
+.form-select {
+  width: 160px;
+}
+.summary {
+  margin: 0 0 4px;
+  font-size: 13px;
+  color: var(--td-text-color-secondary);
+}
+.status-group {
+  margin-top: 12px;
+}
+.status-group-title {
+  margin: 0 0 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--td-text-color-primary);
+}
+.status-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.status-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border: 1px solid var(--td-border-level-1-color);
+  border-radius: 6px;
+  background: var(--td-bg-color-container);
+}
+.status-code {
+  width: 44px;
+  flex-shrink: 0;
+  font-family: monospace;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--td-brand-color);
+}
+.status-phrase {
+  width: 240px;
+  flex-shrink: 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--td-text-color-primary);
+  overflow-wrap: anywhere;
+}
+.status-desc {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  color: var(--td-text-color-secondary);
+}
+.empty-tip {
+  font-size: 13px;
+  color: var(--td-text-color-placeholder);
+}
+@media (max-width: 767px) {
+  /* 窄屏下描述换行到下一行，避免横向滚动 */
+  .status-row {
+    flex-wrap: wrap;
+    gap: 4px 12px;
+  }
+  .status-phrase {
+    width: auto;
+    flex: 1;
+  }
+  .status-desc {
+    flex-basis: 100%;
+  }
+}
+</style>
diff --git a/src/views/password-gen/PasswordGenView.vue b/src/views/password-gen/PasswordGenView.vue
new file mode 100644
index 0000000..2718b7d
--- /dev/null
+++ b/src/views/password-gen/PasswordGenView.vue
@@ -0,0 +1,285 @@
+<!-- 密码生成器：基于 crypto.getRandomValues 的安全随机密码批量生成与强度评估 -->
+<template>
+  <div class="page-wrap">
+    <h2 class="page-title">密码生成器</h2>
+    <p class="page-desc">使用浏览器安全随机数批量生成高强度密码，全部在本地完成，密码不会上传。</p>
+
+    <t-card class="tool-section" title="生成选项">
+      <div class="form-row">
+        <span class="form-label">长度</span>
+        <t-slider v-model="len" class="form-slider" :min="4" :max="64" :step="1" />
+        <span class="form-value">{{ len }}</span>
+      </div>
+      <div class="form-row">
+        <span class="form-label">字符集</span>
+        <div class="checkbox-group">
+          <t-checkbox v-model="optUpper">大写字母 A-Z</t-checkbox>
+          <t-checkbox v-model="optLower">小写字母 a-z</t-checkbox>
+          <t-checkbox v-model="optDigit">数字 0-9</t-checkbox>
+          <t-checkbox v-model="optSymbol">特殊符号 !@#$%</t-checkbox>
+        </div>
+      </div>
+      <div class="form-row">
+        <span class="form-label">易混淆字符</span>
+        <t-switch v-model="excludeAmbiguous" />
+        <span class="form-suffix">排除 0 O 1 l I | 等易混淆字符</span>
+      </div>
+      <div class="form-row">
+        <span class="form-label">数量</span>
+        <t-input-number v-model="count" :min="1" :max="20" theme="normal" />
+      </div>
+      <div class="form-actions">
+        <t-button theme="primary" @click="regenerate">生成密码</t-button>
+      </div>
+    </t-card>
+
+    <ErrorAlert :message="error" @close="error = ''" />
+
+    <t-card v-if="passwords.length" class="tool-section" title="生成结果">
+      <div class="strength-row">
+        <span class="strength-label">强度</span>
+        <span class="strength-level" :style="{ color: strength.color }">{{ strength.level }}</span>
+        <span class="strength-entropy">熵 {{ strength.entropyText }} bit</span>
+      </div>
+      <t-progress :percentage="strength.percent" :color="strength.color" :label="false" class="strength-bar" />
+      <div class="pw-list">
+        <div v-for="(p, i) in passwords" :key="i" class="pw-row">
+          <code class="pw-text">{{ p }}</code>
+          <t-button variant="text" size="small" shape="square" title="复制" @click="copyText(p)">
+            <template #icon><CopyIcon /></template>
+          </t-button>
+        </div>
+      </div>
+      <div class="form-actions">
+        <CopyButton :text="allText" label="复制全部" />
+        <t-button variant="outline" size="small" @click="regenerate">
+          <template #icon><RefreshIcon /></template>
+          重新生成
+        </t-button>
+      </div>
+    </t-card>
+
+    <HistoryPanel
+      :items="history.items"
+      @select="onHistorySelect"
+      @remove="history.remove"
+      @clear="history.clear"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { CopyIcon, RefreshIcon } from 'tdesign-icons-vue-next'
+import ErrorAlert from '@/components/common/ErrorAlert.vue'
+import CopyButton from '@/components/common/CopyButton.vue'
+import HistoryPanel from '@/components/common/HistoryPanel.vue'
+import { useHistory } from '@/composables/useHistory'
+import { copyText } from '@/composables/useClipboard'
+
+const history = useHistory('password-gen')
+
+const len = ref(16)
+const optUpper = ref(true)
+const optLower = ref(true)
+const optDigit = ref(true)
+const optSymbol = ref(true)
+const excludeAmbiguous = ref(false)
+const count = ref(5)
+const error = ref('')
+const passwords = ref<string[]>([])
+
+const SYMBOLS = '!@#$%^&*()-_=+[]{};:,.<>?/~|'
+/** 易混淆字符集合（0 O 1 l I |），开启开关后从字符池中剔除 */
+const AMBIGUOUS = new Set(['0', 'O', '1', 'l', 'I', '|'])
+
+/** 构建当前选中的字符池列表（每种字符集一个池，按开关过滤易混淆字符） */
+function buildPools(): string[] {
+  const pools: string[] = []
+  if (optUpper.value) pools.push('ABCDEFGHIJKLMNOPQRSTUVWXYZ')
+  if (optLower.value) pools.push('abcdefghijklmnopqrstuvwxyz')
+  if (optDigit.value) pools.push('0123456789')
+  if (optSymbol.value) pools.push(SYMBOLS)
+  if (!excludeAmbiguous.value) return pools
+  return pools.map((p) => p.split('').filter((c) => !AMBIGUOUS.has(c)).join(''))
+}
+
+/**
+ * 从字符池中随机取一个字符。
+ * 用 crypto.getRandomValues 的 32 位随机数 + 拒绝采样，消除直接取模带来的分布偏差。
+ */
+function randomChar(pool: string): string {
+  const buf = new Uint32Array(1)
+  // 只接受落在 [0, limit) 内的随机数，其中 limit 是池大小的整数倍
+  const limit = Math.floor(0x100000000 / pool.length) * pool.length
+  let r = 0
+  do {
+    crypto.getRandomValues(buf)
+    r = buf[0]
+  } while (r >= limit)
+  return pool[r % pool.length]
+}
+
+/** Fisher-Yates 洗牌（同样用拒绝采样保证均匀） */
+function shuffleArray(arr: string[]): void {
+  const buf = new Uint32Array(1)
+  for (let i = arr.length - 1; i > 0; i--) {
+    const n = i + 1
+    const limit = Math.floor(0x100000000 / n) * n
+    let r = 0
+    do {
+      crypto.getRandomValues(buf)
+      r = buf[0]
+    } while (r >= limit)
+    const j = r % n
+    ;[arr[i], arr[j]] = [arr[j], arr[i]]
+  }
+}
+
+/** 生成一批密码：每种选中字符集至少出现一次，再随机补齐并洗牌 */
+function generatePasswords() {
+  error.value = ''
+  passwords.value = []
+  const pools = buildPools()
+  if (!pools.length) {
+    error.value = '请至少选择一种字符集'
+    return
+  }
+  const all = pools.join('')
+  // 对控件值做范围钳制，防止清空控件后出现 NaN
+  const length = Number.isFinite(len.value) ? Math.min(64, Math.max(4, Math.floor(len.value))) : 16
+  const total = Number.isFinite(count.value) ? Math.min(20, Math.max(1, Math.floor(count.value))) : 5
+  const list: string[] = []
+  for (let i = 0; i < total; i++) {
+    const chars: string[] = []
+    // 每种选中字符集先各取 1 个，保证选中的字符集必然出现
+    for (const pool of pools) chars.push(randomChar(pool))
+    // 其余位数从全池随机补齐
+    while (chars.length < length) chars.push(randomChar(all))
+    shuffleArray(chars)
+    list.push(chars.join(''))
+  }
+  passwords.value = list
+}
+
+/** 全部密码拼接文本（用于「复制全部」） */
+const allText = computed(() => passwords.value.join('\n'))
+
+/** 强度评估：熵 = 长度 × log2(池大小)，映射到等级、颜色与进度条百分比 */
+const strength = computed(() => {
+  const poolSize = buildPools().join('').length
+  const entropy = poolSize > 0 ? len.value * Math.log2(poolSize) : 0
+  const percent = Math.min(100, Math.round((entropy / 160) * 100))
+  const entropyText = entropy.toFixed(1)
+  if (entropy < 40) return { level: '弱', color: 'var(--td-error-color)', entropyText, percent }
+  if (entropy < 80) return { level: '中', color: 'var(--td-warning-color)', entropyText, percent }
+  if (entropy < 120) return { level: '强', color: 'var(--td-success-color)', entropyText, percent }
+  return { level: '极强', color: 'var(--td-brand-color)', entropyText, percent }
+})
+
+/** 历史最多存 300 字符：按行累加，超出则截断（保留完整行） */
+function recordHistory() {
+  let text = ''
+  for (const p of passwords.value) {
+    if (text && text.length + 1 + p.length > 300) break
+    text = text ? `${text}\n${p}` : p
+  }
+  if (text) history.add(text)
+}
+
+function regenerate() {
+  generatePasswords()
+  recordHistory()
+}
+
+function onHistorySelect(text: string) {
+  const list = text.split('\n').map((s) => s.trim()).filter(Boolean)
+  if (!list.length) return
+  passwords.value = list
+  // 同步长度滑块，保证强度评估与恢复的密码一致
+  len.value = Math.min(64, Math.max(4, list[0].length))
+}
+
+// 首次进入自动生成一批便于直接查看效果（不写入历史）
+onMounted(() => {
+  generatePasswords()
+})
+</script>
+
+<style scoped>
+.form-label {
+  width: 56px;
+  flex-shrink: 0;
+  font-size: 14px;
+  color: var(--td-text-color-secondary);
+}
+.form-slider {
+  flex: 1;
+  max-width: 300px;
+}
+.form-value {
+  width: 32px;
+  font-size: 13px;
+  color: var(--td-brand-color);
+  font-weight: 600;
+}
+.form-suffix {
+  font-size: 12px;
+  color: var(--td-text-color-placeholder);
+}
+.form-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+  flex-wrap: wrap;
+}
+.checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 20px;
+}
+.strength-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+.strength-label {
+  font-size: 13px;
+  color: var(--td-text-color-secondary);
+}
+.strength-level {
+  font-size: 14px;
+  font-weight: 600;
+}
+.strength-entropy {
+  font-size: 12px;
+  color: var(--td-text-color-placeholder);
+}
+.strength-bar {
+  max-width: 480px;
+  margin-bottom: 12px;
+}
+.pw-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.pw-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border: 1px solid var(--td-border-level-1-color);
+  border-radius: 6px;
+  background: var(--td-bg-color-container);
+}
+.pw-text {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-family: monospace;
+  font-size: 13px;
+  color: var(--td-text-color-primary);
+}
+</style>
diff --git a/src/views/regex-test/RegexTestView.vue b/src/views/regex-test/RegexTestView.vue
new file mode 100644
index 0000000..6d68eb3
--- /dev/null
+++ b/src/views/regex-test/RegexTestView.vue
@@ -0,0 +1,284 @@
+<template>
+  <div class="page-wrap">
+    <h2 class="page-title">正则表达式测试</h2>
+    <p class="page-desc">匹配、高亮与替换测试，支持 g / i / m / s 标志、命名分组与反向引用，全程本地计算。</p>
+
+    <t-tabs v-model="tab">
+      <!-- 匹配测试 -->
+      <t-tab-panel value="match" label="匹配测试">
+        <t-card class="tool-section" title="输入">
+          <t-input v-model="pattern" placeholder="例如 (\w+)@(\w+\.\w+)" clearable />
+          <div class="form-row" style="margin-top: 12px">
+            <span class="form-label">标志</span>
+            <t-checkbox-group v-model="flags">
+              <t-checkbox value="g">g 全局</t-checkbox>
+              <t-checkbox value="i">i 忽略大小写</t-checkbox>
+              <t-checkbox value="m">m 多行</t-checkbox>
+              <t-checkbox value="s">s 点号匹配换行</t-checkbox>
+            </t-checkbox-group>
+          </div>
+          <t-textarea
+            v-model="textValue"
+            placeholder="输入要测试的文本"
+            :autosize="{ minRows: 5, maxRows: 12 }"
+            style="margin-top: 12px"
+          />
+          <div class="form-actions">
+            <t-button theme="primary" @click="runMatch">开始匹配</t-button>
+          </div>
+        </t-card>
+
+        <ErrorAlert :message="error" @close="error = ''" />
+
+        <p v-if="executed && !matches.length" class="no-match">未找到匹配内容</p>
+
+        <t-card v-if="segments.length" class="tool-section" title="高亮显示">
+          <div class="highlight-box">
+            <template v-for="(s, i) in segments" :key="i">
+              <span v-if="s.match" class="match-seg">{{ s.text }}</span>
+              <span v-else>{{ s.text }}</span>
+            </template>
+          </div>
+        </t-card>
+
+        <t-card v-if="matches.length" class="tool-section" :title="`匹配列表（共 ${matches.length} 处）`">
+          <div v-for="(m, i) in matches" :key="i" class="match-item">
+            <span class="match-no">{{ i + 1 }}</span>
+            <code class="match-text">{{ m.text || '（空匹配）' }}</code>
+            <span class="match-pos">位置 {{ m.index }}</span>
+            <div v-if="m.groups && Object.keys(m.groups).length" class="match-groups">
+              <span v-for="(gv, gk) in m.groups" :key="gk" class="group-tag">{{ gk }}: {{ gv }}</span>
+            </div>
+          </div>
+        </t-card>
+      </t-tab-panel>
+
+      <!-- 替换 -->
+      <t-tab-panel value="replace" label="替换">
+        <t-card class="tool-section" title="替换文本">
+          <t-input v-model="replacement" placeholder="替换内容，支持 $1、$2 反向引用与 $& 整体匹配" clearable />
+          <p class="hint-text">提示：未勾选 g 标志时仅替换第一处匹配。</p>
+          <div class="form-actions">
+            <t-button theme="primary" @click="runReplace">预览替换</t-button>
+          </div>
+        </t-card>
+
+        <ErrorAlert :message="error" @close="error = ''" />
+
+        <t-card v-if="replaceResult" class="tool-section" title="替换结果">
+          <t-textarea v-model="replaceResult" :autosize="{ minRows: 5, maxRows: 12 }" readonly />
+          <div class="form-actions">
+            <CopyButton :text="replaceResult" label="复制结果" />
+          </div>
+        </t-card>
+      </t-tab-panel>
+    </t-tabs>
+
+    <HistoryPanel
+      :items="history.items"
+      @select="onHistorySelect"
+      @remove="history.remove"
+      @clear="history.clear"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 正则测试：本地执行正则匹配（含高亮分段展示）与替换预览，支持常用标志、命名分组与历史恢复。
+import { ref } from 'vue'
+import ErrorAlert from '@/components/common/ErrorAlert.vue'
+import CopyButton from '@/components/common/CopyButton.vue'
+import HistoryPanel from '@/components/common/HistoryPanel.vue'
+import { useHistory } from '@/composables/useHistory'
+
+interface MatchItem {
+  index: number
+  text: string
+  groups: Record<string, string> | undefined
+}
+
+interface Segment {
+  text: string
+  match: boolean
+}
+
+const tab = ref('match')
+const pattern = ref('')
+const flags = ref<string[]>(['g'])
+const textValue = ref('')
+const error = ref('')
+const matches = ref<MatchItem[]>([])
+const segments = ref<Segment[]>([])
+const executed = ref(false)
+const replacement = ref('')
+const replaceResult = ref('')
+
+const history = useHistory('regex-test')
+
+/** 编译正则；表达式为空或非法时展示错误并返回 null */
+function compileRegex(): RegExp | null {
+  if (!pattern.value.trim()) {
+    error.value = '请输入正则表达式'
+    return null
+  }
+  try {
+    return new RegExp(pattern.value, flags.value.join(''))
+  } catch (e) {
+    // 非法表达式：把引擎的报错信息直接展示给用户
+    error.value = e instanceof Error ? e.message : String(e)
+    return null
+  }
+}
+
+function runMatch() {
+  error.value = ''
+  matches.value = []
+  segments.value = []
+  executed.value = false
+  const re = compileRegex()
+  if (!re) return
+  const text = textValue.value
+  const results: MatchItem[] = []
+  let m: RegExpExecArray | null
+  while ((m = re.exec(text)) !== null) {
+    results.push({ index: m.index, text: m[0], groups: m.groups })
+    if (!re.global) break // 无 g 标志只取第一处，同时避免 lastIndex 不推进导致死循环
+    if (m[0] === '') re.lastIndex += 1 // 空匹配时手动推进游标
+  }
+  matches.value = results
+  segments.value = buildSegments(text, results)
+  executed.value = true
+  if (pattern.value.trim()) {
+    // 历史保存可恢复的输入快照（测试文本截断到 200 字符，防止撑爆配额）
+    history.add(JSON.stringify({ p: pattern.value, f: flags.value.join(''), t: text.slice(0, 200) }))
+  }
+}
+
+/** 按匹配区间把原文切分为「匹配 / 非匹配」片段，供模板逐段渲染高亮（不使用 v-html） */
+function buildSegments(text: string, results: MatchItem[]): Segment[] {
+  const segs: Segment[] = []
+  let cursor = 0
+  for (const r of results) {
+    if (r.text === '') continue // 空匹配不占区间，跳过避免重叠
+    if (r.index > cursor) segs.push({ text: text.slice(cursor, r.index), match: false })
+    segs.push({ text: r.text, match: true })
+    cursor = r.index + r.text.length
+  }
+  if (cursor < text.length) segs.push({ text: text.slice(cursor), match: false })
+  return segs
+}
+
+function runReplace() {
+  error.value = ''
+  replaceResult.value = ''
+  const re = compileRegex()
+  if (!re) return
+  try {
+    // 保持原生 replace 语义：无 g 时只替换第一处，$1 等反向引用由引擎解析
+    replaceResult.value = textValue.value.replace(re, replacement.value)
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : String(e)
+  }
+}
+
+function onHistorySelect(raw: string) {
+  try {
+    const obj: unknown = JSON.parse(raw)
+    if (typeof obj !== 'object' || obj === null) return
+    const { p, f, t } = obj as { p?: unknown; f?: unknown; t?: unknown }
+    if (typeof p !== 'string') return
+    pattern.value = p
+    if (typeof f === 'string') flags.value = f.split('').filter((c) => 'gims'.includes(c))
+    if (typeof t === 'string') textValue.value = t
+    tab.value = 'match'
+    runMatch()
+  } catch {
+    // 历史数据损坏时忽略该条，不打扰用户
+  }
+}
+</script>
+
+<style scoped>
+.form-label {
+  width: 56px;
+  flex-shrink: 0;
+  font-size: 14px;
+  color: var(--td-text-color-secondary);
+}
+.form-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+  flex-wrap: wrap;
+}
+.hint-text {
+  margin: 8px 0 0;
+  font-size: 12px;
+  color: var(--td-text-color-placeholder);
+}
+.no-match {
+  margin: 0 0 12px;
+  font-size: 13px;
+  color: var(--td-text-color-placeholder);
+}
+.highlight-box {
+  padding: 12px;
+  border: 1px solid var(--td-border-level-1-color);
+  border-radius: 6px;
+  background: var(--td-bg-color-container);
+  font-size: 14px;
+  line-height: 1.8;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+.match-seg {
+  background: color-mix(in srgb, var(--td-brand-color) 20%, transparent);
+  border-radius: 2px;
+}
+.match-item {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 6px 0;
+  border-bottom: 1px dashed var(--td-border-level-1-color);
+}
+.match-no {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: var(--td-bg-color-secondarycontainer);
+  font-size: 12px;
+  color: var(--td-text-color-secondary);
+}
+.match-text {
+  font-family: monospace;
+  color: var(--td-brand-color);
+  background: var(--td-bg-color-secondarycontainer);
+  padding: 2px 6px;
+  border-radius: 4px;
+  word-break: break-all;
+}
+.match-pos {
+  font-size: 12px;
+  color: var(--td-text-color-placeholder);
+}
+.match-groups {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  width: 100%;
+}
+.group-tag {
+  font-family: monospace;
+  font-size: 12px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  background: var(--td-bg-color-secondarycontainer);
+  color: var(--td-text-color-secondary);
+}
+</style>
diff --git a/src/views/rmb-upper/RmbUpperView.vue b/src/views/rmb-upper/RmbUpperView.vue
new file mode 100644
index 0000000..79247ba
--- /dev/null
+++ b/src/views/rmb-upper/RmbUpperView.vue
@@ -0,0 +1,195 @@
+<!--
+  人民币大写转换工具：将数字金额转换为中文大写金额，全部按字符串整数运算避免浮点精度问题。
+-->
+<template>
+  <div class="page-wrap">
+    <h2 class="page-title">人民币大写转换</h2>
+    <p class="page-desc">将数字金额转换为人民币大写（如 1234567.89 → 壹佰贰拾叁万肆仟伍佰陆拾柒元捌角玖分），全部在浏览器本地完成。</p>
+
+    <t-card class="tool-section" title="输入金额">
+      <t-input v-model="amount" placeholder="1234567.89" clearable />
+      <div class="form-actions">
+        <t-button theme="primary" @click="convert">转换</t-button>
+      </div>
+    </t-card>
+
+    <ErrorAlert :message="error" @close="error = ''" />
+
+    <t-card v-if="upperResult" class="tool-section" title="转换结果">
+      <div class="upper-result">{{ upperResult }}</div>
+      <div class="lower-result">小写金额：{{ lowerResult }}</div>
+      <div class="form-actions">
+        <CopyButton :text="upperResult" />
+      </div>
+    </t-card>
+
+    <HistoryPanel
+      :items="history.items"
+      @select="onHistorySelect"
+      @remove="history.remove"
+      @clear="history.clear"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import ErrorAlert from '@/components/common/ErrorAlert.vue'
+import CopyButton from '@/components/common/CopyButton.vue'
+import HistoryPanel from '@/components/common/HistoryPanel.vue'
+import { useHistory } from '@/composables/useHistory'
+
+/** 数字 → 大写汉字映射 */
+const DIGITS = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
+/** 组内单位：下标 0 为个位（无单位），1-3 依次为拾/佰/仟 */
+const INT_UNITS = ['', '拾', '佰', '仟']
+/** 每 4 位一组之间的单位：个、万、亿、万亿 */
+const GROUP_UNITS = ['', '万', '亿', '万亿']
+
+const amount = ref('')
+const error = ref('')
+const upperResult = ref('')
+const lowerResult = ref('')
+
+const history = useHistory('rmb-upper')
+
+/** 把不含前导零的 1-4 位数字组转为大写，如 1001 → 壹仟零壹 */
+function groupToUpper(g: string): string {
+  let out = ''
+  // 遇到 0 先标记，等下一个非零数字出现时补一个「零」，实现组内零压缩
+  let zeroPending = false
+  for (let i = 0; i < g.length; i++) {
+    const d = Number(g[i])
+    // 组内位置从末位算起：末位无单位，向前依次为拾/佰/仟
+    const pos = g.length - 1 - i
+    if (d === 0) {
+      zeroPending = out !== ''
+    } else {
+      if (zeroPending) out += '零'
+      out += DIGITS[d] + INT_UNITS[pos]
+      zeroPending = false
+    }
+  }
+  return out
+}
+
+/** 把非负整数（十进制字符串，无前导零）转为中文大写 */
+function intToUpper(s: string): string {
+  if (s === '0') return '零'
+  // 从低位起每 4 位切一组，groups[0] 为最低组
+  const groups: string[] = []
+  const chars = s.split('').reverse()
+  for (let i = 0; i < chars.length; i += 4) {
+    groups.push(chars.slice(i, i + 4).reverse().join(''))
+  }
+  const parts: string[] = []
+  for (let i = groups.length - 1; i >= 0; i--) {
+    const g = groups[i]
+    // 组内前导零去掉后再转换；整组为 0 时跳过（跨组补零由后续组处理）
+    const upper = groupToUpper(g.replace(/^0+/, ''))
+    if (!upper) continue
+    // 组首为 0 说明与上一组之间缺位，需补「零」（如 100000001 → 壹亿零壹）
+    if (g[0] === '0' && parts.length > 0) parts.push('零')
+    parts.push(upper + GROUP_UNITS[i])
+  }
+  return parts.join('')
+}
+
+/** 拼接最终大写金额（含负号与角分） */
+function buildUpper(negative: boolean, intStr: string, fen: number): string {
+  // 零元没有正负之分，统一返回「零元整」
+  if (intStr === '0' && fen === 0) return '零元整'
+  let out = negative ? '负' : ''
+  if (intStr !== '0') out += intToUpper(intStr) + '元'
+  if (fen > 0) {
+    const jiao = Math.floor(fen / 10)
+    const f = fen % 10
+    if (jiao > 0) {
+      out += DIGITS[jiao] + '角'
+    } else if (intStr !== '0') {
+      // 整数部分存在而角位缺失时补「零」，如 100.05 → 壹佰元零伍分
+      out += '零'
+    }
+    if (f > 0) out += DIGITS[f] + '分'
+  } else {
+    out += '整'
+  }
+  return out
+}
+
+/** 千分位格式化：1234567 → 1,234,567 */
+function formatThousands(s: string): string {
+  return s.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
+
+function convert() {
+  error.value = ''
+  upperResult.value = ''
+  lowerResult.value = ''
+  const raw = amount.value.trim()
+  if (!raw) {
+    error.value = '请输入金额'
+    return
+  }
+  // 合法格式：可选负号 + 整数部分 + 可选小数部分
+  const m = /^(-?)(\d+)(?:\.(\d+))?$/.exec(raw)
+  if (!m) {
+    error.value = '金额格式不合法：请输入数字（可带负号），小数超过两位时自动四舍五入到分'
+    return
+  }
+  const negative = m[1] === '-'
+  // 去掉整数部分前导零（如 007 → 7）
+  const intStr = m[2].replace(/^0+/, '') || '0'
+  if (intStr.length > 15) {
+    error.value = '整数部分最多支持 15 位'
+    return
+  }
+  // 只取小数点后前 3 位：前两位为分，第 3 位仅用于判断四舍五入
+  const dec = ((m[3] ?? '') + '00').slice(0, 3)
+  const fen = Number(dec.slice(0, 2)) + (Number(dec[2]) >= 5 ? 1 : 0)
+  // 用 BigInt 做「整数部分 × 100 + 分」的整数运算，避免 0.1+0.2 类浮点精度问题
+  const totalFen = BigInt(intStr) * 100n + BigInt(fen)
+  const finalInt = (totalFen / 100n).toString()
+  const finalFen = Number(totalFen % 100n)
+  // 四舍五入进位后整数部分可能多一位（如 15 个 9 + .999）
+  if (finalInt.length > 15) {
+    error.value = '金额超出支持范围（整数部分最多 15 位）'
+    return
+  }
+  const isZero = finalInt === '0' && finalFen === 0
+  upperResult.value = buildUpper(negative, finalInt, finalFen)
+  // 小写金额：千分位 + 固定两位小数（整数时省略小数部分）
+  lowerResult.value =
+    (negative && !isZero ? '-' : '') +
+    formatThousands(finalInt) +
+    (finalFen > 0 ? `.${String(finalFen).padStart(2, '0')}` : '')
+  history.add(raw)
+}
+
+function onHistorySelect(text: string) {
+  amount.value = text
+  convert()
+}
+</script>
+
+<style scoped>
+.upper-result {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 1.6;
+  color: var(--td-text-color-primary);
+  word-break: break-all;
+}
+.lower-result {
+  margin-top: 8px;
+  font-size: 13px;
+  color: var(--td-text-color-secondary);
+  word-break: break-all;
+}
+.form-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+  flex-wrap: wrap;
+}
+</style>
diff --git a/src/views/unit-convert/UnitConvertView.vue b/src/views/unit-convert/UnitConvertView.vue
new file mode 100644
index 0000000..837629e
--- /dev/null
+++ b/src/views/unit-convert/UnitConvertView.vue
@@ -0,0 +1,246 @@
+<template>
+  <div class="page-wrap">
+    <h2 class="page-title">单位换算</h2>
+    <p class="page-desc">长度、面积、体积、质量、温度、数据存储、速度、时间八类单位实时换算，结果保留最多 6 位有效数字。</p>
+
+    <t-card class="tool-section" title="换算设置">
+      <div class="form-row">
+        <span class="form-label">类别</span>
+        <t-select v-model="category" :options="categories" class="cat-select" @change="onCategoryChange" />
+      </div>
+      <div class="form-row row-gap">
+        <span class="form-label">数值</span>
+        <t-input-number v-model="value" theme="normal" :step="1" class="value-input" @change="recordHistory" />
+      </div>
+      <div class="form-row row-gap">
+        <span class="form-label">从</span>
+        <t-select v-model="fromUnit" :options="unitOptions" class="unit-select" @change="recordHistory" />
+      </div>
+      <div class="form-row row-gap">
+        <span class="form-label">到</span>
+        <t-select v-model="toUnit" :options="unitOptions" class="unit-select" @change="recordHistory" />
+      </div>
+    </t-card>
+
+    <t-card v-if="resultText" class="tool-section" title="换算结果">
+      <div class="code-block">{{ resultText }}</div>
+      <div class="form-actions">
+        <CopyButton :text="resultText" label="复制结果" />
+      </div>
+    </t-card>
+
+    <HistoryPanel
+      :items="history.items"
+      @select="onHistorySelect"
+      @remove="history.remove"
+      @clear="history.clear"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 单位换算：基于各单位的基准因子本地实时换算，温度类走三向换算公式，支持历史恢复。
+import { computed, ref } from 'vue'
+import CopyButton from '@/components/common/CopyButton.vue'
+import HistoryPanel from '@/components/common/HistoryPanel.vue'
+import { useHistory } from '@/composables/useHistory'
+
+interface UnitDef {
+  name: string
+  /** 1 个该单位 = factor 个基准单位（各类别基准单位为表中第一个） */
+  factor: number
+}
+
+type CategoryKey = 'length' | 'area' | 'volume' | 'mass' | 'temperature' | 'data' | 'speed' | 'time'
+type FactorCategory = Exclude<CategoryKey, 'temperature'>
+
+const categories: { label: string; value: CategoryKey }[] = [
+  { label: '长度', value: 'length' },
+  { label: '面积', value: 'area' },
+  { label: '体积', value: 'volume' },
+  { label: '质量', value: 'mass' },
+  { label: '温度', value: 'temperature' },
+  { label: '数据存储', value: 'data' },
+  { label: '速度', value: 'speed' },
+  { label: '时间', value: 'time' },
+]
+
+const unitTables: Record<FactorCategory, UnitDef[]> = {
+  length: [
+    { name: '米', factor: 1 },
+    { name: '千米', factor: 1000 },
+    { name: '分米', factor: 0.1 },
+    { name: '厘米', factor: 0.01 },
+    { name: '毫米', factor: 0.001 },
+    { name: '微米', factor: 1e-6 },
+    { name: '英里', factor: 1609.344 },
+    { name: '码', factor: 0.9144 },
+    { name: '英尺', factor: 0.3048 },
+    { name: '英寸', factor: 0.0254 },
+    { name: '海里', factor: 1852 },
+  ],
+  area: [
+    { name: '平方米', factor: 1 },
+    { name: '平方千米', factor: 1e6 },
+    { name: '公顷', factor: 1e4 },
+    { name: '亩', factor: 2000 / 3 },
+    { name: '平方英尺', factor: 0.092903 },
+    { name: '平方英里', factor: 2.59e6 },
+    { name: '英亩', factor: 4046.856 },
+  ],
+  volume: [
+    { name: '立方米', factor: 1 },
+    { name: '升', factor: 0.001 },
+    { name: '毫升', factor: 1e-6 },
+    { name: '加仑(美)', factor: 0.00378541 },
+    { name: '夸脱(美)', factor: 0.000946353 },
+    { name: '立方英尺', factor: 0.0283168 },
+  ],
+  mass: [
+    { name: '千克', factor: 1 },
+    { name: '克', factor: 0.001 },
+    { name: '毫克', factor: 1e-6 },
+    { name: '吨', factor: 1000 },
+    { name: '磅', factor: 0.45359237 },
+    { name: '盎司', factor: 0.0283495 },
+    { name: '斤', factor: 0.5 },
+    { name: '两', factor: 0.05 },
+  ],
+  data: [
+    { name: '字节', factor: 1 },
+    { name: 'bit', factor: 0.125 },
+    { name: 'KB', factor: 1024 },
+    { name: 'MB', factor: 1024 ** 2 },
+    { name: 'GB', factor: 1024 ** 3 },
+    { name: 'TB', factor: 1024 ** 4 },
+  ],
+  speed: [
+    { name: '米/秒', factor: 1 },
+    { name: '千米/时', factor: 1 / 3.6 },
+    { name: '英里/时', factor: 0.44704 },
+    { name: '节', factor: 0.514444 },
+    { name: '英尺/秒', factor: 0.3048 },
+  ],
+  time: [
+    { name: '秒', factor: 1 },
+    { name: '毫秒', factor: 0.001 },
+    { name: '分钟', factor: 60 },
+    { name: '小时', factor: 3600 },
+    { name: '天', factor: 86400 },
+    { name: '周', factor: 604800 },
+    { name: '年(365天)', factor: 31536000 },
+  ],
+}
+
+// 温度不适用 factor，单独维护三温标并走换算函数
+const tempUnits: { label: string; value: string }[] = [
+  { label: '摄氏度 (°C)', value: 'c' },
+  { label: '华氏度 (°F)', value: 'f' },
+  { label: '开尔文 (K)', value: 'k' },
+]
+
+const category = ref<CategoryKey>('length')
+const value = ref(1)
+const fromUnit = ref('米')
+const toUnit = ref('千米')
+const history = useHistory('unit-convert')
+
+function optionsFor(cat: CategoryKey): { label: string; value: string }[] {
+  if (cat === 'temperature') return tempUnits
+  return unitTables[cat].map((u) => ({ label: u.name, value: u.name }))
+}
+
+const unitOptions = computed(() => optionsFor(category.value))
+
+/** 温度三向换算：统一先换算为摄氏度，再转到目标温标 */
+function convertTemp(v: number, from: string, to: string): number {
+  let c: number
+  if (from === 'f') c = ((v - 32) * 5) / 9
+  else if (from === 'k') c = v - 273.15
+  else c = v
+  if (to === 'f') return (c * 9) / 5 + 32
+  if (to === 'k') return c + 273.15
+  return c
+}
+
+function factorOf(name: string): number {
+  if (category.value === 'temperature') return 1
+  return unitTables[category.value].find((u) => u.name === name)?.factor ?? 1
+}
+
+/** 数值展示：toPrecision 限制 6 位有效数字，再经 Number 去掉多余尾零 */
+function formatNum(n: number): string {
+  return String(Number(n.toPrecision(6)))
+}
+
+const resultText = computed(() => {
+  const v = value.value
+  if (!Number.isFinite(v)) return ''
+  const fromLabel = unitOptions.value.find((o) => o.value === fromUnit.value)?.label ?? fromUnit.value
+  const toLabel = unitOptions.value.find((o) => o.value === toUnit.value)?.label ?? toUnit.value
+  const converted =
+    category.value === 'temperature'
+      ? convertTemp(v, fromUnit.value, toUnit.value)
+      : (v * factorOf(fromUnit.value)) / factorOf(toUnit.value)
+  if (!Number.isFinite(converted)) return ''
+  return `${formatNum(v)} ${fromLabel} = ${formatNum(converted)} ${toLabel}`
+})
+
+/** 类别切换后旧单位已不存在，重置为该类别前两个单位，并记录当前换算 */
+function onCategoryChange() {
+  const opts = unitOptions.value
+  fromUnit.value = opts[0].value
+  toUnit.value = opts[1]?.value ?? opts[0].value
+  recordHistory()
+}
+
+/** 历史按「类别|数值|从单位|到单位」结构化保存，点击可完整恢复 */
+function recordHistory() {
+  const v = value.value
+  if (!Number.isFinite(v)) return
+  const catLabel = categories.find((c) => c.value === category.value)?.label ?? category.value
+  history.add(`${catLabel}|${v}|${fromUnit.value}|${toUnit.value}`)
+}
+
+function onHistorySelect(text: string) {
+  const parts = text.split('|')
+  if (parts.length !== 4) return
+  const cat = categories.find((c) => c.label === parts[0])
+  if (!cat) return
+  const n = Number(parts[1])
+  if (!Number.isFinite(n)) return
+  category.value = cat.value
+  // 仅当历史中的单位在当前类别存在时才恢复（防止脏数据）
+  const opts = optionsFor(cat.value)
+  if (opts.some((o) => o.value === parts[2])) fromUnit.value = parts[2]
+  if (opts.some((o) => o.value === parts[3])) toUnit.value = parts[3]
+  value.value = n
+}
+</script>
+
+<style scoped>
+.form-label {
+  width: 56px;
+  flex-shrink: 0;
+  font-size: 14px;
+  color: var(--td-text-color-secondary);
+}
+.form-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+  flex-wrap: wrap;
+}
+.row-gap {
+  margin-top: 12px;
+}
+.cat-select {
+  width: 150px;
+}
+.unit-select {
+  width: 150px;
+}
+.value-input {
+  width: 160px;
+}
+</style>
diff --git a/src/views/uuid/UuidView.vue b/src/views/uuid/UuidView.vue
new file mode 100644
index 0000000..85feae3
--- /dev/null
+++ b/src/views/uuid/UuidView.vue
@@ -0,0 +1,142 @@
+<template>
+  <div class="page-wrap">
+    <h2 class="page-title">UUID 生成器</h2>
+    <p class="page-desc">批量生成 RFC 4122 版本 4 的随机 UUID（基于浏览器安全随机数），支持大写与无连字符格式。</p>
+
+    <t-card class="tool-section" title="生成选项">
+      <div class="form-row">
+        <span class="form-label">数量</span>
+        <t-input-number v-model="count" :min="1" :max="100" :step="1" theme="normal" class="count-input" />
+      </div>
+      <div class="form-row option-row">
+        <t-checkbox v-model="uppercase">大写</t-checkbox>
+        <t-checkbox v-model="noHyphen">无连字符</t-checkbox>
+      </div>
+    </t-card>
+
+    <t-card v-if="list.length" class="tool-section" title="生成结果">
+      <div class="result-actions">
+        <CopyButton :text="allText" label="复制全部" />
+        <t-button theme="primary" @click="regenerate">
+          <template #icon><RefreshIcon /></template>
+          重新生成
+        </t-button>
+      </div>
+      <div class="uuid-list">
+        <div v-for="(u, i) in list" :key="i" class="uuid-row">
+          <span class="uuid-text">{{ u }}</span>
+          <t-button variant="text" size="small" shape="square" title="复制" @click="copyText(u)">
+            <template #icon><CopyIcon /></template>
+          </t-button>
+        </div>
+      </div>
+    </t-card>
+
+    <HistoryPanel
+      :items="history.items"
+      @select="onHistorySelect"
+      @remove="history.remove"
+      @clear="history.clear"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+// UUID 生成器：基于 Web Crypto 安全随机数生成 RFC 4122 v4 UUID，支持批量、大写、无连字符与历史恢复。
+import { computed, onMounted, ref } from 'vue'
+import { CopyIcon, RefreshIcon } from 'tdesign-icons-vue-next'
+import CopyButton from '@/components/common/CopyButton.vue'
+import HistoryPanel from '@/components/common/HistoryPanel.vue'
+import { useHistory } from '@/composables/useHistory'
+import { copyText } from '@/composables/useClipboard'
+
+const count = ref(5)
+const uppercase = ref(false)
+const noHyphen = ref(false)
+const list = ref<string[]>([])
+const history = useHistory('uuid')
+
+/**
+ * 生成单个 v4 UUID：16 字节安全随机数，再写入版本位与变体位。
+ * 无连字符时跳过 8-4-4-4-12 的分隔符；大写按需转换（数字不受影响）。
+ */
+function generateUuid(noHyphenFlag: boolean, upperFlag: boolean): string {
+  const bytes = new Uint8Array(16)
+  crypto.getRandomValues(bytes)
+  bytes[6] = (bytes[6] & 0x0f) | 0x40 // 版本 4
+  bytes[8] = (bytes[8] & 0x3f) | 0x80 // RFC 4122 变体
+  let hex = ''
+  bytes.forEach((b, i) => {
+    hex += b.toString(16).padStart(2, '0')
+    if (!noHyphenFlag && [3, 5, 7, 9].includes(i)) hex += '-'
+  })
+  return upperFlag ? hex.toUpperCase() : hex
+}
+
+/** 按当前选项生成一批 UUID；数量夹取到合法范围，防止输入框清空等边界情况 */
+function generate() {
+  const n = Number.isFinite(count.value) ? Math.min(100, Math.max(1, Math.floor(count.value))) : 1
+  list.value = Array.from({ length: n }, () => generateUuid(noHyphen.value, uppercase.value))
+}
+
+const allText = computed(() => list.value.join('\n'))
+
+/** 用户主动重新生成时才写历史（超 300 字符截断），避免每次进入页面都污染历史 */
+function regenerate() {
+  generate()
+  history.add(allText.value.slice(0, 300))
+}
+
+function onHistorySelect(text: string) {
+  // 按换行拆分恢复列表；历史可能被截断，末行不完整也照常展示
+  list.value = text
+    .split('\n')
+    .map((s) => s.trim())
+    .filter(Boolean)
+}
+
+onMounted(generate)
+</script>
+
+<style scoped>
+.form-label {
+  width: 56px;
+  flex-shrink: 0;
+  font-size: 14px;
+  color: var(--td-text-color-secondary);
+}
+.count-input {
+  width: 140px;
+}
+.option-row {
+  margin-top: 12px;
+}
+.result-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+.uuid-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.uuid-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border: 1px solid var(--td-border-level-1-color);
+  border-radius: 6px;
+  background: var(--td-bg-color-container);
+}
+.uuid-text {
+  flex: 1;
+  min-width: 0;
+  font-family: monospace;
+  font-size: 13px;
+  word-break: break-all;
+  color: var(--td-text-color-primary);
+}
+</style>
diff --git a/src/views/word-count/WordCountView.vue b/src/views/word-count/WordCountView.vue
new file mode 100644
index 0000000..ffda957
--- /dev/null
+++ b/src/views/word-count/WordCountView.vue
@@ -0,0 +1,124 @@
+<!--
+  字数统计工具：实时统计文本的字符、汉字、单词、行数、段落、UTF-8 字节数与预计阅读时长。
+-->
+<template>
+  <div class="page-wrap">
+    <h2 class="page-title">字数统计</h2>
+    <p class="page-desc">实时统计文本的字符数、汉字数、单词数、行数、段落数与预计阅读时长，全部在浏览器本地完成。</p>
+
+    <t-card class="tool-section" title="输入文本">
+      <t-textarea
+        v-model="text"
+        placeholder="在此输入或粘贴要统计的文本……"
+        :autosize="{ minRows: 8, maxRows: 16 }"
+        @blur="recordHistory"
+      />
+    </t-card>
+
+    <ErrorAlert :message="error" @close="error = ''" />
+
+    <t-card class="tool-section" title="统计结果">
+      <div class="stat-grid">
+        <div v-for="item in stats" :key="item.label" class="stat-card">
+          <div class="stat-value">{{ item.value }}</div>
+          <div class="stat-label">{{ item.label }}</div>
+        </div>
+      </div>
+    </t-card>
+
+    <HistoryPanel
+      :items="history.items"
+      @select="onHistorySelect"
+      @remove="history.remove"
+      @clear="history.clear"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import ErrorAlert from '@/components/common/ErrorAlert.vue'
+import HistoryPanel from '@/components/common/HistoryPanel.vue'
+import { useHistory } from '@/composables/useHistory'
+
+const text = ref('')
+// 实时统计没有校验失败场景，error 仅用于保持页面结构统一（始终为空，不渲染）
+const error = ref('')
+
+const history = useHistory('word-count')
+
+// 常见中英文标点集合（含全角），用于统计标点符号数量
+const PUNCT_RE = /[，。！？；：、“”‘’（）《》〈〉【】〔〕…—–·～,.!?;:'"()\[\]{}<>\/\\|@#$%^&*_+=`~-]/g
+
+interface StatItem {
+  label: string
+  value: string
+}
+
+const stats = computed<StatItem[]>(() => {
+  const t = text.value
+  // 汉字：仅统计 CJK 基本区汉字，不含标点、假名等其他字符
+  const hanzi = (t.match(/[\u4e00-\u9fff]/g) ?? []).length
+  // 英文单词：支持连字符/撇号连接的单词（如 well-known、don't）
+  const words = (t.match(/[a-zA-Z]+(?:['’-][a-zA-Z]+)*/g) ?? []).length
+  // 阅读时长：中文 400 字/分钟 + 英文 200 词/分钟；非空文本至少 1 分钟
+  const minutes = t.trim() ? Math.max(1, Math.ceil(hanzi / 400 + words / 200)) : 0
+  return [
+    { label: '总字符数', value: String(t.length) },
+    { label: '不含空白字符数', value: String(t.replace(/\s/g, '').length) },
+    { label: '汉字数', value: String(hanzi) },
+    { label: '英文单词数', value: String(words) },
+    { label: '数字字符数', value: String((t.match(/[0-9０-９]/g) ?? []).length) },
+    { label: '标点符号数', value: String((t.match(PUNCT_RE) ?? []).length) },
+    { label: '行数', value: String(t ? t.split('\n').length : 0) },
+    { label: '段落数', value: String(t.trim() ? t.split(/\n\s*\n/).filter((p) => p.trim()).length : 0) },
+    { label: 'UTF-8 字节数', value: String(new TextEncoder().encode(t).length) },
+    { label: '预计阅读时长', value: `${minutes} 分钟` },
+  ]
+})
+
+// 实时统计工具没有「转换」按钮，输入框失焦时记录一次历史，避免打字过程产生大量中间记录
+let lastRecorded = ''
+function recordHistory() {
+  const t = text.value.trim()
+  if (!t || t === lastRecorded) return
+  lastRecorded = t
+  history.add(t.slice(0, 300))
+}
+
+function onHistorySelect(item: string) {
+  text.value = item
+}
+</script>
+
+<style scoped>
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 12px;
+}
+.stat-card {
+  padding: 14px 16px;
+  border: 1px solid var(--td-border-level-1-color);
+  border-radius: 8px;
+  background: var(--td-bg-color-container);
+}
+.stat-value {
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--td-brand-color);
+  word-break: break-all;
+}
+.stat-label {
+  margin-top: 4px;
+  font-size: 13px;
+  color: var(--td-text-color-secondary);
+}
+@media (max-width: 767px) {
+  /* 移动端降为单列，避免小屏下卡片拥挤 */
+  .stat-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
diff --git a/src/views/yaml-json/YamlJsonView.vue b/src/views/yaml-json/YamlJsonView.vue
new file mode 100644
index 0000000..7e87ef8
--- /dev/null
+++ b/src/views/yaml-json/YamlJsonView.vue
@@ -0,0 +1,120 @@
+<!--
+  YAML ↔ JSON 转换工具：基于 js-yaml 在浏览器本地完成 YAML 与 JSON 互转，内容不上传。
+-->
+<template>
+  <div class="page-wrap">
+    <h2 class="page-title">YAML ↔ JSON 转换</h2>
+    <p class="page-desc">YAML 与 JSON 格式互转，全部在浏览器本地完成，内容不会上传。</p>
+
+    <!-- YAML 隐式类型解析提示：未加引号的日期/数字字符串可能被解析为对应类型 -->
+    <t-alert
+      class="tip-alert"
+      theme="warning"
+      message="提示：YAML 解析可能将未加引号的日期或数字字符串解析为日期/数字类型，若有歧义建议给字符串加引号。"
+    />
+
+    <t-card class="tool-section" title="转换">
+      <t-radio-group v-model="direction" variant="default-filled">
+        <t-radio-button value="y2j">YAML → JSON</t-radio-button>
+        <t-radio-button value="j2y">JSON → YAML</t-radio-button>
+      </t-radio-group>
+      <t-textarea
+        v-model="input"
+        class="input-area"
+        :placeholder="placeholder"
+        :autosize="{ minRows: 8, maxRows: 16 }"
+      />
+      <div class="form-actions">
+        <t-button theme="primary" @click="convert">转换</t-button>
+      </div>
+    </t-card>
+
+    <ErrorAlert :message="error" @close="error = ''" />
+
+    <t-card v-if="output" class="tool-section" title="转换结果">
+      <t-textarea v-model="output" :autosize="{ minRows: 6, maxRows: 16 }" readonly />
+      <div class="form-actions">
+        <CopyButton :text="output" />
+      </div>
+    </t-card>
+
+    <HistoryPanel
+      :items="history.items"
+      @select="onHistorySelect"
+      @remove="history.remove"
+      @clear="history.clear"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { load, dump } from 'js-yaml'
+import ErrorAlert from '@/components/common/ErrorAlert.vue'
+import CopyButton from '@/components/common/CopyButton.vue'
+import HistoryPanel from '@/components/common/HistoryPanel.vue'
+import { useHistory } from '@/composables/useHistory'
+
+type Direction = 'y2j' | 'j2y'
+
+const direction = ref<Direction>('y2j')
+const input = ref('')
+const output = ref('')
+const error = ref('')
+
+const history = useHistory('yaml-json')
+
+// 占位提示随方向切换，放在脚本中避免模板内多行表达式
+const placeholder = computed(() =>
+  direction.value === 'y2j'
+    ? '输入 YAML 内容，例如：\nname: 张三\nage: 18'
+    : '输入 JSON 内容，例如：\n{ "name": "张三", "age": 18 }',
+)
+
+function convert() {
+  error.value = ''
+  output.value = ''
+  const text = input.value.trim()
+  if (!text) {
+    error.value = '请输入要转换的内容'
+    return
+  }
+  try {
+    if (direction.value === 'y2j') {
+      // load 返回 unknown；空文档会返回 undefined，此时按解析失败处理
+      const data = load(text)
+      if (data === undefined) {
+        error.value = 'YAML 内容为空或无法解析'
+        return
+      }
+      output.value = JSON.stringify(data, null, 2)
+    } else {
+      output.value = dump(JSON.parse(text))
+    }
+    // 历史只保留前 300 字符，避免长文本撑爆 localStorage
+    history.add(input.value.slice(0, 300))
+  } catch (e) {
+    error.value = `转换失败：${(e as Error).message}`
+  }
+}
+
+function onHistorySelect(text: string) {
+  input.value = text
+  convert()
+}
+</script>
+
+<style scoped>
+.input-area {
+  margin-top: 12px;
+}
+.form-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+  flex-wrap: wrap;
+}
+.tip-alert {
+  margin-bottom: 12px;
+}
+</style>
diff --git a/src/views/zh-convert/ZhConvertView.vue b/src/views/zh-convert/ZhConvertView.vue
new file mode 100644
index 0000000..a7ca4b2
--- /dev/null
+++ b/src/views/zh-convert/ZhConvertView.vue
@@ -0,0 +1,102 @@
+<!--
+  简繁转换工具：基于 opencc-js 词库在浏览器本地完成简体中文与繁体中文互转。
+-->
+<template>
+  <div class="page-wrap">
+    <h2 class="page-title">简繁转换</h2>
+    <p class="page-desc">简体中文与繁体中文互转，基于 opencc-js 词库在浏览器本地完成，内容不会上传。</p>
+
+    <t-alert
+      class="tip-alert"
+      theme="info"
+      message="提示：转换基于 opencc-js 的标准 cn/tw 映射词库，不包含台湾地区用语变体。"
+    />
+
+    <t-card class="tool-section" title="转换">
+      <t-radio-group v-model="direction" variant="default-filled">
+        <t-radio-button value="s2t">简体 → 繁体</t-radio-button>
+        <t-radio-button value="t2s">繁体 → 简体</t-radio-button>
+      </t-radio-group>
+      <t-textarea
+        v-model="input"
+        class="input-area"
+        placeholder="输入要转换的中文文本，例如：软件 / 軟體"
+        :autosize="{ minRows: 6, maxRows: 14 }"
+      />
+      <div class="form-actions">
+        <t-button theme="primary" @click="convert">转换</t-button>
+      </div>
+    </t-card>
+
+    <ErrorAlert :message="error" @close="error = ''" />
+
+    <t-card v-if="output" class="tool-section" title="转换结果">
+      <t-textarea v-model="output" :autosize="{ minRows: 6, maxRows: 14 }" readonly />
+      <div class="form-actions">
+        <CopyButton :text="output" />
+      </div>
+    </t-card>
+
+    <HistoryPanel
+      :items="history.items"
+      @select="onHistorySelect"
+      @remove="history.remove"
+      @clear="history.clear"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import * as OpenCC from 'opencc-js'
+import ErrorAlert from '@/components/common/ErrorAlert.vue'
+import CopyButton from '@/components/common/CopyButton.vue'
+import HistoryPanel from '@/components/common/HistoryPanel.vue'
+import { useHistory } from '@/composables/useHistory'
+
+type Direction = 's2t' | 't2s'
+
+// 转换器在模块顶层创建一次并复用，避免每次转换重建词库的开销
+const s2t = OpenCC.Converter({ from: 'cn', to: 'tw' })
+const t2s = OpenCC.Converter({ from: 'tw', to: 'cn' })
+
+const direction = ref<Direction>('s2t')
+const input = ref('')
+const output = ref('')
+const error = ref('')
+
+const history = useHistory('zh-convert')
+
+function convert() {
+  error.value = ''
+  output.value = ''
+  const text = input.value.trim()
+  if (!text) {
+    error.value = '请输入要转换的文本'
+    return
+  }
+  output.value = direction.value === 's2t' ? s2t(text) : t2s(text)
+  // 历史只保留前 300 字符，避免长文本撑爆 localStorage
+  history.add(input.value.slice(0, 300))
+}
+
+function onHistorySelect(text: string) {
+  input.value = text
+  convert()
+}
+</script>
+
+<style scoped>
+.input-area {
+  margin-top: 12px;
+}
+.form-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 16px;
+  flex-wrap: wrap;
+}
+.tip-alert {
+  margin-bottom: 12px;
+}
+</style>