# crm-travel-html-V2

**Repository Path**: armyant/crm-travel-html-v2

## Basic Information

- **Project Name**: crm-travel-html-V2
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-24
- **Last Updated**: 2025-07-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🌟 CRM旅游管理系统

专为旅游从业者设计的客户关系管理系统，受众群体是中老年旅游客户，提供完整的客户档案管理、邀约活动管理、销售机会跟踪等功能。

## 📋 项目概述

CRM旅游管理系统是一个专门为旅游公司设计的客户关系管理平台，特别针对中老年旅游客户的特点和需求进行了优化。 前端苹果设计规范前端的架构，提供直观友好的用户界面和强大的业务功能。

### 🎯 核心功能

- **客户档案管理**: 完整的客户360度画像，包含基础信息、旅游偏好、健康状况、家庭社交信息
- **邀约活动管理**: 从活动策划到效果评估的全流程管理
- **销售机会跟踪**: 销售漏斗管理和转化率优化
- **线路产品管理**: 产品信息、定价策略、库存管理
- **出团管理**: 出团计划、实时跟踪、团员管理
- **售后服务**: 客户满意度跟踪、投诉处理、服务改进
- **数据统计**: 全面的业务报表和数据分析
- **客户分析**: 智能客户分析、行为预测、价值评估
- **系统管理**: 用户权限、系统配置、数据维护

### ✨ 项目特色

- **专业化定制**: 专门针对中老年旅游客户群体的特点和需求设计
- **全流程管理**: 从客户接触到售后服务的完整业务流程覆盖
- **智能分析**: 基于机器学习的客户行为预测和商业洞察
- **高度可扩展**: 模块化架构设计，易于扩展和维护
- **企业级安全**: 完整的权限控制和数据安全保护机制

## 🛠 技术架构

### 核心技术栈 (2025年最新版)
```typescript
// 前端框架层
Vue.js 3.4+              // 核心框架，Composition API
@smallwei/avue 3.1+      // 配置化CRUD框架
Element Plus 2.4+        // 基础UI组件库
TypeScript 5.0+          // 类型安全开发
Vite 5.0+               // 现代化构建工具

// 数据模拟层
MockJS 1.1+             // 数据模拟库
@faker-js/faker 8.4+    // 随机数据生成
Axios 1.6+              // HTTP客户端

// 状态管理层
Pinia 2.1+              // Vue 3官方状态管理
Vue Router 4.2+         // 路由管理
VueUse 10.5+           // Vue组合式工具库

// 可视化层
ECharts 5.4+           // 图表可视化库
Day.js 1.11+           // 轻量级日期处理

// 日志监控层
loglevel 1.9+          // 轻量级日志库
web-vitals 3.5+        // Web性能监控
sentry/vue 7.8+        // 错误监控和上报
```

### 🎯 技术选型特点
- **完全基于Avue**: 使用Avue自带组件，不创建自定义组件
- **配置化开发**: 通过JSON配置实现功能，减少80%重复代码
- **Mock数据驱动**: 前端独立开发，各模块100条模拟数据
- **Apple设计规范**: 严格遵循Apple Human Interface Guidelines
- **全平台响应式**: 支持桌面、平板、手机端适配
- **无权限设计**: 专注业务功能，简化用户体验
- **模块化开发**: 按模块逐步开发，避免一次性开发所有功能

### 📱 响应式设计方案
```scss
// Apple标准断点配置
$breakpoints: (
  'xs': 375px,   // iPhone SE
  'sm': 768px,   // iPad竖屏  
  'md': 1024px,  // iPad横屏
  'lg': 1440px,  // 桌面
  'xl': 1920px   // 大屏
);

// Avue响应式配置
tableResponsive: {
  xs: { span: 24 },    // 手机全宽
  sm: { span: 12 },    // 平板半宽
  md: { span: 8 },     // 桌面三分之一
  lg: { span: 6 }      // 大屏四分之一
}
```

### 🎨 Apple设计系统
```typescript
// Apple色彩系统
const appleTheme = {
  primary: '#007AFF',     // 系统蓝
  success: '#34C759',     // 系统绿
  warning: '#FF9500',     // 系统橙  
  danger: '#FF3B30',      // 系统红
  info: '#5856D6',        // 系统紫
  
  // 字体配置
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI"',
  fontSize: '14px',
  
  // 阴影系统
  shadowLight: '0 1px 3px rgba(0,0,0,0.1)',
  shadowMedium: '0 4px 12px rgba(0,0,0,0.15)'
}
```

