界面元素可见性控制

概览

shortToFullMap 机制允许通过 URL 参数灵活控制界面元素的可见性，支持简写和完整标识符，以精确隐藏元素。

主要组件

shortToFullMap

此映射对象将界面元素的简写标识符转换为完整的规范名称。

const shortToFullMap: Record<string, string> = {
  schema: 'mode.schema',
  visual: 'mode.visual',
  edit: 'mode.edit',
  pricingZones: 'mode.pricingZones',
  pricing: 'mode.pricing',
  section: 'mode.section',

  select: 'tool.select',
  seatRows: 'tool.seatRows',
  table: 'tool.table',
  roundTable: 'tool.roundTable',

  shape: 'tool.shape',
  rect: 'tool.shape.rect',
  circle: 'tool.shape.circle',
  line: 'tool.shape.line',
  polygon: 'tool.shape.polygon',

  label: 'tool.label',
  selectSeats: 'tool.selectSeats',
  selectRows: 'tool.selectRows',
  addSeat: 'tool.addSeat',
  numberSeats: 'tool.numberSeats',
  selectSections: 'tool.selectSections',
  underlay: 'tool.underlay',
  venueShape: 'tool.venueShape',
  viewbox: 'tool.viewbox',
  binding: 'tool.binding',
  inspector: 'tool.inspector',
  events: 'tool.events',
  save: 'tool.save',
};

映射类别

模式元素

控制不同应用模式：

schema：座位图模式。
visual：可视化模式。
edit：编辑模式。
section：区域模式。
pricing：定价模式。
pricingZones：价格区域模式。

工具元素

控制各类交互工具：

select：选择工具。
seatRows：座位排工具。
shape：形状绘制工具。
- rect：矩形。
- circle：圆形。
- line：直线绘制。
- polygon：多边形绘制。

其他工具

label：标签工具。
selectSeats：座位选择。
underlay：底图工具。
venueShape：场地形状工具。
viewbox：视图框工具。
binding：绑定工具。
inspector：Inspector 检查器面板。
events：定价模式中的活动列，以及预览弹窗中的活动标签页。
save：保存功能。

工具函数

isHidden(title: string, hiddenItems: string[]): boolean

根据传入参数，判断是否隐藏指定界面元素。

参数

title：界面元素的完整标识符，例如 ‘mode.schema’。
hiddenItems：待隐藏元素的数组。

示例

const hiddenItems = ['pricing', 'select'];

getHiddenItemsFromURL(): string[]

直接从当前页面 URL 查询字符串中提取隐藏元素。

返回值

需要隐藏的元素标识符数组。

URL 示例

https://example.com/app?hidden=pricing,select,label

使用场景

基于 URL 隐藏元素

在 URL 中添加 hidden 参数即可控制界面元素可见性。

支持的格式

简写标识符： ?hidden=pricing,select
完整标识符： ?hidden=mode.pricing,tool.select
混合标识符： ?hidden=pricing,tool.select

URL 示例

隐藏定价和选择工具：
- Copy/app/venues/42/schemas/295?hidden=pricing,select
隐藏指定形状工具：
- Copy/app/design?hidden=line,polygon

最佳实践

在 shortToFullMap 中使用一致的命名。
优先使用完整标识符，以明确表达含义。
验证并清理 URL 参数。
处理标识符不存在于映射中的情况。

高级配置

随着应用扩展，在 shortToFullMap 中加入更多界面元素。

可改进方向

通过预定义的允许标识符枚举提高类型安全性。
实现更复杂的可见性逻辑。
添加日志或调试工具。

安全注意事项

清理 URL 参数。
验证传入的隐藏元素列表。
防止隐藏机制被滥用。