@qlover/create-app 0.3.3 → 0.3.4

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

@@ -5,156 +5,25 @@
     --color-bg-base: 255 241 242; /* rose-50 */
     --color-bg-secondary: 255 228 230; /* rose-100 */
     --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 */
-    
+
     /* 边框颜色 */
     --color-border: 254 205 211; /* rose-200 */
-    
+
     /* 品牌色 */
     --color-brand: 225 29 72; /* rose-600 */
     --color-brand-hover: 244 63 94; /* rose-500 */
-  }
-}
-
-/* custom variables - for antd and custom css */
-[data-theme='pink'],
-[data-theme='pink'] .fe-theme {
-  /* Antd 主色调相关变量 - 玫瑰色主题 */
-  --fe-color-primary: #f472b6; /* pink-400 */
-  --fe-color-primary-hover: #ec4899; /* pink-500 */
-  --fe-color-primary-active: #db2777; /* pink-600 */
-  --fe-color-primary-bg: rgba(244, 114, 182, 0.1); /* pink-400 with 0.1 opacity */
-  --fe-color-primary-border: #f472b6; /* pink-400 */
-  --fe-color-primary-text: #f472b6; /* pink-400 */
-  --fe-color-primary-text-hover: #ec4899; /* pink-500 */
-  --fe-color-primary-text-active: #db2777; /* pink-600 */
-  --fe-color-primary-deprecated-bg: #f472b6; /* pink-400 */
-  --fe-color-primary-deprecated-border: #f472b6; /* pink-400 */
-  
-  /* Antd 基础变量 */
-  --ant-color-bg-container: rgb(255 241 242);
-  --ant-color-bg-elevated: rgb(254 205 211);
-  --ant-color-text: rgba(190 18 60 / 0.85);
-  --ant-color-text-secondary: rgba(190 18 60 / 0.45);
-  --ant-color-text-tertiary: rgba(190 18 60 / 0.35);
-  --ant-color-text-quaternary: rgba(190 18 60 / 0.15);
-  --ant-color-text-placeholder: rgba(190 18 60 / 0.25);
-  --ant-color-border: rgb(254 205 211);
-
-  /* Antd Input 组件变量 */
-  &.ant-input-css-var {
-    /* Input 背景色 */
-    --fe-input-bg: var(--ant-color-bg-container);
-    --fe-input-hover-bg: var(--ant-color-bg-elevated);
-    --fe-input-active-bg: var(--ant-color-bg-elevated);
-    --fe-input-addon-bg: rgba(190 18 60, 0.02);
-
-    /* Input 边框颜色 */
-    --fe-input-border-color: var(--ant-color-border);
-    --fe-input-hover-border-color: rgb(var(--color-brand));
-    --fe-input-active-border-color: rgb(var(--color-brand));
-
-    /* Input 阴影效果 */
-    --fe-input-active-shadow: 0 0 0 2px rgba(var(--color-brand), 0.1);
-  }
-
-  /* 登录页特定样式 */
-  --login-card-shadow: 0 4px 12px rgba(244 63 94 / 0.15);
-  --login-input-bg: var(--ant-color-bg-container);
-  --login-input-border: var(--ant-color-border);
-  --login-button-text: rgb(255 255 255);
-  --login-social-button-bg: var(--ant-color-bg-container);
-  --login-social-button-border: var(--ant-color-border);
-
-  /* Antd Button 组件变量 */
-  &.ant-btn {
-    /* 玫瑰色主题 */
-    --fe-button-primary-color: #fff;
-    --fe-button-primary-bg: #f472b6; /* pink-400 */
-    --fe-button-primary-hover-bg: #ec4899; /* pink-500 */
-    --fe-button-primary-active-bg: #db2777; /* pink-600 */
-    --fe-button-primary-shadow: 0 2px 0 rgba(219, 39, 119, 0.15);
-
-    /* 默认按钮 */
-    --fe-button-default-color: rgb(190 18 60);
-    --fe-button-default-bg: rgb(255 241 242);
-    --fe-button-default-border-color: rgb(254 205 211);
-    --fe-button-default-hover-bg: rgb(255 241 242);
-    --fe-button-default-hover-color: #f472b6;
-    --fe-button-default-hover-border-color: #f472b6;
-    --fe-button-default-active-bg: rgb(255 241 242);
-    --fe-button-default-active-color: #db2777;
-    --fe-button-default-active-border-color: #db2777;
-    --fe-button-default-shadow: 0 2px 0 rgba(244, 114, 182, 0.1);
-
-    /* 其他状态 */
-    --fe-button-text-hover-bg: rgba(244, 114, 182, 0.08);
-    --fe-button-border-color-disabled: rgb(254 205 211);
-  }
-
-  /* Antd 图标相关变量 */
-  --fe-color-icon: rgba(190, 18, 60, 0.45); /* 粉色主题下的图标颜色 */
-  --fe-color-icon-hover: rgba(190, 18, 60, 0.85); /* 粉色主题下图标悬停颜色 */
-  --fe-color-icon-active: var(--fe-color-primary); /* 使用主题粉色 */
-  --fe-color-icon-disabled: rgba(190, 18, 60, 0.25); /* 粉色主题下禁用状态 */
-
-  /* Antd Select 组件变量 */
-  &.ant-select-css-var {
-    --fe-select-internal_fixed_item_margin: 2px;
-    --fe-select-z-index-popup: 1050;
-    --fe-select-option-selected-color: rgba(190, 18, 60, 0.88);
-    --fe-select-option-selected-font-weight: 600;
-    --fe-select-option-selected-bg: var(--fe-color-primary-bg);
-    --fe-select-option-active-bg: rgba(190, 18, 60, 0.04);
-    --fe-select-option-padding: 5px 12px;
-    --fe-select-option-font-size: 14px;
-    --fe-select-option-line-height: 1.5714285714285714;
-    --fe-select-option-height: 32px;
-    --fe-select-selector-bg: var(--fe-color-bg-container);
-    --fe-select-clear-bg: var(--fe-color-bg-container);
-    --fe-select-single-item-height-lg: 40px;
-    --fe-select-multiple-item-bg: rgba(190, 18, 60, 0.06);
-    --fe-select-multiple-item-border-color: transparent;
-    --fe-select-multiple-item-height: 24px;
-    --fe-select-multiple-item-height-sm: 16px;
-    --fe-select-multiple-item-height-lg: 32px;
-    --fe-select-multiple-selector-bg-disabled: rgba(190, 18, 60, 0.04);
-    --fe-select-multiple-item-color-disabled: rgba(190, 18, 60, 0.25);
-    --fe-select-multiple-item-border-color-disabled: transparent;
-    --fe-select-show-arrow-padding-inline-end: 18px;
-    --fe-select-hover-border-color: var(--fe-color-primary);
-    --fe-select-active-border-color: var(--fe-color-primary-active);
-    --fe-select-active-outline-color: var(--fe-color-primary-bg);
-    --fe-select-select-affix-padding: 4px;
-  }
-
-  /* Antd Tag 组件变量 */
-  &.ant-tag-css-var {
-    --fe-tag-default-bg: var(--fe-color-bg-container);
-    --fe-tag-default-color: var(--fe-color-text);
-    --fe-tag-default-border-color: var(--fe-color-border);
-    --fe-tag-font-size: 12px;
-    --fe-tag-line-height: 20px;
-    --fe-tag-height: 22px;
-    --fe-tag-padding-horizontal: 7px;
-    --fe-tag-margin: 0 8px 0 0;
-    --fe-tag-border-radius: 4px;
-  }
 
-  /* Antd Progress 组件变量 */
-  &.ant-progress-css-var {
-    --fe-progress-default-color: var(--fe-color-primary);
-    --fe-progress-remaining-color: var(--fe-color-bg-elevated);
-    --fe-progress-text-color: var(--fe-color-text);
-    --fe-progress-line-font-size: 14px;
-    --fe-progress-circle-font-size: 14px;
-    --fe-progress-circle-text-color: var(--fe-color-text);
-    --fe-progress-circle-trail-color: var(--fe-color-bg-elevated);
-    --fe-progress-circle-stroke-width: 6px;
-    --fe-progress-line-stroke-width: 8px;
+    /* 登录页特定样式 */
+    --login-card-shadow: 0 4px 12px rgba(244 63 94 / 0.15);
+    --login-input-bg: var(--ant-color-bg-container);
+    --login-input-border: var(--ant-color-border);
+    --login-button-text: rgb(255 255 255);
+    --login-social-button-bg: var(--ant-color-bg-container);
+    --login-social-button-border: var(--ant-color-border);
   }
 }

