# cmp_mobile

**Repository Path**: www.123as.com/cmp_mobile

## Basic Information

- **Project Name**: cmp_mobile
- **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-09-19
- **Last Updated**: 2025-09-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# CMP协作管理移动端前端项目

## 项目简介

CMP协作管理系统移动端是一个基于Vue 3 + Vite + Vant构建的现代化移动端应用，专为企业团队协作管理而设计。支持手机和平板设备，提供项目管理、任务分配、团队协作等核心功能。

## 技术栈

- **前端框架**: Vue 3 (Composition API)
- **构建工具**: Vite
- **UI组件库**: Vant 4.x (专为移动端设计)
- **状态管理**: Pinia
- **路由管理**: Vue Router 4
- **样式预处理**: Sass/SCSS
- **跨平台框架**: Capacitor 7.x (支持Android/iOS原生应用)
- **代码规范**: ESLint + Prettier
- **类型检查**: TypeScript (可选)

## 功能特性

### 核心功能
- 🏠 **首页概览**: 数据统计、快捷操作、最近活动
- 👤 **个人中心**: 用户信息、工作统计、设置管理
- 🔐 **用户认证**: 支持用户名密码和手机号验证码登录
- 📱 **移动端优化**: 专为移动设备设计的交互体验

### 移动端特性
- 📱 **响应式设计**: 完美适配手机和平板设备
- 🎨 **现代化UI**: 基于Vant组件库的美观界面
- ⚡ **性能优化**: Vite构建，快速加载
- 🔄 **下拉刷新**: 支持下拉刷新和上拉加载
- 📲 **原生应用**: 支持打包为Android APK和iOS应用
- 🔐 **安全登录**: 密码加密传输，支持验证码登录

## 项目结构

```
cmp_mobile/
├── src/                    # 源代码目录
│   ├── components/         # 公共组件
│   │   └── Layout/        # 布局组件
│   ├── views/             # 页面组件
│   ├── router/            # 路由配置
│   ├── stores/            # 状态管理
│   ├── api/               # API接口
│   ├── config/            # 配置文件
│   ├── utils/             # 工具函数
│   ├── styles/            # 样式文件
│   └── main.js            # 入口文件
├── android/               # Android原生项目
├── ios/                   # iOS原生项目
├── hooks/                 # Capacitor钩子脚本
│   ├── after_sync.js      # 同步后自动修复Java版本
│   └── before_run.js      # 运行前自动修复Java版本
├── dist/                  # 构建输出目录
├── public/                # 静态资源
├── capacitor.config.json  # Capacitor配置
├── fix-all-java-versions.js # Java版本自动修复脚本
├── run-android.js         # Android运行脚本
├── build-and-run-android.js # Android构建运行脚本
└── package.json           # 项目依赖
```

## 快速开始

### 🎉 成功构建Android APK

项目已成功配置并测试，可以正常构建Android APK文件。构建成功的APK位置：
- **Debug APK**: `android/app/build/outputs/apk/debug/app-debug.apk`
- **构建状态**: ✅ 构建成功，无Java版本冲突
- **测试环境**: Windows 10, JDK 17, Android SDK 35

### 🚀 一键打包Android应用
```bash
# 首次使用（初始化Android项目）
npm run build && npx cap add android && npx cap sync android

# 日常构建（推荐）
npm run cap:android

# 直接运行到设备
npm run cap:run:android

# 只构建APK文件（推荐）
npm run build:apk

# 构建并尝试安装到设备
npm run build:android
```

### 环境要求

#### 前端开发环境
- **Node.js**: >= 20.0.0 (推荐使用Node.js 20+以获得最佳Capacitor支持)
- **npm**: >= 8.0.0 或 yarn >= 1.22.0
- **Capacitor**: 7.4.3 (已集成)

#### Android开发环境
- **Android Studio**: 最新稳定版 (推荐 2024.1.1+)
- **Android SDK**: API Level 35 (Android 15)
- **最小支持版本**: API Level 23 (Android 6.0)
- **目标版本**: API Level 35 (Android 15)
- **Gradle**: 8.11.1
- **Android Gradle Plugin**: 8.7.2
- **JDK**: 17+ (推荐使用JDK 17或21)
- **Java**: 17+ (与JDK版本对应)

#### iOS开发环境 (仅macOS)
- **Xcode**: 15.0+ (用于iOS开发)
- **CocoaPods**: 最新版本

