UMAS Project Helper - VSCode Extension

一个专注于前端项目管理的VSCode扩展，提供现代化且响应式的用户界面，旨在简化前端开发工作流程。

🚀 主要特性

💻 现代化界面体验

• 基于React 18 + Vite构建的现代化WebView UI
• TailwindCSS样式框架，支持VSCode主题自适应
• 响应式设计，完全适配VSCode面板高度约束
• 流畅的动画效果和用户体验
• VSCode主题变量集成，完美支持亮暗主题切换
• 🌐 多语言支持

🛠️ 技术架构

• 构建工具: 从定制 React Scripts 迁移至 Vite，显著提升构建性能并支持代码无分包打包
• 样式处理: TailwindCSS 与 PostCSS 集成，通过 tailwind.config.js 实现 VSCode 主题变量完美适配
• 优化策略: CSS 文件仅包含实际使用的工具类，优化后的输出轻量化且高效

📊 实时状态监控

插件提供侧边栏视图，包含实时状态指示器：

• 🔐 登录状态: 检查UMAS平台认证状态
• 📦 依赖状态: 监控node_modules和package.json完整性
• 📖 文档状态: 验证README和相关文档文件
• ⚙️ 环境状态: 验证Node.js、npm和其他必要的开发工具

⚙️ 设置面板

插件提供完整的设置界面，支持：

• 🔄 自动升级: 启用/禁用UMAS CLI自动升级
• 🧪 Beta版本: 允许更新到beta版本
• 📦 NPM Registry: 自定义包仓库地址
• 📝 用户反馈: 一键填写调查问卷

🎯 快速操作按钮

第一行主要功能（优先级较高）：

• 🔄 Refresh: 刷新所有项目状态
• 🚀 New Project: 使用模板创建新项目
• 📦 Install Deps: 一键安装项目依赖

第二行高级功能：

• ✅ Validate: 全面验证项目健康状态
• 🚢 Deploy: 多平台部署支持

🔍 智能项目验证

• 依赖检查: 验证package.json和实际node_modules
• 文档验证: 检查README.md等文档文件完整性
• 环境验证: 工具链和系统环境检测
• 统一报告: 全局输出渠道(OutputChannel)中显示详细结果

Installation

1. Open VSCode
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "UMAS Project Helper"
4. Click Install
5. Reload VSCode

Usage

🎯 使用方法

插件激活条件

• 插件在VSCode启动完成后自动激活
• 当工作区包含package.json文件时，侧边栏会显示"UMAS Helper"面板
• 如果工作区没有package.json，插件功能将不可用

项目状态监控

1. 打开前端项目: 在包含package.json的VSCode工作区中
2. 自动监测: 插件自动识别并提供状态面板，显示：
   • 🔐 登录认证状态（连接UMAS平台）
   • 📦 依赖安装状态（package.json vs node_modules）
   • 📖 文档完整性（README.md等）
   • ⚙️ 开发环境状态（Node.js、npm等工具）

🔐 快速认证流程

当检测到用户未登录UMAS平台时：

2. 一键登录: 点击认证按钮，插件将自动执行UMAS登录流程
3. 浏览器授权: 系统将打开浏览器完成平台认证
4. Registry配置: 可通过设置面板一键复制NPM Registry URL

快速操作按钮

第一排按钮 (优先级操作)：

• 🔄 Refresh: 重新检查所有项目状态
• 🚀 New Project: 从模板初始化新项目
• 📦 Install Deps: 自动安装项目依赖

第二排按钮 (高级操作)：

• ✅ Validate: 执行全面项目验证
• ⚙️ Settings: 打开设置面板
• 🚢 Deploy: 多平台部署选项

📋 项目验证功能

验证项目时，插件会：

1. 依赖验证: 检查package.json文件和node_modules目录
2. 文档验证: 查找README.md等文档文件
3. 环境验证: 验证Node.js、npm等必要工具
4. 结果显示: 在UMAS Project Helper输出通道中显示详细结果

输出结果示例:

📋 **Project Validation Results**

**Overall Status:** ✅ PASSED

**Dependencies:** Found 145 dependencies and 12 dev dependencies
**Documentation:** Found 2 documentation files
**Environment:** Environment valid: node, npm, git available

Last updated: 2024-01-15 14:30:25

🚀 项目初始化和部署

初始化项目:

1. 点击"New Project"按钮
2. 选择项目模板
3. 指定项目存放位置
4. 插件自动创建项目结构和安装依赖

部署到UMAS平台:

1. 点击"Deploy"按钮
2. 选择部署类型（构建/Github Pages/Netlify/Vercel/自定义）
3. 插件自动配置并执行部署流程

📜 可用命令

插件提供以下VSCode命令：

• umas-project-helper.checkLogin - 检查UMAS登录状态
• umas-project-helper.checkStatus - 检查并刷新项目状态
• umas-project-helper.initProject - 从模板初始化新项目
• umas-project-helper.installDeps - 安装项目依赖包
• umas-project-helper.validate - 执行全面项目验证
• umas-project-helper.deploy - 部署项目到指定平台
• umas-project-helper.settingsButtonClicked - 打开设置面板
• umas-project-helper.updateUmasCli - 更新UMAS CLI到最新版本

🔧 配置

插件设置

通过VSCode设置面板(Ctrl+,)搜索"UMAS Project Helper"进行配置：

• 自动升级: 启用/禁用UMAS CLI自动升级功能
• 允许Beta版本: 允许更新到UMAS CLI的beta版本
• NPM Registry: 自定义NPM包仓库地址
• 自动状态检查: 在启动时自动检查项目状态
• 默认模板: 选择默认的项目初始化模板
• 自定义模板路径: 指定自定义模板存放目录

激活条件

插件在以下情况下激活：

• VSCode启动完成后(onStartupFinished)
• 工作区包含package.json文件时(workspaceContains:package.json)

📋 环境要求

系统要求

• VSCode: >= 1.80.0 (扩展运行环境)
• Node.js: >= 16.0.0 (项目开发环境)
• npm: >= 8.0.0 (包管理器)

支持的操作系统

• Windows 10/11
• macOS 10.15+
• Linux (Ubuntu 18.04+, CentOS 7+, etc.)

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you encounter any issues or have questions:

1. Check the Issues page on GitHub
2. Create a new issue with detailed information
3. Include VSCode version, extension version, and error logs

📋 更新历史

有关完整的版本历史和变更记录，请查看 CHANGELOG.md

🚀 未来计划

🔥 高优先级功能

• [ ] 项目模板管理系统 (React/Vue/Vanilla模板)
• [ ] 自定义模板创建向导
• [ ] 高级部署配置 (CI/CD集成)

⚡ 中优先级优化

• [ ] NPM Proxy Registry 自动配置
• [ ] 项目分析报告 (依赖树/包大小/安全扫描)
• [ ] 多语言支持 (中文/英文界面切换)

🎯 未来远期功能

• [ ] 团队协作特性 (共享配置/模板)
• [ ] 智能代码重构建议
• [ ] 集成流行前端工具 (ESLint/Prettier/Vite等)

Made with ❤️ for frontend developers