Description
# CRM 移动端应用
一个简洁美观、富有质感的CRM移动端应用，使用HTML、CSS和少量JavaScript实现。该应用具有模块化结构，遵循一致的设计语言和组件样式，为企业级客户关系管理提供全面的功能支持。
## 项目结构
“`
/
├── index.html # 主入口页面
├── styles/ # 存放所有CSS文件
│ └── main.css # 主样式表（共享样式、变量等）
├── scripts/ # 存放所有JS文件
│ └── components/ # 组件相关JS
│ └── bottom-nav.js # 底部导航栏组件
└── modules/ # 按功能模块拆分的HTML文件
├── auth/ # 认证模块
├── dashboard/ # 仪表盘模块
├── customers/ # 客户管理模块
├── sales/ # 销售模块
├── contracts/ # 合同管理模块（包含发票和收款）
├── tasks/ # 任务与日程模块
├── communication/ # 沟通记录模块
├── marketing/ # 营销管理模块
├── reports/ # 报表与分析模块
└── settings/ # 系统设置模块
“`
## 设计风格
– 简约现代，使用柔和的色彩和阴影
– 充分利用白空间，避免过度拥挤的界面
– 一致的设计语言和组件样式
– 卡片式设计与精致的边框细节
– 响应式设计，适应不同屏幕尺寸
– 微交互反馈（如悬停效果、点击反馈）
## 技术实现
– HTML5语义化标签
– 现代CSS（变量、Flexbox、Grid布局）
– 轻量级JavaScript交互
– Remix图标库（remixicon）
– 适配主流移动浏览器
## 全部功能模块
### 认证模块
**主要页面：**
– **登录页面 (login.html)** – 提供用户登录功能，支持账号密码登录和记住登录状态
– **注册页面 (register.html)** – 新用户注册，收集必要的账户信息
– **忘记密码页面 (forgot-password.html)** – 密码找回功能，通过邮箱或手机验证
**模块特点：**
– 简洁的表单设计，清晰的输入验证
– 安全的认证流程，包括验证码和两步验证
– 品牌展示和视觉吸引力，体现企业形象
### 仪表盘模块
**主要页面：**
– **主仪表盘 (main-dashboard.html)** – 系统首页，展示重要业务指标和快捷入口
– **活动流仪表盘 (activity-feed.html)** – 实时显示系统内的重要活动和更新
**模块特点：**
– 数据可视化，展示销售漏斗、业绩目标等关键指标
– 待办事项提醒，突出显示需要关注的任务
– 最近活动记录，跟踪客户互动和团队协作
– 直观的图表和进度条，便于快速了解业务状态
### 客户管理模块
**主要页面：**
– **客户列表页面 (customer-list.html)** – 展示所有客户的列表视图，支持筛选和排序
– **客户详情页面 (customer-detail.html)** – 显示单个客户的详细信息和互动历史
– **客户编辑页面 (customer-edit.html)** – 添加或编辑客户信息的表单界面
– **客户分组页面 (customer-groups.html)** – 管理客户标签和分组
**模块特点：**
– 全面的客户信息管理，包括基本信息、联系方式、地址等
– 客户互动历史时间线，记录所有沟通和交易
– 客户价值分析，标记重要客户和潜在客户
– 强大的搜索和筛选功能，快速定位目标客户
### 销售模块
**主要页面：**
– **商机列表页面 (opportunity-list.html)** – 展示所有销售机会
– **商机详情页面 (opportunity-detail.html)** – 单个销售机会的详细信息
– **销售漏斗页面 (sales-pipeline.html)** – 可视化展示销售流程和各阶段的商机
– **销售指标页面 (sales-metrics.html)** – 销售业绩统计和分析
– **报价单页面 (quotation.html)** – 创建和管理客户报价单
**模块特点：**
– 销售漏斗视图，直观展示销售阶段和进度
– 销售目标跟踪，对比实际业绩和预期目标
– 商机评分系统，优先处理高价值销售线索
– 报价管理，支持创建、编辑和发送报价单
### 合同管理模块
**主要页面：**
– **合同管理页面 (contract.html)** – 合同列表和概览
– **合同详情页面 (contract-detail.html)** – 显示单个合同的详细信息
– **合同编辑页面 (contract-edit.html)** – 编辑现有合同的表单界面
– **合同创建页面 (contract-create.html)** – 创建新合同的表单界面
– **合同条款页面 (contract-terms.html)** – 管理合同条款模板
– **合同历史页面 (contract-history.html)** – 查看合同的变更历史
**模块特点：**
– 合同生命周期管理，从草拟到签署再到归档
– 合同模板功能，快速创建标准化合同
– 状态追踪，监控合同的审批和执行情况
– 电子签名集成，支持在线签署合同
### 发票管理模块
**主要页面：**
– **发票列表页面 (invoice.html)** – 展示所有发票的列表视图，支持筛选和搜索
– **发票详情页面 (invoice-detail.html)** – a显示单个发票的详细信息和历史记录
– **发票创建页面 (invoice-create.html)** – 创建新发票的表单界面
– **发票编辑页面 (invoice-edit.html)** – 编辑现有发票的表单界面
– **发票历史页面 (invoice-history.html)** – 查看发票的变更历史记录
**模块特点：**
– 发票状态管理，使用不同颜色区分不同状态（已付款、待付款、逾期等）
– 发票项目管理，支持添加多个商品或服务项目
– 自动计算功能，包括小计、税额和总金额
– 关联功能，可关联到客户、合同等相关记录
– 历史记录追踪，记录发票从创建到支付的全过程
### 收款管理模块
**主要页面：**
– **收款列表页面 (payment.html)** – 展示所有收款记录的列表视图
– **收款详情页面 (payment-detail.html)** – 显示单个收款记录的详细信息
– **收款创建页面 (payment-create.html)** – 创建新收款记录的表单界面
– **收款编辑页面 (payment-edit.html)** – 编辑现有收款记录的表单界面
– **收款历史页面 (payment-history.html)** – 查看收款记录的变更历史
– **收款方式管理页面 (payment-method.html)** – 管理各种收款方式
– **收款计划页面 (payment-schedule.html)** – 管理收款计划和提醒
– **收款报表页面 (payment-report.html)** – 收款相关的统计和报表
**模块特点：**
– 多种收款方式支持，包括银行转账、支付宝、微信支付等
– 收款状态追踪，显示已完成、部分、待收款、逾期等状态
– 与发票和合同的紧密集成，支持关联相关单据
– 收款凭证管理，支持上传和查看收款凭证
– 收款进度可视化，展示合同收款比例和进度
– 收款历史记录，追踪每笔收款的状态变更
### 任务与日程模块
**主要页面：**
– **任务列表页面 (task-list.html)** – 显示所有任务和待办事项
– **任务详情页面 (task-detail.html)** – 单个任务的详细信息和进度
– **日历视图页面 (calendar.html)** – 以日历形式展示任务和约会
– **提醒设置页面 (reminders.html)** – 管理提醒和通知设置
**模块特点：**
– 任务优先级管理，突出显示重要和紧急任务
– 任务分配和协作，支持团队协同工作
– 截止日期提醒，避免任务逾期
– 多视图切换，支持列表视图和日历视图
### 沟通记录模块
**主要页面：**
– **通话记录页面 (call-records.html)** – 记录和查看客户通话历史
– **邮件往来页面 (email-history.html)** – 追踪与客户的邮件沟通
– **会议记录页面 (meeting-notes.html)** – 存储和管理会议记录和决策事项
**模块特点：**
– 全渠道沟通记录，整合电话、邮件、会议等信息
– 沟通模板，提高回复效率
– 关键信息提取，突出重要沟通要点
– 后续跟进提醒，确保沟通有效转化
### 营销管理模块
**主要页面：**
– **营销活动列表页面 (campaign-list.html)** – 显示所有营销活动及其状态
– **活动详情页面 (campaign-detail.html)** – 单个营销活动的详细信息和效果
– **电子邮件营销页面 (email-marketing.html)** – 创建和管理邮件营销活动
– **线索管理页面 (leads.html)** – 管理和跟踪潜在客户线索
**模块特点：**
– 营销活动生命周期管理，从策划到执行再到评估
– 目标受众分群，精准定位营销对象
– 活动效果分析，追踪转化率和投资回报
– 线索评分和管理，优化销售转化路径
### 报表与分析模块
**主要页面：**
– **销售报表页面 (sales-reports.html)** – 各类销售相关的报表和图表
– **团队绩效页面 (team-performance.html)** – 团队和个人业绩分析
– **客户分析页面 (customer-analytics.html)** – 客户行为和价值分析
– **自定义报表页面 (custom-reports.html)** – 创建和保存自定义报表
**模块特点：**
– 多维度数据分析，支持不同角度查看业务数据
– 直观的图表展示，包括柱状图、饼图、折线图等
– 趋势分析，识别业务发展模式和预测未来走势
– 报表导出功能，支持PDF、Excel等格式
### 系统设置模块
**主要页面：**
– **个人资料设置页面 (profile.html)** – 用户个人信息和偏好设置
– **团队管理页面 (team-management.html)** – 管理团队成员和权限
– **工作流自定义页面 (workflow.html)** – 定制业务流程和自动化规则
– **通知偏好设置页面 (notifications.html)** – 配置系统通知方式和频率
– **数据导入/导出页面 (data-import-export.html)** – 数据批量导入导出功能
**模块特点：**
– 个性化设置，满足不同用户的使用习惯
– 权限管理，确保数据安全和适当访问控制
– 自定义字段和工作流，适应特定业务需求
– 集成管理，与其他系统和工具的连接配置
## 共享组件
### 底部导航栏
**功能特点：**
– 提供主要模块的快速访问
– 包含仪表盘、客户、销售、任务、更多（展开菜单）等固定导航项
– “更多”菜单包含次要模块如合同、发票、收款、线索、报表等
– 自动检测当前模块并高亮显示
– 响应式设计，适应不同屏幕宽度
### 顶部导航栏
**功能特点：**
– 页面标题和返回按钮
– 搜索功能快捷入口
– 通知中心入口
– 页面特定操作按钮（如筛选、添加等）
### 表单组件
**功能特点：**
– 统一的输入控件样式
– 必填项标记和验证
– 错误提示和帮助文本
– 自适应布局，适合不同屏幕尺寸
### 列表组件
**功能特点：**
– 支持排序和筛选
– 无限滚动或分页导航
– 空状态和加载状态处理
– 列表项操作菜单
## 设计特色
### 用户界面
– **表单设计**：分区明确，必填项标记清晰，输入控件统一
– **状态视觉化**：使用不同颜色区分状态（成功-绿色、警告-黄色、信息-蓝色、危险-红色）
– **时间线视觉化**：操作历史以时间线形式展示，不同操作类型使用不同图标和颜色
– **卡片式布局**：内容区域采用卡片式设计，提供清晰的视觉分隔
– **空状态处理**：无数据时提供友好的提示和图标
– **微交互**：按钮点击反馈、选中状态变化等提升用户体验
### 用户体验
– **表单验证**：实时验证用户输入，提供明确的错误提示
– **智能填充**：关联选择后自动填充相关字段
– **操作确认**：重要操作（如取消编辑）提供确认对话框
– **状态保持**：记住用户选择的筛选条件
– **视觉反馈**：操作成功或失败时提供明确的反馈
– **手势操作**：支持滑动、长按等移动端常见交互方式
## 跨页面一致性
– 统一的页面头部设计（标题、返回按钮）
– 一致的底部导航体验
– 统一的表单控件样式和交互方式
– 一致的卡片设计和间距使用
– 统一的色彩系统和状态表示方法
– 一致的图标风格和使用方式
Reviews
There are no reviews yet.