diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/App.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/App.vue
index 16ab855a..935e0d44 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/App.vue
+++ b/珞珈岛-项目相关文件/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样式 -->
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Login.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Login.vue
index b26f98a9..04a03ffb 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Login.vue
+++ b/珞珈岛-项目相关文件/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';
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/LoginRegisterModal.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/LoginRegisterModal.vue
index 6e225114..ed4534ea 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/LoginRegisterModal.vue
+++ b/珞珈岛-项目相关文件/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 = () => {
-      isLogin.value = !isLogin.value;
-    };
+const isLogin = ref(true);
 
-    return {
-      isLogin,
-      toggleForm,
-      close: () => {emit('close')} // 关闭模态框的方法
-    };
-  }
-}
+// 切换登录/注册表单的方法
+const toggleForm = () => {
+  isLogin.value = !isLogin.value;
+};
+
+// 关闭模态框的方法
+const close = () => {
+  emit('close');
+};
 </script>
 
 <style scoped>
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/NoticeBoard.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/NoticeBoard.vue
index 2c83b867..0c06a74a 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/NoticeBoard.vue
+++ b/珞珈岛-项目相关文件/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([
-            { 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 nextImage = () => {
-            currentIndex.value = (currentIndex.value + 1) % images.value.length;
-        };
-
-        // 切换到上一张图片
-        const prevImage = () => {
-            currentIndex.value =
-                (currentIndex.value - 1 + images.value.length) % images.value.length;
-        };
-
-        // 跳转到指定图片
-        const goToImage = (index) => {
-            currentIndex.value = index;
-        };
-
-        // 定时器
-        let interval = null;
-
-        onMounted(() => {
-            // 初始化定时器
-            interval = setInterval(nextImage, 5000);
-        });
-
-        onUnmounted(() => {
-            // 清除定时器
-            clearInterval(interval);
-        });
-
-        return {
-            images,
-            currentIndex,
-            nextImage,
-            prevImage,
-            goToImage,
-        };
-    },
+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 nextImage = () => {
+  currentIndex.value = (currentIndex.value + 1) % images.value.length;
 };
+
+// 切换到上一张图片
+const prevImage = () => {
+  currentIndex.value =
+    (currentIndex.value - 1 + images.value.length) % images.value.length;
+};
+
+// 跳转到指定图片
+const goToImage = (index) => {
+  currentIndex.value = index;
+};
+
+// 定时器
+let interval = null;
+
+onMounted(() => {
+  interval = setInterval(nextImage, 5000);
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
 </script>
 
 <style scoped>
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue
index 015f57f2..bc13b47a 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/PostPage.vue
@@ -36,79 +36,69 @@
     </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([
-            {
-                id: 1,
-                category: '学习',
-                title: '如何高效学习？',
-                summary: '分享一些学习技巧...',
-                avatar: require('@/assets/default-avatar/boy_1.png'),
-                likes: 1200,
-                comments: 10,
-                favorites: 100,
-            },
-            {
-                id: 2,
-                category: '娱乐',
-                title: '最近的热门电影推荐',
-                summary: '看看这些电影吧...',
-                avatar: require('@/assets/default-avatar/girl_1.png'),
-                likes: 800,
-                comments: 5,
-                favorites: 50,
-            },
-            {
-                id: 3,
-                category: '二手交易',
-                title: '出售二手书籍',
-                summary: '价格优惠，欢迎咨询...',
-                avatar: require('@/assets/default-avatar/boy_2.png'),
-                likes: 300,
-                comments: 2,
-                favorites: 20,
-            },
-            {
-                id: 4,
-                category: '学习',
-                title: '考研经验分享',
-                summary: '考研路上的一些心得...',
-                avatar: require('@/assets/default-avatar/girl_3.png'),
-                likes: 1500,
-                comments: 20,
-                favorites: 200,
-            },
-        ]);
-
-        const filteredPosts = ref(posts.value);
-        const router = useRouter();
-        const selectCategory = (category) => {
-            selectedCategory.value = category;
-            filteredPosts.value =
-                category === '全部'
-                    ? posts.value
-                    : posts.value.filter((post) => post.category === category);
-        };
-
-        const goToPostDetail = (postId) => {
-            router.push({ name: 'PostDetail', params: { id: postId } });
-        };
-
-        return {
-            categories,
-            selectedCategory,
-            filteredPosts,
-            selectCategory,
-            goToPostDetail,
-        };
-    },
+
+const categories = ref(['全部', '学习', '娱乐', '二手交易']);
+const selectedCategory = ref('全部');
+const posts = ref([
+  {
+    id: 1,
+    category: '学习',
+    title: '如何高效学习？',
+    summary: '分享一些学习技巧...',
+    avatar: require('@/assets/default-avatar/boy_1.png'),
+    likes: 1200,
+    comments: 10,
+    favorites: 100,
+  },
+  {
+    id: 2,
+    category: '娱乐',
+    title: '最近的热门电影推荐',
+    summary: '看看这些电影吧...',
+    avatar: require('@/assets/default-avatar/girl_1.png'),
+    likes: 800,
+    comments: 5,
+    favorites: 50,
+  },
+  {
+    id: 3,
+    category: '二手交易',
+    title: '出售二手书籍',
+    summary: '价格优惠，欢迎咨询...',
+    avatar: require('@/assets/default-avatar/boy_2.png'),
+    likes: 300,
+    comments: 2,
+    favorites: 20,
+  },
+  {
+    id: 4,
+    category: '学习',
+    title: '考研经验分享',
+    summary: '考研路上的一些心得...',
+    avatar: require('@/assets/default-avatar/girl_3.png'),
+    likes: 1500,
+    comments: 20,
+    favorites: 200,
+  },
+]);
+
+const filteredPosts = ref(posts.value);
+
+const router = useRouter();
+
+const selectCategory = (category) => {
+  selectedCategory.value = category;
+  filteredPosts.value =
+    category === '全部'
+      ? posts.value
+      : posts.value.filter((post) => post.category === category);
+};
+
+const goToPostDetail = (postId) => {
+  router.push({ name: 'PostDetail', params: { id: postId } });
 };
 </script>
 
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Register.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Register.vue
index 1e5ef4bc..74453849 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Register.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/Register.vue
@@ -90,207 +90,184 @@
   </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'
-
-export default {
-  name: 'UserRegister',
-  setup(props, { emit }) {
-    const currentType = ref('username');
-    const cooldown = ref(0);             //验证码倒计时
-
-    // 注册方式选项配置
-    const registerTypes = [
-      { label: '用户名注册', value: 'username' },
-      { label: '邮箱注册', value: 'email' },
-      { label: '手机注册', value: 'phone' }
-    ];
-
-    // 注册表单数据对象
-    const registerForm = ref({
-      username: '',
-      email: '',
-      phone: '',
-      password: '',
-      confirmPassword: '',
-      verifyCode: '',        //验证码(邮箱/手机)
-      captcha: ''           //图形验证码
-    });
-
-    //前端验证格式
-    const isValidInput = computed(() => {
-      const value = registerForm.value[currentType.value]
-      if (!value) return false
+import { ElMessage } from 'element-plus';
+
+const emit = defineEmits(['toggleForm']);
+
+const currentType = ref('username');
+const cooldown = ref(0); // 验证码倒计时
+
+// 注册方式选项配置
+const registerTypes = [
+  { label: '用户名注册', value: 'username' },
+  { label: '邮箱注册', value: 'email' },
+  { label: '手机注册', value: 'phone' }
+];
+
+// 注册表单数据对象
+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) {
+    case 'email':
+      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);
+    default:
+      return false;
+  }
+});
 
-      switch(currentType.value) {
-      case 'email':
-        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)
-      default:
-        return false
-      }
-    })
-
-    //图形验证码URL
-    const captchaUrl = ref('/user/captcha');
-
-    //输入框类型
-    const inputType = computed(() => {
-      switch(currentType.value) {
-        case 'email': return 'email';
-        case 'phone': return 'tel';
-        default: return 'text';
-      }
-    });
+// 图形验证码URL
+const captchaUrl = ref('/user/captcha');
 
