Home Explore Help
Register Sign In
18879694722
/
ai-salesperson-assistant
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

updata:refact home,training,image web

0235701 4 days ago
parent
7d5634bc42
commit
33af2c7488
23 changed files with 7927 additions and 27 deletions
Split View Show Diff Stats
  1. 21 0
      .hintrc
  2. 16 1
      ai-assisant/angular.json
  3. 1232 0
      ai-assisant/demo/Data.html
  4. 1077 0
      ai-assisant/demo/assistant.html
  5. 1068 0
      ai-assisant/demo/first.html
  6. 570 0
      ai-assisant/demo/photo.html
  7. 1333 0
      ai-assisant/demo/training.html
  8. 107 2
      ai-assisant/package-lock.json
  9. 8 0
      ai-assisant/package.json
  10. 1 1
      ai-assisant/src/app/app.html
  11. 9 1
      ai-assisant/src/app/app.routes.ts
  12. 8 4
      ai-assisant/src/app/app.ts
  13. 3 1
      ai-assisant/src/index.html
  14. 216 1
      ai-assisant/src/modules/crm/mobile/page-crm-home/page-crm-home.html
  15. 594 0
      ai-assisant/src/modules/crm/mobile/page-crm-home/page-crm-home.scss
  16. 139 7
      ai-assisant/src/modules/crm/mobile/page-crm-home/page-crm-home.ts
  17. 88 1
      ai-assisant/src/modules/crm/mobile/page-crm-image/page-crm-image.html
  18. 376 0
      ai-assisant/src/modules/crm/mobile/page-crm-image/page-crm-image.scss
  19. 80 3
      ai-assisant/src/modules/crm/mobile/page-crm-image/page-crm-image.ts
  20. 225 1
      ai-assisant/src/modules/crm/mobile/page-crm-training/page-crm-training.html
  21. 601 0
      ai-assisant/src/modules/crm/mobile/page-crm-training/page-crm-training.scss
  22. 152 4
      ai-assisant/src/modules/crm/mobile/page-crm-training/page-crm-training.ts
  23. 3 0
      ai-assisant/src/styles.scss

+ 21 - 0
.hintrc
View File 

@@ -0,0 +1,21 @@
 
+{
 
+  "extends": [
 
+    "development"
 
+  ],
 
+  "hints": {
 
+    "axe/name-role-value": [
 
+      "default",
 
+      {
 
+        "button-name": "off"
 
+      }
 
+    ],
 
+    "compat-api/css": [
 
+      "default",
 
+      {
 
+        "ignore": [
 
+          "backdrop-filter"
 
+        ]
 
+      }
 
+    ]
 
+  }
 
+}

+ 16 - 1
ai-assisant/angular.json
View File 

@@ -30,6 +30,7 @@
 
               }
 
             ],
 
             "styles": [
 
+              "@angular/material/prebuilt-themes/azure-blue.css",
 
               "src/styles.scss"
 
             ]
 
           },
 
@@ -88,7 +89,21 @@
 
               }
 
             ],
 
             "styles": [
 
-              "src/styles.scss"
 
+              "@angular/material/prebuilt-themes/azure-blue.css",
 
+              "src/styles.scss",
 
+              {
 
+                "input": "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap",
 
+                "inject": true,
 
+                "bundleName": "inter-font"
 
+              }
 
+            ],
 
+            "styles": [
 
+              "src/styles.scss",
 
+            {
 
+            "input": "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap",
 
+             "inject": true,
 
+               "bundleName": "inter-font"
 
+            }
 
             ]
 
           }
 
         }

+ 1232 - 0
ai-assisant/demo/Data.html
View File 

@@ -0,0 +1,1232 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>AI实验室 - 数据训练中心</title>
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
+    <style>
 
+        :root {
 
+            --primary: #4285f4;
 
+            --primary-light: rgba(66, 133, 244, 0.1);
 
+            --primary-dark: #3367d6;
 
+            --text-dark: #0a192f;
 
+            --text-medium: #333333;
 
+            --text-light: #8898aa;
 
+            --background: #ffffff;
 
+            --card-bg: #f8f9fa;
 
+            --border: #e6e9ed;
 
+            --success: #34a853;
 
+            --warning: #fbbc05;
 
+            --error: #ea4335;
 
+            --shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
 
+        }
 
+        
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
 
+        }
 
+        
+        body {
 
+            background-color: #f5f8ff;
 
+            background-image: linear-gradient(135deg, #f5f8ff 0%, #e8ecff 100%);
 
+            color: var(--text-medium);
 
+            line-height: 1.6;
 
+            padding: 16px;
 
+            max-width: 500px;
 
+            margin: 0 auto;
 
+            position: relative;
 
+            min-height: 100vh;
 
+            overflow-x: hidden;
 
+        }
 
+        
+        /* 头部导航 */
 
+        .header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            padding: 16px 0;
 
+            margin-bottom: 20px;
 
+            position: sticky;
 
+            top: 0;
 
+            background: transparent;
 
+            z-index: 100;
 
+        }
 
+        
+        .back-btn {
 
+            width: 40px;
 
+            height: 40px;
 
+            border-radius: 50%;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            background: var(--background);
 
+            border: none;
 
+            color: var(--text-dark);
 
+            font-size: 18px;
 
+            cursor: pointer;
 
+            transition: all 0.3s ease;
 
+            box-shadow: var(--shadow);
 
+        }
 
+        
+        .back-btn:hover {
 
+            background: var(--primary-light);
 
+            color: var(--primary);
 
+        }
 
+        
+        .title {
 
+            font-size: 24px;
 
+            font-weight: 700;
 
+            color: var(--text-dark);
 
+            text-align: center;
 
+            flex-grow: 1;
 
+            text-shadow: 0 2px 4px rgba(0,0,0,0.05);
 
+        }
 
+        
+        /* 卡片样式 */
 
+        .card {
 
+            background: var(--background);
 
+            border-radius: 20px;
 
+            padding: 24px;
 
+            margin-bottom: 20px;
 
+            box-shadow: var(--shadow);
 
+            position: relative;
 
+            overflow: hidden;
 
+            border: 1px solid rgba(66, 133, 244, 0.1);
 
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
 
+        }
 
+        
+        .card:hover {
 
+            transform: translateY(-5px);
 
+            box-shadow: 0 12px 30px rgba(66, 133, 244, 0.15);
 
+        }
 
+        
+        .card-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            margin-bottom: 20px;
 
+        }
 
+        
+        .card-title {
 
+            font-size: 18px;
 
+            font-weight: 700;
 
+            color: var(--text-dark);
 
+        }
 
+        
+        .card-subtitle {
 
+            font-size: 14px;
 
+            color: var(--text-light);
 
+            margin-top: 4px;
 
+        }
 
+        
+        /* 上传控制台 */
 
+        .upload-console {
 
+            position: relative;
 
+            min-height: 220px;
 
+        }
 
+        
+        .source-tags {
 
+            display: flex;
 
+            gap: 10px;
 
+            margin-top: 20px;
 
+            flex-wrap: wrap;
 
+        }
 
+        
+        .source-tag {
 
+            background: #f0f4f8;
 
+            padding: 8px 16px;
 
+            border-radius: 20px;
 
+            font-size: 14px;
 
+            color: var(--text-dark);
 
+            transition: all 0.2s ease;
 
+            border: 1px solid transparent;
 
+            cursor: pointer;
 
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
 
+        }
 
+        
+        .source-tag.active {
 
+            border-color: var(--primary);
 
+            box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.3);
 
+            color: var(--primary);
 
+            font-weight: 600;
 
+            background: rgba(66, 133, 244, 0.08);
 
+        }
 
+        
+        /* 自定义标签区域 */
 
+        .custom-tag-form {
 
+            display: flex;
 
+            margin-top: 25px;
 
+            gap: 10px;
 
+            align-items: center;
 
+        }
 
+        
+        .custom-tag-input {
 
+            flex: 1;
 
+            padding: 12px 18px;
 
+            border-radius: 20px;
 
+            border: 1px solid var(--border);
 
+            outline: none;
 
+            font-size: 14px;
 
+            transition: border-color 0.3s;
 
+            background: var(--card-bg);
 
+            box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
 
+        }
 
+        
+        .custom-tag-input:focus {
 
+            border-color: var(--primary);
 
+            box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
 
+        }
 
+        
+        .add-tag-btn {
 
+            background: var(--primary);
 
+            color: white;
 
+            border: none;
 
+            border-radius: 20px;
 
+            padding: 12px 24px;
 
+            font-size: 14px;
 
+            font-weight: 600;
 
+            cursor: pointer;
 
+            transition: background 0.3s;
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 8px;
 
+            box-shadow: 0 4px 10px rgba(66, 133, 244, 0.3);
 
+        }
 
+        
+        .add-tag-btn:hover {
 
+            background: var(--primary-dark);
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 6px 15px rgba(66, 133, 244, 0.4);
 
+        }
 
+        
+        /* 数据看板 */
 
+        .stats-container {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            gap: 15px;
 
+            margin-top: 15px;
 
+        }
 
+        
+        .stat-item {
 
+            flex: 1;
 
+            text-align: center;
 
+            padding: 15px;
 
+            border-radius: 16px;
 
+            background: var(--background);
 
+            position: relative;
 
+            box-shadow: 0 4px 10px rgba(0,0,0,0.03);
 
+            border: 1px solid rgba(66, 133, 244, 0.08);
 
+        }
 
+        
+        .stat-value {
 
+            font-size: 24px;
 
+            font-weight: 700;
 
+            color: var(--text-dark);
 
+            margin: 10px 0;
 
+        }
 
+        
+        .stat-label {
 
+            font-size: 13px;
 
+            color: var(--text-light);
 
+        }
 
+        
+        .progress-ring {
 
+            position: relative;
 
+            width: 80px;
 
+            height: 80px;
 
+            margin: 0 auto;
 
+        }
 
+        
+        .progress-bg {
 
+            width: 100%;
 
+            height: 100%;
 
+            border-radius: 50%;
 
+            background: conic-gradient(var(--primary) 0% 75%, var(--border) 75% 100%);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+        }
 
+        
+        .progress-inner {
 
+            width: 70px;
 
+            height: 70px;
 
+            border-radius: 50%;
 
+            background: var(--card-bg);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            font-size: 18px;
 
+            font-weight: 700;
 
+            color: var(--text-dark);
 
+        }
 
+        
+        .quality-bar {
 
+            height: 8px;
 
+            background: var(--border);
 
+            border-radius: 4px;
 
+            margin-top: 15px;
 
+            overflow: hidden;
 
+            position: relative;
 
+        }
 
+        
+        .quality-fill {
 
+            height: 100%;
 
+            width: 85%;
 
+            background: linear-gradient(90deg, var(--primary), var(--primary-dark));
 
+            border-radius: 4px;
 
+            position: relative;
 
+        }
 
+        
+        .quality-fill::after {
 
+            content: '';
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background: linear-gradient(90deg, 
+                transparent, 
+                rgba(255, 255, 255, 0.5),
 
+                transparent);
 
+            animation: wave 2s linear infinite;
 
+        }
 
+        
+        @keyframes wave {
 
+            0% { transform: translateX(-100%); }
 
+            100% { transform: translateX(100%); }
 
+        }
 
+        
+        .alert-badge {
 
+            position: absolute;
 
+            top: -8px;
 
+            right: -8px;
 
+            width: 24px;
 
+            height: 24px;
 
+            border-radius: 50%;
 
+            background: var(--error);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            color: white;
 
+            font-size: 12px;
 
+            font-weight: bold;
 
+            animation: pulse 1.5s infinite;
 
+        }
 
+        
+        @keyframes pulse {
 
+            0% { box-shadow: 0 0 0 0 rgba(234, 67, 53, 0.7); }
 
+            70% { box-shadow: 0 0 0 8px rgba(234, 67, 53, 0); }
 
+            100% { box-shadow: 0 0 0 0 rgba(234, 67, 53, 0); }
 
+        }
 
+        
+        /* 训练结果展示 */
 
+        .training-results {
 
+            margin-top: 25px;
 
+        }
 
+        
+        .result-item {
 
+            display: flex;
 
+            align-items: center;
 
+            padding: 15px 0;
 
+            border-bottom: 1px solid var(--border);
 
+            transition: all 0.2s ease;
 
+        }
 
+        
+        .result-item:hover {
 
+            background: rgba(66, 133, 244, 0.03);
 
+            border-radius: 12px;
 
+            padding: 15px;
 
+        }
 
+        
+        .result-item:last-child {
 
+            border-bottom: none;
 
+        }
 
+        
+        .result-icon {
 
+            width: 40px;
 
+            height: 40px;
 
+            border-radius: 12px;
 
+            background: var(--primary-light);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            color: var(--primary);
 
+            margin-right: 15px;
 
+            font-size: 18px;
 
+        }
 
+        
+        .result-content {
 
+            flex: 1;
 
+        }
 
+        
+        .result-title {
 
+            font-weight: 600;
 
+            color: var(--text-dark);
 
+            margin-bottom: 4px;
 
+        }
 
+        
+        .result-meta {
 
+            display: flex;
 
+            font-size: 13px;
 
+            color: var(--text-light);
 
+            flex-wrap: wrap;
 
+            gap: 10px;
 
+        }
 
+        
+        .result-date {
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 5px;
 
+        }
 
+        
+        .result-status {
 
+            padding: 4px 10px;
 
+            border-radius: 20px;
 
+            font-size: 12px;
 
+            font-weight: 600;
 
+        }
 
+        
+        .status-completed {
 
+            background: rgba(52, 168, 83, 0.1);
 
+            color: var(--success);
 
+        }
 
+        
+        .status-training {
 
+            background: rgba(251, 188, 5, 0.1);
 
+            color: var(--warning);
 
+        }
 
+        
+        .status-error {
 
+            background: rgba(234, 67, 53, 0.1);
 
+            color: var(--error);
 
+        }
 
+        
+        /* 数据记录部分 */
 
+        .data-record {
 
+            margin-top: 25px;
 
+        }
 
+        
+        .record-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            margin-bottom: 15px;
 
+        }
 
+        
+        .view-all {
 
+            color: var(--primary);
 
+            font-size: 14px;
 
+            text-decoration: none;
 
+            cursor: pointer;
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 5px;
 
+        }
 
+        
+        .record-list {
 
+            display: grid;
 
+            grid-template-columns: repeat(2, 1fr);
 
+            gap: 15px;
 
+        }
 
+        
+        .record-item {
 
+            background: var(--card-bg);
 
+            border-radius: 16px;
 
+            padding: 15px;
 
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
 
+            border: 1px solid rgba(66, 133, 244, 0.08);
 
+            transition: all 0.3s ease;
 
+        }
 
+        
+        .record-item:hover {
 
+            transform: translateY(-3px);
 
+            box-shadow: 0 6px 15px rgba(66, 133, 244, 0.15);
 
+        }
 
+        
+        .record-title {
 
+            font-size: 14px;
 
+            font-weight: 600;
 
+            color: var(--text-dark);
 
+            margin-bottom: 10px;
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 5px;
 
+        }
 
+        
+        .record-value {
 
+            font-size: 22px;
 
+            font-weight: 700;
 
+            color: var(--primary);
 
+        }
 
+        
+        .record-trend {
 
+            display: flex;
 
+            align-items: center;
 
+            font-size: 12px;
 
+            margin-top: 5px;
 
+        }
 
+        
+        .trend-up {
 
+            color: var(--success);
 
+        }
 
+        
+        .trend-down {
 
+            color: var(--error);
 
+        }
 
+        
+        .trend-icon {
 
+            margin-right: 4px;
 
+        }
 
+        
+        /* 历史数据记录 */
 
+        .history-list {
 
+            max-height: 200px;
 
+            overflow-y: auto;
 
+            padding-right: 8px;
 
+        }
 
+        
+        .history-item {
 
+            display: flex;
 
+            align-items: center;
 
+            padding: 12px 0;
 
+            border-bottom: 1px solid var(--border);
 
+            transition: all 0.2s ease;
 
+        }
 
+        
+        .history-item:hover {
 
+            background: rgba(66, 133, 244, 0.03);
 
+            border-radius: 12px;
 
+            padding: 12px;
 
+        }
 
+        
+        .history-icon {
 
+            width: 36px;
 
+            height: 36px;
 
+            border-radius: 10px;
 
+            background: var(--primary-light);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            color: var(--primary);
 
+            margin-right: 12px;
 
+            font-size: 16px;
 
+        }
 
+        
+        .history-content {
 
+            flex: 1;
 
+        }
 
+        
+        .history-name {
 
+            font-weight: 500;
 
+            margin-bottom: 4px;
 
+        }
 
+        
+        .history-meta {
 
+            display: flex;
 
+            font-size: 12px;
 
+            color: var(--text-light);
 
+            gap: 15px;
 
+        }
 
+        
+        .history-size {
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 3px;
 
+        }
 
+        
+        .history-date {
 
+            color: var(--text-medium);
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 3px;
 
+        }
 
+        
+        /* 页面标题装饰 */
 
+        .page-header {
 
+            text-align: center;
 
+            margin-bottom: 25px;
 
+        }
 
