董海洋
164 lines
9.5 KiB
HTML
164 lines
9.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>步骤详解 - 注册物料面板到 Material.ts</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 .keyword { color: var(--accent-purple); }
|
||
.group-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 1rem; }
|
||
.group-table th { background: var(--bg-secondary); padding: 0.75rem 1rem; text-align: left; font-size: 0.85rem; color: var(--accent-orange); border-bottom: 1px solid var(--border-color); }
|
||
.group-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); font-size: 0.85rem; color: var(--text-secondary); }
|
||
.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; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<a href="../../物料组件添加流程.html" class="back-link">← 返回主文档</a>
|
||
<div class="header">
|
||
<div class="step-badge">步骤 6</div>
|
||
<h1>注册物料面板到 Material.ts</h1>
|
||
<p class="desc">让新组件出现在设计器左侧物料面板的对应分组中</p>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>📋 功能描述</h2>
|
||
<p>在 <code>Material.ts</code> 的 <code>getMaterialPanelConfig()</code> 函数返回值中，将 <code>WidgetType</code> 添加到对应分组的 <code>widgetTypeList</code> 数组中。完成后，用户就能在页面设计器的左侧物料面板中看到并拖拽该组件。</p>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>🧩 模块描述</h2>
|
||
<p>Material.ts 定义了物料面板的分组结构，包含以下分组：</p>
|
||
<table class="group-table">
|
||
<thead><tr><th>分组名称</th><th>枚举值</th><th>典型组件</th></tr></thead>
|
||
<tbody>
|
||
<tr><td>通用字段</td><td>GeneralField</td><td>输入框、文本域、数字、日期、选择器等</td></tr>
|
||
<tr><td>业务字段</td><td>BusinessField</td><td>人员、组织、数据引用、单据引用等</td></tr>
|
||
<tr><td>单据体</td><td>DocumentBody</td><td>BillBody、BillBodyChild、BillBodyTree 等</td></tr>
|
||
<tr><td>通用组件</td><td>Common</td><td>CommonTxt、CommonBtn、CommonImg、CommonLink、Icon 等</td></tr>
|
||
<tr><td>容器组件</td><td>Container</td><td>Row、FlexLayout、GroupPanel、PartitionContainer</td></tr>
|
||
<tr><td>导航组件</td><td>Navigation</td><td>Tabs、Toolbar、Anchor</td></tr>
|
||
<tr><td>审批组件</td><td>ApproveProcess</td><td>ApproveBtnGroup、ApproveRecord、ApproveFlowChart</td></tr>
|
||
<tr><td>列表组件</td><td>ListVxe</td><td>ListVxeColumn、ListVxeAction、ListVxeGroup 等</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</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/config/Material.ts</span></p>
|
||
</div>
|
||
<div class="info-card">
|
||
<h4>操作类型</h4>
|
||
<p><strong style="color: #fbbf24;">修改</strong> - 在对应分组 widgetTypeList 中添加</p>
|
||
</div>
|
||
<div class="info-card">
|
||
<h4>修改位置</h4>
|
||
<p>getMaterialPanelConfig() 返回值中的对应分组</p>
|
||
</div>
|
||
<div class="info-card">
|
||
<h4>所属层级</h4>
|
||
<p>页面设计器层 (packages/form-designer)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>💻 修改示例</h2>
|
||
<p>根据组件类型，在对应分组的 widgetTypeList 中添加：</p>
|
||
<div class="code-block">
|
||
<span class="comment">// packages/form-designer/src/config/Material.ts</span>
|
||
|
||
export function getMaterialPanelConfig() {
|
||
return [
|
||
<span class="comment">// 通用字段分组</span>
|
||
{ name: MaterialCollapseTypeEnum.GeneralField, widgetTypeList: [...] },
|
||
|
||
<span class="comment">// 业务字段分组</span>
|
||
{ name: MaterialCollapseTypeEnum.BusinessField, widgetTypeList: [...] },
|
||
|
||
<span class="comment">// 通用组件分组 ← 如果你的组件是 CommonBtn 类型</span>
|
||
{
|
||
name: MaterialCollapseTypeEnum.Common,
|
||
widgetTypeList: [
|
||
WidgetType.CommonTxt,
|
||
WidgetType.CommonBtn,
|
||
WidgetType.CommonImg,
|
||
WidgetType.CommonLink,
|
||
WidgetType.Icon,
|
||
<span class="comment">// ← 添加新组件</span>
|
||
WidgetType.MyNewComponent,
|
||
],
|
||
},
|
||
|
||
<span class="comment">// 容器组件分组 ← 如果你的组件是 GroupPanel 类型</span>
|
||
{
|
||
name: MaterialCollapseTypeEnum.Container,
|
||
widgetTypeList: [
|
||
WidgetType.Row,
|
||
WidgetType.FlexLayout,
|
||
WidgetType.GroupPanel,
|
||
<span class="comment">// ← 添加新容器组件</span>
|
||
WidgetType.MyContainerComponent,
|
||
],
|
||
},
|
||
]
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>⚠️ 分组选择指南</h2>
|
||
<ul>
|
||
<li><strong>展示型组件</strong>（文本、图片、链接）→ Common 分组</li>
|
||
<li><strong>交互型组件</strong>（按钮、搜索框）→ Common 分组</li>
|
||
<li><strong>容器型组件</strong>（面板、布局）→ Container 分组</li>
|
||
<li><strong>导航型组件</strong>（Tab、工具栏）→ Navigation 分组</li>
|
||
<li><strong>表单字段</strong>（输入框、选择器）→ GeneralField 分组</li>
|
||
<li><strong>业务引用</strong>（人员、组织、数据）→ BusinessField 分组</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section" style="border-left: 4px solid var(--accent-green);">
|
||
<h2>➡️ 下一步</h2>
|
||
<p>完成物料面板注册后，执行最后一步：</p>
|
||
<ul>
|
||
<li><strong>步骤 7</strong>：在 Info.json 中补充国际化文案</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|