SmartTable：一个「飞书多维表格」平替，前后端全栈开源！SmartTable 是一个支持双模式运行的智能多维表格

项目地址：GitHub | Gitee ⭐ 如果本文对你有帮助，欢迎点赞、收藏、转发支持一下！

写在前面：一个「不太安分」的想法

不知道你有没有这样的经历：

用飞书多维表格管理客户信息，但总觉得把敏感数据放云端不太踏实
正处理着重要数据，突然网络断开，一切操作都卡住了
想要某个特殊功能，但 SaaS 产品就是不提供，还无法自定义
想私有化部署，但市面上的工具要么太贵，要么太复杂

这些痛点，我深有体会。

于是，一个大胆的想法诞生了：能不能打造一个既支持纯前端离线使用，又能私有化部署的多维表格系统？

更疯狂的是，我决定全程用 AI 辅助编码来完成这个项目——从前端 Vue 3 到后端 Flask，90% 的代码都是 AI 生成的。

经过几个周的打磨，SmartTable 诞生了。今天，就和大家好好聊聊这个项目。

一、SmartTable 是什么？

用一句话概括：SmartTable 是一个支持双模式运行的智能多维表格系统——既可以在浏览器本地离线使用，也可以部署后端服务实现数据云端同步。

它长得像飞书多维表格，但骨子里完全不同：

特性	SmartTable	飞书多维表格	Airtable
部署方式	纯前端 / 后端双模式	云端 SaaS	云端 SaaS
数据存储	IndexedDB / PostgreSQL 可选	云端服务器	云端服务器
离线使用	✅ 完全支持	❌ 不支持	❌ 不支持
数据隐私	可完全私有化	数据在云端	数据在云端
二次开发	开源免费，可自由定制	受限	受限
费用	完全免费	免费版有限制	免费版有限制

核心亮点速览

🚀 双模式架构：纯前端离线使用 / 后端云端同步，按需选择
🔒 灵活部署：浏览器本地 / 私有服务器 / 云端部署
🎨 22 种字段类型：从基础文本到复杂公式，应有尽有
👁️ 6 种视图模式：表格、看板、日历、甘特图、表单、画廊
🧮 完整公式引擎：43 个内置函数，支持数学、文本、日期、逻辑计算
📊 数据可视化：内置 ECharts 图表，支持仪表盘
📤 导入导出：Excel、CSV、JSON 格式全支持
🤖 AI 生成：90% 代码由 AI 辅助完成
🔐 权限管理：支持用户认证、角色权限、数据分享

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

1️⃣ 丰富的字段类型系统

支持 22 种字段类型，覆盖你能想到的所有数据场景：

基础字段（6 种）

文本（单行/多行）
数字（支持格式化、千分位）
日期（日期时间选择器）
单选（自定义选项颜色）
多选（标签式展示）
复选框（快速勾选）

联系类型（4 种）

成员（用户信息关联）
电话（格式自动校验）
邮箱（格式自动校验）
链接（点击直接跳转）

媒体类型（1 种）

附件（图片、文档、视频等，使用 IndexedDB Blob 存储）

计算类型（3 种）

公式：支持 43 个函数，可引用其他字段计算
关联：跨表关联数据，实现数据联动
查找引用：引用关联表的字段值，支持聚合计算

系统字段（5 种）

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

其他（3 种）

评分（星级可视化）
进度（百分比进度条）
URL（点击跳转）

2️⃣ 6 种视图：一数据，多视角

同一份数据，6 种完全不同的展示方式：

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

3️⃣ 强大的公式引擎

内置完整的公式计算系统，43 个函数覆盖 5 大类：

数学函数（11 个）

SUM({单价}, {数量})           // 求和
AVG({成绩 1}, {成绩 2})       // 平均值
ROUND({价格}, 2)              // 四舍五入保留 2 位小数
CEILING({数值})               // 向上取整
POWER({底数}, {指数})         // 计算幂

文本函数（10 个）

CONCAT({姓}, {名})            // 字符串拼接
LEFT({标题}, 10)              // 截取左侧 10 个字符
SUBSTITUTE({文本}, "旧", "新") // 替换文本
FIND("关键词", {文本})        // 查找关键词位置

