update: 2026-03-28 20:59
This commit is contained in:
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