FcDesigner Pro

Appearance

预览 ​

在弹窗中查看当前表单的最终效果：可试填、切阅读态、看电脑端 / 移动端，也可查看生成的组件代码、SFC、HTML 与建表 SQL，方便自测与交付前核对。

在哪里找 ​

设计器顶部工具栏右侧，预览 按钮。

预览入口

若环境关闭了该能力（配置项 showPreviewBtn），入口不会出现。各标签页也可分别用 showPreviewForm、showPreviewRead、showPreviewComponent、showPreviewSfc、showPreviewHtml、showPreviewSql 控制显隐；电脑端 / 移动端切换受 showDevice 影响。

弹窗结构 ​

预览弹窗

区域做什么
顶部标签切换查看方式（表单 / 阅读 / 各类生成结果）
电脑端 / 移动端切换预览宽度（生成 SFC / HTML / SQL 时通常不显示）
中间内容区表单试填、只读展示，或代码文本
复制在生成类标签下，一键复制当前代码

模式标签

电脑端与移动端

怎么用（分步） ​

  1. 点工具栏 预览，打开预览弹窗。

打开预览弹窗

  1. 默认多为 表单模式，可像真实页面一样试填、试提交。

表单模式试填

  1. 切到 阅读模式，查看只读详情观感（适合审核、详情页）。

阅读模式

  1. 点 移动端，检查窄屏下的换行与布局。

移动端预览

  1. 切到 生成组件，查看可用于项目的组件代码文本。

生成组件

  1. 需要时点 复制，把当前代码拷到剪贴板。

复制代码

  1. 再按需查看 生成SFC、生成HTML、生成SQL（界面文案以你环境为准）。

生成 SFC

生成 HTML

生成 SQL

查看方式说明 ​

界面文案用途
表单模式按真实填写界面试填、试提交
阅读模式只读展示，适合审核、详情页观感
生成组件查看可用于项目的组件代码文本
生成SFC查看标准单文件组件结构文本
生成HTML查看 HTML 产物
生成SQL按字段生成建表 SQL 参考

移动端与代码页

切到 移动端 时，部分环境会隐藏 生成SFC / 生成HTML；生成SQL 等代码页一般也不显示电脑端 / 移动端切换。以你当前界面为准。

场景示例 ​

入门：检查访客登记必填与详情观感 ​

背景：访客登记表上线前，确认必填提示是否出现，以及阅读模式下详情是否好读。

步骤：

  1. 打开访客登记表，点工具栏 预览。

入门打开预览

  1. 在 表单模式 下，故意不填必填项。

入门切到表单模式

  1. 点表单上的 提交（或同类提交按钮），确认出现必填校验提示。

入门必填校验

  1. 切到 阅读模式，看姓名、手机号、来访事由等字段在详情态是否清晰。

入门阅读模式

预期：未填必填项时有明确提示；阅读模式只读、排版清楚，便于前台核对。

常用：交付前对照建表 SQL ​

背景：实施要把表单字段落到业务库表，需要一份建表 SQL 参考。

步骤：

  1. 打开目标表单，点 预览 → 生成SQL。
  2. 对照字段名、类型是否齐全；需要时点 复制 交给库表同学。

场景对照建表 SQL

预期：SQL 覆盖主要业务字段，便于与库表设计对齐。日常配置仍以画布可视化为主，生成结果用于交付核对，不是替代设计。

注意点 ​

  • 预览改的是弹窗里的试填数据，一般不会写回画布上的字段配置；关弹窗即可回到设计。
  • 各标签是否出现取决于环境配置（见上文 showPreview*）；没有某页时属正常裁剪，不是故障。
  • 生成SQL 等产物是参考文本，入库前仍需按实际库规范审阅。
  • 电脑端 / 移动端只影响预览弹窗观感；工具栏左侧的尺寸切换是设计态工作区宽度，二者不要混用。

相关阅读 ​