gongxue-base/apps/admin/src/pages/IntegrationConfig/index.tsx

import React, { useEffect, useMemo, useState } from 'react';
import {
  Card, Form, Input, Button, Space, message, Spin, Switch, Alert, Descriptions, Tag,
} from 'antd';
import {
  SaveOutlined, ApiOutlined, CheckCircleOutlined, CloseCircleOutlined,
} from '@ant-design/icons';
import api from '../../api';

interface DingTalkConfig {
  agentId: string;
  appSecret: string;
  corpId: string;
  startEnable: boolean;
}

/** Utility: recursively flatten org tree nodes to extract user ids (for import guard) */
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const getAllUsers = (nodes: any[]): Array<{ userid: string }> => {
  return nodes.flatMap((n) => [...(n.users ?? []), ...getAllUsers(n.children ?? [])]);
};

const IntegrationConfigPage: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [testing, setTesting] = useState(false);
  const [config, setConfig] = useState<DingTalkConfig | null>(null);
  const [verified, setVerified] = useState<boolean | null>(null);
  const [form] = Form.useForm<DingTalkConfig>();

  const fetchConfig = async () => {
    setLoading(true);
    try {
      const res = await api.get<{ success: boolean; data: Array<{ type: string; verify: boolean; config: DingTalkConfig }> }>('/integration/config');
      const dt = res.data?.find((c) => c.type === 'DINGTALK');
      if (dt) {
        setConfig(dt.config);
        setVerified(dt.verify);
        form.setFieldsValue(dt.config);
      }
    } catch {
      // not configured
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchConfig();
  }, []);

  const handleSave = async () => {
    const values = await form.validateFields();
    setSaving(true);
    try {
      await api.post('/integration/config', { type: 'DINGTALK', config: values });
      message.success('配置已保存');
      await fetchConfig();
    } catch (e: unknown) {
      const err = e as { message?: string };
      message.error(err?.message || '保存失败');
    } finally {
      setSaving(false);
    }
  };

  const handleTest = async () => {
    const values = await form.validateFields();
    setTesting(true);
    try {
      const res = await api.post<{ success: boolean; message: string }>('/integration/config/test', {
        type: 'DINGTALK',
        config: values,
      });
      setVerified(res.success);
      message.success(res.message);
    } catch (e: unknown) {
      const err = e as { message?: string };
      setVerified(false);
      message.error(err?.message || '连接失败');
    } finally {
      setTesting(false);
    }
  };

  return (
    <Card title="钉钉集成配置" extra={
      <Space>
        {verified === true && <Tag icon={<CheckCircleOutlined />} color="success">已连接</Tag>}
        {verified === false && <Tag icon={<CloseCircleOutlined />} color="error">未连接</Tag>}
      </Space>
    }>
      <Spin spinning={loading}>
        {config && (
          <Descriptions size="small" column={2} style={{ marginBottom: 24 }}>
            <Descriptions.Item label="CorpId">{config.corpId || '-'}</Descriptions.Item>
            <Descriptions.Item label="AppKey">{config.agentId || '-'}</Descriptions.Item>
            <Descriptions.Item label="启用同步">
              <Tag color={config.startEnable ? 'green' : 'default'}>
                {config.startEnable ? '已启用' : '未启用'}
              </Tag>
            </Descriptions.Item>
          </Descriptions>
        )}

        <Alert
          type="info"
          message="配置钉钉应用凭证后，可使用组织架构同步、考勤导入和排班同步功能。"
          style={{ marginBottom: 24 }}
          showIcon
        />

        <Form form={form} layout="vertical" style={{ maxWidth: 480 }}>
          <Form.Item name="corpId" label="CorpId（企业ID）" rules={[{ required: true, message: '请输入 CorpId' }]}>
            <Input placeholder="dingxxxxxxxx" />
          </Form.Item>
          <Form.Item name="agentId" label="AppKey（应用凭证）" rules={[{ required: true, message: '请输入 AppKey' }]}>
            <Input placeholder="从钉钉开放平台获取" />
          </Form.Item>
          <Form.Item
            name="appSecret"
            label="AppSecret（应用密钥）"
            rules={[{ required: true, message: '请输入 AppSecret' }]}
            extra="保存后仅返回脱敏信息，重新编辑时需再次输入完整密钥"
          >
            <Input.Password placeholder="从钉钉开放平台获取" />
          </Form.Item>
          <Form.Item name="startEnable" label="启用同步" valuePropName="checked">
            <Switch />
          </Form.Item>
          <Space>
            <Button type="primary" icon={<SaveOutlined />} loading={saving} onClick={handleSave}>
              保存配置
            </Button>
            <Button icon={<ApiOutlined />} loading={testing} onClick={handleTest}>
              测试连接
            </Button>
          </Space>
        </Form>
      </Spin>
    </Card>
  );
};

export default IntegrationConfigPage;