@winjs-dev/create-win 1.0.0-alpha.2

package/templates/pc/.prettierignore

@@ -0,0 +1,13 @@
+**/*.svg
+output.js
+src/assets/
+dist/**
+public/**
+src/services/RESTFULURL.js
+src/icons
+src/.win
+src/.win-production
+.npmrc
+.yarnrc
+node_modules
+

package/templates/pc/.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  ...require('@winner-fed/prettier-config-win'),
+  plugins: ['prettier-plugin-organize-imports', 'prettier-plugin-packagejson']
+}

package/templates/pc/.stylelintignore

@@ -0,0 +1,6 @@
+node_modules/
+config/
+dist/
+src/assets/fonts/
+public/
+

package/templates/pc/.stylelintrc.js

@@ -0,0 +1,16 @@
+// https://stylelint.io/
+// https://stylelint.docschina.org/ 中文网站，注意版本是否和官网一致
+module.exports = {
+  extends: ['@winner-fed/stylelint-config-win', 'stylelint-config-prettier'],
+  // Less 语法检测
+  customSyntax: 'postcss-less',
+  overrides: [
+    {
+      files: ['*.html', '**/*.html', '*.htm', '**/*.htm', '*.vue', '**/*.vue'],
+      customSyntax: 'postcss-html'
+    }
+  ],
+  rules: {
+    'font-family-no-missing-generic-family-keyword': 'off'
+  }
+};

package/templates/pc/.winrc.ts.tpl

@@ -0,0 +1,74 @@
+// https://winjs-dev.github.io/winjs-docs/config/config.html
+import { defineConfig } from '@winner-fed/winjs';
+
+export default defineConfig({
+  npmClient: '{{{ npmClient }}}',
+  plugins: ['@winner-fed/plugin-request'],
+  /**
+   * @name request 配置，可以配置错误处理
+   * @description 它基于 axios 和 VueHookPlus 的 useRequest 提供了一套统一的网络请求和错误处理方案。
+   * @doc https://winjs-dev.github.io/winjs-docs/plugins/request.html
+   */
+  request: {},
+  /**
+   * @name appConfig 配置
+   * @description 可以配置前端工程运行的配置文件 `config.local.js` 里内容。
+   * @doc https://winjs-dev.github.io/winjs-docs/config/config.html#appconfig
+   */
+  appConfig: {
+    // 本地调试环境
+    development: {
+      API_HOME: 'https://api.github.com/',
+      API_UPLOAD: 'https://api.github.com/upload'
+    },
+    // 测试环境
+    test: {
+      API_HOME: 'https://test.github.com/',
+      API_UPLOAD: 'https://test.github.com/upload'
+    },
+    // 生产环境
+    production: {
+      API_HOME: 'https://production.github.com/',
+      API_UPLOAD: 'https://production.github.com/upload'
+    }
+  },
+  /**
+   * @name icons 配置
+   * @description svg icon 的相关配置
+   * @doc https://winjs-dev.github.io/winjs-docs/config/config.html#icons
+   */
+  icons: {},
+  /**
+   * @name banner 配置
+   * @description 为构建的静态资源（JS、CSS 文件）的头部或尾部注入内容的能力。
+   * @doc https://winjs-dev.github.io/winjs-docs/config/config.html#banner
+   */
+  banner: true,
+  targets: { chrome: 51, firefox: 54, safari: 10, edge: 15 },
+  jsMinifier: 'terser',
+  cssMinifier: 'cssnano',
+  /**
+   * @name <less> less-loader 里的配置
+   * @description 全局注入变量及 mixins
+   */
+  lessLoader: {
+    modifyVars: {
+      // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
+      'hack': `true; @import "@/assets/style/variable.less";@import "@winner-fed/magicless/magicless.less";`
+    }
+  },
+  title: '{{{ projectName }}}',
+  mountElementId: '{{{ appContainerName }}}',
+  mfsu: {
+    shared: {
+      vue: {
+        singleton: true,
+        eager: true
+      }
+    }
+  },
+  // 开发使用内联CSS，生产使用构建的CSS文件
+  styleLoader: process.env.NODE_ENV === 'production' ? false : {},
+  // 开发使用 cheap-source-map
+  devtool: process.env.NODE_ENV === 'development' ? 'cheap-source-map' : false
+});

package/templates/pc/README.md

