参数管理优化
parent
194a05cbe0
commit
8c771abbb8
|
|
@ -9,6 +9,11 @@ backend/src/main/resources/application-local.yml
|
|||
*.log
|
||||
!backend/.env.example
|
||||
.omx/
|
||||
/backend/target/
|
||||
/.idea
|
||||
/.vscode
|
||||
/.codegraph
|
||||
/.agents
|
||||
/backend/.env.example
|
||||
/backend/.mvn-settings-ali.xml
|
||||
/backend/.mvn-settings-codex.xml
|
||||
|
|
|
|||
|
|
@ -427,7 +427,14 @@
|
|||
"paramKeyPlaceholder": "sys.config.example",
|
||||
"paramValuePlaceholder": "Enter parameter value",
|
||||
"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": {
|
||||
"enabled": "Enabled",
|
||||
|
|
|
|||
|
|
@ -425,7 +425,14 @@
|
|||
"paramKeyPlaceholder": "sys.config.example",
|
||||
"paramValuePlaceholder": "请输入参数值",
|
||||
"systemHint": "系统参数通常受保护,并会被平台直接使用。",
|
||||
"descriptionPlaceholder": "请描述该参数的用途"
|
||||
"descriptionPlaceholder": "请描述该参数的用途",
|
||||
"numberPlaceholder": "请输入数字",
|
||||
"numberInvalid": "请输入有效的数字",
|
||||
"booleanTrue": "是",
|
||||
"booleanFalse": "否",
|
||||
"jsonPlaceholder": "{ \"key\": \"value\" }",
|
||||
"jsonFormat": "格式化",
|
||||
"jsonInvalid": "JSON 格式不正确,请检查"
|
||||
},
|
||||
"orgsExt": {
|
||||
"enabled": "启用",
|
||||
|
|
|
|||
|
|
@ -776,7 +776,7 @@ const Meetings: React.FC = () => {
|
|||
render: (text: string) => <Text type="secondary">{text || "未知"}</Text>,
|
||||
},
|
||||
{
|
||||
title: "鏉ユ簮",
|
||||
title: "来源",
|
||||
dataIndex: "meetingSource",
|
||||
key: "meetingSource",
|
||||
width: 80,
|
||||
|
|
@ -789,7 +789,7 @@ const Meetings: React.FC = () => {
|
|||
render: (text: string) => <Text type="secondary" ellipsis style={{ maxWidth: 180 }}>{text || "无参会人员"}</Text>,
|
||||
},
|
||||
{
|
||||
title: "鎿嶄綔",
|
||||
title: "操作",
|
||||
key: "action",
|
||||
width: 220,
|
||||
render: (_: unknown, record: MeetingVO) => (
|
||||
|
|
|
|||
|
|
@ -31,3 +31,21 @@
|
|||
.param-type-tag {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 { useTranslation } from "react-i18next";
|
||||
import { DeleteOutlined, EditOutlined, InfoCircleOutlined, PlusOutlined, SearchOutlined, SettingOutlined } from "@ant-design/icons";
|
||||
|
|
@ -14,6 +14,10 @@ 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();
|
||||
|
|
@ -26,7 +30,55 @@ export default function SysParams() {
|
|||
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);
|
||||
|
|
@ -48,7 +100,6 @@ export default function SysParams() {
|
|||
};
|
||||
|
||||
const handleReset = () => {
|
||||
form.resetFields();
|
||||
setQueryParams({ pageNum: 1, pageSize: 10 });
|
||||
};
|
||||
|
||||
|
|
@ -58,6 +109,7 @@ export default function SysParams() {
|
|||
|
||||
const openCreate = () => {
|
||||
setEditing(null);
|
||||
setJsonError(null);
|
||||
form.resetFields();
|
||||
form.setFieldsValue({ isSystem: 0, status: 1 });
|
||||
setDrawerOpen(true);
|
||||
|
|
@ -65,6 +117,7 @@ export default function SysParams() {
|
|||
|
||||
const openEdit = (record: SysParamVO) => {
|
||||
setEditing(record);
|
||||
setJsonError(null);
|
||||
form.setFieldsValue(record);
|
||||
setDrawerOpen(true);
|
||||
};
|
||||
|
|
@ -112,23 +165,50 @@ export default function SysParams() {
|
|||
dataIndex: "paramValue",
|
||||
key: "paramValue",
|
||||
width: 360,
|
||||
ellipsis: { showTitle: false },
|
||||
render: (text: string) => (
|
||||
<Tooltip title={text}>
|
||||
<Text
|
||||
code
|
||||
style={{
|
||||
display: "block",
|
||||
maxWidth: "100%",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap"
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</Text>
|
||||
</Tooltip>
|
||||
)
|
||||
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"),
|
||||
|
|
@ -170,7 +250,7 @@ export default function SysParams() {
|
|||
title={t("sysParams.title")}
|
||||
subtitle={t("sysParams.subtitle")}
|
||||
headerExtra={
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={() => setDrawerOpen(true)}>
|
||||
<Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
|
||||
{t("common.create")}
|
||||
</Button>
|
||||
}
|
||||
|
|
@ -214,7 +294,7 @@ export default function SysParams() {
|
|||
</Card>
|
||||
|
||||
<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}
|
||||
onClose={() => setDrawerOpen(false)}
|
||||
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") }]}>
|
||||
<Input placeholder={t("sysParamsExt.paramKeyPlaceholder")} disabled={!!editing} />
|
||||
</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}>
|
||||
<Col span={12}>
|
||||
<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>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
|
|
@ -240,6 +320,65 @@ export default function SysParams() {
|
|||
</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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue