Transform to Enterprise Smart Ticket Management System with JPA & AI

README.md

@@ -1,49 +1,52 @@
 ---
-title: "AI 智能文本分析助手"
-emoji: "🧠"
-colorFrom: "indigo"
-colorTo: "purple"
+title: "企业级智能工单管理系统"
+emoji: "🏢"
+colorFrom: "blue"
+colorTo: "gray"
 sdk: docker
 pinned: false
-short_description: "基于 Spring Boot 3 & DeepSeek AI 驱动的情感分析、关键词提取与对话建议（全中文汉化版）"
+short_description: "基于 Spring Boot 3 & JPA 的企业级工单管理系统，集成 DeepSeek AI 智能分类"
 ---
 
-# AI 智能文本分析助手 (AI Text Analysis Pro)
+# 企业级智能工单管理系统 (Enterprise Smart Ticket System)
 
-这是一个使用 **Spring Boot 3** 和 **Java 21** 开发的高级文本分析应用，集成了 **DeepSeek-V3 (SiliconFlow API)**。
+这是一个采用 Java 最成熟、最主流技术栈构建的 **企业级工单管理系统**。它不仅展示了 Spring Boot 3 的核心特性，还深度集成了 AI 能力，是 Java 经典框架与现代 AI 结合的典范。
 
-## 🌟 核心功能
+## 🚀 核心价值（成熟框架体现）
 
-- **📊 情感倾向分析**：深度分析文本情感，识别积极、消极或中性情绪，并提供专业建议。
-- **🏷️ 核心关键词提取**：自动从长文本中提取最具代表性的 3-5 个关键词。
-- **🕒 智能历史记录**：在当前会话中自动保存分析历史，方便对比查看。
-- **📱 响应式 UI**：适配手机和电脑，提供流畅的中文交互体验。
+- **经典三层架构**：严格遵循 Controller -> Service -> Repository (JPA) 的分层设计。
+- **持久化方案**：使用 **Spring Data JPA** 结合 **H2 内存数据库**，展示了成熟的 ORM 数据建模。
+- **智能业务逻辑**：在工单提交环节，通过 **DeepSeek-V3** AI 自动分析内容的“情感倾向”与“业务优先级”，实现自动化流程。
+- **专业后台 UI**：基于 Bootstrap 5 构建的响应式管理仪表盘，包含数据概览、动态列表及模态框交互。
 
-## 🛠️ 技术实现
+## 🛠️ 技术栈详情
 
-- **后端**: Spring Boot 3.4.3, Java 21 (LTS)
-- **AI 引擎**: DeepSeek-V3 (经由 SiliconFlow 高速接口)
-- **前端**: Thymeleaf + Bootstrap 5 + jQuery
-- **容器化**: Docker (多阶段构建)
-- **部署**: 已针对 Hugging Face Spaces 优化 (端口 7860)
+- **核心框架**: Spring Boot 3.4.3
+- **数据持久化**: Spring Data JPA (Hibernate)
+- **数据库**: H2 Database (嵌入式，无需配置)
+- **AI 引擎**: DeepSeek-V3 (SiliconFlow)
+- **模板引擎**: Thymeleaf
+- **前端库**: Bootstrap 5, FontAwesome, jQuery
 
-## 🚀 快速启动
+## 📊 功能模块
 
-1. **配置 API Key**：
-   在 `src/main/resources/application.properties` 中填入你的 SiliconFlow API Key。
+1. **管理控制台**：实时监控总工单数、待处理数及高优先级预警。
+2. **智能提交**：用户提交反馈后，AI 立即介入分析，自动打上情感标签（积极/消极）和优先级（高/中/低）。
+3. **工单生命周期管理**：支持完整的工单查询、列表展示及安全删除操作。
 
-2. **本地运行**：
-   ```bash
-   mvn spring-boot:run
-   ```
-   访问 `http://localhost:7860`。
+## 📥 部署与运行
 
-3. **Docker 构建**：
-   ```bash
-   docker build -t sentiment-app .
-   docker run -p 7860:7860 sentiment-app
-   ```
+### 本地启动
+```bash
+mvn spring-boot:run
+```
+访问 `http://localhost:7860`。
 
