# 红色文化宣传小程序

> 基于 Taro 4.0 + React + TypeScript 构建的多端应用，主要面向微信小程序平台，集成红色文化宣传和AI问答功能

[![Taro](https://img.shields.io/badge/Taro-4.0.8-blue?style=flat-square&logo=taro)](https://taro.aotu.io/)
[![React](https://img.shields.io/badge/React-18.3.1-61DAFB?style=flat-square&logo=react)](https://reactjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.7.2-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
[![NutUI](https://img.shields.io/badge/NutUI-2.7.4-orange?style=flat-square)](https://nutui.jd.com/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind%20CSS-3.4.17-38B2AC?style=flat-square&logo=tailwind-css)](https://tailwindcss.com/)

## 🌟 项目特色

- **🚀 多端开发** - 基于Taro框架，一套代码多端运行（微信小程序、H5、支付宝小程序等）
- **📱 小程序优化** - 专为微信小程序优化，用户体验流畅
- **🎨 现代UI组件** - 集成NutUI组件库，界面美观统一
- **🔴 红色文化主题** - 专注红色文化宣传，内容丰富
- **🤖 AI问答功能** - 集成智能问答系统，提供互动体验
- **🔧 CMS集成** - 与WebSoft CMS系统深度集成，内容动态管理
- **📊 数据可视化** - 集成ECharts图表组件，数据展示直观
- **🔐 用户系统** - 完整的用户注册、登录、个人中心功能

## 🏗️ 技术架构

### 前端技术栈
- **框架**: Taro 4.0.8 (多端统一开发框架)
- **语言**: TypeScript 5.7.2
- **UI库**: React 18.3.1
- **组件库**: NutUI React Taro 2.7.4
- **样式**: Tailwind CSS 3.4.17 + Sass
- **图表**: ECharts Taro3 React
- **构建工具**: Webpack 5.78.0
- **代码规范**: ESLint + TypeScript ESLint

### 后端集成
- **API服务**: https://cms-api.websoft.top/api
- **租户ID**: 10556
- **内容管理**: WebSoft CMS系统
- **用户认证**: JWT Token认证
- **多租户**: 支持多租户架构

## 📁 项目结构

```
template-10556/
├── src/
│   ├── pages/                 # 页面目录
│   │   ├── index/            # 首页
│   │   │   ├── index.tsx     # 首页主组件
│   │   │   ├── Banner.tsx    # 轮播图组件
│   │   │   ├── Menu.tsx      # 菜单组件
│   │   │   └── Login.tsx     # 登录组件
│   │   ├── study/            # AI问答页面
│   │   ├── user/             # 用户中心页面
│   │   ├── article/          # 文章页面
│   │   └── kefu/             # 客服页面
│   ├── passport/             # 用户认证模块
│   │   ├── login.tsx         # 登录页面
│   │   ├── register.tsx      # 注册页面
│   │   ├── forget.tsx        # 忘记密码
│   │   └── setting.tsx       # 设置页面
│   ├── user/                 # 用户相关页面
│   │   ├── profile/          # 个人资料
│   │   ├── company/          # 企业信息
│   │   ├── setting/          # 用户设置
│   │   └── userVerify/       # 用户认证
│   ├── components/           # 公共组件
│   │   ├── Header.tsx        # 头部组件
│   │   ├── TabBar.tsx        # 底部导航
│   │   └── Gap.tsx           # 间距组件
│   ├── api/                  # API 接口封装
│   │   ├── cms/              # CMS相关API
│   │   ├── system/           # 系统管理API
│   │   ├── layout/           # 布局相关API
│   │   └── passport/         # 用户认证API
│   ├── utils/                # 工具函数
│   │   ├── request.ts        # HTTP请求封装
│   │   ├── config.ts         # 配置文件
│   │   ├── common.ts         # 通用工具
│   │   └── server.ts         # 服务端工具
│   ├── assets/               # 静态资源
│   │   └── tabbar/           # 底部导航图标
│   ├── app.config.ts         # 应用配置
│   ├── app.scss              # 全局样式
│   └── app.ts                # 应用入口
├── config/                   # 环境配置
│   ├── dev.ts                # 开发环境配置
│   ├── prod.ts               # 生产环境配置
│   └── index.ts              # 配置入口
├── dist/                     # 构建输出目录
├── types/                    # TypeScript类型定义
├── project.config.json       # 微信小程序配置
├── package.json              # 项目依赖
├── tailwind.config.js        # Tailwind配置
├── tsconfig.json             # TypeScript配置
└── README.md                 # 项目说明
```

## 🚀 快速开始

### 环境要求

- Node.js 18.0 或更高版本
- npm 或 pnpm 包管理器
- 微信开发者工具（用于小程序开发调试）

### 安装依赖

```bash
# 克隆项目
git clone <repository-url>
cd template-10556

# 安装依赖（推荐使用pnpm）
pnpm install
# 或使用npm
npm install
```

### 项目配置

项目配置文件位于 `src/utils/config.ts`：

```typescript
// 租户ID
export const TenantId = 10556;
// 接口地址
export const BaseUrl = 'https://cms-api.websoft.top/api';
// 当前版本
export const Version = 'v3.0.8';
// 版权信息
export const Copyright = 'WebSoft Inc.';
```

### 开发调试

```bash
# 微信小程序开发
npm run dev:weapp

# H5开发
npm run dev:h5

# 支付宝小程序开发
npm run dev:alipay

# 其他平台
npm run dev:swan    # 百度小程序
npm run dev:tt      # 字节跳动小程序
npm run dev:qq      # QQ小程序
npm run dev:jd      # 京东小程序
```

### 构建生产版本

```bash
# 构建微信小程序
npm run build:weapp

# 构建H5
npm run build:h5

# 构建其他平台
npm run build:alipay
npm run build:swan
npm run build:tt
```

## 🎨 功能模块

### 主要页面

1. **首页** - 红色文化宣传主页，包含轮播图、菜单导航等
2. **AI问答** - 智能问答系统，提供红色文化相关知识问答
3. **用户中心** - 个人信息管理、设置等功能
4. **文章页面** - 红色文化文章展示和阅读
5. **客服页面** - 在线客服功能

### 用户认证模块

- **登录注册** - 支持手机号登录、短信验证码登录
- **忘记密码** - 密码重置功能
- **用户设置** - 个人信息修改、密码修改
- **协议页面** - 用户协议和隐私政策

### 底部导航

- **首页** - 主要内容展示
- **AI问答** - 智能问答功能
- **我的** - 用户个人中心

## 🔧 核心功能

### 多端适配

- **微信小程序**: 主要目标平台，完整功能支持
- **H5页面**: 支持在浏览器中运行
- **其他小程序**: 支持支付宝、百度、字节跳动等小程序平台
- **响应式设计**: 自适应不同屏幕尺寸

### CMS内容管理

- **动态内容**: 从WebSoft CMS系统动态获取内容
- **文章管理**: 支持文章发布、分类、评论等功能
- **用户管理**: 完整的用户注册、认证、权限管理
- **多租户**: 支持多租户架构，租户ID: 10556

### API集成

- **统一封装**: 完整的API请求封装，支持TypeScript类型安全
- **错误处理**: 统一的错误处理和用户提示机制
- **认证管理**: JWT Token自动管理和刷新
- **请求拦截**: 自动添加租户ID和认证信息

## 🛠️ 开发指南

### 添加新页面

1. 在 `src/pages` 目录下创建新页面文件夹
2. 创建页面组件和配置文件

```typescript
// src/pages/new-page/new-page.tsx
import { useEffect } from 'react';
import Taro from '@tarojs/taro';

const NewPage = () => {
  useEffect(() => {
    Taro.setNavigationBarTitle({
      title: '新页面'
    });
  }, []);

  return (
    <div className="p-4">
      <h1>新页面</h1>
    </div>
  );
};

export default NewPage;
```

```typescript
// src/pages/new-page/new-page.config.ts
export default definePageConfig({
  navigationBarTitleText: '新页面'
});
```

3. 在 `src/app.config.ts` 中注册页面路由

### 创建新组件

```typescript
// src/components/NewComponent.tsx
import React from 'react';

interface NewComponentProps {
  title: string;
  content: string;
}

const NewComponent: React.FC<NewComponentProps> = ({ title, content }) => {
  return (
    <div className="p-4">
      <h2 className="text-xl font-bold">{title}</h2>
      <p>{content}</p>
    </div>
  );
};

export default NewComponent;
```

### API调用示例

```typescript
// 获取网站信息
import { getSiteInfo } from '@/api/layout';

const siteInfo = await getSiteInfo();
console.log(siteInfo.websiteName);

// 使用封装的请求方法
import { request } from '@/utils/request';

const result = await request({
  url: '/cms/article/list',
  method: 'GET',
  data: {
    page: 1,
    limit: 10
  }
});
```

## 📱 部署指南

### 微信小程序部署

1. 使用微信开发者工具打开项目
2. 构建小程序版本：`npm run build:weapp`
3. 在微信开发者工具中预览和上传代码
4. 在微信公众平台提交审核

### H5部署

1. 构建H5版本：`npm run build:h5`
2. 将 `dist` 目录部署到Web服务器
3. 配置域名和HTTPS证书

### 其他小程序平台

```bash
# 支付宝小程序
npm run build:alipay

# 百度小程序
npm run build:swan

# 字节跳动小程序
npm run build:tt
```

## 🔍 性能优化

- **代码分割**: Taro自动按页面分割代码
- **图片优化**: 使用Taro Image组件优化图片加载
- **缓存策略**: 合理的API请求缓存
- **包体积优化**: 按需引入组件和工具库
- **懒加载**: 页面和组件懒加载

## 🤝 贡献指南

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) 文件了解详情

## 📞 联系我们

- **官网**: https://websoft.top
- **邮箱**: contact@websoft.top
- **电话**: 0771-5386339
- **地址**: 广西南宁市

## 🙏 致谢

感谢以下开源项目：

- [Taro](https://taro.aotu.io/) - 多端统一开发框架
- [React](https://reactjs.org/) - 用户界面库
- [NutUI](https://nutui.jd.com/) - 移动端组件库
- [TypeScript](https://www.typescriptlang.org/) - JavaScript的超集
- [Tailwind CSS](https://tailwindcss.com/) - 实用优先的CSS框架
- [ECharts](https://echarts.apache.org/) - 数据可视化图表库

---

**WebSoft Inc.** - 红色文化宣传小程序 🚀