weaver-e10-builder 1.6.8 → 1.6.10

package/skill-docs/references/code-block/ref-recipes.md

@@ -1,164 +0,0 @@
-# 按效果查代码模式
-
-本页覆盖原案例中的独立做法。字段 Key、接口和字段对象均需替换为目标表单真实数据；示例中出现的模拟接口、固定附件对象和测试 ID 不能作为正式值。
-
-| 想要的效果 | 组合方法 | 关键检查 |
-|---|---|---|
-| 保存前汇总明细人员到主表并去重 | `registerCheckEvent(OPER_SAVE)` → `getDetailAllRowIndexStr` → 逐行 `getBrowserOptionEntity` → 按 id 去重 → `changeFieldValue(...,{specialObj})` → `successFn` | 空行、重复人员、失败回调；仅拦表单保存 |
-| 附件字段回填且可预览 | 从附件模块/现有字段取完整对象 → `changeFieldValue(...,{specialObj:[{id,name,data,type:'file'}]})` | 文件权限、预览/下载入口；不可只传 id/name |
-| 多级选项等复杂值赋值 | 先 `getFieldObj` 观察已有对象 → 按 `data.content` 或 `data.dataOptions` 等原结构写 `specialObj` | 选项模板、次级选项正确显示 |
-| 将明细富文本显示为按钮或链接 | `getDetailAllRowIndexStr` 遍历每行 → `proxyFieldComp` 替换该行内容；添加行事件补新行 | 点击跳转地址与作用范围 |
-| 按两个维度分类、累加到另一明细表 | `getDetailData` 建组合 Key → 对目标行更新/新增/删除 → 监听来源值变化和增删行 | 组合 Key 唯一、消失分组删除、重复事件 |
-| 全表单跨模块识别字段并回填外部数据 | 全局 ecode `onFormReady` 取当前实例并限制 module/formId → 字段事件 → 调受支持接口 → `changeMoreField` | 权限、数据范围、主表/明细位置、失败与清空逻辑 |
-| 明细数字合计并算各行占比 | 读取明细每行数值 → `reduce` 求和 → 主表回写 → 逐行占比赋值；监听值变化及增删行 | 空值、非数字、总额 0、精度 |
-| 联动带出后再汇总并触发后续联动 | 对带出字段监听联动 scope → 汇总 → 写主表 → 必要时 `triggerFieldAllLinkage` | 避免循环；确认事件是否实际触发 |
-| 合并多个主表浏览/选项字段 | 多字段 `getBrowserOptionEntity` → 合并或按 id 去重 → 主表 `specialObj` 赋值 | 是否保留重复项、空字段 |
-| 按同行条件选择明细人员合并到主表 | `getDetailData` → 判断同行选项值 → 取人员对象 → 去重 → `changeFieldValue` | 条件变化、增删行后重算 |
-| 子明细按父行汇总金额 | 父、子关系字段匹配 → 筛子表数据 → 合计 → 回写父表指定 `rowId` | 父标识唯一、子行归属、父行删除后的处理 |
-| 按显示序号生成明细值 | 明细行数组按显示顺序 `map((row,index)=>...)` → `changeDetailData`；监听增删行 | 排序后重新计算，避免把序号当 rowId |
-| 某字段为空时触发另一字段联动 | `getFieldValue` 判空 → `triggerFieldAllLinkage(target)`；载入与源字段变化均执行 | 空字符串、0 与未选择的判定 |
-| 自定义页面参数传递/组件换肤 | 全局 ecode `regOvProps` 或表单字段 `proxyFieldContentComp`，按生效范围选择 | 组件名/props 契约、编译入口 |
-
-上述模式涉及的完整 API、参数与风险分别见 [事件](ref-events-validation.md)、[字段](ref-foundations-fields.md)、[明细](ref-details.md)、[控件](ref-controls.md) 和 [组件交互](ref-ui-global.md)。原案例存在重复与少量不完整代码：例如重复的“保存前汇总人员”，附件数据依赖文档模块，组件 props 示例有语法笔误，数字合计示例用 `eval`，全局回填示例包含模拟数据。这里保留其实现思路，代码应按专题中可运行的结构重新组装。
-
-## 保存前汇总明细人员并去重
-
-先定位明细、明细人员字段和主表目标字段；仅在表单数据保存前执行。需要流程“提交”时改用流程 SDK 的节点提交事件。
-
-```js
-const table = formSdk.convertFieldNameToId('people_detail', 'main');
-const detailPerson = formSdk.convertFieldNameToId('person', table);
-const mainPeople = formSdk.convertFieldNameToId('all_people', 'main');
-formSdk.registerCheckEvent(window.WeFormSDK.OPER_SAVE, (ok, stop) => {
-  try {
-    const rowIds = (formSdk.getDetailAllRowIndexStr(table) || '').split(',').filter(Boolean);
-    const unique = new Map();
-    for (const rowId of rowIds) {
-      for (const item of formSdk.getBrowserOptionEntity(`${detailPerson}_${rowId}`) || []) {
-        if (item?.id) unique.set(String(item.id), item);
-      }
-    }
-    formSdk.changeFieldValue(mainPeople, {specialObj: [...unique.values()]});
-    ok();
-  } catch (error) {
-    stop({msg: '人员汇总失败，请检查明细数据'});
-  }
-});
-```
-
-## 明细数值汇总并计算占比
-
-值变化、增行、删行和初次载入都要重新计算；`getDetailData` 的每行包含 `rowId`。示例以数值 0 处理空值，业务若要求空值报错，应另作校验。
-
-```js
-const table = formSdk.convertFieldNameToId('cost_detail', 'main');
-const detailAmount = formSdk.convertFieldNameToId('amount', table);
-const detailShare = formSdk.convertFieldNameToId('share', table);
-const mainTotal = formSdk.convertFieldNameToId('total', 'main');
-function recalculate() {
-  const rows = formSdk.getDetailData(table) || [];
-  const total = rows.reduce((sum, row) => sum + Number(row[detailAmount]?.value || 0), 0);
-  formSdk.changeFieldValue(mainTotal, {value: String(total)}, {jsApiChange: false});
-  for (const row of rows) {
-    const amount = Number(row[detailAmount]?.value || 0);
-    formSdk.changeFieldValue(`${detailShare}_${row.rowId}`, {value: String(total ? amount / total : 0)}, {jsApiChange: false});
-  }
-}
-formSdk.bindFieldChangeEvent(detailAmount, recalculate);
-formSdk.registerAction(`${window.WeFormSDK.ACTION_ADDROW}${table}`, recalculate);
-formSdk.registerAction(`${window.WeFormSDK.ACTION_DELROW}${table}`, recalculate);
-recalculate();
-```
-
-如汇总源值本身来自字段联动，普通字段变化事件可能不触发；依目标基线使用 `scope: window.WeFormSDK.CHANGE_EVENT_LINKAGE` 或监听 `ACTION_DATA_LINKAGE`。占比输出为 0～1 还是 0～100，须按目标字段的百分比显示方式确定。不要直接打开全局联动事件开关而不检查既有监听是否形成循环。
-
-## 父子明细按关系字段回写
-
-父、子明细的关系字段值相同才能归属同一父行。先配置真实二级明细关系，再对每个父行筛选对应子行。这里的业务主键与 `rowId` 分开。
-
-```js
-const parentTable = formSdk.convertFieldNameToId('parent_detail', 'main');
-const childTable = formSdk.convertFieldNameToId('child_detail', 'main');
-const parentKey = formSdk.convertFieldNameToId('parent_key', parentTable);
-const parentTotal = formSdk.convertFieldNameToId('parent_total', parentTable);
-const childKey = formSdk.convertFieldNameToId('child_parent_key', childTable);
-const childAmount = formSdk.convertFieldNameToId('child_amount', childTable);
-function recalculateParents() {
-  const children = formSdk.getDetailData(childTable) || [];
-  for (const parent of formSdk.getDetailData(parentTable) || []) {
-    const key = parent[parentKey]?.value;
-    const total = children.filter(row => row[childKey]?.value === key)
-      .reduce((sum, row) => sum + Number(row[childAmount]?.value || 0), 0);
-    formSdk.changeFieldValue(`${parentTotal}_${parent.rowId}`, {value: String(total)}, {jsApiChange: false});
-  }
-}
-formSdk.bindFieldChangeEvent(childAmount, recalculateParents);
-formSdk.registerAction(`${window.WeFormSDK.ACTION_ADDROW}${childTable}`, recalculateParents);
-formSdk.registerAction(`${window.WeFormSDK.ACTION_DELROW}${childTable}`, recalculateParents);
-recalculateParents();
-```
-
-关系字段若为选项而非文本，按 `getFieldObj` 的 `specialObj` 比较 ID。父行标识必须唯一；删除父行后的子行处置应由业务规则明确。用 `getDetailData` 复制子行时不要复制旧 `rowId`。
-
-## 来源明细按两列分组，同步到目标明细
-
-来源中按“部门 ID + 类型 ID”分组求和；目标中已有分组更新、缺失分组新增、来源已消失的分组删除。监听来源的两列条件字段、数值字段与增删行事件。下面只展示同步函数，绑定方式同上方汇总案例。
-
-```js
-function syncGroups(sourceTable, targetTable, sourceDept, sourceType, sourceAmount,
-                    targetDept, targetType, targetAmount) {
-  const groups = new Map();
-  for (const row of formSdk.getDetailData(sourceTable) || []) {
-    const dept = row[sourceDept]?.specialObj?.[0];
-    const type = row[sourceType]?.specialObj?.[0];
-    if (!dept?.id || !type?.id) continue;
-    const key = `${dept.id}:${type.id}`;
-    const item = groups.get(key) || {dept, type, total: 0};
-    item.total += Number(row[sourceAmount]?.value || 0);
-    groups.set(key, item);
-  }
-  const existing = new Map();
-  for (const row of formSdk.getDetailData(targetTable) || []) {
-    const deptId = row[targetDept]?.specialObj?.[0]?.id;
-    const typeId = row[targetType]?.specialObj?.[0]?.id;
-    if (!deptId || !typeId || !groups.has(`${deptId}:${typeId}`)) {
-      formSdk.delDetailRow(targetTable, row.rowId);
-    } else {
-      existing.set(`${deptId}:${typeId}`, row.rowId);
-    }
-  }
-  for (const [key, item] of groups) {
-    const rowId = existing.get(key);
-    if (rowId) {
-      formSdk.changeFieldValue(`${targetAmount}_${rowId}`, {value: String(item.total)}, {jsApiChange: false});
-    } else {
-      formSdk.addDetailRow(targetTable, {
-        [targetDept]: {specialObj: [item.dept]},
-        [targetType]: {specialObj: [item.type]},
-        [targetAmount]: {value: String(item.total)}
-      });
-    }
-  }
-}
-```
-
-这种同步会删除目标中无来源的行，只有目标表完全由来源派生时才适用；若允许用户手工维护目标行，应改为保留手工行并有明确的来源标识。跨字段 `id` 类型与数值精度须按实际表单处理。
-
-## 根据明细同行条件筛人员，合并到主表
-
-对每行读取条件选项，按不同条件分别取对应人员字段，再按人员 ID 去重并写入主表。初次载入、条件/人员字段变化、明细增删行均重新执行。
-
-```js
-function syncPeople(table, conditionField, firstPeopleField, secondPeopleField, mainPeopleField) {
-  const people = new Map();
-  for (const row of formSdk.getDetailData(table) || []) {
-    const choice = row[conditionField]?.specialObj?.[0]?.id;
-    const selected = choice === '0' ? row[firstPeopleField]?.specialObj :
-      choice === '1' ? row[secondPeopleField]?.specialObj : [];
-    for (const person of selected || []) if (person?.id) people.set(String(person.id), person);
-  }
-  formSdk.changeFieldValue(mainPeopleField, {specialObj: [...people.values()]}, {jsApiChange: false});
-}
-```
-
-条件选项 ID `'0'/'1'` 是示例占位，须读取真实选项 ID。若人员字段由系统联动带出，还要按[事件指南](ref-events-validation.md)监听联动完成事件。

