imeeting/frontend/src/pages/business/ExternalAppManagement.tsx

import { App, Avatar, Button, Card, Col, Drawer, Form, Input, InputNumber, Popconfirm, Row, Select, Space, Switch, Table, Tag, Typography, Upload } from "antd";
import type { ColumnsType } from "antd/es/table";
import { AppstoreOutlined, DeleteOutlined, EditOutlined, GlobalOutlined, LinkOutlined, PictureOutlined, PlusOutlined, ReloadOutlined, RobotOutlined, SaveOutlined, SearchOutlined, UploadOutlined } from "@ant-design/icons";
import { useCallback, useEffect, useMemo, useState } from "react";
import PageHeader from "@/components/shared/PageHeader";
import AppPagination from "@/components/shared/AppPagination";
import { createExternalApp, deleteExternalApp, listExternalApps, type ExternalAppDTO, type ExternalAppVO, updateExternalApp, uploadExternalAppApk, uploadExternalAppIcon } from "@/api/business/externalApp";

const { Text } = Typography;
const { TextArea } = Input;

type ExternalAppFormValues = {
  appName: string;
  appType: "native" | "web";
  appInfo?: {
    versionName?: string;
    webUrl?: string;
    packageName?: string;
    apkUrl?: string;
  };
  iconUrl?: string;
  description?: string;
  sortOrder?: number;
  statusEnabled: boolean;
  remark?: string;
};

const STATUS_OPTIONS = [
  { label: "全部状态", value: "all" },
  { label: "已启用", value: "enabled" },
  { label: "已停用", value: "disabled" },
] as const;

function normalizeAppInfo(value: ExternalAppVO["appInfo"]): NonNullable<ExternalAppFormValues["appInfo"]> {
  if (!value || typeof value !== "object") {
    return {};
  }
  const info = value as Record<string, unknown>;
  return {
    versionName: typeof info.versionName === "string" ? info.versionName : undefined,
    webUrl: typeof info.webUrl === "string" ? info.webUrl : undefined,
    packageName: typeof info.packageName === "string" ? info.packageName : undefined,
    apkUrl: typeof info.apkUrl === "string" ? info.apkUrl : undefined,
  };
}

function compactObject<T extends Record<string, unknown>>(value: T): T {
  return Object.fromEntries(Object.entries(value).filter(([, field]) => field !== undefined && field !== null && field !== "")) as T;
}

