@qlover/create-app 0.1.4 → 0.1.6

package/templates/pack-app/fe-config.json

@@ -1,10 +1,6 @@
 {
   "protectedBranches": ["master", "develop"],
   "release": {
-    "packagesDirectories": [
-      "packages/browser",
-      "packages/node",
-      "packages/react-vite-lib"
-    ]
+    "packagesDirectories": []
   }
 }

package/templates/pack-app/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@qlover/pack-app",
+  "name": "pack-app",
   "version": "0.0.0",
   "description": "A template for fe-pack-app",
   "type": "module",
@@ -10,11 +10,10 @@
   },
   "homepage": "https://github.com/qlover/fe-base#readme",
   "scripts": {
-    "build": "pnpm run build:[PKG_NAME]",
-    "build:[PKG_NAME]": "pnpm run build --filter=@qlover/${PKG_NAME}",
+    "build": "pnpm -r run build",
     "prettier": "prettier --ignore-path .prettierignore **/*.{js,ts,json,cjs,mjs} --write",
     "lint": "eslint . --fix",
-    "test": "jest",
+    "test": "pnpm run test",
     "clean": "fe-clean",
     "clean:build": "fe-clean -f packages/*/dist -r",
     "check-packages": "fe-check-packages",
@@ -39,25 +38,34 @@
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.1",
-    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
-    "@types/jest": "^29.5.11",
     "eslint": "^9.17.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.12.0",
+    "husky": "^9.1.7",
+    "jsdom": "^26.0.0",
+    "prettier": "^3.5.0",
     "rollup": "^4.24.2",
     "rollup-plugin-delete": "^2.1.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-typescript2": "^0.36.0",
     "ts-node": "^10.9.2",
-    "typescript": "~5.4.0"
+    "typescript": "~5.4.0",
+    "vite": "^5.4.8",
+    "vitest": "^3.0.5"
   },
   "workspaces": [
     "packages/*"
   ],
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "eslint --fix"
+    "packages/**/*.{js,jsx,ts,tsx}": [
+      "eslint --cache --fix --quiet",
+      "prettier --write"
+    ],
+    "packages/**/*.{json,css,scss,md}": [
+      "prettier --write"
     ]
   },
   "packageManager": "pnpm@9.1.0"

package/templates/pack-app/tsconfig.json

@@ -4,6 +4,6 @@
     "jsx": "react-jsx",
     "rootDir": "./"
   },
-  "include": ["./packages"],
+  "include": ["./packages", "configs/node-lib/eslint.config.js"],
   "exclude": ["**/node_modules/*", "**/dist", "**/build"]
 }

package/templates/pack-app/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  build: {
+    outDir: 'dist',
+    sourcemap: true
+  },
+  plugins: [],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    include: ['**/__tests__/**/*.test.{ts,tsx}']
+  }
+});

package/templates/react-app/README.md

@@ -1,50 +1,187 @@
-# React + TypeScript + Vite
+# FE-React Template
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+一个现代化的 React 前端项目模板，集成了多项实用功能和最佳实践。
 
-Currently, two official plugins are available:
+## 特性亮点
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+- 🚀 基于 Vite 的快速开发体验
+- 🎨 集成 Tailwind CSS 的主题系统
+- 🌍 完善的国际化支持
+- 🔄 IOC 容器的依赖注入
+- 📡 统一的 API 请求处理
+- 🎮 控制器模式的状态管理
 
-## Expanding the ESLint configuration
+## 环境要求
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+- Node.js >= 16
+- pnpm >= 8.0
 
