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 = () => {

src/pages/login/index.tsx

@@ -1,8 +1,9 @@
-import { defineComponent, reactive, ref } from 'vue';
+import { defineComponent, reactive } from 'vue';
+import { useRoute } from 'vue-router';
 import { Button, Checkbox, Form, FormItem, Input, message } from 'ant-design-vue';
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
 import { auth } from '@/hooks/useAuth';
-import { useEffect } from '@/hooks/useEffect';
+import { useEffect, useState } from '@/hooks';
 import { useUserStore } from '@/stores/userStore';
 import styles from './index.module.less';
 
@@ -14,8 +15,9 @@ interface LoginForm {
 export default defineComponent({
   name: 'LoginPage',
   setup() {
-    const loading = ref(false);
-    const rememberMe = ref(false);
+    const route = useRoute();
+    const [loading, setLoading] = useState(false);
+    const [rememberMe, setRememberMe] = useState(false);
 
     const form = reactive<LoginForm>({
       username: '',
@@ -29,7 +31,7 @@ export default defineComponent({
           const data = JSON.parse(saved);
           form.username = data.username || '';
           form.password = data.password || '';
-          rememberMe.value = true;
+          setRememberMe(true);
         } catch {
           localStorage.removeItem('cpms_login_remember');
         }
@@ -47,7 +49,7 @@ export default defineComponent({
         return;
       }
 
-      loading.value = true;
+      setLoading(true);
 
       try {
         await new Promise((r) => setTimeout(r, 600));
@@ -57,7 +59,10 @@ export default defineComponent({
         const { setUser } = useUserStore();
         setUser({ phone: form.username, nickname: form.username, token });
 
-        await auth.login(token);
+        const redirect = Array.isArray(route.query.redirect)
+          ? route.query.redirect[0]
+          : route.query.redirect;
+        await auth.login(token, redirect || undefined);
         message.success('登录成功');
 
         if (rememberMe.value) {
@@ -74,7 +79,7 @@ export default defineComponent({
       } catch (err) {
         message.error('登录失败,请重试');
       } finally {
-        loading.value = false;
+        setLoading(false);
       }
     };
 

src/pages/system/users/components/UserFormModal.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, ref, reactive } from 'vue';
-import { useEffect } from '@/hooks';
+import { useEffect, useState } from '@/hooks';
 import { Modal, Form, Input, Select, Button } from 'ant-design-vue';
 import {
   ROLE_FORM_OPTIONS,
@@ -43,14 +43,14 @@ export default defineComponent({
     const formData = reactive(getDefaultForm());
 
     /** 编辑模式下是否处于"重置密码"状态 */
-    const isResetting = ref(false);
+    const [isResetting, setIsResetting] = useState(false);
 
     /** 根据 record 初始化表单 */
     const initFormFromRecord = (record: any) => {
       const fresh = getDefaultForm();
       if (!record) {
         Object.assign(formData, fresh);
-        isResetting.value = false;
+        setIsResetting(false);
         return;
       }
       Object.assign(formData, {
@@ -59,21 +59,21 @@ export default defineComponent({
         phone: record.phone || '',
         role: record.role || '',
       });
-      isResetting.value = false;
+      setIsResetting(false);
     };
 
     /** 监听 visible 变化重置表单 */
     useEffect(() => {
       if (props.visible) {
         initFormFromRecord(props.record);
-        isResetting.value = false;
+        setIsResetting(false);
         setTimeout(() => formRef.value?.clearValidate(), 0);
       }
     }, [() => props.visible]);
 
     /** 点击"重置密码" */
     const handleResetPassword = () => {
-      isResetting.value = true;
+      setIsResetting(true);
       formData.password = '';
       formData.confirmPassword = '';
     };