@qlover/create-app 0.7.15 → 0.8.0

package/dist/templates/react-app/makes/eslint-utils.mjs

@@ -0,0 +1,195 @@
+/**
+ * 禁用特定的全局变量（使用 ESLint 原生 globals 配置）
+ * 这是最简洁的方式，直接在 languageOptions.globals 中设置为 'off'
+ *
+ * @param {import('eslint').Linter.Config} config - ESLint 配置对象
+ * @param {Object} options - 配置选项
+ * @param {string[]} options.disabledGlobals - 要禁用的全局变量列表
+ * @returns {import('eslint').Linter.Config}
+ *
+ * @example
+ * // 禁用 window, document 等全局变量
+ * disableGlobals(
+ *   {
+ *     files: ['src/**\/*.{ts,tsx}'],
+ *     languageOptions: { globals: globals.browser },
+ *     rules: {}
+ *   },
+ *   {
+ *     disabledGlobals: ['window', 'document', 'localStorage']
+ *   }
+ * )
+ */
+export function disableGlobals(config, options = {}) {
+  const { disabledGlobals = [] } = options;
+
+  const disabledGlobalsConfig = {};
+  disabledGlobals.forEach((name) => {
+    disabledGlobalsConfig[name] = 'off';
+  });
+
+  return {
+    ...config,
+    languageOptions: {
+      ...config.languageOptions,
+      globals: {
+        ...(config.languageOptions && config.languageOptions.globals),
+        ...disabledGlobalsConfig
+      }
+    }
+  };
+}
+
+/**
+ * 限制特定的浏览器全局变量（黑名单模式，使用 no-restricted-globals 规则）
+ * 只需指定要禁止的变量，其他全部允许
+ * 相比 disableGlobals，此方法可以提供自定义错误消息
+ *
+ * @param {import('eslint').Linter.Config} config - ESLint 配置对象
+ * @param {Object} options - 配置选项
+ * @param {string[]} options.restrictedGlobals - 禁止使用的全局变量列表
+ * @param {string | ((name: string) => string)} [options.message] - 自定义错误消息，支持模板字符串（使用 ${name}）或函数
+ * @param {Record<string, string>} [options.customMessages] - 为特定全局变量自定义消息
+ * @returns {import('eslint').Linter.Config}
+ *
+ * @example
+ * // 只禁止 window, document 等少数变量
+ * restrictSpecificGlobals(
+ *   {
+ *     files: ['src/**\/*.{ts,tsx}'],
+ *     languageOptions: { globals: globals.browser },
+ *     rules: {}
+ *   },
+ *   {
+ *     restrictedGlobals: ['window', 'document', 'localStorage'],
+ *     message: '❌ 禁止使用 ${name}，请从 @/core/globals 导入',
+ *     customMessages: {
+ *       window: '❌ 禁止直接使用 window 对象'
+ *     }
+ *   }
+ * )
+ */
+export function restrictSpecificGlobals(config, options = {}) {
+  const { restrictedGlobals = [], message, customMessages = {} } = options;
+
+  // 默认消息模板
+  const defaultMessage =
+    message ||
+    '不允许直接使用 ${name}，请从 @/core/globals 导入或使用允许的替代方案';
+
+  // 生成消息的函数
+  const generateMessage = (name) => {
+    // 优先使用自定义消息
+    if (customMessages[name]) {
+      return customMessages[name];
+    }
+
+    // 如果 message 是函数，调用它
+    if (typeof defaultMessage === 'function') {
+      return defaultMessage(name);
+    }
+
+    // 如果是字符串模板，替换 ${name}
+    return defaultMessage.replace(/\$\{name\}/g, name);
+  };
+
+  // 构建限制规则
+  const restrictedGlobalsConfig = restrictedGlobals.map((name) => ({
+    name,
+    message: generateMessage(name)
+  }));
+
+  return {
+    ...config,
+    rules: {
+      ...config.rules,
+      'no-restricted-globals': ['error', ...restrictedGlobalsConfig]
+    }
+  };
+}
+
+/**
+ * 自动生成 no-restricted-globals 规则，限制所有未明确允许的浏览器全局变量（白名单模式）
+ *
+ * @param {import('eslint').Linter.Config} config - ESLint 配置对象
+ * @param {Object} options - 配置选项
+ * @param {string[]} options.allowedGlobals - 允许使用的全局变量列表
+ * @param {Record<string, any>} [options.allGlobals] - 所有浏览器全局变量（如 globals.browser），如果不提供则从 config.languageOptions.globals 获取
+ * @param {string | ((name: string) => string)} [options.message] - 自定义错误消息，支持模板字符串（使用 ${name}）或函数
+ * @param {Record<string, string>} [options.customMessages] - 为特定全局变量自定义消息
+ * @returns {import('eslint').Linter.Config}
+ *
+ * @example
+ * // 从 languageOptions.globals 自动获取（推荐）
+ * restrictGlobals(
+ *   {
+ *     files: ['src/**\/*.{ts,tsx}'],
+ *     languageOptions: { globals: globals.browser },
+ *     rules: {}
+ *   },
+ *   {
+ *     allowedGlobals: ['console', 'setTimeout'],
+ *     message: '❌ 禁止使用 ${name}',
+ *     customMessages: {
+ *       window: '❌ window 请从 @/core/globals 导入'
+ *     }
+ *   }
+ * )
+ *
+ * @example
+ * // 使用函数形式的消息
+ * restrictGlobals(config, {
+ *   allowedGlobals: ['console'],
+ *   message: (name) => `不允许使用全局变量 "${name}"`
+ * })
+ */
+export function restrictGlobals(config, options = {}) {
+  const {
+    allowedGlobals = [],
+    allGlobals,
+    message,
+    customMessages = {}
+  } = options;
+
+  // 优先从 options 获取 allGlobals，否则从 config.languageOptions.globals 获取
+  const globals = allGlobals || (config.languageOptions && config.languageOptions.globals) || {};
+  const allGlobalKeys = Object.keys(globals);
+  const allowedSet = new Set(allowedGlobals);
+
+  // 默认消息模板
+  const defaultMessage =
+    message ||
+    '不允许直接使用 ${name}，请从 @/core/globals 导入或使用允许的替代方案';
+
+  // 生成消息的函数
+  const generateMessage = (name) => {
+    // 优先使用自定义消息
+    if (customMessages[name]) {
+      return customMessages[name];
+    }
+
+    // 如果 message 是函数，调用它
+    if (typeof defaultMessage === 'function') {
+      return defaultMessage(name);
+    }
+
+    // 如果是字符串模板，替换 ${name}
+    return defaultMessage.replace(/\$\{name\}/g, name);
+  };
+
+  // 过滤出不允许使用的全局变量
+  const restrictedGlobals = allGlobalKeys
+    .filter((key) => !allowedSet.has(key))
+    .map((name) => ({
+      name,
+      message: generateMessage(name)
+    }));
+
+  return {
+    ...config,
+    rules: {
+      ...config.rules,
+      'no-restricted-globals': ['error', ...restrictedGlobals]
+    }
+  };
+}

