XR Stock VSCode 扩展

一个功能丰富的 VSCode 扩展，为 XR Stock UI 组件库提供强大的开发支持。

🚀 功能特性

核心功能

• 📦 快速安装 - 一键安装 XR Stock 组件库到项目
• 🎨 代码生成器 - 智能生成 Vue、TypeScript、JavaScript 组件代码
• 👁️ 实时预览 - 在 VSCode 中预览 XR Stock 组件
• 🎭 主题切换 - 支持亮色、暗色、自动主题切换
• 📝 智能代码片段 - 提供丰富的代码模板和片段
• 📊 状态栏信息 - 实时显示 XR Stock 版本和状态

代码片段支持

• Vue 组件模板 - 快速创建 XR Stock Vue 组件
• TypeScript 接口 - 生成类型安全的接口定义
• JavaScript 函数 - 创建 XR Stock 功能函数
• 事件处理 - 智能生成事件处理代码
• 配置对象 - 快速创建 XR Stock 配置

🎯 使用方法

1. 安装 XR Stock 组件库

• 右键点击项目文件夹
• 选择 "安装 xr-stock"
• 组件库将自动复制到目标目录

2. 生成组件代码

• 右键点击项目文件夹
• 选择 "生成 XR Stock 组件"
• 输入组件名称和类型
• 自动生成完整的组件代码

3. 预览组件

• 打开 Vue 文件
• 右键选择 "预览组件"
• 在预览面板中查看组件效果

4. 使用代码片段

在 Vue、TypeScript、JavaScript 文件中输入以下前缀：

• xr-vue - 生成 Vue 组件模板
• xr-crane - 生成起重机组件
• xr-hall - 生成仓库组件
• xr-interface - 生成 TypeScript 接口
• xr-hook - 生成 Vue 组合式函数
• xr-api - 生成 API 服务类
• xr-func - 生成 JavaScript 函数
• xr-event - 生成事件处理函数
• xr-config - 生成配置对象

5. 命令面板功能

按 Ctrl+Shift+P 打开命令面板，输入 "XR Stock" 查看所有可用命令：

• XR Stock: 生成 XR Stock 组件
• XR Stock: 预览组件
• XR Stock: 切换主题
• XR Stock: 显示版本信息
• XR Stock: 打开文档

⚙️ 配置选项

在 VSCode 设置中搜索 "XR Stock" 可以配置以下选项：

• xr-stock.theme - 主题设置 (light/dark/auto)
• xr-stock.autoPreview - 自动预览组件
• xr-stock.showStatusBar - 在状态栏显示信息

🎨 主题支持

支持三种主题模式：

• Light - 亮色主题
• Dark - 暗色主题
• Auto - 跟随系统主题

📊 状态栏

状态栏会显示：

• XR Stock 版本信息
• 点击可查看详细功能说明

🔧 开发

构建扩展

cd src/vscode
npm run compile

打包扩展

vsce package

发布扩展

vsce publish

📝 更新日志

v0.1.7

• ✨ 新增代码生成器功能
• ✨ 新增组件预览功能
• ✨ 新增主题切换支持
• ✨ 新增智能代码片段
• ✨ 新增状态栏信息显示
• ✨ 新增配置选项支持
• 🐛 修复安装路径问题
• 📚 完善文档和使用说明

🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个扩展！

📄 许可证

MIT License

享受使用 XR Stock VSCode 扩展！ 🎉