董海洋
150 lines
8.5 KiB
HTML
150 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>步骤详解 - 补充国际化文案</title>
|
||
<style>
|
||
:root {
|
||
--bg-primary: #0a0e1a; --bg-secondary: #111827; --bg-card: #1a2035;
|
||
--bg-card-hover: #1f2a45; --border-color: #2d3a5c; --text-primary: #e2e8f0;
|
||
--text-secondary: #94a3b8; --text-muted: #64748b;
|
||
--accent-orange: #f59e0b; --accent-orange-light: #fbbf24;
|
||
--accent-cyan: #06b6d4; --accent-purple: #8b5cf6;
|
||
--shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
|
||
}
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.7; padding: 2rem; }
|
||
.container { max-width: 1000px; margin: 0 auto; }
|
||
.back-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent-orange-light); text-decoration: none; margin-bottom: 2rem; padding: 0.5rem 1rem; background: var(--bg-card); border-radius: 8px; border: 1px solid var(--border-color); transition: all 0.2s ease; }
|
||
.back-link:hover { background: var(--bg-card-hover); transform: translateX(-4px); }
|
||
.header { background: var(--bg-card); border-radius: 16px; padding: 2rem; margin-bottom: 2rem; border: 1px solid var(--border-color); box-shadow: var(--shadow-lg); border-left: 4px solid var(--accent-orange); }
|
||
.step-badge { display: inline-block; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; padding: 0.3rem 1rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; margin-bottom: 1rem; }
|
||
.header h1 { font-size: 2rem; margin-bottom: 0.5rem; }
|
||
.header .desc { color: var(--text-secondary); font-size: 1rem; }
|
||
.section { background: var(--bg-card); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid var(--border-color); }
|
||
.section h2 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--accent-orange-light); display: flex; align-items: center; gap: 0.5rem; }
|
||
.section p { color: var(--text-secondary); margin-bottom: 1rem; }
|
||
.code-block { background: var(--bg-secondary); padding: 1.25rem; border-radius: 8px; font-family: 'Fira Code', 'Cascadia Code', monospace; font-size: 0.85rem; color: var(--accent-cyan); overflow-x: auto; line-height: 1.6; margin-bottom: 1rem; }
|
||
.code-block .comment { color: var(--text-muted); }
|
||
.code-block .string { color: #10b981; }
|
||
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; }
|
||
.info-card { background: var(--bg-secondary); padding: 1rem; border-radius: 8px; border: 1px solid var(--border-color); }
|
||
.info-card h4 { font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--accent-orange-light); }
|
||
.info-card p { font-size: 0.85rem; color: var(--text-secondary); margin: 0; }
|
||
.file-path { font-family: 'Fira Code', monospace; font-size: 0.8rem; color: var(--accent-cyan); background: rgba(6, 182, 212, 0.1); padding: 0.25rem 0.5rem; border-radius: 4px; }
|
||
ul { list-style: none; padding: 0; }
|
||
ul li { padding: 0.4rem 0; color: var(--text-secondary); display: flex; align-items: flex-start; gap: 0.5rem; }
|
||
ul li::before { content: "▸"; color: var(--accent-orange); flex-shrink: 0; }
|
||
.tip { background: rgba(6, 182, 212, 0.1); border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 8px; padding: 1rem; margin-top: 1rem; }
|
||
.tip h4 { color: var(--accent-cyan); margin-bottom: 0.5rem; }
|
||
.tip p { color: var(--text-secondary); margin: 0; font-size: 0.9rem; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<a href="../../物料组件添加流程.html" class="back-link">← 返回主文档</a>
|
||
<div class="header">
|
||
<div class="step-badge">步骤 7</div>
|
||
<h1>补充国际化文案</h1>
|
||
<p class="desc">添加物料显示名称、属性面板标签等国际化文案</p>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>📋 功能描述</h2>
|
||
<p>在 <code>Info.json</code> 中为新组件添加多语言文案。这些文案用于：物料面板中组件的显示名称、右侧属性面板中各字段的 label、画布中的默认文本等。确保系统在不同语言环境下都能正确显示文本。</p>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>🧩 模块描述</h2>
|
||
<p>Info.json 是页面设计器的国际化文案文件，通过 vue-i18n 加载。文案按模块分组组织：</p>
|
||
<ul>
|
||
<li><strong>widget</strong> - 物料组件相关文案（名称、描述）</li>
|
||
<li><strong>settings</strong> - 属性面板字段标签</li>
|
||
<li><strong>common</strong> - 通用文案</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>📁 文件信息</h2>
|
||
<div class="info-grid">
|
||
<div class="info-card">
|
||
<h4>文件路径</h4>
|
||
<p><span class="file-path">packages/form-designer/src/locales/model/Info.json</span></p>
|
||
</div>
|
||
<div class="info-card">
|
||
<h4>操作类型</h4>
|
||
<p><strong style="color: #fbbf24;">修改</strong> - 添加新的国际化键值对</p>
|
||
</div>
|
||
<div class="info-card">
|
||
<h4>文案类型</h4>
|
||
<p>物料名称、属性面板标签、占位文本等</p>
|
||
</div>
|
||
<div class="info-card">
|
||
<h4>所属层级</h4>
|
||
<p>页面设计器层 (packages/form-designer)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>💻 修改示例</h2>
|
||
<div class="code-block">
|
||
{
|
||
<span class="comment">// ... 其他文案 ...</span>
|
||
|
||
<span class="string">"widget"</span>: {
|
||
<span class="string">"CommonTxt"</span>: { <span class="string">"title"</span>: <span class="string">"通用文本"</span> },
|
||
<span class="string">"CommonBtn"</span>: { <span class="string">"title"</span>: <span class="string">"通用按钮"</span> },
|
||
|
||
<span class="comment">// ← 添加新组件文案</span>
|
||
<span class="string">"MyNewComponent"</span>: {
|
||
<span class="string">"title"</span>: <span class="string">"新组件"</span>,
|
||
<span class="string">"description"</span>: <span class="string">"这是一个新的物料组件"</span>
|
||
}
|
||
},
|
||
|
||
<span class="string">"settings"</span>: {
|
||
<span class="string">"MyNewComponent"</span>: {
|
||
<span class="string">"content"</span>: <span class="string">"文本内容"</span>,
|
||
<span class="string">"fontSize"</span>: <span class="string">"字体大小"</span>,
|
||
<span class="string">"color"</span>: <span class="string">"字体颜色"</span>,
|
||
<span class="string">"placeholder"</span>: <span class="string">"请输入内容"</span>
|
||
}
|
||
}
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>📝 文案规范</h2>
|
||
<ul>
|
||
<li>key 使用 camelCase 命名</li>
|
||
<li>中文文案直接写在当前 Info.json</li>
|
||
<li>如需支持多语言，在对应语言目录（如 en.json）中添加英文翻译</li>
|
||
<li>文案要简洁准确，符合产品术语</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<div class="tip">
|
||
<h4>💡 提示</h4>
|
||
<p>物料面板显示的名称来自 Helper 的 buildMaterialConfig().title，但该 title 通常引用 Info.json 中的国际化 key。确保 key 与 JSON 中的路径匹配。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section" style="border-left: 4px solid var(--accent-green);">
|
||
<h2>🎉 完成！</h2>
|
||
<p>完成以上 7 个步骤后，新的物料组件已成功添加到页面设计器中。</p>
|
||
<p style="margin-top: 0.5rem;"><strong>验证方式</strong>：</p>
|
||
<ul>
|
||
<li>运行 <code>pnpm form-designer:dev</code></li>
|
||
<li>访问页面设计器</li>
|
||
<li>检查左侧物料面板是否出现新组件</li>
|
||
<li>拖入画布验证渲染和属性面板</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|