package/dist/templates/react-app/makes/generateTs2LocalesOptions.ts

@@ -0,0 +1,26 @@
+import { readdirSync } from 'fs';
+import { join } from 'path';
+
+export function generateTs2LocalesOptions() {
+  const getAllTsFiles = (dir: string): string[] => {
+    const files: string[] = [];
+    const items = readdirSync(dir, { withFileTypes: true });
+
+    for (const item of items) {
+      const fullPath = join(dir, item.name);
+      if (item.isDirectory()) {
+        files.push(...getAllTsFiles(fullPath));
+      } else if (item.isFile() && item.name.endsWith('.ts')) {
+        files.push(fullPath);
+      }
+    }
+    return files;
+  };
+
+  const options = getAllTsFiles('./config/Identifier').map((path) => ({
+    source: path,
+    target: `./public/locales/{{lng}}/common.json`
+  }));
+
+  return options;
+}

package/dist/templates/react-app/package.json

@@ -27,17 +27,37 @@
     "access": "public"
   },
   "scripts": {
+    "start": "npm run dev",
     "dev": "vite --mode localhost",
+    "dev:force": "vite --mode localhost --force",
     "dev:staging": "vite --mode staging",
     "dev:prod": "vite --mode production",
     "build": "npm run lint && vite build",
-    "lint": "tsc -b --noEmit && eslint ./src --fix",
-    "prettier": "prettier --write ./src ./docs ./config",
+    "build:staging": "npm run lint && vite build --mode staging",
+    "build:prod": "npm run lint && vite build --mode production",
+    "build:analyze": "vite build --mode production && start dist/stats.html",
+    "lint": "eslint ./src ./__tests__ ./config ./makes ./e2e",
+    "lint:fix": "eslint ./src ./__tests__ ./config ./makes ./e2e --ext .ts,.tsx --fix",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "fix": "npm run lint:fix && npm run format",
+    "prettier": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "preview": "vite preview",
-    "test": "vitest run"
+    "playwright:postinstall": "npm init playwright@latest --yes \"--\" . '--quiet' '--browser=chromium' '--browser=firefox' '--browser=webkit' '--gha'",
+    "test": "vitest run",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:chromium": "playwright test --project=chromium",
+    "test:e2e:firefox": "playwright test --project=firefox",
+    "test:e2e:webkit": "playwright test --project=webkit",
+    "test:e2e:report": "playwright show-report playwright-report"
   },
   "dependencies": {
+    "@brain-toolkit/antd-blocks": "^0.0.1",
     "@brain-toolkit/antd-theme-override": "^0.0.3",
+    "@brain-toolkit/react-kit": "^0.1.0",
     "@qlover/corekit-bridge": "latest",
     "@qlover/fe-corekit": "latest",
     "@qlover/logger": "^0.1.1",
@@ -60,12 +80,14 @@
   },
   "devDependencies": {
     "@brain-toolkit/ts2locales": "^0.2.3",
+    "@playwright/test": "^1.56.1",
     "@qlover/env-loader": "latest",
     "@qlover/eslint-plugin": "latest",
     "@qlover/fe-scripts": "latest",
     "@qlover/fe-standard": "latest",
     "@testing-library/react": "^16.3.0",
     "@types/lodash": "^4.17.13",
+    "@types/node": "^24.10.0",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@types/react-syntax-highlighter": "^15.5.13",
@@ -74,15 +96,18 @@
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.15.0",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
+    "eslint-plugin-unused-imports": "^4.3.0",
     "eslint-plugin-vitest": "^0.5.4",
     "globals": "^15.12.0",
     "jsdom": "^26.1.0",
     "postcss": "^8.5.4",
     "prettier": "^3.5.3",
+    "rollup-plugin-visualizer": "^6.0.5",
     "sass-embedded": "^1.79.4",
     "tailwindcss": "^4.1.8",
     "terser": "^5.41.0",
@@ -92,5 +117,8 @@
     "vite-plugin-imp": "^2.4.0",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.0.5"
+  },
+  "engines": {
+    "node": ">=20.19.0"
   }
 }

package/dist/templates/react-app/playwright.config.ts

@@ -0,0 +1,79 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('')`. */
+    baseURL: 'http://localhost:3200',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://localhost:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});