# quotation-frontend

**Repository Path**: cold_2430_0/quotation-frontend

## Basic Information

- **Project Name**: quotation-frontend
- **Description**: 123435453453
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-23
- **Last Updated**: 2026-03-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# 报价管理系统前端

> 基于 Vue 3 + TypeScript + Element Plus 构建的企业级报价管理前端应用

## 项目简介

quotation-front 是一个现代化的报价管理系统前端项目，采用 Vue 3 组合式 API 开发，支持动态路由、权限控制、多主题切换等功能。系统集成了报价管理、客户管理、项目管理、数据分析等多个业务模块。

## 技术栈

- **框架**: Vue 3.4+ (Composition API)
- **语言**: TypeScript 5.x
- **UI 组件库**: Element Plus
- **状态管理**: Pinia
- **路由**: Vue Router 4
- **构建工具**: Vite 5.x
- **图表库**: ECharts
- **样式**: SCSS + Tailwind CSS

## 功能特性

### 核心功能
- 👤 **用户管理** - 系统用户 CRUD、角色权限分配
- 🔐 **认证授权** - 基于指令的权限控制、路由守卫
- 📊 **仪表盘** - 数据可视化、销售概览、动态统计
- 💰 **报价管理** - 报价单编辑、项目报价、版本对比
- 👥 **客户中心** - 客户信息管理、转化跟踪
- 📁 **项目管理** - 项目分类、项目库管理
- 📈 **数据分析** - 签订分析、效率统计

### 系统特性
- 🎨 **多主题** - 支持亮色、暗色、系统主题切换
- 📐 **多布局** - 侧边栏、混合、水平等多种布局模式
- 🔔 **通知系统** - 站内通知、锁屏提醒
- 🔍 **全局搜索** - 快速定位菜单和功能
- 🧩 **工作标签页** - 多标签页切换、状态保持
- 💾 **数据持久化** - 本地存储兼容处理

## 项目结构

```
src/
├── api/                  # API 接口定义
├── assets/               # 静态资源
│   ├── images/          # 图片资源
│   └── styles/          # 样式文件
├── components/          # 组件库
│   └── core/            # 核心业务组件
│       ├── banners/    # 横幅组件
│       ├── base/       # 基础组件
│       ├── cards/      # 卡片组件
│       ├── charts/     # 图表组件
│       ├── forms/      # 表单组件
│       ├── layouts/    # 布局组件
│       ├── media/      # 媒体组件
│       ├── tables/     # 表格组件
│       └── ...
├── config/              # 配置文件
├── directives/          # 指令 (auth, roles, highlight, ripple)
├── enums/               # 枚举定义
├── hooks/               # 组合式函数
├── locales/             # 国际化资源
├── mock/                # 模拟数据
├── plugins/             # 插件配置
├── router/              # 路由配置
│   ├── guards/         # 路由守卫
│   ├── modules/        # 路由模块
│   └── core/           # 路由核心
├── store/              # Pinia 状态管理
├── types/               # TypeScript 类型定义
├── utils/               # 工具函数
└── views/               # 页面视图
    ├── auth/           # 认证相关
    ├── dashboard/      # 仪表盘
    ├── exception/      # 异常页面
    ├── quotation/      # 报价管理
    ├── result/         # 结果页面
    └── system/         # 系统管理
```

## 快速开始

### 环境要求

- Node.js 18+
- pnpm 8+

### 安装依赖

```bash
# 安装 pnpm (如未安装)
npm install -g pnpm

# 安装项目依赖
pnpm install
```

### 开发模式

```bash
# 启动开发服务器
pnpm dev
```

### 构建生产版本

```bash
# 构建生产版本
pnpm build
```

### 代码检查

```bash
# 运行 ESLint
pnpm lint

# 运行 Prettier 格式化
pnpm prettier

# 运行 stylelint
pnpm stylelint
```

## 配置说明

### 环境变量

项目根目录下的 `.env` 文件：

| 变量名 | 说明 |
|--------|------|
| `VITE_API_URL` | API 接口地址 |
| `VITE_PORT` | 开发服务器端口 |

### 主题配置

通过设置面板可动态调整：
- 主题模式：亮色/暗色/跟随系统
- 侧边栏样式：深色/浅色/设计感
- 菜单布局：侧边栏/混合/水平/双栏

## 组件使用

### 表格组件

```vue
<template>
  <art-table :columns="columns" :data="data" />
</template>
```

### 图表组件

```vue
<template>
  <art-bar-chart :data="chartData" />
</template>
```

### 表单组件

```vue
<template>
  <art-form :model="formData" :rules="rules" />
</template>
```

## 权限控制

### 路由权限

通过后端返回菜单数据动态生成路由，配合路由守卫进行权限校验。

### 按钮级权限

使用自定义指令控制元素显示：

```vue
<template>
  <button v-auth="'user:add'">新增用户</button>
  <button v-roles="['admin']">管理员操作</button>
</template>
```

## 国际化

支持中英文切换，默认语言根据浏览器设置自动适配。

```typescript
// 切换语言
import { useI18n } from 'vue-i18n';
const { locale } = useI18n();
locale.value = 'en';
```

## 浏览器支持

- Chrome >= 90
- Firefox >= 88
- Safari >= 14
- Edge >= 90

## 贡献指南

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/xxx`)
3. 提交更改 (`git commit -m 'feat: add xxx'`)
4. 推送分支 (`git push origin feature/xxx`)
5. 创建 Pull Request

## License

MIT License