update: 2026-03-28 20:59

InfoGenie-frontend/public/toolbox/学习工具/计算机英语词汇学习/app.js

@@ -0,0 +1,261 @@
+// 计算机英语词汇学习应用
+class VocabularyApp {
+    constructor() {
+        this.vocabulary = vocabularyData;
+        this.currentIndex = 0;
+        this.learningMode = 'sequential'; // sequential, random, reverse
+        this.randomIndices = [];
+        this.history = [];
+        
+        this.initializeElements();
+        this.initializeEventListeners();
+        this.initializeApp();
+    }
+    
+    initializeElements() {
+        // 获取DOM元素
+        this.elements = {
+            wordNumber: document.getElementById('wordNumber'),
+            englishWord: document.getElementById('englishWord'),
+            phonetic: document.getElementById('phonetic'),
+            wordType: document.getElementById('wordType'),
+            chineseMeaning: document.getElementById('chineseMeaning'),
+            currentIndex: document.getElementById('currentIndex'),
+            totalWords: document.getElementById('totalWords'),
+            prevBtn: document.getElementById('prevBtn'),
+            nextBtn: document.getElementById('nextBtn'),
+            sequentialMode: document.getElementById('sequentialMode'),
+            randomMode: document.getElementById('randomMode'),
+            reverseMode: document.getElementById('reverseMode')
+        };
+    }
+    
+    initializeEventListeners() {
+        // 模式切换按钮
+        this.elements.sequentialMode.addEventListener('click', () => this.setLearningMode('sequential'));
+        this.elements.randomMode.addEventListener('click', () => this.setLearningMode('random'));
+        this.elements.reverseMode.addEventListener('click', () => this.setLearningMode('reverse'));
+        
+        // 绑定按钮事件
+        this.elements.prevBtn.addEventListener('click', () => this.previousWord());
+        this.elements.nextBtn.addEventListener('click', () => this.nextWord());
+        
+        // 键盘快捷键
+        document.addEventListener('keydown', (e) => this.handleKeyPress(e));
+    }
+    
+    initializeApp() {
+        // 设置总词汇数
+        this.elements.totalWords.textContent = this.vocabulary.length;
+        
+        // 生成随机索引数组
+        this.generateRandomIndices();
+        
+        // 显示第一个词汇
+        this.displayCurrentWord();
+        
+        // 更新按钮状态
+        this.updateButtonStates();
+    }
+    
+    generateRandomIndices() {
+        // 生成随机索引数组
+        this.randomIndices = Array.from({length: this.vocabulary.length}, (_, i) => i);
+        
+        // Fisher-Yates 洗牌算法
+        for (let i = this.randomIndices.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [this.randomIndices[i], this.randomIndices[j]] = [this.randomIndices[j], this.randomIndices[i]];
+        }
+    }
+    
+    setLearningMode(mode) {
+        this.learningMode = mode;
+        
+        // 更新按钮样式
+        document.querySelectorAll('.mode-btn').forEach(btn => btn.classList.remove('active'));
+        this.elements[mode + 'Mode'].classList.add('active');
+        
+        // 重置当前索引
+        this.currentIndex = 0;
+        this.history = [];
+        
+        // 如果是随机模式，重新生成随机索引
+        if (mode === 'random') {
+            this.generateRandomIndices();
+        }
+        
+        // 显示当前词汇
+        this.displayCurrentWord();
+        this.updateButtonStates();
+    }
+    
+    getCurrentWordIndex() {
+        switch (this.learningMode) {
+            case 'sequential':
+                return this.currentIndex;
+            case 'random':
+                return this.randomIndices[this.currentIndex];
+            case 'reverse':
+                return this.vocabulary.length - 1 - this.currentIndex;
+            default:
+                return this.currentIndex;
+        }
+    }
+    
+    displayCurrentWord() {
+        const wordIndex = this.getCurrentWordIndex();
+        const word = this.vocabulary[wordIndex];
+        
+        if (word) {
+            this.elements.wordNumber.textContent = word.id;
+            this.elements.englishWord.textContent = word.word;
+            this.elements.phonetic.textContent = word.phonetic;
+            this.elements.wordType.textContent = word.type;
+            this.elements.chineseMeaning.textContent = word.meaning;
+            this.elements.currentIndex.textContent = this.currentIndex + 1;
+            
+            // 添加动画效果
+            this.addDisplayAnimation();
+        }
+    }
+    
+    addDisplayAnimation() {
+        const card = document.querySelector('.vocabulary-card');
+        card.style.transform = 'scale(0.95)';
+        card.style.opacity = '0.7';
+        
+        setTimeout(() => {
+            card.style.transform = 'scale(1)';
+            card.style.opacity = '1';
+        }, 100);
+    }
+    
+    nextWord() {
+        // 记录当前位置到历史
+        this.history.push(this.currentIndex);
+        
+        // 移动到下一个词汇
+        if (this.currentIndex < this.vocabulary.length - 1) {
+            this.currentIndex++;
+        } else {
+            // 到达末尾，根据模式处理
+            if (this.learningMode === 'random') {
+                // 随机模式：重新洗牌
+                this.generateRandomIndices();
+                this.currentIndex = 0;
+            } else {
+                // 顺序或逆序模式：回到开头
+                this.currentIndex = 0;
+            }
+        }
+        
+        this.displayCurrentWord();
+        this.updateButtonStates();
+    }
+    
+    previousWord() {
+        if (this.history.length > 0) {
+            // 从历史记录中恢复
+            this.currentIndex = this.history.pop();
+        } else if (this.currentIndex > 0) {
+            // 简单向前移动
+            this.currentIndex--;
+        } else {
+            // 在开头时，跳到末尾
+            this.currentIndex = this.vocabulary.length - 1;
+        }
+        
+        this.displayCurrentWord();
+        this.updateButtonStates();
+    }
+    
+    updateButtonStates() {
+        // 更新上一个按钮状态
+        const canGoPrevious = this.history.length > 0 || this.currentIndex > 0;
+        this.elements.prevBtn.disabled = !canGoPrevious;
+        
+        // 更新下一个按钮状态（总是可用）
+        this.elements.nextBtn.disabled = false;
+    }
+    
+
+    
+    handleKeyPress(e) {
+        switch (e.key) {
+            case 'ArrowLeft':
+                e.preventDefault();
+                this.previousWord();
+                break;
+            case 'ArrowRight':
+            case ' ': // 空格键
+                e.preventDefault();
+                this.nextWord();
+                break;
+            case '1':
+                this.setLearningMode('sequential');
+                break;
+            case '2':
+                this.setLearningMode('random');
+                break;
+            case '3':
+                this.setLearningMode('reverse');
+                break;
+        }
+    }
+    
+    // 获取学习统计信息
+    getStats() {
+        return {
+            totalWords: this.vocabulary.length,
+            currentPosition: this.currentIndex + 1,
+            learningMode: this.learningMode,
+            historyLength: this.history.length
+        };
+    }
+}
+
+// 页面加载完成后初始化应用
+document.addEventListener('DOMContentLoaded', () => {
+    window.vocabularyApp = new VocabularyApp();
+    
+    // 添加一些用户提示
+    console.log('计算机英语词汇学习应用已启动！');
+    console.log('快捷键提示：');
+    console.log('← 上一个词汇');
+    console.log('→ 或 空格 下一个词汇');
+    console.log('1 顺序模式');
+    console.log('2 随机模式');
+    console.log('3 逆序模式');
+});
+
+// 防止页面刷新时丢失进度（可选功能）
+window.addEventListener('beforeunload', () => {
+    if (window.vocabularyApp) {
+        const stats = window.vocabularyApp.getStats();
+        localStorage.setItem('vocabularyProgress', JSON.stringify({
+            currentIndex: window.vocabularyApp.currentIndex,
+            learningMode: window.vocabularyApp.learningMode,
+            timestamp: Date.now()
+        }));
+    }
+});
+
+// 页面加载时恢复进度（可选功能）
+window.addEventListener('load', () => {
+    const savedProgress = localStorage.getItem('vocabularyProgress');
+    if (savedProgress && window.vocabularyApp) {
+        try {
+            const progress = JSON.parse(savedProgress);
+            // 只在24小时内的进度才恢复
+            if (Date.now() - progress.timestamp < 24 * 60 * 60 * 1000) {
+                window.vocabularyApp.setLearningMode(progress.learningMode);
+                window.vocabularyApp.currentIndex = progress.currentIndex;
+                window.vocabularyApp.displayCurrentWord();
+                window.vocabularyApp.updateButtonStates();
+            }
+        } catch (e) {
+            console.log('无法恢复学习进度');
+        }
+    }
+});