export default function ExternalAppManagement() {
  const { message } = App.useApp();
  const [form] = Form.useForm<ExternalAppFormValues>();
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [editing, setEditing] = useState<ExternalAppVO | null>(null);
  const [records, setRecords] = useState<ExternalAppVO[]>([]);
  const [searchValue, setSearchValue] = useState("");
  const [statusFilter, setStatusFilter] = useState<(typeof STATUS_OPTIONS)[number]["value"]>("all");
  const [appTypeFilter, setAppTypeFilter] = useState<"all" | "native" | "web">("all");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [uploadingApk, setUploadingApk] = useState(false);
  const [uploadingIcon, setUploadingIcon] = useState(false);

  const loadData = useCallback(async () => {
    setLoading(true);
    try {
      const result = await listExternalApps();
      setRecords(result || []);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    void loadData();
  }, [loadData]);

  const filteredRecords = useMemo(() => {
    const keyword = searchValue.trim().toLowerCase();
    return records.filter((item) => {
      if (appTypeFilter !== "all" && item.appType !== appTypeFilter) {
        return false;
      }
      if (statusFilter === "enabled" && item.status !== 1) {
        return false;
      }
      if (statusFilter === "disabled" && item.status === 1) {
        return false;
      }
      if (!keyword) {
        return true;
      }
      const info = normalizeAppInfo(item.appInfo);
      return [item.appName, item.description, info.versionName, info.webUrl, info.packageName, info.apkUrl, item.creatorUsername].some((field) =>
        String(field || "").toLowerCase().includes(keyword)
      );
    });
  }, [appTypeFilter, records, searchValue, statusFilter]);

  const pagedRecords = useMemo(() => {
    const start = (page - 1) * pageSize;
    return filteredRecords.slice(start, start + pageSize);
  }, [filteredRecords, page, pageSize]);

  useEffect(() => {
    setPage(1);
  }, [searchValue, statusFilter, appTypeFilter]);

  const stats = useMemo(() => ({
    total: records.length,
    native: records.filter((item) => item.appType === "native").length,
    web: records.filter((item) => item.appType === "web").length,
    enabled: records.filter((item) => item.status === 1).length,
  }), [records]);

  const openCreate = () => {
    setEditing(null);
    form.resetFields();
    form.setFieldsValue({
      appType: "native",
      statusEnabled: true,
      sortOrder: 0,
      appInfo: {},
    });
    setDrawerOpen(true);
  };

  const openEdit = (record: ExternalAppVO) => {
    setEditing(record);
    form.setFieldsValue({
      appName: record.appName,
      appType: record.appType,
      appInfo: normalizeAppInfo(record.appInfo),
      iconUrl: record.iconUrl,
      description: record.description,
      sortOrder: record.sortOrder,
      statusEnabled: record.status === 1,
      remark: record.remark,
    });
    setDrawerOpen(true);
  };

  const handleDelete = async (record: ExternalAppVO) => {
    await deleteExternalApp(record.id);
    message.success("删除成功");
    await loadData();
  };

  const handleSubmit = async () => {
    const values = await form.validateFields();
    const payload: ExternalAppDTO = {
      appName: values.appName.trim(),
      appType: values.appType,
      appInfo: compactObject(values.appInfo || {}),
      iconUrl: values.iconUrl?.trim(),
      description: values.description?.trim(),
      sortOrder: values.sortOrder,
      status: values.statusEnabled ? 1 : 0,
      remark: values.remark?.trim(),
    };

    setSaving(true);
    try {
      if (editing) {
        await updateExternalApp(editing.id, payload);
        message.success("外部应用更新成功");
      } else {
        await createExternalApp(payload);
        message.success("外部应用创建成功");
      }
      setDrawerOpen(false);
      await loadData();
    } finally {
      setSaving(false);
    }
  };

  const handleUploadApk = async (file: File) => {
    setUploadingApk(true);
    try {
      const result = await uploadExternalAppApk(file);
      const currentInfo = form.getFieldValue("appInfo") || {};
      form.setFieldsValue({
        appInfo: {
          ...currentInfo,
          apkUrl: result.apkUrl || currentInfo.apkUrl,
          packageName: result.packageName || currentInfo.packageName,
          versionName: result.versionName || currentInfo.versionName,
        },
      });
      if (result.appName && !form.getFieldValue("appName")) {
        form.setFieldValue("appName", result.appName);
      }
      message.success("APK 上传成功，已自动回填可解析的 APK 元数据");
    } finally {
      setUploadingApk(false);
    }
  };

  const handleUploadIcon = async (file: File) => {
    setUploadingIcon(true);
    try {
      const result = await uploadExternalAppIcon(file);
      if (result.iconUrl) {
        form.setFieldValue("iconUrl", result.iconUrl);
      }
      message.success("图标上传成功");
    } finally {
      setUploadingIcon(false);
    }
  };

  const handleToggleStatus = async (record: ExternalAppVO, checked: boolean) => {
    await updateExternalApp(record.id, { status: checked ? 1 : 0 });
    message.success(checked ? "已启用应用" : "已停用应用");
    await loadData();
  };

  const columns: ColumnsType<ExternalAppVO> = [
    {
      title: "应用",
      key: "app",
      width: 260,
      render: (_, record) => (
        <Space>
          <Avatar shape="square" size={44} src={record.iconUrl} icon={<AppstoreOutlined />} />
          <Space direction="vertical" size={0}>
            <Text strong>{record.appName}</Text>
            <Text type="secondary">{record.description || "暂无描述"}</Text>
          </Space>
        </Space>
      ),
    },
    {
      title: "类型",
      dataIndex: "appType",
      key: "appType",
      width: 120,
      render: (value: ExternalAppVO["appType"]) => value === "native" ? <Tag color="green" icon={<RobotOutlined />}>原生应用</Tag> : <Tag color="blue" icon={<GlobalOutlined />}>Web 应用</Tag>,
    },
    {
      title: "入口信息",
      key: "entry",
      width: 260,
      render: (_, record) => {
        const info = normalizeAppInfo(record.appInfo);
        return (
          <Space direction="vertical" size={0}>
            <Text type="secondary">版本：{info.versionName || "-"}</Text>
            <Text type="secondary">{record.appType === "native" ? `包名：${info.packageName || "-"}` : `地址：${info.webUrl || "-"}`}</Text>
          </Space>
        );
      },
    },
    {
      title: "状态",
      key: "status",
      width: 120,
      render: (_, record) => <Switch size="small" checked={record.status === 1} onChange={(checked) => void handleToggleStatus(record, checked)} />,
    },
    {
      title: "排序权重",
      dataIndex: "sortOrder",
      key: "sortOrder",
      width: 90,
      align: "center",
    },
    {
      title: "操作",
      key: "action",
      width: 150,
      fixed: "right",
      render: (_, record) => {
        const info = normalizeAppInfo(record.appInfo);
        const link = record.appType === "native" ? info.apkUrl : info.webUrl;
        return (
          <Space size={4}>
            <Button type="text" icon={<LinkOutlined />} href={link} target="_blank" disabled={!link} />
            <Button type="text" icon={<EditOutlined />} onClick={() => openEdit(record)} />
            <Popconfirm title="确认删除该应用吗？" onConfirm={() => void handleDelete(record)}>
              <Button type="text" danger icon={<DeleteOutlined />} />
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  return (
    <div style={{ height: "100%", display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <PageHeader
        title="外部应用管理"
        subtitle="统一维护首页九宫格与抽屉入口中的原生应用、Web 服务和应用图标资源。"
        extra={
          <Space>
            <Button icon={<ReloadOutlined />} onClick={() => void loadData()} loading={loading}>刷新</Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>新增应用</Button>
          </Space>
        }
      />

      <Row gutter={16} className="mb-4">
        <Col span={6}><Card size="small"><Space><AppstoreOutlined style={{ color: "#1677ff" }} /><div><div>应用总数</div><Text strong>{stats.total}</Text></div></Space></Card></Col>
        <Col span={6}><Card size="small"><Space><RobotOutlined style={{ color: "#52c41a" }} /><div><div>原生应用</div><Text strong>{stats.native}</Text></div></Space></Card></Col>
        <Col span={6}><Card size="small"><Space><GlobalOutlined style={{ color: "#722ed1" }} /><div><div>Web 应用</div><Text strong>{stats.web}</Text></div></Space></Card></Col>
        <Col span={6}><Card size="small"><Space><PictureOutlined style={{ color: "#fa8c16" }} /><div><div>已启用</div><Text strong>{stats.enabled}</Text></div></Space></Card></Col>
      </Row>

      <Card className="app-page__filter-card mb-4" styles={{ body: { padding: 16 } }}>
        <Space wrap style={{ width: "100%", justifyContent: "space-between" }}>
          <Space wrap>
            <Input placeholder="搜索名称、描述、包名或入口地址" prefix={<SearchOutlined />} allowClear style={{ width: 320 }} value={searchValue} onChange={(event) => setSearchValue(event.target.value)} />
            <Select value={appTypeFilter} style={{ width: 140 }} onChange={(value) => setAppTypeFilter(value)} options={[{ label: "全部类型", value: "all" }, { label: "原生应用", value: "native" }, { label: "Web 应用", value: "web" }]} />
            <Select value={statusFilter} style={{ width: 140 }} onChange={(value) => setStatusFilter(value as typeof statusFilter)} options={STATUS_OPTIONS as unknown as { label: string; value: string }[]} />
          </Space>
        </Space>
      </Card>

      <Card className="app-page__content-card flex-1 flex flex-col overflow-hidden" styles={{ body: { padding: 0, flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" } }}>
        <div className="app-page__table-wrap" style={{ padding: "0 24px", overflow: "auto" }}>
          <Table rowKey="id" columns={columns} dataSource={pagedRecords} loading={loading} scroll={{ x: "max-content" }} pagination={false} />
        </div>
        <AppPagination
          current={page}
          pageSize={pageSize}
          total={filteredRecords.length}
          onChange={(nextPage, nextSize) => { setPage(nextPage); setPageSize(nextSize); }}
        />
      </Card>

      <Drawer title={editing ? "编辑外部应用" : "新增外部应用"} open={drawerOpen} onClose={() => setDrawerOpen(false)} width={700} destroyOnHidden forceRender footer={<div className="app-page__drawer-footer"><Button onClick={() => setDrawerOpen(false)}>取消</Button><Button type="primary" icon={<SaveOutlined />} loading={saving} onClick={() => void handleSubmit()}>保存</Button></div>}>
        <Form form={form} layout="vertical">
          <Row gutter={16}>
            <Col span={16}><Form.Item name="appName" label="应用名称" rules={[{ required: true, message: "请输入应用名称" }]}><Input placeholder="请输入应用名称" /></Form.Item></Col>
            <Col span={8}><Form.Item name="appType" label="应用类型" rules={[{ required: true, message: "请选择应用类型" }]}><Select options={[{ label: "原生应用", value: "native" }, { label: "Web 应用", value: "web" }]} /></Form.Item></Col>
          </Row>

          <Space align="start" className="mb-4">
            <Upload showUploadList={false} beforeUpload={(file) => { void handleUploadIcon(file as File); return Upload.LIST_IGNORE; }}>
              <Avatar shape="square" size={72} src={form.getFieldValue("iconUrl")} icon={<PictureOutlined />} style={{ cursor: "pointer", border: "1px dashed var(--app-border-color)", background: "var(--app-bg-card)" }} />
            </Upload>
            <div style={{ flex: 1 }}>
              <Form.Item name="iconUrl" label="图标地址"><Input placeholder="上传图标后自动回填，或手动填写" /></Form.Item>
            </div>
          </Space>

          <Form.Item noStyle shouldUpdate={(prev, curr) => prev.appType !== curr.appType}>
            {({ getFieldValue }) => getFieldValue("appType") === "native" ? (
              <>
                <Form.Item label="上传 APK">
                  <Upload showUploadList={false} beforeUpload={(file) => { void handleUploadApk(file as File); return Upload.LIST_IGNORE; }}>
                    <Button icon={<UploadOutlined />} loading={uploadingApk}>上传并回填 APK 信息</Button>
                  </Upload>
                </Form.Item>
                <Row gutter={16}>
                  <Col span={12}><Form.Item name={["appInfo", "versionName"]} label="版本号"><Input placeholder="如 1.0.0" /></Form.Item></Col>
                  <Col span={12}><Form.Item name={["appInfo", "packageName"]} label="包名"><Input placeholder="com.example.app" /></Form.Item></Col>
                </Row>
                <Form.Item name={["appInfo", "apkUrl"]} label="APK 地址" rules={[{ required: true, message: "请上传或填写 APK 地址" }]}><Input prefix={<LinkOutlined />} placeholder="https://..." /></Form.Item>
              </>
            ) : (
              <>
                <Row gutter={16}>
                  <Col span={12}><Form.Item name={["appInfo", "versionName"]} label="版本号"><Input placeholder="可选" /></Form.Item></Col>
                  <Col span={12}><Form.Item name={["appInfo", "webUrl"]} label="Web 地址" rules={[{ required: true, message: "请输入 Web 地址" }]}><Input prefix={<GlobalOutlined />} placeholder="https://..." /></Form.Item></Col>
                </Row>
              </>
            )}
          </Form.Item>

          <Form.Item name="description" label="应用描述"><TextArea rows={3} placeholder="请输入应用用途说明" /></Form.Item>
          <Row gutter={16}>
            <Col span={12}><Form.Item name="sortOrder" label="排序权重"><InputNumber min={0} style={{ width: "100%" }} /></Form.Item></Col>
            <Col span={12}><Form.Item name="remark" label="备注"><Input placeholder="选填" /></Form.Item></Col>
          </Row>
          <Form.Item name="statusEnabled" label="启用状态" valuePropName="checked"><Switch /></Form.Item>
        </Form>
      </Drawer>
    </div>
  );
}