fix: ref写法优化 路由跳转逻辑优化 部分样式优化

src/pages/events/banner/components/BannerFormModal.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, ref, reactive } from 'vue';
-import { useEffect } from '@/hooks';
+import { useEffect, useState } from '@/hooks';
 import {
   Modal,
   Form,
@@ -82,9 +82,9 @@ export default defineComponent({
     const formData = reactive(getDefaultForm());
 
     /** 裁剪弹窗状态 */
-    const cropperVisible = ref(false);
+    const [cropperVisible, setCropperVisible] = useState(false);
     /** 待裁剪图片的本地预览 URL */
-    const uploadImageUrl = ref('');
+    const [uploadImageUrl, setUploadImageUrl] = useState('');
 
     /** 根据 record 初始化表单 */
     const initFormFromRecord = (record: any) => {
@@ -124,8 +124,8 @@ export default defineComponent({
     useEffect(() => {
       if (props.visible) {
         initFormFromRecord(props.record);
-        cropperVisible.value = false;
-        uploadImageUrl.value = '';
+        setCropperVisible(false);
+        setUploadImageUrl('');
         setTimeout(() => formRef.value?.clearValidate(), 0);
       }
     }, [() => props.visible]);
@@ -167,13 +167,13 @@ export default defineComponent({
       }
 
       // 生成本地预览 URL，打开裁剪弹窗
-      uploadImageUrl.value = URL.createObjectURL(file);
-      cropperVisible.value = true;
+      setUploadImageUrl(URL.createObjectURL(file));
+      setCropperVisible(true);
     };
 
     /** 裁剪确认回调：将裁剪后的图片上传到 OSS */
     const handleCropConfirm = async (dataUrl: string) => {
-      cropperVisible.value = false;
+      setCropperVisible(false);
 
       // 释放旧的本地预览
       if (formData.imageUrl && formData.imageUrl.startsWith('blob:')) {
@@ -206,16 +206,16 @@ export default defineComponent({
       if (uploadImageUrl.value) {
         URL.revokeObjectURL(uploadImageUrl.value);
       }
-      uploadImageUrl.value = '';
+      setUploadImageUrl('');
     };
 
     /** 裁剪弹窗取消 */
     const onCropperCancel = () => {
-      cropperVisible.value = false;
+      setCropperVisible(false);
       if (uploadImageUrl.value) {
         URL.revokeObjectURL(uploadImageUrl.value);
       }
-      uploadImageUrl.value = '';
+      setUploadImageUrl('');
     };
 
     /** 删除已上传图片 */

src/pages/events/orders/components/OrderDetailModal.tsx

@@ -1,6 +1,7 @@
-import { defineComponent, ref, computed } from 'vue';
+import { defineComponent, computed } from 'vue';
 import { Modal, Table, Button, Pagination, Image, Space } from 'ant-design-vue';
 import { StatusTag, type StatusTagTone } from '@/components';
+import { useState } from '@/hooks';
 import styles from './OrderDetailModal.module.less';
 
 interface OrderDetailModalProps {
@@ -84,8 +85,8 @@ export default defineComponent({
     onReRefund: { type: Function, required: true },
   },
   setup(props: OrderDetailModalProps) {
-    const refundPage = ref<number>(1);
-    const refundPageSize = ref<number>(2);
+    const [refundPage, setRefundPage] = useState(1);
+    const [refundPageSize, setRefundPageSize] = useState(2);
 
     /** 退款记录 */
     const refundRecords = computed<any[]>(() => props.record?.refundRecords || []);
@@ -105,8 +106,8 @@ export default defineComponent({
     );
 
     const handleRefundPageChange = (page: number, pageSize: number) => {
-      refundPage.value = page;
-      refundPageSize.value = pageSize;
+      setRefundPage(page);
+      setRefundPageSize(pageSize);
     };
 
     const handleConfirm = () => {