diff --git a/apps/web-antd/src/views/mall/trade/order/index.vue b/apps/web-antd/src/views/mall/trade/order/index.vue
index 4661182a1..84387940e 100644
--- a/apps/web-antd/src/views/mall/trade/order/index.vue
+++ b/apps/web-antd/src/views/mall/trade/order/index.vue
@@ -2,7 +2,6 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallOrderApi } from '#/api/mall/trade/order';
 
-import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
@@ -53,35 +52,7 @@ function handleDelivery(row: MallOrderApi.Order) {
 
 /** 备注 */
 function handleRemark(row: MallOrderApi.Order) {
-  remarkOrderId.value = row.id;
-  remarkFormVisible.value = true;
-  remarkFormApi.setValues(row);
-}
-
-/** 提交备注 */
-async function handleRemarkSubmit() {
-  const { valid } = await remarkFormApi.validate();
-  if (!valid) return;
-
-  remarkFormLoading.value = true;
-  try {
-    const data =
-      (await remarkFormApi.getValues()) as MallOrderApi.RemarkRequest;
-    await updateOrderRemark(data);
-    message.success($t('ui.actionMessage.operationSuccess'));
-    remarkFormVisible.value = false;
-    handleRefresh();
-  } catch (error) {
-    console.error('更新订单备注失败:', error);
-  } finally {
-    remarkFormLoading.value = false;
-  }
-}
-
-/** 取消备注 */
-function handleRemarkCancel() {
-  remarkFormVisible.value = false;
-  remarkOrderId.value = undefined;
+  remarkFormModalApi.setData(row).open();
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -134,18 +105,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </template>
 
     <DeliveryFormModal @success="handleRefresh" />
-
-    <!-- 订单备注弹窗 -->
-    <Modal
-      v-model:open="remarkFormVisible"
-      title="订单备注"
-      :confirm-loading="remarkFormLoading"
-      @ok="handleRemarkSubmit"
-      @cancel="handleRemarkCancel"
-      width="33.33%"
-    >
-      <RemarkForm class="mx-4" />
-    </Modal>
+    <RemarkFormModal @success="handleRefresh" />
     <Grid table-title="订单列表">
       <template #expand_content="{ row }">
         <List item-layout="vertical" :data-source="row.items">
diff --git a/apps/web-ele/src/views/mall/trade/order/modules/detail.vue b/apps/web-ele/src/views/mall/trade/order/modules/detail.vue
index 5c6e531b7..fc104dd8b 100644
--- a/apps/web-ele/src/views/mall/trade/order/modules/detail.vue
+++ b/apps/web-ele/src/views/mall/trade/order/modules/detail.vue
@@ -52,7 +52,7 @@ const [OrderDeliveryFormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-const [OrderUpdateRemarkFormModal, remarkFormModalApi] = useVbenModal({
+const [RemarkFormModal, remarkFormModalApi] = useVbenModal({
   connectedComponent: OrderUpdateRemarkForm,
   destroyOnClose: true,
 });