@@ -0,0 +1,255 @@
+# WinJS PC Web 模板
+
+一个基于 WinJS 框架的现代化 PC 端 Web 应用模板，提供完整的开发工具链和最佳实践配置。
+
+## 📋 项目简介
+
+本模板专为 PC 端 Web 应用开发而设计，集成了现代前端开发的最佳实践，包括代码规范、构建优化、开发体验等方面的完整解决方案。
+
+## 🚀 技术栈
+
+### 核心框架
+
+- **Vue 3.2.x** - 渐进式 JavaScript 框架
+- **Vue Router 4.x** - 官方路由管理器
+- **WinJS** - 企业级前端开发框架
+
+### 开发工具
+
+- **TypeScript 5.x** - 类型安全的 JavaScript 超集
+- **Vite** - 下一代前端构建工具
+- **Less** - CSS 预处理器
+
+### 代码质量
+
+- **ESLint** - JavaScript/TypeScript 代码检查
+- **Prettier** - 代码格式化工具
+- **Stylelint** - CSS/Less 样式检查
+- **F2ELint** - 前端代码规范工具
+- **Husky** - Git hooks 管理
+- **Lint-staged** - 暂存文件检查
+
+### 工程化
+
+- **Cross-env** - 跨平台环境变量设置
+- **Commitlint** - Git 提交信息规范检查
+
+## ✨ 功能特性
+
+- 🎯 **开箱即用** - 预配置完整的开发环境
+- 🔧 **工程化完备** - 集成代码规范、构建优化、部署流程
+- 📱 **响应式设计** - 适配不同屏幕尺寸
+- 🌐 **网络请求** - 基于 axios 的统一请求封装
+- 🎨 **样式方案** - Less + CSS Modules 支持
+- 📦 **模块联邦** - 支持微前端架构
+- 🔍 **开发调试** - 完善的 Source Map 和热更新
+- 🚀 **构建优化** - 代码分割、压缩、缓存策略
+
+## 🛠️ 快速开始
+
+### 环境要求
+
+- Node.js >= 16.0.0
+- npm >= 8.0.0 或 yarn >= 1.22.0
+
+### 安装依赖
+
+```bash
+# 使用 npm
+npm install
+
+# 使用 yarn
+yarn install
+```
+
+### 开发调试
+
+```bash
+# 启动开发服务器
+npm run dev
+
+# 或者
+npm start
+```
+
+访问 http://localhost:8000 查看应用
+
+### 构建部署
+
+```bash
+# 构建生产版本
+npm run build
+
+# 预览构建结果
+npm run preview
+```
+
+## 📁 项目结构
+
+```
+├── src/                    # 源代码目录
+│   ├── assets/            # 静态资源
+│   ├── icons/             # SVG 图标
+│   ├── layouts/           # 布局组件
+│   ├── pages/             # 页面组件
+│   │   ├── hello/         # 示例页面
+│   │   ├── index.vue      # 首页
+│   │   └── docs.vue       # 文档页面
+│   ├── services/          # 服务层
+│   ├── app.js             # 应用配置
+│   ├── constant.js        # 常量定义
+│   └── global.less        # 全局样式
+├── .winrc.ts              # WinJS 配置文件
+├── package.json           # 项目依赖配置
+├── tsconfig.json          # TypeScript 配置
+├── .eslintrc.js           # ESLint 配置
+├── .prettierrc.js         # Prettier 配置
+├── .stylelintrc.js        # Stylelint 配置
+└── README.md              # 项目说明文档
+```
+
+## 🔧 开发指南
+
+### 代码规范
+
+项目集成了完整的代码规范工具链：
+
+```bash
+# 代码检查
+npm run lint
+
+# 代码格式化
+npm run format
+
+# F2ELint 扫描
+npm run f2elint-scan
+
+# F2ELint 修复
+npm run f2elint-fix
+```
+
+### 环境配置
+
+在 `.winrc.ts` 中配置不同环境的 API 地址：
+
+```typescript
+appConfig: {
+  development: {
+    API_HOME: 'https://api.github.com/',
+    API_UPLOAD: 'https://api.github.com/upload'
+  },
+  test: {
+    API_HOME: 'https://test.github.com/',
+    API_UPLOAD: 'https://test.github.com/upload'
+  },
+  production: {
+    API_HOME: 'https://production.github.com/',
+    API_UPLOAD: 'https://production.github.com/upload'
+  }
+}
+```
+
+### 网络请求
+
+使用统一的请求封装，支持拦截器配置：
+
+```javascript
+// 在 app.js 中配置请求拦截器
+export const request = {
+  timeout: TIMEOUT,
+  requestInterceptors: [
+    [
+      (config) => {
+        // 请求前处理
+        return httpRequest.success(config);
+      },
+      (error) => {
+        // 请求错误处理
+        return httpRequest.error(error);
+      }
+    ]
+  ],
+  responseInterceptors: [
+    [
+      (response) => {
+        // 响应成功处理
+        return httpResponse.success(response);
+      },
+      (error) => {
+        // 响应错误处理
+        return httpResponse.error(error);
+      }
+    ]
+  ]
+};
+```
+
+### 样式开发
+
+- 支持 Less 预处理器
+- 集成 MagicLess 工具库
+- 支持全局变量和 mixins
+
+```less
+// 在 .winrc.ts 中配置 Less
+lessLoader: {
+  modifyVars: {
+    'hack': `true; @import "@/assets/style/variable.less";@import "@winner-fed/magicless/magicless.less";`
+  }
+}
+```
+
+## 📦 构建配置
+
+### 浏览器兼容性
+
+```javascript
+targets: {
+  chrome: 51,
+  firefox: 54,
+  safari: 10,
+  edge: 15
+}
+```
+
+### 构建优化
+
+- **代码压缩**: 使用 Terser 压缩 JavaScript，cssnano 压缩 CSS
+- **模块联邦**: 支持微前端架构
+- **Source Map**: 开发环境使用 cheap-source-map
+- **样式处理**: 开发环境内联 CSS，生产环境提取 CSS 文件
+
+## 🔍 调试与测试
+
+### 开发调试
+
+- 热更新支持
+- Source Map 调试
+- 详细的错误信息
+
+### 代码质量检查
+
+项目配置了多层代码质量保障：
+
+1. **提交前检查**: 通过 Husky 和 lint-staged 在提交前自动检查代码
+2. **实时检查**: 编辑器集成 ESLint、Prettier、Stylelint
+3. **CI/CD 集成**: 支持持续集成环境的代码检查
+
+## 📚 相关文档
+
+- [WinJS 官方文档](https://winjs-dev.github.io/winjs-docs/)
+- [Vue 3 官方文档](https://vuejs.org/)
+- [Vue Router 4 文档](https://router.vuejs.org/)
+- [TypeScript 文档](https://www.typescriptlang.org/)
+
+## 🆘 问题反馈
+
+如果您在使用过程中遇到问题，请通过以下方式反馈：
+
+1. 提交 Issue
+2. 联系维护团队
+3. 查阅官方文档
+
+---
+
+**Happy Coding! 🎉**

package/templates/pc/commitlint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@winner-fed/commitlint-config-win/hs']
+};

package/templates/pc/f2elint.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  enableESLint: true,
+  enableStylelint: true,
+  enableMarkdownlint: false,
+  enablePrettier: false
+};

package/templates/pc/package.json.tpl

@@ -0,0 +1,33 @@
+{
+  "name": "{{{ projectName }}}",
+  "version": "1.0.0",
+  "buildVersion": "V202101-00-000",
+  "private": true,
+  "author": "{{{ author }}}",
+  "scripts": {
+    "dev": "win dev",
+    "build": "cross-env WIN_APP_ENV=production win build",
+    "lint": "win lint",
+    "f2elint-scan": "f2elint scan --include src",
+    "f2elint-fix": "f2elint fix --include src",
+    "format": "prettier --write \"src/**/*.{js,jsx,json,ts,tsx,css,less,scss,vue,html,md}\" \"package.json\"",
+    "postinstall": "win setup",
+    "prepare": "husky install",
+    "setup": "win setup",
+    "start": "npm run dev",
+    "preview": "win preview"
+  },
+  "dependencies": {
+    "@winner-fed/cloud-utils": "^2.0.1",
+    "@winner-fed/magicless": "*",
+    "@winner-fed/winjs": "{{{ version }}}"
+  },
+  "devDependencies": {
+    "@winner-fed/plugin-request": "^1.0.1",
+    "@winner-fed/f2elint": "^3.0.0",
+    "cross-env": "^7.0.3",
+    "husky": "8.0.3",
+    "lint-staged": "13.2.3",
+    "typescript": "^5.0.3"
+  }
+}

package/templates/pc/plugin.ts.tpl

@@ -0,0 +1,23 @@
+import type { IApi } from '@winner-fed/winjs';
+
+export default (api: IApi) => {
+  api.modifyHTML(($) => {
+    return $;
+  });
+
+   // meta 添加缓存参数
+    api.addHTMLMetas(() => [
+      {
+        'http-equiv': 'Cache-Control',
+        'content': 'no-store, no-cache, must-revalidate'
+      },
+      {
+        'http-equiv': 'Pragma',
+        'content': 'no-cache'
+      },
+      {
+        'http-equiv': 'Expires',
+        'content': '0'
+      }
+    ]);
+};

package/templates/pc/src/app.js

@@ -0,0 +1,55 @@
+import { TIMEOUT } from './constant';
+import { httpRequest, httpResponse } from './services/request';
+
+/**
+ * @name request 配置，可以配置错误处理
+ * 它基于 axios 和 VueHookPlus 的 useRequest 提供了一套统一的网络请求和错误处理方案。
+ * @doc https://winjs-dev.github.io/winjs-docs/plugins/request.html
+ */
+export const request = {
+  timeout: TIMEOUT,
+  requestInterceptors: [
+    // 一个二元组，第一个元素是 request 拦截器，第二个元素是错误处理
+    [
+      (config) => {
+        console.log('requestInterceptors 1', config);
+        return httpRequest.success(config);
+      },
+      (error) => {
+        console.log('error', error);
+        return httpRequest.error(error);
+      }
+    ]
+  ],
+  responseInterceptors: [
+    [
+      (response) => {
+        console.log('responseInterceptors 1', response);
+        return httpResponse.success(response);
+      },
+      (error) => {
+        console.log('responseInterceptors 2', error);
+        return httpResponse.error(error);
+      }
+    ]
+  ]
+};
+
+export function onRouterCreated({ router }) {
+  console.log('onRouterCreated', router);
+}
+
+export function onAppCreated({ app }) {
+  console.log('onAppCreated', app);
+}
+
+export function onMounted({ app, router }) {
+  console.log('onMounted', app, router);
+}
+
+export const router = {
+  // @ts-ignore
+  scrollBehavior(to, from) {
+    console.log('scrollBehavior', to, from);
+  }
+};