满打满算3个月，pxcharts 多维表格的 Ultra 版本终于上线了。
接下来和大家分享一下我们Ultra版本的功能亮点和技术实现。
Pxcharts Ultra版核心功能介绍
Pxcharts Ultra版 是一款开箱即用的智能多维表格解决方案，我们可以基于它开发复杂的多维表格产品，类似于飞书/钉钉多维表。它支持百万数据渲染能力，并能轻松地创建具有复杂操作的表格，并支持多视图管理能力。
与Plus版本不同，它添加了如下功能亮点：
1. 支持多维表格模版库，可以基于模版一键创建专业表格
在模版库中我们可以选择不同行业的多维表进行快捷的创建，并能自定义模版，这样我们就可以更高效的复用我们已经创建好的多维表格。
2. 支持多维表转甘特图视图，并提供全面的分析大屏模版
为了更好的做数据管理和项目监控，很显然采用甘特图的方式是最高效且直观的，很多办公协同软件和项目管理软件都有甘特图模块，所以我们 pxcharts 多维表格也实现了一键转甘特图的功能。
大家可以基于录入的多维表格数据，一键转换为甘特图视图：
对于大数据量的甘特图，我们同样做了极致的性能优化，保持甘特图的丝滑渲染：
甘特图模式下支持不同维度的时间切换，比如以日，周，月来切换，大家也可以根据自己的需求自行扩展。同时我还提供了快捷的时间切换功能，可以轻松切换到不同的时间点查看数据情况：
同时我对甘特图功能做了进一步挖掘，提供了多维度的数据统计能力：
我们可以点击统计按钮，可以看到下面的数据报表：
- 多维表格数据总览
它就像我们管理系统的数据大盘一样，全面统筹项目的数据，并通过可视化的方式让企业管理者，项目经理直观的感受项目或者数据进展。
- 进度分析报表
它可以统计智能统计项目的完成率，延期率等指标数据，并以柱形的分布图的方式直观的展示出来。
- 时间分析报表
全面的分析项目完整周期的数据，并挖掘项目执行过程中的最优解。
- 预警分析报表
预警分析模版可以统计出不同任务需求的延期情况，并对每一条需求进行时间维度细粒度的统计，帮助个人和企业更好的把控项目进展，对项目做全流程复盘。
- 支持AI智能助手，可以轻松对接不同的AI模型，并对表格进行智能化操作
我们可以在右下角点击AI助手的按钮，来进行AI对话，通过模拟AI问答的过程，我们可以直接优化和分析表格数据，如让它分析销售数据情况：
同时我们还能配置自己的AI大模型，并一键测试：
我列举了几个主流的AI模型厂商，比如：
-
OpenAI
-
DeepSeek
-
通义千问
-
Claude
-
Gemini
大家也可以扩展自己的模型，同时配置不同模型的参数，如模型类型，温度，令牌数等：
- 提供了多人协同的前端UI层，大家可以轻松实现协同的定制
表格的协同也是非常重要的功能，我在Ultra版提供了协同UI，大家可以对接自身的业务来实现协同功能。
除此之外，我还提供了表格协同权限的模块，大家也可以自行扩展：
Pxcharts Ultra版核心技术实现
上面是我设计的一个整体的多维表格技术架构，感兴趣的可以参考一下。
2.1. 核心架构原则
-
分层架构
清晰的层次划分，职责分离
-
组件化设计
高内聚、低耦合的组件结构
-
状态集中管理
使用 Zustand 进行全局状态管理
-
类型安全
TypeScript 提供完整的类型检查
-
性能优先
虚拟化和优化技术保证性能
2.2 实现方案
1. 状态管理设计
Zustand Store 结构如下：
javascript
interface TableStore {
// 表格状态
tables: Table[]
currentTableId: string | null
// 视图状态
currentView: ViewType
searchTerm: string
filters: FilterConfig[]
// 操作方法
addTable: (table: Partial<Table>) => void
updateTable: (id: string, updates: Partial<Table>) => void
deleteTable: (id: string) => void
setCurrentTable: (id: string) => void
// 记录操作
addRecord: (record: Record) => void
updateRecord: (id: string, updates: Partial<Record>) => void
deleteRecord: (id: string) => void
// 字段操作
addField: (tableId: string, field: Field) => void
updateField: (tableId: string, fieldId: string, updates: Partial<Field>) => void
deleteField: (tableId: string, fieldId: string) => void
}数据类型定义如下：
TypeScript
interface Table {
id: string
name: string
description?: string
fields: Field[]
records?: Record[]
createdAt: string
updatedAt: string
}
interface Field {
id: string
name: string
type: 'text' | 'number' | 'select' | 'checkbox' | 'date' | 'textarea'
required?: boolean
options?: Array<{ value: string; label: string }>
validation?: ValidationRule[]
}
interface Record {
id: string
tableId: string
data: { [fieldId: string]: any }
createdAt: string
updatedAt: string
}2. 组件架构设计
bash
TableEditor (主容器)
├── Sidebar (侧边栏)
│ ├── TableList (表格列表)
│ ├── ViewSelector (视图选择器)
│ └── ToolsPanel (工具面板)
├── MainContent (主内容区)
│ ├── Header (头部工具栏)
│ └── ViewContainer (视图容器)
│ ├── TableView (表格视图)
│ ├── KanbanView (看板视图)
│ ├── VirtualTableView (虚拟表格)
│ └── LazyTableView (懒加载表格)
└── Dialogs (弹窗组件)
├── ImportDialog (导入弹窗)
├── ExportDialog (导出弹窗)
├── FieldManager (字段管理)
└── AddRecordDialog (添加记录)3. 数据导入导出实现
这块是我自己实现的一个解析器，可以支持解析excel和csv文件，并渲染到多维表格。
csv解析器核心实现：
javascript
export function parseCSV(csvText: string): string[][] {
const lines = csvText.split('\n').filter(line => line.trim())
const result: string[][] = []
for (const line of lines) {
const row: string[] = []
let current = ''
let inQuotes = false
for (let i = 0; i < line.length; i++) {
const char = line[i]
const nextChar = line[i + 1]
if (char === '"') {
if (inQuotes && nextChar === '"') {
current += '"'
i++ // 跳过下一个引号
} else {
inQuotes = !inQuotes
}
} else if (char === ',' && !inQuotes) {
row.push(current.trim())
current = ''
} else {
current += char
}
}
row.push(current.trim())
result.push(row)
}
return result
}excel解析器核心实现：
javascript
export async function parseExcelFile(file: File): Promise<ExcelWorkbook> {
const arrayBuffer = await file.arrayBuffer()
const uint8Array = new Uint8Array(arrayBuffer)
// 解析ZIP文件结构
const zipData = parseZip(uint8Array)
// 解析工作簿结构
const workbookXml = zipData['xl/workbook.xml']
if (!workbookXml) {
throw new Error('无效的Excel文件：找不到工作簿')
}
const worksheets = parseWorkbook(workbookXml)
// 解析共享字符串
const sharedStringsXml = zipData['xl/sharedStrings.xml']
const sharedStrings = sharedStringsXml ? parseSharedStrings(sharedStringsXml) : []
// 解析每个工作表
const parsedWorksheets: ExcelWorksheet[] = []
for (const worksheet of worksheets) {
const worksheetXml = zipData[`xl/worksheets/${worksheet.file}`]
if (worksheetXml) {
const data = parseWorksheet(worksheetXml, sharedStrings)
parsedWorksheets.push({
name: worksheet.name,
data
})
}
}
return { worksheets: parsedWorksheets }
}4. 虚拟滚动实现方案
虚拟滚动是提高多维表格渲染能力上限的关键一步，下面和大家分享一下我的核心实现思路：
至于更详细的技术方案，我在文档里有详细的介绍，大家感兴趣可以参考一下：
最后
后续会持续分享更多高价值产品的技术架构和技术实现，推出功能更强大的智能化 + 多维表格解决方案，大家有好的建议也欢迎在留言区交流反馈～