diff --git a/src/api/cabinet/cabinet-cell.ts b/src/api/cabinet/cabinet-cell.ts
index 7a10763..cc11ee6 100644
--- a/src/api/cabinet/cabinet-cell.ts
+++ b/src/api/cabinet/cabinet-cell.ts
@@ -44,6 +44,10 @@ export interface AddCabinetCellCommand {
   cellNo: number;
   /** 针脚序号 */
   pinNo: number;
+  /**
+   * 关联主板ID
+   */
+  mainboardId: number;
   /** 格口类型（1小格 2中格 3大格 4超大格） */
   cellType: number;
   /** 使用状态（1空闲 2已占用） */
diff --git a/src/views/cabinet/cabinet-cell/cell-edit-modal.vue b/src/views/cabinet/cabinet-cell/cell-edit-modal.vue
index 7fbe37d..7537c76 100644
--- a/src/views/cabinet/cabinet-cell/cell-edit-modal.vue
+++ b/src/views/cabinet/cabinet-cell/cell-edit-modal.vue
@@ -9,6 +9,7 @@ import type { FormRules } from 'element-plus';
 export interface FormDTO {
   cellId?: number;
   cabinetId: number;
+  mainboardId: number;
   cellNo: number;
   pinNo: number;
   cellType: number;
@@ -27,11 +28,12 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(["update:visible", "refresh"]);
+const emit = defineEmits(["update:modelValue", "refresh"]);
 
 const formRef = ref();
 const formData = reactive<FormDTO>({
   cabinetId: null,
+  mainboardId: null,
   cellNo: null,
   pinNo: null,
   cellType: 1,
@@ -44,6 +46,10 @@ const rules = reactive<FormRules>({
     { required: true, message: "柜体ID必填", trigger: "blur" },
     { type: 'number', message: '必须为数字类型' }
   ],
+  mainboardId: [
+    { required: true, message: "主板ID必填", trigger: "blur" },
+    { type: 'number', message: '必须为数字类型' }
+  ],
   cellNo: [
     { required: true, message: "单元格号必填", trigger: "blur" },
     { type: 'number', message: '必须为数字类型' }
@@ -77,7 +83,7 @@ const handleConfirm = async () => {
 
 const closeDialog = () => {
   formRef.value.resetFields();
-  emit("update:visible", false);
+  emit('update:modelValue', false);
 };
 
 watch(() => props.row, (val) => {
@@ -88,49 +94,49 @@ watch(() => props.row, (val) => {
 </script>
 
 <template>
-  <el-dialog title="编辑单元格" :model-value="visible" width="600px" @close="closeDialog">
-    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
-      <el-form-item label="柜体ID" prop="cabinetId">
-        <el-input v-model.number="formData.cabinetId" placeholder="请输入柜体ID" />
-      </el-form-item>
+  <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
+    <el-form-item label="柜体ID" prop="cabinetId">
+      <el-input v-model.number="formData.cabinetId" placeholder="请输入柜体ID" />
+    </el-form-item>
 
-      <el-form-item label="单元格号" prop="cellNo">
-        <el-input v-model.number="formData.cellNo" placeholder="请输入单元格号" />
-      </el-form-item>
+    <el-form-item label="主板ID" prop="mainboardId">
+      <el-input v-model.number="formData.mainboardId" placeholder="请输入主板ID" />
+    </el-form-item>
 
-      <el-form-item label="针脚号" prop="pinNo">
-        <el-input v-model.number="formData.pinNo" placeholder="请输入针脚号" />
-      </el-form-item>
+    <el-form-item label="单元格号" prop="cellNo">
+      <el-input v-model.number="formData.cellNo" placeholder="请输入单元格号" />
+    </el-form-item>
 
-      <el-form-item label="单元格类型" prop="cellType">
-        <el-select v-model="formData.cellType" placeholder="请选择类型">
-          <el-option label="小格" :value="1" />
-          <el-option label="中格" :value="2" />
-          <el-option label="大格" :value="3" />
-          <el-option label="超大格" :value="4" />
-        </el-select>
-      </el-form-item>
+    <el-form-item label="针脚号" prop="pinNo">
+      <el-input v-model.number="formData.pinNo" placeholder="请输入针脚号" />
+    </el-form-item>
 
-      <el-form-item label="使用状态" prop="usageStatus">
-        <el-select v-model="formData.usageStatus" placeholder="请选择状态">
-          <el-option label="空闲" :value="1" />
-          <el-option label="已占用" :value="2" />
-        </el-select>
-      </el-form-item>
+    <el-form-item label="单元格类型" prop="cellType">
+      <el-select v-model="formData.cellType" placeholder="请选择类型">
+        <el-option label="小格" :value="1" />
+        <el-option label="中格" :value="2" />
+        <el-option label="大格" :value="3" />
+        <el-option label="超大格" :value="4" />
+      </el-select>
+    </el-form-item>
 
-      <el-form-item label="可用状态" prop="availableStatus">
-        <el-select v-model="formData.availableStatus" placeholder="请选择状态">
-          <el-option label="正常" :value="1" />
-          <el-option label="故障" :value="2" />
-        </el-select>
-      </el-form-item>
-    </el-form>
+    <el-form-item label="使用状态" prop="usageStatus">
+      <el-select v-model="formData.usageStatus" placeholder="请选择状态">
+        <el-option label="空闲" :value="1" />
+        <el-option label="已占用" :value="2" />
+      </el-select>
+    </el-form-item>
 
-    <template #footer>
-      <el-button @click="closeDialog">取消</el-button>
+    <el-form-item label="可用状态" prop="availableStatus">
+      <el-select v-model="formData.availableStatus" placeholder="请选择状态">
+        <el-option label="正常" :value="1" />
+        <el-option label="故障" :value="2" />
+      </el-select>
+    </el-form-item>
+    <el-form-item>
       <el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
-        确认
+        提交
       </el-button>
-    </template>
-  </el-dialog>
+    </el-form-item>
+  </el-form>
 </template>
\ No newline at end of file
diff --git a/src/views/cabinet/cabinet-cell/cell-form-modal.vue b/src/views/cabinet/cabinet-cell/cell-form-modal.vue
index 4d26b22..4a92242 100644
--- a/src/views/cabinet/cabinet-cell/cell-form-modal.vue
+++ b/src/views/cabinet/cabinet-cell/cell-form-modal.vue
@@ -8,6 +8,7 @@ import type { FormRules } from 'element-plus';
 
 export interface FormDTO {
   cabinetId: number;
+  mainboardId: number;
   cellNo: number;
   pinNo: number;
   cellType: number;
@@ -28,11 +29,12 @@ const props = defineProps({
 
 (window as any).cellProps = props;
 
-const emit = defineEmits(["update:visible", "refresh"]);
+const emit = defineEmits(["update:modelValue", "refresh"]);
 
 const formRef = ref();
 const formData = reactive<FormDTO>({
   cabinetId: props.initialCabinetId,
+  mainboardId: null,
   cellNo: null,
   pinNo: null,
   cellType: 1,
@@ -42,6 +44,10 @@ const formData = reactive<FormDTO>({
 
 const rules = reactive<FormRules>({
   cabinetId: [],
+  mainboardId: [
+    { required: true, message: "主板ID必填", trigger: "blur" },
+    { type: 'number', message: '必须为数字类型' }
+  ],
   cellNo: [
     { required: true, message: "单元格号必填", trigger: "blur" },
     { type: 'number', message: '必须为数字类型' }
@@ -76,52 +82,50 @@ const handleConfirm = async () => {
 
 const closeDialog = () => {
   formRef.value.resetFields();
-  emit("update:visible", false);
+  emit("update:modelValue", false);
 };
 </script>
 
 <template>
-  <el-dialog title="新增单元格" :model-value="visible" width="600px" @close="closeDialog">
-    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
+  <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
+    <el-form-item label="主板ID" prop="mainboardId">
+      <el-input v-model.number="formData.mainboardId" placeholder="请输入主板ID" />
+    </el-form-item>
 
+    <el-form-item label="单元格号" prop="cellNo">
+      <el-input v-model.number="formData.cellNo" placeholder="请输入单元格号" />
+    </el-form-item>
 
-      <el-form-item label="单元格号" prop="cellNo">
-        <el-input v-model.number="formData.cellNo" placeholder="请输入单元格号" />
-      </el-form-item>
+    <el-form-item label="针脚号" prop="pinNo">
+      <el-input v-model.number="formData.pinNo" placeholder="请输入针脚号" />
+    </el-form-item>
 
-      <el-form-item label="针脚号" prop="pinNo">
-        <el-input v-model.number="formData.pinNo" placeholder="请输入针脚号" />
-      </el-form-item>
+    <el-form-item label="单元格类型" prop="cellType">
+      <el-select v-model="formData.cellType" placeholder="请选择类型">
+        <el-option label="小格" :value="1" />
+        <el-option label="中格" :value="2" />
+        <el-option label="大格" :value="3" />
+        <el-option label="超大格" :value="4" />
+      </el-select>
+    </el-form-item>
 
-      <el-form-item label="单元格类型" prop="cellType">
-        <el-select v-model="formData.cellType" placeholder="请选择类型">
-          <el-option label="小格" :value="1" />
-          <el-option label="中格" :value="2" />
-          <el-option label="大格" :value="3" />
-          <el-option label="超大格" :value="4" />
-        </el-select>
-      </el-form-item>
+    <el-form-item label="使用状态" prop="usageStatus">
+      <el-select v-model="formData.usageStatus" placeholder="请选择状态">
+        <el-option label="空闲" :value="1" />
+        <el-option label="已占用" :value="2" />
+      </el-select>
+    </el-form-item>
 
-      <el-form-item label="使用状态" prop="usageStatus">
-        <el-select v-model="formData.usageStatus" placeholder="请选择状态">
-          <el-option label="空闲" :value="1" />
-          <el-option label="已占用" :value="2" />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item label="可用状态" prop="availableStatus">
-        <el-select v-model="formData.availableStatus" placeholder="请选择状态">
-          <el-option label="正常" :value="1" />
-          <el-option label="故障" :value="2" />
-        </el-select>
-      </el-form-item>
-    </el-form>
-
-    <template #footer>
-      <el-button @click="closeDialog">取消</el-button>
+    <el-form-item label="可用状态" prop="availableStatus">
+      <el-select v-model="formData.availableStatus" placeholder="请选择状态">
+        <el-option label="正常" :value="1" />
+        <el-option label="故障" :value="2" />
+      </el-select>
+    </el-form-item>
+    <el-form-item>
       <el-button type="primary" :icon="useRenderIcon(Confirm)" @click="handleConfirm">
-        确认
+        提交
       </el-button>
-    </template>
-  </el-dialog>
+    </el-form-item>
+  </el-form>
 </template>
\ No newline at end of file
diff --git a/src/views/cabinet/cabinet-cell/index.vue b/src/views/cabinet/cabinet-cell/index.vue
index 3ac7a02..212a70f 100644
--- a/src/views/cabinet/cabinet-cell/index.vue
+++ b/src/views/cabinet/cabinet-cell/index.vue
@@ -279,9 +279,12 @@ const switchCellType = (cellType: number) => {
           :page-sizes="[10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
           @size-change="onSizeChange" @current-change="onCurrentChange" />
       </PureTableBar>
-      <cell-form-modal v-model:visible="modalVisible" :initial-cabinet-id="searchFormParams.cabinetId"
-        @refresh="getList" />
-      <cell-edit-modal v-model:visible="editVisible" :row="currentRow" @refresh="getList" />
+      <el-drawer v-model="modalVisible" title="新增单元格" size="30%">
+        <cell-form-modal :initial-cabinet-id="searchFormParams.cabinetId" @refresh="getList" />
+      </el-drawer>
+      <el-drawer v-model="editVisible" title="编辑单元格" size="30%">
+        <cell-edit-modal :row="currentRow" @refresh="getList" />
+      </el-drawer>
     </div>
   </div>
 </template>
diff --git a/src/views/cabinet/smart-cabinet-card/detail.vue b/src/views/cabinet/smart-cabinet-card/detail.vue
index f0f54fc..46ef045 100644
--- a/src/views/cabinet/smart-cabinet-card/detail.vue
+++ b/src/views/cabinet/smart-cabinet-card/detail.vue
@@ -16,6 +16,8 @@ import Delete from "@iconify-icons/ep/delete";
 import AddFill from "@iconify-icons/ri/add-circle-line";
 import Search from "@iconify-icons/ep/search";
 import Refresh from "@iconify-icons/ep/refresh";
+import CellFormModal from "@/views/cabinet/cabinet-cell/cell-form-modal.vue";
+import CellEditModal from "@/views/cabinet/cabinet-cell/cell-edit-modal.vue";
 import { getGoodsInfo } from "@/api/shop/goods";
 import { CabinetMainboardDTO, deleteMainboard, getMainboardList, updateMainboard } from "@/api/cabinet/mainboards";
 
@@ -25,6 +27,7 @@ defineOptions({
 
 const router = useRouter();
 const route = useRoute();
+const currentCell = ref<CabinetCellDTO>();
 const cabinetInfo = ref<SmartCabinetDTO>({
   cabinetName: "",
   cabinetType: 0,
@@ -53,6 +56,8 @@ const cellPagination = ref({
 });
 const goodsConfigVisible = ref(false);
 const currentCellId = ref<number>();
+const cellFormVisible = ref(false);
+const cellEditVisible = ref(false);
 
 function handleConfigure(row: CabinetCellDTO) {
   currentCellId.value = row.cellId;
@@ -109,6 +114,11 @@ async function handleClearGoods(row: CabinetCellDTO) {
   }
 }
 
+function handleEditCell(row: CabinetCellDTO) {
+  currentCell.value = row;
+  cellEditVisible.value = true;
+}
+
 async function fetchCabinetDetail() {
   try {
     loading.value = true;
@@ -286,13 +296,19 @@ onMounted(() => {
         </el-descriptions>
 
         <div class="cell-details" v-if="activeTab === 'cells'">
+          <div style="display: flex; justify-content: flex-end; margin-bottom: 16px;">
+            <el-button type="primary" :size="'small'" :icon="useRenderIcon(AddFill)" @click="cellFormVisible = true">
+              新增格口
+            </el-button>
+          </div>
           <el-table v-loading="loading" :data="cellList" border>
             <el-table-column label="格口ID" prop="cellId" width="80" />
             <el-table-column label="格口号" prop="cellNo" width="80" />
+            <el-table-column label="针脚号" prop="pinNo" width="80" />
             <el-table-column label="商品图片" width="120">
               <template #default="{ row }">
-                <el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" fit="cover" class="rounded" width="60"
-                  height="60" />
+                <el-image :src="row.coverImg" :preview-src-list="[row.coverImg]" :preview-teleported="true"
+                  :hide-on-click-modal="true" fit="cover" class="rounded" width="60" height="60" />
               </template>
             </el-table-column>
             <el-table-column label="商品名称">
@@ -325,6 +341,10 @@ onMounted(() => {
                 <el-button type="success" link :icon="useRenderIcon(AddFill)" @click="handleConfigure(row)">
                   配置商品
                 </el-button>
+
+                <el-button type="primary" link :icon="useRenderIcon(EditPen)" @click="handleEditCell(row)">
+                  编辑格口
+                </el-button>
                 <el-button v-if="row.goodsId" type="warning" link :icon="useRenderIcon(EditPen)"
                   @click="handleStockConfig(row)">
                   配置库存
@@ -370,6 +390,12 @@ onMounted(() => {
       <el-drawer v-model="goodsConfigVisible" title="配置商品" size="50%" direction="rtl">
         <CabinetGoodsConfigModal v-model="goodsConfigVisible" :cell-id="currentCellId" @refresh="fetchCellList" />
       </el-drawer>
+      <el-drawer v-model="cellFormVisible" title="新增格口" size="30%" direction="rtl">
+        <CellFormModal v-model="cellFormVisible" :initial-cabinet-id="cabinetId" @refresh="fetchCellList" />
+      </el-drawer>
+      <el-drawer v-model="cellEditVisible" title="编辑格口" size="30%" direction="rtl">
+        <CellEditModal v-model="cellEditVisible" :row="currentCell" @refresh="fetchCellList" />
+      </el-drawer>
     </div>
   </div>
 </template>
@@ -418,7 +444,7 @@ onMounted(() => {
   }
 
   .tab-header {
-    margin-bottom: 20px;
+    margin-bottom: 0px;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/user/ab98/detail.vue b/src/views/user/ab98/detail.vue
index 927b99a..abf0617 100644
--- a/src/views/user/ab98/detail.vue
+++ b/src/views/user/ab98/detail.vue
@@ -214,7 +214,7 @@ onMounted(() => {
   }
 
   .tab-header {
-    margin-bottom: 20px;
+    margin-bottom: 0px;
   }
 
   .order-item {
diff --git a/src/views/user/qy/detail.vue b/src/views/user/qy/detail.vue
index 46c74aa..0076755 100644
--- a/src/views/user/qy/detail.vue
+++ b/src/views/user/qy/detail.vue
@@ -222,7 +222,7 @@ async function handleModifyBalance(row: QyUserDTO) {
   }
 
   .tab-header {
-    margin-bottom: 20px;
+    margin-bottom: 0px;
   }
 }
 </style>
\ No newline at end of file