日期函数（10 个）

TODAY()                       // 返回今天日期
DATEDIF({开始日期}, {结束日期}, "D")  // 计算日期差（天）
DATEADD({日期}, 7, "day")     // 日期加 7 天
YEAR({日期})                  // 提取年份

逻辑函数（7 个）

IF({成绩} >= 60, "及格", "不及格")  // 条件判断
AND({条件 1}, {条件 2})            // 逻辑与
OR({条件 1}, {条件 2})             // 逻辑或
SWITCH({状态}, "A", "优秀", "B", "良好") // 多值匹配

统计函数（5 个）

COUNT({字段 1}, {字段 2})       // 计数
COUNTIF({范围}, ">60")         // 条件计数
SUMIF({条件范围}, ">60", {求和范围}) // 条件求和

4️⃣ 数据筛选、排序、分组

多条件筛选

支持文本、数字、日期、选择等多种条件组合
AND/OR 逻辑自由组合
多种操作符：等于、不等于、包含、大于、小于…

多字段排序

支持按多个字段依次排序
升序/降序自由切换
拖拽调整排序优先级

多级分组

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

5️⃣ 数据导入导出

导入：Excel (.xlsx/.xls)、CSV、JSON
支持多 Sheet 导入
自动识别字段类型
批量导入数据
导出：Excel、CSV、JSON
自定义导出字段
完整格式保留
一键导出备份

6️⃣ 仪表盘系统

内置数据可视化仪表盘，支持多种图表组件：

数字卡片（KPI 指标展示）
时钟/日期组件
实时图表（柱状图、折线图、饼图）
跑马灯通知
自定义布局

7️⃣ 用户认证与权限

后端模式支持：

用户注册/登录
JWT Token 认证
角色权限管理（管理员/编辑者/查看者）
Base 级别成员管理
数据分享与权限控制

三、技术架构：前后端分离的现代化设计

双模式架构

SmartTable 支持两种运行模式，满足不同场景需求：

┌─────────────────────────────────────────────────────────────┐
│                    模式一：纯前端离线模式                     │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  Vue 3      │  │  Pinia      │  │  Dexie.js   │         │
│  │  前端框架   │  │  状态管理   │  │  IndexedDB  │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│                                                              │
│  特点：无需后端，数据存储在浏览器本地，完全离线使用           │
│  场景：个人数据管理、离线环境、快速原型                      │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                    模式二：前后端全栈模式                     │
├─────────────────────────────────────────────────────────────┤
│  前端层                                                       │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  Vue 3      │  │  Axios      │  │  Pinia      │         │
│  │  前端框架   │  │  HTTP 客户端 │  │  状态管理   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│                            │ HTTP/HTTPS                     │
│                            ▼                                │
│  后端层（Flask）                                              │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  Flask      │  │ SQLAlchemy │  │  JWT        │         │
│  │  Web 框架   │  │  ORM       │  │  认证       │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│                            │                                │
│          ┌─────────────────┼─────────────────┐             │
│          ▼                 ▼                 ▼             │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │ PostgreSQL   │  │   Redis     │  │   MinIO     │         │
│  │  数据库      │  │   缓存      │  │  文件存储   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│                                                              │
│  特点：数据云端同步、多用户协作、权限管理                    │
│  场景：团队协作、企业私有化部署、数据备份                    │
└─────────────────────────────────────────────────────────────┘

前端技术栈

前端框架    Vue 3.5+ (Composition API)
开发语言    TypeScript 5.x
构建工具    Vite 8.x
状态管理    Pinia 2.x
UI 组件库   Element Plus 2.x
表格组件    Vxe-Table 4.x
图表库      ECharts 5.x
本地存储    Dexie.js (IndexedDB 封装)
拖拽排序    SortableJS
日期处理    Day.js
HTTP 客户端  Axios

后端技术栈

Web 框架      Flask 3.0
ORM          SQLAlchemy 2.0
数据库        PostgreSQL 16 / SQLite
认证         Flask-JWT-Extended
数据验证     Marshmallow
数据库迁移   Alembic
文件存储     MinIO
缓存         Redis
WSGI 服务器   Gunicorn
容器化       Docker + Docker Compose

