# Smart Vocational Education - Unified User Center

## Project Introduction

The Smart Vocational Education Unified User Center is a user authentication and management system developed based on Vue 2.x, providing multiple login methods and comprehensive user information management features.

## Technology Stack

- **Framework**: Vue 2.6.14
- **UI Component Library**: Element UI 2.15.10
- **Router**: Vue Router 3.4.9
- **HTTP Client**: Axios 0.24.0
- **Style Preprocessor**: Sass
- **QR Code Generation**: qrcodejs2
- **Cloud Storage**: ali-oss

## Core Features

### 1. Multiple Login Methods

#### Account Password Login

- Support username/password login
- Integrated slider CAPTCHA protection
- Weak password detection and forced modification

#### Mobile Verification Code Login

- Support domestic and international mobile number login
- International area code selection (supports 200+ countries/regions worldwide)
- SMS verification code validation
- Multiple account management for one mobile number
- Automatic unbinding reminder for long-term inactive accounts

#### Email Login

- Support email verification code login
- Automatic registration for new users
- International user-friendly

#### QR Code Scan Login

- WeChat scan login
- App scan login
- Real-time status updates (not scanned/scanned/confirmed/expired)
- Automatic QR code refresh mechanism
- Automatic account binding after scanning

### 2. User Information Management

#### Complete User Information

- Identity type selection (Student/Teacher/Social Learner/Enterprise User/International Learner/International Teacher)
- Nationality selection (supports Chinese and English search)
- Remote search for organization name
- Real name input
- Employee/Student ID management
- Mandatory information completion on first login

#### Mobile Number Binding

- New user mobile number binding
- Existing account mobile number change
- Multiple account binding management
- International mobile number support

#### Password Management

- Forced modification of weak passwords
- Password strength validation (must contain three of four character types: uppercase, lowercase, numbers, special characters, length 8-50)
- First-time login password setup for users with empty passwords

### 3. Internationalization Support

- Chinese and English bilingual switching
- Component-level internationalization configuration
- Automatic browser language detection
- Nationality data in Chinese and English

### 4. Security Features

- Slider CAPTCHA protection
- Aliyun CAPTCHA integration
- Login status encryption
- Token authentication mechanism
- Multiple account security reminders
- Automatic unbinding of long-term inactive accounts

### 5. User Experience Optimization

- Responsive design, mobile support
- Smooth animation transitions
- Intelligent form validation
- Floating label input fields
- Alphabetical index for quick navigation
- Search highlighting

## Project Structure

```
src/
├── api/                          # API interfaces
│   └── resourceManagement/
│       ├── index.js             # Unified API export
│       └── login.js             # Login-related APIs
├── components/                   # Components
│   ├── userCenterLogin.vue      # Main login component
│   ├── QRCodeLogin.vue          # QR code login component
│   ├── mobileBinding.vue        # Mobile binding component
│   ├── improveInformation.vue   # Complete information component
│   ├── NationalitySelector.vue  # Nationality selector component
│   ├── agreement.vue            # User agreement component
│   ├── verifyComponents.vue     # Verification code component
│   ├── AliyunCaptchaModal.vue   # Aliyun CAPTCHA component
│   ├── TJCaptcha.vue            # Tencent CAPTCHA component
│   └── locales/                 # Internationalization language packs
│       ├── zh-CN.json           # Chinese language pack
│       └── en.json              # English language pack
├── utils/                        # Utility functions
│   ├── auth.js                  # Authentication utilities
│   ├── i18n.js                  # Internationalization utilities
│   ├── request.js               # Request wrapper
│   └── errorCode.js             # Error code definitions
├── App.vue                       # Root component
└── main.js                       # Entry file
```

## Installation

### 1. Clone the Project

```bash
git clone [project-url]
cd icve_tyyhzx
```

### 2. Install Dependencies

```bash
npm install
```

### 3. Configure Environment Variables

Create `.env.development` and `.env.production` files and configure the corresponding environment variables.

### 4. Start Development Server

```bash
npm run serve
```

### 5. Build for Production

```bash
npm run build
```

## Usage Instructions

### Use as Standalone Application

Run the project directly and access the login page to use all features.

### Use as Component Library

The project supports packaging as a component library and can be imported into other projects:

```javascript
import IcveSso from 'icve-sso';
import 'icve-sso/dist/icve-sso.css';

Vue.use(IcveSso);
```

### Component Usage Example

```vue
<template>
  <div>
    <!-- Login Component -->
    <userCenterLogin :loginModalShow="true" @loginSuccess="handleLoginSuccess" />
  </div>
</template>

<script>
import { userCenterLogin } from 'icve-sso';

export default {
  components: {
    userCenterLogin,
  },
  methods: {
    handleLoginSuccess(token) {
      console.log('Login successful, token:', token);
      // Handle login success logic
    },
  },
};
</script>
```

## API Documentation

### Login-related APIs

- `userLogin` - Account password login
- `smsLogin` - Mobile verification code login
- `smsLoginCaptcha` - Send SMS verification code
- `emailRegister` - Email login/registration
- `sendEmailMsg` - Send email verification code
- `generateQrCode` - Generate QR code
- `checkCodeStatus` - Check QR code status
- `loginBindWechat` - WeChat binding login

### User Information APIs

- `getInfo` - Get user information
- `saveUserInfo` - Save user information
- `BindMobileV2` - Bind mobile number
- `changeBindMobileV2` - Change bound mobile number

### Other APIs

- `gjList` - Get nationality list
- `getDw` - Get organization list
- `featuresBySource` - Get feature permissions
- `userEncrypt` - User information encryption

## Configuration

### Internationalization Configuration

Configure language packs in `src/utils/i18n.js`:

```javascript
import zhCN from '@/components/locales/zh-CN.json';
import en from '@/components/locales/en.json';

const messages = {
  cn: zhCN,
  en: en,
};
```

### Router Configuration

Configure routes in `src/router` according to business requirements.

## Browser Support

- Chrome (Recommended)
- Firefox
- Safari
- Edge
- IE 11+

## Contribution

1. Fork the repository
2. Create Feat_xxx branch
3. Commit your code
4. Create Pull Request

## Version History

### v0.0.31 (Current Version)

- ✨ Added QR code scan login feature
- ✨ Added nationality selector component
- ✨ Added mobile number binding feature
- ✨ Added complete user information feature
- ✨ Added email login feature
- ✨ Added multi-language support (Chinese and English)
- ✨ Added weak password detection and forced modification
- ✨ Added multiple account management feature
- 🐛 Fixed known issues
- 💄 Optimized UI interaction experience

## License

[Fill in according to actual project situation]

## Contact

If you have any questions or suggestions, please contact us through:

- Submit an Issue
- Send email to: [email address]
