From 3f47005f76cb4b6f8132175a7d5a694456adaa94 Mon Sep 17 00:00:00 2001
From: ZhuRui <GodRuiCollection@163.com>
Date: Fri, 7 Aug 2026 18:19:14 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B5=E9=9D=A2=20=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E5=85=B6=E5=AE=83=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/params/index.ts                       |  49 ++++
 src/api/params/types.ts                       |  40 +++
 src/config/fallbackRoutes.ts                  |   9 +
 .../components/ParamFormModal.module.less     |  10 +
 .../params/components/ParamFormModal.tsx      | 141 +++++++++
 src/pages/system/params/index.module.less     |  36 +++
 src/pages/system/params/index.tsx             | 270 ++++++++++++++++++
 src/pages/system/params/model/config.ts       |  29 ++
 src/pages/system/params/model/form.ts         |  19 ++
 src/pages/system/params/model/services.ts     |  81 ++++++
 .../system/params/model/useParamsColumns.ts   |  36 +++
 .../system/params/model/useParamsModel.ts     | 111 +++++++
 12 files changed, 831 insertions(+)
 create mode 100644 src/api/params/index.ts
 create mode 100644 src/api/params/types.ts
 create mode 100644 src/pages/system/params/components/ParamFormModal.module.less
 create mode 100644 src/pages/system/params/components/ParamFormModal.tsx
 create mode 100644 src/pages/system/params/index.module.less
 create mode 100644 src/pages/system/params/index.tsx
 create mode 100644 src/pages/system/params/model/config.ts
 create mode 100644 src/pages/system/params/model/form.ts
 create mode 100644 src/pages/system/params/model/services.ts
 create mode 100644 src/pages/system/params/model/useParamsColumns.ts
 create mode 100644 src/pages/system/params/model/useParamsModel.ts

diff --git a/src/api/params/index.ts b/src/api/params/index.ts
new file mode 100644
index 0000000..593e017
--- /dev/null
+++ b/src/api/params/index.ts
@@ -0,0 +1,49 @@
+/**
+ * 参数配置 API
+ *
+ * TODO: 等后端接口确定后，替换占位的 URL 和返回类型
+ */
+import { get, post, put, del } from '@/utils/request';
+import type { ParamQueryParams, SysParamVO, PageData, ApiResult } from './types';
+
+// 类型重导出，方便页面 model 层统一引用
+export type { SysParamVO, ParamQueryParams, PageData, ApiResult } from './types';
+
+// ============================================================
+// URL 常量（占位，等后端接口确定后替换）
+// ============================================================
+
+/** 配置列表分页查询 */
+const PARAM_LIST = '/admin/sys/param/page';
+/** 新增配置 */
+const PARAM_ADD = '/admin/sys/param/add';
+/** 编辑配置 */
+const PARAM_UPDATE = '/admin/sys/param/update';
+/** 删除配置 */
+const PARAM_DELETE = '/admin/sys/param/delete';
+
+// ============================================================
+// API 函数（占位）
+// ============================================================
+
+/** 配置列表分页 */
+export async function getParamList(
+  params: ParamQueryParams,
+): Promise<ApiResult<PageData<SysParamVO>>> {
+  return get(PARAM_LIST, params as Record<string, any>);
+}
+
+/** 新增配置 */
+export async function addParam(data: Partial<SysParamVO>): Promise<ApiResult<null>> {
+  return post(PARAM_ADD, data);
+}
+
+/** 编辑配置 */
+export async function updateParam(data: Partial<SysParamVO>): Promise<ApiResult<null>> {
+  return put(PARAM_UPDATE, data);
+}
+
+/** 删除配置 */
+export async function deleteParam(id: number): Promise<ApiResult<null>> {
+  return del(`${PARAM_DELETE}`, { id });
+}
diff --git a/src/api/params/types.ts b/src/api/params/types.ts
new file mode 100644
index 0000000..5a6c40c
--- /dev/null
+++ b/src/api/params/types.ts
@@ -0,0 +1,40 @@
+/**
+ * 参数配置 — 类型定义
+ *
+ * TODO: 等后端接口确定后，根据实际字段补充完整类型
+ */
+
+/** 配置项列表项 */
+export interface SysParamVO {
+  /** 配置项 ID */
+  id: number;
+  /** 配置项 key */
+  // paramKey: string;
+  /** 配置项 value */
+  // paramValue: string;
+  /** 备注 */
+  // remark: string;
+  /** 更新时间 */
+  // updateTime: string;
+}
+
+/** 配置列表查询参数 */
+export interface ParamQueryParams {
+  page?: string;
+  limit?: string;
+  /** 搜索关键字 */
+  // keyword?: string;
+}
+
+/** 分页数据结构 */
+export interface PageData<T> {
+  total: number;
+  list: T[];
+}
+
+/** API 统一响应格式 */
+export interface ApiResult<T> {
+  code: number | string;
+  msg: string;
+  data: T;
+}
diff --git a/src/config/fallbackRoutes.ts b/src/config/fallbackRoutes.ts
index efe6173..67eb757 100644
--- a/src/config/fallbackRoutes.ts
+++ b/src/config/fallbackRoutes.ts
@@ -164,6 +164,15 @@ export const FALLBACK_MENU_NODES: MenuNode[] = [
         icon: 'AiOutlineSafetyCertificate',
         permission: 'system.roles.view',
       },
