重构已有前端代码

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/App.vue

@@ -7,17 +7,9 @@
 </template>
 
 <!-- 控制模板数据与行为 -->
-<script>
-//import MainPage from './components/MainPage.vue';
+<script setup lang="js" name="App">
 import Header from './components/Header.vue';
-import {RouterView} from 'vue-router';
-export default {
-  name: 'App',
-  components: {
-    Header,
-    RouterView
-  }
-}
+import { RouterView } from 'vue-router';
 </script>
 
 <!-- 样式部分,定义CSS样式 -->

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Login.vue

@@ -71,7 +71,7 @@
   </div>
 </template>
 
-<script setup name="UserLogin">
+<script lang="js" setup name="UserLogin">
 import { ref, computed } from 'vue';
 import request from '@/utils/request';
 import { ElMessage } from 'element-plus';

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/LoginRegisterModal.vue

@@ -15,34 +15,25 @@
   </div>
 </template>
 
-<script>
+<script setup lang="js" name="LoginRegisterModal">
 import { ref } from 'vue';
 // 导入登录和注册组件
 import UserLogin from './Login.vue';
 import UserRegister from './Register.vue';
 
-export default {
-  name: 'LoginRegisterModal',
-  components: {
-    UserLogin, // 注册登录组件
-    UserRegister // 注册注册组件
-  },
-  setup(props, { emit }) {
-    // 控制显示登录还是注册表单的状态
-    const isLogin = ref(true);
+const emit = defineEmits(['close']);
 
-    // 切换登录/注册表单的方法
-    const toggleForm = () => {
+const isLogin = ref(true);
+
+// 切换登录/注册表单的方法
+const toggleForm = () => {
   isLogin.value = !isLogin.value;
-    };
+};
 
-    return {
-      isLogin,
-      toggleForm,
-      close: () => {emit('close')} // 关闭模态框的方法
-    };
-  }
-}
+// 关闭模态框的方法
+const close = () => {
+  emit('close');
+};
 </script>
 
 <style scoped>

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/NoticeBoard.vue

@@ -27,60 +27,45 @@
     </div>
 </template>
 
-<script>
+<script setup lang="js" name="NoticeBoard">
 import { ref, onMounted, onUnmounted } from 'vue';
 
-export default {
-    name: 'NoticeBoard',
-    setup() {
-        const images = ref([
+const images = ref([
   { src: require('@/assets/whu1.jpg'), alt: '公告图片1' },
   { src: require('@/assets/whu2.jpg'), alt: '公告图片2' },
   { src: require('@/assets/whu3.jpg'), alt: '公告图片3' },
   { src: require('@/assets/whu4.jpg'), alt: '公告图片4' },
   { src: require('@/assets/whu5.jpg'), alt: '公告图片5' },       
-        ]);
+]);
 
-        const currentIndex = ref(0);
+const currentIndex = ref(0);
 
-        // 切换到下一张图片
-        const nextImage = () => {
+// 切换到下一张图片
+const nextImage = () => {
   currentIndex.value = (currentIndex.value + 1) % images.value.length;
-        };
+};
 
-        // 切换到上一张图片
-        const prevImage = () => {
+// 切换到上一张图片
+const prevImage = () => {
   currentIndex.value =
     (currentIndex.value - 1 + images.value.length) % images.value.length;
-        };
+};
 
-        // 跳转到指定图片
-        const goToImage = (index) => {
+// 跳转到指定图片
+const goToImage = (index) => {
   currentIndex.value = index;
-        };
+};
 
-        // 定时器
-        let interval = null;
+// 定时器
+let interval = null;
 
-        onMounted(() => {
-            // 初始化定时器
+onMounted(() => {
   interval = setInterval(nextImage, 5000);
-        });
+});
 
-        onUnmounted(() => {
-            // 清除定时器
+onUnmounted(() => {
   clearInterval(interval);
-        });
-
-        return {
-            images,
-            currentIndex,
-            nextImage,
-            prevImage,
-            goToImage,
-        };
-    },
-};
+});
 </script>
 
 <style scoped>

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue

