@qlover/create-app 0.4.2 → 0.4.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @qlover/create-app
 
+## 0.4.3
+
+### Patch Changes
+
+#### ✨ Features
+
+- **create-app:** enhance environment configuration and localization support ([76e5e22](https://github.com/qlover/fe-base/commit/76e5e22e41fe23ce109c303ca3974103f8a85cf6)) ([#432](https://github.com/qlover/fe-base/pull/432))
+
+  - Updated .gitignore to include .env files and added .env.template to the repository.
+  - Introduced a new .env.template file for environment variable configuration in the react-app template.
+  - Enhanced package.json scripts for development modes: added staging and production modes.
+  - Updated README.md to document environment variable usage with Vite.
+  - Added new error identifiers for token handling in Error.ts and updated UserService to utilize these identifiers.
+  - Improved localization files to include new keys for error messages related to token absence.
+
+  This update improves the application's configuration management and localization, enhancing developer experience and user feedback.
+
 ## 0.4.2
 
 ### Patch Changes

package/configs/_common/.gitignore.template

@@ -1,32 +1,58 @@
-# Logs
-logs
-*.log
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.*
+!.env.template
+
+# vercel
+.vercel
 
-node_modules
-dist
-dist-ssr
-*.local
 # typescript
 *.tsbuildinfo
+next-env.d.ts
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+.husky
+!packages/create-app/configs/_common/.husky
+public/robots.txt
+public/sitemap*.xml
+dist
+.eslintcache
+.npmrc
+.secrets
+
+# local output dir
+*.output/
 
-# lock
+# lock file
+package-lock.json
 yarn.lock
-pnpm-lock.yaml
-pnpm-lock.yml
-package-lock.json
+
+rollup.config-*.*js
+
+.nx/cache
+.nx/workspace-data

package/dist/index.js

@@ -2378,7 +2378,7 @@ var Generator = class {
 
 // package.json
 var package_default = {
-  version: "0.4.2",
+  version: "0.4.3",
   description: "Create a new app with a single command"};
 function programArgs() {
   const program = new Command();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qlover/create-app",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Create a new app with a single command",
   "private": false,
   "type": "module",

package/templates/react-app/{.env → .env.template}

@@ -15,7 +15,7 @@ VITE_SERVER_PORT=3200
 # ===== app config
 VITE_USER_TOKEN_STORAGE_KEY=fe_user_token
 VITE_OPEN_AI_MODELS='["gpt-4o-mini","gpt-3.5-turbo","gpt-3.5-turbo-2","gpt-4","gpt-4-32k"]'
-VITE_OPEN_AI_BASE_URL=https://api.openai.com/v1
+VITE_OPEN_AI_BASE_URL=
 VITE_OPEN_AI_TOKEN=sk-proj-1234567890
 VITE_OPEN_AI_TOKEN_PREFIX=Bearer
 VITE_OPEN_AI_REQUIRE_TOKEN=true

package/templates/react-app/README.md

@@ -72,6 +72,25 @@ pnpm test
 - 支持服务自动注册和依赖管理
 - 提供完整的类型推导
 
+### env 配置注入
+
+[vite 环境变量和模式](https://cn.vite.dev/guide/env-and-mode#env-variables-and-modes)
+
+`vite dev` 默认 NODE_ENV 表示为 development, 他会加载可能的 `.env[mode]` 文件, 比如 .env.local -> .env
+
+`vite build`默认 NODE_ENV 表示为 production, 他会加载可能的 `.env[mode]` 文件, 比如 .env.production -> .env
+
+Nodejs NODE_ENV 只支持 development,production,test
+
+这个和 vite 中的 mode 是完全不一样的, mode 可以根据 `--mode` 指定不同模式，来加载不同的 env 配置
+
+比如:
+
+```bash
+vite dev --mode staging # 加载 .env.staging
+vite dev --mode local # 加载 .env.local
+```
+
 ### 国际化支持
 
 - 基于 i18next 的完整国际化解决方案

package/templates/react-app/config/feapi.mock.json

@@ -8,9 +8,17 @@
     "email": "john.doe@example.com",
     "picture": "https://randomuser.me/api/portraits/men/1.jpg"
   },
+  "GET /api/userinfo": {
+    "name": "John Doe",
+    "email": "john.doe@example.com",
+    "picture": "https://randomuser.me/api/portraits/men/1.jpg"
+  },
   "POST https://feapi.example.com/api/login": {
     "token": "asdfasdf123123asdfasdf"
   },
+  "POST /api/login": {
+    "token": "/api/login-token-adfasdfasdf"
+  },
   "POST https://api.openai.com/v1/chat/completions": {
     "id": "chatcmpl-1234567890",
     "object": "chat.completion",

package/templates/react-app/config/identifier/Error.ts

@@ -25,3 +25,10 @@ export const GLOBAL_NO_WINDOW = 'err.global.no.window';
  * @localEn Must be used in PageProvider
  */
 export const WITHIN_PAGE_PROVIDER = 'err.within.page.provider';
+
+/**
+ * @description 响应内容没有 token 值
+ * @localZh 响应内容没有 token 值
+ * @localEn Response not token value
+ */
+export const RES_NO_TOKEN = 'response.no.token';

package/templates/react-app/package.json

@@ -43,7 +43,9 @@
     "fe-release": "./bin/release.js"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --mode localhost",
+    "dev:staging": "vite --mode staging",
+    "dev:prod": "vite --mode production",
     "build": "vite build",
     "lint": "eslint ./src --fix",
     "prettier": "prettier --write ./src",

package/templates/react-app/public/locales/en/common.json

@@ -193,5 +193,6 @@
   "page.404.title": "404 - Page Not Found",
   "page.500.title": "500 - Server Error",
   "page.login.title": "Login",
-  "page.register.title": "Register"
+  "page.register.title": "Register",
+  "response.no.token": "Response not token value"
 }

package/templates/react-app/public/locales/zh/common.json

@@ -193,5 +193,6 @@
   "page.404.title": "404 - 页面未找到",
   "page.500.title": "500 - 服务器错误",
   "page.login.title": "登录",
-  "page.register.title": "注册"
+  "page.register.title": "注册",
+  "response.no.token": "响应内容没有 token 值"
 }

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

@@ -51,7 +51,7 @@ export class AppConfig implements EnvConfigInterface {
    * Storage key for user authentication token
    * @description Injected from VITE_USER_TOKEN_STORAGE_KEY environment variable
    */
-  readonly userTokenStorageKey = '';
+  readonly userTokenStorageKey = '__fe_user_token__';
 
   /**
    * Available OpenAI model configurations

package/templates/react-app/src/base/services/UserService.ts

@@ -10,8 +10,8 @@ import { IOCIdentifier } from '@/core/IOC';
 import { LoginInterface, RegisterFormData } from '@/base/port/LoginInterface';
 import { UserApi } from '@/base/apis/userApi/UserApi';
 import { AppError } from '@/base/cases/AppError';
-import { LOCAL_NO_USER_TOKEN } from '@config/Identifier/Error';
 import { StoreInterface, StoreStateInterface } from '../port/StoreInterface';
+import * as errKeys from '@config/Identifier/Error';
 
 class UserServiceState implements StoreStateInterface {
   success: boolean = false;
@@ -48,8 +48,10 @@ export class UserService
   async onBefore(): Promise<void> {
     await ThreadUtil.sleep(1000);
 
-    if (!this.userToken.getToken()) {
-      throw new AppError(LOCAL_NO_USER_TOKEN);
+    const userToken = this.userToken.getToken();
+
+    if (!userToken) {
+      throw new AppError(errKeys.LOCAL_NO_USER_TOKEN);
     }
 
     const userInfo = await this.userApi.getUserInfo();
@@ -81,6 +83,10 @@ export class UserService
       throw response.apiCatchResult;
     }
 
+    if (!response.data.token) {
+      throw new AppError(errKeys.RES_NO_TOKEN);
+    }
+
     this.userToken.setToken(response.data.token);
 
     const userInfo = await this.userApi.getUserInfo();

package/templates/react-app/src/pages/auth/Layout.tsx

@@ -2,6 +2,7 @@ import { IOC } from '@/core/IOC';
 import { UserService } from '@/base/services/UserService';
 import { Navigate, Outlet } from 'react-router-dom';
 import { useStore } from '@/uikit/hooks/useStore';
+import BaseHeader from '../base/components/BaseHeader';
 
 export default function Layout() {
   const userService = IOC(UserService);
@@ -12,5 +13,12 @@ export default function Layout() {
     return <Navigate to="/" replace />;
   }
 
-  return <Outlet />;
+  return (
+    <>
+      <BaseHeader />
+      <div className="flex-1">
+        <Outlet />
+      </div>
+    </>
+  );
 }

package/templates/react-app/src/styles/css/page.css

@@ -2,9 +2,9 @@
   --color-primary: rgba(var(--color-bg-base));
   --color-secondary: rgba(var(--color-bg-secondary));
   --color-elevated: rgba(var(--color-bg-elevated));
-  --color-text: rgba(var(--color-text-primary));
-  --color-text-secondary: rgba(var(--color-text-secondary));
-  --color-text-tertiary: rgba(var(--color-text-tertiary));
+  --color-text: rgba(var(--text-primary));
+  --color-text-secondary: rgba(var(--text-secondary));
+  --color-text-tertiary: rgba(var(--text-tertiary));
   --color-border: rgba(var(--color-border));
   --color-brand: rgba(var(--color-brand));
   --color-brand-hover: rgba(var(--color-brand-hover));

package/templates/react-app/src/styles/css/themes/_default.css

@@ -7,9 +7,9 @@
     --color-bg-elevated: 248 250 252; /* slate-50 */
 
     /* 文字颜色 */
-    --color-text-primary: 15 23 42; /* slate-900 */
-    --color-text-secondary: 71 85 105; /* slate-600 */
-    --color-text-tertiary: 100 116 139; /* slate-500 */
+    --text-primary: 15 23 42; /* slate-900 */
+    --text-secondary: 71 85 105; /* slate-600 */
+    --text-tertiary: 100 116 139; /* slate-500 */
 
     /* 边框颜色 */
     --color-border: 226 232 240; /* slate-200 */

package/templates/react-app/src/styles/css/themes/dark.css

@@ -7,9 +7,9 @@
     --color-bg-elevated: 51 65 85; /* slate-700 */
 
     /* 文字颜色 */
-    --color-text-primary: 255 255 255;
-    --color-text-secondary: 148 163 184; /* slate-400 */
-    --color-text-tertiary: 100 116 139; /* slate-500 */
+    --text-primary: 255 255 255;
+    --text-secondary: 148 163 184; /* slate-400 */
+    --text-tertiary: 100 116 139; /* slate-500 */
 
     /* 边框颜色 */
     --color-border: 51 65 85; /* slate-700 */

package/templates/react-app/src/styles/css/themes/pink.css

@@ -7,9 +7,9 @@
     --color-bg-elevated: 254 205 211; /* rose-200 */
 
     /* 文字颜色 */
-    --color-text-primary: 190 18 60; /* rose-700 */
-    --color-text-secondary: 225 29 72; /* rose-600 */
-    --color-text-tertiary: 244 63 94; /* rose-500 */
+    --text-primary: 190 18 60; /* rose-700 */
+    --text-secondary: 225 29 72; /* rose-600 */
+    --text-tertiary: 244 63 94; /* rose-500 */
 
     /* 边框颜色 */
     --color-border: 254 205 211; /* rose-200 */