package/skill-docs/references/code-block/ref-troubleshooting.md

@@ -1,49 +0,0 @@
-# JSSDK 排查、版本与边界
-
-## 代码不生效时
-
-1. 确认保存的是目标表单的目标布局及目标终端，或正确的表单级/全局 ecode；JS 编译通过且代码已启用，CSS 单独保存。浏览器打开的是最新布局而非另一设备布局。
-2. 确认 `formSdk` 取自当前表单实例；全局 ecode 用 `onFormReady` 的事件实例并限定 formId/module。较早基线的 `pageSdk.on('formReady')` 与新基线闭包方式不要混用到未支持的入口。
-3. 用 `getBaseInfo`、`convertFieldNameToId`、`getFieldInfo` 检查当前表单和字段；数据 Key 不是字段名或物理表名。明细字段要指定明细表位置，行操作要取得真实 `rowId`。
-4. 用 `getFieldObj` 对照目标类型的数据形状。文本/数字/日期常用 `{value}`；浏览/动态选项/附件常用 `{specialObj}`。附件预览还依赖完整 `data`。
-5. 检查事件是否属于“表单保存”“流程提交”“用户改变”“联动改变”中的哪一种；必要时分开绑定。拦截回调必须调用通过或阻断函数；异步超时约 25 秒。
-6. 检查权限和组件边界。流程节点默认只读或权限锁定的字段，不能仅靠 `changeFieldAttr(2)` 放开；JS 渲染也不改变后端权限。
-
-开发调试时可按环境入口临时屏蔽不同层级二开：ecode 平台、全局初始化代码、布局源码对应不同入口。调试开关仅用于定位，不作为正式配置。对含多表单、父子页面、明细新行的场景，还要检查实例、`postMessage` 来源与渲染时机。
-
-## 设计器源码面板为空 / ECode decode failed
-
-- **症状**：打开布局源码时控制台报 `ECode decode failed, SyntaxError: Expected ':' after property name in JSON at position 5`，源码面板为空，预览按钮失效。
-- **原因**：`sourceCode.ecode` 被 `encodeURIComponent` 写入。设计器用 `JSON.parse(decodeURI(ecode))` 读取，而 `decodeURI` 不还原 `%3A`（冒号），JSON 变成 `{"js"%3A...}`。
-- **处理**：用 `form code layout set` / `wf-form code layout set` 重新写入（CLI 已使用 `encodeURI`，并在写入前、回读后按设计器路径自检）。临时恢复可把 `sourceCode.ecode` 置为空字符串，再用空 JS/CSS 文件重写。
-- **手工调接口**：必须用 `encodeURI(JSON.stringify({js, css}))`，不要用 `encodeURIComponent`。
-
-## 基线速查
-
-| 功能 | 原技术资料标注的最低基线 |
-|---|---|
-| `changeFieldValue` 的联动控制参数 | 241001 |
-| `valueInfo.type/contentObj` 特殊字段 | 241201 |
-| 字段联动拦截及联动动作的 `runData` | 240601 |
-| 字段变化事件的联动 `scope` | 250401；明细专用事件的扩展参数 250901 |
-| 明细批量添加 `addDetailData` | 241201 |
-| 布局/表单代码直接取得当前 `formSdk` | 主体说明标注 250101；另有一处写 241201，稳妥按 250101 判断 |
-| 明细批量更新 `changeDetailData` | 250101 |
-| `changeTabItemAttr` | 20250501 |
-| `controlOptionDisable` | 20250501 |
-| `convertFieldNameToId` 用明细表数据 Key 定位明细字段 | 260601 |
-| `getDetailData` 按当前明细筛选条件取数 | 260401 |
-| `triggerFieldAllLinkage(...).then(...)` | 250901 |
-| 联动赋值导致的明细行变化事件扩展 | 251101 |
-| `pluginGet/pluginExecute` | 260201 |
-
-先确认目标环境版本和实际 API 可用性；未达到基线时不要假设同名功能可用。
-
-## 原案例中需纠正的写法
-
-- 字段赋值示例声明 `textFieldMark` 后却调用 `fieldMark`，日期示例声明 `dateFieldMark` 后调用 `selectFieldMark`；按真正声明的目标字段写。
-- 字段属性示例的明细行模板字符串缺少引号闭合；正确形式为 `` `${detailField}_${rowId}` ``。
-- `getFieldCom` 章节示例调用了 `getFieldInfo`；两者用途不同，前者为组件引用，后者为字段信息。
-- 明细“默认使用末行”章节的示例实际调用 `setDetailAddUseCopy`；先确认所需是复制末行，而非仅控制默认光标或位置。
-- 案例中的 `eval(numbers.join('+'))`、测试 URL、固定附件元数据、模拟外部查询结果不能直接用于业务配置。数值合计用显式转换与 `reduce`，外部接口须有真实契约。
-- 全局 ecode 的 `import`、JSX、`regOvProps` 示例不要直接粘入布局源码；按目标编辑器支持的语法重写。布局源码中的局部字段组件复写则按其 API 单独处理。

