diff --git a/src/api/system/order.ts b/src/api/system/order.ts
new file mode 100644
index 0000000..e4f77c1
--- /dev/null
+++ b/src/api/system/order.ts
@@ -0,0 +1,216 @@
+import request from "@/utils/request";
+import { System_BaseUrl } from "@/api/config";
+const baseURL = System_BaseUrl + "/admin/order";
+const OrderApi = {
+  getList(params: getListRequest) {
+    return request<any, getListResponse>({
+      url: `${baseURL}`,
+      method: "get",
+      params: params,
+    });
+  },
+  add() {},
+  edit() {},
+  delete() {},
+};
+
+export default OrderApi;
+// 订单状态
+export type statusType =
+  | "unpaid"
+  | "in-production"
+  | "wait-out"
+  | "done"
+  | "refunding"
+  | "refund"
+  | "part-refund"
+  | "cancelled"
+  | "";
+
+// 发货类型
+export type sendType = "post" | "takeaway" | "takeself" | "table" | "";
+//订单类型
+export type orderType = "cash" | "miniapp" | "offline" | "";
+//是否回收站 0-否，1回收站 默认查未删除
+export type isDel = 0 | 1;
+
+export interface getListRequest {
+  endTime?: string;
+  /**
+   * 是否回收站 0-否，1回收站 默认查未删除
+   */
+  isDel?: isDel;
+  /**
+   * 订单编号
+   */
+  orderNo?: string;
+  /**
+   * 订单类型-cash收银-miniapp小程序-offline线下
+   */
+  orderType?: orderType;
+  /**
+   * 支付类型
+   */
+  payType?: string;
+  /**
+   * 平台类型
+   */
+  platformType?: string;
+  /**
+   * 查询包含该商品的 所有订单
+   */
+  productName?: string;
+  /**
+   * 发货类型post快递，takeaway外卖,takeself,自提table---堂食
+   */
+  sendType?: sendType;
+  /**
+   * 店铺Id
+   */
+  shopId?: number;
+  startTime?: string;
+  /**
+   * 状态: unpaid-待支付;in-production 制作中;wait-out
+   * 待取餐;;done-订单完成;refunding-申请退单;refund-退单;part-refund 部分退单;cancelled-取消订单
+   */
+  status?: statusType;
+  /**
+   * 台桌id
+   */
+  tableId?: string;
+  /**
+   * 台桌名称
+   */
+  tableName?: string;
+  [property: string]: any;
+}
+
+/**
+ * CzgResultPageOrderInfoVo
+ */
+export interface getListResponse {
+  code?: number;
+  data?: PageOrderInfoVo;
+  msg?: string;
+  [property: string]: any;
+}
+
+/**
+ * PageOrderInfoVo
+ */
+export interface PageOrderInfoVo {
+  maxPageSize?: number;
+  optimizeCountQuery?: boolean;
+  pageNumber?: number;
+  pageSize?: number;
+  records?: OrderInfoVo[];
+  totalPage?: number;
+  totalRow?: number;
+  [property: string]: any;
+}
+
+/**
+ * 订单表 通用展示类
+ *
+ * OrderInfoVo
+ */
+export interface OrderInfoVo {
+  createTime?: string;
+  /**
+   * 用餐模式 堂食 dine-in  外带 take-out 外卖 take-away
+   */
+  dineMode?: string;
+  /**
+   * 订单商品列表
+   */
+  goods?: OrderDetailSmallVO[];
+  id?: number;
+  /**
+   * 是否使用了霸王餐
+   */
+  isFreeDine?: number;
+  /**
+   * 订单金额 (扣除各类折扣)
+   */
+  orderAmount?: number;
+  /**
+   * 订单编号
+   */
+  orderNo?: string;
+  /**
+   * 订单类型-
+   * cash收银(除小程序以外 都属于收银)
+   * miniapp小程序
+   */
+  orderType?: orderType;
+  /**
+   * 订单原金额 不含折扣价格
+   */
+  originAmount?: number;
+  /**
+   * 支付时间
+   */
+  paidTime?: string;
+  /**
+   * 实际支付金额
+   */
+  payAmount?: number;
+  /**
+   * 支付订单号
+   */
+  payOrderNo?: string;
+  /**
+   * 支付类型
+   * 主扫 main-scan
+   * 被扫 back-scan
+   * 微信小程序 wechat-mini
+   * 支付宝小程序 alipay-mini
+   * 会员支付 vip-pay
+   * 现金支付 cash-pay
+   */
+  payType?: string;
+  /**
+   * 平台类型  pc 收银机客户端 wechat 微信小程序 alipay 支付宝小程序 admin-pc PC管理端 admin-app APP管理端
+   */
+  platformType?: string;
+  /**
+   * 是否支持退款，1支持退单， 0不支持退单
+   */
+  refundAble?: number;
+  /**
+   * 退单金额
+   */
+  refundAmount?: number;
+  /**
+   * 备注
+   */
+  remark?: string;
+  /**
+   * 店铺Id
+   */
+  shopId?: string;
+  /**
+   * 状态: unpaid-待支付;in-production 制作中;wait-out
+   * 待取餐;;done-订单完成;refunding-申请退单;refund-退单;part-refund 部分退单;cancelled-取消订单
+   */
+  status?: statusType;
+  /**
+   * 台桌名称
+   */
+  tableName?: string;
+  [property: string]: any;
+}
+
+/**
+ * 订单详情 实体类。
+ *
+ * OrderDetailSmallVO
+ */
+export interface OrderDetailSmallVO {
+  num?: number;
+  productImg?: string;
+  productName?: string;
+  refundNum?: number;
+  skuName?: string;
+  [property: string]: any;
+}
diff --git a/src/components/CURD/PageContent.vue b/src/components/CURD/PageContent.vue
index 174913d..b71d32f 100644
--- a/src/components/CURD/PageContent.vue
+++ b/src/components/CURD/PageContent.vue
@@ -535,8 +535,8 @@ const pagination = reactive(
 );
 // 分页相关的请求参数
 const request = props.contentConfig.request ?? {
-  pageName: "pageNum",
-  limitName: "pageSize",
+  pageName: "page",
+  limitName: "size",
 };
 
 const tableRef = ref<TableInstance>();
