前端开发计划.md 36.2 KB

Raw Blame History Permalink



臻奇智荟圈小程序 - 前端开发计划


📋 项目概览


项目信息


项目名称: 臻奇智荟圈小程序

开发周期: 2026-01-26 至 2026-02-24（30天）

技术栈: Taro 4 + Vue 3 + NutUI 4 + Pinia

设计宽度: 750px（自定义组件）/ 375px（NutUI组件）


开发目标

基于现有 Taro 4 + Vue 3 模板，开发服务保险团队内部同事的微信小程序，实现计划书生成、资料库管理、AI问答三大核心功能。


🏗️ 应用架构


目录结构规划

src/
├── api/                    # API接口定义
│   ├── index.js           # API入口
│   ├── fn.js              # 请求包装器
│   ├── order.js           # 订单相关API
│   ├── material.js        # 资料库相关API
│   ├── ai.js              # AI问答相关API
│   └── user.js            # 用户相关API
│
├── assets/                # 静态资源
│   └── images/            # 图片资源
│
├── components/            # 公共组件
│   ├── page-container/    # 页面容器组件
│   ├── order-card/        # 订单卡片组件
│   ├── material-item/     # 资料列表项组件
│   ├── file-preview/      # 文件预览组件（PDF/视频/图片）
│   └── chat-message/      # 聊天消息组件
│
├── composables/           # 组合式函数
│   ├── useAuth.js         # 认证相关
│   ├── useRequest.js      # 请求封装
│   └── useUpload.js       # 文件上传
│
├── pages/                 # 页面
│   ├── index/             # 首页（工作台）
│   ├── order/
│   │   ├── submit/        # 提交计划书申请
│   │   ├── list/          # 我的订单列表
│   │   └── detail/        # 订单详情
│   ├── material/
│   │   ├── index/         # 资料库首页
│   │   ├── list/          # 资料列表
│   │   ├── detail/        # 资料详情（PDF/视频预览）
│   │   └── search/        # 资料搜索
│   ├── ai/
│   │   └── chat/          # AI问答对话页面
│   ├── notifications/     # 消息通知列表
│   ├── profile/           # 个人中心
│   └── auth/              # 授权登录（已有）
│
├── stores/                # 状态管理
│   ├── main.js            # 主Store
│   ├── router.js          # 路由Store（已有）
│   ├── user.js            # 用户信息Store
│   ├── order.js           # 订单Store
│   └── material.js        # 资料库Store
│
├── utils/                 # 工具函数
│   ├── authRedirect.js    # 认证跳转（已有）
│   ├── request.js         # 请求封装（已有）
│   ├── tools.js           # 工具函数（已有）
│   ├── config.js          # 配置文件（已有）
│   ├── validate.js        # 表单验证
│   └── format.js          # 格式化工具
│
├── hooks/                 # Hooks
│   └── useGo.js           # 导航Hook（已有）
│
├── app.config.js          # 应用配置（路由、tabBar等）
└── app.js                 # 应用入口


页面路由规划


页面路径
页面名称
需要登录
说明


/pages/index/index
首页/工作台
✅
展示快捷入口、待处理订单、最新资料


/pages/order/submit
提交计划书申请
✅
表单提交页面


/pages/order/list
我的订单
✅
订单列表（按状态筛选）


/pages/order/detail
订单详情
✅
查看订单详情、PDF预览、海报查看


/pages/material/index
资料库首页
✅
分类导航、热门资料


/pages/material/list
资料列表
✅
按分类查看资料


/pages/material/detail
资料详情
✅
PDF/视频/图片预览（禁止下载）


/pages/material/search
资料搜索
✅
搜索资料


/pages/ai/chat
AI问答
✅
对话式AI交互


/pages/notifications
消息通知
✅
系统消息列表


/pages/profile
个人中心
✅
用户信息、设置


/pages/auth/index
授权登录
❌
微信登录（已有）


TabBar 配置

