imeeting/frontend/src/pages/system/sys-params/index.tsx

import { Button, Card, Col, Drawer, Form, Input, Popconfirm, Row, Segmented, Select, Space, Switch, Tag, Tooltip, Typography, message } from "antd";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { DeleteOutlined, EditOutlined, InfoCircleOutlined, PlusOutlined, SearchOutlined, SettingOutlined } from "@ant-design/icons";
import { createParam, deleteParam, pageParams, updateParam } from "@/api";
import { useDict } from "@/hooks/useDict";
import { usePermission } from "@/hooks/usePermission";
import PageHeader from "@/components/shared/PageHeader";
import PageContainer from "@/components/shared/PageContainer";
import ListTable from "@/components/shared/ListTable/ListTable";
import AppPagination from "@/components/shared/AppPagination";
import type { SysParamQuery, SysParamVO } from "@/types";
import "./index.less";

const { Text } = Typography;

/** Normalize paramType to title-case for case-insensitive comparison */
const isType = (actual: string | undefined, expected: string) =>
  (actual || "").toLowerCase() === expected.toLowerCase();

export default function SysParams() {
  const { t } = useTranslation();
  const { can } = usePermission();
  const { items: statusDict } = useDict("sys_common_status");
  const { items: paramTypeDict } = useDict("sys_param_type");
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [data, setData] = useState<SysParamVO[]>([]);
  const [total, setTotal] = useState(0);
  const [queryParams, setQueryParams] = useState<SysParamQuery>({ pageNum: 1, pageSize: 10 });
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [editing, setEditing] = useState<SysParamVO | null>(null);
  const [jsonError, setJsonError] = useState<string | null>(null);
  const [form] = Form.useForm();
  const paramType = Form.useWatch("paramType", form) as string | undefined;

  // Per-type validation rules. The submitted paramValue is always a string
  // (backend stores TEXT), so validators operate on string values.
  const valueRules = (() => {
    const required = [{ required: true, message: t("sysParams.paramValue") }];
    if (isType(paramType, "Number")) {
      return [
        ...required,
        {
          validator: (_: unknown, value: string) =>
            value === "" || value == null || !Number.isNaN(Number(value))
              ? Promise.resolve()
              : Promise.reject(new Error(t("sysParamsExt.numberInvalid")))
        }
      ];
    }
    if (isType(paramType, "JSON")) {
      return [
        ...required,
        {
          validator: (_: unknown, value: string) => {
            if (value === "" || value == null) return Promise.resolve();
            try {
              JSON.parse(value);
              return Promise.resolve();
            } catch {
              return Promise.reject(new Error(t("sysParamsExt.jsonInvalid")));
            }
          }
        }
      ];
    }
    return required;
  })();

  const formatJson = () => {
    const raw = form.getFieldValue("paramValue");
    if (!raw) return;
    try {
      const parsed = JSON.parse(raw);
      form.setFieldValue("paramValue", JSON.stringify(parsed, null, 2));
      setJsonError(null);
    } catch {
      setJsonError(t("sysParamsExt.jsonInvalid"));
    }
  };

  const loadData = useCallback(async (query = queryParams) => {
    setLoading(true);
    try {
      const response = await pageParams(query);
      setData(response.records || []);
      setTotal(response.total || 0);
    } finally {
      setLoading(false);
    }
  }, [queryParams]);

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

  const handleSearch = (values: any) => {
    setQueryParams({ ...queryParams, ...values, pageNum: 1 });
  };

  const handleReset = () => {
    setQueryParams({ pageNum: 1, pageSize: 10 });
  };

  const handlePageChange = (page: number, pageSize: number) => {
    setQueryParams((prev) => ({ ...prev, pageNum: page, pageSize }));
  };

  const openCreate = () => {
    setEditing(null);
    setJsonError(null);
    form.resetFields();
    form.setFieldsValue({ isSystem: 0, status: 1 });
    setDrawerOpen(true);
  };

  const openEdit = (record: SysParamVO) => {
    setEditing(record);
    setJsonError(null);
    form.setFieldsValue(record);
    setDrawerOpen(true);
  };

  const handleDelete = async (id: number) => {
    try {
      await deleteParam(id);
      message.success(t("common.success"));
      loadData();
    } catch {
    }
  };

  const submit = async () => {
    try {
      const values = await form.validateFields();
      setSaving(true);
      if (editing) {
        await updateParam(editing.paramId, values);
      } else {
        await createParam(values);
      }
      message.success(t("common.success"));
      setDrawerOpen(false);
      loadData();
    } finally {
      setSaving(false);
    }
  };

  const columns = [
    {
      title: t("sysParams.paramKey"),
      dataIndex: "paramKey",
      key: "paramKey",
      render: (text: string, record: SysParamVO) => (
        <Space direction="vertical" size={0}>
          <Text className="param-key-text">{text}</Text>
          {record.isSystem === 1 && <Tag color="orange" style={{ fontSize: 10, marginTop: 2, padding: "0 4px" }}>{t("sysParams.isSystem")}</Tag>}
        </Space>
      )
    },
    {
      title: t("sysParams.paramValue"),
      dataIndex: "paramValue",
      key: "paramValue",
      width: 360,
      render: (text: string, record: SysParamVO) => {
        const type = record.paramType;
        // Boolean: 彩色标签显示 是/否
        if (isType(type, "Boolean")) {
          const isTrue = text === "true";
          return <Tag color={isTrue ? "green" : "default"}>{isTrue ? t("sysParamsExt.booleanTrue") : t("sysParamsExt.booleanFalse")}</Tag>;
        }
        // JSON: 等宽字体，以纯字符串显示
        if (isType(type, "JSON")) {
          return (
            <Tooltip title={text}>
              <Text
                code
                style={{
                  display: "block",
                  maxWidth: "100%",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap"
                }}
              >
                {text}
              </Text>
            </Tooltip>
          );
        }
        // Number / String: 等宽代码文本 + Tooltip
        return (
          <Tooltip title={text}>
            <Text
              code
              style={{
                display: "block",
                maxWidth: "100%",
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap"
              }}
            >
              {text}
            </Text>
          </Tooltip>
        );
      }
    },
    {
      title: t("sysParams.paramType"),
      dataIndex: "paramType",
      key: "paramType",
      width: 120,
      render: (type: string) => <Tag className="param-type-tag">{type || t("sysParamsExt.defaultType")}</Tag>
    },
    { title: t("sysParams.description"), dataIndex: "description", key: "description", ellipsis: true },
    {
      title: t("common.status"),
      dataIndex: "status",
      width: 80,
      render: (status: number) => {
        const item = statusDict.find((dictItem) => dictItem.itemValue === String(status));
        return <Tag color={status === 1 ? "green" : "red"}>{item ? item.itemLabel : status === 1 ? t("sysParamsExt.enabled") : t("sysParamsExt.disabled")}</Tag>;
      }
    },
    {
      title: t("common.action"),
      key: "action",
      width: 110,
      fixed: "right" as const,
      render: (_: any, record: SysParamVO) => (
        <Space>
          {can("sys_param:update") && <Button type="text" icon={<EditOutlined />} onClick={() => openEdit(record)} />}
          {can("sys_param:delete") && record.isSystem !== 1 && (
            <Popconfirm title={t("sysParamsExt.deleteConfirm")} okText={t("common.confirm")} cancelText={t("common.cancel")} onConfirm={() => handleDelete(record.paramId)}>
              <Button type="text" danger icon={<DeleteOutlined />} />
            </Popconfirm>
          )}
        </Space>
      )
    }
  ];

  return (
    <PageContainer
      title={t("sysParams.title")}
      subtitle={t("sysParams.subtitle")}
      headerExtra={
        <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
          {t("common.create")}
        </Button>
      }
      toolbar={
        <Form layout="inline" onFinish={handleSearch}>
          <Form.Item name="paramKey">
            <Input placeholder={t("sysParams.paramKey")} prefix={<SearchOutlined />} allowClear style={{ width: 200 }} />
          </Form.Item>
          <Form.Item name="paramType">
            <Select placeholder={t("sysParams.paramType")} allowClear style={{ width: 150 }} options={paramTypeDict.map((item) => ({ label: item.itemLabel, value: item.itemValue }))} />
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" icon={<SearchOutlined />} htmlType="submit">{t("common.search")}</Button>
              <Button onClick={handleReset}>{t("common.reset")}</Button>
            </Space>
          </Form.Item>
        </Form>
      }
    >
      <Card className="app-page__content-card">
        <div className="app-page__table-wrap">
        <ListTable
          rowKey="paramId"
          columns={columns}
          dataSource={data}
          loading={loading}
          scroll={{ y: "calc(100vh - 350px)" }}
          pagination={false}
        />
      </div>

      <AppPagination
        current={queryParams.pageNum || 1}
        pageSize={queryParams.pageSize || 10}
        total={total}
        onChange={(page, pageSize) => {
          handlePageChange(page, pageSize);
        }}
      />
      </Card>

      <Drawer
        title={<Space size={8}><SettingOutlined />{editing ? t("sysParams.drawerTitleEdit") : t("sysParams.drawerTitleCreate")}</Space>}
        open={drawerOpen}
        onClose={() => setDrawerOpen(false)}
        width={500}
        destroyOnClose
        footer={<div className="app-page__drawer-footer"><Button onClick={() => setDrawerOpen(false)}>{t("common.cancel")}</Button><Button type="primary" loading={saving} onClick={submit}>{t("common.save")}</Button></div>}
      >
        <Form form={form} layout="vertical">
          <Form.Item label={t("sysParams.paramKey")} name="paramKey" rules={[{ required: true, message: t("sysParams.paramKey") }]}>
            <Input placeholder={t("sysParamsExt.paramKeyPlaceholder")} disabled={!!editing} />
          </Form.Item>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label={t("sysParams.paramType")} name="paramType" rules={[{ required: true, message: t("sysParams.paramType") }]}>
                <Select placeholder={t("sysParams.paramType")} options={paramTypeDict.map((item) => ({ label: item.itemLabel, value: item.itemValue }))} onChange={(value) => {
                  form.setFieldValue("paramValue", isType(value, "Boolean") ? "true" : "");
                  setJsonError(null);
                }} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label={t("common.status")} name="status" initialValue={1}>
                <Select options={statusDict.map((item) => ({ label: item.itemLabel, value: Number(item.itemValue) }))} />
              </Form.Item>
            </Col>
          </Row>
          {isType(paramType, "JSON") && (
            <div style={{ marginBottom: 8 }}>
              <Button size="small" onClick={formatJson}>{t("sysParamsExt.jsonFormat")}</Button>
            </div>
          )}
          <Form.Item
            key={paramType || "default"}
            label={t("sysParams.paramValue")}
            name="paramValue"
            rules={valueRules}
            // The value is stored as a backend TEXT/string regardless of type.
            // TextArea/Input pass a change event (read .target.value);
            // InputNumber/Segmented pass the value directly. Number → stringify.
            getValueFromEvent={(e: unknown) => {
              const v = e && typeof e === "object" && "target" in (e as { target?: { value?: unknown } })
                ? (e as { target: { value?: unknown } }).target.value
                : e;
              return typeof v === "number" ? String(v) : (v ?? "");
            }}
            extra={isType(paramType, "JSON") && jsonError ? <span style={{ color: "#ff4d4f" }}>{jsonError}</span> : undefined}
          >
            {isType(paramType, "Number") ? (
              <Input style={{ width: "100%" }} placeholder={t("sysParamsExt.numberPlaceholder")} />
            ) : isType(paramType, "Boolean") ? (
              <Segmented
                className="param-boolean-segmented"
                block
                options={[
                  { label: t("sysParamsExt.booleanTrue"), value: "true" },
                  { label: t("sysParamsExt.booleanFalse"), value: "false" }
                ]}
              />
            ) : isType(paramType, "JSON") ? (
              <Input.TextArea
                rows={6}
                style={{ fontFamily: "'SFMono-Regular', Consolas, Menlo, monospace" }}
                placeholder={t("sysParamsExt.jsonPlaceholder")}
                onFocus={() => {
                  const v = form.getFieldValue("paramValue");
                  if (!v) form.setFieldValue("paramValue", JSON.stringify({ key: "value" }));
                }}
                onChange={(e) => {
                  const v = e.target.value;
                  if (!v) {
                    setJsonError(null);
                    return;
                  }
                  try {
                    JSON.parse(v);
                    setJsonError(null);
                  } catch {
                    setJsonError(t("sysParamsExt.jsonInvalid"));
                  }
                }}
              />
            ) : (
              <Input.TextArea rows={3} placeholder={t("sysParamsExt.paramValuePlaceholder")} />
            )}
          </Form.Item>
          <Form.Item
            label={<Space>{t("sysParams.isSystem")}<Tooltip title={t("sysParamsExt.systemHint")}><InfoCircleOutlined style={{ color: "#8c8c8c" }} /></Tooltip></Space>}
            name="isSystem"
            valuePropName="checked"
            getValueProps={(value) => ({ checked: value === 1 })}
            getValueFromEvent={(checked) => (checked ? 1 : 0)}
          >
            <Switch />
          </Form.Item>
          <Form.Item label={t("sysParams.description")} name="description">
            <Input.TextArea rows={3} placeholder={t("sysParamsExt.descriptionPlaceholder")} />
          </Form.Item>
        </Form>
      </Drawer>
    </PageContainer>
  );
}