### 手动安装依赖
```bash
npm install
# 或
yarn install
```

### 启动开发服务器
```bash
npm run dev
# 或
yarn dev
```

### 构建生产版本
```bash
npm run build
# 或
yarn build
```

### 预览生产版本
```bash
npm run preview
# 或
yarn preview
```

## 移动应用打包

### Capacitor集成说明

项目已集成Capacitor 7.x，支持将Web应用打包为原生Android和iOS应用。

### 构建移动应用

#### 1. 构建并同步到原生项目
```bash
# 构建Web应用并同步到原生项目
npm run cap:build
```

#### 2. 打开Android项目
```bash
# 在Android Studio中打开项目
npm run cap:android
```

#### 3. 打开iOS项目 (仅macOS)
```bash
# 在Xcode中打开项目
npm run cap:ios
```

#### 4. 直接运行到设备
```bash
# 运行到Android设备
npm run cap:run:android

# 运行到iOS设备 (仅macOS)
npm run cap:run:ios
```

### 手动构建步骤

如果需要手动控制构建过程：

```bash
# 1. 构建Web应用
npm run build

# 2. 同步到原生项目
npx cap sync

# 3. 打开原生IDE
npx cap open android  # Android
npx cap open ios      # iOS (仅macOS)
```

### Android项目完整打包流程

#### 首次初始化Android项目
```bash
# 1. 构建Web应用
npm run build

# 2. 添加Android平台（首次使用）
npx cap add android

# 3. 同步配置到Android项目
npx cap sync android
```

#### 日常构建和更新
```bash
# 方法1：使用项目脚本（推荐）
npm run cap:build      # 构建并同步
npm run cap:android    # 构建、同步并打开Android Studio
npm run cap:run:android # 构建、同步并运行到设备
npm run build:apk      # 只构建APK文件（推荐）
npm run build:android  # 构建并尝试安装到设备

# 方法2：手动步骤
npm run build          # 构建Web应用
npx cap sync android   # 同步到Android项目
npx cap open android   # 打开Android Studio
```

#### 直接构建APK
```bash
# 方法1：使用项目脚本（推荐）
npm run build:apk      # 构建并同步，然后构建APK

# 方法2：手动构建
# 进入Android项目目录
cd android

# 构建Debug版本APK
.\gradlew assembleDebug

# 构建Release版本APK（需要签名配置）
.\gradlew assembleRelease
```

#### 检查设备和运行
```bash
# 列出可用的Android设备/模拟器
npx cap run android --list

# 运行到指定设备
npx cap run android --target="设备名称"

# 启用热重载开发模式
npx cap run android --livereload
```

### 环境配置

#### Android开发环境详细配置