package/templates/react-app/src/uikit/components/RouterRenderComponent.tsx

@@ -1,7 +1,7 @@
 import { Suspense } from 'react';
 import { Loading } from './Loading';
 import BaseRouteProvider from '@/uikit/providers/BaseRouteProvider';
-import { RouterLoaderRender } from '@/base/cases/router-loader';
+import { RouterLoaderRender } from '@/base/cases/RouterLoader';
 
 export const RouterRenderComponent: RouterLoaderRender = (route) => {
   const Component = route.element();

package/templates/react-app/src/uikit/controllers/RouterController.ts

@@ -1,4 +1,4 @@
-import type { RouteConfigValue } from '@/base/cases/router-loader';
+import type { RouteConfigValue } from '@/base/cases/RouterLoader';
 import type { NavigateFunction, NavigateOptions } from 'react-router-dom';
 import type { UIDependenciesInterface } from '@/base/port/UIDependenciesInterface';
 import type { LoggerInterface } from '@qlover/logger';

package/templates/react-app/src/uikit/controllers/UserController.ts

@@ -9,7 +9,7 @@ import { inject, injectable } from 'inversify';
 import { IOCIdentifier } from '@/core/IOC';
 import { LoginInterface } from '@/base/port/LoginInterface';
 import { UserApi } from '@/base/apis/userApi/UserApi';
-import { AppError } from '@/base/cases/appError/AppError';
+import { AppError } from '@/base/cases/AppError';
 import { LOCAL_NO_USER_TOKEN } from '@config/Identifier.Error';
 import { SliceStore } from '@qlover/slice-store-react';
 

package/templates/react-app/tsconfig.json

@@ -20,10 +20,11 @@
     "types": ["vite/client"],
     "paths": {
       "@/*": ["./src/*"],
-      "@config/*": ["./config/*"]
+      "@config/*": ["./config/*"],
+      "@lib/*": ["./lib/*"]
     },
     "experimentalDecorators": true
   },
