@qlover/create-app 1.0.2 → 2.0.0

package/dist/templates/react-app/src/pages/base/ExecutorPage.tsx

@@ -1,467 +0,0 @@
-import { useStore } from '@brain-toolkit/react-kit/hooks/useStore';
-import { executorI18n } from '@config/i18n/executorI18n';
-import * as i18nKeys from '@config/Identifier/pages/page.executor';
-import { IOCIdentifier } from '@config/IOCIdentifier';
-import { Button, Progress, Tag, Space, Card, Input, Select } from 'antd';
-import { useState, useEffect } from 'react';
-import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import { useI18nInterface } from '@/uikit/hooks/useI18nInterface';
-import { useIOC } from '@/uikit/hooks/useIOC';
-
-interface Task {
-  id: string;
-  name: string;
-  status: 'pending' | 'running' | 'completed' | 'failed';
-  progress: number;
-  type: 'data-sync' | 'report-generation' | 'system-maintenance' | 'backup';
-  startTime?: Date;
-  endTime?: Date;
-  responseType?: 'text' | 'json' | 'blob';
-  url?: string;
-  method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
-}
-
-export default function ExecutorPage() {
-  const pageBridge = useIOC(IOCIdentifier.ExecutorPageBridgeInterface);
-  const jspBridge = useIOC(IOCIdentifier.JSONStoragePageInterface);
-  const dialogHandler = useIOC(IOCIdentifier.DialogHandler);
-  const jsonSerializer = useIOC(IOCIdentifier.JSONSerializer);
-  const requestTimeout = useStore(jspBridge, jspBridge.selector.requestTimeout);
-  const helloState = useStore(pageBridge, pageBridge.selector.helloState);
-  const { t } = useBaseRoutePage();
-  const tt = useI18nInterface(executorI18n);
-
-  const [tasks, setTasks] = useState<Task[]>([
-    {
-      id: '1',
-      name: tt.testPluginTitle,
-      status: 'pending',
-      progress: 0,
-      type: 'data-sync',
-      responseType: 'text',
-      url: '/api/v1/executor/test',
-      method: 'GET'
-    },
-    {
-      id: '2',
-      name: tt.taskTypeDataSync,
-      status: 'pending',
-      progress: 0,
-      type: 'data-sync',
-      responseType: 'json',
-      url: '/api/v1/data/sync',
-      method: 'POST'
-    },
-    {
-      id: '3',
-      name: tt.taskTypeMaintenance,
-      status: 'pending',
-      progress: 0,
-      type: 'system-maintenance',
-      responseType: 'json',
-      url: '/api/v1/system/maintenance',
-      method: 'PUT'
-    },
-    {
-      id: '4',
-      name: tt.taskTypeBackup,
-      status: 'pending',
-      progress: 0,
-      type: 'backup',
-      responseType: 'blob',
-      url: '/api/v1/data/backup',
-      method: 'GET'
-    }
-  ]);
-
-  const [customUrl, setCustomUrl] = useState('');
-  const [customMethod, setCustomMethod] = useState<
-    'GET' | 'POST' | 'PUT' | 'DELETE'
-  >('GET');
-  const [customResponseType, setCustomResponseType] = useState<
-    'text' | 'json' | 'blob'
-  >('text');
-
-  // 监听 helloState 变化，更新任务状态
-  useEffect(() => {
-    if (helloState.result) {
-      dialogHandler.success(tt.pluginTestSuccess);
-      // 更新任务状态
-      setTasks((prevTasks) =>
-        prevTasks.map((task) =>
-          task.id === '1'
-            ? {
-                ...task,
-                status: 'completed',
-                progress: 100,
-                endTime: new Date()
-              }
-            : task
-        )
-      );
-    } else if (helloState.error) {
-      dialogHandler.error(tt.pluginTestFailure);
-      // 更新任务状态
-      setTasks((prevTasks) =>
-        prevTasks.map((task) =>
-          task.id === '1'
-            ? { ...task, status: 'failed', endTime: new Date() }
-            : task
-        )
-      );
-    }
-  }, [helloState.result, helloState.error, tt]);
-
-  const getStatusColor = (status: Task['status']) => {
-    switch (status) {
-      case 'running':
-        return 'active';
-      case 'completed':
-        return 'success';
-      case 'failed':
-        return 'exception';
-      default:
-        return 'normal';
-    }
-  };
-
-  const getTypeColor = (type: Task['type']) => {
-    switch (type) {
-      case 'data-sync':
-        return 'blue';
-      case 'report-generation':
-        return 'green';
-      case 'system-maintenance':
-        return 'orange';
-      case 'backup':
-        return 'purple';
-      default:
-        return 'default';
-    }
-  };
-
-  const formatDuration = (startTime?: Date, endTime?: Date) => {
-    if (!startTime) return '-';
-    const end = endTime || new Date();
-    const duration = end.getTime() - startTime.getTime();
-    const minutes = Math.floor(duration / (1000 * 60));
-    return `${minutes} ${tt.taskDurationUnit}`;
-  };
-
-  const handleStartTask = async (taskId: string) => {
-    const task = tasks.find((t) => t.id === taskId);
-    if (!task) return;
-
-    setTasks((prevTasks) =>
-      prevTasks.map((t) =>
-        t.id === taskId ? { ...t, status: 'running', startTime: new Date() } : t
-      )
-    );
-
-    try {
-      await pageBridge.onTestPlugins();
-
-      setTasks((prevTasks) =>
-        prevTasks.map((t) =>
-          t.id === taskId
-            ? { ...t, status: 'completed', progress: 100, endTime: new Date() }
-            : t
-        )
-      );
-
-      dialogHandler.success(
-        t(i18nKeys.PAGE_EXECUTOR_TASK_SUCCESS, { name: task.name })
-      );
-    } catch {
-      setTasks((prevTasks) =>
-        prevTasks.map((t) =>
-          t.id === taskId ? { ...t, status: 'failed', endTime: new Date() } : t
-        )
-      );
-
-      dialogHandler.error(
-        t(i18nKeys.PAGE_EXECUTOR_TASK_FAILURE, { name: task.name })
-      );
-    }
-  };
-
-  const handleStopTask = (taskId: string) => {
-    setTasks((prevTasks) =>
-      prevTasks.map((task) =>
-        task.id === taskId
-          ? { ...task, status: 'failed', endTime: new Date() }
-          : task
-      )
-    );
-  };
-
-  const handleCreateTask = () => {
-    if (!customUrl) {
-      dialogHandler.error(tt.customTaskUrlRequired);
-      return;
-    }
-
-    const newTask: Task = {
-      id: Date.now().toString(),
-      name: t(i18nKeys.PAGE_EXECUTOR_CUSTOM_TASK_NAME, {
-        method: customMethod,
-        url: customUrl
-      }),
-      status: 'pending',
-      progress: 0,
-      type: 'data-sync',
-      responseType: customResponseType,
-      url: customUrl,
-      method: customMethod
-    };
-
-    setTasks((prev) => [...prev, newTask]);
-    setCustomUrl('');
-    setCustomMethod('GET');
-    setCustomResponseType('text');
-  };
-
-  return (
-    <div
-      data-testid="ExecutorPage"
-      className="min-h-screen bg-primary py-8 px-4 sm:px-6 lg:px-8"
-    >
-      <div className="max-w-6xl mx-auto space-y-6">
-        {/* Header Section */}
-        <section className="py-8">
-          <div className="text-center">
-            <h1 className="text-4xl md:text-5xl font-bold mb-6 text-text">
-              {tt.mainTitle}
-            </h1>
-            <p className="text-xl text-text-secondary mb-8">{tt.description}</p>
-          </div>
-        </section>
-
-        {/* Test Plugin Section */}
-        <section className="bg-secondary shadow sm:rounded-lg p-6 border border-border">
-          <h2 className="text-xl font-medium text-text mb-4">
-            {tt.testPluginTitle}
-          </h2>
-          <div className="space-y-4">
-            <div className="text-text-secondary">
-              {tt.requestTimeout}: {requestTimeout}
-            </div>
-            <div>
-              {helloState.loading ? (
-                <div className="text-text-secondary">Loading...</div>
-              ) : (
-                <Button type="primary" onClick={pageBridge.onTestPlugins}>
-                  {tt.testPluginTitle}
-                </Button>
-              )}
-            </div>
-            <div className="bg-elevated p-4 rounded-lg">
-              {helloState.error instanceof Error ? (
-                <div className="text-red-500">{helloState.error.message}</div>
-              ) : (
-                <pre className="text-text-secondary">
-                  {jsonSerializer.stringify(helloState.result?.data)}
-                </pre>
-              )}
-            </div>
-          </div>
-        </section>
-
-        {/* Create Task Section */}
-        <section className="bg-secondary shadow sm:rounded-lg p-6 border border-border">
-          <h2 className="text-xl font-medium text-text mb-4">
-            {tt.createTaskTitle}
-          </h2>
-          <div className="space-y-4">
-            <div className="flex items-center space-x-4">
-              <Input
-                placeholder={tt.enterUrl}
-                value={customUrl}
-                onChange={(e) =>
-                  setCustomUrl((e.target as HTMLInputElement).value)
-                }
-                className="flex-1"
-              />
-              <Select
-                value={customMethod}
-                onChange={setCustomMethod}
-                style={{ width: 120 }}
-              >
-                <Select.Option value="GET">GET</Select.Option>
-                <Select.Option value="POST">POST</Select.Option>
-                <Select.Option value="PUT">PUT</Select.Option>
-                <Select.Option value="DELETE">DELETE</Select.Option>
-              </Select>
-              <Select
-                value={customResponseType}
-                onChange={setCustomResponseType}
-                style={{ width: 120 }}
-              >
-                <Select.Option value="text">Text</Select.Option>
-                <Select.Option value="json">JSON</Select.Option>
-                <Select.Option value="blob">Blob</Select.Option>
-              </Select>
-              <Button type="primary" onClick={handleCreateTask}>
-                {tt.createButton}
-              </Button>
-            </div>
-          </div>
-        </section>
-
-        {/* Task Statistics */}
-        <section className="grid grid-cols-1 md:grid-cols-4 gap-4">
-          <Card className="bg-elevated border-border">
-            <div className="text-center">
-              <div className="text-2xl font-bold text-text">{tasks.length}</div>
-              <div className="text-sm text-text-secondary">
-                {tt.taskStatsTotal}
-              </div>
-            </div>
-          </Card>
-          <Card className="bg-elevated border-border">
-            <div className="text-center">
-              <div className="text-2xl font-bold text-text">
-                {tasks.filter((t) => t.status === 'running').length}
-              </div>
-              <div className="text-sm text-text-secondary">
-                {tt.taskStatsRunning}
-              </div>
-            </div>
-          </Card>
-          <Card className="bg-elevated border-border">
-            <div className="text-center">
-              <div className="text-2xl font-bold text-text">
-                {tasks.filter((t) => t.status === 'completed').length}
-              </div>
-              <div className="text-sm text-text-secondary">
-                {tt.taskStatsCompleted}
-              </div>
-            </div>
-          </Card>
-          <Card className="bg-elevated border-border">
-            <div className="text-center">
-              <div className="text-2xl font-bold text-text">
-                {tasks.filter((t) => t.status === 'failed').length}
-              </div>
-              <div className="text-sm text-text-secondary">
-                {tt.taskStatsFailed}
-              </div>
-            </div>
-          </Card>
-        </section>
-
-        {/* Task List Section */}
-        <section className="bg-secondary shadow sm:rounded-lg p-6 border border-border">
-          <h2 className="text-xl font-medium text-text mb-4">
-            {tt.taskListTitle}
-          </h2>
-          <div className="space-y-4">
-            {tasks.map((task) => (
-              <Card
-                data-testid={`ExecutorPageCard-${task.id}`}
-                key={task.id}
-                className="bg-elevated border-border"
-                title={
-                  <div className="flex items-center justify-between">
-                    <span className="text-text">{task.name}</span>
-                    <Space>
-                      <Tag color={getTypeColor(task.type)}>{task.type}</Tag>
-                      <Tag color={getStatusColor(task.status)}>
-                        {task.status}
-                      </Tag>
-                    </Space>
-                  </div>
-                }
-              >
-                <div className="space-y-4">
-                  <div className="grid grid-cols-2 gap-4 text-text-secondary">
-                    <div>
-                      <span className="font-medium">URL:</span> {task.url}
-                    </div>
-                    <div>
-                      <span className="font-medium">Method:</span> {task.method}
-                    </div>
-                    <div>
-                      <span className="font-medium">Response Type:</span>{' '}
-                      {task.responseType}
-                    </div>
-                    <div>
-                      <span className="font-medium">Duration:</span>{' '}
-                      {formatDuration(task.startTime, task.endTime)}
-                    </div>
-                  </div>
-                  <Progress
-                    percent={task.progress}
-                    status={getStatusColor(task.status)}
-                  />
-                  <div className="flex justify-end space-x-2">
-                    {task.status === 'pending' && (
-                      <Button
-                        type="primary"
-                        onClick={() => handleStartTask(task.id)}
-                      >
-                        {tt.taskStart}
-                      </Button>
-                    )}
-                    {task.status === 'running' && (
-                      <Button
-                        type="primary"
-                        danger
-                        onClick={() => handleStopTask(task.id)}
-                      >
-                        {tt.taskStop}
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              </Card>
-            ))}
-          </div>
-        </section>
-
-        {/* Task History */}
-        <section className="bg-secondary shadow sm:rounded-lg p-6 border border-border">
-          <h2 className="text-xl font-medium text-text mb-4">
-            {tt.taskHistoryTitle}
-          </h2>
-          <div className="space-y-2">
-            {tasks
-              .filter(
-                (task) =>
-                  task.status === 'completed' || task.status === 'failed'
-              )
-              .map((task) => (
-                <div
-                  data-testid={`ExecutorPageHistory-${task.id}`}
-                  key={task.id}
-                  className="flex items-center justify-between p-2 bg-elevated rounded"
-                >
-                  <div className="flex items-center space-x-2">
-                    <Tag color={getStatusColor(task.status)}>{task.status}</Tag>
-                    <span className="text-text">{task.name}</span>
-                  </div>
-                  <span className="text-sm text-text-secondary">
-                    {task.endTime?.toLocaleString()}
-                  </span>
-                </div>
-              ))}
-          </div>
-        </section>
-
-        {/* Call to Action Section */}
-        <section className="py-8 text-center">
-          <h2 className="text-2xl font-bold mb-4 text-text">{tt.helpTitle}</h2>
-          <p className="text-lg text-text-secondary mb-6">
-            {tt.helpDescription}
-          </p>
-          <Space>
-            <Button type="primary" size="large">
-              {tt.viewGuide}
-            </Button>
-            <Button size="large">{tt.contactSupport}</Button>
-          </Space>
-        </section>
-      </div>
-    </div>
-  );
-}

package/dist/templates/react-app/src/pages/base/HomePage.tsx

@@ -1,81 +0,0 @@
-import { baseRoutes } from '@config/app.router';
-import { Button } from 'antd';
-import { clsx } from 'clsx';
-import { LocaleLink } from '@/uikit/components/LocaleLink';
-import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import type { HomeI18nInterface } from '@config/i18n/homeI18n';
-
-const layoutRoutes = baseRoutes.filter(
-  (route) => route.element === 'base/Layout'
-);
-
-const navigationItems = layoutRoutes[0]!
-  .children!.filter((route) => route.path !== '*' && !route.index)
-  .map((route) => ({
-    href: `/${route.path}`,
-    titleKey: route.meta!.title!,
-    descriptionKey: route.meta!.description!
-  }));
-
-export default function HomePage() {
-  const { t, tt } = useBaseRoutePage<HomeI18nInterface>();
-
-  return (
-    <div data-testid="HomePage" className="min-h-screen bg-primary">
-      {/* Hero Section */}
-      <section className="py-16 px-4">
-        <div className="max-w-4xl mx-auto text-center">
-          <h1 className="text-4xl md:text-5xl font-bold mb-6 text-text">
-            {tt.welcome}
-          </h1>
-          <p className="text-xl text-text-secondary mb-8">{tt.description2}</p>
-        </div>
-      </section>
-
-      {/* Navigation Grid */}
-      <section className="max-w-6xl mx-auto px-4 py-12">
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {navigationItems.map((item) => (
-            <LocaleLink
-              data-testid={`HomePage-NavLink-${item.href.replace('/', '')}`}
-              key={item.href}
-              href={item.href}
-              className={clsx(
-                'block rounded-lg p-6',
-                'bg-secondary',
-                'border border-border',
-                'hover:bg-elevated',
-                'transition-colors duration-200'
-              )}
-            >
-              <h3 className={`text-xl font-semibold mb-3 text-text`}>
-                {t(item.titleKey)}
-              </h3>
-              <p className="text-text-secondary mb-4">
-                {t(item.descriptionKey)}
-              </p>
-              <Button type="primary" className="w-full">
-                {tt.explore}
-              </Button>
-            </LocaleLink>
-          ))}
-        </div>
-      </section>
-
-      {/* Call to Action Section */}
-      <section className="py-16 px-4 bg-elevated">
-        <div className="max-w-4xl mx-auto text-center">
-          <h2 className="text-3xl font-bold mb-4 text-text">
-            {tt.getStartedTitle}
-          </h2>
-          <p className="text-lg text-text-secondary mb-8">
-            {tt.getStartedDescription}
-          </p>
-          <Button type="primary" size="large" className="px-8">
-            {tt.getStartedButton}
-          </Button>
-        </div>
-      </section>
-    </div>
-  );
-}

package/dist/templates/react-app/src/pages/base/IdentifierPage.tsx

@@ -1,117 +0,0 @@
-import {
-  ResourceEvent,
-  ResourceTable
-} from '@brain-toolkit/antd-blocks/resourceTable';
-import { useFactory, useLifecycle } from '@brain-toolkit/react-kit';
-import * as ErrorIdentifierList from '@config/Identifier/common/common.error';
-import { Button } from 'antd';
-import { IdentifierService } from '@/base/services/IdentifierService';
-import { useBaseRoutePage } from '@/uikit/contexts/BaseRouteContext';
-import { useIOC } from '@/uikit/hooks/useIOC';
-import type { Identifiter18nInterface } from '@config/i18n/identifiter18n';
-import type { ResourceTableOption } from '@brain-toolkit/antd-blocks/resourceTable';
-
-export default function IdentifierPage() {
-  const { t, tt } = useBaseRoutePage<Identifiter18nInterface>();
-  const identifierService = useIOC(IdentifierService);
-  const tableEvent = useFactory(ResourceEvent, 'identifier', identifierService);
-
-  useLifecycle(tableEvent);
-
-  const columns: ResourceTableOption<any>[] = [
-    {
-      title: tt.iTableIndex,
-      dataIndex: 'index',
-      key: 'index'
-    },
-    {
-      title: tt.iTableId,
-      dataIndex: 'id',
-      key: 'id'
-    },
-    {
-      title: tt.iTableLabel,
-      dataIndex: 'locale',
-      key: 'locale'
-    },
-    {
-      title: tt.iTableLocaleValue,
-      dataIndex: 'localeValue',
-      key: 'localeValue'
-    }
-  ] as ResourceTableOption<any>[];
-
-  return (
-    <div
-      data-testid="IdentifierPage"
-      className="min-h-screen bg-primary py-8 px-4 sm:px-6 lg:px-8"
-    >
-      <div className="max-w-4xl mx-auto space-y-6">
-        {/* Header Section */}
-        <section className="py-8">
-          <div className="text-center">
-            <h1 className="text-4xl md:text-5xl font-bold mb-6 text-text">
-              {tt.title}
-            </h1>
-            <p className="text-xl text-text-secondary mb-8">
-              {tt.sourceDescription}
-            </p>
-          </div>
-        </section>
-
-        {/* Error Identifier List */}
-        <div className="grid gap-4">
-          {Object.entries(ErrorIdentifierList).map(([key, value]) => (
-            <div
-              data-testid={`IdentifierPage-${key}`}
-              key={key}
-              className="bg-secondary shadow sm:rounded-lg p-6 border border-border hover:bg-elevated transition-colors duration-200"
-            >
-              <div className="flex flex-col sm:flex-row sm:items-center justify-between">
-                <span className="font-medium text-text mb-2 sm:mb-0">
-                  {key}
-                </span>
-                <span className="text-sm text-text-secondary bg-primary px-3 py-1 rounded-md">
-                  {t(value)}
-                </span>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        <div className="space-y-4">
-          <h2 className="text-2xl font-bold mb-4 text-text">
-            {tt.iTableTitle}
-          </h2>
-          <div className="text-lg text-text-secondary mb-6">
-            {tt.iTableDescription}
-          </div>
-          <ResourceTable
-            columns={columns}
-            tableEvent={tableEvent}
-            actionProps={false}
-            // use antd default pagination
-            pagination={{
-              pageSizeOptions: [20, 50, 100],
-              current: undefined,
-              pageSize: undefined,
-              total: undefined,
-              onChange: undefined
-            }}
-          />
-        </div>
-
-        {/* Call to Action Section */}
-        <section className="py-8 text-center">
-          <h2 className="text-2xl font-bold mb-4 text-text">{tt.helpTitle}</h2>
-          <p className="text-lg text-text-secondary mb-6">
-            {tt.helpDescription}
-          </p>
-          <Button type="primary" size="large">
-            {tt.contactSupport}
-          </Button>
-        </section>
-      </div>
-    </div>
-  );
-}