优化结果
This commit is contained in:
50
InfoGenie-frontend/public/aimodelapp/AI生成Linux命令/index.html
Normal file
50
InfoGenie-frontend/public/aimodelapp/AI生成Linux命令/index.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AI Linux命令生成器</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1 class="title">AI Linux命令生成器</h1>
|
||||
<p class="subtitle">让AI为您的Linux操作生成准确的命令</p>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="task-input">任务描述：</label>
|
||||
<textarea
|
||||
id="task-input"
|
||||
class="form-input textarea"
|
||||
placeholder="请描述您想要在Linux系统中执行的操作，例如：切换到根目录、查看当前目录下的文件、创建新文件夹等..."
|
||||
>切换到根目录</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="level-select">技能水平：</label>
|
||||
<select id="level-select" class="form-input select">
|
||||
<option value="beginner">初学者 - 基础命令和详细解释</option>
|
||||
<option value="intermediate">中级用户 - 常用命令和选项</option>
|
||||
<option value="advanced">高级用户 - 高效命令和高级用法</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button id="generateBtn" class="btn">生成命令</button>
|
||||
</div>
|
||||
|
||||
<div class="result-section">
|
||||
<h3 class="result-title">推荐的Linux命令</h3>
|
||||
<div id="loading" class="loading">正在生成中，请稍候...</div>
|
||||
<div id="commands" class="commands-container">
|
||||
<div class="placeholder">点击"生成命令"按钮，AI将为您推荐合适的Linux命令</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="env.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
351
InfoGenie-frontend/public/aimodelapp/AI生成Linux命令/script.js
Normal file
351
InfoGenie-frontend/public/aimodelapp/AI生成Linux命令/script.js
Normal file
@@ -0,0 +1,351 @@
|
||||
// 从配置文件导入设置
|
||||
// 配置在 env.js 文件中定义
|
||||
|
||||
// DOM 元素
|
||||
const taskInput = document.getElementById('task-input');
|
||||
const levelSelect = document.getElementById('level-select');
|
||||
const generateBtn = document.getElementById('generateBtn');
|
||||
const loadingDiv = document.getElementById('loading');
|
||||
const commandsContainer = document.getElementById('commands');
|
||||
|
||||
// 调用后端API
|
||||
async function callBackendAPI(taskDescription, difficultyLevel) {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/linux-command', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
task_description: taskDescription,
|
||||
difficulty_level: difficultyLevel
|
||||
})
|
||||
});
|
||||
|
||||
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.command_result;
|
||||
} 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;
|
||||
} catch (error) {
|
||||
// 如果直接解析失败，尝试提取JSON部分
|
||||
const jsonMatch = response.match(/\{[\s\S]*\}/);
|
||||
if (jsonMatch) {
|
||||
try {
|
||||
const parsed = JSON.parse(jsonMatch[0]);
|
||||
return parsed;
|
||||
} catch (e) {
|
||||
console.error('JSON解析失败:', e);
|
||||
}
|
||||
}
|
||||
|
||||
// 如果JSON解析失败，返回空对象
|
||||
console.error('无法解析AI响应:', response);
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
// 获取安全等级颜色
|
||||
function getSafetyLevelColor(safetyLevel) {
|
||||
const colors = {
|
||||
'safe': '#34C759',
|
||||
'caution': '#FF9500',
|
||||
'dangerous': '#FF3B30'
|
||||
};
|
||||
return colors[safetyLevel] || '#86868B';
|
||||
}
|
||||
|
||||
// 获取安全等级文本
|
||||
function getSafetyLevelText(safetyLevel) {
|
||||
const texts = {
|
||||
'safe': '安全',
|
||||
'caution': '谨慎',
|
||||
'dangerous': '危险'
|
||||
};
|
||||
return texts[safetyLevel] || '未知';
|
||||
}
|
||||
|
||||
// 显示命令建议
|
||||
function displayCommands(commandData) {
|
||||
commandsContainer.innerHTML = '';
|
||||
|
||||
if (!commandData || !commandData.commands || commandData.commands.length === 0) {
|
||||
commandsContainer.innerHTML = '<div class="placeholder">暂无命令建议，请尝试重新生成</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 显示命令列表
|
||||
if (commandData.commands && commandData.commands.length > 0) {
|
||||
const commandsTitle = document.createElement('div');
|
||||
commandsTitle.className = 'section-title';
|
||||
commandsTitle.textContent = '推荐命令';
|
||||
commandsContainer.appendChild(commandsTitle);
|
||||
|
||||
commandData.commands.forEach((command, index) => {
|
||||
const commandElement = document.createElement('div');
|
||||
commandElement.className = 'command-item';
|
||||
|
||||
const safetyColor = getSafetyLevelColor(command.safety_level);
|
||||
const safetyText = getSafetyLevelText(command.safety_level);
|
||||
|
||||
commandElement.innerHTML = `
|
||||
<div class="command-content">
|
||||
<div class="command-header">
|
||||
<div class="command-code">${command.command}</div>
|
||||
<div class="safety-badge" style="background-color: ${safetyColor}">${safetyText}</div>
|
||||
</div>
|
||||
<div class="command-description">${command.description}</div>
|
||||
<div class="command-explanation">
|
||||
<strong>详细说明：</strong>${command.explanation}
|
||||
</div>
|
||||
${command.example_output ? `<div class="command-output"><strong>预期输出：</strong><code>${command.example_output}</code></div>` : ''}
|
||||
${command.alternatives && command.alternatives.length > 0 ? `
|
||||
<div class="command-alternatives">
|
||||
<strong>替代命令：</strong>
|
||||
${command.alternatives.map(alt => `<code class="alt-command" onclick="copyToClipboard('${alt}', this)">${alt}</code>`).join(' ')}
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
<button class="copy-btn" onclick="copyToClipboard('${command.command}', this)">复制命令</button>
|
||||
`;
|
||||
commandsContainer.appendChild(commandElement);
|
||||
});
|
||||
}
|
||||
|
||||
// 显示安全警告
|
||||
if (commandData.safety_warnings && commandData.safety_warnings.length > 0) {
|
||||
const warningsTitle = document.createElement('div');
|
||||
warningsTitle.className = 'section-title warning';
|
||||
warningsTitle.textContent = '⚠️ 安全提示';
|
||||
commandsContainer.appendChild(warningsTitle);
|
||||
|
||||
const warningsContainer = document.createElement('div');
|
||||
warningsContainer.className = 'warnings-container';
|
||||
commandData.safety_warnings.forEach(warning => {
|
||||
const warningElement = document.createElement('div');
|
||||
warningElement.className = 'warning-item';
|
||||
warningElement.textContent = warning;
|
||||
warningsContainer.appendChild(warningElement);
|
||||
});
|
||||
commandsContainer.appendChild(warningsContainer);
|
||||
}
|
||||
|
||||
// 显示前置条件
|
||||
if (commandData.prerequisites && commandData.prerequisites.length > 0) {
|
||||
const prereqTitle = document.createElement('div');
|
||||
prereqTitle.className = 'section-title info';
|
||||
prereqTitle.textContent = '📋 前置条件';
|
||||
commandsContainer.appendChild(prereqTitle);
|
||||
|
||||
const prereqContainer = document.createElement('div');
|
||||
prereqContainer.className = 'prerequisites-container';
|
||||
commandData.prerequisites.forEach(prereq => {
|
||||
const prereqElement = document.createElement('div');
|
||||
prereqElement.className = 'prerequisite-item';
|
||||
prereqElement.textContent = prereq;
|
||||
prereqContainer.appendChild(prereqElement);
|
||||
});
|
||||
commandsContainer.appendChild(prereqContainer);
|
||||
}
|
||||
|
||||
// 显示相关概念
|
||||
if (commandData.related_concepts && commandData.related_concepts.length > 0) {
|
||||
const conceptsTitle = document.createElement('div');
|
||||
conceptsTitle.className = 'section-title info';
|
||||
conceptsTitle.textContent = '💡 相关概念';
|
||||
commandsContainer.appendChild(conceptsTitle);
|
||||
|
||||
const conceptsContainer = document.createElement('div');
|
||||
conceptsContainer.className = 'concepts-container';
|
||||
commandData.related_concepts.forEach(concept => {
|
||||
const conceptElement = document.createElement('div');
|
||||
conceptElement.className = 'concept-item';
|
||||
conceptElement.textContent = concept;
|
||||
conceptsContainer.appendChild(conceptElement);
|
||||
});
|
||||
commandsContainer.appendChild(conceptsContainer);
|
||||
}
|
||||
}
|
||||
|
||||
// 复制到剪贴板
|
||||
function copyToClipboard(text, button) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
showSuccessToast('已复制到剪贴板');
|
||||
const originalText = button.textContent;
|
||||
button.textContent = '已复制';
|
||||
button.classList.add('copied');
|
||||
setTimeout(() => {
|
||||
button.textContent = originalText;
|
||||
button.classList.remove('copied');
|
||||
}, 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('已复制到剪贴板');
|
||||
const originalText = button.textContent;
|
||||
button.textContent = '已复制';
|
||||
button.classList.add('copied');
|
||||
setTimeout(() => {
|
||||
button.textContent = originalText;
|
||||
button.classList.remove('copied');
|
||||
}, 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;
|
||||
commandsContainer.innerHTML = '';
|
||||
commandsContainer.appendChild(errorDiv);
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading(show) {
|
||||
loadingDiv.style.display = show ? 'block' : 'none';
|
||||
generateBtn.disabled = show;
|
||||
generateBtn.textContent = show ? '生成中...' : '生成命令';
|
||||
}
|
||||
|
||||
// 生成命令建议
|
||||
async function generateCommands() {
|
||||
const taskDescription = taskInput.value.trim();
|
||||
const difficultyLevel = levelSelect.value;
|
||||
|
||||
if (!taskDescription) {
|
||||
showErrorMessage('请输入任务描述');
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading(true);
|
||||
commandsContainer.innerHTML = '';
|
||||
|
||||
try {
|
||||
const commandResult = await callBackendAPI(taskDescription, difficultyLevel);
|
||||
const commandData = parseAIResponse(commandResult);
|
||||
displayCommands(commandData);
|
||||
} catch (error) {
|
||||
console.error('生成命令失败:', error);
|
||||
showErrorMessage(`生成失败: ${error.message}`);
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 事件监听器
|
||||
generateBtn.addEventListener('click', generateCommands);
|
||||
|
||||
// 回车键生成
|
||||
taskInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
generateCommands();
|
||||
}
|
||||
});
|
||||
|
||||
// 技能水平变化时的提示
|
||||
levelSelect.addEventListener('change', (e) => {
|
||||
const levelDescriptions = {
|
||||
'beginner': '将提供基础命令和详细解释',
|
||||
'intermediate': '将提供常用命令和选项',
|
||||
'advanced': '将提供高效命令和高级用法'
|
||||
};
|
||||
|
||||
const description = levelDescriptions[e.target.value];
|
||||
if (description) {
|
||||
console.log(`已选择技能水平: ${e.target.value} - ${description}`);
|
||||
}
|
||||
});
|
||||
|
||||
// 页面加载完成后的初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 设置默认占位符
|
||||
commandsContainer.innerHTML = '<div class="placeholder">请输入要执行的Linux操作，然后点击生成按钮获取相应的命令</div>';
|
||||
|
||||
// 设置默认任务描述
|
||||
if (!taskInput.value.trim()) {
|
||||
taskInput.value = '切换到根目录';
|
||||
}
|
||||
});
|
||||
|
||||
// 导出函数供HTML调用
|
||||
window.copyToClipboard = copyToClipboard;
|
||||
window.generateCommands = generateCommands;
|
||||
|
||||
// 添加一些实用的辅助函数
|
||||
function getRandomCommand(commands) {
|
||||
if (commands && commands.length > 0) {
|
||||
const randomIndex = Math.floor(Math.random() * commands.length);
|
||||
return commands[randomIndex];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// 命令使用统计（可选功能）
|
||||
function trackCommandUsage(command) {
|
||||
const usage = JSON.parse(localStorage.getItem('commandUsage') || '{}');
|
||||
usage[command] = (usage[command] || 0) + 1;
|
||||
localStorage.setItem('commandUsage', JSON.stringify(usage));
|
||||
}
|
||||
|
||||
// 获取常用命令（可选功能）
|
||||
function getPopularCommands(limit = 5) {
|
||||
const usage = JSON.parse(localStorage.getItem('commandUsage') || '{}');
|
||||
return Object.entries(usage)
|
||||
.sort(([,a], [,b]) => b - a)
|
||||
.slice(0, limit)
|
||||
.map(([command]) => command);
|
||||
}
|
||||
|
||||
// 导出辅助函数
|
||||
window.getRandomCommand = getRandomCommand;
|
||||
window.trackCommandUsage = trackCommandUsage;
|
||||
window.getPopularCommands = getPopularCommands;
|
||||
576
InfoGenie-frontend/public/aimodelapp/AI生成Linux命令/styles.css
Normal file
576
InfoGenie-frontend/public/aimodelapp/AI生成Linux命令/styles.css
Normal file
@@ -0,0 +1,576 @@
|
||||
/* 全局样式重置 */
|
||||
* {
|
||||
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, #667eea 0%, #764ba2 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: 900px;
|
||||
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: #667eea;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 0 0 4px 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;
|
||||
}
|
||||
|
||||
/* 按钮样式 - iOS风格 */
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: #667eea;
|
||||
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(102, 126, 234, 0.25);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #5a67d8;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.35);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
background: #4c51bf;
|
||||
}
|
||||
|
||||
.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: #667eea;
|
||||
font-style: normal;
|
||||
padding: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.commands-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风格 */
|
||||
.section-title {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin: 20px 0 12px 0;
|
||||
padding: 12px 16px;
|
||||
background: #667eea;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25);
|
||||
}
|
||||
|
||||
.section-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.section-title.warning {
|
||||
background: #FF9500;
|
||||
box-shadow: 0 2px 8px rgba(255, 149, 0, 0.25);
|
||||
}
|
||||
|
||||
.section-title.info {
|
||||
background: #34C759;
|
||||
box-shadow: 0 2px 8px rgba(52, 199, 89, 0.25);
|
||||
}
|
||||
|
||||
/* 命令项样式 - iOS风格 */
|
||||
.command-item {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.command-item:hover {
|
||||
border-color: rgba(102, 126, 234, 0.3);
|
||||
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.1);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.command-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.command-content {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.command-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.command-code {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
background: #f8f9fa;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9375rem;
|
||||
color: #2d3748;
|
||||
border: 1px solid #e2e8f0;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.safety-badge {
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.command-description {
|
||||
font-size: 1rem;
|
||||
color: #2d3748;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.command-explanation {
|
||||
font-size: 0.9375rem;
|
||||
color: #4a5568;
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.command-output {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.command-output code {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
background: #2d3748;
|
||||
color: #e2e8f0;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.875rem;
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.command-alternatives {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.alt-command {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
background: #e2e8f0;
|
||||
color: #2d3748;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8125rem;
|
||||
margin: 2px 4px 2px 0;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.alt-command:hover {
|
||||
background: #cbd5e0;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px 20px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(102, 126, 234, 0.25);
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background: #5a67d8;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.copy-btn.copied {
|
||||
background: #34C759;
|
||||
}
|
||||
|
||||
/* 警告容器样式 */
|
||||
.warnings-container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.warning-item {
|
||||
background: rgba(255, 149, 0, 0.1);
|
||||
border: 1px solid rgba(255, 149, 0, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
color: #b45309;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.warning-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 前置条件容器样式 */
|
||||
.prerequisites-container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.prerequisite-item {
|
||||
background: rgba(52, 199, 89, 0.1);
|
||||
border: 1px solid rgba(52, 199, 89, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
color: #166534;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.prerequisite-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 相关概念容器样式 */
|
||||
.concepts-container {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.concept-item {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 8px;
|
||||
color: #1e40af;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.concept-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 错误样式 - 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: 16px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 14px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 16px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.commands-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.command-item {
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.command-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.command-code {
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
position: static;
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.safety-badge {
|
||||
align-self: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.command-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.command-code {
|
||||
font-size: 0.8125rem;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.command-description,
|
||||
.command-explanation {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.command-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;
|
||||
}
|
||||
|
||||
/* 代码字体优化 */
|
||||
.command-code,
|
||||
.alt-command,
|
||||
code {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-variant-ligatures: none;
|
||||
}
|
||||
|
||||
/* 滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(102, 126, 234, 0.3);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
Reference in New Issue
Block a user