@@ -36,15 +36,13 @@
     </div>
 </template>
 
-<script>
+<script setup lang="js" name="PostPage">
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-export default {
-    name: 'PostPage',
-    setup() {
-        const categories = ref(['全部', '学习', '娱乐', '二手交易']);
-        const selectedCategory = ref('全部');
-        const posts = ref([
+
+const categories = ref(['全部', '学习', '娱乐', '二手交易']);
+const selectedCategory = ref('全部');
+const posts = ref([
   {
     id: 1,
     category: '学习',
@@ -85,30 +83,22 @@ export default {
     comments: 20,
     favorites: 200,
   },
-        ]);
+]);
+
+const filteredPosts = ref(posts.value);
+
+const router = useRouter();
 
-        const filteredPosts = ref(posts.value);
-        const router = useRouter();
-        const selectCategory = (category) => {
+const selectCategory = (category) => {
   selectedCategory.value = category;
   filteredPosts.value =
     category === '全部'
       ? posts.value
       : posts.value.filter((post) => post.category === category);
-        };
+};
 
-        const goToPostDetail = (postId) => {
+const goToPostDetail = (postId) => {
   router.push({ name: 'PostDetail', params: { id: postId } });
-        };
-
-        return {
-            categories,
-            selectedCategory,
-            filteredPosts,
-            selectCategory,
-            goToPostDetail,
-        };
-    },
 };
 </script>
 

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Register.vue

@@ -90,82 +90,79 @@
   </div>
 </template>
 
-<script>
+<script setup lang="js" name="UserRegister">
 import { ref, computed, onMounted } from 'vue';
 import request from '@/utils/request';
-import {ElMessage} from 'element-plus'
+import { ElMessage } from 'element-plus';
 
-export default {
-  name: 'UserRegister',
-  setup(props, { emit }) {
-    const currentType = ref('username');
-    const cooldown = ref(0);             //验证码倒计时
+const emit = defineEmits(['toggleForm']);
 
-    // 注册方式选项配置
-    const registerTypes = [
+const currentType = ref('username');
+const cooldown = ref(0); // 验证码倒计时
+
+// 注册方式选项配置
+const registerTypes = [
   { label: '用户名注册', value: 'username' },
   { label: '邮箱注册', value: 'email' },
   { label: '手机注册', value: 'phone' }
-    ];
+];
 
-    // 注册表单数据对象
-    const registerForm = ref({
+// 注册表单数据对象
+const registerForm = ref({
   username: '',
   email: '',
   phone: '',
   password: '',
   confirmPassword: '',
-      verifyCode: '',        //验证码(邮箱/手机)
-      captcha: ''           //图形验证码
-    });
-
-    //前端验证格式
-    const isValidInput = computed(() => {
-      const value = registerForm.value[currentType.value]
-      if (!value) return false
-
-      switch(currentType.value) {
+  verifyCode: '', // 验证码(邮箱/手机)
+  captcha: '' // 图形验证码
+});
+
+// 前端验证格式
+const isValidInput = computed(() => {
+  const value = registerForm.value[currentType.value];
+  if (!value) return false;
+  switch (currentType.value) {
     case 'email':
-        return /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)
+      return /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value);
     case 'phone':
-        return /^1[3-9]\d{9}$/.test(value)
+      return /^1[3-9]\d{9}$/.test(value);
     default:
-        return false
+      return false;
   }
-    })
+});
 
-    //图形验证码URL
-    const captchaUrl = ref('/user/captcha');
+// 图形验证码URL
+const captchaUrl = ref('/user/captcha');
 
-    //输入框类型
-    const inputType = computed(() => {
-      switch(currentType.value) {
+// 输入框类型
+const inputType = computed(() => {
+  switch (currentType.value) {
     case 'email': return 'email';
     case 'phone': return 'tel';
     default: return 'text';
   }
-    });
+});
 
-    //输入框文本
-    const placeholder = computed(() => {
-      switch(currentType.value) {
+// 输入框文本
+const placeholder = computed(() => {
+  switch (currentType.value) {
     case 'email': return '请输入邮箱';
     case 'phone': return '请输入手机号';
     default: return '请输入用户名';
   }
-    });
+});
 
-    //邮箱/手机注册时显示验证码输入框
-    const showVerifyCode = computed(() => {
+// 邮箱/手机注册时显示验证码输入框
+const showVerifyCode = computed(() => {
   return ['email', 'phone'].includes(currentType.value);
-    });
+});
 
-    // 发送验证码方法（邮箱/手机注册时使用）
-    async function sendCode() {
+// 发送验证码方法（邮箱/手机注册时使用）
+async function sendCode() {
   if (cooldown.value > 0 || !isValidInput.value) return;
-
   try {
-        //TODO：发送验证码请求
+    // TODO：发送验证码请求
     const response = await request.post(`/user/send-code`, {
       type: currentType.value,
       target: registerForm.value[currentType.value]
@@ -190,17 +187,16 @@ export default {
     console.error('发送验证码失败:', error);
     alert('发送验证码失败，请稍后重试');
   }
-    }
+}
 
-    // 刷新图形验证码
-    function refreshCaptcha() {
+// 刷新图形验证码
+function refreshCaptcha() {
   // 添加时间戳防止缓存
   captchaUrl.value = `/user/captcha?t=${new Date().getTime()}`;
-    }
+}
 
-    //TODO:暂时跳过手机/邮箱验证码验证的注册
-    //注册
-    async function register() {
+// 注册
+async function register() {
   try {
     // 校验图形验证码
     const captchaResponse = await request.post('/user/verify-captcha', {
@@ -217,7 +213,7 @@ export default {
       return;
     }
 
-      //密码确认校验
+    // 密码确认校验
     if (registerForm.value.password !== registerForm.value.confirmPassword) {
       ElMessage({
         message: '两次输入的密码不一致',
@@ -251,7 +247,7 @@ export default {
         type: 'success',
         duration: 500
       });
-        //触发切换到登录表单
+      // 触发切换到登录表单
       emit('toggleForm');
     } else {
       ElMessage({
@@ -260,37 +256,18 @@ export default {
         duration: 500
       });
     }
-
   }
   catch (error) {
     console.error('注册失败:', error);
     alert(error.response?.message || '注册失败，请稍后重试');
     refreshCaptcha();
   }
-    }
+}
 
-    onMounted(() => {
+onMounted(() => {
   // 初始化图形验证码
   refreshCaptcha();
-    });
-
-    // 返回模板需要使用的数据和方法
-    return {
-      currentType,
-      registerTypes,
-      registerForm,
-      captchaUrl,
-      inputType,
-      placeholder,
-      showVerifyCode,
-      cooldown,
-      sendCode,
-      refreshCaptcha,
-      register,
-      isValidInput
-    };
-  }
-}
+});
 </script>
 
 <style scoped>

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/WelcomeCalendar.vue

@@ -31,24 +31,21 @@
     </div>
 </template>
 
-<script>
+<script setup lang="js" name="WelcomeCalendar">
 import { ref } from 'vue';
 
-export default {
-    name: 'WelcomeCalendar',
-    setup() {
-        const today = new Date();
+const today = new Date();
 
-        // 当前日期信息
-        const currentMonthText = ref(['一', '月']); // 默认值
-        const currentDay = ref(today.getDate()); // 当前日期号
-        const currentWeekday = ref('星','期','日'); // 当前星期完整文字
+// 当前日期信息
+const currentMonthText = ref(['一', '月']); // 默认值
+const currentDay = ref(today.getDate()); // 当前日期号
+const currentWeekday = ref(['星', '期', '日']); // 当前星期完整文字
 
-        // 打卡状态
-        const isCheckedIn = ref(false);
+// 打卡状态
+const isCheckedIn = ref(false);
 
-        // 初始化日期信息
-        const initializeDate = () => {
+// 初始化日期信息
+const initializeDate = () => {
     const months = [
         '一月', '二月', '三月', '四月', '五月', '六月',
         '七月', '八月', '九月', '十月', '十一月', '十二月',
@@ -58,25 +55,15 @@ export default {
     currentMonthText.value = months[today.getMonth()].split('');
     currentDay.value = today.getDate();
     currentWeekday.value = weekdays[today.getDay()].split('');
-        };
+};
 
-        // 打卡功能
-        const checkIn = () => {
+// 打卡功能
+const checkIn = () => {
     isCheckedIn.value = true;
-        };
-
-        // 初始化
-        initializeDate();
-
-        return {
-            currentMonthText,
-            currentDay,
-            currentWeekday,
-            isCheckedIn,
-            checkIn,
-        };
-    },
 };
+
+// 初始化
+initializeDate();
 </script>
 
 <style scoped>

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/FeedBack.vue

@@ -95,7 +95,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang ="js" name="FeedBack">
 import { ref, reactive } from 'vue'
 import { ElMessage } from 'element-plus'
 

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/MainPage.vue

@@ -15,21 +15,12 @@
     </div>
 </template>
 
-<script>
+<script setup lang="js" name="MainPage">
 import NoticeBoard from '@/components/NoticeBoard.vue';
 import WelcomeCalendar from '@/components/WelcomeCalendar.vue';
 import PostPage from '@/components/PostPage.vue';
-//import UserPage from './UserPage.vue';
+// import UserPage from './UserPage.vue';
 // import PostDetail from './PostDetail.vue';
-export default {
-    components: {
-        NoticeBoard,
-        WelcomeCalendar,
-        PostPage,
-        //UserPage,
-        // PostDetail
-    }
-};
 </script>
 
 <style scoped>

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/NotificationDetail.vue

@@ -19,40 +19,39 @@
   </div>
 </template>
 
-<script>
+<script setup lang="js" name="NotificationDetail">
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const currentNotice = ref(null);
+const errorMessage = ref('');
+
+// 模拟异步获取通知详情
 const mockFetchNotice = (id) => {
   return new Promise((resolve) => {
     setTimeout(() => {
       const notices = [
-        { id: 1, title: "系统维护通知", /* 其他字段 */ },
-        { id: 2, title: "新功能上线", /* 其他字段 */ }
-      ]
-      resolve(notices.find(n => n.id === Number(id)))
-    }, 500)
-  })
-}
+        { id: 1, title: "系统维护通知", time: "2024-05-01 10:00", content: "系统将于今晚23:00-24:00进行维护，请提前保存数据。" },
+        { id: 2, title: "新功能上线", time: "2024-05-10 09:00", content: "我们上线了新功能，欢迎体验！" }
+      ];
+      resolve(notices.find(n => n.id === Number(id)));
+    }, 500);
+  });
+};
 
-export default {
-  props: ['id'], // 通过路由props接收参数
-  data() {
-    return {
-      currentNotice: null,
-      errorMessage: ''
-    }
-  },
-  async created() {
+onMounted(async () => {
   try {
-      const data = await mockFetchNotice(this.id)
+    const data = await mockFetchNotice(route.params.id);
     if (data) {
-        this.currentNotice = data
+      currentNotice.value = data;
     } else {
-        this.errorMessage = '通知不存在'
+      errorMessage.value = '通知不存在';
     }
   } catch (error) {
-      this.errorMessage = '加载失败，请稍后重试'
-    }
+    errorMessage.value = '加载失败，请稍后重试';
   }
-}
+});
 </script>
 
 <style scoped>

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/NotificationList.vue

@@ -18,34 +18,32 @@
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      notifications: [
+<script setup lang="js" name="NotificationList">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const notifications = ref([
   {
-          id:1,
+    id: 1,
     title: "系统维护通知",
     time: "2023-08-20 14:00",
     content: "服务器将于今晚24:00进行例行维护，预计持续2小时"
   },
   {
-          id:2,
+    id: 2,
     title: "新功能上线",
     time: "2023-08-19 09:30",
     content: "消息中心新增批量处理功能，欢迎体验"
   }
-      ]
-    }
-  },
-  methods: {
-    viewDetail(noticeId) {
-      this.$router.push({
+]);
+
+function viewDetail(noticeId) {
+  router.push({
     name: 'NotificationDetail',
-        params: { id: noticeId } // 传递动态参数
-      })
-    }
-  }
+    params: { id: noticeId }
+  });
 }
 </script>
 

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostDetail.vue

@@ -57,92 +57,74 @@
     </div>
 </template>
 
-<script>
+<script setup lang="js" name="PostDetail">
 import { ref, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 
-export default {
-    name: 'PostDetail',
-    setup() {
-        const route = useRoute();
-        const postId = ref(route.params.id);
-        const postTitle = ref('');
-        const postContent = ref('');
-        const newComment = ref('');
-
-        // 作者信息
-        const author = ref({
+const route = useRoute();
+const postId = ref(route.params.id);
+const postTitle = ref('');
+const postContent = ref('');
+const newComment = ref('');
+
+// 作者信息
+const author = ref({
   avatar: require('@/assets/default-avatar/boy_4.png'),
   name: '珈人1号',
   followers: 1234,
-        });
+});
 
-        // 帖子统计信息
-        const postStats = ref({
+// 帖子统计信息
+const postStats = ref({
   likes: 1200,
   favorites: 300,
   comments: 45,
-        });
+});
 
-        // 发布时间
-        const postTime = ref('2025年4月20日 14:30');
+// 发布时间
+const postTime = ref('2025年4月20日 14:30');
 
-        // 评论数据
-        const comments = ref([
+// 评论数据
+const comments = ref([
   {
     avatar: require('@/assets/default-avatar/girl_1.png'),
-                name: '评论者1', // 新增评论者名字
+    name: '评论者1',
     text: '这是第一条评论。',
     time: '2025年4月20日 15:00',
     likes: 10,
   },
   {
     avatar: require('@/assets/default-avatar/boy_2.png'),
-                name: '评论者2', // 新增评论者名字
+    name: '评论者2',
     text: '这是第二条评论。',
     time: '2025年4月20日 15:30',
     likes: 5,
   },
-        ]);
+]);
 
-        const isFollowing = ref(false);
+const isFollowing = ref(false);
 
-        const toggleFollow = () => {
+const toggleFollow = () => {
   isFollowing.value = !isFollowing.value;
-        };
+};
 
-        const sendComment = () => {
+const sendComment = () => {
   if (newComment.value.trim()) {
     comments.value.push({
       avatar: require('@/assets/default-avatar/boy_1.png'),
-                    name: '新评论者', // 评论者名字
+      name: '新评论者',
       text: newComment.value,
       time: new Date().toLocaleString(),
       likes: 0,
     });
     newComment.value = '';
   }
-        };
+};
 
-        onMounted(() => {
+onMounted(() => {
   postTitle.value = `帖子标题 ${postId.value}`;
   postContent.value = `这是帖子 ${postId.value} 的内容，展示帖子的详细信息。`;
-        });
-
-        return {
-            postTitle,
-            postContent,
-            comments,
-            newComment,
-            sendComment,
-            author,
-            postStats,
-            postTime,
-            isFollowing,
-            toggleFollow,
-        };
-    },
-};
+});
 </script>
 
 <style scoped>

珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/UserPage.vue

@@ -57,15 +57,13 @@
   </div>
 </template>
 
-<script>
+<script setup lang="js" name="UserPage">
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-export default {
-  name: 'UserPage',
-  setup() {
-    const posts = ref([
+
+const posts = ref([
   {
-        id:1,
+    id: 1,
     title: '雷霆连续两场或20分钟逆转什么水平',
     summary: '今天保罗带领雷霆完成逆转',
     likes: 1200,
@@ -73,23 +71,18 @@ export default {
     favorites: 100,
   },
   {
-        id:2,
+    id: 2,
     title: '一个普通人需要多大努力才能考上985',
     summary: 'mmmmmmmm',
     likes: 2200,
     comments: 20,
     favorites: 200,
   },
-    ]);
-        const router = useRouter();
-        const goToPostDetail = (postId) => {
+]);
+
+const router = useRouter();
+const goToPostDetail = (postId) => {
   router.push({ name: 'PostDetail', params: { id: postId } });
-        };
-    return {
-      posts,
-       goToPostDetail,
-    };
-  },
 };
 </script>