一2个月写的可视化+多维表格编辑器Mute, 上线!

hi, 大家好, 我是徐小夕.

上周和大家分享了一篇多维表格实现方案探索的文章,以及为什么我没有选择市面上开源的库来实现的原因: 花了2个月时间研究了市面上的4款开源表格组件,崩溃了,决定自己写一款

最近对我已经实现的多维表格进行了功能模块的优化以及表格能力的增强,目前已经发布了1.0版本,暂且起名叫 Mute。演示效果如下:

我会在文末发体验地址,大家感兴趣的可以参考体验一下。接下来我就和大家详细的介绍一下Mute多维表格的功能和技术方案。

功能介绍

Mute多维表格 是一个强大的任务管理工具,提供多种视图和功能来帮助您高效管理项目和任务。

1. 表格视图

表格视图是多维表格的核心功能,提供了直观的任务列表,支持以下功能:

  • 任务创建、编辑和删除
  • 任务分组和排序
  • 自定义字段配置
  • 任务筛选和搜索
  • 任务优先级调整
  • 拖拽排序
  • 批量编辑
  • 数据导入导出
  • 历史记录和版本控制
  • 单元格格式化和条件格式

下面演示一下编辑表格的能力:

我们不仅能编辑每一个任务表格,还能对表格列进行拖拽:

多维表格另一个核心能力就是多维度筛选数据,目前我也实现了对多字段进行筛选的能力:

并支持动态分组:

2.看板视图

看板视图提供了可视化的任务管理方式,支持以下功能:

  • 任务状态可视化
  • 拖拽任务更改状态
  • 按状态分组查看任务
  • 快速添加新任务
  • 任务卡片自定义
  • 泳道视图
  • WIP限制(在制品数量限制)
  • 任务流转历史

3.人员分配视图

人员分配视图帮助您管理团队成员的工作分配:

  • 按人员查看任务分配
  • 工作负载均衡
  • 资源冲突检测
  • 技能匹配
  • 可用性日历

4. 统计分析

统计分析功能提供了多维度的任务数据分析,帮助我们了解项目进展和资源分配:

  • 任务状态分布
  • 任务优先级分布
  • 人员工作负载
  • 项目进度趋势
  • 自定义报表
  • 数据导出
  • 周期性报告
  • 关键指标监控
  • 预测分析

技术实现目前我设计的多维表格的项目结构如下:多维表格的数据结构对于二次开发至关重要。以下是我设计的核心数据模型:

tsx 复制代码
// 任务类型定义
interface Task {
  id: string;                // 任务唯一标识符
  description: string;       // 任务描述
  summary: string;           // 任务情况总结
  assignee: User;            // 任务执行人
  status: "已停滞" | "待开始" | "进行中" | "已完成";  // 任务状态
  startDate: string;         // 开始日期 (格式: YYYY/MM/DD)
  expectedEndDate?: string;  // 预计完成日期 (可选)
  actualEndDate?: string;    // 实际完成日期 (可选)
  isDelayed: boolean;        // 是否延期
  completed: boolean;        // 是否已完成
  priority: "重要紧急" | "紧急不重要" | "重要不紧急";  // 优先级
}

对于不同人员用户来说,也需要规范数据结构,如下是一个基础的用户维度的定义:

tsx 复制代码
// 用户类型定义
interface User {
  id: string;          // 用户唯一标识符
  name: string;        // 用户名称
  avatar?: string;     // 用户头像 (可选)
  role?: string;       // 用户角色 (可选)
  department?: string; // 所属部门 (可选)
}

整个多维表格的数据结构我采用了结构化的JSON来设计,也就意味着可以通过后端直接生成多维表格。目前我已经实现了批量导入任务数据,并支持一键导出数据,如下:

目前该项目1.0版本我已经发布上线,大家可以参考体验一下。

演示地址:mute.turntip.cn

后续会持续分享我对多维表格的设计方案和技术实现,并提供更强大的项目演示供大家体验。

最后

我们最近研发的 flowmix/docx多模态文档引擎,目前也在持续更新中,欢迎体验参考:

文档地州:flowmix.turntip.cn

相关推荐
顾安r1 小时前
11.8 脚本网页 推箱子
linux·前端·javascript·flask
Amewin2 小时前
在vue3+uniapp+vite中挂载全局属性方法
javascript·vue.js·uni-app
玖釉-2 小时前
用 Vue + DeepSeek 打造一个智能聊天网站(完整前后端项目开源)
前端·javascript·vue.js
zhangyao9403303 小时前
关于js导入Excel时,Excel的(年/月/日)日期是五位数字的问题。以及对Excel日期存在的错误的分析和处理。
开发语言·javascript·excel
骑驴看星星a3 小时前
【Three.js--manual script】4.光照
android·开发语言·javascript
七宝大爷5 小时前
多GPU并行计算互联架构解析:NVLink的诞生与SLI CrossFire的落幕
架构·nvlink·sli
忙碌5447 小时前
AI大模型时代下的全栈技术架构:从深度学习到云原生部署实战
人工智能·深度学习·架构
devincob9 小时前
js原生、vue导出、react导出、axios ( post请求方式)跨平台导出下载四种方式的demo
javascript·vue.js·react.js
编程社区管理员9 小时前
React 发送短信验证码和验证码校验功能组件
前端·javascript·react.js
葡萄城技术团队9 小时前
迎接下一代 React 框架:Next.js 16 核心能力解读
javascript·spring·react.js