@qlover/create-app 0.7.13 → 0.7.15

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

@@ -1,15 +1,12 @@
 'use client';
 
-import { TeamOutlined } from '@ant-design/icons';
+import { clsx } from 'clsx';
 import { useLocale, useTranslations } from 'next-intl';
 import { useMemo } from 'react';
 import { useIOC } from '@/uikit/hook/useIOC';
 import { PAGE_HEAD_ADMIN_TITLE } from '@config/Identifier';
 import { IOCIdentifier } from '@config/IOCIdentifier';
-import { LanguageSwitcher } from './LanguageSwitcher';
 import { LocaleLink } from './LocaleLink';
-import { LogoutButton } from './LogoutButton';
-import { ThemeSwitcher } from './ThemeSwitcher';
 
 export type RenderLeftFunction = (props: {
   locale: string;
@@ -18,13 +15,12 @@ export type RenderLeftFunction = (props: {
 
 export function BaseHeader(props: {
   href?: string;
-  showLogoutButton?: boolean;
-  showAdminButton?: boolean;
   renderLeft?: React.ReactNode | RenderLeftFunction;
+  rightActions?: React.ReactNode;
+  className?: string;
 }) {
-  const { href = '/', showLogoutButton, showAdminButton, renderLeft } = props;
+  const { href = '/', className, renderLeft, rightActions } = props;
   const appConfig = useIOC(IOCIdentifier.AppConfig);
-  const i18nService = useIOC(IOCIdentifier.I18nServiceInterface);
   const locale = useLocale();
   const t = useTranslations();
 
@@ -44,7 +40,7 @@ export function BaseHeader(props: {
       >
         <span
           data-testid="base-header-app-name"
-          className="ml-2 text-lg font-semibold text-text"
+          className="text-lg font-semibold text-text"
         >
           {tt.title}
         </span>
@@ -69,24 +65,14 @@ export function BaseHeader(props: {
       data-testid="BaseHeader"
       className="h-14 bg-secondary border-b border-c-border sticky top-0 z-50"
     >
-      <div className="flex items-center justify-between h-full px-4 mx-auto max-w-7xl">
+      <div
+        className={clsx(
+          'flex items-center justify-between h-full px-4 mx-auto max-w-7xl',
+          className
+        )}
+      >
         <div className="flex items-center">{RenderLeft}</div>
-        <div className="flex items-center gap-2 md:gap-4">
-          {showAdminButton && (
-            <LocaleLink
-              href="/admin"
-              title={tt.admin}
-              locale={locale}
-              className="text-text hover:text-text-hover cursor-pointer text-lg transition-colors"
-            >
-              <TeamOutlined className="text-lg text-text" />
-            </LocaleLink>
-          )}
-
-          <LanguageSwitcher i18nService={i18nService} />
-          <ThemeSwitcher />
-          {showLogoutButton && <LogoutButton />}
-        </div>
+        <div className="flex items-center gap-2 md:gap-4">{rightActions}</div>
       </div>
     </header>
   );

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

@@ -1,5 +1,12 @@
+import { TeamOutlined } from '@ant-design/icons';
+import { useLocale, useTranslations } from 'next-intl';
+import { useMemo, type HTMLAttributes } from 'react';
+import { PAGE_HEAD_ADMIN_TITLE } from '@config/Identifier';
 import { BaseHeader } from './BaseHeader';
-import type { HTMLAttributes } from 'react';
+import { LanguageSwitcher } from './LanguageSwitcher';
+import { LocaleLink } from './LocaleLink';
+import { LogoutButton } from './LogoutButton';
+import { ThemeSwitcher } from './ThemeSwitcher';
 
 export interface BaseLayoutProps extends HTMLAttributes<HTMLDivElement> {
   showLogoutButton?: boolean;
@@ -14,16 +21,41 @@ export function BaseLayout({
   mainProps,
   ...props
 }: BaseLayoutProps) {
+  const locale = useLocale();
+  const t = useTranslations();
+
+  const tt = {
+    admin: t(PAGE_HEAD_ADMIN_TITLE)
+  };
+
+  const actions = useMemo(
+    () =>
+      [
+        showAdminButton && (
+          <LocaleLink
+            key="admin-button"
+            href="/admin"
+            title={tt.admin}
+            locale={locale}
+            className="text-text hover:text-text-hover cursor-pointer text-lg transition-colors"
+          >
+            <TeamOutlined className="text-lg text-text" />
+          </LocaleLink>
+        ),
+        <LanguageSwitcher key="language-switcher" />,
+        <ThemeSwitcher key="theme-switcher" />,
+        showLogoutButton && <LogoutButton key="logout-button" />
+      ].filter(Boolean),
+    [showAdminButton, tt.admin, locale, showLogoutButton]
+  );
+
   return (
     <div
       data-testid="BaseLayout"
       className="flex flex-col min-h-screen"
       {...props}
     >
-      <BaseHeader
-        showLogoutButton={showLogoutButton}
-        showAdminButton={showAdminButton}
-      />
+      <BaseHeader rightActions={actions} />
       <main className="flex flex-1 flex-col bg-primary" {...mainProps}>
         {children}
       </main>

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

@@ -0,0 +1,17 @@
+'use client';
+
+import { ChatAction } from '@/base/cases/ChatAction';
+import { FocusBarAction } from '@/base/cases/FocusBarAction';
+import { useIOC } from '../hook/useIOC';
+import { ChatWrap } from './chat/ChatWrap';
+
+export function ChatRoot() {
+  const chatAction = useIOC(ChatAction);
+  const focusBarAction = useIOC(FocusBarAction);
+
+  return (
+    <div data-testid="ChatRoot" className="fixed bottom-0 right-0 ">
+      <ChatWrap chatAction={chatAction} focusBarAction={focusBarAction} />
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+import type { PageI18nInterface } from '@config/i18n';
+import { With } from './With';
+
+export function ClientSeo(props: {
+  i18nInterface: PageI18nInterface;
+  children?: React.ReactNode;
+}) {
+  const { i18nInterface, children } = props;
+
+  return (
+    <>
+      <title>{i18nInterface.title}</title>
+      <meta name="description" content={i18nInterface.description} />
+      <meta name="keywords" content={i18nInterface.keywords} />
+      <meta name="author" content={i18nInterface.author} />
+      <meta name="publishedTime" content={i18nInterface.publishedTime} />
+      <meta name="modifiedTime" content={i18nInterface.modifiedTime} />
+
+      <With it={i18nInterface.canonical}>
+        <meta name="canonical" content={i18nInterface.canonical} />
+      </With>
+
+      <With it={i18nInterface.og}>
+        {({ title, description, image }) => (
+          <>
+            <meta name="og:title" content={title} />
+            <meta name="og:description" content={description} />
+            <meta name="og:image" content={image} />
+          </>
+        )}
+      </With>
+
+      {children}
+    </>
+  );
+}

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

@@ -4,17 +4,16 @@ import { TranslationOutlined } from '@ant-design/icons';
 import { Dropdown } from 'antd';
 import { useLocale } from 'next-intl';
 import { useCallback, useMemo } from 'react';
-import type {
-  I18nServiceInterface,
-  I18nServiceLocale
-} from '@/base/port/I18nServiceInterface';
+import type { I18nServiceLocale } from '@/base/port/I18nServiceInterface';
 import { usePathname, useRouter } from '@/i18n/routing';
 import { i18nConfig } from '@config/i18n';
 import type { LocaleType } from '@config/i18n';
+import { I } from '@config/IOCIdentifier';
+import { useIOC } from '../hook/useIOC';
 import type { ItemType } from 'antd/es/menu/interface';
 
-export function LanguageSwitcher(props: { i18nService: I18nServiceInterface }) {
-  const { i18nService } = props;
+export function LanguageSwitcher() {
+  const i18nService = useIOC(I.I18nServiceInterface);
   const pathname = usePathname(); // current pathname, aware of i18n
 
   const router = useRouter(); // i18n-aware router instance

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

@@ -1,3 +1,5 @@
+'use client';
+
 import { LogoutOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import { useCallback } from 'react';

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

@@ -0,0 +1,17 @@
+export function With<T>(props: {
+  fallback?: React.ReactNode;
+  it: T;
+  children: React.ReactNode | ((it: NonNullable<T>) => React.ReactNode);
+}) {
+  const { fallback, it, children } = props;
+
+  if (it) {
+    if (typeof children === 'function') {
+      return children(it);
+    }
+
+    return children;
+  }
+
+  return fallback ?? null;
+}

package/dist/templates/next-app/src/uikit/components/chat/ChatActionInterface.ts

@@ -0,0 +1,30 @@
+import {
+  StoreInterface,
+  type StoreStateInterface
+} from '@qlover/corekit-bridge';
+
+export const MessageType = Object.freeze({
+  USER: 'user',
+  ASSISTANT: 'assistant'
+});
+
+export type MessageTypeValue = (typeof MessageType)[keyof typeof MessageType];
+
+export interface MessageInterface {
+  id: string;
+  content: unknown;
+  role: MessageTypeValue;
+  createdAt: string;
+
+  loading?: boolean;
+}
+
+export interface ChatStateInterface extends StoreStateInterface {
+  messages: MessageInterface[];
+}
+
+export abstract class ChatActionInterface<
+  S extends ChatStateInterface
+> extends StoreInterface<S> {
+  abstract focus(): void;
+}

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

@@ -0,0 +1,65 @@
+import { SendOutlined } from '@ant-design/icons';
+import { Button, Input } from 'antd';
+import { useCallback, useRef } from 'react';
+import { useStore } from '../../hook/useStore';
+import type {
+  FocusBarActionInterface,
+  FocusBarStateInterface
+} from './FocusBarActionInterface';
+
+export function ChatFocusBar({
+  focusBarAction
+}: {
+  focusBarAction: FocusBarActionInterface<FocusBarStateInterface>;
+}) {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const { inputValue } = useStore(focusBarAction);
+  const sendState = useStore(focusBarAction, (state) => state.sendState);
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      focusBarAction.setInputValue(e.target.value);
+    },
+    [focusBarAction]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        focusBarAction.sendMessage(inputValue);
+      }
+    },
+    [focusBarAction, inputValue]
+  );
+
+  const sending = sendState.loading;
+
+  return (
+    <div
+      data-testid="ChatFocusBarInput"
+      className="flex items-end gap-2 p-4 bg-elevated border-t border-c-border"
+    >
+      <Input.TextArea
+        ref={inputRef}
+        disabled={sending}
+        value={inputValue}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
+        placeholder="Type your message..."
+        rows={1}
+      />
+      <Button
+        data-testid="ChatFocusBarSendButton"
+        onClick={() => {
+          focusBarAction.sendMessage(inputValue);
+        }}
+        type="primary"
+        className="flex items-center justify-center !h-10 !w-10 !rounded-full !bg-c-brand !text-white hover:!bg-c-brand-hover transition-colors"
+        icon={<SendOutlined />}
+        loading={sending}
+        disabled={sending}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,59 @@
+import { useEffect, useRef } from 'react';
+import { MessageType } from './ChatActionInterface';
+import { useStore } from '../../hook/useStore';
+import type {
+  ChatActionInterface,
+  ChatStateInterface,
+  MessageInterface
+} from './ChatActionInterface';
+
+function MessageItem({ message }: { message: MessageInterface }) {
+  return (
+    <div
+      data-testid="MessageItem"
+      className={`flex ${
+        message.role === MessageType.USER ? 'justify-end' : 'justify-start'
+      } mb-4`}
+    >
+      <div
+        data-testid="MessageItemContent"
+        className={`max-w-[70%] rounded-lg p-3 ${
+          message.role === MessageType.USER
+            ? 'bg-blue-500 text-white'
+            : 'bg-gray-100 dark:bg-gray-700'
+        }`}
+      >
+        <p className="whitespace-pre-wrap break-words">{message.content}</p>
+        <div className="mt-1 text-xs opacity-70">
+          {new Date(message.createdAt).toLocaleTimeString()}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function ChatMessages({
+  chatAction
+}: {
+  chatAction: ChatActionInterface<ChatStateInterface>;
+}) {
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const { messages } = useStore(chatAction);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  return (
+    <div data-testid="ChatMessages" className="flex-1 overflow-y-auto p-4">
+      {messages.map((message: MessageInterface) => (
+        <MessageItem
+          data-testid="MessageItem"
+          key={message.id}
+          message={message}
+        />
+      ))}
+      <div ref={messagesEndRef} />
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { ChatFocusBar } from './ChatFocusBar';
+import { ChatMessages } from './ChatMessages';
+import type {
+  ChatActionInterface,
+  ChatStateInterface
+} from './ChatActionInterface';
+import type {
+  FocusBarActionInterface,
+  FocusBarStateInterface
+} from './FocusBarActionInterface';
+
+export function ChatWrap({
+  chatAction,
+  focusBarAction
+}: {
+  chatAction: ChatActionInterface<ChatStateInterface>;
+  focusBarAction: FocusBarActionInterface<FocusBarStateInterface>;
+}) {
+  return (
+    <div
+      data-testid="ChatWrap"
+      className="flex h-full flex-col p-2 bg-primary shadow-2xl"
+    >
+      <ChatMessages chatAction={chatAction} />
+      <ChatFocusBar focusBarAction={focusBarAction} />
+    </div>
+  );
+}

package/dist/templates/next-app/src/uikit/components/chat/FocusBarActionInterface.ts

@@ -0,0 +1,19 @@
+import {
+  StoreInterface,
+  type StoreStateInterface
+} from '@qlover/corekit-bridge';
+import type { AsyncStateInterface } from '@/base/port/AsyncStateInterface';
+
+export interface FocusBarStateInterface extends StoreStateInterface {
+  showHistoryArea: boolean;
+  inputValue: string;
+  sendState: AsyncStateInterface<unknown>;
+}
+
+export abstract class FocusBarActionInterface<
+  S extends FocusBarStateInterface
+> extends StoreInterface<S> {
+  abstract setInputValue(value: string): void;
+  abstract clearInput(): void;
+  abstract sendMessage(message: string): void | Promise<void>;
+}

package/package.json

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

package/dist/templates/next-app/docs/env.md

@@ -1,94 +0,0 @@
-# 环境配置指南
-
-本项目使用 Next.js 内置的环境变量系统来管理不同环境的配置。
-
-## 环境文件
-
-项目支持以下环境配置文件：
-
-- `.env` - 默认环境配置，适用于所有环境
-- `.env.local` - 本地环境配置，会覆盖 `.env`（不应提交到版本控制）
-- `.env.development` - 开发环境配置
-- `.env.production` - 生产环境配置
-- `.env.test` - 测试环境配置
-
-加载优先级（从高到低）：
-
-1. `.env.local`
-2. `.env.[environment]`
-3. `.env`
-
-## 使用方法
-
-1. 复制 `.env.template` 创建对应环境的配置文件：
-
-```bash
-# 开发环境
-cp .env.template .env.development
-
-# 生产环境
-cp .env.template .env.production
-
-# 测试环境
-cp .env.template .env.test
-```
-
-2. 修改对应环境的配置文件内容
-
-3. 启动应用时指定环境：
-
-```bash
-# 开发环境
-APP_ENV=development npm run dev
-
-# 生产环境
-APP_ENV=production npm run build
-APP_ENV=production npm run start
-
-# 测试环境
-APP_ENV=test npm run test
-```
-
-## 在代码中使用环境变量
-
-1. 服务端和客户端都可访问的变量：
-
-```typescript
-// 在 .env 文件中定义
-PUBLIC_API_URL=http://api.example.com
-
-// 在代码中使用
-console.log(process.env.PUBLIC_API_URL)
-```
-
-2. 仅服务端可访问的变量：
-
-```typescript
-// 在 .env 文件中定义（以 PRIVATE_ 开头）
-PRIVATE_API_KEY = secret_key;
-
-// 在服务端代码中使用
-console.log(process.env.PRIVATE_API_KEY);
-```
-
-3. 使用运行时配置：
-
-```typescript
-import getConfig from 'next/config';
-
-const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
-
-// 服务端配置
-console.log(serverRuntimeConfig.mySecret);
-
-// 公共配置
-console.log(publicRuntimeConfig.appEnv);
-```
-
-## 注意事项
-
-1. 不要将包含敏感信息的 `.env` 文件提交到版本控制
-2. 确保 `.env.local` 和 `*.env` 文件在 `.gitignore` 中
-3. 使用 `.env.template` 作为配置模板
-4. 环境变量命名推荐使用大写字母和下划线
-5. 在 CI/CD 中使用环境变量时，直接在平台中配置，不要使用 .env 文件

package/dist/templates/next-app/src/base/port/DBBridgeInterface.ts

@@ -1,21 +0,0 @@
-import type { PostgrestSingleResponse } from '@supabase/supabase-js';
-
-export type WhereOperation = '=' | '!=' | '>' | '<' | '>=' | '<=';
-export type Where = [string, WhereOperation, string | number];
-
-export interface BridgeEvent {
-  table: string;
-  fields?: string | string[];
-  where?: Where[];
-  data?: unknown;
-  page?: number;
-  pageSize?: number;
-}
-
-export interface DBBridgeInterface {
-  add(event: BridgeEvent): Promise<PostgrestSingleResponse<unknown>>;
-  update(event: BridgeEvent): Promise<PostgrestSingleResponse<unknown>>;
-  delete(event: BridgeEvent): Promise<PostgrestSingleResponse<unknown>>;
-  get(event: BridgeEvent): Promise<PostgrestSingleResponse<unknown>>;
-  pagination(event: BridgeEvent): Promise<PostgrestSingleResponse<unknown>>;
-}

package/dist/templates/next-app/src/base/port/DBMigrationInterface.ts

@@ -1,92 +0,0 @@
-export interface MigrationConfig {
-  /**
-   * Migration version number or identifier
-   */
-  version: string | number;
-
-  /**
-   * Description of what this migration does
-   */
-  description: string;
-
-  /**
-   * Timestamp when migration was created
-   */
-  timestamp?: number;
-}
-
-export interface MigrationResult {
-  /**
-   * Whether the migration was successful
-   */
-  success: boolean;
-
-  /**
-   * Error message if migration failed
-   */
-  error?: string;
-
-  /**
-   * Migration version that was executed
-   */
-  version: string | number;
-
-  /**
-   * Time taken to execute the migration in milliseconds
-   */
-  executionTime?: number;
-}
-
-export interface DBMigrationInterface {
-  /**
-   * Get current database version
-   */
-  getCurrentVersion(): Promise<string | number>;
-
-  /**
-   * Get list of all applied migrations
-   */
-  getAppliedMigrations(): Promise<MigrationConfig[]>;
-
-  /**
-   * Get list of pending migrations that need to be applied
-   */
-  getPendingMigrations(): Promise<MigrationConfig[]>;
-
-  /**
-   * Apply a specific migration
-   * @param migration Migration configuration
-   */
-  applyMigration(migration: MigrationConfig): Promise<MigrationResult>;
-
-  /**
-   * Rollback a specific migration
-   * @param migration Migration configuration
-   */
-  rollbackMigration(migration: MigrationConfig): Promise<MigrationResult>;
-
-  /**
-   * Apply all pending migrations
-   */
-  migrateUp(): Promise<MigrationResult[]>;
-
-  /**
-   * Rollback to a specific version
-   * @param targetVersion Version to rollback to
-   */
-  migrateDown(targetVersion: string | number): Promise<MigrationResult[]>;
-
-  /**
-   * Create a new migration file/record
-   * @param name Name/description of the migration
-   */
-  createMigration(name: string): Promise<MigrationConfig>;
-
-  /**
-   * Validate migration history and database state
-   */
-  validateMigrations(): Promise<{
-    valid: boolean;
-    errors?: string[];
-  }>;
-}

package/dist/templates/next-app/src/base/port/MigrationApiInterface.ts

@@ -1,3 +0,0 @@
-export interface MigrationApiInterface {
-  init(): Promise<unknown>;
-}

package/dist/templates/next-app/src/base/port/ServerApiResponseInterface.ts

@@ -1,6 +0,0 @@
-export interface ServerApiResponseInterface<T> {
-  success?: boolean;
-  message?: string;
-  data?: T;
-  error?: string;
-}