-  "include": ["src"],
+  "include": ["src", "lib/**/*.tsx"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

package/templates/react-app/tsconfig.node.json

@@ -9,5 +9,6 @@
       "@config/*": ["./config/*"]
     }
   },
-  "include": ["vite.config.ts", "fe-prod", "config"]
+  "include": ["vite.config.ts", "config", "lib"],
+  "exclude": ["lib/**/*.tsx"]
 }

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

@@ -1,12 +1,13 @@
 import { defineConfig } from 'vitest/config';
 import react from '@vitejs/plugin-react';
-import { envPrefix } from './config/common';
+import { envPrefix, overrideAntdThemeMode } from './config/common';
 import { name, version } from './package.json';
 import tsconfigPaths from 'vite-tsconfig-paths';
 import envConfig from '@qlover/corekit-bridge/vite-env-config/index';
-import ts2Locales from '@qlover/corekit-bridge/vite-ts-to-locales/index';
+import ts2Locales from '@brain-toolkit/ts2locales/vite';
 import i18nConfig from './config/i18n';
 import tailwindcss from '@tailwindcss/vite';
+import viteDeprecatedAntd from '@brain-toolkit/antd-theme-override/vite';
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -34,6 +35,11 @@ export default defineConfig({
           target: './public/locales/{{lng}}/common.json'
         }
       ]
