├── .env.example
├── .gitignore
├── README.md
├── backup
    └── card.html.bak
├── package-lock.json
├── package.json
├── prompts
    └── card.js
├── public
    ├── css
    │   ├── card-styles.css
    │   └── style.css
    ├── icon
    │   ├── android
    │   │   ├── play_store_512.png
    │   │   └── res
    │   │   │   ├── mipmap-anydpi-v26
    │   │   │       └── ic_launcher.xml
    │   │   │   ├── mipmap-hdpi
    │   │   │       ├── ic_launcher.png
    │   │   │       ├── ic_launcher_background.png
    │   │   │       ├── ic_launcher_foreground.png
    │   │   │       └── ic_launcher_monochrome.png
    │   │   │   ├── mipmap-mdpi
    │   │   │       ├── ic_launcher.png
    │   │   │       ├── ic_launcher_background.png
    │   │   │       ├── ic_launcher_foreground.png
    │   │   │       └── ic_launcher_monochrome.png
    │   │   │   ├── mipmap-xhdpi
    │   │   │       ├── ic_launcher.png
    │   │   │       ├── ic_launcher_background.png
    │   │   │       ├── ic_launcher_foreground.png
    │   │   │       └── ic_launcher_monochrome.png
    │   │   │   ├── mipmap-xxhdpi
    │   │   │       ├── ic_launcher.png
    │   │   │       ├── ic_launcher_background.png
    │   │   │       ├── ic_launcher_foreground.png
    │   │   │       └── ic_launcher_monochrome.png
    │   │   │   └── mipmap-xxxhdpi
    │   │   │       ├── ic_launcher.png
    │   │   │       ├── ic_launcher_background.png
    │   │   │       ├── ic_launcher_foreground.png
    │   │   │       └── ic_launcher_monochrome.png
    │   ├── ios
    │   │   ├── AppIcon-20@2x.png
    │   │   ├── AppIcon-20@2x~ipad.png
    │   │   ├── AppIcon-20@3x.png
    │   │   ├── AppIcon-20~ipad.png
    │   │   ├── AppIcon-29.png
    │   │   ├── AppIcon-29@2x.png
    │   │   ├── AppIcon-29@2x~ipad.png
    │   │   ├── AppIcon-29@3x.png
    │   │   ├── AppIcon-29~ipad.png
    │   │   ├── AppIcon-40@2x.png
    │   │   ├── AppIcon-40@2x~ipad.png
    │   │   ├── AppIcon-40@3x.png
    │   │   ├── AppIcon-40~ipad.png
    │   │   ├── AppIcon-60@2x~car.png
    │   │   ├── AppIcon-60@3x~car.png
    │   │   ├── AppIcon-83.5@2x~ipad.png
    │   │   ├── AppIcon@2x.png
    │   │   ├── AppIcon@2x~ipad.png
    │   │   ├── AppIcon@3x.png
    │   │   ├── AppIcon~ios-marketing.png
    │   │   ├── AppIcon~ipad.png
    │   │   └── Contents.json
    │   └── web
    │   │   ├── README.txt
    │   │   ├── apple-touch-icon.png
    │   │   ├── favicon.ico
    │   │   ├── icon-192-maskable.png
    │   │   ├── icon-192.png
    │   │   ├── icon-512-maskable.png
    │   │   └── icon-512.png
    ├── img
    │   └── donation_qrcode.png
    ├── index.html
    ├── js
    │   ├── card.js
    │   └── script.js
    └── manifest.json
├── routes
    └── api.js
├── server.js
└── services
    └── aiService.js


/.env.example:
--------------------------------------------------------------------------------
 1 | # API Credentials
 2 | ARK_API_KEY=your_ark_api_key_here
 3 | ARK_MODEL_ID=your_ark_model_id_here
 4 | 
 5 | # u5154u5b50APIu914du7f6e
 6 | TUZI_API_KEY=your_tuzi_api_key_here
 7 | 
 8 | # Server Configuration
 9 | PORT=3001
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # 环境变量文件
 2 | .env
 3 | 
 4 | # 依赖目录
 5 | node_modules/
 6 | 
 7 | # 日志文件
 8 | logs
 9 | *.log
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # 运行时数据
15 | pids
16 | *.pid
17 | *.seed
18 | *.pid.lock
19 | 
20 | # 目录用于缓存的工具
21 | .npm
22 | .eslintcache
23 | 
24 | # 可选的 REPL 历史记录
25 | .node_repl_history
26 | 
27 | # 输出的二进制文件
28 | dist/
29 | build/
30 | 
31 | # 操作系统文件
32 | .DS_Store
33 | Thumbs.db
34 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Cards-Go
  2 | 
  3 | 一个基于 AI 的知识卡片生成工具，支持多种风格和自定义选项。
  4 | 
  5 | ## 功能特点
  6 | 
  7 | - **多 AI 提供商支持**：支持 ARK AI 和 Tuzi AI，可以灵活切换
  8 | - **多种卡片风格**：支持多种设计风格，包括极简主义、复古风、赛博朋克等
  9 | - **自定义选项**：可调整卡片比例、每行卡片数量等参数
 10 | - **查看源代码和提示词**：可以查看生成的卡片 HTML 源代码和使用的提示词
 11 | - **下载和分享**：支持将生成的卡片下载为图片
 12 | - **响应式设计**：适配各种屏幕尺寸的设备
 13 | - **PWA 支持**：可以安装到设备上作为独立应用使用
 14 | 
 15 | ## 技术栈
 16 | 
 17 | - **前端**：原生 JavaScript、HTML、CSS、Tailwind CSS
 18 | - **后端**：Node.js、Express.js
 19 | - **API**：ARK AI API、Tuzi AI API
 20 | - **依赖**：axios、express-session、dotenv 等
 21 | 
 22 | ## 安装和运行
 23 | 
 24 | ### 前提条件
 25 | 
 26 | - Node.js (v14.0.0 或更高版本)
 27 | - npm 或 yarn
 28 | - ARK AI 和/或 Tuzi AI 的 API 密钥
 29 | 
 30 | ### 安装步骤
 31 | 
 32 | 1. 克隆仓库
 33 |    ```bash
 34 |    git clone https://github.com/yourusername/cards-go.git
 35 |    cd cards-go
 36 |    ```
 37 | 
 38 | 2. 安装依赖
 39 |    ```bash
 40 |    npm install
 41 |    ```
 42 | 
 43 | 3. 创建 `.env` 文件并添加以下环境变量
 44 |    ```
 45 |    PORT=3001
 46 |    ARK_API_KEY=your_ark_api_key
 47 |    TUZI_API_KEY=your_tuzi_api_key
 48 |    ```
 49 | 
 50 | 4. 启动服务器
 51 |    ```bash
 52 |    node server.js
 53 |    ```
 54 | 
 55 | 5. 访问应用
 56 |    在浏览器中打开 `http://localhost:3001`
 57 | 
 58 | ## 使用指南
 59 | 
 60 | 1. **生成卡片**：
 61 |    - 在首页输入主题
 62 |    - 选择 AI 提供商（ARK 或 Tuzi）
 63 |    - 选择卡片风格和其他选项
 64 |    - 点击生成卡片按钮
 65 | 
 66 | 2. **查看源代码和提示词**：
 67 |    - 生成卡片后，点击右上角的代码图标查看源代码
 68 |    - 点击魔法棒图标查看提示词
 69 | 
 70 | 3. **下载卡片**：
 71 |    - 生成卡片后，点击下载按钮将卡片保存为图片
 72 | 
 73 | ## 自定义选项说明
 74 | 
 75 | - **卡片比例**：支持 16:9、4:3、1:1、9:16、3:4、2:1 等多种比例
 76 | - **每行卡片数**：可选 1-4 张卡片每行
 77 | - **生成模式**：
 78 |   - 提取模式：从输入主题中提取知识点
 79 |   - 字面模式：直接使用输入内容生成卡片
 80 |   - 创造模式：基于输入主题创造新内容
 81 | 
 82 | ## 项目结构
 83 | 
 84 | ```
 85 | /
 86 | |-- public/            # 静态资源
 87 | |   |-- css/          # 样式文件
 88 | |   |-- js/           # 前端 JavaScript 文件
 89 | |   |-- index.html    # 首页
 90 | |   |-- manifest.json # PWA 配置文件
 91 | |
 92 | |-- routes/            # 路由处理
 93 | |   |-- api.js        # API 路由
 94 | |
 95 | |-- services/          # 服务层
 96 | |   |-- aiService.js  # AI 服务封装
 97 | |
 98 | |-- prompts/           # 提示词模板
 99 | |   |-- card.js       # 卡片生成提示词
100 | |
101 | |-- server.js          # 服务器入口文件
102 | |-- package.json       # 项目依赖
103 | |-- .env               # 环境变量文件
104 | |-- README.md          # 项目说明
105 | ```
106 | 
107 | ## 更新日志
108 | 
109 | ### 2025-03-30
110 | 
111 | - 将默认 AI 提供商从 Tuzi 改为 ARK
112 | - 将首页 logo 改为纯文本形式
113 | - 修复卡片生成 HTML 内容显示问题
114 | - 添加查看源代码和提示词的图标
115 | - 添加 PWA 支持，包括 manifest.json 和图标
116 | 
117 | ## 许可证
118 | 
119 | MIT License
120 | 
121 | ## 联系方式
122 | 
123 | 如有问题或建议，请提交 Issue 或联系项目维护者。
124 | 


--------------------------------------------------------------------------------
/backup/card.html.bak:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |   <title>Cards-Go | 生成的卡片</title>
 7 |   <link rel="stylesheet" href="/css/style.css">
 8 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
 9 |   <!-- 添加Tailwind CSS CDN，用于卡片样式 -->