为什么选择双模式架构？

灵活性强：用户可根据需求选择部署方式
迁移平滑：从纯前端模式可无缝迁移到后端模式
成本低：个人使用无需服务器，团队协作可私有部署
数据安全：敏感数据可本地存储，也可云端备份
易于扩展：前后端分离，便于功能迭代

四、AI 编码实践：如何用 AI 完成一个全栈项目

这个项目最大的特色是——90% 的代码都是 AI 辅助生成的，包括前端和后端。

🤖 AI 辅助开发全流程

架构设计阶段

用 AI 分析飞书多维表格的功能，输出产品规划文档
通过多轮对话细化数据模型设计
让 AI 生成技术架构文档和 API 设计
AI 辅助进行技术选型（Flask vs NestJS、PostgreSQL vs SQLite）

代码生成阶段

按模块拆分任务（字段系统、视图系统、公式引擎、后端 API…）
逐个模块让 AI 生成代码框架
要求 AI 同步编写单元测试，确保代码质量
AI 辅助进行前后端接口对接

调试优化阶段

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

💡 AI 编码 vs 传统开发

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

📝 我的 AI 提示词工程经验

分而治之：将大任务拆分成小模块，逐个击破

❌ “帮我写一个多维表格系统”
✅ “帮我实现一个字段配置面板，支持文本、数字、日期等字段的配置项”

上下文充足：提供清晰的架构文档和技术规范

先让 AI 理解整体架构
再让它实现具体功能

迭代优化：先生成框架，再逐步细化

第一版：生成基础功能
第二版：添加错误处理
第三版：优化性能和用户体验

测试驱动：要求 AI 同步编写测试用例

“请为这个函数编写单元测试，覆盖所有边界情况”

五、实际应用场景：SmartTable 能做什么？

场景 1：个人数据管理（纯前端模式）

客户信息管理

用表格视图录入客户基本信息
用看板视图跟踪销售阶段
用日历视图安排跟进计划
数据存储在本地，无需担心隐私泄露

读书笔记管理

记录书名、作者、阅读进度
用评分字段打分
用多选字段标记书籍类别
离线使用，随时随地记录

家庭记账本

记录收支明细
用公式字段自动计算结余
用仪表盘展示收支趋势
数据完全私有

场景 2：小团队协作（后端模式）

项目管理

用甘特图规划项目进度
用看板视图跟踪任务状态
用成员字段分配责任人
多用户实时协作，数据云端同步

内容排期

用日历视图规划内容发布
用单选字段标记内容状态
用表单视图收集选题建议
团队成员共享数据

库存管理

记录商品信息、库存数量
用公式字段计算库存价值
设置阈值自动提醒补货
支持多仓库管理

场景 3：企业私有化部署（后端模式）

敏感数据管理

财务数据、客户信息存在本地服务器
无需担心数据泄露到云端
可基于源码二次开发，定制功能
完整的权限控制和操作审计

离线场景

工厂车间、仓库等网络不稳定环境
支持离线编辑，网络恢复后同步
数据双重备份（本地 + 服务器）

行业解决方案

CRM 客户管理
ERP 企业资源计划
MES 制造执行系统
OA 办公自动化

六、快速开始：5 分钟上手 SmartTable

环境要求

Node.js >= 18
npm >= 9
Python >= 3.9（后端模式）
现代浏览器（Chrome/Firefox/Safari/Edge）

方式一：纯前端模式（推荐新手）

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

# 2. 安装依赖
npm install

# 3. 启动开发服务器
npm run dev

# 4. 访问浏览器
# http://localhost:5173

方式二：前后端全栈模式

前端配置：

cd smart_table/smart-table

# 安装依赖
npm install

# 配置后端 API 地址
cp .env.example .env
# 编辑 .env 文件，设置 VITE_API_BASE_URL

# 启动开发服务器
npm run dev

后端配置：

cd smart_table/smarttable-backend

# 创建虚拟环境
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate

# 安装依赖
pip install -r requirements.txt

# 配置环境变量
cp .env.example .env
# 编辑 .env 文件，配置数据库连接

# 初始化数据库
flask db upgrade

# 启动开发服务器
flask run --reload