# projectAI

**Repository Path**: freewoman/project-ai

## Basic Information

- **Project Name**: projectAI
- **Description**: 用BLACKBOXAI生成的前端项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-28
- **Last Updated**: 2025-08-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 2 Dashboard Project

A comprehensive Vue 2 project with Vue Router, Vuex, Element UI, ECharts, and Axios integration.

## Features

- **Vue 2** - Progressive JavaScript framework
- **Vue Router** - Official router for Vue.js
- **Vuex** - State management pattern + library
- **Element UI** - Desktop UI component library
- **ECharts** - Powerful charting and visualization library
- **Axios** - Promise based HTTP client

## Project Structure

```
src/
├── components/          # Reusable components
│   ├── Modal.vue       # Modal dialog component
│   ├── ECharts.vue     # ECharts wrapper component
│   ├── Upload.vue      # File upload component
│   └── Table.vue       # Data table component
├── views/              # Page components
│   ├── Login.vue       # Login page
│   └── Home.vue        # Dashboard homepage
├── router/             # Vue Router configuration
│   └── index.js
├── store/              # Vuex store
│   └── index.js
├── App.vue             # Main app component
└── main.js             # Entry point
```

## Components Documentation

### Modal Component (`src/components/Modal.vue`)
A reusable modal dialog component with confirm/cancel actions.

**Props:**
- `title` (String) - Modal title
- `visible` (Boolean) - Controls modal visibility

**Events:**
- `confirm` - Emitted when confirm button is clicked
- `close` - Emitted when modal is closed

### ECharts Component (`src/components/ECharts.vue`)
Wrapper component for ECharts integration.

**Props:**
- `chartId` (String) - Unique ID for the chart container
- `width` (String) - Chart width (default: '100%')
- `height` (String) - Chart height (default: '400px')
- `options` (Object) - ECharts configuration options

### Upload Component (`src/components/Upload.vue`)
File upload component with drag & drop support.

**Features:**
- Drag and drop file upload
- File preview
- File removal
- File type validation

### Table Component (`src/components/Table.vue`)
Data table component with sorting and actions.

**Props:**
- `tableData` (Array) - Table data array
- `columns` (Array) - Column configuration
- `hasActions` (Boolean) - Show/hide action buttons

**Events:**
- `sort-change` - Emitted when sorting changes
- `edit` - Emitted when edit button is clicked
- `delete` - Emitted when delete button is clicked

## Pages

### Login Page (`src/views/Login.vue`)
Simple login form with username and password fields.

### Home Page (`src/views/Home.vue`)
Dashboard with:
- Line chart showing sales trend
- Pie chart showing user distribution
- Data table with sample statistics

## Installation

1. Install dependencies:
```bash
npm install
```

2. Start development server:
```bash
npm run serve
```

3. Build for production:
```bash
npm run build
```

## Usage

1. Navigate to `/login` to access the login page
2. Enter any credentials to login (simulated authentication)
3. Access the dashboard at `/` with charts and data tables

## Dependencies

- vue@^2.6.14
- vue-router@^3.5.4
- vuex@^3.6.2
- element-ui@^2.15.13
- echarts@^5.4.2
- vue-echarts@^6.5.3
- axios@^1.4.0

## Development Dependencies

- @vue/cli-service@^4.5.19
- vue-template-compiler@^2.6.14