10 |   <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
11 |   <!-- 固定引入Google字体 -->
12 |   <style>
13 |     @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;700&family=Space+Mono&family=Playfair+Display:wght@700&display=swap');
14 |     
15 |     body {
16 |       font-family: 'Noto Sans SC', sans-serif;
17 |     }
18 |   </style>
19 |   <!-- 动态样式将在这里插入 -->
20 |   <div id="dynamic-styles"></div>
21 | </head>
22 | <body>
23 |   <div class="container card-page">
24 |     <header class="card-header">
25 |       <a href="/" class="back-link">
26 |         <i class="fas fa-arrow-left"></i> 返回首页
27 |       </a>
28 |       <h1>CardsGo</h1>
29 |       <p class="theme-title">主题：<span id="theme-display"></span></p>
30 |       <div class="header-actions">
31 |         <a href="/api/view-source" target="_blank" class="icon-btn" title="查看源代码">
32 |           <i class="fas fa-code"></i>
33 |         </a>
34 |         <a href="/api/view-prompt" target="_blank" class="icon-btn" title="查看提示词">
35 |           <i class="fas fa-magic"></i>
36 |         </a>
37 |       </div>
38 |     </header>
39 |     
40 |     <div id="loading" class="loading">
41 |       <div class="spinner"></div>
42 |       <p>正在生成卡片，请稍候...</p>
43 |     </div>
44 |     
45 |     <div id="card-container" class="card-container">
46 |       <!-- 卡片内容将通过JavaScript动态插入 -->
47 |     </div>
48 |     
49 |     <!-- 添加查看源代码和提示词的入口按钮 -->
50 |     <div class="action-buttons mt-4 flex justify-center space-x-4">
51 |       <button id="view-source-btn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded">
52 |         <i class="fas fa-code"></i> 查看源代码
53 |       </button>
54 |       <button id="view-prompt-btn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded">
55 |         <i class="fas fa-magic"></i> 查看提示词
56 |       </button>
57 |     </div>
58 |   </div>
59 |   
60 |   <footer>
61 |     <p>&copy; 2025 Cards-Go | 使用ARK AI提供支持</p>
62 |   </footer>
63 |   
64 |   <script src="/js/html2canvas.min.js"></script>
65 |   <script src="/js/card.js"></script>
66 | </body>
67 | </html>
68 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cards-go",
 3 |   "version": "1.0.0",
 4 |   "description": "A simple card generation application",
 5 |   "main": "server.js",
 6 |   "type": "module",
 7 |   "scripts": {
 8 |     "start": "node server.js",
 9 |     "dev": "nodemon server.js"
10 |   },
11 |   "dependencies": {
12 |     "axios": "^1.8.4",
13 |     "compression": "^1.8.0",
14 |     "dotenv": "^16.0.3",
15 |     "express": "^4.18.2",
16 |     "express-session": "^1.18.1",
17 |     "node-fetch": "^3.3.0"
18 |   },
19 |   "devDependencies": {
20 |     "nodemon": "^2.0.20"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/prompts/card.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * 卡片生成相关的提示词集合和配置
  3 |  */
  4 | 
  5 | /**
  6 |  * 默认配置参数
  7 |  */
  8 | export const DEFAULT_CONFIG = {
  9 |   quoteCount: 8, // 默认提取8个金句
 10 |   aspectRatio: "16:9", // 默认卡片比例
 11 |   cardsPerRow: 2, // 默认一行两张卡片
 12 |   maxQuoteLength: 150, // 默认金句最大长度
 13 |   contextLength: 30, // 默认上下文说明最大字数
 14 |   styleSelection: [], // 默认不指定风格，随机选择
 15 |   mode: 'creative', // 默认使用创造性模式，可选值: 'literal'(完全忍于原文) 或 'creative'(AI提取金句或发挥)
 16 |   maxHeight: 380, // 默认卡片最大高度(px)，如果不需要限制可设置为null
 17 |   minHeight: 50 // 默认卡片最小高度(px)，默认不设置最小高度
 18 | };
 19 | 
 20 | /**
 21 |  * 知识卡片生成器基础提示词模板
 22 |  */
 23 | export const KNOWLEDGE_CARD_GENERATOR_TEMPLATE = `
 24 | 你是一名专业的内容策展人和视觉设计师，擅长从文章或段落中提炼精华并创建视觉冲击力强的知识卡片。
 25 | 
 26 | ## 任务
 27 | 根据用户选择的模式，从提供的内容中生成{quoteCount}个知识卡片。当前模式：**{mode}**
 28 | 
 29 | ## 内容处理方式
 30 | 如果模式是 'literal'（字面模式）：
 31 | - 完全基于提供的内容制作卡片，生成{quoteCount}个知识卡片，不进行提取或改写，只允许在卡片设计上发挥创意
 32 | 
 33 | 
 34 | 如果模式是 'creative'（创造性模式）：
 35 | - 分析提供的文本(完整文章、段落或主题词)
 36 | - 提取{quoteCount}个最有价值、最具洞见的金句(若只有主题词，则创造性地生成金句)
 37 | - 每个金句：简练有力，具启发性，长度≤{maxQuoteLength}字
 38 | - （{contextLengthPrompt}）
 39 | 
 40 | 
 41 | ## 知识卡片设计
 42 | - 每个金句分配一个设计风格，从{styleSelectionPrompt}中选择
 43 | - 卡片比例：{aspectRatio}，设计精美且易于阅读
 44 | - 卡片高度控制：{maxHeight ? '最大高度' + maxHeight + 'px' : '无最大高度限制'}{minHeight ? '，最小高度' + minHeight + 'px' : '，无最小高度限制'}
 45 | - 根据金句内容和情感，创造性地设计卡片内容和布局
 46 | - 每种风格应有独特的CSS样式(字体、颜色、边框、背景等)
 47 | - 色彩与背景：从明亮活泼的色彩到柔和的色调，包括纯色背景、渐变效果、纸张质感、网格纹理等
 48 | - 字体与排版：黑体为主，辅以手写风格、描边效果和变形字体，灵活的排版方式
 49 | - 装饰与互动元素：图标、手绘元素、标签与徽章、互动提示等
 50 | - 绝对不要使用方格背景，尤其是竖方格。卡片背景可以是：
 51 |   * 纯色背景配以微妙的渐变
 52 |   * 精致的有机纹理如大理石、水彩、手绘纹理
 53 |   * 微妙的波点或波线图案
 54 |   * 渐变色彩配以半透明纹理
 55 |   * 极简的几何图案（非方格）
 56 |   * 有舒适的噪点或纹理效果
 57 | - CSS卡片样式一定不能有倾斜，保持 transform: rotate(0deg);
 58 | - 卡片中的文字也不要出现倾斜，保持 transform: rotate(0deg);
 59 | - 鼠标放到卡片上，不需要任何微动效果，保持静止
 60 | 
 61 | - 必须使用Google Fonts引入多样化的中英文字体，中文字体包括但不限于:
 62 |   1. Noto Sans SC
 63 |   - 优势：清晰度高，多种字重，适合各种风格的金句
 64 |   - 适用场景：现代风格、极简风格、科技风格的金句
 65 |   - 推荐字重：Medium或Bold用于金句，Regular用于上下文说明
 66 |   2. Source Han Sans CN（思源黑体）
 67 |   - 优势：字形精美，专业感强，阅读体验佳
 68 |   - 适用场景：正式、专业或商务风格的金句
 69 |   - 推荐字重：Regular至Bold，根据设计风格调整
 70 |   3. Noto Serif SC
 71 |   - 优势：优雅大方，增加金句的权威感和深度感
 72 |   - 适用场景：哲理性、文学性强的金句，适合复古风格
 73 |   - 特点：衬线设计增强了文字的表现力
 74 |   4. ZCOOL XiaoWei（站酷小薇体）
 75 |   - 优势：现代感强但不失亲和力，圆润可爱
 76 |   - 适用场景：积极向上、励志类金句
 77 |   - 特点：字形独特但保持良好可读性
 78 |   5. Ma Shan Zheng（马善政体）
 79 |   - 优势：手写风格增加个性和情感
 80 |   - 适用场景：感性、情感类金句
 81 |   - 特点：适合表达个人观点或情感的金句
 82 |   6. Playfair Display
 83 |   - 优势：优雅大方，增加金句的权威感和深度感
 84 |   - 适用场景：哲理性、文学性强的金句，适合复古风格
 85 |   - 特点：衬线设计增强了文字的表现力
 86 |   7. Space Mono
 87 |   - 优势：清晰度高，多种字重，适合各种风格的金句
 88 |   - 适用场景：现代风格、极简风格、科技风格的金句
 89 |   - 推荐字重：Medium或Bold用于金句，Regular用于上下文说明
 90 | 
 91 | ## 输出要求
 92 | - 提供一个完整HTML文件，包含所有卡片，一行两张，呈现杂志般的精致排版
 93 | - 使用HTML5、Tailwind CSS、Font Awesome和必要的JavaScript，- 所有CSS样式内联到HTML中
 94 | - 代码应优雅且符合最佳实践，CSS应体现对细节的极致追求
 95 | - 每个卡片必须指定上述风格代码之一
 96 | - 如果用户提供的是英文或其他语言，最终也必须使用中文输出。
 97 | - 使用CSS Grid/Flexbox布局，每行显示{cardsPerRow}张卡片
 98 | - 页面应具响应式设计，移动设备友好
 99 | - 不要输出解释或其他文本，只输出HTML代码
100 | `;
101 | 
102 | /**
103 |  * 设计风格列表（带简称）
104 |  */
105 | export const DESIGN_STYLES = [
106 |   { code: "MINI", name: "极简主义风格 (Minimalist)", 
107 |     description: "采用极简主义风格设计，遵循\"少即是多\"的理念。使用大量留白创造呼吸空间，仅保留最必要的元素。配色方案限制在2-3种中性色，主要为白色背景配以黑色或深灰色文字。排版应精确到像素级别，使用精心设计的网格系统和黄金比例。字体选择无衬线字体如Helvetica或Noto Sans，字重变化作为主要层次手段。装饰元素几乎为零，仅使用极细的分隔线和微妙的阴影。整体设计应呈现出克制、优雅且永恒的美学，让内容本身成为焦点。参考Dieter Rams的设计原则和日本无印良品(MUJI)的产品美学。" },
108 |   
109 |   { code: "BOLD", name: "大胆现代风格 (Bold Modern)", 
110 |     description: "采用大胆现代风格设计，打破传统排版规则，创造强烈视觉冲击。使用鲜艳对比色如荧光粉、电子蓝、亮黄等，背景可使用深色或鲜艳色块。排版应不对称且动态，标题文字极大（至少60px），可使用极粗字重或压缩字体，甚至允许文字重叠和溢出。图形元素应用几何形状，边缘锐利，可添加不规则裁切效果。层次感通过大小、颜色和位置的极端对比创造。整体设计应充满张力和活力，像一张视觉宣言，参考Wired杂志和Pentagram设计工作室的作品。添加微妙动效如悬停放大或颜色变换，增强现代感。" },
111 |   
112 |   { code: "VINT", name: "优雅复古风格 (Elegant Vintage)", 
113 |     description: "采用优雅复古风格设计，重现20世纪初期印刷品的精致美学。使用米色或淡黄色纸张质感背景，配以深棕、暗红等老式印刷色。字体必须使用衬线字体如Baskerville或Noto Serif，标题可使用装饰性字体。排版应对称且庄重，遵循传统书籍设计原则。装饰元素包括精致的花纹边框、古典分隔线和角落装饰，可添加轻微做旧效果如纸张纹理和微妙污点。图像应用复古滤镜处理，呈现褪色照片效果。整体设计应散发出典雅、成熟且历经时间考验的气质，参考The New Yorker和老式法国时尚杂志的设计语言。" },
114 |   
115 |   { code: "TECH", name: "未来科技风格 (Futuristic Tech)", 
116 |     description: "采用未来科技风格设计，呈现高度发达的数字界面美学。背景必须使用深蓝或纯黑，配以霓虹蓝、电子紫等高饱和度荧光色。排版应模拟高科技显示界面，使用等宽字体如Space Mono，添加数据可视化元素如图表、网格和代码片段。装饰元素包括科技感线条、HUD界面框架和全息投影效果。必须添加动态元素如扫描线、数据流动效果和微妙闪烁。可使用半透明叠加层和模糊效果创造深度。整体设计应呈现出未来感、高科技和信息密集的视觉体验，仿佛来自几十年后的界面，参考《银翼杀手2049》和《攻壳机动队》的视觉设计。" },
117 |   
118 |   { code: "SCAN", name: "斯堪的纳维亚风格 (Scandinavian)", 
119 |     description: "采用斯堪的纳维亚风格设计，体现北欧设计的简约与功能美学。使用纯白背景，配以特定的北欧色调如淡蓝、浅灰、原木色和淡粉。排版应极度克制且有序，使用大量留白，但与极简主义不同，应加入温暖质感。字体选择无衬线几何字体如Futura或Circular，字重轻盈。装饰元素应极少但精心选择，可使用简单几何图案如三角形和线条，参考马勒维奇的构成主义。图像应明亮、简洁且自然。整体设计应呈现出清爽、实用且温暖的北欧特质，平衡美学与功能性，参考Kinfolk杂志和丹麦设计品牌HAY的产品美学。" },
120 |   
121 |   { code: "DECO", name: "艺术装饰风格 (Art Deco)", 
122 |     description: "采用艺术装饰风格设计，重现1920-30年代的奢华与几何美学。必须使用黑金配色方案，金色应为真实金属色#D4AF37而非黄色。排版应严格对称，使用装饰性强的字体，特别是几何感强烈的字体如Broadway或现代变体。装饰元素是关键，必须包含扇形放射纹、锯齿形、几何图案和对称花纹。边框应华丽且具结构性，角落处理需特别精致。可添加仿金箔和大理石纹理增强奢华感。整体设计应呈现出大胆、奢华且充满时代特色的视觉效果，仿佛来自爵士时代的纽约或巴黎，参考克莱斯勒大厦和《了不起的盖茨比》电影海报的视觉语言。" },
123 |   
124 |   { code: "JPNM", name: "日式极简风格 (Japanese Minimalism)", 
125 |     description: "采用日式极简风格设计，体现\"侘寂\"(Wabi-Sabi)美学——接受不完美、无常与不完整的哲学。使用极度克制的色彩，主要为白、灰、黑和淡墨色。留白(Ma)是核心元素，至少70%的设计应为空白，创造宁静感。排版应非对称且垂直，可使用垂直书写模式，体现日本传统排版。字体应极度简约，笔画轻盈。装饰元素几乎为零，但可添加一处墨迹、简单印章或单一线条作为点睛之笔。整体设计应呈现出深度宁静、精致且富有禅意的视觉体验，仿佛一页来自京都寺院的书页，参考原研哉的MUJI设计理念和日本传统水墨画的留白美学。" },
126 |   
127 |   { code: "POST", name: "后现代解构风格 (Postmodern Deconstruction)", 
128 |     description: "采用后现代解构风格设计，彻底打破传统设计规则和网格系统。排版应故意不规则且混乱，使用多种字体、大小和方向，文字可重叠、倾斜或被切割。必须使用不和谐的色彩组合，打破传统配色规则。图形元素应包含随机几何形状、不完整图形和故意扭曲的元素。层次感通过混乱中的秩序创造，可使用碎片化图像和拼贴效果。装饰元素应看似随意但精心安排，如手绘线条、涂鸦和复印机错误效果。整体设计应挑战视觉常规，创造一种有控制的混乱美学，参考David Carson的Ray Gun杂志设计和Wolfgang Weingart的实验性排版作品。" },
129 |   
130 |   { code: "PUNK", name: "朋克风格 (Punk)", 
131 |     description: "采用朋克风格设计，体现DIY精神和反叛文化。必须使用粗糙、手工制作的视觉效果，如剪贴报纸、复印机扭曲和胶带痕迹。色彩应高对比且原始，主要使用黑、白、红色，可添加荧光色点缀。排版必须粗暴且不规则，使用手写、喷漆或剪贴字体，文字可被切割或部分遮挡。装饰元素应包含安全别针、胶带、污渍和撕裂效果。图像应使用高对比度、粗颗粒处理，模拟劣质印刷。必须添加随机元素如涂鸦、X标记和感叹号。整体设计应呈现出原始、粗糙且充满能量的视觉冲击，仿佛一张来自70-80年代伦敦或纽约地下场景的传单，参考Sex Pistols的专辑封面和早期朋克杂志。" },
132 |   
133 |   { code: "BRIT", name: "英伦摇滚风格 (British Rock)", 
134 |     description: "采用英伦摇滚风格设计，融合英国传统元素与反叛摇滚美学。色彩应使用英国国旗色系（红、白、蓝）或复古棕色调，可添加做旧效果。排版应混合经典与现代，使用衬线字体与手写字体的组合，标题可使用哥特式或维多利亚风格字体。装饰元素应包含英国符号的现代演绎，如Union Jack图案、皇家纹章或伦敦地标的抽象表现。图像应使用复古滤镜，模拟老式胶片效果。可添加唱片、吉他或音符等音乐元素作为点缀。整体设计应呈现出典雅中带有叛逆、传统中融入现代的独特英伦风格，参考Oasis、The Beatles专辑封面和NME杂志的视觉语言。" },
135 |   
136 |   { code: "BLKM", name: "黑金属风格 (Black Metal)", 
137 |     description: "采用黑金属风格设计，体现极致黑暗美学和神秘主义。背景必须为纯黑或极深灰度，创造压抑氛围。排版应使用古老、难以辨认的哥特式字体或锋利的几何字体，文字可扭曲或被符号干扰。装饰元素必须包含神秘符号、倒五角星、古代符文和神秘学图案。图像应高度对比且单色，可添加噪点和划痕增强原始感。边框应使用中世纪风格或神秘学几何图案。可添加微妙的闪烁效果模拟烛光。整体设计应呈现出神秘、冷酷且具仪式感的视觉体验，仿佛一本古老的神秘学典籍或挪威黑金属乐队的专辑封面，参考Darkthrone和Mayhem的视觉风格以及中世纪魔法书的排版。" },
138 |   
139 |   { code: "MEMP", name: "孟菲斯风格 (Memphis Design)", 
140 |     description: "采用孟菲斯风格设计，重现80年代意大利设计运动的前卫美学。必须使用鲜艳且不协调的色彩组合，如亮粉、青绿、鲜黄和橙色。几何形状是核心元素，应大量使用不规则图形、锯齿形、波浪线和彩色网格。排版应活泼且不拘一格，使用几何感强的无衬线字体，可添加阴影或3D效果。装饰元素应包含孟菲斯标志性的彩色条纹、圆点、Z字形和任意形状的色块。图像可使用几何框架或被几何形状切割。整体设计应呈现出夸张、活泼且反传统的视觉冲击，仿佛来自80年代的未来主义想象，参考Ettore Sottsass的作品和《拯救大兵瑞恩》片头的视觉风格。" },
141 |   
142 |   { code: "CYBP", name: "赛博朋克风格 (Cyberpunk)", 
143 |     description: "采用赛博朋克风格设计，体现\"高科技，低生活\"的反乌托邦美学。背景必须为深色（黑色或深蓝），配以霓虹色彩如荧光粉、电子蓝和酸性绿，创造夜间都市氛围。排版应模拟故障效果，使用像素化字体或未来感等宽字体，添加字符错位、扫描线和数字噪点。装饰元素必须包含科技界面、数据流、电路板图案和全息投影效果。必须添加故障艺术(Glitch Art)效果如RGB分离、数据损坏和画面撕裂。图像应高对比且添加霓虹光效，模拟雨夜霓虹灯反射。整体设计应呈现出未来主义与复古科技的混搭，营造一种数字化衰败的氛围，参考《银翼杀手》、《神经漫游者》和《赛博朋克2077》的视觉语言。" },
144 |   
145 |   { code: "POPA", name: "波普艺术风格 (Pop Art)", 
146 |     description: "采用波普艺术风格设计，重现60年代艺术运动的大胆美学。必须使用亮丽原色（红、黄、蓝）和黑色轮廓线，色彩应平面且不含渐变。排版应大胆且戏剧化，使用漫画风格字体和夸张的感叹词，文字可放置在对话气泡中。图像处理是关键，应使用半调网点(Halftone)效果模拟印刷，将图像简化为点阵和色块。装饰元素应包含漫画风格的线条、爆炸形状和拟声词。可使用重复图案和网格排列增强视觉冲击。整体设计应呈现出鲜明、直接且充满流行文化引用的视觉效果，仿佛一页来自60年代漫画或安迪·沃霍尔的艺术作品，参考Roy Lichtenstein的绘画和经典漫画书的视觉语言。" },
147 |   
148 |   { code: "SWIS", name: "瑞士国际主义风格的解构版 (Deconstructed Swiss Style)", 
149 |     description: "采用瑞士国际主义风格的解构版设计，在严格网格系统的基础上进行有意识的破坏和重组。排版应基于经典瑞士网格，但故意打破和扭曲，文字可越过栏格、重叠或被切割。色彩应保持瑞士风格的克制，主要使用黑白，但可添加一两种鲜艳原色作为点缀。字体必须使用无衬线几何字体如Helvetica或Akzidenz-Grotesk，但可通过极端的字重、间距和大小变化创造张力。图像应高对比且可被解构或重组。装饰元素几乎为零，但可使用解构的网格线和参考点。整体设计应呈现出理性与叛逆并存的视觉效果，像是经典瑞士设计被有意识地挑战和重新诠释，参考Wolfgang Weingart和April Greiman的实验性作品。" },
150 |   
151 |   { code: "VAPR", name: "蒸汽波美学 (Vaporwave Aesthetics)", 
152 |     description: "采用蒸汽波美学设计，体现互联网亚文化的怀旧未来主义。色彩必须使用特定的渐变组合，主要为粉紫色到青蓝色，创造黄昏或霓虹效果。排版应混合英文和日文/中文字符，使用80-90年代风格的衬线字体或早期数字字体，可添加阴影和辉光效果。装饰元素是关键，必须包含以下至少三种：罗马柱、棕榈树、格子地面、早期3D渲染、古典雕塑、日落、老式电脑界面。背景应使用网格线或星空。图像处理应添加VHS效果、扫描线和轻微失真。整体设计应呈现出一种超现实、梦幻且怀旧的数字美学，仿佛来自平行宇宙的90年代互联网，参考Floral Shoppe专辑封面和Windows 95界面元素的后现代重组。" },
153 |   
154 |   { code: "NEOE", name: "新表现主义风格 (Neo-Expressionism)", 
155 |     description: "采用新表现主义风格设计，体现80年代艺术运动的原始能量和情感表达。色彩应强烈且不协调，使用原始、未经调和的色彩组合，可包含泼溅和涂抹效果。排版应富有表现力且不规则，使用手写或笔刷字体，文字可被部分遮挡或融入背景。线条必须粗犷且富有动感，展现明显的笔触和手工感。图像应被重新诠释，可添加涂鸦、划痕或重绘效果。装饰元素应看似随意但富有象征性，如原始符号、面具图案或抽象人物。整体设计应呈现出强烈的情感张力和原始能量，仿佛一幅由情感驱动的表现主义画作，参考Jean-Michel Basquiat和Georg Baselitz的作品风格。" },
156 |   
157 |   { code: "EXMI", name: "极简主义的极端版本 (Extreme Minimalism)", 
158 |     description: "采用极简主义的极端版本设计，将\"少即是多\"的理念推向极致。留白必须占据至少90%的设计空间，创造极度的空旷感。色彩应限制在黑、白、灰三色，可添加一种极其微妙的强调色。排版应极度精简，每个元素的位置必须精确到像素级别，使用极细字重的无衬线字体，字号可极小但必须保持可读性。装饰元素完全消除，仅保留极细的分隔线或几何点。图像如必须使用，应被简化为最基本的线条或轮廓。整体设计应呈现出一种近乎禅意的纯粹和克制，让每个元素都具有绝对的必要性和目的性，参考John Pawson的建筑设计和Kenya Hara的平面设计作品。" },
159 |   
160 |   { code: "NEOF", name: "新未来主义 (Neo-Futurism)", 
161 |     description: "采用新未来主义风格设计，体现当代建筑和产品设计中的前沿美学。形态应强调流线型曲线和有机几何形状，避免直角和静态形式。色彩应使用金属色调如银色、钛白和铬黄，配以一两种高饱和度的强调色。材质表现是关键，应模拟高科技材料如拉丝金属、碳纤维和磨砂玻璃。排版应动态且流畅，使用现代无衬线字体，可沿曲线排列或呈放射状。装饰元素应包含参数化生成的图案、流体动力学形态和仿生学结构。整体设计应呈现出高度发达的技术美学和动态感，仿佛来自近未来的高端产品，参考扎哈·哈迪德的建筑、特斯拉Cybertruck和Apple产品的设计语言。" },
162 |   
163 |   { code: "SURR", name: "超现实主义数字拼贴 (Surrealist Digital Collage)", 
164 |     description: "采用超现实主义数字拼贴风格设计，创造梦境般的视觉叙事。图像处理是核心，应组合不相关元素创造意外联系，如古典雕塑与现代电子产品、自然元素与几何形状。比例应故意失调，创造视觉张力。色彩可使用梦幻般的组合，如暖日落色调或冷月光色调，添加轻微的色偏。排版应融入拼贴中，文字可环绕物体、穿过图像或成为构图的一部分。装饰元素应包含超现实符号如悬浮物体、不可能的建筑、变形的人物或动物。可添加微妙的阴影和光效增强立体感。整体设计应呈现出一种介于现实与梦境之间的视觉体验，引发观者的想象和潜意识联想，参考René Magritte的绘画和现代数字艺术家如Justin Peters的作品。" },
165 |   
166 |   { code: "NEOB", name: "新巴洛克数字风格 (Neo-Baroque Digital)", 
167 |     description: "采用新巴洛克数字风格设计，将17世纪的华丽美学重新诠释为数字形式。装饰是核心元素，应使用极其丰富的数字化巴洛克花纹、卷轴和浮雕效果，每个角落都应有精致细节。色彩应奢华且戏剧性，主要使用金色、深红、皇家蓝和黑色，可添加金属光泽和渐变效果。排版应华丽且层次丰富，使用装饰性强的衬线字体，可添加花体字母和装饰性首字母。图像应添加华丽框架和装饰性边缘。光影效果是关键，应创造强烈的明暗对比，模拟巴洛克绘画的戏剧性光效。整体设计应呈现出极度奢华、复杂且充满戏剧性的视觉体验，仿佛数字时代的凡尔赛宫，参考巴洛克艺术大师如鲁本斯的作品和现代奢侈品牌的视觉语言。" },
168 |   
169 |   { code: "LIQD", name: "液态数字形态主义 (Liquid Digital Morphism)", 
170 |     description: "采用液态数字形态主义风格设计，结合流体动力学与数字艺术创造超前卫视觉体验。背景必须使用高级流体渐变，如紫罗兰到深蓝的流动过渡，并添加半透明的液态气泡或波浪形态。排版应具有流动感，文字可沿着液体路径排列或被液态效果部分包裹。装饰元素应模拟液体物理特性，如水滴、波纹或流体飞溅。色彩应使用梦幻般的液态渐变，如霓虹紫到电子蓝。必须添加微妙的动态效果，元素间的转换如同液体融合，文字可有轻微的波动或流动效果。图像应添加液态边框或流体遮罩。整体设计应呈现出一种超现实且高度未来感的流动视觉体验，仿佛界面本身是液态的，参考Björk的数字专辑视觉和Apple最新的流体动画设计语言。" },
171 |   
172 |   { code: "HYPS", name: "超感官极简主义 (Hypersensory Minimalism)", 
173 |     description: "采用超感官极简主义风格设计，将极简美学推向感官极限。表面上看似极简，但通过微妙的纹理、触觉暗示和动态响应创造深层次感官体验。背景必须使用纯白或极浅灰，但添加几乎不可见的纹理变化，只有在光线变化或视角移动时才能察觉。排版应精确到像素级别，使用极细字重的无衬线字体，文字间距和行高必须遵循严格的数学比例。色彩应使用近似色调的细微变化，如不同程度的灰白或极淡的单色调，创造需要仔细观察才能发现的层次感。装饰元素应极少且极其微妙，如几乎不可见的线条或点。必须添加微妙的交互响应，如悬停时的轻微透明度变化或极其缓慢的颜色过渡。整体设计应呈现出一种\"安静但深刻\"的视觉体验，参考日本建筑师安藤忠雄的作品和苹果设计团队Jonathan Ive的产品美学。" },
174 |   
175 |   { code: "NEDV", name: "新表现主义数据可视化 (Neo-Expressionist Data Visualization)", 
176 |     description: "采用新表现主义数据可视化风格设计，将抽象表现主义艺术与数据可视化完美融合。必须使用看似随意的笔触、泼溅和涂抹效果，但实际上是由精确数据驱动生成的可视化图表。背景应使用白色或浅色，但添加微妙的纹理和抽象笔触。排版应融入数据可视化中，文字可成为数据表达的一部分，使用不同字重和大小表示数值变化。色彩应使用鲜明且情感化的组合，如蓝色、红色、黄色等原色，但每种颜色都应对应特定数据类别。图表元素如条形、线条或点应具有手绘质感，展现明显的笔触和不规则边缘。整体设计应在混沌中呈现秩序，在抽象中传达精确信息，参考Giorgia Lupi的\"数据人文主义\"作品和Bloomberg Businessweek的实验性数据页面。" },
177 |   
178 |   { code: "VICT", name: "维多利亚风格 (Victorian Style)", 
179 |     description: "采用维多利亚风格设计，重现19世纪英国维多利亚时期的华丽印刷美学。背景必须使用米色或淡黄色纸张质感，配以棕色、深红和金色等传统印刷色调。边框是核心元素，应使用繁复的装饰花纹和卷草图案环绕整个设计，角落处需添加精致的装饰性图案。排版应严格对称且庄重，标题使用华丽的衬线字体或哥特式字体，并添加装饰性首字母。必须使用传统的分隔线、花饰和维多利亚时期的装饰符号。图像应添加精致的装饰性框架，可使用椭圆形或方形边框配以繁复图案。色彩应模拟老式印刷效果，添加微妙的做旧纹理和褪色效果。文字排版应遵循传统书籍设计原则，段落首行缩进，引用文字使用斜体并添加装饰性引号。整体设计应呈现出典雅、华丽且富有历史感的视觉效果，仿佛一页来自19世纪精装书籍或杂志的印刷品，参考William Morris的装饰图案设计和《潘趣》(Punch)杂志的版面设计。" },
180 |   
181 |   { code: "BAUH", name: "包豪斯风格 (Bauhaus)", 
182 |     description: "采用包豪斯风格设计，体现20世纪早期德国包豪斯学校的功能主义美学。必须使用基本几何形状作为核心设计元素，如方形、圆形和三角形，保持形状的纯粹性。色彩应限制在基本原色——红、黄、蓝，配以黑白灰，不使用过渡色或渐变。排版应清晰且理性，使用无衬线字体如Futura或Helvetica，文字排列需遵循严格的网格系统，强调水平和垂直线条。标题应大胆且直接，可使用全大写字母增强视觉冲击力。装饰元素应完全服务于功能，避免纯粹装饰性的图案。图像处理应简洁且具有几何感，可使用高对比度的摄影或简化的图形。必须体现\"形式服从功能\"的设计理念，每个元素都应有明确目的。整体设计应呈现出理性、前卫且具有工业美感的视觉效果，仿佛一页来自1920年代包豪斯学校的教材或海报，参考拉斯洛·莫霍利-纳吉(László Moholy-Nagy)的排版设计和赫伯特·拜耶(Herbert Bayer)的海报作品。" },
183 |   
184 |   { code: "CONS", name: "构成主义风格 (Constructivism)", 
185 |     description: "采用构成主义风格设计，体现20世纪早期俄国前卫艺术运动的革命性美学。必须使用大胆的几何形状和对角线元素创造动态张力，强调结构与构成。色彩应限制在红、黑两色为主，可辅以少量白色或灰色，体现革命色彩。排版是关键元素，文字应成为设计的一部分而非简单的内容载体，可使用不同大小、粗细和方向的文字创造视觉层次，标题应大胆且具冲击力，可斜向排列或分割成多行。必须使用几何形状如三角形、圆形、直线和对角线作为主要视觉元素，这些元素应相互重叠和交织。照片或图像应使用锐利的对比度和几何化处理，可使用照片蒙太奇技术。整体构图应不对称且充满张力，仿佛元素间存在力的相互作用。可添加工业元素如齿轮、工厂或机械部件的抽象表现。整体设计应呈现出前卫、动态且具有政治宣传性质的视觉效果，参考亚历山大·罗德琴科(Alexander Rodchenko)和埃尔·利西茨基(El Lissitzky)的海报设计，体现\"艺术进入生活\"的设计理念。" },
186 |   
187 |   { code: "MEMP", name: "孟菲斯风格 (Memphis Design)", 
188 |     description: "采用孟菲斯风格设计，重现1980年代意大利孟菲斯设计小组的前卫美学。必须使用鲜艳且不协调的色彩组合，如亮粉、青绿、鲜黄和橙色，创造故意的视觉冲突。几何形状是核心元素，应大量使用不规则图形、锯齿形、波浪线和彩色网格，这些形状应随意排列且看似不遵循传统设计规则。纹理对比很重要，应混合使用点状图案、条纹和几何网格。排版应活泼且不拘一格，使用几何感强的无衬线字体，可添加阴影或3D效果增强视觉冲击力。装饰元素应包含孟菲斯标志性的彩色条纹、圆点、Z字形和任意形状的色块。必须打破传统的网格系统，元素可自由浮动且看似随意放置。可添加1980年代流行文化元素如霓虹灯、电视机或卡带的抽象表现。整体设计应呈现出夸张、活泼且反传统的视觉冲击，仿佛来自80年代的未来主义想象，参考埃托雷·索特萨斯(Ettore Sottsass)的作品和MTV早期的视觉风格，体现\"反功能主义\"的设计理念。" },
189 |   
190 |   { code: "GEXP", name: "德国表现主义风格 (German Expressionism)", 
191 |     description: "采用德国表现主义风格设计，体现20世纪初期德国表现主义运动的强烈情感表达。背景应使用深色调如深蓝、黑色或暗红色，创造戏剧性氛围。必须使用强烈的明暗对比和扭曲变形的形态，线条应锐利且富有动感，呈现出内在情绪的外化。排版应不规则且具表现力，文字可呈现倾斜或不稳定感，标题应使用粗犷、锐利的哥特式字体或手写风格字体。色彩应强烈且具象征性，偏好使用黑色、深红、黄色和深绿等高对比度组合。图像处理应添加木刻版画效果，强调粗犷的线条和夸张的明暗对比。阴影是关键元素，应使用长而尖锐的投影创造紧张感和不安氛围。可添加象征性元素如尖塔、扭曲的人物剪影或锯齿状山脉。整体设计应呈现出强烈的情感张力和心理深度，仿佛一页来自德国表现主义电影《卡里加里博士的小屋》的场景设计或卡尔·施密特-罗特卢夫(Karl Schmidt-Rottluff)的木刻版画，体现\"情感真实大于形式真实\"的艺术理念。" }
192 | ];
193 | 
194 | /**
195 |  * 根据风格代码获取风格详情
196 |  * @param {string} code 风格代码
197 |  * @returns {Object|null} 风格对象或null（如果未找到）
198 |  */
199 | export function getStyleByCode(code) {
200 |   return DESIGN_STYLES.find(style => style.code === code) || null;
201 | }
202 | 
203 | /**
204 |  * 根据配置生成风格选择提示词
205 |  * @param {Array} styleSelection 选定的风格代码数组
206 |  * @returns {string} 风格选择提示词
207 |  */
208 | function generateStyleSelectionPrompt(styleSelection) {
209 |   if (!styleSelection || styleSelection.length === 0) {
210 |     return "为每个金句随机选择一种不同的设计风格(从附录中的29种风格)";
211 |   }
212 |   
213 |   if (styleSelection.length === 1) {
214 |     const style = getStyleByCode(styleSelection[0]);
215 |     if (style) {
216 |       return `为所有金句使用同一种设计风格：${style.name} [${style.code}]`;
217 |     }
218 |   }
219 |   
220 |   // 多种风格的情况
221 |   const selectedStyles = styleSelection
222 |     .map(code => getStyleByCode(code))
223 |     .filter(style => style !== null);
224 |   
225 |   if (selectedStyles.length === 0) {
226 |     return "为每个金句随机选择一种不同的设计风格(从附录中的29种风格)";
227 |   }
228 |   
229 |   const styleNames = selectedStyles.map(s => `${s.name} [${s.code}]`).join('、');
230 |   return `为每个金句从以下指定的设计风格中选择：${styleNames}`;
231 | }
232 | 
233 | /**
234 |  * 获取完整的卡片生成提示词
235 |  * @param {Object} config 配置对象
236 |  * @returns {string} 完整的卡片生成提示词，包含设计风格列表
237 |  */
238 | export function getCardGeneratorPrompt(config = {}) {
239 |   // 合并默认配置和用户配置
240 |   const finalConfig = { ...DEFAULT_CONFIG, ...config };
241 |   
242 |   // 生成风格选择提示词
243 |   const styleSelectionPrompt = generateStyleSelectionPrompt(finalConfig.styleSelection);
244 |   
245 |   // 替换模板中的变量
246 |   let prompt = KNOWLEDGE_CARD_GENERATOR_TEMPLATE
247 |     .replace('{quoteCount}', finalConfig.quoteCount)
248 |     .replace('{quoteCount}', finalConfig.quoteCount)  
249 |     .replace('{quoteCount}', finalConfig.quoteCount)  // 因为出现3次
250 |     .replace('{maxQuoteLength}', finalConfig.maxQuoteLength)
251 |     .replace('{contextLength}', finalConfig.contextLength)
252 |     .replace('{styleSelectionPrompt}', styleSelectionPrompt)
253 |     .replace('{aspectRatio}', finalConfig.aspectRatio)
254 |     .replace('{mode}', finalConfig.mode)
255 |     .replace('{cardsPerRow}', finalConfig.cardsPerRow);
256 |   
257 |   // 处理上下文说明长度
258 |   const contextLengthPrompt = finalConfig.contextLength === 0 ? '不添加上下文说明' : '上下文说明不超过' + finalConfig.contextLength + '字';
259 |   prompt = prompt.replace('{contextLengthPrompt}', contextLengthPrompt);
260 | 
261 |   // 处理高度相关的变量
262 |   const maxHeightText = finalConfig.maxHeight ? '最大高度' + finalConfig.maxHeight + 'px' : '无最大高度限制';
263 |   const minHeightText = finalConfig.minHeight ? '，最小高度' + finalConfig.minHeight + 'px' : '，无最小高度限制';
264 |   prompt = prompt.replace('{maxHeight ? \'最大高度\' + maxHeight + \'px\' : \'无最大高度限制\'}{minHeight ? \'，最小高度\' + minHeight + \'px\' : \'，无最小高度限制\'}', maxHeightText + minHeightText);
265 |   
266 |   // 添加风格列表标题
267 |   prompt += "\n\n## 设计风格列表 - 非常重要\n请仔细阅读并充分利用以下设计风格的详细描述，确保每个卡片都充分体现其对应风格的独特特点。对每个卡片，你必须严格遵循所选风格的设计原则，包括色彩、排版、装饰元素和整体氛围。\n\n";
268 |   
269 |   // 如果指定了特定风格，只添加那些风格的详细描述
270 |   const stylesToInclude = finalConfig.styleSelection && finalConfig.styleSelection.length > 0
271 |     ? DESIGN_STYLES.filter(style => finalConfig.styleSelection.includes(style.code))
272 |     : DESIGN_STYLES;
273 |   
274 |   // 添加每种风格的详细描述
275 |   stylesToInclude.forEach((style, index) => {
276 |     prompt += `### ${style.name} [${style.code}]\n${style.description}\n\n**当使用 ${style.code} 风格时，请确保卡片充分体现该风格的独特特点。**\n\n`;
277 |   });
278 |   
279 |   // 在提示词结尾再次强调风格的重要性
280 |   prompt += "\n## 重要提示\n请确保每个卡片都充分体现其对应风格的独特特点，不要生成风格单调或相似的卡片。每种风格应有明显的视觉差异和独特的设计语言。";
281 |   
282 |   return prompt;
283 | }
284 | 


--------------------------------------------------------------------------------
/public/css/card-styles.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;700&family=Space+Mono&family=Playfair+Display:wght@700&display=swap');
  2 | 
  3 | /* 卡片容器基础样式 */
  4 | .card-container {
  5 |   display: grid;
  6 |   gap: 2rem;
  7 |   max-width: 1200px;
  8 |   margin: 0 auto;
  9 |   padding: 2rem;
 10 | }
 11 | 
 12 | /* 根据每行卡片数量设置网格列数 */
 13 | .cards-per-row-1 {
 14 |   grid-template-columns: 1fr;
 15 | }
 16 | 
 17 | .cards-per-row-2 {
 18 |   grid-template-columns: repeat(2, 1fr);
 19 | }
 20 | 
 21 | .cards-per-row-3 {
 22 |   grid-template-columns: repeat(3, 1fr);
 23 | }
 24 | 
 25 | .cards-per-row-4 {
 26 |   grid-template-columns: repeat(4, 1fr);
 27 | }
 28 | 
 29 | /* 卡片基础样式 */
 30 | .card {
 31 |   overflow: hidden;
 32 |   position: relative;
 33 |   border-radius: 8px;
 34 |   box-shadow: 0 4px 20px rgba(0,0,0,0.1);
 35 | }
 36 | 
 37 | /* 根据不同的宽高比设置卡片 */
 38 | .aspect-16-9 {
 39 |   aspect-ratio: 16/9;
 40 | }
 41 | 
 42 | .aspect-4-3 {
 43 |   aspect-ratio: 4/3;
 44 | }
 45 | 
 46 | .aspect-1-1 {
 47 |   aspect-ratio: 1/1;
 48 | }
 49 | 
 50 | .aspect-3-4 {
 51 |   aspect-ratio: 3/4;
 52 | }
 53 | 
 54 | /* 卡片内容基础样式 */
 55 | .card .content {
 56 |   position: relative;
 57 |   z-index: 1;
 58 |   height: 100%;
 59 |   display: flex;
 60 |   flex-direction: column;
 61 |   justify-content: center;
 62 | }
 63 | 
 64 | .card .quote {
 65 |   margin-bottom: 1.5rem;
 66 |   font-weight: 500;
 67 | }
 68 | 
 69 | .card .context {
 70 |   font-size: 0.8rem;
 71 | }
 72 | 
 73 | /* 1. 优雅复古风格 (VINT) */
 74 | .vintage {
 75 |   background-color: #f9f3e6;
 76 |   color: #3a3a3a;
 77 |   padding: 2.5rem;
 78 |   position: relative;
 79 | }
 80 | 
 81 | .vintage::before {
 82 |   content: "";
 83 |   position: absolute;
 84 |   top: 0;
 85 |   left: 0;
 86 |   width: 100%;
 87 |   height: 100%;
 88 |   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%23d9c7a7" stroke-width="0.5"/></svg>');
 89 |   opacity: 0.3;
 90 | }
 91 | 
 92 | .vintage .quote {
 93 |   font-family: 'Noto Serif SC', serif;
 94 |   font-size: 1.5rem;
 95 |   line-height: 1.5;
 96 |   position: relative;
 97 |   z-index: 1;
 98 |   color: #5c4b3c;
 99 | }
100 | 
101 | .vintage .context {
102 |   font-size: 0.8rem;
103 |   color: #8c7b6c;
104 |   font-style: italic;
105 |   position: relative;
106 |   z-index: 1;
107 | }
108 | 
109 | .vintage .decoration {
110 |   position: absolute;
111 |   width: 80px;
112 |   height: 80px;
113 |   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20,50 Q50,20 80,50 T20,50" stroke="%23d9c7a7" fill="none" stroke-width="2"/></svg>');
114 |   opacity: 0.3;
115 |   top: 20px;
116 |   right: 20px;
117 | }
118 | 
119 | /* 2. 未来科技风格 (TECH) */
120 | .futuristic {
121 |   background-color: #0a0e17;
122 |   color: #7fdbff;
123 |   padding: 2rem;
124 |   display: flex;
125 |   flex-direction: column;
126 |   justify-content: center;
127 |   font-family: 'Space Mono', monospace;
128 |   position: relative;
129 |   overflow: hidden;
130 | }
131 | 
132 | .futuristic::before {
133 |   content: "";
134 |   position: absolute;
135 |   top: 0;
136 |   left: 0;
137 |   right: 0;
138 |   height: 2px;
139 |   background: linear-gradient(90deg, transparent, #7fdbff, transparent);
140 |   animation: scanline 2s linear infinite;
141 | }
142 | 
143 | .futuristic .quote {
144 |   font-size: 1.4rem;
145 |   line-height: 1.5;
146 |   text-shadow: 0 0 10px rgba(127, 219, 255, 0.5);
147 |   position: relative;
148 |   z-index: 1;
149 | }
150 | 
151 | .futuristic .context {
152 |   color: #5d8a9e;
153 |   font-size: 0.8rem;
154 |   position: relative;
155 |   z-index: 1;
156 | }
157 | 
158 | .futuristic .grid {
159 |   position: absolute;
160 |   top: 0;
161 |   left: 0;
162 |   width: 100%;
163 |   height: 100%;
164 |   background-image: linear-gradient(rgba(127, 219, 255, 0.05) 1px, transparent 1px),
165 |                     linear-gradient(90deg, rgba(127, 219, 255, 0.05) 1px, transparent 1px);
166 |   background-size: 20px 20px;
167 |   z-index: 0;
168 | }
169 | 
170 | @keyframes scanline {
171 |   0% {
172 |     transform: translateY(-100%);
173 |   }
174 |   100% {
175 |     transform: translateY(1000%);
176 |   }
177 | }
178 | 
179 | /* 3. 大胆现代风格 (BOLD) */
180 | .bold-modern {
181 |   background-color: #222;
182 |   color: #fff;
183 |   padding: 2.5rem;
184 |   position: relative;
185 |   overflow: hidden;
186 | }
187 | 
188 | .bold-modern .quote {
189 |   font-size: 2.5rem;
190 |   line-height: 1.2;
191 |   font-weight: 800;
192 |   position: relative;
193 |   z-index: 2;
194 |   transform: skew(-5deg);
195 |   color: #ff3366;
196 | }
197 | 
198 | .bold-modern .context {
199 |   font-size: 0.9rem;
200 |   color: #fff;
201 |   position: relative;
202 |   z-index: 2;
203 |   margin-left: 1rem;
204 | }
205 | 
206 | .bold-modern .shape {
207 |   position: absolute;
208 |   width: 200px;
209 |   height: 200px;
210 |   background-color: #ff3366;
211 |   opacity: 0.2;
212 |   top: -50px;
213 |   right: -50px;
214 |   border-radius: 0 0 0 100%;
215 |   z-index: 1;
216 | }
217 | 
218 | .bold-modern .shape-2 {
219 |   position: absolute;
220 |   width: 150px;
221 |   height: 150px;
222 |   background-color: #00ccff;
223 |   opacity: 0.2;
224 |   bottom: -50px;
225 |   left: -50px;
226 |   border-radius: 0 100% 0 0;
227 |   z-index: 1;
228 | }
229 | 
230 | /* 4. 艺术装饰风格 (DECO) */
231 | .art-deco {
232 |   background-color: #000;
233 |   color: #D4AF37;
234 |   padding: 2.5rem;
235 |   position: relative;
236 |   overflow: hidden;
237 | }
238 | 
239 | .art-deco::before {
240 |   content: "";
241 |   position: absolute;
242 |   top: 0;
243 |   left: 0;
244 |   width: 100%;
245 |   height: 100%;
246 |   background-image: 
247 |       radial-gradient(circle at 50% 0, #D4AF37 20px, transparent 20px),
248 |       radial-gradient(circle at 50% 100%, #D4AF37 20px, transparent 20px);
249 |   background-size: 100px 100%;
250 |   background-position: 0 0, 50px 0;
251 |   opacity: 0.1;
252 |   z-index: 0;
253 | }
254 | 
255 | .art-deco .quote {
256 |   font-family: 'Playfair Display', serif;
257 |   font-size: 1.7rem;
258 |   line-height: 1.4;
259 |   position: relative;
260 |   z-index: 1;
261 |   text-align: center;
262 | }
263 | 
264 | .art-deco .context {
265 |   font-size: 0.8rem;
266 |   color: #fff;
267 |   font-weight: 400;
268 |   position: relative;
269 |   z-index: 1;
270 |   text-align: center;
271 | }
272 | 
273 | .art-deco .border {
274 |   position: absolute;
275 |   top: 10px;
276 |   left: 10px;
277 |   right: 10px;
278 |   bottom: 10px;
279 |   border: 2px solid #D4AF37;
280 |   z-index: 1;
281 |   pointer-events: none;
282 | }
283 | 
284 | .art-deco .corner {
285 |   position: absolute;
286 |   width: 20px;
287 |   height: 20px;
288 |   border-color: #D4AF37;
289 |   z-index: 1;
290 | }
291 | 
292 | .art-deco .corner-tl {
293 |   top: 10px;
294 |   left: 10px;
295 |   border-top: 2px solid;
296 |   border-left: 2px solid;
297 | }
298 | 
299 | .art-deco .corner-tr {
300 |   top: 10px;
301 |   right: 10px;
302 |   border-top: 2px solid;
303 |   border-right: 2px solid;
304 | }
305 | 
306 | .art-deco .corner-bl {
307 |   bottom: 10px;
308 |   left: 10px;
309 |   border-bottom: 2px solid;
310 |   border-left: 2px solid;
311 | }
312 | 
313 | .art-deco .corner-br {
314 |   bottom: 10px;
315 |   right: 10px;
316 |   border-bottom: 2px solid;
317 |   border-right: 2px solid;
318 | }
319 | 
320 | /* 5. 极简主义风格 (MINI) */
321 | .minimalist {
322 |   background-color: white;
323 |   color: #333;
324 |   padding: 2.5rem;
325 |   display: flex;
326 |   flex-direction: column;
327 |   justify-content: center;
328 | }
329 | 
330 | .minimalist .quote {
331 |   font-weight: 300;
332 |   font-size: 1.5rem;
333 |   line-height: 1.4;
334 | }
335 | 
336 | .minimalist .context {
337 |   font-size: 0.8rem;
338 |   color: #888;
339 |   font-weight: 300;
340 | }
341 | 
342 | .minimalist .line {
343 |   width: 40px;
344 |   height: 1px;
345 |   background-color: #ddd;
346 |   margin: 1rem 0;
347 | }
348 | 
349 | /* 6. 斯堪的纳维亚风格 (SCAN) */
350 | .constructivism {
351 |   background-color: white;
352 |   padding: 2rem;
353 |   position: relative;
354 |   overflow: hidden;
355 | }
356 | 
357 | .constructivism .quote {
358 |   font-size: 1.6rem;
359 |   line-height: 1.3;
360 |   font-weight: 700;
361 |   color: #000;
362 |   position: relative;
363 |   z-index: 2;
364 | }
365 | 
366 | .constructivism .context {
367 |   font-size: 0.9rem;
368 |   color: #ff0000;
369 |   position: relative;
370 |   z-index: 2;
371 | }
372 | 
373 | .constructivism .red-square {
374 |   position: absolute;
375 |   width: 100px;
376 |   height: 100px;
377 |   background-color: #ff0000;
378 |   top: 20px;
379 |   right: 20px;
380 |   z-index: 1;
381 | }
382 | 
383 | .constructivism .black-line {
384 |   position: absolute;
385 |   width: 150px;
386 |   height: 10px;
387 |   background-color: #000;
388 |   transform: rotate(45deg);
389 |   bottom: 50px;
390 |   left: 30px;
391 |   z-index: 1;
392 | }
393 | 
394 | .constructivism .diagonal {
395 |   position: absolute;
396 |   width: 200px;
397 |   height: 2px;
398 |   background-color: #000;
399 |   transform: rotate(-30deg);
400 |   top: 70px;
401 |   left: -30px;
402 |   z-index: 1;
403 | }
404 | 
405 | /* 7. 赛博朋克风格 (PUNK) */
406 | .cyberpunk {
407 |   background-color: #0a0e17;
408 |   color: #f0f0f0;
409 |   padding: 2rem;
410 |   position: relative;
411 |   overflow: hidden;
412 | }
413 | 
414 | .cyberpunk::before {
415 |   content: "";
416 |   position: absolute;
417 |   top: 0;
418 |   left: 0;
419 |   width: 100%;
420 |   height: 100%;
421 |   background: linear-gradient(45deg, rgba(255, 0, 128, 0.1) 0%, rgba(0, 255, 255, 0.1) 100%);
422 |   z-index: 0;
423 | }
424 | 
425 | .cyberpunk .quote {
426 |   font-size: 1.6rem;
427 |   line-height: 1.4;
428 |   color: #f0f0f0;
429 |   text-shadow: 0 0 5px rgba(0, 255, 255, 0.7);
430 |   position: relative;
431 |   z-index: 1;
432 | }
433 | 
434 | .cyberpunk .context {
435 |   font-size: 0.8rem;
436 |   color: #00ffff;
437 |   font-weight: 400;
438 |   position: relative;
439 |   z-index: 1;
440 | }
441 | 
442 | .cyberpunk .glitch {
443 |   position: absolute;
444 |   top: 0;
445 |   left: 0;
446 |   width: 100%;
447 |   height: 100%;
448 |   background: repeating-linear-gradient(
449 |       0deg,
450 |       rgba(0, 0, 0, 0.15),
451 |       rgba(0, 0, 0, 0.15) 1px,
452 |       transparent 1px,
453 |       transparent 2px
454 |   );
455 |   pointer-events: none;
456 |   z-index: 2;
457 | }
458 | 
459 | .cyberpunk .highlight {
460 |   color: #ff00a0;
461 | }
462 | 
463 | /* 8. 新未来主义 (JPNM) */
464 | .neo-futurism {
465 |   background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%);
466 |   color: white;
467 |   padding: 2.5rem;
468 |   position: relative;
469 |   overflow: hidden;
470 | }
471 | 
472 | .neo-futurism .quote {
473 |   font-size: 1.6rem;
474 |   line-height: 1.4;
475 |   position: relative;
476 |   z-index: 2;
477 |   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
478 | }
479 | 
480 | .neo-futurism .context {
481 |   font-size: 0.9rem;
482 |   color: #00ccff;
483 |   position: relative;
484 |   z-index: 2;
485 | }
486 | 
487 | .neo-futurism .curve {
488 |   position: absolute;
489 |   width: 300px;
490 |   height: 300px;
491 |   border: 2px solid rgba(255, 255, 255, 0.1);
492 |   border-radius: 50%;
493 |   top: -150px;
494 |   right: -150px;
495 |   z-index: 1;
496 | }
497 | 
498 | .neo-futurism .curve-2 {
499 |   position: absolute;
500 |   width: 200px;
501 |   height: 200px;
502 |   border: 2px solid rgba(0, 204, 255, 0.1);
503 |   border-radius: 50%;
504 |   bottom: -100px;
505 |   left: -100px;
506 |   z-index: 1;
507 | }
508 | 
509 | .neo-futurism .line {
510 |   position: absolute;
511 |   width: 100px;
512 |   height: 2px;
513 |   background: linear-gradient(90deg, transparent, rgba(0, 204, 255, 0.5));
514 |   top: 50%;
515 |   right: 0;
516 |   z-index: 1;
517 | }
518 | 
519 | /* 9. 英伦摇滚风格 (BRIT) */
520 | .british-rock {
521 |   background-color: #f5f5f5;
522 |   color: #333;
523 |   padding: 2rem;
524 |   position: relative;
525 |   overflow: hidden;
526 | }
527 | 
528 | .british-rock::before {
529 |   content: "";
530 |   position: absolute;
531 |   top: 0;
532 |   left: 0;
533 |   width: 100%;
534 |   height: 100%;
535 |   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="%23ccc" stroke-width="0.5"/></svg>');
536 |   opacity: 0.2;
537 | }
538 | 
539 | .british-rock .quote {
540 |   font-family: 'Noto Serif SC', serif;
541 |   font-size: 1.6rem;
542 |   line-height: 1.4;
543 |   position: relative;
544 |   z-index: 1;
545 |   color: #333;
546 | }
547 | 
548 | .british-rock .context {
549 |   font-size: 0.8rem;
550 |   color: #666;
551 |   font-style: italic;
552 |   position: relative;
553 |   z-index: 1;
554 | }
555 | 
556 | .british-rock .flag {
557 |   position: absolute;
558 |   width: 100px;
559 |   height: 50px;
560 |   background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 139, 0.1) 40%, rgba(0, 0, 139, 0.1) 60%, transparent 60%),
561 |               linear-gradient(to right, transparent 35%, rgba(255, 0, 0, 0.1) 35%, rgba(255, 0, 0, 0.1) 65%, transparent 65%);
562 |   top: 20px;
563 |   right: 20px;
564 |   opacity: 0.5;
565 |   z-index: 0;
566 | }
567 | 
568 | /* 响应式设计 */
569 | @media (max-width: 768px) {
570 |   .card-container {
571 |     grid-template-columns: 1fr !important;
572 |     padding: 1rem;
573 |   }
574 |   
575 |   .card .quote {
576 |     font-size: 1.2rem !important;
577 |   }
578 |   
579 |   .card .context {
580 |     font-size: 0.7rem !important;
581 |   }
582 |   
583 |   .card {
584 |     padding: 1.5rem !important;
585 |   }
586 | }
587 | 


--------------------------------------------------------------------------------
/public/css/style.css:
--------------------------------------------------------------------------------
   1 | /* Base Styles */
   2 | * {
   3 |   box-sizing: border-box;
   4 |   margin: 0;
   5 |   padding: 0;
   6 | }
   7 | 
   8 | body {
   9 |   font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  10 |   line-height: 1.6;
  11 |   color: #292929;
  12 |   background-color: #fff;
  13 |   min-height: 100vh;
  14 |   display: flex;
  15 |   flex-direction: column;
  16 |   -webkit-font-smoothing: antialiased;
  17 |   -moz-osx-font-smoothing: grayscale;
  18 | }
  19 | 
  20 | a {
  21 |   color: #1a8917;
  22 |   text-decoration: none;
  23 |   transition: color 0.2s ease;
  24 | }
  25 | 
  26 | a:hover {
  27 |   color: #0f730c;
  28 |   text-decoration: underline;
  29 | }
  30 | 
  31 | .container {
  32 |   max-width: 1200px;
  33 |   margin: 0 auto;
  34 |   padding: 0 24px;
  35 |   width: 100%;
  36 | }
  37 | 
  38 | /* Header Styles */
  39 | .site-header {
  40 |   border-bottom: 1px solid rgba(230, 230, 230, 1);
  41 |   background-color: #fff;
  42 |   position: sticky;
  43 |   top: 0;
  44 |   z-index: 100;
  45 | }
  46 | 
  47 | .header-container {
  48 |   display: flex;
  49 |   justify-content: space-between;
  50 |   align-items: center;
  51 |   height: 65px;
  52 |   max-width: 1200px;
  53 |   margin: 0 auto;
  54 |   padding: 0 24px;
  55 | }
  56 | 
  57 | .logo {
  58 |   display: flex;
  59 |   align-items: center;
  60 |   gap: 12px;
  61 | }
  62 | 
  63 | .logo-image {
  64 |   width: 32px;
  65 |   height: 32px;
  66 |   border-radius: 6px;
  67 | }
  68 | 
  69 | .logo h1 {
  70 |   font-size: 1.8rem;
  71 |   font-weight: 700;
  72 |   color: #000;
  73 |   margin: 0;
  74 | }
  75 | 
  76 | .main-nav {
  77 |   display: flex;
  78 |   gap: 24px;
  79 | }
  80 | 
  81 | .nav-item {
  82 |   color: #757575;
  83 |   font-size: 1rem;
  84 |   font-weight: 500;
  85 |   padding: 8px 0;
  86 |   position: relative;
  87 | }
  88 | 
  89 | .nav-item.active {
  90 |   color: #000;
  91 | }
  92 | 
  93 | .nav-item.active:after {
  94 |   content: '';
  95 |   position: absolute;
  96 |   bottom: 0;
  97 |   left: 0;
  98 |   width: 100%;
  99 |   height: 2px;
 100 |   background-color: #000;
 101 | }
 102 | 
 103 | /* Hero Section */
 104 | .hero-section {
 105 |   background-color: #fafafa;
 106 |   padding: 80px 0;
 107 |   text-align: center;
 108 |   border-bottom: 1px solid rgba(230, 230, 230, 1);
 109 | }
 110 | 
 111 | .hero-content {
 112 |   max-width: 700px;
 113 |   margin: 0 auto;
 114 |   padding: 0 24px;
 115 | }
 116 | 
 117 | .hero-title {
 118 |   font-size: 3rem;
 119 |   font-weight: 700;
 120 |   color: #000;
 121 |   margin-bottom: 24px;
 122 |   line-height: 1.2;
 123 | }
 124 | 
 125 | .hero-subtitle {
 126 |   font-size: 1.25rem;
 127 |   color: #757575;
 128 |   max-width: 600px;
 129 |   margin: 0 auto;
 130 |   line-height: 1.5;
 131 | }
 132 | 
 133 | /* Main Content Layout */
 134 | .main-content {
 135 |   flex: 1;
 136 | }
 137 | 
 138 | .two-column-layout {
 139 |   display: grid;
 140 |   grid-template-columns: 1fr 320px;
 141 |   gap: 40px;
 142 |   margin: 40px 0;
 143 | }
 144 | 
 145 | @media (max-width: 900px) {
 146 |   .two-column-layout {
 147 |     grid-template-columns: 1fr;
 148 |   }
 149 | }
 150 | 
 151 | /* Content Column */
 152 | .content-column {
 153 |   display: flex;
 154 |   flex-direction: column;
 155 |   gap: 40px;
 156 | }
 157 | 
 158 | /* Form Styles */
 159 | .theme-form {
 160 |   background-color: #fff;
 161 |   border-radius: 4px;
 162 |   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
 163 |   border: 1px solid rgba(230, 230, 230, 1);
 164 |   padding: 24px;
 165 | }
 166 | 
 167 | .form-header {
 168 |   display: flex;
 169 |   justify-content: space-between;
 170 |   align-items: center;
 171 |   margin-bottom: 16px;
 172 | }
 173 | 
 174 | .form-header h3 {
 175 |   font-size: 1.25rem;
 176 |   font-weight: 600;
 177 |   color: #000;
 178 | }
 179 | 
 180 | .quick-tags {
 181 |   display: flex;
 182 |   flex-wrap: wrap;
 183 |   gap: 8px;
 184 | }
 185 | 
 186 | .tag {
 187 |   display: inline-block;
 188 |   padding: 4px 12px;
 189 |   background-color: #f9f9f9;
 190 |   border: 1px solid #e6e6e6;
 191 |   border-radius: 100px;
 192 |   color: #757575;
 193 |   font-size: 0.875rem;
 194 |   cursor: pointer;
 195 |   transition: all 0.2s ease;
 196 | }
 197 | 
 198 | .tag:hover {
 199 |   background-color: #f0f0f0;
 200 |   color: #000;
 201 | }
 202 | 
 203 | .textarea-container {
 204 |   margin-bottom: 20px;
 205 | }
 206 | 
 207 | textarea#theme-input {
 208 |   width: 100%;
 209 |   padding: 16px;
 210 |   border: 1px solid #e6e6e6;
 211 |   border-radius: 4px;
 212 |   font-size: 1rem;
 213 |   line-height: 1.5;
 214 |   outline: none;
 215 |   transition: all 0.2s ease;
 216 |   resize: vertical;
 217 |   min-height: 180px;
 218 |   font-family: inherit;
 219 |   background: transparent;
 220 |   color: #292929;
 221 | }
 222 | 
 223 | textarea#theme-input:focus {
 224 |   border-color: #1a8917;
 225 |   box-shadow: 0 0 0 1px rgba(26, 137, 23, 0.2);
 226 | }
 227 | 
 228 | .form-actions {
 229 |   display: flex;
 230 |   justify-content: space-between;
 231 |   align-items: center;
 232 | }
 233 | 
 234 | /* 表单内容处理模式分段控制器 */
 235 | .mode-selector {
 236 |   display: flex;
 237 |   background-color: #f0f2f5;
 238 |   border-radius: 8px;
 239 |   padding: 3px;
 240 |   margin-right: 15px;
 241 |   width: 100%;
 242 |   max-width: 250px;
 243 |   position: relative;
 244 |   overflow: hidden;
 245 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 246 | }
 247 | 
 248 | .mode-option {
 249 |   flex: 1;
 250 |   text-align: center;
 251 |   padding: 8px 0;
 252 |   cursor: pointer;
 253 |   position: relative;
 254 |   z-index: 1;
 255 |   font-size: 14px;
 256 |   font-weight: 500;
 257 |   color: #666;
 258 |   transition: color 0.3s ease;
 259 |   border-radius: 6px;
 260 | }
 261 | 
 262 | .mode-option.active {
 263 |   color: #fff;
 264 | }
 265 | 
 266 | .mode-slider {
 267 |   position: absolute;
 268 |   top: 3px;
 269 |   left: 0;
 270 |   bottom: 3px;
 271 |   width: 50%;
 272 |   background-color: #1a8917;
 273 |   border-radius: 6px;
 274 |   transition: transform 0.3s ease;
 275 |   z-index: 0;
 276 |   box-shadow: 0 2px 4px rgba(26, 137, 23, 0.3);
 277 | }
 278 | 
 279 | .mode-slider.position-0 {
 280 |   transform: translateX(0);
 281 | }
 282 | 
 283 | .mode-slider.position-1 {
 284 |   transform: translateX(100%);
 285 | }
 286 | 
 287 | /* 隐藏原始的单选按钮 */
 288 | .mode-option input[type="radio"] {
 289 |   position: absolute;
 290 |   opacity: 0;
 291 |   width: 0;
 292 |   height: 0;
 293 | }
 294 | 
 295 | /* 保留原有的单选按钮样式，以便向后兼容 */
 296 | .radio-container {
 297 |   display: flex;
 298 |   flex-direction: column;
 299 |   cursor: pointer;
 300 | }
 301 | 
 302 | .radio-label {
 303 |   font-weight: 500;
 304 |   margin-bottom: 2px;
 305 |   font-size: 0.875rem;
 306 | }
 307 | 
 308 | .radio-hint {
 309 |   font-size: 0.75rem;
 310 |   color: #757575;
 311 | }
 312 | 
 313 | .submit-btn {
 314 |   background-color: #1a8917;
 315 |   color: white;
 316 |   border: none;
 317 |   border-radius: 100px;
 318 |   padding: 10px 24px;
 319 |   font-size: 1rem;
 320 |   font-weight: 500;
 321 |   cursor: pointer;
 322 |   display: flex;
 323 |   align-items: center;
 324 |   gap: 8px;
 325 |   transition: background-color 0.2s ease;
 326 | }
 327 | 
 328 | .submit-btn:hover {
 329 |   background-color: #0f730c;
 330 | }
 331 | 
 332 | /* Loading Animation */
 333 | .loading {
 334 |   text-align: center;
 335 |   padding: 40px 0;
 336 | }
 337 | 
 338 | .spinner {
 339 |   border: 4px solid rgba(0, 0, 0, 0.1);
 340 |   border-radius: 50%;
 341 |   border-top: 4px solid #1a8917;
 342 |   width: 50px;
 343 |   height: 50px;
 344 |   animation: spin 1s linear infinite;
 345 |   margin: 0 auto 20px;
 346 | }
 347 | 
 348 | @keyframes spin {
 349 |   0% { transform: rotate(0deg); }
 350 |   100% { transform: rotate(360deg); }
 351 | }
 352 | 
 353 | /* Card Examples */
 354 | .card-examples {
 355 |   background-color: #fff;
 356 |   border-radius: 4px;
 357 |   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
 358 |   border: 1px solid rgba(230, 230, 230, 1);
 359 |   padding: 24px;
 360 | }
 361 | 
 362 | .card-examples h3 {
 363 |   font-size: 1.25rem;
 364 |   font-weight: 600;
 365 |   color: #000;
 366 |   margin-bottom: 16px;
 367 | }
 368 | 
 369 | .example-cards {
 370 |   display: grid;
 371 |   grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
 372 |   gap: 24px;
 373 | }
 374 | 
 375 | .example-card {
 376 |   border-radius: 4px;
 377 |   overflow: hidden;
 378 |   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
 379 |   transition: transform 0.2s ease, box-shadow 0.2s ease;
 380 | }
 381 | 
 382 | .example-card:hover {
 383 |   transform: translateY(-4px);
 384 |   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 385 | }
 386 | 
 387 | .card-preview {
 388 |   padding: 24px;
 389 |   min-height: 180px;
 390 |   display: flex;
 391 |   align-items: center;
 392 |   justify-content: center;
 393 | }
 394 | 
 395 | .card-preview blockquote {
 396 |   font-size: 1.1rem;
 397 |   line-height: 1.5;
 398 |   color: #292929;
 399 |   font-weight: 500;
 400 |   margin: 0;
 401 |   text-align: center;
 402 | }
 403 | 
 404 | .card-meta {
 405 |   display: flex;
 406 |   justify-content: space-between;
 407 |   padding: 12px 16px;
 408 |   background-color: #fff;
 409 |   border-top: 1px solid rgba(230, 230, 230, 1);
 410 | }
 411 | 
 412 | .card-theme, .card-style {
 413 |   font-size: 0.75rem;
 414 |   color: #757575;
 415 | }
 416 | 
 417 | /* Settings Column */
 418 | .settings-column {
 419 |   position: sticky;
 420 |   top: 85px;
 421 |   align-self: flex-start;
 422 | }
 423 | 
 424 | .settings-card {
 425 |   background-color: #fff;
 426 |   border-radius: 4px;
 427 |   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
 428 |   border: 1px solid rgba(230, 230, 230, 1);
 429 | }
 430 | 
 431 | .settings-header {
 432 |   display: flex;
 433 |   justify-content: space-between;
 434 |   align-items: center;
 435 |   padding: 16px 24px;
 436 |   border-bottom: 1px solid rgba(230, 230, 230, 1);
 437 | }
 438 | 
 439 | .settings-header h3 {
 440 |   font-size: 1.25rem;
 441 |   font-weight: 600;
 442 |   color: #000;
 443 |   margin: 0;
 444 | }
 445 | 
 446 | .reset-btn {
 447 |   background: none;
 448 |   border: none;
 449 |   color: #757575;
 450 |   cursor: pointer;
 451 |   font-size: 0.875rem;
 452 |   display: flex;
 453 |   align-items: center;
 454 |   gap: 4px;
 455 | }
 456 | 
 457 | .reset-btn:hover {
 458 |   color: #1a8917;
 459 | }
 460 | 
 461 | /* Settings Sections */
 462 | .settings-section {
 463 |   padding: 24px;
 464 |   border-bottom: 1px solid rgba(230, 230, 230, 1);
 465 | }
 466 | 
 467 | .settings-section:last-child {
 468 |   border-bottom: none;
 469 | }
 470 | 
 471 | .settings-section h4 {
 472 |   font-size: 1rem;
 473 |   font-weight: 600;
 474 |   color: #292929;
 475 |   margin-bottom: 16px;
 476 | }
 477 | 
 478 | .settings-grid {
 479 |   display: grid;
 480 |   grid-template-columns: 1fr;
 481 |   gap: 16px;
 482 | }
 483 | 
 484 | /* Setting Items */
 485 | .setting-item {
 486 |   display: flex;
 487 |   flex-direction: column;
 488 |   gap: 8px;
 489 |   margin-bottom: 16px;
 490 | }
 491 | 
 492 | .setting-item:last-child {
 493 |   margin-bottom: 0;
 494 | }
 495 | 
 496 | .setting-item label {
 497 |   font-size: 0.875rem;
 498 |   font-weight: 500;
 499 |   color: #292929;
 500 | }
 501 | 
 502 | .setting-hint {
 503 |   font-size: 0.75rem;
 504 |   color: #757575;
 505 |   margin-top: 4px;
 506 | }
 507 | 
 508 | /* Number Input Styles */
 509 | .number-input {
 510 |   display: flex;
 511 |   align-items: center;
 512 |   border: 1px solid #e6e6e6;
 513 |   border-radius: 4px;
 514 |   overflow: hidden;
 515 |   width: 100%;
 516 | }
 517 | 
 518 | .number-input button {
 519 |   width: 32px;
 520 |   height: 32px;
 521 |   background-color: #f9f9f9;
 522 |   border: none;
 523 |   color: #292929;
 524 |   font-size: 1rem;
 525 |   cursor: pointer;
 526 |   display: flex;
 527 |   align-items: center;
 528 |   justify-content: center;
 529 | }
 530 | 
 531 | .number-input button:hover {
 532 |   background-color: #f0f0f0;
 533 | }
 534 | 
 535 | .number-input input {
 536 |   width: 100%;
 537 |   padding: 8px 4px;
 538 |   border: none;
 539 |   text-align: center;
 540 |   font-size: 0.875rem;
 541 |   color: #292929;
 542 |   appearance: textfield;
 543 |   -moz-appearance: textfield;
 544 | }
 545 | 
 546 | .number-input input::-webkit-outer-spin-button,
 547 | .number-input input::-webkit-inner-spin-button {
 548 |   -webkit-appearance: none;
 549 |   margin: 0;
 550 | }
 551 | 
 552 | /* Select Styles */
 553 | .select-input {
 554 |   width: 100%;
 555 |   padding: 8px 12px;
 556 |   border: 1px solid #e6e6e6;
 557 |   border-radius: 4px;
 558 |   font-size: 0.875rem;
 559 |   color: #292929;
 560 |   background-color: white;
 561 |   cursor: pointer;
 562 |   -webkit-appearance: none;
 563 |   -moz-appearance: none;
 564 |   appearance: none;
 565 |   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23292929' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
 566 |   background-repeat: no-repeat;
 567 |   background-position: right 12px center;
 568 |   padding-right: 30px;
 569 | }
 570 | 
 571 | .select-input:focus {
 572 |   border-color: #1a8917;
 573 |   outline: none;
 574 |   box-shadow: 0 0 0 1px rgba(26, 137, 23, 0.2);
 575 | }
 576 | 
 577 | /* Style Options */
 578 | .style-options {
 579 |   display: flex;
 580 |   flex-direction: row;
 581 |   gap: 15px;
 582 |   flex-wrap: wrap;
 583 |   align-items: center;
 584 |   margin-bottom: 15px;
 585 | }
 586 | 
 587 | /* 风格选择器 - 分段控制器样式 */
 588 | .style-mode-selector {
 589 |   display: flex;
 590 |   background-color: #f0f2f5;
 591 |   border-radius: 8px;
 592 |   padding: 3px;
 593 |   margin: 10px 0 15px 0;
 594 |   width: 100%;
 595 |   max-width: 300px;
 596 |   position: relative;
 597 |   overflow: hidden;
 598 |   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 599 | }
 600 | 
 601 | .style-mode-option {
 602 |   flex: 1;
 603 |   text-align: center;
 604 |   padding: 8px 0;
 605 |   cursor: pointer;
 606 |   position: relative;
 607 |   z-index: 1;
 608 |   font-size: 14px;
 609 |   font-weight: 500;
 610 |   color: #666;
 611 |   transition: color 0.3s ease;
 612 |   border-radius: 6px;
 613 | }
 614 | 
 615 | .style-mode-option.active {
 616 |   color: #fff;
 617 | }
 618 | 
 619 | .style-mode-slider {
 620 |   position: absolute;
 621 |   top: 3px;
 622 |   left: 0;
 623 |   bottom: 3px;
 624 |   width: 33.333%;
 625 |   background-color: #1a8917;
 626 |   border-radius: 6px;
 627 |   transition: transform 0.3s ease;
 628 |   z-index: 0;
 629 |   box-shadow: 0 2px 4px rgba(26, 137, 23, 0.3);
 630 | }
 631 | 
 632 | .style-mode-slider.position-0 {
 633 |   transform: translateX(0);
 634 | }
 635 | 
 636 | .style-mode-slider.position-1 {
 637 |   transform: translateX(100%);
 638 | }
 639 | 
 640 | .style-mode-slider.position-2 {
 641 |   transform: translateX(200%);
 642 | }
 643 | 
 644 | /* 隐藏原始的单选按钮 */
 645 | .style-mode-option input[type="radio"] {
 646 |   position: absolute;
 647 |   opacity: 0;
 648 |   width: 0;
 649 |   height: 0;
 650 | }
 651 | 
 652 | .mode-options {
 653 |   display: flex;
 654 |   flex-direction: column;
 655 |   gap: 12px;
 656 | }
 657 | 
 658 | /* 选项卡样式 */
 659 | .settings-tabs {
 660 |   display: flex;
 661 |   border-bottom: 1px solid #ddd;
 662 |   margin-bottom: 20px;
 663 | }
 664 | 
 665 | .tab-btn {
 666 |   padding: 10px 15px;
 667 |   background-color: transparent;
 668 |   border: none;
 669 |   border-bottom: 3px solid transparent;
 670 |   cursor: pointer;
 671 |   font-weight: 500;
 672 |   color: #666;
 673 |   transition: all 0.2s ease;
 674 |   flex: 1;
 675 |   text-align: center;
 676 | }
 677 | 
 678 | .tab-btn:hover {
 679 |   color: #1a8917;
 680 |   background-color: rgba(26, 137, 23, 0.05);
 681 | }
 682 | 
 683 | .tab-btn.active {
 684 |   color: #1a8917;
 685 |   border-bottom-color: #1a8917;
 686 |   background-color: rgba(26, 137, 23, 0.05);
 687 | }
 688 | 
 689 | .tab-content {
 690 |   display: none;
 691 | }
 692 | 
 693 | .tab-content.active {
 694 |   display: block;
 695 | }
 696 | 
 697 | /* 保留原有的其他设置样式，以便向后兼容 */
 698 | .other-settings-container {
 699 |   margin-top: 20px;
 700 | }
 701 | 
 702 | .other-settings-btn {
 703 |   background-color: #f8f9fa;
 704 |   color: #333;
 705 |   border: 1px solid #ddd;
 706 |   padding: 8px 16px;
 707 |   border-radius: 4px;
 708 |   cursor: pointer;
 709 |   font-weight: 500;
 710 |   transition: all 0.2s ease;
 711 |   width: 100%;
 712 |   text-align: left;
 713 | }
 714 | 
 715 | .other-settings-btn:hover {
 716 |   background-color: #e9ecef;
 717 | }
 718 | 
 719 | .other-settings-panel {
 720 |   margin-top: 15px;
 721 |   border: 1px solid #ddd;
 722 |   border-radius: 4px;
 723 |   padding: 15px;
 724 |   background-color: #f8f9fa;
 725 | }
 726 | 
 727 | .other-settings-panel.hidden {
 728 |   display: none;
 729 | }
 730 | 
 731 | .style-selection {
 732 |   margin-top: 16px;
 733 | }
 734 | 
 735 | .style-selector {
 736 |   margin-top: 16px;
 737 |   max-height: 300px;
 738 |   overflow-y: auto;
 739 | }
 740 | 
 741 | .style-selector.hidden {
 742 |   display: none;
 743 | }
 744 | 
 745 | .style-grid {
 746 |   display: grid;
 747 |   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
 748 |   gap: 12px;
 749 | }
 750 | 
 751 | /* 模态框样式 */
 752 | .modal {
 753 |   display: none;
 754 |   position: fixed;
 755 |   z-index: 1000;
 756 |   left: 0;
 757 |   top: 0;
 758 |   width: 100%;
 759 |   height: 100%;
 760 |   overflow: auto;
 761 |   background-color: rgba(0, 0, 0, 0.5);
 762 |   backdrop-filter: blur(3px);
 763 | }
 764 | 
 765 | .modal-content {
 766 |   background-color: #fff;
 767 |   margin: 10% auto;
 768 |   padding: 30px;
 769 |   border-radius: 8px;
 770 |   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 771 |   width: 90%;
 772 |   max-width: 400px;
 773 |   text-align: center;
 774 |   position: relative;
 775 |   animation: modalFadeIn 0.3s ease;
 776 | }
 777 | 
 778 | @keyframes modalFadeIn {
 779 |   from {opacity: 0; transform: translateY(-20px);}
 780 |   to {opacity: 1; transform: translateY(0);}
 781 | }
 782 | 
 783 | .close-modal {
 784 |   position: absolute;
 785 |   top: 15px;
 786 |   right: 20px;
 787 |   color: #aaa;
 788 |   font-size: 28px;
 789 |   font-weight: bold;
 790 |   cursor: pointer;
 791 |   transition: color 0.2s ease;
 792 | }
 793 | 
 794 | .close-modal:hover {
 795 |   color: #333;
 796 | }
 797 | 
 798 | .modal-content h3 {
 799 |   margin-bottom: 15px;
 800 |   color: #333;
 801 |   font-size: 1.5rem;
 802 | }
 803 | 
 804 | .modal-content p {
 805 |   margin-bottom: 20px;
 806 |   color: #666;
 807 | }
 808 | 
 809 | .qrcode-container {
 810 |   margin: 20px auto;
 811 |   max-width: 240px;
 812 | }
 813 | 
 814 | .donation-qrcode {
 815 |   width: 100%;
 816 |   height: auto;
 817 |   border-radius: 4px;
 818 |   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 819 | }
 820 | 
 821 | /* Footer Styles */
 822 | .site-footer {
 823 |   background-color: #fafafa;
 824 |   border-top: 1px solid rgba(230, 230, 230, 1);
 825 |   padding: 20px 0 0;
 826 |   margin-top: 60px;
 827 | }
 828 | 
 829 | .footer-container {
 830 |   max-width: 1200px;
 831 |   margin: 0 auto;
 832 |   padding: 0 24px;
 833 | }
 834 | 
 835 | .footer-content {
 836 |   display: flex;
 837 |   justify-content: space-between;
 838 |   margin-bottom: 40px;
 839 | }
 840 | 
 841 | @media (max-width: 768px) {
 842 |   .footer-content {
 843 |     flex-direction: column;
 844 |     gap: 32px;
 845 |   }
 846 | }
 847 | 
 848 | /* Footer Content */
 849 | .footer-logo h2 {
 850 |   font-size: 1.5rem;
 851 |   font-weight: 700;
 852 |   color: #000;
 853 |   margin-bottom: 8px;
 854 | }
 855 | 
 856 | .footer-logo p {
 857 |   color: #757575;
 858 |   font-size: 0.875rem;
 859 | }
 860 | 
 861 | .footer-links {
 862 |   display: flex;
 863 |   gap: 60px;
 864 | }
 865 | 
 866 | @media (max-width: 768px) {
 867 |   .footer-links {
 868 |     flex-wrap: wrap;
 869 |     gap: 40px;
 870 |   }
 871 | }
 872 | 
 873 | .footer-column h4 {
 874 |   font-size: 1rem;
 875 |   font-weight: 600;
 876 |   color: #000;
 877 |   margin-bottom: 16px;
 878 | }
 879 | 
 880 | .footer-column {
 881 |   display: flex;
 882 |   flex-direction: column;
 883 |   gap: 8px;
 884 | }
 885 | 
 886 | .footer-column a {
 887 |   color: #757575;
 888 |   font-size: 0.875rem;
 889 |   transition: color 0.2s ease;
 890 | }
 891 | 
 892 | .footer-column a:hover {
 893 |   color: #1a8917;
 894 | }
 895 | 
 896 | .footer-bottom {
 897 |   padding: 0px 0 25px 0;
 898 |   text-align: center;
 899 | }
 900 | 
 901 | .footer-bottom p {
 902 |   color: #757575;
 903 |   font-size: 0.875rem;
 904 | }
 905 | 
 906 | /* Animation */
 907 | @keyframes fadeIn {
 908 |   from { opacity: 0; transform: translateY(-10px); }
 909 |   to { opacity: 1; transform: translateY(0); }
 910 | }
 911 | 
 912 | /* 卡片页面头部样式 */
 913 | .card-header {
 914 |   display: flex;
 915 |   justify-content: space-between;
 916 |   align-items: center;
 917 |   padding: 20px 0;
 918 |   position: relative;
 919 | }
 920 | 
 921 | .card-header h1 {
 922 |   font-size: 1.8rem;
 923 |   font-weight: 700;
 924 |   margin: 0;
 925 | }
 926 | 
 927 | .card-header .theme-title {
 928 |   font-size: 1rem;
 929 |   color: #757575;
 930 |   margin: 0;
 931 | }
 932 | 
 933 | .header-actions {
 934 |   position: absolute;
 935 |   right: 0;
 936 |   top: 20px;
 937 |   display: flex;
 938 |   gap: 12px;
 939 | }
 940 | 
 941 | .icon-btn {
 942 |   color: #555;
 943 |   font-size: 1.2rem;
 944 |   transition: color 0.2s ease;
 945 |   display: flex;
 946 |   align-items: center;
 947 |   justify-content: center;
 948 |   width: 36px;
 949 |   height: 36px;
 950 |   border-radius: 50%;
 951 |   background-color: #f5f5f5;
 952 | }
 953 | 
 954 | .icon-btn:hover {
 955 |   color: #1a8917;
 956 |   background-color: #e8f5e9;
 957 |   text-decoration: none;
 958 | }
 959 | 
 960 | @keyframes spin {
 961 |   0% { transform: rotate(0deg); }
 962 |   100% { transform: rotate(360deg); }
 963 | }
 964 | 
 965 | 
 966 | 
 967 | .style-options {
 968 |   display: flex;
 969 |   gap: 15px;
 970 |   margin-bottom: 15px;
 971 |   flex-wrap: wrap;
 972 | }
 973 | 
 974 | .radio-container {
 975 |   display: flex;
 976 |   align-items: center;
 977 |   gap: 6px;
 978 |   cursor: pointer;
 979 | }
 980 | 
 981 | .radio-label {
 982 |   font-size: 0.9rem;
 983 |   color: #2c3e50;
 984 | }
 985 | 
 986 | /* Style Selector Grid */
 987 | .style-selector {
 988 |   background-color: white;
 989 |   border: 1px solid #e0e0e0;
 990 |   border-radius: 8px;
 991 |   padding: 15px;
 992 |   max-height: 300px;
 993 |   overflow-y: auto;
 994 | }
 995 | 
 996 | .style-selector.hidden {
 997 |   display: none;
 998 | }
 999 | 