diff --git a/src/components/CURD/PageSearch.vue b/src/components/CURD/PageSearch.vue
index 3b218de..1f53cb2 100644
--- a/src/components/CURD/PageSearch.vue
+++ b/src/components/CURD/PageSearch.vue
@@ -5,7 +5,7 @@
     shadow="never"
     class="mb-[10px]"
   >
-    <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+    <el-form ref="queryFormRef" :model="queryParams" :inline="inline">
       <template v-for="(item, index) in formItems" :key="item.prop">
         <el-form-item
           v-show="isExpand ? true : index < showNumber"
@@ -36,6 +36,14 @@
               @keyup.enter="handleQuery"
             />
           </template>
+          <!-- radio-button radio按钮组 -->
+          <template v-if="item.type === 'radio-button'">
+            <el-radio-group v-model="queryParams[item.prop]" v-bind="item.attrs">
+              <template v-for="option in item.options" :key="option.value">
+                <el-radio-button :label="option.label" :value="option.value" />
+              </template>
+            </el-radio-group>
+          </template>
           <!-- InputTag 标签输入框 -->
           <template v-if="item.type === 'input-tag'">
             <div class="flex-center">
@@ -131,6 +139,10 @@ const emit = defineEmits<{
 }>();
 
 const queryFormRef = ref<FormInstance>();
+//form表单展示形式
+const inline = ref<boolean>(
+  props.searchConfig.inline === undefined ? true : !!props.searchConfig.inline
+);
 // 是否显示
 const visible = ref(true);
 // 响应式的formItems
