HTML页面

功能概述
SeaTable 应用自带的“AI 页面生成”能够满足绝大多数业务需求。但当您的业务场景较为特殊时，可以使用“HTML 页面”功能，通过以下两种方式构建页面，满足从“快速配置”到“高度定制”的不同业务需求：
  • AI 页面生成（推荐）：用户可通过对话框直接生成页面。它适用于绝大多数表单收集、列表展示及门户页面场景。优势是：即刻交付、零代码门槛。
  • 自定义 HTML 页面：当 AI 生成无法满足复杂的业务逻辑（如深度交互、多表联动计算、特殊 UI 框架集成）时，开发者可上传自定义 HTML、JavaScript 和 CSS 文件。优势是：能力无上限、实现高度定制化。
设计原则：建议优先尝试 AI 页面生成，如遇复杂的功能性瓶颈，再通过“HTML页面”进行扩展，以实现极致的业务灵活性。
如何使用 HTML 页面？（非技术视角）
如果您决定进行自定义开发，流程大致如下：
  1. 准备页面包：由公司开发人员根据业务需求，编写 HTML/JS/CSS 页面文件
  2. 打包上传：将开发好的网页文件压缩为.zip格式，上传至 SeaTable 应用的“HTML 页面”组件中
  3. 实时预览：上传完成后，您即可在 SeaTable 应用中看到该页面，并进行数据录入或查看
  4. 按需更新：如果页面内容需要调整（如新增一个字段），只需重新上传新的.zip包即可完成更新
HTML 页面的使用
前置准备
  • 开发环境：本地已安装 Node.js 与 Git
  • SeaTable 权限：确保拥有表格的编辑权限
  • 开发 SDK：通过seatable-html-page-sdk桥接页面与 SeaTable 表格数据
开发流程
  1. 初始化：克隆官方提供的开发模板
  2. 模式选择：
    1. 模块化 (Modular)：适合复杂工程，支持多文件、ESM 加载，适合复杂业务系统
    2. 经典模式 (Non-modular)：适合简单需求，所有代码（HTML/JS/CSS）写在单文件中，通过 CDN 直接引入 SDK
  3. 配置环境：在本地创建src/setting.js（参考模板），填写服务器地址、App UUID 与 Page ID，实现本地实时调试
  4. 调试：执行npm run dev启动本地服务器进行预览
发布使用
开发完成后，通过以下流程将代码打包并集成至 SeaTable：
  • 编译打包：

                        npm run build        # 构建代码
                

                        npm run build-page   # 生成用于上传的 ZIP 包（在 page-zip 目录下）
  • 上传至 SeaTable：
    • 打开 SeaTable 应用配置页
    • 找到“HTML 页面”组件，点击上传生成的.zip包
  • 调试验证：在 SeaTable 应用预览界面进行提交测试，查看数据是否准确回写至对应的表格中