feat: 添加代码语法高亮功能和 HTML 格式化依赖

- 集成 react-syntax-highlighter 实现代码高亮显示 - 新增 code-highlighter UI 组件和 syntax-helpers 工具 - 添加 HTML/XML 格式化相关 Rust 依赖(minify-html、markup_fmt 等) - 在开发指南中整合 Rust-TS 跨语言命名规范 - 移除冗余的 Tauri_Naming_Conventions.md 文档 - 更新 Claude Code 配置添加工具命令权限
2026-02-11 09:46:49 +08:00
parent bf5d056811
commit 910a50fa45
14 changed files with 1160 additions and 675 deletions
--- a/docs/Tauri_Naming_Conventions.md
+++ b/docs/Tauri_Naming_Conventions.md
@@ -1,270 +0,0 @@
-# Tauri 命名规范文档
-
-## 概述
-
-本文档定义了 SSH Terminal 项目中 Tauri 应用 Rust 端和前端（TypeScript/JavaScript）之间的数据类型命名规范。通过遵循这些规范，可以确保跨语言的类型安全性和一致性。
-
-## 核心原则
-
-### 1. 各自遵循语言规范
- **Rust 端**: 遵循 Rust 命名规范（snake_case 变量/函数，PascalCase 类型/枚举）
- **前端**: 遵循 TypeScript 命名规范（camelCase 变量/属性，PascalCase 类型）
- **通过 serde 自动转换**: 使用 `serde` 的重命名功能自动处理转换
-
-### 2. 类型名称保持一致
- **Rust 端**: PascalCase（如 `SessionConfig`, `AuthMethod`）
- **前端**: PascalCase（如 `SessionConfig`, `AuthMethod`）
- 类型名称在两端保持一致
-
-## 详细规范
-
-### Struct 字段命名
-
-#### Rust 端规范
- 使用 **snake_case** 命名
- 添加 `#[serde(rename_all = "camelCase")]` 注解自动转换为 camelCase
-
-```rust
-#[derive(Serialize, Deserialize)]
-#[serde(rename_all = "camelCase")]
-pub struct SessionConfig {
-    pub host: String,           // Rust: snake_case
-    pub port: u16,
-    pub user_name: String,      // Rust: snake_case
-    pub private_key_path: String, // Rust: snake_case
-    pub auth_method: AuthMethod,
-}
-```
-
-#### 前端规范
- 使用 **camelCase** 命名
- 与 serde 自动转换后的名称一致
-
-```typescript
-export interface SessionConfig {
-    host: string;               // TS: camelCase
-    port: number;
-    userName: string;           // TS: camelCase
-    privateKeyPath: string;     // TS: camelCase
-    authMethod: AuthMethod;
-}
-```
-
-### Enum 变体命名
-
-#### Rust 端规范
- 使用 **PascalCase** 命名
- 添加 `#[serde(rename_all = "camelCase")]` 注解自动转换为 camelCase
-
-```rust
-#[derive(Serialize, Deserialize)]
-#[serde(rename_all = "camelCase")]
-pub enum AuthMethod {
-    Password { password: String },           // PascalCase
-    PublicKey { privateKeyPath: String, passphrase: Option<String> },
-}
-```
-
-#### 前端规范
- 使用 **PascalCase** 命名（Discriminated Union）
- 与 serde 自动转换后的变体名称一致
-
-```typescript
-export type AuthMethod =
-    | { Password: { password: string } }      // PascalCase
-    | { PublicKey: { privateKeyPath: string; passphrase?: string } };
-```
-
-### 字段命名对照表
-
-| Rust 端 (snake_case) | 前端 (camelCase) | 示例用途 |
-|---------------------|------------------|---------|
-| `user_name` | `userName` | 用户名 |
-| `private_key_path` | `privateKeyPath` | 私钥路径 |
-| `auth_method` | `authMethod` | 认证方法 |
-| `connection_id` | `connectionId` | 连接 ID |
-| `terminal_type` | `terminalType` | 终端类型 |
-| `keep_alive_interval` | `keepAliveInterval` | 保活间隔 |
-| `strict_host_key_checking` | `strictHostKeyChecking` | 主机密钥检查 |
-| `video_file` | `videoFile` | 视频文件 |
-
-## 特殊情况处理
-
-### 1. 保留字段原名
-如果某些字段需要保持原名（通常是已经是 camelCase 的字段），可以使用 `#[serde(skip_serializing_if = "Option::is_none")]` 或单独注解：
-
-```rust
-#[derive(Serialize, Deserialize)]
-#[serde(rename_all = "camelCase")]
-pub struct SessionConfig {
-    pub name: String,           // name -> name (保持不变)
-    #[serde(rename = "id")]      // 显式重命名
-    pub session_id: String,
-}
-```
-
-### 2. 单词分隔符
- **snake_case**: 使用下划线 `_` 分隔
- **camelCase**: 使用首字母大写分隔
-
-```rust
-// Rust: strict_host_key_checking
-// TS:  strictHostKeyChecking
-```
-
-### 3. 缩写处理
- 缩写词保持原始形式（如 `ID`, `URL`, `SSH`）
- 不要将缩写词转换为小写
-
-```rust
-pub connection_id: String,      // NOT connection_i_d
-// TS: connectionId                // NOT connectionId
-```
-
-## 实现示例
-
-### Rust 端完整示例
-
-```rust
-use serde::{Serialize, Deserialize};
-
-#[derive(Serialize, Deserialize, Clone, Debug)]
-#[serde(rename_all = "camelCase")]
-pub struct SessionConfig {
-    pub id: Option<String>,
-    pub name: String,
-    pub host: String,
-    pub port: u16,
-    pub username: String,
-    pub authMethod: AuthMethod,
-    pub terminalType: Option<String>,
-    pub columns: Option<u16>,
-    pub rows: Option<u16>,
-    #[serde(default = "default_strict_host_key_checking")]
-    pub strictHostKeyChecking: bool,
-    #[serde(default = "default_group")]
-    pub group: String,
-    #[serde(default = "default_keep_alive_interval")]
-    pub keepAliveInterval: u64,
-}
-
-#[derive(Serialize, Deserialize, Clone, Debug)]
-#[serde(rename_all = "camelCase")]
-pub enum AuthMethod {
-    Password { password: String },
-    PublicKey { privateKeyPath: String, passphrase: Option<String> },
-}
-```
-
-### 前端完整示例
-
-```typescript
-export interface SessionConfig {
-    id?: string;
-    name: string;
-    host: string;
-    port: number;
-    username: string;
-    authMethod: AuthMethod;
-    terminalType?: string;
-    columns?: number;
-    rows?: number;
-    strictHostKeyChecking?: boolean;
-    group?: string;
-    keepAliveInterval?: number;
-}
-
-export type AuthMethod =
-    | { Password: { password: string } }
-    | { PublicKey: { privateKeyPath: string; passphrase?: string } };
-```
-
-## 验证和测试
-
-### 1. Rust 端验证
-```bash
-cd src-tauri
-cargo check
-cargo clippy
-```
-
-### 2. 前端验证
-```bash
-pnpm tsc --noEmit
-```
-
-### 3. 交叉验证
- 测试 Rust 序列化到 JSON
- 验证前端反序列化是否正确
- 检查字段名是否匹配
-
-## 常见错误
-
-### 错误 1: 未添加 serde 注解
-```rust
-// ❌ 错误
-pub struct SessionConfig {
-    pub user_name: String,  // 序列化为 user_name (snake_case)
-}
-
-// ✅ 正确
-#[derive(Serialize, Deserialize)]
-#[serde(rename_all = "camelCase")]
-pub struct SessionConfig {
-    pub user_name: String,  // 序列化为 userName (camelCase)
-}
-```
-
-### 错误 2: 前端类型不匹配
-```typescript
-// ❌ 错误
-export interface SessionConfig {
-    user_name: string;  // 应该是 userName
-}
-
-// ✅ 正确
-export interface SessionConfig {
-    userName: string;  // 与 Rust 端序列化后的名称一致
-}
-```
-
-### 错误 3: Enum 变体命名不一致
-```rust
-// ❌ 错误
-pub enum AuthMethod {
-    Password,      // 序列化为 "Password" (PascalCase)
-    PublicKey,
-}
-
-// ✅ 正确
-#[derive(Serialize, Deserialize)]
-#[serde(rename_all = "camelCase")]
-pub enum AuthMethod {
-    Password,      // 序列化为 "password" (camelCase)
-    PublicKey,    // 序列化为 "publicKey" (camelCase)
-}
-```
-
-## 工具和辅助
-
-### 自动检查脚本
-可以创建一个脚本来检查 Rust 和前端类型定义的一致性：
-
-```bash
-# 检查 Rust 端是否缺少 serde 注解
-grep -r "pub struct" src-tauri/src | grep -v "#\[serde"
-
-# 检查前端类型定义
-grep -r "export interface" src/types
-```
-
-## 相关资源
-
- [serde 文档](https://serde.rs/)
- [Tauri 文档](https://tauri.app/)
- [Rust 命名规范](https://rust-lang.github.io/api-guidelines/naming.html)
- [TypeScript 命名规范](https://typescript-eslint.io/rules/naming-convention/)
-
-## 更新日志
-
- **2026-01-29**: 初始版本，定义 Tauri 项目命名规范
--- a/docs/开发指南.md
+++ b/docs/开发指南.md
@@ -741,6 +741,8 @@ pub fn capture_region(

 ### 1. 命名规范

+#### 1.1 Rust 内部命名规范
+
 | 类型 | 命名风格 | 示例 |
 |------|----------|------|
 | 模块 | snake_case | `color_service.rs` |
@@ -750,6 +752,96 @@ pub fn capture_region(
 | Trait | PascalCase + 能力 | `ScreenAccessor`, `CursorController` |
 | 类型别名 | PascalCase + Type | `AppResult`, `JsonResult` |

+#### 1.2 跨语言命名规范（Rust ↔ TypeScript）
+
+**核心原则**：
+- ✅ **各自遵循语言规范**：Rust 用 snake_case，前端用 camelCase
+- ✅ **通过 serde 自动转换**：使用 `#[serde(rename_all = "camelCase")]`
+- ✅ **类型名称保持一致**：两端都用 PascalCase
+
+**Rust 端实现**：
+```rust
+#[derive(Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]  // 自动转换
+pub struct SessionConfig {
+    pub host: String,           // Rust: snake_case → JSON: "host"
+    pub port: u16,
+    pub user_name: String,      // Rust: snake_case → JSON: "userName"
+    pub private_key_path: String, // Rust: snake_case → JSON: "privateKeyPath"
+    pub auth_method: AuthMethod,
+}
+```
+
+**前端类型定义**：
+```typescript
+export interface SessionConfig {
+    host: string;               // camelCase
+    port: number;
+    userName: string;           // camelCase
+    privateKeyPath: string;     // camelCase
+    authMethod: AuthMethod;
+}
+```
+
+**字段命名对照表**：
+
+| Rust 端 (snake_case) | 前端 (camelCase) | 说明 |
+|---------------------|------------------|------|
+| `user_name` | `userName` | 用户名 |
+| `private_key_path` | `privateKeyPath` | 私钥路径 |
+| `auth_method` | `authMethod` | 认证方法 |
+| `connection_id` | `connectionId` | 连接 ID |
+| `terminal_type` | `terminalType` | 终端类型 |
+| `keep_alive_interval` | `keepAliveInterval` | 保活间隔 |
+| `strict_host_key_checking` | `strictHostKeyChecking` | 主机密钥检查 |
+
+**注意事项**：
+- ✅ 所有与前端交互的 struct 都必须添加 `#[serde(rename_all = "camelCase")]`
+- ✅ Enum 变体命名也使用 `#[serde(rename_all = "camelCase")]`
+- ✅ 类型名称（如 `SessionConfig`）在两端保持一致
+- ❌ 不要在 Rust 端直接使用 camelCase 命名字段
+- ❌ 不要在前端使用 snake_case 命名属性
+
+**完整示例**：
+
+```rust
+// Rust 端
+#[derive(Serialize, Deserialize, Clone, Debug)]
+#[serde(rename_all = "camelCase")]
+pub struct SessionConfig {
+    pub id: Option<String>,
+    pub name: String,
+    pub host: String,
+    pub port: u16,
+    pub username: String,
+    #[serde(default = "default_keep_alive_interval")]
+    pub keepAliveInterval: u64,
+}
+
+#[derive(Serialize, Deserialize, Clone, Debug)]
+#[serde(rename_all = "camelCase")]
+pub enum AuthMethod {
+    Password { password: String },
+    PublicKey { privateKeyPath: String, passphrase: Option<String> },
+}
+```
+
+```typescript
+// 前端
+export interface SessionConfig {
+    id?: string;
+    name: string;
+    host: string;
+    port: number;
+    username: string;
+    keepAliveInterval?: number;
+}
+
+export type AuthMethod =
+    | { Password: { password: string } }
+    | { PublicKey: { privateKeyPath: string; passphrase?: string } };
+```
+
 ### 2. 文档注释规范

 ```rust
--- a/docs/快速参考.md
+++ b/docs/快速参考.md
@@ -65,11 +65,38 @@ pub fn execute_feature(input: FeatureData) -> Result<Output, String> {
 ## ✅ 代码规范清单

 ### 命名规范
+
+#### Rust 内部命名
 - [ ] 模块文件: `snake_case`
 - [ ] 结构体: `PascalCase`
 - [ ] 函数: `snake_case`
 - [ ] Trait: `PascalCase` + 能力描述（可选）

+#### 跨语言命名（Rust ↔ TypeScript）
+- [ ] 与前端交互的 struct 添加 `#[serde(rename_all = "camelCase")]`
+- [ ] Rust 端使用 `snake_case` 命名字段
+- [ ] 前端使用 `camelCase` 命名属性
+- [ ] 类型名称两端保持 `PascalCase` 一致
+
+**快速模板**：
+```rust
+// Rust 端 - 必须添加 serde 注解
+#[derive(Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]  // ← 必须添加
+pub struct MyConfig {
+    pub field_name: String,  // snake_case
+    pub user_id: u32,        // 自动转换为 userId
+}
+```
+
+```typescript
+// 前端 - 使用 camelCase
+export interface MyConfig {
+    fieldName: string;  // camelCase
+    userId: number;     // 与 Rust 端对应
+}
+```
+
 ### 文档规范
 - [ ] 所有公开 API 有 `///` 注释
 - [ ] 所有模块有 `//!` 注释