// app.config.js
tabBar: {
  color: '#999999',
  selectedColor: '#007AFF',
  backgroundColor: '#ffffff',
  borderStyle: 'black',
  list: [
    {
      pagePath: 'pages/index/index',
      text: '工作台',
      iconPath: 'assets/images/tab-home.png',
      selectedIconPath: 'assets/images/tab-home-active.png'
    },
    {
      pagePath: 'pages/material/index/index',
      text: '资料库',
      iconPath: 'assets/images/tab-material.png',
      selectedIconPath: 'assets/images/tab-material-active.png'
    },
    {
      pagePath: 'pages/ai/chat/index',
      text: 'AI助手',
      iconPath: 'assets/images/tab-ai.png',
      selectedIconPath: 'assets/images/tab-ai-active.png'
    },
    {
      pagePath: 'pages/profile/index',
      text: '我的',
      iconPath: 'assets/images/tab-profile.png',
      selectedIconPath: 'assets/images/tab-profile-active.png'
    }
  ]
}


📱 核心功能模块设计


模块1：计划书生成模块


1.1 提交计划书页面 (/pages/order/submit/index.vue)

功能需求


7-8个核心字段输入
表单验证
产品和缴费年限联动
提交成功后跳转到订单列表


页面布局

┌─────────────────────────────┐
│      提交计划书申请          │
├─────────────────────────────┤
│                             │
│  客户姓名                   │
│  [__________________]       │
│                             │
│  客户性别   ○男  ○女        │
│                             │
│  客户年龄                   │
│  [选择器 ▼] 18-65岁         │
│                             │
│  产品名称                   │
│  [下拉选择 ▼]               │
│                             │
│  缴费年限                   │
│  [下拉选择 ▼]               │
│                             │
│  货币类型   ○美元 ○港币 ○人民币 │
│                             │
│  总保费金额                 │
│  [__________________]       │
│                             │
│  备注栏（选填）             │
│  [__________________]       │
│  [__________________]       │
│                             │
│  ┌─────────────────────┐   │
│  │     提交申请        │   │
│  └─────────────────────┘   │
│                             │
└─────────────────────────────┘


表单字段设计

const formData = reactive({
  customerName: '',        // 客户姓名（必填，2-20字符）
  customerGender: '',      // 客户性别（必填，male/female）
  customerAge: null,       // 客户年龄（必填，18-65）
  productName: '',         // 产品名称（必填，从产品列表选择）
  paymentPeriod: '',       // 缴费年限（必填，根据产品动态加载）
  currencyType: '',        // 货币类型（必填，USD/HKD/CNY）
  totalAmount: '',         // 总保费金额（必填，数字）
  remark: ''               // 备注（选填，最多500字符）
})


表单验证规则

