@gadmin2n/schematics 0.0.72 → 0.0.75

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/agenda/index.tsx

@@ -1,15 +1,16 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
+  Alert,
   Badge,
   Button,
   Card,
   Col,
   Input,
+  Modal,
   Popconfirm,
   Row,
   Select,
   Space,
-  Statistic,
   Switch,
   Table,
   Tag,
@@ -20,12 +21,14 @@ import {
 import {
   DeleteOutlined,
   PlayCircleOutlined,
+  PlusOutlined,
   ReloadOutlined,
+  SendOutlined,
 } from '@ant-design/icons';
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import { customRequest } from 'helpers/http';
 
-const { Title } = Typography;
+const { Title, Text } = Typography;
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -57,6 +60,18 @@ interface Overview {
   active: number;
 }
 
+interface MetricsOverview {
+  totalRuns: { last24h: number; total: number };
+  successRate: { last24h: number; total: number };
+  failed: { last24h: number; total: number };
+  duration: {
+    last24h: { avg: number; p95: number };
+    total: { avg: number; p95: number };
+  };
+  running: number;
+  queued: number;
+}
+
 interface JobsResponse {
   overview: Overview;
   modules: string[];
@@ -118,16 +133,35 @@ function RunDot({
   );
 }
 
+// ─── Duration formatter ───────────────────────────────────────────────────────
+
+function formatDuration(ms: number): string {
+  if (ms <= 0) return '—';
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  const sec = ms / 1000;
+  if (sec < 60) return `${sec.toFixed(1)}s`;
+  const m = Math.floor(sec / 60);
+  const s = Math.round(sec % 60);
+  return `${m}m ${s}s`;
+}
+
 // ─── AgendaJobsPage ───────────────────────────────────────────────────────────
 
 export default function AgendaJobsPage() {
   const navigate = useNavigate();
   const [jobs, setJobs] = useState<JobItem[]>([]);
   const [overview, setOverview] = useState<Overview | null>(null);
+  const [metricsOverview, setMetricsOverview] =
+    useState<MetricsOverview | null>(null);
   const [modules, setModules] = useState<string[]>([]);
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
 
+  // AI Create modal
+  const [aiModalOpen, setAiModalOpen] = useState(false);
+  const [aiPrompt, setAiPrompt] = useState('');
+  const [aiSent, setAiSent] = useState(false);
+
   // Filters — synced with URL search params
   const [searchParams, setSearchParams] = useSearchParams();
   const filterState = searchParams.get('state') || undefined;
@@ -191,15 +225,15 @@ export default function AgendaJobsPage() {
       if (filterName) params.q = filterName;
       if (filterModule) params.module = filterModule;
 
-      const res = await customRequest<JobsResponse>(
-        'agenda/jobs',
-        'GET',
-        params,
-      );
+      const [res, metrics] = await Promise.all([
+        customRequest<JobsResponse>('agenda/jobs', 'GET', params),
+        customRequest<MetricsOverview>('agenda/overview', 'GET'),
+      ]);
       setJobs(res.jobs);
       setOverview(res.overview);
       setModules(res.modules);
       setTotal(res.total);
+      setMetricsOverview(metrics);
     } catch (e: any) {
       message.error(e?.message ?? 'Failed to fetch jobs');
     } finally {
@@ -235,21 +269,17 @@ export default function AgendaJobsPage() {
     }
   }
 
-  // ─── Overview cards ────────────────────────────────────────────────────────
-
-  const OVERVIEW_ITEMS: {
-    key: keyof Overview;
-    label: string;
-    color: string;
-  }[] = [
-    { key: 'running', label: 'Running', color: '#1677ff' },
-    { key: 'scheduled', label: 'Scheduled', color: '#595959' },
-    { key: 'queued', label: 'Queued', color: '#faad14' },
-    { key: 'completed', label: 'Completed', color: '#52c41a' },
-    { key: 'failed', label: 'Failed', color: '#ff4d4f' },
-    { key: 'repeating', label: 'Repeating', color: '#722ed1' },
-    { key: 'paused', label: 'Paused', color: '#8c8c8c' },
-  ];
+  // ─── Metrics cards helpers ───────────────────────────────────────────────
+
+  const metricsCardStyle = (key?: string): React.CSSProperties => ({
+    cursor: key ? 'pointer' : 'default',
+    borderColor: key && filterState === key ? '#1677ff' : undefined,
+    height: '100%',
+  });
+
+  const handleMetricClick = (state: string) => {
+    setFilterState(filterState === state ? undefined : state);
+  };
 
   // ─── Table columns ─────────────────────────────────────────────────────────
 
@@ -304,6 +334,19 @@ export default function AgendaJobsPage() {
       width: 100,
       render: (state: string) => <StateTag state={state} />,
     },
+    {
+      title: 'Runs',
+      key: 'runs',
+      width: 170,
+      render: (_: any, record: JobItem) => (
+        <Space size={6}>
+          <RunDot count={record.runs.queued} color="#faad14" label="Queued" />
+          <RunDot count={record.runs.success} color="#006d32" label="Success" />
+          <RunDot count={record.runs.running} color="#52c41a" label="Running" />
+          <RunDot count={record.runs.failed} color="#ff4d4f" label="Failed" />
+        </Space>
+      ),
+    },
     {
       title: 'Schedule',
       dataIndex: 'repeatInterval',
@@ -353,19 +396,6 @@ export default function AgendaJobsPage() {
           '—'
         ),
     },
-    {
-      title: 'Runs',
-      key: 'runs',
-      width: 170,
-      render: (_: any, record: JobItem) => (
-        <Space size={6}>
-          <RunDot count={record.runs.queued} color="#faad14" label="Queued" />
-          <RunDot count={record.runs.success} color="#006d32" label="Success" />
-          <RunDot count={record.runs.running} color="#52c41a" label="Running" />
-          <RunDot count={record.runs.failed} color="#ff4d4f" label="Failed" />
-        </Space>
-      ),
-    },
     {
       title: 'Actions',
       key: 'actions',
@@ -414,34 +444,193 @@ export default function AgendaJobsPage() {
           <Title level={4} style={{ margin: 0 }}>
             Cron Jobs
           </Title>
-          <Button icon={<ReloadOutlined />} onClick={fetchJobs}></Button>
+          <Space>
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={() => {
+                setAiModalOpen(true);
+                setAiSent(false);
+                setAiPrompt('');
+              }}
+            >
+              AI创建任务
+            </Button>
+            <Button icon={<ReloadOutlined />} onClick={fetchJobs}></Button>
+          </Space>
         </div>
       </Card>
 
-      {/* Overview cards */}
-      {overview && (
+      {/* Metrics cards */}
+      {metricsOverview && (
         <Row gutter={12} style={{ marginBottom: 16 }}>
-          {OVERVIEW_ITEMS.map(({ key, label, color }) => (
-            <Col key={key} flex="1">
-              <Card
-                size="small"
-                hoverable
-                onClick={() =>
-                  setFilterState(filterState === key ? undefined : key)
-                }
+          {/* Total Runs */}
+          <Col flex="1">
+            <Card size="small" style={metricsCardStyle()}>
+              <Text type="secondary" style={{ fontSize: 14 }}>
+                Total Runs
+              </Text>
+              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
+                <span
+                  style={{ fontSize: 24, fontWeight: 600, lineHeight: 1.3 }}
+                >
+                  {metricsOverview.totalRuns.last24h}
+                </span>
+                <Text type="secondary" style={{ fontSize: 12 }}>
+                  24H
+                </Text>
+              </div>
+              <Text type="secondary" style={{ fontSize: 12 }}>
+                Total: {metricsOverview.totalRuns.total}
+              </Text>
+            </Card>
+          </Col>
+
+          {/* Success Rate */}
+          <Col flex="1">
+            <Card size="small" style={metricsCardStyle()}>
+              <Text type="secondary" style={{ fontSize: 14 }}>
+                Success Rate
+              </Text>
+              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
+                <span
+                  style={{
+                    fontSize: 24,
+                    fontWeight: 600,
+                    lineHeight: 1.3,
+                    color: '#52c41a',
+                  }}
+                >
+                  {metricsOverview.successRate.last24h}%
+                </span>
+                <Text type="secondary" style={{ fontSize: 12 }}>
+                  24H
+                </Text>
+              </div>
+              <Text type="secondary" style={{ fontSize: 12 }}>
+                Total: {metricsOverview.successRate.total}%
+              </Text>
+            </Card>
+          </Col>
+
+          {/* Failed — clickable */}
+          <Col flex="1">
+            <Card
+              size="small"
+              hoverable
+              onClick={() => handleMetricClick('failed')}
+              style={metricsCardStyle('failed')}
+            >
+              <Text type="secondary" style={{ fontSize: 14 }}>
+                Failed
+              </Text>
+              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
+                <span
+                  style={{
+                    fontSize: 24,
+                    fontWeight: 600,
+                    lineHeight: 1.3,
+                    color: '#ff4d4f',
+                  }}
+                >
+                  {metricsOverview.failed.last24h}
+                </span>
+                <Text type="secondary" style={{ fontSize: 12 }}>
+                  24H
+                </Text>
+              </div>
+              <Text type="secondary" style={{ fontSize: 12 }}>
+                Total: {metricsOverview.failed.total}
+              </Text>
+            </Card>
+          </Col>
+
+          {/* Duration P95 */}
+          <Col flex="1">
+            <Tooltip
+              title={
+                <>
+                  <div>
+                    Avg (24H):{' '}
+                    {formatDuration(metricsOverview.duration.last24h.avg)}
+                  </div>
+                  <div>
+                    Avg (Total):{' '}
+                    {formatDuration(metricsOverview.duration.total.avg)}
+                  </div>
+                </>
+              }
+            >
+              <Card size="small" style={metricsCardStyle()}>
+                <Text type="secondary" style={{ fontSize: 14 }}>
+                  Duration (P95)
+                </Text>
+                <div
+                  style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}
+                >
+                  <span
+                    style={{ fontSize: 24, fontWeight: 600, lineHeight: 1.3 }}
+                  >
+                    {formatDuration(metricsOverview.duration.last24h.p95)}
+                  </span>
+                  <Text type="secondary" style={{ fontSize: 12 }}>
+                    24H
+                  </Text>
+                </div>
+                <Text type="secondary" style={{ fontSize: 12 }}>
+                  Total: {formatDuration(metricsOverview.duration.total.p95)}
+                </Text>
+              </Card>
+            </Tooltip>
+          </Col>
+
+          {/* Running — clickable */}
+          <Col flex="1">
+            <Card
+              size="small"
+              hoverable
+              onClick={() => handleMetricClick('running')}
+              style={metricsCardStyle('running')}
+            >
+              <Text type="secondary" style={{ fontSize: 14 }}>
+                Running
+              </Text>
+              <div
                 style={{
-                  borderColor: filterState === key ? color : undefined,
-                  cursor: 'pointer',
+                  fontSize: 24,
+                  fontWeight: 600,
+                  lineHeight: 1.3,
+                  color: '#1677ff',
                 }}
               >
-                <Statistic
-                  title={label}
-                  value={overview[key]}
-                  valueStyle={{ color }}
-                />
-              </Card>
-            </Col>
-          ))}
+                {metricsOverview.running}
+              </div>
+            </Card>
+          </Col>
+
+          {/* Queued — clickable */}
+          <Col flex="1">
+            <Card
+              size="small"
+              hoverable
+              onClick={() => handleMetricClick('queued')}
+              style={metricsCardStyle('queued')}
+            >
+              <Text type="secondary" style={{ fontSize: 14 }}>
+                Queued
+              </Text>
+              <div
+                style={{
+                  fontSize: 24,
+                  fontWeight: 600,
+                  lineHeight: 1.3,
+                  color: '#faad14',
+                }}
+              >
+                {metricsOverview.queued}
+              </div>
+            </Card>
+          </Col>
         </Row>
       )}
 
@@ -521,6 +710,7 @@ export default function AgendaJobsPage() {
           loading={loading}
           columns={columns}
           dataSource={jobs}
+          scroll={{ x: 1200 }}
           pagination={{
             current: page,
             pageSize: PAGE_SIZE,
@@ -531,6 +721,69 @@ export default function AgendaJobsPage() {
           size="small"
         />
       </Card>
+
+      {/* AI Create Cron Job Modal */}
+      <Modal
+        title="AI 创建定时任务"
+        open={aiModalOpen}
+        onCancel={() => setAiModalOpen(false)}
+        footer={null}
+        width={520}
+      >
+        <Text type="secondary" style={{ display: 'block', marginBottom: 12 }}>
+          描述你的业务模块和定时任务需求，AI 将自动为你创建
+        </Text>
+        <Input.TextArea
+          value={aiPrompt}
+          onChange={(e) => setAiPrompt(e.target.value)}
+          placeholder={
+            '例：为 order 模块创建一个定时任务，每天凌晨2点自动清理超过30天的已取消订单，执行前先记录日志，失败时发送通知'
+          }
+          autoSize={{ minRows: 6, maxRows: 12 }}
+          onPressEnter={(e) => {
+            if (e.ctrlKey && aiPrompt.trim()) {
+              window.parent.postMessage(
+                {
+                  type: 'SEND_PROMPT',
+                  payload: `使用 cron-job-management skill来创建一个定时任务，任务描述：\n${aiPrompt.trim()}`,
+                },
+                '*',
+              );
+              setAiSent(true);
+            }
+          }}
+        />
+        <Button
+          type="primary"
+          icon={<SendOutlined />}
+          onClick={() => {
+            if (aiPrompt.trim()) {
+              window.parent.postMessage(
+                {
+                  type: 'SEND_PROMPT',
+                  payload: `使用 cron-job-management skill来创建一个定时任务，任务描述：\n${aiPrompt.trim()}`,
+                },
+                '*',
+              );
+              setAiSent(true);
+            }
+          }}
+          disabled={!aiPrompt.trim()}
+          style={{ marginTop: 12 }}
+          block
+        >
+          发送
+        </Button>
+        {aiSent && (
+          <Alert
+            type="success"
+            showIcon
+            style={{ marginTop: 12 }}
+            message="已发送给 AI Agent"
+            description="请查看右下角 Agent 的工作情况，如果成功了，请点右侧刷新按钮查看。"
+          />
+        )}
+      </Modal>
     </div>
   );
 }

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/agenda/show.tsx

@@ -155,9 +155,7 @@ function DurationChart({
       xAxis: {
         type: 'category' as const,
         data: sorted.map((l) =>
-          new Date(l.startAt).toLocaleString(undefined, {
-            month: 'short',
-            day: 'numeric',
+          new Date(l.startAt).toLocaleTimeString(undefined, {
             hour: '2-digit',
             minute: '2-digit',
           }),

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/agendaJob/create.tsx

@@ -0,0 +1,108 @@
+import {
+  FieldDataType,
+  handleInitialValues,
+  handleOnFinish,
+  ModelType,
+  produceModel,
+} from '@gadmin2n/react-common';
+import { Create, useFileUploadState, useForm } from '@refinedev/antd';
+import { Form } from 'antd';
+import {
+  IResourceComponentsProps,
+  useApiUrl,
+  useTranslate,
+} from '@refinedev/core';
+import React, { useContext, useState } from 'react';
+import { getFormItem, onFormValuesChange } from '../../helpers';
+import { modelsMap, modelsEnum } from '../../generated/models.index';
+import {
+  agendaJobFormConfig as formConfig,
+  agendaJobFormPrismaSelect as formPrismaSelect,
+} from '../../generated/props/agendaJob/config';
+import {
+  agendaJobModel,
+  useRelation,
+} from '../../generated/props/agendaJob/model';
+import { AgendaJob } from '../../generated/types/prisma.types';
+import { AgendaJobForm as transformClass } from '../../generated/props/agendaJob/form.validator';
+import { BusinessContext } from 'components/contexts/business';
+
+export const AgendaJobCreate: React.FC<IResourceComponentsProps> = () => {
+  const resourceName = 'agendaJob';
+  const t = useTranslate();
+
+  const [[fields, model]] = useState(() => {
+    const model: ModelType = produceModel(
+      agendaJobModel,
+      {
+        // all formItem attrs surport, https://ant.design/components/form#formitem
+        // description : { component : <MDEditor data-color-mode="light" /> },
+        // status : { normalize : (value: any) => value ? "1" : "0" },
+        // cron: {validator: { validator: runCronValidator },},
+      },
+      transformClass,
+    );
+
+    const fields: FieldDataType[] = formConfig.fields
+      .map((fieldName: string) => model[fieldName])
+      .filter((field: FieldDataType) => field);
+
+    return [fields, model] as const;
+  });
+
+  const { formProps, saveButtonProps, onFinish, form } = useForm<AgendaJob>({
+    meta: { select: formPrismaSelect },
+  });
+  if (formProps.initialValues || formConfig.initialValues) {
+    formProps.initialValues = handleInitialValues(
+      formProps.initialValues || formConfig.initialValues || {},
+      fields,
+    );
+  }
+
+  const apiUrl = useApiUrl();
+  const { isLoading, onChange } = useFileUploadState();
+  const relationSelectProps = useRelation(modelsMap);
+
+  return (
+    <Create
+      saveButtonProps={{
+        ...saveButtonProps,
+        disabled: isLoading,
+      }}
+    >
+      <Form
+        {...formProps}
+        validateTrigger="onBlur"
+        onFinish={(values) => {
+          onFinish(
+            handleOnFinish(
+              {
+                ...values,
+              },
+              fields,
+            ),
+          );
+        }}
+        layout="vertical"
+        form={form}
+        onValuesChange={onFormValuesChange(form, formConfig.reaction)}
+      >
+        {fields.map((field) => {
+          return getFormItem(
+            field,
+            resourceName,
+            t,
+            form,
+            formConfig.reaction,
+            modelsEnum,
+            model,
+            apiUrl,
+            relationSelectProps,
+            onChange,
+          );
+        })}
+      </Form>
+    </Create>
+  );
+};