package/skill-docs/references/code-block/ref-ui-global.md

@@ -1,47 +0,0 @@
-# 组件渲染、全局交互与扩展
-
-## 当前表单与全局操作
-
-`formSdk.getBaseInfo()` 读取当前表单基本信息；`formSdk.isMobile()` 判断移动端。布局级代码优先使用当前作用域 `formSdk`；提示、弹窗由全局 `window.WeFormSDK` 提供。
-
-| 效果 | API 与要点 |
-|---|---|
-| 提示 | `window.WeFormSDK.showMessage(message, type?, duration?)`；type 为 `1` 警告、`2` 错误、`3` 成功；时长单位秒 |
-| 确认 | `window.WeFormSDK.showConfirm(content, onOk, onCancel?, {title,okText,cancelText}?)`；title 仅 PC 有效 |
-| 自定义弹窗 | `window.WeFormSDK.openCustomDialog({content,width,height,onOk,onCancel,footer?,...})`；返回对象可 `destroy()` |
-| 页面刷新 | `formSdk.reloadPage(params?)` |
-| 提交附加参数 | `formSdk.appendSubmitParam({customParam:{...}})`；接收端仍须能处理该参数 |
-| 主动做必填检查 | `formSdk.verifyFormRequired(mustAddDetail?,fieldRequired?)` |
-| 全局加载 | `window.WeFormSDK.getLoadingGlobal()` 取加载控件，调用 `start()`、`end()`、`destroy()` |
-| 关闭页面提示 | `formSdk.setFormTipCloseStatus(true/false)`；只控制提示状态，不执行保存 |
-
-自定义 footer 使用 `@weapp/ui` 的 import/JSX 是 ecode 构建环境示例；布局源码只允许其编辑器可编译的语法和已暴露对象，不能直接套用 ecode 依赖。
-
-## 字段区域事件和局部渲染
-
-`bindFieldAction(type, fields, handler)` 绑定失焦、聚焦、点击、双击、移入/移出；事件类型为 `onblur/onfocus/onclick/ondbclick/mouseover/mouseout`。
-
-| 需求 | API |
-|---|---|
-| 将当前字段内容替换为自定义内容 | `proxyFieldComp(fieldMark, reactNode或文本, range?)` |
-| 在字段后追加内容 | `afterFieldComp(fieldMark, reactNode或文本, range?)` |
-| 用函数包装原字段内容并利用 props 决定样式 | `proxyFieldContentComp(fieldMark, (props, componentFn) => React.createElement(..., componentFn()))` |
-
-`range` 省略时作用于全部读写状态；`'1'` 只读、`'2'` 可编辑、`'3'` 必填，多个值以逗号分隔。`proxyFieldContentComp` 的回调必须返回组件，第二参数 `componentFn` 可生成原字段内容。`React` 可用性和编译语法要以目标代码入口为准。明细字段不加行 ID 可作用于整列，指定行则加 `_rowId`；新添行的专门逻辑应在添加行事件后检查是否生效。此能力是当前表单字段的局部渲染，不等于发布平台级新组件，也不等于改写后端接口。
-
-```js
-const field = formSdk.convertFieldNameToId('status', 'main');
-formSdk.proxyFieldContentComp(field, (props, original) =>
-  React.createElement('div', {style: {backgroundColor: props?.widgetValue?.content === '1' ? '#e3f2fd' : ''}}, original())
-);
-```
-
-## 插件与页面间通信
-
-260201 及以后基线提供 `formSdk.pluginGet(fieldMark, property)` 和 `formSdk.pluginExecute(fieldMark, method, ...args)`；只能操作该插件实际公开的属性/方法。具体 WPS 或其他插件须取得该插件契约，不能从 JSSDK 通用接口推断方法名。
-
-`window.open` 打开的子页面可通过 `window.opener` 访问父窗口；同源时可操作父页面的表单实例。跨源时用 `postMessage`，接收方检查 `event.origin` 和 `event.data.type`，发送方指定目标 origin；只发送必要数据，不传鉴权信息。
-
-子表控件数据变化后，如需刷新相关显示，布局源码中可调用 `pageSdk.events.emit('field.change', '纯数字字段ID')`；ecode 中可调用 `window.ebuilderSDK.getPageSDK().events.emit('field.change', '纯数字字段ID')`。原资料还提到可附第三个字段数据参数：文本传文本，浏览型传以逗号分隔的 ID；按实际刷新需求决定是否传值。此处第二参数是纯数字字段 ID，不是带 `field` 前缀的标识。
-
-全局 ecode 的 `regOvProps` 可复写特定组件 props，但其包名与目标组件名是项目级契约；它和布局内 `proxyFieldContentComp` 是不同层级。采用哪一层，应以所需生效范围为准。