// utils/validate.js
export const orderFormRules = {
  customerName: [
    { required: true, message: '请输入客户姓名' },
    { minLength: 2, maxLength: 20, message: '姓名长度为2-20个字符' }
  ],
  customerGender: [
    { required: true, message: '请选择客户性别' }
  ],
  customerAge: [
    { required: true, message: '请选择客户年龄' },
    { type: 'number', min: 18, max: 65, message: '年龄范围为18-65岁' }
  ],
  productName: [
    { required: true, message: '请选择产品名称' }
  ],
  paymentPeriod: [
    { required: true, message: '请选择缴费年限' }
  ],
  currencyType: [
    { required: true, message: '请选择货币类型' }
  ],
  totalAmount: [
    { required: true, message: '请输入总保费金额' },
    { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式' }
  ],
  remark: [
    { maxLength: 500, message: '备注最多500个字符' }
  ]
}


技术要点


使用 NutUI 的 Form 组件进行表单管理
产品名称使用 Picker 选择器
缴费年限根据选择的产品动态加载可选年限
金额输入使用 InputNumber 组件，限制只能输入数字
年龄选择使用 Picker，预设18-65岁
性别和货币类型使用 Radio 单选组件


1.2 订单列表页面 (/pages/order/list/index.vue)

功能需求


展示当前用户的所有订单
按状态筛选（全部/待处理/处理中/已生成/已查看）
下拉刷新、上拉加载更多
点击查看订单详情


页面布局

┌─────────────────────────────┐
│  我的订单        状态筛选 ▼  │
├─────────────────────────────┤
│ ┌─────────────────────────┐ │
│ │ 订单号: 202601270001     │ │
│ │ 客户: 张三  男  30岁     │ │
│ │ 产品: XXX重疾险          │ │
│ │ 金额: $10,000            │ │
│ │ 状态: [待处理]           │ │
│ │ 2026-01-27 10:30        │ │
│ └─────────────────────────┘ │
│                             │
│ ┌─────────────────────────┐ │
│ │ 订单号: 202601260002     │ │
│ │ 客户: 李四  女  35岁     │ │
│ │ 产品: XXX医疗险          │ │
│ │ 金额: HK$50,000          │ │
│ │ 状态: [已生成]           │ │
│ │ 2026-01-26 15:20        │ │
│ └─────────────────────────┘ │
│                             │
└─────────────────────────────┘


状态标签颜色


待处理：灰色 (#999999)
处理中：蓝色 (#007AFF)
已生成：绿色 (#34C759)
已查看：默认 (#999999)


技术要点


使用 useRequest composable 封装请求逻辑
状态筛选使用 Tabs 组件
订单卡片封装为独立组件 order-card

使用虚拟列表优化长列表性能（订单数量较多时）
下拉刷新使用 ScrollView 的 refresherEnabled 属性


1.3 订单详情页面 (/pages/order/detail/index.vue)

功能需求


显示订单完整信息
查看PDF计划书（已生成状态）
查看海报（已生成状态）
显示订单状态流转时间线


页面布局

┌─────────────────────────────┐
│      订单详情                │
├─────────────────────────────┤
│ 订单号: 202601270001         │
│ 状态: [待处理]               │
│                             │
│ ── 客户信息 ───             │
│ 姓名: 张三                   │
│ 性别: 男                     │
│ 年龄: 30岁                   │
│                             │
│ ── 产品信息 ───             │
│ 产品名称: XXX重疾险          │
│ 缴费年限: 20年               │
│ 货币类型: 美元               │
│ 总保费: $10,000              │
│                             │
│ ── 备注信息 ───             │
│ 客户有高血压病史             │
│                             │
│ ── 状态流转 ───             │
│ ○ 待处理                     │
│   2026-01-27 10:30          │
│ ○ 处理中                    │
│ ○ 已生成                    │
│ ○ 已查看                    │
│                             │
│ ── 计划书文件 ───            │
│ [🔍 查看PDF计划书]           │
│ [🖼️ 查看简化海报]            │
│                             │
└─────────────────────────────┘


技术要点


PDF预览使用 web-view 或自定义 PDF 阅读器组件
海报查看使用 ImagePreview 组件（支持保存和分享）
状态流转使用 Steps 组件展示时间线
文件未生成时隐藏查看按钮


模块2：资料库模块


2.1 资料库首页 (/pages/material/index/index.vue)

功能需求


展示资料分类（入职相关、签单相关、AI答疑、家办业务）
展示最新资料、热门资料
快速搜索入口


页面布局

┌─────────────────────────────┐
│      资料库                  │
│  [🔍 搜索资料...]           │
├─────────────────────────────┤
│ ── 分类导航 ───             │
│ ┌─────┐ ┌─────┐ ┌─────┐   │
│ │入职 │ │签单 │ │ AI  │   │
│ │相关 │ │相关 │ │答疑 │   │
│ └─────┘ └─────┘ └─────┘   │
│ ┌─────┐                   │
│ │家办 │                   │
│ │业务 │                   │
│ └─────┘                   │
│                             │
│ ── 最新资料 ───             │
│ ┌─────────────────────┐   │
│ │ [PDF] 入职考试指南  │   │
│ │ 2026-01-25          │   │
│ └─────────────────────┘   │
│ ┌─────────────────────┐   │
│ │ [视频] 产品介绍     │   │
│ │ 2026-01-24          │   │
│ └─────────────────────┘   │
│                             │
│ ── 热门资料 ───             │
│ ┌─────────────────────┐   │
│ │ [PDF] 签单流程手册  │   │
│ │ 查看 1,234 次        │   │
│ └─────────────────────┘   │
└─────────────────────────────┘


技术要点


分类导航使用 Grid 组件，图标+文字布局
最新资料和热门资料使用横向滚动列表
点击分类进入资料列表页面（带分类ID参数）
搜索框点击跳转到搜索页面


2.2 资料列表页面 (/pages/material/list/index.vue)

功能需求


显示某个分类下的所有资料
支持按子分类筛选
下拉刷新、上拉加载更多
显示文件类型图标


页面布局

┌─────────────────────────────┐
│  入职相关      子分类 ▼     │
├─────────────────────────────┤
│ ┌─────────────────────────┐ │
│ │ [PDF] 入职考试指南       │ │
│ │ 入职前                   │ │
│ │ 2026-01-25  156次查看    │ │
│ └─────────────────────────┘ │
│                             │
│ ┌─────────────────────────┐ │
│ │ [视频] 财务计划讲解      │ │
│ │ 入职中                   │ │
│ │ 2026-01-24  89次查看     │ │
│ └─────────────────────────┘ │
│                             │
│ ┌─────────────────────────┐ │
│ │ [PDF] 基本法对比         │ │
│ │ 入职中                   │ │
│ │ 2026-01-23  234次查看    │ │
│ └─────────────────────────┘ │
│                             │
└─────────────────────────────┘


技术要点


文件类型图标：PDF、视频、音频、图片
点击资料项进入详情页面
使用分页加载，每页20条


2.3 资料详情页面 (/pages/material/detail/index.vue)

功能需求


PDF在线预览（禁止下载）
视频/音频在线播放
图片查看器
显示资料信息（标题、分类、标签、上传时间、查看次数）
关键：禁止下载功能


PDF预览布局

┌─────────────────────────────┐
│  资料详情    [< 返回]        │
├─────────────────────────────┤
│ 入职考试指南                 │
│ 入职前 > 入职相关            │
│ 标签: 考试, 入职            │
│ 上传时间: 2026-01-25        │
│ 查看次数: 156                │
├─────────────────────────────┤
│                             │
│      [PDF在线预览区域]       │
│                             │
│      使用 pdf.js 或          │
│      web-view 嵌入           │
│      长按保存功能禁用        │
│                             │
└─────────────────────────────┘


视频播放布局

┌─────────────────────────────┐
│  产品介绍视频                │
├─────────────────────────────┤
│ [视频播放器]                 │
│ ▶️  ⏸️  00:00 / 12:34        │
│ ━━━━━━━●━━━━━━━━━━━━━━━     │
│                             │
│ 简介: 本视频介绍公司核心     │
│ 产品的特点和优势...          │
│                             │
└─────────────────────────────┘


技术要点


PDF预览方案：


方案1：使用 pdf.js 库渲染 PDF（推荐，可控制下载）
方案2：使用 web-view 加载在线PDF（需要服务器配合禁用下载）
禁用右键菜单、长按保存等下载途径


视频播放：


使用 NutUI 的 Video 组件
支持倍速播放、全屏播放


图片查看：


使用 ImagePreview 组件
支持缩放、左右滑动

禁用保存到本地功能（设置 show-save-button="false"）


安全措施：


添加水印（用户名+时间）
禁用长按保存
禁用右键菜单
图片切片展示（防止完整下载）


2.4 资料搜索页面 (/pages/material/search/index.vue)

功能需求


关键词搜索
按分类筛选
按标签筛选
搜索结果高亮


页面布局

┌─────────────────────────────┐
│ [🔍 搜索资料...]    [搜索]  │
├─────────────────────────────┤
│ 筛选: [全部分类 ▼] [全部标签▼]│
├─────────────────────────────┤
│ 找到 12 个结果               │
│                             │
│ ┌─────────────────────────┐ │
│ │ [PDF] 入职<mark>考试</mark>│
│ │ 指南                    │ │
│ │ ...<mark>考试</mark>...  │ │
│ └─────────────────────────┘ │
│                             │
│ ┌─────────────────────────┐ │
│ │ [视频] <mark>考试</mark>  │
│ │ 报名流程                │ │
│ └─────────────────────────┘ │
│                             │
└─────────────────────────────┘


技术要点


使用防抖（debounce）优化搜索请求
搜索结果高亮关键词
空状态提示"未找到相关资料"
搜索历史记录（本地存储）


模块3：AI问答模块


3.1 AI聊天页面 (/pages/ai/chat/index.vue)

功能需求


对话式交互界面
消息列表（用户+AI）
输入框+发送按钮
支持多轮对话
显示"正在输入..."状态


页面布局

┌─────────────────────────────┐
│      AI助手       [清除对话] │
├─────────────────────────────┤
│                             │
│ ── 今天 10:30 ───          │
│                             │
│ 你好，我想了解一下重疾险    │
│                             │
│ ○ 10:30                    │
│                             │
│ 您好！重疾险是...           │
│ [详细回答内容]              │
│                             │
│ ── 今天 10:32 ───          │
│                             │
│ 那缴费年限有哪些选择？       │
│                             │
│ ○ 10:32                    │
│                             │
│ 不同产品的缴费年限不同...    │
│ [详细回答]                  │
│                             │
├─────────────────────────────┤
│ [输入问题...]          [发送]│
└─────────────────────────────┘


技术要点


消息列表使用 ScrollView 组件，自动滚动到底部
用户消息靠右，AI消息靠左
AI消息支持 Markdown 渲染（使用 markdown-it 库）
发送状态显示（Loading动画）
支持语音输入（可选，使用微信语音识别API）


消息数据结构

const messages = ref([
  {
    id: '1',
    role: 'user',           // 'user' | 'assistant'
    content: '你好，我想了解一下重疾险',
    timestamp: '2026-01-27 10:30:00'
  },
  {
    id: '2',
    role: 'assistant',
    content: '您好！重疾险是...',
    timestamp: '2026-01-27 10:30:05'
  }
])


调用流程


用户发送消息 → 调用 AI 对话 API
显示"AI正在思考..."加载状态
接收 AI 响应 → 更新消息列表
自动滚动到最新消息


模块4：其他页面


4.1 首页/工作台 (/pages/index/index.vue)

功能需求


快捷入口（提交计划书、资料库、AI助手）
待处理订单提醒
最新资料更新
系统通知


页面布局

┌─────────────────────────────┐
│      臻奇智荟圈              │
├─────────────────────────────┤
│ 你好，张三 👋               │
│                             │
│ ── 快捷入口 ───             │
│ ┌─────┐ ┌─────┐ ┌─────┐   │
│ │提交 │ │资料 │ │AI   │   │
│ │计划书│ │库  │ │助手 │   │
│ └─────┘ └─────┘ └─────┘   │
│                             │
│ ── 待处理 ───               │
│ 您有 2 个待处理订单          │
│                             │
│ ── 最新资料 ───             │
│ 入职考试指南 (2026-01-25)   │
│                             │
│ ── 系统通知 ───             │
│ 您的订单#202601270001已生成  │
│                             │
└─────────────────────────────┘


4.2 个人中心 (/pages/profile/index.vue)

功能需求


用户信息展示
权限判断（管理员显示管理后台入口）
设置菜单（清除缓存、关于我们等）


页面布局

┌─────────────────────────────┐
│                             │
│       [头像]                │
│       张三                  │
│       普通用户              │
│                             │
│ ── 我的订单 ───             │
│ ── 我的收藏 ───             │
│ ── 消息通知 ───             │
│                             │
│ ── 管理后台 ─── (管理员可见)│
│                             │
│ ── 设置 ───                │
│   清除缓存                  │
│   关于我们                  │
│   退出登录                  │
│                             │
└─────────────────────────────┘


4.3 消息通知列表 (/pages/notifications/index.vue)

功能需求


展示所有系统通知
订单状态变更通知
资料更新通知
点击通知跳转到对应页面


🔌 API接口对接


API定义规范

API定义文件：src/api/order.js

import { buildApiUrl } from '@/utils/tools'

// 获取产品列表
export const getProducts = () => {
  return buildApiUrl('product_list')
}

// 获取产品可选缴费年限
export const getProductPaymentPeriods = (productId) => {
  return buildApiUrl('product_payment_periods', { productId })
}

// 创建订单
export const createOrder = (data) => {
  return buildApiUrl('order_create', data)
}

// 获取订单列表
export const getOrderList = (params) => {
  return buildApiUrl('order_list', params)
}

// 获取订单详情
export const getOrderDetail = (orderId) => {
  return buildApiUrl('order_detail', { orderId })
}


请求调用：使用 src/api/fn.js 包装器

import { createOrder } from '@/api/order'
import { request } from '@/api/fn'

// 提交订单
const submitOrder = async (formData) => {
  try {
    const result = await request(createOrder({
      customerName: formData.customerName,
      customerGender: formData.customerGender,
      // ...其他字段
    }))

    if (result.code === 0) {
      Taro.showToast({ title: '提交成功', icon: 'success' })
      // 跳转到订单列表
      Taro.navigateTo({ url: '/pages/order/list/index' })
    } else {
      Taro.showToast({ title: result.message, icon: 'none' })
    }
  } catch (error) {
    Taro.showToast({ title: '提交失败', icon: 'none' })
  }
}


API列表


订单相关


order_list - 获取订单列表

order_detail - 获取订单详情

order_create - 创建订单

order_status_update - 更新订单状态


资料库相关


material_category_list - 获取分类列表

material_list - 获取资料列表

material_detail - 获取资料详情

material_search - 搜索资料


AI相关


ai_chat_send - 发送AI对话消息

ai_chat_history - 获取对话历史


用户相关


user_info - 获取用户信息

user_login - 微信登录

notification_list - 获取通知列表


🎨 UI设计规范


设计宽度规则


NutUI组件：375px 基准宽度

自定义组件：750px 基准宽度


注意：在编写样式时需要明确区分使用的基准宽度。


主题色

// 主色调
const theme = {
  primary: '#007AFF',      // 主色（蓝色）
  success: '#34C759',      // 成功（绿色）
  warning: '#FF9500',      // 警告（橙色）
  danger: '#FF3B30',       // 危险（红色）
  info: '#5AC8FA',         // 信息（浅蓝色）

  // 文字颜色
  textPrimary: '#000000',  // 主文字
  textSecondary: '#666666', // 次要文字
  textTertiary: '#999999',  // 辅助文字
  textPlaceholder: '#CCCCCC', // 占位文字

  // 背景色
  bgPrimary: '#FFFFFF',    // 主背景
  bgSecondary: '#F5F5F5',  // 次要背景
  bgDisabled: '#F0F0F0',   // 禁用背景

  // 边框色
  border: '#E5E5E5',       // 边框
  divider: '#EEEEEE'       // 分割线
}


字体规范

/* 标题 */
.title-large {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
}

.title-medium {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

/* 正文 */
.body-large {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.body-medium {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* 辅助文字 */
.caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: #999999;
}


组件样式规范


按钮高度：48px
输入框高度：48px
卡片圆角：8px
卡片内边距：16px
列表项高度：根据内容自适应，最小64px


📦 组件开发计划


公共组件列表


1. PageContainer (src/components/page-container/index.vue)

用途：页面容器，提供统一的页面布局
功能：


统一的页面头部
统一的页面内边距
统一的背景色


2. OrderCard (src/components/order-card/index.vue)

用途：订单卡片组件
功能：


显示订单基本信息
状态标签（不同颜色）
点击跳转到详情


3. MaterialItem (src/components/material-item/index.vue)

用途：资料列表项组件
功能：


文件类型图标
资料标题、分类、标签
查看次数、上传时间


4. FilePreview (src/components/file-preview/index.vue)

用途：文件预览组件
功能：


PDF预览（使用 pdf.js）
视频播放器
图片查看器
禁用下载功能


5. ChatMessage (src/components/chat-message/index.vue)

用途：聊天消息组件
功能：


用户消息（靠右）
AI消息（靠左，支持Markdown）
时间戳显示


📅 开发任务分解


Week 1: 基础与计划书模块（2026-01-26 至 2026-02-01）


Day 1-2: 项目初始化


 创建页面目录结构

 配置路由（app.config.js）

 配置 TabBar

 创建 Store 模块

 创建 API 定义文件


Day 3-4: 首页与个人中心


 开发首页（工作台）

 开发个人中心

 开发消息通知列表

 对接用户信息 API


Day 5-7: 计划书提交模块


 开发计划书提交页面


 表单UI

 表单验证

 产品下拉选择

 缴费年限联动

 提交功能


 开发订单列表页面

 开发订单详情页面

 对接订单相关 API

 测试表单提交流程


Week 2: 资料库模块（2026-02-02 至 2026-02-08）


Day 1-2: 资料库首页与列表


 开发资料库首页

 开发资料列表页面

 分类筛选功能

 下拉刷新、上拉加载


Day 3-4: 资料详情与预览


 开发资料详情页面

 PDF在线预览（pdf.js集成）

 视频播放器

 图片查看器

 实现禁止下载功能


 禁用右键菜单

 禁用长按保存

 添加水印


Day 5-7: 搜索与优化


 开发资料搜索页面

 关键词搜索

 分类/标签筛选

 搜索结果高亮

 对接资料库 API

 测试资料查看流程


Week 3: AI问答与消息推送（2026-02-09 至 2026-02-15）


Day 1-3: AI问答模块


 开发AI聊天页面

 消息列表UI

 输入框与发送

 Markdown渲染

 对接AI对话 API

 多轮对话功能

 测试AI对话流程


Day 4-5: 消息推送


 订阅消息配置

 消息接收逻辑

 消息展示

 消息跳转


Day 6-7: 第一阶段测试


 功能测试

 Bug修复

 性能优化

 用户体验优化


Week 4: 海报生成与优化（2026-02-16 至 2026-02-22）


Day 1-3: 海报生成


 订单详情增加海报查看功能

 海报预览组件

 海报保存/分享

 对接海报生成 API


Day 4-7: 界面优化


 根据反馈调整UI

 优化交互动画

 优化错误提示

 性能优化

 兼容性测试


Week 5: 测试与上线（2026-02-23 至 2026-02-24）


Day 1-2: 全面测试


 功能回归测试

 兼容性测试

 性能测试

 Bug修复


Day 3: 上线准备


 生产环境配置

 提交小程序审核

 准备审核资料


🔐 安全与权限


资料库安全措施


1. 禁止下载实现

// PDF预览时禁用右键和长按
<web-view
  :src="pdfUrl"
  @message="handleMessage"
/>


/* 禁用文本选择 */
.no-select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 禁用长按 */
.no-long-press {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}


2. 水印实现

// 添加用户水印
const addWatermark = (canvas, text) => {
  const ctx = canvas.getContext('2d')
  ctx.font = '16px sans-serif'
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
  ctx.rotate(-20 * Math.PI / 180)

  for (let i = 0; i < canvas.width; i += 100) {
    for (let j = 0; j < canvas.height; j += 100) {
      ctx.fillText(text, i, j)
    }
  }
}


3. 权限控制

// 检查管理员权限
const checkAdminPermission = () => {
  const user = userStore.userInfo
  return user.role === 'admin'
}

// 管理员功能入口
<view v-if="isAdmin">
  <button @click="goToAdminPanel">管理后台</button>
</view>


🧪 测试要点


功能测试清单


计划书模块


 表单验证（必填项、格式验证）

 产品和缴费年限联动

 订单提交成功

 订单列表展示

 订单详情查看

 PDF预览功能

 海报查看与分享


资料库模块


 分类导航

 资料列表展示

 搜索功能

 PDF在线预览

 视频播放

 图片查看

 禁止下载功能验证


 无法右键保存

 无法长按保存

 无下载按钮


AI问答模块


 消息发送

 AI响应接收

 多轮对话

 Markdown渲染


其他功能


 微信登录

 消息推送接收

 权限控制


性能测试


 首屏加载时间 < 2秒

 列表滚动流畅（60fps）

 图片懒加载

 大文件加载优化


兼容性测试


 iOS微信

 Android微信

 不同屏幕尺寸

 不同微信版本


📝 开发注意事项


1. 使用现有架构


认证系统已实现，直接使用 authRedirect.js 和 request.js

导航使用 useGo Hook
状态管理使用 Pinia
HTTP请求使用 request.js（支持401自动刷新）


2. 遵循项目规范


API定义使用 buildApiUrl 方法
路径别名使用 @/ 前缀
样式使用 Less，注意设计宽度规则
NutUI组件自动导入，无需手动import


3. 性能优化


列表使用虚拟列表（订单、资料）
图片使用懒加载
大文件分片上传
防抖、节流优化（搜索、滚动）


4. 用户体验


Loading状态明确
错误提示友好
空状态提示
网络错误处理（弱网络提示）


5. 代码质量


组件拆分合理
代码复用（公共组件、composables）
注释清晰
遵循 ESLint 规范


🎯 里程碑与验收标准


第一阶段验收（2026-02-15）


 计划书提交流程完整可用

 资料库查看功能正常（含禁止下载）

 AI问答功能正常

 消息推送功能正常


第二阶段验收（2026-02-24）


 海报生成功能正常

 所有功能测试通过

 性能达标

 兼容性测试通过

 小程序审核提交


📞 沟通与协作


每日进度同步


每天下班前提交当日进度
遇到问题及时沟通


代码审查


核心功能提交前进行代码审查
PR描述清晰，包含测试说明


测试反馈


每个阶段完成后提交测试报告
Bug及时修复和验证


文档版本: v1.0
最后更新: 2026-01-27
维护者: 前端开发团队