Add files via upload

Removed reference to CHANGELOG.md from the README_CN.

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="web/static/logo.png" alt="CyberStrikeAI Logo" width="300">
+  <img src="web/static/logo.png" alt="CyberStrikeAI Logo" width="200">
 </div>
 
 # CyberStrikeAI
@@ -18,43 +18,45 @@ CyberStrikeAI is an **AI-native security testing platform** built in Go. It inte
 
 <table>
 <tr>
-<td width="50%" align="center">
+<td width="33.33%" align="center">
 <strong>Web Console</strong><br/>
-<img src="./img/效果.png" alt="Web Console" width="100%">
+<img src="./images/web-console.png" alt="Web Console" width="100%">
 </td>
-<td width="50%" align="center">
-<strong>MCP Integration</strong><br/>
-<img src="./img/MCP管理.png" alt="MCP management" width="100%">
-</td>
-</tr>
-<tr>
-<td width="50%" align="center">
+<td width="33.33%" align="center">
 <strong>Attack Chain Visualization</strong><br/>
-<img src="./img/攻击链.png" alt="Attack Chain" width="100%">
+<img src="./images/attack-chain.png" alt="Attack Chain" width="100%">
 </td>
-<td width="50%" align="center">
-<strong>Vulnerability Management</strong><br/>
-<img src="./img/漏洞管理.png" alt="Vulnerability Management" width="100%">
-</td>
-</tr>
-<tr>
-<td width="50%" align="center">
+<td width="33.33%" align="center">
 <strong>Task Management</strong><br/>
-<img src="./img/任务.png" alt="Task Management" width="100%">
-</td>
-<td width="50%" align="center">
-<strong>Role Management</strong><br/>
-<img src="./img/角色管理.png" alt="Role Management" width="100%">
+<img src="./images/task-management.png" alt="Task Management" width="100%">
 </td>
 </tr>
 <tr>
-<td width="50%" align="center">
-<strong>Skills Management</strong><br/>
-<img src="./img/skills.png" alt="Skills Management" width="100%">
+<td width="33.33%" align="center">
+<strong>Vulnerability Management</strong><br/>
+<img src="./images/vulnerability-management.png" alt="Vulnerability Management" width="100%">
 </td>
-<td width="50%" align="center">
+<td width="33.33%" align="center">
+<strong>MCP Management</strong><br/>
+<img src="./images/mcp-management.png" alt="MCP management" width="100%">
+</td>
+<td width="33.33%" align="center">
 <strong>MCP stdio Mode</strong><br/>
-<img src="./img/mcp-stdio2.png" alt="MCP stdio mode" width="100%">
+<img src="./images/mcp-stdio2.png" alt="MCP stdio mode" width="100%">
+</td>
+</tr>
+<tr>
+<td width="33.33%" align="center">
+<strong>Knowledge Base</strong><br/>
+<img src="./images/knowledge-base.png" alt="Knowledge Base" width="100%">
+</td>
+<td width="33.33%" align="center">
+<strong>Skills Management</strong><br/>
+<img src="./images/skills.png" alt="Skills Management" width="100%">
+</td>
+<td width="33.33%" align="center">
+<strong>Role Management</strong><br/>
+<img src="./images/role-management.png" alt="Role Management" width="100%">
 </td>
 </tr>
 </table>
@@ -462,7 +464,7 @@ CyberStrikeAI/
 ├── tools/               # YAML tool recipes (100+ examples provided)
 ├── roles/               # Role configurations (12+ predefined security testing roles)
 ├── skills/              # Skills directory (20+ predefined security testing skills)
-├── img/                 # Docs screenshots & diagrams
+├── images/              # Docs screenshots & diagrams
 ├── config.yaml          # Runtime configuration
 ├── run.sh               # Convenience launcher
 └── README*.md
@@ -489,10 +491,9 @@ Build an attack chain for the latest engagement and export the node list with se
 
 ## Changelog
 
-See [CHANGELOG.md](CHANGELOG.md) for detailed version history and all changes.
-
 ### Recent Highlights
 
+- **2026-01-27** – OpenAPI documentation with interactive testing interface, supporting conversation management, message interaction, and result querying
 - **2026-01-15** – Skills system with 20+ predefined security testing skills
 - **2026-01-11** – Role-based testing with predefined security testing roles
 - **2026-01-08** – SSE transport mode support for external MCP servers
@@ -504,14 +505,14 @@ See [CHANGELOG.md](CHANGELOG.md) for detailed version history and all changes.
 
 ## 404Starlink 
 
