# 智能协同云图库平台-前端 **Repository Path**: normalbykai/smart-team-frontend ## Basic Information - **Project Name**: 智能协同云图库平台-前端 - **Description**: 智能协同云图库平台-前端，专注于提供高效的云端协同绘图与数据可视化解决方案，支持多用户实时协作。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-09-17 - **Last Updated**: 2025-09-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 图片管理系统前端开发文档 ## 项目概述 这是一个基于Vue 3 + TypeScript + Vite的图片管理系统前端项目，主要功能包括图片上传、管理、空间分析、用户管理等。 ## 技术栈 - **框架**: Vue 3.5.13 - **语言**: TypeScript - **构建工具**: Vite 6.2.4 - **UI组件库**: Ant Design Vue 4.2.6 - **状态管理**: Pinia 3.0.1 + pinia-plugin-persistedstate 4.4.1 - **路由**: Vue Router 4.5.0 - **HTTP客户端**: Axios 1.8.4 - **图表**: ECharts 5.6.0 + echarts-wordcloud 2.1.0 - **图片处理**: vue-cropper 1.1.4 - **懒加载**: vue3-lazyload 0.3.8 ## 项目结构 ``` src/ ├── access/ # 权限管理 │ ├── index.ts # 全局权限校验 │ └── routes.ts # 路由权限配置 ├── api/ # API接口 │ ├── fileTestController.ts │ ├── huancunjiekou.ts │ ├── pictureController.ts │ ├── spaceAnalyzeController.ts │ ├── spaceController.ts │ ├── spaceUserController.ts │ ├── typings.d.ts # API类型定义 │ └── userController.ts ├── assets/ # 静态资源 │ ├── images/ # 图片资源 │ └── main.css # 全局样式 ├── components/ # 公共组件 │ ├── analyze/ # 分析组件 │ │ ├── SpaceCategoryAnalyze.vue │ │ ├── SpaceRankAnalyze.vue │ │ ├── SpaceSizeAnalyze.vue │ │ ├── SpaceTagAnalyze.vue │ │ ├── SpaceUsageAnalyze.vue │ │ └── SpaceUserAnalyze.vue │ ├── BatchEditModal.vue │ ├── EditUserInfoModal.vue │ ├── GlobalHeader.vue │ ├── GlobalSider.vue │ ├── ImageCropper.vue │ ├── MyTag.vue │ ├── NormalTag.vue │ ├── PictureCropper.vue │ ├── PictureList.vue │ ├── PictureUpload.vue │ └── ShareModal.vue ├── constants/ # 常量定义 │ ├── picture.ts │ └── space.ts ├── enums/ # 枚举定义 │ ├── AccessEnum.ts │ └── PictureReviewEnum.ts ├── icon/ # 图标资源 ├── layouts/ # 布局组件 │ └── BasicLayout.vue # 基础布局 ├── page/ # 页面组件 │ ├── admin/ # 管理页面 │ ├── HomePage.vue # 首页 │ ├── NoAuthPage.vue # 无权限页面 │ ├── picture/ # 图片相关页面 │ ├── space/ # 空间管理页面 │ ├── test/ # 测试页面 │ └── user/ # 用户相关页面 ├── router/ # 路由配置 │ ├── index.ts # 路由主文件 │ └── modules/ # 路由模块 │ ├── admin.ts │ ├── common.ts │ ├── picture.ts │ └── user.ts ├── stores/ # 状态管理 ├── utils/ # 工具函数 ├── App.vue # 根组件 └── main.ts # 入口文件 ``` ## 核心功能模块 ### 1. 图片管理 - 图片上传组件 (`PictureUpload.vue`) - 图片列表展示 (`PictureList.vue`) - 图片裁剪 (`PictureCropper.vue`) - 批量编辑 (`BatchEditModal.vue`) ### 2. 空间管理 - 空间分析组件 (各种分析图表) - 空间用户管理 - 空间权限控制 ### 3. 用户系统 - 用户信息编辑 - 权限管理 - 用户认证 ### 4. 数据分析 - 空间使用分析 - 用户行为分析 - 标签分析 - 分类统计 ## 开发环境配置 ### 环境变量 - `.env.development`: 开发环境配置 - `.env.production`: 生产环境配置 ### 脚本命令 ```bash # 开发模式 pnpm dev # 默认开发模式 pnpm normal-dev # 开发环境模式 pnpm normal-production # 生产环境开发模式 # 构建 pnpm build # 类型检查 + 构建 pnpm noraml-build-production # 生产环境构建 pnpm noraml-build-dev # 开发环境构建 # 代码质量 pnpm lint # ESLint检查并修复 pnpm format # Prettier格式化 pnpm type-check # TypeScript类型检查 # OpenAPI生成 pnpm openapi # 生成API接口代码 ``` ## 技术特性 ### 1. 权限管理 - 基于路由的权限控制 - 全局权限校验 - 组件级权限展示 ### 2. 状态管理 - Pinia持久化存储 - 模块化状态管理 - 类型安全的Store ### 3. 组件设计 - 高复用性组件 - 职责单一原则 - Props/Emits类型定义 ### 4. 代码规范 - ESLint + Prettier统一代码风格 - TypeScript严格类型检查 - 统一的错误处理 ## 开发建议 ### 1. 组件开发 - 遵循Vue 3 Composition API规范 - 使用`