@qlover/create-app 0.0.1

package/templates/fe-react/src/components/ProcessProvider.tsx

@@ -0,0 +1,41 @@
+import { createContext, useEffect } from 'react';
+import { pageProcesser, routerController, userController } from '@/containers';
+import { useLanguageGuard } from '@/hooks/useLanguageGuard';
+import { useStrictEffect } from '@/hooks/useStrictEffect';
+import { PageProcesser } from '@/services/pageProcesser';
+import { Navigate, useNavigate } from 'react-router-dom';
+import { useControllerState } from '@lib/fe-react-controller';
+import { Loading } from './Loading';
+
+const PageProcesserContext = createContext<PageProcesser>(pageProcesser);
+
+export function ProcessProvider({ children }: { children: React.ReactNode }) {
+  useLanguageGuard();
+  const { success } = useControllerState(userController);
+
+  const navigate = useNavigate();
+
+  useStrictEffect(() => {
+    pageProcesser.init();
+  }, []);
+
+  useEffect(() => {
+    routerController.setDependencies({
+      navigate
+    });
+  }, [navigate]);
+
+  if (!success) {
+    return <Loading fullscreen />;
+  }
+
+  if (!userController.isAuthenticated()) {
+    return <Navigate to="/login" />;
+  }
+
+  return (
+    <PageProcesserContext.Provider value={pageProcesser}>
+      {children}
+    </PageProcesserContext.Provider>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { themeController } from '@/containers';
+import { useController } from '@lib/fe-react-controller';
+import { useTranslation } from 'react-i18next';
+
+export default function ThemeSwitcher() {
+  const controller = useController(themeController);
+  const { theme } = controller.getState();
+  const themes = controller.getSupportedThemes();
+  const { t } = useTranslation('common');
+
+  return (
+    <div className="flex items-center gap-2">
+      <label className="text-black" htmlFor="theme-select">
+        {t('header.theme.label')}
+      </label>
+      <select
+        id="theme-select"
+        value={theme}
+        onChange={(e) => controller.changeTheme(e.target.value)}
+      >
+        {themes.map((theme) => (
+          <option key={theme} value={theme}>
+            {theme}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

package/templates/fe-react/src/containers/context/BaseRouteContext.ts

@@ -0,0 +1,27 @@
+import { useTranslation } from 'react-i18next';
+import { useContext } from 'react';
+import { BasePageProvider } from '@/types/Page';
+import { RouteMeta } from '@/types/Page';
+import { createContext } from 'react';
+import { defaultBaseRoutemeta } from '@config/app.common';
+import merge from 'lodash/merge';
+
+export const BaseRoutePageContext = createContext<RouteMeta>({});
+
+export function useBaseRoutePage(): BasePageProvider {
+  const meta = useContext(BaseRoutePageContext);
+
+  if (!meta) {
+    throw new Error('useBaseRoutePage must be used within a PageProvider');
+  }
+
+  const _meta = merge({}, defaultBaseRoutemeta, meta);
+
+  const i18n = useTranslation(_meta.localNamespace);
+
+  return {
+    meta: _meta,
+    i18n,
+    t: i18n.t
+  };
+}

package/templates/fe-react/src/containers/context/BaseRouteProvider.tsx

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { RouteMeta } from '@/types/Page';
+import { BaseRoutePageContext } from './BaseRouteContext';
+
+export default function BaseRouteProvider(props: PropsWithChildren<RouteMeta>) {
+  return (
+    <BaseRoutePageContext.Provider value={props}>
+      {props.children}
+    </BaseRoutePageContext.Provider>
+  );
+}

package/templates/fe-react/src/containers/globals.ts

@@ -0,0 +1,31 @@
+//! global variables, don't import any dependencies and don't have side effects
+import {
+  JSONStorage,
+  JSONSerializer,
+  Logger,
+  SyncStorage
+} from '@qlover/fe-utils';
+
+export const env = import.meta.env.VITE_NODE_ENV;
+export const isProduction = env === 'production';
+
+/**
+ * Global logger
+ */
+export const logger = new Logger({
+  silent: isProduction,
+  debug: !isProduction
+});
+
+/**
+ * Override JSONSerializer to use the global logger
+ */
+export const JSON = new JSONSerializer();
+
+/**
+ * Override JSONStorage to use the global local storage
+ */
+export const localJsonStorage = new JSONStorage(
+  localStorage as SyncStorage<string, string>,
+  JSON
+);

package/templates/fe-react/src/containers/index.ts

@@ -0,0 +1,71 @@
+//! dont't import tsx, only ts file
+import { FetchAbortPlugin, FetchURLPlugin } from '@qlover/fe-utils';
+import { OpenAIClient } from '@lib/openAiApi';
+import { ThemeController } from '@lib/fe-react-theme/ThemeController';
+import { ExecutorController } from '@/services/controllers/ExecutorController';
+import { JSONStorageController } from '@/services/controllers/JSONStorageController';
+import { RequestController } from '@/services/controllers/RequestController';
+import { UserController } from '@/services/controllers/UserController';
+import { RouterController } from '@/services/controllers/RouterController';
+import { FeApi, FeApiMockPlugin } from '@/services/feApi';
+import { defaultFeApiConfig, openAiConfig } from '@config/app.common';
+import themeConfigJson from '@config/theme.json';
+import appRouterConfig from '@config/app.router.json';
+import mockDataJson from '@config/feapi.mock.json';
+import { RequestCommonPlugin } from '@lib/request-common-plugin';
+import { localJsonStorage, logger } from './globals';
+import { RequestLogger } from '@/utils/RequestLogger';
+import { RouteConfig } from '@/types/Page';
+import { PageProcesser } from '@/services/pageProcesser';
+
+// common plugins
+const requestLogger = new RequestLogger(logger);
+export const feApiAbort = new FetchAbortPlugin();
+
+// open ai api
+openAiConfig.commonPluginConfig.requestDataSerializer = (data) =>
+  JSON.stringify(data);
+export const openAiApi = new OpenAIClient(openAiConfig).usePlugin(
+  requestLogger
+);
+
+export const feApi = new FeApi({
+  abortPlugin: feApiAbort,
+  config: defaultFeApiConfig.adapter
+})
+  .usePlugin(new FetchURLPlugin())
+  .usePlugin(
+    new RequestCommonPlugin({
+      ...defaultFeApiConfig.commonPluginConfig,
+      token: () => localJsonStorage.getItem('fe_user_token')
+    })
+  )
+  .usePlugin(new FeApiMockPlugin(mockDataJson))
+  .usePlugin(requestLogger)
+  .usePlugin(feApiAbort);
+
+// ui layer controller
+export const routerController = new RouterController({
+  config: appRouterConfig.base as RouteConfig,
+  logger
+});
+
+export const jsonStorageController = new JSONStorageController(
+  localJsonStorage
+);
+export const requestController = new RequestController(openAiApi, feApi);
+export const executorController = new ExecutorController(feApi);
+export const userController = new UserController({
+  storageKey: 'fe_user_token',
+  storage: localJsonStorage,
+  feApi,
+  routerController
+});
+export const themeController = new ThemeController({
+  ...themeConfigJson.override,
+  storage: localJsonStorage
+});
+
+export const pageProcesser = new PageProcesser({
+  logger
+}).usePlugin(userController);

package/templates/fe-react/src/hooks/useLanguageGuard.ts

@@ -0,0 +1,25 @@
+import { I18nService } from '@/services/i18n';
+import { I18nServiceLocale } from '@config/i18n';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
+
+/**
+ * Language Guard
+ *
+ * if language not found, redirect to 404 page
+ *
+ * TODO: if language not found, use default language
+ */
+export function useLanguageGuard() {
+  const { lng } = useParams<{ lng: I18nServiceLocale }>();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!lng) {
+      navigate('/404', { replace: true });
+    } else if (!I18nService.isValidLanguage(lng)) {
+      navigate('/404', { replace: true });
+    }
+  }, [lng, navigate]);
+}

package/templates/fe-react/src/hooks/useStrictEffect.ts

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * In React Strict Mode, ensure that the effect is executed only once when each dependency changes
+ * @param effect The effect function to execute
+ * @param deps The dependency array
+ */
+export const useStrictEffect = (
+  effect: () => void | (() => void),
+  deps?: React.DependencyList
+) => {
+  const mountedRef = useRef(false);
+  const depsRef = useRef(deps);
+
+  useEffect(() => {
+    // Check if the dependencies have changed
+    const depsChanged = !deps || !depsRef.current || deps.some((dep, i) => dep !== depsRef.current![i]);
+    
+    // Update the dependency reference
+    depsRef.current = deps;
+
+    // If it's the first mount or the dependencies have changed, execute the effect
+    if (!mountedRef.current || depsChanged) {
+      mountedRef.current = true;
+      return effect();
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+}; 

package/templates/fe-react/src/main.tsx

@@ -0,0 +1,15 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import * as feGlobals from '@/containers/globals';
+
+// set global feGlobals
+if (typeof window !== 'undefined') {
+  window.feGlobals = Object.freeze(Object.assign({}, feGlobals));
+}
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/templates/fe-react/src/pages/404.tsx

@@ -0,0 +1,14 @@
+import { useBaseRoutePage } from '@/containers/context/BaseRouteContext';
+
+export default function NotFound({ route }: { route?: string }) {
+  const { t } = useBaseRoutePage();
+  return (
+    <div className="flex flex-col justify-center min-h-screen py-6 bg-background sm:py-12">
+      <div className="relative py-3 mx-auto sm:max-w-xl">
+        <h1 className="text-primary text-2xl font-bold text-center">
+          404 - {route ? `${t('404.notComponent')}: ${route}` : t('404.notPage')}
+        </h1>
+      </div>
+    </div>
+  );
+}

package/templates/fe-react/src/pages/500.tsx

@@ -0,0 +1,14 @@
+import { useBaseRoutePage } from '@/containers/context/BaseRouteContext';
+
+export default function NotFound500() {
+  const { t } = useBaseRoutePage();
+  return (
+    <div className="flex flex-col justify-center min-h-screen py-6 bg-background sm:py-12">
+      <div className="relative py-3 mx-auto sm:max-w-xl">
+        <h1 className="text-primary text-2xl font-bold text-center">
+          500 - {t('500.title')}
+        </h1>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,14 @@
+import { userController } from '@/containers';
+import { useController } from '@lib/fe-react-controller';
+import { Navigate, Outlet } from 'react-router-dom';
+
+export default function Layout() {
+  const controller = useController(userController);
+
+  // If user is authenticated, redirect to home page
+  if (controller.isAuthenticated()) {
+    return <Navigate to="/" replace />;
+  }
+
+  return <Outlet />;
+}

package/templates/fe-react/src/pages/auth/Login.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { useController } from '@lib/fe-react-controller';
+import { routerController, userController } from '@/containers';
+import { useBaseRoutePage } from '@/containers/context/BaseRouteContext';
+import { defaultLoginInfo } from '@config/app.common';
+
+export default function Login() {
+  const { t } = useBaseRoutePage();
+  const controller = useController(userController);
+  const [email, setEmail] = useState(defaultLoginInfo.name);
+  const [password, setPassword] = useState(defaultLoginInfo.password);
+  const [loading, setLoading] = useState(false);
+
+  const handleLogin = async () => {
+    try {
+      setLoading(true);
+      await controller.login({ username: email, password });
+      // Redirect or show success message
+      routerController.replaceToHome();
+    } catch (error) {
+      // Handle login error
+      console.error(error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
+      <div className="relative py-3 sm:max-w-xl sm:mx-auto">
+        <div className="bg-white shadow-lg rounded-lg px-8 py-6">
+          <h1 className="text-base font-bold text-center text-gray-800 mb-8">
+            {t('login')}
+          </h1>
+          <div className="space-y-6">
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder={t('email')}
+              className="w-full px-4 py-2 border rounded-lg"
+            />
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder={t('password')}
+              className="w-full px-4 py-2 border rounded-lg"
+            />
+            <button
+              onClick={handleLogin}
+              className="w-full px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors duration-200"
+              disabled={loading}
+            >
+              {loading ? 'Loading...' : t('login')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/fe-react/src/pages/auth/Register.tsx

@@ -0,0 +1,3 @@
+export default function Register() {
+  return <div>Register</div>;
+}

package/templates/fe-react/src/pages/base/About.tsx

@@ -0,0 +1,12 @@
+import { useBaseRoutePage } from '@/containers/context/BaseRouteContext';
+
+export default function About() {
+  const { t } = useBaseRoutePage();
+  return (
+    <div className="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
+      <div className="relative py-3 sm:max-w-xl sm:mx-auto">
+        <h1 className="text-2xl font-bold text-center">{t('title')}</h1>
+      </div>
+    </div>
+  );
+}

package/templates/fe-react/src/pages/base/Executor.tsx

@@ -0,0 +1,38 @@
+import { executorController, jsonStorageController } from '@/containers';
+import { useControllerState } from '@lib/fe-react-controller';
+import { useBaseRoutePage } from '@/containers/context/BaseRouteContext';
+
+export default function Executor() {
+  const jsonStorageControllerState = useControllerState(jsonStorageController);
+  const { t } = useBaseRoutePage();
+
+  return (
+    <div className="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
+      <div className="relative py-3 sm:max-w-xl sm:mx-auto">
+        <div className="bg-white shadow-lg rounded-lg px-8 py-6">
+          <h1 className="text-3xl font-bold text-center text-gray-800 mb-8">
+            {t('executorDemo')}
+          </h1>
+        </div>
+
+        <div className="bg-white shadow-lg rounded-lg px-8 py-6">
+          {t('requestTimeout')}: {jsonStorageControllerState.requestTimeout}
+        </div>
+        <div className="space-y-6">
+          <div className="p-6 bg-gray-50 rounded-lg">
+            <h2 className="text-xl font-semibold text-gray-800 mb-4">
+              {t('executorTestPlugin')}
+            </h2>
+
+            <button
+              className="bg-blue-500 text-white px-4 py-2 rounded-md"
+              onClick={executorController.onTestPlugins}
+            >
+              {t('testPlugin')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/fe-react/src/pages/base/Home.tsx

@@ -0,0 +1,78 @@
+import LocaleLink from '@/components/LocaleLink';
+import { useBaseRoutePage } from '../../containers/context/BaseRouteContext';
+
+export default function Home() {
+  const { t } = useBaseRoutePage();
+
+  return (
+    <div className="min-h-screen bg-gray-100/90 py-6 flex flex-col justify-center sm:py-12">
+      <div className="relative py-3 sm:max-w-xl sm:mx-auto">
+        <div className="bg-white shadow-lg rounded-lg px-8 py-6">
+          <h1 className="text-3xl font-bold text-center text-gray-800 mb-8">
+            {t('welcome')}
+          </h1>
+
+          <div className="space-y-6">
+            <div className="text-center text-gray-600 mb-8">
+              {t('description')}
+            </div>
+
+            <div className="grid gap-4">
+              <LocaleLink
+                href="/about"
+                className="block p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors duration-200"
+              >
+                <h2 className="text-xl font-semibold text-blue-700 mb-2">
+                  {t('about')}
+                </h2>
+                <p className="text-gray-600">{t('about_description')}</p>
+              </LocaleLink>
+
+              <LocaleLink
+                href="/jsonstorage"
+                className="block p-4 bg-green-50 rounded-lg hover:bg-green-100 transition-colors duration-200"
+              >
+                <h2 className="text-xl font-semibold text-green-700 mb-2">
+                  {t('jsonstorage')}
+                </h2>
+                <p className="text-gray-600">{t('jsonstorage_description')}</p>
+              </LocaleLink>
+
+              <LocaleLink
+                href="/request"
+                className="block p-4 bg-red-50 rounded-lg hover:bg-red-100 transition-colors duration-200"
+              >
+                <h2 className="text-xl font-semibold text-red-700 mb-2">
+                  {t('request')}
+                </h2>
+                <p className="text-gray-600">{t('request_description')}</p>
+              </LocaleLink>
+            </div>
+
+            <div className="mt-8 text-center">
+              <LocaleLink
+                href="https://github.com/qlover/fe-base"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center text-gray-600 hover:text-gray-800"
+              >
+                <svg
+                  className="w-5 h-5 mr-2"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+                Visit GitHub
+              </LocaleLink>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/fe-react/src/pages/base/JSONStorage.tsx

@@ -0,0 +1,124 @@
+import { jsonStorageController } from '@/containers';
+import { useController, useControllerState } from '@lib/fe-react-controller';
+import { useBaseRoutePage } from '@/containers/context/BaseRouteContext';
+import template from 'lodash/template';
+
+export default function JSONStorage() {
+  const controllerState = useControllerState(
+    useController(jsonStorageController)
+  );
+
+  const { t } = useBaseRoutePage();
+
+  return (
+    <div className="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
+      <div className="relative py-3 sm:max-w-xl sm:mx-auto">
+        <div className="bg-white shadow-lg rounded-lg px-8 py-6">
+          <h1 className="text-3xl font-bold text-center text-gray-800 mb-8">
+            {t('title')}
+          </h1>
+
+          <div className="space-y-6">
+            {/* 无过期时间的测试 */}
+            <div className="p-6 bg-gray-50 rounded-lg">
+              <h2 className="text-xl font-semibold text-gray-800 mb-4">
+                {t('title2')}
+              </h2>
+              <div className="text-gray-600 mb-4">
+                {template(t('format.title'))({
+                  key: 'testKey1',
+                  min: 100,
+                  max: 9000,
+                })}
+              </div>
+
+              <div className="flex flex-col items-center space-y-4">
+                <button
+                  onClick={jsonStorageController.changeRandomTestKey1}
+                  className="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors duration-200"
+                >
+                  {t('setRandomValue')}
+                </button>
+
+                <div className="p-4 bg-white rounded-lg w-full text-center">
+                  <span className="text-gray-600">{t('currentValue')}: </span>
+                  <span className="font-semibold text-gray-800">
+                    {controllerState.testKey1}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* 带过期时间的测试 */}
+            <div className="p-6 bg-gray-50 rounded-lg">
+              <h2 className="text-xl font-semibold text-gray-800 mb-4">
+                {t('title3')}
+              </h2>
+              <div className="text-gray-600 mb-4">
+                {template(t('format.title'))({
+                  key: 'testKey2',
+                  min: 100,
+                  max: 9000,
+                })}
+              </div>
+
+              <div className="flex flex-col items-center space-y-4">
+                <div className="flex items-center space-x-4">
+                  <input
+                    type="number"
+                    value={controllerState.expireTime}
+                    onChange={(e) =>
+                      jsonStorageController.changeExpireTime(
+                        Number(e.target.value)
+                      )
+                    }
+                    className="px-4 py-2 border rounded-lg w-32"
+                    min="1000"
+                    step="1000"
+                  />
+                  <span className="text-gray-600">{t('ms')}</span>
+                </div>
+
+                <button
+                  onClick={jsonStorageController.onChangeRandomTestKey2}
+                  className="px-6 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors duration-200"
+                >
+                  {t('setExpireTime')}
+                </button>
+
+                <div className="p-4 bg-white rounded-lg w-full text-center">
+                  <span className="text-gray-600">{t('currentValue')}: </span>
+                  <span className="font-semibold text-gray-800">
+                    {controllerState.testKey2}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* 请求超时时间设置 */}
+            <div className="p-6 bg-gray-50 rounded-lg">
+              <h2 className="text-xl font-semibold text-gray-800 mb-4">
+                {t('title4')}
+              </h2>
+              <div className="flex items-center space-x-4">
+                <input
+                  type="number"
+                  value={controllerState.requestTimeout}
+                  onChange={(e) =>
+                    jsonStorageController.changeRequestTimeout(
+                      Number(e.target.value)
+                    )
+                  }
+                  className="px-4 py-2 border rounded-lg w-32"
+                  min="1000"
+                  step="1000"
+                />
+                <span className="text-gray-600">{t('ms')}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}