1000 | .style-grid {
1001 |   display: grid;
1002 |   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
1003 |   gap: 10px;
1004 | }
1005 | 
1006 | .style-card {
1007 |   border: 1px solid #e0e0e0;
1008 |   border-radius: 6px;
1009 |   padding: 10px;
1010 |   cursor: pointer;
1011 |   transition: all 0.2s ease;
1012 |   position: relative;
1013 | }
1014 | 
1015 | .style-card:hover {
1016 |   border-color: #3498db;
1017 |   background-color: #f8f9fa;
1018 | }
1019 | 
1020 | .style-card.selected {
1021 |   border-color: #3498db;
1022 |   background-color: #e1edf7;
1023 | }
1024 | 
1025 | .style-card.selected::after {
1026 |   content: '✓';
1027 |   position: absolute;
1028 |   top: 8px;
1029 |   right: 8px;
1030 |   color: #3498db;
1031 |   font-weight: bold;
1032 | }
1033 | 
1034 | .style-name {
1035 |   font-size: 0.9rem;
1036 |   font-weight: 500;
1037 |   color: #2c3e50;
1038 |   margin-bottom: 5px;
1039 | }
1040 | 
1041 | .style-code {
1042 |   font-size: 0.8rem;
1043 |   color: #7f8c8d;
1044 |   font-family: monospace;
1045 | }
1046 | 
1047 | /* Responsive Adjustments */
1048 | @media (max-width: 768px) {
1049 |   .card-generator {
1050 |     margin-top: 50px;
1051 |     padding: 30px 20px;
1052 |   }
1053 |   
1054 |   h1 {
1055 |     font-size: 2.5rem;
1056 |   }
1057 |   
1058 |   .settings-grid {
1059 |     grid-template-columns: 1fr;
1060 |   }
1061 |   
1062 |   .style-grid {
1063 |     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
1064 |   }
1065 |   
1066 |   .card-actions {
1067 |     flex-direction: column;
1068 |     align-items: center;
1069 |   }
1070 |   
1071 |   .action-btn {
1072 |     width: 100%;
1073 |     justify-content: center;
1074 |   }
1075 |   
1076 |   .toggle-btn {
1077 |     right: 50px;
1078 |     width: 50px;
1079 |   }
1080 | }
1081 | 