### 📊 Mock数据架构 (按模块开发)
```javascript
// 开发策略：按模块逐步创建数据，每个模块100条数据
const mockDataStrategy = {
  approach: '模块化开发',
  principle: '按需创建，避免一次性开发',
  dataPerModule: 100,
  
  // 开发顺序
  developmentOrder: [
    'dictionary',      // 1. 统一数据字典 (已完成)
    'dashboard',       // 2. 仪表板基础数据
    'customers',       // 3. 客户管理数据
    'sales',          // 4. 销售机会数据
    'products',       // 5. 产品管理数据
    'activities',     // 6. 邀约活动数据
    'tours',          // 7. 出团管理数据
    'aftercare',      // 8. 售后服务数据
    'system'          // 9. 系统管理数据
  ]
}

// 统一数据字典 (✅ 已完成)
const dataDictionary = {
  customerLevel: ['VIP客户', '高级客户', '普通客户', '潜在客户'],
  customerStatus: ['活跃', '非活跃', '流失'],
  opportunityStage: ['线索', '跟进中', '方案阶段', '成交'],
  productCategory: ['国内游', '出境游', '周边游', '定制游'],
  // ... 更多字典项按需扩展
}
```

### 🏗️ 项目架构
```
crm-travel/
├── src/
│   ├── mock/                    # Mock数据层 (按模块开发)
│   │   ├── data/               # 数据生成 (按需创建)
│   │   │   └── [module].js     # 各模块数据文件
│   │   ├── dictionary.js       # 统一数据字典 (✅已完成)
│   │   └── index.js            # Mock配置入口
│   ├── config/                 # Avue配置
│   │   ├── crud/              # CRUD配置
│   │   ├── form/              # 表单配置  
│   │   ├── chart/             # 图表配置
│   │   └── responsive.js       # 响应式配置
│   ├── views/                 # 页面视图 (纯Avue组件)
│   ├── styles/                # 样式文件
│   │   ├── apple-theme.scss   # Apple主题
│   │   ├── responsive.scss    # 响应式样式
│   │   └── mobile.scss        # 移动端样式
│   └── utils/                 # 工具函数
│       ├── logger.js          # 统一日志管理 (✅已完成)
│       ├── api.js             # API封装
│       └── helpers.js         # 辅助函数
├── package.json               # 依赖配置
└── vite.config.js            # 构建配置
```

### 📈 图表组件配置
```typescript
// 图表类型配置
const chartTypes = {
  salesChart: { type: 'bar', responsive: true },      // 销售统计-柱状图
  customerChart: { type: 'pie', responsive: true },   // 客户分布-饼图  
  trendChart: { type: 'line', responsive: true },     // 趋势分析-折线图
  funnelChart: { type: 'funnel', responsive: true }   // 销售漏斗-漏斗图
}
```

### 主要功能模块

#### 🏠 **仪表板**
- 系统总览和关键指标
- 实时数据统计展示
- 快速操作入口

#### 👥 **客户管理**
- 客户档案的增删改查
- 客户详细信息管理
- 客户搜索和筛选
- 客户关系网络查看

#### 🎯 **邀约活动**
- 活动策划和创建
- 客户邀请管理
- 活动执行跟踪
- 效果评估分析

#### 💼 **销售机会**
- 销售线索管理
- 跟进记录维护
- 成交进度跟踪
- 业绩统计分析

#### 🗺️ **产品管理**
- 线路产品信息管理
- 行程详情编辑
- 价格库存管理
- 产品上下架控制

#### ✈️ **出团管理**
- 团队信息管理
- 出团状态跟踪
- 成本收益分析
- 应急情况处理

#### 🎧 **售后服务**
- 客户满意度调查
- 投诉处理流程
- 客户回访记录
- 服务质量监控

#### 📊 **数据统计**
- 多维度数据报表
- 图表可视化展示
- 数据导出功能
- 趋势分析工具

#### 🔍 **客户分析**
- 客户画像构建
- 行为预测分析
- 价值评估模型
- 智能推荐系统

