@gadmin2n/schematics 0.0.140 → 0.0.142

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

@@ -1,20 +1,37 @@
-import { ArrowLeftOutlined } from '@ant-design/icons';
+import {
+  ArrowLeftOutlined,
+  CheckCircleFilled,
+  EditOutlined,
+  EyeInvisibleOutlined,
+  EyeOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+} from '@ant-design/icons';
 import { useGetIdentity } from '@refinedev/core';
 import {
   Alert,
   Button,
   Card,
+  Descriptions,
+  Divider,
+  Drawer,
+  Empty,
   Form,
   Input,
+  Result,
+  Space,
   Spin,
+  Tag,
   Typography,
   message,
+  theme,
 } from 'antd';
 import { customRequest } from 'helpers/http';
-import { useEffect, useState } from 'react';
+import { HEADER_CARD_PROPS, PAGE_WRAPPER_STYLE } from 'constants/layout';
+import { useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-const { Title } = Typography;
+const { Paragraph, Text, Title } = Typography;
 
 interface TenantConfig {
   id: number;
@@ -23,84 +40,169 @@ interface TenantConfig {
   namespace: string;
   dbUrl: string;
   displayName: string;
-  runtimeBaseUrl: string;
-  runtimeToken: string;
+  runtimeBaseUrl?: string | null;
+  runtimeToken?: string | null;
+}
+
+interface TenantConfigListResponse {
+  data: TenantConfig[];
+}
+
+type TenantConfigFormValues = Omit<TenantConfig, 'id'>;
+
+const configSelect = {
+  id: true,
+  adminUrl: true,
+  adminToken: true,
+  namespace: true,
+  dbUrl: true,
+  displayName: true,
+  runtimeBaseUrl: true,
+  runtimeToken: true,
+};
+
+function maskSecret(value?: string | null) {
+  if (!value) return '未配置';
+  if (value.length <= 4) return '••••••••';
+  return `••••••••${value.slice(-4)}`;
+}
+
+function maskDatabaseUrl(value: string) {
+  return value.replace(/(\/\/[^:/?#]+:)[^@/?#]+(@)/, '$1••••••$2');
+}
+
+function SensitiveValue({
+  label,
+  value,
+  maskedValue,
+}: {
+  label: string;
+  value?: string | null;
+  maskedValue?: string;
+}) {
+  const [visible, setVisible] = useState(false);
+
+  if (!value) {
+    return <Text type="secondary">未配置</Text>;
+  }
+
+  return (
+    <Space size={6} style={{ maxWidth: '100%' }}>
+      <Text
+        code
+        style={{
+          overflowWrap: 'anywhere',
+          whiteSpace: 'normal',
+        }}
+      >
+        {visible ? value : (maskedValue ?? maskSecret(value))}
+      </Text>
+      <Button
+        type="text"
+        size="small"
+        aria-label={`${visible ? '隐藏' : '显示'} ${label}`}
+        icon={visible ? <EyeInvisibleOutlined /> : <EyeOutlined />}
+        onClick={() => setVisible((current) => !current)}
+      />
+    </Space>
+  );
 }
 
 export default function TemporalTenantPage() {
   const navigate = useNavigate();
-  const [form] = Form.useForm();
+  const [form] = Form.useForm<TenantConfigFormValues>();
+  const { token } = theme.useToken();
   const { data: identity } = useGetIdentity<any>();
   const isAdmin = (identity?.configPerms?.roles || []).includes('SYSTEM_ADMIN');
 
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
+  const [editorOpen, setEditorOpen] = useState(false);
   const [existing, setExisting] = useState<TenantConfig | null>(null);
+  const [loadError, setLoadError] = useState(false);
 
-  useEffect(() => {
-    customRequest('temporalTenantConfig/findMany', 'POST', {
-      take: 1,
-      skip: 0,
-      select: {
-        id: true,
-        adminUrl: true,
-        adminToken: true,
-        namespace: true,
-        dbUrl: true,
-        displayName: true,
-        runtimeBaseUrl: true,
-        runtimeToken: true,
+  const loadConfig = useCallback(async () => {
+    const res = await customRequest<TenantConfigListResponse>(
+      'temporalTenantConfig/findMany',
+      'POST',
+      {
+        take: 1,
+        skip: 0,
+        select: configSelect,
       },
-    })
-      .then((res: any) => {
-        const item = res?.data?.data?.[0] ?? null;
-        setExisting(item);
-        if (item) form.setFieldsValue(item);
+    );
+    const item = res.data[0] ?? null;
+    setExisting(item);
+    setLoadError(false);
+    return item;
+  }, []);
+
+  useEffect(() => {
+    loadConfig()
+      .catch(() => {
+        setLoadError(true);
+        message.error('加载配置失败');
       })
-      .catch(() => message.error('加载配置失败'))
       .finally(() => setLoading(false));
-  }, [form]);
+  }, [loadConfig]);
+
+  const retryLoadConfig = async () => {
+    setLoading(true);
+    try {
+      await loadConfig();
+    } catch {
+      setLoadError(true);
+      message.error('加载配置失败');
+    } finally {
+      setLoading(false);
+    }
+  };
 
-  const handleSave = async (values: Omit<TenantConfig, 'id'>) => {
+  const openEditor = () => {
+    form.resetFields();
+    if (existing) {
+      form.setFieldsValue(existing);
+    }
+    setEditorOpen(true);
+  };
+
+  const handleSave = async (values: TenantConfigFormValues) => {
     setSaving(true);
     try {
+      const payload = existing
+        ? { ...values, namespace: existing.namespace }
+        : values;
+
       if (existing) {
         await customRequest(
           `temporalTenantConfig/updateUnique/${existing.id}`,
           'PATCH',
-          values,
+          payload,
         );
-        message.success('更新成功，Temporal worker 已热重载连接');
+        message.success('配置已更新，Temporal Worker 将自动加载最新连接');
       } else {
-        await customRequest('temporalTenantConfig/createOne', 'POST', values);
-        message.success('注册成功');
+        await customRequest('temporalTenantConfig/createOne', 'POST', payload);
+        message.success('本 GAdmin 已注册到 Temporal');
       }
-      const res: any = await customRequest(
-        'temporalTenantConfig/findMany',
-        'POST',
-        {
-          take: 1,
-          skip: 0,
-          select: {
-            id: true,
-            adminUrl: true,
-            adminToken: true,
-            namespace: true,
-            dbUrl: true,
-            displayName: true,
-            runtimeBaseUrl: true,
-            runtimeToken: true,
-          },
-        },
-      );
-      setExisting(res?.data?.data?.[0] ?? null);
+
+      setEditorOpen(false);
+      await loadConfig();
     } catch (e: any) {
-      message.error(e?.response?.data?.message || '操作失败');
+      message.error(e?.response?.data?.message || '保存配置失败');
     } finally {
       setSaving(false);
     }
   };
 
+  const submitEditor = async () => {
+    try {
+      const values = await form.validateFields();
+      await handleSave(values);
+    } catch {
+      // Field-level validation messages are rendered by Ant Design.
+    }
+  };
+
   if (!isAdmin) {
     return (
       <div style={{ padding: 24 }}>
@@ -109,158 +211,312 @@ export default function TemporalTenantPage() {
     );
   }
 
-  if (loading) {
-    return (
-      <div
-        style={{ display: 'flex', justifyContent: 'center', paddingTop: 80 }}
-      >
-        <Spin size="large" />
-      </div>
-    );
-  }
-
   return (
-    <div
-      style={{
-        background: 'var(--ant-color-bg-layout)',
-        minHeight: 'calc(100vh - 64px)',
-      }}
-    >
-      <Card
-        style={{ marginBottom: 16 }}
-        styles={{ body: { padding: '16px 24px' } }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-          <Button
-            type="text"
-            icon={<ArrowLeftOutlined />}
-            onClick={() => navigate(-1)}
-          />
-          <div>
-            <Title level={4} style={{ margin: 0 }}>
-              服务注册
-            </Title>
+    <div style={PAGE_WRAPPER_STYLE}>
+      <Card {...HEADER_CARD_PROPS}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 16,
+            flexWrap: 'wrap',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <Button
+              type="text"
+              icon={<ArrowLeftOutlined />}
+              onClick={() => navigate(-1)}
+            />
+            <div>
+              <Title level={4} style={{ margin: 0 }}>
+                服务注册
+              </Title>
+              <Text type="secondary" style={{ fontSize: 12 }}>
+                管理本 GAdmin 与 Temporal Worker 的连接配置
+              </Text>
+            </div>
           </div>
+
+          {!loading && !loadError && existing && (
+            <Button
+              type="primary"
+              aria-label="修改配置"
+              icon={<EditOutlined />}
+              onClick={openEditor}
+            >
+              修改配置
+            </Button>
+          )}
         </div>
       </Card>
 
-      <Card styles={{ body: { padding: '24px 32px' } }}>
-        {existing && (
-          <Alert
-            type="info"
-            showIcon
-            message="修改 dbUrl 后，Temporal worker 会立即重载数据库连接"
-            style={{ marginBottom: 24 }}
+      <Card>
+        {loading ? (
+          <div
+            style={{ display: 'grid', placeItems: 'center', minHeight: 320 }}
+          >
+            <Spin size="large" />
+          </div>
+        ) : loadError ? (
+          <Result
+            status="error"
+            title="无法确认注册状态"
+            subTitle="未能读取本 GAdmin 的 Temporal 配置。请检查网络或权限后重试。"
+            extra={
+              <Button
+                type="primary"
+                icon={<ReloadOutlined />}
+                onClick={retryLoadConfig}
+              >
+                重新加载
+              </Button>
+            }
           />
+        ) : existing ? (
+          <>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 16,
+                flexWrap: 'wrap',
+                padding: '16px 20px',
+                background: 'var(--ant-color-fill-secondary)',
+                border: '1px solid var(--ant-color-border-secondary)',
+                borderRadius: 8,
+              }}
+            >
+              <Space size={12}>
+                <CheckCircleFilled
+                  style={{
+                    color: token.colorSuccess,
+                    fontSize: 22,
+                  }}
+                />
+                <div>
+                  <Text strong style={{ display: 'block' }}>
+                    已注册到 Temporal
+                  </Text>
+                  <Text type="secondary">{existing.displayName}</Text>
+                </div>
+              </Space>
+              <Tag color="success">{existing.namespace}</Tag>
+            </div>
+
+            <Divider orientation="left">租户身份</Divider>
+            <Descriptions
+              bordered
+              column={{ xs: 1, sm: 1, md: 2, lg: 2, xl: 2, xxl: 2 }}
+              styles={{ label: { width: 180 } }}
+            >
+              <Descriptions.Item label="显示名称">
+                {existing.displayName}
+              </Descriptions.Item>
+              <Descriptions.Item label="Namespace">
+                <Text code>{existing.namespace}</Text>
+              </Descriptions.Item>
+            </Descriptions>
+
+            <Divider orientation="left">Temporal 管理连接</Divider>
+            <Descriptions
+              bordered
+              column={1}
+              styles={{ label: { width: 180 } }}
+            >
+              <Descriptions.Item label="Admin URL">
+                <Text code>{existing.adminUrl}</Text>
+              </Descriptions.Item>
+              <Descriptions.Item label="Admin Token">
+                <SensitiveValue
+                  label="Admin Token"
+                  value={existing.adminToken}
+                />
+              </Descriptions.Item>
+            </Descriptions>
+
+            <Divider orientation="left">Worker 运行连接</Divider>
+            <Descriptions
+              bordered
+              column={1}
+              styles={{ label: { width: 180 } }}
+            >
+              <Descriptions.Item label="数据库连接地址">
+                <SensitiveValue
+                  label="数据库连接地址"
+                  value={existing.dbUrl}
+                  maskedValue={maskDatabaseUrl(existing.dbUrl)}
+                />
+              </Descriptions.Item>
+              <Descriptions.Item label="Runtime API 地址">
+                {existing.runtimeBaseUrl ? (
+                  <Text code>{existing.runtimeBaseUrl}</Text>
+                ) : (
+                  <Text type="secondary">未配置</Text>
+                )}
+              </Descriptions.Item>
+              <Descriptions.Item label="Runtime Token">
+                <SensitiveValue
+                  label="Runtime Token"
+                  value={existing.runtimeToken}
+                />
+              </Descriptions.Item>
+            </Descriptions>
+
+            <Alert
+              type="info"
+              showIcon
+              message="保存修改后，Temporal Worker 会自动加载本 GAdmin 的最新连接配置。"
+              style={{ marginTop: 20 }}
+            />
+          </>
+        ) : (
+          <Empty
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            description={
+              <Space direction="vertical" size={4}>
+                <Text strong>本 GAdmin 尚未注册</Text>
+                <Text type="secondary">
+                  注册后，Temporal Worker 才能执行本项目的 Workflow。
+                </Text>
+              </Space>
+            }
+          >
+            <Button type="primary" icon={<PlusOutlined />} onClick={openEditor}>
+              注册服务
+            </Button>
+          </Empty>
         )}
+      </Card>
+
+      <Drawer
+        title={existing ? '修改服务配置' : '注册本 GAdmin'}
+        width={600}
+        open={editorOpen}
+        destroyOnClose
+        maskClosable={!saving}
+        closable={!saving}
+        onClose={() => setEditorOpen(false)}
+        footer={
+          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+            <Button disabled={saving} onClick={() => setEditorOpen(false)}>
+              取消
+            </Button>
+            <Button type="primary" loading={saving} onClick={submitEditor}>
+              {existing ? '保存修改' : '注册服务'}
+            </Button>
+          </div>
+        }
+      >
+        <Paragraph type="secondary" style={{ marginBottom: 24 }}>
+          这些地址都需要从 Temporal Worker
+          所在网络访问。敏感信息保存后默认遮挡。
+        </Paragraph>
+
         <Form
+          id="temporal-tenant-form"
           form={form}
           layout="vertical"
           onFinish={handleSave}
-          style={{ maxWidth: 600 }}
+          requiredMark="optional"
         >
-          <Title level={5} style={{ color: 'var(--ant-color-text-secondary)' }}>
-            Admin API 连接
-          </Title>
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: '1fr 1fr',
-              gap: '0 16px',
-            }}
+          <Title level={5}>Temporal 管理连接</Title>
+          <Form.Item
+            label="Admin URL"
+            name="adminUrl"
+            rules={[{ required: true, message: '请输入 Admin URL' }]}
           >
-            <Form.Item
-              label="Admin URL"
-              name="adminUrl"
-              rules={[{ required: true, message: '请输入 Admin URL' }]}
-            >
-              <Input placeholder="http://localhost:8081" />
-            </Form.Item>
-            <Form.Item
-              label="Admin Token"
-              name="adminToken"
-              rules={[{ required: true, message: '请输入 Admin Token' }]}
-            >
-              <Input.Password placeholder="32 位 hex token" />
-            </Form.Item>
-          </div>
-
-          <Title
-            level={5}
-            style={{ color: 'var(--ant-color-text-secondary)', marginTop: 8 }}
+            <Input placeholder="http://localhost:8081" />
+          </Form.Item>
+          <Form.Item
+            label="Admin Token"
+            name="adminToken"
+            rules={[{ required: true, message: '请输入 Admin Token' }]}
           >
-            租户信息
+            <Input.Password
+              placeholder="Temporal Admin API Token"
+              autoComplete="new-password"
+            />
+          </Form.Item>
+
+          <Title level={5} style={{ marginTop: 28 }}>
+            本 GAdmin
           </Title>
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: '1fr 1fr',
-              gap: '0 16px',
-            }}
+          <Form.Item
+            label="Namespace"
+            name="namespace"
+            extra={
+              existing
+                ? 'Namespace 是远端租户标识，注册后不能在这里修改。'
+                : '用于隔离本 GAdmin 的 Workflow。'
+            }
+            rules={[{ required: true, message: '请输入 Namespace' }]}
           >
-            <Form.Item
-              label="Namespace"
-              name="namespace"
-              rules={[{ required: true, message: '请输入 namespace' }]}
-            >
-              <Input placeholder="gadmin-test" />
-            </Form.Item>
-            <Form.Item
-              label="Display Name"
-              name="displayName"
-              rules={[{ required: true, message: '请输入展示名' }]}
-            >
-              <Input placeholder="Gadmin Test" />
-            </Form.Item>
-          </div>
-
+            <Input disabled={Boolean(existing)} placeholder="gadmin-test" />
+          </Form.Item>
+          <Form.Item
+            label="显示名称"
+            name="displayName"
+            rules={[{ required: true, message: '请输入显示名称' }]}
+          >
+            <Input placeholder="GAdmin Test" />
+          </Form.Item>
           <Form.Item
-            label="DB URL（Temporal worker 视角）"
+            label="数据库连接地址"
             name="dbUrl"
-            rules={[{ required: true, message: '请输入 DB URL' }]}
+            extra="填写 Temporal Worker 能访问到的 PostgreSQL 地址。"
+            rules={[{ required: true, message: '请输入数据库连接地址' }]}
           >
-            <Input placeholder="postgresql://user:pw@host.containers.internal:5432/gadmin_demo" />
+            <Input.Password
+              placeholder="postgresql://user:password@host:5432/database"
+              autoComplete="new-password"
+            />
           </Form.Item>
 
-          <Title
-            level={5}
-            style={{ color: 'var(--ant-color-text-secondary)', marginTop: 24 }}
-          >
-            Runtime API 连接
+          <Title level={5} style={{ marginTop: 28 }}>
+            Runtime 连接
           </Title>
           <Form.Item
-            label="Runtime Base URL（Temporal worker 视角）"
+            label="Runtime API 地址"
             name="runtimeBaseUrl"
+            extra="填写 Temporal Worker 能访问到的 GAdmin API 地址，并以 /api 结尾。"
             rules={[
-              { required: true, message: '请输入 Runtime Base URL' },
-              { type: 'url', message: '请输入完整的 HTTP 或 HTTPS 地址' },
+              { required: true, message: '请输入 Runtime API 地址' },
+              {
+                validator: async (_, value?: string) => {
+                  if (!value) return;
+                  try {
+                    const url = new URL(value);
+                    if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+                      throw new Error();
+                    }
+                  } catch {
+                    throw new Error('请输入完整的 HTTP 或 HTTPS 地址');
+                  }
+                },
+              },
             ]}
-            extra="填写 Temporal worker 能访问到的 Gadmin API 地址，并以 /api 结尾"
           >
             <Input placeholder="http://gadmin-server:8000/api" />
           </Form.Item>
           <Form.Item
             label="Runtime Token"
             name="runtimeToken"
+            extra="必须与本 GAdmin 的 WORKFLOW_RUNTIME_TOKEN 完全一致。"
             rules={[
               { required: true, message: '请输入 Runtime Token' },
               { min: 32, message: 'Runtime Token 至少需要 32 个字符' },
             ]}
-            extra="必须与 Gadmin 的 WORKFLOW_RUNTIME_TOKEN 完全一致"
           >
             <Input.Password
-              placeholder="与 WORKFLOW_RUNTIME_TOKEN 相同"
+              placeholder="WORKFLOW_RUNTIME_TOKEN"
               autoComplete="new-password"
             />
           </Form.Item>
-
-          <Form.Item style={{ marginTop: 8 }}>
-            <Button type="primary" htmlType="submit" loading={saving}>
-              {existing ? '更新并同步到 Temporal' : '注册到 Temporal'}
-            </Button>
-          </Form.Item>
         </Form>
-      </Card>
+      </Drawer>
     </div>
   );
 }