update: 2026-03-28 20:59
This commit is contained in:
@@ -53,7 +53,9 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="/aimodelapp/shared/ai-prompts.js"></script>
|
||||
<script src="env.js"></script>
|
||||
<script src="/aimodelapp/shared/ai-chat.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -35,28 +35,22 @@ function clearResults() {
|
||||
}
|
||||
|
||||
async function callKinshipAPI(relationChain) {
|
||||
const token = window.AUTH_CONFIG.getToken();
|
||||
if (!token) throw new Error('未登录，请先登录后使用AI功能');
|
||||
|
||||
const url = `${window.API_CONFIG.baseUrl}${window.API_CONFIG.endpoints.kinshipCalculator}`;
|
||||
const resp = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({ relation_chain: relationChain })
|
||||
});
|
||||
|
||||
if (!resp.ok) {
|
||||
if (resp.status === 402) throw new Error('您的萌芽币余额不足，无法使用此功能');
|
||||
const err = await resp.json().catch(() => ({}));
|
||||
throw new Error(err.error || `API请求失败: ${resp.status} ${resp.statusText}`);
|
||||
const content = await window.AiChat.complete([
|
||||
{ role: 'user', content: window.AiPrompts.kinship(relationChain) },
|
||||
]);
|
||||
var parsed;
|
||||
try {
|
||||
parsed = JSON.parse(content);
|
||||
} catch (e) {
|
||||
var m = content.match(/\{[\s\S]*\}/);
|
||||
parsed = m ? JSON.parse(m[0]) : {};
|
||||
}
|
||||
|
||||
const data = await resp.json();
|
||||
if (!data.success) throw new Error(data.error || 'API响应异常');
|
||||
return data;
|
||||
return {
|
||||
success: true,
|
||||
mandarin_title: parsed.mandarin_title,
|
||||
dialect_titles: parsed.dialect_titles,
|
||||
notes: parsed.notes,
|
||||
};
|
||||
}
|
||||
|
||||
function renderDialects(dialectTitles) {
|
||||
|
||||
@@ -4,214 +4,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AI古诗生成器</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
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;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
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);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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);
|
||||
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;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.result-section {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 1.25rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.poem-output {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 16px;
|
||||
padding: 28px;
|
||||
min-height: 200px;
|
||||
white-space: pre-wrap;
|
||||
font-family: 'PingFang SC', 'Hiragino Sans GB', 'KaiTi', '楷体', serif;
|
||||
font-size: 1.1875rem;
|
||||
line-height: 1.8;
|
||||
text-align: center;
|
||||
color: #1D1D1F;
|
||||
letter-spacing: 0.5px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
color: #007AFF;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.poem-output {
|
||||
padding: 20px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.title {
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.poem-output {
|
||||
font-size: 1rem;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/aimodelapp/shared/compact-styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
@@ -240,7 +33,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/aimodelapp/shared/ai-prompts.js"></script>
|
||||
<script src="env.js"></script>
|
||||
<script src="/aimodelapp/shared/ai-chat.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,45 +7,12 @@ const loading = document.getElementById('loading');
|
||||
const poemOutput = document.getElementById('poemOutput');
|
||||
const themeInput = document.getElementById('theme');
|
||||
|
||||
// 调用后端API
|
||||
// 调用后端统一 chat（提示词在前端 ai-prompts.js）
|
||||
async function callBackendAPI(theme) {
|
||||
try {
|
||||
// 获取JWT token
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
if (!token) {
|
||||
throw new Error('未登录，请先登录后使用AI功能');
|
||||
}
|
||||
|
||||
const response = await fetch(`${window.API_CONFIG.baseUrl}/api/aimodelapp/poetry`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
theme: theme
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 402) {
|
||||
throw new Error('您的萌芽币余额不足，无法使用此功能');
|
||||
}
|
||||
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.poem;
|
||||
} else {
|
||||
throw new Error(data.error || 'API响应格式异常');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('API调用错误:', error);
|
||||
throw error;
|
||||
}
|
||||
const content = await window.AiChat.complete(
|
||||
[{ role: 'user', content: window.AiPrompts.poetry(theme) }]
|
||||
);
|
||||
return content;
|
||||
}
|
||||
|
||||
// 显示错误信息
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AI变量命名助手</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="/aimodelapp/shared/compact-styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
@@ -37,7 +37,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/aimodelapp/shared/ai-prompts.js"></script>
|
||||
<script src="env.js"></script>
|
||||
<script src="/aimodelapp/shared/ai-chat.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -37,45 +37,12 @@ const namingConventions = {
|
||||
|
||||
|
||||
|
||||
// 调用后端API
|
||||
// 调用后端统一 chat（提示词在前端）
|
||||
async function callBackendAPI(description) {
|
||||
try {
|
||||
// 获取JWT token
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
if (!token) {
|
||||
throw new Error('未登录，请先登录后使用AI功能');
|
||||
}
|
||||
|
||||
const response = await fetch(`${window.API_CONFIG.baseUrl}/api/aimodelapp/variable-naming`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
description: description
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 402) {
|
||||
throw new Error('您的萌芽币余额不足，无法使用此功能');
|
||||
}
|
||||
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;
|
||||
}
|
||||
const content = await window.AiChat.complete(
|
||||
[{ role: 'user', content: window.AiPrompts.variableNaming(description) }]
|
||||
);
|
||||
return parseAIResponse(content);
|
||||
}
|
||||
|
||||
// 解析AI响应
|
||||
@@ -227,12 +194,7 @@ async function generateSuggestions() {
|
||||
displaySuggestions(suggestions);
|
||||
} catch (error) {
|
||||
console.error('生成建议失败:', error);
|
||||
// 检查是否是萌芽币不足导致的错误
|
||||
if (error.message && error.message.includes('萌芽币余额不足')) {
|
||||
showErrorMessage(`萌芽币不足: 每次使用AI功能需要消耗100萌芽币，请通过每日签到获取更多萌芽币`);
|
||||
} else {
|
||||
showErrorMessage(`生成失败: ${error.message}`);
|
||||
}
|
||||
showErrorMessage(`生成失败: ${error.message}`);
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>AI姓名评测</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="/aimodelapp/shared/compact-styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
@@ -51,7 +51,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/aimodelapp/shared/ai-prompts.js"></script>
|
||||
<script src="env.js"></script>
|
||||
<script src="/aimodelapp/shared/ai-chat.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -187,49 +187,12 @@ async function analyzeName() {
|
||||
existingError.remove();
|
||||
}
|
||||
|
||||
const requestBody = {
|
||||
name: name
|
||||
};
|
||||
|
||||
try {
|
||||
// 调用后端API
|
||||
// 获取JWT token
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
if (!token) {
|
||||
throw new Error('未登录，请先登录后使用AI功能');
|
||||
}
|
||||
|
||||
const response = await fetch(`${window.API_CONFIG.baseUrl}/api/aimodelapp/name-analysis`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify(requestBody)
|
||||
});
|
||||
|
||||
// 检查HTTP状态码
|
||||
if (response.status === 429) {
|
||||
throw new Error('短时间内请求次数过多，请休息一下！');
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 402) {
|
||||
throw new Error('您的萌芽币余额不足，无法使用此功能');
|
||||
}
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.error || `请求失败: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && data.analysis) {
|
||||
const analysisResult = parseAnalysisResult(data.analysis.trim());
|
||||
updateResults(analysisResult);
|
||||
} else {
|
||||
throw new Error(data.error || 'AI响应格式异常');
|
||||
}
|
||||
const content = await window.AiChat.complete([
|
||||
{ role: 'user', content: window.AiPrompts.nameAnalysis(name) },
|
||||
]);
|
||||
const analysisResult = parseAnalysisResult(content.trim());
|
||||
updateResults(analysisResult);
|
||||
} catch (error) {
|
||||
console.error('分析姓名时出错:', error);
|
||||
showError(error.message);
|
||||
|
||||
@@ -72,6 +72,8 @@
|
||||
|
||||
<!-- 环境配置与功能脚本 -->
|
||||
<script src="env.js"></script>
|
||||
<script src="/aimodelapp/shared/ai-prompts.js"></script>
|
||||
<script src="/aimodelapp/shared/ai-chat.js"></script>
|
||||
<!-- Markdown 渲染与安全过滤（CDN） -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.9/dist/purify.min.js"></script>
|
||||
|
||||
@@ -25,39 +25,11 @@ function showErrorMessage(msg) {
|
||||
resultContainer.innerHTML = `<div class="placeholder">${msg}</div>`;
|
||||
}
|
||||
|
||||
// 调用后端API
|
||||
// 调用后端统一 chat（提示词在前端；markdownOption 仅保留兼容 UI，不参与提示词）
|
||||
async function callBackendAPI(articleText, emojiStyle, markdownOption) {
|
||||
try {
|
||||
const token = window.AUTH_CONFIG.getToken();
|
||||
if (!token) throw new Error('未登录，请先登录后使用AI功能');
|
||||
|
||||
const url = `${window.API_CONFIG.baseUrl}${window.API_CONFIG.endpoints.markdownFormatting}`;
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
article_text: articleText,
|
||||
emoji_style: emojiStyle,
|
||||
markdown_option: markdownOption
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 402) throw new Error('您的萌芽币余额不足，无法使用此功能');
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.error || `API请求失败: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
if (data.success && data.formatted_markdown) return data.formatted_markdown;
|
||||
throw new Error(data.error || 'API响应格式异常');
|
||||
} catch (error) {
|
||||
console.error('API调用错误:', error);
|
||||
throw error;
|
||||
}
|
||||
return window.AiChat.complete([
|
||||
{ role: 'user', content: window.AiPrompts.markdownFormatting(articleText, emojiStyle) },
|
||||
]);
|
||||
}
|
||||
|
||||
// 显示结果
|
||||
|
||||
@@ -60,7 +60,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/aimodelapp/shared/ai-prompts.js"></script>
|
||||
<script src="env.js"></script>
|
||||
<script src="/aimodelapp/shared/ai-chat.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -9,47 +9,11 @@ const convertBtn = document.getElementById('convertBtn');
|
||||
const loadingDiv = document.getElementById('loading');
|
||||
const conversionResultContainer = document.getElementById('conversionResult');
|
||||
|
||||
// 调用后端API
|
||||
// 调用后端统一 chat（提示词在前端）
|
||||
async function callBackendAPI(modernText, style, articleType) {
|
||||
try {
|
||||
// 获取JWT token
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
if (!token) {
|
||||
throw new Error('未登录，请先登录后使用AI功能');
|
||||
}
|
||||
|
||||
const response = await fetch(`${window.API_CONFIG.baseUrl}/api/aimodelapp/classical_conversion`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
modern_text: modernText,
|
||||
style: style,
|
||||
article_type: articleType
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 402) {
|
||||
throw new Error('您的萌芽币余额不足，无法使用此功能');
|
||||
}
|
||||
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.conversion_result;
|
||||
} else {
|
||||
throw new Error(data.error || 'API响应格式异常');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('API调用错误:', error);
|
||||
throw error;
|
||||
}
|
||||
return window.AiChat.complete([
|
||||
{ role: 'user', content: window.AiPrompts.classicalConversion(modernText, style, articleType) },
|
||||
]);
|
||||
}
|
||||
|
||||
// 解析AI响应
|
||||
|
||||
@@ -44,7 +44,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/aimodelapp/shared/ai-prompts.js"></script>
|
||||
<script src="env.js"></script>
|
||||
<script src="/aimodelapp/shared/ai-chat.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -8,45 +8,11 @@ const generateBtn = document.getElementById('generateBtn');
|
||||
const loadingDiv = document.getElementById('loading');
|
||||
const commandsContainer = document.getElementById('commands');
|
||||
|
||||
// 调用后端API
|
||||
// 调用后端统一 chat（提示词在前端）
|
||||
async function callBackendAPI(taskDescription, difficultyLevel) {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const headers = {
|
||||
'Content-Type': 'application/json'
|
||||
};
|
||||
|
||||
if (token) {
|
||||
headers['Authorization'] = `Bearer ${token}`;
|
||||
}
|
||||
|
||||
const response = await fetch(`${window.API_CONFIG.baseUrl}${window.API_CONFIG.endpoints.linuxCommand}`, {
|
||||
method: 'POST',
|
||||
headers: headers,
|
||||
body: JSON.stringify({
|
||||
task_description: taskDescription,
|
||||
difficulty_level: difficultyLevel
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 402) {
|
||||
throw new Error('您的萌芽币余额不足，无法使用此功能');
|
||||
}
|
||||
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;
|
||||
}
|
||||
return window.AiChat.complete([
|
||||
{ role: 'user', content: window.AiPrompts.linuxCommand(taskDescription, difficultyLevel) },
|
||||
]);
|
||||
}
|
||||
|
||||
// 解析AI响应
|
||||
|
||||
@@ -46,7 +46,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/aimodelapp/shared/ai-prompts.js"></script>
|
||||
<script src="env.js"></script>
|
||||
<script src="/aimodelapp/shared/ai-chat.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -31,46 +31,12 @@ const generateBtn = document.getElementById('generateBtn');
|
||||
const loadingDiv = document.getElementById('loading');
|
||||
const expressionsContainer = document.getElementById('expressions');
|
||||
|
||||
// 调用后端API
|
||||
// 调用后端统一 chat（提示词在前端）
|
||||
async function callBackendAPI(text, style) {
|
||||
try {
|
||||
// 获取JWT token
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
if (!token) {
|
||||
throw new Error('未登录，请先登录后使用AI功能');
|
||||
}
|
||||
|
||||
const response = await fetch(`${window.API_CONFIG.baseUrl}/api/aimodelapp/expression-maker`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
text: text,
|
||||
style: style
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 402) {
|
||||
throw new Error('您的萌芽币余额不足，无法使用此功能');
|
||||
}
|
||||
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.expressions;
|
||||
} else {
|
||||
throw new Error(data.error || 'API响应格式异常');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('API调用错误:', error);
|
||||
throw error;
|
||||
}
|
||||
const content = await window.AiChat.complete([
|
||||
{ role: 'user', content: window.AiPrompts.expressionMaker(text, style) },
|
||||
]);
|
||||
return parseAIResponse(content);
|
||||
}
|
||||
|
||||
// 解析AI响应
|
||||
@@ -232,12 +198,7 @@ async function generateExpressions() {
|
||||
displayExpressions(expressions);
|
||||
} catch (error) {
|
||||
console.error('生成表情失败:', error);
|
||||
// 检查是否是萌芽币不足导致的错误
|
||||
if (error.message && error.message.includes('萌芽币余额不足')) {
|
||||
showErrorMessage(`萌芽币不足: 每次使用AI功能需要消耗100萌芽币，请通过每日签到获取更多萌芽币`);
|
||||
} else {
|
||||
showErrorMessage(`生成失败: ${error.message}`);
|
||||
}
|
||||
showErrorMessage(`生成失败: ${error.message}`);
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
|
||||
@@ -56,7 +56,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/aimodelapp/shared/ai-prompts.js"></script>
|
||||
<script src="env.js"></script>
|
||||
<script src="/aimodelapp/shared/ai-chat.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -8,46 +8,12 @@ const translateBtn = document.getElementById('translateBtn');
|
||||
const loadingDiv = document.getElementById('loading');
|
||||
const translationResultContainer = document.getElementById('translationResult');
|
||||
|
||||
// 调用后端API
|
||||
// 调用后端统一 chat（提示词在前端）
|
||||
async function callBackendAPI(sourceText, targetLanguage) {
|
||||
try {
|
||||
// 获取JWT token
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
if (!token) {
|
||||
throw new Error('未登录，请先登录后使用AI功能');
|
||||
}
|
||||
|
||||
const response = await fetch(`${window.API_CONFIG.baseUrl}/api/aimodelapp/translation`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${token}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
source_text: sourceText,
|
||||
target_language: targetLanguage
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 402) {
|
||||
throw new Error('您的萌芽币余额不足，无法使用此功能');
|
||||
}
|
||||
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.translation_result;
|
||||
} else {
|
||||
throw new Error(data.error || 'API响应格式异常');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('API调用错误:', error);
|
||||
throw error;
|
||||
}
|
||||
const content = await window.AiChat.complete(
|
||||
[{ role: 'user', content: window.AiPrompts.translation(sourceText, targetLanguage) }]
|
||||
);
|
||||
return content;
|
||||
}
|
||||
|
||||
// 解析AI响应
|
||||
|
||||
48
InfoGenie-frontend/public/aimodelapp/shared/ai-chat.js
Normal file
48
InfoGenie-frontend/public/aimodelapp/shared/ai-chat.js
Normal file
@@ -0,0 +1,48 @@
|
||||
/**
|
||||
* 统一调用后端 /api/aimodelapp/chat（提示词由前端 ai-prompts.js 组装）
|
||||
*/
|
||||
(function (global) {
|
||||
global.AiChat = {
|
||||
/**
|
||||
* @param {{ role: string, content: string }[]} messages
|
||||
* @param {{ provider?: string, model?: string }} [opts]
|
||||
* @returns {Promise<string>} assistant 文本
|
||||
*/
|
||||
async complete(messages, opts) {
|
||||
opts = opts || {};
|
||||
const token =
|
||||
(global.AUTH_CONFIG && typeof global.AUTH_CONFIG.getToken === 'function'
|
||||
? global.AUTH_CONFIG.getToken()
|
||||
: null) || global.localStorage.getItem('token');
|
||||
if (!token) {
|
||||
throw new Error('未登录，请先登录后使用AI功能');
|
||||
}
|
||||
const base = (global.API_CONFIG && global.API_CONFIG.baseUrl) || '';
|
||||
const res = await fetch(base + '/api/aimodelapp/chat', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: 'Bearer ' + token,
|
||||
},
|
||||
body: JSON.stringify({
|
||||
messages,
|
||||
provider: opts.provider || 'deepseek',
|
||||
model: opts.model || 'deepseek-chat',
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
let errMsg = res.statusText;
|
||||
try {
|
||||
const errData = await res.json();
|
||||
errMsg = errData.error || errMsg;
|
||||
} catch (e) { /* ignore */ }
|
||||
throw new Error(errMsg || 'API 请求失败');
|
||||
}
|
||||
const data = await res.json();
|
||||
if (data.success && data.content != null) {
|
||||
return typeof data.content === 'string' ? data.content : String(data.content);
|
||||
}
|
||||
throw new Error(data.error || 'API 响应异常');
|
||||
},
|
||||
};
|
||||
})(typeof window !== 'undefined' ? window : this);
|
||||
138
InfoGenie-frontend/public/aimodelapp/shared/ai-prompts.js
Normal file
138
InfoGenie-frontend/public/aimodelapp/shared/ai-prompts.js
Normal file
@@ -0,0 +1,138 @@
|
||||
/**
|
||||
* AI 应用提示词（与历史后端 handler 语义对齐，便于在前端迭代）
|
||||
*/
|
||||
(function (g) {
|
||||
var LANG_MAP = {
|
||||
'zh-CN': '中文（简体）',
|
||||
'zh-TW': '中文（繁体）',
|
||||
en: '英语',
|
||||
ja: '日语',
|
||||
ko: '韩语',
|
||||
fr: '法语',
|
||||
de: '德语',
|
||||
es: '西班牙语',
|
||||
it: '意大利语',
|
||||
pt: '葡萄牙语',
|
||||
ru: '俄语',
|
||||
ar: '阿拉伯语',
|
||||
hi: '印地语',
|
||||
th: '泰语',
|
||||
vi: '越南语',
|
||||
};
|
||||
|
||||
var EXPR_STYLE = {
|
||||
mixed: '混合使用Emoji表情和颜文字',
|
||||
emoji: '仅使用Emoji表情符号',
|
||||
kaomoji: '仅使用颜文字',
|
||||
cute: '使用可爱风格的表情符号',
|
||||
cool: '使用酷炫风格的表情符号',
|
||||
};
|
||||
|
||||
g.AiPrompts = {
|
||||
nameAnalysis: function (name) {
|
||||
return (
|
||||
'你是一位专业的姓名学专家和语言学家，请对输入的姓名进行全面分析。请直接输出分析结果，不要包含任何思考过程或</think>标签。\n\n姓名：' +
|
||||
name +
|
||||
'\n\n请按照以下格式严格输出分析结果：\n\n【稀有度评分】\n评分：X%%\n评价：[对稀有度的详细说明，包括姓氏和名字的常见程度分析]\n\n【音韵评价】\n评分：X%%\n评价：[对音韵美感的分析，包括声调搭配、读音流畅度、音律和谐度等]\n\n【含义解读】\n[详细分析姓名的寓意内涵，包括：\n1. 姓氏的历史渊源和文化背景\n2. 名字各字的含义和象征\n3. 整体姓名的寓意组合\n4. 可能体现的父母期望或文化内涵\n5. 与传统文化、诗词典故的关联等]\n\n要求：\n1. 评分必须是1-100的整数百分比，要有明显区分度，避免雷同\n2. 分析要专业、客观、有依据，评分要根据实际情况有所差异\n3. 含义解读要详细深入，至少150字\n4. 严格按照上述格式输出，不要添加思考过程、</think>标签或其他内容\n5. 如果是生僻字或罕见姓名，要特别说明\n6. 直接输出最终结果，不要显示推理过程'
|
||||
);
|
||||
},
|
||||
|
||||
variableNaming: function (desc) {
|
||||
return (
|
||||
'你是一个专业的变量命名助手。请根据以下描述为变量生成合适的名称：\n\n描述：' +
|
||||
desc +
|
||||
'\n\n请为每种命名规范生成3个变量名建议：\n1. camelCase (驼峰命名法)\n2. PascalCase (帕斯卡命名法)\n3. snake_case (下划线命名法)\n4. kebab-case (短横线命名法)\n5. CONSTANT_CASE (常量命名法)\n\n请按JSON格式返回：\n{"suggestions":{"camelCase":[{"name":"变量名","description":"说明"}],"PascalCase":[{"name":"变量名","description":"说明"}],"snake_case":[{"name":"变量名","description":"说明"}],"kebab-case":[{"name":"变量名","description":"说明"}],"CONSTANT_CASE":[{"name":"变量名","description":"说明"}]}}\n\n只返回JSON格式的结果，不要包含其他文字。'
|
||||
);
|
||||
},
|
||||
|
||||
poetry: function (theme, style, mood) {
|
||||
style = style || '现代诗';
|
||||
mood = mood || '自由发挥';
|
||||
return (
|
||||
'你是一位才华横溢的诗人，请根据以下要求创作一首诗歌。\n\n主题：' +
|
||||
theme +
|
||||
'\n风格：' +
|
||||
style +
|
||||
'\n情感基调：' +
|
||||
mood +
|
||||
'\n\n创作要求：\n1. 紧扣主题，情感真挚\n2. 语言优美，意境深远\n3. 符合指定的诗歌风格\n4. 长度适中，朗朗上口\n5. 如果是古体诗，注意平仄和韵律\n\n请直接输出诗歌作品，不需要额外的解释或分析。'
|
||||
);
|
||||
},
|
||||
|
||||
translationLangName: function (code) {
|
||||
return LANG_MAP[code] || code;
|
||||
},
|
||||
|
||||
translation: function (text, targetLang) {
|
||||
var langName = LANG_MAP[targetLang] || targetLang;
|
||||
return (
|
||||
'你是一位专业的翻译专家，精通多种语言的翻译工作。请将以下文本翻译成' +
|
||||
langName +
|
||||
'。\n\n原文：' +
|
||||
text +
|
||||
'\n\n翻译要求：\n1. 【信】- 忠实原文，准确传达原意\n2. 【达】- 译文通顺流畅，符合目标语言的表达习惯\n3. 【雅】- 用词优美得体，风格与原文相符\n\n请按以下JSON格式返回翻译结果：\n{"detected_language":"检测到的源语言","target_language":"' +
|
||||
langName +
|
||||
'","translation":"翻译结果","alternative_translations":["备选翻译1","备选翻译2"],"explanation":"翻译说明","pronunciation":"发音指导"}\n\n只返回JSON格式的结果，不要包含其他文字。'
|
||||
);
|
||||
},
|
||||
|
||||
classicalConversion: function (text, style, articleType) {
|
||||
style = style || '古雅';
|
||||
articleType = articleType || '散文';
|
||||
return (
|
||||
'你是一位精通古代文言文的文学大师，擅长将现代文转换为优美的文言文。请将以下现代文转换为文言文。\n\n现代文：' +
|
||||
text +
|
||||
'\n风格：' +
|
||||
style +
|
||||
'\n文体：' +
|
||||
articleType +
|
||||
'\n\n请按以下JSON格式返回转换结果：\n{"classical_text":"转换后的文言文","translation_notes":"转换说明","style_analysis":"风格分析","difficulty_level":"难度等级","key_phrases":[{"modern":"现代词汇","classical":"文言文词汇","explanation":"转换说明"}],"cultural_elements":"文化内涵说明"}\n\n只返回JSON格式的结果，不要包含其他文字。'
|
||||
);
|
||||
},
|
||||
|
||||
expressionMaker: function (text, style) {
|
||||
style = style || 'mixed';
|
||||
var styleDesc = EXPR_STYLE[style] || EXPR_STYLE.mixed;
|
||||
return (
|
||||
'你是一个专业的表情符号专家。请根据以下文字内容生成相应的表情符号：\n\n文字内容：' +
|
||||
text +
|
||||
'\n表情风格：' +
|
||||
styleDesc +
|
||||
'\n\n请按JSON格式返回：\n{"expressions":{"emoji":[{"symbol":"😊","description":"场景说明","intensity":"中等","usage":"使用建议"}],"kaomoji":[{"symbol":"(^_^)","description":"场景说明","intensity":"轻微","usage":"使用建议"}],"combination":[{"symbol":"🎉✨","description":"场景说明","intensity":"强烈","usage":"使用建议"}]},"summary":{"emotion_analysis":"情感分析","recommended_usage":"推荐使用场景","style_notes":"风格特点"}}\n\n只返回JSON格式的结果，不要包含其他文字。'
|
||||
);
|
||||
},
|
||||
|
||||
linuxCommand: function (taskDesc, level) {
|
||||
level = level || 'beginner';
|
||||
return (
|
||||
'你是一位Linux系统专家，请根据用户的任务描述生成相应的Linux命令。\n\n任务描述：' +
|
||||
taskDesc +
|
||||
'\n用户水平：' +
|
||||
level +
|
||||
'\n\n请按JSON格式返回：\n{"commands":[{"command":"具体命令","description":"说明","safety_level":"safe","explanation":"解释","example_output":"示例输出","alternatives":["替代命令"]}],"safety_warnings":["安全提示"],"prerequisites":["前置条件"],"related_concepts":["相关概念"]}\n\n只返回JSON格式的结果，不要包含其他文字。'
|
||||
);
|
||||
},
|
||||
|
||||
markdownFormatting: function (text, emojiStyle) {
|
||||
emojiStyle = emojiStyle || 'balanced';
|
||||
return (
|
||||
'你是一位专业的文档排版助手。请将用户提供的全文按"标准Markdown格式"进行排版，并在不改变任何原文内容的前提下进行结构化呈现。严格遵守以下规则：\n\n1) 保留所有原始内容，严禁改写、删减或添加新内容。\n2) 使用合理的Markdown结构（标题、分节、段落、列表、引用、表格如有必要、代码块仅当原文包含）。\n3) 智能添加适量Emoji以增强可读性（' +
|
||||
emojiStyle +
|
||||
'），在标题、关键句、列表项等处点缀；避免过度使用，保持专业。\n4) 保持语言与语气不变，只优化排版和表现形式。\n5) 输出"纯Markdown文本"，不要包含任何JSON、HTML、XML、解释文字、或代码块围栏标记。\n\n如果原文本较长，可在开头自动生成简洁的"目录"以便阅读。\n\n原文如下：\n' +
|
||||
text
|
||||
);
|
||||
},
|
||||
|
||||
kinship: function (chain, dialects) {
|
||||
var d = dialects && dialects.length
|
||||
? dialects
|
||||
: ['粤语', '闽南语', '上海话', '四川话', '东北话', '客家话'];
|
||||
return (
|
||||
'你是一位中国亲属称呼专家。请解析下面的亲属关系链，给出最终的亲属称呼。\n\n请遵循：\n1) 以中国大陆通行的标准普通话称呼为准。\n2) 同时给出若干方言的对应称呼：' +
|
||||
d.join('、') +
|
||||
'。\n3) 如存在地区差异或性别歧义，请在notes中说明。\n4) 不要展示推理过程；只输出JSON。\n\n严格按以下JSON结构输出：\n{"mandarin_title":"标准普通话称呼","dialect_titles":{"粤语":{"title":"称呼","romanization":"粤拼","notes":"说明"}},"notes":"总体说明"}\n\n关系链：' +
|
||||
chain
|
||||
);
|
||||
},
|
||||
};
|
||||
})(typeof window !== 'undefined' ? window : this);
|
||||
458
InfoGenie-frontend/public/aimodelapp/shared/compact-styles.css
Normal file
458
InfoGenie-frontend/public/aimodelapp/shared/compact-styles.css
Normal file
@@ -0,0 +1,458 @@
|
||||
/* 紧凑版样式 - 针对移动端优化 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
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: 8px;
|
||||
color: #1D1D1F;
|
||||
line-height: 1.4;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar,
|
||||
*::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(15px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #86868B;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
color: #1D1D1F;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s ease;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
font-family: inherit;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #007AFF;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #007AFF;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 6px rgba(0, 122, 255, 0.25);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #0056CC;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 3px 10px 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;
|
||||
}
|
||||
|
||||
.result-section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 1.1rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 12px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
color: #007AFF;
|
||||
font-style: normal;
|
||||
padding: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.poem-output,
|
||||
.result-container {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
min-height: 120px;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.poem-output {
|
||||
white-space: pre-wrap;
|
||||
font-family: 'PingFang SC', 'Hiragino Sans GB', 'KaiTi', '楷体', serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
text-align: center;
|
||||
color: #1D1D1F;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.result-container {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 0.95rem;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.score-display {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
color: #007AFF;
|
||||
margin-bottom: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.score-desc {
|
||||
font-size: 0.85rem;
|
||||
color: #86868B;
|
||||
text-align: center;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.meaning-content {
|
||||
font-size: 0.9rem;
|
||||
color: #1D1D1F;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.suggestions-container {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 12px;
|
||||
padding: 12px;
|
||||
min-height: 100px;
|
||||
backdrop-filter: blur(8px);
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
color: #86868B;
|
||||
font-style: normal;
|
||||
padding: 20px 10px;
|
||||
font-weight: 400;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.convention-group-title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin: 12px 0 8px 0;
|
||||
padding: 8px 12px;
|
||||
background: #007AFF;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 6px rgba(0, 122, 255, 0.25);
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.convention-group-title:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin-bottom: 0;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
backdrop-filter: blur(8px);
|
||||
min-height: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.suggestion-item:hover {
|
||||
border-color: rgba(0, 122, 255, 0.3);
|
||||
box-shadow: 0 3px 10px rgba(0, 122, 255, 0.15);
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.variable-name {
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 3px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.variable-description {
|
||||
font-size: 0.8rem;
|
||||
color: #86868B;
|
||||
line-height: 1.3;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
background: #007AFF;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 3px 6px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 3px rgba(0, 122, 255, 0.25);
|
||||
}
|
||||
|
||||
.suggestion-item:hover .copy-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background: #0056CC;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #FF3B30;
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
border: 1px solid rgba(255, 59, 48, 0.2);
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
margin-top: 12px;
|
||||
font-weight: 500;
|
||||
backdrop-filter: blur(8px);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.success-toast {
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
background: #34C759;
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px 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(15px);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.success-toast.show {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* 移动端优化 */
|
||||
@media (max-width: 480px) {
|
||||
body {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 8px 10px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.textarea {
|
||||
min-height: 70px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.result-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.poem-output,
|
||||
.result-container,
|
||||
.suggestions-container {
|
||||
padding: 12px;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.poem-output {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
padding: 8px;
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.variable-name {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.variable-description {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
position: static;
|
||||
opacity: 1;
|
||||
margin-top: 4px;
|
||||
width: 100%;
|
||||
padding: 4px 6px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.suggestion-item,
|
||||
.result-card {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
Reference in New Issue
Block a user