diff --git a/src/components/CURD/types.ts b/src/components/CURD/types.ts
index 6b009ab..207284e 100644
--- a/src/components/CURD/types.ts
+++ b/src/components/CURD/types.ts
@@ -29,10 +29,11 @@ export interface IOperatData {
 export interface ISearchConfig {
   // 页面名称(参与组成权限标识,如sys:user:xxx)
   pageName: string;
+  inline?: Boolean;
   // 表单项
   formItems: Array<{
     // 组件类型(如input,select等)
-    type?: "input" | "select" | "tree-select" | "date-picker" | "input-tag";
+    type?: "input" | "select" | "tree-select" | "date-picker" | "input-tag" | "radio-button";
     // 标签文本
     label: string;
     // 标签提示
diff --git a/src/router/index.ts b/src/router/index.ts
index 5251083..86d2f24 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -463,7 +463,7 @@ export const constantRoutes: RouteRecordRaw[] = [
     children: [
       {
         path: "index",
-        component: () => import("@/views/order/index.vue"),
+        component: () => import("@/views/order/index/index.vue"),
         name: "orderIndex",
         meta: {
           title: "订单列表",
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index efc4ba4..80762aa 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -12,8 +12,8 @@ declare global {
    * 分页查询参数
    */
   interface PageQuery {
-    pageNum: number;
-    pageSize: number;
+    page: number;
+    size: number;
   }
 
   /**
diff --git a/src/views/admim/system/version/config/config.ts b/src/views/admim/system/version/config/config.ts
index c6b65a1..b956baa 100644
--- a/src/views/admim/system/version/config/config.ts
+++ b/src/views/admim/system/version/config/config.ts
@@ -1,3 +1,5 @@
+import { property } from "lodash";
+
 export const sourceOptions: options[] = [
   { label: "桌面端", value: "pc" },
   { label: "管理端", value: "manager_app" },
@@ -39,4 +41,5 @@ export function returnOptionsLabel(optionsType: optionsType, value: string | num
 export interface options {
   label: string;
   value: string | number;
+  [property: string]: any;
 }
diff --git a/src/views/order/index.vue b/src/views/order/index.vue
deleted file mode 100644
index 41a40c8..0000000
--- a/src/views/order/index.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template></template>
\ No newline at end of file
diff --git a/src/views/order/index/config/add.ts b/src/views/order/index/config/add.ts
new file mode 100644
index 0000000..46a8fb3
--- /dev/null
+++ b/src/views/order/index/config/add.ts
@@ -0,0 +1,88 @@
+import VersionApi, { type addRequest } from "@/api/system/version";
+import type { IModalConfig } from "@/components/CURD/types";
+
+const modalConfig: IModalConfig<addRequest> = {
+  pageName: "sys:user",
+  dialog: {
+    title: "新增版本",
+    width: 800,
+    draggable: true,
+  },
+  form: {
+    labelWidth: 140,
+  },
+  formAction: function (data) {
+    return VersionApi.add({ ...data, url: typeof data.url === "string" ? data.url : data.url[0] });
+  },
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
+  },
+  formItems: [
+    {
+      label: "渠道",
+      prop: "source",
+      rules: [{ required: true, message: "请选择渠道", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择渠道",
+      },
+      options: [],
+    },
+    {
+      label: "类型",
+      prop: "type",
+      rules: [{ required: true, message: "请选择类型", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择类型",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      options: [],
+    },
+    {
+      type: "input",
+      label: "版本号",
+      prop: "version",
+      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入版本号",
+      },
+    },
+    {
+      type: "radio",
+      label: "是否强制更新",
+      prop: "isForce",
+      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入版本号",
+      },
+      initialValue: 0,
+      options: [],
+    },
+    {
+      type: "textarea",
+      label: "更新提示内容",
+      prop: "message",
+      rules: [{ required: true, message: "请输入更新提示内容", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入更新提示内容",
+      },
+    },
+    {
+      type: "custom",
+      label: "版本文件",
+      prop: "url",
+      rules: [{ required: true, message: "请上传版本文件", trigger: "blur" }],
+      attrs: {
+        placeholder: "请上传版本文件",
+      },
+      initialValue: [],
+    },
+  ],
+};
+
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
+export default reactive(modalConfig);
diff --git a/src/views/order/index/config/config.ts b/src/views/order/index/config/config.ts
new file mode 100644
index 0000000..81c6da0
--- /dev/null
+++ b/src/views/order/index/config/config.ts
@@ -0,0 +1,79 @@
+import type { statusType } from "@/api/system/order";
+export const statusOptions: statusOptions[] = [
+  { label: "全部", value: "" },
+  { label: "待支付", value: "unpaid" },
+  { label: "制作中", value: "in-production" },
+  { label: "待取餐", value: "wait-out" },
+  { label: "订单完成", value: "done" },
+  { label: "申请退单", value: "refunding" },
+  { label: "退单", value: "refund" },
+  { label: "部分退单", value: "part-refund" },
+  { label: "取消订单", value: "cancelled" },
+];
+export const payTypeOptions: payTypeOptions[] = [
+  { label: "全部", value: "" },
+  {
+    label: "现金",
+    value: "cash",
+  },
+  {
+    label: "银行卡",
+    value: "bank",
+  },
+  {
+    label: "扫码支付",
+    value: "scanCode",
+  },
+  {
+    label: "储值卡",
+    value: "deposit",
+  },
+  {
+    label: "会员支付",
+    value: "vipPay",
+  },
+  {
+    label: "挂账",
+    value: "arrears",
+  },
+];
+export type optionsType = "status";
+
+export function returnOptions(type: optionsType) {
+  if (type === "status") {
+    return statusOptions;
+  }
+}
+
+export function returnOptionsLabel(optionsType: optionsType, value: string | number) {
+  const options = returnOptions(optionsType);
+  if (!options) {
+    return "";
+  }
+  const option = options.find((item) => item.value === value);
+  return option ? option.label : "";
+}
+
+export interface options {
+  label: string;
+  value: string | number;
+  [property: string]: any;
+}
+export interface statusOptions extends options {
+  value: statusType;
+}
+
+export type payTypeValue =
+  | ""
+  | "cash"
+  | "bank"
+  | "scanCode"
+  | "deposit"
+  | "vipPay"
+  | "arrears"
+  | "virtual"
+  | "arrears";
+
+export interface payTypeOptions extends options {
+  value: payTypeValue;
+}
diff --git a/src/views/order/index/config/content.ts b/src/views/order/index/config/content.ts
new file mode 100644
index 0000000..6d63c53
--- /dev/null
+++ b/src/views/order/index/config/content.ts
@@ -0,0 +1,59 @@
+import OrderApi from "@/api/system/order";
+import type { editRequest } from "@/api/system/version";
+import type { IContentConfig } from "@/components/CURD/types";
+
+const contentConfig: IContentConfig = {
+  pageName: "sys:user",
+  table: {
+    border: true,
+    highlightCurrentRow: true,
+  },
+  pagination: {
+    background: true,
+    layout: "prev,pager,next,jumper,total,sizes",
+    pageSize: 20,
+    pageSizes: [10, 20, 30, 50],
+  },
+  indexAction: function (params) {
+    return OrderApi.getList(params);
+  },
+  // deleteAction: OrderApi.delete,
+  // modifyAction: function (data) {
+  //   // return OrderApi.edit(data);
+  // },
+  pk: "id",
+  toolbar: ["add"],
+  defaultToolbar: ["refresh", "filter", "search"],
+  cols: [
+    { type: "selection", width: 50, align: "center" },
+    // { label: "id", align: "center", prop: "id", width: 100, show: true },
+    {
+      label: "订单号信息",
+      align: "center",
+      prop: "orderNo",
+      width: 120,
+    },
+
+    {
+      label: "操作",
+      align: "center",
+      fixed: "right",
+      width: 280,
+      templet: "tool",
+      operat: [
+        {
+          icon: "Document",
+          name: "detail",
+          text: "详情",
+        },
+        {
+          icon: "Printer",
+          name: "printer",
+          text: "开票",
+        },
+      ],
+    },
+  ],
+};
+
+export default contentConfig;
diff --git a/src/views/order/index/config/content2.ts b/src/views/order/index/config/content2.ts
new file mode 100644
index 0000000..3da3999
--- /dev/null
+++ b/src/views/order/index/config/content2.ts
@@ -0,0 +1,133 @@
+import type { IContentConfig } from "@/components/CURD/types";
+
+const contentConfig: IContentConfig = {
+  pageName: "sys:user",
+  table: {
+    showOverflowTooltip: true,
+  },
+  toolbar: [],
+  indexAction: function (params) {
+    // 模拟发起网络请求获取列表数据
+    console.log("indexAction:", params);
+    return Promise.resolve({
+      total: 2,
+      list: [
+        {
+          id: 1,
+          username: "tom",
+          avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
+          percent: 99,
+          price: 10,
+          url: "https://www.baidu.com",
+          icon: "el-icon-setting",
+          gender: 1,
+          status: 1,
+          status2: 1,
+          sort: 99,
+          createTime: 1715647982437,
+        },
+        {
+          id: 2,
+          username: "jerry",
+          avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
+          percent: 88,
+          price: 999,
+          url: "https://www.google.com",
+          icon: "el-icon-user",
+          gender: 0,
+          status: 0,
+          status2: 0,
+          sort: 0,
+          createTime: 1715648977426,
+        },
+      ],
+    });
+  },
+  modifyAction(data) {
+    // 模拟发起网络请求修改字段
+    // console.log("modifyAction:", data);
+    ElMessage.success(JSON.stringify(data));
+    return Promise.resolve(null);
+  },
+  cols: [
+    { type: "index", width: 50, align: "center" },
+    { label: "ID", align: "center", prop: "id", show: false },
+    { label: "文本", align: "center", prop: "username" },
+    { label: "图片", align: "center", prop: "avatar", templet: "image" },
+    {
+      label: "百分比",
+      align: "center",
+      prop: "percent",
+      templet: "percent",
+    },
+    {
+      label: "货币符",
+      align: "center",
+      prop: "price",
+      templet: "price",
+      priceFormat: "$",
+    },
+    { label: "链接", align: "center", prop: "url", width: 180, templet: "url" },
+    { label: "图标", align: "center", prop: "icon", templet: "icon" },
+    {
+      label: "列表值",
+      align: "center",
+      prop: "gender",
+      templet: "list",
+      selectList: { "0": "女", "1": "男" },
+    },
+    {
+      label: "自定义",
+      align: "center",
+      prop: "status",
+      templet: "custom",
+      slotName: "status",
+    },
+    {
+      label: "Switch",
+      align: "center",
+      prop: "status2",
+      templet: "switch",
+      activeValue: 1,
+      inactiveValue: 0,
+      activeText: "启用",
+      inactiveText: "禁用",
+    },
+    {
+      label: "输入框",
+      align: "center",
+      prop: "sort",
+      templet: "input",
+      inputType: "number",
+    },
+    {
+      label: "日期格式化",
+      align: "center",
+      prop: "createTime",
+      minWidth: 120,
+      templet: "date",
+      dateFormat: "YYYY/MM/DD HH:mm:ss",
+    },
+    {
+      label: "操作栏",
+      align: "center",
+      fixed: "right",
+      width: 220,
+      templet: "tool",
+      operat: [
+        {
+          name: "reset_pwd",
+          auth: "password:reset",
+          icon: "refresh-left",
+          text: "重置密码",
+          type: "primary",
+          render(row) {
+            return row.id === 1;
+          },
+        },
+      ],
+    },
+  ],
+};
+
+export default contentConfig;
diff --git a/src/views/order/index/config/edit.ts b/src/views/order/index/config/edit.ts
new file mode 100644
index 0000000..799d8a4
--- /dev/null
+++ b/src/views/order/index/config/edit.ts
@@ -0,0 +1,51 @@
+import VersionApi, { type editRequest } from "@/api/system/version";
+import type { IModalConfig } from "@/components/CURD/types";
+
+const modalConfig: IModalConfig<editRequest> = {
+  pageName: "sys:user",
+  dialog: {
+    title: "编辑版本",
+    width: 800,
+    draggable: true,
+  },
+  pk: "id",
+  formAction: function (data) {
+    return VersionApi.edit({ ...data, url: typeof data.url === "string" ? data.url : data.url[0] });
+  },
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
+  },
+  formItems: [
+    {
+      type: "input",
+      label: "版本号",
+      prop: "version",
+      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入版本号",
+      },
+    },
+
+    {
+      type: "textarea",
+      label: "更新提示内容",
+      prop: "message",
+      rules: [{ required: true, message: "请输入更新提示内容", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入更新提示内容",
+      },
+    },
+    {
+      type: "custom",
+      label: "版本文件",
+      prop: "url",
+      rules: [{ required: true, message: "请上传版本文件", trigger: "blur" }],
+      attrs: {
+        placeholder: "请上传版本文件",
+      },
+      initialValue: [],
+    },
+  ],
+};
+
+export default reactive(modalConfig);
diff --git a/src/views/order/index/config/search.ts b/src/views/order/index/config/search.ts
new file mode 100644
index 0000000..61b59ac
--- /dev/null
+++ b/src/views/order/index/config/search.ts
@@ -0,0 +1,57 @@
+import type { ISearchConfig } from "@/components/CURD/types";
+import { statusOptions, payTypeOptions } from "./config";
+const searchConfig: ISearchConfig = {
+  pageName: "sys:user",
+  inline: false,
+  isExpandable: false,
+  formItems: [
+    {
+      type: "radio-button",
+      label: "订单状态",
+      prop: "status",
+      attrs: {
+        placeholder: "请选择订单状态",
+        clearable: true,
+      },
+      options: statusOptions,
+      initialValue: "",
+    },
+    {
+      type: "radio-button",
+      label: "支付方式",
+      prop: "payType",
+      attrs: {
+        placeholder: "请选择支付方式",
+        clearable: true,
+      },
+      options: payTypeOptions,
+      initialValue: "",
+    },
+    {
+      type: "input",
+      label: "订单编号",
+      prop: "orderNo",
+      attrs: {
+        placeholder: "请输入订单编号",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+    },
+    {
+      type: "input",
+      label: "商品名称",
+      prop: "productName",
+      attrs: {
+        placeholder: "请输入商品名称",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+    },
+  ],
+};
+
+export default searchConfig;
diff --git a/src/views/order/index/index.vue b/src/views/order/index/index.vue
new file mode 100644
index 0000000..f72f64e
--- /dev/null
+++ b/src/views/order/index/index.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="app-container">
+    <!-- 列表 -->
+    <template v-if="isA">
+      <!-- 搜索 -->
+      <page-search
+        ref="searchRef"
+        :search-config="searchConfig"
+        @query-click="handleQueryClick"
+        @reset-click="handleResetClick"
+      />
+      <!-- 列表 -->
+      <page-content
+        ref="contentRef"
+        :content-config="contentConfig"
+        @add-click="handleAddClick"
+        @edit-click="handleEditClick"
+        @export-click="handleExportClick"
+        @search-click="handleSearchClick"
+        @toolbar-click="handleToolbarClick"
+        @operat-click="handleOperatClick"
+        @filter-change="handleFilterChange"
+      >
+        <template #status="scope">
+          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+          </el-tag>
+        </template>
+        <template #options="scope">
+          {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
+        </template>
+        <template #gender="scope">
+          <DictLabel v-model="scope.row[scope.prop]" code="gender" />
+        </template>
+        <template #mobile="scope">
+          <el-text>{{ scope.row[scope.prop] }}</el-text>
+          <copy-button
+            v-if="scope.row[scope.prop]"
+            :text="scope.row[scope.prop]"
+            style="margin-left: 2px"
+          />
+        </template>
+      </page-content>
+
+      <!-- 新增 -->
+      <page-modal
+        ref="addModalRef"
+        :modal-config="addModalConfig"
+        @submit-click="handleSubmitClick"
+      >
+        <template #url="scope">
+          <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+          <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
+        </template>
+      </page-modal>
+
+      <!-- 编辑 -->
+      <page-modal
+        ref="editModalRef"
+        :modal-config="editModalConfig"
+        @submit-click="handleSubmitClick"
+      >
+        <template #url="scope">
+          <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+          <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
+        </template>
+      </page-modal>
+    </template>
+    <template v-else>
+      <page-content
+        ref="contentRef"
+        :content-config="contentConfig2"
+        @operat-click="handleOperatClick"
+      >
+        <template #status="scope">
+          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+          </el-tag>
+        </template>
+      </page-content>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VersionApi from "@/api/system/version";
+import DeptAPI from "@/api/system/dept";
+import RoleAPI from "@/api/system/role";
+import type { IObject, IOperatData } from "@/components/CURD/types";
+import usePage from "@/components/CURD/usePage";
+import addModalConfig from "./config/add";
+import contentConfig from "./config/content";
+import contentConfig2 from "./config/content2";
+import editModalConfig from "./config/edit";
+import searchConfig from "./config/search";
+import { returnOptionsLabel } from "./config/config";
+
+const {
+  searchRef,
+  contentRef,
+  addModalRef,
+  editModalRef,
+  handleQueryClick,
+  handleResetClick,
+  // handleAddClick,
+  // handleEditClick,
+  handleSubmitClick,
+  handleExportClick,
+  handleSearchClick,
+  handleFilterChange,
+} = usePage();
+
+// 新增
+async function handleAddClick() {
+  addModalRef.value?.setModalVisible();
+  // 加载部门下拉数据源
+  // addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
+  // 加载角色下拉数据源
+  // addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
+}
+// 编辑
+async function handleEditClick(row: IObject) {
+  editModalRef.value?.handleDisabled(false);
+  editModalRef.value?.setModalVisible();
+  // 根据id获取数据进行填充
+  // const data = await VersionApi.getFormData(row.id);
+  console.log({ ...row, url: [row.url] });
+  editModalRef.value?.setFormData({ ...row, url: [row.url] });
+}
+1;
+// 其他工具栏
+function handleToolbarClick(name: string) {
+  console.log(name);
+  if (name === "custom1") {
+    ElMessage.success("点击了自定义1按钮");
+  }
+}
+// 其他操作列
+async function handleOperatClick(data: IOperatData) {
+  console.log(data);
+  if (data.name === "detail") {
+    return;
+  }
+  if (data.name === "printer") {
+  }
+}
+
+// 切换示例
+const isA = ref(true);
+</script>