feat(mallOrder): enhance order and refund item remark functionality

- Implemented popover for remark history in both order and refund item components.
- Added `handleShowRemark` method to fetch remarks dynamically on hover.
- Refactored code to improve user interaction with remark management.

src/views/mallOrder/all/components/order-item.vue

@@ -42,12 +42,26 @@
                     "
                 />
             </span>
-            <span
-                class="flag-icon cursor-pointer"
-                @click="$emit('add-remark', order)"
-                ><el-icon size="23" :color="order.remarkLabel">
-                    <Flag /> </el-icon
-            ></span>
+            <el-popover
+                trigger="hover"
+                width="240px"
+                @show="handleShowRemark"
+            >
+                <template #reference>
+                    <span
+                        class="flag-icon cursor-pointer"
+                        @click="$emit('add-remark', order)"
+                    >
+                        <el-icon size="23" :color="order.remarkLabel">
+                            <Flag />
+                        </el-icon>
+                    </span>
+                </template>
+                <order-timeline
+                    title="备注历史记录"
+                    ref="remarkPopoverRef"
+                />
+            </el-popover>
         </div>
 
         <!-- Order Body -->
@@ -193,9 +207,11 @@
 </template>
 
 <script setup>
+    import { nextTick, ref } from 'vue';
     import { Flag, CopyDocument } from '@element-plus/icons-vue';
     import { EleMessage } from 'ele-admin-plus/es';
     import { useClipboard } from '@vueuse/core';
+    import OrderTimeline from './order-timeline.vue';
     import wxIcon from '@/assets/wx.png';
     import alipayIcon from '@/assets/alipay.png';
     import { formatPhone } from '@/utils/common';
@@ -218,6 +234,20 @@
     ]);
 
     const { copy } = useClipboard();
+    const remarkPopoverRef = ref(null);
+
+    const handleShowRemark = () => {
+        const load = (retry = 0) => {
+            if (remarkPopoverRef.value) {
+                remarkPopoverRef.value.getRemarks(props.order.orderId);
+                return;
+            }
+            if (retry < 5) {
+                nextTick(() => load(retry + 1));
+            }
+        };
+        nextTick(() => load());
+    };
 
     const handleCopy = async (text) => {
         try {

src/views/mallOrder/refund/components/refund-item.vue

@@ -18,17 +18,29 @@
             <span class="mr-4 text-black-600" v-if="item.cancelStatus == 2">
                 <el-tag type="info" size="small">已撤销</el-tag>
             </span>
-            <span
-                class="flag-icon cursor-pointer"
-                @click="$emit('add-remark', item)"
+            <el-popover
+                trigger="hover"
+                width="240px"
+                @show="handleShowRemark"
             >
-                <el-icon
-                    size="23"
-                    :color="item.remarkLabel || '#777777'"
-                >
-                    <Flag />
-                </el-icon>
-            </span>
+                <template #reference>
+                    <span
+                        class="flag-icon cursor-pointer"
+                        @click="$emit('add-remark', item)"
+                    >
+                        <el-icon
+                            size="23"
+                            :color="item.remarkLabel || '#777777'"
+                        >
+                            <Flag />
+                        </el-icon>
+                    </span>
+                </template>
+                <refund-remark-timeline
+                    title="备注历史记录"
+                    ref="remarkPopoverRef"
+                />
+            </el-popover>
         </div>
 
         <!-- Body -->
@@ -179,9 +191,11 @@
 </template>
 
 <script setup>
+    import { nextTick, ref } from 'vue';
     import { CopyDocument, Flag } from '@element-plus/icons-vue';
     import { EleMessage } from 'ele-admin-plus/es';
     import { useClipboard } from '@vueuse/core';
+    import RefundRemarkTimeline from './refund-remark-timeline.vue';
 
     const props = defineProps({
         item: {
@@ -200,6 +214,20 @@
     ]);
 
     const { copy } = useClipboard();
+    const remarkPopoverRef = ref(null);
+
+    const handleShowRemark = () => {
+        const load = (retry = 0) => {
+            if (remarkPopoverRef.value) {
+                remarkPopoverRef.value.getRemarks(props.item.refundOrderId);
+                return;
+            }
+            if (retry < 5) {
+                nextTick(() => load(retry + 1));
+            }
+        };
+        nextTick(() => load());
+    };
 
     const handleCopy = async (text) => {
         try {