部分修复

2025-09-04 13:38:14 +08:00
parent cca1a969c5
commit eb13979d4d
137 changed files with 6848 additions and 26965 deletions
--- a/frontend/aimodelapp/AI变量命名助手/index.html
+++ b/frontend/aimodelapp/AI变量命名助手/index.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AI变量命名助手</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1 class="title">AI变量命名助手</h1>
+      <p class="subtitle">让AI帮您生成规范的变量名</p>
+    </div>
+
+    <div class="form-section">
+      <div class="form-group">
+        <label class="form-label" for="description">变量描述：</label>
+        <textarea 
+          id="description" 
+          class="form-input textarea" 
+          placeholder="请描述变量的用途，例如：用户的姓名、商品的价格、数据库连接状态等..."
+        >用户的姓名</textarea>
+      </div>
+
+      <!-- 命名规范选择已移除，将生成所有5种规范的建议 -->
+
+      <button id="generateBtn" class="btn">生成变量名</button>
+    </div>
+
+    <div class="result-section">
+      <h3 class="result-title">推荐的变量名</h3>
+      <div id="loading" class="loading">正在生成中，请稍候...</div>
+      <div id="suggestions" class="suggestions-container">
+        <div class="placeholder">点击"生成变量名"按钮，AI将为您推荐合适的变量名</div>
+      </div>
+    </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
--- a/frontend/aimodelapp/AI变量命名助手/script.js
+++ b/frontend/aimodelapp/AI变量命名助手/script.js
@@ -0,0 +1,305 @@
+// GitHub Models API 配置
+const GITHUB_TOKEN = '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';
+const API_URL = 'https://models.github.ai/inference/chat/completions';
+const MODEL_NAME = 'openai/gpt-4o-mini';
+
+// DOM 元素
+const descriptionInput = document.getElementById('description');
+const generateBtn = document.getElementById('generateBtn');
+const loadingDiv = document.getElementById('loading');
+const suggestionsContainer = document.getElementById('suggestions');
+
+// 命名规范转换函数
+const namingConventions = {
+    camelCase: (words) => {
+        if (words.length === 0) return '';
+        return words[0].toLowerCase() + words.slice(1).map(word => 
+            word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+        ).join('');
+    },
+    
+    PascalCase: (words) => {
+        return words.map(word => 
+            word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+        ).join('');
+    },
+    
+    snake_case: (words) => {
+        return words.map(word => word.toLowerCase()).join('_');
+    },
+    
+    'kebab-case': (words) => {
+        return words.map(word => word.toLowerCase()).join('-');
+    },
+    
+    CONSTANT_CASE: (words) => {
+        return words.map(word => word.toUpperCase()).join('_');
+    }
+};
+
+// 创建AI提示词
+function createNamingPrompt(description) {
+    return `你是一个专业的变量命名助手。请根据以下描述为变量生成合适的名称：
+
+描述：${description}
+
+请为每种命名规范生成3个变量名建议：
+1. camelCase (驼峰命名法)
+2. PascalCase (帕斯卡命名法) 
+3. snake_case (下划线命名法)
+4. kebab-case (短横线命名法)
+5. CONSTANT_CASE (常量命名法)
+
+要求：
+- 变量名要准确反映功能和用途
+- 严格遵循各自的命名规范
+- 避免使用缩写，除非是广泛认知的缩写
+- 名称要简洁但具有描述性
+- 考虑代码的可读性和维护性
+
+请按以下JSON格式返回：
+{
+  "suggestions": {
+    "camelCase": [
+      {"name": "变量名1", "description": "解释说明1"},
+      {"name": "变量名2", "description": "解释说明2"},
+      {"name": "变量名3", "description": "解释说明3"}
+    ],
+    "PascalCase": [
+      {"name": "变量名1", "description": "解释说明1"},
+      {"name": "变量名2", "description": "解释说明2"},
+      {"name": "变量名3", "description": "解释说明3"}
+    ],
+    "snake_case": [
+      {"name": "变量名1", "description": "解释说明1"},
+      {"name": "变量名2", "description": "解释说明2"},
+      {"name": "变量名3", "description": "解释说明3"}
+    ],
+    "kebab-case": [
+      {"name": "变量名1", "description": "解释说明1"},
+      {"name": "变量名2", "description": "解释说明2"},
+      {"name": "变量名3", "description": "解释说明3"}
+    ],
+    "CONSTANT_CASE": [
+      {"name": "变量名1", "description": "解释说明1"},
+      {"name": "变量名2", "description": "解释说明2"},
+      {"name": "变量名3", "description": "解释说明3"}
+    ]
+  }
+}
+
+只返回JSON格式的结果，不要包含其他文字。`;
+}
+
+// 调用GitHub Models API
+async function callGitHubModelsAPI(prompt) {
+    try {
+        const response = await fetch(API_URL, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${GITHUB_TOKEN}`
+            },
+            body: JSON.stringify({
+                messages: [
+                    {
+                        role: 'user',
+                        content: prompt
+                    }
+                ],
+                model: MODEL_NAME,
+                temperature: 0.7,
+                max_tokens: 1000
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error(`API请求失败: ${response.status} ${response.statusText}`);
+        }
+
+        const data = await response.json();
+        return data.choices[0].message.content;
+    } catch (error) {
+        console.error('API调用错误:', error);
+        throw error;
+    }
+}
+
+// 解析AI响应
+function parseAIResponse(response) {
+    try {
+        // 尝试直接解析JSON
+        const parsed = JSON.parse(response);
+        return parsed.suggestions || {};
+    } catch (error) {
+        // 如果直接解析失败，尝试提取JSON部分
+        const jsonMatch = response.match(/\{[\s\S]*\}/);
+        if (jsonMatch) {
+            try {
+                const parsed = JSON.parse(jsonMatch[0]);
+                return parsed.suggestions || {};
+            } catch (e) {
+                console.error('JSON解析失败:', e);
+            }
+        }
+        
+        // 如果JSON解析失败，返回空对象
+        console.error('无法解析AI响应:', response);
+        return {};
+    }
+}
+
+
+
+// 显示建议
+function displaySuggestions(suggestions) {
+    suggestionsContainer.innerHTML = '';
+    
+    if (!suggestions || Object.keys(suggestions).length === 0) {
+        suggestionsContainer.innerHTML = '<div class="placeholder">暂无建议，请尝试重新生成</div>';
+        return;
+    }
+    
+    // 命名规范的显示名称
+    const conventionNames = {
+        'camelCase': 'camelCase (驼峰命名法)',
+        'PascalCase': 'PascalCase (帕斯卡命名法)',
+        'snake_case': 'snake_case (下划线命名法)',
+        'kebab-case': 'kebab-case (短横线命名法)',
+        'CONSTANT_CASE': 'CONSTANT_CASE (常量命名法)'
+    };
+    
+    // 按命名规范分组显示
+    Object.keys(suggestions).forEach(convention => {
+        if (suggestions[convention] && suggestions[convention].length > 0) {
+            // 创建分组标题
+            const groupTitle = document.createElement('div');
+            groupTitle.className = 'convention-group-title';
+            groupTitle.textContent = conventionNames[convention] || convention;
+            suggestionsContainer.appendChild(groupTitle);
+            
+            // 显示该规范下的建议
+            suggestions[convention].forEach(suggestion => {
+                const suggestionElement = document.createElement('div');
+                suggestionElement.className = 'suggestion-item';
+                suggestionElement.innerHTML = `
+                    <div class="variable-name">${suggestion.name}</div>
+                    <div class="variable-description">${suggestion.description}</div>
+                    <button class="copy-btn" onclick="copyToClipboard('${suggestion.name}', this)">复制</button>
+                `;
+                suggestionsContainer.appendChild(suggestionElement);
+            });
+        }
+    });
+}
+
+// 复制到剪贴板
+function copyToClipboard(text, button) {
+    navigator.clipboard.writeText(text).then(() => {
+        showSuccessToast('已复制到剪贴板');
+        button.textContent = '已复制';
+        setTimeout(() => {
+            button.textContent = '复制';
+        }, 2000);
+    }).catch(err => {
+        console.error('复制失败:', err);
+        // 备用复制方法
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+            document.execCommand('copy');
+            showSuccessToast('已复制到剪贴板');
+            button.textContent = '已复制';
+            setTimeout(() => {
+                button.textContent = '复制';
+            }, 2000);
+        } catch (e) {
+            showErrorMessage('复制失败，请手动复制');
+        }
+        document.body.removeChild(textArea);
+    });
+}
+
+// 显示成功提示
+function showSuccessToast(message) {
+    const toast = document.createElement('div');
+    toast.className = 'success-toast';
+    toast.textContent = message;
+    document.body.appendChild(toast);
+    
+    setTimeout(() => {
+        toast.classList.add('show');
+    }, 100);
+    
+    setTimeout(() => {
+        toast.classList.remove('show');
+        setTimeout(() => {
+            document.body.removeChild(toast);
+        }, 300);
+    }, 2000);
+}
+
+// 显示错误信息
+function showErrorMessage(message) {
+    const errorDiv = document.createElement('div');
+    errorDiv.className = 'error';
+    errorDiv.textContent = message;
+    suggestionsContainer.innerHTML = '';
+    suggestionsContainer.appendChild(errorDiv);
+}
+
+// 显示加载状态
+function showLoading(show) {
+    loadingDiv.style.display = show ? 'block' : 'none';
+    generateBtn.disabled = show;
+    generateBtn.textContent = show ? '生成中...' : '生成变量名';
+}
+
+// 生成变量名建议
+async function generateSuggestions() {
+    const description = descriptionInput.value.trim();
+    
+    if (!description) {
+        showErrorMessage('请输入变量描述');
+        return;
+    }
+    
+    showLoading(true);
+    suggestionsContainer.innerHTML = '';
+    
+    try {
+        const prompt = createNamingPrompt(description);
+        const response = await callGitHubModelsAPI(prompt);
+        const suggestions = parseAIResponse(response);
+        
+        displaySuggestions(suggestions);
+    } catch (error) {
+        console.error('生成建议失败:', error);
+        showErrorMessage(`生成失败: ${error.message}`);
+    } finally {
+        showLoading(false);
+    }
+}
+
+// 事件监听器
+generateBtn.addEventListener('click', generateSuggestions);
+
+// 回车键生成
+descriptionInput.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        generateSuggestions();
+    }
+});
+
+// 页面加载完成后的初始化
+document.addEventListener('DOMContentLoaded', () => {
+    // 设置默认占位符
+    suggestionsContainer.innerHTML = '<div class="placeholder">请输入变量描述，然后点击生成按钮获取所有命名规范的建议</div>';
+});
+
+// 导出函数供HTML调用
+window.copyToClipboard = copyToClipboard;
+window.generateSuggestions = generateSuggestions;
--- a/frontend/aimodelapp/AI变量命名助手/styles.css
+++ b/frontend/aimodelapp/AI变量命名助手/styles.css
@@ -0,0 +1,365 @@
+/* 全局样式重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* 主体样式 */
+body {
+  font-family: 'Microsoft YaHei', '微软雅黑', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  padding: 20px;
+  color: #333;
+  line-height: 1.6;
+}
+
+/* 容器样式 */
+.container {
+  max-width: 700px;
+  margin: 0 auto;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 20px;
+  padding: 30px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10px);
+}
+
+/* 头部样式 */
+.header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.title {
+  font-size: 2.5rem;
+  color: #4a5568;
+  margin-bottom: 10px;
+  font-weight: 300;
+  letter-spacing: 2px;
+}
+
+.subtitle {
+  color: #718096;
+  font-size: 1rem;
+  margin-bottom: 20px;
+}
+
+/* 表单样式 */
+.form-section {
+  margin-bottom: 30px;
+}
+
+.form-group {
+  margin-bottom: 25px;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #4a5568;
+  font-size: 1rem;
+}
+
+.form-input {
+  width: 100%;
+  padding: 15px;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  font-size: 1rem;
+  transition: all 0.3s ease;
+  background: #f7fafc;
+  font-family: inherit;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #667eea;
+  background: #fff;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.textarea {
+  resize: vertical;
+  min-height: 120px;
+}
+
+.select {
+  cursor: pointer;
+  appearance: none;
+  background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23666" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>');
+  background-repeat: no-repeat;
+  background-position: right 15px center;
+  background-size: 12px;
+  padding-right: 40px;
+}
+
+/* 按钮样式 */
+.btn {
+  width: 100%;
+  padding: 15px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-size: 1.1rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-bottom: 25px;
+}
+
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
+}
+
+.btn:active {
+  transform: translateY(0);
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* 结果区域样式 */
+.result-section {
+  margin-top: 30px;
+}
+
+.result-title {
+  font-size: 1.3rem;
+  color: #4a5568;
+  margin-bottom: 15px;
+  text-align: center;
+  font-weight: 500;
+}
+
+.loading {
+  display: none;
+  text-align: center;
+  color: #667eea;
+  font-style: italic;
+  padding: 20px;
+}
+
+.suggestions-container {
+  background: #f7fafc;
+  border: 2px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 20px;
+  min-height: 150px;
+}
+
+.placeholder {
+  text-align: center;
+  color: #a0aec0;
+  font-style: italic;
+  padding: 40px 20px;
+}
+
+/* 分组标题样式 */
+.convention-group-title {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #4a5568;
+  margin: 20px 0 10px 0;
+  padding: 8px 12px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.convention-group-title:first-child {
+  margin-top: 0;
+}
+
+/* 建议项样式 */
+.suggestion-item {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 10px;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  position: relative;
+}
+
+.suggestion-item:hover {
+  border-color: #667eea;
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
+}
+
+.suggestion-item:last-child {
+  margin-bottom: 0;
+}
+
+.variable-name {
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #2d3748;
+  margin-bottom: 5px;
+}
+
+.variable-description {
+  font-size: 0.9rem;
+  color: #718096;
+  line-height: 1.4;
+}
+
+.copy-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: #667eea;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  padding: 5px 10px;
+  font-size: 0.8rem;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.suggestion-item:hover .copy-btn {
+  opacity: 1;
+}
+
+.copy-btn:hover {
+  background: #5a67d8;
+}
+
+/* 错误样式 */
+.error {
+  color: #e53e3e;
+  background: #fed7d7;
+  border: 1px solid #feb2b2;
+  padding: 15px;
+  border-radius: 8px;
+  margin-top: 15px;
+}
+
+/* 成功提示 */
+.success-toast {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: #48bb78;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  opacity: 0;
+  transform: translateX(100%);
+  transition: all 0.3s ease;
+}
+
+.success-toast.show {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  body {
+    padding: 10px;
+  }
+
+  .container {
+    padding: 20px;
+    margin: 10px;
+  }
+
+  .title {
+    font-size: 2rem;
+  }
+
+  .form-input {
+    padding: 12px;
+  }
+
+  .btn {
+    padding: 12px;
+  }
+
+  .suggestions-container {
+    padding: 15px;
+  }
+
+  .suggestion-item {
+    padding: 12px;
+  }
+
+  .copy-btn {
+    position: static;
+    opacity: 1;
+    margin-top: 8px;
+    width: 100%;
+  }
+}
+
+@media (max-width: 480px) {
+  .title {
+    font-size: 1.8rem;
+    letter-spacing: 1px;
+  }
+
+  .container {
+    padding: 15px;
+  }
+
+  .form-input {
+    padding: 10px;
+  }
+
+  .suggestion-item {
+    padding: 10px;
+  }
+
+  .variable-name {
+    font-size: 1rem;
+  }
+
+  .variable-description {
+    font-size: 0.85rem;
+  }
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.suggestion-item {
+  animation: fadeIn 0.3s ease;
+}
+
+/* 加载动画 */
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.loading {
+  animation: pulse 1.5s ease-in-out infinite;
+}