# front-seek

**Repository Path**: ukiot/front-seek

## Basic Information

- **Project Name**: front-seek
- **Description**: 前端框架模板，仅供参考学习。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-18
- **Last Updated**: 2025-07-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 企业管理系统 (Enterprise Management System)

一个基于 Vue 3 + TypeScript + Element Plus 的现代化企业级管理系统，功能全面，代码架构清晰。

仅供学习参考！

![预览](images/01.gif)

## ✨ 特性

- 🎯 **现代化技术栈**: Vue 3 + TypeScript + Element Plus + Pinia + Vue Router
- 🎨 **精美UI设计**: 基于 Element Plus 的现代化界面设计
- 🌓 **主题切换**: 支持明暗主题切换，自定义主色调
- 🌐 **国际化**: 支持中英文切换
- 📱 **响应式布局**: 适配各种屏幕尺寸
- 🔐 **权限管理**: 完整的用户权限控制体系
- 📊 **数据可视化**: 基于 ECharts 的图表展示
- 🔧 **工程化**: 完整的开发工具链配置

## 🚀 功能模块

### 核心功能
- **工作台**: 数据统计、图表展示、快捷操作、最新动态
- **用户登录**: 安全的用户认证系统

### 系统管理
- **用户管理**: 用户的增删改查、角色分配、状态管理
- **角色管理**: 角色权限配置
- **权限管理**: 细粒度权限控制
- **部门管理**: 组织架构管理

### 业务管理
- **产品管理**: 产品信息维护
- **订单管理**: 订单处理流程
- **客户管理**: 客户关系管理
- **供应商管理**: 供应链管理

### 财务管理
- **收入管理**: 收入统计与分析
- **支出管理**: 成本控制
- **发票管理**: 发票开具与管理

### 报表分析
- **业务报表**: 业务数据分析
- **财务报表**: 财务数据统计

### 系统设置
- **基本设置**: 系统基础配置
- **主题设置**: 界面主题配置
- **安全设置**: 安全策略配置

## 🛠️ 技术栈

### 前端框架
- **Vue 3**: 最新的 Vue.js 框架
- **TypeScript**: 类型安全的 JavaScript
- **Vite**: 极速的构建工具

### UI 组件库
- **Element Plus**: Vue 3 的桌面端组件库
- **Element Plus Icons**: 官方图标库

### 状态管理
- **Pinia**: Vue 3 官方推荐的状态管理库

### 路由管理
- **Vue Router**: Vue.js 官方路由管理器

### 工具库
- **Axios**: HTTP 客户端
- **ECharts**: 数据可视化图表库
- **Day.js**: 轻量级日期处理库
- **Lodash**: 实用工具库
- **js-cookie**: Cookie 操作库
- **crypto-js**: 加密解密库

### 开发工具
- **ESLint**: 代码质量检查
- **Prettier**: 代码格式化
- **Sass**: CSS 预处理器
- **Auto Import**: 自动导入
- **Mock.js**: 数据模拟

## 📦 安装使用

### 环境要求
- Node.js >= 16.0.0
- npm >= 8.0.0 或 yarn >= 1.22.0

### 安装依赖
```bash
npm install
# 或
yarn install
```

### 开发环境
```bash
npm run dev
# 或
yarn dev
```

### 生产构建
```bash
npm run build
# 或
yarn build
```

### 代码检查
```bash
npm run lint
# 或
yarn lint
```

### 代码格式化
```bash
npm run format
# 或
yarn format
```

## 📁 项目结构

```
minip/
├── public/                 # 静态资源
├── src/                    # 源代码
│   ├── api/               # API 接口
│   ├── assets/            # 静态资源
│   ├── components/        # 公共组件
│   ├── config/            # 配置文件
│   ├── layout/            # 布局组件
│   │   └── components/    # 布局子组件
│   ├── pages/             # 页面组件
│   │   ├── dashboard/     # 工作台
│   │   ├── login/         # 登录页
│   │   ├── system/        # 系统管理
│   │   ├── business/      # 业务管理
│   │   ├── finance/       # 财务管理
│   │   ├── report/        # 报表分析
│   │   ├── setting/       # 系统设置
│   │   └── error/         # 错误页面
│   ├── router/            # 路由配置
│   ├── stores/            # 状态管理
│   ├── styles/            # 样式文件
│   ├── types/             # TypeScript 类型定义
│   ├── utils/             # 工具函数
│   ├── App.vue            # 根组件
│   └── main.ts            # 入口文件
├── mock/                  # Mock 数据
├── .gitignore             # Git 忽略文件
├── index.html             # HTML 模板
├── package.json           # 项目配置
├── tsconfig.json          # TypeScript 配置
├── vite.config.ts         # Vite 配置
└── README.md              # 项目说明
```

## 🔧 配置说明

### 环境变量
创建 `.env.local` 文件配置环境变量：
```bash
# API 基础路径
VITE_API_BASE_URL=http://localhost:8080/api

# 应用标题
VITE_APP_TITLE=企业管理系统
```

### 代理配置
在 `vite.config.ts` 中配置开发服务器代理：
```typescript
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}
```

## 🔑 默认账号

- **管理员**: admin / 123456
- **普通用户**: user / 123456

## 📝 开发指南

### 添加新页面
1. 在 `src/pages/` 下创建新的页面组件
2. 在 `src/router/index.ts` 中添加路由配置
3. 在布局组件中添加菜单项

### 添加新的 API
1. 在 `src/types/` 下定义数据类型
2. 在 `src/api/` 下创建 API 接口文件
3. 在组件中使用 API

### 状态管理
使用 Pinia 进行状态管理：
```typescript
// 定义 store
export const useExampleStore = defineStore('example', () => {
  const state = ref(initialState)
  const actions = () => {
    // actions
  }
  return { state, actions }
})

// 在组件中使用
const exampleStore = useExampleStore()
```

## 🤝 贡献指南

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

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情

## 📞 联系方式

如有问题或建议，请联系：
- 邮箱: ukiot1000@ukiot.cn
- 项目地址: [GitHub Repository](https://gitee.com/ukiot/frontend-tech.git)