@qlover/create-app 0.7.5 → 0.7.7

package/dist/templates/next-app/src/styles/css/antd-themes/pink.css

@@ -0,0 +1,204 @@
+[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 */
+
+  /* 状态色 */
+  --fe-color-success: #52c41a;
+  --fe-color-warning: #faad14;
+  /* 警告信息相关颜色 - 粉色主题 */
+  --fe-color-warning-bg: #fff7e6;
+  --fe-color-warning-bg-hover: #fff0d9;
+  --fe-color-warning-border: #ffd591;
+  --fe-color-warning-border-hover: #ffc069;
+  --fe-color-warning-hover: #ffc069;
+  --fe-color-warning-active: #d4770c;
+  --fe-color-warning-text-hover: #ffc53d;
+  --fe-color-warning-text: #faad14;
+  --fe-color-warning-text-active: #d4770c;
+  --fe-color-error: #fb7185; /* rose-400 for error in pink theme */
+  --fe-color-info: var(--fe-color-primary);
+  --fe-color-link: var(--fe-color-primary);
+
+  /* Antd 基础变量 */
+  --ant-color-bg-container: rgb(255 241 242);
+  --ant-color-bg-elevated: rgb(254 205 211);
+  --fe-color-text-heading: rgb(159 18 57); /* rose-800 用于粉色主题标题文本 */
+  --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 图标相关变量 */
+  --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 Input 组件变量 */
+  .ant-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);
+  }
+
+  /* Antd Button 组件变量 */
+  .ant-btn,
+  .ant-btn-css-var {
+    /* 玫瑰色主题 */
+    --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 Select 组件变量 */
+  .ant-select,
+  .ant-select-css-var {
+    --fe-select-internal_fixed_item_margin: 2px;
+    --fe-select-z-index-popup: var(--zi-select);
+    --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,
+  .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,
+  .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;
+  }
+
+  /* Antd Message 组件变量 */
+  .ant-message,
+  .ant-message-css-var {
+    --fe-message-z-index-popup: var(--zi-message);
+    --fe-message-content-bg: var(--ant-color-bg-container);
+    --fe-message-content-padding: 9px 12px;
+    --fe-message-notice-content-padding: 10px 16px;
+    --fe-message-notice-content-bg: var(--ant-color-bg-container);
+    --fe-message-notice-content-shadow:
+      0 6px 16px 0 rgba(244, 114, 182, 0.08),
+      0 3px 6px -4px rgba(244, 114, 182, 0.12),
+      0 9px 28px 8px rgba(244, 114, 182, 0.05);
+    --fe-message-success-color: #52c41a;
+    --fe-message-error-color: #fb7185; /* rose-400 for error in pink theme */
+    --fe-message-warning-color: #faad14;
+    --fe-message-info-color: var(--fe-color-primary);
+    --fe-message-loading-color: var(--fe-color-primary);
+  }
+
+  /* Antd Modal 组件变量 */
+  .ant-modal,
+  .ant-modal-css-var {
+    --fe-modal-footer-bg: transparent;
+    --fe-modal-header-bg: var(--ant-color-bg-container);
+    --fe-modal-title-line-height: var(--fe-line-height);
+    --fe-modal-title-font-size: 16px;
+    --fe-modal-content-bg: var(--ant-color-bg-container);
+    --fe-modal-title-color: var(--ant-color-text);
+    --fe-modal-content-padding: 20px 24px;
+    --fe-modal-header-padding: 16px 24px;
+    --fe-modal-header-border-bottom: 1px solid var(--ant-color-border);
+    --fe-modal-header-margin-bottom: 8px;
+    --fe-modal-body-padding: 0px;
+    --fe-modal-footer-padding: 10px 16px;
+    --fe-modal-footer-border-top: 1px solid var(--ant-color-border);
+    --fe-modal-footer-border-radius: var(--fe-border-radius);
+    --fe-modal-footer-margin-top: 12px;
+    --fe-modal-confirm-body-padding: 32px 32px 24px;
+    --fe-modal-confirm-icon-margin-inline-end: 12px;
+    --fe-modal-confirm-btns-margin-top: 12px;
+    --fe-modal-box-shadow:
+      0 6px 16px 0 rgba(244, 114, 182, 0.08),
+      0 3px 6px -4px rgba(244, 114, 182, 0.12),
+      0 9px 28px 8px rgba(244, 114, 182, 0.05);
+    --fe-modal-mask-bg: rgba(244, 114, 182, 0.45);
+  }
+}