--------------------------------------------------------------------------------
/public/icon/android/play_store_512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/play_store_512.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-anydpi-v26/ic_launcher.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
3 |   <background android:drawable="@mipmap/ic_launcher_background"/>
4 |   <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
5 |   <monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
6 | </adaptive-icon>


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-hdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-hdpi/ic_launcher.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-hdpi/ic_launcher_background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-hdpi/ic_launcher_background.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-hdpi/ic_launcher_foreground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-hdpi/ic_launcher_foreground.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-hdpi/ic_launcher_monochrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-hdpi/ic_launcher_monochrome.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-mdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-mdpi/ic_launcher.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-mdpi/ic_launcher_background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-mdpi/ic_launcher_background.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-mdpi/ic_launcher_foreground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-mdpi/ic_launcher_foreground.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-mdpi/ic_launcher_monochrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-mdpi/ic_launcher_monochrome.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-xhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-xhdpi/ic_launcher.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-xhdpi/ic_launcher_background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-xhdpi/ic_launcher_background.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-xhdpi/ic_launcher_foreground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-xhdpi/ic_launcher_foreground.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-xhdpi/ic_launcher_monochrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-xhdpi/ic_launcher_monochrome.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-xxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-xxhdpi/ic_launcher.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-xxhdpi/ic_launcher_background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-xxhdpi/ic_launcher_background.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-xxhdpi/ic_launcher_foreground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-xxhdpi/ic_launcher_foreground.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-xxhdpi/ic_launcher_monochrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-xxhdpi/ic_launcher_monochrome.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-xxxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-xxxhdpi/ic_launcher.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-xxxhdpi/ic_launcher_background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-xxxhdpi/ic_launcher_background.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-xxxhdpi/ic_launcher_foreground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-xxxhdpi/ic_launcher_foreground.png


--------------------------------------------------------------------------------
/public/icon/android/res/mipmap-xxxhdpi/ic_launcher_monochrome.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/android/res/mipmap-xxxhdpi/ic_launcher_monochrome.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon-20@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon-20@2x.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon-20@2x~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon-20@2x~ipad.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon-20@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon-20@3x.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon-20~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon-20~ipad.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon-29.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon-29.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon-29@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon-29@2x.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon-29@2x~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon-29@2x~ipad.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon-29@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon-29@3x.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon-29~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon-29~ipad.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon-40@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon-40@2x.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon-40@2x~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon-40@2x~ipad.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon-40@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon-40@3x.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon-40~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon-40~ipad.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon-60@2x~car.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon-60@2x~car.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon-60@3x~car.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon-60@3x~car.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon-83.5@2x~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon-83.5@2x~ipad.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon@2x.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon@2x~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon@2x~ipad.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon@3x.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon~ios-marketing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon~ios-marketing.png


--------------------------------------------------------------------------------
/public/icon/ios/AppIcon~ipad.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/ios/AppIcon~ipad.png


--------------------------------------------------------------------------------
/public/icon/ios/Contents.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "images": [
  3 |     {
  4 |       "filename": "AppIcon@2x.png",
  5 |       "idiom": "iphone",
  6 |       "scale": "2x",
  7 |       "size": "60x60"
  8 |     },
  9 |     {
 10 |       "filename": "AppIcon@3x.png",
 11 |       "idiom": "iphone",
 12 |       "scale": "3x",
 13 |       "size": "60x60"
 14 |     },
 15 |     {
 16 |       "filename": "AppIcon~ipad.png",
 17 |       "idiom": "ipad",
 18 |       "scale": "1x",
 19 |       "size": "76x76"
 20 |     },
 21 |     {
 22 |       "filename": "AppIcon@2x~ipad.png",
 23 |       "idiom": "ipad",
 24 |       "scale": "2x",
 25 |       "size": "76x76"
 26 |     },
 27 |     {
 28 |       "filename": "AppIcon-83.5@2x~ipad.png",
 29 |       "idiom": "ipad",
 30 |       "scale": "2x",
 31 |       "size": "83.5x83.5"
 32 |     },
 33 |     {
 34 |       "filename": "AppIcon-40@2x.png",
 35 |       "idiom": "iphone",
 36 |       "scale": "2x",
 37 |       "size": "40x40"
 38 |     },
 39 |     {
 40 |       "filename": "AppIcon-40@3x.png",
 41 |       "idiom": "iphone",
 42 |       "scale": "3x",
 43 |       "size": "40x40"
 44 |     },
 45 |     {
 46 |       "filename": "AppIcon-40~ipad.png",
 47 |       "idiom": "ipad",
 48 |       "scale": "1x",
 49 |       "size": "40x40"
 50 |     },
 51 |     {
 52 |       "filename": "AppIcon-40@2x~ipad.png",
 53 |       "idiom": "ipad",
 54 |       "scale": "2x",
 55 |       "size": "40x40"
 56 |     },
 57 |     {
 58 |       "filename": "AppIcon-20@2x.png",
 59 |       "idiom": "iphone",
 60 |       "scale": "2x",
 61 |       "size": "20x20"
 62 |     },
 63 |     {
 64 |       "filename": "AppIcon-20@3x.png",
 65 |       "idiom": "iphone",
 66 |       "scale": "3x",
 67 |       "size": "20x20"
 68 |     },
 69 |     {
 70 |       "filename": "AppIcon-20~ipad.png",
 71 |       "idiom": "ipad",
 72 |       "scale": "1x",
 73 |       "size": "20x20"
 74 |     },
 75 |     {
 76 |       "filename": "AppIcon-20@2x~ipad.png",
 77 |       "idiom": "ipad",
 78 |       "scale": "2x",
 79 |       "size": "20x20"
 80 |     },
 81 |     {
 82 |       "filename": "AppIcon-29.png",
 83 |       "idiom": "iphone",
 84 |       "scale": "1x",
 85 |       "size": "29x29"
 86 |     },
 87 |     {
 88 |       "filename": "AppIcon-29@2x.png",
 89 |       "idiom": "iphone",
 90 |       "scale": "2x",
 91 |       "size": "29x29"
 92 |     },
 93 |     {
 94 |       "filename": "AppIcon-29@3x.png",
 95 |       "idiom": "iphone",
 96 |       "scale": "3x",
 97 |       "size": "29x29"
 98 |     },
 99 |     {
100 |       "filename": "AppIcon-29~ipad.png",
101 |       "idiom": "ipad",
102 |       "scale": "1x",
103 |       "size": "29x29"
104 |     },
105 |     {
106 |       "filename": "AppIcon-29@2x~ipad.png",
107 |       "idiom": "ipad",
108 |       "scale": "2x",
109 |       "size": "29x29"
110 |     },
111 |     {
112 |       "filename": "AppIcon-60@2x~car.png",
113 |       "idiom": "car",
114 |       "scale": "2x",
115 |       "size": "60x60"
116 |     },
117 |     {
118 |       "filename": "AppIcon-60@3x~car.png",
119 |       "idiom": "car",
120 |       "scale": "3x",
121 |       "size": "60x60"
122 |     },
123 |     {
124 |       "filename": "AppIcon~ios-marketing.png",
125 |       "idiom": "ios-marketing",
126 |       "scale": "1x",
127 |       "size": "1024x1024"
128 |     }
129 |   ],
130 |   "info": {
131 |     "author": "iconkitchen",
132 |     "version": 1
133 |   }
134 | }