InfoGenie-frontend/public/toolbox/学习工具/计算机英语词汇学习/background.css

@@ -0,0 +1,139 @@
+/* 背景样式文件 */
+
+/* 主体背景 */
+body {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    background-attachment: fixed;
+}
+
+/* 淡绿色渐变背景变体 */
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #e8f5e8 0%, #a8e6a3 50%, #81c784 100%);
+    opacity: 0.3;
+    z-index: -2;
+}
+
+/* 动态背景装饰 */
+body::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        radial-gradient(circle at 20% 80%, rgba(39, 174, 96, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(46, 204, 113, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 40% 40%, rgba(52, 152, 219, 0.05) 0%, transparent 50%);
+    z-index: -1;
+    animation: backgroundFloat 20s ease-in-out infinite;
+}
+
+/* 背景动画 */
+@keyframes backgroundFloat {
+    0%, 100% {
+        transform: translateY(0px) rotate(0deg);
+    }
+    33% {
+        transform: translateY(-10px) rotate(1deg);
+    }
+    66% {
+        transform: translateY(5px) rotate(-1deg);
+    }
+}
+
+/* 词汇卡片背景增强 */
+.vocabulary-card {
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+/* 按钮背景效果 */
+.control-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s;
+    z-index: -1;
+}
+
+.control-btn {
+    position: relative;
+    overflow: hidden;
+}
+
+.control-btn:hover::before {
+    left: 100%;
+}
+
+/* 模式按钮背景效果 */
+.mode-btn {
+    position: relative;
+    overflow: hidden;
+}
+
+.mode-btn::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+    transition: left 0.4s;
+    z-index: -1;
+}
+
+.mode-btn:hover::before {
+    left: 100%;
+}
+
+/* 响应式背景调整 */
+@media (max-width: 768px) {
+    body::after {
+        animation-duration: 15s;
+    }
+    
+    .vocabulary-card {
+        background: rgba(255, 255, 255, 0.98);
+    }
+}
+
+@media (max-width: 480px) {
+    body::before {
+        opacity: 0.2;
+    }
+    
+    body::after {
+        animation: none;
+    }
+}
+
+/* 深色模式背景支持 */
+@media (prefers-color-scheme: dark) {
+    body {
+        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+    }
+    
+    body::before {
+        background: linear-gradient(135deg, #27ae60 0%, #2ecc71 50%, #16a085 100%);
+        opacity: 0.1;
+    }
+    
+    .vocabulary-card {
+        background: rgba(44, 62, 80, 0.95);
+        color: #ecf0f1;
+        border-color: rgba(39, 174, 96, 0.3);
+    }
+}

InfoGenie-frontend/public/toolbox/学习工具/计算机英语词汇学习/convert_vocabulary.py

@@ -0,0 +1,105 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+计算机英语词汇数据转换脚本
+将txt格式的词汇文件转换为JavaScript数组格式
+"""
+
+import re
+import json
+
+def parse_vocabulary_file(file_path):
+    """解析词汇文件"""
+    vocabulary_list = []
+    
+    with open(file_path, 'r', encoding='utf-8') as file:
+        lines = file.readlines()
+    
+    for line in lines:
+        line = line.strip()
+        if not line or line.startswith('51 - 100') or line.startswith('101 - 150') or line.startswith('151 - 200'):
+            continue
+            
+        # 使用正则表达式匹配词汇条目
+        # 格式: 数字. 单词 [音标] 词性 中文释义
+        pattern = r'^(\d+)\. ([a-zA-Z\-\']+) \[([^\]]*(?:\][^\]]*)*) ([a-zA-Z\.&]+) (.+)$'
+        match = re.match(pattern, line)
+        
+        if match:
+            word_id, word, phonetic, word_type, meaning = match.groups()
+            
+            # 修复音标格式问题
+            if not phonetic.endswith(']'):
+                # 查找下一个有效的词性和释义
+                parts = line.split()
+                for i, part in enumerate(parts):
+                    if part in ['n.', 'v.', 'vt.', 'vi.', 'a.', 'ad.', 'prep.', 'conj.', 'pron.']:
+                        word_type = part
+                        meaning = ' '.join(parts[i+1:])
+                        # 从原始行中提取音标
+                        phonetic_start = line.find('[') + 1
+                        phonetic_end = line.find(word_type) - 1
+                        phonetic = line[phonetic_start:phonetic_end].strip()
+                        break
+            
+            vocabulary_item = {
+                'id': int(word_id),
+                'word': word.strip(),
+                'phonetic': f'[{phonetic}]',
+                'type': word_type.strip(),
+                'meaning': meaning.strip()
+            }
+            
+            vocabulary_list.append(vocabulary_item)
+    
+    return vocabulary_list
+
+def generate_js_file(vocabulary_list, output_path):
+    """生成JavaScript文件"""
+    js_content = '''// 计算机英语词汇数据
+const vocabularyData = [
+'''
+    
+    for i, item in enumerate(vocabulary_list):
+        js_content += f'    {{ id: {item["id"]}, word: "{item["word"]}", phonetic: "{item["phonetic"]}", type: "{item["type"]}", meaning: "{item["meaning"]}" }}'
+        
+        if i < len(vocabulary_list) - 1:
+            js_content += ',\n'
+        else:
+            js_content += '\n'
+    
+    js_content += '''];
+
+// 导出数据供其他文件使用
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = vocabularyData;
+}
+'''
+    
+    with open(output_path, 'w', encoding='utf-8') as file:
+        file.write(js_content)
+    
+    print(f'成功生成JavaScript文件: {output_path}')
+    print(f'共转换 {len(vocabulary_list)} 个词汇')
+
+def main():
+    """主函数"""
+    input_file = '计算机英语词汇.txt'
+    output_file = 'vocabulary-data.js'
+    
+    try:
+        print('开始解析词汇文件...')
+        vocabulary_list = parse_vocabulary_file(input_file)
+        
+        print('开始生成JavaScript文件...')
+        generate_js_file(vocabulary_list, output_file)
+        
+        print('转换完成！')
+        
+    except FileNotFoundError:
+        print(f'错误: 找不到文件 {input_file}')
+    except Exception as e:
+        print(f'转换过程中发生错误: {e}')
+
+if __name__ == '__main__':
+    main()

InfoGenie-frontend/public/toolbox/学习工具/计算机英语词汇学习/index.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>计算机英语词汇学习</title>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="background.css">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>计算机英语词汇学习</h1>
+            <div class="mode-selector">
+                <button id="sequentialMode" class="mode-btn active">顺序</button>
+                <button id="randomMode" class="mode-btn">随机</button>
+                <button id="reverseMode" class="mode-btn">逆序</button>
+            </div>
+        </header>
+        
+        <main>
+            <div class="vocabulary-card">
+                <div class="word-number" id="wordNumber">1</div>
+                <div class="word-content">
+                    <div class="english-word" id="englishWord">file</div>
+                    <div class="phonetic" id="phonetic">[fail]</div>
+                    <div class="word-type" id="wordType">n.</div>
+                    <div class="chinese-meaning" id="chineseMeaning">文件；v. 保存文件</div>
+                </div>
+            </div>
+            
+            <div class="progress-info">
+                <span id="currentIndex">1</span> / <span id="totalWords">1731</span>
+            </div>
+            
+            <div class="control-buttons">
+                <button id="prevBtn" class="control-btn">上一个</button>
+                <button id="nextBtn" class="control-btn">下一个</button>
+            </div>
+        </main>
+    </div>
+    
+    <script src="vocabulary-data.js"></script>
+    <script src="app.js"></script>
+</body>
+</html>

InfoGenie-frontend/public/toolbox/学习工具/计算机英语词汇学习/styles.css

@@ -0,0 +1,364 @@
+/* 基础样式重置 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+    line-height: 1.6;
+    color: #2c3e50;
+    min-height: 100vh;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* 头部样式 */
+header {
+    text-align: center;
+    margin-bottom: 30px;
+}
+
+header h1 {
+    color: #27ae60;
+    font-size: 2rem;
+    margin-bottom: 20px;
+    font-weight: 600;
+}
+
+/* 模式选择器 */
+.mode-selector {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.mode-btn {
+    padding: 8px 16px;
+    border: 2px solid #27ae60;
+    background: transparent;
+    color: #27ae60;
+    border-radius: 20px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: all 0.3s ease;
+    font-weight: 500;
+}
+
+.mode-btn:hover {
+    background: #27ae60;
+    color: white;
+    transform: translateY(-2px);
+}
+
+.mode-btn.active {
+    background: #27ae60;
+    color: white;
+}
+
+/* 主要内容区域 */
+main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+/* 词汇卡片 */
+.vocabulary-card {
+    background: white;
+    border-radius: 20px;
+    padding: 40px;
+    box-shadow: 0 10px 30px rgba(39, 174, 96, 0.1);
+    text-align: center;
+    margin-bottom: 30px;
+    width: 100%;
+    max-width: 500px;
+    border: 2px solid #e8f5e8;
+    transition: all 0.3s ease;
+}
+
+.vocabulary-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 15px 40px rgba(39, 174, 96, 0.15);
+}
+
+.word-number {
+    color: #95a5a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+    font-weight: 500;
+}
+
+.word-content {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.english-word {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #27ae60;
+    margin-bottom: 10px;
+}
+
+.phonetic {
+    font-size: 1.2rem;
+    color: #7f8c8d;
+    font-style: italic;
+}
+
+.word-type {
+    font-size: 1rem;
+    color: #e67e22;
+    font-weight: 600;
+}
+
+.chinese-meaning {
+    font-size: 1.3rem;
+    color: #2c3e50;
+    font-weight: 500;
+    line-height: 1.5;
+}
+
+/* 进度信息 */
+.progress-info {
+    color: #7f8c8d;
+    font-size: 16px;
+    margin-bottom: 30px;
+    font-weight: 500;
+}
+
+/* 控制按钮 */
+.control-buttons {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.control-btn {
+    padding: 12px 24px;
+    border: 2px solid #27ae60;
+    background: transparent;
+    color: #27ae60;
+    border-radius: 25px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+    min-width: 100px;
+}
+
+.control-btn:hover {
+    background: #27ae60;
+    color: white;
+    transform: translateY(-2px);
+}
+
+.control-btn.primary {
+    background: #27ae60;
+    color: white;
+}
+
+.control-btn.primary:hover {
+    background: #219a52;
+    transform: translateY(-2px);
+}
+
+.control-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+}
+
+.control-btn:disabled:hover {
+    background: transparent;
+    color: #27ae60;
+    transform: none;
+}
+
+
+
+/* 平板端适配 (768px - 1024px) */
+@media (min-width: 768px) and (max-width: 1024px) {
+    .container {
+        padding: 30px;
+    }
+    
+    header h1 {
+        font-size: 2.5rem;
+    }
+    
+    .vocabulary-card {
+        padding: 50px;
+    }
+    
+    .english-word {
+        font-size: 3rem;
+    }
+    
+    .control-buttons {
+        gap: 20px;
+    }
+    
+    .control-btn {
+        padding: 15px 30px;
+        font-size: 18px;
+        min-width: 120px;
+    }
+}
+
+/* 电脑端适配 (1024px+) */
+@media (min-width: 1024px) {
+    .container {
+        padding: 40px;
+    }
+    
+    header h1 {
+        font-size: 3rem;
+    }
+    
+    .vocabulary-card {
+        padding: 60px;
+    }
+    
+    .english-word {
+        font-size: 3.5rem;
+    }
+    
+    .phonetic {
+        font-size: 1.4rem;
+    }
+    
+    .chinese-meaning {
+        font-size: 1.5rem;
+    }
+    
+    .control-buttons {
+        gap: 25px;
+    }
+    
+    .control-btn {
+        padding: 15px 35px;
+        font-size: 18px;
+        min-width: 130px;
+    }
+    
+    .mode-btn {
+        padding: 10px 20px;
+        font-size: 16px;
+    }
+    
+
+}
+
+/* 手机端优化 (最大767px) */
+@media (max-width: 767px) {
+    .container {
+        padding: 15px;
+    }
+    
+    header h1 {
+        font-size: 1.8rem;
+        margin-bottom: 15px;
+    }
+    
+    .mode-selector {
+        gap: 8px;
+        margin-bottom: 15px;
+    }
+    
+    .mode-btn {
+        padding: 6px 12px;
+        font-size: 12px;
+        border-radius: 15px;
+    }
+    
+    .vocabulary-card {
+        padding: 25px 20px;
+        margin-bottom: 20px;
+        border-radius: 15px;
+    }
+    
+    .english-word {
+        font-size: 2rem;
+        margin-bottom: 8px;
+    }
+    
+    .phonetic {
+        font-size: 1rem;
+    }
+    
+    .word-type {
+        font-size: 0.9rem;
+    }
+    
+    .chinese-meaning {
+        font-size: 1.1rem;
+    }
+    
+    .word-content {
+        gap: 10px;
+    }
+    
+    .progress-info {
+        font-size: 14px;
+        margin-bottom: 20px;
+    }
+    
+    .control-buttons {
+        gap: 10px;
+        width: 100%;
+    }
+    
+    .control-btn {
+        padding: 10px 16px;
+        font-size: 14px;
+        min-width: 80px;
+        flex: 1;
+    }
+
+}
+
+/* 超小屏幕优化 (最大480px) */
+@media (max-width: 480px) {
+    .container {
+        padding: 10px;
+    }
+    
+    header h1 {
+        font-size: 1.5rem;
+    }
+    
+    .vocabulary-card {
+        padding: 20px 15px;
+    }
+    
+    .english-word {
+        font-size: 1.8rem;
+    }
+    
+    .control-buttons {
+        flex-direction: column;
+        gap: 8px;
+    }
+    
+    .control-btn {
+        width: 100%;
+        min-width: auto;
+    }
+    
+
+}

InfoGenie-frontend/public/toolbox/学习工具/计算机英语词汇学习/生成要求模板.txt

@@ -0,0 +1,6 @@
+1.生成为静态网页，js，css，html分离出来，不要混合在一起放入html里，难以阅读
+2.网页要适配手机端，电脑端和平板端三个设备分别做不同的css格式，优先优化手机端用户体验
+3.网页默认风格以淡绿色清新风格为主，除非用户要求
+4.尽量不要引用外部css，js，实在要引用就使用中国国内的cdn，否则用户可能加载不出来
+6.严格按照用户要求执行，不得随意添加什么注解，如“以下数据来自...”
+8.在css中有关背景的css单独一个css文件，方便我直接迁移