#### ⚙️ **系统管理**
- 用户账号管理
- 角色权限配置
- 系统参数设置
- 日志审计查看

## 📊 模块说明

### 1. 客户档案管理 (Customer Management)
- **360度客户画像**: 基础信息、行为特征、价值评估、偏好分析
- **智能标签管理**: 动态标签、行为标签、价值标签、风险标签
- **健康状况跟踪**: 健康等级、特殊需求、行动能力评估
- **家庭社交信息**: 家庭结构、社交圈分析、影响力评估
- **沟通偏好管理**: 联系方式、沟通时间、响应模式

### 2. 邀约活动管理 (Activity Management)
- **活动全生命周期**: 策划→执行→评估的完整流程
- **客户邀请系统**: 精准邀请、批量邀请、个性化邀请
- **活动执行跟踪**: 实时状态、参与情况、现场管理
- **效果评估分析**: ROI分析、满意度调查、转化率统计
- **活动模板管理**: 活动类型、标准流程、最佳实践

### 3. 销售机会跟踪 (Opportunity Tracking)
- **销售漏斗管理**: 线索→机会→成交的完整追踪
- **跟进任务调度**: 自动提醒、任务分配、进度跟踪
- **转化率分析**: 各阶段转化率、瓶颈分析、优化建议
- **成交预测**: 基于历史数据的成交概率预测
- **竞争分析**: 竞品对比、优势分析、策略调整

### 4. 线路产品管理 (Product Management)
- **产品信息管理**: 详细信息、行程安排、服务标准
- **动态定价策略**: 季节性定价、促销管理、价格优化
- **库存状态跟踪**: 实时库存、预订管理、容量规划
- **产品推荐系统**: 协同过滤、内容推荐、智能匹配
- **产品生命周期**: 新品上市、成熟期管理、淘汰决策

### 5. 出团管理 (Tour Management)
- **出团计划制定**: 行程规划、资源配置、风险评估
- **实时状态跟踪**: 位置跟踪、进度监控、异常预警
- **团员信息管理**: 成员档案、特殊需求、健康状况
- **财务管理**: 成本核算、收入分析、利润统计
- **应急响应**: 突发事件处理、应急预案、救援协调

### 6. 售后服务 (Aftercare Service)
- **客户满意度调查**: 多维度评价、趋势分析、问题识别
- **投诉处理流程**: 快速响应、处理跟踪、满意度回访
- **服务质量监控**: 服务标准、质量指标、改进跟踪
- **客户关怀**: 定期回访、节日问候、生日祝福
- **复购促进**: 机会识别、个性化推荐、优惠策略

### 7. 数据统计 (Statistics)
- **综合仪表板**: 关键指标、实时监控、趋势展示
- **业务报表生成**: 标准报表、自定义报表、定期报告
- **关键指标监控**: KPI跟踪、预警机制、对比分析
- **趋势分析**: 历史对比、预测分析、季节性分析
- **多维度分析**: 时间维度、业务维度、客户维度

### 8. 客户分析 (Customer Analysis)
- **智能客户画像**: 多维度分析、动态更新、完整度评估
- **行为预测模型**: 购买意向、流失风险、需求预测
- **价值评估**: CLV计算、价值分层、潜力评估
- **个性化推荐**: 产品推荐、服务匹配、营销策略
- **智能预警**: 多级预警、自动处理、效果跟踪

### 9. 系统管理 (System Management) ✅ **后端开发完成**
- **用户权限管理**: 角色管理、权限控制、访问审计、用户状态管理
- **系统配置管理**: 参数设置、业务规则、流程配置、配置历史跟踪
- **数据维护管理**: 自动备份、增量备份、快速恢复、数据清理
- **系统监控管理**: 性能监控、实时状态、系统预警、资源使用统计
- **日志管理**: 操作日志、访问日志、异常日志、日志分析导出
- **系统集成管理**: 第三方服务集成、API接口监控、访问控制

#### 系统管理模块开发完成情况:

**后端开发 ✅ 100%完成**
- ✅ **用户权限管理后端**: 完成用户状态管理、锁定功能、统计接口
- ✅ **数据维护管理后端**: 完成备份恢复服务、数据清理服务、15个API接口
- ✅ **系统监控管理后端**: 完成性能监控服务、日志管理服务、8个API接口
- ✅ **系统集成管理后端**: 完成第三方集成服务、API管理服务、9个API接口