--------------------------------------------------------------------------------
/public/icon/web/README.txt:
--------------------------------------------------------------------------------
 1 | Add this to your HTML <head>:
 2 | 
 3 |     <link rel="icon" href="/favicon.ico" sizes="any">
 4 |     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
 5 | 
 6 | Add this to your app's manifest.json:
 7 | 
 8 |     ...
 9 |     {
10 |       "icons": [
11 |         { "src": "/favicon.ico", "type": "image/x-icon", "sizes": "16x16 32x32" },
12 |         { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
13 |         { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
14 |         { "src": "/icon-192-maskable.png", "type": "image/png", "sizes": "192x192", "purpose": "maskable" },
15 |         { "src": "/icon-512-maskable.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
16 |       ]
17 |     }
18 |     ...
19 | 


--------------------------------------------------------------------------------
/public/icon/web/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/web/apple-touch-icon.png


--------------------------------------------------------------------------------
/public/icon/web/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/web/favicon.ico


--------------------------------------------------------------------------------
/public/icon/web/icon-192-maskable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/web/icon-192-maskable.png


--------------------------------------------------------------------------------
/public/icon/web/icon-192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/web/icon-192.png


--------------------------------------------------------------------------------
/public/icon/web/icon-512-maskable.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/web/icon-512-maskable.png


--------------------------------------------------------------------------------
/public/icon/web/icon-512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/icon/web/icon-512.png


--------------------------------------------------------------------------------
/public/img/donation_qrcode.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/joeseesun/cards-go/3e24204263d9be418aa5b77da32204b8234f4565/public/img/donation_qrcode.png


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="zh-CN">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |   <title>AI卡片生成器 CardsGo</title>
  7 |   
  8 |   <!-- 图标 -->
  9 |   <link rel="icon" href="/icon/web/favicon.ico" sizes="any">
 10 |   <link rel="icon" href="/icon/web/icon-192.png" type="image/png" sizes="192x192">
 11 |   <link rel="icon" href="/icon/web/icon-512.png" type="image/png" sizes="512x512">
 12 |   <link rel="apple-touch-icon" href="/icon/web/apple-touch-icon.png">
 13 |   
 14 |   <!-- PWA 支持 -->
 15 |   <link rel="manifest" href="/manifest.json">
 16 |   <meta name="theme-color" content="#ffffff">
 17 |   
 18 |   <!-- 样式表 -->
 19 |   <link rel="stylesheet" href="/css/style.css">
 20 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
 21 |   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap">
 22 | </head>
 23 | <body>
 24 |   <header class="site-header">
 25 |     <div class="header-container">
 26 |       <div class="logo">
 27 |         <h1>AI卡片生成器</h1>
 28 |       </div>
 29 |       <nav class="main-nav">
 30 |         <a href="#" class="nav-item active">首页</a>
 31 |         <a href="#" class="nav-item" id="donation-btn">打赏作者</a>
 32 |       </nav>
 33 |     </div>
 34 |   </header>
 35 | 
 36 |   <main class="main-content">
 37 |     <div class="hero-section">
 38 |       <div class="hero-content">
 39 |         <h2 class="hero-title">将文字转化为精美知识卡片</h2>
 40 |         <p class="hero-subtitle">提取金句，生成设计感强的知识卡片，让学习与分享更加直观</p>
 41 |       </div>
 42 |     </div>
 43 |     
 44 |     <div class="container">
 45 |       <div class="two-column-layout">
 46 |         <div class="content-column">
 47 |           <form id="theme-form" class="theme-form">
 48 |             <div class="form-header">
 49 |               <h3>输入内容</h3>
 50 |               <div class="quick-tags">
 51 |                 <span class="tag" data-theme="幸福">幸福</span>
 52 |                 <span class="tag" data-theme="成长">成长</span>
 53 |                 <span class="tag" data-theme="智慧">智慧</span>
 54 |                 <span class="tag" data-theme="爱情">爱情</span>
 55 |                 <span class="tag" data-theme="自由">自由</span>
 56 |               </div>
 57 |             </div>
 58 |             
 59 |             <div class="textarea-container">
 60 |               <textarea 
 61 |                 id="theme-input" 
 62 |                 placeholder="输入文章或主题词，AI提取金句创建卡片或指定文字生成" 
 63 |                 required
 64 |                 rows="8"
 65 |               ></textarea>
 66 |             </div>
 67 |             
 68 |             <div class="form-actions">
 69 |               <div class="mode-selector">
 70 |                 <div class="mode-slider position-0" id="content-mode-slider"></div>
 71 |                 <label class="mode-option active" data-position="0" onclick="switchContentMode(this, 'creative')">
 72 |                   <input type="radio" name="mode" value="creative" checked>
 73 |                   提取金句生成
 74 |                 </label>
 75 |                 <label class="mode-option" data-position="1" onclick="switchContentMode(this, 'literal')">
 76 |                   <input type="radio" name="mode" value="literal">
 77 |                   基于输入生成
 78 |                 </label>
 79 |               </div>
 80 |               
 81 |               <script>
 82 |                 // 直接在HTML中定义内容处理模式切换函数
 83 |                 function switchContentMode(option, mode) {
 84 |                   console.log('切换内容处理模式到:', mode);
 85 |                   
 86 |                   // 选中单选按钮
 87 |                   const radio = option.querySelector('input[type="radio"]');
 88 |                   if (radio) {
 89 |                     radio.checked = true;
 90 |                   }
 91 |                   
 92 |                   // 更新活动状态
 93 |                   document.querySelectorAll('.mode-option').forEach(opt => {
 94 |                     opt.classList.remove('active');
 95 |                   });
 96 |                   option.classList.add('active');
 97 |                   
 98 |                   // 移动滑块
 99 |                   const position = option.getAttribute('data-position');
100 |                   const slider = document.getElementById('content-mode-slider');
101 |                   if (slider) {
102 |                     slider.className = 'mode-slider position-' + position;
103 |                   }
104 |                   
105 |                   // 更新配置
106 |                   if (window.updateConfigFromInputs) {
107 |                     window.updateConfigFromInputs();
108 |                   }
109 |                 }
110 |               </script>
111 |               
112 |               <button type="submit" class="submit-btn">
113 |                 <i class="fas fa-wand-magic-sparkles"></i> 生成卡片
114 |               </button>
115 |             </div>
116 |         
117 |           </form>
118 |           
119 |     
120 |         </div>
121 |         
122 |         <div class="settings-column">
123 |           <div class="settings-card">
124 |             <div class="settings-header">
125 |               <h3>卡片设置</h3>
126 |               <button type="button" id="reset-defaults" class="reset-btn">
127 |                 <i class="fas fa-undo"></i> 重置默认值
128 |               </button>
129 |             </div>
130 |             
131 |             <div class="settings-tabs">
132 |               <button class="tab-btn active" data-tab="basic" onclick="switchTab('basic')">基本设置</button>
133 |               <button class="tab-btn" data-tab="style" onclick="switchTab('style')">风格设置</button>
134 |               <button class="tab-btn" data-tab="advanced" onclick="switchTab('advanced')">其他设置</button>
135 |             </div>
136 |             
137 |             <script>
138 |               // 直接在HTML中定义选项卡切换函数
139 |               function switchTab(tabName) {
140 |                 console.log('切换到选项卡:', tabName);
141 |                 
142 |                 // 移除所有标签的活动状态
143 |                 document.querySelectorAll('.tab-btn').forEach(btn => {
144 |                   btn.classList.remove('active');
145 |                 });
146 |                 document.querySelectorAll('.tab-content').forEach(content => {
147 |                   content.classList.remove('active');
148 |                 });
149 |                 
150 |                 // 添加当前标签的活动状态
151 |                 document.querySelector(`.tab-btn[data-tab="${tabName}"]`).classList.add('active');
152 |                 document.getElementById(`tab-${tabName}`).classList.add('active');
153 |                 
154 |                 // 如果是风格设置标签，确保风格选项已加载
155 |                 if (tabName === 'style' && window.styleGrid && window.styleGrid.children.length === 0) {
156 |                   window.loadDesignStyles && window.loadDesignStyles();
157 |                 }
158 |               }
159 |             </script>
160 |             
161 |             <div class="tab-content active" id="tab-basic">
162 |               <div class="settings-section">
163 |                 <div class="setting-item">
164 |                   <label for="quote-count">金句数量</label>
165 |                   <div class="number-input">
166 |                     <button type="button" class="decrement">-</button>
167 |                     <input type="number" id="quote-count" min="1" max="20" value="8">
168 |                     <button type="button" class="increment">+</button>
169 |                   </div>
170 |                 </div>
171 |                 
172 |                 <div class="setting-item">
173 |                   <label for="cards-per-row">每行卡片数</label>
174 |                   <div class="number-input">
175 |                     <button type="button" class="decrement">-</button>
176 |                     <input type="number" id="cards-per-row" min="1" max="4" value="2">
177 |                     <button type="button" class="increment">+</button>
178 |                   </div>
179 |                 </div>
180 |                 
181 |                 <div class="setting-item">
182 |                   <label for="aspect-ratio">卡片比例</label>
183 |                   <select id="aspect-ratio" class="select-input">
184 |                     <option value="16:9" selected>16:9 (宽屏)</option>
185 |                     <option value="4:3">4:3 (传统)</option>
186 |                     <option value="1:1">1:1 (正方形)</option>
187 |                     <option value="9:16">9:16 (竖屏)</option>
188 |                     <option value="3:4">3:4 (竖版传统)</option>
189 |                     <option value="2:1">2:1 (超宽)</option>
190 |                   </select>
191 |                 </div>
192 |                 
193 | 
194 |               </div>
195 |             </div>
196 |             
197 |             <div class="tab-content" id="tab-style">
198 |               <div class="settings-section">
199 |                 <div class="setting-item">
200 |         
201 |                   <div class="style-mode-selector">
202 |                     <div class="style-mode-slider position-0" id="style-mode-slider"></div>
203 |                     <label class="style-mode-option active" data-position="0" onclick="switchStyleMode(this, 'random')">
204 |                       <input type="radio" name="style-mode" value="random" checked>
205 |                       随机风格
206 |                     </label>
207 |                     <label class="style-mode-option" data-position="1" onclick="switchStyleMode(this, 'single')">
208 |                       <input type="radio" name="style-mode" value="single">
209 |                       单一风格
210 |                     </label>
211 |                     <label class="style-mode-option" data-position="2" onclick="switchStyleMode(this, 'multiple')">
212 |                       <input type="radio" name="style-mode" value="multiple">
213 |                       多种风格
214 |                     </label>
215 |                   </div>
216 |                   
217 |                   <script>
218 |                     // 直接在HTML中定义风格模式切换函数
219 |                     function switchStyleMode(option, mode) {
220 |                       console.log('切换风格模式到:', mode);
221 |                       
222 |                       // 选中单选按钮
223 |                       const radio = option.querySelector('input[type="radio"]');
224 |                       if (radio) {
225 |                         radio.checked = true;
226 |                       }
227 |                       
228 |                       // 更新活动状态
229 |                       document.querySelectorAll('.style-mode-option').forEach(opt => {
230 |                         opt.classList.remove('active');
231 |                       });
232 |                       option.classList.add('active');
233 |                       
234 |                       // 移动滑块
235 |                       const position = option.getAttribute('data-position');
236 |                       const slider = document.getElementById('style-mode-slider');
237 |                       if (slider) {
238 |                         slider.className = 'style-mode-slider position-' + position;
239 |                       }
240 |                       
241 |                       // 处理风格选择器的显示/隐藏
242 |                       const styleSelector = document.getElementById('style-selector');
243 |                       if (styleSelector) {
244 |                         if (mode === 'random') {
245 |                           styleSelector.classList.add('hidden');
246 |                           window.currentConfig.styleSelection = [];
247 |                         } else {
248 |                           // 确保风格选择器中有内容
249 |                           if (window.styleGrid && window.styleGrid.children.length === 0) {
250 |                             window.loadDesignStyles && window.loadDesignStyles();
251 |                           }
252 |                           
253 |                           styleSelector.classList.remove('hidden');
254 |                           // 切换模式时重置选择
255 |                           if (mode === 'single') {
256 |                             // 单一模式下，只允许一个选择
257 |                             document.querySelectorAll('.style-card.selected').forEach((card, index) => {
258 |                               if (index > 0) card.classList.remove('selected');
259 |                             });
260 |                             
261 |                             // 如果有多个选择，只保留第一个
262 |                             if (window.currentConfig && window.currentConfig.styleSelection && window.currentConfig.styleSelection.length > 1) {
263 |                               window.currentConfig.styleSelection = [window.currentConfig.styleSelection[0]];
264 |                             }
265 |                           }
266 |                         }
267 |                       }
268 |                       
269 |                       // 更新配置
270 |                       if (window.updateConfigFromInputs) {
271 |                         window.updateConfigFromInputs();
272 |                       }
273 |                     }
274 |                   </script>
275 |                   
276 |                   <div id="style-selector" class="style-selector hidden">
277 |                     <div class="style-grid" id="style-grid">
278 |                       <!-- 风格选项将通过JavaScript动态添加 -->
279 |                     </div>
280 |                   </div>
281 |                 </div>
282 |               </div>
283 |             </div>
284 |             
285 |             <div class="tab-content" id="tab-advanced">
286 |               <div class="settings-section">
287 |                 <!-- AI模型设置 -->
288 |                 <div class="setting-group">
289 |                   <h4 class="setting-group-title">AI模型设置</h4>
290 |                   
291 |                   <div class="setting-item">
292 |                     <label for="ai-provider">AI服务提供商</label>
293 |                     <select id="ai-provider" class="select-input" onchange="updateAIModels()">
294 |                       <option value="ark">ARK AI</option>
295 |                       <option value="tuzi" selected>兔子 AI</option>
296 |                     </select>
297 |                   </div>
298 |                   
299 |                   <div class="setting-item">
300 |                     <label for="ai-model">AI模型</label>
301 |                     <select id="ai-model" class="select-input">
302 |                       <!-- 模型选项将通过JavaScript动态添加 -->
303 |                     </select>
304 |                   </div>
305 |                   
306 |                   <script>
307 |                     // 直接在HTML中定义AI模型选择器初始化函数
308 |                     // 定义可用的模型列表
309 |                     const aiModels = {
310 |                       'ark': [
311 |                         { id: 'ep-20250330093147-r2gkz', name: 'ARK 默认模型' }
312 |                       ],
313 |                       'tuzi': [
314 |                         { id: 'claude-3-7-sonnet-20250219-o', name: 'Claude 3.7 Sonnet' },
315 |                         { id: 'claude-3-7-sonnet-thinking', name: 'Claude 3.7 Sonnet Thinking' },
316 |                         { id: 'claude-3-7-sonnet-20250219-fast', name: 'Claude 3.7 Sonnet Fast' },
317 |                         { id: 'deepseek-v3-0324', name: 'DeepSeek V3' },
318 |                         { id: 'gpt-4o-all', name: 'GPT-4 All' }
319 |                       ]
320 |                     };
321 |                     
322 |                     // 更新AI模型选项
323 |                     function updateAIModels() {
324 |                       const aiProviderSelect = document.getElementById('ai-provider');
325 |                       const aiModelSelect = document.getElementById('ai-model');
326 |                       
327 |                       if (!aiProviderSelect || !aiModelSelect) {
328 |                         console.error('找不到AI提供商或模型选择器');
329 |                         return;
330 |                       }
331 |                       
332 |                       const provider = aiProviderSelect.value;
333 |                       console.log('切换AI提供商到:', provider);
334 |                       
335 |                       // 清空当前选项
336 |                       aiModelSelect.innerHTML = '';
337 |                       
338 |                       // 添加新选项
339 |                       if (aiModels[provider]) {
340 |                         aiModels[provider].forEach(model => {
341 |                           const option = document.createElement('option');
342 |                           option.value = model.id;
343 |                           option.textContent = model.name;
344 |                           aiModelSelect.appendChild(option);
345 |                         });
346 |                       }
347 |                       
348 |                       // 更新配置
349 |                       if (window.updateConfigFromInputs) {
350 |                         window.updateConfigFromInputs();
351 |                       }
352 |                     }
353 |                     
354 |                     // 页面加载后初始化AI模型选择器
355 |                     document.addEventListener('DOMContentLoaded', function() {
356 |                       updateAIModels();
357 |                     });
358 |                   </script>
359 |                 </div>
360 |                 
361 |                 <!-- 内容设置 -->
362 |                 <div class="setting-group">
363 |                   <h4 class="setting-group-title">内容设置</h4>
364 |                   
365 |                   <div class="setting-item">
366 |                     <label for="max-quote-length">金句最大长度</label>
367 |                     <div class="number-input">
368 |                       <button type="button" class="decrement">-</button>
369 |                       <input type="number" id="max-quote-length" min="10" max="300" step="10" value="100">
370 |                       <button type="button" class="increment">+</button>
371 |                     </div>
372 |                   </div>
373 |                   
374 |                   <div class="setting-item">
375 |                     <label for="context-length">小字副标题长度</label>
376 |                     <div class="number-input">
377 |                       <button type="button" class="decrement">-</button>
378 |                       <input type="number" id="context-length" min="0" max="100" step="1" value="20">
379 |                       <button type="button" class="increment">+</button>
380 |                     </div>
381 |                     <small class="setting-hint">设置为0表示不添加小字副标题</small>
382 |                   </div>
383 |                 </div>
384 |                 
385 |                 <!-- 尺寸设置 -->
386 |                 <div class="setting-group">
387 |                   <h4 class="setting-group-title">尺寸设置</h4>
388 |                   
389 |                   <div class="setting-item">
390 |                     <label for="max-height">卡片最大高度(px)</label>
391 |                     <div class="number-input">
392 |                       <button type="button" class="decrement">-</button>
393 |                       <input type="number" id="max-height" value="380">
394 |                       <button type="button" class="increment">+</button>
395 |                     </div>
396 |                     <small class="setting-hint">设置为0表示不限制</small>
397 |                   </div>
398 |                   
399 |                   <div class="setting-item">
400 |                     <label for="min-height">卡片最小高度(px)</label>
401 |                     <div class="number-input">
402 |                       <button type="button" class="decrement">-</button>
403 |                       <input type="number" id="min-height" value="0" placeholder="不限制">
404 |                       <button type="button" class="increment">+</button>
405 |                     </div>
406 |                     <small class="setting-hint">设置为0表示不限制</small>
407 |                   </div>
408 |                 </div>
409 |               </div>
410 |             </div>
411 |             
412 | 
413 |           </div>
414 |         </div>
415 |       </div>
416 |     </div>
417 |   </main>
418 |   
419 |   <footer class="site-footer">
420 |    
421 |       <div class="footer-bottom">
422 |         <p>&copy; 2025 Cards-Go</p>
423 |       </div>
424 | 
425 |   </footer>
426 |   
427 |   <!-- 打赏模态框 -->
428 |   <div id="donation-modal" class="modal">
429 |     <div class="modal-content">
430 |       <span class="close-modal">&times;</span>
431 |       <h3>感谢你的打赏支持</h3>
432 |       <p>的每一笔打赏都是对我的认可和鼓励</p>
433 |       <div class="qrcode-container">
434 |         <img src="/img/donation_qrcode.png" alt="打赏二维码" class="donation-qrcode">
435 |       </div>
436 |     </div>
437 |   </div>
438 | 
439 |   <script src="/js/script.js"></script>
440 | </body>
441 | </html>
442 | 


--------------------------------------------------------------------------------
/public/js/card.js:
--------------------------------------------------------------------------------
  1 | document.addEventListener('DOMContentLoaded', () => {
  2 |   // Get DOM elements
  3 |   const themeDisplay = document.getElementById('theme-display');
  4 |   const loadingElement = document.getElementById('loading');
  5 |   const cardContainer = document.getElementById('card-container');
  6 |   const downloadBtn = document.getElementById('download-btn');
  7 |   const shareBtn = document.getElementById('share-btn');
  8 |   const regenerateBtn = document.getElementById('regenerate-btn');
  9 |   const dynamicStyles = document.getElementById('dynamic-styles');
 10 |   
 11 |   // 加载卡片样式 CSS
 12 |   loadCardStyles();
 13 |   
 14 |   /**
 15 |    * 动态加载卡片样式 CSS
 16 |    */
 17 |   async function loadCardStyles() {
 18 |     try {
 19 |       // 获取 URL 参数
 20 |       const urlParams = new URLSearchParams(window.location.search);
 21 |       const theme = urlParams.get('theme');
 22 |       const aspectRatio = urlParams.get('aspectRatio');
 23 |       const cardsPerRow = urlParams.get('cardsPerRow');
 24 |       
 25 |       // 构建自定义样式 URL
 26 |       const styleParams = new URLSearchParams();
 27 |       if (theme) styleParams.append('theme', theme);
 28 |       if (aspectRatio) styleParams.append('aspectRatio', aspectRatio);
 29 |       if (cardsPerRow) styleParams.append('cardsPerRow', cardsPerRow);
 30 |       
 31 |       // 使用 fetch 获取自定义卡片样式
 32 |       const response = await fetch(`/api/custom-card-styles?${styleParams.toString()}`);
 33 |       if (!response.ok) {
 34 |         throw new Error('加载卡片样式失败');
 35 |       }
 36 |       
 37 |       // 获取 CSS 内容
 38 |       const cssContent = await response.text();
 39 |       
 40 |       // 创建 style 元素并插入 CSS 内容
 41 |       const styleElement = document.createElement('style');
 42 |       styleElement.textContent = cssContent;
 43 |       
 44 |       // 将 style 元素添加到 dynamicStyles 容器中
 45 |       dynamicStyles.appendChild(styleElement);
 46 |       
 47 |       console.log('卡片样式加载成功');
 48 |     } catch (error) {
 49 |       console.error('加载卡片样式时出错:', error);
 50 |       
 51 |       // 如果加载自定义样式失败，尝试加载默认样式
 52 |       try {
 53 |         const fallbackResponse = await fetch('/css/card-styles.css');
 54 |         if (fallbackResponse.ok) {
 55 |           const fallbackCss = await fallbackResponse.text();
 56 |           const fallbackStyle = document.createElement('style');
 57 |           fallbackStyle.textContent = fallbackCss;
 58 |           dynamicStyles.appendChild(fallbackStyle);
 59 |           console.log('已加载默认卡片样式');
 60 |         }
 61 |       } catch (fallbackError) {
 62 |         console.error('加载默认样式也失败:', fallbackError);
 63 |       }
 64 |     }
 65 |   }
 66 |   
 67 |   // Get parameters from URL query parameters
 68 |   const urlParams = new URLSearchParams(window.location.search);
 69 |   const theme = urlParams.get('theme');
 70 |   
 71 |   // If no theme is provided, redirect back to the homepage
 72 |   if (!theme) {
 73 |     window.location.href = '/';
 74 |     return;
 75 |   }
 76 |   
 77 |   // Display the theme
 78 |   themeDisplay.textContent = theme;
 79 |   document.title = `${theme} | Cards-Go`;
 80 |   
 81 |   // Get all configuration parameters from URL
 82 |   const config = {
 83 |     // 数字类型参数
 84 |     quoteCount: getNumberParam('quoteCount'),
 85 |     cardsPerRow: getNumberParam('cardsPerRow'),
 86 |     maxQuoteLength: getNumberParam('maxQuoteLength'),
 87 |     contextLength: getNumberParam('contextLength'),
 88 |     // 字符串类型参数
 89 |     aspectRatio: urlParams.get('aspectRatio'),
 90 |     // 风格选择参数（逗号分隔的字符串转为数组）
 91 |     styleSelection: urlParams.get('styleSelection') ? urlParams.get('styleSelection').split(',') : []
 92 |   };
 93 |   
 94 |   // 辅助函数：从URL参数中获取数字类型参数
 95 |   function getNumberParam(name) {
 96 |     const value = urlParams.get(name);
 97 |     return value ? parseInt(value) : undefined;
 98 |   }
 99 |   
100 |   // 保存当前配置，用于重新生成
101 |   let currentConfig = { ...config };
102 |   
103 |   // Function to generate cards
104 |   async function generateCards(configOverrides = {}) {
105 |     try {
106 |       // Show loading animation
107 |       loadingElement.style.display = 'block';
108 |       cardContainer.style.display = 'none';
109 |       
110 |       // 合并当前配置和覆盖参数
111 |       const finalConfig = { ...currentConfig, ...configOverrides };
112 |       currentConfig = { ...finalConfig }; // 更新当前配置
113 |       
114 |       // 准备API请求参数
115 |       const apiParams = { theme, ...finalConfig };
116 |       
117 |       // 移除undefined的参数
118 |       Object.keys(apiParams).forEach(key => {
119 |         if (apiParams[key] === undefined) {
120 |           delete apiParams[key];
121 |         }
122 |       });
123 |       
124 |       console.log('Generating cards with params:', apiParams);
125 |       
126 |       // Call the API to generate cards
127 |       const response = await fetch('/api/generate-card', {
128 |         method: 'POST',
129 |         headers: {
130 |           'Content-Type': 'application/json'
131 |         },
132 |         body: JSON.stringify(apiParams)
133 |       });
134 |       
135 |       if (!response.ok) {
136 |         const errorText = await response.text();
137 |         let errorMessage = '生成卡片时出错';
138 |         try {
139 |           const errorData = JSON.parse(errorText);
140 |           if (errorData.error) {
141 |             errorMessage = errorData.error;
142 |           }
143 |         } catch (e) {
144 |           console.error('Error parsing error response:', e);
145 |         }
146 |         throw new Error(errorMessage);
147 |       }
148 |       
149 |       const data = await response.json();
150 |       
151 |       // Insert the HTML content
152 |       let htmlContent = data.html;
153 |       
154 |       // 处理可能的 ```html {content}``` 或 ```html{{content}}``` 格式
155 |       // 先尝试匹配 ```html {content}``` 格式
156 |       let htmlCodeBlockRegex = /```html\s*([\s\S]*?)```/;
157 |       let match = htmlContent.match(htmlCodeBlockRegex);
158 |       if (match && match[1]) {
159 |         console.log('检测到代码块格式 ```html {content}```，提取内容');
160 |         htmlContent = match[1].trim();
161 |       }
162 |       
163 |       // 再尝试匹配 ```html{{content}}``` 格式
164 |       htmlCodeBlockRegex = /```html\{\{([\s\S]*?)\}\}```/;
165 |       match = htmlContent.match(htmlCodeBlockRegex);
166 |       if (match && match[1]) {
167 |         console.log('检测到代码块格式 ```html{{content}}```，提取内容');
168 |         htmlContent = match[1].trim();
169 |       }
170 |       
171 |       // 最后尝试匹配单独的 {{content}} 格式
172 |       const contentRegex = /\{\{([\s\S]*?)\}\}/;
173 |       match = htmlContent.match(contentRegex);
174 |       if (match && match[1]) {
175 |         console.log('检测到 {{content}} 格式，提取内容');
176 |         htmlContent = match[1].trim();
177 |       }
178 |       
179 |       cardContainer.innerHTML = htmlContent;
180 |       
181 |       // Hide loading and show cards
182 |       loadingElement.style.display = 'none';
183 |       cardContainer.style.display = 'block';
184 |       
185 |       // Enable action buttons
186 |       downloadBtn.disabled = false;
187 |       shareBtn.disabled = false;
188 |     } catch (error) {
189 |       console.error('Error generating cards:', error);
190 |       alert(`错误: ${error.message}`);
191 |       loadingElement.style.display = 'none';
192 |     }
193 |   }
194 |   
195 |   // Generate cards when the page loads
196 |   generateCards();
197 |   
198 |   // Handle regenerate button click
199 |   regenerateBtn.addEventListener('click', generateCards);
200 |   
201 |   // Handle download button click
202 |   downloadBtn.addEventListener('click', async () => {
203 |     try {
204 |       // Check if html2canvas is loaded
205 |       if (typeof html2canvas === 'undefined') {
206 |         throw new Error('下载功能未加载，请刷新页面重试');
207 |       }
208 |       
209 |       alert('正在准备下载，请稍候...');
210 |       
211 |       // Use html2canvas to convert the cards to an image
212 |       const canvas = await html2canvas(cardContainer, {
213 |         scale: 2, // Higher quality
214 |         useCORS: true,
215 |         allowTaint: true
216 |       });
217 |       
218 |       // Create a download link
219 |       const link = document.createElement('a');
220 |       link.download = `cards-go-${theme}.png`;
221 |       link.href = canvas.toDataURL('image/png');
222 |       link.click();
223 |     } catch (error) {
224 |       console.error('Error downloading cards:', error);
225 |       alert(`下载失败: ${error.message}`);
226 |     }
227 |   });
228 |   
229 |   // 查看源代码按钮点击事件
230 |   const viewSourceBtn = document.getElementById('view-source-btn');
231 |   if (viewSourceBtn) {
232 |     viewSourceBtn.addEventListener('click', () => {
233 |       // 在新窗口打开源代码页面
234 |       window.open('/api/view-source', '_blank');
235 |     });
236 |   }
237 |   
238 |   // 查看提示词按钮点击事件
239 |   const viewPromptBtn = document.getElementById('view-prompt-btn');
240 |   if (viewPromptBtn) {
241 |     viewPromptBtn.addEventListener('click', () => {
242 |       // 在新窗口打开提示词页面
243 |       window.open('/api/view-prompt', '_blank');
244 |     });
245 |   }
246 |   
247 |   // Handle share button click
248 |   shareBtn.addEventListener('click', () => {
249 |     try {
250 |       // Check if Web Share API is supported
251 |       if (navigator.share) {
252 |         navigator.share({
253 |           title: `${theme} | Cards-Go`,
254 |           text: `查看我用Cards-Go生成的关于${theme}的精美知识卡片！`,
255 |           url: window.location.href
256 |         }).then(() => {
257 |           console.log('分享成功');
258 |         }).catch((error) => {
259 |           console.error('分享失败:', error);
260 |         });
261 |       } else {
262 |         // 如果不支持Web Share API，提供复制链接的选项
263 |         const url = window.location.href;
264 |         navigator.clipboard.writeText(url).then(() => {
265 |           alert('链接已复制到剪贴板，你可以手动分享');
266 |         }).catch(() => {
267 |           alert('无法复制链接，请手动复制地址栏中的URL');
268 |         });
269 |       }
270 |     } catch (error) {
271 |       console.error('分享时出错:', error);
272 |       alert(`分享失败: ${error.message}`);
273 |     }
274 |   });
275 | });
276 | 
277 | 


--------------------------------------------------------------------------------
/public/js/script.js:
--------------------------------------------------------------------------------
  1 | document.addEventListener('DOMContentLoaded', async () => {
  2 |   // 初始化加载页面（如果当前在加载页面）
  3 |   initLoadingPage();
  4 |   
  5 |   // Get DOM elements
  6 |   const themeForm = document.getElementById('theme-form');
  7 |   const themeInput = document.getElementById('theme-input');
  8 |   const exampleTags = document.querySelectorAll('.tag');
  9 |   const resetDefaultsBtn = document.getElementById('reset-defaults');
 10 |   
 11 |   // Get input elements
 12 |   const quoteCountInput = document.getElementById('quote-count');
 13 |   const aspectRatioSelect = document.getElementById('aspect-ratio');
 14 |   const cardsPerRowInput = document.getElementById('cards-per-row');
 15 |   const maxQuoteLengthInput = document.getElementById('max-quote-length');
 16 |   const contextLengthInput = document.getElementById('context-length');
 17 |   const maxHeightInput = document.getElementById('max-height');
 18 |   const minHeightInput = document.getElementById('min-height');
 19 |   const modeRadios = document.querySelectorAll('input[name="mode"]'); // 使用单选按钮而非下拉菜单
 20 |   const styleModeRadios = document.querySelectorAll('input[name="style-mode"]');
 21 |   const styleSelector = document.getElementById('style-selector');
 22 |   const styleGrid = document.getElementById('style-grid');
 23 |   
 24 |   // AI模型选择元素
 25 |   const aiProviderSelect = document.getElementById('ai-provider');
 26 |   const aiModelSelect = document.getElementById('ai-model');
 27 |   
 28 |   // Default values (matching those in prompts/card.js)
 29 |   const defaultConfig = {
 30 |     quoteCount: 8,
 31 |     aspectRatio: '16:9',
 32 |     cardsPerRow: 2,
 33 |     maxQuoteLength: 100,
 34 |     contextLength: 30,
 35 |     styleSelection: [],
 36 |     mode: 'creative', // 默认使用创造性模式
 37 |     maxHeight: 383, // 默认卡片最大高度(px)
 38 |     minHeight: null, // 默认不设置最小高度
 39 |     provider: 'ark', // 默认使用 ARK AI
 40 |     model: 'ep-20250330093147-r2gkz' // 默认使用 ARK 默认模型
 41 |   };
 42 |   
 43 |   // Store the current configuration
 44 |   let currentConfig = { ...defaultConfig };
 45 |   
 46 |   // Handle number input increment/decrement buttons
 47 |   document.querySelectorAll('.number-input').forEach(container => {
 48 |     const input = container.querySelector('input');
 49 |     const decrementBtn = container.querySelector('.decrement');
 50 |     const incrementBtn = container.querySelector('.increment');
 51 |     const inputId = input.id;
 52 |     
 53 |     // 高度输入框不进行校验
 54 |     if (inputId === 'max-height' || inputId === 'min-height') {
 55 |       decrementBtn.addEventListener('click', () => {
 56 |         const step = 10;
 57 |         const newValue = parseInt(input.value) - step;
 58 |         input.value = newValue;
 59 |         updateConfigFromInputs();
 60 |       });
 61 |       
 62 |       incrementBtn.addEventListener('click', () => {
 63 |         const step = 10;
 64 |         const newValue = parseInt(input.value) + step;
 65 |         input.value = newValue;
 66 |         updateConfigFromInputs();
 67 |       });
 68 |       
 69 |       input.addEventListener('change', () => {
 70 |         updateConfigFromInputs();
 71 |       });
 72 |     } else {
 73 |       // 其他输入框保持原有校验逻辑
 74 |       decrementBtn.addEventListener('click', () => {
 75 |         const min = parseInt(input.min) || 0;
 76 |         const step = parseInt(input.step) || 1;
 77 |         const newValue = parseInt(input.value) - step;
 78 |         input.value = newValue < min ? min : newValue;
 79 |         updateConfigFromInputs();
 80 |       });
 81 |       
 82 |       incrementBtn.addEventListener('click', () => {
 83 |         const max = parseInt(input.max) || 100;
 84 |         const step = parseInt(input.step) || 1;
 85 |         const newValue = parseInt(input.value) + step;
 86 |         input.value = newValue > max ? max : newValue;
 87 |         updateConfigFromInputs();
 88 |       });
 89 |       
 90 |       input.addEventListener('change', () => {
 91 |         const min = parseInt(input.min) || 0;
 92 |         const max = parseInt(input.max) || 100;
 93 |         let value = parseInt(input.value);
 94 |         
 95 |         if (isNaN(value)) {
 96 |           value = parseInt(input.defaultValue) || min;
 97 |         }
 98 |         
 99 |         input.value = Math.max(min, Math.min(max, value));
100 |         updateConfigFromInputs();
101 |       });
102 |     }
103 |   });
104 |   
105 |   // 创建一个独立的选项卡切换函数
106 |   function initTabSwitching() {
107 |     console.log('初始化选项卡切换功能');
108 |     
109 |     // 获取所有选项卡按钮和内容
110 |     const tabButtons = document.querySelectorAll('.tab-btn');
111 |     const tabContents = document.querySelectorAll('.tab-content');
112 |     
113 |     if (!tabButtons || tabButtons.length === 0) {
114 |       console.error('找不到选项卡按钮');
115 |       return;
116 |     }
117 |     
118 |     console.log('找到', tabButtons.length, '个选项卡按钮');
119 |     
120 |     // 移除现有的点击事件处理程序，避免重复
121 |     tabButtons.forEach(button => {
122 |       const newButton = button.cloneNode(true);
123 |       button.parentNode.replaceChild(newButton, button);
124 |     });
125 |     
126 |     // 重新获取按钮并添加新的事件处理程序
127 |     const newTabButtons = document.querySelectorAll('.tab-btn');
128 |     
129 |     newTabButtons.forEach(button => {
130 |       button.addEventListener('click', function(e) {
131 |         e.preventDefault();
132 |         const tabName = this.getAttribute('data-tab');
133 |         console.log('点击选项卡:', tabName);
134 |         
135 |         // 移除所有标签的活动状态
136 |         newTabButtons.forEach(btn => btn.classList.remove('active'));
137 |         tabContents.forEach(content => content.classList.remove('active'));
138 |         
139 |         // 添加当前标签的活动状态
140 |         this.classList.add('active');
141 |         
142 |         // 显示对应的内容
143 |         const tabContent = document.getElementById('tab-' + tabName);
144 |         if (tabContent) {
145 |           tabContent.classList.add('active');
146 |           console.log('切换到选项卡:', 'tab-' + tabName);
147 |           
148 |           // 如果是风格设置标签，确保风格选项已加载
149 |           if (tabName === 'style' && styleGrid && styleGrid.children.length === 0) {
150 |             loadDesignStyles();
151 |           }
152 |         } else {
153 |           console.error('找不到选项卡内容:', 'tab-' + tabName);
154 |         }
155 |       });
156 |     });
157 |   }
158 |   
159 |   // 在页面加载完成后初始化所有功能
160 |   window.addEventListener('load', () => {
161 |     console.log('页面加载完成');
162 |     
163 |     // 如果风格选择器为空，则加载设计风格
164 |     if (styleGrid && styleGrid.children.length === 0) {
165 |       loadDesignStyles();
166 |     }
167 |     
168 |     // 初始化AI模型选择器
169 |     if (aiProviderSelect && aiModelSelect) {
170 |       initAIModelSelector();
171 |     }
172 |     
173 |     // 初始化选项卡切换功能
174 |     setTimeout(initTabSwitching, 100); // 稍微延迟以确保 DOM 已完全加载
175 |     
176 |     // 创建独立的风格模式选择器初始化函数
177 |     function initStyleModeSelector() {
178 |       console.log('初始化风格模式选择器');
179 |       
180 |       const styleModeOptions = document.querySelectorAll('.style-mode-option');
181 |       const styleModeSlider = document.querySelector('.style-mode-slider');
182 |       
183 |       if (!styleModeOptions || styleModeOptions.length === 0 || !styleModeSlider) {
184 |         console.error('找不到风格模式选项或滑块');
185 |         return;
186 |       }
187 |       
188 |       console.log('找到', styleModeOptions.length, '个风格模式选项');
189 |       
190 |       // 移除现有的点击事件处理程序，避免重复
191 |       styleModeOptions.forEach(option => {
192 |         const newOption = option.cloneNode(true);
193 |         option.parentNode.replaceChild(newOption, option);
194 |       });
195 |       
196 |       // 重新获取选项并添加新的事件处理程序
197 |       const newStyleModeOptions = document.querySelectorAll('.style-mode-option');
198 |       
199 |       // 初始化选中状态
200 |       newStyleModeOptions.forEach(option => {
201 |         const radio = option.querySelector('input[type="radio"]');
202 |         if (radio && radio.checked) {
203 |           const position = option.getAttribute('data-position');
204 |           styleModeSlider.className = 'style-mode-slider position-' + position;
205 |           option.classList.add('active');
206 |           
207 |           // 处理初始风格选择器的显示/隐藏
208 |           if (radio.value === 'random') {
209 |             styleSelector.classList.add('hidden');
210 |           } else {
211 |             styleSelector.classList.remove('hidden');
212 |           }
213 |         }
214 |         
215 |         // 添加点击事件
216 |         option.addEventListener('click', function(e) {
217 |           const radio = option.querySelector('input[type="radio"]');
218 |           if (radio) {
219 |             radio.checked = true;
220 |             console.log('风格模式已更改为:', radio.value);
221 |             
222 |             // 更新活动状态
223 |             newStyleModeOptions.forEach(opt => opt.classList.remove('active'));
224 |             option.classList.add('active');
225 |             
226 |             // 移动滑块
227 |             const position = option.getAttribute('data-position');
228 |             styleModeSlider.className = 'style-mode-slider position-' + position;
229 |             
230 |             // 处理风格选择器的显示/隐藏
231 |             const styleMode = radio.value;
232 |             if (styleMode === 'random') {
233 |               styleSelector.classList.add('hidden');
234 |               currentConfig.styleSelection = [];
235 |             } else {
236 |               // 确保风格选择器中有内容
237 |               if (styleGrid && styleGrid.children.length === 0) {
238 |                 loadDesignStyles();
239 |               }
240 |               
241 |               styleSelector.classList.remove('hidden');
242 |               // 切换模式时重置选择
243 |               if (styleMode === 'single') {
244 |                 // 单一模式下，只允许一个选择
245 |                 document.querySelectorAll('.style-card.selected').forEach((card, index) => {
246 |                   if (index > 0) card.classList.remove('selected');
247 |                 });
248 |                 
249 |                 // 如果有多个选择，只保留第一个
250 |                 if (currentConfig.styleSelection.length > 1) {
251 |                   currentConfig.styleSelection = [currentConfig.styleSelection[0]];
252 |                 }
253 |               }
254 |             }
255 |             
256 |             // 更新配置
257 |             updateConfigFromInputs();
258 |           }
259 |         });
260 |       });
261 |     }
262 |     
263 |     // 初始化风格模式选择器
264 |     setTimeout(initStyleModeSelector, 200);
265 |     
266 |     // 创建独立的内容处理模式选择器初始化函数
267 |     function initContentModeSelector() {
268 |       console.log('初始化内容处理模式选择器');
269 |       
270 |       const modeOptions = document.querySelectorAll('.mode-option');
271 |       const modeSlider = document.querySelector('.mode-slider');
272 |       
273 |       if (!modeOptions || modeOptions.length === 0 || !modeSlider) {
274 |         console.error('找不到内容处理模式选项或滑块');
275 |         return;
276 |       }
277 |       
278 |       console.log('找到', modeOptions.length, '个内容处理模式选项');
279 |       
280 |       // 移除现有的点击事件处理程序，避免重复
281 |       modeOptions.forEach(option => {
282 |         const newOption = option.cloneNode(true);
283 |         option.parentNode.replaceChild(newOption, option);
284 |       });
285 |       
286 |       // 重新获取选项并添加新的事件处理程序
287 |       const newModeOptions = document.querySelectorAll('.mode-option');
288 |       
289 |       // 初始化选中状态
290 |       newModeOptions.forEach(option => {
291 |         const radio = option.querySelector('input[type="radio"]');
292 |         if (radio && radio.checked) {
293 |           const position = option.getAttribute('data-position');
294 |           modeSlider.className = 'mode-slider position-' + position;
295 |           option.classList.add('active');
296 |         }
297 |         
298 |         // 添加点击事件
299 |         option.addEventListener('click', function(e) {
300 |           const radio = option.querySelector('input[type="radio"]');
301 |           if (radio) {
302 |             radio.checked = true;
303 |             console.log('内容处理模式已更改为:', radio.value);
304 |             
305 |             // 更新活动样式
306 |             newModeOptions.forEach(opt => opt.classList.remove('active'));
307 |             option.classList.add('active');
308 |             
309 |             // 移动滑块
310 |             const position = option.getAttribute('data-position');
311 |             modeSlider.className = 'mode-slider position-' + position;
312 |             
313 |             // 更新配置
314 |             updateConfigFromInputs();
315 |           }
316 |         });
317 |       });
318 |     }
319 |     
320 |     // 初始化内容处理模式选择器
321 |     setTimeout(initContentModeSelector, 300);
322 |     
323 |     // 预先加载风格选项，而不是等待用户点击
324 |     loadDesignStyles();
325 |   });
326 |   
327 |   // Reset to defaults
328 |   resetDefaultsBtn.addEventListener('click', () => {
329 |     resetToDefaults();
330 |   });
331 |   
332 |   // 注意：风格模式选择器的事件处理已在页面加载事件中处理，此处不再重复
333 |   
334 |   // Handle select and input changes
335 |   aspectRatioSelect.addEventListener('change', updateConfigFromInputs);
336 |   quoteCountInput.addEventListener('input', updateConfigFromInputs);
337 |   cardsPerRowInput.addEventListener('input', updateConfigFromInputs);
338 |   maxQuoteLengthInput.addEventListener('input', updateConfigFromInputs);
339 |   contextLengthInput.addEventListener('input', updateConfigFromInputs);
340 |   
341 |   // 为内容处理模式单选按钮添加事件监听器
342 |   modeRadios.forEach(radio => {
343 |     radio.addEventListener('change', updateConfigFromInputs);
344 |   });
345 |   
346 |   // Load design styles from the server
347 |   async function loadDesignStyles() {
348 |     try {
349 |       const response = await fetch('/api/design-styles');
350 |       if (!response.ok) {
351 |         throw new Error('获取设计风格失败');
352 |       }
353 |       
354 |       const styles = await response.json();
355 |       renderStyleGrid(styles);
356 |     } catch (error) {
357 |       console.error('Error loading design styles:', error);
358 |       styleGrid.innerHTML = '<p class="error-message">加载设计风格时出错</p>';
359 |     }
360 |   }
361 |   
362 |   // Render the style grid
363 |   function renderStyleGrid(styles) {
364 |     styleGrid.innerHTML = '';
365 |     
366 |     styles.forEach(style => {
367 |       const card = document.createElement('div');
368 |       card.className = 'style-card';
369 |       card.dataset.code = style.code;
370 |       
371 |       // Check if this style is in the current selection
372 |       if (currentConfig.styleSelection.includes(style.code)) {
373 |         card.classList.add('selected');
374 |       }
375 |       
376 |       card.innerHTML = `
377 |         <div class="style-name">${style.name}</div>
378 |         <div class="style-code">${style.code}</div>
379 |       `;
380 |       
381 |       card.addEventListener('click', () => {
382 |         const styleMode = document.querySelector('input[name="style-mode"]:checked').value;
383 |         const code = style.code;
384 |         
385 |         if (styleMode === 'single') {
386 |           // In single mode, only allow one selection
387 |           document.querySelectorAll('.style-card').forEach(c => {
388 |             c.classList.remove('selected');
389 |           });
390 |           card.classList.add('selected');
391 |           currentConfig.styleSelection = [code];
392 |         } else if (styleMode === 'multiple') {
393 |           // In multiple mode, toggle selection
394 |           card.classList.toggle('selected');
395 |           
396 |           if (card.classList.contains('selected')) {
397 |             // Add to selection if not already there
398 |             if (!currentConfig.styleSelection.includes(code)) {
399 |               currentConfig.styleSelection.push(code);
400 |             }
401 |           } else {
402 |             // Remove from selection
403 |             currentConfig.styleSelection = currentConfig.styleSelection.filter(c => c !== code);
404 |           }
405 |         }
406 |       });
407 |       
408 |       styleGrid.appendChild(card);
409 |     });
410 |   }
411 |   
412 |   // Update configuration from input values
413 |   function updateConfigFromInputs() {
414 |     currentConfig.quoteCount = parseInt(quoteCountInput.value);
415 |     currentConfig.aspectRatio = aspectRatioSelect.value;
416 |     currentConfig.cardsPerRow = parseInt(cardsPerRowInput.value);
417 |     currentConfig.maxQuoteLength = parseInt(maxQuoteLengthInput.value);
418 |     currentConfig.contextLength = parseInt(contextLengthInput.value);
419 |     
420 |     // 处理卡片高度设置 - 直接使用输入值，不进行校验
421 |     currentConfig.maxHeight = maxHeightInput.value ? parseInt(maxHeightInput.value) : null;
422 |     currentConfig.minHeight = minHeightInput.value ? parseInt(minHeightInput.value) : null;
423 |     
424 |     // 获取表单中选中的内容处理模式
425 |     const formModeRadios = document.querySelectorAll('.mode-option input[name="mode"]');
426 |     formModeRadios.forEach(radio => {
427 |       if (radio.checked) {
428 |         currentConfig.mode = radio.value;
429 |       }
430 |     });
431 |     
432 |     // 更新AI提供商和模型设置
433 |     if (aiProviderSelect && aiModelSelect) {
434 |       const oldProvider = currentConfig.provider;
435 |       const oldModel = currentConfig.model;
436 |       
437 |       currentConfig.provider = aiProviderSelect.value;
438 |       currentConfig.model = aiModelSelect.value;
439 |       
440 |       console.log('AI提供商更新:', oldProvider, '->', currentConfig.provider);
441 |       console.log('AI模型更新:', oldModel, '->', currentConfig.model);
442 |       console.log('当前配置对象:', JSON.stringify(currentConfig));
443 |     }
444 |     
445 |     // styleSelection is updated in the style card click handlers
446 |   }
447 |   
448 |   // Reset all inputs to default values
449 |   function resetToDefaults() {
450 |     quoteCountInput.value = defaultConfig.quoteCount;
451 |     aspectRatioSelect.value = defaultConfig.aspectRatio;
452 |     cardsPerRowInput.value = defaultConfig.cardsPerRow;
453 |     maxQuoteLengthInput.value = defaultConfig.maxQuoteLength;
454 |     contextLengthInput.value = defaultConfig.contextLength;
455 |     maxHeightInput.value = defaultConfig.maxHeight || 383;
456 |     minHeightInput.value = defaultConfig.minHeight || 0;
457 |     
458 |     // 重置AI提供商和模型设置
459 |     if (aiProviderSelect && aiModelSelect) {
460 |       aiProviderSelect.value = defaultConfig.provider;
461 |       // 触发提供商变化事件，更新模型列表
462 |       const event = new Event('change');
463 |       aiProviderSelect.dispatchEvent(event);
464 |     }
465 |     
466 |     // 重置表单中的内容处理模式分段控制器
467 |     const formModeRadios = document.querySelectorAll('.mode-option input[name="mode"]');
468 |     const modeOptions = document.querySelectorAll('.mode-option');
469 |     const modeSlider = document.querySelector('.mode-slider');
470 |     
471 |     formModeRadios.forEach(radio => {
472 |       const option = radio.closest('.mode-option');
473 |       if (radio.value === defaultConfig.mode) {
474 |         radio.checked = true;
475 |         option.classList.add('active');
476 |         const position = option.getAttribute('data-position');
477 |         modeSlider.className = 'mode-slider position-' + position;
478 |       } else {
479 |         radio.checked = false;
480 |         option.classList.remove('active');
481 |       }
482 |     });
483 |     
484 |     // Reset style selection to random
485 |     document.querySelector('input[name="style-mode"][value="random"]').checked = true;
486 |     styleSelector.classList.add('hidden');
487 |     
488 |     // Clear all selected styles
489 |     document.querySelectorAll('.style-card').forEach(card => {
490 |       card.classList.remove('selected');
491 |     });
492 |     
493 |     currentConfig = { ...defaultConfig };
494 |   }
495 |   
496 |   // 创建加载页面的 JavaScript 代码
497 |   // 这个函数会在加载页面被加载时自动执行
498 |   function initLoadingPage() {
499 |     // 检查是否在加载页面
500 |     if (window.location.pathname === '/loading') {
501 |       // 获取 URL 参数
502 |       const urlParams = new URLSearchParams(window.location.search);
503 |       if (urlParams.has('theme')) {
504 |         // 如果 URL 中有主题参数，则开始生成卡片
505 |         generateCardsWithLoading(urlParams.toString());
506 |       } else {
507 |         // 如果没有主题参数，返回首页
508 |         window.location.href = '/';
509 |       }
510 |     }
511 |   }
512 | 
513 |   // 在加载页面中生成卡片
514 |   function generateCardsWithLoading(params) {
515 |     // 创建加载页面的 UI 元素
516 |     const loadingContainer = document.getElementById('loading-container');
517 |     if (loadingContainer) {
518 |       loadingContainer.innerHTML = `
519 |         <div style="max-width: 500px; padding: 30px; background-color: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);">
520 |           <div style="width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; margin: 0 auto 20px; animation: spin 1s linear infinite;"></div>
521 |           <h1 style="color: #333; margin-bottom: 20px;">正在生成卡片</h1>
522 |           <p style="color: #666; margin-bottom: 30px; line-height: 1.6;">AI 正在分析内容生成卡片，这可能需要 15-60 秒。</p>
523 |           <div style="height: 6px; background-color: #f3f3f3; border-radius: 3px; margin-bottom: 20px; overflow: hidden;">
524 |             <div style="height: 100%; width: 0%; background-color: #3498db; border-radius: 3px; animation: progress 30s linear forwards;"></div>
525 |           </div>
526 |           <a href="/" style="display: inline-block; padding: 10px 20px; background-color: #e74c3c; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; font-size: 16px;">取消并返回</a>
527 |         </div>
528 |       `;
529 | 
530 |       // 添加动画样式
531 |       const style = document.createElement('style');
532 |       style.textContent = `
533 |         @keyframes spin {
534 |           0% { transform: rotate(0deg); }
535 |           100% { transform: rotate(360deg); }
536 |         }
537 |         @keyframes progress {
538 |           0% { width: 0%; }
539 |           90% { width: 90%; }
540 |           100% { width: 90%; }
541 |         }
542 |         body {
543 |           font-family: 'Noto Sans SC', sans-serif;
544 |           background-color: #f5f5f5;
545 |           display: flex;
546 |           justify-content: center;
547 |           align-items: center;
548 |           height: 100vh;
549 |           margin: 0;
550 |           padding: 20px;
551 |           text-align: center;
552 |         }
553 |       `;
554 |       document.head.appendChild(style);
555 | 
556 |       // 添加字体
557 |       const fontLink = document.createElement('link');
558 |       fontLink.rel = 'stylesheet';
559 |       fontLink.href = 'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap';
560 |       document.head.appendChild(fontLink);
561 |     }
562 | 
563 |     // 将 URL 参数转换为对象
564 |     const urlParams = new URLSearchParams(params);
565 |     const paramsObj = {};
566 |     
567 |     for (const [key, value] of urlParams.entries()) {
568 |       paramsObj[key] = value;
569 |     }
570 |     
571 |     // 处理 styleSelection 数组
572 |     if (paramsObj.styleSelection) {
573 |       paramsObj.styleSelection = paramsObj.styleSelection.split(',');
574 |     }
575 |     
576 |     // 使用正确的 API 端点发送请求
577 |     console.log('发送卡片生成 POST 请求，参数:', JSON.stringify(paramsObj));
578 |     console.log('AI 提供商:', paramsObj.provider);
579 |     console.log('AI 模型:', paramsObj.model);
580 |     
581 |     // 创建 POST 请求 - 确保使用正确的端点 /api/generate-card
582 |     const xhr = new XMLHttpRequest();
583 |     xhr.open('POST', '/api/generate-card', true);
584 |     xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
585 |     
586 |     // 发送 JSON 数据，确保包含 provider 和 model 参数
587 |     const jsonData = JSON.stringify(paramsObj);
588 |     console.log('发送到后端的 JSON 数据:', jsonData);
589 |     xhr.send(jsonData);
590 |     
591 |     // 监听请求完成
592 |     xhr.onload = function() {
593 |       if (xhr.status === 200) {
594 |         try {
595 |           // 解析JSON响应
596 |           const response = JSON.parse(xhr.responseText);
597 |           
598 |           // 检查是否有HTML内容
599 |           if (response && response.html) {
600 |             console.log('收到HTML内容，长度:', response.html.length);
601 |             // 将生成的 HTML 写入到新文档
602 |             document.open();
603 |             document.write(response.html);
604 |             document.close();
605 |           } else {
606 |             console.error('服务器返回的JSON中没有HTML内容');
607 |             throw new Error('服务器返回的JSON中没有HTML内容');
608 |           }
609 |         } catch (error) {
610 |           console.error('处理服务器响应时出错:', error);
611 |           // 显示错误信息
612 |           if (loadingContainer) {
613 |             loadingContainer.innerHTML = `
614 |               <div style="max-width: 500px; padding: 30px; background-color: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);">
615 |                 <h1 style="color: #e74c3c; margin-bottom: 20px;">生成失败</h1>
616 |                 <p style="color: #666; margin-bottom: 30px; line-height: 1.6;">处理服务器响应时出错: ${error.message}</p>
617 |                 <a href="/" style="display: inline-block; padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; font-size: 16px;">返回首页</a>
618 |               </div>
619 |             `;
620 |           }
621 |         }
622 |       } else {
623 |         // 如果出错，显示错误信息
624 |         if (loadingContainer) {
625 |           loadingContainer.innerHTML = `
626 |             <div style="max-width: 500px; padding: 30px; background-color: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);">
627 |               <h1 style="color: #e74c3c; margin-bottom: 20px;">生成失败</h1>
628 |               <p style="color: #666; margin-bottom: 30px; line-height: 1.6;">生成卡片时出现错误，请重试。</p>
629 |               <a href="/" style="display: inline-block; padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; font-size: 16px;">返回首页</a>
630 |             </div>
631 |           `;
632 |         }
633 |       }
634 |     };
635 |     
636 |     // 处理请求错误
637 |     xhr.onerror = function() {
638 |       if (loadingContainer) {
639 |         loadingContainer.innerHTML = `
640 |           <div style="max-width: 500px; padding: 30px; background-color: white; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);">
641 |             <h1 style="color: #e74c3c; margin-bottom: 20px;">连接错误</h1>
642 |             <p style="color: #666; margin-bottom: 30px; line-height: 1.6;">无法连接到服务器，请检查您的网络连接并重试。</p>
643 |             <a href="/" style="display: inline-block; padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; font-size: 16px;">返回首页</a>
644 |           </div>
645 |         `;
646 |       }
647 |     };
648 |     
649 |     // 发送请求
650 |     xhr.send();
651 |   }
652 |   
653 |   // Handle form submission
654 |   themeForm.addEventListener('submit', (e) => {
655 |     e.preventDefault();
656 |     
657 |     const theme = themeInput.value.trim();
658 |     if (!theme) {
659 |       alert('请输入主题词');
660 |       return;
661 |     }
662 |     
663 |     // 记录当前配置对象，用于调试
664 |     console.log('提交表单时的配置对象:', JSON.stringify(currentConfig));
665 |     console.log('AI提供商:', currentConfig.provider);
666 |     console.log('AI模型:', currentConfig.model);
667 |     
668 |     // 检查AI提供商选择器的当前值
669 |     if (aiProviderSelect) {
670 |       console.log('AI提供商选择器当前值:', aiProviderSelect.value);
671 |     }
672 |     
673 |     // 检查AI模型选择器的当前值
674 |     if (aiModelSelect) {
675 |       console.log('AI模型选择器当前值:', aiModelSelect.value);
676 |     }
677 |     
678 |     // Build query parameters with all configuration options
679 |     const params = new URLSearchParams();
680 |     params.append('theme', theme);
681 |     
682 |     // Add all configuration parameters
683 |     Object.entries(currentConfig).forEach(([key, value]) => {
684 |       if (key === 'styleSelection' && Array.isArray(value)) {
685 |         // Handle array of style codes
686 |         if (value.length > 0) {
687 |           params.append(key, value.join(','));
688 |         }
689 |       } else {
690 |         params.append(key, value);
691 |       }
692 |     });
693 |     
694 |     // 记录最终的URL参数
695 |     console.log('最终URL参数:', params.toString());
696 |     console.log('provider参数:', params.get('provider'));
697 |     console.log('model参数:', params.get('model'));
698 |     
699 |     // 跳转到加载页面
700 |     window.location.href = `/loading?${params.toString()}`;
701 |   });
702 |   
703 |   // Handle example tag clicks - now insert example text instead of just the theme word
704 |   exampleTags.forEach(tag => {
705 |     tag.addEventListener('click', () => {
706 |       const theme = tag.dataset.theme;
707 |       // u4e3au6bcfu4e2au70edu95e8u4e3bu9898u63d0u4f9bu4e00u6bb5u793au4f8bu6587u672c
708 |       const exampleTexts = {
709 |         'u5e78u798f': 'u5e78u798fu4e0du662fu7f8eu597du7684u751fu6d3bu6761u4ef6uff0cu800cu662fu5bf9u751fu6d3bu7684u6ee1u610fu3002u5b83u4e0du5728u4e8eu62e5u6709u591au5c11uff0cu800cu5728u4e8eu611fu6fc0u591au5c11u3002u5e78u798fu662fu5185u5fc3u7684u5e73u9759uff0cu662fu751fu6d3bu7684u5145u5b9euff0cu662fu4e0eu81eau5df1u548cu89e3u3002u5b83u4e0du662fu7ec8u70b9uff0cu800cu662fu4e00u6bb5u65c5u7a0bu3002u5e78u798fu4e0du662fu5bf9u5b8cu7f8eu7684u8ffdu6c42uff0cu800cu662fu5bf9u4e0du5b8cu7f8eu7684u63a5u7eb3u3002u5e78u798fu5728u4e8eu5f53u4e0buff0cu5728u4e8eu6bcfu4e00u4e2au5faeu5c0fu7684u77acu95f4u3002',
710 |         'u6210u957f': 'u6210u957fu662fu4e00u4e2au4e0du65adu6253u7834u81eau6211u8fb9u754cu7684u8fc7u7a0bu3002u5b83u610fu5473u7740u79bbu5f00u8212u9002u533auff0cu62e5u62b1u672au77e5u3002u6210u957fu4e0du662fu7ebfu6027u7684uff0cu800cu662fu5145u6ee1u8f6cu6298u548cu5faau73afu7684u3002u5f53u6211u4eecu9762u5bf9u6311u6218u65f6uff0cu6211u4eecu5c31u5728u6210u957fu3002u5f53u6211u4eecu4eceu5931u8d25u4e2du5b66u4e60u65f6uff0cu6211u4eecu5c31u5728u6210u957fu3002u5f53u6211u4eecu62e5u6709u52c7u6c14u6539u53d8u65f6uff0cu6211u4eecu5c31u5728u6210u957fu3002u6210u957fu662fu4e00u751fu7684u65c5u7a0buff0cu6ca1u6709u7ec8u70b9uff0cu53eau6709u65b0u7684u5f00u59cbu3002',
711 |         'u667au6167': 'u667au6167u4e0du540cu4e8eu77e5u8bc6u3002u77e5u8bc6u662fu77e5u9053u4e8bu5b9euff0cu800cu667au6167u662fu7406u89e3u771fu7406u3002u77e5u8bc6u662fu5de5u5177uff0cu667au6167u662fu5982u4f55u4f7fu7528u8fd9u4e9bu5de5u5177u3002u667au6167u6765u81eau4e8eu7ecfu9a8cu3001u53cdu601du548cu6df1u5165u601du8003u3002u5b83u662fu77e5u9053u4ec0u4e48u65f6u5019u8bf4u8bdduff0cu4ec0u4e48u65f6u5019u4fddu6301u6c89u9ed8u3002u667au6167u662fu77e5u9053u4ec0u4e48u662fu91cdu8981u7684uff0cu4ec0u4e48u662fu4e0du91cdu8981u7684u3002u667au6167u662fu770bu5230u8868u9762u4e4bu4e0buff0cu542cu5230u8bddu8bedu4e4bu5916uff0cu611fu53d7u5230u884cu52a8u4e4bu540eu3002',
712 |         'u7231u60c5': 'u7231u60c5u662fu4e00u79cdu9009u62e9uff0cu4e00u79cdu627fu8bfauff0cu4e00u79cdu6bcfu5929u90fdu8981u91cdu65b0u505au51fau7684u51b3u5b9au3002u7231u60c5u4e0du4ec5u4ec5u662fu611fu89c9uff0cu66f4u662fu884cu52a8u3002u7231u60c5u662fu5728u5bf9u65b9u6700u8106u5f31u7684u65f6u5019u7ed9u4e88u529bu91cfuff0cu5728u6700u9ed1u6697u7684u65f6u5019u7ed9u4e88u5149u660eu3002u7231u60c5u662fu5305u5bb9u3001u7406u89e3u548cu5c0au91cdu3002u7231u60c5u662fu770bu89c1u5bf9u65b9u7684u4e0du5b8cu7f8euff0cu5374u4ecdu7136u9009u62e9u7559u4e0bu3002u7231u60c5u662fu5728u6240u6709u7406u7531u90fdu544au8bc9u4f60u653eu5f03u65f6uff0cu4f9du7136u9009u62e9u575au6301u3002',
713 |         'u81eau7531': 'u81eau7531u4e0du662fu65e0u6cd5u65e0u5929uff0cu800cu662fu5728u9009u62e9u4e2du627eu5230u81eau6211u3002u771fu6b63u7684u81eau7531u662fu5185u5fc3u7684u72b6u6001uff0cu662fu5bf9u81eau5df1u7684u9009u62e9u8d1fu8d23u3002u81eau7531u4e0du662fu6ca1u6709u9650u5236uff0cu800cu662fu5728u9650u5236u4e2du521bu9020u53efu80fdu3002u81eau7531u662fu80fdu591fu8bf4u201cu4e0du201duff0cu4e5fu80fdu591fu8bf4u201cu662fu201du3002u81eau7531u662fu9009u62e9u81eau5df1u7684u9053u8defuff0cu5e76u4e3au81eau5df1u7684u9009u62e9u8d1fu8d23u3002u81eau7531u4e0du662fu6ca1u6709u6050u60e7uff0cu800cu662fu5728u6050u60e7u4e2du4ecdu7136u524du884cu3002'
714 |       };
715 |       
716 |       // u5982u679cu6709u5bf9u5e94u7684u793au4f8bu6587u672cuff0cu5219u4f7fu7528u5b83uff0cu5426u5219u4ec5u4f7fu7528u4e3bu9898u8bcd
717 |       themeInput.value = exampleTexts[theme] || theme;
718 |       
719 |       // u6edau52a8u5230u9876u90e8
720 |       window.scrollTo({ top: 0, behavior: 'smooth' });
721 |       
722 |       // u805au7126u5230u6587u672cu533a
723 |       themeInput.focus();
724 |     });
725 |   });
726 |   
727 |   // 打赏模态框功能
728 |   const donationBtn = document.getElementById('donation-btn');
729 |   const donationModal = document.getElementById('donation-modal');
730 |   const closeModal = document.querySelector('.close-modal');
731 |   
732 |   if (donationBtn && donationModal) {
733 |     // 点击打赏按钮打开模态框
734 |     donationBtn.addEventListener('click', (e) => {
735 |       e.preventDefault();
736 |       donationModal.style.display = 'block';
737 |       document.body.style.overflow = 'hidden'; // 防止背景滚动
738 |     });
739 |     
740 |     // 点击关闭按钮关闭模态框
741 |     closeModal.addEventListener('click', () => {
742 |       donationModal.style.display = 'none';
743 |       document.body.style.overflow = '';
744 |     });
745 |     
746 |     // 点击模态框外部关闭模态框
747 |     window.addEventListener('click', (e) => {
748 |       if (e.target === donationModal) {
749 |         donationModal.style.display = 'none';
750 |         document.body.style.overflow = '';
751 |       }
752 |     });
753 |     
754 |     // ESC键关闭模态框
755 |     document.addEventListener('keydown', (e) => {
756 |       if (e.key === 'Escape' && donationModal.style.display === 'block') {
757 |         donationModal.style.display = 'none';
758 |         document.body.style.overflow = '';
759 |       }
760 |     });
761 |   }
762 | });
763 | 
764 | // 初始化AI模型选择器
765 | function initAIModelSelector() {
766 |   // 定义可用的模型列表
767 |   const availableModels = {
768 |     'ark': [
769 |       { id: 'ep-20250330093147-r2gkz', name: 'ARK 默认模型' }
770 |     ],
771 |     'tuzi': [
772 |       { id: 'claude-3-7-sonnet-20250219-o', name: 'Claude 3.7 Sonnet' },
773 |       { id: 'claude-3-7-sonnet-thinking', name: 'Claude 3.7 Sonnet Thinking' },
774 |       { id: 'claude-3-7-sonnet-20250219-fast', name: 'Claude 3.7 Sonnet Fast' },
775 |       { id: 'deepseek-v3-0324', name: 'DeepSeek V3' },
776 |       { id: 'gpt-4o-all', name: 'GPT-4 All' }
777 |     ]
778 |   };
779 |   
780 |   // 当提供商选择变化时更新模型列表
781 |   aiProviderSelect.addEventListener('change', () => {
782 |     const provider = aiProviderSelect.value;
783 |     updateModelOptions(provider, availableModels);
784 |     updateConfigFromInputs();
785 |   });
786 |   
787 |   // 当模型选择变化时更新配置
788 |   aiModelSelect.addEventListener('change', updateConfigFromInputs);
789 |   
790 |   // 初始化模型列表
791 |   updateModelOptions(aiProviderSelect.value, availableModels);
792 | }
793 | 
794 | // 更新模型选项
795 | function updateModelOptions(provider, availableModels) {
796 |   // 清空当前选项
797 |   aiModelSelect.innerHTML = '';
798 |   
799 |   // 添加新选项
800 |   if (availableModels[provider]) {
801 |     availableModels[provider].forEach(model => {
802 |       const option = document.createElement('option');
803 |       option.value = model.id;
804 |       option.textContent = model.name;
805 |       
806 |       // 如果是当前配置中的模型，或者是第一个选项且当前配置中没有模型，则设为选中
807 |       if (model.id === currentConfig.model || (model.id === availableModels[provider][0].id && !currentConfig.model)) {
808 |         option.selected = true;
809 |       }
810 |       
811 |       aiModelSelect.appendChild(option);
812 |     });
813 |   }
814 |   
815 |   // 确保当前配置中的模型与选中的模型一致
816 |   currentConfig.model = aiModelSelect.value;
817 |   console.log('设置模型选择器，当前选中模型:', aiModelSelect.value);
818 | }
819 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "AI卡片生成器 CardsGo",
 3 |   "short_name": "CardsGo",
 4 |   "description": "将文字转化为精美知识卡片，提取金句，生成设计感强的知识卡片",
 5 |   "start_url": "/",
 6 |   "display": "standalone",
 7 |   "background_color": "#ffffff",
 8 |   "theme_color": "#ffffff",
 9 |   "icons": [
10 |     {
11 |       "src": "/icon/web/icon-192.png",
12 |       "sizes": "192x192",
13 |       "type": "image/png"
14 |     },
15 |     {
16 |       "src": "/icon/web/icon-512.png",
17 |       "sizes": "512x512",
18 |       "type": "image/png"
19 |     },
20 |     {
21 |       "src": "/icon/web/icon-192-maskable.png",
22 |       "sizes": "192x192",
23 |       "type": "image/png",
24 |       "purpose": "maskable"
25 |     },
26 |     {
27 |       "src": "/icon/web/icon-512-maskable.png",
28 |       "sizes": "512x512",
29 |       "type": "image/png",
30 |       "purpose": "maskable"
31 |     }
32 |   ]
33 | }
34 | 


--------------------------------------------------------------------------------
/routes/api.js:
--------------------------------------------------------------------------------
   1 | // API路由模块
   2 | import express from 'express';
   3 | import { getAIResponse } from '../services/aiService.js';
   4 | import fs from 'fs/promises';
   5 | import path from 'path';
   6 | import { fileURLToPath } from 'url';
   7 | 
   8 | // 获取当前文件的目录路径
   9 | const __filename = fileURLToPath(import.meta.url);
  10 | const __dirname = path.dirname(__filename);
  11 | 
  12 | const router = express.Router();
  13 | 
  14 | // 获取设计风格列表
  15 | router.get('/design-styles', async (req, res) => {
  16 |   try {
  17 |     // 从卡片生成器模块导入设计风格列表
  18 |     const { DESIGN_STYLES } = await import('../prompts/card.js');
  19 |     res.json(DESIGN_STYLES);
  20 |   } catch (error) {
  21 |     console.error('获取设计风格列表时出错:', error);
  22 |     res.status(500).json({ error: error.message });
  23 |   }
  24 | });
  25 | 
  26 | // 处理生成卡片HTML请求 - 与前端代码匹配
  27 | router.get('/generate-cards-html', async (req, res) => {
  28 |   try {
  29 |     console.log('收到生成卡片HTML请求:', req.query);
  30 |     
  31 |     // 从查询参数中提取主题和配置
  32 |     const { theme, ...configParams } = req.query;
  33 |     
  34 |     if (!theme) {
  35 |       return res.status(400).send(`
  36 |         <!DOCTYPE html>
  37 |         <html lang="zh-CN">
  38 |         <head>
  39 |           <meta charset="UTF-8">
  40 |           <meta name="viewport" content="width=device-width, initial-scale=1.0">
  41 |           <title>生成失败</title>
  42 |           <style>
  43 |             body {
  44 |               font-family: 'Noto Sans SC', sans-serif;
  45 |               background-color: #f5f5f5;
  46 |               display: flex;
  47 |               justify-content: center;
  48 |               align-items: center;
  49 |               height: 100vh;
  50 |               margin: 0;
  51 |               padding: 20px;
  52 |               text-align: center;
  53 |             }
  54 |             .error-container {
  55 |               max-width: 500px;
  56 |               padding: 30px;
  57 |               background-color: white;
  58 |               border-radius: 10px;
  59 |               box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  60 |             }
  61 |             h1 {
  62 |               color: #e74c3c;
  63 |               margin-bottom: 20px;
  64 |             }
  65 |             p {
  66 |               color: #666;
  67 |               margin-bottom: 30px;
  68 |               line-height: 1.6;
  69 |             }
  70 |             a {
  71 |               display: inline-block;
  72 |               padding: 10px 20px;
  73 |               background-color: #3498db;
  74 |               color: white;
  75 |               border: none;
  76 |               border-radius: 5px;
  77 |               cursor: pointer;
  78 |               text-decoration: none;
  79 |               font-size: 16px;
  80 |             }
  81 |           </style>
  82 |           <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
  83 |         </head>
  84 |         <body>
  85 |           <div class="error-container">
  86 |             <h1>生成失败</h1>
  87 |             <p>内容是必需的，请输入内容后重试。</p>
  88 |             <a href="/">返回首页</a>
  89 |           </div>
  90 |         </body>
  91 |         </html>
  92 |       `);
  93 |     }
  94 |     
  95 |     // 处理配置参数
  96 |     const config = {};
  97 |     
  98 |     // 处理数字类型参数
  99 |     ['quoteCount', 'cardsPerRow', 'maxQuoteLength'].forEach(param => {
 100 |       if (configParams[param] !== undefined) {
 101 |         const value = parseInt(configParams[param]);
 102 |         if (!isNaN(value)) {
 103 |           config[param] = value;
 104 |         }
 105 |       }
 106 |     });
 107 |     
 108 |     // 特殊处理contextLength，确保0值能被正确处理
 109 |     if (configParams.contextLength !== undefined) {
 110 |       // 如果是字符串'0'或数字0，直接设置为0
 111 |       if (configParams.contextLength === '0' || configParams.contextLength === 0) {
 112 |         config.contextLength = 0;
 113 |       } else {
 114 |         const value = parseInt(configParams.contextLength);
 115 |         if (!isNaN(value)) {
 116 |           config.contextLength = value;
 117 |         }
 118 |       }
 119 |     }
 120 |     
 121 |     // 处理字符串类型参数
 122 |     if (configParams.aspectRatio) {
 123 |       config.aspectRatio = configParams.aspectRatio;
 124 |     }
 125 |     
 126 |     // 处理风格选择参数
 127 |     if (configParams.styleSelection) {
 128 |       // 如果是字符串（逗号分隔的代码），转换为数组
 129 |       if (typeof configParams.styleSelection === 'string') {
 130 |         config.styleSelection = configParams.styleSelection.split(',');
 131 |       } else if (Array.isArray(configParams.styleSelection)) {
 132 |         config.styleSelection = configParams.styleSelection;
 133 |       }
 134 |     }
 135 |     
 136 |     // 处理内容处理模式
 137 |     if (configParams.mode) {
 138 |       config.mode = configParams.mode;
 139 |     }
 140 |     
 141 |     // 处理高度设置
 142 |     if (configParams.maxHeight) {
 143 |       config.maxHeight = parseInt(configParams.maxHeight);
 144 |     }
 145 |     
 146 |     if (configParams.minHeight) {
 147 |       config.minHeight = parseInt(configParams.minHeight);
 148 |     }
 149 |     
 150 |     console.log('使用配置生成卡片HTML:', config);
 151 |     
 152 |     // 从卡片生成器获取提示词
 153 |     const { getCardGeneratorPrompt } = await import('../prompts/card.js');
 154 |     const systemPrompt = getCardGeneratorPrompt(config);
 155 |     
 156 |     // 构建提示词 - 现在将用户输入视为内容而不是主题词
 157 |     const userPrompt = `以下是需要提取金句并创建知识卡片的内容：
 158 | 
 159 | ${theme}`;
 160 |     
 161 |     // 根据模式调整系统提示词
 162 |     let fullSystemPrompt = systemPrompt;
 163 |     if (config.mode === 'literal') {
 164 |       // 字面模式：不进行提取或改写，完全基于原文内容
 165 |       fullSystemPrompt = systemPrompt.replace(
 166 |         "你的任务是从用户提供的内容中提取关键金句",
 167 |         "你的任务是完全基于用户提供的原文内容制作知识卡片，不要进行提取或改写"
 168 |       );
 169 |     }
 170 |     
 171 |     // 存储提示词到会话，以便后续查看
 172 |     req.session.systemPrompt = systemPrompt;
 173 |     req.session.fullSystemPrompt = fullSystemPrompt;
 174 |     req.session.userPrompt = userPrompt;
 175 |     
 176 |     // 获取AI提供商和模型参数
 177 |     const provider = configParams.provider;
 178 |     const model = configParams.model;
 179 |     console.log('====== 前端选择的AI提供商和模型 ======');
 180 |     console.log('提供商:', provider);
 181 |     console.log('模型ID:', model);
 182 |     console.log('请求来源IP:', req.ip);
 183 |     console.log('请求参数:', JSON.stringify(req.query));
 184 |     console.log('=======================================');
 185 |     
 186 |     // 调用AI服务
 187 |     console.log('开始调用AI服务生成卡片HTML...');
 188 |     const { getAIResponse } = await import('../services/aiService.js');
 189 |     
 190 |     // 明确指定要使用的 AI 提供商和模型
 191 |     const aiOptions = { provider, model };
 192 |     console.log('GET 请求传递给 getAIResponse 的选项:', JSON.stringify(aiOptions));
 193 |     
 194 |     // 调用 AI 服务，并传递 AI 提供商和模型参数
 195 |     const response = await getAIResponse(userPrompt, fullSystemPrompt, aiOptions);
 196 |     console.log('AI服务响应成功，响应长度:', response.length);
 197 |     
 198 |     // 尝试提取HTML
 199 |     console.log('尝试从响应中提取HTML...');
 200 |     let html = '';
 201 |     
 202 |     // 尝试从代码块中提取HTML
 203 |     const htmlCodeBlockRegex = /```html([\s\S]*?)```/;
 204 |     const match = response.match(htmlCodeBlockRegex);
 205 |     
 206 |     if (match && match[1]) {
 207 |       html = match[1].trim();
 208 |       console.log('提取到HTML代码块，长度:', html.length);
 209 |     } else {
 210 |       // 如果没有代码块，检查是否直接返回HTML
 211 |       if (response.includes('<html') || response.includes('<body') || response.includes('<div')) {
 212 |         html = response;
 213 |         console.log('原始响应包含HTML标签，使用原始响应');
 214 |       } else {
 215 |         // 如果不是HTML，则将其包裹在错误消息中
 216 |         console.error('无法从响应中提取HTML');
 217 |         return res.status(500).send(`
 218 |           <!DOCTYPE html>
 219 |           <html lang="zh-CN">
 220 |           <head>
 221 |             <meta charset="UTF-8">
 222 |             <meta name="viewport" content="width=device-width, initial-scale=1.0">
 223 |             <title>生成失败</title>
 224 |             <style>
 225 |               body {
 226 |                 font-family: 'Noto Sans SC', sans-serif;
 227 |                 background-color: #f5f5f5;
 228 |                 display: flex;
 229 |                 justify-content: center;
 230 |                 align-items: center;
 231 |                 height: 100vh;
 232 |                 margin: 0;
 233 |                 padding: 20px;
 234 |                 text-align: center;
 235 |               }
 236 |               .error-container {
 237 |                 max-width: 500px;
 238 |                 padding: 30px;
 239 |                 background-color: white;
 240 |                 border-radius: 10px;
 241 |                 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 242 |               }
 243 |               h1 {
 244 |                 color: #e74c3c;
 245 |                 margin-bottom: 20px;
 246 |               }
 247 |               p {
 248 |                 color: #666;
 249 |                 margin-bottom: 30px;
 250 |                 line-height: 1.6;
 251 |               }
 252 |               a {
 253 |                 display: inline-block;
 254 |                 padding: 10px 20px;
 255 |                 background-color: #3498db;
 256 |                 color: white;
 257 |                 border: none;
 258 |                 border-radius: 5px;
 259 |                 cursor: pointer;
 260 |                 text-decoration: none;
 261 |                 font-size: 16px;
 262 |               }
 263 |             </style>
 264 |             <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
 265 |           </head>
 266 |           <body>
 267 |             <div class="error-container">
 268 |               <h1>生成失败</h1>
 269 |               <p>生成卡片时出现错误，请重试。</p>
 270 |               <a href="/">返回首页</a>
 271 |             </div>
 272 |           </body>
 273 |           </html>
 274 |         `);
 275 |       }
 276 |     }
 277 |     
 278 |     // 构建完整的HTML响应
 279 |     const fullHtml = `
 280 |       <!DOCTYPE html>
 281 |       <html lang="zh-CN">
 282 |       <head>
 283 |         <meta charset="UTF-8">
 284 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 285 |         <title>知识卡片</title>
 286 |         <link rel="stylesheet" href="/css/card-styles.css">
 287 |         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;700&family=ZCOOL+XiaoWei&family=Ma+Shan+Zheng&family=Playfair+Display:wght@400;700&family=Space+Mono&display=swap" rel="stylesheet">
 288 |         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
 289 |         <style>
 290 |           body {
 291 |             font-family: 'Noto Sans SC', sans-serif;
 292 |             background-color: #f5f5f5;
 293 |             padding: 20px;
 294 |             margin: 0;
 295 |             position: relative;
 296 |           }
 297 |           .card-container {
 298 |             display: grid;
 299 |             grid-template-columns: repeat(${config.cardsPerRow || 2}, 1fr);
 300 |             gap: 20px;
 301 |             margin: 0 auto;
 302 |             max-width: 1200px;
 303 |           }
 304 |           @media (max-width: 768px) {
 305 |             .card-container {
 306 |               grid-template-columns: 1fr;
 307 |             }
 308 |           }
 309 |           .aspect-16-9 {
 310 |             aspect-ratio: 16/9;
 311 |           }
 312 |           .aspect-4-3 {
 313 |             aspect-ratio: 4/3;
 314 |           }
 315 |           .aspect-1-1 {
 316 |             aspect-ratio: 1/1;
 317 |           }
 318 |           .aspect-9-16 {
 319 |             aspect-ratio: 9/16;
 320 |           }
 321 |           .aspect-3-4 {
 322 |             aspect-ratio: 3/4;
 323 |           }
 324 |           .aspect-2-1 {
 325 |             aspect-ratio: 2/1;
 326 |           }
 327 |           ${config.maxHeight ? `.card { max-height: ${config.maxHeight}px; }` : ''}
 328 |           ${config.minHeight ? `.card { min-height: ${config.minHeight}px; }` : ''}
 329 |           
 330 |           /* 工具图标样式 */
 331 |           .tools-container {
 332 |             position: fixed;
 333 |             top: 20px;
 334 |             right: 20px;
 335 |             display: flex;
 336 |             gap: 15px;
 337 |             z-index: 1000;
 338 |           }
 339 |           .tool-icon {
 340 |             width: 44px;
 341 |             height: 44px;
 342 |             border-radius: 50%;
 343 |             background-color: #f5f5f5;
 344 |             display: flex;
 345 |             align-items: center;
 346 |             justify-content: center;
 347 |             cursor: pointer;
 348 |             transition: all 0.3s ease;
 349 |             box-shadow: 0 2px 8px rgba(0,0,0,0.15);
 350 |             text-decoration: none;
 351 |           }
 352 |           .tool-icon:hover {
 353 |             background-color: #e8f5e9;
 354 |             transform: translateY(-2px);
 355 |             box-shadow: 0 4px 12px rgba(0,0,0,0.2);
 356 |           }
 357 |           .tool-icon i {
 358 |             font-size: 20px;
 359 |             color: #1a8917;
 360 |           }
 361 |         </style>
 362 |       </head>
 363 |       <body>
 364 |         <!-- 工具图标 -->
 365 |         <div class="tools-container">
 366 |           <a href="/api/view-source" target="_blank" class="tool-icon" title="查看源代码">
 367 |             <i class="fas fa-code"></i>
 368 |           </a>
 369 |           <a href="/api/view-prompt" target="_blank" class="tool-icon" title="查看提示词">
 370 |             <i class="fas fa-magic"></i>
 371 |           </a>
 372 |         </div>
 373 |         
 374 |         ${html}
 375 |         <script src="/js/card.js"></script>
 376 |       </body>
 377 |       </html>
 378 |     `;
 379 |     
 380 |     // 存储卡片数据到会话中，以便加载页面可以检测到生成完成
 381 |     req.session.cardData = {
 382 |       html: fullHtml,
 383 |       timestamp: new Date().toISOString()
 384 |     };
 385 |     
 386 |     // 存储原始HTML代码和原始响应到会话中，以便查看源代码
 387 |     req.session.originalHtml = html;
 388 |     req.session.originalResponse = response;
 389 |     
 390 |     console.log('生成完成，返回HTML内容，长度:', fullHtml.length);
 391 |     res.send(fullHtml);
 392 |   } catch (error) {
 393 |     console.error('生成卡片HTML时出错:', error);
 394 |     res.status(500).send(`
 395 |       <!DOCTYPE html>
 396 |       <html lang="zh-CN">
 397 |       <head>
 398 |         <meta charset="UTF-8">
 399 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 400 |         <title>生成失败</title>
 401 |         <style>
 402 |           body {
 403 |             font-family: 'Noto Sans SC', sans-serif;
 404 |             background-color: #f5f5f5;
 405 |             display: flex;
 406 |             justify-content: center;
 407 |             align-items: center;
 408 |             height: 100vh;
 409 |             margin: 0;
 410 |             padding: 20px;
 411 |             text-align: center;
 412 |           }
 413 |           .error-container {
 414 |             max-width: 500px;
 415 |             padding: 30px;
 416 |             background-color: white;
 417 |             border-radius: 10px;
 418 |             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 419 |           }
 420 |           h1 {
 421 |             color: #e74c3c;
 422 |             margin-bottom: 20px;
 423 |           }
 424 |           p {
 425 |             color: #666;
 426 |             margin-bottom: 30px;
 427 |             line-height: 1.6;
 428 |           }
 429 |           a {
 430 |             display: inline-block;
 431 |             padding: 10px 20px;
 432 |             background-color: #3498db;
 433 |             color: white;
 434 |             border: none;
 435 |             border-radius: 5px;
 436 |             cursor: pointer;
 437 |             text-decoration: none;
 438 |             font-size: 16px;
 439 |           }
 440 |         </style>
 441 |         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
 442 |       </head>
 443 |       <body>
 444 |         <div class="error-container">
 445 |           <h1>生成失败</h1>
 446 |           <p>生成卡片时出现错误，请重试。错误信息: ${error.message}</p>
 447 |           <a href="/">返回首页</a>
 448 |         </div>
 449 |       </body>
 450 |       </html>
 451 |     `);
 452 |   }
 453 | });
 454 | 
 455 | // 处理卡片生成请求
 456 | router.post('/generate-card', async (req, res) => {
 457 |   try {
 458 |     const { theme, ...configParams } = req.body;
 459 |     
 460 |     if (!theme) {
 461 |       return res.status(400).json({ error: '内容是必需的' });
 462 |     }
 463 |     
 464 |     // 处理配置参数
 465 |     const config = {};
 466 |     
 467 |     // 处理数字类型参数
 468 |     ['quoteCount', 'cardsPerRow', 'maxQuoteLength'].forEach(param => {
 469 |       if (configParams[param] !== undefined) {
 470 |         const value = parseInt(configParams[param]);
 471 |         if (!isNaN(value)) {
 472 |           config[param] = value;
 473 |         }
 474 |       }
 475 |     });
 476 |     
 477 |     // 特殊处理contextLength，确保0值能被正确处理
 478 |     if (configParams.contextLength !== undefined) {
 479 |       // 如果是字符串'0'或数字0，直接设置为0
 480 |       if (configParams.contextLength === '0' || configParams.contextLength === 0) {
 481 |         config.contextLength = 0;
 482 |       } else {
 483 |         const value = parseInt(configParams.contextLength);
 484 |         if (!isNaN(value)) {
 485 |           config.contextLength = value;
 486 |         }
 487 |       }
 488 |     }
 489 |     
 490 |     // 处理字符串类型参数
 491 |     if (configParams.aspectRatio) {
 492 |       config.aspectRatio = configParams.aspectRatio;
 493 |     }
 494 |     
 495 |     // 处理风格选择参数
 496 |     if (configParams.styleSelection) {
 497 |       // 如果是字符串（逗号分隔的代码），转换为数组
 498 |       if (typeof configParams.styleSelection === 'string') {
 499 |         config.styleSelection = configParams.styleSelection.split(',');
 500 |       } else if (Array.isArray(configParams.styleSelection)) {
 501 |         config.styleSelection = configParams.styleSelection;
 502 |       }
 503 |     }
 504 |     
 505 |     // 处理内容处理模式
 506 |     if (configParams.mode) {
 507 |       config.mode = configParams.mode;
 508 |     }
 509 |     
 510 |     // 处理高度设置
 511 |     if (configParams.maxHeight) {
 512 |       config.maxHeight = parseInt(configParams.maxHeight);
 513 |     }
 514 |     
 515 |     if (configParams.minHeight) {
 516 |       config.minHeight = parseInt(configParams.minHeight);
 517 |     }
 518 |     
 519 |     console.log('使用配置生成卡片:', config);
 520 |     
 521 |     // 从卡片生成器获取提示词
 522 |     const { getCardGeneratorPrompt } = await import('../prompts/card.js');
 523 |     const systemPrompt = getCardGeneratorPrompt(config);
 524 |     
 525 |     // 构建提示词 - 现在将用户输入视为内容而不是主题词
 526 |     const userPrompt = `以下是需要提取金句并创建知识卡片的内容：
 527 | 
 528 | ${theme}`;
 529 |     
 530 |     // 根据模式调整系统提示词
 531 |     let fullSystemPrompt = systemPrompt;
 532 |     if (config.mode === 'literal') {
 533 |       // 字面模式：不进行提取或改写，完全基于原文内容
 534 |       fullSystemPrompt = systemPrompt.replace(
 535 |         "你的任务是从用户提供的内容中提取关键金句",
 536 |         "你的任务是完全基于用户提供的原文内容制作知识卡片，不要进行提取或改写"
 537 |       );
 538 |     }
 539 |     
 540 |     // 存储提示词到会话，以便后续查看
 541 |     req.session.systemPrompt = systemPrompt;
 542 |     req.session.fullSystemPrompt = fullSystemPrompt;
 543 |     req.session.userPrompt = userPrompt;
 544 |     
 545 |     // 获取AI提供商和模型参数
 546 |     const provider = req.body.provider;
 547 |     const model = req.body.model;
 548 |     console.log('====== 前端选择的AI提供商和模型 ======');
 549 |     console.log('提供商:', provider);
 550 |     console.log('模型ID:', model);
 551 |     console.log('请求来源IP:', req.ip);
 552 |     console.log('请求参数:', JSON.stringify(req.body));
 553 |     console.log('=======================================');
 554 |     
 555 |     // 调用AI服务
 556 |     console.log('开始调用AI服务生成卡片...');
 557 |     let response;
 558 |     try {
 559 |       // 明确指定要使用的 AI 提供商和模型
 560 |       const aiOptions = { provider, model };
 561 |       console.log('传递给 getAIResponse 的选项:', JSON.stringify(aiOptions));
 562 |       
 563 |       // 调用 AI 服务，并传递 AI 提供商和模型参数
 564 |       response = await getAIResponse(userPrompt, fullSystemPrompt, aiOptions);
 565 |       console.log('AI服务响应成功，响应长度:', response.length);
 566 |     } catch (error) {
 567 |       console.error('AI服务调用失败:', error);
 568 |       return res.status(500).json({ error: '生成卡片时出错，请重试' });
 569 |     }
 570 |     
 571 |     // 尝试解析JSON响应
 572 |     let cards = [];
 573 |     let html = '';
 574 |     console.log('开始解析AI响应...');
 575 |     
 576 |     try {
 577 |       // 先尝试从响应中提取JSON
 578 |       console.log('尝试从响应中提取JSON...');
 579 |       const jsonMatch = response.match(/\{[\s\S]*?"cards"[\s\S]*?\}/);
 580 |       if (jsonMatch) {
 581 |         const jsonStr = jsonMatch[0];
 582 |         console.log('找到JSON字符串:', jsonStr.substring(0, 100) + '...');
 583 |         try {
 584 |           const data = JSON.parse(jsonStr);
 585 |           if (data.cards && Array.isArray(data.cards)) {
 586 |             cards = data.cards;
 587 |             console.log('成功解析卡片JSON数据:', cards.length + '张卡片');
 588 |           } else {
 589 |             console.error('JSON中没有cards数组或cards不是数组');
 590 |           }
 591 |         } catch (parseError) {
 592 |           console.error('JSON解析错误:', parseError, '原始JSON字符串:', jsonStr);
 593 |           throw parseError;
 594 |         }
 595 |       } else {
 596 |         console.log('没有找到JSON格式的卡片数据');
 597 |       }
 598 |     } catch (jsonError) {
 599 |       console.error('解析JSON失败:', jsonError);
 600 |       
 601 |       // 如果无法解析JSON，尝试提取HTML
 602 |       console.log('尝试从响应中提取HTML...');
 603 |       const htmlCodeBlockRegex = /```html([\s\S]*?)```/;
 604 |       const match = response.match(htmlCodeBlockRegex);
 605 |       
 606 |       if (match && match[1]) {
 607 |         html = match[1].trim();
 608 |         console.log('提取到HTML代码块，长度:', html.length);
 609 |         // 存储原始响应到会话中，以便查看源代码
 610 |         req.session.originalResponse = response;
 611 |       } else {
 612 |         console.log('未找到HTML代码块，检查原始响应...');
 613 |         // 检查原始响应是否包含<div>或<html>标签
 614 |         if (response.includes('<div') || response.includes('<html')) {
 615 |           html = response;
 616 |           console.log('原始响应包含HTML标签，使用原始响应');
 617 |         } else {
 618 |           console.error('原始响应不包含HTML标签，无法生成卡片');
 619 |           html = `<div class="error-message">生成卡片时出错，请重试</div>`;
 620 |         }
 621 |       }
 622 |     }
 623 |     
 624 |     // 如果成功解析到卡片数据，生成新的HTML
 625 |     if (cards.length > 0) {
 626 |       console.log('开始生成卡片HTML...');
 627 |       try {
 628 |         // 获取设计风格映射
 629 |         const { DESIGN_STYLES } = await import('../prompts/card.js');
 630 |         const styleMap = {};
 631 |         DESIGN_STYLES.forEach(style => {
 632 |           styleMap[style.code] = style;
 633 |         });
 634 |         console.log('加载了', DESIGN_STYLES.length, '种设计风格');
 635 |         
 636 |         // 生成卡片HTML
 637 |         const cardsPerRow = config.cardsPerRow || 2;
 638 |         const aspectRatio = config.aspectRatio || '16:9';
 639 |         const aspectClass = 'aspect-' + aspectRatio.replace(':', '-');
 640 |         console.log('卡片设置: 每行', cardsPerRow, '张, 比例', aspectRatio);
 641 |       
 642 |         // 创建卡片容器
 643 |         html = `
 644 |         <div class="card-container cards-per-row-${cardsPerRow}">
 645 |           ${cards.map((card, index) => {
 646 |             // 确定卡片风格
 647 |             let styleCode = card.style || 'MINI';
 648 |             let styleClass = '';
 649 |             
 650 |             // 根据风格代码映射到CSS类
 651 |             switch(styleCode) {
 652 |               case 'VINT': styleClass = 'vintage'; break;
 653 |               case 'TECH': styleClass = 'futuristic'; break;
 654 |               case 'BOLD': styleClass = 'bold-modern'; break;
 655 |               case 'DECO': styleClass = 'art-deco'; break;
 656 |               case 'MINI': styleClass = 'minimalist'; break;
 657 |               case 'SCAN': styleClass = 'constructivism'; break;
 658 |               case 'PUNK': styleClass = 'cyberpunk'; break;
 659 |               case 'JPNM': styleClass = 'neo-futurism'; break;
 660 |               case 'BRIT': styleClass = 'british-rock'; break;
 661 |               default: styleClass = 'minimalist';
 662 |             }
 663 |             
 664 |             // 生成卡片HTML
 665 |             return `
 666 |             <div class="card ${styleClass} ${aspectClass}">
 667 |               ${getStyleSpecificElements(styleClass)}
 668 |               <div class="content">
 669 |                 <div class="quote">${card.quote}</div>
 670 |                 <div class="context">${card.context}</div>
 671 |               </div>
 672 |             </div>`;
 673 |           }).join('')}
 674 |         </div>
 675 |         `;
 676 |       } catch (styleError) {
 677 |         console.error('生成卡片HTML时出错:', styleError);
 678 |         html = `<div class="error-message">生成卡片时出错，请重试</div>`;
 679 |       }
 680 |     }
 681 |     
 682 |     // 将卡片数据存储到会话中，以便加载页面可以检测到生成完成
 683 |     req.session.cardData = {
 684 |       html: html,
 685 |       cards: cards,
 686 |       timestamp: new Date().toISOString()
 687 |     };
 688 |     
 689 |     // 将原始HTML存储到会话中，以便查看源代码
 690 |     // 保存未添加工具图标的原始HTML
 691 |     req.session.originalHtml = html;
 692 |     // 同时保存原始响应，以便查看源代码
 693 |     req.session.originalResponse = response;
 694 |     
 695 |     // 返回HTML内容
 696 |     console.log('生成完成，返回HTML内容，长度:', html.length);
 697 |     
 698 |     // 如果HTML内容为空，则使用原始AI响应
 699 |     if (!html || html.trim() === '') {
 700 |       console.log('HTML内容为空，尝试使用原始AI响应');
 701 |       
 702 |       // 检查原始AI响应是否包含<html>标签
 703 |       if (response.includes('<html') || response.includes('<!DOCTYPE')) {
 704 |         html = response;
 705 |         console.log('使用原始AI响应作为HTML内容，长度:', html.length);
 706 |       }
 707 |       
 708 |       // 检查是否是 Markdown 代码块格式
 709 |       const htmlCodeBlockRegex = /^```html\s*([\s\S]*?)```\s*$/;
 710 |       const match = response.match(htmlCodeBlockRegex);
 711 |       if (match && match[1]) {
 712 |         html = match[1].trim();
 713 |         console.log('从 Markdown 代码块中提取 HTML 内容，长度:', html.length);
 714 |       }
 715 |     }
 716 |     
 717 |     // 处理可能的 Markdown 代码块格式
 718 |     if (html) {
 719 |       // 删除开头的 ```html 标记
 720 |       if (html.trim().startsWith('```html')) {
 721 |         html = html.replace(/^```html\s*/, '');
 722 |       }
 723 |       // 删除结尾的 ``` 标记
 724 |       if (html.trim().endsWith('```')) {
 725 |         html = html.replace(/```\s*$/, '');
 726 |       }
 727 |     }
 728 |     
 729 |     // 在生成的 HTML 内容中直接插入查看源码和提示词的图标
 730 |     // 首先检查 HTML 内容是否已经包含 <body> 标签
 731 |     if (html && html.includes('<body')) {
 732 |       // 如果已经包含 <body>，在 body 标签后插入工具图标
 733 |       const toolsHtml = `
 734 |         <!-- 工具图标 -->
 735 |         <style>
 736 |           /* 工具图标样式 */
 737 |           .tools-container {
 738 |             position: fixed;
 739 |             top: 20px;
 740 |             right: 20px;
 741 |             display: flex;
 742 |             gap: 15px;
 743 |             z-index: 1000;
 744 |           }
 745 |           .tool-icon {
 746 |             width: 44px;
 747 |             height: 44px;
 748 |             border-radius: 50%;
 749 |             background-color: #f5f5f5;
 750 |             display: flex;
 751 |             align-items: center;
 752 |             justify-content: center;
 753 |             cursor: pointer;
 754 |             transition: all 0.3s ease;
 755 |             box-shadow: 0 2px 8px rgba(0,0,0,0.15);
 756 |             text-decoration: none;
 757 |           }
 758 |           .tool-icon:hover {
 759 |             background-color: #e8f5e9;
 760 |             transform: translateY(-2px);
 761 |             box-shadow: 0 4px 12px rgba(0,0,0,0.2);
 762 |           }
 763 |           .tool-icon i {
 764 |             font-size: 20px;
 765 |             color: #1a8917;
 766 |           }
 767 |         </style>
 768 |         <div class="tools-container">
 769 |           <a href="/api/view-source" target="_blank" class="tool-icon" title="查看源代码">
 770 |             <i class="fas fa-code"></i>
 771 |           </a>
 772 |           <a href="/api/view-prompt" target="_blank" class="tool-icon" title="查看提示词">
 773 |             <i class="fas fa-magic"></i>
 774 |           </a>
 775 |         </div>
 776 |       `;
 777 |       
 778 |       // 检查是否已经包含 Font Awesome
 779 |       if (!html.includes('font-awesome')) {
 780 |         // 如果没有 Font Awesome，在 head 标签中添加
 781 |         html = html.replace('<head>', '<head>\n<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">');
 782 |       }
 783 |       
 784 |       // 在 body 标签后插入工具图标
 785 |       html = html.replace('<body>', '<body>\n' + toolsHtml);
 786 |     } else {
 787 |       // 如果不包含 <body>，则在内容开头添加工具图标
 788 |       const toolsHtml = `
 789 |         <!-- 工具图标 -->
 790 |         <style>
 791 |           /* 工具图标样式 */
 792 |           .tools-container {
 793 |             position: fixed;
 794 |             top: 20px;
 795 |             right: 20px;
 796 |             display: flex;
 797 |             gap: 15px;
 798 |             z-index: 1000;
 799 |           }
 800 |           .tool-icon {
 801 |             width: 44px;
 802 |             height: 44px;
 803 |             border-radius: 50%;
 804 |             background-color: #f5f5f5;
 805 |             display: flex;
 806 |             align-items: center;
 807 |             justify-content: center;
 808 |             cursor: pointer;
 809 |             transition: all 0.3s ease;
 810 |             box-shadow: 0 2px 8px rgba(0,0,0,0.15);
 811 |             text-decoration: none;
 812 |           }
 813 |           .tool-icon:hover {
 814 |             background-color: #e8f5e9;
 815 |             transform: translateY(-2px);
 816 |             box-shadow: 0 4px 12px rgba(0,0,0,0.2);
 817 |           }
 818 |           .tool-icon i {
 819 |             font-size: 20px;
 820 |             color: #1a8917;
 821 |           }
 822 |         </style>
 823 |         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
 824 |         <div class="tools-container">
 825 |           <a href="/api/view-source" target="_blank" class="tool-icon" title="查看源代码">
 826 |             <i class="fas fa-code"></i>
 827 |           </a>
 828 |           <a href="/api/view-prompt" target="_blank" class="tool-icon" title="查看提示词">
 829 |             <i class="fas fa-magic"></i>
 830 |           </a>
 831 |         </div>
 832 |       `;
 833 |       
 834 |       // 在内容开头添加工具图标
 835 |       html = toolsHtml + html;
 836 |     }
 837 |     
 838 |     res.json({ html: html });
 839 |     
 840 |     // 返回风格特定元素
 841 |     function getStyleSpecificElements(styleClass) {
 842 |       switch(styleClass) {
 843 |         case 'vintage': 
 844 |           return '<div class="decoration"></div>';
 845 |         case 'futuristic': 
 846 |           return '<div class="grid"></div>';
 847 |         case 'bold-modern': 
 848 |           return '<div class="shape"></div>';
 849 |         case 'art-deco': 
 850 |           return '<div class="pattern"></div>';
 851 |         case 'constructivism': 
 852 |           return '<div class="lines"></div>';
 853 |         case 'cyberpunk': 
 854 |           return '<div class="glitch"></div>';
 855 |         case 'neo-futurism': 
 856 |           return '<div class="circles"></div>';
 857 |         case 'british-rock': 
 858 |           return '<div class="union-jack"></div>';
 859 |         default: 
 860 |           return '';
 861 |       }
 862 |     }
 863 |     
 864 |   } catch (error) {
 865 |     console.error('生成卡片时出错:', error);
 866 |     res.status(500).json({ error: error.message });
 867 |   }
 868 | });
 869 | 
 870 | // 查看原始HTML代码
 871 | router.get('/view-source', (req, res) => {
 872 |   try {
 873 |     // 获取存储在会话中的原始 HTML 代码和原始响应
 874 |     const originalHtml = req.session.originalHtml;
 875 |     const originalResponse = req.session.originalResponse;
 876 |     
 877 |     if (!originalHtml && !originalResponse) {
 878 |       return res.status(404).send('未找到HTML代码，请先生成卡片');
 879 |     }
 880 |     
 881 |     // 处理原始响应中的代码块
 882 |     let displayHtml = originalHtml;
 883 |     
 884 |     // 如果原始HTML为空但有原始响应，尝试从响应中提取HTML代码块
 885 |     if ((!displayHtml || displayHtml.trim() === '') && originalResponse) {
 886 |       const htmlCodeBlockRegex = /```html([\s\S]*?)```/;
 887 |       const match = originalResponse.match(htmlCodeBlockRegex);
 888 |       
 889 |       if (match && match[1]) {
 890 |         displayHtml = match[1].trim();
 891 |         console.log('从原始响应中提取到HTML代码块');
 892 |       } else {
 893 |         // 如果没有找到HTML代码块，就使用原始响应
 894 |         displayHtml = originalResponse;
 895 |         console.log('使用原始响应作为显示内容');
 896 |       }
 897 |     }
 898 |     
 899 |     // 安全转义HTML字符
 900 |     function escapeHtml(unsafe) {
 901 |       return unsafe
 902 |         .replace(/&/g, '&amp;')
 903 |         .replace(/</g, '&lt;')
 904 |         .replace(/>/g, '&gt;')
 905 |         .replace(/"/g, '&quot;')
 906 |         .replace(/'/g, '&#039;');
 907 |     }
 908 |     
 909 |     // 返回一个简单的页面，显示HTML代码
 910 |     res.send(`<!DOCTYPE html>
 911 | <html lang="zh-CN">
 912 | <head>
 913 |   <meta charset="UTF-8">
 914 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 915 |   <title>查看源代码</title>
 916 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
 917 |   <style>
 918 |     body {
 919 |       font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
 920 |       line-height: 1.6;
 921 |       color: #333;
 922 |       max-width: 1200px;
 923 |       margin: 0 auto;
 924 |       padding: 20px;
 925 |     }
 926 |     pre {
 927 |       background-color: #f5f5f5;
 928 |       padding: 15px;
 929 |       border-radius: 5px;
 930 |       overflow-x: auto;
 931 |       font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
 932 |       font-size: 14px;
 933 |       white-space: pre-wrap;
 934 |       position: relative;
 935 |     }
 936 |     .header {
 937 |       display: flex;
 938 |       justify-content: space-between;
 939 |       align-items: center;
 940 |       margin-bottom: 20px;
 941 |     }
 942 |     .back-button {
 943 |       display: inline-block;
 944 |       padding: 8px 16px;
 945 |       background-color: #3498db;
 946 |       color: white;
 947 |       text-decoration: none;
 948 |       border-radius: 4px;
 949 |     }
 950 |     .copy-button {
 951 |       position: absolute;
 952 |       top: 10px;
 953 |       right: 10px;
 954 |       padding: 5px 10px;
 955 |       background-color: rgba(255, 255, 255, 0.8);
 956 |       border: 1px solid #ddd;
 957 |       border-radius: 4px;
 958 |       cursor: pointer;
 959 |       font-size: 14px;
 960 |       display: flex;
 961 |       align-items: center;
 962 |       gap: 5px;
 963 |       transition: all 0.2s ease;
 964 |     }
 965 |     .copy-button:hover {
 966 |       background-color: rgba(255, 255, 255, 1);
 967 |       box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 968 |     }
 969 |     .copy-button i {
 970 |       font-size: 14px;
 971 |     }
 972 |     .copy-success {
 973 |       background-color: #4CAF50 !important;
 974 |       color: white;
 975 |     }
 976 |   </style>
 977 | </head>
 978 | <body>
 979 |   <div class="header">
 980 |     <h1>知识卡片 HTML 源代码</h1>
 981 |     <a href="javascript:history.back()" class="back-button">返回卡片</a>
 982 |   </div>
 983 |   <div style="position: relative;">
 984 |     <textarea id="source-code" readonly style="width: 100%; height: 400px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 14px; padding: 15px; border-radius: 5px; border: 1px solid #ddd; background-color: #f5f5f5;">${displayHtml}</textarea>
 985 |     <button class="copy-button" onclick="copyToClipboard()">
 986 |       <i class="fas fa-copy"></i> 复制代码
 987 |     </button>
 988 |   </div>
 989 |   
 990 |   <script>
 991 |     function copyToClipboard() {
 992 |       try {
 993 |         const codeElement = document.getElementById('source-code');
 994 |         const text = codeElement.textContent;
 995 |         
 996 |         // 创建一个临时元素来复制文本
 997 |         const textArea = document.createElement('textarea');
 998 |         textArea.value = text;
 999 |         document.body.appendChild(textArea);
1000 |         textArea.select();
1001 |         document.execCommand('copy');
1002 |         document.body.removeChild(textArea);
1003 |         
1004 |         // 显示复制成功消息
1005 |         const copyButton = document.querySelector('.copy-button');
1006 |         copyButton.innerHTML = '<i class="fas fa-check"></i> 复制成功';
1007 |         copyButton.classList.add('copy-success');
1008 |         
1009 |         // 2秒后恢复按钮状态
1010 |         setTimeout(() => {
1011 |           copyButton.innerHTML = '<i class="fas fa-copy"></i> 复制代码';
1012 |           copyButton.classList.remove('copy-success');
1013 |         }, 2000);
1014 |       } catch (error) {
1015 |         console.error('复制失败:', error);
1016 |         alert('复制失败: ' + error.message);
1017 |       }
1018 |     }
1019 |   </script>
1020 | </body>
1021 | </html>`);
1022 |   } catch (error) {
1023 |     console.error('查看源代码时出错:', error);
1024 |     res.status(500).send(`查看源代码时出错: ${error.message}`);
1025 |   }
1026 | });
1027 | 
1028 | // 查看提示词
1029 | router.get('/view-prompt', (req, res) => {
1030 |   try {
1031 |     // 获取存储在会话中的提示词
1032 |     const systemPrompt = req.session.systemPrompt;
1033 |     const fullSystemPrompt = req.session.fullSystemPrompt;
1034 |     const userPrompt = req.session.userPrompt;
1035 |     
1036 |     if (!systemPrompt || !userPrompt) {
1037 |       return res.status(404).send('未找到提示词，请先生成卡片');
1038 |     }
1039 |     
1040 |     // 安全转义HTML字符
1041 |     function escapeHtml(unsafe) {
1042 |       return unsafe
1043 |         .replace(/&/g, '&amp;')
1044 |         .replace(/</g, '&lt;')
1045 |         .replace(/>/g, '&gt;')
1046 |         .replace(/"/g, '&quot;')
1047 |         .replace(/'/g, '&#039;');
1048 |     }
1049 |     
1050 |     // 返回一个简单的页面，显示提示词
1051 |     res.send(`<!DOCTYPE html>
1052 | <html lang="zh-CN">
1053 | <head>
1054 |   <meta charset="UTF-8">
1055 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
1056 |   <title>查看提示词</title>
1057 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
1058 |   <style>
1059 |     body {
1060 |       font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
1061 |       line-height: 1.6;
1062 |       color: #333;
1063 |       max-width: 1200px;
1064 |       margin: 0 auto;
1065 |       padding: 20px;
1066 |     }
1067 |     pre {
1068 |       background-color: #f5f5f5;
1069 |       padding: 15px;
1070 |       border-radius: 5px;
1071 |       overflow-x: auto;
1072 |       font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
1073 |       font-size: 14px;
1074 |       white-space: pre-wrap;
1075 |       position: relative;
1076 |     }
1077 |     .header {
1078 |       display: flex;
1079 |       justify-content: space-between;
1080 |       align-items: center;
1081 |       margin-bottom: 20px;
1082 |     }
1083 |     .back-button {
1084 |       display: inline-block;
1085 |       padding: 8px 16px;
1086 |       background-color: #3498db;
1087 |       color: white;
1088 |       text-decoration: none;
1089 |       border-radius: 4px;
1090 |     }
1091 |     .tab-buttons {
1092 |       display: flex;
1093 |       margin-bottom: 20px;
1094 |     }
1095 |     .tab-button {
1096 |       padding: 10px 20px;
1097 |       background-color: #f0f0f0;
1098 |       border: none;
1099 |       cursor: pointer;
1100 |       margin-right: 5px;
1101 |       border-radius: 4px 4px 0 0;
1102 |     }
1103 |     .tab-button.active {
1104 |       background-color: #3498db;
1105 |       color: white;
1106 |     }
1107 |     .tab-content {
1108 |       display: none;
1109 |       position: relative;
1110 |     }
1111 |     .tab-content.active {
1112 |       display: block;
1113 |     }
1114 |     .copy-button {
1115 |       position: absolute;
1116 |       top: 10px;
1117 |       right: 10px;
1118 |       padding: 5px 10px;
1119 |       background-color: rgba(255, 255, 255, 0.8);
1120 |       border: 1px solid #ddd;
1121 |       border-radius: 4px;
1122 |       cursor: pointer;
1123 |       font-size: 14px;
1124 |       display: flex;
1125 |       align-items: center;
1126 |       gap: 5px;
1127 |       transition: all 0.2s ease;
1128 |       z-index: 10;
1129 |     }
1130 |     .copy-button:hover {
1131 |       background-color: rgba(255, 255, 255, 1);
1132 |       box-shadow: 0 2px 5px rgba(0,0,0,0.1);
1133 |     }
1134 |     .copy-button i {
1135 |       font-size: 14px;
1136 |     }
1137 |     .copy-success {
1138 |       background-color: #4CAF50 !important;
1139 |       color: white;
1140 |     }
1141 |   </style>
1142 | </head>
1143 | <body>
1144 |   <div class="header">
1145 |     <h1>知识卡片提示词</h1>
1146 |     
1147 |     <div class="tab-buttons">
1148 |       <button id="system-tab" class="tab-button active" onclick="showTab('system')">系统提示词</button>
1149 |       <button id="full-system-tab" class="tab-button" onclick="showTab('full-system')">完整系统提示词</button>
1150 |       <button id="user-tab" class="tab-button" onclick="showTab('user')">用户提示词</button>
1151 |     </div>
1152 |     
1153 |     <a href="javascript:history.back()" class="back-button">返回卡片</a>
1154 |   </div>
1155 |   
1156 |   <div id="system" class="tab-content active">
1157 |     <h2>基础系统提示词</h2>
1158 |     <pre id="system-prompt">${escapeHtml(systemPrompt)}</pre>
1159 |     <button class="copy-button" onclick="copyToClipboard('system-prompt')">
1160 |       <i class="fas fa-copy"></i> 复制代码
1161 |     </button>
1162 |   </div>
1163 |   
1164 |   <div id="full-system" class="tab-content">
1165 |     <h2>完整系统提示词（包含模式调整）</h2>
1166 |     <pre id="full-system-prompt">${escapeHtml(fullSystemPrompt)}</pre>
1167 |     <button class="copy-button" onclick="copyToClipboard('full-system-prompt')">
1168 |       <i class="fas fa-copy"></i> 复制代码
1169 |     </button>
1170 |   </div>
1171 |   
1172 |   <div id="user" class="tab-content">
1173 |     <h2>用户提示词</h2>
1174 |     <pre id="user-prompt">${escapeHtml(userPrompt)}</pre>
1175 |     <button class="copy-button" onclick="copyToClipboard('user-prompt')">
1176 |       <i class="fas fa-copy"></i> 复制代码
1177 |     </button>
1178 |   </div>
1179 |   
1180 |   <script>
1181 |     function showTab(tabId) {
1182 |       try {
1183 |         // 隐藏所有标签内容
1184 |         document.querySelectorAll('.tab-content').forEach(tab => {
1185 |           tab.classList.remove('active');
1186 |         });
1187 |         
1188 |         // 取消所有标签按钮的活动状态
1189 |         document.querySelectorAll('.tab-button').forEach(button => {
1190 |           button.classList.remove('active');
1191 |         });
1192 |         
1193 |         // 显示选定的标签内容
1194 |         const tabElement = document.getElementById(tabId);
1195 |         if (tabElement) {
1196 |           tabElement.classList.add('active');
1197 |         }
1198 |         
1199 |         // 设置选定的标签按钮为活动状态
1200 |         const buttonElement = document.getElementById(tabId + '-tab');
1201 |         if (buttonElement) {
1202 |           buttonElement.classList.add('active');
1203 |         }
1204 |       } catch (error) {
1205 |         console.error('切换标签时出错:', error);
1206 |       }
1207 |     }
1208 |     
1209 |     function copyToClipboard(elementId) {
1210 |       try {
1211 |         const codeElement = document.getElementById(elementId);
1212 |         const text = codeElement.textContent;
1213 |         
1214 |         // 创建一个临时元素来复制文本
1215 |         const textArea = document.createElement('textarea');
1216 |         textArea.value = text;
1217 |         document.body.appendChild(textArea);
1218 |         textArea.select();
1219 |         document.execCommand('copy');
1220 |         document.body.removeChild(textArea);
1221 |         
1222 |         // 显示复制成功消息
1223 |         const tabId = elementId.replace('-prompt', '');
1224 |         const copyButton = document.querySelector('#' + tabId + ' .copy-button');
1225 |         copyButton.innerHTML = '<i class="fas fa-check"></i> 复制成功';
1226 |         copyButton.classList.add('copy-success');
1227 |         
1228 |         // 2秒后恢复按钮状态
1229 |         setTimeout(() => {
1230 |           copyButton.innerHTML = '<i class="fas fa-copy"></i> 复制代码';
1231 |           copyButton.classList.remove('copy-success');
1232 |         }, 2000);
1233 |       } catch (error) {
1234 |         console.error('复制失败:', error);
1235 |         alert('复制失败: ' + error.message);
1236 |       }
1237 |     }
1238 |   </script>
1239 | </body>
1240 | </html>`);
1241 |   } catch (error) {
1242 |     console.error('查看提示词时出错:', error);
1243 |     res.status(500).send(`查看提示词时出错: ${error.message}`);
1244 |   }
1245 | });
1246 | 
1247 | // 自定义卡片样式 API
1248 | router.get('/custom-card-styles', async (req, res) => {
1249 |   try {
1250 |     // 从请求中获取主题词
1251 |     const theme = req.query.theme;
1252 |     
1253 |     if (!theme) {
1254 |       return res.status(400).json({ error: '主题词是必需的' });
1255 |     }
1256 |     
1257 |     // 生成基于主题的自定义样式
1258 |     const primaryColor = generateColorFromString(theme);
1259 |     const secondaryColor = generateComplementaryColor(primaryColor);
1260 |     
1261 |     // 返回自定义样式
1262 |     res.json({
1263 |       primaryColor,
1264 |       secondaryColor,
1265 |       // 可以添加更多基于主题的样式属性
1266 |     });
1267 |   } catch (error) {
1268 |     console.error('生成自定义样式时出错:', error);
1269 |     res.status(500).json({ error: error.message });
1270 |   }
1271 | });
1272 | 
1273 | // 辅助函数：HTML转义
1274 | function escapeHtml(unsafe) {
1275 |   return unsafe
1276 |     .replace(/&/g, "&amp;")
1277 |     .replace(/</g, "&lt;")
1278 |     .replace(/>/g, "&gt;")
1279 |     .replace(/"/g, "&quot;")
1280 |     .replace(/'/g, "&#039;");
1281 | }
1282 | 
1283 | // 从字符串生成颜色
1284 | // @param {string} str 输入字符串
1285 | // @returns {string} 颜色代码
1286 | function generateColorFromString(str) {
1287 |   let hash = 0;
1288 |   for (let i = 0; i < str.length; i++) {
1289 |     hash = str.charCodeAt(i) + ((hash << 5) - hash);
1290 |   }
1291 |   
1292 |   // 确保颜色不会太暗或太亮
1293 |   let r = (hash & 0xFF0000) >> 16;
1294 |   let g = (hash & 0x00FF00) >> 8;
1295 |   let b = hash & 0x0000FF;
1296 |   
1297 |   // 调整亮度
1298 |   const minBrightness = 30;  // 避免太暗
1299 |   const maxBrightness = 220; // 避免太亮
1300 |   
1301 |   r = Math.max(minBrightness, Math.min(maxBrightness, r));
1302 |   g = Math.max(minBrightness, Math.min(maxBrightness, g));
1303 |   b = Math.max(minBrightness, Math.min(maxBrightness, b));
1304 |   
1305 |   return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
1306 | }
1307 | 
1308 | // 生成互补色
1309 | // @param {string} hexColor 原始颜色
1310 | // @returns {string} 互补颜色
1311 | function generateComplementaryColor(hexColor) {
1312 |   // 移除#前缀
1313 |   const hex = hexColor.replace('#', '');
1314 |   
1315 |   // 转换为RGB
1316 |   const r = parseInt(hex.substring(0, 2), 16);
1317 |   const g = parseInt(hex.substring(2, 4), 16);
1318 |   const b = parseInt(hex.substring(4, 6), 16);
1319 |   
1320 |   // 计算互补色 (255 - 原色)
1321 |   const compR = 255 - r;
1322 |   const compG = 255 - g;
1323 |   const compB = 255 - b;
1324 |   
1325 |   // 转换回十六进制
1326 |   return `#${((1 << 24) + (compR << 16) + (compG << 8) + compB).toString(16).slice(1)}`;
1327 | }
1328 | 
1329 | export default router;
1330 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | // server.js
 2 | import express from 'express';
 3 | import path from 'path';
 4 | import { fileURLToPath } from 'url';
 5 | import dotenv from 'dotenv';
 6 | import session from 'express-session';
 7 | import compression from 'compression';
 8 | import apiRoutes from './routes/api.js';
 9 | 
10 | // 配置环境变量
11 | dotenv.config();
12 | 
13 | const __filename = fileURLToPath(import.meta.url);
14 | const __dirname = path.dirname(__filename);
15 | 
16 | const app = express();
17 | const PORT = process.env.PORT || 3001;
18 | 
19 | // 中间件
20 | app.use(compression()); // 添加压缩中间件
21 | app.use(express.static(path.join(__dirname, 'public')));
22 | app.use(express.json());
23 | 
24 | // 添加会话支持
25 | app.use(session({
26 |   secret: 'cards-go-secret-key',
27 |   resave: false,
28 |   saveUninitialized: true,
29 |   cookie: { maxAge: 3600000 } // 1小时过期
30 | }));
31 | 
32 | // API路由
33 | app.use('/api', apiRoutes);
34 | 
35 | // 前端路由 - 返回主页
36 | app.get('/', (req, res) => {
37 |   res.sendFile(path.join(__dirname, 'public', 'index.html'));
38 | });
39 | 
40 | // 卡片展示页面路由已备份并删除
41 | 
42 | // 加载页面路由
43 | app.get('/loading', (req, res) => {
44 |   // 直接返回一个简单的加载页面，实际内容会由前端 JavaScript 处理
45 |   res.send(`
46 | <!DOCTYPE html>
47 | <html lang="zh-CN">
48 | <head>
49 |   <meta charset="UTF-8">
50 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
51 |   <title>正在加载...</title>
52 |   <script src="/js/script.js" defer></script>
53 | </head>
54 | <body>
55 |   <div id="loading-container" style="display: flex; justify-content: center; align-items: center; height: 100vh;">
56 |     <p>正在加载，请稍候...</p>
57 |   </div>
58 | </body>
59 | </html>
60 |   `);
61 | });
62 | 
63 | // 启动服务器
64 | app.listen(PORT, () => {
65 |   console.log(`Server running on http://localhost:${PORT}`);
66 | });
67 | 


--------------------------------------------------------------------------------
/services/aiService.js:
--------------------------------------------------------------------------------
  1 | // AIu670du52a1u5c01u88c5u6a21u5757
  2 | import dotenv from 'dotenv';
  3 | import fetch from 'node-fetch';
  4 | import https from 'https';
  5 | import { promisify } from 'util';
  6 | import axios from 'axios';
  7 | 
  8 | // u52a0u8f7du73afu5883u53d8u91cf
  9 | dotenv.config();
 10 | 
 11 | // u68c0u67e5APIu5bc6u94a5
 12 | if (!process.env.ARK_API_KEY) {
 13 |   console.error('Error: ARK_API_KEY is not set in the .env file');
 14 |   process.exit(1);
 15 | }
 16 | 
 17 | // 定义可用的AI服务提供商
 18 | export const AI_PROVIDERS = {
 19 |   ARK: 'ark',
 20 |   TUZI: 'tuzi'
 21 | };
 22 | 
 23 | // 定义模型列表
 24 | export const AVAILABLE_MODELS = {
 25 |   [AI_PROVIDERS.ARK]: [
 26 |     { id: 'ep-20250330093147-r2gkz', name: 'ARK 默认模型' }
 27 |   ],
 28 |   [AI_PROVIDERS.TUZI]: [
 29 |     { id: 'claude-3-7-sonnet-20250219-o', name: 'Claude 3.7 Sonnet' },
 30 |     { id: 'claude-3-7-sonnet-thinking', name: 'Claude 3.7 Sonnet Thinking' },
 31 |     { id: 'claude-3-7-sonnet-20250219-fast', name: 'Claude 3.7 Sonnet Fast' },
 32 |     { id: 'deepseek-v3-0324', name: 'DeepSeek V3' },
 33 |     { id: 'gpt-4o-all', name: 'GPT-4 All' }
 34 |   ]
 35 | };
 36 | 
 37 | // 默认AI提供商和模型
 38 | export const DEFAULT_PROVIDER = AI_PROVIDERS.ARK;
 39 | export const DEFAULT_MODEL = 'ep-20250330093147-r2gkz';
 40 | console.log('默认AI提供商已设置为:', DEFAULT_PROVIDER, '默认模型:', DEFAULT_MODEL);
 41 | 
 42 | /**
 43 |  * u8c03u7528ARK APIu7684u901au7528u51fdu6570
 44 |  * @param {string} prompt - u7528u6237u8f93u5165u7684u63d0u793au8bcd
 45 |  * @param {string} systemPrompt - u7cfbu7edfu63d0u793au8bcduff0cu5b9au4e49AIu7684u884cu4e3a
 46 |  * @param {string} model - u6a21u578bu540du79f0uff0cu9ed8u8ba4u4f7fu7528u73afu5883u53d8u91cfu4e2du7684u6a21u578bID
 47 |  * @param {object} options - u5176u4ed6u9009u9879uff0cu5982u6e29u5ea6u3001u6700u5927tokensu7b49
 48 |  * @returns {Promise<object>} - u8fd4u56deAPIu54cdu5e94
 49 |  */
 50 | 
 51 | export async function callArkAI(prompt, systemPrompt = '你是一个有用的助手。', model = 'ep-20250330093147-r2gkz', options = {}) {
 52 |   try {
 53 |     // 使用传入的模型 ID 或默认值
 54 |     const modelId = model || 'ep-20250330093147-r2gkz';
 55 |     console.log('使用 ARK 模型 ID:', modelId);
 56 |     
 57 |     // 构建消息数组
 58 |     const messages = [
 59 |       { role: 'system', content: systemPrompt },
 60 |       { role: 'user', content: prompt }
 61 |     ];
 62 | 
 63 |     // 构建请求体 - 包含所有必要的参数
 64 |     const requestBody = {
 65 |       model: modelId,
 66 |       messages: messages,
 67 |       stream: false,
 68 |       temperature: 0.7,
 69 |       top_p: 1,
 70 |       n: 1,
 71 |       presence_penalty: 0,
 72 |       frequency_penalty: 0
 73 |     };
 74 |     
 75 |     // 记录请求内容
 76 |     console.log('ARK API请求体:', JSON.stringify(requestBody));
 77 | 
 78 |     // 发送请求
 79 |     const response = await fetch('https://ark.cn-beijing.volces.com/api/v3/chat/completions', {
 80 |       method: 'POST',
 81 |       headers: {
 82 |         'Content-Type': 'application/json',
 83 |         'Authorization': `Bearer ${process.env.ARK_API_KEY}`
 84 |       },
 85 |       body: JSON.stringify(requestBody)
 86 |     });
 87 |     
 88 |     console.log('ARK API请求已发送，状态码:', response.status);
 89 | 
 90 |     // 处理错误响应
 91 |     if (!response.ok) {
 92 |       const errorText = await response.text();
 93 |       console.error('ARK API错误响应:', errorText);
 94 |       throw new Error(`ARK API request failed: ${response.status} ${errorText}`);
 95 |     }
 96 | 
 97 |     // 解析并返回结果
 98 |     const result = await response.json();
 99 |     console.log('ARK API响应成功，返回数据:', JSON.stringify(result).substring(0, 200) + '...');
100 |     return result;
101 |   } catch (error) {
102 |     console.error('Error calling ARK AI:', error);
103 |     throw error;
104 |   }
105 | }
106 | 
107 | /**
108 |  * u83b7u53d6AIu54cdu5e94u7684u5185u5bb9u6587u672c
109 |  * @param {object} apiResponse - APIu54cdu5e94u5bf9u8c61
110 |  * @returns {string} - u8fd4u56deAIu54cdu5e94u7684u6587u672cu5185u5bb9
111 |  */
112 | export function getAIResponseContent(apiResponse) {
113 |   if (apiResponse?.choices && apiResponse.choices[0] && apiResponse.choices[0].message) {
114 |     return apiResponse.choices[0].message.content;
115 |   }
116 |   throw new Error('Invalid API response format');
117 | }
118 | 
119 | /**
120 |  * u7b80u5316u7248u8c03u7528u51fdu6570uff0cu76f4u63a5u8fd4u56deAIu54cdu5e94u6587u672c
121 |  * @param {string} prompt - u7528u6237u8f93u5165u7684u63d0u793au8bcd
122 |  * @param {string} systemPrompt - u7cfbu7edfu63d0u793au8bcd
123 |  * @param {object} options - u5176u4ed6u9009u9879
124 |  * @returns {Promise<string>} - u8fd4u56deAIu54cdu5e94u7684u6587u672cu5185u5bb9
125 |  */
126 | /**
127 |  * 调用兔子API的通用函数
128 |  * @param {string} prompt - 用户输入的提示词
129 |  * @param {string} systemPrompt - 系统提示词，定义AI的行为
130 |  * @param {string} model - 模型名称
131 |  * @param {object} options - 其他选项，如温度、最大tokens等
132 |  * @returns {Promise<object>} - 返回API响应
133 |  */
134 | export async function callTuziAI(prompt, systemPrompt = '你是一个有用的助手。', model = 'claude-3-7-sonnet-20250219-o', options = {}) {
135 |   try {
136 |     console.log('=== 调用Tuzi API ===');
137 |     console.log('Tuzi模型ID:', model);
138 |     console.log('Tuzi API密钥:', process.env.TUZI_API_KEY ? process.env.TUZI_API_KEY.substring(0, 5) + '...' : '未设置');
139 |     
140 |     const messages = [
141 |       { role: 'system', content: systemPrompt },
142 |       { role: 'user', content: prompt }
143 |     ];
144 | 
145 |     // 合并默认选项和用户提供的选项
146 |     const requestOptions = {
147 |       temperature: 0.7,
148 |       max_tokens: 4000,
149 |       ...options
150 |     };
151 |     
152 |     // 构建请求体
153 |     const requestBody = {
154 |       model,
155 |       messages,
156 |       ...requestOptions
157 |     };
158 |     
159 |     // 完整记录请求体，便于调试
160 |     console.log('Tuzi API请求体(完整):', JSON.stringify(requestBody));
161 |     console.log('Tuzi API请求体(摘要):', JSON.stringify(requestBody).substring(0, 200) + '...');
162 | 
163 |     // 创建一个带超时的 fetch 请求
164 |     const controller = new AbortController();
165 |     const timeoutId = setTimeout(() => controller.abort(), 60000); // 60秒超时
166 |     
167 |     try {
168 |       console.log('开始发送Tuzi API请求...');
169 |       
170 |       // 记录完整的请求头信息
171 |       const headers = {
172 |         'Content-Type': 'application/json',
173 |         'Authorization': `Bearer ${process.env.TUZI_API_KEY}`
174 |       };
175 |       console.log('Tuzi API请求头:', JSON.stringify(headers).replace(process.env.TUZI_API_KEY, 'sk-***'));
176 |       
177 |       // 模拟 curl 命令，便于对比
178 |       const curlCommand = `curl -s -X POST https://api.tu-zi.com/v1/chat/completions \
179 | -H "Content-Type: application/json" \
180 | -H "Authorization: Bearer ${process.env.TUZI_API_KEY.substring(0, 5)}..." \
181 | -d '${JSON.stringify(requestBody)}'`;
182 |       console.log('等效的 curl 命令:', curlCommand.substring(0, 200) + '...');
183 |       
184 |       // 添加一个完全模拟 curl 命令的函数
185 |       const curlStyleRequest = async (url, headers, data) => {
186 |         console.log('执行完全模拟 curl 的请求...');
187 |         
188 |         // 使用 child_process 模块直接执行 curl命令
189 |         const { exec } = await import('child_process');
190 |         const util = await import('util');
191 |         const execPromise = util.promisify(exec);
192 |         
193 |         // 构建 curl 命令
194 |         let curlCmd = `curl -s -X POST ${url} `;
195 |         
196 |         // 添加请求头
197 |         Object.entries(headers).forEach(([key, value]) => {
198 |           curlCmd += `-H "${key}: ${value}" `;
199 |         });
200 |         
201 |         // 添加请求体
202 |         curlCmd += `-d '${JSON.stringify(data)}'`;
203 |         
204 |         console.log('执行 curl 命令 (已隐藏敏感信息):', 
205 |                   curlCmd.replace(process.env.TUZI_API_KEY, 'sk-***').substring(0, 200) + '...');
206 |         
207 |         try {
208 |           // 执行 curl 命令
209 |           const { stdout, stderr } = await execPromise(curlCmd);
210 |           
211 |           if (stderr) {
212 |             console.error('curl 命令错误:', stderr);
213 |             throw new Error(`curl 命令执行失败: ${stderr}`);
214 |           }
215 |           
216 |           // 解析响应
217 |           try {
218 |             const parsedData = JSON.parse(stdout);
219 |             console.log('curl 命令执行成功，响应:', JSON.stringify(parsedData).substring(0, 200) + '...');
220 |             return { 
221 |               ok: true, 
222 |               status: 200, 
223 |               json: () => Promise.resolve(parsedData),
224 |               headers: { 'content-type': 'application/json' }
225 |             };
226 |           } catch (parseError) {
227 |             console.error('无法解析 curl 响应:', parseError);
228 |             throw new Error(`无法解析 curl 响应: ${parseError.message}`);
229 |           }
230 |         } catch (execError) {
231 |           console.error('curl 命令执行失败:', execError);
232 |           throw execError;
233 |         }
234 |       };
235 |       
236 |       // 保留原来的 HTTPS 请求函数作为备用
237 |       const makeHttpsRequest = (url, options, data) => {
238 |         return new Promise((resolve, reject) => {
239 |           const req = https.request(url, options, (res) => {
240 |             let responseData = '';
241 |             
242 |             res.on('data', (chunk) => {
243 |               responseData += chunk;
244 |             });
245 |             
246 |             res.on('end', () => {
247 |               if (res.statusCode >= 200 && res.statusCode < 300) {
248 |                 try {
249 |                   const parsedData = JSON.parse(responseData);
250 |                   resolve({ ok: true, status: res.statusCode, json: () => Promise.resolve(parsedData), headers: res.headers });
251 |                 } catch (error) {
252 |                   reject(new Error(`无法解析 JSON 响应: ${error.message}`));
253 |                 }
254 |               } else {
255 |                 reject(new Error(`HTTP 状态码: ${res.statusCode}, 响应: ${responseData}`));
256 |               }
257 |             });
258 |           });
259 |           
260 |           req.on('error', (error) => {
261 |             reject(error);
262 |           });
263 |           
264 |           req.on('timeout', () => {
265 |             req.destroy();
266 |             reject(new Error('请求超时'));
267 |           });
268 |           
269 |           // 设置超时
270 |           req.setTimeout(30000); // 减少超时时间到 30 秒
271 |           
272 |           // 写入请求体
273 |           req.write(data);
274 |           req.end();
275 |         });
276 |       };
277 |       
278 |       // 添加重试机制
279 |       let response;
280 |       let retryCount = 0;
281 |       const maxRetries = 3;
282 |       
283 |       while (retryCount <= maxRetries) {
284 |         try {
285 |           if (retryCount > 0) {
286 |             console.log(`Tuzi API 请求重试 (${retryCount}/${maxRetries})...`);
287 |             // 在重试前等待一段时间
288 |             await new Promise(resolve => setTimeout(resolve, 1000 * retryCount));
289 |           }
290 |           
291 |           // 首先尝试使用 axios 调用 API
292 |           try {
293 |             console.log('尝试使用 axios 调用 Tuzi API...');
294 |             
295 |             // 使用 axios 调用 API
296 |             const axiosResponse = await axios({
297 |               method: 'post',
298 |               url: 'https://api.tu-zi.com/v1/chat/completions',
299 |               headers: headers,
300 |               data: requestBody,
301 |               timeout: 30000, // 30 秒超时
302 |               // 添加特殊的 HTTPS 配置
303 |               httpsAgent: new https.Agent({
304 |                 rejectUnauthorized: true, // 验证 SSL 证书
305 |                 secureProtocol: 'TLSv1_2_method' // 强制使用 TLSv1.2
306 |               })
307 |             });
308 |             
309 |             // 将 axios 响应转换为与 fetch 兼容的格式
310 |             response = {
311 |               ok: axiosResponse.status >= 200 && axiosResponse.status < 300,
312 |               status: axiosResponse.status,
313 |               headers: axiosResponse.headers,
314 |               json: () => Promise.resolve(axiosResponse.data)
315 |             };
316 |             console.log('axios 调用 Tuzi API 成功!');
317 |           } catch (axiosError) {
318 |             console.warn('axios 调用 Tuzi API 失败:', axiosError.message);
319 |             console.log('尝试回退到 curl 命令...');
320 |             
321 |             try {
322 |               console.log('尝试使用 curl 命令直接调用 Tuzi API...');
323 |               
324 |               // 使用 curl 命令直接调用 API
325 |               response = await curlStyleRequest('https://api.tu-zi.com/v1/chat/completions', headers, requestBody);
326 |               console.log('curl 命令调用 Tuzi API 成功!');
327 |             } catch (curlError) {
328 |               console.warn('curl 命令调用 Tuzi API 失败:', curlError.message);
329 |               console.log('尝试回退到 Node.js HTTPS 模块...');
330 |               
331 |               try {
332 |                 console.log('尝试使用 Node.js 原生 HTTPS 模块发送请求...');
333 |                 
334 |                 const httpsOptions = {
335 |                   hostname: 'api.tu-zi.com',
336 |                   path: '/v1/chat/completions',
337 |                   method: 'POST',
338 |                   headers: {
339 |                     'Content-Type': 'application/json',
340 |                     'Authorization': `Bearer ${process.env.TUZI_API_KEY}`,
341 |                     'Content-Length': Buffer.byteLength(JSON.stringify(requestBody))
342 |                   },
343 |                   timeout: 30000 // 30 秒超时
344 |                 };
345 |                 
346 |                 response = await makeHttpsRequest(httpsOptions, httpsOptions, JSON.stringify(requestBody));
347 |                 console.log('Node.js HTTPS 请求成功!');
348 |               } catch (httpsError) {
349 |                 console.warn('Node.js HTTPS 请求失败:', httpsError.message);
350 |                 console.log('尝试回退到 fetch API...');
351 |                 
352 |                 // 如果 HTTPS 模块失败，尝试使用 fetch
353 |                 response = await fetch('https://api.tu-zi.com/v1/chat/completions', {
354 |                   method: 'POST',
355 |                   headers: headers,
356 |                   body: JSON.stringify(requestBody),
357 |                   signal: controller.signal // 使用 AbortController 信号来实现超时控制
358 |                 });
359 |               }
360 |             }
361 |           }
362 |           
363 |           // 如果请求成功，跳出重试循环
364 |           break;
365 |         } catch (retryError) {
366 |           // 如果是最后一次重试或者是超时错误，则抛出错误
367 |           if (retryCount >= maxRetries || retryError.name === 'AbortError') {
368 |             throw retryError;
369 |           }
370 |           
371 |           console.warn(`Tuzi API 请求失败 (${retryCount}/${maxRetries}): ${retryError.message}`);
372 |           retryCount++;
373 |         }
374 |       }
375 |       
376 |       // 清除超时计时器
377 |       clearTimeout(timeoutId);
378 |       
379 |       console.log('Tuzi API请求已发送，状态码:', response.status);
380 |       console.log('Tuzi API响应头:', JSON.stringify(Object.fromEntries([...response.headers])));
381 | 
382 |       if (!response.ok) {
383 |         const errorText = await response.text();
384 |         console.error('Tuzi API错误响应:', errorText);
385 |         throw new Error(`Tuzi API request failed: ${response.status} ${errorText}`);
386 |       }
387 | 
388 |       console.log('Tuzi API响应成功，开始解析响应...');
389 |       const result = await response.json();
390 |       console.log('Tuzi API响应内容:', JSON.stringify(result).substring(0, 200) + '...');
391 |       console.log('=== Tuzi API调用完成 ===');
392 |       return result;
393 |     } catch (fetchError) {
394 |       // 清除超时计时器
395 |       clearTimeout(timeoutId);
396 |       
397 |       // 检查是否是超时错误
398 |       if (fetchError.name === 'AbortError') {
399 |         console.error('Tuzi API 请求超时');
400 |         throw new Error('Tuzi API request timed out after 60 seconds');
401 |       }
402 |       
403 |       // 检查是否是网络连接问题
404 |       if (fetchError.code === 'ECONNRESET' || fetchError.code === 'ENOTFOUND' || fetchError.code === 'ETIMEDOUT') {
405 |         console.error(`Tuzi API 网络连接错误: ${fetchError.code}`, fetchError);
406 |         throw new Error(`Tuzi API network connection error: ${fetchError.code} - ${fetchError.message}`);
407 |       }
408 |       
409 |       // 其他网络错误
410 |       console.error('Tuzi API 网络错误:', fetchError);
411 |       throw new Error(`Tuzi API request failed: ${fetchError.message}`);
412 |       
413 |     }
414 |   } catch (error) {
415 |     console.error('Error calling Tuzi AI:', error);
416 |     throw error;
417 |   }
418 | }
419 | 
420 | /**
421 |  * 根据提供商和模型调用相应的AI服务
422 |  * @param {string} provider - AI服务提供商
423 |  * @param {string} model - 模型ID
424 |  * @param {string} prompt - 用户输入的提示词
425 |  * @param {string} systemPrompt - 系统提示词
426 |  * @param {object} options - 其他选项
427 |  * @returns {Promise<object>} - 返回API响应
428 |  */
429 | export async function callAI(provider = DEFAULT_PROVIDER, model, prompt, systemPrompt, options = {}) {
430 |   // 详细记录传入的参数
431 |   console.log('callAI函数接收到的参数:');
432 |   console.log('- 提供商:', provider);
433 |   console.log('- 模型:', model);
434 |   console.log('- 系统提示词长度:', systemPrompt?.length || 0);
435 |   console.log('- 用户提示词长度:', prompt?.length || 0);
436 |   console.log('- 选项:', JSON.stringify(options, null, 2));
437 |   
438 |   // 确保正确处理 provider 参数
439 |   let finalProvider = provider;
440 |   if (provider !== AI_PROVIDERS.ARK && provider !== AI_PROVIDERS.TUZI) {
441 |     console.warn('无效的 AI 提供商:', provider, '，使用默认提供商:', DEFAULT_PROVIDER);
442 |     finalProvider = DEFAULT_PROVIDER;
443 |   }
444 |   
445 |   // 确保 model 参数有值
446 |   let modelId;
447 |   if (finalProvider === AI_PROVIDERS.TUZI) {
448 |     // 如果是 Tuzi API，使用选择的模型或默认 Tuzi 模型
449 |     modelId = model || AVAILABLE_MODELS[AI_PROVIDERS.TUZI][0].id;
450 |   } else {
451 |     // 如果是 ARK API，使用 ARK 的模型 ID
452 |     modelId = model || 'ep-20250330093147-r2gkz'; // 使用传入的模型或 ARK 默认模型
453 |   }
454 |   
455 |   console.log('最终使用的 AI 提供商:', finalProvider);
456 |   console.log('最终使用的模型 ID:', modelId);
457 |   
458 |   // 根据提供商选择调用的 API 函数
459 |   if (finalProvider === AI_PROVIDERS.TUZI) {
460 |     console.log('确认调用 Tuzi API');
461 |     return callTuziAI(prompt, systemPrompt, modelId, options);
462 |   } else {
463 |     console.log('确认调用 ARK API');
464 |     return callArkAI(prompt, systemPrompt, modelId, options);
465 |   }
466 | }
467 | 
468 | export async function getAIResponse(prompt, systemPrompt = '你是一个有用的助手。', options = {}) {
469 |   try {
470 |     // 详细记录传入的选项
471 |     console.log('=== DEBUG: getAIResponse 开始 ===');
472 |     console.log('getAIResponse接收到的选项:', JSON.stringify(options, null, 2));
473 |     console.log('DEFAULT_PROVIDER:', DEFAULT_PROVIDER);
474 |     console.log('DEFAULT_MODEL:', DEFAULT_MODEL);
475 |     
476 |     // 确保正确获取提供商参数
477 |     let provider = options.provider || DEFAULT_PROVIDER;
478 |     console.log('选择的AI提供商:', provider);
479 |     console.log('options.provider:', options.provider);
480 |     
481 |     // 添加一个标志，用于跟踪是否已经尝试过回退
482 |     let hasAttemptedFallback = false;
483 |     
484 |     // 根据提供商选择适当的模型
485 |     let model;
486 |     if (provider === AI_PROVIDERS.TUZI) {
487 |       // 如果是 Tuzi API，使用选择的模型或默认 Tuzi 模型
488 |       model = options.model || AVAILABLE_MODELS[AI_PROVIDERS.TUZI][0].id;
489 |       console.log('使用 Tuzi 提供商，模型 ID:', model);
490 |     } else if (provider === AI_PROVIDERS.ARK) {
491 |       // 如果是 ARK API，使用传入的模型或 ARK 默认模型
492 |       model = options.model || 'ep-20250330093147-r2gkz'; // 确保使用 ARK 的模型
493 |       console.log('使用 ARK 提供商，模型 ID:', model);
494 |     } else {
495 |       // 未知提供商，使用默认值
496 |       console.warn('未知的 AI 提供商:', provider, '，使用默认提供商:', DEFAULT_PROVIDER);
497 |       model = provider === AI_PROVIDERS.ARK ? 'ep-20250330093147-r2gkz' : DEFAULT_MODEL;
498 |     }
499 |     
500 |     console.log('============= AI请求开始 =============');
501 |     console.log(`发送请求到${provider.toUpperCase()}服务，使用模型:`, model);
502 |     console.log('提供商:', provider);
503 |     console.log('模型ID:', model);
504 |     console.log('最终确认的AI提供商和模型:', { provider, model });
505 |     console.log('模型:', model);
506 |     console.log('系统提示词长度:', systemPrompt.length);
507 |     console.log('用户提示词长度:', prompt.length);
508 |     console.log('用户提示词前100字:', prompt.substring(0, 100));
509 |     
510 |     let response;
511 |     try {
512 |       // 确保model参数有效
513 |       if (!model || model.trim() === '') {
514 |         model = provider === AI_PROVIDERS.ARK ? DEFAULT_MODEL : AVAILABLE_MODELS[AI_PROVIDERS.TUZI][0].id;
515 |         console.log('模型参数为空，使用默认模型:', model);
516 |       }
517 |       
518 |       // 确保正确传递provider和model参数
519 |       const aiOptions = { ...options, provider, model };
520 |       console.log('调用AI服务的最终选项:', JSON.stringify(aiOptions, null, 2));
521 |       
522 |       try {
523 |         // 尝试调用选择的 AI 提供商
524 |         response = await callAI(provider, model, prompt, systemPrompt, aiOptions);
525 |         console.log('AI服务原始响应:', JSON.stringify(response).substring(0, 200) + '...');
526 |       } catch (primaryError) {
527 |         // 如果是 Tuzi API 失败，尝试回退到 ARK API
528 |         if (provider === AI_PROVIDERS.TUZI && !hasAttemptedFallback) {
529 |           console.warn(`Tuzi API 调用失败: ${primaryError.message}，尝试回退到 ARK API`);
530 |           hasAttemptedFallback = true;
531 |           
532 |           // 切换到 ARK API
533 |           const fallbackProvider = AI_PROVIDERS.ARK;
534 |           const fallbackModel = 'ep-20250330093147-r2gkz'; // ARK 默认模型
535 |           
536 |           console.log('回退到 ARK API，模型:', fallbackModel);
537 |           
538 |           // 使用 ARK API 重新尝试
539 |           const fallbackOptions = { ...options, provider: fallbackProvider, model: fallbackModel };
540 |           response = await callAI(fallbackProvider, fallbackModel, prompt, systemPrompt, fallbackOptions);
541 |           console.log('ARK API 回退响应:', JSON.stringify(response).substring(0, 200) + '...');
542 |         } else {
543 |           // 如果不是 Tuzi API 或者已经尝试过回退，直接抛出错误
544 |           console.error('调用AI服务失败:', primaryError);
545 |           throw new Error(`调用${provider.toUpperCase()}服务失败: ${primaryError.message}`);
546 |         }
547 |       }
548 |     } catch (callError) {
549 |       console.error('所有AI服务调用失败:', callError);
550 |       throw new Error(`调用AI服务失败: ${callError.message}`);
551 |     }
552 |     
553 |     console.log('AI服务响应状态:', response.choices ? '成功' : '失败');
554 |     
555 |     if (response.choices && response.choices.length > 0) {
556 |       let content;
557 |       try {
558 |         content = getAIResponseContent(response);
559 |         console.log('AI响应内容长度:', content.length);
560 |         console.log('AI响应内容前100字:', content.substring(0, 100));
561 |         console.log('============= AI请求结束 =============');
562 |         return content;
563 |       } catch (contentError) {
564 |         console.error('解析AI响应内容失败:', contentError);
565 |         throw new Error(`解析${provider.toUpperCase()}响应内容失败: ${contentError.message}`);
566 |       }
567 |     } else {
568 |       console.error('AI响应格式不正确:', JSON.stringify(response));
569 |       throw new Error(`${provider.toUpperCase()}响应格式不正确`);
570 |     }
571 |   } catch (error) {
572 |     console.error('获取AI响应时出错:', error);
573 |     throw error;
574 |   }
575 | }
576 | 


--------------------------------------------------------------------------------