diff --git a/packages/ui/certd-client/CHANGELOG.md b/packages/ui/certd-client/CHANGELOG.md
index bf9b4d13..5ef21b4c 100644
--- a/packages/ui/certd-client/CHANGELOG.md
+++ b/packages/ui/certd-client/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.16.4](https://github.com/fast-crud/fast-crud/compare/v1.16.3...v1.16.4) (2023-08-18)
+
+**Note:** Version bump only for package @fast-crud/fs-admin-antdv
+
+## [1.16.3](https://github.com/fast-crud/fast-crud/compare/v1.16.2...v1.16.3) (2023-08-18)
+
+### Performance Improvements
+
+* fs-button增加buttonProps参数，当fs-button的属性与x-button属性名重复时使用 ([5ca5333](https://github.com/fast-crud/fast-crud/commit/5ca53330f8bcf8d7acf4eb921aa92b83c41de52a))
+
 ## [1.16.2](https://github.com/fast-crud/fast-crud/compare/v1.16.1...v1.16.2) (2023-08-10)
 
 **Note:** Version bump only for package @fast-crud/fs-admin-antdv
diff --git a/packages/ui/certd-client/package.json b/packages/ui/certd-client/package.json
index 1b73d31a..bbb5dbbd 100644
--- a/packages/ui/certd-client/package.json
+++ b/packages/ui/certd-client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fast-crud/fs-admin-antdv",
-  "version": "1.16.2",
+  "version": "1.16.4",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -26,10 +26,10 @@
     "@ant-design/icons-vue": "^6.1.0",
     "@aws-sdk/client-s3": "^3.383.0",
     "@aws-sdk/s3-request-presigner": "^3.383.0",
-    "@fast-crud/fast-crud": "^1.16.2",
-    "@fast-crud/fast-extends": "^1.16.2",
-    "@fast-crud/ui-antdv": "^1.16.2",
-    "@fast-crud/ui-interface": "^1.16.2",
+    "@fast-crud/fast-crud": "^1.16.4",
+    "@fast-crud/fast-extends": "^1.16.4",
+    "@fast-crud/ui-antdv": "^1.16.4",
+    "@fast-crud/ui-interface": "^1.16.4",
     "@iconify/iconify": "^3.1.1",
     "@iconify/json": "^2.2.98",
     "@purge-icons/generated": "^0.9.0",
diff --git a/packages/ui/certd-client/src/router/source/modules/crud.ts b/packages/ui/certd-client/src/router/source/modules/crud.ts
index e9f19ad9..67bac128 100644
--- a/packages/ui/certd-client/src/router/source/modules/crud.ts
+++ b/packages/ui/certd-client/src/router/source/modules/crud.ts
@@ -430,6 +430,12 @@ export const crudResources = [
             name: "FormRender",
             path: "/crud/form/render",
             component: "/crud/form/render/index.vue"
+          },
+          {
+            title: "查看表单使用单元格组件",
+            name: "FormView",
+            path: "/crud/form/view",
+            component: "/crud/form/view/index.vue"
           }
         ]
       },
diff --git a/packages/ui/certd-client/src/views/crud/form/view/api.ts b/packages/ui/certd-client/src/views/crud/form/view/api.ts
new file mode 100644
index 00000000..4e17d236
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/form/view/api.ts
@@ -0,0 +1,42 @@
+import { requestForMock } from "/src/api/service";
+const request = requestForMock;
+const apiPrefix = "/mock/FormView";
+export function GetList(query: any) {
+  return request({
+    url: apiPrefix + "/page",
+    method: "get",
+    data: query
+  });
+}
+
+export function AddObj(obj: any) {
+  return request({
+    url: apiPrefix + "/add",
+    method: "post",
+    data: obj
+  });
+}
+
+export function UpdateObj(obj: any) {
+  return request({
+    url: apiPrefix + "/update",
+    method: "post",
+    data: obj
+  });
+}
+
+export function DelObj(id: any) {
+  return request({
+    url: apiPrefix + "/delete",
+    method: "post",
+    params: { id }
+  });
+}
+
+export function GetObj(id: any) {
+  return request({
+    url: apiPrefix + "/info",
+    method: "get",
+    params: { id }
+  });
+}
diff --git a/packages/ui/certd-client/src/views/crud/form/view/crud.tsx b/packages/ui/certd-client/src/views/crud/form/view/crud.tsx
new file mode 100644
index 00000000..da1f1c39
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/form/view/crud.tsx
@@ -0,0 +1,96 @@
+import * as api from "./api";
+import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
+
+export default function ({}: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
+    return await api.GetList(query);
+  };
+  const editRequest = async ({ form, row }: EditReq) => {
+    form.id = row.id;
+    return await api.UpdateObj(form);
+  };
+  const delRequest = async ({ row }: DelReq) => {
+    return await api.DelObj(row.id);
+  };
+
+  const addRequest = async ({ form }: AddReq) => {
+    return await api.AddObj(form);
+  };
+
+  return {
+    crudOptions: {
+      settings: {
+        viewFormUseCellComponent: true
+      },
+      request: {
+        pageRequest,
+        addRequest,
+        editRequest,
+        delRequest
+      },
+      form: {
+        row: {
+          gutter: 20
+        },
+        beforeSubmit(context) {
+          console.log("beforeSubmit", context);
+        },
+        afterSubmit(context) {
+          console.log("afterSubmit", context);
+        }
+      },
+      columns: {
+        name: {
+          title: "姓名",
+          type: "text",
+          form: {
+            helper: "添加和编辑时必填，编辑时额外需要校验长度",
+            rules: [{ required: true, message: "请输入姓名" }],
+            component: {
+              maxlength: 5, // 原生属性要写在这里
+              props: {
+                type: "text",
+                showWordLimit: true
+              }
+            }
+          },
+          editForm: {
+            rules: [{ min: 2, max: 5, message: "姓名长度为2-5" }]
+          }
+        },
+        age: {
+          title: "年龄",
+          type: "text",
+          form: {
+            rules: [{ pattern: /^\d+$/, message: "必须为整数" }],
+            helper: "正则表达式"
+          }
+        },
+        status: {
+          title: "必选",
+          type: "dict-select",
+          dict: dict({
+            url: "/mock/dicts/OpenStatusEnum"
+          }),
+          form: {
+            rules: [{ required: true, message: "请选择一个选项" }]
+          }
+        },
+        email: {
+          title: "邮箱",
+          type: "text",
+          form: {
+            rules: [{ type: "email", message: "请填写正确的邮箱" }]
+          }
+        },
+        url: {
+          title: "URL",
+          type: "text",
+          form: {
+            rules: [{ type: "url", message: "请填写正确的url" }]
+          }
+        }
+      }
+    }
+  };
+}
diff --git a/packages/ui/certd-client/src/views/crud/form/view/index.vue b/packages/ui/certd-client/src/views/crud/form/view/index.vue
new file mode 100644
index 00000000..4a42334b
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/form/view/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">
+        查看表单使用单元格组件显示
+        <span class="sub">点击查看按钮，打开查看表单显示效果</span>
+      </div>
+    </template>
+    <fs-crud ref="crudRef" v-bind="crudBinding" />
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
+import createCrudOptions from "./crud";
+
+export default defineComponent({
+  name: "FormView",
+  setup() {
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    // 页面打开后获取列表数据
+    onMounted(() => {
+      crudExpose.doRefresh();
+    });
+
+    return {
+      crudBinding,
+      crudRef
+    };
+  }
+});
+</script>
diff --git a/packages/ui/certd-client/src/views/crud/form/view/mock.ts b/packages/ui/certd-client/src/views/crud/form/view/mock.ts
new file mode 100644
index 00000000..7678f128
--- /dev/null
+++ b/packages/ui/certd-client/src/views/crud/form/view/mock.ts
@@ -0,0 +1,310 @@
+import mockUtil from "/src/mock/base";
+
+const options: any = {
+  name: "FormView",
+  idGenerator: 0
+};
+const list = [
+  {
+    name: "王小虎",
+    age: 15,
+    password: "",
+    status: "2",
+    url: "https://baidu.com"
+  },
+  {
+    name: "张三",
+    age: 18,
+    password: "",
+    url: "https://baidu.com"
+  },
+  {
+    status: "2"
+  }
+];
+
+const dictData = [
+  {
+    value: "zhinan",
+    label: "指南",
+    children: [
+      {
+        value: "shejiyuanze",
+        label: "设计原则",
+        children: [
+          {
+            value: "yizhi",
+            label: "一致"
+          },
+          {
+            value: "fankui",
+            label: "反馈"
+          },
+          {
+            value: "xiaolv",
+            label: "效率"
+          },
+          {
+            value: "kekong",
+            label: "可控"
+          }
+        ]
+      },
+      {
+        value: "daohang",
+        label: "导航",
+        children: [
+          {
+            value: "cexiangdaohang",
+            label: "侧向导航"
+          },
+          {
+            value: "dingbudaohang",
+            label: "顶部导航"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: "zujian",
+    label: "组件",
+    children: [
+      {
+        value: "basic",
+        label: "Basic",
+        children: [
+          {
+            value: "layout",
+            label: "Layout 布局"
+          },
+          {
+            value: "color",
+            label: "Color 色彩"
+          },
+          {
+            value: "typography",
+            label: "Typography 字体"
+          },
+          {
+            value: "icon",
+            label: "Icon 图标"
+          },
+          {
+            value: "button",
+            label: "Button 按钮"
+          }
+        ]
+      },
+      {
+        value: "form",
+        label: "Form",
+        children: [
+          {
+            value: "radio",
+            label: "Radio 单选框"
+          },
+          {
+            value: "checkbox",
+            label: "Checkbox 多选框"
+          },
+          {
+            value: "input",
+            label: "Input 输入框"
+          },
+          {
+            value: "input-number",
+            label: "InputNumber 计数器"
+          },
+          {
+            value: "select",
+            label: "Select 选择器"
+          },
+          {
+            value: "cascader",
+            label: "Cascader 级联选择器"
+          },
+          {
+            value: "switch",
+            label: "Switch 开关"
+          },
+          {
+            value: "slider",
+            label: "Slider 滑块"
+          },
+          {
+            value: "time-picker",
+            label: "TimePicker 时间选择器"
+          },
+          {
+            value: "date-picker",
+            label: "DatePicker 日期选择器"
+          },
+          {
+            value: "datetime-picker",
+            label: "DateTimePicker 日期时间选择器"
+          },
+          {
+            value: "upload",
+            label: "Upload 上传"
+          },
+          {
+            value: "rate",
+            label: "Rate 评分"
+          },
+          {
+            value: "form",
+            label: "Form 表单"
+          }
+        ]
+      },
+      {
+        value: "data",
+        label: "Data",
+        children: [
+          {
+            value: "table",
+            label: "Table 表格"
+          },
+          {
+            value: "tag",
+            label: "Tag 标签"
+          },
+          {
+            value: "progress",
+            label: "Progress 进度条"
+          },
+          {
+            value: "tree",
+            label: "Tree 树形控件"
+          },
+          {
+            value: "pagination",
+            label: "Pagination 分页"
+          },
+          {
+            value: "badge",
+            label: "Badge 标记"
+          }
+        ]
+      },
+      {
+        value: "notice",
+        label: "Notice",
+        children: [
+          {
+            value: "alert",
+            label: "Alert 警告"
+          },
+          {
+            value: "loading",
+            label: "Loading 加载"
+          },
+          {
+            value: "message",
+            label: "Message 消息提示"
+          },
+          {
+            value: "message-box",
+            label: "MessageBox 弹框"
+          },
+          {
+            value: "notification",
+            label: "Notification 通知"
+          }
+        ]
+      },
+      {
+        value: "navigation",
+        label: "Navigation",
+        children: [
+          {
+            value: "menu",
+            label: "NavMenu 导航菜单"
+          },
+          {
+            value: "tabs",
+            label: "Tabs 标签页"
+          },
+          {
+            value: "breadcrumb",
+            label: "Breadcrumb 面包屑"
+          },
+          {
+            value: "dropdown",
+            label: "Dropdown 下拉菜单"
+          },
+          {
+            value: "steps",
+            label: "Steps 步骤条"
+          }
+        ]
+      },
+      {
+        value: "others",
+        label: "Others",
+        children: [
+          {
+            value: "dialog",
+            label: "Dialog 对话框"
+          },
+          {
+            value: "tooltip",
+            label: "Tooltip 文字提示"
+          },
+          {
+            value: "popover",
+            label: "Popover 弹出框"
+          },
+          {
+            value: "card",
+            label: "Card 卡片"
+          },
+          {
+            value: "carousel",
+            label: "Carousel 走马灯"
+          },
+          {
+            value: "collapse",
+            label: "Collapse 折叠面板"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    value: "ziyuan",
+    label: "资源",
+    children: [
+      {
+        value: "axure",
+        label: "Axure Components"
+      },
+      {
+        value: "sketch",
+        label: "Sketch Templates"
+      },
+      {
+        value: "jiaohu",
+        label: "组件交互文档"
+      }
+    ]
+  }
+];
+
+options.list = list;
+options.copyTimes = 1000;
+const mock = mockUtil.buildMock(options);
+mock.push({
+  path: "/select/cascadeData",
+  method: "get",
+  handle(req: any) {
+    return {
+      code: 0,
+      msg: "success",
+      data: dictData
+    };
+  }
+});
+
+export default mock;