**前端开发 ✅ 100%完成**
- ✅ **数据维护管理界面**: Vue组件、API接口、路由配置
- ✅ **系统监控管理界面**: 状态监控、性能图表、日志管理界面
- ✅ **系统集成管理界面**: 第三方集成配置、API监控、访问控制

#### API接口统计:
- 系统配置管理: 12个API接口
- 数据维护管理: 15个API接口
- 系统监控管理: 8个API接口
- 系统集成管理: 9个API接口
- **总计**: 44个系统管理API接口

#### 技术特点:
- **前端**: Vue 3 + Avue 3.x + TypeScript、Apple Design风格、响应式设计、配置化开发
- **数据**: Mock.js模拟数据、按模块开发、统一数据字典管理、每模块100条数据
- **UI**: 完全基于Avue组件、无自定义组件、配置驱动开发模式
- **日志**: loglevel + Sentry错误监控 + Web Vitals性能监控、模块化日志管理
- **开发**: 模块化开发策略、按需创建数据、避免过度开发

## 🤝 贡献指南

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

### 代码规范

- 遵循 Vue 3 和 TypeScript 最佳实践
- 使用 Prettier 进行代码格式化
- 添加 TypeScript 类型注解
- 编写测试用例
- 更新文档

### ESLint 配置说明

本项目已**完全关闭 ESLint 检查**，以提供更流畅的开发体验：

#### ❌ 已关闭的功能
- 代码语法检查
- 代码风格检查  
- Import/Export 检查
- 变量未使用检查
- 所有 ESLint 规则

#### ✅ 已实施的关闭方法
1. **Vite 配置**: 在 `vite.config.ts` 中禁用了 AutoImport 的 ESLint 集成
2. **忽略文件**: 创建 `.eslintignore` 忽略所有项目文件
3. **配置文件**: 创建空的 `.eslintrc.js` 禁用所有规则
4. **脚本移除**: 从 `package.json` 中移除了 `lint` 命令

#### 🔄 如需重新启用 ESLint
```bash
# 1. 删除忽略配置
rm .eslintignore .eslintrc.js

# 2. 恢复 vite.config.ts 中的 eslintrc.enabled 为 true

# 3. 安装 ESLint 相关依赖
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-vue

# 4. 在 package.json 中添加 lint 脚本
"lint": "eslint . --ext .vue,.js,.jsx,.ts,.tsx --fix"
```

#### 📝 开发建议
- 虽然关闭了 ESLint，仍建议遵循良好的代码规范
- 使用 TypeScript 的类型检查来保证代码质量
- 定期使用 `npm run type-check` 检查类型错误
- 在 IDE 中启用 Prettier 自动格式化

## 📝 许可证

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

## 📞 联系我们

- 项目维护者: 旅游CRM开发团队
- 技术支持: tech-support@tourism-crm.com
- 商务合作: business@tourism-crm.com
- 用户反馈: feedback@tourism-crm.com
- 紧急联系: 400-888-9999

## 🏢 关于我们

本CRM系统专为中老年旅游市场设计，致力于提供最贴心的旅游服务管理解决方案。我们深入理解旅游行业的特殊需求，特别是中老年客户群体的特点，通过技术创新提升服务质量和客户满意度。

### 🎯 我们的使命
让每一次旅游都成为美好的回忆，让每一位客户都感受到家人般的关怀。

### 🌟 核心价值观
- **客户第一**: 始终以客户需求为导向
- **专业服务**: 提供专业、贴心的旅游服务
- **持续创新**: 不断优化产品和服务体验
- **诚信经营**: 诚实守信，负责任的商业实践

## 🙏 致谢

感谢所有参与项目开发的技术团队、业务专家和测试用户。特别感谢广大中老年旅游客户的宝贵建议和反馈，让我们的系统更加贴合实际需求。

---

**版本**: 3.0.0 Web版 (Avue驱动)  
**更新时间**: 2025年7月  
**架构**: Vue.js 3 + Avue 3.x + MockJS  
**技术特色**: 配置化开发、无自定义组件、Apple设计规范、完整日志监控  
**目标客户**: 中老年旅游群体  
**维护状态**: 🟢 积极开发中