开放账核财务管理系统

基于 Vue.js 3 + Vite 构建的现代化财务管理系统前端项目。

技术栈

• 框架: Vue 3.5.30 (Composition API)
• 构建工具: Vite 8.0.0
• 路由: Vue Router 5.0.3
• 状态管理: Pinia 3.0.4
• HTTP 客户端: Axios 1.13.6

项目结构

kuaizhang-finance/
├── src/
│   ├── api/             # API 接口
│   │   └── voucher.js   # 凭证 API
│   ├── assets/          # 静态资源
│   │   └── styles/      # 全局样式
│   ├── components/      # 公共组件
│   ├── layouts/         # 布局组件
│   │   └── MainLayout.vue
│   ├── router/          # 路由配置
│   │   └── index.js
│   ├── store/           # 状态管理
│   │   ├── modules/     # Store 模块
│   │   │   ├── app.js
│   │   │   └── voucher.js
│   │   └── index.js
│   ├── utils/           # 工具函数
│   │   └── request.js   # Axios 封装
│   ├── views/           # 页面视图
│   │   ├── Dashboard.vue      # 工作台
│   │   ├── Voucher/           # 凭证管理
│   │   ├── Account/           # 科目管理
│   │   ├── InitialSetup/      # 初期设置
│   │   ├── Payroll/           # 工资管理
│   │   └── Reports/           # 账表管理
│   ├── App.vue          # 根组件
│   └── main.js          # 入口文件
├── docs/                # 项目文档
│   ├── API.md           # API 接口文档
│   └── UPDATE_LOG.md    # 更新日志
├── index.html
├── package.json
└── vite.config.js

功能模块

1. 工作台 (Dashboard)

• 财务数据统计卡片（收入、支出、凭证数量、利润）
• 快捷操作入口
• 待办事项列表
• 最近凭证展示

2. 凭证管理 (Voucher) ✅

• 符合财务系统标准的 header + details 数据结构
• 凭证列表展示与筛选（类型、状态、日期）
• 凭证新增/编辑/删除功能
• 会计分录编辑（支持多借多贷）
• 实时借贷平衡校验
• 科目快速选择（datalist）
• 动态添加/删除分录行
• 凭证审核功能

📄 详细文档：docs/API.md | docs/UPDATE_LOG.md

3. 科目管理 (Account)

• 科目树形结构展示
• 科目新增/编辑/删除
• 科目搜索功能
• 科目类型管理（资产、负债、权益、成本、损益）

4. 初期设置 (Initial Setup)

• 企业信息设置
• 会计期间配置
• 科目期初余额录入
• 辅助核算项目设置
• 借贷平衡校验

5. 工资管理 (Payroll)

• 员工工资明细表
• 工资录入/编辑
• 工资统计（应发、实发、扣款等）
• 个税自动计算
• 工资凭证生成

6. 账表管理 (Reports)

• 资产负债表
• 利润表
• 现金流量表
• 明细分类账
• 报表导出和打印

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:5173/

构建生产版本

npm run build

预览生产构建

npm run preview

设计规范

颜色变量

--primary-color: #1890ff      /* 主色调 */
--success-color: #52c41a      /* 成功色 */
--warning-color: #faad14      /* 警告色 */
--danger-color: #ff4d4f       /* 危险色 */
--text-color: #333333         /* 主要文字 */
--text-secondary: #666666     /* 次要文字 */
--border-color: #e8e8e8       /* 边框颜色 */
--background-color: #f0f2f5   /* 背景色 */

响应式设计

• 桌面端：> 768px
• 移动端：≤ 768px
• 侧边栏自适应折叠
• 表格横向滚动
• 栅格布局自适应

状态管理

app Store

• 侧边栏状态
• 当前企业信息
• 当前用户信息

voucher Store

• 凭证列表数据
• 凭证增删改操作

代码规范

• 使用 Composition API (<script setup>)
• 组件采用 PascalCase 命名
• 视图文件采用 camelCase 命名
• 使用 ES6+ 语法
• 遵循 Vue 3 最佳实践

浏览器支持

• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88

开发说明

添加新页面

1. 在 src/views/ 目录下创建新的页面组件
2. 在 src/router/index.js 中添加路由配置
3. 在 src/layouts/MainLayout.vue 的菜单中添加导航项

添加新的 Store 模块

1. 在 src/store/modules/ 目录下创建新的模块文件
2. 使用 defineStore 定义 store
3. 在组件中通过 useXxxStore() 使用

组件开发原则

• 单一职责原则
• props 向下传递，events 向上传递
• 使用 emits 定义组件事件
• 使用 props 定义组件属性
• 提供合理的默认值

许可证

MIT