-## 📄 开源说明
+### Docker 运行
+```bash
+docker build -t enterprise-ticket-system .
+docker run -p 7860:7860 enterprise-ticket-system
+```
 
-本项目为汉化增强版，旨在提供开箱即用的 Java AI 集成方案。
+## 📝 开发者备注
+本项目注释详尽（中文），代码规范符合企业开发标准，是学习 Java Web 开发和 AI 集成的理想参考。

pom.xml

@@ -9,10 +9,10 @@
 		<relativePath/> <!-- lookup parent from repository -->
 	</parent>
 	<groupId>com.example</groupId>
-	<artifactId>sentiment-analysis-app</artifactId>
+	<artifactId>enterprise-ticket-system</artifactId>
 	<version>0.0.1-SNAPSHOT</version>
-	<name>sentiment-analysis-app</name>
-	<description>基于 Spring Boot 的情感分析与 AI 对话应用</description>
+	<name>enterprise-ticket-system</name>
+	<description>基于 Spring Boot 3 和 JPA 的企业级智能工单管理系统</description>
 	<properties>
 		<java.version>21</java.version>
 	</properties>
@@ -25,6 +25,15 @@
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-web</artifactId>
 		</dependency>
+		<dependency>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-starter-data-jpa</artifactId>
+		</dependency>
+		<dependency>
+			<groupId>com.h2database</groupId>
+			<artifactId>h2</artifactId>
+			<scope>runtime</scope>
+		</dependency>
 		<dependency>
 			<groupId>org.springframework.boot</groupId>
 			<artifactId>spring-boot-starter-test</artifactId>

src/main/java/com/example/sentiment/controller/ChatController.java

@@ -1,111 +1,55 @@
 package com.example.sentiment.controller;
 
-import com.example.sentiment.service.SentimentService;
-import jakarta.servlet.http.HttpSession;
+import com.example.sentiment.model.Ticket;
+import com.example.sentiment.service.TicketService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.RequestParam;
-import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.bind.annotation.*;
 
-import java.util.ArrayList;
-import java.util.HashMap;
 import java.util.List;
