📊 pxcharts 多维表格开源版

一个功能强大、界面精美的开源多维表格任务管理系统

---

✨ 特性

• 🎯 多视图支持 - 表格视图、看板视图、人员分配视图，满足不同场景需求
• 🎨 精美 UI 设计 - 基于 shadcn/ui + Tailwind CSS，简洁现代的界面风格
• 🔄 拖拽排序 - 支持任务拖拽排序、列拖拽排序，灵活自定义
• 📊 数据统计 - 内置任务统计看板，数据可视化展示
• 🔍 高级筛选 - 支持多条件筛选、排序、分组，快速定位目标数据
• 💾 数据导入导出 - 支持 JSON 格式的数据导入导出
• 🎭 自定义字段 - 支持添加自定义字段，灵活扩展数据结构
• 📱 响应式设计 - 完美适配桌面端和移动端
• 🌈 主题定制 - 支持浅色/深色主题切换
• ⚡ 性能优化 - 基于 Next.js 15 + React 19，性能卓越

🎬 在线演示

🌐 在线体验

📸 界面预览

表格视图

强大的表格管理功能，支持拖拽排序、行内编辑、自定义字段等

看板视图

直观的看板展示，支持任务状态拖拽切换

统计看板

数据可视化展示，一目了然掌握任务进度

🚀 快速开始

环境要求

• Node.js 18.17 或更高版本
• pnpm 8.0 或更高版本（推荐）

安装

# 克隆项目
git clone https://github.com/MrXujiang/pxcharts.git

# 进入项目目录
cd pxcharts

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

访问 http://localhost:3000 查看应用

构建生产版本

# 构建
pnpm build

# 启动生产服务器
pnpm start

📦 技术栈

• 框架: Next.js 15 - React 全栈框架
• UI 组件: shadcn/ui - 高质量 React 组件库
• 样式: Tailwind CSS - 原子化 CSS 框架
• 状态管理: Zustand - 轻量级状态管理
• 拖拽: @dnd-kit - 现代拖拽库
• 图表: Recharts - React 图表库
• 表单: React Hook Form + Zod - 表单验证
• 类型: TypeScript - 类型安全

📖 文档

• 技术架构文档 - 详细的技术实现和架构设计
• English Documentation - Technical architecture documentation in English
• English README - Project introduction in English

📚 核心功能

1. 多维表格管理

• ✅ 任务增删改查
• ✅ 拖拽排序
• ✅ 行内编辑
• ✅ 批量操作
• ✅ 自定义字段
• ✅ 列宽调整
• ✅ 列顺序调整

2. 视图系统

• ✅ 表格视图
• ✅ 看板视图
• ✅ 人员分配视图
• ✅ 统计看板

3. 数据操作

• ✅ 高级筛选
• ✅ 多级排序
• ✅ 分组展示
• ✅ 数据导入
• ✅ 数据导出

4. 用户体验

• ✅ 搜索功能
• ✅ 响应式布局
• ✅ 主题切换
• ✅ 快捷操作
• ✅ 提示反馈

🗂️ 项目结构

pxcharts/
├── app/                    # Next.js 应用目录
│   ├── layout.tsx         # 根布局
│   ├── page.tsx           # 首页
│   └── globals.css        # 全局样式
├── components/            # 组件目录
│   ├── ui/               # UI 基础组件
│   ├── views/            # 视图组件
│   ├── charts/           # 图表组件
│   └── ...               # 业务组件
├── lib/                   # 工具库
│   ├── types.ts          # 类型定义
│   ├── task-store.ts     # 状态管理
│   └── utils.ts          # 工具函数
├── hooks/                 # 自定义 Hooks
├── public/                # 静态资源
└── styles/                # 样式文件

🤝 贡献指南

我们欢迎所有形式的贡献！

1. Fork 本仓库
2. 创建您的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交您的更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启一个 Pull Request

📄 开源协议

本项目采用 GPL-3.0 license 协议开源

⚠️ 重要声明: 本项目只作为个人学习参考，如需商用使用，请联系作者授权

👨‍💻 作者

徐小夕 (MrXujiang)

• GitHub: @MrXujiang
• 个人网站: http://pxcharts.com

🌟 Star History

如果这个项目对你有帮助，请给我们一个 ⭐️ Star！

📮 联系我们

• 提交 Issue: GitHub Issues
• 微信: cxzk_168

🔗 相关项目

• pxcharts Ultra 版 - 功能增强商用版本
• pxcharts 多维表格智能云 - 云端增强版
• H5-Dooring - 让 H5 制作像搭积木一样简单
• JitWord 协同 AI 文档 - AI 赋能的协同文档工具
• 智能云文档 - 灵语文档
• 智能办公工作台 - FlowmixAI

💝 赞助支持

如果这个项目帮助到了你，可以请作者喝杯咖啡 ☕️

---

Made with ❤️ by 徐小夕