{"id":31970675,"url":"https://github.com/winjs-dev/winjs-soybean-admin","last_synced_at":"2025-10-14T19:18:11.726Z","repository":{"id":308913847,"uuid":"1034523760","full_name":"winjs-dev/winjs-soybean-admin","owner":"winjs-dev","description":"WinJS 版本的 soybean-admin ","archived":false,"fork":false,"pushed_at":"2025-08-08T15:30:43.000Z","size":556,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-08T17:36:20.055Z","etag":null,"topics":["naive-ui","soybean-admin","winjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/winjs-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-08T14:26:04.000Z","updated_at":"2025-08-08T15:40:11.000Z","dependencies_parsed_at":"2025-08-08T17:48:59.700Z","dependency_job_id":null,"html_url":"https://github.com/winjs-dev/winjs-soybean-admin","commit_stats":null,"previous_names":["winjs-dev/winjs-soybean-admin"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/winjs-dev/winjs-soybean-admin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-soybean-admin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-soybean-admin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-soybean-admin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-soybean-admin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/winjs-dev","download_url":"https://codeload.github.com/winjs-dev/winjs-soybean-admin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-soybean-admin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279020655,"owners_count":26086895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["naive-ui","soybean-admin","winjs"],"created_at":"2025-10-14T19:18:10.284Z","updated_at":"2025-10-14T19:18:11.716Z","avatar_url":"https://github.com/winjs-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WinJS Soybean Admin\n\n🚀 一个基于 **WinJS** 重构的现代化企业级中后台管理系统，支持多构建工具（Vite 6.x、Webpack、Rsbuild）打包，提供完整的开发工具链和最佳实践配置。\n\n## 📋 项目简介\n\n本项目是基于流行的 [**SoybeanAdmin**](https://github.com/soybeanjs/soybean-admin) 使用 **WinJS** 框架进行重构的企业级中后台管理系统。项目保持了原有的业务逻辑和功能特性，同时利用 WinJS 的多构建工具支持能力，让开发者可以灵活选择 **Vite 6.x**、**Webpack 5** 或 **Rsbuild** 作为构建工具，满足不同项目场景的需求。\n\n### ✨ 重构亮点\n\n- 🔧 **多构建工具支持**：同一套代码，支持 Vite 6.x、Webpack、Rsbuild 三种构建方式\n- 📦 **Monorepo 架构**：采用 pnpm workspace 管理多包结构，代码复用性更强\n- 🏗️ **WinJS 加持**：享受 WinJS 元框架带来的开发体验提升\n- 🔄 **业务代码复用**：保持原有 SoybeanAdmin 的核心功能，无缝迁移\n\n## 🚀 技术栈\n\n### 核心框架\n\n- **Vue 3.x** - 渐进式 JavaScript 框架，使用 Composition API\n- **Vue Router 4.x** - 官方路由管理器，支持动态路由\n- **Pinia 3.x** - 新一代状态管理库\n- **WinJS 0.16.x** - 企业级前端开发框架，支持多构建工具\n\n### UI 组件库\n\n- **Naive UI 2.42.x** - 现代化 Vue 3 组件库\n- **UnoCSS** - 原子化 CSS 引擎\n- **@iconify/vue** - 图标组件库\n- **Echarts 5.6.x** - 数据可视化图表库\n\n### 构建工具（多选一）\n\n- **Vite 6.x** - 极速的前端构建工具（默认）\n- **Webpack** - 成熟的模块打包工具\n- **Rsbuild** - 基于 Rspack 的构建工具\n\n### 开发语言\n\n- **TypeScript 5.x** - 类型安全的 JavaScript 超集\n- **Sass/SCSS** - CSS 预处理器\n- **Less** - CSS 预处理器（可选）\n\n### 代码质量\n\n- **ESLint** - JavaScript/TypeScript 代码检查\n- **Prettier** - 代码格式化工具\n- **Stylelint** - CSS/Sass 样式检查\n- **F2ELint 3.x** - 前端代码规范工具\n- **Husky** - Git hooks 管理\n- **Lint-staged** - 暂存文件检查\n\n### 工程化工具\n\n- **PNPM** - 快速、节省磁盘空间的包管理器\n- **Cross-env** - 跨平台环境变量设置\n- **Commitlint** - Git 提交信息规范检查\n- **@sa/scripts** - 自定义脚本工具集\n\n## ✨ 功能特性\n\n### 🏗️ 架构特性\n- 🔧 **多构建工具支持** - 同一套代码支持 Vite、Webpack、Rsbuild 三种构建方式\n- 📦 **Monorepo 架构** - 基于 pnpm workspace 的多包管理\n- 🎯 **开箱即用** - 预配置完整的开发环境和工具链\n- 🔄 **模块联邦** - 支持微前端架构，便于大型项目拆分，基于 umijs 的 mfsu 实现\n\n### 🎨 界面功能\n- 📱 **响应式设计** - 完美适配桌面端、平板、移动端\n- 🌗 **主题切换** - 支持亮色/暗色主题，多种主题色配置\n- 🎭 **布局模式** - 支持垂直、水平、混合等多种布局模式\n- 📋 **标签页管理** - Chrome 风格的多标签页，支持缓存和拖拽\n- 🔍 **全局搜索** - 快速搜索菜单和功能\n- 🌐 **国际化** - 完整的中英文支持\n\n### 🛡️ 权限系统\n- 🔐 **用户认证** - 完整的登录、登出、token 刷新机制\n- 👥 **角色权限** - 基于角色的权限控制（RBAC）\n- 🛣️ **路由守卫** - 动态路由，根据权限生成菜单\n- 🔒 **页面权限** - 细粒度的页面访问控制\n\n### 🚀 开发体验\n- 🔍 **开发调试** - 完善的 Source Map 和热更新\n- 📊 **代码质量** - 集成 ESLint、Prettier、Stylelint 等工具\n- 🧪 **类型安全** - 完整的 TypeScript 类型定义\n- 🎨 **样式方案** - UnoCSS + Sass/SCSS，支持原子化 CSS\n- 🌐 **网络请求** - 基于 axios 的统一请求封装，支持拦截器\n- 🚀 **构建优化** - 代码分割、压缩、缓存策略\n\n## 🛠️ 快速开始\n\n### 环境要求\n\n- **Node.js** \u003e= 18.0.0\n- **PNPM** \u003e= 10（推荐）或 npm \u003e= 8\n\n### 安装依赖\n\n```bash\n# 推荐使用 pnpm（项目采用 monorepo 架构）\npnpm install\n\n# 或使用 npm\nnpm install\n```\n\n### 开发调试\n\n```bash\n# 启动开发服务器（默认使用 Vite）\npnpm dev\n\n# 或者\npnpm start\n```\n\n访问 http://localhost:8000 查看应用\n\n### 构建工具选择\n\n本项目支持三种构建工具，可根据项目需求选择：\n\n#### 1. 使用 Webpack（默认）\n```bash\n# 开发\npnpm dev\n\n# 构建\npnpm build\n\n# 预览\npnpm preview\n```\n\n#### 2. 使用 Vite\n```bash\n# 通过 WinJS 配置切换到 Vite\n# 在 .winrc.ts 中配置 vite: {}\n\n# 开发\npnpm dev\n\n# 构建\npnpm build\n```\n\n#### 3. 使用 Rsbuild\n```bash\n# 通过 WinJS 配置切换到 Rsbuild\n# 在 .winrc.ts 中注释 vite: {} 和 mfsu 相关，然后配置 rsbuild: {}\n\n# 开发\npnpm dev\n\n# 构建\npnpm build\n```\n\n### 项目初始化\n\n```bash\n# 项目初始化（安装后自动执行）\npnpm setup\n\n# 手动执行初始化\npnpm run setup\n```\n\n## 📁 项目结构\n\n```\nwinjs-soybean-admin/\n├── packages/                   # Monorepo 子包\n│   ├── alova/                 # Alova 请求库封装\n│   ├── axios/                 # Axios 请求库封装\n│   ├── color/                 # 颜色工具库\n│   ├── hooks/                 # 通用 Hooks\n│   ├── materials/             # 物料组件库\n│   ├── scripts/               # 脚本工具集\n│   ├── uno-preset/            # UnoCSS 预设\n│   └── utils/                 # 工具函数库\n├── src/                       # 主应用源码\n│   ├── assets/               # 静态资源\n│   │   ├── imgs/            # 图片资源\n│   │   └── js/              # JS 资源\n│   ├── components/           # 通用组件\n│   │   ├── advanced/        # 高级组件\n│   │   ├── common/          # 公共组件\n│   │   └── custom/          # 自定义组件\n│   ├── constants/           # 常量定义\n│   ├── hooks/               # 业务 Hooks\n│   │   ├── business/        # 业务逻辑 Hooks\n│   │   └── common/          # 通用 Hooks\n│   ├── icons/               # SVG 图标\n│   ├── layouts/             # 布局组件\n│   │   ├── base-layout/     # 基础布局\n│   │   ├── blank-layout/    # 空白布局\n│   │   └── modules/         # 布局模块\n│   ├── locales/             # 国际化\n│   │   └── langs/           # 语言包\n│   ├── plugins/             # 插件配置\n│   ├── router/              # 路由配置\n│   │   ├── elegant/         # 优雅路由\n│   │   ├── guard/           # 路由守卫\n│   │   └── routes/          # 路由定义\n│   ├── service/             # 服务层\n│   │   ├── api/             # API 接口\n│   │   └── request/         # 请求封装\n│   ├── store/               # 状态管理\n│   │   ├── modules/         # Store 模块\n│   │   └── plugins/         # Store 插件\n│   ├── styles/              # 样式文件\n│   │   ├── css/             # CSS 文件\n│   │   └── scss/            # SCSS 文件\n│   ├── theme/               # 主题配置\n│   ├── typings/             # 类型定义\n│   ├── utils/               # 工具函数\n│   ├── views/               # 页面组件\n│   │   ├── _builtin/        # 内置页面\n│   │   └── home/            # 主页\n│   ├── app.js               # 应用入口配置\n│   └── Main.vue             # 根组件\n├── .winrc.ts                  # WinJS 配置文件\n├── package.json               # 项目依赖配置\n├── pnpm-workspace.yaml        # PNPM 工作区配置\n├── tsconfig.json              # TypeScript 配置\n├── uno.config.ts              # UnoCSS 配置\n├── .eslintrc.js               # ESLint 配置\n├── .prettierrc.js             # Prettier 配置\n├── .stylelintrc.js            # Stylelint 配置\n├── f2elint.config.js          # F2ELint 配置\n├── commitlint.config.js       # Commitlint 配置\n└── README.md                  # 项目说明文档\n```\n\n## 🔧 开发指南\n\n### 代码规范\n\n项目集成了完整的代码规范工具链：\n\n```bash\n# 代码检查（ESLint + Stylelint）\npnpm lint\n\n# 代码格式化（Prettier）\npnpm format\n\n# F2ELint 扫描\npnpm f2elint-scan\n\n# F2ELint 修复\npnpm f2elint-fix\n\n# Git 提交（规范化提交信息）\npnpm commit\n\n# 中文提交信息\npnpm commit:zh\n```\n\n### WinJS 配置\n\n在 `.winrc.ts` 中进行项目配置：\n\n```typescript\nimport { defineConfig } from '@winner-fed/winjs';\n\nexport default defineConfig({\n  // 包管理器\n  npmClient: 'pnpm',\n\n  // 插件配置\n  plugins: ['@winner-fed/plugin-unocss', '@winner-fed/plugin-unicons'],\n\n  // 构建工具选择（可选：'webpack'(默认) | 'vite' | 'rsbuild'）\n  // vite: {}, // 开启 vite\n  // rsbuild: {}, // 开启 rsbuild\n\n  // 浏览器兼容性\n  targets: { chrome: 51, firefox: 54, safari: 10, edge: 15 },\n\n  // 压缩配置\n  jsMinifier: 'terser',\n  cssMinifier: 'cssnano',\n\n  // Sass 配置\n  sassLoader: {\n    api: 'modern-compiler',\n    sassOptions: {\n      silenceDeprecations: ['legacy-js-api']\n    },\n    additionalData: `@use \"@/styles/scss/global.scss\" as *;`\n  },\n\n  // 代理配置\n  proxy: {\n    '/api': {\n      target: 'http://localhost:3001',\n      changeOrigin: true\n    }\n  }\n});\n```\n\n### 环境变量\n\n项目支持多环境配置，在 `.env` 文件中定义：\n\n```bash\n# 应用标题\nVITE_APP_TITLE=Soybean Admin\n\n# 应用描述\nVITE_APP_DESC=A beautiful vue admin template\n\n# 服务端接口地址\nVITE_SERVICE_BASE_URL=http://localhost:3001\n\n# 路由历史模式\nVITE_ROUTER_HISTORY_MODE=history\n\n# 是否开启请求代理\nVITE_HTTP_PROXY=true\n```\n\n### 网络请求\n\n项目提供了多种请求库封装：\n\n#### 1. 使用 Axios（推荐）\n```typescript\nimport { request } from '@/service';\n\n// GET 请求\nconst data = await request.get\u003cApiResponse\u003e('/api/users');\n\n// POST 请求\nconst result = await request.post('/api/users', { name: 'John' });\n```\n\n#### 2. 使用 Alova\n```typescript\nimport { alova } from '@sa/alova';\n\n// 创建请求方法\nconst getUserList = () =\u003e alova.Get('/api/users');\n\n// 在组件中使用\nconst { data, loading } = useRequest(getUserList);\n```\n\n### 样式开发\n\n项目支持多种样式方案：\n\n#### 1. UnoCSS（原子化 CSS）\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"flex items-center justify-center h-screen bg-gray-100\"\u003e\n    \u003ch1 class=\"text-3xl font-bold text-blue-600\"\u003eHello World\u003c/h1\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n#### 2. Sass/SCSS\n```scss\n// 使用全局变量\n.header {\n  background-color: $primary-color;\n  height: $header-height;\n\n  // 使用 mixins\n  @include flex-center;\n}\n```\n\n#### 3. CSS Modules\n```vue\n\u003ctemplate\u003e\n  \u003cdiv :class=\"$style.container\"\u003e\n    \u003ch1 :class=\"$style.title\"\u003eTitle\u003c/h1\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle module\u003e\n.container {\n  padding: 20px;\n}\n\n.title {\n  font-size: 24px;\n  color: #333;\n}\n\u003c/style\u003e\n```\n\n## 📦 构建配置\n\n### 多构建工具对比\n\n| 特性 | Vite | Webpack | Rsbuild |\n|------|------|---------|---------|\n| 构建速度 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |\n| 热更新 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |\n| 生态成熟度 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |\n| 配置复杂度 | ⭐⭐⭐⭐⭐ | ⭐⭐ | ⭐⭐⭐⭐ |\n| 适用场景 | 现代项目 | 大型项目 | 性能优先 |\n\n### 浏览器兼容性\n\n```typescript\n// .winrc.ts\ntargets: {\n  chrome: 51,\n  firefox: 54,\n  safari: 10,\n  edge: 15\n}\n```\n\n### 构建优化策略\n\n- **代码分割**: 自动分析依赖关系，按需加载\n- **代码压缩**: Terser 压缩 JavaScript，cssnano 压缩 CSS\n- **Tree Shaking**: 自动移除未使用的代码\n- **模块联邦**: 支持微前端架构，便于大型项目拆分\n- **缓存策略**: 智能缓存，提升二次构建速度\n- **Source Map**: 开发环境启用，生产环境可配置\n\n### 性能优化\n\n```typescript\n// .winrc.ts 性能配置\nexport default defineConfig({\n  // 启用模块联邦缓存\n  mfsu: {\n    shared: {\n      vue: {\n        singleton: true,\n        eager: false\n      }\n    }\n  },\n\n  // 开发环境内联 CSS，生产环境提取\n  styleLoader: process.env.NODE_ENV === 'production' ? false : {},\n\n  // Source Map 配置\n  devtool: process.env.NODE_ENV === 'development' ? 'source-map' : false\n});\n```\n\n## 🔍 调试与测试\n\n### 开发调试\n\n- 🔥 **热更新支持**: 代码修改后自动刷新页面\n- 🗺️ **Source Map 调试**: 精确定位源代码位置\n- 📊 **详细的错误信息**: 清晰的错误堆栈信息\n- 🌐 **代理支持**: 本地开发代理后端接口\n- 📱 **移动端调试**: 支持移动端设备调试\n\n### 代码质量保障\n\n项目配置了多层代码质量保障体系：\n\n#### 1. 提交前检查\n```json\n// .lintstagedrc\n{\n  \"*.{js,jsx,ts,tsx,vue}\": [\"eslint --fix\", \"prettier --write\"],\n  \"*.{css,scss,less}\": [\"stylelint --fix\", \"prettier --write\"],\n  \"*.{json,md}\": [\"prettier --write\"]\n}\n```\n\n#### 2. Git Hooks\n- **pre-commit**: 提交前自动检查和修复代码\n- **commit-msg**: 检查提交信息是否符合规范\n\n#### 3. 编辑器集成\n- ESLint、Prettier、Stylelint 实时检查\n- TypeScript 类型检查\n- Vue 语法高亮和智能提示\n\n## 📚 相关文档\n\n### 核心技术栈\n- [WinJS 官方文档](https://winjs-dev.github.io/winjs-docs/) - 企业级前端开发框架\n- [Vue 3 官方文档](https://vuejs.org/) - 渐进式 JavaScript 框架\n- [Pinia 文档](https://pinia.vuejs.org/) - Vue 状态管理库\n- [Vue Router 4 文档](https://router.vuejs.org/) - Vue 官方路由\n\n### UI 和样式\n- [Naive UI 文档](https://www.naiveui.com/) - Vue 3 组件库\n- [UnoCSS 文档](https://unocss.dev/) - 原子化 CSS 引擎\n- [Iconify 文档](https://iconify.design/) - 图标库\n\n### 构建工具\n- [Vite 文档](https://vitejs.dev/) - 下一代前端构建工具\n- [Webpack 文档](https://webpack.js.org/) - 模块打包工具\n- [Rsbuild 文档](https://rsbuild.dev/) - 基于 Rspack 的构建工具\n\n### 开发工具\n- [TypeScript 文档](https://www.typescriptlang.org/) - 类型安全的 JavaScript\n- [ESLint 文档](https://eslint.org/) - 代码检查工具\n- [Prettier 文档](https://prettier.io/) - 代码格式化工具\n\n## 🤝 贡献指南\n\n### 开发流程\n\n1. Fork 本仓库\n2. 创建特性分支：`git checkout -b feature/amazing-feature`\n3. 提交更改：`git commit -m 'feat: add amazing feature'`\n4. 推送分支：`git push origin feature/amazing-feature`\n5. 提交 Pull Request\n\n### 提交规范\n\n项目使用 [Conventional Commits](https://conventionalcommits.org/) 规范：\n\n```bash\n# 功能\nfeat: 添加新功能\n\n# 修复\nfix: 修复 bug\n\n# 文档\ndocs: 更新文档\n\n# 样式\nstyle: 代码格式化\n\n# 重构\nrefactor: 代码重构\n\n# 测试\ntest: 添加测试\n\n# 构建\nbuild: 构建相关更改\n```\n\n## 🆘 问题反馈\n\n如果您在使用过程中遇到问题，请通过以下方式获取帮助：\n\n1. 📖 **查阅文档**: 首先查看相关技术栈的官方文档\n2. 🐛 **提交 Issue**: [GitHub Issues](https://github.com/winjs-dev/winjs-soybean-admin/issues)\n3. 💬 **讨论区**: [GitHub Discussions](https://github.com/winjs-dev/winjs-soybean-admin/discussions)\n4. 📧 **邮件联系**: lwbhtml@163.com\n\n## 📄 许可证\n\n本项目基于 [MIT](./LICENSE) 许可证开源。\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**⭐ 如果这个项目对您有帮助，请给它一个 Star！**\n\n**Happy Coding! 🎉**\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinjs-dev%2Fwinjs-soybean-admin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwinjs-dev%2Fwinjs-soybean-admin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinjs-dev%2Fwinjs-soybean-admin/lists"}