@qlover/create-app 0.1.15 → 0.1.16

package/templates/react-app/src/pages/base/Request.tsx

@@ -1,94 +1,339 @@
 import { IOC } from '@/core/IOC';
-import { useControllerState } from '@lib/fe-react-controller';
 import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
 import { JSONStorageController } from '@/uikit/controllers/JSONStorageController';
 import { RequestController } from '@/uikit/controllers/RequestController';
+import { useMemo } from 'react';
+import { useSliceStore } from '@qlover/slice-store-react';
+
+function JSONValue({ value }: { value: unknown }) {
+  const output = useMemo(() => {
+    try {
+      return JSON.stringify(value, null, 2);
+    } catch {
+      return 'Invalid JSON';
+    }
+  }, [value]);
+  return (
+    <pre className="mt-1 text-sm text-gray-600 font-mono bg-gray-50 p-2 rounded overflow-x-auto">
+      {output}
+    </pre>
+  );
+}
 
 export default function Request() {
   const requestController = IOC(RequestController);
-  const requestControllerState = useControllerState(requestController);
-  const jsonStorageControllerState = useControllerState(
-    IOC(JSONStorageController)
-  );
+  const requestControllerState = useSliceStore(requestController);
+  const jsonStorageControllerState = useSliceStore(IOC(JSONStorageController));
   const { t } = useBaseRoutePage();
 
   return (
-    <div className="min-h-screen bg-gray-100 py-6 flex flex-col sm:py-12">
-      <div className="bg-white shadow-lg rounded-lg px-8 py-6">
-        {t('requestTimeout')}: {jsonStorageControllerState.requestTimeout}
-      </div>
-
-      <div className="bg-white shadow-lg rounded-lg px-8 py-6">
-        <button
-          className="bg-blue-500 text-white px-4 py-2 rounded-md"
-          onClick={requestController.onHello}
-        >
-          {requestControllerState.helloState.loading ? 'Loading...' : 'Hello'}
-        </button>
-        <div className="mt-4">
-          {t('helloResult')}:{' '}
-          {JSON.stringify(requestControllerState.helloState.result)}
-        </div>
-        <div className="mt-4">
-          {t('helloError')}:{' '}
-          {JSON.stringify(requestControllerState.helloState.error)}
+    <div className="min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-4xl mx-auto space-y-6">
+        {/* Request Timeout Information */}
+        <div className="bg-white shadow sm:rounded-lg p-6 border border-gray-200">
+          <h2 className="text-lg font-medium text-gray-900 mb-2">
+            {t('requestTimeout')}
+          </h2>
+          <div className="text-sm text-gray-600 font-mono bg-gray-50 p-2 rounded">
+            {jsonStorageControllerState.requestTimeout}
+          </div>
         </div>
-      </div>
 
-      <div className="bg-white shadow-lg rounded-lg px-8 py-6">
-        <button
-          className="bg-blue-500 text-white px-4 py-2 rounded-md"
-          onClick={requestController.onIpInfo}
-        >
-          {requestControllerState.ipInfoState.loading
-            ? t('loading')
-            : t('ipInfo')}
-        </button>
-        <div className="mt-4">
-          {t('ipInfoResult')}:{' '}
-          {JSON.stringify(requestControllerState.ipInfoState.result)}
+        {/* Hello Request Card */}
+        <div className="bg-white shadow sm:rounded-lg p-6 border border-gray-200">
+          <h2 className="text-lg font-medium text-gray-900 mb-4">
+            AI API: Hello
+          </h2>
+
+          <p className="text-sm text-gray-600 mb-4">
+            函数式 api, 使用了 FetchURLPlugin, RequestCommonPlugin,
+            ApiMockPlugin, RequestLogger 插件
+          </p>
+          <button
+            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+            onClick={requestController.onHello}
+          >
+            {requestControllerState.helloState.loading ? (
+              <>
+                <svg
+                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                {t('loading')}
+              </>
+            ) : (
+              'Hello'
+            )}
+          </button>
+
+          <div className="mt-4 space-y-2">
+            <div>
+              <p className="text-sm font-medium text-gray-700">
+                {t('helloResult')}:
+              </p>
+              <JSONValue value={requestControllerState.helloState.result} />
+            </div>
+
+            <div>
+              <p className="text-sm font-medium text-gray-700">
+                {t('helloError')}:
+              </p>
+              <JSONValue value={requestControllerState.helloState.error} />
+            </div>
+          </div>
         </div>
-      </div>
 
-      <div className="bg-white shadow-lg rounded-lg px-8 py-6">
-        <button
-          className="bg-blue-500 text-white px-4 py-2 rounded-md"
-          onClick={requestController.onRandomUser}
-        >
-          {requestControllerState.randomUserState.loading
-            ? t('loading')
-            : t('randomUser')}
-        </button>
-        <div className="mt-4">
-          {t('randomUserResult')}:{' '}
-          {JSON.stringify(requestControllerState.randomUserState.result)}
+        {/* IP Information Card */}
+        <div className="bg-white shadow sm:rounded-lg p-6 border border-gray-200">
+          <h2 className="text-lg font-medium text-gray-900 mb-4">
+            FeApi: IP Information
+          </h2>
+
+          <p className="text-sm text-gray-600 mb-4">
+            RequestScheduler 类式 api, 使用了 FetchURLPlugin,
+            RequestCommonPlugin, RequestLogger, ApiPickDataPlugin 插件, 其中
+            ApiPickDataPlugin 插件可以将返回类型统一扁平到 data 字段
+          </p>
+          <button
+            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+            onClick={requestController.onIpInfo}
+          >
+            {requestControllerState.ipInfoState.loading ? (
+              <>
+                <svg
+                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                {t('loading')}
+              </>
+            ) : (
+              t('ipInfo')
+            )}
+          </button>
+
+          <div className="mt-4">
+            <p className="text-sm font-medium text-gray-700">
+              {t('ipInfoResult')}:
+            </p>
+            <JSONValue value={requestControllerState.ipInfoState.result} />
+          </div>
         </div>
-        <div className="mt-4">
-          {t('randomUserError')}:{' '}
-          {JSON.stringify(requestControllerState.randomUserState.error)}
+
+        {/* Random User Card */}
+        <div className="bg-white shadow sm:rounded-lg p-6 border border-gray-200">
+          <h2 className="text-lg font-medium text-gray-900 mb-4">
+            UserApi:Random User
+          </h2>
+          <p className="text-sm text-gray-600 mb-4">
+            RequestTransaction 类式 api, 使用了 FetchURLPlugin,
+            RequestCommonPlugin, ApiMockPlugin, FetchAbortPlugin,
+            RequestLogger,ApiCatchPlugin 插件, 其中 FetchAbortPlugin 可以
+            中止请求, ApiCatchPlugin 可以将捕获的错误统一到 apiCatchResult 字段
+          </p>
+          <button
+            className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+            onClick={requestController.onRandomUser}
+          >
+            {requestControllerState.randomUserState.loading ? (
+              <>
+                <svg
+                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                {t('loading')}
+              </>
+            ) : (
+              t('randomUser')
+            )}
+          </button>
+
+          <div className="mt-4 space-y-2">
+            <div>
+              <p className="text-sm font-medium text-gray-700">
+                {t('randomUserResult')}:
+              </p>
+              <JSONValue
+                value={requestControllerState.randomUserState.result}
+              />
+            </div>
+
+            <div>
+              <p className="text-sm font-medium text-gray-700">
+                {t('randomUserError')}:
+              </p>
+              <JSONValue value={requestControllerState.randomUserState.error} />
+            </div>
+          </div>
         </div>
-      </div>
 
-      <div className="bg-white shadow-lg rounded-lg px-8 py-6">
-        <button
-          className="bg-blue-500 text-white px-4 py-2 rounded-md"
-          onClick={requestController.onTriggerAbortRequest}
-        >
-          {requestControllerState.abortState.loading
-            ? t('stopAbortRequest')
-            : t('triggerAbortRequest')}
-          <span className="text-xs">
-            {requestControllerState.abortState.loading ? t('loading') : ''}
-          </span>
-        </button>
-
-        <div className="mt-4">
-          {t('abortRequestResult')}:{' '}
-          {JSON.stringify(requestControllerState.abortState.result)}
+        {/* Api catch result */}
+        <div className="bg-white shadow sm:rounded-lg p-6 border border-gray-200">
+          <h2 className="text-lg font-medium text-gray-900 mb-4">
+            UserApi: Api Catch Result
+          </h2>
+          <button
+            className={`inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors ${
+              requestControllerState.apiCatchResultState.loading
+                ? 'bg-red-600 hover:bg-red-700'
+                : 'bg-blue-600 hover:bg-blue-700'
+            }`}
+            onClick={requestController.onTriggerApiCatchResult}
+          >
+            {requestControllerState.apiCatchResultState.loading ? (
+              <>
+                <svg
+                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                {t('stopApiCatchResult')}
+              </>
+            ) : (
+              t('triggerApiCatchResult')
+            )}
+          </button>
+
+          <div className="mt-4 space-y-2">
+            <div>
+              <p className="text-sm font-medium text-gray-700">
+                {t('abortRequestResult')}:
+              </p>
+              <JSONValue
+                value={requestControllerState.apiCatchResultState.result}
+              />
+            </div>
+
+            <div>
+              <p className="text-sm font-medium text-gray-700">
+                {t('abortRequestError')}:
+              </p>
+              <JSONValue
+                value={requestControllerState.apiCatchResultState.error}
+              />
+            </div>
+          </div>
         </div>
-        <div className="mt-4">
-          {t('abortRequestError')}:{' '}
-          {JSON.stringify(requestControllerState.abortState.error)}
+
+        {/* Abort Request Card */}
+        <div className="bg-white shadow sm:rounded-lg p-6 border border-gray-200">
+          <h2 className="text-lg font-medium text-gray-900 mb-4">
+            UserApi: Abort Request
+          </h2>
+          <button
+            className={`inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors ${
+              requestControllerState.abortState.loading
+                ? 'bg-red-600 hover:bg-red-700'
+                : 'bg-blue-600 hover:bg-blue-700'
+            }`}
+            onClick={requestController.onTriggerAbortRequest}
+          >
+            {requestControllerState.abortState.loading ? (
+              <>
+                <svg
+                  className="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                >
+                  <circle
+                    className="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    strokeWidth="4"
+                  ></circle>
+                  <path
+                    className="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  ></path>
+                </svg>
+                {t('stopAbortRequest')}
+              </>
+            ) : (
+              t('triggerAbortRequest')
+            )}
+          </button>
+
+          <div className="mt-4 space-y-2">
+            <div>
+              <p className="text-sm font-medium text-gray-700">
+                {t('abortRequestResult')}:
+              </p>
+              <JSONValue value={requestControllerState.abortState.result} />
+            </div>
+
+            <div>
+              <p className="text-sm font-medium text-gray-700">
+                {t('abortRequestError')}:
+              </p>
+              <JSONValue value={requestControllerState.abortState.error} />
+            </div>
+          </div>
         </div>
       </div>
     </div>

package/templates/react-app/src/pages/base/components/BaseHeader.tsx

@@ -1,5 +1,5 @@
-import ThemeSwitcher from '@/components/ThemeSwitcher';
-import LocaleLink from '@/components/LocaleLink';
+import ThemeSwitcher from '@/uikit/components/ThemeSwitcher';
+import LocaleLink from '@/uikit/components/LocaleLink';
 
 export default function BaseHeader() {
   return (

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

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

package/templates/react-app/src/{components → uikit/components}/ThemeSwitcher.tsx

@@ -1,12 +1,12 @@
 import { IOC } from '@/core/IOC';
-import { useController } from '@lib/fe-react-controller';
-import { ThemeController } from '@lib/fe-react-theme/ThemeController';
+import { ThemeService } from '@qlover/corekit-bridge';
+import { useSliceStore } from '@qlover/slice-store-react';
 import { useTranslation } from 'react-i18next';
 
 export default function ThemeSwitcher() {
-  const controller = useController(IOC(ThemeController));
-  const { theme } = controller.getState();
-  const themes = controller.getSupportedThemes();
+  const themeService = IOC(ThemeService);
+  const { theme } = useSliceStore(themeService);
+  const themes = themeService.getSupportedThemes();
   const { t } = useTranslation('common');
 
   return (
@@ -17,7 +17,7 @@ export default function ThemeSwitcher() {
       <select
         id="theme-select"
         value={theme}
-        onChange={(e) => controller.changeTheme(e.target.value)}
+        onChange={(e) => themeService.changeTheme(e.target.value)}
       >
         {themes.map((theme) => (
           <option key={theme} value={theme}>

package/templates/react-app/src/uikit/contexts/BaseRouteContext.ts

@@ -4,10 +4,13 @@ import { BasePageProvider } from '@/base/types/Page';
 import { RouteMeta } from '@/base/types/Page';
 import { createContext } from 'react';
 import merge from 'lodash/merge';
-import { i18nConfig } from '@config/i18n';
+import i18nConfig from '@config/i18n';
+import { WITHIN_PAGE_PROVIDER } from '@config/ErrorIdentifier';
+
+const { defaultNS } = i18nConfig;
 
 const defaultBaseRoutemeta = {
-  localNamespace: i18nConfig.defaultNS,
+  localNamespace: defaultNS,
   title: '',
   icon: ''
 };
@@ -18,7 +21,7 @@ export function useBaseRoutePage(): BasePageProvider {
   const meta = useContext(BaseRoutePageContext);
 
   if (!meta) {
-    throw new Error('useBaseRoutePage must be used within a PageProvider');
+    throw new Error(WITHIN_PAGE_PROVIDER);
   }
 
   const _meta = useMemo(() => merge({}, defaultBaseRoutemeta, meta), [meta]);

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

@@ -1,24 +1,21 @@
-import { FeController } from '@lib/fe-react-controller';
-import { FeApi } from '@/base/apis/feApi';
+import { FeApi } from '@/base/apis/feApi/FeApi';
 import cloneDeep from 'lodash/cloneDeep';
 import {
   ExecutorPlugin,
   RequestAdapterResponse,
   RequestAdapterFetchConfig
-} from '@qlover/fe-utils';
-
-function createDefaultState() {
-  return {
-    helloState: {
-      loading: false,
-      result: null as unknown,
-      error: null as unknown
-    }
+} from '@qlover/fe-corekit';
+import { inject, injectable } from 'inversify';
+import { SliceStore } from '@qlover/slice-store-react';
+
+class ExecutorControllerState {
+  helloState = {
+    loading: false,
+    result: null as Record<string, unknown> | null,
+    error: null as unknown
   };
 }
 
-export type ExecutorControllerState = ReturnType<typeof createDefaultState>;
-
 const TestPlugin: ExecutorPlugin<RequestAdapterFetchConfig> = {
   pluginName: 'test',
   async onSuccess({ parameters, returnValue }) {
@@ -33,24 +30,57 @@ const TestPlugin: ExecutorPlugin<RequestAdapterFetchConfig> = {
   }
 };
 
-export class ExecutorController extends FeController<ExecutorControllerState> {
-  private feApi: FeApi;
+@injectable()
+export class ExecutorController extends SliceStore<ExecutorControllerState> {
+  selector = {
+    helloState: (state: ExecutorControllerState) => state.helloState
+  };
 
-  constructor(feApi: FeApi) {
-    super(createDefaultState);
+  constructor(@inject(FeApi) private feApi: FeApi) {
+    super(ExecutorController.create);
 
+    // FIXME: not cloneDeep, create a new instance
     this.feApi = cloneDeep(feApi);
 
     this.feApi.usePlugin(TestPlugin);
   }
 
-  onTestPlugins = async () => {
-    console.log('onTestPlugins');
+  static create(): ExecutorControllerState {
+    return new ExecutorControllerState();
+  }
 
-    const res = await this.feApi.get('/api/v1/executor/test', {
-      responseType: 'text'
+  onTestPlugins = async () => {
+    this.emit({
+      ...this.state,
+      helloState: {
+        loading: true,
+        result: null,
+        error: null
+      }
     });
 
-    console.log('res', res);
+    try {
+      const res = await this.feApi.get('/api/v1/executor/test', {
+        responseType: 'text'
+      });
+
+      this.emit({
+        ...this.state,
+        helloState: {
+          loading: false,
+          result: res,
+          error: null
+        }
+      });
+    } catch (error) {
+      this.emit({
+        ...this.state,
+        helloState: {
+          loading: false,
+          result: null,
+          error
+        }
+      });
+    }
   };
 }

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

@@ -1,5 +1,5 @@
-import { FeController } from '@lib/fe-react-controller';
-import { JSONStorage } from '@qlover/fe-utils';
+import { JSONStorage } from '@qlover/fe-corekit';
+import { SliceStore } from '@qlover/slice-store-react';
 import { random } from 'lodash';
 
 interface JSONStoragePageState {
@@ -9,7 +9,11 @@ interface JSONStoragePageState {
   requestTimeout: number;
 }
 
-export class JSONStorageController extends FeController<JSONStoragePageState> {
+export class JSONStorageController extends SliceStore<JSONStoragePageState> {
+  selector = {
+    requestTimeout: (state: JSONStoragePageState) => state.requestTimeout
+  };
+
   constructor(private storage: JSONStorage) {
     super(() => ({
       testKey1: storage.getItem('testKey1') ?? 0,