+      {
+        id: 'system_params',
+        name: '参数配置',
+        path: 'system/params',
+        component: 'system/params',
+        componentName: 'SystemParams',
+        icon: 'AiOutlineSetting',
+        permission: 'system.params.view',
+      },
       {
         id: 'system_logs',
         name: '操作日志',
diff --git a/src/pages/system/params/components/ParamFormModal.module.less b/src/pages/system/params/components/ParamFormModal.module.less
new file mode 100644
index 0000000..d26e83b
--- /dev/null
+++ b/src/pages/system/params/components/ParamFormModal.module.less
@@ -0,0 +1,10 @@
+.paramFormModalMain {
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+    margin-top: 8px;
+  }
+}
diff --git a/src/pages/system/params/components/ParamFormModal.tsx b/src/pages/system/params/components/ParamFormModal.tsx
new file mode 100644
index 0000000..ea1485b
--- /dev/null
+++ b/src/pages/system/params/components/ParamFormModal.tsx
@@ -0,0 +1,141 @@
+import { defineComponent, ref, reactive, nextTick } from 'vue';
+import { useEffect } from '@/hooks';
+import { Modal, Form, Input, Button } from 'ant-design-vue';
+import { paramCodeRules, paramValueRules, remarkRules } from '../model/form';
+import type { SysParamsDTO } from '../model/services';
+import styles from './ParamFormModal.module.less';
+
+const { TextArea } = Input;
+
+interface ParamFormModalProps {
+  visible: boolean;
+  record: SysParamsDTO | null;
+  submitting?: boolean;
+  onClose: () => void;
+  onSave: (formData: { paramCode: string; paramValue: string; remark: string }) => void;
+}
+
+/** 默认表单数据 */
+const getDefaultForm = () => ({
+  paramCode: '',
+  paramValue: '',
+  remark: '',
+});
+
+export default defineComponent({
+  name: 'ParamFormModal',
+  props: {
+    visible: { type: Boolean, default: false },
+    record: { type: Object, default: null },
+    submitting: { type: Boolean, default: false },
+    onClose: { type: Function, required: true },
+    onSave: { type: Function, required: true },
+  },
+  setup(props: ParamFormModalProps) {
+    const formRef = ref<any>();
+    const formData = reactive(getDefaultForm());
+
+    /** 根据 record 初始化表单 */
+    const initFormFromRecord = (record: SysParamsDTO | null) => {
+      if (record) {
+        Object.assign(formData, {
+          paramCode: record.paramCode || '',
+          paramValue: record.paramValue || '',
+          remark: record.remark || '',
+        });
+      } else {
+        Object.assign(formData, getDefaultForm());
+      }
+    };
+
+    /** 监听 visible 变化重置表单 */
+    useEffect(() => {
+      if (props.visible) {
+        initFormFromRecord(props.record);
+        nextTick().then(() => formRef.value?.clearValidate());
+      }
+    }, [() => props.visible]);
+
+    /** 提交 */
+    const handleSubmit = async () => {
+      try {
+        await formRef.value?.validate();
+      } catch {
+        return;
+      }
+
+      props.onSave({
+        paramCode: formData.paramCode,
+        paramValue: formData.paramValue,
+        remark: formData.remark,
+      });
+    };
+
+    /** 关闭 */
+    const handleClose = () => {
+      props.onClose();
+    };
+
+    return () => {
+      const isEdit = !!props.record;
+
+      return (
+        <Modal
+          title={isEdit ? '编辑配置' : '新增配置'}
+          visible={props.visible}
+          onCancel={handleClose}
+          width={520}
+          destroyOnClose
+          footer={null}
+          centered
+          wrapClassName={styles.paramFormModalMain}
+        >
+          <Form ref={formRef} layout="vertical" model={formData} requiredMark>
+            <Form.Item label="参数编码" name="paramCode" rules={paramCodeRules}>
+              <Input
+                value={formData.paramCode}
+                onUpdate:value={(val: any) => {
+                  formData.paramCode = val?.target?.value ?? val ?? '';
+                }}
+                placeholder="请输入参数编码"
+                allowClear
+              />
+            </Form.Item>
+
+            <Form.Item label="参数值" name="paramValue" rules={paramValueRules}>
+              <Input
+                value={formData.paramValue}
+                onUpdate:value={(val: any) => {
+                  formData.paramValue = val?.target?.value ?? val ?? '';
+                }}
+                placeholder="请输入参数值"
+                allowClear
+              />
+            </Form.Item>
+
+            <Form.Item label="备注说明" name="remark" rules={remarkRules}>
+              <TextArea
+                value={formData.remark}
+                onUpdate:value={(val: any) => {
+                  formData.remark = val?.target?.value ?? val ?? '';
+                }}
+                placeholder="请输入备注说明（选填，最多200字）"
+                maxlength={200}
+                showCount
+                rows={3}
+              />
+            </Form.Item>
+          </Form>
+
+          {/* 底部按钮 */}
+          <div class={styles.footer}>
+            <Button onClick={handleClose}>取消</Button>
+            <Button type="primary" loading={props.submitting} onClick={handleSubmit}>
+              确认保存
+            </Button>
+          </div>
+        </Modal>
+      );
+    };
+  },
+});
diff --git a/src/pages/system/params/index.module.less b/src/pages/system/params/index.module.less
new file mode 100644
index 0000000..bd78f4d
--- /dev/null
+++ b/src/pages/system/params/index.module.less
@@ -0,0 +1,36 @@
+// 参数值单元格：文字最多 2 行省略，末尾带"查看"链接
+:global {
+  .param-value-cell {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+    cursor: default;
+  }
+
+  .param-value-text {
+    flex: 1;
+    min-width: 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.5;
+    word-break: break-all;
+    color: rgba(0, 0, 0, 0.88);
+  }
+
+  .param-value-view {
+    flex-shrink: 0;
+    color: #1677ff;
+    cursor: pointer;
+    user-select: none;
+    line-height: 1.5;
+    white-space: nowrap;
+
+    &:hover {
+      opacity: 0.85;
+    }
+  }
+}
diff --git a/src/pages/system/params/index.tsx b/src/pages/system/params/index.tsx
new file mode 100644
index 0000000..06884b0
--- /dev/null
+++ b/src/pages/system/params/index.tsx
@@ -0,0 +1,270 @@
+import { defineComponent, ref, nextTick } from 'vue';
+import { Button, Input, Table, Form, Space, Modal, Pagination, message } from 'ant-design-vue';
+import { useParamsModel } from './model/useParamsModel';
+import { saveParam, updateParam } from './model/services';
+import { useState, useThrottleFn, useContainerSize, useEffect } from '@/hooks';
+import ParamFormModal from './components/ParamFormModal';
+import pageStyles from '@/assets/styles/pageLayout.module.less';
+import './index.module.less';
+
+/**
+ * 参数值单元格：最多 2 行截断，溢出时显示"查看"按钮
+ */
+const ParamValueCell = defineComponent({
+  name: 'ParamValueCell',
+  props: { text: { type: String, required: true } },
+  setup(props) {
+    const textRef = ref<HTMLElement | null>(null);
+    const [overflow, setOverflow] = useState(false);
+    const [modalOpen, setModalOpen] = useState(false);
+
+    const checkOverflow = () => {
+      const el = textRef.value;
+      if (el) setOverflow(el.scrollHeight > el.clientHeight);
+    };
+
+    let observer: ResizeObserver | null = null;
+    useEffect(() => {
+      if (!textRef.value) return;
+      nextTick(checkOverflow);
+      observer = new ResizeObserver(checkOverflow);
+      observer.observe(textRef.value);
+      return () => {
+        observer?.disconnect();
+        observer = null;
+      };
+    }, [() => textRef.value]);
+
+    return () => {
+      const raw = props.text;
+      return (
+        <div class="param-value-cell">
+          <div ref={textRef} class="param-value-text">
+            {raw}
+          </div>
+          {overflow.value ? (
+            <span class="param-value-view" onClick={() => setModalOpen(true)}>
+              查看
+            </span>
+          ) : null}
+          <Modal
+            visible={modalOpen.value}
+            title="参数值"
+            footer={null}
+            width={600}
+            centered
+            destroyOnClose
+            onCancel={() => setModalOpen(false)}
+          >
+            <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-all', lineHeight: 1.8 }}>
+              {raw}
+            </div>
+          </Modal>
+        </div>
+      );
+    };
+  },
+});
+
+/**
+ * bodyCell 渲染
+ */
+function renderBodyCell({
+  column,
+  text,
+  record,
+  onEdit,
+}: {
+  column: any;
+  text: any;
+  record: any;
+  onEdit: (record: any) => void;
+}) {
+  // 操作列
+  if (column.key === 'action') {
+    return (
+      <Space>
+        <Button type="link" size="small" onClick={() => onEdit(record)}>
+          编辑
+        </Button>
+      </Space>
+    );
+  }
+  // 参数值列：两行截断 + 查看弹窗
+  if (column.dataIndex === 'paramValue') {
+    const raw = text || '';
+    return raw ? <ParamValueCell text={raw} /> : <span>--</span>;
+  }
+  // 备注列：空值显示 --
+  if (column.dataIndex === 'remark' && !text) {
+    return <span>--</span>;
+  }
+  return <span>{text ?? '--'}</span>;
+}
+
+/**
+ * 系统管理 - 配置管理
+ */
+export default defineComponent({
+  name: 'SystemParams',
+  setup() {
+    const {
+      filterForm,
+      loading,
+      dataSource,
+      columns,
+      pagination,
+      handleSearch,
+      handleReset,
+      handlePageChange,
+    } = useParamsModel();
+
+    const { containerRef, height } = useContainerSize({ headerOffset: 55 });
+
+    // ===== 弹窗状态 =====
+    const [modalVisible, setModalVisible] = useState<boolean>(false);
+    const [editingRecord, setEditingRecord] = useState<any>(null);
+    const [formSubmitting, setFormSubmitting] = useState<boolean>(false);
+
+    // ===== 新增 =====
+    const handleAdd = () => {
+      setEditingRecord(null);
+      setModalVisible(true);
+    };
+
+    // ===== 编辑 =====
+    const handleEdit = (record: any) => {
+      setEditingRecord(record);
+      setModalVisible(true);
+    };
+
+    // ===== 关闭弹窗 =====
+    const handleCloseModal = () => {
+      setModalVisible(false);
+      setEditingRecord(null);
+    };
+
+    // ===== 保存（新增/编辑） =====
+    const handleSave = useThrottleFn(async (formPayload: any) => {
+      if (formSubmitting.value) return;
+      setFormSubmitting(true);
+      try {
+        let res: any;
+        if (editingRecord.value) {
+          res = await updateParam({
+            id: editingRecord.value.id,
+            paramCode: formPayload.paramCode,
+            paramValue: formPayload.paramValue,
+            remark: formPayload.remark,
+          });
+        } else {
+          res = await saveParam({
+            paramCode: formPayload.paramCode,
+            paramValue: formPayload.paramValue,
+            remark: formPayload.remark,
+          });
+        }
+        if (res.code == 200) {
+          message.success(editingRecord.value ? '编辑成功' : '新增成功');
+          handleCloseModal();
+          handleSearch();
+        } else {
+          message.error(res.msg || '操作失败');
+        }
+      } catch (error: any) {
+        console.error('保存配置失败:', error);
+      } finally {
+        setFormSubmitting(false);
+      }
+    }, 500);
+
+    // ===== 表格最终列（含操作列） =====
+    const tableColumns = [
+      ...columns,
+      {
+        title: '操作',
+        key: 'action',
+        width: 100,
+        fixed: 'right' as const,
+        align: 'center' as const,
+      },
+    ];
+
+    return () => (
+      <div class={pageStyles.containerMain}>
+        {/* ===== 筛选区 ===== */}
+        <div class={pageStyles.filter}>
+          <Form layout="inline" model={filterForm}>
+            <Form.Item label="参数编码" name="paramCode">
+              <Input
+                value={filterForm.paramCode}
+                placeholder="请输入参数编码"
+                style={{ width: '200px' }}
+                allowClear
+                onUpdate:value={(val: any) =>
+                  (filterForm.paramCode = val?.target?.value ?? val ?? '')
+                }
+                onPressEnter={handleSearch}
+              />
+            </Form.Item>
+            <Form.Item>
+              <Space>
+                <Button onClick={handleReset}>重置</Button>
+                <Button type="primary" onClick={handleSearch} loading={loading.value}>
+                  查询
+                </Button>
+                <Button type="primary" onClick={handleAdd}>
+                  新增
+                </Button>
+              </Space>
+            </Form.Item>
+          </Form>
+        </div>
+
+        {/* ===== 表格区 ===== */}
+        <div class={pageStyles.table}>
+          <div ref={containerRef} class={pageStyles.tableBody}>
+            <Table
+              columns={tableColumns}
+              dataSource={dataSource.value}
+              loading={loading.value}
+              scroll={{ x: 'max-content', y: height.value }}
+              pagination={false}
+            >
+              {{
+                bodyCell: (args: any) =>
+                  renderBodyCell({
+                    ...args,
+                    onEdit: handleEdit,
+                  }),
+              }}
+            </Table>
+          </div>
+
+          {/* 独立分页 */}
+          <div class={pageStyles.pagination}>
+            <Pagination
+              current={(pagination as any).current.value}
+              pageSize={(pagination as any).pageSize.value}
+              total={(pagination as any).total.value}
+              showSizeChanger
+              showTotal={(total: number) => `共 ${total} 条`}
+              onChange={handlePageChange}
+            />
+          </div>
+        </div>
+
+        {/* ===== 新增/编辑弹窗 ===== */}
+        {modalVisible.value && (
+          <ParamFormModal
+            visible={modalVisible.value}
+            record={editingRecord.value}
+            submitting={formSubmitting.value}
+            onClose={handleCloseModal}
+            onSave={handleSave}
+          />
+        )}
+      </div>
+    );
+  },
+});
diff --git a/src/pages/system/params/model/config.ts b/src/pages/system/params/model/config.ts
new file mode 100644
index 0000000..7ff0402
--- /dev/null
+++ b/src/pages/system/params/model/config.ts
@@ -0,0 +1,29 @@
+/**
+ * 参数配置 - 常量配置
+ *
+ * 集中放置该页面的下拉选项、字段映射、状态文案等常量
+ */
+import type { SelectOption } from '@/types';
+
+// ============================================================
+// 字段映射（表格列与 API 字段对齐）
+// ============================================================
+
+/** API 字段 → 表格列中文映射 */
+export const FIELD_MAPPINGS: Record<string, string> = {
+  // TODO: 等后端接口确定后，根据实际字段补充
+};
+
+// ============================================================
+// 下拉选项
+// ============================================================
+
+/** 示例：状态筛选选项 */
+export const STATUS_OPTIONS: SelectOption[] = [{ value: '', label: '全部' }];
+
+/** 示例：每页条数选项 */
+export const PAGE_SIZE_OPTIONS: SelectOption[] = [
+  { value: 10, label: '10条/页' },
+  { value: 20, label: '20条/页' },
+  { value: 50, label: '50条/页' },
+];
diff --git a/src/pages/system/params/model/form.ts b/src/pages/system/params/model/form.ts
new file mode 100644
index 0000000..63dcd42
--- /dev/null
+++ b/src/pages/system/params/model/form.ts
@@ -0,0 +1,19 @@
+/**
+ * 参数配置 - 表单校验规则
+ *
+ * 集中管理新增/编辑弹窗的表单校验规则。
+ */
+import type { Rule } from 'ant-design-vue/es/form';
+
+// ============================================================
+// 校验规则
+// ============================================================
+
+/** 参数编码：必填 */
+export const paramCodeRules: Rule[] = [{ required: true, message: '请输入参数编码' }];
+
+/** 参数值：必填 */
+export const paramValueRules: Rule[] = [{ required: true, message: '请输入参数值' }];
+
+/** 备注说明：选填，最多 200 字 */
+export const remarkRules: Rule[] = [{ max: 200, message: '备注说明最多 200 个字' }];
diff --git a/src/pages/system/params/model/services.ts b/src/pages/system/params/model/services.ts
new file mode 100644
index 0000000..5a445d2
--- /dev/null
+++ b/src/pages/system/params/model/services.ts
@@ -0,0 +1,81 @@
+/**
+ * 参数配置 - 接口服务
+ *
+ * 该页面使用的所有接口集中管理，供 useModel Hook 调用。
+ */
+import { get, post } from '@/utils/request';
+
+// ============================================================
+// 类型定义
+// ============================================================
+
+/** 配置项 VO */
+export interface SysParamsDTO {
+  id: string;
+  paramCode: string;
+  paramValue: string;
+  remark: string;
+}
+
+/** 分页查询参数 */
+export interface ParamQueryParams {
+  page: string;
+  limit: string;
+  paramCode?: string;
+}
+
+/** 新增参数 */
+export interface ParamSaveParams {
+  paramCode: string;
+  paramValue: string;
+  remark?: string;
+}
+
+/** 编辑参数 */
+export interface ParamUpdateParams {
+  id: string;
+  paramCode: string;
+  paramValue: string;
+  remark?: string;
+}
+
+/** 分页数据结构 */
+export interface PageData<T> {
+  total: number;
+  list: T[];
+  exData?: Record<string, any>;
+}
+
+/** 接口通用返回结构 */
+export interface ApiResult<T> {
+  code: number;
+  msg: string;
+  data: T;
+}
+
+// ============================================================
+// URL 常量
+// ============================================================
+
+const PARAM_PAGE = '/sys/params/page';
+const PARAM_SAVE = '/sys/params/save';
+const PARAM_UPDATE = '/sys/params/update';
+
+// ============================================================
+// API 函数
+// ============================================================
+
+/** 配置列表分页查询 */
+export function getParamList(params: ParamQueryParams): Promise<ApiResult<PageData<SysParamsDTO>>> {
+  return get(PARAM_PAGE, params as Record<string, any>);
+}
+
+/** 新增配置 */
+export function saveParam(params: ParamSaveParams): Promise<ApiResult<null>> {
+  return post(PARAM_SAVE, params);
+}
+
+/** 编辑配置 */
+export function updateParam(params: ParamUpdateParams): Promise<ApiResult<null>> {
+  return post(PARAM_UPDATE, params);
+}
diff --git a/src/pages/system/params/model/useParamsColumns.ts b/src/pages/system/params/model/useParamsColumns.ts
new file mode 100644
index 0000000..9a7f1d2
--- /dev/null
+++ b/src/pages/system/params/model/useParamsColumns.ts
@@ -0,0 +1,36 @@
+/**
+ * 参数配置 - 表格列配置（视图层）
+ * 纯展示逻辑，不包含状态管理
+ */
+import type { SysParamsDTO } from './services';
+
+/**
+ * 参数配置表格列定义
+ *
+ * 列：参数编码 / 参数值 / 备注说明
+ * 操作列在 index.tsx 中动态追加
+ */
+export function useParamsColumns() {
+  const columns = [
+    {
+      title: '参数编码',
+      dataIndex: 'paramCode',
+      key: 'paramCode',
+      width: 230,
+    },
+    {
+      title: '参数值',
+      dataIndex: 'paramValue',
+      key: 'paramValue',
+      width: 480,
+    },
+    {
+      title: '备注说明',
+      dataIndex: 'remark',
+      key: 'remark',
+      minWidth: 240,
+    },
+  ];
+
+  return { columns };
+}
diff --git a/src/pages/system/params/model/useParamsModel.ts b/src/pages/system/params/model/useParamsModel.ts
new file mode 100644
index 0000000..3764a4a
--- /dev/null
+++ b/src/pages/system/params/model/useParamsModel.ts
@@ -0,0 +1,111 @@
+import { computed, reactive, toRef, nextTick, type Ref } from 'vue';
+import { useThrottleFn, useDebounce } from '@/hooks';
+import { useRequest } from '@/hooks/useRequest';
+import { useEffect } from '@/hooks/useEffect';
+import { usePagination, syncPaginationTotal } from '@/hooks/usePagination';
+import {
+  getParamList,
+  type SysParamsDTO,
+  type ParamQueryParams,
+  type PageData,
+  type ApiResult,
+} from './services';
+import { useParamsColumns } from './useParamsColumns';
+
+// ============================================================
+// Model（业务逻辑 Hook）
+// ============================================================
+
+/**
+ * 参数配置页数据模型
+ */
+export function useParamsModel() {
+  // ===== 筛选条件 =====
+  const filterForm = reactive({
+    paramCode: '',
+  });
+
+  // 参数编码筛选防抖 300ms
+  const { debouncedValue: debouncedParamCode } = useDebounce(
+    toRef(filterForm, 'paramCode') as Ref<string>,
+    { delay: 300 },
+  );
+
+  // ===== 分页 =====
+  const pagination = usePagination({ defaultCurrent: 1, defaultPageSize: 10 });
+
+  // ===== 构建 API 查询参数 =====
+  const buildQueryParams = (): ParamQueryParams => {
+    const params: ParamQueryParams = {
+      page: String((pagination as any).current.value),
+      limit: String((pagination as any).pageSize.value),
+    };
+    if (filterForm.paramCode.trim()) {
+      params.paramCode = filterForm.paramCode.trim();
+    }
+    return params;
+  };
+
+  // ===== 数据请求 =====
+  const {
+    data,
+    loading,
+    run: fetchList,
+  } = useRequest<ApiResult<PageData<SysParamsDTO>>>(() => getParamList(buildQueryParams()), {
+    refreshDeps: [],
+    formatResult: (res) => res,
+  });
+
+  const dataSource = computed(() => {
+    const res = data.value;
+    return res ? (res as any).data?.list || [] : [];
+  });
+
+  useEffect(() => {
+    syncPaginationTotal(pagination, (data.value as any)?.data?.total);
+  }, [data]);
+
+  // ===== 表格列配置 =====
+  const { columns } = useParamsColumns();
+
+  // ===== 计算属性 =====
+  const hasFilter = computed(() => {
+    return debouncedParamCode.value.trim() !== '';
+  });
+
+  // ===== 方法 =====
+
+  const handleSearch = () => {
+    pagination.reset();
+    fetchList();
+  };
+
+  /** 重置（重置后自动查询） */
+  const handleReset = useThrottleFn(async () => {
+    filterForm.paramCode = '';
+    pagination.reset();
+    await fetchList();
+  }, 500);
+
+  /** 分页变更 */
+  const handlePageChange = (page: number, pageSize: number) => {
+    pagination.setCurrent(page);
+    if (pageSize !== (pagination as any).pageSize.value) {
+      pagination.setPageSize(pageSize);
+    }
+    nextTick().then(() => fetchList());
+  };
+
+  return {
+    filterForm,
+    loading,
+    dataSource,
+    columns,
+    pagination,
+    hasFilter,
+    handleSearch,
+    handleReset,
+    handlePageChange,
+    fetchList,
+  };
+}