重构已有前端代码

珞珈岛-项目相关文件/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
-  }
-}
 </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,20 +15,14 @@
   </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 emit = defineEmits(['close']);
+
 const isLogin = ref(true);
 
 // 切换登录/注册表单的方法
@@ -36,13 +30,10 @@ export default {
   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,12 +27,9 @@
     </div>
 </template>
 
-<script>
+<script setup lang="js" name="NoticeBoard">
 import { ref, onMounted, onUnmounted } from 'vue';
 
-export default {
-    name: 'NoticeBoard',
-    setup() {
 const images = ref([
   { src: require('@/assets/whu1.jpg'), alt: '公告图片1' },
   { src: require('@/assets/whu2.jpg'), alt: '公告图片2' },
@@ -63,24 +60,12 @@ export default {
 let interval = null;
 
 onMounted(() => {
-            // 初始化定时器
   interval = setInterval(nextImage, 5000);
 });
 
 onUnmounted(() => {
-            // 清除定时器
   clearInterval(interval);
 });
-
-        return {
-            images,
-            currentIndex,
-            nextImage,
-            prevImage,
-            goToImage,
-        };
-    },
-};
 </script>
 
 <style scoped>

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

@@ -36,12 +36,10 @@
     </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([
@@ -88,7 +86,9 @@ export default {
 ]);
 
 const filteredPosts = ref(posts.value);
+
 const router = useRouter();
+
 const selectCategory = (category) => {
   selectedCategory.value = category;
   filteredPosts.value =
@@ -100,16 +100,6 @@ export default {
 const goToPostDetail = (postId) => {
   router.push({ name: 'PostDetail', params: { id: postId } });
 };
-
-        return {
-            categories,
-            selectedCategory,
-            filteredPosts,
-            selectCategory,
-            goToPostDetail,
-        };
-    },
-};
 </script>
 
 <style scoped>

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

@@ -90,14 +90,13 @@
   </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';
+
+const emit = defineEmits(['toggleForm']);
 
-export default {
-  name: 'UserRegister',
-  setup(props, { emit }) {
 const currentType = ref('username');
 const cooldown = ref(0); // 验证码倒计时
 
@@ -121,18 +120,17 @@ export default {
 
 // 前端验证格式
 const isValidInput = computed(() => {
-      const value = registerForm.value[currentType.value]
-      if (!value) return false
-
+  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');
@@ -163,7 +161,6 @@ export default {
 // 发送验证码方法（邮箱/手机注册时使用）
 async function sendCode() {
   if (cooldown.value > 0 || !isValidInput.value) return;
-
   try {
     // TODO：发送验证码请求
     const response = await request.post(`/user/send-code`, {
@@ -198,7 +195,6 @@ export default {
   captchaUrl.value = `/user/captcha?t=${new Date().getTime()}`;
 }
 
-    //TODO:暂时跳过手机/邮箱验证码验证的注册
 // 注册
 async function register() {
   try {
@@ -260,7 +256,6 @@ export default {
         duration: 500
       });
     }
-
   }
   catch (error) {
     console.error('注册失败:', error);
@@ -273,24 +268,6 @@ export default {
   // 初始化图形验证码
   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,18 +31,15 @@
     </div>
 </template>
 
-<script>
+<script setup lang="js" name="WelcomeCalendar">
 import { ref } from 'vue';
 
-export default {
-    name: 'WelcomeCalendar',
-    setup() {
 const today = new Date();
 
 // 当前日期信息
 const currentMonthText = ref(['一', '月']); // 默认值
 const currentDay = ref(today.getDate()); // 当前日期号
-        const currentWeekday = ref('星','期','日'); // 当前星期完整文字
+const currentWeekday = ref(['星', '期', '日']); // 当前星期完整文字
 
 // 打卡状态
 const isCheckedIn = ref(false);
@@ -67,16 +64,6 @@ export default {
 
 // 初始化
 initializeDate();
-
-        return {
-            currentMonthText,
-            currentDay,
-            currentWeekday,
-            isCheckedIn,
-            checkIn,
-        };
-    },
-};
 </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 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,11 +18,13 @@
   </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,
     title: "系统维护通知",
@@ -35,17 +37,13 @@ export default {
     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,13 +57,10 @@
     </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('');
@@ -91,14 +88,14 @@ export default {
 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,
@@ -115,7 +112,7 @@ export default {
   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,
@@ -128,21 +125,6 @@ export default {
   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,12 +57,10 @@
   </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([
   {
     id: 1,
@@ -81,16 +79,11 @@ export default {
     favorites: 200,
   },
 ]);
+
 const router = useRouter();
 const goToPostDetail = (postId) => {
   router.push({ name: 'PostDetail', params: { id: postId } });
 };
-    return {
-      posts,
-       goToPostDetail,
-    };
-  },
-};
 </script>
 
 <style scoped>