-- Configure the top-level `parserOptions` property like this:
+## 配置说明
 
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
+项目配置文件位于 `config/` 目录：
+
+- `app.common.ts`: 应用通用配置，包含 API 配置、默认登录信息等
+- `app.router.json`: 路由配置，定义应用的路由结构
+- `i18n.ts`: 国际化配置，支持中英文切换
+- `theme.json`: 主题配置，定义应用的主题系统
+
+## 项目结构
+
+├── config/ # 配置文件目录
+│ ├── app.common.ts # 应用通用配置
+│ ├── app.router.json # 路由配置
+│ ├── i18n.ts # 国际化配置
+│ └── theme.json # 主题配置
+├── lib/ # 公共库目录
+│ ├── fe-react-controller/ # React 控制器库
+│ ├── fe-react-theme/ # React 主题库
+│ ├── openAiApi/ # OpenAI API 封装
+│ ├── request-common-plugin/ # 请求公共插件
+│ └── tw-root10px/ # Tailwind 10px 根字体配置
+├── public/ # 静态资源目录
+│ └── locales/ # 国际化资源文件
+├── src/ # 源代码目录
+│ ├── base/ # 基础代码
+│ │ ├── apis/ # API 接口定义
+│ │ ├── cases/ # 业务用例
+│ │ ├── port/ # 接口定义
+│ │ └── types/ # 类型定义
+│ ├── core/ # 核心代码
+│ │ └── feIOC/ # IOC 容器实现
+│ │ └── globals.ts # 全局变量
+│ │ └── bootstrap.ts # 启动器
+│ ├── pages/ # 页面组件
+│ ├── services/ # 服务层
+│ └── uikit/ # UI 组件库
+└── vite.config.ts # Vite 配置文件
+
+## 目录结构说明
+
+1. `config/`: 集中管理配置文件，便于统一维护和修改
+2. `lib/`: 可复用的独立功能库，方便跨项目使用
+3. `src/base/`: 基础代码层，定义接口和类型
+4. `src/core/`: 核心功能实现，包含 IOC 容器等基础设施
+5. `src/pages/`: 页面组件，按功能模块组织
+6. `src/services/`: 服务层，处理业务逻辑
+7. `src/uikit/`: UI 组件库，提供可复用的界面组件
+
+## 核心特性
+
+### 1. IOC 容器
+
+项目使用依赖注入容器管理依赖，主要包含:
+
+- `FeIOC`: IOC 容器的核心实现
+- `RegisterApi`: API 服务注册
+- `RegisterCommon`: 通用服务注册
+- `RegisterControllers`: 控制器注册
+
+### 2. 国际化支持
+
+- 支持中文和英文
+- 使用 i18next 实现
+- 按模块划分语言文件
+
+### 3. 主题系统
+
+- 支持主题切换
+- 基于 Tailwind CSS
+- 自定义 10px 根字体配置
+
+### 4. API 请求处理
+
+- 统一的请求处理机制
+- 支持请求拦截和响应处理
+- Mock 数据支持
+- OpenAI API 集成
+
+### 5. 控制器模式
+
+采用控制器模式管理业务逻辑:
+
+- `JSONStorageController`: JSON 存储控制
+- `RequestController`: 请求控制
+- `RouterController`: 路由控制
+- `UserController`: 用户控制
+- `ThemeController`: 主题控制
+
+## 技术栈
+
+- React
+- TypeScript
+- Vite
+- Tailwind CSS
+- i18next
+- @qlover/fe-utils
+
+## 开发
+
+项目使用 pnpm 管理依赖，请先安装 pnpm
+
+```bash
+npm install -g pnpm
+```
+
+## 开发指南
+
+### API 开发
+
+项目使用统一的 API 请求处理机制：
+
+- 支持请求拦截和响应处理
+- 内置 Mock 数据支持
+- 集成 OpenAI API
+
+### 控制器开发
+
+项目采用控制器模式管理业务逻辑：
+
+- `JSONStorageController`: 处理 JSON 数据存储
+- `RequestController`: 处理 API 请求
+- `UserController`: 处理用户认证
+- `ThemeController`: 处理主题切换
+
+### 国际化开发
+
+语言文件位于 `public/locales/` 目录：
+
+- `zh/`: 中文语言包
+- `en/`: 英文语言包
+
+### 安装依赖
+
+```bash
+pnpm install
 ```
 
-- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
-- Optionally add `...tseslint.configs.stylisticTypeChecked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
+### 开发模式
+
+```bash
+pnpm run dev
 ```
+
+### 构建
+
+```bash
+pnpm run build
+```
+
+### 测试
+
+```bash
+pnpm run test
+```
+
+## 常见问题
+
+### Q: 如何切换主题？
+
+A: 项目支持主题切换功能，通过 ThemeController 进行控制。
+
+### Q: 如何添加新的语言支持？
+
+A: 在 `public/locales/` 目录下添加新的语言文件，并在 `i18n.ts` 中配置。
+
+## 许可证
+
+ISC

package/templates/react-app/config/i18n.ts

@@ -1,4 +1,4 @@
-import { isProduction } from '@/containers/globals';
+import { isProduction } from '@/core/globals';
 
 /** @type {import('i18next').InitOptions} */
 export const i18nConfig = {

package/templates/react-app/lib/fe-react-controller/FeController.ts

@@ -1,8 +1,8 @@
-import { SliceStore } from '@qlover/slice-store';
+import { SliceStore } from '@qlover/slice-store-react';
 
 export class FeController<T> extends SliceStore<T> {
-  constructor(initialState: T) {
-    super(() => initialState);
+  constructor(private stateFactory: () => T) {
+    super(stateFactory);
   }
 
   getState(): T {
@@ -12,4 +12,8 @@ export class FeController<T> extends SliceStore<T> {
   setState(state: Partial<T>): void {
     this.emit({ ...this.state, ...state });
   }
+
+  reset(): void {
+    this.emit(this.stateFactory());
+  }
 }

package/templates/react-app/lib/fe-react-theme/ThemeController.ts

@@ -4,7 +4,7 @@ import { ThemeStateGetter } from './ThemeStateGetter';
 
 export class ThemeController extends FeController<ThemeControllerState> {
   constructor(private props: ThemeControllerProps) {
-    super(ThemeStateGetter.create(props));
+    super(() => ThemeStateGetter.create(props));
 
     this.bindToTheme();
   }

package/templates/react-app/package.json

@@ -1,13 +1,54 @@
 {
-  "name": "fe-react",
-  "private": true,
+  "name": "react-app",
+  "description": "A react app template",
   "version": "0.0.0",
   "type": "module",
+  "private": true,
+  "homepage": "",
+  "author": "qlover",
+  "license": "ISC",
+  "main": "./dist/es/index.js",
+  "module": "./dist/es/index.js",
+  "types": "./dist/es/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/es/index.d.ts",
+      "import": "./dist/es/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./cjs/*": "./dist/cjs/*",
+    "./es/*": "./dist/es/*",
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/qlover/fe-base.git",
+    "directory": ""
+  },
+  "files": [
+    "bin",
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "keywords": [
+    "scripts",
+    "release",
+    "fe-release"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "bin": {
+    "fe-release": "./bin/release.js"
+  },
   "scripts": {
     "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
+    "build": "vite build",
+    "lint": "eslint ./src --fix",
+    "prettier": "prettier --write ./src",
+    "preview": "vite preview",
+    "test": "vitest run"
   },
   "dependencies": {
     "@qlover/fe-utils": "latest",
@@ -19,12 +60,12 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.2.0",
-    "react-router-dom": "6"
+    "react-router-dom": "^7.1.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
-    "@qlover/eslint-plugin-fe-dev": "^0.2.0",
     "@qlover/env-loader": "latest",
+    "@qlover/eslint-plugin-fe-dev": "^0.2.0",
     "@qlover/fe-scripts": "latest",
     "@rollup/plugin-alias": "^5.1.1",
     "@types/lodash": "^4.17.13",
@@ -32,10 +73,12 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@types/typo-js": "^1.2.2",
-    "@vitejs/plugin-react": "^4.3.2",
+    "@vitejs/plugin-react": "^4.3.4",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.15.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",
     "globals": "^15.12.0",
@@ -45,6 +88,7 @@
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.15.0",
     "vite": "^5.4.8",
-    "vite-plugin-cross-origin-isolation": "^0.1.6"
+    "vite-plugin-cross-origin-isolation": "^0.1.6",
+    "vitest": "^3.0.5"
   }
 }

package/templates/react-app/src/App.tsx

@@ -1,14 +1,13 @@
-import './styles/css/index.css';
+import '@/uikit/styles/css/index.css';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { createFeReactRoutes } from './pages';
-import { I18nService } from '@/services/i18n';
 import { useMemo } from 'react';
-import { routerController } from './containers';
-
-I18nService.init();
+import { IOC } from './core';
+import { RouterController } from './uikit/controllers/RouterController';
 
 function App() {
   const routerBase = useMemo(() => {
+    const routerController = IOC(RouterController);
     const routes = createFeReactRoutes(routerController.getRoutes());
     const router = createBrowserRouter(routes);
     return router;

package/templates/react-app/src/{services → base/apis}/feApi/FeApiMockPlugin.ts

@@ -4,7 +4,7 @@ import {
   RequestAdapterFetchConfig,
   RequestAdapterResponse
 } from '@qlover/fe-utils';
-import { sleep } from '@/utils/thread';
+import { sleep } from '@/uikit/utils/thread';
 
 export class FeApiMockPlugin implements ExecutorPlugin {
   readonly pluginName = 'FeApiMockPlugin';

package/templates/react-app/src/base/cases/UserToken.ts

@@ -0,0 +1,47 @@
+import { StorageTokenInterface } from '@/base/port/StorageTokenInterface';
+import { adjustExpirationTime } from '@/uikit/utils/datetime';
+import { JSONStorage } from '@qlover/fe-utils';
+
+export interface UserTokenOptions {
+  /**
+   * @default `month`
+   */
+  expiresIn?: number | 'day' | 'week' | 'month' | 'year';
+  storageKey: string;
+  storage: JSONStorage;
+}
+
+export class UserToken implements StorageTokenInterface {
+  private token = '';
+
+  constructor(private options: UserTokenOptions) {}
+
+  getToken(): string {
+    if (!this.token) {
+      const { storageKey, storage } = this.options;
+      const token = storage.getItem(storageKey, '');
+
+      if (token) {
+        this.setToken(token);
+      }
+    }
+
+    return this.token;
+  }
+
+  setToken(token: string, expireTime?: number): void {
+    this.token = token;
+
+    expireTime =
+      expireTime !== undefined
+        ? expireTime
+        : adjustExpirationTime(Date.now(), this.options.expiresIn ?? 'month');
+
+    this.options.storage.setItem(this.options.storageKey, token, expireTime);
+  }
+
+  removeToken(): void {
+    this.token = '';
+    this.options.storage.removeItem(this.options.storageKey);
+  }
+}

package/templates/react-app/src/base/port/IOCInterface.ts

@@ -0,0 +1,53 @@
+export interface Abstract<T> {
+  prototype: T;
+}
+export type Newable<T, Args extends unknown[] = unknown[]> = new (
+  ...args: Args
+) => T;
+
+export type ServiceIdentifier<T = unknown> =
+  | string
+  | symbol
+  | Newable<T>
+  | Abstract<T>;
+
+/**
+ * IOC container
+ *
+ */
+export interface IOCInterface {
+  /**
+   * configure IOC container
+   */
+  configure(): void;
+
+  /**
+   * bind instance
+   *
+   * @param serviceIdentifier
+   * @param value
+   */
+  bind<T>(serviceIdentifier: ServiceIdentifier<T>, value: T): void;
+
+  /**
+   * get instance
+   *
+   * @param serviceIdentifier
+   * @returns
+   */
+  get<T>(serviceIdentifier: ServiceIdentifier<T>): T;
+
+  /**
+   * You can also use the override method to specify a replacement at runtime
+   *
+   * However, it may have performance issues because it creates an additional instance
+   *
+   * @param serviceIdentifier
+   * @param value
+   */
+  override<T>(serviceIdentifier: ServiceIdentifier<T>, value: T): void;
+}
+
+export interface IOCRegisterInterface {
+  register(container: IOCInterface): void;
+}

package/templates/react-app/src/base/port/StorageTokenInterface.ts

@@ -0,0 +1,5 @@
+export interface StorageTokenInterface {
+  getToken(): string;
+  setToken(token: string, expireTime?: number): void;
+  removeToken(): void;
+}

package/templates/react-app/src/{types → base/port}/UIDependenciesInterface.ts

@@ -1,3 +1,9 @@
+/**
+ * Need to be used in the UI component
+ *
+ * eg. A service use window.localStorage, it should be like this:
+ *
+ */
 export interface UIDependenciesInterface<Dep = unknown> {
   /**
    * Represents the dependencies required by the UI component.

package/templates/react-app/src/{types → base/types}/global.d.ts

@@ -1,4 +1,4 @@
-import * as feGlobals from '@/containers/globals';
+import * as feGlobals from '@/core/globals';
 
 declare global {
   interface Window {

package/templates/react-app/src/components/ThemeSwitcher.tsx

@@ -1,9 +1,10 @@
-import { themeController } from '@/containers';
+import { IOC } from '@/core';
 import { useController } from '@lib/fe-react-controller';
+import { ThemeController } from '@lib/fe-react-theme/ThemeController';
 import { useTranslation } from 'react-i18next';
 
 export default function ThemeSwitcher() {
-  const controller = useController(themeController);
+  const controller = useController(IOC(ThemeController));
   const { theme } = controller.getState();
   const themes = controller.getSupportedThemes();
   const { t } = useTranslation('common');

package/templates/react-app/src/core/bootstrap.ts

@@ -0,0 +1,21 @@
+import * as feGlobals from '@/core/globals';
+import { IOC } from '.';
+import { IOCInterface } from '@/base/port/IOCInterface';
+import { I18nService } from '@/services/i18n';
+
+export class Bootstrap {
+  constructor(private IOCContainer: IOCInterface) {}
+
+  start(): void {
+    // set global feGlobals
+    if (typeof window !== 'undefined') {
+      window.feGlobals = Object.freeze(Object.assign({}, feGlobals));
+    }
+
+    // startup IOC
+    IOC.implement(this.IOCContainer);
+
+    // startup i18n
+    I18nService.init();
+  }
+}