优化结果
This commit is contained in:
66
InfoGenie-frontend/public/aimodelapp/AI文章转文言文/index.html
Normal file
66
InfoGenie-frontend/public/aimodelapp/AI文章转文言文/index.html
Normal file
@@ -0,0 +1,66 @@
|
||||
<!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">古韵今声，文白互译</p>
|
||||
</div>
|
||||
|
||||
<div class="form-section">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="modernText">请输入现代文内容：</label>
|
||||
<textarea
|
||||
id="modernText"
|
||||
class="form-input textarea"
|
||||
placeholder="请输入您想要转换为文言文的现代文章内容..."
|
||||
>今天天气很好，阳光明媚，我和朋友一起去公园游玩。公园里花开得很美，鸟儿在枝头歌唱，让人心情愉悦。</textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group half-width">
|
||||
<label class="form-label" for="styleSelect">文言文风格：</label>
|
||||
<select id="styleSelect" class="form-input select">
|
||||
<option value="classical">经典文言文</option>
|
||||
<option value="elegant">雅致文言文</option>
|
||||
<option value="formal">正式文言文</option>
|
||||
<option value="poetic">诗意文言文</option>
|
||||
<option value="historical">史书文言文</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group half-width">
|
||||
<label class="form-label" for="articleTypeSelect">文章类型：</label>
|
||||
<select id="articleTypeSelect" class="form-input select">
|
||||
<option value="narrative">记叙文</option>
|
||||
<option value="argumentative">议论文</option>
|
||||
<option value="expository">说明文</option>
|
||||
<option value="descriptive">描写文</option>
|
||||
<option value="lyrical">抒情文</option>
|
||||
<option value="official">公文体</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="convertBtn" class="btn">开始转换</button>
|
||||
</div>
|
||||
|
||||
<div class="result-section">
|
||||
<h3 class="result-title">文言文转换结果</h3>
|
||||
<div id="loading" class="loading">正在转换中，请稍候...</div>
|
||||
<div id="conversionResult" class="conversion-container">
|
||||
<div class="placeholder">点击"开始转换"按钮，AI将为您提供精准的文言文转换</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="env.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
288
InfoGenie-frontend/public/aimodelapp/AI文章转文言文/script.js
Normal file
288
InfoGenie-frontend/public/aimodelapp/AI文章转文言文/script.js
Normal file
@@ -0,0 +1,288 @@
|
||||
// 从配置文件导入设置
|
||||
// 配置在 env.js 文件中定义
|
||||
|
||||
// DOM 元素
|
||||
const modernTextInput = document.getElementById('modernText');
|
||||
const styleSelect = document.getElementById('styleSelect');
|
||||
const articleTypeSelect = document.getElementById('articleTypeSelect');
|
||||
const convertBtn = document.getElementById('convertBtn');
|
||||
const loadingDiv = document.getElementById('loading');
|
||||
const conversionResultContainer = document.getElementById('conversionResult');
|
||||
|
||||
// 调用后端API
|
||||
async function callBackendAPI(modernText, style, articleType) {
|
||||
try {
|
||||
const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/classical_conversion', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
modern_text: modernText,
|
||||
style: style,
|
||||
article_type: articleType
|
||||
})
|
||||
});
|
||||
|
||||
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.conversion_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 displayConversionResult(result) {
|
||||
conversionResultContainer.innerHTML = '';
|
||||
|
||||
if (!result || !result.classical_text) {
|
||||
conversionResultContainer.innerHTML = '<div class="placeholder">转换失败，请尝试重新转换</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 创建结果容器
|
||||
const resultDiv = document.createElement('div');
|
||||
resultDiv.className = 'conversion-result';
|
||||
|
||||
// 转换信息
|
||||
const infoDiv = document.createElement('div');
|
||||
infoDiv.className = 'conversion-info';
|
||||
infoDiv.innerHTML = `
|
||||
<div class="info-item">
|
||||
<span class="label">转换风格：</span>
|
||||
<span class="value">${result.style || '经典文言文'}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">文章类型：</span>
|
||||
<span class="value">${result.article_type || '记叙文'}</span>
|
||||
</div>
|
||||
`;
|
||||
resultDiv.appendChild(infoDiv);
|
||||
|
||||
// 原文显示
|
||||
const originalDiv = document.createElement('div');
|
||||
originalDiv.className = 'original-text';
|
||||
originalDiv.innerHTML = `
|
||||
<div class="text-header">
|
||||
<span class="label">原现代文：</span>
|
||||
<button class="copy-btn" onclick="copyToClipboard('${(result.original_text || '').replace(/'/g, "\\'")}')">复制</button>
|
||||
</div>
|
||||
<div class="text-content">${result.original_text || modernTextInput.value}</div>
|
||||
`;
|
||||
resultDiv.appendChild(originalDiv);
|
||||
|
||||
// 文言文结果
|
||||
const classicalDiv = document.createElement('div');
|
||||
classicalDiv.className = 'classical-text';
|
||||
classicalDiv.innerHTML = `
|
||||
<div class="text-header">
|
||||
<span class="label">文言文转换：</span>
|
||||
<button class="copy-btn" onclick="copyToClipboard('${result.classical_text.replace(/'/g, "\\'")}')">复制</button>
|
||||
</div>
|
||||
<div class="text-content classical">${result.classical_text}</div>
|
||||
`;
|
||||
resultDiv.appendChild(classicalDiv);
|
||||
|
||||
// 关键转换说明
|
||||
if (result.key_transformations && result.key_transformations.length > 0) {
|
||||
const transformationsDiv = document.createElement('div');
|
||||
transformationsDiv.className = 'transformations';
|
||||
transformationsDiv.innerHTML = '<div class="transformations-title">关键转换说明：</div>';
|
||||
|
||||
result.key_transformations.forEach((transformation, index) => {
|
||||
if (transformation && transformation.trim()) {
|
||||
const transformDiv = document.createElement('div');
|
||||
transformDiv.className = 'transformation-item';
|
||||
transformDiv.innerHTML = `<span class="number">${index + 1}.</span><span class="text">${transformation}</span>`;
|
||||
transformationsDiv.appendChild(transformDiv);
|
||||
}
|
||||
});
|
||||
|
||||
resultDiv.appendChild(transformationsDiv);
|
||||
}
|
||||
|
||||
// 文言文特色分析
|
||||
if (result.classical_features) {
|
||||
const featuresDiv = document.createElement('div');
|
||||
featuresDiv.className = 'classical-features';
|
||||
featuresDiv.innerHTML = '<div class="features-title">文言文特色分析：</div>';
|
||||
|
||||
if (result.classical_features.sentence_patterns) {
|
||||
const patternDiv = document.createElement('div');
|
||||
patternDiv.className = 'feature-item';
|
||||
patternDiv.innerHTML = `<span class="feature-label">句式特点：</span><span class="feature-text">${result.classical_features.sentence_patterns}</span>`;
|
||||
featuresDiv.appendChild(patternDiv);
|
||||
}
|
||||
|
||||
if (result.classical_features.vocabulary) {
|
||||
const vocabDiv = document.createElement('div');
|
||||
vocabDiv.className = 'feature-item';
|
||||
vocabDiv.innerHTML = `<span class="feature-label">词汇运用：</span><span class="feature-text">${result.classical_features.vocabulary}</span>`;
|
||||
featuresDiv.appendChild(vocabDiv);
|
||||
}
|
||||
|
||||
if (result.classical_features.grammar) {
|
||||
const grammarDiv = document.createElement('div');
|
||||
grammarDiv.className = 'feature-item';
|
||||
grammarDiv.innerHTML = `<span class="feature-label">语法特色：</span><span class="feature-text">${result.classical_features.grammar}</span>`;
|
||||
featuresDiv.appendChild(grammarDiv);
|
||||
}
|
||||
|
||||
resultDiv.appendChild(featuresDiv);
|
||||
}
|
||||
|
||||
// 转换说明
|
||||
if (result.explanation) {
|
||||
const explanationDiv = document.createElement('div');
|
||||
explanationDiv.className = 'explanation';
|
||||
explanationDiv.innerHTML = `<span class="label">转换说明：</span><div class="explanation-text">${result.explanation}</div>`;
|
||||
resultDiv.appendChild(explanationDiv);
|
||||
}
|
||||
|
||||
// 发音指导
|
||||
if (result.pronunciation_guide) {
|
||||
const pronunciationDiv = document.createElement('div');
|
||||
pronunciationDiv.className = 'pronunciation';
|
||||
pronunciationDiv.innerHTML = `<span class="label">古音指导：</span><span class="value">${result.pronunciation_guide}</span>`;
|
||||
resultDiv.appendChild(pronunciationDiv);
|
||||
}
|
||||
|
||||
conversionResultContainer.appendChild(resultDiv);
|
||||
}
|
||||
|
||||
// 复制到剪贴板
|
||||
function copyToClipboard(text) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
showSuccessToast('已复制到剪贴板');
|
||||
}).catch(err => {
|
||||
console.error('复制失败:', err);
|
||||
// 备用复制方法
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = text;
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
showSuccessToast('已复制到剪贴板');
|
||||
} 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;
|
||||
conversionResultContainer.innerHTML = '';
|
||||
conversionResultContainer.appendChild(errorDiv);
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
function showLoading(show) {
|
||||
loadingDiv.style.display = show ? 'block' : 'none';
|
||||
convertBtn.disabled = show;
|
||||
convertBtn.textContent = show ? '转换中...' : '开始转换';
|
||||
}
|
||||
|
||||
// 执行转换
|
||||
async function performConversion() {
|
||||
const modernText = modernTextInput.value.trim();
|
||||
const style = styleSelect.value;
|
||||
const articleType = articleTypeSelect.value;
|
||||
|
||||
if (!modernText) {
|
||||
showErrorMessage('请输入要转换的现代文内容');
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading(true);
|
||||
conversionResultContainer.innerHTML = '';
|
||||
|
||||
try {
|
||||
const result = await callBackendAPI(modernText, style, articleType);
|
||||
const parsedResult = parseAIResponse(result);
|
||||
displayConversionResult(parsedResult);
|
||||
} catch (error) {
|
||||
console.error('转换失败:', error);
|
||||
showErrorMessage(`转换失败: ${error.message}`);
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// 事件监听器
|
||||
convertBtn.addEventListener('click', performConversion);
|
||||
|
||||
// 回车键转换
|
||||
modernTextInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter' && e.ctrlKey) {
|
||||
e.preventDefault();
|
||||
performConversion();
|
||||
}
|
||||
});
|
||||
|
||||
// 页面加载完成后的初始化
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 设置默认占位符
|
||||
conversionResultContainer.innerHTML = '<div class="placeholder">请输入现代文内容，选择转换风格和文章类型，然后点击转换按钮</div>';
|
||||
});
|
||||
|
||||
// 导出函数供HTML调用
|
||||
window.copyToClipboard = copyToClipboard;
|
||||
window.performConversion = performConversion;
|
||||
603
InfoGenie-frontend/public/aimodelapp/AI文章转文言文/styles.css
Normal file
603
InfoGenie-frontend/public/aimodelapp/AI文章转文言文/styles.css
Normal file
@@ -0,0 +1,603 @@
|
||||
/* 全局样式重置 */
|
||||
* {
|
||||
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, #8B4513 0%, #D2691E 50%, #F4A460 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: #8B4513;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #D2691E;
|
||||
font-size: 1.0625rem;
|
||||
margin-bottom: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 表单样式 - iOS风格 */
|
||||
.form-section {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.half-width {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.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: #D2691E;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
box-shadow: 0 0 0 4px rgba(210, 105, 30, 0.1);
|
||||
}
|
||||
|
||||
.textarea {
|
||||
resize: vertical;
|
||||
min-height: 150px;
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.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: #D2691E;
|
||||
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(210, 105, 30, 0.25);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #B8860B;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(210, 105, 30, 0.35);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
background: #A0522D;
|
||||
}
|
||||
|
||||
.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: #8B4513;
|
||||
margin-bottom: 16px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.loading {
|
||||
display: none;
|
||||
text-align: center;
|
||||
color: #D2691E;
|
||||
font-style: normal;
|
||||
padding: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.conversion-container {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
min-height: 200px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
text-align: center;
|
||||
color: #86868B;
|
||||
font-style: normal;
|
||||
padding: 40px 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* 转换结果样式 */
|
||||
.conversion-result {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
.conversion-info {
|
||||
background: rgba(139, 69, 19, 0.1);
|
||||
border: 1px solid rgba(139, 69, 19, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-item .label {
|
||||
font-weight: 600;
|
||||
color: #8B4513;
|
||||
}
|
||||
|
||||
.info-item .value {
|
||||
color: #1D1D1F;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
padding: 4px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
/* 文本显示区域 */
|
||||
.original-text,
|
||||
.classical-text {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.classical-text {
|
||||
background: rgba(244, 164, 96, 0.1);
|
||||
border: 1px solid rgba(244, 164, 96, 0.3);
|
||||
}
|
||||
|
||||
.text-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.text-header .label {
|
||||
font-weight: 600;
|
||||
color: #1D1D1F;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
font-size: 1.125rem;
|
||||
color: #1D1D1F;
|
||||
line-height: 1.8;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.text-content.classical {
|
||||
font-family: 'STKaiti', 'KaiTi', '楷体', serif;
|
||||
font-size: 1.25rem;
|
||||
line-height: 2;
|
||||
color: #8B4513;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 转换说明区域 */
|
||||
.transformations {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.transformations-title {
|
||||
font-weight: 600;
|
||||
color: #1D1D1F;
|
||||
margin-bottom: 16px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.transformation-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.transformation-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.transformation-item .number {
|
||||
color: #D2691E;
|
||||
font-weight: 600;
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.transformation-item .text {
|
||||
color: #1D1D1F;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 文言文特色分析 */
|
||||
.classical-features {
|
||||
background: rgba(210, 105, 30, 0.1);
|
||||
border: 1px solid rgba(210, 105, 30, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.features-title {
|
||||
font-weight: 600;
|
||||
color: #D2691E;
|
||||
margin-bottom: 16px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.feature-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.feature-label {
|
||||
font-weight: 600;
|
||||
color: #8B4513;
|
||||
min-width: 80px;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
color: #1D1D1F;
|
||||
line-height: 1.6;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
background: rgba(139, 69, 19, 0.1);
|
||||
border: 1px solid rgba(139, 69, 19, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.explanation .label {
|
||||
font-weight: 600;
|
||||
color: #8B4513;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.explanation-text {
|
||||
color: #1D1D1F;
|
||||
line-height: 1.6;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.pronunciation {
|
||||
background: rgba(255, 149, 0, 0.1);
|
||||
border: 1px solid rgba(255, 149, 0, 0.2);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.pronunciation .label {
|
||||
font-weight: 600;
|
||||
color: #FF9500;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.pronunciation .value {
|
||||
color: #1D1D1F;
|
||||
font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
|
||||
}
|
||||
|
||||
/* 复制按钮样式 */
|
||||
.copy-btn {
|
||||
background: #D2691E;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 2px 4px rgba(210, 105, 30, 0.25);
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background: #B8860B;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.copy-btn-small {
|
||||
background: #D2691E;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 1px 2px rgba(210, 105, 30, 0.25);
|
||||
}
|
||||
|
||||
.copy-btn-small:hover {
|
||||
background: #B8860B;
|
||||
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-row {
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.conversion-container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.original-text,
|
||||
.classical-text {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.text-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.conversion-info {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.feature-label {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.title {
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.original-text,
|
||||
.classical-text {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.text-content.classical {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 动画效果 */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.conversion-result {
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 古典风格装饰 */
|
||||
.classical-text::before {
|
||||
content: '「';
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
font-size: 1.5rem;
|
||||
color: #D2691E;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.classical-text::after {
|
||||
content: '」';
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
right: 15px;
|
||||
font-size: 1.5rem;
|
||||
color: #D2691E;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.classical-text .text-content {
|
||||
margin: 0 20px;
|
||||
}
|
||||
Reference in New Issue
Block a user