+    }),
+    viteDeprecatedAntd({
+      mode: overrideAntdThemeMode,
+      overriedCssFilePath: './src/styles/css/antd-themes/no-context.css',
+      targetPath: './src/base/types/deprecated-antd.d.ts'
     })
   ],
   envPrefix: envPrefix,

package/templates/react-app/src/base/cases/router-loader/index.ts

@@ -1,90 +0,0 @@
-import { RouteObject } from 'react-router-dom';
-import isString from 'lodash/isString';
-import type { ComponentType, LazyExoticComponent, ReactNode } from 'react';
-
-export type ComponentValue = Record<string, () => unknown>;
-
-type RouteComponentType<T = unknown> =
-  | ComponentType<T>
-  | LazyExoticComponent<ComponentType<T>>;
-
-export type RouteConfigValue = Omit<RouteObject, 'element' | 'children'> & {
-  /**
-   * 路径
-   *
-   * FIXME: support `ReactNode`
-   */
-  element?: string;
-  children?: RouteConfigValue[];
-  meta?: Record<string, unknown>;
-};
-
-export type RouterLoaderRender = (
-  route: Omit<RouteConfigValue, 'element'> & {
-    element: () => RouteComponentType;
-  }
-) => ReactNode;
-
-export type RouterLoaderOptions = {
-  /**
-   * 路由配置
-   */
-  routes?: RouteConfigValue[];
-
-  /**
-   * 组件映射表
-   */
-  componentMaps?: ComponentValue;
-
-  /**
-   * 渲染路由
-   */
-  render: RouterLoaderRender;
-};
-
-export class RouterLoader {
-  constructor(private readonly options: RouterLoaderOptions) {
-    if (!options.render) {
-      throw new Error('RouterLoader render is required');
-    }
-  }
-
-  getComponentMaps(): ComponentValue {
-    const { componentMaps = {} } = this.options;
-
-    return componentMaps;
-  }
-
-  getComponent(element: string): () => RouteComponentType {
-    const maps = this.getComponentMaps();
-
-    const component = maps[element];
-
-    if (!component) {
-      throw new Error(`Component not found: ${element}`);
-    }
-
-    return component as () => RouteComponentType;
-  }
-
-  toRoute(route: RouteConfigValue): RouteObject {
-    const { render } = this.options;
-    const { element, children, ...rest } = route;
-
-    if (!element || !isString(element)) {
-      console.warn(
-        `Invalid route, path is: ${route.path}, element is: ${element}`
-      );
-    }
-
-    const componet = this.getComponent(element || '404');
-    const Element = render({ ...rest, element: componet });
-
-    // @ts-expect-error
-    return {
-      ...rest,
-      element: Element,
-      children: children?.map((child) => this.toRoute(child))
-    };
-  }
-}

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

@@ -1,36 +0,0 @@
-import type { EnvConfigInterface } from '@qlover/corekit-bridge';
-
-export class AppConfigImpl implements EnvConfigInterface {
-  readonly appName = '';
-  readonly appVersion = '';
-  /**
-   * vite mode
-   *
-   */
-  readonly env: string = '';
-
-  readonly userTokenStorageKey = '';
-  readonly openAiModels = [
-    'gpt-4o-mini',
-    'gpt-3.5-turbo',
-    'gpt-3.5-turbo-2',
-    'gpt-4',
-    'gpt-4-32k'
-  ];
-  readonly openAiBaseUrl = '';
-  readonly openAiToken = '';
-  readonly openAiTokenPrefix = '';
-  readonly openAiRequireToken = true;
-  readonly loginUser = '';
-  readonly loginPassword = '';
-
-  readonly feApiBaseUrl = '';
-  readonly userApiBaseUrl = '';
-
-  readonly aiApiBaseUrl = 'https://api.openai.com/v1';
-  readonly aiApiToken = '';
-  readonly aiApiTokenPrefix = 'Bearer';
-  readonly aiApiRequireToken = true;
-}
-
-export default new AppConfigImpl();