-<img src="./img/404StarLinkLogo.png" width="30%">
+<img src="./images/404StarLinkLogo.png" width="30%">
 
 CyberStrikeAI has joined [404Starlink](https://github.com/knownsec/404StarLink)
 
 ## TCH Top-Ranked Intelligent Pentest Project  
 <div align="left">
   <a href="https://zc.tencent.com/competition/competitionHackathon?code=cha004" target="_blank">
-    <img src="./img/tch.png" alt="TCH Top-Ranked Intelligent Pentest Project" width="30%">
+    <img src="./images/tch.png" alt="TCH Top-Ranked Intelligent Pentest Project" width="30%">
   </a>
 </div>
 

README_CN.md

@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="web/static/logo.png" alt="CyberStrikeAI Logo" width="300">
+  <img src="web/static/logo.png" alt="CyberStrikeAI Logo" width="200">
 </div>
 
 # CyberStrikeAI
@@ -17,43 +17,45 @@ CyberStrikeAI 是一款 **AI 原生安全测试平台**，基于 Go 构建，集
 
 <table>
 <tr>
-<td width="50%" align="center">
+<td width="33.33%" align="center">
 <strong>Web 控制台</strong><br/>
-<img src="./img/效果.png" alt="Web 控制台" width="100%">
+<img src="./images/web-console.png" alt="Web 控制台" width="100%">
 </td>
-<td width="50%" align="center">
-<strong>MCP 集成</strong><br/>
-<img src="./img/MCP管理.png" alt="MCP 管理" width="100%">
-</td>
-</tr>
-<tr>
-<td width="50%" align="center">
+<td width="33.33%" align="center">
 <strong>攻击链可视化</strong><br/>
-<img src="./img/攻击链.png" alt="攻击链" width="100%">
+<img src="./images/attack-chain.png" alt="攻击链" width="100%">
 </td>
-<td width="50%" align="center">
-<strong>漏洞管理</strong><br/>
-<img src="./img/漏洞管理.png" alt="漏洞管理" width="100%">
-</td>
-</tr>
-<tr>
-<td width="50%" align="center">
+<td width="33.33%" align="center">
 <strong>任务管理</strong><br/>
-<img src="./img/任务.png" alt="任务管理" width="100%">
-</td>
-<td width="50%" align="center">
-<strong>角色管理</strong><br/>
-<img src="./img/角色管理.png" alt="角色管理" width="100%">
+<img src="./images/task-management.png" alt="任务管理" width="100%">
 </td>
 </tr>
 <tr>
-<td width="50%" align="center">
-<strong>Skills 管理</strong><br/>
-<img src="./img/skills.png" alt="Skills 管理" width="100%">
+<td width="33.33%" align="center">
+<strong>漏洞管理</strong><br/>
+<img src="./images/vulnerability-management.png" alt="漏洞管理" width="100%">
 </td>
-<td width="50%" align="center">
+<td width="33.33%" align="center">
+<strong>MCP 管理</strong><br/>
+<img src="./images/mcp-management.png" alt="MCP 管理" width="100%">
+</td>
+<td width="33.33%" align="center">
 <strong>MCP stdio 模式</strong><br/>
-<img src="./img/mcp-stdio2.png" alt="MCP stdio 模式" width="100%">
+<img src="./images/mcp-stdio2.png" alt="MCP stdio 模式" width="100%">
+</td>
+</tr>
+<tr>
+<td width="33.33%" align="center">
+<strong>知识库</strong><br/>
+<img src="./images/knowledge-base.png" alt="知识库" width="100%">
+</td>
+<td width="33.33%" align="center">
+<strong>Skills 管理</strong><br/>
+<img src="./images/skills.png" alt="Skills 管理" width="100%">
+</td>
+<td width="33.33%" align="center">
+<strong>角色管理</strong><br/>
+<img src="./images/role-management.png" alt="角色管理" width="100%">
 </td>
 </tr>
 </table>
@@ -461,7 +463,7 @@ CyberStrikeAI/
 ├── tools/               # YAML 工具目录（含 100+ 示例）
 ├── roles/               # 角色配置文件目录（含 12+ 预设安全测试角色）
 ├── skills/              # Skills 目录（含 20+ 预设安全测试技能）
-├── img/                 # 文档配图
+├── images/              # 文档配图
 ├── config.yaml          # 运行配置
 ├── run.sh               # 启动脚本
 └── README*.md
@@ -488,10 +490,9 @@ CyberStrikeAI/
 
 ## 更新日志
 
-详细版本历史和所有变更请查看 [CHANGELOG.md](CHANGELOG.md)。
-
 ### 近期亮点
 
+- **2026-01-27** – 新增 OpenAPI 文档，提供交互式测试界面，支持对话管理、消息交互和结果查询
 - **2026-01-15** – 新增 Skills 技能系统，内置 20+ 预设安全测试技能
 - **2026-01-11** – 新增角色化测试功能，支持预设安全测试角色
 - **2026-01-08** – 新增 SSE 传输模式支持，外部 MCP 联邦支持三种模式
@@ -501,14 +502,14 @@ CyberStrikeAI/
 
 
 ## 404星链计划 
-<img src="./img/404StarLinkLogo.png" width="30%">
+<img src="./images/404StarLinkLogo.png" width="30%">
 
 CyberStrikeAI 现已加入 [404星链计划](https://github.com/knownsec/404StarLink)
 
 ## TCH Top-Ranked Intelligent Pentest Project  
 <div align="left">
   <a href="https://zc.tencent.com/competition/competitionHackathon?code=cha004" target="_blank">
-    <img src="./img/tch.png" alt="TCH Top-Ranked Intelligent Pentest Project" width="30%">
+    <img src="./images/tch.png" alt="TCH Top-Ranked Intelligent Pentest Project" width="30%">
   </a>
 </div>
 

internal/agent/agent.go

@@ -391,6 +391,17 @@ func (a *Agent) AgentLoopWithProgress(ctx context.Context, userInput string, his
 - 将低影响问题串联成高影响攻击路径
 - 牢记：单个高影响漏洞比几十个低严重度更有价值。
 
+思考与推理要求：
+调用工具前，在消息内容中提供5-10句话（50-150字）的思考，包含：
+1. 当前测试目标和工具选择原因
+2. 基于之前结果的上下文关联
+3. 期望获得的测试结果
+
+要求：
+- ✅ 2-4句话清晰表达
+- ✅ 包含关键决策依据
+- ❌ 不要只写一句话
+- ❌ 不要超过10句话
 
 重要：当工具调用失败时，请遵循以下原则：
 1. 仔细分析错误信息，理解失败的具体原因

internal/app/app.go

@@ -309,7 +309,6 @@ func New(cfg *config.Config, log *logger.Logger) (*App, error) {
 	}
 	monitorHandler := handler.NewMonitorHandler(mcpServer, executor, db, log.Logger)
 	monitorHandler.SetExternalMCPManager(externalMCPMgr) // 设置外部MCP管理器，以便获取外部MCP执行记录
-	conversationHandler := handler.NewConversationHandler(db, log.Logger)
 	groupHandler := handler.NewGroupHandler(db, log.Logger)
 	authHandler := handler.NewAuthHandler(authManager, cfg, configPath, log.Logger)
 	attackChainHandler := handler.NewAttackChainHandler(db, &cfg.OpenAI, log.Logger)
@@ -323,6 +322,10 @@ func New(cfg *config.Config, log *logger.Logger) (*App, error) {
 		skillsHandler.SetDB(db) // 设置数据库连接以便获取调用统计
 	}
 
+	// 创建OpenAPI处理器
+	conversationHandler := handler.NewConversationHandler(db, log.Logger)
+	openAPIHandler := handler.NewOpenAPIHandler(db, log.Logger, resultStorage, conversationHandler, agentHandler)
+
 	// 创建 App 实例（部分字段稍后填充）
 	app := &App{
 		config:             cfg,
@@ -414,6 +417,7 @@ func New(cfg *config.Config, log *logger.Logger) (*App, error) {
 		skillsHandler,
 		mcpServer,
 		authManager,
+		openAPIHandler,
 	)
 
 	return app, nil
@@ -476,6 +480,7 @@ func setupRoutes(
 	skillsHandler *handler.SkillsHandler,
 	mcpServer *mcp.Server,
 	authManager *security.AuthManager,
+	openAPIHandler *handler.OpenAPIHandler,
 ) {
 	// API路由
 	api := router.Group("/api")
@@ -722,8 +727,19 @@ func setupRoutes(
 		protected.POST("/mcp", func(c *gin.Context) {
 			mcpServer.HandleHTTP(c.Writer, c.Request)
 		})
+
+		// OpenAPI结果聚合端点（可选，用于获取对话的完整结果）
+		protected.GET("/conversations/:id/results", openAPIHandler.GetConversationResults)
 	}
 
+	// OpenAPI规范（需要认证，避免暴露API结构信息）
+	protected.GET("/openapi/spec", openAPIHandler.GetOpenAPISpec)
+
+	// API文档页面（公开访问，但需要登录后才能使用API）
+	router.GET("/api-docs", func(c *gin.Context) {
+		c.HTML(http.StatusOK, "api-docs.html", nil)
+	})
+
 	// 静态文件
 	router.Static("/static", "./web/static")
 	router.LoadHTMLGlob("web/templates/*")

internal/database/conversation.go

@@ -223,12 +223,30 @@ func (db *DB) UpdateConversationTime(id string) error {
 	return nil
 }
 
-// DeleteConversation 删除对话
+// DeleteConversation 删除对话及其所有相关数据
+// 由于数据库外键约束设置了 ON DELETE CASCADE，删除对话时会自动删除：
+// - messages（消息）
+// - process_details（过程详情）
+// - attack_chain_nodes（攻击链节点）
+// - attack_chain_edges（攻击链边）
+// - vulnerabilities（漏洞）
+// - conversation_group_mappings（分组映射）
+// 注意：knowledge_retrieval_logs 使用 ON DELETE SET NULL，记录会保留但 conversation_id 会被设为 NULL
 func (db *DB) DeleteConversation(id string) error {
-	_, err := db.Exec("DELETE FROM conversations WHERE id = ?", id)
+	// 显式删除知识检索日志（虽然外键是SET NULL，但为了彻底清理，我们手动删除）
+	_, err := db.Exec("DELETE FROM knowledge_retrieval_logs WHERE conversation_id = ?", id)
+	if err != nil {
+		db.logger.Warn("删除知识检索日志失败", zap.String("conversationId", id), zap.Error(err))
+		// 不返回错误，继续删除对话
+	}
+
+	// 删除对话（外键CASCADE会自动删除其他相关数据）
+	_, err = db.Exec("DELETE FROM conversations WHERE id = ?", id)
 	if err != nil {
 		return fmt.Errorf("删除对话失败: %w", err)
 	}
+
+	db.logger.Info("对话及其所有相关数据已删除", zap.String("conversationId", id))
 	return nil
 }
 

internal/handler/agent.go

@@ -147,6 +147,14 @@ func (h *AgentHandler) AgentLoop(c *gin.Context) {
 			return
 		}
 		conversationID = conv.ID
+	} else {
+		// 验证对话是否存在
+		_, err := h.db.GetConversation(conversationID)
+		if err != nil {
+			h.logger.Error("对话不存在", zap.String("conversationId", conversationID), zap.Error(err))
+			c.JSON(http.StatusNotFound, gin.H{"error": "对话不存在"})
+			return
+		}
 	}
 
 	// 优先尝试从保存的ReAct数据恢复历史上下文
@@ -203,6 +211,8 @@ func (h *AgentHandler) AgentLoop(c *gin.Context) {
 	_, err = h.db.AddMessage(conversationID, "user", req.Message, nil)
 	if err != nil {
 		h.logger.Error("保存用户消息失败", zap.Error(err))
+		c.JSON(http.StatusInternalServerError, gin.H{"error": "保存用户消息失败: " + err.Error()})
+		return
 	}
 
 	// 执行Agent Loop，传入历史消息和对话ID（使用包含角色提示词的finalMessage和角色工具列表）
@@ -228,6 +238,8 @@ func (h *AgentHandler) AgentLoop(c *gin.Context) {
 	_, err = h.db.AddMessage(conversationID, "assistant", result.Response, result.MCPExecutionIDs)
 	if err != nil {
 		h.logger.Error("保存助手消息失败", zap.Error(err))
+		// 即使保存失败，也返回响应，但记录错误
+		// 因为AI已经生成了回复，用户应该能看到
 	}
 
 	// 保存最后一轮ReAct的输入和输出
@@ -479,12 +491,19 @@ func (h *AgentHandler) AgentLoopStream(c *gin.Context) {
 			return
 		}
 		conversationID = conv.ID
+		sendEvent("conversation", "会话已创建", map[string]interface{}{
+			"conversationId": conversationID,
+		})
+	} else {
+		// 验证对话是否存在
+		_, err := h.db.GetConversation(conversationID)
+		if err != nil {
+			h.logger.Error("对话不存在", zap.String("conversationId", conversationID), zap.Error(err))
+			sendEvent("error", "对话不存在", nil)
+			return
+		}
 	}
 
-	sendEvent("conversation", "会话已创建", map[string]interface{}{
-		"conversationId": conversationID,
-	})
-
 	// 优先尝试从保存的ReAct数据恢复历史上下文
 	agentHistoryMessages, err := h.loadHistoryFromReActData(conversationID)
 	if err != nil {

requirements.txt

@@ -5,7 +5,7 @@ charset-normalizer>=3.3.2
 chardet>=5.2.0
 
 # Python exploitation / analysis frameworks referenced by tool recipes
-angr>=9.2.96
+# angr>=9.2.96
 # pwntools>=4.12.0
 arjun>=2.2.0
 uro>=1.0.2

run.sh

@@ -11,6 +11,7 @@ RED='\033[0;31m'
 GREEN='\033[0;32m'
 YELLOW='\033[1;33m'
 BLUE='\033[0;34m'
+CYAN='\033[0;36m'
 NC='\033[0m' # No Color
 
 # 打印带颜色的消息
@@ -18,6 +19,47 @@ info() { echo -e "${BLUE}ℹ️  $1${NC}"; }
 success() { echo -e "${GREEN}✅ $1${NC}"; }
 warning() { echo -e "${YELLOW}⚠️  $1${NC}"; }
 error() { echo -e "${RED}❌ $1${NC}"; }
+note() { echo -e "${CYAN}ℹ️  $1${NC}"; }
+
+# 临时源配置（仅在此脚本中生效）
+PIP_INDEX_URL="${PIP_INDEX_URL:-https://pypi.tuna.tsinghua.edu.cn/simple}"
+GOPROXY="${GOPROXY:-https://goproxy.cn,direct}"
+
+# 保存原始环境变量（用于恢复）
+ORIGINAL_PIP_INDEX_URL="${PIP_INDEX_URL:-}"
+ORIGINAL_GOPROXY="${GOPROXY:-}"
+
+# 进度显示函数
+show_progress() {
+    local pid=$1
+    local message=$2
+    local i=0
+    local dots=""
+    
+    # 检查进程是否存在
+    if ! kill -0 "$pid" 2>/dev/null; then
+        # 进程已经结束，立即返回
+        return 0
+    fi
+    
+    while kill -0 "$pid" 2>/dev/null; do
+        i=$((i + 1))
+        case $((i % 4)) in
+            0) dots="." ;;
+            1) dots=".." ;;
+            2) dots="..." ;;
+            3) dots="...." ;;
+        esac
+        printf "\r${BLUE}⏳ %s%s${NC}" "$message" "$dots"
+        sleep 0.5
+        
+        # 再次检查进程是否还存在
+        if ! kill -0 "$pid" 2>/dev/null; then
+            break
+        fi
+    done
+    printf "\r"
+}
 
 echo ""
 echo "=========================================="
@@ -25,6 +67,19 @@ echo "  CyberStrikeAI 一键部署启动脚本"
 echo "=========================================="
 echo ""
 
+# 显示临时源配置信息
+echo ""
+warning "⚠️  注意：此脚本将使用临时镜像源加速下载"
+echo ""
+info "Python pip 临时镜像源:"
+echo "  ${PIP_INDEX_URL}"
+info "Go Proxy 临时镜像源:"
+echo "  ${GOPROXY}"
+echo ""
+note "这些设置仅在脚本运行期间生效，不会修改系统配置"
+echo ""
+sleep 1
+
 CONFIG_FILE="$ROOT_DIR/config.yaml"
 VENV_DIR="$ROOT_DIR/venv"
 REQUIREMENTS_FILE="$ROOT_DIR/requirements.txt"
@@ -101,12 +156,55 @@ setup_python_env() {
     source "$VENV_DIR/bin/activate"
     
     if [ -f "$REQUIREMENTS_FILE" ]; then
-        info "安装/更新 Python 依赖..."
-        pip install --quiet --upgrade pip >/dev/null 2>&1 || true
+        echo ""
+        note "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+        note "⚠️  使用临时 pip 镜像源（仅本次脚本运行有效）"
+        note "   镜像地址: ${PIP_INDEX_URL}"
+        note "   如需永久配置，请设置环境变量 PIP_INDEX_URL"
+        note "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+        echo ""
         
-        # 尝试安装依赖，捕获错误输出
+        info "升级 pip..."
+        pip install --index-url "$PIP_INDEX_URL" --upgrade pip >/dev/null 2>&1 || true
+        
+        info "安装 Python 依赖包..."
+        echo ""
+        
+        # 尝试安装依赖，捕获错误输出并显示进度
         PIP_LOG=$(mktemp)
-        if pip install -r "$REQUIREMENTS_FILE" >"$PIP_LOG" 2>&1; then
+        (
+            set +e  # 在子shell中禁用错误退出
+            pip install --index-url "$PIP_INDEX_URL" -r "$REQUIREMENTS_FILE" >"$PIP_LOG" 2>&1
+            echo $? > "${PIP_LOG}.exit"
+        ) &
+        PIP_PID=$!
+        
+        # 等待一小段时间，确保进程启动
+        sleep 0.1
+        
+        # 显示进度（如果进程还在运行）
+        if kill -0 "$PIP_PID" 2>/dev/null; then
+            show_progress "$PIP_PID" "正在安装依赖包"
+        else
+            # 进程已经结束，等待一下确保退出码文件已写入
+            sleep 0.2
+        fi
+        
+        # 等待进程完成，忽略 wait 的退出码
+        wait "$PIP_PID" 2>/dev/null || true
+        
+        PIP_EXIT_CODE=0
+        if [ -f "${PIP_LOG}.exit" ]; then
+            PIP_EXIT_CODE=$(cat "${PIP_LOG}.exit" 2>/dev/null || echo "1")
+            rm -f "${PIP_LOG}.exit" 2>/dev/null || true
+        else
+            # 如果没有退出码文件，检查日志中是否有错误
+            if [ -f "$PIP_LOG" ] && grep -q -i "error\|failed\|exception" "$PIP_LOG" 2>/dev/null; then
+                PIP_EXIT_CODE=1
+            fi
+        fi
+        
+        if [ $PIP_EXIT_CODE -eq 0 ]; then
             success "Python 依赖安装完成"
         else
             # 检查是否是 angr 安装失败（需要 Rust）
@@ -138,17 +236,102 @@ setup_python_env() {
 
 # 构建 Go 项目
 build_go_project() {
+    echo ""
+    note "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+    note "⚠️  使用临时 Go Proxy（仅本次脚本运行有效）"
+    note "   Proxy 地址: ${GOPROXY}"
+    note "   如需永久配置，请设置环境变量 GOPROXY"
+    note "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+    echo ""
+    
     info "下载 Go 依赖..."
-    go mod download >/dev/null 2>&1 || {
+    GO_DOWNLOAD_LOG=$(mktemp)
+    (
+        set +e  # 在子shell中禁用错误退出
+        export GOPROXY="$GOPROXY"
+        go mod download >"$GO_DOWNLOAD_LOG" 2>&1
+        echo $? > "${GO_DOWNLOAD_LOG}.exit"
+    ) &
+    GO_DOWNLOAD_PID=$!
+    
+    # 等待一小段时间，确保进程启动
+    sleep 0.1
+    
+    # 显示进度（如果进程还在运行）
+    if kill -0 "$GO_DOWNLOAD_PID" 2>/dev/null; then
+        show_progress "$GO_DOWNLOAD_PID" "正在下载 Go 依赖"
+    else
+        # 进程已经结束，等待一下确保退出码文件已写入
+        sleep 0.2
+    fi
+    
+    # 等待进程完成，忽略 wait 的退出码
+    wait "$GO_DOWNLOAD_PID" 2>/dev/null || true
+    
+    GO_DOWNLOAD_EXIT_CODE=0
+    if [ -f "${GO_DOWNLOAD_LOG}.exit" ]; then
+        GO_DOWNLOAD_EXIT_CODE=$(cat "${GO_DOWNLOAD_LOG}.exit" 2>/dev/null || echo "1")
+        rm -f "${GO_DOWNLOAD_LOG}.exit" 2>/dev/null || true
+    else
+        # 如果没有退出码文件，检查日志中是否有错误
+        if [ -f "$GO_DOWNLOAD_LOG" ] && grep -q -i "error\|failed" "$GO_DOWNLOAD_LOG" 2>/dev/null; then
+            GO_DOWNLOAD_EXIT_CODE=1
+        fi
+    fi
+    rm -f "$GO_DOWNLOAD_LOG" 2>/dev/null || true
+    
+    if [ $GO_DOWNLOAD_EXIT_CODE -ne 0 ]; then
         error "Go 依赖下载失败"
         exit 1
-    }
+    fi
+    success "Go 依赖下载完成"
     
     info "构建项目..."
-    if go build -o "$BINARY_NAME" cmd/server/main.go 2>&1; then
+    GO_BUILD_LOG=$(mktemp)
+    (
+        set +e  # 在子shell中禁用错误退出
+        export GOPROXY="$GOPROXY"
+        go build -o "$BINARY_NAME" cmd/server/main.go >"$GO_BUILD_LOG" 2>&1
+        echo $? > "${GO_BUILD_LOG}.exit"
+    ) &
+    GO_BUILD_PID=$!
+    
+    # 等待一小段时间，确保进程启动
+    sleep 0.1
+    
+    # 显示进度（如果进程还在运行）
+    if kill -0 "$GO_BUILD_PID" 2>/dev/null; then
+        show_progress "$GO_BUILD_PID" "正在构建项目"
+    else
+        # 进程已经结束，等待一下确保退出码文件已写入
+        sleep 0.2
+    fi
+    
+    # 等待进程完成，忽略 wait 的退出码
+    wait "$GO_BUILD_PID" 2>/dev/null || true
+    
+    GO_BUILD_EXIT_CODE=0
+    if [ -f "${GO_BUILD_LOG}.exit" ]; then
+        GO_BUILD_EXIT_CODE=$(cat "${GO_BUILD_LOG}.exit" 2>/dev/null || echo "1")
+        rm -f "${GO_BUILD_LOG}.exit" 2>/dev/null || true
+    else
+        # 如果没有退出码文件，检查日志中是否有错误
+        if [ -f "$GO_BUILD_LOG" ] && grep -q -i "error\|failed" "$GO_BUILD_LOG" 2>/dev/null; then
+            GO_BUILD_EXIT_CODE=1
+        fi
+    fi
+    
+    if [ $GO_BUILD_EXIT_CODE -eq 0 ]; then
         success "项目构建完成: $BINARY_NAME"
+        rm -f "$GO_BUILD_LOG"
     else
         error "项目构建失败"
+        # 显示构建错误
+        echo ""
+        info "构建错误详情："
+        cat "$GO_BUILD_LOG" | sed 's/^/  /'
+        echo ""
+        rm -f "$GO_BUILD_LOG"
         exit 1
     fi
 }

web/static/css/style.css

@@ -538,6 +538,28 @@ header {
     transform: translateY(-1px);
 }
 
+.openapi-doc-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    border-radius: 6px;
+    border: 1px solid var(--border-color);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    cursor: pointer;
+    font-size: 0.8125rem;
+    font-weight: 400;
+    transition: all 0.2s ease;
+}
+
+.openapi-doc-btn:hover {
+    background: var(--bg-tertiary);
+    border-color: var(--accent-color);
+    color: var(--accent-color);
+    transform: translateY(-1px);
+}
+
 .monitor-btn {
     color: var(--accent-color);
     border-color: var(--border-color);
@@ -1619,35 +1641,76 @@ header {
 .chat-input-container .send-btn {
     display: flex;
     align-items: center;
+    justify-content: center;
     gap: 6px;
-    padding: 10px 18px;
+    padding: 10px 20px;
     height: 40px;
-    background: var(--accent-color);
+    background: linear-gradient(135deg, var(--accent-color) 0%, #0052cc 100%);
     color: white;
     border: none;
     border-radius: 12px;
     cursor: pointer;
     font-size: 0.9375rem;
-    font-weight: 500;
-    transition: all 0.2s;
+    font-weight: 600;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     white-space: nowrap;
     flex-shrink: 0;
     box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+/* 按钮光效动画 */
+.chat-input-container .send-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s;
+}
+
+.chat-input-container .send-btn:hover::before {
+    left: 100%;
 }
 
 .chat-input-container .send-btn:hover {
-    background: var(--accent-hover);
-    transform: translateY(-1px);
-    box-shadow: 0 2px 8px rgba(0, 102, 255, 0.25);
+    background: linear-gradient(135deg, #0052cc 0%, var(--accent-color) 100%);
+    transform: translateY(-2px) scale(1.02);
+    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
 }
 
 .chat-input-container .send-btn:active {
-    transform: translateY(0);
-    box-shadow: 0 1px 4px rgba(0, 102, 255, 0.2);
+    transform: translateY(0) scale(0.98);
+    box-shadow: 0 2px 6px rgba(0, 102, 255, 0.25), 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: all 0.1s;
+}
+
+.chat-input-container .send-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none;
 }
 
 .chat-input-container .send-btn svg {
     flex-shrink: 0;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.chat-input-container .send-btn:hover svg {
+    transform: translateX(2px);
+}
+
+.chat-input-container .send-btn:active svg {
+    transform: translateX(4px);
+}
+
+.chat-input-container .send-btn span {
+    position: relative;
+    z-index: 1;
 }
 
 .mention-suggestions {
@@ -3273,7 +3336,12 @@ header {
 }
 
 .pagination-container {
-    margin-top: 10px;
+    margin-top: 0;
+}
+
+/* 漏洞管理页面的分页栏间距优化 */
+#vulnerability-pagination.pagination-fixed {
+    margin-top: 12px;
 }
 
 /* Skills管理页面分页优化 */
@@ -3310,6 +3378,9 @@ header {
     /* 确保底部左右角都是圆角 */
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
+    /* 添加边框和阴影，使圆角更明显 */
+    border: 1px solid var(--border-color);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 
 .pagination-fixed .pagination {
@@ -3331,6 +3402,8 @@ header {
     /* 确保底部左右角都是圆角 */
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
+    /* 移除顶部边框，因为外层容器已有边框 */
+    border-top: none;
 }
 
 /* 左侧：信息显示和每页数量选择器 - 更自然的设计 */
@@ -3363,7 +3436,7 @@ header {
 }
 
 .pagination-fixed .pagination-info .pagination-page-size select {
-    padding: 4px 8px;
+    padding: 4px 24px 4px 8px;
     border-radius: 6px;
     border: 1px solid var(--border-color);
     background: var(--bg-primary);
@@ -3371,12 +3444,25 @@ header {
     font-size: 0.8125rem;
     cursor: pointer;
     transition: all 0.2s ease;
+    width: auto;
     min-width: 60px;
+    max-width: 80px;
     font-weight: 500;
     /* 更柔和的边框 */
     border-color: rgba(233, 236, 239, 0.8);
     /* 确保四个角都是圆角 */
     border-radius: 8px !important;
+    /* 确保下拉框不被拉伸 */
+    flex-shrink: 0;
+    box-sizing: border-box;
+    /* 确保下拉箭头正确显示 */
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    background-size: 12px;
 }
 
 .pagination-fixed .pagination-info .pagination-page-size select:focus {
@@ -3440,7 +3526,7 @@ header {
     white-space: nowrap;
     font-weight: 400;
     /* 添加圆角设计，四个角都是圆的 */
-    border-radius: 6px !important;
+    border-radius: 8px !important;
     background: var(--bg-secondary) !important;
     border: 1px solid var(--border-color) !important;
     display: inline-flex !important;
@@ -6668,21 +6754,146 @@ header {
 
 .group-icon-input {
     position: absolute;
-    left: 16px;
+    left: 8px;
     top: 50%;
     transform: translateY(-50%);
-    width: auto;
-    height: auto;
+    width: 28px;
+    height: 28px;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: none;
-    border-radius: 0;
+    background: #f5f5f5;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
     font-size: 1rem;
-    pointer-events: none;
-    z-index: 1;
+    cursor: pointer;
+    z-index: 2;
     box-shadow: none;
     line-height: 1;
+    transition: all 0.2s ease;
+}
+
+.group-icon-input:hover {
+    background: #e8e8e8;
+    border-color: #d0d0d0;
+    transform: translateY(-50%) scale(1.05);
+}
+
+.group-icon-input:active {
+    transform: translateY(-50%) scale(0.98);
+    background: #ddd;
+}
+
+/* 图标选择器面板 */
+.group-icon-picker {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 0;
+    width: 280px;
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    z-index: 100;
+    overflow: hidden;
+}
+
+.icon-picker-header {
+    padding: 10px 14px;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: #666;
+    background: #fafafa;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.icon-picker-header > span {
+    flex-shrink: 0;
+}
+
+.icon-picker-custom {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.custom-icon-input {
+    width: 60px;
+    padding: 4px 8px;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    text-align: center;
+    background: #ffffff;
+    transition: all 0.2s ease;
+}
+
+.custom-icon-input:focus {
+    outline: none;
+    border-color: #667eea;
+    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
+}
+
+.custom-icon-input::placeholder {
+    color: #bbb;
+    font-size: 0.75rem;
+}
+
+.custom-icon-btn {
+    padding: 4px 10px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: #fff;
+    background: #667eea;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+}
+
+.custom-icon-btn:hover {
+    background: #5a6fd6;
+}
+
+.custom-icon-btn:active {
+    transform: scale(0.96);
+}
+
+.icon-picker-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 4px;
+    padding: 12px;
+    max-height: 180px;
+    overflow-y: auto;
+}
+
+.icon-option {
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25rem;
+    cursor: pointer;
+    border-radius: 8px;
+    transition: all 0.15s ease;
+    user-select: none;
+}
+
+.icon-option:hover {
+    background: #f0f0f0;
+    transform: scale(1.15);
+}
+
+.icon-option:active {
+    transform: scale(1);
+    background: #e0e0e0;
 }
 
 #create-group-name-input {
@@ -7741,6 +7952,7 @@ header {
     display: flex;
     flex-direction: column;
     gap: 16px;
+    margin-bottom: 0;
 }
 
 .vulnerability-card {
@@ -8600,6 +8812,159 @@ header {
     gap: 12px;
 }
 
+/* 角色搜索框样式 */
+.roles-search-box {
+    position: relative;
+    margin-bottom: 20px;
+}
+
+.roles-search-box input {
+    width: 100%;
+    padding: 10px 40px 10px 16px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 0.9375rem;
+    transition: all 0.2s;
+}
+
+.roles-search-box input:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
+}
+
+.roles-search-clear {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-secondary);
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s;
+}
+
+.roles-search-clear:hover {
+    color: var(--text-primary);
+}
+
+/* 角色卡片网格布局 */
+.roles-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+    padding: 0;
+}
+
+/* 角色卡片样式 */
+.role-card {
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    transition: all 0.2s;
+    cursor: default;
+}
+
+.role-card:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    border-color: var(--accent-color);
+    transform: translateY(-2px);
+}
+
+.role-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 12px;
+}
+
+.role-card-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0;
+    flex: 1;
+    line-height: 1.4;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.role-card-icon {
+    font-size: 1.25rem;
+    line-height: 1;
+    flex-shrink: 0;
+}
+
+.role-card-badge {
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.role-card-badge.enabled {
+    background: rgba(40, 167, 69, 0.12);
+    color: var(--success-color);
+}
+
+.role-card-badge.disabled {
+    background: rgba(220, 53, 69, 0.12);
+    color: var(--error-color);
+}
+
+.role-card-description {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+    flex: 1;
+    min-height: 40px;
+}
+
+.role-card-tools {
+    display: flex;
+    gap: 8px;
+    font-size: 0.8125rem;
+    color: var(--text-secondary);
+    padding-top: 8px;
+    border-top: 1px solid var(--border-color);
+}
+
+.role-card-tools-label {
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.role-card-tools-value {
+    color: var(--text-primary);
+    flex: 1;
+    word-break: break-word;
+}
+
+.role-card-actions {
+    display: flex;
+    gap: 8px;
+    margin-top: 4px;
+}
+
+.btn-small {
+    padding: 6px 12px;
+    font-size: 0.8125rem;
+}
+
 .role-item {
     display: flex;
     justify-content: space-between;
@@ -9251,7 +9616,7 @@ header {
 
 /* Skills管理页面样式 */
 .skills-controls {
-    margin-bottom: 16px;
+    margin-bottom: 8px;
 }
 
 .skills-stats-bar {
@@ -9305,6 +9670,136 @@ header {
     margin-bottom: 16px;
 }
 
+/* 技能搜索框样式 */
+.skills-search-box {
+    position: relative;
+    margin-bottom: 12px;
+}
+
+.skills-search-box input {
+    width: 100%;
+    padding: 8px 40px 8px 16px;
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    font-size: 0.9375rem;
+    transition: all 0.2s;
+}
+
+.skills-search-box input:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
+}
+
+.skills-search-clear {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-secondary);
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s;
+}
+
+.skills-search-clear:hover {
+    color: var(--text-primary);
+}
+
+/* 技能列表布局 */
+.skills-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 0;
+    /* 确保列表可以滚动，不会把分页栏推出视口 */
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    min-height: 0;
+}
+
+/* 技能列表项样式 */
+.skill-card {
+    background: var(--bg-primary);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16px;
+    transition: all 0.2s;
+    cursor: default;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+.skill-card:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    border-color: var(--accent-color);
+    transform: translateY(-2px);
+}
+
+.skill-card-header {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 8px;
+    min-width: 0;
+}
+
+.skill-card-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin: 0;
+    line-height: 1.4;
+    word-break: break-word;
+    overflow-wrap: break-word;
+}
+
+.skill-card-description {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    line-height: 1.6;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    margin: 0;
+}
+
+.skill-card-actions {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+}
+
+/* 技能列表响应式布局优化 */
+@media (max-width: 768px) {
+    .skill-card {
+        padding: 14px;
+        gap: 12px;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    
+    .skill-card-header {
+        width: 100%;
+    }
+    
+    .skill-card-actions {
+        width: 100%;
+        justify-content: flex-start;
+    }
+}
+
 .skill-item {
     background: var(--bg-primary);
     border: 1px solid var(--border-color);

web/static/js/api-docs.js

@@ -0,0 +1,944 @@
+// API文档页面JavaScript
+
+let apiSpec = null;
+let currentToken = null;
+
+// 初始化
+document.addEventListener('DOMContentLoaded', async () => {
+    await loadToken();
+    await loadAPISpec();
+    if (apiSpec) {
+        renderAPIDocs();
+    }
+});
+
+// 加载token
+async function loadToken() {
+    try {
+        const authData = localStorage.getItem('cyberstrike-auth');
+        if (authData) {
+            const parsed = JSON.parse(authData);
+            if (parsed && parsed.token) {
+                const expiry = parsed.expiresAt ? new Date(parsed.expiresAt) : null;
+                if (!expiry || expiry.getTime() > Date.now()) {
+                    currentToken = parsed.token;
+                    return;
+                }
+            }
+        }
+        currentToken = localStorage.getItem('swagger_auth_token');
+    } catch (e) {
+        console.error('加载token失败:', e);
+    }
+}
+
+// 加载OpenAPI规范
+async function loadAPISpec() {
+    try {
+        let url = '/api/openapi/spec';
+        if (currentToken) {
+            url += '?token=' + encodeURIComponent(currentToken);
+        }
+        
+        const response = await fetch(url);
+        if (!response.ok) {
+            if (response.status === 401) {
+                showError('需要登录才能查看API文档。请先在前端页面登录，然后刷新此页面。');
+                return;
+            }
+            throw new Error('加载API规范失败: ' + response.status);
+        }
+        
+        apiSpec = await response.json();
+    } catch (error) {
+        console.error('加载API规范失败:', error);
+        showError('加载API文档失败: ' + error.message);
+    }
+}
+
+// 显示错误
+function showError(message) {
+    const main = document.getElementById('api-docs-main');
+    main.innerHTML = `
+        <div class="empty-state">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10"/>
+                <line x1="15" y1="9" x2="9" y2="15"/>
+                <line x1="9" y1="9" x2="15" y2="15"/>
+            </svg>
+            <h3>加载失败</h3>
+            <p>${message}</p>
+            <div style="margin-top: 16px;">
+                <a href="/" style="color: var(--accent-color); text-decoration: none;">返回首页登录</a>
+            </div>
+        </div>
+    `;
+}
+
+// 渲染API文档
+function renderAPIDocs() {
+    if (!apiSpec || !apiSpec.paths) {
+        showError('API规范格式错误');
+        return;
+    }
+    
+    // 显示认证说明
+    renderAuthInfo();
+    
+    // 渲染侧边栏分组
+    renderSidebar();
+    
+    // 渲染API端点
+    renderEndpoints();
+}
+
+// 渲染认证说明
+function renderAuthInfo() {
+    const authSection = document.getElementById('auth-info-section');
+    if (!authSection) return;
+    
+    // 显示认证说明部分
+    authSection.style.display = 'block';
+    
+    // 检查是否有token
+    const tokenStatus = document.getElementById('token-status');
+    if (currentToken && tokenStatus) {
+        tokenStatus.style.display = 'block';
+    } else if (tokenStatus) {
+        // 如果没有token，显示提示
+        tokenStatus.style.display = 'block';
+        tokenStatus.style.background = 'rgba(255, 152, 0, 0.1)';
+        tokenStatus.style.borderLeftColor = '#ff9800';
+        tokenStatus.innerHTML = '<p style="margin: 0; font-size: 0.8125rem; color: #ff9800;"><strong>⚠ 未检测到 Token</strong> - 请先在前端页面登录，然后刷新此页面。测试接口时需要在请求头中添加 Authorization: Bearer token</p>';
+    }
+}
+
+// 渲染侧边栏
+function renderSidebar() {
+    const groups = new Set();
+    Object.keys(apiSpec.paths).forEach(path => {
+        Object.keys(apiSpec.paths[path]).forEach(method => {
+            const endpoint = apiSpec.paths[path][method];
+            if (endpoint.tags && endpoint.tags.length > 0) {
+                endpoint.tags.forEach(tag => groups.add(tag));
+            }
+        });
+    });
+    
+    const groupList = document.getElementById('api-group-list');
+    const allGroups = Array.from(groups).sort();
+    
+    allGroups.forEach(group => {
+        const li = document.createElement('li');
+        li.className = 'api-group-item';
+        li.innerHTML = `<a href="#" class="api-group-link" data-group="${group}">${group}</a>`;
+        groupList.appendChild(li);
+    });
+    
+    // 绑定点击事件
+    groupList.querySelectorAll('.api-group-link').forEach(link => {
+        link.addEventListener('click', (e) => {
+            e.preventDefault();
+            groupList.querySelectorAll('.api-group-link').forEach(l => l.classList.remove('active'));
+            link.classList.add('active');
+            const group = link.dataset.group;
+            renderEndpoints(group === 'all' ? null : group);
+        });
+    });
+}
+
+// 渲染API端点
+function renderEndpoints(filterGroup = null) {
+    const main = document.getElementById('api-docs-main');
+    main.innerHTML = '';
+    
+    const endpoints = [];
+    Object.keys(apiSpec.paths).forEach(path => {
+        Object.keys(apiSpec.paths[path]).forEach(method => {
+            const endpoint = apiSpec.paths[path][method];
+            const tags = endpoint.tags || [];
+            if (!filterGroup || filterGroup === 'all' || tags.includes(filterGroup)) {
+                endpoints.push({
+                    path,
+                    method,
+                    ...endpoint
+                });
+            }
+        });
+    });
+    
+    // 按分组排序
+    endpoints.sort((a, b) => {
+        const tagA = a.tags && a.tags.length > 0 ? a.tags[0] : '';
+        const tagB = b.tags && b.tags.length > 0 ? b.tags[0] : '';
+        if (tagA !== tagB) return tagA.localeCompare(tagB);
+        return a.path.localeCompare(b.path);
+    });
+    
+    if (endpoints.length === 0) {
+        main.innerHTML = '<div class="empty-state"><h3>暂无API</h3><p>该分组下没有API端点</p></div>';
+        return;
+    }
+    
+    endpoints.forEach(endpoint => {
+        main.appendChild(createEndpointCard(endpoint));
+    });
+}
+
+// 创建API端点卡片
+function createEndpointCard(endpoint) {
+    const card = document.createElement('div');
+    card.className = 'api-endpoint';
+    
+    const methodClass = endpoint.method.toLowerCase();
+    const tags = endpoint.tags || [];
+    const tagHtml = tags.map(tag => `<span class="api-tag">${tag}</span>`).join('');
+    
+    card.innerHTML = `
+        <div class="api-endpoint-header">
+            <div class="api-endpoint-title">
+                <span class="api-method ${methodClass}">${endpoint.method.toUpperCase()}</span>
+                <span class="api-path">${endpoint.path}</span>
+                ${tagHtml}
+            </div>
+        </div>
+        <div class="api-endpoint-body">
+            <div class="api-section">
+                <div class="api-section-title">描述</div>
+                ${endpoint.summary ? `<div class="api-description" style="font-weight: 500; margin-bottom: 8px; color: var(--text-primary);">${escapeHtml(endpoint.summary)}</div>` : ''}
+                ${endpoint.description ? `
+                    <div class="api-description-toggle">
+                        <button class="description-toggle-btn" onclick="toggleDescription(this)">
+                            <svg class="description-toggle-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polyline points="6 9 12 15 18 9"/>
+                            </svg>
+                            <span>查看详细说明</span>
+                        </button>
+                        <div class="api-description-detail" style="display: none;">
+                            ${formatDescription(endpoint.description)}
+                        </div>
+                    </div>
+                ` : endpoint.summary ? '' : '<div class="api-description">无描述</div>'}
+            </div>
+            
+            ${renderParameters(endpoint)}
+            ${renderRequestBody(endpoint)}
+            ${renderResponses(endpoint)}
+            ${renderTestSection(endpoint)}
+        </div>
+    `;
+    
+    return card;
+}
+
+// 渲染参数
+function renderParameters(endpoint) {
+    const params = endpoint.parameters || [];
+    if (params.length === 0) return '';
+    
+    const rows = params.map(param => {
+            const required = param.required ? '<span class="api-param-required">必需</span>' : '<span class="api-param-optional">可选</span>';
+        // 处理描述文本，将换行符转换为<br>
+        let descriptionHtml = '-';
+        if (param.description) {
+            const escapedDesc = escapeHtml(param.description);
+            descriptionHtml = escapedDesc.replace(/\n/g, '<br>');
+        }
+        
+        return `
+            <tr>
+                <td><span class="api-param-name">${param.name}</span></td>
+                <td><span class="api-param-type">${param.schema?.type || 'string'}</span></td>
+                <td>${descriptionHtml}</td>
+                <td>${required}</td>
+            </tr>
+        `;
+    }).join('');
+    
+    return `
+        <div class="api-section">
+            <div class="api-section-title">参数</div>
+            <div class="api-table-wrapper">
+                <table class="api-params-table">
+                    <thead>
+                        <tr>
+                            <th>参数名</th>
+                            <th>类型</th>
+                            <th>描述</th>
+                            <th>必需</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        ${rows}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    `;
+}
+
+// 渲染请求体
+function renderRequestBody(endpoint) {
+    if (!endpoint.requestBody) return '';
+    
+    const content = endpoint.requestBody.content || {};
+    let schema = content['application/json']?.schema || {};
+    
+    // 处理 $ref 引用
+    if (schema.$ref) {
+        const refPath = schema.$ref.split('/');
+        const refName = refPath[refPath.length - 1];
+        if (apiSpec.components && apiSpec.components.schemas && apiSpec.components.schemas[refName]) {
+            schema = apiSpec.components.schemas[refName];
+        }
+    }
+    
+    // 渲染参数表格
+    let paramsTable = '';
+    if (schema.properties) {
+        const requiredFields = schema.required || [];
+        const rows = Object.keys(schema.properties).map(key => {
+            const prop = schema.properties[key];
+            const required = requiredFields.includes(key) 
+                ? '<span class="api-param-required">必需</span>' 
+                : '<span class="api-param-optional">可选</span>';
+            
+            // 处理嵌套类型
+            let typeDisplay = prop.type || 'object';
+            if (prop.type === 'array' && prop.items) {
+                typeDisplay = `array[${prop.items.type || 'object'}]`;
+            } else if (prop.$ref) {
+                const refPath = prop.$ref.split('/');
+                typeDisplay = refPath[refPath.length - 1];
+            }
+            
+            // 处理枚举
+            if (prop.enum) {
+                typeDisplay += ` (${prop.enum.join(', ')})`;
+            }
+            
+            // 处理描述文本，将换行符转换为<br>，但保持其他格式
+            let descriptionHtml = '-';
+            if (prop.description) {
+                // 转义HTML，然后处理换行
+                const escapedDesc = escapeHtml(prop.description);
+                // 将 \n 转换为 <br>，但不要转换已经转义的换行
+                descriptionHtml = escapedDesc.replace(/\n/g, '<br>');
+            }
+            
+            return `
+                <tr>
+                    <td><span class="api-param-name">${escapeHtml(key)}</span></td>
+                    <td><span class="api-param-type">${escapeHtml(typeDisplay)}</span></td>
+                    <td>${descriptionHtml}</td>
+                    <td>${required}</td>
+                    <td>${prop.example !== undefined ? `<code>${escapeHtml(String(prop.example))}</code>` : '-'}</td>
+                </tr>
+            `;
+        }).join('');
+        
+        if (rows) {
+            paramsTable = `
+                <div class="api-table-wrapper" style="margin-top: 12px;">
+                    <table class="api-params-table">
+                        <thead>
+                            <tr>
+                                <th>参数名</th>
+                                <th>类型</th>
+                                <th>描述</th>
+                                <th>必需</th>
+                                <th>示例</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            ${rows}
+                        </tbody>
+                    </table>
+                </div>
+            `;
+        }
+    }
+    
+    // 生成示例JSON
+    let example = '';
+    if (schema.example) {
+        example = JSON.stringify(schema.example, null, 2);
+    } else if (schema.properties) {
+        const exampleObj = {};
+        Object.keys(schema.properties).forEach(key => {
+            const prop = schema.properties[key];
+            if (prop.example !== undefined) {
+                exampleObj[key] = prop.example;
+            } else {
+                // 根据类型生成默认示例
+                if (prop.type === 'string') {
+                    exampleObj[key] = prop.description || 'string';
+                } else if (prop.type === 'number') {
+                    exampleObj[key] = 0;
+                } else if (prop.type === 'boolean') {
+                    exampleObj[key] = false;
+                } else if (prop.type === 'array') {
+                    exampleObj[key] = [];
+                } else {
+                    exampleObj[key] = null;
+                }
+            }
+        });
+        example = JSON.stringify(exampleObj, null, 2);
+    }
+    
+    return `
+        <div class="api-section">
+            <div class="api-section-title">请求体</div>
+            ${endpoint.requestBody.description ? `<div class="api-description">${endpoint.requestBody.description}</div>` : ''}
+            ${paramsTable}
+            ${example ? `
+                <div style="margin-top: 16px;">
+                    <div style="font-weight: 500; margin-bottom: 8px; color: var(--text-primary);">示例JSON:</div>
+                    <div class="api-response-example">
+                        <pre>${escapeHtml(example)}</pre>
+                    </div>
+                </div>
+            ` : ''}
+        </div>
+    `;
+}
+
+// 渲染响应
+function renderResponses(endpoint) {
+    const responses = endpoint.responses || {};
+    const responseItems = Object.keys(responses).map(status => {
+        const response = responses[status];
+        const schema = response.content?.['application/json']?.schema || {};
+        let example = '';
+        if (schema.example) {
+            example = JSON.stringify(schema.example, null, 2);
+        }
+        
+        return `
+            <div style="margin-bottom: 16px;">
+                <strong style="color: ${status.startsWith('2') ? 'var(--success-color)' : status.startsWith('4') ? 'var(--error-color)' : 'var(--warning-color)'}">${status}</strong>
+                ${response.description ? `<span style="color: var(--text-secondary); margin-left: 8px;">${response.description}</span>` : ''}
+                ${example ? `
+                    <div class="api-response-example" style="margin-top: 8px;">
+                        <pre>${escapeHtml(example)}</pre>
+                    </div>
+                ` : ''}
+            </div>
+        `;
+    }).join('');
+    
+    if (!responseItems) return '';
+    
+    return `
+        <div class="api-section">
+            <div class="api-section-title">响应</div>
+            ${responseItems}
+        </div>
+    `;
+}
+
+// 渲染测试区域
+function renderTestSection(endpoint) {
+    const method = endpoint.method.toUpperCase();
+    const path = endpoint.path;
+    const hasBody = endpoint.requestBody && ['POST', 'PUT', 'PATCH'].includes(method);
+    
+    let bodyInput = '';
+    if (hasBody) {
+        const schema = endpoint.requestBody.content?.['application/json']?.schema || {};
+        let defaultBody = '';
+        if (schema.example) {
+            defaultBody = JSON.stringify(schema.example, null, 2);
+        } else if (schema.properties) {
+            const exampleObj = {};
+            Object.keys(schema.properties).forEach(key => {
+                const prop = schema.properties[key];
+                exampleObj[key] = prop.example || (prop.type === 'string' ? '' : prop.type === 'number' ? 0 : prop.type === 'boolean' ? false : null);
+            });
+            defaultBody = JSON.stringify(exampleObj, null, 2);
+        }
+        
+        const bodyInputId = `test-body-${escapeId(path)}-${method}`;
+        bodyInput = `
+            <div class="api-test-input-group">
+                <label>请求体 (JSON)</label>
+                <textarea id="${bodyInputId}" class="test-body-input" placeholder='请输入JSON格式的请求体'>${defaultBody}</textarea>
+            </div>
+        `;
+    }
+    
+    // 处理路径参数
+    const pathParams = (endpoint.parameters || []).filter(p => p.in === 'path');
+    let pathParamsInput = '';
+    if (pathParams.length > 0) {
+        pathParamsInput = pathParams.map(param => {
+            const inputId = `test-param-${param.name}-${escapeId(path)}-${method}`;
+            return `
+                <div class="api-test-input-group">
+                    <label>${param.name} <span style="color: var(--error-color);">*</span></label>
+                    <input type="text" id="${inputId}" placeholder="${param.description || param.name}" required>
+                </div>
+            `;
+        }).join('');
+    }
+    
+    // 处理查询参数
+    const queryParams = (endpoint.parameters || []).filter(p => p.in === 'query');
+    let queryParamsInput = '';
+    if (queryParams.length > 0) {
+        queryParamsInput = queryParams.map(param => {
+            const inputId = `test-query-${param.name}-${escapeId(path)}-${method}`;
+            const defaultValue = param.schema?.default !== undefined ? param.schema.default : '';
+            const placeholder = param.description || param.name;
+            const required = param.required ? '<span style="color: var(--error-color);">*</span>' : '<span style="color: var(--text-muted);">可选</span>';
+            return `
+                <div class="api-test-input-group">
+                    <label>${param.name} ${required}</label>
+                    <input type="${param.schema?.type === 'number' || param.schema?.type === 'integer' ? 'number' : 'text'}" 
+                           id="${inputId}" 
+                           placeholder="${placeholder}" 
+                           value="${defaultValue}"
+                           ${param.required ? 'required' : ''}>
+                </div>
+            `;
+        }).join('');
+    }
+    
+    return `
+        <div class="api-test-section">
+            <div class="api-section-title">测试接口</div>
+            <div class="api-test-form">
+                ${pathParamsInput}
+                ${queryParamsInput ? `<div style="margin-top: 16px;"><div style="font-weight: 500; margin-bottom: 8px; color: var(--text-primary);">查询参数:</div>${queryParamsInput}</div>` : ''}
+                ${bodyInput}
+                <div class="api-test-buttons">
+                    <button class="api-test-btn primary" onclick="testAPI('${method}', '${escapeHtml(path)}', '${endpoint.operationId || ''}')">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <polygon points="5 3 19 12 5 21 5 3"/>
+                        </svg>
+                        发送请求
+                    </button>
+                    <button class="api-test-btn copy-curl" onclick="copyCurlCommand(event, '${method}', '${escapeHtml(path)}')" title="复制curl命令">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
+                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke="currentColor" stroke-width="2"/>
+                        </svg>
+                        复制curl
+                    </button>
+                    <button class="api-test-btn clear-result" onclick="clearTestResult('${escapeId(path)}-${method}')" title="清除测试结果">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <polyline points="3 6 5 6 21 6"/>
+                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                        </svg>
+                        清除结果
+                    </button>
+                </div>
+                <div id="test-result-${escapeId(path)}-${method}" class="api-test-result" style="display: none;"></div>
+            </div>
+        </div>
+    `;
+}
+
+// 测试API
+async function testAPI(method, path, operationId) {
+    const resultId = `test-result-${escapeId(path)}-${method}`;
+    const resultDiv = document.getElementById(resultId);
+    if (!resultDiv) return;
+    
+    resultDiv.style.display = 'block';
+    resultDiv.className = 'api-test-result loading';
+    resultDiv.textContent = '发送请求中...';
+    
+    try {
+        // 替换路径参数
+        let actualPath = path;
+        const pathParams = path.match(/\{([^}]+)\}/g) || [];
+        pathParams.forEach(param => {
+            const paramName = param.slice(1, -1);
+            const inputId = `test-param-${paramName}-${escapeId(path)}-${method}`;
+            const input = document.getElementById(inputId);
+            if (input && input.value) {
+                actualPath = actualPath.replace(param, encodeURIComponent(input.value));
+            } else {
+                throw new Error(`路径参数 ${paramName} 不能为空`);
+            }
+        });
+        
+        // 确保路径以/api开头（如果OpenAPI规范中的路径不包含/api）
+        if (!actualPath.startsWith('/api') && !actualPath.startsWith('http')) {
+            actualPath = '/api' + actualPath;
+        }
+        
+        // 构建查询参数
+        const queryParams = [];
+        const endpointSpec = apiSpec.paths[path]?.[method.toLowerCase()];
+        if (endpointSpec && endpointSpec.parameters) {
+            endpointSpec.parameters.filter(p => p.in === 'query').forEach(param => {
+                const inputId = `test-query-${param.name}-${escapeId(path)}-${method}`;
+                const input = document.getElementById(inputId);
+                if (input && input.value !== '' && input.value !== null && input.value !== undefined) {
+                    queryParams.push(`${encodeURIComponent(param.name)}=${encodeURIComponent(input.value)}`);
+                } else if (param.required) {
+                    throw new Error(`查询参数 ${param.name} 不能为空`);
+                }
+            });
+        }
+        
+        // 添加查询字符串
+        if (queryParams.length > 0) {
+            actualPath += (actualPath.includes('?') ? '&' : '?') + queryParams.join('&');
+        }
+        
+        // 构建请求选项
+        const options = {
+            method: method,
+            headers: {
+                'Content-Type': 'application/json',
+            }
+        };
+        
+        // 添加token
+        if (currentToken) {
+            options.headers['Authorization'] = 'Bearer ' + currentToken;
+        } else {
+            // 如果没有token，提示用户
+            throw new Error('未检测到 Token。请先在前端页面登录，然后刷新此页面。或者手动在请求头中添加 Authorization: Bearer your_token');
+        }
+        
+        // 添加请求体
+        if (['POST', 'PUT', 'PATCH'].includes(method)) {
+            const bodyInputId = `test-body-${escapeId(path)}-${method}`;
+            const bodyInput = document.getElementById(bodyInputId);
+            if (bodyInput && bodyInput.value.trim()) {
+                try {
+                    options.body = JSON.stringify(JSON.parse(bodyInput.value.trim()));
+                } catch (e) {
+                    throw new Error('请求体JSON格式错误: ' + e.message);
+                }
+            }
+        }
+        
+        // 发送请求
+        const response = await fetch(actualPath, options);
+        const responseText = await response.text();
+        
+        let responseData;
+        try {
+            responseData = JSON.parse(responseText);
+        } catch {
+            responseData = responseText;
+        }
+        
+        // 显示结果
+        resultDiv.className = response.ok ? 'api-test-result success' : 'api-test-result error';
+        resultDiv.textContent = `状态码: ${response.status} ${response.statusText}\n\n${typeof responseData === 'string' ? responseData : JSON.stringify(responseData, null, 2)}`;
+        
+    } catch (error) {
+        resultDiv.className = 'api-test-result error';
+        resultDiv.textContent = '请求失败: ' + error.message;
+    }
+}
+
+// 清除测试结果
+function clearTestResult(id) {
+    const resultDiv = document.getElementById(`test-result-${id}`);
+    if (resultDiv) {
+        resultDiv.style.display = 'none';
+        resultDiv.textContent = '';
+    }
+}
+
+// 复制curl命令
+function copyCurlCommand(event, method, path) {
+    try {
+        // 替换路径参数
+        let actualPath = path;
+        const pathParams = path.match(/\{([^}]+)\}/g) || [];
+        pathParams.forEach(param => {
+            const paramName = param.slice(1, -1);
+            const inputId = `test-param-${paramName}-${escapeId(path)}-${method}`;
+            const input = document.getElementById(inputId);
+            if (input && input.value) {
+                actualPath = actualPath.replace(param, encodeURIComponent(input.value));
+            }
+        });
+        
+        // 确保路径以/api开头
+        if (!actualPath.startsWith('/api') && !actualPath.startsWith('http')) {
+            actualPath = '/api' + actualPath;
+        }
+        
+        // 构建查询参数
+        const queryParams = [];
+        const endpointSpec = apiSpec.paths[path]?.[method.toLowerCase()];
+        if (endpointSpec && endpointSpec.parameters) {
+            endpointSpec.parameters.filter(p => p.in === 'query').forEach(param => {
+                const inputId = `test-query-${param.name}-${escapeId(path)}-${method}`;
+                const input = document.getElementById(inputId);
+                if (input && input.value !== '' && input.value !== null && input.value !== undefined) {
+                    queryParams.push(`${encodeURIComponent(param.name)}=${encodeURIComponent(input.value)}`);
+                }
+            });
+        }
+        
+        // 添加查询字符串
+        if (queryParams.length > 0) {
+            actualPath += (actualPath.includes('?') ? '&' : '?') + queryParams.join('&');
+        }
+        
+        // 构建完整的URL
+        const baseUrl = window.location.origin;
+        const fullUrl = baseUrl + actualPath;
+        
+        // 构建curl命令
+        let curlCommand = `curl -X ${method.toUpperCase()} "${fullUrl}"`;
+        
+        // 添加请求头
+        curlCommand += ` \\\n  -H "Content-Type: application/json"`;
+        
+        // 添加Authorization头
+        if (currentToken) {
+            curlCommand += ` \\\n  -H "Authorization: Bearer ${currentToken}"`;
+        } else {
+            curlCommand += ` \\\n  -H "Authorization: Bearer YOUR_TOKEN_HERE"`;
+        }
+        
+        // 添加请求体（如果有）
+        if (['POST', 'PUT', 'PATCH'].includes(method.toUpperCase())) {
+            const bodyInputId = `test-body-${escapeId(path)}-${method}`;
+            const bodyInput = document.getElementById(bodyInputId);
+            if (bodyInput && bodyInput.value.trim()) {
+                try {
+                    // 验证JSON格式并格式化
+                    const jsonBody = JSON.parse(bodyInput.value.trim());
+                    const jsonString = JSON.stringify(jsonBody);
+                    // 在单引号内，只需要转义单引号本身
+                    const escapedJson = jsonString.replace(/'/g, "'\\''");
+                    curlCommand += ` \\\n  -d '${escapedJson}'`;
+                } catch (e) {
+                    // 如果不是有效JSON，直接使用原始值
+                    const escapedBody = bodyInput.value.trim().replace(/'/g, "'\\''");
+                    curlCommand += ` \\\n  -d '${escapedBody}'`;
+                }
+            }
+        }
+        
+        // 复制到剪贴板
+        const button = event ? event.target.closest('button') : null;
+        navigator.clipboard.writeText(curlCommand).then(() => {
+            // 显示成功提示
+            if (button) {
+                const originalText = button.innerHTML;
+                button.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>已复制';
+                button.style.color = 'var(--success-color)';
+                setTimeout(() => {
+                    button.innerHTML = originalText;
+                    button.style.color = '';
+                }, 2000);
+            } else {
+                alert('curl命令已复制到剪贴板！');
+            }
+        }).catch(err => {
+            console.error('复制失败:', err);
+            // 如果clipboard API失败，使用fallback方法
+            const textarea = document.createElement('textarea');
+            textarea.value = curlCommand;
+            textarea.style.position = 'fixed';
+            textarea.style.opacity = '0';
+            document.body.appendChild(textarea);
+            textarea.select();
+            try {
+                document.execCommand('copy');
+                if (button) {
+                    const originalText = button.innerHTML;
+                    button.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>已复制';
+                    button.style.color = 'var(--success-color)';
+                    setTimeout(() => {
+                        button.innerHTML = originalText;
+                        button.style.color = '';
+                    }, 2000);
+                } else {
+                    alert('curl命令已复制到剪贴板！');
+                }
+            } catch (e) {
+                alert('复制失败，请手动复制:\n\n' + curlCommand);
+            }
+            document.body.removeChild(textarea);
+        });
+        
+    } catch (error) {
+        console.error('生成curl命令失败:', error);
+        alert('生成curl命令失败: ' + error.message);
+    }
+}
+
+// 格式化描述文本（处理markdown格式）
+function formatDescription(text) {
+    if (!text) return '';
+    
+    // 先提取代码块（避免代码块内的markdown被处理）
+    let formatted = text;
+    const codeBlocks = [];
+    let codeBlockIndex = 0;
+    
+    // 提取代码块（支持语言标识符，如 ```json 或 ```javascript）
+    formatted = formatted.replace(/```(\w+)?\s*\n?([\s\S]*?)```/g, (match, lang, code) => {
+        const placeholder = `__CODE_BLOCK_${codeBlockIndex}__`;
+        codeBlocks[codeBlockIndex] = {
+            lang: (lang && lang.trim()) || '',
+            code: code.trim()
+        };
+        codeBlockIndex++;
+        return placeholder;
+    });
+    
+    // 提取行内代码（避免行内代码内的markdown被处理）
+    const inlineCodes = [];
+    let inlineCodeIndex = 0;
+    formatted = formatted.replace(/`([^`\n]+)`/g, (match, code) => {
+        const placeholder = `__INLINE_CODE_${inlineCodeIndex}__`;
+        inlineCodes[inlineCodeIndex] = code;
+        inlineCodeIndex++;
+        return placeholder;
+    });
+    
+    // 转义HTML（但保留占位符）
+    formatted = escapeHtml(formatted);
+    
+    // 恢复行内代码（需要转义，因为占位符已经被转义了）
+    inlineCodes.forEach((code, index) => {
+        formatted = formatted.replace(
+            `__INLINE_CODE_${index}__`,
+            `<code class="inline-code">${escapeHtml(code)}</code>`
+        );
+    });
+    
+    // 恢复代码块（代码块内容已经转义过，直接使用）
+    codeBlocks.forEach((block, index) => {
+        const langLabel = block.lang ? `<span class="code-lang">${escapeHtml(block.lang)}</span>` : '';
+        // 代码块内容已经在提取时保存，不需要再次转义
+        formatted = formatted.replace(
+            `__CODE_BLOCK_${index}__`,
+            `<pre class="code-block">${langLabel}<code>${escapeHtml(block.code)}</code></pre>`
+        );
+    });
+    
+    // 处理标题（### 标题）
+    formatted = formatted.replace(/^###\s+(.+)$/gm, '<h3 class="md-h3">$1</h3>');
+    formatted = formatted.replace(/^##\s+(.+)$/gm, '<h2 class="md-h2">$1</h2>');
+    formatted = formatted.replace(/^#\s+(.+)$/gm, '<h1 class="md-h1">$1</h1>');
+    
+    // 处理加粗文本（**text** 或 __text__）
+    formatted = formatted.replace(/\*\*([^*]+?)\*\*/g, '<strong>$1</strong>');
+    formatted = formatted.replace(/__([^_]+?)__/g, '<strong>$1</strong>');
+    
+    // 处理斜体（*text* 或 _text_，但不与加粗冲突）
+    formatted = formatted.replace(/(?<!\*)\*([^*\n]+?)\*(?!\*)/g, '<em>$1</em>');
+    formatted = formatted.replace(/(?<!_)_([^_\n]+?)_(?!_)/g, '<em>$1</em>');
+    
+    // 处理链接 [text](url)
+    formatted = formatted.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="md-link">$1</a>');
+    
+    // 处理列表项（有序和无序）
+    const lines = formatted.split('\n');
+    const result = [];
+    let inUnorderedList = false;
+    let inOrderedList = false;
+    let orderedListStart = 1;
+    
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const unorderedMatch = line.match(/^[-*]\s+(.+)$/);
+        const orderedMatch = line.match(/^\d+\.\s+(.+)$/);
+        
+        if (unorderedMatch) {
+            if (inOrderedList) {
+                result.push('</ol>');
+                inOrderedList = false;
+            }
+            if (!inUnorderedList) {
+                result.push('<ul class="md-list">');
+                inUnorderedList = true;
+            }
+            result.push(`<li class="md-list-item">${unorderedMatch[1]}</li>`);
+        } else if (orderedMatch) {
+            if (inUnorderedList) {
+                result.push('</ul>');
+                inUnorderedList = false;
+            }
+            if (!inOrderedList) {
+                result.push('<ol class="md-list">');
+                inOrderedList = true;
+                orderedListStart = parseInt(line.match(/^(\d+)\./)[1]) || 1;
+            }
+            result.push(`<li class="md-list-item">${orderedMatch[1]}</li>`);
+        } else {
+            if (inUnorderedList) {
+                result.push('</ul>');
+                inUnorderedList = false;
+            }
+            if (inOrderedList) {
+                result.push('</ol>');
+                inOrderedList = false;
+            }
+            if (line.trim()) {
+                result.push(line);
+            } else if (i < lines.length - 1) {
+                // 只在非最后一行时添加换行
+                result.push('<br>');
+            }
+        }
+    }
+    
+    if (inUnorderedList) {
+        result.push('</ul>');
+    }
+    if (inOrderedList) {
+        result.push('</ol>');
+    }
+    
+    formatted = result.join('\n');
+    
+    // 处理段落（连续的空行分隔段落）
+    formatted = formatted.replace(/(<br>\s*){2,}/g, '</p><p class="md-paragraph">');
+    formatted = '<p class="md-paragraph">' + formatted + '</p>';
+    
+    // 清理多余的<br>标签（在块级元素前后）
+    formatted = formatted.replace(/(<\/?(h[1-6]|ul|ol|li|pre|p)[^>]*>)\s*<br>/gi, '$1');
+    formatted = formatted.replace(/<br>\s*(<\/?(h[1-6]|ul|ol|li|pre|p)[^>]*>)/gi, '$1');
+    
+    // 将剩余的单个换行符转换为<br>（但避免在块级元素内）
+    formatted = formatted.replace(/\n(?!<\/?(h[1-6]|ul|ol|li|pre|p|code))/g, '<br>');
+    
+    return formatted;
+}
+
+// HTML转义
+function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+
+// ID转义（用于HTML ID属性）
+function escapeId(text) {
+    return text.replace(/[{}]/g, '').replace(/\//g, '-');
+}
+
+// 切换描述显示/隐藏
+function toggleDescription(button) {
+    const icon = button.querySelector('.description-toggle-icon');
+    const detail = button.parentElement.querySelector('.api-description-detail');
+    const span = button.querySelector('span');
+    
+    if (detail.style.display === 'none') {
+        detail.style.display = 'block';
+        icon.style.transform = 'rotate(180deg)';
+        span.textContent = '隐藏详细说明';
+    } else {
+        detail.style.display = 'none';
+        icon.style.transform = 'rotate(0deg)';
+        span.textContent = '查看详细说明';
+    }
+}

web/static/js/chat.js

@@ -1260,7 +1260,8 @@ function renderProcessDetails(messageId, processDetails) {
         addTimelineItem(timeline, eventType, {
             title: itemTitle,
             message: detail.message || '',
-            data: data
+            data: data,
+            createdAt: detail.createdAt // 传递实际的事件创建时间
         });
     });
     
@@ -1980,6 +1981,16 @@ async function deleteConversation(conversationId, skipConfirm = false) {
             addAttackChainButton(null);
         }
         
+        // 更新缓存 - 立即删除，确保后续加载时能正确识别
+        delete conversationGroupMappingCache[conversationId];
+        // 同时从待保留映射中移除
+        delete pendingGroupMappings[conversationId];
+        
+        // 如果当前在分组详情页面，重新加载分组对话
+        if (currentGroupId) {
+            await loadGroupConversations(currentGroupId);
+        }
+        
         // 刷新对话列表
         loadConversations();
     } catch (error) {
@@ -4983,9 +4994,25 @@ function closeBatchManageModal() {
 function showCreateGroupModal(andMoveConversation = false) {
     const modal = document.getElementById('create-group-modal');
     const input = document.getElementById('create-group-name-input');
+    const iconBtn = document.getElementById('create-group-icon-btn');
+    const iconPicker = document.getElementById('group-icon-picker');
+    const customInput = document.getElementById('custom-icon-input');
+    
     if (input) {
         input.value = '';
     }
+    // 重置图标为默认值
+    if (iconBtn) {
+        iconBtn.textContent = '📁';
+    }
+    // 清空自定义图标输入框
+    if (customInput) {
+        customInput.value = '';
+    }
+    // 关闭图标选择器
+    if (iconPicker) {
+        iconPicker.style.display = 'none';
+    }
     if (modal) {
         modal.style.display = 'flex';
         modal.dataset.moveConversation = andMoveConversation ? 'true' : 'false';
@@ -5005,6 +5032,21 @@ function closeCreateGroupModal() {
     if (input) {
         input.value = '';
     }
+    // 重置图标为默认值
+    const iconBtn = document.getElementById('create-group-icon-btn');
+    if (iconBtn) {
+        iconBtn.textContent = '📁';
+    }
+    // 清空自定义图标输入框
+    const customInput = document.getElementById('custom-icon-input');
+    if (customInput) {
+        customInput.value = '';
+    }
+    // 关闭图标选择器
+    const iconPicker = document.getElementById('group-icon-picker');
+    if (iconPicker) {
+        iconPicker.style.display = 'none';
+    }
 }
 
 // 选择建议标签
@@ -5016,6 +5058,81 @@ function selectSuggestion(name) {
     }
 }
 
+// 切换图标选择器显示状态
+function toggleGroupIconPicker() {
+    const picker = document.getElementById('group-icon-picker');
+    if (picker) {
+        const isVisible = picker.style.display !== 'none';
+        picker.style.display = isVisible ? 'none' : 'block';
+    }
+}
+
+// 选择分组图标
+function selectGroupIcon(icon) {
+    const iconBtn = document.getElementById('create-group-icon-btn');
+    if (iconBtn) {
+        iconBtn.textContent = icon;
+    }
+    // 清空自定义输入框
+    const customInput = document.getElementById('custom-icon-input');
+    if (customInput) {
+        customInput.value = '';
+    }
+    // 关闭选择器
+    const picker = document.getElementById('group-icon-picker');
+    if (picker) {
+        picker.style.display = 'none';
+    }
+}
+
+// 应用自定义图标
+function applyCustomIcon() {
+    const customInput = document.getElementById('custom-icon-input');
+    if (!customInput) return;
+    
+    const customIcon = customInput.value.trim();
+    if (!customIcon) {
+        return;
+    }
+    
+    const iconBtn = document.getElementById('create-group-icon-btn');
+    if (iconBtn) {
+        iconBtn.textContent = customIcon;
+    }
+    
+    // 清空输入框并关闭选择器
+    customInput.value = '';
+    const picker = document.getElementById('group-icon-picker');
+    if (picker) {
+        picker.style.display = 'none';
+    }
+}
+
+// 自定义图标输入框回车键处理
+document.addEventListener('DOMContentLoaded', function() {
+    const customInput = document.getElementById('custom-icon-input');
+    if (customInput) {
+        customInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                applyCustomIcon();
+            }
+        });
+    }
+});
+
+// 点击外部关闭图标选择器
+document.addEventListener('click', function(event) {
+    const picker = document.getElementById('group-icon-picker');
+    const iconBtn = document.getElementById('create-group-icon-btn');
+    if (picker && iconBtn) {
+        // 如果点击的不是图标按钮和选择器本身，则关闭选择器
+        if (!picker.contains(event.target) && !iconBtn.contains(event.target)) {
+            picker.style.display = 'none';
+        }
+    }
+});
+
 // 创建分组
 async function createGroup(event) {
     // 阻止事件冒泡
@@ -5060,6 +5177,10 @@ async function createGroup(event) {
         console.error('检查分组名称失败:', error);
     }
 
+    // 获取选中的图标
+    const iconBtn = document.getElementById('create-group-icon-btn');
+    const selectedIcon = iconBtn ? iconBtn.textContent.trim() : '📁';
+
     try {
         const response = await apiFetch('/api/groups', {
             method: 'POST',
@@ -5068,7 +5189,7 @@ async function createGroup(event) {
             },
             body: JSON.stringify({
                 name: name,
-                icon: '📁',
+                icon: selectedIcon,
             }),
         });
 
@@ -5750,4 +5871,34 @@ document.addEventListener('DOMContentLoaded', async () => {
         };
     }
     await loadConversationsWithGroups();
+    
+    // 添加页面焦点时自动刷新对话列表的功能
+    // 这样当通过OpenAPI创建对话后，切换回页面时能自动看到新对话
+    let lastFocusTime = Date.now();
+    const CONVERSATION_REFRESH_INTERVAL = 30000; // 30秒内最多刷新一次，避免过于频繁
+    
+    window.addEventListener('focus', () => {
+        const now = Date.now();
+        // 如果距离上次刷新超过30秒，才刷新对话列表
+        if (now - lastFocusTime > CONVERSATION_REFRESH_INTERVAL) {
+            lastFocusTime = now;
+            if (typeof loadConversationsWithGroups === 'function') {
+                loadConversationsWithGroups();
+            }
+        }
+    });
+    
+    // 监听页面可见性变化（当用户切换标签页回来时）
+    document.addEventListener('visibilitychange', () => {
+        if (!document.hidden) {
+            // 页面变为可见时，检查是否需要刷新
+            const now = Date.now();
+            if (now - lastFocusTime > CONVERSATION_REFRESH_INTERVAL) {
+                lastFocusTime = now;
+                if (typeof loadConversationsWithGroups === 'function') {
+                    loadConversationsWithGroups();
+                }
+            }
+        }
+    });
 });

web/static/js/monitor.js

@@ -835,7 +835,26 @@ function addTimelineItem(timeline, type, options) {
     item.id = itemId;
     item.className = `timeline-item timeline-item-${type}`;
     
-    const time = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+    // 使用传入的createdAt时间，如果没有则使用当前时间（向后兼容）
+    let eventTime;
+    if (options.createdAt) {
+        // 处理字符串或Date对象
+        if (typeof options.createdAt === 'string') {
+            eventTime = new Date(options.createdAt);
+        } else if (options.createdAt instanceof Date) {
+            eventTime = options.createdAt;
+        } else {
+            eventTime = new Date(options.createdAt);
+        }
+        // 如果解析失败，使用当前时间
+        if (isNaN(eventTime.getTime())) {
+            eventTime = new Date();
+        }
+    } else {
+        eventTime = new Date();
+    }
+    
+    const time = eventTime.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
     
     let content = `
         <div class="timeline-item-header">

web/static/js/roles.js

@@ -1,6 +1,8 @@
 // 角色管理相关功能
 let currentRole = localStorage.getItem('currentRole') || '';
 let roles = [];
+let rolesSearchKeyword = ''; // 角色搜索关键词
+let rolesSearchTimeout = null; // 搜索防抖定时器
 let allRoleTools = []; // 存储所有工具列表（用于角色工具选择）
 let roleToolsPagination = {
     page: 1,
@@ -258,6 +260,7 @@ async function refreshRoles() {
     }
     // 始终更新侧边栏角色选择列表
     renderRoleSelectionSidebar();
+    showNotification('已刷新', 'success');
 }
 
 // 渲染角色列表
@@ -265,30 +268,25 @@ function renderRolesList() {
     const rolesList = document.getElementById('roles-list');
     if (!rolesList) return;
 
-    if (roles.length === 0) {
-        rolesList.innerHTML = '<div class="empty-state">暂无角色</div>';
+    // 过滤角色（根据搜索关键词）
+    let filteredRoles = roles;
+    if (rolesSearchKeyword) {
+        const keyword = rolesSearchKeyword.toLowerCase();
+        filteredRoles = roles.filter(role => 
+            role.name.toLowerCase().includes(keyword) ||
+            (role.description && role.description.toLowerCase().includes(keyword))
+        );
+    }
+
+    if (filteredRoles.length === 0) {
+        rolesList.innerHTML = '<div class="empty-state">' + 
+            (rolesSearchKeyword ? '没有找到匹配的角色' : '暂无角色') + 
+            '</div>';
         return;
     }
 
-    // 更新统计
-    const stats = document.getElementById('roles-stats');
-    if (stats) {
-        const totalRoles = roles.length;
-        const enabledRoles = roles.filter(r => r.enabled !== false).length;
-        stats.innerHTML = `
-            <div class="role-stat-item">
-                <span class="role-stat-label">总角色数</span>
-                <span class="role-stat-value">${totalRoles}</span>
-            </div>
-            <div class="role-stat-item">
-                <span class="role-stat-label">已启用</span>
-                <span class="role-stat-value">${enabledRoles}</span>
-            </div>
-        `;
-    }
-
     // 对角色进行排序：默认角色第一个，其他按名称排序
-    const sortedRoles = sortRoles(roles);
+    const sortedRoles = sortRoles(filteredRoles);
     
     rolesList.innerHTML = sortedRoles.map(role => {
         // 获取角色图标，如果是Unicode转义格式则转换为emoji
@@ -307,47 +305,93 @@ function renderRolesList() {
                 }
             }
         }
+
+        // 获取工具列表显示
+        let toolsDisplay = '';
+        let toolsCount = 0;
+        if (role.name === '默认') {
+            toolsDisplay = '使用所有工具';
+        } else if (role.tools && role.tools.length > 0) {
+            toolsCount = role.tools.length;
+            // 显示前5个工具名称
+            const toolNames = role.tools.slice(0, 5).map(tool => {
+                // 如果是外部工具，格式为 external_mcp::tool_name，只显示工具名
+                const toolName = tool.includes('::') ? tool.split('::')[1] : tool;
+                return escapeHtml(toolName);
+            });
+            if (toolsCount <= 5) {
+                toolsDisplay = toolNames.join(', ');
+            } else {
+                toolsDisplay = toolNames.join(', ') + ` 等 ${toolsCount} 个`;
+            }
+        } else if (role.mcps && role.mcps.length > 0) {
+            toolsCount = role.mcps.length;
+            toolsDisplay = `等 ${toolsCount} 个`;
+        } else {
+            toolsDisplay = '使用所有工具';
+        }
+
         return `
-        <div class="role-item">
-            <div class="role-item-content">
-                <div class="role-item-header">
-                    <div class="role-item-name">
-                        <span class="role-item-icon" style="margin-right: 8px;">${roleIcon}</span>
-                        ${escapeHtml(role.name)}
-                    </div>
-                    <div class="role-item-badge ${role.enabled !== false ? 'enabled' : 'disabled'}">
-                        ${role.enabled !== false ? '已启用' : '已禁用'}
-                    </div>
-                </div>
-                <div class="role-item-description">${escapeHtml(role.description || '无描述')}</div>
-                <div class="role-item-details">
-                    <div class="role-item-detail">
-                        <span class="role-item-detail-label">用户提示词:</span>
-                        <span class="role-item-detail-value">${role.user_prompt ? (role.user_prompt.length > 100 ? escapeHtml(role.user_prompt.substring(0, 100)) + '...' : escapeHtml(role.user_prompt)) : '无'}</span>
-                    </div>
-                    <div class="role-item-detail">
-                        <span class="role-item-detail-label">关联的工具:</span>
-                        <span class="role-item-detail-value">${
-                            role.name === '默认' 
-                                ? '使用所有工具' 
-                                : (role.tools && role.tools.length > 0 
-                                    ? `${role.tools.length} 个工具` 
-                                    : (role.mcps && role.mcps.length > 0 
-                                        ? `${role.mcps.length} 个工具（兼容旧版）` 
-                                        : '使用所有工具'))
-                        }</span>
-                    </div>
-                </div>
+        <div class="role-card">
+            <div class="role-card-header">
+                <h3 class="role-card-title">
+                    <span class="role-card-icon">${roleIcon}</span>
+                    ${escapeHtml(role.name)}
+                </h3>
+                <span class="role-card-badge ${role.enabled !== false ? 'enabled' : 'disabled'}">
+                    ${role.enabled !== false ? '已启用' : '已禁用'}
+                </span>
             </div>
-            <div class="role-item-actions">
-                <button class="btn-secondary" onclick="editRole('${escapeHtml(role.name)}')">编辑</button>
-                ${role.name !== '默认' ? `<button class="btn-secondary btn-danger" onclick="deleteRole('${escapeHtml(role.name)}')">删除</button>` : ''}
+            <div class="role-card-description">${escapeHtml(role.description || '无描述')}</div>
+            <div class="role-card-tools">
+                <span class="role-card-tools-label">工具:</span>
+                <span class="role-card-tools-value">${toolsDisplay}</span>
+            </div>
+            <div class="role-card-actions">
+                <button class="btn-secondary btn-small" onclick="editRole('${escapeHtml(role.name)}')">编辑</button>
+                ${role.name !== '默认' ? `<button class="btn-secondary btn-small btn-danger" onclick="deleteRole('${escapeHtml(role.name)}')">删除</button>` : ''}
             </div>
         </div>
     `;
     }).join('');
 }
 
+// 处理角色搜索输入
+function handleRolesSearchInput() {
+    clearTimeout(rolesSearchTimeout);
+    rolesSearchTimeout = setTimeout(() => {
+        searchRoles();
+    }, 300);
+}
+
+// 搜索角色
+function searchRoles() {
+    const searchInput = document.getElementById('roles-search');
+    if (!searchInput) return;
+    
+    rolesSearchKeyword = searchInput.value.trim();
+    const clearBtn = document.getElementById('roles-search-clear');
+    if (clearBtn) {
+        clearBtn.style.display = rolesSearchKeyword ? 'block' : 'none';
+    }
+    
+    renderRolesList();
+}
+
+// 清除角色搜索
+function clearRolesSearch() {
+    const searchInput = document.getElementById('roles-search');
+    if (searchInput) {
+        searchInput.value = '';
+    }
+    rolesSearchKeyword = '';
+    const clearBtn = document.getElementById('roles-search-clear');
+    if (clearBtn) {
+        clearBtn.style.display = 'none';
+    }
+    renderRolesList();
+}
+
 // 生成工具唯一标识符（与settings.js中的getToolKey保持一致）
 function getToolKey(tool) {
     // 如果是外部工具，使用 external_mcp::tool.name 作为唯一标识符

web/static/js/router.js

@@ -280,6 +280,15 @@ function initPage(pageId) {
             break;
         case 'roles-management':
             // 初始化角色管理页面
+            // 重置搜索UI（变量会在下次搜索时自动更新）
+            const rolesSearchInput = document.getElementById('roles-search');
+            if (rolesSearchInput) {
+                rolesSearchInput.value = '';
+            }
+            const rolesSearchClear = document.getElementById('roles-search-clear');
+            if (rolesSearchClear) {
+                rolesSearchClear.style.display = 'none';
+            }
             if (typeof loadRoles === 'function') {
                 loadRoles().then(() => {
                     if (typeof renderRolesList === 'function') {
@@ -296,6 +305,15 @@ function initPage(pageId) {
             break;
         case 'skills-management':
             // 初始化Skills管理页面
+            // 重置搜索UI（变量会在下次搜索时自动更新）
+            const skillsSearchInput = document.getElementById('skills-search');
+            if (skillsSearchInput) {
+                skillsSearchInput.value = '';
+            }
+            const skillsSearchClear = document.getElementById('skills-search-clear');
+            if (skillsSearchClear) {
+                skillsSearchClear.style.display = 'none';
+            }
             if (typeof initSkillsPagination === 'function') {
                 initSkillsPagination();
             }

web/static/js/skills.js

@@ -94,7 +94,7 @@ function renderSkillsList() {
 
     if (filteredSkills.length === 0) {
         skillsListEl.innerHTML = '<div class="empty-state">' + 
-            (skillsSearchKeyword ? '没有找到匹配的skills' : '暂无skills，点击"添加Skill"创建第一个skill') + 
+            (skillsSearchKeyword ? '没有找到匹配的skills' : '暂无skills，点击"创建Skill"创建第一个skill') + 
             '</div>';
         // 搜索时隐藏分页
         const paginationContainer = document.getElementById('skills-pagination');
@@ -105,47 +105,31 @@ function renderSkillsList() {
     }
 
     skillsListEl.innerHTML = filteredSkills.map(skill => {
-        const fileSize = skill.file_size || 0;
-        const fileSizeStr = fileSize < 1024 ? fileSize + ' B' : 
-                           fileSize < 1024 * 1024 ? (fileSize / 1024).toFixed(2) + ' KB' :
-                           (fileSize / (1024 * 1024)).toFixed(2) + ' MB';
-        
         return `
-            <div class="skill-item">
-                <div class="skill-item-header">
-                    <div class="skill-item-info">
-                        <h3 class="skill-item-name">${escapeHtml(skill.name || '')}</h3>
-                        ${skill.description ? `<p class="skill-item-desc">${escapeHtml(skill.description)}</p>` : ''}
-                    </div>
-                    <div class="skill-item-actions">
-                        <button class="btn-icon" onclick="viewSkill('${escapeHtml(skill.name)}')" title="查看">
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
-                                <circle cx="12" cy="12" r="3"></circle>
-                            </svg>
-                        </button>
-                        <button class="btn-icon" onclick="editSkill('${escapeHtml(skill.name)}')" title="编辑">
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
-                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
-                            </svg>
-                        </button>
-                        <button class="btn-icon btn-danger" onclick="deleteSkill('${escapeHtml(skill.name)}')" title="删除">
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                                <polyline points="3 6 5 6 21 6"></polyline>
-                                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
-                            </svg>
-                        </button>
-                    </div>
+            <div class="skill-card">
+                <div class="skill-card-header">
+                    <h3 class="skill-card-title">${escapeHtml(skill.name || '')}</h3>
+                    <div class="skill-card-description">${escapeHtml(skill.description || '无描述')}</div>
                 </div>
-                <div class="skill-item-meta">
-                    <span class="skill-meta-item">路径: ${escapeHtml(skill.path || '')}</span>
-                    <span class="skill-meta-item">大小: ${fileSizeStr}</span>
-                    ${skill.mod_time ? `<span class="skill-meta-item">修改时间: ${escapeHtml(skill.mod_time)}</span>` : ''}
+                <div class="skill-card-actions">
+                    <button class="btn-secondary btn-small" onclick="viewSkill('${escapeHtml(skill.name)}')">查看</button>
+                    <button class="btn-secondary btn-small" onclick="editSkill('${escapeHtml(skill.name)}')">编辑</button>
+                    <button class="btn-secondary btn-small btn-danger" onclick="deleteSkill('${escapeHtml(skill.name)}')">删除</button>
                 </div>
             </div>
         `;
     }).join('');
+    
+    // 确保列表容器可以滚动，分页栏可见
+    // 使用 setTimeout 确保 DOM 更新完成后再检查
+    setTimeout(() => {
+        const paginationContainer = document.getElementById('skills-pagination');
+        if (paginationContainer && !skillsSearchKeyword) {
+            // 确保分页栏可见
+            paginationContainer.style.display = 'block';
+            paginationContainer.style.visibility = 'visible';
+        }
+    }, 0);
 }
 
 // 渲染分页组件（参考MCP管理页面样式）
@@ -205,6 +189,11 @@ function renderSkillsPagination() {
     function alignPaginationWidth() {
         const skillsList = document.getElementById('skills-list');
         if (skillsList && paginationContainer) {
+            // 确保分页容器始终可见
+            paginationContainer.style.display = '';
+            paginationContainer.style.visibility = 'visible';
+            paginationContainer.style.opacity = '1';
+            
             // 获取列表的实际内容宽度（不包括滚动条）
             const listClientWidth = skillsList.clientWidth; // 可视区域宽度（不包括滚动条）
             const listScrollHeight = skillsList.scrollHeight; // 内容总高度
@@ -213,7 +202,7 @@ function renderSkillsPagination() {
             
             // 如果列表有垂直滚动条，分页组件应该与列表内容区域对齐（clientWidth）
             // 如果没有滚动条，使用100%宽度
-            if (hasScrollbar) {
+            if (hasScrollbar && listClientWidth > 0) {
                 // 分页组件应该与列表内容区域对齐，不包括滚动条
                 paginationContainer.style.width = `${listClientWidth}px`;
             } else {
@@ -235,6 +224,10 @@ function renderSkillsPagination() {
     if (skillsList) {
         resizeObserver.observe(skillsList);
     }
+    
+    // 确保分页容器始终可见（防止被隐藏）
+    paginationContainer.style.display = 'block';
+    paginationContainer.style.visibility = 'visible';
 }
 
 // 改变每页显示数量
@@ -288,6 +281,10 @@ async function searchSkills() {
     if (!searchInput) return;
     
     skillsSearchKeyword = searchInput.value.trim();
+    const clearBtn = document.getElementById('skills-search-clear');
+    if (clearBtn) {
+        clearBtn.style.display = skillsSearchKeyword ? 'block' : 'none';
+    }
     
     if (skillsSearchKeyword) {
         // 有搜索关键词时，使用后端搜索API（加载所有匹配结果，不分页）
@@ -317,6 +314,21 @@ async function searchSkills() {
     }
 }
 
+// 清除skills搜索
+function clearSkillsSearch() {
+    const searchInput = document.getElementById('skills-search');
+    if (searchInput) {
+        searchInput.value = '';
+    }
+    skillsSearchKeyword = '';
+    const clearBtn = document.getElementById('skills-search-clear');
+    if (clearBtn) {
+        clearBtn.style.display = 'none';
+    }
+    // 恢复分页加载
+    loadSkills(1, skillsPagination.pageSize);
+}
+
 // 刷新skills
 async function refreshSkills() {
     await loadSkills(skillsPagination.currentPage, skillsPagination.pageSize);

web/static/js/vulnerability.js

@@ -262,88 +262,41 @@ function renderVulnerabilityPagination() {
         return;
     }
 
-    // 计算显示的页码范围
-    let startPage = Math.max(1, currentPage - 2);
-    let endPage = Math.min(totalPages, currentPage + 2);
-
-    // 确保显示5个页码（如果可能）
-    if (endPage - startPage < 4) {
-        if (startPage === 1) {
-            endPage = Math.min(totalPages, startPage + 4);
-        } else if (endPage === totalPages) {
-            startPage = Math.max(1, endPage - 4);
-        }
-    }
-
+    // 计算显示范围
+    const start = total === 0 ? 0 : (currentPage - 1) * pageSize + 1;
+    const end = total === 0 ? 0 : Math.min(currentPage * pageSize, total);
+    
     let paginationHTML = '<div class="pagination">';
     
-    // 显示总数和当前范围
-    const startItem = (currentPage - 1) * pageSize + 1;
-    const endItem = Math.min(currentPage * pageSize, total);
-    paginationHTML += `<div class="pagination-info">显示 ${startItem}-${endItem} / 共 ${total} 条</div>`;
-    
-    // 每页条数选择器（始终显示）
-    const savedPageSize = getVulnerabilityPageSize();
+    // 左侧：显示范围信息和每页数量选择器（参考Skills样式）
     paginationHTML += `
-        <div class="pagination-page-size">
-            <label for="vulnerability-page-size-pagination">每页:</label>
-            <select id="vulnerability-page-size-pagination" onchange="changeVulnerabilityPageSize()">
-                <option value="10" ${savedPageSize === 10 ? 'selected' : ''}>10</option>
-                <option value="20" ${savedPageSize === 20 ? 'selected' : ''}>20</option>
-                <option value="50" ${savedPageSize === 50 ? 'selected' : ''}>50</option>
-                <option value="100" ${savedPageSize === 100 ? 'selected' : ''}>100</option>
-            </select>
+        <div class="pagination-info">
+            <span>显示 ${start}-${end} / 共 ${total} 条</span>
+            <label class="pagination-page-size">
+                每页显示
+                <select id="vulnerability-page-size-pagination" onchange="changeVulnerabilityPageSize()">
+                    <option value="10" ${pageSize === 10 ? 'selected' : ''}>10</option>
+                    <option value="20" ${pageSize === 20 ? 'selected' : ''}>20</option>
+                    <option value="50" ${pageSize === 50 ? 'selected' : ''}>50</option>
+                    <option value="100" ${pageSize === 100 ? 'selected' : ''}>100</option>
+                </select>
+            </label>
         </div>
     `;
     
-    // 只有当有多页时才显示页码导航
-    if (totalPages > 1) {
-        paginationHTML += '<div class="pagination-controls">';
-        
-        // 上一页按钮
-        if (currentPage > 1) {
-            paginationHTML += `<button class="pagination-btn" onclick="loadVulnerabilities(${currentPage - 1})" title="上一页">‹</button>`;
-        } else {
-            paginationHTML += '<button class="pagination-btn disabled" disabled>‹</button>';
-        }
-
-        // 第一页
-        if (startPage > 1) {
-            paginationHTML += `<button class="pagination-btn" onclick="loadVulnerabilities(1)">1</button>`;
-            if (startPage > 2) {
-                paginationHTML += '<span class="pagination-ellipsis">...</span>';
-            }
-        }
-
-        // 页码按钮
-        for (let i = startPage; i <= endPage; i++) {
-            if (i === currentPage) {
-                paginationHTML += `<button class="pagination-btn active">${i}</button>`;
-            } else {
-                paginationHTML += `<button class="pagination-btn" onclick="loadVulnerabilities(${i})">${i}</button>`;
-            }
-        }
-
-        // 最后一页
-        if (endPage < totalPages) {
-            if (endPage < totalPages - 1) {
-                paginationHTML += '<span class="pagination-ellipsis">...</span>';
-            }
-            paginationHTML += `<button class="pagination-btn" onclick="loadVulnerabilities(${totalPages})">${totalPages}</button>`;
-        }
-
-        // 下一页按钮
-        if (currentPage < totalPages) {
-            paginationHTML += `<button class="pagination-btn" onclick="loadVulnerabilities(${currentPage + 1})" title="下一页">›</button>`;
-        } else {
-            paginationHTML += '<button class="pagination-btn disabled" disabled>›</button>';
-        }
-
-        paginationHTML += '</div>';
-    }
+    // 右侧：分页按钮（参考Skills样式：首页、上一页、第X/Y页、下一页、末页）
+    paginationHTML += `
+        <div class="pagination-controls">
+            <button class="btn-secondary" onclick="loadVulnerabilities(1)" ${currentPage === 1 || total === 0 ? 'disabled' : ''}>首页</button>
+            <button class="btn-secondary" onclick="loadVulnerabilities(${currentPage - 1})" ${currentPage === 1 || total === 0 ? 'disabled' : ''}>上一页</button>
+            <span class="pagination-page">第 ${currentPage} / ${totalPages || 1} 页</span>
+            <button class="btn-secondary" onclick="loadVulnerabilities(${currentPage + 1})" ${currentPage >= totalPages || total === 0 ? 'disabled' : ''}>下一页</button>
+            <button class="btn-secondary" onclick="loadVulnerabilities(${totalPages || 1})" ${currentPage >= totalPages || total === 0 ? 'disabled' : ''}>末页</button>
+        </div>
+    `;
     
     paginationHTML += '</div>';
-
+    
     paginationContainer.innerHTML = paginationHTML;
 }
 

web/templates/api-docs.html

@@ -0,0 +1,926 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>API 文档 - CyberStrikeAI</title>
+    <link rel="icon" type="image/png" href="/static/logo.png">
+    <link rel="stylesheet" href="/static/css/style.css">
+    <style>
+        /* 覆盖主CSS的overflow限制，允许API文档页面滚动 */
+        body {
+            overflow: auto !important;
+            height: auto !important;
+        }
+        
+        .api-docs-container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 24px;
+            background: var(--bg-primary);
+            min-height: 100vh;
+        }
+        
+        .api-docs-header {
+            margin-bottom: 32px;
+            padding-bottom: 24px;
+            border-bottom: 2px solid var(--border-color);
+        }
+        
+        .api-docs-header h1 {
+            font-size: 2rem;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        
+        .api-docs-header p {
+            color: var(--text-secondary);
+            font-size: 0.9375rem;
+            margin: 0;
+        }
+        
+        .auth-info-section {
+            background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 32px;
+        }
+        
+        .auth-info-content {
+            max-width: 100%;
+        }
+        
+        .auth-info-section pre {
+            margin: 0;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+        }
+        
+        .auth-info-section code {
+            font-family: inherit;
+            font-size: inherit;
+        }
+        
+        .auth-info-header {
+            padding: 4px 0;
+        }
+        
+        .auth-info-header:hover {
+            opacity: 0.8;
+        }
+        
+        .auth-info-arrow {
+            color: var(--text-secondary);
+        }
+        
+        .auth-info-body {
+            animation: slideDown 0.2s ease;
+        }
+        
+        @keyframes slideDown {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .api-docs-content {
+            display: grid;
+            grid-template-columns: 280px 1fr;
+            gap: 24px;
+        }
+        
+        .api-docs-sidebar {
+            background: var(--bg-secondary);
+            border-radius: 8px;
+            padding: 16px;
+            height: fit-content;
+            max-height: calc(100vh - 100px);
+            position: sticky;
+            top: 24px;
+            overflow-y: auto;
+        }
+        
+        .api-docs-sidebar h3 {
+            font-size: 0.875rem;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        
+        .api-group-list {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        
+        .api-group-item {
+            margin-bottom: 8px;
+        }
+        
+        .api-group-link {
+            display: block;
+            padding: 8px 12px;
+            color: var(--text-secondary);
+            text-decoration: none;
+            border-radius: 6px;
+            font-size: 0.875rem;
+            transition: all 0.2s ease;
+        }
+        
+        .api-group-link:hover {
+            background: var(--bg-tertiary);
+            color: var(--accent-color);
+        }
+        
+        .api-group-link.active {
+            background: rgba(0, 102, 255, 0.1);
+            color: var(--accent-color);
+            font-weight: 500;
+        }
+        
+        .api-docs-main {
+            background: var(--bg-primary);
+        }
+        
+        .api-endpoint {
+            background: var(--bg-primary);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            margin-bottom: 24px;
+            overflow: hidden;
+            transition: all 0.2s ease;
+        }
+        
+        .api-endpoint:hover {
+            box-shadow: var(--shadow-md);
+        }
+        
+        .api-endpoint-header {
+            padding: 20px 24px;
+            background: var(--bg-secondary);
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        
+        .api-endpoint-title {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            flex: 1;
+        }
+        
+        .api-method {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 4px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        
+        .api-method.post {
+            background: #49cc90;
+            color: white;
+        }
+        
+        .api-method.get {
+            background: #61affe;
+            color: white;
+        }
+        
+        .api-method.put {
+            background: #fca130;
+            color: white;
+        }
+        
+        .api-method.delete {
+            background: #f93e3e;
+            color: white;
+        }
+        
+        .api-path {
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 0.9375rem;
+            color: var(--text-primary);
+            font-weight: 500;
+        }
+        
+        .api-summary {
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+            margin-left: 8px;
+        }
+        
+        .api-endpoint-body {
+            padding: 24px;
+        }
+        
+        .api-section {
+            margin-bottom: 24px;
+        }
+        
+        .api-table-wrapper {
+            overflow-x: auto;
+            width: 100%;
+            -webkit-overflow-scrolling: touch;
+            margin-bottom: 16px;
+        }
+        
+        /* 确保表格在移动设备上也能正常显示 */
+        @media (max-width: 768px) {
+            .api-params-table {
+                font-size: 0.8125rem;
+            }
+            
+            .api-params-table th,
+            .api-params-table td {
+                padding: 8px;
+            }
+            
+            /* 移动设备上描述列可以更宽 */
+            .api-params-table th:nth-child(3),
+            .api-params-table td:nth-child(3) {
+                min-width: 150px;
+            }
+        }
+        
+        .api-section:last-child {
+            margin-bottom: 0;
+        }
+        
+        .api-section-title {
+            font-size: 0.875rem;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 12px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        
+        .api-description {
+            color: var(--text-secondary);
+            font-size: 0.9375rem;
+            line-height: 1.6;
+            margin-bottom: 16px;
+        }
+        
+        .api-description strong {
+            color: var(--text-primary);
+            font-weight: 600;
+        }
+        
+        .api-description code {
+            background: var(--bg-secondary);
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 0.875em;
+            color: var(--accent-color);
+        }
+        
+        .api-description pre {
+            background: var(--bg-secondary);
+            padding: 12px;
+            border-radius: 6px;
+            overflow-x: auto;
+            margin: 8px 0;
+            font-size: 0.875rem;
+        }
+        
+        .api-description pre code {
+            background: transparent;
+            padding: 0;
+            color: var(--text-secondary);
+        }
+        
+        .api-description ul {
+            margin: 8px 0;
+            padding-left: 24px;
+            list-style-type: disc;
+        }
+        
+        .api-description li {
+            margin: 4px 0;
+        }
+        
+        /* Markdown样式 */
+        .api-description-detail .md-h1 {
+            font-size: 1.5rem;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin: 16px 0 12px 0;
+            padding-bottom: 8px;
+            border-bottom: 2px solid var(--border-color);
+        }
+        
+        .api-description-detail .md-h2 {
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin: 14px 0 10px 0;
+            padding-bottom: 6px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .api-description-detail .md-h3 {
+            font-size: 1.125rem;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin: 12px 0 8px 0;
+        }
+        
+        .api-description-detail .md-paragraph {
+            margin: 8px 0;
+            line-height: 1.6;
+        }
+        
+        .api-description-detail .md-list {
+            margin: 8px 0;
+            padding-left: 24px;
+            list-style-type: disc;
+        }
+        
+        .api-description-detail .md-list ol {
+            list-style-type: decimal;
+            margin: 4px 0;
+            padding-left: 24px;
+        }
+        
+        .api-description-detail .md-list-item {
+            margin: 4px 0;
+            line-height: 1.6;
+        }
+        
+        .api-description-detail .md-link {
+            color: var(--accent-color);
+            text-decoration: none;
+            border-bottom: 1px solid transparent;
+            transition: all 0.2s ease;
+        }
+        
+        .api-description-detail .md-link:hover {
+            color: var(--accent-hover);
+            border-bottom-color: var(--accent-hover);
+        }
+        
+        .api-description-detail .inline-code {
+            background: var(--bg-secondary);
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 0.875em;
+            color: var(--accent-color);
+        }
+        
+        .api-description-detail .code-block {
+            background: var(--bg-secondary);
+            padding: 12px;
+            border-radius: 6px;
+            overflow-x: auto;
+            margin: 12px 0;
+            font-size: 0.875rem;
+            border: 1px solid var(--border-color);
+        }
+        
+        .api-description-detail .code-block code {
+            background: transparent;
+            padding: 0;
+            color: var(--text-secondary);
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            display: block;
+            white-space: pre;
+        }
+        
+        .api-description-detail .code-lang {
+            display: block;
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            margin-bottom: 8px;
+            text-transform: uppercase;
+            font-weight: 600;
+            letter-spacing: 0.5px;
+        }
+        
+        .api-description-detail strong {
+            color: var(--text-primary);
+            font-weight: 600;
+        }
+        
+        .api-description-detail em {
+            font-style: italic;
+            color: var(--text-secondary);
+        }
+        
+        .api-description-toggle {
+            margin-top: 8px;
+        }
+        
+        .description-toggle-btn {
+            background: none;
+            border: none;
+            color: var(--accent-color);
+            cursor: pointer;
+            padding: 6px 0;
+            font-size: 0.875rem;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: all 0.2s ease;
+            font-weight: 500;
+        }
+        
+        .description-toggle-btn:hover {
+            color: var(--accent-hover);
+            opacity: 0.8;
+        }
+        
+        .description-toggle-icon {
+            transition: transform 0.2s ease;
+        }
+        
+        .api-description-detail {
+            margin-top: 12px;
+            padding-top: 12px;
+            border-top: 1px solid var(--border-color);
+            animation: slideDown 0.2s ease;
+        }
+        
+        @keyframes slideDown {
+            from {
+                opacity: 0;
+                transform: translateY(-10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        
+        .api-params-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 0.875rem;
+            table-layout: fixed;
+        }
+        
+        .api-params-table th,
+        .api-params-table td {
+            padding: 12px;
+            text-align: left;
+            border-bottom: 1px solid var(--border-color);
+            vertical-align: top;
+        }
+        
+        /* 设置列宽 */
+        .api-params-table th:nth-child(1),
+        .api-params-table td:nth-child(1) {
+            width: 15%;
+            min-width: 120px;
+        }
+        
+        .api-params-table th:nth-child(2),
+        .api-params-table td:nth-child(2) {
+            width: 12%;
+            min-width: 100px;
+        }
+        
+        .api-params-table th:nth-child(3),
+        .api-params-table td:nth-child(3) {
+            width: 45%;
+            min-width: 200px;
+        }
+        
+        .api-params-table th:nth-child(4),
+        .api-params-table td:nth-child(4) {
+            width: 10%;
+            min-width: 80px;
+        }
+        
+        .api-params-table th:nth-child(5),
+        .api-params-table td:nth-child(5) {
+            width: 18%;
+            min-width: 150px;
+        }
+        
+        /* 参数名、类型、必需列不换行 */
+        .api-params-table th:nth-child(1),
+        .api-params-table td:nth-child(1),
+        .api-params-table th:nth-child(2),
+        .api-params-table td:nth-child(2),
+        .api-params-table th:nth-child(4),
+        .api-params-table td:nth-child(4) {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        
+        /* 示例列允许换行，完整显示 */
+        .api-params-table th:nth-child(5),
+        .api-params-table td:nth-child(5) {
+            white-space: normal;
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+            overflow: visible;
+        }
+        
+        /* 确保示例列中的code标签也能完整显示 */
+        .api-params-table td:nth-child(5) code {
+            white-space: normal;
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+            display: inline-block;
+            max-width: 100%;
+        }
+        
+        /* 描述列允许换行，但保持水平方向 */
+        .api-params-table th:nth-child(3),
+        .api-params-table td:nth-child(3) {
+            white-space: normal;
+            word-wrap: break-word;
+            word-break: normal;
+            overflow-wrap: break-word;
+            writing-mode: horizontal-tb !important;
+            direction: ltr !important;
+            text-align: left;
+            line-height: 1.6;
+            max-width: none;
+        }
+        
+        /* 确保描述单元格内的内容正常显示 */
+        .api-params-table td:nth-child(3) * {
+            display: inline;
+            writing-mode: horizontal-tb !important;
+        }
+        
+        .api-params-table th {
+            background: var(--bg-secondary);
+            font-weight: 600;
+            color: var(--text-primary);
+            writing-mode: horizontal-tb !important;
+            direction: ltr !important;
+        }
+        
+        .api-params-table td {
+            color: var(--text-secondary);
+            writing-mode: horizontal-tb !important;
+            direction: ltr !important;
+        }
+        
+        .api-param-name {
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            color: var(--accent-color);
+            font-weight: 500;
+        }
+        
+        .api-param-type {
+            color: var(--text-muted);
+            font-size: 0.8125rem;
+        }
+        
+        .api-param-required {
+            color: var(--error-color);
+            font-size: 0.75rem;
+            font-weight: 600;
+        }
+        
+        .api-param-optional {
+            color: var(--text-muted);
+            font-size: 0.75rem;
+            font-weight: 400;
+        }
+        
+        .api-test-section {
+            margin-top: 24px;
+            padding-top: 24px;
+            border-top: 1px solid var(--border-color);
+        }
+        
+        .api-test-form {
+            background: var(--bg-secondary);
+            border-radius: 8px;
+            padding: 20px;
+        }
+        
+        .api-test-input-group {
+            margin-bottom: 16px;
+        }
+        
+        .api-test-input-group label {
+            display: block;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: var(--text-primary);
+            margin-bottom: 8px;
+        }
+        
+        .api-test-input-group input,
+        .api-test-input-group textarea {
+            width: 100%;
+            padding: 10px 12px;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            font-size: 0.875rem;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            transition: all 0.2s ease;
+        }
+        
+        .api-test-input-group input:focus,
+        .api-test-input-group textarea:focus {
+            outline: none;
+            border-color: var(--accent-color);
+            box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
+        }
+        
+        .api-test-input-group textarea {
+            min-height: 120px;
+            resize: vertical;
+        }
+        
+        .api-test-buttons {
+            display: flex;
+            gap: 12px;
+            margin-top: 20px;
+        }
+        
+        .api-test-btn {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 6px;
+            font-size: 0.875rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .api-test-btn.primary {
+            background: var(--accent-color);
+            color: white;
+        }
+        
+        .api-test-btn.primary:hover {
+            background: var(--accent-hover);
+        }
+        
+        .api-test-btn.secondary {
+            background: var(--bg-tertiary);
+            color: var(--text-primary);
+            border: 1px solid var(--border-color);
+        }
+        
+        .api-test-btn.secondary:hover {
+            background: var(--bg-secondary);
+        }
+        
+        /* 复制curl按钮 - 黄色主题 */
+        .api-test-btn.copy-curl {
+            background: #ffc107;
+            color: white;
+            border: 1px solid #ffb300;
+        }
+        
+        .api-test-btn.copy-curl:hover {
+            background: #ffb300;
+            border-color: #ffa000;
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
+        }
+        
+        .api-test-btn.copy-curl:active {
+            transform: translateY(0);
+            box-shadow: 0 1px 4px rgba(255, 193, 7, 0.2);
+        }
+        
+        /* 清除结果按钮 - 红色/橙色主题 */
+        .api-test-btn.clear-result {
+            background: #ff6b6b;
+            color: white;
+            border: 1px solid #ff5252;
+        }
+        
+        .api-test-btn.clear-result:hover {
+            background: #ff5252;
+            border-color: #ff4444;
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
+        }
+        
+        .api-test-btn.clear-result:active {
+            transform: translateY(0);
+            box-shadow: 0 1px 4px rgba(255, 107, 107, 0.2);
+        }
+        
+        .api-test-result {
+            margin-top: 20px;
+            padding: 16px;
+            border-radius: 8px;
+            font-size: 0.875rem;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            white-space: pre-wrap;
+            word-break: break-all;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        
+        .api-test-result.success {
+            background: #d4edda;
+            color: #155724;
+            border: 1px solid #c3e6cb;
+        }
+        
+        .api-test-result.error {
+            background: #f8d7da;
+            color: #721c24;
+            border: 1px solid #f5c6cb;
+        }
+        
+        .api-test-result.loading {
+            background: var(--bg-secondary);
+            color: var(--text-secondary);
+            border: 1px solid var(--border-color);
+        }
+        
+        .api-response-example {
+            background: var(--bg-secondary);
+            border-radius: 6px;
+            padding: 16px;
+            margin-top: 12px;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 0.8125rem;
+            color: var(--text-secondary);
+            overflow-x: auto;
+        }
+        
+        .api-response-example pre {
+            margin: 0;
+            white-space: pre-wrap;
+            word-break: break-all;
+        }
+        
+        .api-tag {
+            display: inline-block;
+            padding: 4px 8px;
+            background: var(--bg-tertiary);
+            color: var(--text-secondary);
+            border-radius: 4px;
+            font-size: 0.75rem;
+            margin-left: 8px;
+        }
+        
+        .loading-spinner {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-top-color: white;
+            border-radius: 50%;
+            animation: spin 0.6s linear infinite;
+        }
+        
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: var(--text-secondary);
+        }
+        
+        .empty-state svg {
+            width: 64px;
+            height: 64px;
+            margin-bottom: 16px;
+            opacity: 0.5;
+        }
+        
+        .empty-state h3 {
+            font-size: 1.125rem;
+            margin-bottom: 8px;
+            color: var(--text-primary);
+        }
+        
+        .empty-state p {
+            font-size: 0.875rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="api-docs-container">
+        <div class="api-docs-header">
+            <h1>
+                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    <polyline points="14 2 14 8 20 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    <line x1="16" y1="13" x2="8" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    <line x1="16" y1="17" x2="8" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                API 文档
+            </h1>
+            <p>CyberStrikeAI 平台 API 接口文档，支持在线测试</p>
+        </div>
+        
+        <div id="auth-info-section" class="auth-info-section" style="display: none;">
+            <div class="auth-info-content">
+                <div class="auth-info-header" onclick="toggleAuthInfo()" style="display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none;">
+                    <div style="display: flex; align-items: center; gap: 8px;">
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
+                            <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
+                        </svg>
+                        <h3 style="margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-primary);">API 认证说明</h3>
+                    </div>
+                    <svg id="auth-info-arrow" class="auth-info-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="transition: transform 0.2s ease;">
+                        <polyline points="6 9 12 15 18 9"/>
+                    </svg>
+                </div>
+                <div id="auth-info-body" class="auth-info-body" style="display: none; color: var(--text-secondary); font-size: 0.875rem; line-height: 1.6; margin-top: 16px;">
+                    <p style="margin: 0 0 12px 0;"><strong>所有 API 接口都需要 Token 认证。</strong></p>
+                    <div style="background: var(--bg-secondary); padding: 12px; border-radius: 6px; margin-bottom: 12px;">
+                        <p style="margin: 0 0 8px 0; font-weight: 500;">1. 获取 Token：</p>
+                        <p style="margin: 0 0 8px 0;">在前端页面登录后，Token 会自动保存。您也可以通过以下方式获取：</p>
+                        <pre style="background: var(--bg-primary); padding: 8px; border-radius: 4px; margin: 8px 0; overflow-x: auto; font-size: 0.8125rem;"><code>POST /api/auth/login
+Content-Type: application/json
+
+{
+  "password": "your_password"
+}
+
+响应: { 
+  "token": "eyJhbGc...", 
+  "expires_at": "2026-01-27T...",
+  "session_duration_hr": 24
+}</code></pre>
+                    </div>
+                    <div style="background: var(--bg-secondary); padding: 12px; border-radius: 6px; margin-bottom: 12px;">
+                        <p style="margin: 0 0 8px 0; font-weight: 500;">2. 使用 Token：</p>
+                        <p style="margin: 0 0 8px 0;">在请求头中添加 Authorization 字段：</p>
+                        <pre style="background: var(--bg-primary); padding: 8px; border-radius: 4px; margin: 8px 0; overflow-x: auto; font-size: 0.8125rem;"><code>Authorization: Bearer your_token_here</code></pre>
+                        <p style="margin: 8px 0 0 0; font-size: 0.8125rem; color: var(--text-muted);">💡 提示：本页面会自动使用您已登录的 Token，无需手动填写。</p>
+                    </div>
+                    <div id="token-status" style="display: none; background: rgba(0, 102, 255, 0.1); padding: 8px 12px; border-radius: 6px; border-left: 3px solid var(--accent-color);">
+                        <p style="margin: 0; font-size: 0.8125rem; color: var(--accent-color);">
+                            <strong>✓ 已检测到 Token</strong> - 您可以直接测试 API 接口
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <script>
+            function toggleAuthInfo() {
+                const body = document.getElementById('auth-info-body');
+                const arrow = document.getElementById('auth-info-arrow');
+                if (body && arrow) {
+                    const isExpanded = body.style.display !== 'none';
+                    body.style.display = isExpanded ? 'none' : 'block';
+                    arrow.style.transform = isExpanded ? 'rotate(0deg)' : 'rotate(180deg)';
+                }
+            }
+        </script>
+        
+        <div class="api-docs-content">
+            <div class="api-docs-sidebar">
+                <h3>API 分组</h3>
+                <ul class="api-group-list" id="api-group-list">
+                    <li class="api-group-item">
+                        <a href="#" class="api-group-link active" data-group="all">全部接口</a>
+                    </li>
+                </ul>
+            </div>
+            
+            <div class="api-docs-main" id="api-docs-main">
+                <div class="empty-state">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <circle cx="12" cy="12" r="10"/>
+                        <line x1="12" y1="8" x2="12" y2="12"/>
+                        <line x1="12" y1="16" x2="12.01" y2="16"/>
+                    </svg>
+                    <h3>加载中...</h3>
+                    <p>正在加载 API 文档</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <script src="/static/js/api-docs.js"></script>
+</body>
+</html>

web/templates/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CyberStrikeAI - 自主渗透测试平台</title>
+    <title>CyberStrikeAI</title>
     <link rel="icon" type="image/png" href="/static/logo.png">
     <link rel="shortcut icon" type="image/png" href="/static/favicon.ico">
     <link rel="stylesheet" href="/static/css/style.css">
@@ -36,6 +36,9 @@
                 <div class="header-right">
                     <p class="header-subtitle">AI 驱动的自动化安全测试平台</p>
                     <div class="header-actions">
+                        <button class="openapi-doc-btn" onclick="window.open('/api-docs', '_blank')" title="OpenAPI 文档">
+                            <span>API 文档</span>
+                        </button>
                         <div class="user-menu-container">
                             <button class="user-avatar-btn" onclick="toggleUserMenu()" title="用户菜单">
                                 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -624,7 +627,7 @@
                         </div>
                         
                         <!-- 分页控件 -->
-                        <div id="vulnerability-pagination"></div>
+                        <div id="vulnerability-pagination" class="pagination-container pagination-fixed"></div>
                     </div>
                 </div>
 
@@ -676,23 +679,22 @@
                         <h2>角色管理</h2>
                         <div class="page-header-actions">
                             <button class="btn-secondary" onclick="refreshRoles()">刷新</button>
-                            <button class="btn-primary" onclick="showAddRoleModal()">添加角色</button>
+                            <button class="btn-primary" onclick="showAddRoleModal()">创建角色</button>
                         </div>
                     </div>
                     <div class="page-content">
                         <div class="roles-controls">
-                            <div class="roles-stats-bar" id="roles-stats">
-                                <div class="role-stat-item">
-                                    <span class="role-stat-label">总角色数</span>
-                                    <span class="role-stat-value">-</span>
-                                </div>
-                                <div class="role-stat-item">
-                                    <span class="role-stat-label">已启用</span>
-                                    <span class="role-stat-value">-</span>
-                                </div>
+                            <div class="roles-search-box">
+                                <input type="text" id="roles-search" placeholder="搜索角色..." oninput="handleRolesSearchInput()" onkeydown="if(event.key==='Enter') searchRoles()" />
+                                <button class="roles-search-clear" id="roles-search-clear" onclick="clearRolesSearch()" style="display: none;" title="清除搜索">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                                        <path d="M15 9l-6 6M9 9l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                                    </svg>
+                                </button>
                             </div>
                         </div>
-                        <div id="roles-list" class="roles-list">
+                        <div id="roles-list" class="roles-grid">
                             <div class="loading-spinner">加载中...</div>
                         </div>
                     </div>
@@ -737,23 +739,22 @@
                         <h2>Skills管理</h2>
                         <div class="page-header-actions">
                             <button class="btn-secondary" onclick="refreshSkills()">刷新</button>
-                            <button class="btn-primary" onclick="showAddSkillModal()">添加Skill</button>
+                            <button class="btn-primary" onclick="showAddSkillModal()">创建Skill</button>
                         </div>
                     </div>
                     <div class="page-content page-content-with-pagination">
                         <div class="skills-controls">
-                            <div class="skills-stats-bar" id="skills-management-stats">
-                                <div class="skill-stat-item">
-                                    <span class="skill-stat-label">总Skills数</span>
-                                    <span class="skill-stat-value">-</span>
-                                </div>
-                            </div>
-                            <div class="skills-filters">
-                                <input type="text" id="skills-search" placeholder="搜索skill..." oninput="handleSkillsSearchInput()" onkeydown="if(event.key==='Enter') searchSkills()" />
-                                <button class="btn-search" onclick="searchSkills()" title="搜索">🔍</button>
+                            <div class="skills-search-box">
+                                <input type="text" id="skills-search" placeholder="搜索Skills..." oninput="handleSkillsSearchInput()" onkeydown="if(event.key==='Enter') searchSkills()" />
+                                <button class="skills-search-clear" id="skills-search-clear" onclick="clearSkillsSearch()" style="display: none;" title="清除搜索">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+                                        <path d="M15 9l-6 6M9 9l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                                    </svg>
+                                </button>
                             </div>
                         </div>
-                        <div id="skills-list" class="skills-list skills-list-with-pagination">
+                        <div id="skills-list" class="skills-grid">
                             <div class="loading-spinner">加载中...</div>
                         </div>
                         <div id="skills-pagination" class="pagination-container pagination-fixed"></div>
@@ -1283,8 +1284,44 @@ version: 1.0.0<br>
             <div class="modal-body create-group-body">
                 <p class="create-group-description">分组功能可将对话集中归类管理，让对话更加井然有序。</p>
                 <div class="create-group-input-wrapper">
-                    <span class="group-icon-input">😊</span>
+                    <button type="button" class="group-icon-input" id="create-group-icon-btn" onclick="toggleGroupIconPicker()" title="点击选择图标">📁</button>
                     <input type="text" id="create-group-name-input" placeholder="请输入分组名称" />
+                    <!-- Emoji选择器面板 -->
+                    <div id="group-icon-picker" class="group-icon-picker" style="display: none;">
+                        <div class="icon-picker-header">
+                            <span>选择图标</span>
+                            <div class="icon-picker-custom">
+                                <input type="text" id="custom-icon-input" class="custom-icon-input" placeholder="自定义" maxlength="2" />
+                                <button type="button" class="custom-icon-btn" onclick="applyCustomIcon()">确定</button>
+                            </div>
+                        </div>
+                        <div class="icon-picker-grid">
+                            <span class="icon-option" onclick="selectGroupIcon('📁')">📁</span>
+                            <span class="icon-option" onclick="selectGroupIcon('🔒')">🔒</span>
+                            <span class="icon-option" onclick="selectGroupIcon('🛡️')">🛡️</span>
+                            <span class="icon-option" onclick="selectGroupIcon('⚔️')">⚔️</span>
+                            <span class="icon-option" onclick="selectGroupIcon('🎯')">🎯</span>
+                            <span class="icon-option" onclick="selectGroupIcon('🔍')">🔍</span>
+                            <span class="icon-option" onclick="selectGroupIcon('💻')">💻</span>
+                            <span class="icon-option" onclick="selectGroupIcon('🐛')">🐛</span>
+                            <span class="icon-option" onclick="selectGroupIcon('🚀')">🚀</span>
+                            <span class="icon-option" onclick="selectGroupIcon('⚡')">⚡</span>
+                            <span class="icon-option" onclick="selectGroupIcon('🔥')">🔥</span>
+                            <span class="icon-option" onclick="selectGroupIcon('💡')">💡</span>
+                            <span class="icon-option" onclick="selectGroupIcon('🎮')">🎮</span>
+                            <span class="icon-option" onclick="selectGroupIcon('🏴‍☠️')">🏴‍☠️</span>
+                            <span class="icon-option" onclick="selectGroupIcon('🕵️')">🕵️</span>
+                            <span class="icon-option" onclick="selectGroupIcon('🔑')">🔑</span>
+                            <span class="icon-option" onclick="selectGroupIcon('📡')">📡</span>
+                            <span class="icon-option" onclick="selectGroupIcon('🌐')">🌐</span>
+                            <span class="icon-option" onclick="selectGroupIcon('📊')">📊</span>
+                            <span class="icon-option" onclick="selectGroupIcon('📝')">📝</span>
+                            <span class="icon-option" onclick="selectGroupIcon('🗂️')">🗂️</span>
+                            <span class="icon-option" onclick="selectGroupIcon('📌')">📌</span>
+                            <span class="icon-option" onclick="selectGroupIcon('⭐')">⭐</span>
+                            <span class="icon-option" onclick="selectGroupIcon('💎')">💎</span>
+                        </div>
+                    </div>
                 </div>
                 <div class="create-group-suggestions">
                     <div class="suggestion-tag" onclick="selectSuggestion('渗透测试')">渗透测试</div>