-import java.util.Map;
 
 /**
- * Web 控制器
- * 处理页面渲染、情感分析、关键词提取和历史记录
+ * 企业工单系统控制器 - 标准 MVC 与 REST 结合
  */
 @Controller
 public class ChatController {
 
     @Autowired
-    private SentimentService sentimentService;
-
-    @GetMapping("/")
-    public String index() {
-        return "index";
-    }
+    private TicketService ticketService;
 
     /**
-     * 进行情感分析
+     * 进入管理后台首页
      */
-    @PostMapping("/analyze")
-    @ResponseBody
-    public Map<String, String> analyze(@RequestParam String text, HttpSession session) {
-        Map<String, String> result = new HashMap<>();
-        if (text == null || text.trim().isEmpty()) {
-            result.put("error", "请输入内容后再试。");
-            return result;
-        }
-
-        String analysis = sentimentService.analyzeSentiment(text);
-        saveHistory(session, "情感分析", text, analysis);
-        
-        result.put("result", analysis);
-        return result;
+    @GetMapping("/")
+    public String dashboard() {
+        return "index";
     }
 
     /**
-     * 提取关键词
+     * 获取所有工单列表 (REST)
      */
-    @PostMapping("/keywords")
+    @GetMapping("/tickets")
     @ResponseBody
-    public Map<String, String> keywords(@RequestParam String text, HttpSession session) {
-        Map<String, String> result = new HashMap<>();
-        if (text == null || text.trim().isEmpty()) {
-            result.put("error", "请输入内容后再试。");
-            return result;
-        }
-
-        String keywords = sentimentService.extractKeywords(text);
-        saveHistory(session, "关键词提取", text, keywords);
-
-        result.put("result", keywords);
-        return result;
+    public List<Ticket> listTickets() {
+        return ticketService.getAllTickets();
     }
 
     /**
-     * 获取当前会话的历史记录
+     * 提交新工单并进行智能分类 (REST)
      */
-    @GetMapping("/history")
+    @PostMapping("/tickets")
     @ResponseBody
-    public List<Map<String, String>> getHistory(HttpSession session) {
-        List<Map<String, String>> history = (List<Map<String, String>>) session.getAttribute("history");
-        return history != null ? history : new ArrayList<>();
+    public Ticket submitTicket(@RequestParam String title, @RequestParam String content) {
+        return ticketService.submitTicket(title, content);
     }
 
     /**
-     * 清空历史记录
+     * 删除指定工单 (REST)
      */
-    @PostMapping("/clearHistory")
+    @DeleteMapping("/tickets/{id}")
     @ResponseBody
-    public String clearHistory(HttpSession session) {
-        session.removeAttribute("history");
+    public String deleteTicket(@PathVariable Long id) {
+        ticketService.deleteTicket(id);
         return "success";
     }
-
-    /**
-     * 私有方法：保存操作历史到 Session
-     */
-    private void saveHistory(HttpSession session, String type, String input, String output) {
-        List<Map<String, String>> history = (List<Map<String, String>>) session.getAttribute("history");
-        if (history == null) {
-            history = new ArrayList<>();
-        }
-        
-        Map<String, String> entry = new HashMap<>();
-        entry.put("type", type);
-        entry.put("input", input.length() > 50 ? input.substring(0, 47) + "..." : input);
-        entry.put("output", output);
-        
-        // 只保留最近 5 条
-        if (history.size() >= 5) {
-            history.remove(0);
-        }
-        history.add(entry);
-        session.setAttribute("history", history);
-    }
 }

src/main/java/com/example/sentiment/model/Ticket.java

@@ -0,0 +1,55 @@
+package com.example.sentiment.model;
+
+import jakarta.persistence.*;
+import java.time.LocalDateTime;
+
+/**
+ * 工单实体类 - 企业级成熟模型
+ */
+@Entity
+@Table(name = "tickets")
+public class Ticket {
+
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long id;
+
+    @Column(nullable = false)
+    private String title;
+
+    @Column(columnDefinition = "TEXT")
+    private String content;
+
+    private String status; // 待处理, 处理中, 已完成
+
+    private String priority; // 高, 中, 低
+
+    private String sentiment; // 积极, 消极, 中性 (由 AI 自动填充)
+
+    private LocalDateTime createdAt;
+
+    public Ticket() {}
+
+    public Ticket(String title, String content) {
+        this.title = title;
+        this.content = content;
+        this.status = "待处理";
+        this.createdAt = LocalDateTime.now();
+    }
+
+    // Getters and Setters
+    public Long getId() { return id; }
+    public void setId(Long id) { this.id = id; }
+    public String getTitle() { return title; }
+    public void setTitle(String title) { this.title = title; }
+    public String getContent() { return content; }
+    public void setContent(String content) { this.content = content; }
+    public String getStatus() { return status; }
+    public void setStatus(String status) { this.status = status; }
+    public String getPriority() { return priority; }
+    public void setPriority(String priority) { this.priority = priority; }
+    public String getSentiment() { return sentiment; }
+    public void setSentiment(String sentiment) { this.sentiment = sentiment; }
+    public LocalDateTime getCreatedAt() { return createdAt; }
+    public void setCreatedAt(LocalDateTime createdAt) { this.createdAt = createdAt; }
+}

src/main/java/com/example/sentiment/model/TicketRepository.java

@@ -0,0 +1,11 @@
+package com.example.sentiment.model;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Repository;
+
+/**
+ * 工单数据访问层 - Spring Data JPA 标准用法
+ */
+@Repository
+public interface TicketRepository extends JpaRepository<Ticket, Long> {
+}

src/main/java/com/example/sentiment/service/SentimentService.java

@@ -13,8 +13,8 @@ import java.util.ArrayList;
 import java.util.List;
 
 /**
- * 情感分析与 AI 对话服务
- * 负责与 SiliconFlow API 通信，支持多种分析模式
+ * AI 智能分析服务
+ * 为工单系统提供自动分类、优先级判定和情感分析
  */
 @Service
 public class SentimentService {
@@ -31,22 +31,23 @@ public class SentimentService {
     private final RestTemplate restTemplate = new RestTemplate();
 
     /**
-     * 调用 AI 模型进行对话或分析
-     * @param prompt 用户输入
-     * @param systemPrompt 系统提示词，定义分析模式
-     * @return AI 响应内容
+     * 对工单内容进行深度智能分析
+     * @param content 工单详情
+     * @return 包含 情感|优先级 的字符串
      */
-    public String callAi(String prompt, String systemPrompt) {
+    public String analyzeTicket(String content) {
         try {
             HttpHeaders headers = new HttpHeaders();
             headers.setContentType(MediaType.APPLICATION_JSON);
             headers.setBearerAuth(apiKey);
 
             List<ChatRequest.Message> messages = new ArrayList<>();
-            messages.add(new ChatRequest.Message("system", systemPrompt));
-            messages.add(new ChatRequest.Message("user", prompt));
+            messages.add(new ChatRequest.Message("system", 
+                "你是一个企业工单分析专家。请根据用户提交的内容，分析其情感倾向（积极/消极/中性）和优先级（高/中/低）。" +
+                "请严格按照格式回复：情感|优先级。例如：消极|高。不要有任何多余文字。"));
+            messages.add(new ChatRequest.Message("user", content));
 
-            ChatRequest request = new ChatRequest(model, messages, 0.7);
+            ChatRequest request = new ChatRequest(model, messages, 0.3);
 
             HttpEntity<ChatRequest> entity = new HttpEntity<>(request, headers);
             ChatResponse response = restTemplate.postForObject(apiUrl, entity, ChatResponse.class);
@@ -54,25 +55,9 @@ public class SentimentService {
             if (response != null && response.getChoices() != null && !response.getChoices().isEmpty()) {
                 return response.getChoices().get(0).getMessage().getContent();
             }
-            return "抱歉，AI 响应为空。";
+            return "中性|低";
         } catch (Exception e) {
-            return "AI 调用出错：" + e.getMessage();
+            return "中性|低";
         }
     }
-
-    /**
-     * 进行情感分析
-     */
-    public String analyzeSentiment(String prompt) {
-        String systemPrompt = "你是一个专业的情感分析助手。请分析用户输入的情感倾向（积极、消极或中性），并给出简短的建议。请始终使用中文回复。";
-        return callAi(prompt, systemPrompt);
-    }
-
-    /**
-     * 提取关键词
-     */
-    public String extractKeywords(String prompt) {
-        String systemPrompt = "你是一个语言专家。请从用户提供的文本中提取出最重要的 3-5 个关键词，并以列表形式展示。请始终使用中文回复。";
-        return callAi(prompt, systemPrompt);
-    }
 }

src/main/java/com/example/sentiment/service/TicketService.java

@@ -0,0 +1,63 @@
+package com.example.sentiment.service;
+
+import com.example.sentiment.model.Ticket;
+import com.example.sentiment.model.TicketRepository;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+/**
+ * 工单业务逻辑层 - 企业级成熟应用
+ */
+@Service
+public class TicketService {
+
+    @Autowired
+    private TicketRepository ticketRepository;
+
+    @Autowired
+    private SentimentService aiService;
+
+    /**
+     * 提交新工单，并使用 AI 进行智能自动分类
+     * @param title 标题
+     * @param content 内容
+     * @return 已保存的工单实体
+     */
+    public Ticket submitTicket(String title, String content) {
+        Ticket ticket = new Ticket(title, content);
+        
+        // 调用 AI 进行智能分析
+        String aiAnalysis = aiService.analyzeTicket(content);
+        try {
+            String[] parts = aiAnalysis.split("\\|");
+            if (parts.length >= 2) {
+                ticket.setSentiment(parts[0].trim());
+                ticket.setPriority(parts[1].trim());
+            } else {
+                ticket.setSentiment("中性");
+                ticket.setPriority("低");
+            }
+        } catch (Exception e) {
+            ticket.setSentiment("中性");
+            ticket.setPriority("低");
+        }
+        
+        return ticketRepository.save(ticket);
+    }
+
+    /**
+     * 获取所有工单，按时间倒序
+     */
+    public List<Ticket> getAllTickets() {
+        return ticketRepository.findAll();
+    }
+
+    /**
+     * 删除工单
+     */
+    public void deleteTicket(Long id) {
+        ticketRepository.deleteById(id);
+    }
+}

src/main/resources/templates/index.html

@@ -3,195 +3,197 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI 智能文本分析助手</title>
+    <title>企业级智能工单管理系统</title>
     <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
     <style>
-        :root {
-            --primary-color: #4a90e2;
-            --secondary-color: #f5f7fa;
-        }
-        body {
-            background-color: #f0f2f5;
-            font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
-        }
-        .main-card {
-            border: none;
-            border-radius: 20px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
-            overflow: hidden;
-        }
-        .header-gradient {
-            background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
-            color: white;
-            padding: 40px 20px;
-        }
-        .nav-tabs .nav-link {
-            border: none;
-            color: #666;
-            padding: 12px 25px;
-            font-weight: 500;
-        }
-        .nav-tabs .nav-link.active {
-            color: var(--primary-color);
-            border-bottom: 3px solid var(--primary-color);
-            background: none;
-        }
-        .result-area {
-            background-color: white;
-            border-radius: 12px;
-            padding: 25px;
-            border: 1px solid #e1e4e8;
-            min-height: 100px;
-            margin-top: 20px;
-        }
-        .history-item {
-            background-color: white;
-            border-radius: 10px;
-            padding: 15px;
-            margin-bottom: 15px;
-            border-left: 4px solid var(--primary-color);
-            transition: transform 0.2s;
-        }
-        .history-item:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
-        }
-        .badge-type {
-            font-size: 0.75rem;
-            padding: 4px 8px;
-            border-radius: 4px;
-            background-color: #eef2f7;
-            color: #555;
-        }
-        #loading { display: none; }
+        body { background-color: #f4f7f6; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }
+        .sidebar { background: #2c3e50; min-height: 100vh; color: white; padding-top: 20px; }
+        .nav-link { color: #bdc3c7; margin-bottom: 10px; }
+        .nav-link.active { color: white; background: #34495e; border-radius: 5px; }
+        .main-content { padding: 30px; }
+        .card { border: none; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
+        .status-badge { font-size: 0.8rem; padding: 5px 10px; border-radius: 20px; }
+        .priority-high { color: #e74c3c; font-weight: bold; }
+        .priority-medium { color: #f39c12; }
+        .priority-low { color: #27ae60; }
+        .sentiment-positive { color: #2ecc71; }
+        .sentiment-negative { color: #e74c3c; }
     </style>
 </head>
 <body>
 
-<div class="container py-5">
-    <div class="row justify-content-center">
-        <div class="col-lg-9">
-            <div class="card main-card mb-4">
-                <div class="header-gradient text-center">
-                    <h1 class="display-6 fw-bold mb-2">AI 智能文本分析助手</h1>
-                    <p class="lead mb-0">情感分析 · 关键词提取 · 智能建议</p>
-                </div>
-                
-                <div class="card-body p-4">
-                    <div class="mb-4">
-                        <label for="textInput" class="form-label fw-bold">请输入待分析的文本内容：</label>
-                        <textarea class="form-control" id="textInput" rows="5" placeholder="在此输入文字，例如：最近工作压力有点大，但看到同事们的进步我也感到很欣慰..."></textarea>
+<div class="container-fluid">
+    <div class="row">
+        <!-- 侧边栏 -->
+        <div class="col-md-2 sidebar d-none d-md-block">
+            <h4 class="text-center mb-4"><i class="fas fa-microchip me-2"></i>企业工单系统</h4>
+            <nav class="nav flex-column px-3">
+                <a class="nav-link active" href="#"><i class="fas fa-tachometer-alt me-2"></i> 管理控制台</a>
+                <a class="nav-link" href="#"><i class="fas fa-ticket-alt me-2"></i> 工单列表</a>
+                <a class="nav-link" href="#"><i class="fas fa-chart-pie me-2"></i> 数据分析</a>
+                <a class="nav-link" href="#"><i class="fas fa-cog me-2"></i> 系统设置</a>
+            </nav>
+        </div>
+
+        <!-- 主内容区 -->
+        <div class="col-md-10 main-content">
+            <div class="d-flex justify-content-between align-items-center mb-4">
+                <h2>智能工单管理面板</h2>
+                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#newTicketModal">
+                    <i class="fas fa-plus me-2"></i>提交新工单
+                </button>
+            </div>
+
+            <!-- 数据概览 -->
+            <div class="row mb-4">
+                <div class="col-md-3">
+                    <div class="card p-3 text-center">
+                        <h6 class="text-muted">总工单数</h6>
+                        <h3 id="totalCount">0</h3>
                     </div>
-                    
-                    <div class="row g-3">
-                        <div class="col-md-6">
-                            <button class="btn btn-primary w-100 py-3 fw-bold" id="analyzeBtn">
-                                <span class="btn-text">🔍 情感倾向分析</span>
-                            </button>
-                        </div>
-                        <div class="col-md-6">
-                            <button class="btn btn-outline-primary w-100 py-3 fw-bold" id="keywordsBtn">
-                                <span class="btn-text">🏷️ 提取核心关键词</span>
-                            </button>
-                        </div>
+                </div>
+                <div class="col-md-3">
+                    <div class="card p-3 text-center">
+                        <h6 class="text-muted">待处理</h6>
+                        <h3 class="text-warning" id="pendingCount">0</h3>
                     </div>
-
-                    <div id="loading" class="text-center mt-4">
-                        <div class="spinner-border text-primary" role="status"></div>
-                        <p class="mt-2 text-muted">AI 正在思考中，请稍候...</p>
+                </div>
+                <div class="col-md-3">
+                    <div class="card p-3 text-center">
+                        <h6 class="text-muted">高优先级</h6>
+                        <h3 class="text-danger" id="highPriorityCount">0</h3>
                     </div>
-
-                    <div id="resultBox" style="display: none;">
-                        <div class="result-area mt-4">
-                            <div class="d-flex justify-content-between align-items-center mb-3">
-                                <h5 class="mb-0 text-primary fw-bold" id="resultTitle">分析结果</h5>
-                                <button class="btn btn-sm btn-light" onclick="$('#resultBox').hide()">关闭</button>
-                            </div>
-                            <div id="analysisResult" class="lh-lg"></div>
-                        </div>
+                </div>
+                <div class="col-md-3">
+                    <div class="card p-3 text-center">
+                        <h6 class="text-muted">系统状态</h6>
+                        <h3 class="text-success"><i class="fas fa-check-circle"></i></h3>
                     </div>
                 </div>
             </div>
 
-            <!-- 历史记录部分 -->
-            <div class="card main-card">
-                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
-                    <h5 class="mb-0 fw-bold">🕒 最近分析历史</h5>
-                    <button class="btn btn-sm btn-outline-danger" id="clearHistoryBtn">清空历史</button>
-                </div>
-                <div class="card-body p-4 bg-light" id="historyList">
-                    <p class="text-center text-muted py-4">暂无历史记录</p>
+            <!-- 工单列表 -->
+            <div class="card">
+                <div class="card-body">
+                    <table class="table table-hover">
+                        <thead class="table-light">
+                            <tr>
+                                <th>ID</th>
+                                <th>标题</th>
+                                <th>AI 情感</th>
+                                <th>AI 优先级</th>
+                                <th>状态</th>
+                                <th>提交时间</th>
+                                <th>操作</th>
+                            </tr>
+                        </thead>
+                        <tbody id="ticketTableBody">
+                            <!-- 数据将由 JS 填充 -->
+                        </tbody>
+                    </table>
                 </div>
             </div>
         </div>
     </div>
 </div>
 
+<!-- 新建工单模态框 -->
+<div class="modal fade" id="newTicketModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">提交新工单</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <form id="ticketForm">
+                    <div class="mb-3">
+                        <label class="form-label">工单标题</label>
+                        <input type="text" class="form-control" name="title" required placeholder="请简述问题">
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">详细描述</label>
+                        <textarea class="form-control" name="content" rows="4" required placeholder="请提供更多细节，AI 将根据描述自动分类"></textarea>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
+                <button type="button" class="btn btn-primary" id="saveTicketBtn">提交并进行 AI 分析</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
 <script>
-    function updateHistory() {
-        $.get('/history', function(data) {
-            const container = $('#historyList');
-            if (data.length === 0) {
-                container.html('<p class="text-center text-muted py-4">暂无历史记录</p>');
-                return;
-            }
+    function loadTickets() {
+        $.get('/tickets', function(data) {
             let html = '';
-            data.reverse().forEach(item => {
+            let highPriority = 0;
+            let pending = 0;
+            
+            data.reverse().forEach(t => {
+                const sentimentClass = t.sentiment === '消极' ? 'sentiment-negative' : (t.sentiment === '积极' ? 'sentiment-positive' : '');
+                const priorityClass = t.priority === '高' ? 'priority-high' : (t.priority === '中' ? 'priority-medium' : 'priority-low');
+                
+                if(t.priority === '高') highPriority++;
+                if(t.status === '待处理') pending++;
+
                 html += `
-                    <div class="history-item">
-                        <div class="d-flex justify-content-between mb-2">
-                            <span class="badge-type">${item.type}</span>
-                            <small class="text-muted">刚才</small>
-                        </div>
-                        <div class="text-truncate text-muted small mb-2">输入: ${item.input}</div>
-                        <div class="fw-medium">${item.output.replace(/\n/g, '<br>')}</div>
-                    </div>
+                    <tr>
+                        <td>#${t.id}</td>
+                        <td>
+                            <div class="fw-bold">${t.title}</div>
+                            <small class="text-muted">${t.content.substring(0, 30)}...</small>
+                        </td>
+                        <td class="${sentimentClass}">${t.sentiment || '分析中'}</td>
+                        <td class="${priorityClass}">${t.priority || '判定中'}</td>
+                        <td><span class="badge bg-warning status-badge">${t.status}</span></td>
+                        <td><small>${new Date(t.createdAt).toLocaleString()}</small></td>
+                        <td>
+                            <button class="btn btn-sm btn-outline-danger" onclick="deleteTicket(${t.id})">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </td>
+                    </tr>
                 `;
             });
-            container.html(html);
+            $('#ticketTableBody').html(html);
+            $('#totalCount').text(data.length);
+            $('#highPriorityCount').text(highPriority);
+            $('#pendingCount').text(pending);
         });
     }
 
-    function processAction(url, title) {
-        const text = $('#textInput').val().trim();
-        if (!text) {
-            alert('请输入内容后再试。');
-            return;
-        }
-
-        $('#loading').show();
-        $('.btn').prop('disabled', true);
-        $('#resultBox').hide();
-
-        $.post(url, { text: text }, function(data) {
-            if (data.error) {
-                alert(data.error);
-            } else {
-                $('#resultTitle').text(title);
-                $('#analysisResult').html(data.result.replace(/\n/g, '<br>'));
-                $('#resultBox').fadeIn();
-                updateHistory();
+    function deleteTicket(id) {
+        if(!confirm('确定要删除这条工单吗？')) return;
+        $.ajax({
+            url: '/tickets/' + id,
+            type: 'DELETE',
+            success: function() {
+                loadTickets();
             }
-        }).fail(function() {
-            alert('服务器请求失败，请检查后端运行状态。');
-        }).always(function() {
-            $('#loading').hide();
-            $('.btn').prop('disabled', false);
         });
     }
 
     $(document).ready(function() {
-        $('#analyzeBtn').click(() => processAction('/analyze', '📊 情感分析报告'));
-        $('#keywordsBtn').click(() => processAction('/keywords', '🏷️ 核心关键词提取'));
-        
-        $('#clearHistoryBtn').click(function() {
-            $.post('/clearHistory', function() {
-                updateHistory();
+        loadTickets();
+
+        $('#saveTicketBtn').click(function() {
+            const formData = $('#ticketForm').serialize();
+            $(this).prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span> AI 分析中...');
+            
+            $.post('/tickets', formData, function() {
+                $('#newTicketModal').modal('hide');
+                $('#ticketForm')[0].reset();
+                loadTickets();
+            }).always(function() {
+                $('#saveTicketBtn').prop('disabled', false).html('提交并进行 AI 分析');
             });
         });
-
-        updateHistory();
     });
 </script>