参数管理优化

dev_na
puz 2026-06-22 10:09:26 +08:00
parent 194a05cbe0
commit 8c771abbb8
6 changed files with 205 additions and 29 deletions

5
.gitignore vendored
View File

@ -9,6 +9,11 @@ backend/src/main/resources/application-local.yml
*.log *.log
!backend/.env.example !backend/.env.example
.omx/ .omx/
/backend/target/
/.idea
/.vscode
/.codegraph
/.agents
/backend/.env.example /backend/.env.example
/backend/.mvn-settings-ali.xml /backend/.mvn-settings-ali.xml
/backend/.mvn-settings-codex.xml /backend/.mvn-settings-codex.xml

View File

@ -427,7 +427,14 @@
"paramKeyPlaceholder": "sys.config.example", "paramKeyPlaceholder": "sys.config.example",
"paramValuePlaceholder": "Enter parameter value", "paramValuePlaceholder": "Enter parameter value",
"systemHint": "System parameters are usually protected from deletion and used directly by the platform.", "systemHint": "System parameters are usually protected from deletion and used directly by the platform.",
"descriptionPlaceholder": "Describe the purpose of this parameter" "descriptionPlaceholder": "Describe the purpose of this parameter",
"numberPlaceholder": "Enter a number",
"numberInvalid": "Please enter a valid number",
"booleanTrue": "Yes",
"booleanFalse": "No",
"jsonPlaceholder": "{ \"key\": \"value\" }",
"jsonFormat": "Format",
"jsonInvalid": "Invalid JSON, please check the syntax"
}, },
"orgsExt": { "orgsExt": {
"enabled": "Enabled", "enabled": "Enabled",

View File

@ -425,7 +425,14 @@
"paramKeyPlaceholder": "sys.config.example", "paramKeyPlaceholder": "sys.config.example",
"paramValuePlaceholder": "请输入参数值", "paramValuePlaceholder": "请输入参数值",
"systemHint": "系统参数通常受保护,并会被平台直接使用。", "systemHint": "系统参数通常受保护,并会被平台直接使用。",
"descriptionPlaceholder": "请描述该参数的用途" "descriptionPlaceholder": "请描述该参数的用途",
"numberPlaceholder": "请输入数字",
"numberInvalid": "请输入有效的数字",
"booleanTrue": "是",
"booleanFalse": "否",
"jsonPlaceholder": "{ \"key\": \"value\" }",
"jsonFormat": "格式化",
"jsonInvalid": "JSON 格式不正确,请检查"
}, },
"orgsExt": { "orgsExt": {
"enabled": "启用", "enabled": "启用",

View File

@ -776,7 +776,7 @@ const Meetings: React.FC = () => {
render: (text: string) => <Text type="secondary">{text || "未知"}</Text>, render: (text: string) => <Text type="secondary">{text || "未知"}</Text>,
}, },
{ {
title: "鏉ユ簮", title: "来源",
dataIndex: "meetingSource", dataIndex: "meetingSource",
key: "meetingSource", key: "meetingSource",
width: 80, width: 80,
@ -789,7 +789,7 @@ const Meetings: React.FC = () => {
render: (text: string) => <Text type="secondary" ellipsis style={{ maxWidth: 180 }}>{text || "无参会人员"}</Text>, render: (text: string) => <Text type="secondary" ellipsis style={{ maxWidth: 180 }}>{text || "无参会人员"}</Text>,
}, },
{ {
title: "鎿嶄綔", title: "操作",
key: "action", key: "action",
width: 220, width: 220,
render: (_: unknown, record: MeetingVO) => ( render: (_: unknown, record: MeetingVO) => (

View File

@ -31,3 +31,21 @@
.param-type-tag { .param-type-tag {
border-radius: 4px; border-radius: 4px;
} }
.param-boolean-segmented {
.ant-segmented-item-selected {
background: var(--app-primary-color) !important;
color: #fff !important;
box-shadow: 0 2px 6px rgba(22, 119, 255, 0.35);
}
.ant-segmented-item {
color: var(--app-text-secondary, rgba(0, 0, 0, 0.65));
transition: all 0.2s;
&:hover:not(.ant-segmented-item-selected) {
color: var(--app-primary-color);
background: rgba(22, 119, 255, 0.06);
}
}
}

View File

@ -1,4 +1,4 @@
import { Button, Card, Col, Drawer, Form, Input, Popconfirm, Row, Select, Space, Switch, Tag, Tooltip, Typography, message } from "antd"; 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 { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { DeleteOutlined, EditOutlined, InfoCircleOutlined, PlusOutlined, SearchOutlined, SettingOutlined } from "@ant-design/icons"; import { DeleteOutlined, EditOutlined, InfoCircleOutlined, PlusOutlined, SearchOutlined, SettingOutlined } from "@ant-design/icons";
@ -14,6 +14,10 @@ import "./index.less";
const { Text } = Typography; 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() { export default function SysParams() {
const { t } = useTranslation(); const { t } = useTranslation();
const { can } = usePermission(); const { can } = usePermission();
@ -26,7 +30,55 @@ export default function SysParams() {
const [queryParams, setQueryParams] = useState<SysParamQuery>({ pageNum: 1, pageSize: 10 }); const [queryParams, setQueryParams] = useState<SysParamQuery>({ pageNum: 1, pageSize: 10 });
const [drawerOpen, setDrawerOpen] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false);
const [editing, setEditing] = useState<SysParamVO | null>(null); const [editing, setEditing] = useState<SysParamVO | null>(null);
const [jsonError, setJsonError] = useState<string | null>(null);
const [form] = Form.useForm(); 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) => { const loadData = useCallback(async (query = queryParams) => {
setLoading(true); setLoading(true);
@ -48,7 +100,6 @@ export default function SysParams() {
}; };
const handleReset = () => { const handleReset = () => {
form.resetFields();
setQueryParams({ pageNum: 1, pageSize: 10 }); setQueryParams({ pageNum: 1, pageSize: 10 });
}; };
@ -58,6 +109,7 @@ export default function SysParams() {
const openCreate = () => { const openCreate = () => {
setEditing(null); setEditing(null);
setJsonError(null);
form.resetFields(); form.resetFields();
form.setFieldsValue({ isSystem: 0, status: 1 }); form.setFieldsValue({ isSystem: 0, status: 1 });
setDrawerOpen(true); setDrawerOpen(true);
@ -65,6 +117,7 @@ export default function SysParams() {
const openEdit = (record: SysParamVO) => { const openEdit = (record: SysParamVO) => {
setEditing(record); setEditing(record);
setJsonError(null);
form.setFieldsValue(record); form.setFieldsValue(record);
setDrawerOpen(true); setDrawerOpen(true);
}; };
@ -112,8 +165,16 @@ export default function SysParams() {
dataIndex: "paramValue", dataIndex: "paramValue",
key: "paramValue", key: "paramValue",
width: 360, width: 360,
ellipsis: { showTitle: false }, render: (text: string, record: SysParamVO) => {
render: (text: string) => ( 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}> <Tooltip title={text}>
<Text <Text
code code
@ -128,7 +189,26 @@ export default function SysParams() {
{text} {text}
</Text> </Text>
</Tooltip> </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"), title: t("sysParams.paramType"),
@ -170,7 +250,7 @@ export default function SysParams() {
title={t("sysParams.title")} title={t("sysParams.title")}
subtitle={t("sysParams.subtitle")} subtitle={t("sysParams.subtitle")}
headerExtra={ headerExtra={
<Button type="primary" icon={<PlusOutlined />} onClick={() => setDrawerOpen(true)}> <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
{t("common.create")} {t("common.create")}
</Button> </Button>
} }
@ -214,7 +294,7 @@ export default function SysParams() {
</Card> </Card>
<Drawer <Drawer
title={<span><SettingOutlined className="mr-2" />{editing ? t("sysParams.drawerTitleEdit") : t("sysParams.drawerTitleCreate")}</span>} title={<Space size={8}><SettingOutlined />{editing ? t("sysParams.drawerTitleEdit") : t("sysParams.drawerTitleCreate")}</Space>}
open={drawerOpen} open={drawerOpen}
onClose={() => setDrawerOpen(false)} onClose={() => setDrawerOpen(false)}
width={500} width={500}
@ -225,13 +305,13 @@ export default function SysParams() {
<Form.Item label={t("sysParams.paramKey")} name="paramKey" rules={[{ required: true, message: t("sysParams.paramKey") }]}> <Form.Item label={t("sysParams.paramKey")} name="paramKey" rules={[{ required: true, message: t("sysParams.paramKey") }]}>
<Input placeholder={t("sysParamsExt.paramKeyPlaceholder")} disabled={!!editing} /> <Input placeholder={t("sysParamsExt.paramKeyPlaceholder")} disabled={!!editing} />
</Form.Item> </Form.Item>
<Form.Item label={t("sysParams.paramValue")} name="paramValue" rules={[{ required: true, message: t("sysParams.paramValue") }]}>
<Input.TextArea rows={4} placeholder={t("sysParamsExt.paramValuePlaceholder")} />
</Form.Item>
<Row gutter={16}> <Row gutter={16}>
<Col span={12}> <Col span={12}>
<Form.Item label={t("sysParams.paramType")} name="paramType" rules={[{ required: true, message: t("sysParams.paramType") }]}> <Form.Item label={t("sysParams.paramType")} name="paramType" rules={[{ required: true, message: t("sysParams.paramType") }]}>
<Select options={paramTypeDict.map((item) => ({ label: item.itemLabel, value: item.itemValue }))} /> <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> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>
@ -240,6 +320,65 @@ export default function SysParams() {
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </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 <Form.Item
label={<Space>{t("sysParams.isSystem")}<Tooltip title={t("sysParamsExt.systemHint")}><InfoCircleOutlined style={{ color: "#8c8c8c" }} /></Tooltip></Space>} label={<Space>{t("sysParams.isSystem")}<Tooltip title={t("sysParamsExt.systemHint")}><InfoCircleOutlined style={{ color: "#8c8c8c" }} /></Tooltip></Space>}
name="isSystem" name="isSystem"