🚀 我用 AI 写了一个「飞书多维表格」平替版！纯前端实现，浏览器就能跑

用户12203 · 2026 年3 月 31 日 02:04

我用 AI 写了一个「飞书多维表格」平替版！纯前端实现，浏览器就能跑

GitHub 开源地址：GitHub - ldbinac/smart_table: 智能多维表格系统，类似于 Airtable 或飞书多维表格。支持多种视图（表格视图、分组视图、看板视图、日历视图、甘特视图、表单视图、仪表盘等），拥有丰富的字段类型。 · GitHub
Gitee 开源地址：smart_table: 智能多维表格系统，类似于 Airtable 或飞书多维表格。支持多种视图（表格视图、分组视图、看板视图、日历视图、甘特视图、表单视图、仪表盘等），拥有丰富的字段类型。
如果觉得有用，欢迎点个 Star 支持一下！, 也欢迎提交 PR 来完善这个项目！

一、项目背景：为什么要做这个项目？

作为一个经常需要处理数据的开发者，我一直是飞书多维表格（Bitable）的重度用户。它强大的多视图展示、灵活的字段类型、便捷的协作功能，让数据管理变得异常轻松。

但是，我也遇到了一些痛点：

数据隐私：敏感数据上传到云端总有些顾虑
网络依赖：没网的时候完全没法用
自定义受限：有些功能想要二次开发却无从下手

于是，一个想法诞生了：能不能用纯前端技术，在浏览器里实现一个类似的多维表格系统？

更疯狂的是，我决定全程使用 AI 辅助编码来完成这个项目。尽量减少人工编码的介入（99%的代码都是AI生成的）。

经过一段时间的开发和打磨，Smart Table 终于诞生了。

二、Smart Table 是什么？

Smart Table 是一个基于浏览器本地存储的高性能多维表格应用，对标飞书多维表格核心功能，完全纯前端实现，无需服务端，数据全部保存在浏览器本地。

核心亮点

特性	说明
纯前端架构	无需后端服务器，开箱即用
本地存储	基于 IndexedDB，数据完全私有化
20+ 字段类型	从基础文本到复杂公式，应有尽有
6 种视图模式	表格、看板、日历、甘特图、表单、画廊
完整公式引擎	支持数学、文本、日期、逻辑函数
数据可视化	内置 ECharts 图表支持
导入导出	Excel、CSV、JSON 格式全支持

三、技术架构：现代前端技术栈的集大成者

技术选型

┌─────────────────────────────────────────────────────────────┐
│  前端框架    Vue 3.4+ (Composition API)                      │
│  开发语言    TypeScript 5.x                                  │
│  构建工具    Vite 5.x                                        │
│  状态管理    Pinia 2.x                                       │
│  UI 组件库   Element Plus 2.x                                │
│  表格组件    Vxe-Table 4.x                                   │
│  图表库      ECharts 5.x                                     │
│  本地存储    Dexie.js (IndexedDB 封装)                       │
│  拖拽排序    SortableJS                                      │
└─────────────────────────────────────────────────────────────┘

分层架构设计

┌─────────────────────────────────────────────────────────────┐
│                    表现层 (Presentation)                     │
│    表格视图 │ 看板视图 │ 日历视图 │ 甘特视图 │ 表单视图      │
├─────────────────────────────────────────────────────────────┤
│                    业务层 (Business)                         │
│    数据管理 │ 视图管理 │ 公式引擎 │ 筛选排序 │ 导入导出      │
├─────────────────────────────────────────────────────────────┤
│                    数据层 (Data)                             │
│    Base存储 │ Table存储 │ Field存储 │ Record存储 │ View存储  │
├─────────────────────────────────────────────────────────────┤
│                    存储层 (Storage)                          │
│              IndexedDB (浏览器本地数据库)                     │
└─────────────────────────────────────────────────────────────┘

四、功能详解：不只是表格，更是数据管理平台

丰富的字段类型系统

支持 20+ 种字段类型，覆盖各种数据场景：

基础字段

单行文本、多行文本、数字、日期、复选框
单选、多选（支持自定义选项颜色）

联系类型

成员、电话、邮箱、链接

媒体类型

附件（图片、文档等文件存储）

计算类型

公式字段：支持数学、文本、日期、逻辑函数
关联字段：跨表关联，实现数据联动
查找引用：引用关联表的字段值

系统字段

创建人、创建时间、更新人、更新时间、自动编号

其他

评分（星级展示）、进度（百分比进度条）

多视图展示：一数据，多视角

同一份数据，多种展示方式：

视图类型	适用场景	核心功能
表格视图	数据录入、批量编辑	虚拟滚动、单元格编辑、列冻结
看板视图	项目管理、任务跟踪	拖拽排序、跨列移动
日历视图	日程管理、排期规划	月/周/日切换、日程提醒
甘特图视图	项目规划、进度跟踪	时间轴展示、依赖关系
表单视图	信息收集、问卷调查	表单配置、分享链接
画廊视图	素材管理、产品展示	图片卡片、瀑布流布局

强大的公式引擎

内置完整的公式计算系统，支持：

// 数学函数
SUM({ 单价 }, { 数量 }); // 求和
AVG({ 成绩1 }, { 成绩2 }); // 平均值
ROUND({ 价格 }, 2); // 四舍五入

// 文本函数
CONCAT({ 姓 }, { 名 }); // 字符串拼接
LEFT({ 标题 }, 10); // 截取左侧字符

// 日期函数
TODAY(); // 今天日期
DATEDIF({ 开始日期 }, { 结束日期 }); // 日期差

// 逻辑函数
IF({ 成绩 } >= 60, "及格", "不及格"); // 条件判断
AND({ 条件1 }, { 条件2 }); // 逻辑与

数据筛选、排序、分组

多条件筛选

支持文本、数字、日期、选择等多种条件的组合筛选
AND/OR 逻辑组合
条件保存和快速切换

多字段排序

支持按多个字段依次排序
升序/降序切换

多级分组

按字段值自动分组
分组折叠/展开
分组统计（计数、求和、平均值）

数据导入导出

导入：Excel (.xlsx)、CSV、JSON
导出：Excel、CSV、JSON
模板下载：字段模板导出，方便批量录入

五、AI 编码实践：如何用 AI 完成一个复杂项目

AI 辅助开发全流程

这个项目最大的特色是——完全使用 AI 辅助编码完成。以下是实践经验分享：

1. 架构设计阶段

使用 AI 生成技术架构文档
让 AI 分析飞书多维表格的功能，输出产品规划
通过多轮对话细化数据模型设计

2. 代码生成阶段

按模块拆分任务，逐个实现
使用 AI 生成核心代码框架
让 AI 编写单元测试，确保代码质量

3. 调试优化阶段

将报错信息直接喂给 AI，快速定位问题
让 AI 分析性能瓶颈，给出优化建议
通过 AI 进行代码重构和规范化

AI 编码的优势

方面	传统开发	AI 辅助开发
架构设计	数天	数小时
代码编写	数周	数天
单元测试	常被忽略	自动生成，覆盖率 90%+
文档编写	后期补写	同步生成
问题排查	逐个搜索	直接给出解决方案

提示词工程经验

分而治之：将大任务拆分成小模块，逐个击破
上下文充足：提供清晰的架构文档和技术规范
迭代优化：先生成框架，再逐步细化
测试驱动：要求 AI 同步编写测试用例

六、快速开始

环境要求

Node.js >= 18
npm >= 9

安装运行

# 克隆项目
git clone https://github.com/ldbinac/smart_table.git
cd smart_table/smart-table

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 运行测试
npm run test