优化结果

2025-09-15 19:08:47 +08:00
parent 72084a8782
commit dcfa89e63c
357 changed files with 16156 additions and 1589 deletions
--- a/InfoGenie-frontend/public/aimodelapp/AI变量命名助手/index.html
+++ b/InfoGenie-frontend/public/aimodelapp/AI变量命名助手/index.html
@@ -0,0 +1,43 @@
+<!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="env.js"></script>
+  <script src="script.js"></script>
+</body>
+</html>
--- a/InfoGenie-frontend/public/aimodelapp/AI变量命名助手/script.js
+++ b/InfoGenie-frontend/public/aimodelapp/AI变量命名助手/script.js
@@ -0,0 +1,244 @@
+// 从配置文件导入设置
+// 配置在 env.js 文件中定义
+
+// 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('_');
+    }
+};
+
+
+
+// 调用后端API
+async function callBackendAPI(description) {
+    try {
+        const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/variable-naming', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                description: description
+            })
+        });
+
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(errorData.error || `API请求失败: ${response.status} ${response.statusText}`);
+        }
+
+        const data = await response.json();
+        if (data.success) {
+            return data.suggestions;
+        } else {
+            throw new Error(data.error || 'API响应格式异常');
+        }
+    } 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 suggestions = await callBackendAPI(description);
+        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/InfoGenie-frontend/public/aimodelapp/AI变量命名助手/styles.css
+++ b/InfoGenie-frontend/public/aimodelapp/AI变量命名助手/styles.css
@@ -0,0 +1,386 @@
+/* 全局样式重置 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* 主体样式 - iOS风格 */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
+  background: linear-gradient(135deg, #87CEEB 0%, #98FB98 100%);
+  min-height: 100vh;
+  padding: 20px;
+  color: #1D1D1F;
+  line-height: 1.47;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* 容器样式 - iOS毛玻璃效果 */
+.container {
+  max-width: 700px;
+  margin: 0 auto;
+  background: rgba(255, 255, 255, 0.85);
+  border-radius: 24px;
+  padding: 32px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
+  backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* 头部样式 - iOS风格 */
+.header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.title {
+  font-size: 2.25rem;
+  color: #1D1D1F;
+  margin-bottom: 8px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+.subtitle {
+  color: #86868B;
+  font-size: 1.0625rem;
+  margin-bottom: 24px;
+  font-weight: 400;
+}
+
+/* 表单样式 - iOS风格 */
+.form-section {
+  margin-bottom: 32px;
+}
+
+.form-group {
+  margin-bottom: 24px;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 600;
+  color: #1D1D1F;
+  font-size: 1rem;
+}
+
+.form-input {
+  width: 100%;
+  padding: 16px;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  font-size: 1rem;
+  transition: all 0.2s ease;
+  background: rgba(255, 255, 255, 0.8);
+  font-family: inherit;
+  backdrop-filter: blur(10px);
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #007AFF;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 0 0 4px rgba(0, 122, 255, 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;
+}
+
+/* 按钮样式 - iOS风格 */
+.btn {
+  width: 100%;
+  padding: 16px;
+  background: #007AFF;
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-size: 1.0625rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
+}
+
+.btn:hover {
+  background: #0056CC;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 16px rgba(0, 122, 255, 0.35);
+}
+
+.btn:active {
+  transform: translateY(0);
+  background: #004499;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+  background: #86868B;
+}
+
+/* 结果区域样式 - iOS风格 */
+.result-section {
+  margin-top: 32px;
+}
+
+.result-title {
+  font-size: 1.25rem;
+  color: #1D1D1F;
+  margin-bottom: 16px;
+  text-align: center;
+  font-weight: 600;
+}
+
+.loading {
+  display: none;
+  text-align: center;
+  color: #007AFF;
+  font-style: normal;
+  padding: 24px;
+  font-weight: 500;
+}
+
+.suggestions-container {
+  background: rgba(255, 255, 255, 0.6);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 16px;
+  padding: 24px;
+  min-height: 150px;
+  backdrop-filter: blur(10px);
+}
+
+.placeholder {
+  text-align: center;
+  color: #86868B;
+  font-style: normal;
+  padding: 40px 20px;
+  font-weight: 400;
+}
+
+/* 分组标题样式 - iOS风格 */
+.convention-group-title {
+  font-size: 1.0625rem;
+  font-weight: 600;
+  color: white;
+  margin: 20px 0 12px 0;
+  padding: 12px 16px;
+  background: #007AFF;
+  border-radius: 12px;
+  text-align: center;
+  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
+}
+
+.convention-group-title:first-child {
+  margin-top: 0;
+}
+
+/* 建议项样式 - iOS风格 */
+.suggestion-item {
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 12px;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  position: relative;
+  backdrop-filter: blur(10px);
+}
+
+.suggestion-item:hover {
+  border-color: rgba(0, 122, 255, 0.3);
+  box-shadow: 0 4px 16px rgba(0, 122, 255, 0.1);
+  background: rgba(255, 255, 255, 0.95);
+}
+
+.suggestion-item:last-child {
+  margin-bottom: 0;
+}
+
+.variable-name {
+  font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
+  font-size: 1.0625rem;
+  font-weight: 600;
+  color: #1D1D1F;
+  margin-bottom: 6px;
+}
+
+.variable-description {
+  font-size: 0.9375rem;
+  color: #86868B;
+  line-height: 1.47;
+}
+
+.copy-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: #007AFF;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 6px 12px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  cursor: pointer;
+  opacity: 0;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 122, 255, 0.25);
+}
+
+.suggestion-item:hover .copy-btn {
+  opacity: 1;
+}
+
+.copy-btn:hover {
+  background: #0056CC;
+  transform: translateY(-1px);
+}
+
+/* 错误样式 - iOS风格 */
+.error {
+  color: #FF3B30;
+  background: rgba(255, 59, 48, 0.1);
+  border: 1px solid rgba(255, 59, 48, 0.2);
+  padding: 16px;
+  border-radius: 12px;
+  margin-top: 16px;
+  font-weight: 500;
+  backdrop-filter: blur(10px);
+}
+
+/* 成功提示 - iOS风格 */
+.success-toast {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  background: #34C759;
+  color: white;
+  padding: 12px 20px;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(52, 199, 89, 0.3);
+  z-index: 1000;
+  opacity: 0;
+  transform: translateX(100%);
+  transition: all 0.3s ease;
+  font-weight: 600;
+  backdrop-filter: blur(20px);
+}
+
+.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;
+}