package/dist/templates/next-app/src/styles/css/index.css

@@ -0,0 +1,6 @@
+@import './tailwind.css';
+@import './zIndex.css';
+
+@import './antd-themes/index.css';
+
+@import './page.css';

package/dist/templates/next-app/src/styles/css/page.css

@@ -0,0 +1,19 @@
+/**
+ * This file is used to define the page styles for the app.
+ * 
+ * @example --color-primary
+ * ```tsx
+ * <div className="bg-primary text-primary border-text-tertiary"></div>
+ * ```
+ */
+@theme {
+  --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(--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/dist/templates/next-app/src/styles/css/tailwind.css

@@ -0,0 +1,5 @@
+@layer theme, base, antd, components, utilities;
+
+@import 'tailwindcss';
+
+@import './themes/index.css';

package/dist/templates/next-app/src/styles/css/themes/_default.css

@@ -0,0 +1,29 @@
+/* theme variables - for tailwind */
+@layer base {
+  :root {
+    /* 基础背景色 */
+    --color-bg-base: 255 255 255;
+    --color-bg-secondary: 241 245 249; /* slate-100 */
+    --color-bg-elevated: 248 250 252; /* slate-50 */
+
+    /* 文字颜色 */
+    --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 */
+
+    /* 品牌色 */
+    --color-brand: 37 99 235; /* blue-600 */
+    --color-brand-hover: 59 130 246; /* blue-500 */
+
+    /* 登录页特定样式 */
+    --login-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    --login-input-bg: var(--fe-color-bg-container);
+    --login-input-border: var(--fe-color-border);
+    --login-button-text: rgb(255 255 255);
+    --login-social-button-bg: var(--fe-color-bg-container);
+    --login-social-button-border: var(--fe-color-border);
+  }
+}

package/dist/templates/next-app/src/styles/css/themes/dark.css

@@ -0,0 +1,29 @@
+/* theme variables - for tailwind */
+@layer base {
+  [data-theme='dark'] {
+    /* 基础背景色 */
+    --color-bg-base: 15 23 42; /* slate-900 */
+    --color-bg-secondary: 30 41 59; /* slate-800 */
+    --color-bg-elevated: 51 65 85; /* slate-700 */
+
+    /* 文字颜色 */
+    --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 */
+
+    /* 品牌色 */
+    --color-brand: 37 99 235; /* blue-600 */
+    --color-brand-hover: 59 130 246; /* blue-500 */
+
+    /* 登录页特定样式 */
+    --login-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    --login-input-bg: var(--fe-color-bg-container);
+    --login-input-border: var(--fe-color-border);
+    --login-button-text: rgb(255 255 255);
+    --login-social-button-bg: var(--fe-color-bg-container);
+    --login-social-button-border: var(--fe-color-border);
+  }
+}

package/dist/templates/next-app/src/styles/css/themes/index.css

@@ -0,0 +1,3 @@
+@import './_default.css';
+@import './dark.css';
+@import './pink.css';

package/dist/templates/next-app/src/styles/css/themes/pink.css

@@ -0,0 +1,29 @@
+/* theme variables - for tailwind */
+@layer base {
+  [data-theme='pink'] {
+    /* 基础背景色 */
+    --color-bg-base: 255 241 242; /* rose-50 */
+    --color-bg-secondary: 255 228 230; /* rose-100 */
+    --color-bg-elevated: 254 205 211; /* rose-200 */
+
+    /* 文字颜色 */
+    --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 */
+
+    /* 品牌色 */
+    --color-brand: 225 29 72; /* rose-600 */
+    --color-brand-hover: 244 63 94; /* rose-500 */
+
+    /* 登录页特定样式 */
+    --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/dist/templates/next-app/src/styles/css/zIndex.css

@@ -0,0 +1,9 @@
+/**
+ * This file is used to define the z-index values for the app.
+ */
+:root {
+  /* antd select popup zindex */
+  --zi-select: 1050;
+  /* antd message zindex */
+  --zi-message: 2010;
+}

package/dist/templates/next-app/src/uikit/components/BaseHeader.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import Link from 'next/link';
+import { AppConfig } from '@/base/cases/AppConfig';
+import { IOC } from '@/core/IOC';
+import { LanguageSwitcher } from './LanguageSwitcher';
+import { ThemeSwitcher } from './ThemeSwitcher';
+
+export function BaseHeader() {
+  return (
+    <header
+      data-testid="base-header"
+      className="h-14 bg-secondary border-b border-border sticky top-0 z-50"
+    >
+      <div className="flex items-center justify-between h-full px-4 mx-auto max-w-7xl">
+        <div className="flex items-center">
+          <Link
+            href="/"
+            className="flex items-center hover:opacity-80 transition-opacity"
+          >
+            {/* <img
+              data-testid="base-header-logo"
+              src={IOC(PublicAssetsPath).getPath('/logo.svg')}
+              alt="logo"
+              className="h-8 w-auto"
+            /> */}
+            <span
+              data-testid="base-header-app-name"
+              className="ml-2 text-lg font-semibold text-text"
+            >
+              {IOC(AppConfig).appName}
+            </span>
+          </Link>
+        </div>
+        <div className="flex items-center gap-4">
+          <LanguageSwitcher />
+          <ThemeSwitcher />
+        </div>
+      </div>
+    </header>
+  );
+}

package/dist/templates/next-app/src/uikit/components/BootstrapsProvider.tsx

@@ -0,0 +1,25 @@
+'use client';
+import '@ant-design/v5-patch-for-react-19';
+import { useEffect } from 'react';
+import { BootstrapClient } from '@/core/bootstraps/BootstrapClient';
+import { IOCContext } from '../context/IOCContext';
+
+export function BootstrapsProvider(props: { children: React.ReactNode }) {
+  const IOC = BootstrapClient.createSingletonIOC();
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      BootstrapClient.main({
+        root: window,
+        pathname: window.location.pathname,
+        IOC: IOC
+      });
+    }
+  }, [IOC]);
+
+  return (
+    <IOCContext.Provider data-testid="BootstrapsProvider" value={IOC}>
+      {props.children}
+    </IOCContext.Provider>
+  );
+}

package/dist/templates/next-app/src/uikit/components/ComboProvider.tsx

@@ -0,0 +1,45 @@
+'use client';
+import '@ant-design/v5-patch-for-react-19';
+import { AntdRegistry } from '@ant-design/nextjs-registry';
+import { AntdThemeProvider } from '@brain-toolkit/antd-theme-override/react';
+import { ThemeProvider } from 'next-themes';
+import { BootstrapsProvider } from './BootstrapsProvider';
+import type { CommonThemeConfig } from '@config/theme';
+
+/**
+ * CommonProvider is a provider for the common components
+ *
+ * - IOCProvider
+ * - BootstrapsProvider
+ * - ThemeProvider
+ * - AntdProvider
+ *
+ * @param param0
+ * @returns
+ */
+export function ComboProvider(props: {
+  themeConfig: CommonThemeConfig;
+  children: React.ReactNode;
+}) {
+  const { themeConfig, children } = props;
+
+  return (
+    <AntdThemeProvider
+      data-testid="ComboProvider"
+      theme={themeConfig.antdTheme}
+    >
+      <ThemeProvider
+        themes={themeConfig.supportedThemes as unknown as string[]}
+        attribute={themeConfig.domAttribute}
+        defaultTheme={themeConfig.defaultTheme}
+        enableSystem
+        enableColorScheme={false}
+        storageKey={themeConfig.storageKey}
+      >
+        <BootstrapsProvider>
+          <AntdRegistry>{children}</AntdRegistry>
+        </BootstrapsProvider>
+      </ThemeProvider>
+    </AntdThemeProvider>
+  );
+}

package/dist/templates/next-app/src/uikit/components/LanguageSwitcher.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { Select } from 'antd';
+import { useLocale } from 'next-intl';
+import { useCallback } from 'react';
+import { i18nConfig } from '@config/i18n';
+import { IOCIdentifier } from '@config/IOCIdentifier';
+import type { I18nServiceLocale } from '@/base/port/I18nServiceInterface';
+import { usePathname, useRouter } from '@/i18n/routing';
+import { useIOC } from '../hook/useIOC';
+import { useStore } from '../hook/useStore';
+import type { LocaleType } from '@config/i18n';
+
+export function LanguageSwitcher() {
+  const i18nService = useIOC(IOCIdentifier.I18nServiceInterface);
+  const { loading } = useStore(i18nService);
+  const pathname = usePathname(); // current pathname, aware of i18n
+
+  const router = useRouter(); // i18n-aware router instance
+  const currentLocale = useLocale() as LocaleType; // currently active locale
+
+  const handleLanguageChange = useCallback(
+    async (value: string) => {
+      // Set a persistent cookie with the user's preferred locale (valid for 1 year)
+      document.cookie = `NEXT_LOCALE=${value}; path=/; max-age=31536000; SameSite=Lax`;
+      // Route to the same page in the selected locale
+      router.replace(pathname, { locale: value });
+
+      try {
+        await i18nService.changeLanguage(value as I18nServiceLocale);
+      } catch (error) {
+        console.error('Failed to change language:', error);
+      }
+    },
+    [i18nService, pathname, router]
+  );
+
+  return (
+    <Select
+      data-testid="LanguageSwitcher"
+      loading={loading}
+      value={currentLocale}
+      onChange={handleLanguageChange}
+      options={i18nConfig.supportedLngs.map((lang) => ({
+        value: lang,
+        label:
+          i18nConfig.localeNames[lang as keyof typeof i18nConfig.localeNames]
+      }))}
+      className="w-24"
+    />
+  );
+}

package/dist/templates/next-app/src/uikit/components/LocaleLink.tsx

@@ -0,0 +1,51 @@
+import Link from 'next/link';
+import { useLocaleRoutes } from '@config/common';
+import { i18nConfig } from '@config/i18n';
+import type { LinkProps } from 'next/link';
+import type { ReactNode } from 'react';
+
+interface LocaleLinkProps
+  extends Omit<LinkProps, 'href'>,
+    React.HTMLAttributes<HTMLAnchorElement> {
+  href:
+    | string
+    | {
+        pathname: string;
+        query?: Record<string, string>;
+        hash?: string;
+      };
+  locale?: string;
+  title: string;
+  children: ReactNode;
+  defaultLocale?: string;
+  className?: string;
+}
+
+export const LocaleLink: React.FC<LocaleLinkProps> = ({
+  href,
+  locale,
+  children,
+  defaultLocale,
+  ...props
+}) => {
+  locale = locale || i18nConfig.fallbackLng;
+
+  const isDefaultLocale = locale === defaultLocale;
+  const shouldAddLocale = useLocaleRoutes && !isDefaultLocale;
+
+  let localizedHref: typeof href;
+  if (typeof href === 'string') {
+    localizedHref = shouldAddLocale ? `/${locale}${href}` : href;
+  } else {
+    localizedHref = {
+      ...href,
+      pathname: shouldAddLocale ? `/${locale}${href.pathname}` : href.pathname
+    };
+  }
+
+  return (
+    <Link data-testid="locale-link" {...props} href={localizedHref}>
+      {children}
+    </Link>
+  );
+};

package/dist/templates/next-app/src/uikit/components/NextIntlProvider.tsx

@@ -0,0 +1,21 @@
+import { NextIntlClientProvider, useMessages } from 'next-intl';
+import type { ReactNode } from 'react';
+
+type Props = {
+  children: ReactNode;
+  locale: string;
+};
+
+export function NextIntlProvider({ children, locale }: Props) {
+  const messages = useMessages();
+
+  return (
+    <NextIntlClientProvider
+      data-testid="NextIntlProvider"
+      locale={locale}
+      messages={messages}
+    >
+      {children}
+    </NextIntlClientProvider>
+  );
+}

package/dist/templates/next-app/src/uikit/components/ThemeSwitcher.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import {
+  BulbOutlined,
+  BulbFilled,
+  HeartFilled,
+  HeartOutlined,
+  DesktopOutlined
+} from '@ant-design/icons';
+import { Select } from 'antd';
+import { clsx } from 'clsx';
+import { useTheme } from 'next-themes';
+import { themeConfig } from '@config/theme';
+import { useMountedClient } from '../hook/useMountedClient';
+
+const { supportedThemes } = themeConfig;
+
+const colorMap: Record<
+  string,
+  { i18nkey: string; colors: string[]; icons: React.ElementType[] }
+> = {
+  system: {
+    i18nkey: 'System',
+    colors: ['text-text', 'text-text-secondary'],
+    icons: [DesktopOutlined, DesktopOutlined]
+  },
+  light: {
+    i18nkey: 'Light',
+    colors: ['text-text', 'text-text-secondary'],
+    icons: [BulbFilled, BulbOutlined]
+  },
+  dark: {
+    i18nkey: 'Dark',
+    colors: ['text-[#9333ea]', 'text-[#a855f7]'],
+    icons: [BulbFilled, BulbOutlined]
+  },
+  pink: {
+    i18nkey: 'Pink',
+    colors: ['text-[#f472b6]', 'text-[#ec4899]'],
+    icons: [HeartFilled, HeartOutlined]
+  }
+};
+
+export function ThemeSwitcher() {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  const mounted = useMountedClient();
+
+  const themeOptions = ['system', ...supportedThemes!].map((themeName) => {
+    const { i18nkey, colors, icons } = colorMap[themeName] || colorMap.light;
+    const [currentColor, normalColor] = colors;
+    const [CurrentIcon, NormalIcon] = icons;
+
+    const isCurrentTheme =
+      theme === themeName ||
+      (themeName === resolvedTheme && theme === 'system');
+
+    return {
+      key: themeName,
+      value: themeName,
+      label: (
+        <div
+          className={clsx(
+            'flex items-center gap-2',
+            isCurrentTheme ? currentColor : normalColor
+          )}
+        >
+          {isCurrentTheme ? <CurrentIcon /> : <NormalIcon />}
+          <span>{i18nkey}</span>
+        </div>
+      )
+    };
+  });
+
+  return (
+    <Select
+      data-testid="ThemeSwitcher"
+      loading={!mounted}
+      value={mounted ? theme : themeOptions[0]?.key}
+      onChange={setTheme}
+      options={themeOptions}
+      style={{ width: 120 }}
+      className="min-w-40 max-w-full"
+      disabled={!mounted}
+    />
+  );
+}

package/dist/templates/next-app/src/uikit/context/IOCContext.ts

@@ -0,0 +1,6 @@
+'use client';
+
+import { createContext } from 'react';
+import type { IOC } from '@/core/IOC';
+
+export const IOCContext = createContext<typeof IOC | null>(null);