##### 1. 安装Android Studio
- 下载并安装 [Android Studio](https://developer.android.com/studio)
- 推荐版本：2024.1.1 或更新版本

##### 2. 安装Android SDK
通过Android Studio SDK Manager安装：
- **Android SDK Platform 35** (Android 15)
- **Android SDK Build-Tools 35.0.0**
- **Android SDK Platform-Tools**
- **Android SDK Tools**

##### 3. 安装JDK
- **JDK 17** 或 **JDK 21** (推荐)
- 下载地址：[Oracle JDK](https://www.oracle.com/java/technologies/downloads/) 或 [OpenJDK](https://adoptium.net/)

##### 4. 配置环境变量
**Windows (PowerShell):**
```powershell
# 设置Android SDK路径
$env:ANDROID_HOME = "C:\Users\YourUsername\AppData\Local\Android\Sdk"
$env:PATH += ";$env:ANDROID_HOME\tools;$env:ANDROID_HOME\platform-tools"

# 设置JAVA_HOME (如果使用自定义JDK)
$env:JAVA_HOME = "C:\Program Files\Java\jdk-17"
```

**Windows (CMD):**
```cmd
set ANDROID_HOME=C:\Users\YourUsername\AppData\Local\Android\Sdk
set PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
set JAVA_HOME=C:\Program Files\Java\jdk-17
```

**macOS/Linux:**
```bash
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
export JAVA_HOME=/usr/lib/jvm/java-17-openjdk
```

##### 5. 验证安装
```bash
# 检查Android SDK
adb version

# 检查Java版本
java -version

# 检查Capacitor环境
npx cap doctor
```

#### iOS开发环境 (仅macOS)
1. 安装 [Xcode](https://developer.apple.com/xcode/)
2. 安装 Xcode Command Line Tools
3. 安装 CocoaPods：
   ```bash
   sudo gem install cocoapods
   ```

### 应用配置

#### 应用信息配置
在 `capacitor.config.json` 中配置应用基本信息：
```json
{
  "appId": "com.cmp.mobile",
  "appName": "CMP Mobile",
  "webDir": "dist",
  "server": {
    "androidScheme": "https"
  }
}
```

#### 权限配置
Android权限在 `android/app/src/main/AndroidManifest.xml` 中配置：
```xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
```

### 构建注意事项

1. **Node.js版本**: 确保使用Node.js 20+版本
2. **构建顺序**: 先构建Web应用，再同步到原生项目
3. **依赖更新**: 修改原生依赖后需要重新同步
4. **调试模式**: 开发时可以使用 `npx cap run android --livereload` 启用热重载
5. **签名配置**: 发布前需要配置应用签名
6. **Java版本**: 项目已配置自动修复Java版本冲突，确保使用JDK 17

### Java版本自动修复功能

项目已集成自动Java版本修复功能，解决Capacitor同步时可能出现的JDK版本冲突问题：

#### 自动修复机制
- **Capacitor Hooks**: 在`afterSync`和`beforeRun`时自动修复Java版本
- **构建脚本**: 所有构建命令都包含Java版本修复
- **手动修复**: 可随时运行`npm run fix:java`手动修复

#### 修复的文件
- `android/app/capacitor.build.gradle`
- `android/capacitor-cordova-android-plugins/build.gradle`
- `android/app/build.gradle`
- `android/gradle.properties`

#### 修复内容
- 将所有`JavaVersion.VERSION_21`改为`JavaVersion.VERSION_17`
- 优化Gradle配置，设置正确的JVM参数
- 清理空的Java配置项
- 设置本地Gradle缓存目录

#### 使用说明
```bash
# 手动修复Java版本
npm run fix:java

# 构建时自动修复（推荐）
npm run cap:build
npm run build:apk
npm run build:android
npm run cap:run:android
```

### 常见问题

#### 1. 构建失败
- 检查Node.js版本是否为20+
- 清理缓存：`npx cap clean`
- 重新安装依赖：`npm install`

#### 2. 同步失败
- 确保Web应用已构建：`npm run build`
- 检查capacitor.config.json配置
- 重新同步：`npx cap sync`

#### 3. Android构建问题
- 检查Android SDK版本
- 确保Android Studio已正确安装
- 检查Gradle配置
- **Java版本冲突**: 运行`npm run fix:java`自动修复
- **构建挂起**: 检查JDK版本，确保使用JDK 17
- **文件访问权限**: 确保临时目录有写入权限

#### 4. iOS构建问题 (仅macOS)
- 确保Xcode版本支持
- 检查CocoaPods安装
- 运行 `pod install` 安装依赖

### 实用命令参考

#### 项目维护命令
```bash
# 清理所有缓存和构建文件
npx cap clean

# 重新安装所有依赖
npm install

# 检查Capacitor版本
npx cap --version

# 检查已安装的平台
npx cap ls

# 更新Capacitor到最新版本
npm update @capacitor/core @capacitor/cli

# 修复Java版本问题（自动修复JDK版本冲突）
npm run fix:java
```

#### 调试和开发命令
```bash
# 启用详细日志输出
npx cap run android --verbose

# 在浏览器中预览（用于调试）
npm run preview

# 检查项目配置
npx cap doctor

# 查看可用插件
npx cap plugin:list

# 构建并同步（包含Java版本修复）
npm run cap:build

# 运行到Android设备（包含Java版本修复）
npm run cap:run:android
```

#### APK文件位置
构建完成后，APK文件位置：
- Debug版本：`android/app/build/outputs/apk/debug/app-debug.apk`
- Release版本：`android/app/build/outputs/apk/release/app-release.apk`

#### 快速验证命令
```bash
# 验证项目结构
ls -la android/app/src/main/assets/public/

# 检查Web资源是否同步
ls -la dist/

# 验证Capacitor配置
cat capacitor.config.json
```

### 环境要求总结

#### 📋 必需软件版本清单
| 软件 | 版本要求 | 说明 |
|------|----------|------|
| **Node.js** | >= 20.0.0 | 前端开发环境 |
| **npm** | >= 8.0.0 | 包管理器 |
| **Android Studio** | 2024.1.1+ | Android开发IDE |
| **Android SDK** | API 35 | Android 15 |
| **JDK** | 17+ | Java开发工具包 |
| **Gradle** | 8.11.1 | 构建工具 |
| **Android Gradle Plugin** | 8.7.2 | Android构建插件 |
| **Capacitor** | 7.4.3 | 跨平台框架 |

#### 🎯 项目配置详情
- **应用ID**: com.cmp.mobile
- **最小SDK版本**: 23 (Android 6.0)
- **目标SDK版本**: 35 (Android 15)
- **编译SDK版本**: 35 (Android 15)
- **应用版本**: 1.0 (versionCode: 1)

#### ⚠️ 重要注意事项
1. **JDK版本**: 必须使用JDK 17或21，不支持JDK 8
2. **Android SDK**: 需要API Level 35，确保安装最新的Android 15 SDK
3. **Gradle版本**: 项目使用Gradle 8.11.1，首次构建会自动下载
4. **内存要求**: 建议至少8GB RAM，Gradle构建需要足够内存
5. **存储空间**: 至少需要10GB可用空间用于SDK和构建文件

## 开发指南

### 代码规范
项目使用ESLint和Prettier进行代码规范检查：

```bash
# 代码检查
npm run lint

# 代码格式化
npm run format
```

### 响应式设计
项目支持多种设备尺寸：
- 手机: < 576px
- 大屏手机: 576px - 768px
- 平板: 768px - 992px
- 大屏平板: 992px - 1200px
- 桌面: > 1200px

### 组件开发
- 使用Vue 3 Composition API
- 遵循Vant组件设计规范
- 支持TypeScript类型检查
- 响应式设计优先

## 部署说明

### Web应用部署
构建完成后，将`dist`目录部署到静态服务器即可。

### 移动应用发布

#### Android应用发布

##### 方法1：使用Android Studio（推荐）
1. 在Android Studio中打开 `android` 目录
2. 配置签名密钥（Build → Generate Signed Bundle/APK）
3. 构建Release版本
4. 生成APK或AAB文件
5. 上传到Google Play Store

##### 方法2：命令行构建Release版本
```bash
# 1. 构建Web应用
npm run build

# 2. 同步到Android项目
npx cap sync android

# 3. 进入Android目录
cd android

# 4. 构建Release版本（需要先配置签名）
.\gradlew assembleRelease

# 5. APK文件位置
# android/app/build/outputs/apk/release/app-release.apk
```

##### 配置应用签名
在 `android/app/build.gradle` 中添加签名配置：
```gradle
android {
    signingConfigs {
        release {
            storeFile file('path/to/your/keystore.jks')
            storePassword 'your-store-password'
            keyAlias 'your-key-alias'
            keyPassword 'your-key-password'
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
```

#### iOS应用发布 (仅macOS)
1. 在Xcode中打开项目
2. 配置开发者账号和证书
3. 构建Archive版本
4. 上传到App Store Connect

### 移动端优化
- 启用Gzip压缩
- 配置缓存策略
- 使用CDN加速
- 启用HTTPS
- 优化启动画面
- 配置应用图标

## API集成

### 后端接口配置
项目已集成完整的API调用功能，支持：

#### 认证接口
- 用户名密码登录
- 手机号验证码登录
- 发送短信验证码
- 用户登出

#### 配置说明
在 `src/config/api.js` 中配置后端API地址：
```javascript
export const API_CONFIG = {
  BASE_URL: 'http://your-api-server.com/api',
  TIMEOUT: 10000,
  LOGIN: {
    PASSWORD: '/login/login',
    SEND_SMS: '/login/getPhoneVerifyCode',
    LOGOUT: '/login/logout'
  }
}
```

#### 安全特性
- 密码加密传输 (使用crypto-js)
- Token自动管理
- 请求/响应拦截器
- 错误统一处理

### 状态管理
使用Pinia进行状态管理：
- 用户认证状态
- 用户信息存储
- 登录状态持久化

## 浏览器支持

- iOS Safari >= 12
- Android Chrome >= 70
- 微信内置浏览器
- 其他现代移动浏览器

## 贡献指南

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

## 许可证

MIT License