-    //输入框文本
-    const placeholder = computed(() => {
-      switch(currentType.value) {
-        case 'email': return '请输入邮箱';
-        case 'phone': return '请输入手机号';
-        default: return '请输入用户名';
-      }
+// 输入框类型
+const inputType = computed(() => {
+  switch (currentType.value) {
+    case 'email': return 'email';
+    case 'phone': return 'tel';
+    default: return 'text';
+  }
+});
+
+// 输入框文本
+const placeholder = computed(() => {
+  switch (currentType.value) {
+    case 'email': return '请输入邮箱';
+    case 'phone': return '请输入手机号';
+    default: return '请输入用户名';
+  }
+});
+
+// 邮箱/手机注册时显示验证码输入框
+const showVerifyCode = computed(() => {
+  return ['email', 'phone'].includes(currentType.value);
+});
+
+// 发送验证码方法（邮箱/手机注册时使用）
+async function sendCode() {
+  if (cooldown.value > 0 || !isValidInput.value) return;
+  try {
+    // TODO：发送验证码请求
+    const response = await request.post(`/user/send-code`, {
+      type: currentType.value,
+      target: registerForm.value[currentType.value]
     });
 
-    //邮箱/手机注册时显示验证码输入框
-    const showVerifyCode = computed(() => {
-      return ['email', 'phone'].includes(currentType.value);
-    });
+    if (response.success) {
+      ElMessage({
+        message: '验证码已发送',
+        type: 'info'
+      });
 
-    // 发送验证码方法（邮箱/手机注册时使用）
-    async function sendCode() {
-      if (cooldown.value > 0 || !isValidInput.value) return;
-
-      try {
-        //TODO：发送验证码请求
-        const response = await request.post(`/user/send-code`, {
-          type: currentType.value,
-          target: registerForm.value[currentType.value]
-        });
-
-        if (response.success) {
-          ElMessage({
-            message: '验证码已发送',
-            type: 'info'
-          });
-
-          // 开始60秒倒计时
-          cooldown.value = 60;
-          const timer = setInterval(() => {
-            cooldown.value--;
-            if (cooldown.value <= 0) {
-              clearInterval(timer);
-            }
-          }, 1000);
+      // 开始60秒倒计时
+      cooldown.value = 60;
+      const timer = setInterval(() => {
+        cooldown.value--;
+        if (cooldown.value <= 0) {
+          clearInterval(timer);
         }
-      } catch (error) {
-        console.error('发送验证码失败:', error);
-        alert('发送验证码失败，请稍后重试');
-      }
+      }, 1000);
     }
+  } catch (error) {
+    console.error('发送验证码失败:', error);
+    alert('发送验证码失败，请稍后重试');
+  }
+}
+
+// 刷新图形验证码
+function refreshCaptcha() {
+  // 添加时间戳防止缓存
+  captchaUrl.value = `/user/captcha?t=${new Date().getTime()}`;
+}
+
+// 注册
+async function register() {
+  try {
+    // 校验图形验证码
+    const captchaResponse = await request.post('/user/verify-captcha', {
+      captcha: registerForm.value.captcha
+    });
 
-    // 刷新图形验证码
-    function refreshCaptcha() {
-      // 添加时间戳防止缓存
-      captchaUrl.value = `/user/captcha?t=${new Date().getTime()}`;
+    if (captchaResponse.code !== 200) {
+      ElMessage({
+        message: captchaResponse.msg,
+        type: 'error',
+        duration: 500
+      });
+      refreshCaptcha();
+      return;
     }
 
-    //TODO:暂时跳过手机/邮箱验证码验证的注册
-    //注册
-    async function register() {
-      try {
-      // 校验图形验证码
-      const captchaResponse = await request.post('/user/verify-captcha', {
-        captcha: registerForm.value.captcha
+    // 密码确认校验
+    if (registerForm.value.password !== registerForm.value.confirmPassword) {
+      ElMessage({
+        message: '两次输入的密码不一致',
+        type: 'error',
+        duration: 500
       });
+      return;
+    }
+
+    // 构建注册数据
+    const registerData = {
+      username: registerForm.value.username,
+      password: registerForm.value.password
+    };
 
-      if (captchaResponse.code !== 200) {
-        ElMessage({
-          message: captchaResponse.msg,
-          type: 'error',
-          duration: 500
-        });
-        refreshCaptcha();
-        return;
-      }
-
-      //密码确认校验
-      if (registerForm.value.password !== registerForm.value.confirmPassword) {
-        ElMessage({
-          message: '两次输入的密码不一致',
-          type: 'error',
-          duration: 500
-        });
-        return;
-      }
-
-      // 构建注册数据
-      const registerData = {
-        username: registerForm.value.username,
-        password: registerForm.value.password
-      };
-
-      // 根据注册类型添加对应字段
-      switch (currentType.value) {
-        case 'email':
-          registerData.email = registerForm.value.email;
-          break;
-        case 'phone':
-          registerData.phone = registerForm.value.phone;
-          break;
-      }
-
-      const response = await request.post('/user/register', registerData);
-
-      if (response.code === 200) {
-          ElMessage({
-            message: '注册成功',
-            type: 'success',
-            duration: 500
-          });
-        //触发切换到登录表单
-        emit('toggleForm');
-      } else {
-          ElMessage({
-            message: '注册失败，请稍后重试',
-            type: 'error',
-            duration: 500
-          });
-      }
-
-      }
-      catch (error) {
-        console.error('注册失败:', error);
-        alert(error.response?.message || '注册失败，请稍后重试');
-        refreshCaptcha();
-      }
+    // 根据注册类型添加对应字段
+    switch (currentType.value) {
+      case 'email':
+        registerData.email = registerForm.value.email;
+        break;
+      case 'phone':
+        registerData.phone = registerForm.value.phone;
+        break;
     }
 
-    onMounted(() => {
-      // 初始化图形验证码
-      refreshCaptcha();
-    });
+    const response = await request.post('/user/register', registerData);
 
-    // 返回模板需要使用的数据和方法
-    return {
-      currentType,
-      registerTypes,
-      registerForm,
-      captchaUrl,
-      inputType,
-      placeholder,
-      showVerifyCode,
-      cooldown,
-      sendCode,
-      refreshCaptcha,
-      register,
-      isValidInput
-    };
+    if (response.code === 200) {
+      ElMessage({
+        message: '注册成功',
+        type: 'success',
+        duration: 500
+      });
+      // 触发切换到登录表单
+      emit('toggleForm');
+    } else {
+      ElMessage({
+        message: '注册失败，请稍后重试',
+        type: 'error',
+        duration: 500
+      });
+    }
+  }
+  catch (error) {
+    console.error('注册失败:', error);
+    alert(error.response?.message || '注册失败，请稍后重试');
+    refreshCaptcha();
   }
 }
+
+onMounted(() => {
+  // 初始化图形验证码
+  refreshCaptcha();
+});
 </script>
 
 <style scoped>
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/WelcomeCalendar.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/WelcomeCalendar.vue
index 8ce04cd4..844b858a 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/WelcomeCalendar.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/components/WelcomeCalendar.vue
@@ -31,52 +31,39 @@
     </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 isCheckedIn = ref(false);
-
-        // 初始化日期信息
-        const initializeDate = () => {
-            const months = [
-                '一月', '二月', '三月', '四月', '五月', '六月',
-                '七月', '八月', '九月', '十月', '十一月', '十二月',
-            ];
-            const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
-
-            currentMonthText.value = months[today.getMonth()].split('');
-            currentDay.value = today.getDate();
-            currentWeekday.value = weekdays[today.getDay()].split('');
-        };
-
-        // 打卡功能
-        const checkIn = () => {
-            isCheckedIn.value = true;
-        };
-
-        // 初始化
-        initializeDate();
-
-        return {
-            currentMonthText,
-            currentDay,
-            currentWeekday,
-            isCheckedIn,
-            checkIn,
-        };
-    },
+const today = new Date();
+
+// 当前日期信息
+const currentMonthText = ref(['一', '月']); // 默认值
+const currentDay = ref(today.getDate()); // 当前日期号
+const currentWeekday = ref(['星', '期', '日']); // 当前星期完整文字
+
+// 打卡状态
+const isCheckedIn = ref(false);
+
+// 初始化日期信息
+const initializeDate = () => {
+    const months = [
+        '一月', '二月', '三月', '四月', '五月', '六月',
+        '七月', '八月', '九月', '十月', '十一月', '十二月',
+    ];
+    const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+
+    currentMonthText.value = months[today.getMonth()].split('');
+    currentDay.value = today.getDate();
+    currentWeekday.value = weekdays[today.getDay()].split('');
 };
+
+// 打卡功能
+const checkIn = () => {
+    isCheckedIn.value = true;
+};
+
+// 初始化
+initializeDate();
 </script>
 
 <style scoped>
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/FeedBack.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/FeedBack.vue
index b8532634..30d2ffa3 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/FeedBack.vue
+++ b/珞珈岛-项目相关文件/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'
 
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/MainPage.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/MainPage.vue
index 24f2d7bf..2333cc2d 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/MainPage.vue
+++ b/珞珈岛-项目相关文件/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>
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/NotificationDetail.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/NotificationDetail.vue
index 52bed46f..a0a94e93 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/NotificationDetail.vue
+++ b/珞珈岛-项目相关文件/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() {
-    try {
-      const data = await mockFetchNotice(this.id)
-      if (data) {
-        this.currentNotice = data
-      } else {
-        this.errorMessage = '通知不存在'
-      }
-    } catch (error) {
-      this.errorMessage = '加载失败，请稍后重试'
+onMounted(async () => {
+  try {
+    const data = await mockFetchNotice(route.params.id);
+    if (data) {
+      currentNotice.value = data;
+    } else {
+      errorMessage.value = '通知不存在';
     }
+  } catch (error) {
+    errorMessage.value = '加载失败，请稍后重试';
   }
-}
+});
 </script>
 
 <style scoped>
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/NotificationList.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/NotificationList.vue
index 11bb166e..6b72fc36 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/NotificationList.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/NotificationList.vue
@@ -18,34 +18,32 @@
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      notifications: [
-        {
-          id:1,
-          title: "系统维护通知",
-          time: "2023-08-20 14:00",
-          content: "服务器将于今晚24:00进行例行维护，预计持续2小时"
-        },
-        {
-          id:2,
-          title: "新功能上线",
-          time: "2023-08-19 09:30",
-          content: "消息中心新增批量处理功能，欢迎体验"
-        }
-      ]
-    }
+<script setup lang="js" name="NotificationList">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const notifications = ref([
+  {
+    id: 1,
+    title: "系统维护通知",
+    time: "2023-08-20 14:00",
+    content: "服务器将于今晚24:00进行例行维护，预计持续2小时"
   },
-  methods: {
-    viewDetail(noticeId) {
-      this.$router.push({
-        name: 'NotificationDetail',
-        params: { id: noticeId } // 传递动态参数
-      })
-    }
+  {
+    id: 2,
+    title: "新功能上线",
+    time: "2023-08-19 09:30",
+    content: "消息中心新增批量处理功能，欢迎体验"
   }
+]);
+
+function viewDetail(noticeId) {
+  router.push({
+    name: 'NotificationDetail',
+    params: { id: noticeId }
+  });
 }
 </script>
 
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostDetail.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostDetail.vue
index 4ffe0a7b..30e7add9 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/PostDetail.vue
+++ b/珞珈岛-项目相关文件/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({
-            avatar: require('@/assets/default-avatar/boy_4.png'),
-            name: '珈人1号',
-            followers: 1234,
-        });
-
-        // 帖子统计信息
-        const postStats = ref({
-            likes: 1200,
-            favorites: 300,
-            comments: 45,
-        });
-
-        // 发布时间
-        const postTime = ref('2025年4月20日 14:30');
-
-        // 评论数据
-        const comments = ref([
-            {
-                avatar: require('@/assets/default-avatar/girl_1.png'),
-                name: '评论者1', // 新增评论者名字
-                text: '这是第一条评论。',
-                time: '2025年4月20日 15:00',
-                likes: 10,
-            },
-            {
-                avatar: require('@/assets/default-avatar/boy_2.png'),
-                name: '评论者2', // 新增评论者名字
-                text: '这是第二条评论。',
-                time: '2025年4月20日 15:30',
-                likes: 5,
-            },
-        ]);
-
-        const isFollowing = ref(false);
-
-        const toggleFollow = () => {
-            isFollowing.value = !isFollowing.value;
-        };
-
-        const sendComment = () => {
-            if (newComment.value.trim()) {
-                comments.value.push({
-                    avatar: require('@/assets/default-avatar/boy_1.png'),
-                    name: '新评论者', // 评论者名字
-                    text: newComment.value,
-                    time: new Date().toLocaleString(),
-                    likes: 0,
-                });
-                newComment.value = '';
-            }
-        };
-
-        onMounted(() => {
-            postTitle.value = `帖子标题 ${postId.value}`;
-            postContent.value = `这是帖子 ${postId.value} 的内容，展示帖子的详细信息。`;
-        });
-
-        return {
-            postTitle,
-            postContent,
-            comments,
-            newComment,
-            sendComment,
-            author,
-            postStats,
-            postTime,
-            isFollowing,
-            toggleFollow,
-        };
-    },
+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({
+  likes: 1200,
+  favorites: 300,
+  comments: 45,
+});
+
+// 发布时间
+const postTime = ref('2025年4月20日 14:30');
+
+// 评论数据
+const comments = ref([
+  {
+    avatar: require('@/assets/default-avatar/girl_1.png'),
+    name: '评论者1',
+    text: '这是第一条评论。',
+    time: '2025年4月20日 15:00',
+    likes: 10,
+  },
+  {
+    avatar: require('@/assets/default-avatar/boy_2.png'),
+    name: '评论者2',
+    text: '这是第二条评论。',
+    time: '2025年4月20日 15:30',
+    likes: 5,
+  },
+]);
+
+const isFollowing = ref(false);
+
+const toggleFollow = () => {
+  isFollowing.value = !isFollowing.value;
 };
+
+const sendComment = () => {
+  if (newComment.value.trim()) {
+    comments.value.push({
+      avatar: require('@/assets/default-avatar/boy_1.png'),
+      name: '新评论者',
+      text: newComment.value,
+      time: new Date().toLocaleString(),
+      likes: 0,
+    });
+    newComment.value = '';
+  }
+};
+
+onMounted(() => {
+  postTitle.value = `帖子标题 ${postId.value}`;
+  postContent.value = `这是帖子 ${postId.value} 的内容，展示帖子的详细信息。`;
+});
 </script>
 
 <style scoped>
diff --git a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/UserPage.vue b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/UserPage.vue
index fd2eefec..32add287 100644
--- a/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/UserPage.vue
+++ b/珞珈岛-项目相关文件/luojia-island/vue-frontend/src/views/UserPage.vue
@@ -57,39 +57,32 @@
   </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,
-        title: '雷霆连续两场或20分钟逆转什么水平',
-        summary: '今天保罗带领雷霆完成逆转',
-        likes: 1200,
-        comments: 10,
-        favorites: 100,
-      },
-      {
-        id:2,
-        title: '一个普通人需要多大努力才能考上985',
-        summary: 'mmmmmmmm',
-        likes: 2200,
-        comments: 20,
-        favorites: 200,
-      },
-    ]);
-        const router = useRouter();
-        const goToPostDetail = (postId) => {
-            router.push({ name: 'PostDetail', params: { id: postId } });
-        };
-    return {
-      posts,
-       goToPostDetail,
-    };
+
+const posts = ref([
+  {
+    id: 1,
+    title: '雷霆连续两场或20分钟逆转什么水平',
+    summary: '今天保罗带领雷霆完成逆转',
+    likes: 1200,
+    comments: 10,
+    favorites: 100,
+  },
+  {
+    id: 2,
+    title: '一个普通人需要多大努力才能考上985',
+    summary: 'mmmmmmmm',
+    likes: 2200,
+    comments: 20,
+    favorites: 200,
   },
+]);
+
+const router = useRouter();
+const goToPostDetail = (postId) => {
+  router.push({ name: 'PostDetail', params: { id: postId } });
 };
 </script>