package/skill-docs/references/form/form-template/style-templates-advanced-css-guide.md

@@ -1,167 +0,0 @@
-# 表格式高级模板：CSS 编写指南
-
-本篇适用于 **PC 表格式高级模板**。先在模板设置中确定字段与重复区域的位置、行列尺寸、合并和单元格样式，再用 CSS 设置页面主题、组件状态和交互效果。下述组件路径已在实际模板预览页中找到；不同字段类型的内部元素不同，使用规则前应确认目标表单含有该元素。
-
-## 一、样式写在哪一层
-
-| 目标 | 首选位置 | 原因 |
-| --- | --- | --- |
-| 字段顺序、重复区域、列宽、行高、合并 | 模板结构与网格 | CSS 不能改变占位组件及迭代关系 |
-| 某个模板单元格的文字、底色、对齐、边框、缩进 | `grid.main`／`grid.detail` 或完整配置的 `workbook` | 样式随字段占位单元格迭代，位置明确 |
-| 所有普通字段或明细字段的输入框／浏览框边框与背景 | `layoutStyle.field`／`layoutStyle.detailFields` | 设计器为相应组件生成样式，无需逐个字段写 CSS |
-| 主题色、按钮与选择状态、隔行色、悬停色、特定控件的额外包裹层 | CSS 源码 | 一套选择器可用于整个模板 |
-| 单个业务字段的专属外观 | 目标表单的组件设置 | 模板内没有稳定的业务字段 ID，不应把预览页的 `#widget_…` 写入通用 CSS |
-
-源码直接写 `.ebpage`、`.weapp-form-detail-table-wrapper` 等选择器。平台会给编译结果加当前模板作用域，如 `#ebpage_…`；不要手写这类 ID。布局规则还会出现 `#weapp-form-layout__…`，具体字段规则可能带 `#widget_…`。这两类 ID 也不适合作可复用选择器。
-
-## 二、页面结构与组件选择器
-
-页面根容器为 `.weapp-de-excel-render.ebpage.ebpage-pc`。主网格是 `table.weapp-de-excel-render-main`，分组内另有 `table.weapp-de-excel-sheet-render-main`。表格 `td` 是**单元格边线**所在层，字段控件在 `td` 内。分组容器为 `.weapp-form-widget__Collapse`，明细表容器为 `.weapp-form-detail-table-wrapper`。
-
-| 对象 | 页面中可用的类或路径 | 样式关注点 |
-| --- | --- | --- |
-| 单行文本、数字、金额 | `.weapp-form-widget__Text`、`.weapp-form-widget__Number`、`.weapp-form-widget__Money` 下的 `.weapp-form-input-wrapper` 与 `.weapp-form-input-style` | 输入区边框、背景、字体；金额单位在旁边，应保留 |
-| 多行文本 | `.weapp-form-widget__TextArea .weapp-form-textarea-wrapper textarea` | 边框、背景、内边距、高度与换行 |
-| 邮箱、电话、手机、身份证 | 对应字段类下的 `.ui-input-wrap.ui-input-suffix-wrap` | 输入包裹层边框；保留 `.ui-input-suffix` 图标 |
-| 日期、日期区间 | `.weapp-form-date-wrapper .ui-input-wrap`；`.weapp-form-date-range-wrapper .ui-date-picker-rangeWrap` | 日期包裹层边框；保留日历图标和“至” |
-| 下拉、级联 | `.weapp-form-widget__Select .ui-select-input`；`.weapp-form-widget__Cascader .ui-cascader-picker` | 输入外观；选项面板和箭头是其他元素 |
-| 人员、部门及组织浏览 | `.weapp-form-widget__Employee`、`.weapp-form-widget__Department`、`.weapp-form-widget__EmployeeOrganization`、`.weapp-form-widget__EmployeeScope` 下的 `.ui-browser` | 浏览输入和已选内容；人员范围还有 `.ui-browser-types-select-wrap` |
-| 树形、分部、收发文单位选择 | `.weapp-form-widget__TreeSelect`、`.weapp-form-widget__SubCompany`、`.weapp-form-widget__ODocReceive` 下的 `.ui-browser` | 与人员浏览结构相近，仍应逐个核对包裹层 |
-| 单选、复选 | `.weapp-form-widget__RadioBox`、`.weapp-form-widget__CheckBox` 下的 `.ui-radio`／`.ui-checkbox` | 选中态和间距；圆点、方框是可操作标记 |
-| 附件、图片 | `.weapp-form-widget__File`、`.weapp-form-widget__Image` 下的上传包裹层和 `.ui-upload` | 上传区域尺寸、底色；保留虚线框及按钮 |
-| 其他可见组件 | `Paragraph`、`Rate`、`Position`、`ProgressBar`、`Switch`、`Sign`、`Monitor`、`SerialNum`、`DivideLine` 等字段类 | 描述、评分、位置、进度、开关、签名、编号及分割线需分别处理，不能假定都使用 `.weapp-form-input-style` |
-| 分组 | `.weapp-form-widget__Collapse` 下的 `.weapp-form-collapse-title`、`.weapp-form-collapse-content` | 标题装饰和内容区域；标题也可用 `layoutStyle.group` 设置 |
-
-同一行列出的不同字段类型需分别指定，或用逗号列出完整选择器。页面中可见组件结构，并不等于其全部样式属性都已验证；先使用已确认的通用配置，再核对特殊组件。
-
-## 三、主题变量
-
-把主题色集中写在 `.ebpage`。蓝色和红色主题可沿用同一组变量，只改 `--primary` 及需要区分的悬停色。
-
-| 变量 | 对应状态 |
-| --- | --- |
-| `--primary`、`--btn-primary-hover-bg` | 主题色与主按钮悬停色 |
-| `--checkbox-active-border-color`、`--checkbox-active-background-color` | 复选选中边框与背景 |
-| `--radio-active-border-color`、`--radio-active-inner-background-color` | 单选选中边框与圆点 |
-| `--switch-checked-bc`、`--switch-checked-border` | 开关开启态背景与边框 |
-| `--input-focus-shadow`、`--input-focus-border-color` | 输入区聚焦强调色 |
-| `--title-icon-border` | 标题边线；已有写法为 `calc(var(--hd) * 1) solid var(--primary)`，使用前确认页面定义了 `--hd` |
-| `--m-chk-check-bc`、`--m-chk-check-border-color`、`--m-switch-checked-bc` | 另一组选择与开关状态变量；具体组件和终端范围需在实际页面核对 |
-
-```css
-.ebpage {
-  --primary: #347FCB;
-  --btn-primary-hover-bg: #286DAF;
-  --checkbox-active-border-color: var(--primary);
-  --checkbox-active-background-color: var(--primary);
-  --radio-active-border-color: var(--primary);
-  --radio-active-inner-background-color: var(--primary);
-  --switch-checked-bc: var(--primary);
-  --switch-checked-border: var(--primary);
-  --input-focus-border-color: var(--primary);
-}
-```
-
-变量只有被当前组件读取时才改变显示；不能仅凭变量名称断定其已覆盖某个组件的全部状态。应查看选中、悬停和聚焦后的实际效果。
-
-## 四、边框的层级与去边框方法
-
-截图中的双列信息表需要**单元格边线**，明细表需要**外框和内部分隔线**；文本、日期、下拉和浏览输入本身通常不再画一层框。单行文本的结构是 `td` → `.weapp-form-widget__Text` → `.weapp-form-widget-content-container` → `.weapp-form-input-wrapper` → `input.ui-input.weapp-form-input-style`。有边框时先判断画在哪一层：
-
-1. `td` 或明细表的 `th`、`td`：这是表格线，通常保留。
-2. `.weapp-form-input-style`、`.ui-input-wrap`、`.ui-select-input`：字段输入框，可按类型去掉。
-3. 浏览组件可能还有 `.ui-input-suffix-wrap`：通用浏览框设置未消掉它时，再加定向 CSS。
-4. 单选／复选标记、附件／图片上传虚线框是操作提示，不应套用文本框去边框规则。
-
-模板配置优先用以下结构去掉通用输入与浏览框边线：
-
-```json
-{
-  "layoutStyle": {
-    "field": {
-      "input": { "backgroundColor": "#FFFFFF00", "border": "none" },
-      "browser": { "backgroundColor": "#FFFFFF00", "border": "none" }
-    },
-    "detailFields": {
-      "content": { "border": "none" },
-      "input": { "backgroundColor": "#FFFFFF00", "border": "none" },
-      "browser": { "backgroundColor": "#FFFFFF00", "border": "none" }
-    }
-  }
-}
-```
-
-当前页面可见，文本类 `.weapp-form-input-style`、日期 `.ui-input-wrap`、日期区间 `.ui-date-picker-rangeWrap`、下拉 `.ui-select-input` 和部分浏览输入会获得 `border: 0px none transparent`。由于结构不同，不要写 `.ebpage input, .ebpage * { border: none; }` 这种全局清除规则。
-
-人员范围与共享浏览输入存在额外包裹层时，可补：
-
-```css
-.weapp-form-widget-content-container .ui-browser-types-select-wrap .ui-input-suffix-wrap,
-.weapp-form-widget-content-container .ui-browser-share-select-wrap .ui-input-suffix-wrap {
-  border: none;
-}
-```
-
-第二个选择器是已有模板中的写法；目标页面是否含共享浏览组件，应按页面结构核对。其他浏览类型仍有边框时，应先定位真正画线的元素，再添加该类型的规则。
-
-## 五、明细表表头、网格与行状态
-
-实际页面中明细表不只一张表：固定表头使用 `.excelTableView-content-excel-table-fixed-first-row`，内容表使用 `.excelTableView-content-excel-table`。内容表中有 `thead`、`tbody`；数据行可通过 `tr[data-id]` 选择。滚动后固定表头也需保持配色时，应同时核对两张表。下例给内容表设置边框与行色，并同时覆盖固定表头的表头颜色：
-
-```css
-.weapp-form-detail-table-wrapper .excelTableView-content-excel-table {
-  border: 1px solid #DCE3EB;
-  border-collapse: collapse;
-}
-
-.weapp-form-detail-table-wrapper .excelTableView-content-excel-table th,
-.weapp-form-detail-table-wrapper .excelTableView-content-excel-table td {
-  border: 1px solid #DCE3EB;
-}
-
-.weapp-form-detail-table-wrapper .excelTableView-content-excel-table thead th,
-.weapp-form-detail-table-wrapper .excelTableView-content-excel-table thead td,
-.weapp-form-detail-table-wrapper .excelTableView-content-excel-table-fixed-first-row thead th,
-.weapp-form-detail-table-wrapper .excelTableView-content-excel-table-fixed-first-row thead td {
-  background-color: #347FCB;
-  color: #FFFFFF;
-  text-align: center;
-}
-
-.weapp-form-detail-table-wrapper .excelTableView-content-excel-table tbody tr[data-id]:nth-child(even) > td {
-  background-color: #F8FAFD;
-}
-
-.weapp-form-detail-table-wrapper .excelTableView-content-excel-table tbody tr[data-id]:hover > td {
-  background-color: #E9F2FC;
-}
-
-.weapp-form-detail-table-wrapper .excelTableView-content-excel-table tbody tr[data-id]:focus-within > td {
-  background-color: #DAEAFA;
-}
-```
-
-给 `tr` 设背景时，已有 `td` 背景可能遮住行色；针对 `> td` 更稳妥。`:nth-child(even)` 按同一 `tbody` 的实际子元素位置计数，若插入额外行，隔行顺序可能变化。表头字段标题的基础对齐也应在明细子网格设置，不只依赖 CSS。
-
-## 六、分组与不同字段类型
-
-分组标题左侧蓝线、背景、字重和间距优先写在 `layoutStyle.group` 或对应网格单元格。白色分组卡片与浅灰页面底色可用模板设置和 CSS 配合。图片中的多个“分组”标题会按模板迭代；不要在 CSS 中写死第一组或第二组的业务名称。
-
-预览页同时有分组内字段和分组外字段。仅写 `.weapp-form-widget__Collapse .weapp-form-widget__Text` 只会命中分组内单行文本；希望普通字段统一生效时，优先使用 `layoutStyle.field`。明细字段又在 `.weapp-form-custom-style__DetailTable .weapp-form-detail-table__body-wrapper` 下，应使用 `layoutStyle.detailFields` 或明细表专用选择器。
-
-日期、下拉、级联和人员选择常由**外层包裹层**画边框，并非最内侧的 `<input>`。例如日期可定位 `.weapp-form-widget__Date .weapp-form-date-wrapper .ui-input-wrap`，下拉可定位 `.weapp-form-widget__Select .ui-select-input`。仅清除 `input.ui-input` 的边框，外层仍可能有线。应保留日历、下拉、邮件、电话等尾部图标和日期区间中间的“至”。
-
-附件、图片、评分、进度条、开关、地理位置、签名和描述文字有各自的组件结构。先确定 `.weapp-form-widget__File`、`.weapp-form-widget__Image`、`.weapp-form-widget__Rate`、`.weapp-form-widget__ProgressBar`、`.weapp-form-widget__Switch`、`.weapp-form-widget__Position`、`.weapp-form-widget__Sign` 或 `.weapp-form-widget__Paragraph` 容器，再限定内部元素。状态色优先考虑主题变量；上传虚线框、签名区和评分星形等可操作提示应按具体需求单独调整。
-
-## 七、覆盖顺序与验证
-
-页面同时存在底层渲染器 CSS、模板生成的网格／字段样式、模板 CSS 和业务字段自己的样式。渲染器提供 `.weapp-de-excel-render-main`、`.weapp-de-excel-sheet-render-main` 的表格基础规则，并给 `td` 基础内边距；模板网格生成类似 `.cell_…` 的类。**不要把自动 `.cell_…` 或 `#widget_…` 写成通用规则**。具体单元格样式回到模板网格配置修改。
-
-如果 CSS 写入后没有效果，按顺序检查：
-
-1. 目标元素是否命中选择器。输入框、外层包裹层与表格单元格常是不同元素。
-2. `advanced css show <模板ID>` 的源码与编译结果是否含该规则；源码不应手写模板 ID。
-3. 实际页面是否有优先级更高的布局样式、业务字段样式或元素内联样式。先改对应设置；确需 CSS 覆盖时再补足组件上下文，不先全局加 `!important`。
-4. 普通、只读、聚焦、选中、悬停及滚动固定表头状态是否符合预期。保存后的不落库预览和目标表单显示都要检查。
-
-新建时把 CSS 存为独立文件，执行 `advanced create --config @模板.json --css-file 模板.css`；已有模板执行 `advanced css update <模板ID> --file 模板.css`，再用 `advanced css show <模板ID>` 回读。具体命令与完整配置方法见[高级模板手册](style-templates-advanced.md)。