当前位置：首页 > news >正文

pxcharts多维表格编辑器Ultra版：支持二开 + 本地化部署的多维表格解决方案

news 2025/9/25 18:19:38

满打满算3个月，pxcharts 多维表格的 Ultra 版本终于上线了。

文档地址：http://doc.pxcharts.com

接下来和大家分享一下我们Ultra版本的功能亮点和技术实现。

Pxcharts Ultra版核心功能介绍

Pxcharts Ultra版是一款开箱即用的智能多维表格解决方案，我们可以基于它开发复杂的多维表格产品，类似于飞书/钉钉多维表。它支持百万数据渲染能力，并能轻松地创建具有复杂操作的表格，并支持多视图管理能力。

与Plus版本不同，它添加了如下功能亮点：

1. 支持多维表格模版库，可以基于模版一键创建专业表格

在模版库中我们可以选择不同行业的多维表进行快捷的创建，并能自定义模版，这样我们就可以更高效的复用我们已经创建好的多维表格。

2. 支持多维表转甘特图视图，并提供全面的分析大屏模版

为了更好的做数据管理和项目监控，很显然采用甘特图的方式是最高效且直观的，很多办公协同软件和项目管理软件都有甘特图模块，所以我们 pxcharts 多维表格也实现了一键转甘特图的功能。

大家可以基于录入的多维表格数据，一键转换为甘特图视图：

对于大数据量的甘特图，我们同样做了极致的性能优化，保持甘特图的丝滑渲染：

甘特图模式下支持不同维度的时间切换，比如以日，周，月来切换，大家也可以根据自己的需求自行扩展。同时我还提供了快捷的时间切换功能，可以轻松切换到不同的时间点查看数据情况：

同时我对甘特图功能做了进一步挖掘，提供了多维度的数据统计能力：

我们可以点击统计按钮，可以看到下面的数据报表：

1. 多维表格数据总览

它就像我们管理系统的数据大盘一样，全面统筹项目的数据，并通过可视化的方式让企业管理者，项目经理直观的感受项目或者数据进展。

2. 进度分析报表

它可以统计智能统计项目的完成率，延期率等指标数据，并以柱形的分布图的方式直观的展示出来。

3. 时间分析报表

全面的分析项目完整周期的数据，并挖掘项目执行过程中的最优解。

4. 预警分析报表

预警分析模版可以统计出不同任务需求的延期情况，并对每一条需求进行时间维度细粒度的统计，帮助个人和企业更好的把控项目进展，对项目做全流程复盘。

3. 支持AI智能助手，可以轻松对接不同的AI模型，并对表格进行智能化操作

我们可以在右下角点击AI助手的按钮，来进行AI对话，通过模拟AI问答的过程，我们可以直接优化和分析表格数据，如让它分析销售数据情况：

同时我们还能配置自己的AI大模型，并一键测试：

我列举了几个主流的AI模型厂商，比如：

OpenAI
DeepSeek
通义千问
Claude
Gemini

大家也可以扩展自己的模型，同时配置不同模型的参数，如模型类型，温度，令牌数等：

4. 提供了多人协同的前端UI层，大家可以轻松实现协同的定制

表格的协同也是非常重要的功能，我在Ultra版提供了协同UI，大家可以对接自身的业务来实现协同功能。

除此之外，我还提供了表格协同权限的模块，大家也可以自行扩展：

Pxcharts Ultra版核心技术实现

上面是我设计的一个整体的多维表格技术架构，感兴趣的可以参考一下。

2.1. 核心架构原则

分层架构
清晰的层次划分，职责分离
组件化设计
高内聚、低耦合的组件结构
状态集中管理
使用 Zustand 进行全局状态管理
类型安全
TypeScript 提供完整的类型检查
性能优先
虚拟化和优化技术保证性能

2.2 实现方案

1. 状态管理设计

Zustand Store 结构如下：

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
}

数据类型定义如下：

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. 组件架构设计

TableEditor (主容器)
├── Sidebar (侧边栏)
│   ├── TableList (表格列表)
│   ├── ViewSelector (视图选择器)
│   └── ToolsPanel (工具面板)
├── MainContent (主内容区)
│   ├── Header (头部工具栏)
│   └── ViewContainer (视图容器)
│       ├── TableView (表格视图)
│       ├── KanbanView (看板视图)
│       ├── VirtualTableView (虚拟表格)
│       └── LazyTableView (懒加载表格)
└── Dialogs (弹窗组件)
├── ImportDialog (导入弹窗)
├── ExportDialog (导出弹窗)
├── FieldManager (字段管理)
└── AddRecordDialog (添加记录)

3. 数据导入导出实现

这块是我自己实现的一个解析器，可以支持解析excel和csv文件，并渲染到多维表格。

csv解析器核心实现：

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 = falsefor (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解析器核心实现：

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 }
}