+        
+        .page-title {
 
+            font-size: 28px;
 
+            font-weight: 800;
 
+            color: var(--text-dark);
 
+            margin-bottom: 8px;
 
+            background: linear-gradient(90deg, #3367d6, #4285f4);
 
+            -webkit-background-clip: text;
 
+            -webkit-text-fill-color: transparent;
 
+            position: relative;
 
+            display: inline-block;
 
+        }
 
+        
+        .page-subtitle {
 
+            color: var(--text-light);
 
+            font-size: 16px;
 
+            max-width: 300px;
 
+            margin: 0 auto;
 
+        }
 
+        
+        /* 装饰元素 */
 
+        .decor-circle {
 
+            position: absolute;
 
+            width: 200px;
 
+            height: 200px;
 
+            border-radius: 50%;
 
+            background: linear-gradient(135deg, rgba(66, 133, 244, 0.1) 0%, rgba(66, 133, 244, 0.05) 100%);
 
+            z-index: -1;
 
+        }
 
+        
+        .circle-1 {
 
+            top: 10%;
 
+            left: -50px;
 
+        }
 
+        
+        .circle-2 {
 
+            bottom: 10%;
 
+            right: -50px;
 
+        }
 
+        
+        /* 新增搜索框样式 */
 
+        .search-container {
 
+            margin-bottom: 20px;
 
+            position: relative;
 
+        }
 
+        
+        .search-box {
 
+            display: flex;
 
+            align-items: center;
 
+            background: var(--card-bg);
 
+            border-radius: 30px;
 
+            padding: 8px 16px;
 
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 
+            border: 1px solid var(--border);
 
+        }
 
+        
+        .search-box i {
 
+            color: var(--text-light);
 
+            margin-right: 10px;
 
+            font-size: 18px;
 
+        }
 
+        
+        .search-input {
 
+            flex: 1;
 
+            border: none;
 
+            background: transparent;
 
+            padding: 10px 0;
 
+            font-size: 15px;
 
+            color: var(--text-dark);
 
+            outline: none;
 
+        }
 
+        
+        .search-input::placeholder {
 
+            color: var(--text-light);
 
+        }
 
+        
+        /* 上传控制台新样式 */
 
+        .upload-method-selector {
 
+            margin: 25px 0;
 
+        }
 
+        
+        .method-title {
 
+            font-size: 16px;
 
+            font-weight: 600;
 
+            margin-bottom: 12px;
 
+            color: var(--text-dark);
 
+        }
 
+        
+        .method-options {
 
+            display: flex;
 
+            gap: 15px;
 
+            flex-wrap: wrap;
 
+        }
 
+        
+        .method-option {
 
+            flex: 1;
 
+            min-width: 100px;
 
+            padding: 15px;
 
+            background: var(--card-bg);
 
+            border-radius: 16px;
 
+            text-align: center;
 
+            cursor: pointer;
 
+            transition: all 0.3s ease;
 
+            border: 1px solid var(--border);
 
+        }
 
+        
+        .method-option:hover {
 
+            transform: translateY(-3px);
 
+            box-shadow: 0 6px 15px rgba(66, 133, 244, 0.1);
 
+        }
 
+        
+        .method-option.active {
 
+            border-color: var(--primary);
 
+            background: var(--primary-light);
 
+            color: var(--primary);
 
+            font-weight: 600;
 
+        }
 
+        
+        .method-icon {
 
+            font-size: 24px;
 
+            margin-bottom: 10px;
 
+            color: var(--primary);
 
+        }
 
+        
+        .upload-action {
 
+            display: flex;
 
+            justify-content: center;
 
+            margin-top: 15px;
 
+        }
 
+        
+        .upload-button {
 
+            background: var(--primary);
 
+            color: white;
 
+            border: none;
 
+            border-radius: 30px;
 
+            padding: 15px 40px;
 
+            font-size: 16px;
 
+            font-weight: 600;
 
+            cursor: pointer;
 
+            transition: all 0.3s ease;
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 10px;
 
+            box-shadow: 0 6px 15px rgba(66, 133, 244, 0.3);
 
+        }
 
+        
+        .upload-button:hover {
 
+            background: var(--primary-dark);
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 8px 20px rgba(66, 133, 244, 0.4);
 
+        }
 
+        
+        .upload-button:active {
 
+            transform: translateY(0);
 
+        }
 
+        
+        /* 上传状态指示器 */
 
+        .upload-status {
 
+            margin-top: 20px;
 
+            padding: 15px;
 
+            border-radius: 16px;
 
+            background: rgba(52, 168, 83, 0.1);
 
+            color: var(--success);
 
+            text-align: center;
 
+            display: none;
 
+        }
 
+        
+        .upload-status.error {
 
+            background: rgba(234, 67, 53, 0.1);
 
+            color: var(--error);
 
+        }
 
+        
+        .upload-progress {
 
+            height: 6px;
 
+            background: var(--border);
 
+            border-radius: 3px;
 
+            margin-top: 10px;
 
+            overflow: hidden;
 
+        }
 
+        
+        .progress-bar {
 
+            height: 100%;
 
+            width: 0%;
 
+            background: linear-gradient(90deg, var(--primary), var(--primary-dark));
 
+            border-radius: 3px;
 
+            transition: width 0.3s ease;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="decor-circle circle-1"></div>
 
+    <div class="decor-circle circle-2"></div>
 
+    
+    <!-- 顶部导航 -->
 
+    <div class="header">
 
+        <button class="back-btn">
 
+            <i class="fas fa-arrow-left"></i>
 
+        </button>
 
+        <h1 class="title">数据训练中心</h1>
 
+    </div>
 
+    
+    <div class="page-header">
 
+        <h1 class="page-title">AI数据训练中心</h1>
 
+        <p class="page-subtitle">上传数据、训练模型、优化结果</p>
 
+    </div>
 
+    
+    <!-- 上传控制台 -->
 
+    <div class="card upload-console">
 
+        <div class="card-header">
 
+            <div>
 
+                <div class="card-title">上传控制台</div>
 
+                <div class="card-subtitle">选择数据类型和输入方式</div>
 
+            </div>
 
+        </div>
 
+        
+        <div class="source-tags" id="sourceTags">
 
+            <div class="source-tag active">会议记录</div>
 
+            <div class="source-tag">客户合同</div>
 
+            <div class="source-tag">反馈表</div>
 
+            <div class="source-tag">培训资料</div>
 
+        </div>
 
+        
+        <div class="custom-tag-form">
 
+            <input type="text" class="custom-tag-input" id="customTagInput" placeholder="输入新数据类型...">
 
+            <button class="add-tag-btn" id="addTagBtn">
 
+                添加标签
 
+            </button>
 
+        </div>
 
+        
+        <div class="upload-method-selector">
 
+            <div class="method-title">选择输入方式</div>
 
+            <div class="method-options" id="methodOptions">
 
+                <div class="method-option" data-method="camera">
 
+                    <div class="method-icon">
 
+                        <i class="fas fa-camera"></i>
 
+                    </div>
 
+                    <div>拍照</div>
 
+                </div>
 
+                <div class="method-option" data-method="file">
 
+                    <div class="method-icon">
 
+                        <i class="fas fa-file"></i>
 
+                    </div>
 
+                    <div>文件</div>
 
+                </div>
 
+                <div class="method-option" data-method="mic">
 
+                    <div class="method-icon">
 
+                        <i class="fas fa-microphone"></i>
 
+                    </div>
 
+                    <div>录音</div>
 
+                </div>
 
+                <div class="method-option" data-method="text">
 
+                    <div class="method-icon">
 
+                        <i class="fas fa-keyboard"></i>
 
+                    </div>
 
+                    <div>文本</div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <div class="upload-action">
 
+            <button class="upload-button" id="uploadButton">
 
+                <i class="fas fa-cloud-upload-alt"></i> 上传数据
 
+            </button>
 
+        </div>
 
+        
+        <div class="upload-status" id="uploadStatus">
 
+            <div>数据上传中...</div>
 
+            <div class="upload-progress">
 
+                <div class="progress-bar" id="progressBar"></div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 数据看板 -->
 
+    <div class="card">
 
+        <div class="card-header">
 
+            <div>
 
+                <div class="card-title">数据看板</div>
 
+                <div class="card-subtitle">今日处理状态</div>
 
+            </div>
 
+            <div class="alert-badge">3</div>
 
+        </div>
 
+        
+        <div class="stats-container">
 
+            <div class="stat-item">
 
+                <div class="progress-ring">
 
+                    <div class="progress-bg">
 
+                        <div class="progress-inner">128</div>
 
+                    </div>
 
+                </div>
 
+                <div class="stat-label">处理量</div>
 
+            </div>
 
+            
+            <div class="stat-item">
 
+                <div class="stat-value">85%</div>
 
+                <div class="stat-label">质量评分</div>
 
+                <div class="quality-bar">
 
+                    <div class="quality-fill"></div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 每日数据记录 -->
 
+        <div class="data-record">
 
+            <div class="record-header">
 
+                <div class="card-title">每日数据记录</div>
 
+                <a class="view-all">
 
+                    查看全部 <i class="fas fa-arrow-right"></i>
 
+                </a>
 
+            </div>
 
+            
+            <div class="record-list">
 
+                <div class="record-item">
 
+                    <div class="record-title"><i class="fas fa-file-medical"></i> 新增数据</div>
 
+                    <div class="record-value">42</div>
 
+                    <div class="record-trend trend-up">
 
+                        <i class="fas fa-arrow-up trend-icon"></i> 12%
 
+                    </div>
 
+                </div>
 
+                
+                <div class="record-item">
 
+                    <div class="record-title"><i class="fas fa-cogs"></i> 处理中</div>
 
+                    <div class="record-value">18</div>
 
+                    <div class="record-trend trend-down">
 
+                        <i class="fas fa-arrow-down trend-icon"></i> 5%
 
+                    </div>
 
+                </div>
 
+                
+                <div class="record-item">
 
+                    <div class="record-title"><i class="fas fa-clock"></i> 训练时间</div>
 
+                    <div class="record-value">1.8h</div>
 
+                    <div class="record-trend trend-up">
 
+                        <i class="fas fa-arrow-up trend-icon"></i> 23%
 
+                    </div>
 
+                </div>
 
+                
+                <div class="record-item">
 
+                    <div class="record-title"><i class="fas fa-check-circle"></i> 完成率</div>
 
+                    <div class="record-value">76%</div>
 
+                    <div class="record-trend trend-up">
 
+                        <i class="fas fa-arrow-up trend-icon"></i> 8%
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 历史数据上传记录 -->
 
+    <div class="card">
 
+        <div class="card-header">
 
+            <div>
 
+                <div class="card-title">历史数据上传记录</div>
 
+                <div class="card-subtitle">最近上传的文件</div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 搜索区域 -->
 
+        <div class="search-container">
 
+            <div class="search-box">
 
+                <i class="fas fa-search"></i>
 
+                <input type="text" class="search-input" id="searchInput" placeholder="搜索文件名、类型或日期...">
 
+            </div>
 
+        </div>
 
+        
+        <div class="history-list" id="historyList">
 
+            <div class="history-item">
 
+                <div class="history-icon">
 
+                    <i class="fas fa-file-pdf"></i>
 
+                </div>
 
+                <div class="history-content">
 
+                    <div class="history-name">Q3销售报告.pdf</div>
 
+                    <div class="history-meta">
 
+                        <div class="history-size">
 
+                            <i class="fas fa-database"></i> 4.2MB
 
+                        </div>
 
+                        <div class="history-date">
 
+                            <i class="far fa-calendar"></i> 2023-10-15
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <div class="history-item">
 
+                <div class="history-icon">
 
+                    <i class="fas fa-file-excel"></i>
 
+                </div>
 
+                <div class="history-content">
 
+                    <div class="history-name">客户数据.xlsx</div>
 
+                    <div class="history-meta">
 
+                        <div class="history-size">
 
+                            <i class="fas fa-database"></i> 3.1MB
 
+                        </div>
 
+                        <div class="history-date">
 
+                            <i class="far fa-calendar"></i> 2023-10-14
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <div class="history-item">
 
+                <div class="history-icon">
 
+                    <i class="fas fa-file-word"></i>
 
+                </div>
 
+                <div class="history-content">
 
+                    <div class="history-name">会议纪要.docx</div>
 
+                    <div class="history-meta">
 
+                        <div class="history-size">
 
+                            <i class="fas fa-database"></i> 1.7MB
 
+                        </div>
 
+                        <div class="history-date">
 
+                            <i class="far fa-calendar"></i> 2023-10-13
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <div class="history-item">
 
+                <div class="history-icon">
 
+                    <i class="fas fa-file-csv"></i>
 
+                </div>
 
+                <div class="history-content">
 
+                    <div class="history-name">用户反馈.csv</div>
 
+                    <div class="history-meta">
 
+                        <div class="history-size">
 
+                            <i class="fas fa-database"></i> 2.3MB
 
+                        </div>
 
+                        <div class="history-date">
 
+                            <i class="far fa-calendar"></i> 2023-10-12
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 训练结果展示 -->
 
+    <div class="card">
 
+        <div class="card-header">
 
+            <div>
 
+                <div class="card-title">训练结果展示</div>
 
+                <div class="card-subtitle">模型训练状态与结果</div>
 
+            </div>
 
+        </div>
 
+        
+        <div class="training-results">
 
+            <div class="result-item">
 
+                <div class="result-icon">
 
+                    <i class="fas fa-brain"></i>
 
+                </div>
 
+                <div class="result-content">
 
+                    <div class="result-title">销售预测模型</div>
 
+                    <div class="result-meta">
 
+                        <div class="result-date">
 
+                            <i class="far fa-clock"></i> 训练时间: 2.3小时
 
+                        </div>
 
+                        <div class="result-status status-completed">已完成</div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <div class="result-item">
 
+                <div class="result-icon">
 
+                    <i class="fas fa-comments"></i>
 
+                </div>
 
+                <div class="result-content">
 
+                    <div class="result-title">情感分析模型</div>
 
+                    <div class="result-meta">
 
+                        <div class="result-date">
 
+                            <i class="far fa-clock"></i> 训练时间: 1.5小时
 
+                        </div>
 
+                        <div class="result-status status-training">训练中</div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <div class="result-item">
 
+                <div class="result-icon">
 
+                    <i class="fas fa-chart-line"></i>
 
+                </div>
 
+                <div class="result-content">
 
+                    <div class="result-title">趋势预测模型</div>
 
+                    <div class="result-meta">
 
+                        <div class="result-date">
 
+                            <i class="far fa-clock"></i> 训练时间: 3.1小时
 
+                        </div>
 
+                        <div class="result-status status-completed">已完成</div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <div class="result-item">
 
+                <div class="result-icon">
 
+                    <i class="fas fa-robot"></i>
 
+                </div>
 
+                <div class="result-content">
 
+                    <div class="result-title">客户服务模型</div>
 
+                    <div class="result-meta">
 
+                        <div class="result-date">
 
+                            <i class="far fa-clock"></i> 训练时间: 4.2小时
 
+                        </div>
 
+                        <div class="result-status status-error">失败</div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+
 
+    <script>
 
+        // 标签选择交互
 
+        const tags = document.querySelectorAll('.source-tag');
 
+        tags.forEach(tag => {
 
+            tag.addEventListener('click', function() {
 
+                tags.forEach(t => t.classList.remove('active'));
 
+                this.classList.add('active');
 
+            });
 
+        });
 
+        
+        // 添加自定义标签
 
+        const addTagBtn = document.getElementById('addTagBtn');
 
+        const customTagInput = document.getElementById('customTagInput');
 
+        const sourceTags = document.getElementById('sourceTags');
 
+        
+        addTagBtn.addEventListener('click', function() {
 
+            const tagText = customTagInput.value.trim();
 
+            if (tagText) {
 
+                const newTag = document.createElement('div');
 
+                newTag.className = 'source-tag';
 
+                newTag.textContent = tagText;
 
+                
+                // 添加点击事件
 
+                newTag.addEventListener('click', function() {
 
+                    tags.forEach(t => t.classList.remove('active'));
 
+                    this.classList.add('active');
 
+                });
 
+                
+                sourceTags.appendChild(newTag);
 
+                customTagInput.value = '';
 
+                
+                // 添加动画效果
 
+                newTag.style.opacity = '0';
 
+                newTag.style.transform = 'scale(0.8)';
 
+                setTimeout(() => {
 
+                    newTag.style.transition = 'all 0.3s ease';
 
+                    newTag.style.opacity = '1';
 
+                    newTag.style.transform = 'scale(1)';
 
+                }, 10);
 
+            }
 
+        });
 
+        
+        // 按Enter键添加标签
 
+        customTagInput.addEventListener('keypress', function(e) {
 
+            if (e.key === 'Enter') {
 
+                addTagBtn.click();
 
+            }
 
+        });
 
+        
+        // 输入方式选择
 
+        const methodOptions = document.querySelectorAll('.method-option');
 
+        methodOptions.forEach(option => {
 
+            option.addEventListener('click', function() {
 
+                methodOptions.forEach(opt => opt.classList.remove('active'));
 
+                this.classList.add('active');
 
+            });
 
+        });
 
+        
+        // 上传按钮功能
 
+        const uploadButton = document.getElementById('uploadButton');
 
+        const uploadStatus = document.getElementById('uploadStatus');
 
+        const progressBar = document.getElementById('progressBar');
 
+        
+        uploadButton.addEventListener('click', function() {
 
+            // 获取选中的标签
 
+            const selectedTag = document.querySelector('.source-tag.active').textContent;
 
+            
+            // 获取选中的输入方式
 
+            const selectedMethod = document.querySelector('.method-option.active');
 
+            const methodName = selectedMethod ? selectedMethod.querySelector('div:last-child').textContent : '未选择';
 
+            
+            // 显示上传状态
 
+            uploadStatus.style.display = 'block';
 
+            uploadStatus.innerHTML = `<div>正在上传: ${selectedTag} (方式: ${methodName})</div>
 
+                                       <div class="upload-progress">
 
+                                         <div class="progress-bar" id="progressBar"></div>
 
+                                       </div>`;
 
+            
+            // 模拟上传进度
 
+            let progress = 0;
 
+            const interval = setInterval(() => {
 
+                progress += Math.floor(Math.random() * 10);
 
+                if (progress >= 100) {
 
+                    progress = 100;
 
+                    clearInterval(interval);
 
+                    
+                    // 上传完成
 
+                    setTimeout(() => {
 
+                        uploadStatus.innerHTML = `<div><i class="fas fa-check-circle"></i> 上传成功: ${selectedTag} (方式: ${methodName})</div>`;
 
+                        
+                        // 添加新项目到历史记录
 
+                        const historyList = document.getElementById('historyList');
 
+                        const newItem = document.createElement('div');
 
+                        newItem.className = 'history-item';
 
+                        newItem.innerHTML = `
 
+                            <div class="history-icon">
 
+                                <i class="fas fa-file-alt"></i>
 
+                            </div>
 
+                            <div class="history-content">
 
+                                <div class="history-name">${selectedTag}.${getFileExtension(methodName)}</div>
 
+                                <div class="history-meta">
 
+                                    <div class="history-size">
 
+                                        <i class="fas fa-database"></i> ${(Math.random() * 5).toFixed(1)}MB
 
+                                    </div>
 
+                                    <div class="history-date">
 
+                                        <i class="far fa-calendar"></i> ${getCurrentDate()}
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                        `;
 
+                        historyList.insertBefore(newItem, historyList.firstChild);
 
+                        
+                        // 3秒后隐藏状态
 
+                        setTimeout(() => {
 
+                            uploadStatus.style.display = 'none';
 
+                        }, 3000);
 
+                    }, 500);
 
+                }
 
+                
+                // 更新进度条
 
+                progressBar.style.width = `${progress}%`;
 
+            }, 200);
 
+        });
 
+        
+        // 获取文件扩展名
 
+        function getFileExtension(method) {
 
+            switch(method) {
 
+                case '拍照': return 'jpg';
 
+                case '文件': return 'pdf';
 
+                case '录音': return 'mp3';
 
+                case '文本': return 'txt';
 
+                default: return 'dat';
 
+            }
 
+        }
 
+        
+        // 获取当前日期
 
+        function getCurrentDate() {
 
+            const now = new Date();
 
+            const year = now.getFullYear();
 
+            const month = String(now.getMonth() + 1).padStart(2, '0');
 
+            const day = String(now.getDate()).padStart(2, '0');
 
+            return `${year}-${month}-${day}`;
 
+        }
 
+        
+        // 历史记录搜索功能
 
+        const searchInput = document.getElementById('searchInput');
 
+        const historyItems = document.querySelectorAll('.history-item');
 
+        
+        searchInput.addEventListener('input', function() {
 
+            const searchTerm = this.value.toLowerCase();
 
+            
+            historyItems.forEach(item => {
 
+                const fileName = item.querySelector('.history-name').textContent.toLowerCase();
 
+                if (fileName.includes(searchTerm)) {
 
+                    item.style.display = 'flex';
 
+                } else {
 
+                    item.style.display = 'none';
 
+                }
 
+            });
 
+        });
 
+        
+        // 模拟每日数据更新
 
+        setInterval(() => {
 
+            const valueElements = document.querySelectorAll('.record-value');
 
+            valueElements.forEach(el => {
 
+                const currentValue = parseInt(el.textContent) || 0;
 
+                const change = Math.floor(Math.random() * 5) - 2; // -2 到 2 之间的随机数
 
+                const newValue = Math.max(0, currentValue + change);
 
+                el.textContent = newValue;
 
+            });
 
+        }, 5000);
 
+    </script>
 
+</body>
 
+</html>

+ 1077 - 0
ai-assisant/demo/assistant.html
View File 

@@ -0,0 +1,1077 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>话术决策助手 - AI实验室</title>
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
+    <style>
 
+        :root {
 
+            --primary: #64a0ff;
 
+            --primary-light: rgba(100, 160, 255, 0.1);
 
+            --dark: #0a192f;
 
+            --dark-light: #112240;
 
+            --gray: #8892b0;
 
+            --light-gray: #f8f9fa;
 
+            --white: #ffffff;
 
+            --blue: #64a0ff;
 
+            --blue-light: rgba(100, 160, 255, 0.15);
 
+            --yellow: #ffd43b;
 
+            --orange: #ff922b;
 
+            --purple: #9c36b5;
 
+            --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
 
+            --shadow-primary: 0 4px 20px rgba(100, 160, 255, 0.2);
 
+        }
 
+        
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
 
+        }
 
+        
+        body {
 
+            background-color: #f0f5ff;
 
+            color: var(--dark);
 
+            line-height: 1.6;
 
+            overflow-x: hidden;
 
+            background: linear-gradient(135deg, #e6f0ff 0%, #f5f9ff 100%);
 
+            min-height: 100vh;
 
+            padding: 20px 0;
 
+        }
 
+        
+        .container {
 
+            max-width: 480px;
 
+            margin: 0 auto;
 
+            padding: 0 16px 30px;
 
+            position: relative;
 
+        }
 
+        
+        /* 顶部导航 */
 
+        .app-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            padding: 15px 0;
 
+            margin-bottom: 15px;
 
+            border-bottom: 1px solid rgba(10, 25, 47, 0.05);
 
+        }
 
+        
+        .header-title {
 
+            font-size: 22px;
 
+            font-weight: 700;
 
+            color: var(--dark);
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 10px;
 
+        }
 
+        
+        .header-title i {
 
+            color: var(--primary);
 
+            background: var(--primary-light);
 
+            width: 36px;
 
+            height: 36px;
 
+            border-radius: 10px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+        }
 
+        
+        /* 场景选择 */
 
+        .scene-selector {
 
+            background: var(--white);
 
+            border-radius: 20px;
 
+            padding: 20px;
 
+            margin-bottom: 20px;
 
+            box-shadow: var(--shadow);
 
+            position: relative;
 
+            overflow: hidden;
 
+            border: 1px solid rgba(100, 160, 255, 0.2);
 
+        }
 
+        
+        .scene-options {
 
+            display: flex;
 
+            gap: 15px;
 
+            margin-top: 10px;
 
+        }
 
+        
+        .scene-option {
 
+            flex: 1;
 
+            padding: 15px;
 
+            border-radius: 15px;
 
+            background: var(--light-gray);
 
+            text-align: center;
 
+            cursor: pointer;
 
+            transition: all 0.3s ease;
 
+            border: 1px solid rgba(100, 160, 255, 0.1);
 
+        }
 
+        
+        .scene-option.active {
 
+            background: var(--primary-light);
 
+            border-color: var(--primary);
 
+            box-shadow: var(--shadow-primary);
 
+        }
 
+        
+        .scene-option i {
 
+            font-size: 28px;
 
+            margin-bottom: 10px;
 
+            color: var(--primary);
 
+        }
 
+        
+        .scene-option h3 {
 
+            font-size: 16px;
 
+            margin-bottom: 5px;
 
+        }
 
+        
+        .scene-option p {
 
+            font-size: 13px;
 
+            color: var(--gray);
 
+        }
 
+        
+        /* 对话聊天区 */
 
+        .chat-area {
 
+            background: var(--white);
 
+            border-radius: 20px;
 
+            padding: 20px;
 
+            margin-bottom: 20px;
 
+            box-shadow: var(--shadow);
 
+            height: 350px;
 
+            overflow-y: auto;
 
+            display: flex;
 
+            flex-direction: column;
 
+            gap: 15px;
 
+            border: 1px solid rgba(100, 160, 255, 0.2);
 
+        }
 
+        
+        .chat-title {
 
+            font-size: 18px;
 
+            font-weight: 600;
 
+            margin-bottom: 15px;
 
+            color: var(--dark);
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 10px;
 
+            padding-bottom: 10px;
 
+            border-bottom: 1px solid rgba(100, 160, 255, 0.1);
 
+        }
 
+        
+        .chat-title i {
 
+            color: var(--primary);
 
+        }
 
+        
+        .chat-message {
 
+            max-width: 85%;
 
+            padding: 14px 18px;
 
+            border-radius: 18px;
 
+            position: relative;
 
+            animation: fadeIn 0.3s ease;
 
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 
+        }
 
+        
+        @keyframes fadeIn {
 
+            from { opacity: 0; transform: translateY(10px); }
 
+            to { opacity: 1; transform: translateY(0); }
 
+        }
 
+        
+        .customer-message {
 
+            background: linear-gradient(135deg, #e6f0ff, #ebf2ff);
 
+            align-self: flex-start;
 
+            border-bottom-left-radius: 5px;
 
+            border-left: 3px solid var(--blue);
 
+        }
 
+        
+        .assistant-message {
 
+            background: linear-gradient(135deg, #e6f7ff, #ebf9ff);
 
+            border: 1px solid rgba(100, 160, 255, 0.3);
 
+            align-self: flex-end;
 
+            border-bottom-right-radius: 5px;
 
+            border-right: 3px solid var(--primary);
 
+        }
 
+        
+        .message-header {
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 8px;
 
+            margin-bottom: 8px;
 
+            font-weight: 600;
 
+        }
 
+        
+        .customer-header .icon {
 
+            background: var(--blue-light);
 
+            color: var(--blue);
 
+        }
 
+        
+        .assistant-header .icon {
 
+            background: var(--primary-light);
 
+            color: var(--primary);
 
+        }
 
+        
+        .message-header .icon {
 
+            width: 28px;
 
+            height: 28px;
 
+            border-radius: 8px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            font-size: 14px;
 
+        }
 
+        
+        .message-content {
 
+            line-height: 1.5;
 
+        }
 
+        
+        .message-time {
 
+            font-size: 11px;
 
+            color: var(--gray);
 
+            margin-top: 8px;
 
+            text-align: right;
 
+        }
 
+        
+        /* 客户标签编辑区 */
 
+        .tags-area {
 
+            background: var(--light-gray);
 
+            border-radius: 15px;
 
+            padding: 15px;
 
+            margin-top: 10px;
 
+            border: 1px solid rgba(100, 160, 255, 0.1);
 
+        }
 
+        
+        .tags-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            margin-bottom: 10px;
 
+        }
 
+        
+        .tags-title {
 
+            font-size: 14px;
 
+            font-weight: 600;
 
+            color: var(--dark);
 
+        }
 
+        
+        .input-tags {
 
+            display: flex;
 
+            gap: 8px;
 
+            flex-wrap: wrap;
 
+        }
 
+        
+        .tag {
 
+            background: var(--primary-light);
 
+            color: var(--primary);
 
+            padding: 6px 12px 6px 8px;
 
+            border-radius: 20px;
 
+            font-size: 13px;
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 5px;
 
+            cursor: pointer;
 
+            transition: all 0.2s ease;
 
+            border: 1px solid rgba(100, 160, 255, 0.2);
 
+        }
 
+        
+        .tag:hover {
 
+            background: rgba(100, 160, 255, 0.3);
 
+        }
 
+        
+        .tag .delete {
 
+            font-size: 12px;
 
+            margin-left: 5px;
 
+            opacity: 0.7;
 
+        }
 
+        
+        .tag .delete:hover {
 
+            opacity: 1;
 
+        }
 
+        
+        .add-tag {
 
+            background: rgba(136, 146, 176, 0.1);
 
+            color: var(--gray);
 
+            padding: 6px 12px;
 
+            border-radius: 20px;
 
+            font-size: 13px;
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 5px;
 
+            cursor: pointer;
 
+            transition: all 0.2s ease;
 
+        }
 
+        
+        .add-tag:hover {
 
+            background: rgba(136, 146, 176, 0.2);
 
+        }
 
+        
+        /* 输入工作区 */
 
+        .input-area {
 
+            background: var(--white);
 
+            border-radius: 20px;
 
+            padding: 20px;
 
+            margin-bottom: 20px;
 
+            box-shadow: var(--shadow);
 
+            border: 1px solid rgba(100, 160, 255, 0.2);
 
+        }
 
+        
+        .input-title {
 
+            font-size: 18px;
 
+            font-weight: 600;
 
+            margin-bottom: 15px;
 
+            color: var(--dark);
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 10px;
 
+            padding-bottom: 10px;
 
+            border-bottom: 1px solid rgba(100, 160, 255, 0.1);
 
+        }
 
+        
+        .input-title i {
 
+            color: var(--primary);
 
+        }
 
+        
+        .role-selector {
 
+            display: flex;
 
+            background: var(--light-gray);
 
+            border-radius: 12px;
 
+            padding: 4px;
 
+            margin-bottom: 15px;
 
+        }
 
+        
+        .role-btn {
 
+            flex: 1;
 
+            padding: 10px;
 
+            text-align: center;
 
+            border-radius: 10px;
 
+            cursor: pointer;
 
+            transition: all 0.3s ease;
 
+            font-weight: 500;
 
+        }
 
+        
+        .role-btn.active {
 
+            background: var(--white);
 
+            box-shadow: var(--shadow);
 
+            color: var(--primary);
 
+        }
 
+        
+        .input-field {
 
+            position: relative;
 
+        }
 
+        
+        .text-input {
 
+            width: 100%;
 
+            height: 120px;
 
+            padding: 15px;
 
+            border-radius: 15px;
 
+            border: 1px solid rgba(136, 146, 176, 0.2);
 
+            background: var(--light-gray);
 
+            resize: none;
 
+            font-size: 16px;
 
+            color: var(--dark);
 
+            transition: all 0.3s ease;
 
+        }
 
+        
+        .text-input:focus {
 
+            outline: none;
 
+            border-color: var(--primary);
 
+            box-shadow: 0 0 0 2px rgba(100, 160, 255, 0.2);
 
+        }
 
+        
+        /* 策略卡片组 */
 
+        .strategy-area {
 
+            margin-bottom: 25px;
 
+        }
 
+        
+        .strategy-title {
 
+            font-size: 18px;
 
+            font-weight: 600;
 
+            margin-bottom: 15px;
 
+            color: var(--dark);
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 10px;
 
+            padding-bottom: 10px;
 
+            border-bottom: 1px solid rgba(100, 160, 255, 0.1);
 
+        }
 
+        
+        .strategy-title i {
 
+            color: var(--primary);
 
+        }
 
+        
+        .cards-container {
 
+            position: relative;
 
+            height: 320px;
 
+            perspective: 1000px;
 
+        }
 
+        
+        .strategy-card {
 
+            position: absolute;
 
+            width: 100%;
 
+            height: 280px;
 
+            border-radius: 20px;
 
+            padding: 25px;
 
+            box-shadow: var(--shadow);
 
+            display: flex;
 
+            flex-direction: column;
 
+            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
+                        opacity 0.4s ease, 
+                        box-shadow 0.3s ease;
 
+            backface-visibility: hidden;
 
+            cursor: pointer;
 
+            border: 1px solid rgba(100, 160, 255, 0.2);
 
+        }
 
+        
+        .card-aggressive {
 
+            background: linear-gradient(135deg, #eef6ff, #f0f8ff);
 
+            border-top: 4px solid var(--blue);
 
+            z-index: 30;
 
+        }
 
+        
+        .card-neutral {
 
+            background: linear-gradient(135deg, #fff9e6, #fffbf0);
 
+            border-top: 4px solid var(--yellow);
 
+            transform: translateY(20px) scale(0.95);
 
+            z-index: 20;
 
+        }
 
+        
+        .card-conservative {
 
+            background: linear-gradient(135deg, #f9f0ff, #fdf5ff);
 
+            border-top: 4px solid var(--purple);
 
+            transform: translateY(40px) scale(0.9);
 
+            z-index: 10;
 
+        }
 
+        
+        .card-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            margin-bottom: 20px;
 
+        }
 
+        
+        .card-title {
 
+            font-size: 18px;
 
+            font-weight: 700;
 
+        }
 
+        
+        .card-icon {
 
+            width: 40px;
 
+            height: 40px;
 
+            border-radius: 12px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            font-size: 18px;
 
+        }
 
+        
+        .card-content {
 
+            flex: 1;
 
+            overflow-y: auto;
 
+            padding-right: 10px;
 
+        }
 
+        
+        .card-content p {
 
+            margin-bottom: 15px;
 
+            line-height: 1.7;
 
+            color: #333;
 
+        }
 
+        
+        .card-highlight {
 
+            background: rgba(10, 25, 47, 0.05);
 
+            padding: 12px 15px;
 
+            border-radius: 12px;
 
+            border-left: 3px solid var(--primary);
 
+            margin: 15px 0;
 
+            font-weight: 500;
 
+            line-height: 1.6;
 
+        }
 
+        
+        .card-footer {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            margin-top: 15px;
 
+            padding-top: 15px;
 
+            border-top: 1px solid rgba(136, 146, 176, 0.1);
 
+        }
 
+        
+        .card-hint {
 
+            font-size: 14px;
 
+            color: var(--gray);
 
+        }
 
+        
+        /* 卡片导航点 */
 
+        .card-navigation {
 
+            display: flex;
 
+            justify-content: center;
 
+            gap: 10px;
 
+            margin-top: 15px;
 
+        }
 
+        
+        .card-nav-btn {
 
+            width: 12px;
 
+            height: 12px;
 
+            border-radius: 50%;
 
+            background: var(--light-gray);
 
+            cursor: pointer;
 
+            transition: all 0.2s ease;
 
+        }
 
+        
+        .card-nav-btn.active {
 
+            background: var(--primary);
 
+            transform: scale(1.2);
 
+        }
 
+        
+        /* 操作按钮 */
 
+        .action-buttons {
 
+            display: flex;
 
+            gap: 15px;
 
+            margin-top: 25px;
 
+        }
 
+        
+        .action-btn {
 
+            flex: 1;
 
+            height: 50px;
 
+            border-radius: 15px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            gap: 10px;
 
+            font-weight: 600;
 
+            cursor: pointer;
 
+            transition: all 0.3s ease;
 
+        }
 
+        
+        .save-btn {
 
+            background: var(--primary);
 
+            color: var(--dark);
 
+            border: none;
 
+            box-shadow: 0 4px 15px rgba(100, 160, 255, 0.3);
 
+        }
 
+        
+        .save-btn:hover {
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 6px 20px rgba(100, 160, 255, 0.4);
 
+        }
 
+        
+        .history-btn {
 
+            background: var(--white);
 
+            color: var(--dark);
 
+            border: 2px solid var(--primary);
 
+            box-shadow: 0 4px 15px rgba(100, 160, 255, 0.1);
 
+        }
 
+        
+        .history-btn:hover {
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 6px 20px rgba(100, 160, 255, 0.2);
 
+        }
 
+        
+        /* 响应式调整 */
 
+        @media (max-width: 380px) {
 
+            .container {
 
+                padding: 0 12px 25px;
 
+            }
 
+            
+            .scene-options {
 
+                flex-direction: column;
 
+            }
 
+            
+            .cards-container {
 
+                height: 300px;
 
+            }
 
+            
+            .strategy-card {
 
+                height: 260px;
 
+                padding: 20px;
 
+            }
 
+            
+            .chat-area {
 
+                height: 320px;
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <!-- 顶部导航 -->
 
+        <header class="app-header">
 
+            <div class="header-title">
 
+                <i class="fas fa-robot"></i>
 
+                <h1>话术决策助手</h1>
 
+            </div>
 
+        </header>
 
+        
+        <!-- 场景选择 -->
 
+        <section class="scene-selector">
 
+            <h2 class="input-title">
 
+                <i class="fas fa-dharmachakra"></i>
 
+                选择对话场景
 
+            </h2>
 
+            <div class="scene-options">
 
+                <div class="scene-option active" data-scene="first-contact">
 
+                    <i class="fas fa-handshake"></i>
 
+                    <h3>首次接触</h3>
 
+                    <p>初次沟通建立信任</p>
 
+                </div>
 
+                <div class="scene-option" data-scene="deep-talk">
 
+                    <i class="fas fa-comments"></i>
 
+                    <h3>深度交流</h3>
 
+                    <p>深入挖掘客户需求</p>
 
+                </div>
 
+            </div>
 
+        </section>
 
+        
+        <!-- 客户对话分析 -->
 
+        <section class="input-area">
 
+            <h2 class="chat-title">
 
+                <i class="fas fa-comments"></i>
 
+                客户对话分析
 
+            </h2>
 
+            <div class="chat-area" id="chatContainer">
 
+                <div class="chat-message customer-message">
 
+                    <div class="message-header customer-header">
 
+                        <div class="icon"><i class="fas fa-user"></i></div>
 
+                        <div>客户</div>
 
+                    </div>
 
+                    <div class="message-content">您好，我对贵酒店的豪华套房很感兴趣，但觉得价格偏高，能否提供一些优惠？</div>
 
+                    <div class="message-time">10:25 AM</div>
 
+                </div>
 
+                <div class="chat-message assistant-message">
 
+                    <div class="message-header assistant-header">
 
+                        <div class="icon"><i class="fas fa-headset"></i></div>
 
+                        <div>销售顾问</div>
 
+                    </div>
 
+                    <div class="message-content">感谢您对我们豪华套房的关注！我们的套房拥有全景海景和私人管家服务，目前预订可享8折优惠，您觉得如何？</div>
 
+                    <div class="message-time">10:26 AM</div>
 
+                </div>
 
+                <div class="chat-message customer-message">
 
+                    <div class="message-header customer-header">
 
+                        <div class="icon"><i class="fas fa-user"></i></div>
 
+                        <div>客户</div>
 
+                    </div>
 
+                    <div class="message-content">8折还是有点高，我看到其他酒店类似房型有更优惠的价格。</div>
 
+                    <div class="message-time">10:27 AM</div>
 
+                </div>
 
+                <div class="chat-message assistant-message">
 
+                    <div class="message-header assistant-header">
 
+                        <div class="icon"><i class="fas fa-headset"></i></div>
 
+                        <div>销售顾问</div>
 
+                    </div>
 
+                    <div class="message-content">我理解您的考虑。我们的套房包含双人早餐和免费SPA体验，这些增值服务能让您的住宿体验更加完美。</div>
 
+                    <div class="message-time">10:28 AM</div>
 
+                </div>
 
+                <div class="chat-message customer-message">
 
+                    <div class="message-header customer-header">
 
+                        <div class="icon"><i class="fas fa-user"></i></div>
 
+                        <div>客户</div>
 
+                    </div>
 
+                    <div class="message-content">这个听起来不错，我考虑一下。</div>
 
+                    <div class="message-time">10:29 AM</div>
 
+                </div>
 
+                <div class="chat-message assistant-message">
 
+                    <div class="message-header assistant-header">
 
+                        <div class="icon"><i class="fas fa-headset"></i></div>
 
+                        <div>销售顾问</div>
 
+                    </div>
 
+                    <div class="message-content">好的，如果您今天预订，我们还可以额外赠送您一次下午茶体验。</div>
 
+                    <div class="message-time">10:30 AM</div>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 客户标签编辑区 -->
 
+            <div class="tags-area">
 
+                <div class="tags-header">
 
+                    <div class="tags-title">客户标签</div>
 
+                    <div class="add-tag" id="addTagBtn">
 
+                        <i class="fas fa-plus"></i>
 
+                        <span>添加标签</span>
 
+                    </div>
 
+                </div>
 
+                <div class="input-tags" id="tagsContainer">
 
+                    <div class="tag" style="background: rgba(100, 160, 255, 0.15); color: #64a0ff;">
 
+                        <i class="fas fa-user"></i>
 
+                        <span>VIP客户</span>
 
+                        <span class="delete"><i class="fas fa-times"></i></span>
 
+                    </div>
 
+                    <div class="tag" style="background: rgba(255, 212, 59, 0.15); color: #ffd43b;">
 
+                        <i class="fas fa-calendar"></i>
 
+                        <span>旺季时段</span>
 
+                        <span class="delete"><i class="fas fa-times"></i></span>
 
+                    </div>
 
+                    <div class="tag" style="background: rgba(156, 54, 181, 0.15); color: #9c36b5;">
 
+                        <i class="fas fa-percent"></i>
 
+                        <span>价格敏感</span>
 
+                        <span class="delete"><i class="fas fa-times"></i></span>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </section>
 
+        
+        <!-- 输入工作区 -->
 
+        <section class="input-area">
 
+            <h2 class="input-title">
 
+                <i class="fas fa-comment-dots"></i>
 
+                输入对话内容
 
+            </h2>
 
+            
+            <div class="role-selector">
 
+                <div class="role-btn active" id="customerRoleBtn">客户消息</div>
 
+                <div class="role-btn" id="assistantRoleBtn">销售回复</div>
 
+            </div>
 
+            
+            <div class="input-field">
 
+                <textarea class="text-input" placeholder="输入对话内容..." id="messageInput"></textarea>
 
+            </div>
 
+            
+            <div class="action-buttons">
 
+                <div class="action-btn save-btn" onclick="sendMessage()">
 
+                    <i class="fas fa-paper-plane"></i>
 
+                    <span>发送消息</span>
 
+                </div>
 
+            </div>
 
+        </section>
 
+        
+        <!-- 策略卡片组 -->
 
+        <section class="strategy-area">
 
+            <h2 class="strategy-title">
 
+                <i class="fas fa-cards"></i>
 
+                推荐应对策略
 
+            </h2>
 
+            <div class="cards-container">
 
+                <div class="strategy-card card-aggressive" onclick="activateCard(0)">
 
+                    <div class="card-header">
 
+                        <div class="card-title">主动型策略</div>
 
+                        <div class="card-icon" style="background: var(--blue-light); color: var(--blue);">
 
+                            <i class="fas fa-bolt"></i>
 
+                        </div>
 
+                    </div>
 
+                    <div class="card-content">
 
+                        <p>直接强调酒店独特价值，限量优惠制造紧迫感：</p>
 
+                        <div class="card-highlight">
 
+                            "我们的豪华套房拥有全景海景和私人管家服务，目前仅剩3间，现在预订可享8折限时优惠！"
 
+                        </div>
 
+                        <p><strong>适用场景：</strong>客户表现出明确兴趣，决策周期短</p>
 
+                        <p><strong>优势：</strong>快速成交，提升单笔订单价值</p>
 
+                    </div>
 
+                    <div class="card-footer">
 
+                        <div class="card-hint">成功率: 68%</div>
 
+                        <div class="card-hint"><i class="fas fa-clock"></i> 推荐指数: ⭐⭐⭐⭐</div>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="strategy-card card-neutral" onclick="activateCard(1)">
 
+                    <div class="card-header">
 
+                        <div class="card-title">平衡型策略</div>
 
+                        <div class="card-icon" style="background: rgba(255, 212, 59, 0.15); color: var(--yellow);">
 
+                            <i class="fas fa-balance-scale"></i>
 
+                        </div>
 
+                    </div>
 
+                    <div class="card-content">
 
+                        <p>提供阶梯式优惠，引导客户选择：</p>
 
+                        <div class="card-highlight">
 
+                            "如果您连住3晚以上，我们可以提供免费升级和早餐。另外，会员可额外享受9折优惠，现在注册立享福利！"
 
+                        </div>
 
+                        <p><strong>适用场景：</strong>客户在多个选项间犹豫</p>
 
+                        <p><strong>优势：</strong>平衡双方利益，建立长期关系</p>
 
+                    </div>
 
+                    <div class="card-footer">
 
+                        <div class="card-hint">成功率: 82%</div>
 
+                        <div class="card-hint"><i class="fas fa-clock"></i> 推荐指数: ⭐⭐⭐⭐⭐</div>
 
+                    </div>
 
+                </div>
 
+                
+                <div class="strategy-card card-conservative" onclick="activateCard(2)">
 
+                    <div class="card-header">
 
+                        <div class="card-title">保守型策略</div>
 
+                        <div class="card-icon" style="background: rgba(156, 54, 181, 0.15); color: var(--purple);">
 
+                            <i class="fas fa-shield-alt"></i>
 
+                        </div>
 
+                    </div>
 
+                    <div class="card-content">
 
+                        <p>提供灵活方案，降低决策风险：</p>
 
+                        <div class="card-highlight">
 
+                            "我们提供24小时免费取消政策，现在预订可锁定当前价格。如果您对入住体验有任何不满意，我们将提供额外补偿。"
 
+                        </div>
 
+                        <p><strong>适用场景：</strong>客户犹豫不决，决策周期长</p>
 
+                        <p><strong>优势：</strong>降低客户风险感知，提高转化率</p>
 
+                    </div>
 
+                    <div class="card-footer">
 
+                        <div class="card-hint">成功率: 75%</div>
 
+                        <div class="card-hint"><i class="fas fa-clock"></i> 推荐指数: ⭐⭐⭐⭐</div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 卡片导航点 -->
 
+            <div class="card-navigation">
 
+                <div class="card-nav-btn active" onclick="activateCard(0)"></div>
 
+                <div class="card-nav-btn" onclick="activateCard(1)"></div>
 
+                <div class="card-nav-btn" onclick="activateCard(2)"></div>
 
+            </div>
 
+            
+            <!-- 操作按钮 -->
 
+            <div class="action-buttons">
 
+                <div class="action-btn save-btn" onclick="saveRecord()">
 
+                    <i class="fas fa-save"></i>
 
+                    <span>保存记录</span>
 
+                </div>
 
+                <div class="action-btn history-btn" onclick="viewHistory()">
 
+                    <i class="fas fa-history"></i>
 
+                    <span>查看历史</span>
 
+                </div>
 
+            </div>
 
+        </section>
 
+    </div>
 
+
 
+    <script>
 
+        // 初始化变量
 
+        let selectedColor = '#64a0ff';
 
+        
+        // 场景选择功能
 
+        document.querySelectorAll('.scene-option').forEach(item => {
 
+            item.addEventListener('click', function() {
 
+                document.querySelectorAll('.scene-option').forEach(i => i.classList.remove('active'));
 
+                this.classList.add('active');
 
+                
+                // 更新策略内容
 
+                const scene = this.getAttribute('data-scene');
 
+                updateStrategies(scene);
 
+            });
 
+        });
 
+        
+        // 更新策略内容
 
+        function updateStrategies(scene) {
 
+            const strategies = {
 
+                "first-contact": {
 
+                    aggressive: "主动介绍酒店特色和限时优惠，强调独特卖点",
 
+                    neutral: "提供套餐选择，引导客户了解不同房型",
 
+                    conservative: "邀请客户参观虚拟酒店，提供详细资料"
 
+                },
 
+                "deep-talk": {
 
+                    aggressive: "深度挖掘客户需求，提供定制化解决方案",
 
+                    neutral: "建立信任关系，分享成功案例和客户评价",
 
+                    conservative: "提供专业建议，解答客户深层疑问"
 
+                }
 
+            };
 
+            
+            const sceneTitles = {
 
+                "first-contact": "首次接触",
 
+                "deep-talk": "深度交流"
 
+            };
 
+            
+            const sceneTitle = sceneTitles[scene] || "当前场景";
 
+            
+            // 更新策略内容
 
+            document.querySelector('.card-aggressive .card-highlight').textContent = 
+                strategies[scene].aggressive;
 
+            document.querySelector('.card-neutral .card-highlight').textContent = 
+                strategies[scene].neutral;
 
+            document.querySelector('.card-conservative .card-highlight').textContent = 
+                strategies[scene].conservative;
 
+                
+            // 更新策略标题
 
+            document.querySelector('.strategy-title').innerHTML = 
+                `<i class="fas fa-cards"></i> ${sceneTitle} - 推荐应对策略`;
 
+        }
 
+        
+        // 激活卡片功能
 
+        function activateCard(index) {
 
+            const cards = document.querySelectorAll('.strategy-card');
 
+            const navBtns = document.querySelectorAll('.card-nav-btn');
 
+            
+            cards.forEach((c, i) => {
 
+                if (i === index) {
 
+                    c.style.transform = 'translateY(0) scale(1)';
 
+                    c.style.zIndex = '30';
 
+                } else if (Math.abs(i - index) === 1) {
 
+                    c.style.transform = `translateY(${20 * Math.abs(i - index)}px) scale(${1 - 0.05 * Math.abs(i - index)})`;
 
+                    c.style.zIndex = '20';
 
+                } else {
 
+                    c.style.transform = `translateY(${40 * Math.abs(i - index)}px) scale(${1 - 0.1 * Math.abs(i - index)})`;
 
+                    c.style.zIndex = '10';
 
+                }
 
+            });
 
+            
+            navBtns.forEach((btn, i) => {
 
+                if (i === index) {
 
+                    btn.classList.add('active');
 
+                } else {
 
+                    btn.classList.remove('active');
 
+                }
 
+            });
 
+        }
 
+        
+        // 角色切换功能
 
+        const customerRoleBtn = document.getElementById('customerRoleBtn');
 
+        const assistantRoleBtn = document.getElementById('assistantRoleBtn');
 
+        
+        customerRoleBtn.addEventListener('click', function() {
 
+            customerRoleBtn.classList.add('active');
 
+            assistantRoleBtn.classList.remove('active');
 
+        });
 
+        
+        assistantRoleBtn.addEventListener('click', function() {
 
+            assistantRoleBtn.classList.add('active');
 
+            customerRoleBtn.classList.remove('active');
 
+        });
 
+        
+        // 标签删除功能
 
+        function setupTagDeletion() {
 
+            document.querySelectorAll('.tag .delete').forEach(deleteBtn => {
 
+                deleteBtn.addEventListener('click', function(e) {
 
+                    e.stopPropagation();
 
+                    this.closest('.tag').remove();
 
+                });
 
+            });
 
+        }
 
+        
+        // 初始化标签删除功能
 
+        setupTagDeletion();
 
+        
+        // 添加新标签功能
 
+        const addTagBtn = document.getElementById('addTagBtn');
 
+        const tagsContainer = document.getElementById('tagsContainer');
 
+        
+        addTagBtn.addEventListener('click', function() {
 
+            const newTag = document.createElement('div');
 
+            newTag.className = 'tag';
 
+            newTag.style.background = 'rgba(100, 160, 255, 0.15)';
 
+            newTag.style.color = '#64a0ff';
 
+            newTag.innerHTML = `
 
+                <i class="fas fa-tag"></i>
 
+                <span>新标签</span>
 
+                <span class="delete"><i class="fas fa-times"></i></span>
 
+            `;
 
+            
+            // 添加删除事件
 
+            newTag.querySelector('.delete').addEventListener('click', function(e) {
 
+                e.stopPropagation();
 
+                this.closest('.tag').remove();
 
+            });
 
+            
+            tagsContainer.appendChild(newTag);
 
+        });
 
+        
+        // 发送消息功能
 
+        const messageInput = document.getElementById('messageInput');
 
+        const chatContainer = document.getElementById('chatContainer');
 
+        
+        function sendMessage() {
 
+            const message = messageInput.value.trim();
 
+            if (message) {
 
+                // 确定消息角色
 
+                const isCustomer = customerRoleBtn.classList.contains('active');
 
+                const role = isCustomer ? 'customer' : 'assistant';
 
+                
+                // 创建新消息元素
 
+                const newMessage = document.createElement('div');
 
+                newMessage.className = `chat-message ${role}-message`;
 
+                
+                // 获取当前时间
 
+                const now = new Date();
 
+                const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
 
+                
+                // 消息头部
 
+                let headerHtml = '';
 
+                if (isCustomer) {
 
+                    headerHtml = `
 
+                        <div class="message-header customer-header">
 
+                            <div class="icon"><i class="fas fa-user"></i></div>
 
+                            <div>客户</div>
 
+                        </div>
 
+                    `;
 
+                } else {
 
+                    headerHtml = `
 
+                        <div class="message-header assistant-header">
 
+                            <div class="icon"><i class="fas fa-headset"></i></div>
 
+                            <div>销售顾问</div>
 
+                        </div>
 
+                    `;
 
+                }
 
+                
+                newMessage.innerHTML = `
 
+                    ${headerHtml}
 
+                    <div class="message-content">${message}</div>
 
+                    <div class="message-time">${timeString}</div>
 
+                `;
 
+                
+                // 添加到聊天容器
 
+                chatContainer.appendChild(newMessage);
 
+                
+                // 清空输入框
 
+                messageInput.value = '';
 
+                
+                // 滚动到底部
 
+                chatContainer.scrollTop = chatContainer.scrollHeight;
 
+                
+                // 如果是销售发送消息，模拟客户回复
 
+                if (!isCustomer) {
 
+                    setTimeout(() => {
 
+                        const customerReply = document.createElement('div');
 
+                        customerReply.className = 'chat-message customer-message';
 
+                        
+                        // 模拟回复内容
 
+                        const replies = [
 
+                            "这个优惠包含早餐吗？",
 
+                            "我需要和家人商量一下",
 
+                            "能否提供免费接机服务？",
 
+                            "价格还是有点高，能再优惠些吗？",
 
+                            "你们的取消政策是怎样的？",
 
+                            "如果我今天预订，还有额外优惠吗？",
 
+                            "套餐包含哪些服务？",
 
+                            "有更经济的房型推荐吗？"
 
+                        ];
 
+                        const randomReply = replies[Math.floor(Math.random() * replies.length)];
 
+                        
+                        customerReply.innerHTML = `
 
+                            <div class="message-header customer-header">
 
+                                <div class="icon"><i class="fas fa-user"></i></div>
 
+                                <div>客户</div>
 
+                            </div>
 
+                            <div class="message-content">${randomReply}</div>
 
+                            <div class="message-time">${now.getHours()}:${(now.getMinutes() + 1).toString().padStart(2, '0')}</div>
 
+                        `;
 
+                        
+                        chatContainer.appendChild(customerReply);
 
+                        chatContainer.scrollTop = chatContainer.scrollHeight;
 
+                    }, 1500);
 
+                }
 
+                
+                // 重新聚焦输入框
 
+                messageInput.focus();
 
+            }
 
+        }
 
+        
+        // 支持按Enter发送消息（Shift+Enter换行）
 
+        messageInput.addEventListener('keydown', function(e) {
 
+            if (e.key === 'Enter' && !e.shiftKey) {
 
+                e.preventDefault();
 
+                sendMessage();
 
+            }
 
+        });
 
+        
+        // 保存记录功能
 
+        function saveRecord() {
 
+            // 创建动画效果
 
+            const saveBtn = document.querySelector('.save-btn');
 
+            saveBtn.innerHTML = '<i class="fas fa-check"></i> 已保存';
 
+            saveBtn.style.background = '#4da3ff';
 
+            
+            setTimeout(() => {
 
+                saveBtn.innerHTML = '<i class="fas fa-save"></i> 保存记录';
 
+                saveBtn.style.background = '';
 
+            }, 2000);
 
+        }
 
+        
+        // 查看历史功能
 
+        function viewHistory() {
 
+            alert('历史记录功能即将开放，正在开发中...');
 
+        }
 
+        
+        // 初始化
 
+        document.addEventListener('DOMContentLoaded', function() {
 
+            // 初始化卡片位置
 
+            activateCard(0);
 
+            
+            // 滚动到聊天底部
 
+            chatContainer.scrollTop = chatContainer.scrollHeight;
 
+        });
 
+    </script>
 
+</body>
 
+</html>

+ 1068 - 0
ai-assisant/demo/first.html
View File 

@@ -0,0 +1,1068 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>AI实验室 - 酒店销售智能平台</title>
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 
+        }
 
+        
+        :root {
 
+            --primary-blue: #2563eb;
 
+            --accent-teal: #0d9488;
 
+            --accent-purple: #7b4bff;
 
+            --light-gray: #f3f4f6;
 
+            --text-dark: #1f2937;
 
+            --text-light: #6b7280;
 
+            --card-bg: #ffffff;
 
+            --border-color: #e5e7eb;
 
+            --transition: all 0.3s ease;
 
+            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
 
+            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+            --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        body {
 
+            background-color: #ffffff;
 
+            color: var(--text-dark);
 
+            min-height: 100vh;
 
+            padding: 20px 16px 40px;
 
+            position: relative;
 
+            overflow-x: hidden;
 
+        }
 
+        
+        /* 头部导航 */
 
+        .header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            padding: 12px 0 20px;
 
+            margin-bottom: 10px;
 
+            position: relative;
 
+        }
 
+        
+        .logo {
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 12px;
 
+        }
 
+        
+        .logo-icon {
 
+            width: 40px;
 
+            height: 40px;
 
+            background: linear-gradient(135deg, var(--primary-blue), #3b82f6);
 
+            border-radius: 12px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            box-shadow: var(--shadow-sm);
 
+        }
 
+        
+        .logo-icon i {
 
+            font-size: 20px;
 
+            color: white;
 
+        }
 
+        
+        .logo-text {
 
+            font-size: 22px;
 
+            font-weight: 700;
 
+            color: var(--text-dark);
 
+            letter-spacing: -0.5px;
 
+        }
 
+        
+        .logo-subtext {
 
+            font-size: 12px;
 
+            color: var(--primary-blue);
 
+            font-weight: 500;
 
+            margin-top: -5px;
 
+            letter-spacing: 0.5px;
 
+        }
 
+        
+        .user-actions {
 
+            display: flex;
 
+            gap: 16px;
 
+        }
 
+        
+        .action-btn {
 
+            background: var(--light-gray);
 
+            border-radius: 10px;
 
+            width: 40px;
 
+            height: 40px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            color: var(--text-dark);
 
+            font-size: 18px;
 
+            cursor: pointer;
 
+            transition: var(--transition);
 
+            border: 1px solid var(--border-color);
 
+            position: relative;
 
+        }
 
+        
+        .action-btn:hover {
 
+            background: #e5e7eb;
 
+            transform: translateY(-2px);
 
+            box-shadow: var(--shadow-sm);
 
+        }
 
+        
+        .badge {
 
+            position: absolute;
 
+            top: -5px;
 
+            right: -5px;
 
+            width: 20px;
 
+            height: 20px;
 
+            background: #ef4444;
 
+            color: white;
 
+            border-radius: 50%;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            font-size: 11px;
 
+            font-weight: 600;
 
+        }
 
+        
+        /* 欢迎区域 */
 
+        .welcome-section {
 
+            margin: 15px 0 25px;
 
+            padding: 0 5px;
 
+            text-align: center;
 
+        }
 
+        
+        .greeting {
 
+            font-size: 26px;
 
+            font-weight: 700;
 
+            margin-bottom: 8px;
 
+            line-height: 1.3;
 
+        }
 
+        
+        .greeting span {
 
+            color: var(--primary-blue);
 
+            position: relative;
 
+        }
 
+        
+        .greeting span::after {
 
+            content: '';
 
+            position: absolute;
 
+            bottom: 2px;
 
+            left: 0;
 
+            width: 100%;
 
+            height: 6px;
 
+            background: rgba(37, 99, 235, 0.15);
 
+            border-radius: 3px;
 
+            z-index: -1;
 
+        }
 
+        
+        .motivational-text {
 
+            font-size: 18px;
 
+            color: var(--primary-blue);
 
+            font-weight: 600;
 
+            line-height: 1.6;
 
+            max-width: 90%;
 
+            margin: 20px auto;
 
+            padding: 15px;
 
+            border-radius: 16px;
 
+            background: rgba(37, 99, 235, 0.05);
 
+            border-left: 4px solid var(--primary-blue);
 
+            position: relative;
 
+        }
 
+        
+        .motivational-text::before {
 
+            content: """;
 
+            position: absolute;
 
+            top: -15px;
 
+            left: 10px;
 
+            font-size: 60px;
 
+            color: rgba(37, 99, 235, 0.1);
 
+            font-family: Georgia, serif;
 
+        }
 
+        
+        /* 功能卡片网格 */
 
+        .features-grid {
 
+            display: grid;
 
+            grid-template-columns: repeat(2, 1fr);
 
+            gap: 18px;
 
+            margin-top: 25px;
 
+        }
 
+        
+        .feature-card {
 
+            background: var(--card-bg);
 
+            border-radius: 20px;
 
+            padding: 25px 20px;
 
+            position: relative;
 
+            overflow: hidden;
 
+            transition: var(--transition);
 
+            border: 1px solid var(--border-color);
 
+            box-shadow: var(--shadow-md);
 
+            cursor: pointer;
 
+            height: 180px;
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+        
+        .feature-card:hover {
 
+            transform: translateY(-5px);
 
+            box-shadow: var(--shadow-lg);
 
+            border-color: #d1d5db;
 
+        }
 
+        
+        .card-icon {
 
+            width: 50px;
 
+            height: 50px;
 
+            background: var(--light-gray);
 
+            border-radius: 14px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            margin-bottom: 18px;
 
+            font-size: 22px;
 
+            color: var(--primary-blue);
 
+        }
 
+        
+        .card-title {
 
+            font-size: 18px;
 
+            font-weight: 600;
 
+            margin-bottom: 8px;
 
+            color: var(--text-dark);
 
+        }
 
+        
+        .card-desc {
 
+            font-size: 14px;
 
+            color: var(--text-light);
 
+            line-height: 1.5;
 
+            flex-grow: 1;
 
+        }
 
+        
+        .card-stats {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            margin-top: 15px;
 
+            font-size: 12px;
 
+            color: var(--primary-blue);
 
+            font-weight: 500;
 
+        }
 
+        
+        /* 数据统计卡片 */
 
+        .stats-card {
 
+            background: var(--card-bg);
 
+            border-radius: 20px;
 
+            padding: 20px;
 
+            margin: 25px 0 15px;
 
+            border: 1px solid var(--border-color);
 
+            box-shadow: var(--shadow-sm);
 
+            position: relative;
 
+            overflow: hidden;
 
+        }
 
+        
+        .stats-card::before {
 
+            content: '';
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            height: 4px;
 
+            background: linear-gradient(90deg, var(--primary-blue), #0d9488);
 
+        }
 
+        
+        .stats-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            margin-bottom: 20px;
 
+        }
 
+        
+        .stats-title {
 
+            font-size: 18px;
 
+            font-weight: 600;
 
+            color: var(--text-dark);
 
+        }
 
+        
+        .stats-container {
 
+            display: grid;
 
+            grid-template-columns: repeat(3, 1fr);
 
+            gap: 15px;
 
+        }
 
+        
+        .stat-item {
 
+            text-align: center;
 
+            padding: 10px;
 
+            background: var(--light-gray);
 
+            border-radius: 14px;
 
+            transition: var(--transition);
 
+        }
 
+        
+        .stat-item:hover {
 
+            transform: translateY(-3px);
 
+            box-shadow: var(--shadow-sm);
 
+        }
 
+        
+        .stat-value {
 
+            font-size: 22px;
 
+            font-weight: 700;
 
+            color: var(--primary-blue);
 
+            margin-bottom: 5px;
 
+        }
 
+        
+        .stat-label {
 
+            font-size: 13px;
 
+            color: var(--text-light);
 
+        }
 
+        
+        /* 激励区域 */
 
+        .inspiration-section {
 
+            background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
 
+            border-radius: 20px;
 
+            padding: 25px;
 
+            margin: 30px 0;
 
+            text-align: center;
 
+            border: 1px solid #dbeafe;
 
+            position: relative;
 
+            overflow: hidden;
 
+        }
 
+        
+        .inspiration-title {
 
+            font-size: 22px;
 
+            font-weight: 700;
 
+            color: var(--primary-blue);
 
+            margin-bottom: 15px;
 
+        }
 
+        
+        .inspiration-content {
 
+            font-size: 16px;
 
+            color: var(--text-dark);
 
+            line-height: 1.7;
 
+            max-width: 600px;
 
+            margin: 0 auto;
 
+        }
 
+        
+        .inspiration-icon {
 
+            position: absolute;
 
+            top: 20px;
 
+            right: 20px;
 
+            font-size: 60px;
 
+            color: rgba(37, 99, 235, 0.1);
 
+        }
 
+        
+        /* 消息弹窗 */
 
+        .popup-overlay {
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background: rgba(0, 0, 0, 0.5);
 
+            backdrop-filter: blur(5px);
 
+            display: flex;
 
+            justify-content: center;
 
+            align-items: center;
 
+            z-index: 1000;
 
+            opacity: 0;
 
+            visibility: hidden;
 
+            transition: var(--transition);
 
+        }
 
+        
+        .popup-overlay.active {
 
+            opacity: 1;
 
+            visibility: visible;
 
+        }
 
+        
+        .message-popup {
 
+            background: white;
 
+            border-radius: 20px;
 
+            width: 90%;
 
+            max-width: 400px;
 
+            max-height: 80vh;
 
+            overflow: hidden;
 
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
 
+            transform: translateY(20px);
 
+            transition: transform 0.4s ease;
 
+        }
 
+        
+        .popup-overlay.active .message-popup {
 
+            transform: translateY(0);
 
+        }
 
+        
+        .popup-header {
 
+            padding: 20px;
 
+            background: var(--primary-blue);
 
+            color: white;
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+        }
 
+        
+        .popup-title {
 
+            font-size: 20px;
 
+            font-weight: 600;
 
+        }
 
+        
+        .close-btn {
 
+            background: rgba(255, 255, 255, 0.2);
 
+            width: 36px;
 
+            height: 36px;
 
+            border-radius: 50%;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            cursor: pointer;
 
+            transition: var(--transition);
 
+        }
 
+        
+        .close-btn:hover {
 
+            background: rgba(255, 255, 255, 0.3);
 
+            transform: rotate(90deg);
 
+        }
 
+        
+        .popup-content {
 
+            padding: 0;
 
+            max-height: 60vh;
 
+            overflow-y: auto;
 
+        }
 
+        
+        .message-list {
 
+            list-style: none;
 
+        }
 
+        
+        .message-item {
 
+            padding: 18px 20px;
 
+            border-bottom: 1px solid var(--border-color);
 
+            cursor: pointer;
 
+            transition: var(--transition);
 
+        }
 
+        
+        .message-item:hover {
 
+            background: var(--light-gray);
 
+        }
 
+        
+        .message-item.unread {
 
+            background: rgba(37, 99, 235, 0.05);
 
+        }
 
+        
+        .message-title {
 
+            font-weight: 600;
 
+            margin-bottom: 5px;
 
+            display: flex;
 
+            align-items: center;
 
+        }
 
+        
+        .message-title .unread-badge {
 
+            width: 8px;
 
+            height: 8px;
 
+            background: var(--primary-blue);
 
+            border-radius: 50%;
 
+            margin-right: 10px;
 
+        }
 
+        
+        .message-preview {
 
+            color: var(--text-light);
 
+            font-size: 14px;
 
+            line-height: 1.5;
 
+            display: -webkit-box;
 
+            -webkit-line-clamp: 2;
 
+            -webkit-box-orient: vertical;
 
+            overflow: hidden;
 
+        }
 
+        
+        .message-time {
 
+            font-size: 12px;
 
+            color: var(--text-light);
 
+            margin-top: 8px;
 
+            text-align: right;
 
+        }
 
+        
+        /* 个人中心弹窗 */
 
+        .profile-popup {
 
+            background: white;
 
+            border-radius: 20px;
 
+            width: 90%;
 
+            max-width: 400px;
 
+            max-height: 90vh;
 
+            overflow: hidden;
 
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
 
+            transform: translateY(20px);
 
+            transition: transform 0.4s ease;
 
+        }
 
+        
+        .popup-overlay.active .profile-popup {
 
+            transform: translateY(0);
 
+        }
 
+        
+        .user-info {
 
+            padding: 30px 20px;
 
+            background: linear-gradient(135deg, var(--primary-blue), #3b82f6);
 
+            color: white;
 
+            text-align: center;
 
+            position: relative;
 
+        }
 
+        
+        .user-avatar {
 
+            width: 80px;
 
+            height: 80px;
 
+            border-radius: 50%;
 
+            background: white;
 
+            margin: 0 auto 15px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            font-size: 36px;
 
+            color: var(--primary-blue);
 
+            border: 3px solid white;
 
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        .user-name {
 
+            font-size: 22px;
 
+            font-weight: 700;
 
+            margin-bottom: 5px;
 
+        }
 
+        
+        .user-role {
 
+            font-size: 14px;
 
+            background: rgba(255, 255, 255, 0.2);
 
+            padding: 4px 12px;
 
+            border-radius: 20px;
 
+            display: inline-block;
 
+        }
 
+        
+        .training-section {
 
+            padding: 20px;
 
+        }
 
+        
+        .section-title {
 
+            font-size: 18px;
 
+            font-weight: 600;
 
+            margin-bottom: 20px;
 
+            padding-bottom: 10px;
 
+            border-bottom: 2px solid var(--light-gray);
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+        }
 
+        
+        .training-list {
 
+            list-style: none;
 
+        }
 
+        
+        .training-item {
 
+            padding: 15px;
 
+            border-radius: 14px;
 
+            border: 1px solid var(--border-color);
 
+            margin-bottom: 15px;
 
+            transition: var(--transition);
 
+            cursor: pointer;
 
+        }
 
+        
+        .training-item:hover {
 
+            transform: translateY(-3px);
 
+            box-shadow: var(--shadow-md);
 
+            border-color: var(--primary-blue);
 
+        }
 
+        
+        .training-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            margin-bottom: 10px;
 
+        }
 
+        
+        .training-title {
 
+            font-weight: 600;
 
+            color: var(--text-dark);
 
+        }
 
+        
+        .training-date {
 
+            font-size: 12px;
 
+            color: var(--text-light);
 
+        }
 
+        
+        .training-stats {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            font-size: 14px;
 
+            color: var(--text-light);
 
+        }
 
+        
+        .training-score {
 
+            color: var(--primary-blue);
 
+            font-weight: 600;
 
+        }
 
+        
+        .progress-bar {
 
+            height: 6px;
 
+            background: var(--light-gray);
 
+            border-radius: 3px;
 
+            margin-top: 10px;
 
+            overflow: hidden;
 
+        }
 
+        
+        .progress-fill {
 
+            height: 100%;
 
+            background: var(--primary-blue);
 
+            border-radius: 3px;
 
+            width: 75%; /* 示例值 */
 
+        }
 
+        
+        /* 功能区颜色 */
 
+        .feature-card:nth-child(1) .card-icon {
 
+            color: #0d9488;
 
+            background: rgba(13, 148, 136, 0.1);
 
+        }
 
+        
+        .feature-card:nth-child(1):hover .card-icon {
 
+            background: rgba(13, 148, 136, 0.15);
 
+        }
 
+        
+        .feature-card:nth-child(2) .card-icon {
 
+            color: #7b4bff;
 
+            background: rgba(123, 75, 255, 0.1);
 
+        }
 
+        
+        .feature-card:nth-child(2):hover .card-icon {
 
+            background: rgba(123, 75, 255, 0.15);
 
+        }
 
+        
+        .feature-card:nth-child(3) .card-icon {
 
+            color: #ec4899;
 
+            background: rgba(236, 72, 153, 0.1);
 
+        }
 
+        
+        .feature-card:nth-child(3):hover .card-icon {
 
+            background: rgba(236, 72, 153, 0.15);
 
+        }
 
+        
+        .feature-card:nth-child(4) .card-icon {
 
+            color: #f59e0b;
 
+            background: rgba(245, 158, 11, 0.1);
 
+        }
 
+        
+        .feature-card:nth-child(4):hover .card-icon {
 
+            background: rgba(245, 158, 11, 0.15);
 
+        }
 
+        
+        /* 微交互效果 */
 
+        .feature-card:hover .card-icon {
 
+            transform: rotate(5deg) scale(1.1);
 
+            transition: transform 0.3s ease;
 
+            background: rgba(37, 99, 235, 0.1);
 
+        }
 
+        
+        .pulse {
 
+            position: absolute;
 
+            top: 10px;
 
+            right: 10px;
 
+            width: 8px;
 
+            height: 8px;
 
+            background: #ef4444;
 
+            border-radius: 50%;
 
+        }
 
+        
+        /* 响应式设计 */
 
+        @media (max-width: 480px) {
 
+            .features-grid {
 
+                gap: 15px;
 
+            }
 
+            
+            .feature-card {
 
+                padding: 20px 16px;
 
+                height: 170px;
 
+            }
 
+            
+            .card-icon {
 
+                width: 45px;
 
+                height: 45px;
 
+                font-size: 20px;
 
+            }
 
+            
+            .card-title {
 
+                font-size: 17px;
 
+            }
 
+            
+            .card-desc {
 
+                font-size: 13px;
 
+            }
 
+            
+            .greeting {
 
+                font-size: 24px;
 
+            }
 
+            
+            .stats-card {
 
+                padding: 18px;
 
+            }
 
+            
+            .stat-value {
 
+                font-size: 20px;
 
+            }
 
+            
+            .motivational-text {
 
+                font-size: 16px;
 
+                padding: 12px;
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 头部导航 -->
 
+    <div class="header">
 
+        <div class="logo">
 
+            <div class="logo-icon">
 
+                <i class="fas fa-brain"></i>
 
+            </div>
 
+            <div>
 
+                <div class="logo-text">AI实验室</div>
 
+                <div class="logo-subtext">酒店销售智能平台</div>
 
+            </div>
 
+        </div>
 
+        <div class="user-actions">
 
+            <div class="action-btn" id="message-btn">
 
+                <i class="fas fa-bell"></i>
 
+                <div class="badge">3</div>
 
+            </div>
 
+            <div class="action-btn" id="profile-btn">
 
+                <i class="fas fa-user"></i>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 欢迎区域 -->
 
+    <div class="welcome-section">
 
+        <h1 class="greeting">你好，<span>销售精英</span> 👋</h1>
 
+        
+        <div class="motivational-text">
 
+            每一次对话都是展现专业的机会，每一次练习都在提升成功的概率！今天，让AI成为您最强大的销售伙伴
 
+        </div>
 
+    </div>
 
+    
+    <!-- 激励区域 -->
 
+    <div class="inspiration-section">
 
+        <div class="inspiration-icon">
 
+            <i class="fas fa-bullhorn"></i>
 
+        </div>
 
+        <h2 class="inspiration-title">今日激励</h2>
 
+        <p class="inspiration-content">
 
+            卓越的销售不是天生的，而是通过每一次精心准备的对话和持续训练铸就的。您今天的努力，将成就明天签约的喜悦！
 
+        </p>
 
+    </div>
 
+    
+    <!-- 数据统计卡片 -->
 
+    <div class="stats-card">
 
+        <div class="stats-header">
 
+            <div class="stats-title">团队今日战绩</div>
 
+            <div class="action-btn">
 
+                <i class="fas fa-arrow-right"></i>
 
+            </div>
 
+        </div>
 
+        <div class="stats-container">
 
+            <div class="stat-item">
 
+                <div class="stat-value">42</div>
 
+                <div class="stat-label">陪练次数</div>
 
+            </div>
 
+            <div class="stat-item">
 
+                <div class="stat-value">28</div>
 
+                <div class="stat-label">策略生成</div>
 
+            </div>
 
+            <div class="stat-item">
 
+                <div class="stat-value">96%</div>
 
+                <div class="stat-label">满意度</div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 功能卡片网格 -->
 
+    <div class="features-grid">
 
+        <!-- 虚拟陪练 -->
 
+        <div class="feature-card">
 
+            <div class="pulse"></div>
 
+            <div class="card-icon">
 
+                <i class="fas fa-robot"></i>
 
+            </div>
 
+            <h3 class="card-title">虚拟陪练</h3>
 
+            <p class="card-desc">与AI客户进行真实销售对话练习，提升沟通技巧</p>
 
+            <div class="card-stats">
 
+                <span><i class="fas fa-history"></i> 12次练习</span>
 
+                <span>85%得分</span>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 话术决策 -->
 
+        <div class="feature-card">
 
+            <div class="card-icon">
 
+                <i class="fas fa-comments"></i>
 
+            </div>
 
+            <h3 class="card-title">话术决策</h3>
 
+            <p class="card-desc">智能生成最佳沟通策略，应对各种销售场景</p>
 
+            <div class="card-stats">
 
+                <span><i class="fas fa-star"></i> 8个策略</span>
 
+                <span>92%有效</span>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 数据训练 -->
 
+        <div class="feature-card">
 
+            <div class="card-icon">
 
+                <i class="fas fa-database"></i>
 
+            </div>
 
+            <h3 class="card-title">数据训练</h3>
 
+            <p class="card-desc">上传销售数据训练AI模型，优化决策能力</p>
 
+            <div class="card-stats">
 
+                <span><i class="fas fa-chart-line"></i> 3.2TB</span>
 
+                <span>98%准确</span>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 客户画像 -->
 
+        <div class="feature-card">
 
+            <div class="card-icon">
 
+                <i class="fas fa-user-tie"></i>
 
+            </div>
 
+            <h3 class="card-title">客户画像</h3>
 
+            <p class="card-desc">生成详细客户分析报告，洞察客户需求</p>
 
+            <div class="card-stats">
 
+                <span><i class="fas fa-file-alt"></i> 24份</span>
 
+                <span>更新中</span>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 激励话语 -->
 
+    <div class="inspiration-section" style="margin-top: 30px;">
 
+        <h2 class="inspiration-title">成功源于持续精进</h2>
 
+        <p class="inspiration-content">
 
+            您已经完成了<span style="color: var(--primary-blue); font-weight: 600;">12次</span>虚拟陪练，
 
+            击败了<span style="color: var(--primary-blue); font-weight: 600;">86%</span>的同级销售。
 
+            继续保持，下一个销售冠军就是您！
 
+        </p>
 
+    </div>
 
+    
+    <!-- 消息提醒弹窗 -->
 
+    <div class="popup-overlay" id="message-popup">
 
+        <div class="message-popup">
 
+            <div class="popup-header">
 
+                <div class="popup-title">消息提醒</div>
 
+                <div class="close-btn" id="close-message">
 
+                    <i class="fas fa-times"></i>
 
+                </div>
 
+            </div>
 
+            <div class="popup-content">
 
+                <ul class="message-list">
 
+                    <li class="message-item unread">
 
+                        <div class="message-title">
 
+                            <span class="unread-badge"></span>
 
+                            新的陪练挑战
 
+                        </div>
 
+                        <div class="message-preview">
 
+                            您有一个新的虚拟陪练挑战等待完成，主题：高端客户价格谈判
 
+                        </div>
 
+                        <div class="message-time">10分钟前</div>
 
+                    </li>
 
+                    <li class="message-item unread">
 
+                        <div class="message-title">
 
+                            <span class="unread-badge"></span>
 
+                            话术策略更新
 
+                        </div>
 
+                        <div class="message-preview">
 
+                            您收藏的"投诉处理"话术策略已更新至3.2版本
 
+                        </div>
 
+                        <div class="message-time">1小时前</div>
 
+                    </li>
 
+                    <li class="message-item">
 
+                        <div class="message-title">
 
+                            陪练成绩通知
 
+                        </div>
 
+                        <div class="message-preview">
 
+                            您最近的虚拟陪练成绩为92分，超过89%的销售同事
 
+                        </div>
 
+                        <div class="message-time">昨天</div>
 
+                    </li>
 
+                    <li class="message-item">
 
+                        <div class="message-title">
 
+                            团队周报
 
+                        </div>
 
+                        <div class="message-preview">
 
+                            本周团队陪练报告已生成，点击查看详细分析
 
+                        </div>
 
+                        <div class="message-time">2天前</div>
 
+                    </li>
 
+                    <li class="message-item">
 
+                        <div class="message-title">
 
+                            系统维护通知
 
+                        </div>
 
+                        <div class="message-preview">
 
+                            系统将于本周六凌晨2:00-4:00进行维护升级
 
+                        </div>
 
+                        <div class="message-time">3天前</div>
 
+                    </li>
 
+                </ul>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 个人中心弹窗 -->
 
+    <div class="popup-overlay" id="profile-popup">
 
+        <div class="profile-popup">
 
+            <div class="user-info">
 
+                <div class="close-btn" id="close-profile">
 
+                    <i class="fas fa-times"></i>
 
+                </div>
 
+                <div class="user-avatar">
 
+                    <i class="fas fa-user"></i>
 
+                </div>
 
+                <div class="user-name">张明</div>
 
+                <div class="user-role">高级销售经理</div>
 
+            </div>
 
+            
+            <div class="training-section">
 
+                <div class="section-title">
 
+                    <span>我的训练记录</span>
 
+                    <span>总计: 12次</span>
 
+                </div>
 
+                
+                <ul class="training-list">
 
+                    <li class="training-item">
 
+                        <div class="training-header">
 
+                            <div class="training-title">高端客户价格谈判</div>
 
+                            <div class="training-date">2023-10-15</div>
 
+                        </div>
 
+                        <div class="training-stats">
 
+                            <div>难度: <span class="training-score">⭐⭐⭐</span></div>
 
+                            <div>得分: <span class="training-score">92分</span></div>
 
+                        </div>
 
+                        <div class="progress-bar">
 
+                            <div class="progress-fill" style="width: 92%"></div>
 
+                        </div>
 
+                    </li>
 
+                    <li class="training-item">
 
+                        <div class="training-header">
 
+                            <div class="training-title">首次接触技巧</div>
 
+                            <div class="training-date">2023-10-12</div>
 
+                        </div>
 
+                        <div class="training-stats">
 
+                            <div>难度: <span class="training-score">⭐⭐</span></div>
 
+                            <div>得分: <span class="training-score">85分</span></div>
 
+                        </div>
 
+                        <div class="progress-bar">
 
+                            <div class="progress-fill" style="width: 85%"></div>
 
+                        </div>
 
+                    </li>
 
+                    <li class="training-item">
 
+                        <div class="training-header">
 
+                            <div class="training-title">投诉处理模拟</div>
 
+                            <div class="training-date">2023-10-08</div>
 
+                        </div>
 
+                        <div class="training-stats">
 
+                            <div>难度: <span class="training-score">⭐⭐⭐</span></div>
 
+                            <div>得分: <span class="training-score">88分</span></div>
 
+                        </div>
 
+                        <div class="progress-bar">
 
+                            <div class="progress-fill" style="width: 88%"></div>
 
+                        </div>
 
+                    </li>
 
+                    <li class="training-item">
 
+                        <div class="training-header">
 
+                            <div class="training-title">长期合作谈判</div>
 
+                            <div class="training-date">2023-10-02</div>
 
+                        </div>
 
+                        <div class="training-stats">
 
+                            <div>难度: <span class="training-score">⭐⭐⭐⭐</span></div>
 
+                            <div>得分: <span class="training-score">78分</span></div>
 
+                        </div>
 
+                        <div class="progress-bar">
 
+                            <div class="progress-fill" style="width: 78%"></div>
 
+                        </div>
 
+                    </li>
 
+                </ul>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <script>
 
+        // 获取DOM元素
 
+        const messageBtn = document.getElementById('message-btn');
 
+        const profileBtn = document.getElementById('profile-btn');
 
+        const messagePopup = document.getElementById('message-popup');
 
+        const profilePopup = document.getElementById('profile-popup');
 
+        const closeMessage = document.getElementById('close-message');
 
+        const closeProfile = document.getElementById('close-profile');
 
+        
+        // 消息弹窗控制
 
+        messageBtn.addEventListener('click', () => {
 
+            messagePopup.classList.add('active');
 
+        });
 
+        
+        closeMessage.addEventListener('click', () => {
 
+            messagePopup.classList.remove('active');
 
+        });
 
+        
+        // 个人中心弹窗控制
 
+        profileBtn.addEventListener('click', () => {
 
+            profilePopup.classList.add('active');
 
+        });
 
+        
+        closeProfile.addEventListener('click', () => {
 
+            profilePopup.classList.remove('active');
 
+        });
 
+        
+        // 点击弹窗外部关闭
 
+        [messagePopup, profilePopup].forEach(popup => {
 
+            popup.addEventListener('click', (e) => {
 
+                if (e.target === popup) {
 
+                    popup.classList.remove('active');
 
+                }
 
+            });
 
+        });
 
+        
+        // 卡片悬停效果增强
 
+        document.querySelectorAll('.feature-card').forEach(card => {
 
+            card.addEventListener('mouseenter', () => {
 
+                card.style.transform = 'translateY(-8px)';
 
+                card.style.boxShadow = '0 15px 30px rgba(0, 0, 0, 0.12)';
 
+            });
 
+            
+            card.addEventListener('mouseleave', () => {
 
+                card.style.transform = 'translateY(0)';
 
+                card.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.08)';
 
+            });
 
+            
+            card.addEventListener('click', () => {
 
+                card.style.transform = 'scale(0.97)';
 
+                setTimeout(() => {
 
+                    card.style.transform = '';
 
+                    // 实际项目中这里会有页面跳转逻辑
 
+                    alert('进入' + card.querySelector('.card-title').textContent + '功能');
 
+                }, 200);
 
+            });
 
+        });
 
+        
+        // 模拟数据更新
 
+        setInterval(() => {
 
+            const stats = document.querySelectorAll('.stat-value');
 
+            stats[0].textContent = Math.floor(Math.random() * 20 + 35);
 
+            stats[1].textContent = Math.floor(Math.random() * 15 + 20);
 
+        }, 5000);
 
+        
+        // 随机激励语句
 
+        const motivationalPhrases = [
 
+            "每一次拒绝都是离成功更近一步！",
 
+            "卓越的销售不是推销产品，而是解决问题！",
 
+            "今天的练习，明天的签约！",
 
+            "客户的需求是您成功的地图，AI是您的导航仪！",
 
+            "专业来自准备，成功源于坚持！",
 
+            "您不是一个人在战斗，AI是您最强大的后援！"
 
+        ];
 
+        
+        // 随机选择激励语句
 
+        function updateMotivationalText() {
 
+            const textElement = document.querySelector('.motivational-text');
 
+            const randomIndex = Math.floor(Math.random() * motivationalPhrases.length);
 
+            textElement.textContent = motivationalPhrases[randomIndex];
 
+        }
 
+        
+        // 每10秒更新一次激励语句
 
+        setInterval(updateMotivationalText, 10000);
 
+    </script>
 
+</body>
 
+</html>

+ 570 - 0
ai-assisant/demo/photo.html
View File 

@@ -0,0 +1,570 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>客户画像分析 - AI实验室</title>
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
+    <style>
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
 
+        }
 
+
 
+        :root {
 
+            --primary: #4a8fe7;
 
+            --primary-dark: #0a192f;
 
+            --secondary: #5e72e4;
 
+            --accent: #ff6b6b;
 
+            --text-dark: #1a1a1a;
 
+            --text-medium: #4a4a4a;
 
+            --text-light: #8a8f9c;
 
+            --bg-white: #ffffff;
 
+            --bg-light: #f5f7fa;
 
+            --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
 
+            --border-radius: 12px;
 
+            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 
+        }
 
+
 
+        body {
 
+            background-color: var(--bg-white);
 
+            color: var(--text-medium);
 
+            padding: 0;
 
+            max-width: 480px;
 
+            margin: 0 auto;
 
+            min-height: 100vh;
 
+            position: relative;
 
+            overflow-x: hidden;
 
+            background: linear-gradient(to bottom, #f5f9ff 0%, #ffffff 100px);
 
+        }
 
+
 
+        .app-container {
 
+            padding: 0 16px 40px;
 
+            position: relative;
 
+        }
 
+
 
+        /* 头部导航 */
 
+        .header {
 
+            padding: 20px 0;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: space-between;
 
+            position: sticky;
 
+            top: 0;
 
+            background: var(--bg-white);
 
+            z-index: 100;
 
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
 
+        }
 
+
 
+        .header-title {
 
+            font-size: 22px;
 
+            font-weight: 700;
 
+            color: var(--text-dark);
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 10px;
 
+        }
 
+
 
+        .header-title i {
 
+            color: var(--primary);
 
+            font-size: 24px;
 
+            background: rgba(74, 143, 231, 0.1);
 
+            width: 40px;
 
+            height: 40px;
 
+            border-radius: 12px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+        }
 
+
 
+        /* 分析输入区 */
 
+        .analysis-input {
 
+            background: var(--bg-white);
 
+            border-radius: var(--border-radius);
 
+            box-shadow: var(--card-shadow);
 
+            padding: 20px;
 
+            margin-bottom: 24px;
 
+            border: 1px solid rgba(0, 0, 0, 0.03);
 
+        }
 
+
 
+        .input-group {
 
+            margin-bottom: 16px;
 
+        }
 
+
 
+        .input-group label {
 
+            display: block;
 
+            margin-bottom: 8px;
 
+            font-weight: 600;
 
+            color: var(--text-dark);
 
+            font-size: 14px;
 
+        }
 
+
 
+        .input-group input,
 
+        .input-group textarea {
 
+            width: 100%;
 
+            padding: 12px 16px;
 
+            border-radius: var(--border-radius);
 
+            border: 1px solid #e0e4e8;
 
+            font-size: 14px;
 
+            transition: var(--transition);
 
+        }
 
+
 
+        .input-group input:focus,
 
+        .input-group textarea:focus {
 
+            outline: none;
 
+            border-color: var(--primary);
 
+            box-shadow: 0 0 0 3px rgba(74, 143, 231, 0.2);
 
+        }
 
+
 
+        .input-group textarea {
 
+            min-height: 120px;
 
+            resize: vertical;
 
+        }
 
+
 
+        .action-buttons {
 
+            display: flex;
 
+            gap: 12px;
 
+            margin-top: 20px;
 
+        }
 
+
 
+        .btn {
 
+            padding: 12px 20px;
 
+            border-radius: var(--border-radius);
 
+            font-size: 14px;
 
+            font-weight: 600;
 
+            border: none;
 
+            cursor: pointer;
 
+            transition: var(--transition);
 
+            flex: 1;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            gap: 8px;
 
+        }
 
+
 
+        .btn-primary {
 
+            background: var(--primary);
 
+            color: white;
 
+            box-shadow: 0 4px 8px rgba(74, 143, 231, 0.2);
 
+        }
 
+
 
+        .btn-primary:hover {
 
+            background: #3a7bd5;
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 6px 12px rgba(74, 143, 231, 0.3);
 
+        }
 
+
 
+        .btn-secondary {
 
+            background: var(--bg-light);
 
+            color: var(--text-medium);
 
+        }
 
+
 
+        .btn-secondary:hover {
 
+            background: #e1ebfa;
 
+            transform: translateY(-2px);
 
+        }
 
+
 
+        /* 客户列表区 */
 
+        .client-list-section {
 
+            margin-bottom: 24px;
 
+        }
 
+
 
+        .section-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            margin-bottom: 16px;
 
+        }
 
+
 
+        .section-title {
 
+            font-size: 18px;
 
+            font-weight: 700;
 
+            color: var(--text-dark);
 
+            position: relative;
 
+            padding-left: 12px;
 
+        }
 
+
 
+        .section-title:before {
 
+            content: '';
 
+            position: absolute;
 
+            left: 0;
 
+            top: 4px;
 
+            height: 16px;
 
+            width: 4px;
 
+            background: var(--primary);
 
+            border-radius: 2px;
 
+        }
 
+
 
+        .search-box {
 
+            position: relative;
 
+            margin-bottom: 16px;
 
+        }
 
+
 
+        .search-box input {
 
+            width: 100%;
 
+            padding: 12px 16px 12px 42px;
 
+            border-radius: var(--border-radius);
 
+            border: 1px solid #e0e4e8;
 
+            font-size: 14px;
 
+            transition: var(--transition);
 
+        }
 
+
 
+        .search-box input:focus {
 
+            outline: none;
 
+            border-color: var(--primary);
 
+            box-shadow: 0 0 0 3px rgba(74, 143, 231, 0.2);
 
+        }
 
+
 
+        .search-box i {
 
+            position: absolute;
 
+            left: 16px;
 
+            top: 50%;
 
+            transform: translateY(-50%);
 
+            color: var(--text-light);
 
+        }
 
+
 
+        .client-list {
 
+            background: var(--bg-white);
 
+            border-radius: var(--border-radius);
 
+            box-shadow: var(--card-shadow);
 
+            overflow: hidden;
 
+            border: 1px solid rgba(0, 0, 0, 0.03);
 
+        }
 
+
 
+        .client-item {
 
+            padding: 16px;
 
+            border-bottom: 1px solid #f0f2f5;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: space-between;
 
+            transition: var(--transition);
 
+            cursor: pointer;
 
+        }
 
+
 
+        .client-item:last-child {
 
+            border-bottom: none;
 
+        }
 
+
 
+        .client-item:hover {
 
+            background: #f9fbfe;
 
+        }
 
+
 
+        .client-info {
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 12px;
 
+        }
 
+
 
+        .client-avatar {
 
+            width: 40px;
 
+            height: 40px;
 
+            border-radius: 50%;
 
+            background: linear-gradient(135deg, #4a8fe7, #5e72e4);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            color: white;
 
+            font-weight: bold;
 
+            font-size: 16px;
 
+        }
 
+
 
+        .client-name {
 
+            font-weight: 600;
 
+            color: var(--text-dark);
 
+            margin-bottom: 2px;
 
+        }
 
+
 
+        .client-meta {
 
+            font-size: 12px;
 
+            color: var(--text-light);
 
+        }
 
+
 
+        .client-date {
 
+            font-size: 12px;
 
+            color: var(--text-light);
 
+        }
 
+
 
+        /* 智能推荐区 */
 
+        .recommendation-section {
 
+            margin-top: 24px;
 
+        }
 
+
 
+        .recommendation-cards {
 
+            display: flex;
 
+            flex-direction: column;
 
+            gap: 16px;
 
+        }
 
+
 
+        .recommendation-card {
 
+            background: var(--bg-white);
 
+            border-radius: var(--border-radius);
 
+            box-shadow: var(--card-shadow);
 
+            padding: 20px;
 
+            position: relative;
 
+            border: 1px solid rgba(0, 0, 0, 0.03);
 
+        }
 
+
 
+        .card-header {
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 12px;
 
+            margin-bottom: 16px;
 
+        }
 
+
 
+        .card-icon {
 
+            width: 42px;
 
+            height: 42px;
 
+            border-radius: 12px;
 
+            background: rgba(74, 143, 231, 0.15);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            color: var(--primary);
 
+            font-size: 20px;
 
+        }
 
+
 
+        .card-title {
 
+            font-size: 16px;
 
+            font-weight: 700;
 
+            color: var(--text-dark);
 
+        }
 
+
 
+        .recommendation-content {
 
+            color: var(--text-medium);
 
+            font-size: 14px;
 
+            line-height: 1.6;
 
+            margin-bottom: 16px;
 
+        }
 
+
 
+        .recommendation-action {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+        }
 
+
 
+        .tag {
 
+            padding: 6px 12px;
 
+            border-radius: 20px;
 
+            background: var(--bg-light);
 
+            font-size: 12px;
 
+            color: var(--text-medium);
 
+            font-weight: 500;
 
+        }
 
+
 
+        .action-btn {
 
+            padding: 8px 16px;
 
+            border-radius: 30px;
 
+            background: var(--primary);
 
+            color: white;
 
+            font-size: 14px;
 
+            font-weight: 600;
 
+            border: none;
 
+            cursor: pointer;
 
+            transition: var(--transition);
 
+            box-shadow: 0 4px 8px rgba(74, 143, 231, 0.2);
 
+        }
 
+
 
+        .action-btn:hover {
 
+            background: #3a7bd5;
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 6px 12px rgba(74, 143, 231, 0.3);
 
+        }
 
+
 
+        /* 动画效果 */
 
+        @keyframes fadeIn {
 
+            from { opacity: 0; transform: translateY(20px); }
 
+            to { opacity: 1; transform: translateY(0); }
 
+        }
 
+
 
+        .animated-card {
 
+            animation: fadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="app-container">
 
+        <!-- 头部导航 -->
 
+        <div class="header">
 
+            <div class="header-title">
 
+                <i class="fas fa-user-tag"></i>
 
+                <h1>客户画像分析</h1>
 
+            </div>
 
+        </div>
 
+
 
+        <!-- 第一部分：分析输入区 -->
 
+        <div class="analysis-input animated-card">
 
+            <div class="input-group">
 
+                <label for="client-id">客户编号</label>
 
+                <input type="text" id="client-id" placeholder="请输入客户编号">
 
+            </div>
 
+            
+            <div class="input-group">
 
+                <label for="client-name">客户名称</label>
 
+                <input type="text" id="client-name" placeholder="请输入客户名称">
 
+            </div>
 
+            
+            <div class="input-group">
 
+                <label for="chat-data">聊天记录文本</label>
 
+                <textarea id="chat-data" placeholder="请粘贴或输入聊天记录文本..."></textarea>
 
+            </div>
 
+            
+            <div class="action-buttons">
 
+                <button class="btn btn-secondary">
 
+                    <i class="fas fa-save"></i> 保存
 
+                </button>
 
+                <button class="btn btn-primary">
 
+                    <i class="fas fa-play"></i> 开始分析
 
+                </button>
 
+            </div>
 
+        </div>
 
+
 
+        <!-- 第二部分：客户分析列表 -->
 
+        <div class="client-list-section">
 
+            <div class="section-header">
 
+                <h2 class="section-title">客户分析列表</h2>
 
+            </div>
 
+            
+            <div class="search-box">
 
+                <i class="fas fa-search"></i>
 
+                <input type="text" placeholder="搜索客户名称或编号...">
 
+            </div>
 
+            
+            <div class="client-list">
 
+                <!-- 客户项 1 -->
 
+                <div class="client-item animated-card">
 
+                    <div class="client-info">
 
+                        <div class="client-avatar">张</div>
 
+                        <div>
 
+                            <div class="client-name">张明远</div>
 
+                            <div class="client-meta">企业客户 · ID: C1001</div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="client-date">06-28</div>
 
+                </div>
 
+                
+                <!-- 客户项 2 -->
 
+                <div class="client-item animated-card">
 
+                    <div class="client-info">
 
+                        <div class="client-avatar">李</div>
 
+                        <div>
 
+                            <div class="client-name">李思琪</div>
 
+                            <div class="client-meta">个人客户 · ID: P2003</div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="client-date">06-27</div>
 
+                </div>
 
+                
+                <!-- 客户项 3 -->
 
+                <div class="client-item animated-card">
 
+                    <div class="client-info">
 
+                        <div class="client-avatar">王</div>
 
+                        <div>
 
+                            <div class="client-name">王建国</div>
 
+                            <div class="client-meta">企业客户 · ID: C1002</div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="client-date">06-25</div>
 
+                </div>
 
+                
+                <!-- 客户项 4 -->
 
+                <div class="client-item animated-card">
 
+                    <div class="client-info">
 
+                        <div class="client-avatar">陈</div>
 
+                        <div>
 
+                            <div class="client-name">陈晓薇</div>
 
+                            <div class="client-meta">个人客户 · ID: P2004</div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="client-date">06-24</div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+
 
+        <!-- 第三部分：智能推荐区 -->
 
+        <div class="recommendation-section">
 
+            <div class="section-header">
 
+                <h2 class="section-title">智能推荐</h2>
 
+            </div>
 
+            
+            <div class="recommendation-cards">
 
+                <!-- 推荐卡片 1 -->
 
+                <div class="recommendation-card animated-card">
 
+                    <div class="card-header">
 
+                        <div class="card-icon">
 
+                            <i class="fas fa-user-friends"></i>
 
+                        </div>
 
+                        <h3 class="card-title">相似客户推荐</h3>
 
+                    </div>
 
+                    <p class="recommendation-content">
 
+                        根据张明远的画像特征，发现3位相似客户，沟通策略可复用率85%
 
+                    </p>
 
+                    <div class="recommendation-action">
 
+                        <span class="tag">高匹配度</span>
 
+                        <button class="action-btn">查看客户</button>
 
+                    </div>
 
+                </div>
 
+
 
+                <!-- 推荐卡片 2 -->
 
+                <div class="recommendation-card animated-card">
 
+                    <div class="card-header">
 
+                        <div class="card-icon" style="background: rgba(94, 114, 228, 0.15); color: #5e72e4;">
 
+                            <i class="fas fa-clock"></i>
 
+                        </div>
 
+                        <h3 class="card-title">最佳接触时机</h3>
 
+                    </div>
 
+                    <p class="recommendation-content">
 
+                        李思琪的下次最佳联系时间：明天上午10:00-11:30，接通率预测92%
 
+                    </p>
 
+                    <div class="recommendation-action">
 
+                        <span class="tag">高接通率</span>
 
+                        <button class="action-btn">加入日程</button>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+
 
+    <script>
 
+        // 模拟交互效果
 
+        document.querySelectorAll('.client-item').forEach(item => {
 
+            item.addEventListener('click', function() {
 
+                this.style.transform = 'scale(0.98)';
 
+                setTimeout(() => {
 
+                    this.style.transform = '';
 
+                    alert('进入客户详情页：' + this.querySelector('.client-name').textContent);
 
+                }, 200);
 
+            });
 
+        });
 
+        
+        // 分析按钮点击事件
 
+        document.querySelector('.btn-primary').addEventListener('click', function() {
 
+            const clientId = document.getElementById('client-id').value;
 
+            const clientName = document.getElementById('client-name').value;
 
+            const chatData = document.getElementById('chat-data').value;
 
+            
+            if(!clientId || !clientName || !chatData) {
 
+                alert('请填写完整的客户信息和聊天记录');
 
+                return;
 
+            }
 
+            
+            alert(`开始分析客户 ${clientName} (${clientId}) 的聊天记录...`);
 
+        });
 
+        
+        // 保存按钮点击事件
 
+        document.querySelector('.btn-secondary').addEventListener('click', function() {
 
+            const clientId = document.getElementById('client-id').value;
 
+            const clientName = document.getElementById('client-name').value;
 
+            const chatData = document.getElementById('chat-data').value;
 
+            
+            if(!clientId || !clientName || !chatData) {
 
+                alert('请填写完整的客户信息和聊天记录');
 
+                return;
 
+            }
 
+            
+            alert(`已保存客户 ${clientName} (${clientId}) 的信息和聊天记录`);
 
+        });
 
+    </script>
 
+</body>
 
+</html>

+ 1333 - 0
ai-assisant/demo/training.html
View File 

@@ -0,0 +1,1333 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>虚拟陪练舱 - 酒店全员移动工作平台</title>
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
+    <style>
 
+        :root {
 
+            --primary: #4285f4;
 
+            --primary-light: #8ab4f8;
 
+            --primary-dark: #0a192f;
 
+            --text-dark: #333333;
 
+            --text-light: #f8f9fa;
 
+            --card-bg: #ffffff;
 
+            --border-color: #eaeaea;
 
+            --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 
+            --success: #34a853;
 
+            --warning: #f9ab00;
 
+            --danger: #ea4335;
 
+            --info: #4285f4;
 
+        }
 
+        
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
 
+        }
 
+        
+        body {
 
+            background-color: #f8fafc;
 
+            color: var(--text-dark);
 
+            line-height: 1.6;
 
+            padding-bottom: 40px;
 
+        }
 
+        
+        .container {
 
+            max-width: 480px;
 
+            margin: 0 auto;
 
+            padding: 0 16px;
 
+        }
 
+        
+        /* 头部导航 */
 
+        .header {
 
+            position: sticky;
 
+            top: 0;
 
+            background: rgba(255, 255, 255, 0.95);
 
+            backdrop-filter: blur(10px);
 
+            z-index: 100;
 
+            padding: 16px 0;
 
+            border-bottom: 1px solid var(--border-color);
 
+        }
 
+        
+        .nav-top {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+        }
 
+        
+        .back-btn {
 
+            background: none;
 
+            border: none;
 
+            font-size: 20px;
 
+            color: var(--text-dark);
 
+            cursor: pointer;
 
+        }
 
+        
+        .page-title {
 
+            font-size: 18px;
 
+            font-weight: 700;
 
+            color: var(--primary-dark);
 
+        }
 
+        
+        /* 场景选择卡 */
 
+        .section-title {
 
+            font-size: 16px;
 
+            font-weight: 600;
 
+            margin: 24px 0 12px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: space-between;
 
+        }
 
+        
+        .section-title i {
 
+            margin-right: 8px;
 
+            color: var(--primary);
 
+        }
 
+        
+        .section-title .edit-btn {
 
+            background: none;
 
+            border: none;
 
+            color: var(--primary-dark);
 
+            font-size: 14px;
 
+            cursor: pointer;
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 4px;
 
+        }
 
+        
+        .difficulty-tabs {
 
+            display: flex;
 
+            gap: 12px;
 
+            overflow-x: auto;
 
+            padding: 8px 0 16px;
 
+            -ms-overflow-style: none;
 
+            scrollbar-width: none;
 
+        }
 
+        
+        .difficulty-tabs::-webkit-scrollbar {
 
+            display: none;
 
+        }
 
+        
+        .tab {
 
+            flex: 0 0 auto;
 
+            padding: 8px 16px;
 
+            border-radius: 20px;
 
+            background-color: var(--card-bg);
 
+            border: 1px solid var(--border-color);
 
+            box-shadow: var(--shadow);
 
+            font-size: 14px;
 
+            cursor: pointer;
 
+            transition: all 0.3s ease;
 
+        }
 
+        
+        .tab.active {
 
+            background-color: var(--primary);
 
+            color: white;
 
+            border-color: var(--primary);
 
+            font-weight: 600;
 
+        }
 
+        
+        .customer-bubbles {
 
+            display: flex;
 
+            flex-wrap: wrap;
 
+            gap: 12px;
 
+            margin-top: 8px;
 
+        }
 
+        
+        .bubble {
 
+            padding: 10px 16px;
 
+            border-radius: 20px;
 
+            background-color: var(--card-bg);
 
+            border: 1px solid var(--border-color);
 
+            box-shadow: var(--shadow);
 
+            font-size: 14px;
 
+            cursor: pointer;
 
+            transition: all 0.2s ease;
 
+            position: relative;
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 6px;
 
+        }
 
+        
+        .bubble.active {
 
+            background-color: var(--primary-dark);
 
+            color: white;
 
+            border-color: var(--primary-dark);
 
+        }
 
+        
+        .bubble .delete-btn {
 
+            display: none;
 
+            background: none;
 
+            border: none;
 
+            color: rgba(255, 255, 255, 0.7);
 
+            font-size: 12px;
 
+            cursor: pointer;
 
+        }
 
+        
+        .bubble.active .delete-btn {
 
+            display: block;
 
+        }
 
+        
+        .add-bubble {
 
+            padding: 10px 16px;
 
+            border-radius: 20px;
 
+            background-color: var(--card-bg);
 
+            border: 1px dashed var(--border-color);
 
+            font-size: 14px;
 
+            cursor: pointer;
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 6px;
 
+            color: #94a3b8;
 
+        }
 
+        
+        /* 对话主界面 - 修改部分 */
 
+        .avatar-container {
 
+            display: flex;
 
+            justify-content: center;
 
+            margin: 20px 0;
 
+        }
 
+        
+        /* 客户头像缩小到100px */
 
+        .customer-avatar {
 
+            width: 100px;
 
+            height: 100px;
 
+            border-radius: 50%;
 
+            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            position: relative;
 
+            overflow: hidden;
 
+            box-shadow: var(--shadow);
 
+            transition: all 0.3s ease;
 
+        }
 
+        
+        .customer-avatar::before {
 
+            content: "";
 
+            position: absolute;
 
+            width: 140px;
 
+            height: 140px;
 
+            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
 
+            border-radius: 50%;
 
+        }
 
+        
+        /* 头像图标缩小到36px */
 
+        .customer-avatar i {
 
+            font-size: 36px;
 
+            color: white;
 
+        }
 
+        
+        /* 聊天框高度增加到320px */
 
+        .conversation-container {
 
+            background-color: var(--card-bg);
 
+            border-radius: 20px;
 
+            box-shadow: var(--shadow);
 
+            padding: 16px;
 
+            margin: 16px 0;
 
+            height: 320px; /* 修改此处 */
 
+            overflow-y: auto;
 
+        }
 
+        
+        .message {
 
+            max-width: 80%;
 
+            padding: 12px;
 
+            margin-bottom: 16px;
 
+            border-radius: 18px;
 
+            position: relative;
 
+            animation: fadeIn 0.3s ease;
 
+        }
 
+        
+        @keyframes fadeIn {
 
+            from { opacity: 0; transform: translateY(10px); }
 
+            to { opacity: 1; transform: translateY(0); }
 
+        }
 
+        
+        .customer-message {
 
+            background-color: #f1f5f9;
 
+            border-bottom-left-radius: 4px;
 
+            align-self: flex-start;
 
+        }
 
+        
+        .user-message {
 
+            background-color: var(--primary);
 
+            color: white;
 
+            border-bottom-right-radius: 4px;
 
+            margin-left: auto;
 
+        }
 
+        
+        .input-area {
 
+            display: flex;
 
+            gap: 12px;
 
+            align-items: center;
 
+            background-color: var(--card-bg);
 
+            border-radius: 30px;
 
+            padding: 12px 20px;
 
+            box-shadow: var(--shadow);
 
+            margin-top: 16px;
 
+        }
 
+        
+        .voice-btn {
 
+            width: 48px;
 
+            height: 48px;
 
+            border-radius: 50%;
 
+            background-color: var(--primary);
 
+            color: white;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            cursor: pointer;
 
+            border: none;
 
+            font-size: 20px;
 
+            transition: all 0.3s ease;
 
+        }
 
+        
+        .voice-btn.active {
 
+            background-color: var(--danger);
 
+            color: white;
 
+            animation: pulse 1.5s infinite;
 
+        }
 
+        
+        @keyframes pulse {
 
+            0% { transform: scale(1); }
 
+            50% { transform: scale(1.05); }
 
+            100% { transform: scale(1); }
 
+        }
 
+        
+        .text-input {
 
+            flex: 1;
 
+            padding: 12px 16px;
 
+            border: 1px solid var(--border-color);
 
+            border-radius: 24px;
 
+            font-size: 16px;
 
+            outline: none;
 
+            transition: border-color 0.3s;
 
+        }
 
+        
+        .text-input:focus {
 
+            border-color: var(--primary);
 
+        }
 
+        
+        .send-btn {
 
+            width: 48px;
 
+            height: 48px;
 
+            border-radius: 50%;
 
+            background-color: var(--primary-dark);
 
+            color: white;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            cursor: pointer;
 
+            border: none;
 
+            font-size: 20px;
 
+        }
 
+        
+        /* 能力仪表盘 */
 
+        .dashboard {
 
+            background-color: var(--card-bg);
 
+            border-radius: 20px;
 
+            box-shadow: var(--shadow);
 
+            padding: 24px;
 
+            margin: 24px 0;
 
+            text-align: center;
 
+        }
 
+        
+        .progress-container {
 
+            position: relative;
 
+            width: 180px;
 
+            height: 180px;
 
+            margin: 0 auto 20px;
 
+        }
 
+        
+        .progress-circle {
 
+            width: 100%;
 
+            height: 100%;
 
+        }
 
+        
+        .progress-value {
 
+            position: absolute;
 
+            top: 50%;
 
+            left: 50%;
 
+            transform: translate(-50%, -50%);
 
+            font-size: 32px;
 
+            font-weight: 700;
 
+            color: var(--primary-dark);
 
+        }
 
+        
+        .skills-container {
 
+            display: flex;
 
+            flex-wrap: wrap;
 
+            justify-content: center;
 
+            gap: 16px;
 
+            margin-top: 20px;
 
+        }
 
+        
+        .skill {
 
+            display: flex;
 
+            flex-direction: column;
 
+            align-items: center;
 
+        }
 
+        
+        .skill-progress {
 
+            width: 80px;
 
+            height: 6px;
 
+            background-color: #e2e8f0;
 
+            border-radius: 3px;
 
+            margin-top: 8px;
 
+            overflow: hidden;
 
+        }
 
+        
+        .skill-progress-fill {
 
+            height: 100%;
 
+            background-color: var(--primary);
 
+            border-radius: 3px;
 
+        }
 
+        
+        .skill-name {
 
+            font-size: 12px;
 
+            color: var(--text-dark);
 
+            margin-top: 4px;
 
+        }
 
+        
+        /* 存档面板 */
 
+        .report-card {
 
+            background-color: var(--card-bg);
 
+            border-radius: 20px;
 
+            box-shadow: var(--shadow);
 
+            padding: 20px;
 
+            margin-top: 24px;
 
+        }
 
+        
+        .report-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            margin-bottom: 16px;
 
+        }
 
+        
+        .report-title {
 
+            font-size: 18px;
 
+            font-weight: 700;
 
+            color: var(--primary-dark);
 
+        }
 
+        
+        .comparison {
 
+            display: flex;
 
+            align-items: center;
 
+            font-size: 14px;
 
+            color: var(--success);
 
+        }
 
+        
+        .comparison.down {
 
+            color: var(--danger);
 
+        }
 
+        
+        .comparison i {
 
+            margin-right: 4px;
 
+        }
 
+        
+        .report-summary {
 
+            font-size: 14px;
 
+            line-height: 1.7;
 
+            margin-bottom: 20px;
 
+        }
 
+        
+        .tags-container {
 
+            display: flex;
 
+            flex-wrap: wrap;
 
+            gap: 8px;
 
+            margin-bottom: 20px;
 
+        }
 
+        
+        .tag {
 
+            padding: 6px 12px;
 
+            background-color: #e2e8f0;
 
+            border-radius: 16px;
 
+            font-size: 12px;
 
+        }
 
+        
+        .actions {
 
+            display: flex;
 
+            gap: 12px;
 
+        }
 
+        
+        .action-btn {
 
+            flex: 1;
 
+            padding: 12px;
 
+            border-radius: 12px;
 
+            border: none;
 
+            font-weight: 600;
 
+            cursor: pointer;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            gap: 8px;
 
+            transition: all 0.3s ease;
 
+        }
 
+        
+        .view-btn {
 
+            background-color: var(--primary);
 
+            color: white;
 
+        }
 
+        
+        .history-btn {
 
+            background-color: var(--primary-dark);
 
+            color: white;
 
+        }
 
+        
+        /* 弹窗样式 */
 
+        .modal-overlay {
 
+            position: fixed;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            bottom: 0;
 
+            background-color: rgba(0, 0, 0, 0.5);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            z-index: 1000;
 
+            opacity: 0;
 
+            pointer-events: none;
 
+            transition: opacity 0.3s ease;
 
+        }
 
+        
+        .modal-overlay.active {
 
+            opacity: 1;
 
+            pointer-events: all;
 
+        }
 
+        
+        .modal {
 
+            background-color: white;
 
+            border-radius: 16px;
 
+            width: 90%;
 
+            max-width: 500px;
 
+            max-height: 90vh;
 
+            overflow-y: auto;
 
+            padding: 24px;
 
+            box-shadow: var(--shadow);
 
+            transform: translateY(20px);
 
+            transition: transform 0.3s ease;
 
+        }
 
+        
+        .modal-overlay.active .modal {
 
+            transform: translateY(0);
 
+        }
 
+        
+        .modal-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            margin-bottom: 20px;
 
+            padding-bottom: 16px;
 
+            border-bottom: 1px solid var(--border-color);
 
+        }
 
+        
+        .modal-title {
 
+            font-size: 18px;
 
+            font-weight: 700;
 
+            color: var(--primary-dark);
 
+        }
 
+        
+        .close-modal {
 
+            background: none;
 
+            border: none;
 
+            font-size: 20px;
 
+            cursor: pointer;
 
+            color: #94a3b8;
 
+        }
 
+        
+        .modal-content {
 
+            margin-bottom: 24px;
 
+        }
 
+        
+        .report-detail {
 
+            background-color: white;
 
+            padding: 20px;
 
+            border-radius: 16px;
 
+        }
 
+        
+        .report-info {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            margin-bottom: 20px;
 
+            padding-bottom: 15px;
 
+            border-bottom: 1px solid var(--border-color);
 
+        }
 
+        
+        .info-item {
 
+            display: flex;
 
+            flex-direction: column;
 
+        }
 
+        
+        .info-label {
 
+            font-size: 12px;
 
+            color: #64748b;
 
+            margin-bottom: 4px;
 
+        }
 
+        
+        .info-value {
 
+            font-size: 14px;
 
+            font-weight: 600;
 
+            color: var(--text-dark);
 
+        }
 
+        
+        .section {
 
+            margin-bottom: 24px;
 
+        }
 
+        
+        .section-title {
 
+            font-size: 16px;
 
+            font-weight: 600;
 
+            margin-bottom: 12px;
 
+            color: var(--primary-dark);
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 8px;
 
+        }
 
+        
+        .section-title i {
 
+            color: var(--primary);
 
+        }
 
+        
+        .conversation-history {
 
+            background-color: #f8fafc;
 
+            border-radius: 12px;
 
+            padding: 16px;
 
+            max-height: 300px;
 
+            overflow-y: auto;
 
+        }
 
+        
+        .message-history {
 
+            padding: 10px 12px;
 
+            margin-bottom: 12px;
 
+            border-radius: 12px;
 
+            font-size: 14px;
 
+        }
 
+        
+        .customer-message-history {
 
+            background-color: #e2e8f0;
 
+            align-self: flex-start;
 
+            max-width: 80%;
 
+        }
 
+        
+        .user-message-history {
 
+            background-color: var(--primary-light);
 
+            color: var(--text-dark);
 
+            margin-left: auto;
 
+            max-width: 80%;
 
+        }
 
+        
+        .evaluation-content {
 
+            background-color: #f8fafc;
 
+            border-radius: 12px;
 
+            padding: 16px;
 
+            font-size: 14px;
 
+            line-height: 1.6;
 
+        }
 
+        
+        .summary-content {
 
+            background-color: #f8fafc;
 
+            border-radius: 12px;
 
+            padding: 16px;
 
+            font-size: 14px;
 
+            line-height: 1.6;
 
+        }
 
+        
+        .tag-list {
 
+            display: flex;
 
+            flex-wrap: wrap;
 
+            gap: 8px;
 
+            margin-top: 12px;
 
+        }
 
+        
+        .history-list {
 
+            background-color: #f8fafc;
 
+            border-radius: 12px;
 
+            padding: 16px;
 
+            max-height: 400px;
 
+            overflow-y: auto;
 
+        }
 
+        
+        .history-item {
 
+            padding: 12px;
 
+            background-color: white;
 
+            border-radius: 12px;
 
+            margin-bottom: 12px;
 
+            box-shadow: var(--shadow);
 
+            cursor: pointer;
 
+            transition: all 0.2s ease;
 
+        }
 
+        
+        .history-item:hover {
 
+            transform: translateY(-2px);
 
+            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
 
+        }
 
+        
+        .history-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            margin-bottom: 8px;
 
+        }
 
+        
+        .history-date {
 
+            font-weight: 600;
 
+            color: var(--primary-dark);
 
+        }
 
+        
+        .history-type {
 
+            background-color: var(--primary);
 
+            color: white;
 
+            padding: 2px 8px;
 
+            border-radius: 10px;
 
+            font-size: 12px;
 
+        }
 
+        
+        .history-summary {
 
+            font-size: 14px;
 
+            color: #64748b;
 
+            display: -webkit-box;
 
+            -webkit-line-clamp: 2;
 
+            -webkit-box-orient: vertical;
 
+            overflow: hidden;
 
+        }
 
+        
+        .no-history {
 
+            text-align: center;
 
+            padding: 20px;
 
+            color: #94a3b8;
 
+        }
 
+        
+        /* 评分标签 */
 
+        .score-tag {
 
+            display: inline-block;
 
+            padding: 4px 8px;
 
+            border-radius: 12px;
 
+            font-size: 12px;
 
+            font-weight: 600;
 
+            margin-top: 8px;
 
+        }
 
+        
+        .high-score {
 
+            background-color: #d1fae5;
 
+            color: #065f46;
 
+        }
 
+        
+        .medium-score {
 
+            background-color: #fef3c7;
 
+            color: #92400e;
 
+        }
 
+        
+        .low-score {
 
+            background-color: #fee2e2;
 
+            color: #b91c1c;
 
+        }
 
+        
+        /* 新增：修改说明 */
 
+        .modification-notice {
 
+            position: fixed;
 
+            bottom: 20px;
 
+            right: 20px;
 
+            background: var(--primary);
 
+            color: white;
 
+            padding: 10px 20px;
 
+            border-radius: 30px;
 
+            font-size: 14px;
 
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
 
+            z-index: 1000;
 
+            animation: slideIn 0.5s ease-out;
 
+        }
 
+        
+        @keyframes slideIn {
 
+            from { transform: translateY(100px); opacity: 0; }
 
+            to { transform: translateY(0); opacity: 1; }
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <!-- 头部导航 -->
 
+        <header class="header">
 
+            <div class="nav-top">
 
+                <button class="back-btn">
 
+                    <i class="fas fa-arrow-left"></i>
 
+                </button>
 
+                <h1 class="page-title">虚拟陪练舱</h1>
 
+                <div></div> <!-- 占位元素 -->
 
+            </div>
 
+        </header>
 
+        
+        <!-- 场景选择卡 -->
 
+        <section>
 
+            <div class="section-title">
 
+                <div>
 
+                    <i class="fas fa-layer-group"></i>
 
+                    选择陪练场景
 
+                </div>
 
+                <button class="edit-btn" id="editCustomerBtn">
 
+                    <i class="fas fa-edit"></i>
 
+                    编辑分类
 
+                </button>
 
+            </div>
 
+            <div class="difficulty-tabs">
 
+                <div class="tab active">⭐ 初级</div>
 
+                <div class="tab">⭐⭐ 中级</div>
 
+                <div class="tab">⭐⭐⭐ 高级</div>
 
+                <div class="tab">专家挑战</div>
 
+            </div>
 
+            
+            <div class="customer-bubbles" id="customerBubbles">
 
+                <div class="bubble active">
 
+                    商务客户
 
+                    <button class="delete-btn">
 
+                        <i class="fas fa-times"></i>
 
+                    </button>
 
+                </div>
 
+                <div class="bubble">
 
+                    家庭客户
 
+                    <button class="delete-btn">
 
+                        <i class="fas fa-times"></i>
 
+                    </button>
 
+                </div>
 
+                <div class="bubble">
 
+                    VIP客户
 
+                    <button class="delete-btn">
 
+                        <i class="fas fa-times"></i>
 
+                    </button>
 
+                </div>
 
+                <div class="bubble">
 
+                    投诉客户
 
+                    <button class="delete-btn">
 
+                        <i class="fas fa-times"></i>
 
+                    </button>
 
+                </div>
 
+                <div class="bubble">
 
+                    团体客户
 
+                    <button class="delete-btn">
 
+                        <i class="fas fa-times"></i>
 
+                    </button>
 
+                </div>
 
+                <div class="add-bubble" id="addCustomerBtn">
 
+                    <i class="fas fa-plus"></i>
 
+                    添加类型
 
+                </div>
 
+            </div>
 
+        </section>
 
+        
+        <!-- 对话主界面 -->
 
+        <section>
 
+            <div class="avatar-container">
 
+                <div class="customer-avatar">
 
+                    <i class="fas fa-user-tie"></i>
 
+                </div>
 
+            </div>
 
+            
+            <div class="conversation-container" id="conversation">
 
+                <div class="message customer-message">
 
+                    您好，我想预订下周五的商务套房，你们有什么优惠吗？
 
+                </div>
 
+                <div class="message user-message">
 
+                    感谢您的咨询！我们目前有商务套餐优惠，包含早餐和会议室使用，您需要了解详情吗？
 
+                </div>
 
+                <div class="message customer-message">
 
+                    会议室可以容纳多少人？另外我需要延迟退房到下午4点。
 
+                </div>
 
+                <div class="message user-message">
 
+                    我们的商务套房会议室最多可容纳20人，延迟退房到下午4点需要额外支付50%的房费。
 
+                </div>
 
+                <div class="message customer-message">
 
+                    50%的费用太高了，我是贵酒店的黄金会员，能否提供免费延迟退房？
 
+                </div>
 
+                <div class="message user-message">
 
+                    感谢您的会员支持！根据黄金会员权益，我们可以提供免费延迟退房到下午2点，或者您可以选择支付额外费用延长到4点。
 
+                </div>
 
+                <div class="message customer-message">
 
+                    下午2点可能不太够，我下午3点有个重要会议。有没有折中方案？
 
+                </div>
 
+                <div class="message user-message">
 
+                    我理解您的情况。我们可以为您提供下午3点的延迟退房，只需额外支付25%的房费，这样您看可以接受吗？
 
+                </div>
 
+            </div>
 
+            
+            <div class="input-area">
 
+                <button class="voice-btn" id="voiceBtn">
 
+                    <i class="fas fa-microphone"></i>
 
+                </button>
 
+                <input type="text" class="text-input" placeholder="输入回复内容...">
 
+                <button class="send-btn">
 
+                    <i class="fas fa-paper-plane"></i>
 
+                </button>
 
+            </div>
 
+        </section>
 
+        
+        <!-- 能力仪表盘 -->
 
+        <section class="dashboard">
 
+            <h2 class="section-title">
 
+                <i class="fas fa-chart-line"></i>
 
+                能力评估
 
+            </h2>
 
+            
+            <div class="progress-container">
 
+                <svg class="progress-circle" viewBox="0 0 180 180">
 
+                    <circle cx="90" cy="90" r="80" stroke="#e2e8f0" stroke-width="10" fill="none" />
 
+                    <circle cx="90" cy="90" r="80" stroke="#4285f4" stroke-width="10" fill="none" 
+                            stroke-dasharray="502" stroke-dashoffset="150" stroke-linecap="round" />
 
+                </svg>
 
+                <div class="progress-value">86</div>
 
+            </div>
 
+            
+            <div class="skills-container">
 
+                <div class="skill">
 
+                    <div class="skill-name">反应力</div>
 
+                    <div class="skill-progress">
 
+                        <div class="skill-progress-fill" style="width: 90%"></div>
 
+                    </div>
 
+                </div>
 
+                <div class="skill">
 
+                    <div class="skill-name">话术</div>
 
+                    <div class="skill-progress">
 
+                        <div class="skill-progress-fill" style="width: 85%"></div>
 
+                    </div>
 
+                </div>
 
+                <div class="skill">
 
+                    <div class="skill-name">说服力</div>
 
+                    <div class="skill-progress">
 
+                        <div class="skill-progress-fill" style="width: 75%"></div>
 
+                    </div>
 
+                </div>
 
+                <div class="skill">
 
+                    <div class="skill-name">专业度</div>
 
+                    <div class="skill-progress">
 
+                        <div class="skill-progress-fill" style="width: 92%"></div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </section>
 
+        
+        <!-- 存档面板 -->
 
+        <section class="report-card">
 
+            <div class="report-header">
 
+                <h3 class="report-title">本次陪练报告</h3>
 
+                <div class="comparison">
 
+                    <i class="fas fa-arrow-up"></i>
 
+                    <span>12%</span>
 
+                </div>
 
+            </div>
 
+            
+            <p class="report-summary">
 
+                本次与商务客户的对话中，您展现了优秀的专业知识和反应能力。建议在价格谈判环节采用更积极的策略，成功率可提升15%。
 
+            </p>
 
+            
+            <div class="tags-container">
 
+                <div class="tag">商务场景</div>
 
+                <div class="tag">价格谈判</div>
 
+                <div class="tag">提升空间</div>
 
+            </div>
 
+            
+            <div class="actions">
 
+                <button class="action-btn view-btn" id="viewReportBtn">
 
+                    <i class="fas fa-file-alt"></i>
 
+                    查看完整报告
 
+                </button>
 
+                <button class="action-btn history-btn" id="historyReportBtn">
 
+                    <i class="fas fa-history"></i>
 
+                    历史报告
 
+                </button>
 
+            </div>
 
+        </section>
 
+    </div>
 
+    
+    <!-- 添加客户类型弹窗 -->
 
+    <div class="modal-overlay" id="addCustomerModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">添加客户类型</h3>
 
+                <button class="close-modal">
 
+                    <i class="fas fa-times"></i>
 
+                </button>
 
+            </div>
 
+            <div class="modal-content">
 
+                <div class="form-group">
 
+                    <label for="customerType">客户类型名称</label>
 
+                    <input type="text" id="customerType" placeholder="例如：新婚客户">
 
+                </div>
 
+            </div>
 
+            <div class="modal-actions">
 
+                <button class="modal-btn cancel-btn">取消</button>
 
+                <button class="modal-btn save-btn">保存</button>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 完整报告弹窗 -->
 
+    <div class="modal-overlay" id="fullReportModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">陪练报告详情</h3>
 
+                <button class="close-modal">
 
+                    <i class="fas fa-times"></i>
 
+                </button>
 
+            </div>
 
+            <div class="modal-content">
 
+                <div class="report-detail">
 
+                    <div class="report-info">
 
+                        <div class="info-item">
 
+                            <span class="info-label">日期</span>
 
+                            <span class="info-value">2023年10月15日</span>
 
+                        </div>
 
+                        <div class="info-item">
 
+                            <span class="info-label">客户类型</span>
 
+                            <span class="info-value">商务客户</span>
 
+                        </div>
 
+                        <div class="info-item">
 
+                            <span class="info-label">难度</span>
 
+                            <span class="info-value">⭐⭐ 中级</span>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div class="section">
 
+                        <div class="section-title">
 
+                            <i class="fas fa-comments"></i>
 
+                            对话内容
 
+                        </div>
 
+                        <div class="conversation-history">
 
+                            <div class="message-history customer-message-history">
 
+                                您好，我想预订下周五的商务套房，你们有什么优惠吗？
 
+                            </div>
 
+                            <div class="message-history user-message-history">
 
+                                感谢您的咨询！我们目前有商务套餐优惠，包含早餐和会议室使用，您需要了解详情吗？
 
+                            </div>
 
+                            <div class="message-history customer-message-history">
 
+                                会议室可以容纳多少人？另外我需要延迟退房到下午4点。
 
+                            </div>
 
+                            <div class="message-history user-message-history">
 
+                                我们的商务套房会议室最多可容纳20人，延迟退房到下午4点需要额外支付50%的房费。
 
+                            </div>
 
+                            <div class="message-history customer-message-history">
 
+                                50%的费用太高了，我是贵酒店的黄金会员，能否提供免费延迟退房？
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div class="section">
 
+                        <div class="section-title">
 
+                            <i class="fas fa-star"></i>
 
+                            能力评价
 
+                        </div>
 
+                        <div class="evaluation-content">
 
+                            <p>您在本轮陪练中展现了出色的专业素养和服务意识：</p>
 
+                            <ul style="margin-top: 12px; padding-left: 20px;">
 
+                                <li>反应速度优秀，对客户需求理解准确</li>
 
+                                <li>专业知识扎实，准确提供了会议室容量信息</li>
 
+                                <li>会员政策运用得当，但未能灵活处理客户特殊需求</li>
 
+                                <li>建议提升价格谈判技巧，提供更多替代方案</li>
 
+                            </ul>
 
+                            <div class="score-tag high-score">综合评分: 86/100</div>
 
+                        </div>
 
+                    </div>
 
+                    
+                    <div class="section">
 
+                        <div class="section-title">
 
+                            <i class="fas fa-lightbulb"></i>
 
+                            总结方法
 
+                        </div>
 
+                        <div class="summary-content">
 
+                            <p>针对商务客户的价格敏感需求，建议采用以下策略：</p>
 
+                            <ol style="margin-top: 12px; padding-left: 20px;">
 
+                                <li>强调会员权益价值，提供阶梯式延迟退房方案</li>
 
+                                <li>捆绑销售会议室与客房服务，提高整体收益</li>
 
+                                <li>准备2-3个替代方案，满足不同预算需求</li>
 
+                                <li>主动提供增值服务（如免费打印、咖啡服务）提升客户体验</li>
 
+                            </ol>
 
+                            <div class="tag-list">
 
+                                <div class="tag">商务谈判</div>
 
+                                <div class="tag">会员权益</div>
 
+                                <div class="tag">价格策略</div>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 历史报告弹窗 -->
 
+    <div class="modal-overlay" id="historyReportModal">
 
+        <div class="modal">
 
+            <div class="modal-header">
 
+                <h3 class="modal-title">历史陪练报告</h3>
 
+                <button class="close-modal">
 
+                    <i class="fas fa-times"></i>
 
+                </button>
 
+            </div>
 
+            <div class="modal-content">
 
+                <div class="history-list">
 
+                    <div class="history-item" data-id="1">
 
+                        <div class="history-header">
 
+                            <span class="history-date">2023年10月15日 14:30</span>
 
+                            <span class="history-type">商务客户</span>
 
+                        </div>
 
+                        <div class="history-summary">
 
+                            本次与商务客户的对话中，您展现了优秀的专业知识和反应能力。建议在价格谈判环节采用更积极的策略。
 
+                        </div>
 
+                    </div>
 
+                    <div class="history-item" data-id="2">
 
+                        <div class="history-header">
 
+                            <span class="history-date">2023年10月12日 10:15</span>
 
+                            <span class="history-type">投诉客户</span>
 
+                        </div>
 
+                        <div class="history-summary">
 
+                            处理客户投诉时展现了良好的同理心，但解决方案不够全面，建议加强问题解决能力训练。
 
+                        </div>
 
+                    </div>
 
+                    <div class="history-item" data-id="3">
 
+                        <div class="history-header">
 
+                            <span class="history-date">2023年10月10日 16:45</span>
 
+                            <span class="history-type">VIP客户</span>
 
+                        </div>
 
+                        <div class="history-summary">
 
+                            为VIP客户提供了个性化服务方案，展现了出色的服务意识，但在附加服务推荐上略显保守。
 
+                        </div>
 
+                    </div>
 
+                    <div class="history-item" data-id="4">
 
+                        <div class="history-header">
 
+                            <span class="history-date">2023年10月8日 09:30</span>
 
+                            <span class="history-type">家庭客户</span>
 
+                        </div>
 
+                        <div class="history-summary">
 
+                            为家庭客户推荐了亲子套餐，但未能有效突出套餐价值，建议加强销售话术训练。
 
+                        </div>
 
+                    </div>
 
+                    <div class="history-item" data-id="5">
 
+                        <div class="history-header">
 
+                            <span class="history-date">2023年10月5日 11:20</span>
 
+                            <span class="history-type">团体客户</span>
 
+                        </div>
 
+                        <div class="history-summary">
 
+                            处理团体预订时展现了良好的组织能力，但在协调不同需求方面还有提升空间。
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+    
+    <!-- 修改说明 -->
 
+    <div class="modification-notice" id="modNotice">
 
+        已优化：聊天框高度增加，客户头像缩小
 
+    </div>
 
+    
+    <script>
 
+        // 语音按钮交互
 
+        const voiceBtn = document.getElementById('voiceBtn');
 
+        voiceBtn.addEventListener('click', function() {
 
+            this.classList.toggle('active');
 
+            
+            if (this.classList.contains('active')) {
 
+                this.innerHTML = '<i class="fas fa-square"></i>';
 
+            } else {
 
+                this.innerHTML = '<i class="fas fa-microphone"></i>';
 
+            }
 
+        });
 
+        
+        // 模拟对话
 
+        const conversation = document.getElementById('conversation');
 
+        
+        // 添加新消息的函数
 
+        function addMessage(text, isCustomer = false) {
 
+            const message = document.createElement('div');
 
+            message.classList.add('message');
 
+            message.classList.add(isCustomer ? 'customer-message' : 'user-message');
 
+            message.textContent = text;
 
+            
+            conversation.appendChild(message);
 
+            conversation.scrollTop = conversation.scrollHeight;
 
+        }
 
+        
+        // 模拟回复
 
+        document.querySelector('.send-btn').addEventListener('click', function() {
 
+            const input = document.querySelector('.text-input');
 
+            if (input.value.trim() !== '') {
 
+                addMessage(input.value);
 
+                input.value = '';
 
+                
+                // 模拟AI回复
 
+                setTimeout(() => {
 
+                    addMessage("听起来不错，我会考虑这个方案。能提供一份详细报价吗？", true);
 
+                }, 1000);
 
+            }
 
+        });
 
+        
+        // 按Enter键发送消息
 
+        document.querySelector('.text-input').addEventListener('keypress', function(e) {
 
+            if (e.key === 'Enter') {
 
+                document.querySelector('.send-btn').click();
 
+            }
 
+        });
 
+        
+        // 气泡选择效果
 
+        document.querySelectorAll('.bubble').forEach(bubble => {
 
+            bubble.addEventListener('click', function(e) {
 
+                if (e.target.classList.contains('delete-btn')) return;
 
+                
+                document.querySelectorAll('.bubble').forEach(b => b.classList.remove('active'));
 
+                this.classList.add('active');
 
+            });
 
+        });
 
+        
+        // 难度标签选择效果
 
+        document.querySelectorAll('.tab').forEach(tab => {
 
+            tab.addEventListener('click', function() {
 
+                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
 
+                this.classList.add('active');
 
+            });
 
+        });
 
+        
+        // 客户类型编辑功能
 
+        const editBtn = document.getElementById('editCustomerBtn');
 
+        const addBtn = document.getElementById('addCustomerBtn');
 
+        const modal = document.getElementById('addCustomerModal');
 
+        const closeModal = document.querySelector('.close-modal');
 
+        const cancelBtn = document.querySelector('.cancel-btn');
 
+        const saveBtn = document.querySelector('.save-btn');
 
+        const bubblesContainer = document.getElementById('customerBubbles');
 
+        
+        // 显示编辑模式
 
+        editBtn.addEventListener('click', function() {
 
+            const isEditing = this.classList.toggle('editing');
 
+            
+            if (isEditing) {
 
+                this.innerHTML = '<i class="fas fa-check"></i> 完成编辑';
 
+                document.querySelectorAll('.delete-btn').forEach(btn => {
 
+                    btn.style.display = 'block';
 
+                });
 
+            } else {
 
+                this.innerHTML = '<i class="fas fa-edit"></i> 编辑分类';
 
+                document.querySelectorAll('.delete-btn').forEach(btn => {
 
+                    btn.style.display = 'none';
 
+                });
 
+            }
 
+        });
 
+        
+        // 删除客户类型
 
+        document.querySelectorAll('.delete-btn').forEach(btn => {
 
+            btn.addEventListener('click', function(e) {
 
+                e.stopPropagation();
 
+                const bubble = this.parentElement;
 
+                if (document.querySelectorAll('.bubble').length > 1) {
 
+                    bubble.remove();
 
+                } else {
 
+                    alert('至少需要保留一个客户类型');
 
+                }
 
+            });
 
+        });
 
+        
+        // 打开添加客户类型弹窗
 
+        addBtn.addEventListener('click', function() {
 
+            modal.classList.add('active');
 
+        });
 
+        
+        // 关闭弹窗
 
+        function closeModalFunc() {
 
+            modal.classList.remove('active');
 
+            document.getElementById('customerType').value = '';
 
+        }
 
+        
+        closeModal.addEventListener('click', closeModalFunc);
 
+        cancelBtn.addEventListener('click', closeModalFunc);
 
+        
+        // 保存新客户类型
 
+        saveBtn.addEventListener('click', function() {
 
+            const typeName = document.getElementById('customerType').value.trim();
 
+            if (typeName) {
 
+                const newBubble = document.createElement('div');
 
+                newBubble.className = 'bubble';
 
+                newBubble.innerHTML = `
 
+                    ${typeName}
 
+                    <button class="delete-btn">
 
+                        <i class="fas fa-times"></i>
 
+                    </button>
 
+                `;
 
+                
+                bubblesContainer.insertBefore(newBubble, addBtn);
 
+                
+                // 为新气泡添加事件
 
+                newBubble.addEventListener('click', function(e) {
 
+                    if (e.target.classList.contains('delete-btn')) return;
 
+                    
+                    document.querySelectorAll('.bubble').forEach(b => b.classList.remove('active'));
 
+                    this.classList.add('active');
 
+                });
 
+                
+                // 为新删除按钮添加事件
 
+                newBubble.querySelector('.delete-btn').addEventListener('click', function(e) {
 
+                    e.stopPropagation();
 
+                    const bubble = this.parentElement;
 
+                    if (document.querySelectorAll('.bubble').length > 1) {
 
+                        bubble.remove();
 
+                    } else {
 
+                        alert('至少需要保留一个客户类型');
 
+                    }
 
+                });
 
+                
+                closeModalFunc();
 
+            } else {
 
+                alert('请输入客户类型名称');
 
+            }
 
+        });
 
+        
+        // 报告弹窗功能
 
+        const viewReportBtn = document.getElementById('viewReportBtn');
 
+        const historyReportBtn = document.getElementById('historyReportBtn');
 
+        const fullReportModal = document.getElementById('fullReportModal');
 
+        const historyReportModal = document.getElementById('historyReportModal');
 
+        
+        // 打开完整报告
 
+        viewReportBtn.addEventListener('click', function() {
 
+            fullReportModal.classList.add('active');
 
+        });
 
+        
+        // 打开历史报告
 
+        historyReportBtn.addEventListener('click', function() {
 
+            historyReportModal.classList.add('active');
 
+        });
 
+        
+        // 关闭报告弹窗
 
+        document.querySelectorAll('.close-modal').forEach(btn => {
 
+            btn.addEventListener('click', function() {
 
+                this.closest('.modal-overlay').classList.remove('active');
 
+            });
 
+        });
 
+        
+        // 点击历史报告项显示详情
 
+        document.querySelectorAll('.history-item').forEach(item => {
 
+            item.addEventListener('click', function() {
 
+                const reportId = this.getAttribute('data-id');
 
+                historyReportModal.classList.remove('active');
 
+                
+                // 模拟加载报告详情
 
+                setTimeout(() => {
 
+                    fullReportModal.classList.add('active');
 
+                }, 300);
 
+            });
 
+        });
 
+        
+        // 点击模态框外部关闭弹窗
 
+        document.querySelectorAll('.modal-overlay').forEach(overlay => {
 
+            overlay.addEventListener('click', function(e) {
 
+                if (e.target === this) {
 
+                    this.classList.remove('active');
 
+                }
 
+            });
 
+        });
 
+        
+        // 显示修改通知
 
+        setTimeout(() => {
 
+            document.getElementById('modNotice').style.display = 'none';
 
+        }, 3000);
 
+    </script>
 
+</body>
 
+</html>

+ 107 - 2
ai-assisant/package-lock.json
View File 

@@ -8,12 +8,20 @@
 
       "name": "ai-assisant",
 
       "version": "0.0.0",
 
       "dependencies": {
 
+        "@angular/cdk": "^20.0.4",
 
         "@angular/common": "^20.0.0",
 
         "@angular/compiler": "^20.0.0",
 
         "@angular/core": "^20.0.0",
 
         "@angular/forms": "^20.0.0",
 
+        "@angular/material": "^20.0.4",
 
         "@angular/platform-browser": "^20.0.0",
 
         "@angular/router": "^20.0.0",
 
+        "@fortawesome/angular-fontawesome": "^2.0.1",
 
+        "@fortawesome/fontawesome-free": "^6.7.2",
 
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
 
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
 
+        "animate.css": "^4.1.1",
 
+        "modern-css-reset": "^1.4.0",
 
         "rxjs": "~7.8.0",
 
         "tslib": "^2.3.0",
 
         "zone.js": "~0.15.0"
 
@@ -208,6 +216,21 @@
 
         }
 
       }
 
     },
 
+    "node_modules/@angular/cdk": {
 
+      "version": "20.0.4",
 
+      "resolved": "https://registry.npmmirror.com/@angular/cdk/-/cdk-20.0.4.tgz",
 
+      "integrity": "sha512-NCUuw0qQXwawLsT14JHApNB9or3XGs7D1pWXlOIix/fKqzHVfi4un9xHmpjH2Q1uCiwonuak7fDof8B+IXhbug==",
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "parse5": "^7.1.2",
 
+        "tslib": "^2.3.0"
 
+      },
 
+      "peerDependencies": {
 
+        "@angular/common": "^20.0.0 || ^21.0.0",
 
+        "@angular/core": "^20.0.0 || ^21.0.0",
 
+        "rxjs": "^6.5.3 || ^7.4.0"
 
+      }
 
+    },
 
     "node_modules/@angular/cli": {
 
       "version": "20.0.4",
 
       "resolved": "https://registry.npmmirror.com/@angular/cli/-/cli-20.0.4.tgz",
 
@@ -454,6 +477,23 @@
 
         "rxjs": "^6.5.3 || ^7.4.0"
 
       }
 
     },
 
+    "node_modules/@angular/material": {
 
+      "version": "20.0.4",
 
+      "resolved": "https://registry.npmmirror.com/@angular/material/-/material-20.0.4.tgz",
 
+      "integrity": "sha512-ET+znnyOVjBezHsjy7U42/88JPl9Mhumvf01gMBN8mNcaoSpeM4cc2uKBg30/3YzykKIsjXtvUJj/PaTujmJAQ==",
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "tslib": "^2.3.0"
 
+      },
 
+      "peerDependencies": {
 
+        "@angular/cdk": "20.0.4",
 
+        "@angular/common": "^20.0.0 || ^21.0.0",
 
+        "@angular/core": "^20.0.0 || ^21.0.0",
 
+        "@angular/forms": "^20.0.0 || ^21.0.0",
 
+        "@angular/platform-browser": "^20.0.0 || ^21.0.0",
 
+        "rxjs": "^6.5.3 || ^7.4.0"
 
+      }
 
+    },
 
     "node_modules/@angular/platform-browser": {
 
       "version": "20.0.5",
 
       "resolved": "https://registry.npmmirror.com/@angular/platform-browser/-/platform-browser-20.0.5.tgz",
 
@@ -1212,6 +1252,61 @@
 
         "node": ">=18"
 
       }
 
     },
 
+    "node_modules/@fortawesome/angular-fontawesome": {
 
+      "version": "2.0.1",
 
+      "resolved": "https://registry.npmmirror.com/@fortawesome/angular-fontawesome/-/angular-fontawesome-2.0.1.tgz",
 
+      "integrity": "sha512-IdklZkuw+WS2GQWhFnr1EX/tOALnrKaj4YGnUmPaUg2Uf+Amj8Xi+M/qDrr915YJ5MaDxd9tZ1kqOHRcvQqq2A==",
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
 
+        "tslib": "^2.8.1"
 
+      },
 
+      "peerDependencies": {
 
+        "@angular/core": "^20.0.0"
 
+      }
 
+    },
 
+    "node_modules/@fortawesome/fontawesome-common-types": {
 
+      "version": "6.7.2",
 
+      "resolved": "https://registry.npmmirror.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
 
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
 
+      "license": "MIT",
 
+      "engines": {
 
+        "node": ">=6"
 
+      }
 
+    },
 
+    "node_modules/@fortawesome/fontawesome-free": {
 
+      "version": "6.7.2",
 
+      "resolved": "https://registry.npmmirror.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz",
 
+      "integrity": "sha512-JUOtgFW6k9u4Y+xeIaEiLr3+cjoUPiAuLXoyKOJSia6Duzb7pq+A76P9ZdPDoAoxHdHzq6gE9/jKBGXlZT8FbA==",
 
+      "license": "(CC-BY-4.0 AND OFL-1.1 AND MIT)",
 
+      "engines": {
 
+        "node": ">=6"
 
+      }
 
+    },
 
+    "node_modules/@fortawesome/fontawesome-svg-core": {
 
+      "version": "6.7.2",
 
+      "resolved": "https://registry.npmmirror.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
 
+      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
 
+      "license": "MIT",
 
+      "dependencies": {
 
+        "@fortawesome/fontawesome-common-types": "6.7.2"
 
+      },
 
+      "engines": {
 
+        "node": ">=6"
 
+      }
 
+    },
 
+    "node_modules/@fortawesome/free-solid-svg-icons": {
 
+      "version": "6.7.2",
 
+      "resolved": "https://registry.npmmirror.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
 
+      "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
 
+      "license": "(CC-BY-4.0 AND MIT)",
 
+      "dependencies": {
 
+        "@fortawesome/fontawesome-common-types": "6.7.2"
 
+      },
 
+      "engines": {
 
+        "node": ">=6"
 
+      }
 
+    },
 
     "node_modules/@inquirer/checkbox": {
 
       "version": "4.1.8",
 
       "resolved": "https://registry.npmmirror.com/@inquirer/checkbox/-/checkbox-4.1.8.tgz",
 
@@ -3365,6 +3460,12 @@
 
         }
 
       }
 
     },
 
+    "node_modules/animate.css": {
 
+      "version": "4.1.1",
 
+      "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
 
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
 
+      "license": "MIT"
 
+    },
 
     "node_modules/ansi-escapes": {
 
       "version": "4.3.2",
 
       "resolved": "https://registry.npmmirror.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
 
@@ -6492,6 +6593,12 @@
 
         "mkdirp": "bin/cmd.js"
 
       }
 
     },
 
+    "node_modules/modern-css-reset": {
 
+      "version": "1.4.0",
 
+      "resolved": "https://registry.npmmirror.com/modern-css-reset/-/modern-css-reset-1.4.0.tgz",
 
+      "integrity": "sha512-0crZmSFmrxkI7159rvQWjpDhy0u4+Awg/iOycJdlVn0RSeft/a+6BrQHR3IqvmdK25sqt0o6Z5Ap7cWgUee2rw==",
 
+      "license": "MIT"
 
+    },
 
     "node_modules/mrmime": {
 
       "version": "2.0.1",
 
       "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-2.0.1.tgz",
 
@@ -7018,7 +7125,6 @@
 
       "version": "7.3.0",
 
       "resolved": "https://registry.npmmirror.com/parse5/-/parse5-7.3.0.tgz",
 
       "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
 
-      "dev": true,
 
       "license": "MIT",
 
       "dependencies": {
 
         "entities": "^6.0.0"
 
@@ -7072,7 +7178,6 @@
 
       "version": "6.0.1",
 
       "resolved": "https://registry.npmmirror.com/entities/-/entities-6.0.1.tgz",
 
       "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
 
-      "dev": true,
 
       "license": "BSD-2-Clause",
 
       "engines": {
 
         "node": ">=0.12"

+ 8 - 0
ai-assisant/package.json
View File 

@@ -20,12 +20,20 @@
 
   },
 
   "private": true,
 
   "dependencies": {
 
+    "@angular/cdk": "^20.0.4",
 
     "@angular/common": "^20.0.0",
 
     "@angular/compiler": "^20.0.0",
 
     "@angular/core": "^20.0.0",
 
     "@angular/forms": "^20.0.0",
 
+    "@angular/material": "^20.0.4",
 
     "@angular/platform-browser": "^20.0.0",
 
     "@angular/router": "^20.0.0",
 
+    "@fortawesome/angular-fontawesome": "^2.0.1",
 
+    "@fortawesome/fontawesome-free": "^6.7.2",
 
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
 
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
 
+    "animate.css": "^4.1.1",
 
+    "modern-css-reset": "^1.4.0",
 
     "rxjs": "~7.8.0",
 
     "tslib": "^2.3.0",
 
     "zone.js": "~0.15.0"

+ 1 - 1
ai-assisant/src/app/app.html
View File 

@@ -10,4 +10,4 @@
 
 <button routerLink='/crm/mobile/image'>
 
     导航到数据训练
 
 </button>
 
-<router-outlet></router-outlet>
 
+<router-outlet></router-outlet>

+ 9 - 1
ai-assisant/src/app/app.routes.ts
View File 

@@ -1,8 +1,16 @@
 
 import { Routes } from '@angular/router';
 
+import { PageCrmHome } from '../modules/crm/mobile/page-crm-home/page-crm-home';
 
+import { PageCrmImage } from '../modules/crm/mobile/page-crm-image/page-crm-image';
 
+import { PageCrmTraining } from '../modules/crm/mobile/page-crm-training/page-crm-training';
 
+
 
+
 
 
 export const routes: Routes = [
 
     {
 
     path: 'crm/mobile',
 
     loadChildren: () => import('../modules/crm/mobile/mobile.routes').then(m => m.MOBILE_ROUTES)
 
-  }
 
+  },
 
+  { path: '', component: PageCrmHome },
 
+  { path: '', component: PageCrmImage },
 
+  { path: '', component: PageCrmTraining},
 
 ];

+ 8 - 4
ai-assisant/src/app/app.ts
View File 

@@ -1,12 +1,16 @@
 
 import { Component } from '@angular/core';
 
 import { RouterModule, RouterOutlet } from '@angular/router';
 
-
 
+/*
 
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
+import { PageCrmHome } from '../modules/crm/mobile/page-crm-home/page-crm-home';
 
+*/
 
 @Component({
 
   selector: 'app-root',
 
-  imports: [RouterOutlet,RouterModule],
 
+  standalone: true,
 
+  imports: [RouterOutlet, RouterModule,],
 
   templateUrl: './app.html',
 
   styleUrl: './app.scss'
 
 })
 
 export class App {
 
-  protected title = 'ai-assisant';
 
-}
 
+  protected title = 'ai-assistant';
 
+}

+ 3 - 1
ai-assisant/src/index.html
View File 

@@ -6,8 +6,10 @@
 
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
 
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
 </head>
 
-<body>
 
+<body class="mat-typography">
 
   <app-root></app-root>
 
 </body>
 
 </html>

+ 216 - 1
ai-assisant/src/modules/crm/mobile/page-crm-home/page-crm-home.html
View File 

@@ -1 +1,216 @@
 
-<p>page-crm-home works!</p>
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>AI实验室 - 酒店销售智能平台</title>
 
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
 
+    
+</head>
 
+<body>
 
+    <div class="dashboard-container">
 
+        <!-- 头部导航 -->
 
+        <div class="header">
 
+            <div class="logo">
 
+                <div class="logo-icon">
 
+                    <i class="fas fa-brain"></i>
 
+                </div>
 
+                <div>
 
+                    <div class="logo-text">AI实验室</div>
 
+                    <div class="logo-subtext">酒店销售智能平台</div>
 
+                </div>
 
+            </div>
 
+            <div class="user-actions">
 
+                <div class="action-btn">
 
+                    <i class="fas fa-bell"></i>
 
+                    <div class="badge">5</div>
 
+                </div>
 
+                <div class="action-btn">
 
+                    <i class="fas fa-user"></i>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 欢迎区域 -->
 
+        <div class="welcome-section">
 
+            <h1 class="greeting">你好，<span>销售精英</span> 👋</h1>
 
+            
+            <div class="motivational-text">
 
+                每一次对话都是机会，每一次练习都是进步。今天，让AI成为您最强大的销售伙伴！
 
+            </div>
 
+        </div>
 
+        
+        <!-- 数据统计卡片 -->
 
+        <div class="stats-card">
 
+            <div class="stats-header">
 
+                <div class="stats-title">团队今日战绩</div>
 
+                <div class="action-btn">
 
+                    <i class="fas fa-arrow-right"></i>
 
+                </div>
 
+            </div>
 
+            <div class="stats-container">
 
+                <div class="stat-item">
 
+                    <div class="stat-value">128</div>
 
+                    <div class="stat-label">陪练次数</div>
 
+                </div>
 
+                <div class="stat-item">
 
+                    <div class="stat-value">42</div>
 
+                    <div class="stat-label">策略生成</div>
 
+                </div>
 
+                <div class="stat-item">
 
+                    <div class="stat-value">92%</div>
 
+                    <div class="stat-label">满意度</div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 功能卡片网格 -->
 
+        <div class="features-grid">
 
+            <!-- 虚拟陪练 -->
 
+            <div class="feature-card">
 
+                <div class="pulse"></div>
 
+                <div class="card-icon">
 
+                    <i class="fas fa-robot"></i>
 
+                </div>
 
+                <h3 class="card-title">虚拟陪练</h3>
 
+                <p class="card-desc">与AI客户进行真实销售对话练习，提升沟通技巧</p>
 
+                <div class="card-stats">
 
+                    <span><i class="fas fa-history"></i> 86次练习</span>
 
+                    <span>92%得分</span>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 话术决策 -->
 
+            <div class="feature-card">
 
+                <div class="card-icon">
 
+                    <i class="fas fa-comments"></i>
 
+                </div>
 
+                <h3 class="card-title">话术决策</h3>
 
+                <p class="card-desc">智能生成最佳沟通策略，应对各种销售场景</p>
 
+                <div class="card-stats">
 
+                    <span><i class="fas fa-star"></i> 34个策略</span>
 
+                    <span>89%有效</span>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 数据训练 -->
 
+            <div class="feature-card">
 
+                <div class="card-icon">
 
+                    <i class="fas fa-database"></i>
 
+                </div>
 
+                <h3 class="card-title">数据训练</h3>
 
+                <p class="card-desc">上传销售数据训练AI模型，优化决策能力</p>
 
+                <div class="card-stats">
 
+                    <span><i class="fas fa-chart-line"></i> 1.2GB</span>
 
+                    <span>95%准确</span>
 
+                </div>
 
+            </div>
 
+            
+            <!-- 客户画像 -->
 
+            <div class="feature-card">
 
+                <div class="card-icon">
 
+                    <i class="fas fa-user-tie"></i>
 
+                </div>
 
+                <h3 class="card-title">客户画像</h3>
 
+                <p class="card-desc">生成详细客户分析报告，洞察客户需求</p>
 
+                <div class="card-stats">
 
+                    <span><i class="fas fa-file-alt"></i> 28份</span>
 
+                    <span>更新中</span>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        
+        <!-- 激励区域 -->
 
+        <div class="inspiration-section">
 
+            <div class="inspiration-icon">
 
+                <i class="fas fa-bullhorn"></i>
 
+            </div>
 
+            <h2 class="inspiration-title"><i class="fas fa-fire"></i> 今日激励</h2>
 
+            <p class="inspiration-content">
 
+                卓越的销售不是天生的，而是通过每一次精心准备的对话和持续训练铸就的。您今天的努力，将成就明天签约的喜悦！
 
+            </p>
 
+        </div>
 
+        
+        <!-- 用户统计区域 -->
 
+        <div class="inspiration-section">
 
+            <h2 class="inspiration-title"><i class="fas fa-trophy"></i> 成功源于持续精进</h2>
 
+            <p class="inspiration-content">
 
+                您已经完成了<span style="color: var(--primary-blue); font-weight: 700;">86次</span>虚拟陪练，
 
+                击败了<span style="color: var(--primary-blue); font-weight: 700;">92%</span>的同级销售。
 
+                继续保持，下一个销售冠军就是您！
 
+            </p>
 
+        </div>
 
+        
+        <!-- 底部版权信息 -->
 
+        <div class="footer">
 
+            <p>© 2023 AI实验室 - 酒店销售智能平台 | 赋能销售精英，创造无限可能</p>
 
+        </div>
 
+    </div>
 
+
 
+    <script>
 
+        // 模拟动态数据更新
 
+        document.addEventListener('DOMContentLoaded', function() {
 
+            // 更新统计数据
 
+            const stats = document.querySelectorAll('.stat-value');
 
+            let values = [128, 42, 92];
 
+            let counters = values.map(value => 0);
 
+            
+            stats.forEach((stat, index) => {
 
+                const target = values[index];
 
+                const increment = target / 50;
 
+                
+                const updateCounter = () => {
 
+                    if (counters[index] < target) {
 
+                        counters[index] += increment;
 
+                        stat.textContent = index === 2 ? 
+                            Math.min(Math.ceil(counters[index]), target) + "%" : 
+                            Math.min(Math.ceil(counters[index]), target);
 
+                        setTimeout(updateCounter, 30);
 
+                    } else {
 
+                        stat.textContent = index === 2 ? target + "%" : target;
 
+                    }
 
+                };
 
+                
+                updateCounter();
 
+            });
 
+            
+            // 卡片悬停效果增强
 
+            const cards = document.querySelectorAll('.feature-card');
 
+            cards.forEach(card => {
 
+                card.addEventListener('mouseenter', function() {
 
+                    this.style.transform = 'translateY(-10px)';
 
+                });
 
+                
+                card.addEventListener('mouseleave', function() {
 
+                    this.style.transform = 'translateY(0)';
 
+                });
 
+            });
 
+            
+            // 用户操作按钮效果
 
+            const actionBtns = document.querySelectorAll('.action-btn');
 
+            actionBtns.forEach(btn => {
 
+                btn.addEventListener('click', function() {
 
+                    this.style.transform = 'scale(0.95)';
 
+                    setTimeout(() => {
 
+                        this.style.transform = '';
 
+                    }, 200);
 
+                });
 
+            });
 
+            
+            // 添加卡片进入动画
 
+            const featureCards = document.querySelectorAll('.feature-card');
 
+            featureCards.forEach((card, index) => {
 
+                card.style.opacity = '0';
 
+                card.style.transform = 'translateY(30px)';
 
+                
+                setTimeout(() => {
 
+                    card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
 
+                    card.style.opacity = '1';
 
+                    card.style.transform = 'translateY(0)';
 
+                }, 300 + index * 150);
 
+            });
 
+        });
 
+    </script>
 
+</body>
 
+</html>

+ 594 - 0
ai-assisant/src/modules/crm/mobile/page-crm-home/page-crm-home.scss
View File 

@@ -0,0 +1,594 @@
 
+        :root {
 
+            --primary-blue: #2563eb;
 
+            --accent-teal: #0d9488;
 
+            --accent-purple: #7b4bff;
 
+            --accent-pink: #ec4899;
 
+            --accent-amber: #f59e0b;
 
+            --accent-gradient: linear-gradient(135deg, #2563eb, #3b82f6);
 
+            --light-gray: #f8fafc;
 
+            --light-blue: #e0f2fe;
 
+            --text-dark: #1f2937;
 
+            --text-medium: #4b5563;
 
+            --text-light: #6b7280;
 
+            --card-bg: #ffffff;
 
+            --border-color: #e2e8f0;
 
+            --success: #10b981;
 
+            --warning: #f59e0b;
 
+            --danger: #ef4444;
 
+            --transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 
+            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
 
+            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
 
+            --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
 
+            --border-radius: 16px;
 
+            --header-height: 70px;
 
+        }
 
+
 
+        * {
 
+            margin: 0;
 
+            padding: 0;
 
+            box-sizing: border-box;
 
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 
+        }
 
+
 
+        body {
 
+            background: linear-gradient(135deg, #f8fafc, #e0f2fe);
 
+            color: var(--text-dark);
 
+            line-height: 1.6;
 
+            overflow-x: hidden;
 
+            min-height: 100vh;
 
+            padding: 0;
 
+        }
 
+
 
+        .dashboard-container {
 
+            max-width: 1200px;
 
+            margin: 0 auto;
 
+            padding: 20px 16px 40px;
 
+            position: relative;
 
+        }
 
+
 
+        /* 头部导航 - 增强效果 */
 
+        .header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            padding: 12px 0 24px;
 
+            margin-bottom: 10px;
 
+            position: relative;
 
+            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 
+        }
 
+
 
+        .logo {
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 14px;
 
+        }
 
+
 
+        .logo-icon {
 
+            width: 46px;
 
+            height: 46px;
 
+            background: var(--accent-gradient);
 
+            border-radius: 14px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            box-shadow: var(--shadow-md);
 
+            transition: var(--transition);
 
+        }
 
+
 
+        .logo-icon i {
 
+            font-size: 22px;
 
+            color: white;
 
+            animation: pulse 2s infinite;
 
+        }
 
+
 
+        .logo-text {
 
+            font-size: 24px;
 
+            font-weight: 800;
 
+            color: var(--text-dark);
 
+            letter-spacing: -0.5px;
 
+            line-height: 1.2;
 
+            background: linear-gradient(90deg, var(--primary-blue), var(--accent-purple));
 
+            -webkit-background-clip: text;
 
+            -webkit-text-fill-color: transparent;
 
+        }
 
+
 
+        .logo-subtext {
 
+            font-size: 13px;
 
+            color: var(--primary-blue);
 
+            font-weight: 600;
 
+            letter-spacing: 0.5px;
 
+            text-transform: uppercase;
 
+        }
 
+
 
+        .user-actions {
 
+            display: flex;
 
+            gap: 20px;
 
+        }
 
+
 
+        .action-btn {
 
+            background: var(--card-bg);
 
+            border-radius: 12px;
 
+            width: 44px;
 
+            height: 44px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            color: var(--text-medium);
 
+            font-size: 18px;
 
+            cursor: pointer;
 
+            transition: var(--transition);
 
+            border: 1px solid var(--border-color);
 
+            position: relative;
 
+            box-shadow: var(--shadow-sm);
 
+        }
 
+
 
+        .action-btn:hover {
 
+            background: #f1f5f9;
 
+            transform: translateY(-3px);
 
+            box-shadow: var(--shadow-lg);
 
+            color: var(--primary-blue);
 
+        }
 
+
 
+        .badge {
 
+            position: absolute;
 
+            top: -6px;
 
+            right: -6px;
 
+            width: 22px;
 
+            height: 22px;
 
+            background: var(--danger);
 
+            color: white;
 
+            border-radius: 50%;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            font-size: 12px;
 
+            font-weight: 600;
 
+            animation: bounce 1.5s infinite;
 
+        }
 
+
 
+        /* 欢迎区域 - 增强效果 */
 
+        .welcome-section {
 
+            margin: 25px 0 40px;
 
+            padding: 30px;
 
+            text-align: center;
 
+            background: var(--card-bg);
 
+            border-radius: var(--border-radius);
 
+            box-shadow: var(--shadow-md);
 
+            border: 1px solid var(--border-color);
 
+            position: relative;
 
+            overflow: hidden;
 
+        }
 
+
 
+        .welcome-section::before {
 
+            content: "";
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            width: 100%;
 
+            height: 5px;
 
+            background: var(--accent-gradient);
 
+        }
 
+
 
+        .greeting {
 
+            font-size: 36px;
 
+            font-weight: 800;
 
+            margin-bottom: 15px;
 
+            line-height: 1.3;
 
+            position: relative;
 
+            display: inline-block;
 
+        }
 
+
 
+        .greeting span {
 
+            color: var(--primary-blue);
 
+            position: relative;
 
+            z-index: 1;
 
+        }
 
+
 
+        .greeting span::after {
 
+            content: '';
 
+            position: absolute;
 
+            bottom: 2px;
 
+            left: 0;
 
+            width: 100%;
 
+            height: 12px;
 
+            background: rgba(37, 99, 235, 0.2);
 
+            border-radius: 4px;
 
+            z-index: -1;
 
+            transform: skewX(-15deg);
 
+        }
 
+
 
+        .motivational-text {
 
+            font-size: 18px;
 
+            color: var(--text-dark);
 
+            font-weight: 500;
 
+            line-height: 1.7;
 
+            max-width: 90%;
 
+            margin: 30px auto 15px;
 
+            padding: 20px;
 
+            border-radius: 18px;
 
+            background: rgba(37, 99, 235, 0.03);
 
+            border-left: 4px solid var(--primary-blue);
 
+            position: relative;
 
+            box-shadow: var(--shadow-sm);
 
+        }
 
+
 
+        .motivational-text::before {
 
+            content: '"';
 
+            position: absolute;
 
+            top: -20px;
 
+            left: 10px;
 
+            font-size: 70px;
 
+            color: rgba(37, 99, 235, 0.1);
 
+            font-family: Georgia, serif;
 
+        }
 
+
 
+        /* 功能卡片网格 - 增强效果 */
 
+        .features-grid {
 
+            display: grid;
 
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 
+            gap: 24px;
 
+            margin: 40px 0;
 
+        }
 
+
 
+        .feature-card {
 
+            background: var(--card-bg);
 
+            border-radius: var(--border-radius);
 
+            padding: 28px 24px;
 
+            position: relative;
 
+            overflow: hidden;
 
+            transition: var(--transition);
 
+            border: 1px solid var(--border-color);
 
+            box-shadow: var(--shadow-md);
 
+            cursor: pointer;
 
+            min-height: 250px;
 
+            display: flex;
 
+            flex-direction: column;
 
+            z-index: 1;
 
+        }
 
+
 
+        .feature-card::after {
 
+            content: "";
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            width: 100%;
 
+            height: 5px;
 
+            background: var(--accent-gradient);
 
+            opacity: 0;
 
+            transition: var(--transition);
 
+            z-index: -1;
 
+        }
 
+
 
+        .feature-card:hover {
 
+            transform: translateY(-10px);
 
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
 
+            border-color: transparent;
 
+        }
 
+
 
+        .feature-card:hover::after {
 
+            opacity: 1;
 
+            height: 100%;
 
+        }
 
+
 
+        .card-icon {
 
+            width: 60px;
 
+            height: 60px;
 
+            border-radius: 16px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            margin-bottom: 20px;
 
+            font-size: 28px;
 
+            transition: var(--transition);
 
+            position: relative;
 
+            z-index: 2;
 
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
 
+        }
 
+
 
+        .feature-card:hover .card-icon {
 
+            transform: translateY(-5px);
 
+        }
 
+
 
+        .card-title {
 
+            font-size: 22px;
 
+            font-weight: 700;
 
+            margin-bottom: 15px;
 
+            color: var(--text-dark);
 
+            position: relative;
 
+            z-index: 2;
 
+        }
 
+
 
+        .card-desc {
 
+            font-size: 16px;
 
+            color: var(--text-medium);
 
+            line-height: 1.6;
 
+            flex-grow: 1;
 
+            margin-bottom: 15px;
 
+            position: relative;
 
+            z-index: 2;
 
+        }
 
+
 
+        .card-stats {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            margin-top: auto;
 
+            font-size: 14px;
 
+            font-weight: 500;
 
+            color: var(--text-light);
 
+            padding-top: 12px;
 
+            border-top: 1px solid rgba(0, 0, 0, 0.05);
 
+            position: relative;
 
+            z-index: 2;
 
+        }
 
+
 
+        .card-stats i {
 
+            margin-right: 5px;
 
+        }
 
+
 
+        /* 数据统计卡片 - 增强效果 */
 
+        .stats-card {
 
+            background: var(--card-bg);
 
+            border-radius: var(--border-radius);
 
+            padding: 28px;
 
+            margin: 40px 0;
 
+            border: 1px solid var(--border-color);
 
+            box-shadow: var(--shadow-md);
 
+            position: relative;
 
+            overflow: hidden;
 
+            background-image: radial-gradient(circle at top right, rgba(37, 99, 235, 0.05) 0%, transparent 30%);
 
+        }
 
+
 
+        .stats-card::before {
 
+            content: '';
 
+            position: absolute;
 
+            top: 0;
 
+            left: 0;
 
+            right: 0;
 
+            height: 5px;
 
+            background: var(--accent-gradient);
 
+        }
 
+
 
+        .stats-header {
 
+            display: flex;
 
+            justify-content: space-between;
 
+            align-items: center;
 
+            margin-bottom: 30px;
 
+        }
 
+
 
+        .stats-title {
 
+            font-size: 22px;
 
+            font-weight: 700;
 
+            color: var(--text-dark);
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 10px;
 
+        }
 
+
 
+        .stats-title::before {
 
+            content: "";
 
+            display: block;
 
+            width: 8px;
 
+            height: 30px;
 
+            background: var(--primary-blue);
 
+            border-radius: 4px;
 
+        }
 
+
 
+        .action-btn {
 
+            background: rgba(37, 99, 235, 0.1);
 
+            color: var(--primary-blue);
 
+        }
 
+
 
+        .stats-container {
 
+            display: grid;
 
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 
+            gap: 24px;
 
+        }
 
+
 
+        .stat-item {
 
+            text-align: center;
 
+            padding: 25px 15px;
 
+            background: var(--light-gray);
 
+            border-radius: 14px;
 
+            transition: var(--transition);
 
+            box-shadow: var(--shadow-sm);
 
+            position: relative;
 
+            overflow: hidden;
 
+        }
 
+
 
+        .stat-item:hover {
 
+            transform: translateY(-5px);
 
+            box-shadow: var(--shadow-md);
 
+            background: white;
 
+        }
 
+
 
+        .stat-value {
 
+            font-size: 36px;
 
+            font-weight: 800;
 
+            color: var(--primary-blue);
 
+            margin-bottom: 8px;
 
+            text-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
 
+        }
 
+
 
+        .stat-label {
 
+            font-size: 15px;
 
+            color: var(--text-light);
 
+            font-weight: 500;
 
+        }
 
+
 
+        /* 激励区域 - 增强效果 */
 
+        .inspiration-section {
 
+            background: linear-gradient(135deg, #f0f9ff, var(--light-blue));
 
+            border-radius: var(--border-radius);
 
+            padding: 40px 35px;
 
+            margin: 40px 0;
 
+            text-align: center;
 
+            border: 1px solid #dbeafe;
 
+            position: relative;
 
+            overflow: hidden;
 
+            box-shadow: var(--shadow-md);
 
+            border-top: 3px solid var(--primary-blue);
 
+        }
 
+
 
+        .inspiration-title {
 
+            font-size: 26px;
 
+            font-weight: 800;
 
+            color: var(--primary-blue);
 
+            margin-bottom: 20px;
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            gap: 12px;
 
+        }
 
+
 
+        .inspiration-content {
 
+            font-size: 18px;
 
+            color: var(--text-dark);
 
+            line-height: 1.7;
 
+            max-width: 700px;
 
+            margin: 0 auto;
 
+            font-weight: 500;
 
+        }
 
+
 
+        .inspiration-icon {
 
+            position: absolute;
 
+            top: 20px;
 
+            right: 20px;
 
+            font-size: 80px;
 
+            color: rgba(37, 99, 235, 0.08);
 
+            z-index: 0;
 
+        }
 
+
 
+        /* 功能区颜色 */
 
+        .feature-card:nth-child(1) .card-icon {
 
+            color: var(--accent-teal);
 
+            background: rgba(13, 148, 136, 0.15);
 
+        }
 
+
 
+        .feature-card:nth-child(2) .card-icon {
 
+            color: var(--accent-purple);
 
+            background: rgba(123, 75, 255, 0.15);
 
+        }
 
+
 
+        .feature-card:nth-child(3) .card-icon {
 
+            color: var(--accent-pink);
 
+            background: rgba(236, 72, 153, 0.15);
 
+        }
 
+
 
+        .feature-card:nth-child(4) .card-icon {
 
+            color: var(--accent-amber);
 
+            background: rgba(245, 158, 11, 0.15);
 
+        }
 
+
 
+        /* 动画效果 */
 
+        @keyframes pulse {
 
+            0% { transform: scale(1); }
 
+            50% { transform: scale(1.1); }
 
+            100% { transform: scale(1); }
 
+        }
 
+
 
+        @keyframes bounce {
 
+            0%, 100% { transform: translateY(0); }
 
+            50% { transform: translateY(-5px); }
 
+        }
 
+
 
+        .pulse {
 
+            position: absolute;
 
+            top: 15px;
 
+            right: 15px;
 
+            width: 10px;
 
+            height: 10px;
 
+            background: var(--danger);
 
+            border-radius: 50%;
 
+            animation: pulse 1.5s infinite;
 
+            z-index: 3;
 
+        }
 
+
 
+        /* 新增: 底部版权信息 */
 
+        .footer {
 
+            text-align: center;
 
+            padding: 30px 0 20px;
 
+            color: var(--text-light);
 
+            font-size: 14px;
 
+            border-top: 1px solid rgba(0, 0, 0, 0.05);
 
+            margin-top: 20px;
 
+        }
 
+
 
+        /* 响应式设计 */
 
+        @media (max-width: 768px) {
 
+            .dashboard-container {
 
+                padding: 15px 12px 30px;
 
+            }
 
+            
+            .header {
 
+                padding: 10px 0 20px;
 
+            }
 
+            
+            .logo-icon {
 
+                width: 42px;
 
+                height: 42px;
 
+            }
 
+            
+            .logo-text {
 
+                font-size: 22px;
 
+            }
 
+            
+            .greeting {
 
+                font-size: 28px;
 
+            }
 
+            
+            .motivational-text {
 
+                font-size: 17px;
 
+                padding: 15px;
 
+            }
 
+            
+            .features-grid {
 
+                gap: 18px;
 
+            }
 
+            
+            .feature-card {
 
+                padding: 24px 20px;
 
+            }
 
+            
+            .inspiration-section {
 
+                padding: 25px 22px;
 
+            }
 
+            
+            .stat-value {
 
+                font-size: 28px;
 
+            }
 
+        }
 
+
 
+        @media (max-width: 480px) {
 
+            .header {
 
+                flex-wrap: wrap;
 
+            }
 
+            
+            .logo {
 
+                margin-bottom: 15px;
 
+            }
 
+            
+            .user-actions {
 
+                width: 100%;
 
+                justify-content: flex-end;
 
+            }
 
+            
+            .greeting {
 
+                font-size: 24px;
 
+            }
 
+            
+            .motivational-text {
 
+                font-size: 16px;
 
+            }
 
+            
+            .stats-container {
 
+                grid-template-columns: 1fr;
 
+            }
 
+            
+            .inspiration-title {
 
+                font-size: 22px;
 
+            }
 
+            
+            .inspiration-content {
 
+                font-size: 16px;
 
+            }
 
+        }

+ 139 - 7
ai-assisant/src/modules/crm/mobile/page-crm-home/page-crm-home.ts
View File 

@@ -1,12 +1,144 @@
 
-import { Component } from '@angular/core';
 
 import { RouterModule } from '@angular/router';
 
-
 
+import { Component, OnInit } from '@angular/core';
 
+import { CommonModule } from '@angular/common';
 
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
+import { 
+  faBrain, 
+  faBell, 
+  faUser, 
+  faArrowRight, 
+  faRobot, 
+  faComments, 
+  faDatabase, 
+  faUserTie, 
+  faTimes, 
+  faHistory, 
+  faStar, 
+  faChartLine, 
+  faFileAlt, 
+  faBullhorn 
+} from '@fortawesome/free-solid-svg-icons';
 
 @Component({
 
-  selector: 'app-page-crm-home',
 
-  imports: [RouterModule],
 
+  imports: [RouterModule,CommonModule],
 
   templateUrl: './page-crm-home.html',
 
-  styleUrl: './page-crm-home.scss'
 
+  styleUrl: './page-crm-home.scss',
 
+  selector: 'page-crm-home', // 确保选择器匹配HTML中的使用
 
+  standalone: true,
 
 })
 
-export class PageCrmHome {
 
 
-}
 
+
 
+export class PageCrmHome implements OnInit {
 
+  // Font Awesome 图标
 
+  icons = {
 
+    faBrain, faBell, faUser, faArrowRight, faRobot, faComments, 
+    faDatabase, faUserTie, faTimes, faHistory, faStar, 
+    faChartLine, faFileAlt, faBullhorn
 
+  };
 
+
 
+  // 状态变量
 
+  showMessagePopup: boolean = false;
 
+  showProfilePopup: boolean = false;
 
+  unreadMessagesCount: number = 3;
 
+
 
+  // 数据
 
+  motivationalText: string = '每一次对话都是展现专业的机会，每一次练习都在提升成功的概率！今天，让AI成为您最强大的销售伙伴';
 
+  stats = {
 
+    practiceCount: 42,
 
+    strategyCount: 28,
 
+    satisfactionRate: 96
 
+  };
 
+  
+  features = {
 
+    virtualPractice: { count: 12, score: 85 },
 
+    speechStrategy: { count: 8, effectiveness: 92 },
 
+    dataTraining: { size: '3.2TB', accuracy: 98 },
 
+    customerProfile: { count: 24 }
 
+  };
 
+  
+  userStats = {
 
+    practiceCount: 12,
 
+    beatPercentage: 86
 
+  };
 
+  
+  user = {
 
+    name: '张明',
 
+    role: '高级销售经理'
 
+  };
 
+  
+  messages = [
 
+    { title: '新的陪练挑战', preview: '您有一个新的虚拟陪练挑战等待完成，主题：高端客户价格谈判', time: '10分钟前', unread: true },
 
+    { title: '话术策略更新', preview: '您收藏的"投诉处理"话术策略已更新至3.2版本', time: '1小时前', unread: true },
 
+    { title: '陪练成绩通知', preview: '您最近的虚拟陪练成绩为92分，超过89%的销售同事', time: '昨天', unread: false },
 
+    { title: '团队周报', preview: '本周团队陪练报告已生成，点击查看详细分析', time: '2天前', unread: false },
 
+    { title: '系统维护通知', preview: '系统将于本周六凌晨2:00-4:00进行维护升级', time: '3天前', unread: false }
 
+  ];
 
+  
+  trainings = [
 
+    { title: '高端客户价格谈判', date: '2023-10-15', difficulty: '⭐⭐⭐', score: 92 },
 
+    { title: '首次接触技巧', date: '2023-10-12', difficulty: '⭐⭐', score: 85 },
 
+    { title: '投诉处理模拟', date: '2023-10-08', difficulty: '⭐⭐⭐', score: 88 },
 
+    { title: '长期合作谈判', date: '2023-10-02', difficulty: '⭐⭐⭐⭐', score: 78 }
 
+  ];
 
+
 
+  motivationalPhrases = [
 
+    "每一次对话都是展现专业的机会，每一次练习都在提升成功的概率！今天，让AI成为您最强大的销售伙伴",
 
+    "每一次拒绝都是离成功更近一步！",
 
+    "卓越的销售不是推销产品，而是解决问题！",
 
+    "今天的练习，明天的签约！",
 
+    "客户的需求是您成功的地图，AI是您的导航仪！",
 
+    "专业来自准备，成功源于坚持！",
 
+    "您不是一个人在战斗，AI是您最强大的后援！"
 
+  ];
 
+
 
+  ngOnInit(): void {
 
+    // 随机选择激励语句
 
+    this.updateMotivationalText();
 
+    
+    // 每10秒更新一次激励语句
 
+    setInterval(() => this.updateMotivationalText(), 10000);
 
+    
+    // 每5秒更新统计数据
 
+    setInterval(() => this.updateStats(), 5000);
 
+  }
 
+
 
+  updateMotivationalText(): void {
 
+    const randomIndex = Math.floor(Math.random() * this.motivationalPhrases.length);
 
+    this.motivationalText = this.motivationalPhrases[randomIndex];
 
+  }
 
+
 
+  updateStats(): void {
 
+    // 模拟数据更新
 
+    this.stats.practiceCount = Math.floor(Math.random() * 20 + 35);
 
+    this.stats.strategyCount = Math.floor(Math.random() * 15 + 20);
 
+    this.stats.satisfactionRate = Math.floor(Math.random() * 5 + 94);
 
+  }
 
+
 
+  toggleMessagePopup(): void {
 
+    this.showMessagePopup = !this.showMessagePopup;
 
+    if (this.showMessagePopup) {
 
+      // 标记消息为已读
 
+      this.unreadMessagesCount = 0;
 
+      this.messages.forEach(msg => msg.unread = false);
 
+    }
 
+  }
 
+
 
+  toggleProfilePopup(): void {
 
+    this.showProfilePopup = !this.showProfilePopup;
 
+  }
 
+
 
+  closeMessagePopup(event?: MouseEvent): void {
 
+    if (event && event.target !== event.currentTarget) return;
 
+    this.showMessagePopup = false;
 
+  }
 
+
 
+  closeProfilePopup(event?: MouseEvent): void {
 
+    if (event && event.target !== event.currentTarget) return;
 
+    this.showProfilePopup = false;
 
+  }
 
+
 
+  navigateTo(feature: string): void {
 
+    console.log(`Navigating to ${feature}`);
 
+    // 实际项目中这里会有路由导航逻辑
 
+    // this.router.navigate([`/${feature}`]);
 
+  }
 
+}

+ 88 - 1
ai-assisant/src/modules/crm/mobile/page-crm-image/page-crm-image.html
View File 

@@ -1 +1,88 @@
 
-<p>page-crm-image works!</p>
 
+<div class="app-container">
 
+  <!-- 头部导航 -->
 
+  <div class="header">
 
+    <div class="header-title">
 
+      <i class="fas fa-user-tag"></i>
 
+      <h1>客户画像分析</h1>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- 第一部分：分析输入区 -->
 
+  <div class="analysis-input animated-card">
 
+    <div class="input-group">
 
+      <label for="client-id">客户编号</label>
 
+      <input type="text" id="client-id" [(ngModel)]="clientId" placeholder="请输入客户编号">
 
+    </div>
 
+    
+    <div class="input-group">
 
+      <label for="client-name">客户名称</label>
 
+      <input type="text" id="client-name" [(ngModel)]="clientName" placeholder="请输入客户名称">
 
+    </div>
 
+    
+    <div class="input-group">
 
+      <label for="chat-data">聊天记录文本</label>
 
+      <textarea id="chat-data" [(ngModel)]="chatData" placeholder="请粘贴或输入聊天记录文本..."></textarea>
 
+    </div>
 
+    
+    <div class="action-buttons">
 
+      <button class="btn btn-secondary" (click)="save()">
 
+        <i class="fas fa-save"></i> 保存
 
+      </button>
 
+      <button class="btn btn-primary" (click)="analyze()">
 
+        <i class="fas fa-play"></i> 开始分析
 
+      </button>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- 第二部分：客户分析列表 -->
 
+  <div class="client-list-section">
 
+    <div class="section-header">
 
+      <h2 class="section-title">客户分析列表</h2>
 
+    </div>
 
+    
+    <div class="search-box">
 
+      <i class="fas fa-search"></i>
 
+      <input type="text" [(ngModel)]="searchTerm" placeholder="搜索客户名称或编号...">
 
+    </div>
 
+    
+    <div class="client-list">
 
+      <!-- 客户项 -->
 
+      <div class="client-item animated-card" *ngFor="let client of clients" (click)="onClientClick(client)">
 
+        <div class="client-info">
 
+          <div class="client-avatar">{{ client.name.charAt(0) }}</div>
 
+          <div>
 
+            <div class="client-name">{{ client.name }}</div>
 
+            <div class="client-meta">{{ client.type }} · ID: {{ client.id }}</div>
 
+          </div>
 
+        </div>
 
+        <div class="client-date">{{ client.date }}</div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <!-- 第三部分：智能推荐区 -->
 
+  <div class="recommendation-section">
 
+    <div class="section-header">
 
+      <h2 class="section-title">智能推荐</h2>
 
+    </div>
 
+    
+    <div class="recommendation-cards">
 
+      <!-- 推荐卡片 -->
 
+      <div class="recommendation-card animated-card" *ngFor="let rec of recommendations">
 
+        <div class="card-header">
 
+          <div class="card-icon" [style.background]="rec.iconColor" [style.color]="rec.iconTextColor">
 
+            <i [class]="rec.icon"></i>
 
+          </div>
 
+          <h3 class="card-title">{{ rec.title }}</h3>
 
+        </div>
 
+        <p class="recommendation-content">
 
+          {{ rec.content }}
 
+        </p>
 
+        <div class="recommendation-action">
 
+          <span class="tag">{{ rec.tag }}</span>
 
+          <button class="action-btn">{{ rec.buttonText }}</button>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</div>

+ 376 - 0
ai-assisant/src/modules/crm/mobile/page-crm-image/page-crm-image.scss
View File 

@@ -0,0 +1,376 @@
 
+/* 保持原有的CSS样式不变，直接复制过来 */
 
+* {
 
+    margin: 0;
 
+    padding: 0;
 
+    box-sizing: border-box;
 
+    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
 
+}
 
+
 
+:root {
 
+    --primary: #4a8fe7;
 
+    --primary-dark: #0a192f;
 
+    --secondary: #5e72e4;
 
+    --accent: #ff6b6b;
 
+    --text-dark: #1a1a1a;
 
+    --text-medium: #4a4a4a;
 
+    --text-light: #8a8f9c;
 
+    --bg-white: #ffffff;
 
+    --bg-light: #f5f7fa;
 
+    --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
 
+    --border-radius: 12px;
 
+    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 
+}
 
+
 
+body {
 
+    background-color: var(--bg-white);
 
+    color: var(--text-medium);
 
+    padding: 0;
 
+    max-width: 480px;
 
+    margin: 0 auto;
 
+    min-height: 100vh;
 
+    position: relative;
 
+    overflow-x: hidden;
 
+    background: linear-gradient(to bottom, #f5f9ff 0%, #ffffff 100px);
 
+}
 
+
 
+.app-container {
 
+    padding: 0 16px 40px;
 
+    position: relative;
 
+}
 
+
 
+/* 头部导航 */
 
+.header {
 
+    padding: 20px 0;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
+    position: sticky;
 
+    top: 0;
 
+    background: var(--bg-white);
 
+    z-index: 100;
 
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
 
+}
 
+
 
+.header-title {
 
+    font-size: 22px;
 
+    font-weight: 700;
 
+    color: var(--text-dark);
 
+    display: flex;
 
+    align-items: center;
 
+    gap: 10px;
 
+}
 
+
 
+.header-title i {
 
+    color: var(--primary);
 
+    font-size: 24px;
 
+    background: rgba(74, 143, 231, 0.1);
 
+    width: 40px;
 
+    height: 40px;
 
+    border-radius: 12px;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+}
 
+
 
+/* 分析输入区 */
 
+.analysis-input {
 
+    background: var(--bg-white);
 
+    border-radius: var(--border-radius);
 
+    box-shadow: var(--card-shadow);
 
+    padding: 20px;
 
+    margin-bottom: 24px;
 
+    border: 1px solid rgba(0, 0, 0, 0.03);
 
+}
 
+
 
+.input-group {
 
+    margin-bottom: 16px;
 
+}
 
+
 
+.input-group label {
 
+    display: block;
 
+    margin-bottom: 8px;
 
+    font-weight: 600;
 
+    color: var(--text-dark);
 
+    font-size: 14px;
 
+}
 
+
 
+.input-group input,
 
+.input-group textarea {
 
+    width: 100%;
 
+    padding: 12px 16px;
 
+    border-radius: var(--border-radius);
 
+    border: 1px solid #e0e4e8;
 
+    font-size: 14px;
 
+    transition: var(--transition);
 
+}
 
+
 
+.input-group input:focus,
 
+.input-group textarea:focus {
 
+    outline: none;
 
+    border-color: var(--primary);
 
+    box-shadow: 0 0 0 3px rgba(74, 143, 231, 0.2);
 
+}
 
+
 
+.input-group textarea {
 
+    min-height: 120px;
 
+    resize: vertical;
 
+}
 
+
 
+.action-buttons {
 
+    display: flex;
 
+    gap: 12px;
 
+    margin-top: 20px;
 
+}
 
+
 
+.btn {
 
+    padding: 12px 20px;
 
+    border-radius: var(--border-radius);
 
+    font-size: 14px;
 
+    font-weight: 600;
 
+    border: none;
 
+    cursor: pointer;
 
+    transition: var(--transition);
 
+    flex: 1;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    gap: 8px;
 
+}
 
+
 
+.btn-primary {
 
+    background: var(--primary);
 
+    color: white;
 
+    box-shadow: 0 4px 8px rgba(74, 143, 231, 0.2);
 
+}
 
+
 
+.btn-primary:hover {
 
+    background: #3a7bd5;
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 6px 12px rgba(74, 143, 231, 0.3);
 
+}
 
+
 
+.btn-secondary {
 
+    background: var(--bg-light);
 
+    color: var(--text-medium);
 
+}
 
+
 
+.btn-secondary:hover {
 
+    background: #e1ebfa;
 
+    transform: translateY(-2px);
 
+}
 
+
 
+/* 客户列表区 */
 
+.client-list-section {
 
+    margin-bottom: 24px;
 
+}
 
+
 
+.section-header {
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    margin-bottom: 16px;
 
+}
 
+
 
+.section-title {
 
+    font-size: 18px;
 
+    font-weight: 700;
 
+    color: var(--text-dark);
 
+    position: relative;
 
+    padding-left: 12px;
 
+}
 
+
 
+.section-title:before {
 
+    content: '';
 
+    position: absolute;
 
+    left: 0;
 
+    top: 4px;
 
+    height: 16px;
 
+    width: 4px;
 
+    background: var(--primary);
 
+    border-radius: 2px;
 
+}
 
+
 
+.search-box {
 
+    position: relative;
 
+    margin-bottom: 16px;
 
+}
 
+
 
+.search-box input {
 
+    width: 100%;
 
+    padding: 12px 16px 12px 42px;
 
+    border-radius: var(--border-radius);
 
+    border: 1px solid #e0e4e8;
 
+    font-size: 14px;
 
+    transition: var(--transition);
 
+}
 
+
 
+.search-box input:focus {
 
+    outline: none;
 
+    border-color: var(--primary);
 
+    box-shadow: 0 0 0 3px rgba(74, 143, 231, 0.2);
 
+}
 
+
 
+.search-box i {
 
+    position: absolute;
 
+    left: 16px;
 
+    top: 50%;
 
+    transform: translateY(-50%);
 
+    color: var(--text-light);
 
+}
 
+
 
+.client-list {
 
+    background: var(--bg-white);
 
+    border-radius: var(--border-radius);
 
+    box-shadow: var(--card-shadow);
 
+    overflow: hidden;
 
+    border: 1px solid rgba(0, 0, 0, 0.03);
 
+}
 
+
 
+.client-item {
 
+    padding: 16px;
 
+    border-bottom: 1px solid #f0f2f5;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-between;
 
+    transition: var(--transition);
 
+    cursor: pointer;
 
+}
 
+
 
+.client-item:last-child {
 
+    border-bottom: none;
 
+}
 
+
 
+.client-item:hover {
 
+    background: #f9fbfe;
 
+}
 
+
 
+.client-info {
 
+    display: flex;
 
+    align-items: center;
 
+    gap: 12px;
 
+}
 
+
 
+.client-avatar {
 
+    width: 40px;
 
+    height: 40px;
 
+    border-radius: 50%;
 
+    background: linear-gradient(135deg, #4a8fe7, #5e72e4);
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    color: white;
 
+    font-weight: bold;
 
+    font-size: 16px;
 
+}
 
+
 
+.client-name {
 
+    font-weight: 600;
 
+    color: var(--text-dark);
 
+    margin-bottom: 2px;
 
+}
 
+
 
+.client-meta {
 
+    font-size: 12px;
 
+    color: var(--text-light);
 
+}
 
+
 
+.client-date {
 
+    font-size: 12px;
 
+    color: var(--text-light);
 
+}
 
+
 
+/* 智能推荐区 */
 
+.recommendation-section {
 
+    margin-top: 24px;
 
+}
 
+
 
+.recommendation-cards {
 
+    display: flex;
 
+    flex-direction: column;
 
+    gap: 16px;
 
+}
 
+
 
+.recommendation-card {
 
+    background: var(--bg-white);
 
+    border-radius: var(--border-radius);
 
+    box-shadow: var(--card-shadow);
 
+    padding: 20px;
 
+    position: relative;
 
+    border: 1px solid rgba(0, 0, 0, 0.03);
 
+}
 
+
 
+.card-header {
 
+    display: flex;
 
+    align-items: center;
 
+    gap: 12px;
 
+    margin-bottom: 16px;
 
+}
 
+
 
+.card-icon {
 
+    width: 42px;
 
+    height: 42px;
 
+    border-radius: 12px;
 
+    background: rgba(74, 143, 231, 0.15);
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: center;
 
+    color: var(--primary);
 
+    font-size: 20px;
 
+}
 
+
 
+.card-title {
 
+    font-size: 16px;
 
+    font-weight: 700;
 
+    color: var(--text-dark);
 
+}
 
+
 
+.recommendation-content {
 
+    color: var(--text-medium);
 
+    font-size: 14px;
 
+    line-height: 1.6;
 
+    margin-bottom: 16px;
 
+}
 
+
 
+.recommendation-action {
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+}
 
+
 
+.tag {
 
+    padding: 6px 12px;
 
+    border-radius: 20px;
 
+    background: var(--bg-light);
 
+    font-size: 12px;
 
+    color: var(--text-medium);
 
+    font-weight: 500;
 
+}
 
+
 
+.action-btn {
 
+    padding: 8px 16px;
 
+    border-radius: 30px;
 
+    background: var(--primary);
 
+    color: white;
 
+    font-size: 14px;
 
+    font-weight: 600;
 
+    border: none;
 
+    cursor: pointer;
 
+    transition: var(--transition);
 
+    box-shadow: 0 4px 8px rgba(74, 143, 231, 0.2);
 
+}
 
+
 
+.action-btn:hover {
 
+    background: #3a7bd5;
 
+    transform: translateY(-2px);
 
+    box-shadow: 0 6px 12px rgba(74, 143, 231, 0.3);
 
+}
 
+
 
+/* 动画效果 */
 
+@keyframes fadeIn {
 
+    from { opacity: 0; transform: translateY(20px); }
 
+    to { opacity: 1; transform: translateY(0); }
 
+}
 
+
 
+.animated-card {
 
+    animation: fadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 
+}

+ 80 - 3
ai-assisant/src/modules/crm/mobile/page-crm-image/page-crm-image.ts
View File 

@@ -1,11 +1,88 @@
 
 import { Component } from '@angular/core';
 
+import { CommonModule } from '@angular/common';
 
+import { FormsModule } from '@angular/forms';
 
 
 @Component({
 
   selector: 'app-page-crm-image',
 
-  imports: [],
 
+  standalone: true,
 
+  imports: [CommonModule, FormsModule],
 
   templateUrl: './page-crm-image.html',
 
-  styleUrl: './page-crm-image.scss'
 
+  styleUrls: ['./page-crm-image.scss']
 
 })
 
 export class PageCrmImage {
 
+  clientId = '';
 
+  clientName = '';
 
+  chatData = '';
 
 
-}
 
+  clients = [
 
+    {
 
+      id: 'C1001',
 
+      name: '张明远',
 
+      type: '企业客户',
 
+      date: '06-28'
 
+    },
 
+    {
 
+      id: 'P2003',
 
+      name: '李思琪',
 
+      type: '个人客户',
 
+      date: '06-27'
 
+    },
 
+    {
 
+      id: 'C1002',
 
+      name: '王建国',
 
+      type: '企业客户',
 
+      date: '06-25'
 
+    },
 
+    {
 
+      id: 'P2004',
 
+      name: '陈晓薇',
 
+      type: '个人客户',
 
+      date: '06-24'
 
+    }
 
+  ];
 
+
 
+  recommendations = [
 
+    {
 
+      icon: 'fas fa-user-friends',
 
+      title: '相似客户推荐',
 
+      content: '根据张明远的画像特征，发现3位相似客户，沟通策略可复用率85%',
 
+      tag: '高匹配度',
 
+      buttonText: '查看客户',
 
+      iconColor: 'rgba(74, 143, 231, 0.15)',
 
+      iconTextColor: '#4a8fe7'
 
+    },
 
+    {
 
+      icon: 'fas fa-clock',
 
+      title: '最佳接触时机',
 
+      content: '李思琪的下次最佳联系时间：明天上午10:00-11:30，接通率预测92%',
 
+      tag: '高接通率',
 
+      buttonText: '加入日程',
 
+      iconColor: 'rgba(94, 114, 228, 0.15)',
 
+      iconTextColor: '#5e72e4'
 
+    }
 
+  ];
 
+
 
+  searchTerm = '';
 
+
 
+  onClientClick(client: any) {
 
+    alert(`进入客户详情页：${client.name}`);
 
+  }
 
+
 
+  analyze() {
 
+    if (!this.clientId || !this.clientName || !this.chatData) {
 
+      alert('请填写完整的客户信息和聊天记录');
 
+      return;
 
+    }
 
+    
+    alert(`开始分析客户 ${this.clientName} (${this.clientId}) 的聊天记录...`);
 
+  }
 
+
 
+  save() {
 
+    if (!this.clientId || !this.clientName || !this.chatData) {
 
+      alert('请填写完整的客户信息和聊天记录');
 
+      return;
 
+    }
 
+    
+    alert(`已保存客户 ${this.clientName} (${this.clientId}) 的信息和聊天记录`);
 
+  }
 
+}

+ 225 - 1
ai-assisant/src/modules/crm/mobile/page-crm-training/page-crm-training.html
View File 

@@ -1 +1,225 @@
 
-<p>page-crm-training works!</p>
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>虚拟陪练舱</title>
 
+</head>
 
+<body>
 
+  <div class="container">
 
+    <!-- 头部导航 -->
 
+    <header class="header">
 
+      <div class="nav-top">
 
+        <button class="back-btn">
 
+          <i class="icon-arrow-left"></i>
 
+        </button>
 
+        <h1 class="page-title">虚拟陪练舱</h1>
 
+        <div class="spacer"></div>
 
+      </div>
 
+    </header>
 
+
 
+    <!-- 场景选择卡 -->
 
+    <section class="section scenario-section">
 
+      <div class="section-title">
 
+        <div>
 
+          <i class="icon-layers"></i>
 
+          选择陪练场景
 
+        </div>
 
+        <button class="edit-btn" id="editTypesBtn">
 
+          <i class="icon-edit"></i>
 
+          <span id="editText">编辑分类</span>
 
+        </button>
 
+      </div>
 
+      
+      <div class="difficulty-tabs">
 
+        <div class="tab active" data-difficulty="easy">初级</div>
 
+        <div class="tab" data-difficulty="medium">中级</div>
 
+        <div class="tab" data-difficulty="hard">高级</div>
 
+      </div>
 
+      
+      <div class="customer-bubbles">
 
+        <div class="bubble active">
 
+          商务客户
 
+          <button class="delete-btn hidden">
 
+            <i class="icon-close"></i>
 
+          </button>
 
+        </div>
 
+        <div class="bubble">
 
+          老年客户
 
+          <button class="delete-btn hidden">
 
+            <i class="icon-close"></i>
 
+          </button>
 
+        </div>
 
+        <div class="add-bubble" id="addCustomerType">
 
+          <i class="icon-plus"></i>
 
+          添加类型
 
+        </div>
 
+      </div>
 
+    </section>
 
+
 
+    <!-- 对话主界面 -->
 
+    <section class="section conversation-section">
 
+      <div class="avatar-container">
 
+        <div class="customer-avatar">
 
+          <i class="icon-user"></i>
 
+        </div>
 
+      </div>
 
+      
+      <div class="conversation-container" id="messageContainer">
 
+        <div class="message customer-message">
 
+          您好，我对贵公司的产品很感兴趣，但觉得价格有点高。
 
+        </div>
 
+        <div class="message user-message">
 
+          感谢您的关注，我们的产品采用优质材料，这个价格已经很有竞争力了。
 
+        </div>
 
+      </div>
 
+      
+      <div class="input-area">
 
+        <button class="voice-btn" id="voiceBtn">
 
+          <i class="icon-mic"></i>
 
+        </button>
 
+        <input type="text" class="text-input" placeholder="输入回复内容..." id="messageInput">
 
+        <button class="send-btn" id="sendBtn">
 
+          <i class="icon-send"></i>
 
+        </button>
 
+      </div>
 
+    </section>
 
+
 
+    <!-- 能力仪表盘 -->
 
+    <section class="section dashboard-section">
 
+      <h2 class="section-title">
 
+        <i class="icon-chart"></i>
 
+        能力评估
 
+      </h2>
 
+      
+      <div class="progress-container">
 
+        <svg class="progress-circle" viewBox="0 0 180 180">
 
+          <circle cx="90" cy="90" r="80" class="progress-bg"></circle>
 
+          <circle cx="90" cy="90" r="80" class="progress-fill" 
+                  stroke-dasharray="502" stroke-dashoffset="70"></circle>
 
+        </svg>
 
+        <div class="progress-value">86</div>
 
+      </div>
 
+      
+      <div class="skills-container">
 
+        <div class="skill">
 
+          <div class="skill-name">沟通能力</div>
 
+          <div class="skill-progress">
 
+            <div class="skill-progress-fill" style="width: 85%"></div>
 
+          </div>
 
+        </div>
 
+        <div class="skill">
 
+          <div class="skill-name">专业知识</div>
 
+          <div class="skill-progress">
 
+            <div class="skill-progress-fill" style="width: 92%"></div>
 
+          </div>
 
+        </div>
 
+        <div class="skill">
 
+          <div class="skill-name">反应速度</div>
 
+          <div class="skill-progress">
 
+            <div class="skill-progress-fill" style="width: 78%"></div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+
 
+    <!-- 存档面板 -->
 
+    <section class="section report-section">
 
+      <div class="report-header">
 
+        <h3 class="report-title">本次陪练报告</h3>
 
+        <div class="comparison">
 
+          <i class="icon-arrow-up"></i>
 
+          <span>12%</span>
 
+        </div>
 
+      </div>
 
+      
+      <p class="report-summary">
 
+        本次与商务客户的对话中，您展现了优秀的专业知识和反应能力。建议在价格谈判环节采用更积极的策略，成功率可提升15%。
 
+      </p>
 
+      
+      <div class="tags-container">
 
+        <div class="tag">商务场景</div>
 
+        <div class="tag">价格谈判</div>
 
+        <div class="tag">提升空间</div>
 
+      </div>
 
+      
+      <div class="actions">
 
+        <button class="action-btn view-btn" id="viewReportBtn">
 
+          <i class="icon-file"></i>
 
+          查看完整报告
 
+        </button>
 
+        <button class="action-btn history-btn" id="historyReportBtn">
 
+          <i class="icon-history"></i>
 
+          历史报告
 
+        </button>
 
+      </div>
 
+    </section>
 
+
 
+    <!-- 添加客户类型弹窗 -->
 
+    <div class="modal-overlay" id="addCustomerModal">
 
+      <div class="modal">
 
+        <div class="modal-header">
 
+          <h3 class="modal-title">添加客户类型</h3>
 
+          <button class="close-modal" id="closeAddCustomerModal">
 
+            <i class="icon-close"></i>
 
+          </button>
 
+        </div>
 
+        <div class="modal-content">
 
+          <div class="form-group">
 
+            <label for="customerType">客户类型名称</label>
 
+            <input type="text" id="customerType" placeholder="例如：新婚客户">
 
+          </div>
 
+        </div>
 
+        <div class="modal-actions">
 
+          <button class="modal-btn cancel-btn" id="cancelAddCustomer">取消</button>
 
+          <button class="modal-btn save-btn" id="saveCustomerType">保存</button>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- 完整报告弹窗 -->
 
+    <div class="modal-overlay" id="fullReportModal">
 
+      <div class="modal">
 
+        <div class="modal-header">
 
+          <h3 class="modal-title">陪练报告详情</h3>
 
+          <button class="close-modal" id="closeFullReportModal">
 
+            <i class="icon-close"></i>
 
+          </button>
 
+        </div>
 
+        <div class="modal-content">
 
+          <div class="report-detail">
 
+            <!-- 报告详情内容 -->
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- 历史报告弹窗 -->
 
+    <div class="modal-overlay" id="historyReportModal">
 
+      <div class="modal modal-lg">
 
+        <div class="modal-header">
 
+          <h3 class="modal-title">历史陪练报告</h3>
 
+          <button class="close-modal" id="closeHistoryReportModal">
 
+            <i class="icon-close"></i>
 
+          </button>
 
+        </div>
 
+        <div class="modal-content">
 
+          <div class="history-list">
 
+            <div class="history-item">
 
+              <div class="history-header">
 
+                <span class="history-date">2023-10-15</span>
 
+                <span class="history-type">商务场景</span>
 
+              </div>
 
+              <div class="history-summary">
 
+                本次对话展现了良好的沟通能力，但在价格谈判环节需要更灵活的策略。
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+
 
+  <script src="script.js"></script>
 
+</body>
 
+</html>

+ 601 - 0
ai-assisant/src/modules/crm/mobile/page-crm-training/page-crm-training.scss
View File 

@@ -0,0 +1,601 @@
 
+/* 基础重置和字体 */
 
+* {
 
+  margin: 0;
 
+  padding: 0;
 
+  box-sizing: border-box;
 
+}
 
+
 
+body {
 
+  font-family: 'Noto Sans SC', sans-serif;
 
+  background-color: #f8fafc;
 
+  color: #333;
 
+  line-height: 1.6;
 
+  padding: 16px;
 
+}
 
+
 
+/* 容器 */
 
+.container {
 
+  max-width: 480px;
 
+  margin: 0 auto;
 
+  position: relative;
 
+}
 
+
 
+/* 头部导航 */
 
+.header {
 
+  position: sticky;
 
+  top: 0;
 
+  background: rgba(255, 255, 255, 0.98);
 
+  backdrop-filter: blur(8px);
 
+  z-index: 100;
 
+  padding: 12px 0;
 
+  border-bottom: 1px solid #eaeaea;
 
+  margin-bottom: 16px;
 
+}
 
+
 
+.nav-top {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  padding: 0 8px;
 
+}
 
+
 
+.back-btn {
 
+  background: none;
 
+  border: none;
 
+  font-size: 20px;
 
+  color: #333;
 
+  cursor: pointer;
 
+  padding: 8px;
 
+}
 
+
 
+.page-title {
 
+  font-size: 18px;
 
+  font-weight: 700;
 
+  color: #0a192f;
 
+}
 
+
 
+.spacer {
 
+  width: 40px; /* 保持对称 */
 
+}
 
+
 
+/* 图标基础样式 */
 
+[class^="icon-"] {
 
+  font-style: normal;
 
+  display: inline-block;
 
+  vertical-align: middle;
 
+}
 
+
 
+/* 各部分通用样式 */
 
+.section {
 
+  background: white;
 
+  border-radius: 16px;
 
+  padding: 20px;
 
+  margin-bottom: 20px;
 
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 
+}
 
+
 
+.section-title {
 
+  font-size: 16px;
 
+  font-weight: 600;
 
+  margin-bottom: 16px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: space-between;
 
+  color: #0a192f;
 
+}
 
+
 
+.section-title [class^="icon-"] {
 
+  margin-right: 8px;
 
+  color: #4285f4;
 
+}
 
+
 
+/* 场景选择部分 */
 
+.difficulty-tabs {
 
+  display: flex;
 
+  gap: 8px;
 
+  margin-bottom: 16px;
 
+}
 
+
 
+.tab {
 
+  padding: 8px 16px;
 
+  border-radius: 20px;
 
+  background: white;
 
+  border: 1px solid #e2e8f0;
 
+  font-size: 14px;
 
+  cursor: pointer;
 
+  transition: all 0.2s;
 
+  flex: 1;
 
+  text-align: center;
 
+  white-space: nowrap;
 
+}
 
+
 
+.tab.active {
 
+  background: #4285f4;
 
+  color: white;
 
+  border-color: #4285f4;
 
+  font-weight: 500;
 
+}
 
+
 
+.customer-bubbles {
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+  gap: 10px;
 
+}
 
+
 
+.bubble {
 
+  padding: 10px 16px;
 
+  border-radius: 20px;
 
+  background: white;
 
+  border: 1px solid #e2e8f0;
 
+  font-size: 14px;
 
+  cursor: pointer;
 
+  transition: all 0.2s;
 
+  position: relative;
 
+  display: flex;
 
+  align-items: center;
 
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
 
+}
 
+
 
+.bubble.active {
 
+  background: #0a192f;
 
+  color: white;
 
+  border-color: #0a192f;
 
+}
 
+
 
+.delete-btn {
 
+  display: none;
 
+  background: none;
 
+  border: none;
 
+  color: rgba(255, 255, 255, 0.7);
 
+  margin-left: 6px;
 
+  cursor: pointer;
 
+}
 
+
 
+.bubble.active .delete-btn {
 
+  display: block;
 
+}
 
+
 
+.add-bubble {
 
+  padding: 10px 16px;
 
+  border-radius: 20px;
 
+  background: white;
 
+  border: 1px dashed #cbd5e1;
 
+  font-size: 14px;
 
+  cursor: pointer;
 
+  display: flex;
 
+  align-items: center;
 
+  color: #94a3b8;
 
+  transition: all 0.2s;
 
+}
 
+
 
+.add-bubble:hover {
 
+  border-color: #94a3b8;
 
+}
 
+
 
+/* 对话界面 */
 
+.avatar-container {
 
+  display: flex;
 
+  justify-content: center;
 
+  margin: 20px 0;
 
+}
 
+
 
+.customer-avatar {
 
+  width: 100px;
 
+  height: 100px;
 
+  border-radius: 50%;
 
+  background: linear-gradient(135deg, #4285f4, #0a192f);
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  color: white;
 
+  font-size: 36px;
 
+  box-shadow: 0 8px 20px rgba(66, 133, 244, 0.3);
 
+}
 
+
 
+.conversation-container {
 
+  background: white;
 
+  border-radius: 16px;
 
+  padding: 16px;
 
+  margin: 16px 0;
 
+  height: 280px;
 
+  overflow-y: auto;
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 12px;
 
+  border: 1px solid #e2e8f0;
 
+}
 
+
 
+.message {
 
+  max-width: 80%;
 
+  padding: 12px 16px;
 
+  border-radius: 18px;
 
+  font-size: 15px;
 
+  line-height: 1.5;
 
+  animation: fadeIn 0.3s ease;
 
+}
 
+
 
+.customer-message {
 
+  background: #f1f5f9;
 
+  align-self: flex-start;
 
+  border-bottom-left-radius: 4px;
 
+}
 
+
 
+.user-message {
 
+  background: #4285f4;
 
+  color: white;
 
+  align-self: flex-end;
 
+  border-bottom-right-radius: 4px;
 
+}
 
+
 
+.input-area {
 
+  display: flex;
 
+  gap: 10px;
 
+  align-items: center;
 
+  background: white;
 
+  border-radius: 30px;
 
+  padding: 10px 16px;
 
+  margin-top: 16px;
 
+  border: 1px solid #e2e8f0;
 
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 
+}
 
+
 
+.voice-btn {
 
+  width: 44px;
 
+  height: 44px;
 
+  border-radius: 50%;
 
+  background: #4285f4;
 
+  color: white;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  cursor: pointer;
 
+  border: none;
 
+  font-size: 18px;
 
+  transition: all 0.2s;
 
+}
 
+
 
+.voice-btn.active {
 
+  background: #ea4335;
 
+  animation: pulse 1.5s infinite;
 
+}
 
+
 
+.text-input {
 
+  flex: 1;
 
+  padding: 12px;
 
+  border: none;
 
+  border-radius: 24px;
 
+  font-size: 15px;
 
+  outline: none;
 
+  background: transparent;
 
+}
 
+
 
+.send-btn {
 
+  width: 44px;
 
+  height: 44px;
 
+  border-radius: 50%;
 
+  background: #0a192f;
 
+  color: white;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  cursor: pointer;
 
+  border: none;
 
+  font-size: 18px;
 
+}
 
+
 
+/* 能力仪表盘 */
 
+.progress-container {
 
+  position: relative;
 
+  width: 180px;
 
+  height: 180px;
 
+  margin: 0 auto 20px;
 
+}
 
+
 
+.progress-circle {
 
+  width: 100%;
 
+  height: 100%;
 
+  transform: rotate(-90deg);
 
+}
 
+
 
+.progress-bg {
 
+  fill: none;
 
+  stroke: #e2e8f0;
 
+  stroke-width: 10;
 
+}
 
+
 
+.progress-fill {
 
+  fill: none;
 
+  stroke: #4285f4;
 
+  stroke-width: 10;
 
+  stroke-linecap: round;
 
+}
 
+
 
+.progress-value {
 
+  position: absolute;
 
+  top: 50%;
 
+  left: 50%;
 
+  transform: translate(-50%, -50%);
 
+  font-size: 32px;
 
+  font-weight: 700;
 
+  color: #0a192f;
 
+}
 
+
 
+.skills-container {
 
+  display: grid;
 
+  grid-template-columns: repeat(3, 1fr);
 
+  gap: 16px;
 
+  margin-top: 20px;
 
+}
 
+
 
+.skill {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+}
 
+
 
+.skill-name {
 
+  font-size: 12px;
 
+  color: #64748b;
 
+  margin-bottom: 6px;
 
+}
 
+
 
+.skill-progress {
 
+  width: 100%;
 
+  height: 6px;
 
+  background: #e2e8f0;
 
+  border-radius: 3px;
 
+  overflow: hidden;
 
+}
 
+
 
+.skill-progress-fill {
 
+  height: 100%;
 
+  background: #4285f4;
 
+  border-radius: 3px;
 
+}
 
+
 
+/* 报告卡片 */
 
+.report-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  margin-bottom: 16px;
 
+}
 
+
 
+.report-title {
 
+  font-size: 18px;
 
+  font-weight: 700;
 
+  color: #0a192f;
 
+}
 
+
 
+.comparison {
 
+  display: flex;
 
+  align-items: center;
 
+  font-size: 14px;
 
+  color: #34a853;
 
+}
 
+
 
+.report-summary {
 
+  font-size: 14px;
 
+  line-height: 1.7;
 
+  margin-bottom: 20px;
 
+  color: #475569;
 
+}
 
+
 
+.tags-container {
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+  gap: 8px;
 
+  margin-bottom: 20px;
 
+}
 
+
 
+.tag {
 
+  padding: 6px 12px;
 
+  background: #f1f5f9;
 
+  border-radius: 16px;
 
+  font-size: 12px;
 
+  color: #475569;
 
+}
 
+
 
+.actions {
 
+  display: flex;
 
+  gap: 10px;
 
+}
 
+
 
+.action-btn {
 
+  flex: 1;
 
+  padding: 12px;
 
+  border-radius: 12px;
 
+  border: none;
 
+  font-weight: 500;
 
+  cursor: pointer;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  gap: 8px;
 
+  font-size: 14px;
 
+  transition: all 0.2s;
 
+}
 
+
 
+.view-btn {
 
+  background: #4285f4;
 
+  color: white;
 
+}
 
+
 
+.history-btn {
 
+  background: #0a192f;
 
+  color: white;
 
+}
 
+
 
+/* 弹窗样式 */
 
+.modal-overlay {
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  right: 0;
 
+  bottom: 0;
 
+  background: rgba(0, 0, 0, 0.5);
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  z-index: 1000;
 
+  opacity: 0;
 
+  pointer-events: none;
 
+  transition: opacity 0.3s;
 
+}
 
+
 
+.modal-overlay.active {
 
+  opacity: 1;
 
+  pointer-events: all;
 
+}
 
+
 
+.modal {
 
+  background: white;
 
+  border-radius: 16px;
 
+  width: 90%;
 
+  max-width: 400px;
 
+  max-height: 80vh;
 
+  overflow-y: auto;
 
+  padding: 24px;
 
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 
+  transform: translateY(20px);
 
+  transition: transform 0.3s;
 
+}
 
+
 
+.modal-lg {
 
+  max-width: 500px;
 
+}
 
+
 
+.modal-overlay.active .modal {
 
+  transform: translateY(0);
 
+}
 
+
 
+.modal-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  margin-bottom: 20px;
 
+  padding-bottom: 16px;
 
+  border-bottom: 1px solid #e2e8f0;
 
+}
 
+
 
+.modal-title {
 
+  font-size: 18px;
 
+  font-weight: 700;
 
+  color: #0a192f;
 
+}
 
+
 
+.close-modal {
 
+  background: none;
 
+  border: none;
 
+  font-size: 20px;
 
+  cursor: pointer;
 
+  color: #94a3b8;
 
+}
 
+
 
+.form-group {
 
+  margin-bottom: 16px;
 
+}
 
+
 
+.form-group label {
 
+  display: block;
 
+  margin-bottom: 8px;
 
+  font-size: 14px;
 
+  color: #475569;
 
+}
 
+
 
+.form-group input {
 
+  width: 100%;
 
+  padding: 12px;
 
+  border: 1px solid #e2e8f0;
 
+  border-radius: 8px;
 
+  font-size: 14px;
 
+  outline: none;
 
+  transition: border-color 0.2s;
 
+}
 
+
 
+.form-group input:focus {
 
+  border-color: #4285f4;
 
+}
 
+
 
+.modal-actions {
 
+  display: flex;
 
+  gap: 12px;
 
+  justify-content: flex-end;
 
+}
 
+
 
+.modal-btn {
 
+  padding: 10px 16px;
 
+  border-radius: 8px;
 
+  font-size: 14px;
 
+  cursor: pointer;
 
+  border: none;
 
+  transition: all 0.2s;
 
+}
 
+
 
+.cancel-btn {
 
+  background: #f1f5f9;
 
+  color: #475569;
 
+}
 
+
 
+.save-btn {
 
+  background: #4285f4;
 
+  color: white;
 
+}
 
+
 
+/* 历史报告 */
 
+.history-item {
 
+  padding: 16px 0;
 
+  border-bottom: 1px solid #e2e8f0;
 
+}
 
+
 
+.history-item:last-child {
 
+  border-bottom: none;
 
+}
 
+
 
+.history-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  margin-bottom: 8px;
 
+}
 
+
 
+.history-date {
 
+  font-size: 14px;
 
+  color: #64748b;
 
+}
 
+
 
+.history-type {
 
+  font-size: 12px;
 
+  background: #f1f5f9;
 
+  padding: 4px 8px;
 
+  border-radius: 12px;
 
+  color: #475569;
 
+}
 
+
 
+.history-summary {
 
+  font-size: 14px;
 
+  color: #475569;
 
+  line-height: 1.6;
 
+}
 
+
 
+/* 动画 */
 
+@keyframes pulse {
 
+  0% { transform: scale(1); }
 
+  50% { transform: scale(1.05); }
 
+  100% { transform: scale(1); }
 
+}
 
+
 
+@keyframes fadeIn {
 
+  from { opacity: 0; transform: translateY(10px); }
 
+  to { opacity: 1; transform: translateY(0); }
 
+}
 
+
 
+/* 响应式调整 */
 
+@media (max-width: 400px) {
 
+  .skills-container {
 
+    grid-template-columns: repeat(2, 1fr);
 
+  }
 
+  
+  .section {
 
+    padding: 16px;
 
+  }
 
+}

+ 152 - 4
ai-assisant/src/modules/crm/mobile/page-crm-training/page-crm-training.ts
View File 

@@ -1,11 +1,159 @@
 
 import { Component } from '@angular/core';
 
+import { CommonModule } from '@angular/common';
 
+import { FormsModule } from '@angular/forms';
 
+import { MatIconModule } from '@angular/material/icon';
 
+import { MatButtonModule } from '@angular/material/button';
 
+import { MatCardModule } from '@angular/material/card';
 
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
+import { faMicrophone, faSquare, faArrowLeft, faLayerGroup, faEdit, faPlus, faTimes, faChartLine, faFileAlt, faHistory, faArrowUp, faComments, faStar, faLightbulb } from '@fortawesome/free-solid-svg-icons';
 
 
 @Component({
 
   selector: 'app-page-crm-training',
 
-  imports: [],
 
-  templateUrl: './page-crm-training.html',
 
-  styleUrl: './page-crm-training.scss'
 
+  standalone: true,
 
+  imports: [
 
+    CommonModule,
 
+    FormsModule,
 
+    MatIconModule,
 
+    MatButtonModule,
 
+    MatCardModule,
 
+    MatProgressSpinnerModule,
 
+    FontAwesomeModule,
 
+   
+  ],
 
+   templateUrl:'./page-crm-training.html',
 
+  styleUrls: ['./page-crm-training.scss']
 
 })
 
 export class PageCrmTraining {
 
+  // Font Awesome 图标
 
+  faMicrophone = faMicrophone;
 
+  faSquare = faSquare;
 
+  faArrowLeft = faArrowLeft;
 
+  faLayerGroup = faLayerGroup;
 
+  faEdit = faEdit;
 
+  faPlus = faPlus;
 
+  faTimes = faTimes;
 
+  faChartLine = faChartLine;
 
+  faFileAlt = faFileAlt;
 
+  faHistory = faHistory;
 
+  faArrowUp = faArrowUp;
 
+  faComments = faComments;
 
+  faStar = faStar;
 
+  faLightbulb = faLightbulb;
 
 
-}
 
+  // 组件状态和逻辑
 
+  isVoiceActive = false;
 
+  selectedDifficulty = '初级';
 
+  difficulties = [
 
+    { label: '⭐ 初级', value: '初级' },
 
+    { label: '⭐⭐ 中级', value: '中级' },
 
+    { label: '⭐⭐⭐ 高级', value: '高级' },
 
+    { label: '专家挑战', value: '专家' }
 
+  ];
 
+  
+  customerTypes = [
 
+    { name: '商务客户', active: true },
 
+    { name: '家庭客户', active: false },
 
+    { name: 'VIP客户', active: false },
 
+    { name: '投诉客户', active: false },
 
+    { name: '团体客户', active: false }
 
+  ];
 
+  isEditingTypes = false;
 
+  newCustomerType = '';
 
+  
+  messages = [
 
+    { text: '您好，我想预订下周五的商务套房，你们有什么优惠吗？', isCustomer: true },
 
+    { text: '感谢您的咨询！我们目前有商务套餐优惠，包含早餐和会议室使用，您需要了解详情吗？', isCustomer: false },
 
+    { text: '会议室可以容纳多少人？另外我需要延迟退房到下午4点。', isCustomer: true },
 
+    { text: '我们的商务套房会议室最多可容纳20人，延迟退房到下午4点需要额外支付50%的房费。', isCustomer: false },
 
+    { text: '50%的费用太高了，我是贵酒店的黄金会员，能否提供免费延迟退房？', isCustomer: true },
 
+    { text: '感谢您的会员支持！根据黄金会员权益，我们可以提供免费延迟退房到下午2点，或者您可以选择支付额外费用延长到4点。', isCustomer: false },
 
+    { text: '下午2点可能不太够，我下午3点有个重要会议。有没有折中方案？', isCustomer: true },
 
+    { text: '我理解您的情况。我们可以为您提供下午3点的延迟退房，只需额外支付25%的房费，这样您看可以接受吗？', isCustomer: false }
 
+  ];
 
+  newMessage = '';
 
+  
+  skills = [
 
+    { name: '反应力', value: 90 },
 
+    { name: '话术', value: 85 },
 
+    { name: '说服力', value: 75 },
 
+    { name: '专业度', value: 92 }
 
+  ];
 
+  
+  showAddCustomerModal = false;
 
+  showFullReportModal = false;
 
+  showHistoryReportModal = false;
 
+  
+  historyReports = [
 
+    { 
+      id: 1,
 
+      date: '2023年10月15日 14:30',
 
+      type: '商务客户',
 
+      summary: '本次与商务客户的对话中，您展现了优秀的专业知识和反应能力。建议在价格谈判环节采用更积极的策略。'
 
+    },
 
+    { 
+      id: 2,
 
+      date: '2023年10月12日 10:15',
 
+      type: '投诉客户',
 
+      summary: '处理客户投诉时展现了良好的同理心，但解决方案不够全面，建议加强问题解决能力训练。'
 
+    },
 
+    { 
+      id: 3,
 
+      date: '2023年10月10日 16:45',
 
+      type: 'VIP客户',
 
+      summary: '为VIP客户提供了个性化服务方案，展现了出色的服务意识，但在附加服务推荐上略显保守。'
 
+    }
 
+  ];
 
+
 
+  toggleVoice() {
 
+    this.isVoiceActive = !this.isVoiceActive;
 
+  }
 
+  
+  selectDifficulty(difficulty: string) {
 
+    this.selectedDifficulty = difficulty;
 
+  }
 
+  
+  selectCustomerType(index: number) {
 
+    if (!this.isEditingTypes) {
 
+      this.customerTypes.forEach(type => type.active = false);
 
+      this.customerTypes[index].active = true;
 
+    }
 
+  }
 
+  
+  deleteCustomerType(index: number) {
 
+    if (this.customerTypes.length > 1) {
 
+      this.customerTypes.splice(index, 1);
 
+    } else {
 
+      alert('至少需要保留一个客户类型');
 
+    }
 
+  }
 
+  
+  addCustomerType() {
 
+    if (this.newCustomerType.trim()) {
 
+      this.customerTypes.push({ name: this.newCustomerType.trim(), active: false });
 
+      this.newCustomerType = '';
 
+      this.showAddCustomerModal = false;
 
+    }
 
+  }
 
+  
+  sendMessage() {
 
+    if (this.newMessage.trim()) {
 
+      this.messages.push({ text: this.newMessage, isCustomer: false });
 
+      this.newMessage = '';
 
+      
+      // 模拟AI回复
 
+      setTimeout(() => {
 
+        this.messages.push({ 
+          text: "听起来不错，我会考虑这个方案。能提供一份详细报价吗？", 
+          isCustomer: true 
+        });
 
+      }, 1000);
 
+    }
 
+  }
 
+  
+  getCircleDashOffset() {
 
+    const circumference = 2 * Math.PI * 80;
 
+    const progress = 86; // 86%
 
+    return circumference - (progress / 100) * circumference;
 
+  }
 
+}

+ 3 - 0
ai-assisant/src/styles.scss
View File 

@@ -1 +1,4 @@
 
 /* You can add global styles to this file, and also import other style files */
 
+
 
+html, body { height: 100%; }
 
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }