@gadmin2n/schematics 0.0.144 → 0.0.145

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/connections/ConnectionModal.tsx

@@ -1,11 +1,24 @@
-import { Alert, Form, Input, Modal, Select, Switch, message } from 'antd';
-import { customRequest } from 'helpers/http';
+import { EyeOutlined } from '@ant-design/icons';
+import {
+  Button,
+  Form,
+  Input,
+  Modal,
+  Select,
+  Switch,
+  Typography,
+  message,
+} from 'antd';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { WorkflowCodeEditor } from '../components/WorkflowCodeEditor';
+import { useWorkflowFormValidation } from '../useWorkflowFormValidation';
 import type {
   ConnectionAuthType,
   IntegrationConnection,
 } from './connection.types';
+import { fetchConnectionSecrets, saveConnection } from './connectionsApi';
+import './connections.css';
 
 interface Props {
   open: boolean;
@@ -23,14 +36,18 @@ export function ConnectionModal({
   onSaved,
 }: Props) {
   const { t } = useTranslation('workflow');
+  const formValidation = useWorkflowFormValidation();
   const [form] = Form.useForm();
   const [saving, setSaving] = useState(false);
+  const [secretLoading, setSecretLoading] = useState(false);
+  const [secretLoaded, setSecretLoaded] = useState(false);
   const authType =
     Form.useWatch<ConnectionFormAuthType>('authType', form) ?? 'NONE';
 
   useEffect(() => {
     if (!open) return;
     form.resetFields();
+    setSecretLoaded(false);
     form.setFieldsValue(
       connection
         ? {
@@ -91,13 +108,7 @@ export function ConnectionModal({
         ...(connection && { expectedRevision: connection.revision }),
       };
       setSaving(true);
-      const saved = await customRequest<IntegrationConnection>(
-        connection
-          ? `integration-connections/${encodeURIComponent(connection.code)}`
-          : 'integration-connections',
-        connection ? 'PATCH' : 'POST',
-        payload,
-      );
+      const saved = await saveConnection(connection?.code, payload);
       message.success(
         connection
           ? t('connection.updateSuccess')
@@ -112,27 +123,53 @@ export function ConnectionModal({
     }
   }
 
+  async function revealSecrets() {
+    if (!connection) return;
+    setSecretLoading(true);
+    try {
+      const secrets = await fetchConnectionSecrets(connection.code);
+      if (isTencentTofConnection(connection)) {
+        form.setFieldValue('paasToken', secretValue(secrets.apiKey));
+      } else if (connection.authType === 'BEARER') {
+        form.setFieldValue('token', secretValue(secrets.token));
+      } else if (connection.authType === 'BASIC') {
+        form.setFieldsValue({
+          username: secretValue(secrets.username),
+          password: secretValue(secrets.password),
+        });
+      } else if (connection.authType === 'API_KEY') {
+        form.setFieldValue('apiKey', secretValue(secrets.apiKey));
+      }
+      setSecretLoaded(true);
+    } catch (error: any) {
+      message.error(error?.message ?? t('connection.secretLoadFailed'));
+    } finally {
+      setSecretLoading(false);
+    }
+  }
+
   return (
     <Modal
       open={open}
       title={connection ? t('connection.edit') : t('connection.new')}
-      okText={connection ? t('common.save') : t('connection.createAndUse')}
+      okText={connection ? t('connection.saveChanges') : t('connection.create')}
       confirmLoading={saving}
       onOk={save}
       onCancel={onCancel}
       destroyOnHidden
       width={680}
     >
-      <Alert
-        type="info"
-        showIcon
-        message={t('connection.description')}
-        style={{ marginBottom: 18 }}
-      />
-      <Form form={form} layout="vertical">
-        <div
-          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}
+      <Typography.Paragraph type="secondary" style={{ marginBottom: 18 }}>
+        {t('connection.description')}
+      </Typography.Paragraph>
+      <Form form={form} layout="vertical" {...formValidation}>
+        <Typography.Title
+          level={5}
+          className="workflow-connection-form__section-title"
         >
+          {t('connection.basicInformation')}
+        </Typography.Title>
+        <div className="workflow-connection-form__grid">
           <Form.Item
             name="name"
             label={t('common.name')}
@@ -158,9 +195,17 @@ export function ConnectionModal({
         >
           <Input placeholder="https://tickets.example.com/api" />
         </Form.Item>
-        <div
-          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}
+        <Form.Item name="description" label={t('common.description')}>
+          <Input.TextArea rows={2} />
+        </Form.Item>
+
+        <Typography.Title
+          level={5}
+          className="workflow-connection-form__section-title"
         >
+          {t('connection.credentials')}
+        </Typography.Title>
+        <div className="workflow-connection-form__grid">
           <Form.Item
             name="authType"
             label={t('connection.authentication')}
@@ -190,11 +235,28 @@ export function ConnectionModal({
 
         {connectionUsesAuthType(connection, authType) &&
           connection?.hasSecret && (
-            <Alert
-              type="success"
-              message={t('connection.storedHint')}
-              style={{ marginBottom: 16 }}
-            />
+            <div className="workflow-connection-secret-row">
+              <Typography.Text type="secondary">
+                {secretLoaded
+                  ? t('connection.secretLoaded')
+                  : t('connection.storedHint')}
+              </Typography.Text>
+              <Button
+                size="small"
+                icon={<EyeOutlined />}
+                loading={secretLoading}
+                aria-label={
+                  secretLoaded
+                    ? t('connection.reloadStoredSecret')
+                    : t('connection.showStoredSecret')
+                }
+                onClick={revealSecrets}
+              >
+                {secretLoaded
+                  ? t('connection.reloadStoredSecret')
+                  : t('connection.showStoredSecret')}
+              </Button>
+            </div>
           )}
         {authType === 'BEARER' && (
           <Form.Item
@@ -208,9 +270,7 @@ export function ConnectionModal({
           </Form.Item>
         )}
         {authType === 'BASIC' && (
-          <div
-            style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}
-          >
+          <div className="workflow-connection-form__grid">
             <Form.Item
               name="username"
               label={t('connection.username')}
@@ -236,27 +296,23 @@ export function ConnectionModal({
           </div>
         )}
         {authType === 'API_KEY' && (
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: '1fr 1fr 1fr',
-              gap: 16,
-            }}
-          >
-            <Form.Item
-              name="apiKeyName"
-              label={t('connection.keyName')}
-              rules={[{ required: true }]}
-            >
-              <Input placeholder="X-API-Key" />
-            </Form.Item>
-            <Form.Item
-              name="apiKeyLocation"
-              label={t('connection.sendIn')}
-              rules={[{ required: true }]}
-            >
-              <Select options={[{ value: 'HEADER' }, { value: 'QUERY' }]} />
-            </Form.Item>
+          <>
+            <div className="workflow-connection-form__grid">
+              <Form.Item
+                name="apiKeyName"
+                label={t('connection.keyName')}
+                rules={[{ required: true }]}
+              >
+                <Input placeholder="X-API-Key" />
+              </Form.Item>
+              <Form.Item
+                name="apiKeyLocation"
+                label={t('connection.sendIn')}
+                rules={[{ required: true }]}
+              >
+                <Select options={[{ value: 'HEADER' }, { value: 'QUERY' }]} />
+              </Form.Item>
+            </div>
             <Form.Item
               name="apiKey"
               label={t('connection.apiKey')}
@@ -268,16 +324,10 @@ export function ConnectionModal({
             >
               <Input.Password autoComplete="new-password" />
             </Form.Item>
-          </div>
+          </>
         )}
         {authType === 'TENCENT_TOF' && (
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: '1fr 1fr',
-              gap: 16,
-            }}
-          >
+          <div className="workflow-connection-form__grid">
             <Form.Item
               name="paasId"
               label={t('connection.paasId')}
@@ -298,6 +348,12 @@ export function ConnectionModal({
             </Form.Item>
           </div>
         )}
+        <Typography.Title
+          level={5}
+          className="workflow-connection-form__section-title"
+        >
+          {t('connection.requestDefaults')}
+        </Typography.Title>
         <Form.Item
           name="defaultHeaders"
           label={t('connection.defaultHeaders')}
@@ -308,10 +364,11 @@ export function ConnectionModal({
             },
           ]}
         >
-          <Input.TextArea rows={4} spellCheck={false} />
-        </Form.Item>
-        <Form.Item name="description" label={t('common.description')}>
-          <Input.TextArea rows={2} />
+          <WorkflowCodeEditor
+            language="json"
+            height={160}
+            ariaLabel={t('connection.defaultHeaders')}
+          />
         </Form.Item>
       </Form>
     </Modal>
@@ -334,6 +391,10 @@ function buildSecrets(values: Record<string, any>) {
   return undefined;
 }
 
+function secretValue(value: unknown): string {
+  return typeof value === 'string' ? value : '';
+}
+
 function isTencentTofConnection(
   connection?: IntegrationConnection | null,
 ): boolean {

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/connections/connections.css

@@ -0,0 +1,85 @@
+.workflow-connection-card {
+  height: 100%;
+  cursor: pointer;
+}
+
+.workflow-connection-card:focus-visible {
+  outline: 2px solid var(--ant-color-primary);
+  outline-offset: 2px;
+}
+
+.workflow-connection-card .ant-card-body {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.workflow-connection-card__header,
+.workflow-connection-card__footer {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.workflow-connection-card__description {
+  min-height: 40px;
+  margin: 14px 0 8px;
+}
+
+.workflow-connection-card__url {
+  margin: 0 0 14px;
+  color: var(--ant-color-text);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+}
+
+.workflow-connection-card__footer {
+  align-items: center;
+  margin-top: auto;
+  padding-top: 12px;
+  border-top: 1px solid var(--ant-color-border-secondary);
+}
+
+.workflow-connection-card__action {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  color: var(--ant-color-primary);
+  font-weight: 500;
+}
+
+.workflow-connection-form__section-title {
+  margin: 20px 0 12px !important;
+  color: var(--ant-color-text-secondary) !important;
+}
+
+.workflow-connection-form__section-title:first-of-type {
+  margin-top: 0 !important;
+}
+
+.workflow-connection-form__grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  column-gap: 16px;
+}
+
+.workflow-connection-secret-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: -2px 0 16px;
+}
+
+@media (max-width: 640px) {
+  .workflow-connection-form__grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .workflow-connection-secret-row {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/connections/connectionsApi.ts

@@ -0,0 +1,29 @@
+import { customRequest } from 'helpers/http';
+import type { IntegrationConnection } from './connection.types';
+
+export function fetchConnections(query: string) {
+  return customRequest<IntegrationConnection[]>(
+    `integration-connections?q=${encodeURIComponent(query)}`,
+    'GET',
+  );
+}
+
+export function saveConnection(
+  code: string | undefined,
+  payload: Record<string, unknown>,
+) {
+  return customRequest<IntegrationConnection>(
+    code
+      ? `integration-connections/${encodeURIComponent(code)}`
+      : 'integration-connections',
+    code ? 'PATCH' : 'POST',
+    payload,
+  );
+}
+
+export function fetchConnectionSecrets(code: string) {
+  return customRequest<Record<string, unknown>>(
+    `integration-connections/${encodeURIComponent(code)}/secrets`,
+    'GET',
+  );
+}

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

@@ -0,0 +1,75 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import i18n from '../../../i18n';
+import { fetchConnections } from './connectionsApi';
+import ConnectionsPage from './index';
+
+vi.mock('components', () => ({
+  PageHeader: ({ title, extra }: { title: string; extra: React.ReactNode }) => (
+    <header>
+      <h1>{title}</h1>
+      {extra}
+    </header>
+  ),
+}));
+
+vi.mock('./connectionsApi', () => ({
+  fetchConnections: vi.fn(),
+}));
+
+vi.mock('./ConnectionModal', () => ({
+  ConnectionModal: ({
+    open,
+    connection,
+  }: {
+    open: boolean;
+    connection?: { name: string } | null;
+  }) => (open ? <div>正在编辑：{connection?.name ?? '新连接'}</div> : null),
+}));
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: () => ({
+    matches: false,
+    addListener: () => undefined,
+    removeListener: () => undefined,
+    addEventListener: () => undefined,
+    removeEventListener: () => undefined,
+    dispatchEvent: () => false,
+  }),
+});
+
+describe('ConnectionsPage', () => {
+  beforeEach(async () => {
+    await i18n.changeLanguage('zh_CN');
+    vi.mocked(fetchConnections).mockResolvedValue([
+      {
+        id: '1',
+        code: 'ticket-system',
+        name: '工单系统',
+        baseUrl: 'https://tickets.example.com',
+        authType: 'BEARER',
+        publicConfig: { defaultHeaders: {} },
+        hasSecret: true,
+        isEnabled: true,
+        revision: 1,
+        updatedAt: '2026-08-13T00:00:00.000Z',
+      },
+    ]);
+  });
+
+  it('opens the connection editor when the card is clicked', async () => {
+    const user = userEvent.setup();
+    render(<ConnectionsPage />);
+
+    const card = await screen.findByRole('button', {
+      name: '查看并编辑 工单系统',
+    });
+    await user.click(card);
+
+    await waitFor(() =>
+      expect(screen.getByText('正在编辑：工单系统')).toBeInTheDocument(),
+    );
+  });
+});

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

@@ -6,7 +6,6 @@ import {
   Input,
   Space,
   Spin,
-  Switch,
   Tag,
   Typography,
   message,
@@ -17,7 +16,6 @@ import {
   PlusOutlined,
   ReloadOutlined,
 } from '@ant-design/icons';
-import { customRequest } from 'helpers/http';
 import { PageHeader } from 'components';
 import {
   NESTED_CARD_PROPS,
@@ -26,7 +24,10 @@ import {
 } from 'constants/layout';
 import { ConnectionModal } from './ConnectionModal';
 import type { IntegrationConnection } from './connection.types';
+import { fetchConnections } from './connectionsApi';
 import { useTranslation } from 'react-i18next';
+import '../workflow-ui.css';
+import './connections.css';
 
 export default function ConnectionsPage() {
   const { t } = useTranslation('workflow');
@@ -40,12 +41,7 @@ export default function ConnectionsPage() {
   const load = useCallback(async () => {
     setLoading(true);
     try {
-      setConnections(
-        await customRequest<IntegrationConnection[]>(
-          `integration-connections?q=${encodeURIComponent(query)}`,
-          'GET',
-        ),
-      );
+      setConnections(await fetchConnections(query));
     } catch (error: any) {
       message.error(error?.message ?? t('connection.loadFailed'));
     } finally {
@@ -56,13 +52,15 @@ export default function ConnectionsPage() {
   useEffect(() => void load(), [load]);
 
   return (
-    <div style={PAGE_WRAPPER_STYLE}>
+    <div className="workflow-page-stack" style={PAGE_WRAPPER_STYLE}>
       <PageHeader
         title={t('connection.title')}
         subtitle={t('connection.subtitle')}
         extra={
           <Space>
-            <Button icon={<ReloadOutlined />} onClick={load} />
+            <Button icon={<ReloadOutlined />} onClick={load}>
+              {t('connection.refresh')}
+            </Button>
             <Button
               type="primary"
               icon={<PlusOutlined />}
@@ -92,7 +90,15 @@ export default function ConnectionsPage() {
             style={{ display: 'block', margin: '48px auto' }}
           />
         ) : connections.length === 0 ? (
-          <Empty description={t('connection.empty')} />
+          <Empty description={t('connection.empty')}>
+            <Button
+              type="primary"
+              icon={<PlusOutlined />}
+              onClick={() => setEditing(null)}
+            >
+              {t('connection.new')}
+            </Button>
+          </Empty>
         ) : (
           <div
             style={{
@@ -107,14 +113,21 @@ export default function ConnectionsPage() {
                 size="small"
                 hoverable
                 {...NESTED_CARD_PROPS}
+                className="workflow-connection-card"
+                role="button"
+                tabIndex={0}
+                aria-label={t('connection.openAria', {
+                  name: connection.name,
+                })}
+                onClick={() => setEditing(connection)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    setEditing(connection);
+                  }
+                }}
               >
-                <div
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    gap: 12,
-                  }}
-                >
+                <div className="workflow-connection-card__header">
                   <Space align="start">
                     <ApiOutlined
                       style={{
@@ -135,29 +148,37 @@ export default function ConnectionsPage() {
                       </Typography.Text>
                     </div>
                   </Space>
-                  <Button
-                    type="text"
-                    icon={<EditOutlined />}
-                    onClick={() => setEditing(connection)}
-                  />
-                </div>
-                <Typography.Paragraph
-                  ellipsis
-                  style={{ margin: '14px 0 10px' }}
-                >
-                  {connection.baseUrl}
-                </Typography.Paragraph>
-                <Space wrap>
-                  <Tag>{connection.authType}</Tag>
-                  {connection.hasSecret && (
-                    <Tag color="green">{t('connection.secretStored')}</Tag>
-                  )}
                   <Tag color={connection.isEnabled ? 'blue' : 'default'}>
                     {connection.isEnabled
                       ? t('common.enabled')
                       : t('connection.disabled')}
                   </Tag>
-                </Space>
+                </div>
+                <Typography.Paragraph
+                  type="secondary"
+                  ellipsis={{ rows: 2 }}
+                  className="workflow-connection-card__description"
+                >
+                  {connection.description || t('connection.noDescription')}
+                </Typography.Paragraph>
+                <Typography.Paragraph
+                  ellipsis={{ rows: 1, tooltip: connection.baseUrl }}
+                  className="workflow-connection-card__url"
+                >
+                  {connection.baseUrl}
+                </Typography.Paragraph>
+                <div className="workflow-connection-card__footer">
+                  <Space wrap size={[4, 4]}>
+                    <Tag>{connectionAuthLabel(connection, t)}</Tag>
+                    {connection.hasSecret && (
+                      <Tag color="green">{t('connection.secretStored')}</Tag>
+                    )}
+                  </Space>
+                  <span className="workflow-connection-card__action">
+                    <EditOutlined />
+                    {t('connection.openAndEdit')}
+                  </span>
+                </div>
               </Card>
             ))}
           </div>
@@ -178,3 +199,15 @@ export default function ConnectionsPage() {
     </div>
   );
 }
+
+function connectionAuthLabel(
+  connection: IntegrationConnection,
+  t: (key: string) => string,
+): string {
+  if (connection.publicConfig?.signatureType === 'TENCENT_TOF')
+    return t('connection.tencentTof');
+  if (connection.authType === 'BEARER') return t('connection.bearerToken');
+  if (connection.authType === 'BASIC') return t('connection.basicAuthFull');
+  if (connection.authType === 'API_KEY') return t('connection.apiKey');
+  return t('connection.noAuth');
+}