fix: 迁移部分页面为setup

frontend_nuxt/components/AchievementList.vue

@@ -37,8 +37,10 @@
 
 <script setup>
 import { computed } from 'vue'
-import { API_BASE_URL, toast } from '~/main'
+import { toast } from '~/main'
 import { getToken } from '~/utils/auth'
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
 
 const props = defineProps({
   medals: {

frontend_nuxt/components/CategorySelect.vue

@@ -26,22 +26,20 @@
   </Dropdown>
 </template>
 
-<script>
+<script setup>
 import { computed, ref, watch } from 'vue'
-import { API_BASE_URL } from '~/main'
 import Dropdown from '~/components/Dropdown.vue'
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
 
-export default {
+const props = defineProps({
-  name: 'CategorySelect',
-  components: { Dropdown },
-  props: {
   modelValue: { type: [String, Number], default: '' },
   options: { type: Array, default: () => [] },
-  },
+})
-  emits: ['update:modelValue'],
-  setup(props, { emit }) {
-    const providedOptions = ref(Array.isArray(props.options) ? [...props.options] : [])
 
+const emit = defineEmits(['update:modelValue'])
+
+const providedOptions = ref(Array.isArray(props.options) ? [...props.options] : [])
 watch(
   () => props.options,
   (val) => {
@@ -65,10 +63,6 @@ export default {
   get: () => props.modelValue,
   set: (v) => emit('update:modelValue', v),
 })
-
-    return { fetchCategories, selected, isImageIcon, providedOptions }
-  },
-}
 </script>
 
 <style scoped>

frontend_nuxt/components/CommentItem.vue

@@ -88,11 +88,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { computed, ref, watch } from 'vue'
 import VueEasyLightbox from 'vue-easy-lightbox'
 import { useRouter } from 'vue-router'
-import { API_BASE_URL, toast } from '~/main'
+import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
 import { getMedalTitle } from '~/utils/medal'
@@ -100,13 +100,11 @@ import TimeManager from '~/utils/time'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import CommentEditor from '~/components/CommentEditor.vue'
 import DropdownMenu from '~/components/DropdownMenu.vue'
-import LoginOverlay from '~/components/LoginOverlay.vue'
 import ReactionsGroup from '~/components/ReactionsGroup.vue'
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
 
-const CommentItem = {
+const props = defineProps({
-  name: 'CommentItem',
-  emits: ['deleted'],
-  props: {
   comment: {
     type: Object,
     required: true,
@@ -119,8 +117,10 @@ const CommentItem = {
     type: Boolean,
     default: false,
   },
-  },
+})
-  setup(props, { emit }) {
+
+const emit = defineEmits(['deleted'])
+
 const router = useRouter()
 const showReplies = ref(props.level === 0 ? true : props.defaultShowReplies)
 watch(
@@ -138,9 +138,11 @@ const CommentItem = {
 const loggedIn = computed(() => authState.loggedIn)
 const countReplies = (list) => list.reduce((sum, r) => sum + 1 + countReplies(r.reply || []), 0)
 const replyCount = computed(() => countReplies(props.comment.reply || []))
+
 const toggleReplies = () => {
   showReplies.value = !showReplies.value
 }
+
 const toggleEditor = () => {
   showEditor.value = !showEditor.value
   if (showEditor.value) {
@@ -150,7 +152,6 @@ const CommentItem = {
   }
 }
 
-    // 合并所有子回复为一个扁平数组
 const flattenReplies = (list) => {
   let result = []
   for (const r of list) {
@@ -257,12 +258,14 @@ const CommentItem = {
     isWaitingForReply.value = false
   }
 }
+
 const copyCommentLink = () => {
   const link = `${location.origin}${location.pathname}#comment-${props.comment.id}`
   navigator.clipboard.writeText(link).then(() => {
     toast.success('已复制')
   })
 }
+
 const handleContentClick = (e) => {
   handleMarkdownClick(e)
   if (e.target.tagName === 'IMG') {
@@ -273,41 +276,6 @@ const CommentItem = {
     lightboxVisible.value = true
   }
 }
-    return {
-      showReplies,
-      toggleReplies,
-      showEditor,
-      toggleEditor,
-      submitReply,
-      copyCommentLink,
-      renderMarkdown,
-      isWaitingForReply,
-      commentMenuItems,
-      deleteComment,
-      lightboxVisible,
-      lightboxIndex,
-      lightboxImgs,
-      handleContentClick,
-      loggedIn,
-      replyCount,
-      replyList,
-      getMedalTitle,
-      editorWrapper,
-    }
-  },
-}
-
-CommentItem.components = {
-  CommentItem,
-  CommentEditor,
-  BaseTimeline,
-  ReactionsGroup,
-  DropdownMenu,
-  VueEasyLightbox,
-  LoginOverlay,
-}
-
-export default CommentItem
 </script>
 
 <style scoped>

frontend_nuxt/components/GlobalPopups.vue

@@ -11,36 +11,30 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import ActivityPopup from '~/components/ActivityPopup.vue'
 import MedalPopup from '~/components/MedalPopup.vue'
 import NotificationSettingPopup from '~/components/NotificationSettingPopup.vue'
 import { API_BASE_URL } from '~/main'
 import { authState } from '~/utils/auth'
 
-export default {
+const showMilkTeaPopup = ref(false)
-  name: 'GlobalPopups',
+const milkTeaIcon = ref('')
-  components: { ActivityPopup, MedalPopup, NotificationSettingPopup },
+const showNotificationPopup = ref(false)
-  data() {
+const showMedalPopup = ref(false)
-    return {
+const newMedals = ref([])
-      showMilkTeaPopup: false,
-      milkTeaIcon: '',
-      showNotificationPopup: false,
-      showMedalPopup: false,
-      newMedals: [],
-    }
-  },
-  async mounted() {
-    await this.checkMilkTeaActivity()
-    if (this.showMilkTeaPopup) return
 
-    await this.checkNotificationSetting()
+onMounted(async () => {
-    if (this.showNotificationPopup) return
+  await checkMilkTeaActivity()
+  if (showMilkTeaPopup.value) return
 
-    await this.checkNewMedals()
+  await checkNotificationSetting()
-  },
+  if (showNotificationPopup.value) return
-  methods: {
+
-    async checkMilkTeaActivity() {
+  await checkNewMedals()
+})
+
+const checkMilkTeaActivity = async () => {
   if (!process.client) return
   if (localStorage.getItem('milkTeaActivityPopupShown')) return
   try {
@@ -49,33 +43,33 @@ export default {
       const list = await res.json()
       const a = list.find((i) => i.type === 'MILK_TEA' && !i.ended)
       if (a) {
-            this.milkTeaIcon = a.icon
+        milkTeaIcon.value = a.icon
-            this.showMilkTeaPopup = true
+        showMilkTeaPopup.value = true
       }
     }
   } catch (e) {
     // ignore network errors
   }
-    },
+}
-    closeMilkTeaPopup() {
+const closeMilkTeaPopup = () => {
   if (!process.client) return
   localStorage.setItem('milkTeaActivityPopupShown', 'true')
-      this.showMilkTeaPopup = false
+  showMilkTeaPopup.value = false
-      this.checkNotificationSetting()
+  checkNotificationSetting()
-    },
+}
-    async checkNotificationSetting() {
+const checkNotificationSetting = async () => {
   if (!process.client) return
   if (!authState.loggedIn) return
   if (localStorage.getItem('notificationSettingPopupShown')) return
-      this.showNotificationPopup = true
+  showNotificationPopup.value = true
-    },
+}
-    closeNotificationPopup() {
+const closeNotificationPopup = () => {
   if (!process.client) return
   localStorage.setItem('notificationSettingPopupShown', 'true')
-      this.showNotificationPopup = false
+  showNotificationPopup.value = false
-      this.checkNewMedals()
+  checkNewMedals()
-    },
+}
-    async checkNewMedals() {
+const checkNewMedals = async () => {
   if (!process.client) return
   if (!authState.loggedIn || !authState.userId) return
   try {
@@ -85,21 +79,19 @@ export default {
       const seen = JSON.parse(localStorage.getItem('seenMedals') || '[]')
       const m = medals.filter((i) => i.completed && !seen.includes(i.type))
       if (m.length > 0) {
-            this.newMedals = m
+        newMedals.value = m
-            this.showMedalPopup = true
+        showMedalPopup.value = true
       }
     }
   } catch (e) {
     // ignore errors
   }
-    },
+}
-    closeMedalPopup() {
+const closeMedalPopup = () => {
   if (!process.client) return
   const seen = new Set(JSON.parse(localStorage.getItem('seenMedals') || '[]'))
-      this.newMedals.forEach((m) => seen.add(m.type))
+  newMedals.value.forEach((m) => seen.add(m.type))
   localStorage.setItem('seenMedals', JSON.stringify([...seen]))
-      this.showMedalPopup = false
+  showMedalPopup.value = false
-    },
-  },
 }
 </script>

frontend_nuxt/components/MenuComponent.vue

@@ -123,25 +123,24 @@
   </transition>
 </template>
 
-<script>
+<script setup>
 import { themeState, cycleTheme, ThemeMode } from '~/utils/theme'
 import { authState } from '~/utils/auth'
 import { fetchUnreadCount, notificationState } from '~/utils/notification'
 import { ref, computed, watch, onMounted } from 'vue'
-import { API_BASE_URL } from '~/main'
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
 
-export default {
+const props = defineProps({
-  name: 'MenuComponent',
-  props: {
   visible: {
     type: Boolean,
     default: true,
   },
-  },
+})
-  async setup(props, { emit }) {
+
+const emit = defineEmits(['item-click'])
+
 const router = useRouter()
-    const categories = ref([])
-    const tags = ref([])
 const categoryOpen = ref(true)
 const tagOpen = ref(true)
 const isLoadingCategory = ref(false)
@@ -221,27 +220,6 @@ export default {
 }
 
 await Promise.all([fetchCategoryData(), fetchTagData()])
-
-    return {
-      categoryData,
-      tagData,
-      categoryOpen,
-      tagOpen,
-      isLoadingCategory,
-      isLoadingTag,
-      iconClass,
-      unreadCount,
-      showUnreadCount,
-      shouldShowStats,
-      cycleTheme,
-      handleHomeClick,
-      handleItemClick,
-      isImageIcon,
-      gotoCategory,
-      gotoTag,
-    }
-  },
-}
 </script>
 
 <style scoped>

frontend_nuxt/components/MilkTeaActivityComponent.vue

@@ -57,49 +57,44 @@
   </div>
 </template>
 
-<script>
+<script setup>
-import { API_BASE_URL, toast } from '~/main'
+import { toast } from '~/main'
 import { fetchCurrentUser, getToken } from '~/utils/auth'
 import BaseInput from '~/components/BaseInput.vue'
 import BasePopup from '~/components/BasePopup.vue'
 import LevelProgress from '~/components/LevelProgress.vue'
 import ProgressBar from '~/components/ProgressBar.vue'
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
 
-export default {
+const info = ref({ redeemCount: 0, ended: false })
-  name: 'MilkTeaActivityComponent',
+const user = ref(null)
-  components: { ProgressBar, LevelProgress, BaseInput, BasePopup },
+const dialogVisible = ref(false)
-  data() {
+const contact = ref('')
-    return {
+const loading = ref(false)
-      info: { redeemCount: 0, ended: false },
+const isLoadingUser = ref(true)
-      user: null,
+
-      dialogVisible: false,
+onMounted(async () => {
-      contact: '',
+  await loadInfo()
-      loading: false,
+  isLoadingUser.value = true
-      isLoadingUser: true,
+  user.value = await fetchCurrentUser()
-    }
+  isLoadingUser.value = false
-  },
+})
-  async mounted() {
+const loadInfo = async () => {
-    await this.loadInfo()
-    this.isLoadingUser = true
-    this.user = await fetchCurrentUser()
-    this.isLoadingUser = false
-  },
-  methods: {
-    async loadInfo() {
   const res = await fetch(`${API_BASE_URL}/api/activities/milk-tea`)
   if (res.ok) {
-        this.info = await res.json()
+    info.value = await res.json()
   }
-    },
+}
-    openDialog() {
+const openDialog = () => {
-      this.dialogVisible = true
+  dialogVisible.value = true
-    },
+}
-    closeDialog() {
+const closeDialog = () => {
-      this.dialogVisible = false
+  dialogVisible.value = false
-    },
+}
-    async submitRedeem() {
+const submitRedeem = async () => {
-      if (!this.contact) return
+  if (!contact.value) return
-      this.loading = true
+  loading.value = true
   const token = getToken()
   const res = await fetch(`${API_BASE_URL}/api/activities/milk-tea/redeem`, {
     method: 'POST',
@@ -107,7 +102,7 @@ export default {
       'Content-Type': 'application/json',
       Authorization: `Bearer ${token}`,
     },
-        body: JSON.stringify({ contact: this.contact }),
+    body: JSON.stringify({ contact: contact.value }),
   })
   if (res.ok) {
     const data = await res.json()
@@ -116,14 +111,12 @@ export default {
     } else {
       toast.success('兑换成功！')
     }
-        this.dialogVisible = false
+    dialogVisible.value = false
-        await this.loadInfo()
+    await loadInfo()
   } else {
     toast.error('兑换失败')
   }
-      this.loading = false
+  loading.value = false
-    },
-  },
 }
 </script>
 

frontend_nuxt/components/ReactionsGroup.vue

@@ -46,11 +46,16 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { computed, onMounted, ref, watch } from 'vue'
-import { API_BASE_URL, toast } from '~/main'
+import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { reactionEmojiMap } from '~/utils/reactions'
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
+const emit = defineEmits(['update:modelValue'])
+const reactions = ref(props.modelValue)
+const reactionTypes = ref([])
 
 let cachedTypes = null
 const fetchTypes = async () => {
@@ -71,22 +76,17 @@ const fetchTypes = async () => {
   return cachedTypes
 }
 
-export default {
+const props = defineProps({
-  name: 'ReactionsGroup',
-  props: {
   modelValue: { type: Array, default: () => [] },
   contentType: { type: String, required: true },
   contentId: { type: [Number, String], required: true },
-  },
+})
-  emits: ['update:modelValue'],
+
-  setup(props, { emit }) {
-    const reactions = ref(props.modelValue)
 watch(
   () => props.modelValue,
   (v) => (reactions.value = v),
 )
 
-    const reactionTypes = ref([])
 onMounted(async () => {
   reactionTypes.value = await fetchTypes()
 })
@@ -200,23 +200,6 @@ export default {
     toast.error('操作失败')
   }
 }
-
-    return {
-      reactionEmojiMap,
-      counts,
-      totalCount,
-      likeCount,
-      displayedReactions,
-      panelTypes,
-      panelVisible,
-      openPanel,
-      scheduleHide,
-      cancelHide,
-      toggleReaction,
-      userReacted,
-    }
-  },
-}
 </script>
 
 <style>

frontend_nuxt/components/SearchDropdown.vue

@@ -36,19 +36,17 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { ref, watch } from 'vue'
 import { useIsMobile } from '~/utils/screen'
 import { useRouter } from 'vue-router'
 import Dropdown from '~/components/Dropdown.vue'
-import { API_BASE_URL } from '~/main'
 import { stripMarkdown } from '~/utils/markdown'
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
+
+const emit = defineEmits(['close'])
 
-export default {
-  name: 'SearchDropdown',
-  components: { Dropdown },
-  emits: ['close'],
-  setup(props, { emit }) {
 const router = useRouter()
 const keyword = ref('')
 const selected = ref(null)
@@ -114,20 +112,6 @@ export default {
   selected.value = null
   keyword.value = ''
 })
-
-    return {
-      keyword,
-      selected,
-      fetchResults,
-      highlight,
-      iconMap,
-      isMobile,
-      dropdown,
-      onClose,
-      toggle,
-    }
-  },
-}
 </script>
 
 <style scoped>

frontend_nuxt/components/TagSelect.vue

@@ -28,21 +28,20 @@
   </Dropdown>
 </template>
 
-<script>
+<script setup>
 import { computed, ref, watch } from 'vue'
-import { API_BASE_URL, toast } from '~/main'
+import { toast } from '~/main'
 import Dropdown from '~/components/Dropdown.vue'
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
 
-export default {
+const emit = defineEmits(['update:modelValue'])
-  name: 'TagSelect',
+const props = defineProps({
-  components: { Dropdown },
-  props: {
   modelValue: { type: Array, default: () => [] },
   creatable: { type: Boolean, default: false },
   options: { type: Array, default: () => [] },
-  },
+})
-  emits: ['update:modelValue'],
+
-  setup(props, { emit }) {
 const localTags = ref([])
 const providedTags = ref(Array.isArray(props.options) ? [...props.options] : [])
 
@@ -91,11 +90,7 @@ export default {
   // 3) 合并、去重、可创建
   let options = [...data, ...localTags.value]
 
-      if (
+  if (props.creatable && kw && !options.some((t) => t.name.toLowerCase() === kw.toLowerCase())) {
-        props.creatable &&
-        kw &&
-        !options.some((t) => t.name.toLowerCase() === kw.toLowerCase())
-      ) {
     options.push({ id: `__create__:${kw}`, name: `创建"${kw}"` })
   }
 
@@ -132,10 +127,6 @@ export default {
     emit('update:modelValue', v)
   },
 })
-
-    return { fetchTags, selected, isImageIcon, mergedOptions }
-  },
-}
 </script>
 
 <style scoped>

frontend_nuxt/main.js

@@ -1,12 +1 @@
-import { useRuntimeConfig } from '#app'
-
-const config = useRuntimeConfig()
-
-export const API_BASE_URL = config.public.apiBaseUrl
-export const GOOGLE_CLIENT_ID = config.public.googleClientId
-export const GITHUB_CLIENT_ID = config.public.githubClientId
-export const DISCORD_CLIENT_ID = config.public.discordClientId
-export const TWITTER_CLIENT_ID = config.public.twitterClientId
-
-// 重新导出 toast 功能，使用 composable 方式
 export { toast } from './composables/useToast'

frontend_nuxt/pages/about/stats.vue

@@ -41,8 +41,9 @@ import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
 import { onMounted, ref } from 'vue'
 import VChart from 'vue-echarts'
-import { API_BASE_URL } from '~/main'
 import { getToken } from '~/utils/auth'
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
 
 use([LineChart, TitleComponent, TooltipComponent, GridComponent, DataZoomComponent, CanvasRenderer])
 

frontend_nuxt/pages/activities.vue

@@ -29,35 +29,28 @@
   </div>
 </template>
 
-<script>
+<script setup>
-import { API_BASE_URL } from '~/main'
 import TimeManager from '~/utils/time'
 import MilkTeaActivityComponent from '~/components/MilkTeaActivityComponent.vue'
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
 
-export default {
+const activities = ref([])
-  name: 'ActivityListPageView',
+const isLoadingActivities = ref(false)
-  components: { MilkTeaActivityComponent },
+
-  data() {
+onMounted(async () => {
-    return {
+  isLoadingActivities.value = true
-      activities: [],
-      TimeManager,
-      isLoadingActivities: false,
-    }
-  },
-  async mounted() {
-    this.isLoadingActivities = true
   try {
     const res = await fetch(`${API_BASE_URL}/api/activities`)
     if (res.ok) {
-        this.activities = await res.json()
+      activities.value = await res.json()
     }
   } catch (e) {
     console.error(e)
   } finally {
-      this.isLoadingActivities = false
+    isLoadingActivities.value = false
-    }
-  },
   }
+})
 </script>
 
 <style scoped>

frontend_nuxt/pages/forgot-password.vue

@@ -23,105 +23,99 @@
   </div>
 </template>
 
-<script>
+<script setup>
-import { API_BASE_URL, toast } from '~/main'
+import { toast } from '~/main'
 import BaseInput from '~/components/BaseInput.vue'
-export default {
+const config = useRuntimeConfig()
-  name: 'ForgotPasswordPageView',
+const API_BASE_URL = config.public.apiBaseUrl
-  components: { BaseInput },
+
-  data() {
+const step = ref(0)
-    return {
+const email = ref('')
-      step: 0,
+const code = ref('')
-      email: '',
+const password = ref('')
-      code: '',
+const token = ref('')
-      password: '',
+const emailError = ref('')
-      token: '',
+const passwordError = ref('')
-      emailError: '',
+const isSending = ref(false)
-      passwordError: '',
+const isVerifying = ref(false)
-      isSending: false,
+const isResetting = ref(false)
-      isVerifying: false,
+
-      isResetting: false,
+onMounted(() => {
+  if (route.query.email) {
+    email.value = decodeURIComponent(route.query.email)
   }
-  },
+})
-  mounted() {
+const sendCode = async () => {
-    if (this.$route.query.email) {
+  if (!email.value) {
-      this.email = decodeURIComponent(this.$route.query.email)
+    emailError.value = '邮箱不能为空'
-    }
-  },
-  methods: {
-    async sendCode() {
-      if (!this.email) {
-        this.emailError = '邮箱不能为空'
     return
   }
   try {
-        this.isSending = true
+    isSending.value = true
     const res = await fetch(`${API_BASE_URL}/api/auth/forgot/send`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ email: this.email }),
+      body: JSON.stringify({ email: email.value }),
     })
-        this.isSending = false
+    isSending.value = false
     if (res.ok) {
       toast.success('验证码已发送')
-          this.step = 1
+      step.value = 1
     } else {
       toast.error('请填写已注册邮箱')
     }
   } catch (e) {
-        this.isSending = false
+    isSending.value = false
     toast.error('发送失败')
   }
-    },
+}
-    async verifyCode() {
+const verifyCode = async () => {
   try {
-        this.isVerifying = true
+    isVerifying.value = true
     const res = await fetch(`${API_BASE_URL}/api/auth/forgot/verify`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ email: this.email, code: this.code }),
+      body: JSON.stringify({ email: email.value, code: code.value }),
     })
-        this.isVerifying = false
+    isVerifying.value = false
     const data = await res.json()
     if (res.ok) {
-          this.token = data.token
+      token.value = data.token
-          this.step = 2
+      step.value = 2
     } else {
       toast.error(data.error || '验证失败')
     }
   } catch (e) {
-        this.isVerifying = false
+    isVerifying.value = false
     toast.error('验证失败')
   }
-    },
+}
-    async resetPassword() {
+const resetPassword = async () => {
-      if (!this.password) {
+  if (!password.value) {
-        this.passwordError = '密码不能为空'
+    passwordError.value = '密码不能为空'
     return
   }
   try {
-        this.isResetting = true
+    isResetting.value = true
     const res = await fetch(`${API_BASE_URL}/api/auth/forgot/reset`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ token: this.token, password: this.password }),
+      body: JSON.stringify({ token: token.value, password: password.value }),
     })
-        this.isResetting = false
+    isResetting.value = false
     const data = await res.json()
     if (res.ok) {
       toast.success('密码已重置')
-          this.$router.push('/login')
+      router.push('/login')
     } else if (data.field === 'password') {
-          this.passwordError = data.error
+      passwordError.value = data.error
     } else {
       toast.error(data.error || '重置失败')
     }
   } catch (e) {
-        this.isResetting = false
+    isResetting.value = false
     toast.error('重置失败')
   }
-    },
-  },
 }
 </script>
 

frontend_nuxt/pages/index.vue

@@ -111,34 +111,19 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { ref, watch } from 'vue'
 import ArticleCategory from '~/components/ArticleCategory.vue'
 import ArticleTags from '~/components/ArticleTags.vue'
 import CategorySelect from '~/components/CategorySelect.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
 import TagSelect from '~/components/TagSelect.vue'
-import { API_BASE_URL } from '~/main'
 import { getToken } from '~/utils/auth'
 import { useScrollLoadMore } from '~/utils/loadMore'
 import { stripMarkdown } from '~/utils/markdown'
 import { useIsMobile } from '~/utils/screen'
 import TimeManager from '~/utils/time'
 
-export default {
-  name: 'HomePageView',
-  components: {
-    CategorySelect,
-    TagSelect,
-    ArticleTags,
-    ArticleCategory,
-    SearchDropdown,
-    ClientOnly: () =>
-      import('vue').then((m) =>
-        m.defineAsyncComponent(() => import('vue').then(() => ({ template: '<slot />' }))),
-      ),
-  },
-  async setup() {
 useHead({
   title: 'OpenIsle - 全面开源的自由社区',
   meta: [
@@ -149,6 +134,9 @@ export default {
     },
   ],
 })
+
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
 const selectedCategory = ref('')
 const selectedTags = ref([])
 const route = useRoute()
@@ -157,11 +145,7 @@ export default {
 const isLoadingPosts = ref(false)
 const topics = ref(['最新回复', '最新', '排行榜' /*, '热门', '类别'*/])
 const selectedTopic = ref(
-      route.query.view === 'ranking'
+  route.query.view === 'ranking' ? '排行榜' : route.query.view === 'latest' ? '最新' : '最新回复',
-        ? '排行榜'
-        : route.query.view === 'latest'
-          ? '最新'
-          : '最新回复',
 )
 const articles = ref([])
 const page = ref(0)
@@ -426,21 +410,6 @@ export default {
 const sanitizeDescription = (text) => stripMarkdown(text)
 
 await Promise.all([loadOptions(), fetchContent()])
-
-    return {
-      topics,
-      selectedTopic,
-      articles,
-      sanitizeDescription,
-      isLoadingPosts,
-      selectedCategory,
-      selectedTags,
-      tagOptions,
-      categoryOptions,
-      isMobile,
-    }
-  },
-}
 </script>
 
 <style scoped>

frontend_nuxt/pages/login.vue

@@ -51,8 +51,8 @@
   </div>
 </template>
 
-<script>
+<script setup>
-import { API_BASE_URL, toast } from '~/main'
+import { toast } from '~/main'
 import { setToken, loadCurrentUser } from '~/utils/auth'
 import { googleAuthorize } from '~/utils/google'
 import { githubAuthorize } from '~/utils/github'
@@ -60,27 +60,20 @@ import { discordAuthorize } from '~/utils/discord'
 import { twitterAuthorize } from '~/utils/twitter'
 import BaseInput from '~/components/BaseInput.vue'
 import { registerPush } from '~/utils/push'
-export default {
+const config = useRuntimeConfig()
-  name: 'LoginPageView',
+const API_BASE_URL = config.public.apiBaseUrl
-  components: { BaseInput },
+
-  setup() {
+const username = ref('')
-    return { googleAuthorize }
+const password = ref('')
-  },
+const isWaitingForLogin = ref(false)
-  data() {
+
-    return {
+const submitLogin = async () => {
-      username: '',
-      password: '',
-      isWaitingForLogin: false,
-    }
-  },
-  methods: {
-    async submitLogin() {
   try {
-        this.isWaitingForLogin = true
+    isWaitingForLogin.value = true
     const res = await fetch(`${API_BASE_URL}/api/auth/login`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ username: this.username, password: this.password }),
+      body: JSON.stringify({ username: username.value, password: password.value }),
     })
     const data = await res.json()
     if (res.ok && data.token) {
@@ -88,35 +81,33 @@ export default {
       await loadCurrentUser()
       toast.success('登录成功')
       registerPush()
-          this.$router.push('/')
+      router.push('/')
     } else if (data.reason_code === 'NOT_VERIFIED') {
       toast.info('当前邮箱未验证，已经为您重新发送验证码')
-          this.$router.push({ path: '/signup', query: { verify: 1, u: this.username } })
+      router.push({ path: '/signup', query: { verify: 1, u: username.value } })
     } else if (data.reason_code === 'IS_APPROVING') {
       toast.info('您的注册正在审批中, 请留意邮件')
-          this.$router.push('/')
+      router.push('/')
     } else if (data.reason_code === 'NOT_APPROVED') {
-          this.$router.push('/signup-reason?token=' + data.token)
+      router.push('/signup-reason?token=' + data.token)
     } else {
       toast.error(data.error || '登录失败')
     }
   } catch (e) {
     toast.error('登录失败')
   } finally {
-        this.isWaitingForLogin = false
+    isWaitingForLogin.value = false
+  }
 }
-    },
 
-    loginWithGithub() {
+const loginWithGithub = () => {
   githubAuthorize()
-    },
+}
-    loginWithDiscord() {
+const loginWithDiscord = () => {
   discordAuthorize()
-    },
+}
-    loginWithTwitter() {
+const loginWithTwitter = () => {
   twitterAuthorize()
-    },
-  },
 }
 </script>
 

frontend_nuxt/pages/message.vue

@@ -478,10 +478,9 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { ref, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { API_BASE_URL } from '~/main'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import NotificationContainer from '~/components/NotificationContainer.vue'
@@ -491,11 +490,8 @@ import { toast } from '~/main'
 import { stripMarkdownLength } from '~/utils/markdown'
 import TimeManager from '~/utils/time'
 import { reactionEmojiMap } from '~/utils/reactions'
-
+const config = useRuntimeConfig()
-export default {
+const API_BASE_URL = config.public.apiBaseUrl
-  name: 'MessagePageView',
-  components: { BaseTimeline, BasePlaceholder, NotificationContainer },
-  setup() {
 const router = useRouter()
 const route = useRoute()
 const notifications = ref([])
@@ -505,9 +501,7 @@ export default {
 )
 const notificationPrefs = ref([])
 const filteredNotifications = computed(() =>
-      selectedTab.value === 'all'
+  selectedTab.value === 'all' ? notifications.value : notifications.value.filter((n) => !n.read),
-        ? notifications.value
-        : notifications.value.filter((n) => !n.read),
 )
 
 const markRead = async (id) => {
@@ -800,25 +794,6 @@ export default {
   fetchNotifications()
   fetchPrefs()
 })
-
-    return {
-      notifications,
-      formatType,
-      isLoadingMessage,
-      stripMarkdownLength,
-      markRead,
-      approve,
-      reject,
-      TimeManager,
-      selectedTab,
-      filteredNotifications,
-      markAllRead,
-      authState,
-      notificationPrefs,
-      togglePref,
-    }
-  },
-}
 </script>
 
 <style scoped>

frontend_nuxt/pages/new-post.vue

@@ -88,21 +88,11 @@ import LoginOverlay from '~/components/LoginOverlay.vue'
 import PostEditor from '~/components/PostEditor.vue'
 import PostTypeSelect from '~/components/PostTypeSelect.vue'
 import TagSelect from '~/components/TagSelect.vue'
-import { API_BASE_URL, toast } from '~/main'
+import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
 
-export default {
-  name: 'NewPostPageView',
-  components: {
-    PostEditor,
-    CategorySelect,
-    TagSelect,
-    LoginOverlay,
-    PostTypeSelect,
-    AvatarCropper,
-    FlatPickr,
-  },
-  setup() {
 const title = ref('')
 const content = ref('')
 const selectedCategory = ref('')
@@ -392,32 +382,6 @@ export default {
     isWaitingPosting.value = false
   }
 }
-    return {
-      title,
-      content,
-      selectedCategory,
-      selectedTags,
-      postType,
-      prizeIcon,
-      prizeCount,
-      endTime,
-      submitPost,
-      saveDraft,
-      clearPost,
-      isWaitingPosting,
-      aiGenerate,
-      isAiLoading,
-      isLogin,
-      onPrizeIconChange,
-      onPrizeCropped,
-      showPrizeCropper,
-      tempPrizeIcon,
-      dateConfig,
-      prizeName,
-      prizeDescription,
-    }
-  },
-}
 </script>
 
 <style scoped>

frontend_nuxt/pages/posts/[id]/edit.vue

@@ -35,20 +35,18 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { ref, onMounted, computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import PostEditor from '~/components/PostEditor.vue'
 import CategorySelect from '~/components/CategorySelect.vue'
 import TagSelect from '~/components/TagSelect.vue'
-import { API_BASE_URL, toast } from '~/main'
+import { toast } from '~/main'
 import { getToken, authState } from '~/utils/auth'
 import LoginOverlay from '~/components/LoginOverlay.vue'
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
 
-export default {
-  name: 'EditPostPageView',
-  components: { PostEditor, CategorySelect, TagSelect, LoginOverlay },
-  setup() {
 const title = ref('')
 const content = ref('')
 const selectedCategory = ref('')
@@ -201,21 +199,6 @@ export default {
 const cancelEdit = () => {
   router.push(`/posts/${postId}`)
 }
-    return {
-      title,
-      content,
-      selectedCategory,
-      selectedTags,
-      submitPost,
-      clearPost,
-      cancelEdit,
-      isWaitingPosting,
-      aiGenerate,
-      isAiLoading,
-      isLogin,
-    }
-  },
-}
 </script>
 
 <style scoped>

frontend_nuxt/pages/settings.vue

@@ -64,95 +64,92 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import AvatarCropper from '~/components/AvatarCropper.vue'
 import BaseInput from '~/components/BaseInput.vue'
 import Dropdown from '~/components/Dropdown.vue'
-import { API_BASE_URL, toast } from '~/main'
+import { toast } from '~/main'
 import { fetchCurrentUser, getToken, setToken } from '~/utils/auth'
-export default {
+const config = useRuntimeConfig()
-  name: 'SettingsPageView',
+const API_BASE_URL = config.public.apiBaseUrl
-  components: { BaseInput, Dropdown, AvatarCropper },
+const router = useRouter()
-  data() {
+const username = ref('')
-    return {
+const introduction = ref('')
-      username: '',
+const usernameError = ref('')
-      introduction: '',
+const avatar = ref('')
-      usernameError: '',
+const avatarFile = ref(null)
-      avatar: '',
+const tempAvatar = ref('')
-      avatarFile: null,
+const showCropper = ref(false)
-      tempAvatar: '',
+const role = ref('')
-      showCropper: false,
+const publishMode = ref('DIRECT')
-      role: '',
+const passwordStrength = ref('LOW')
-      publishMode: 'DIRECT',
+const aiFormatLimit = ref(3)
-      passwordStrength: 'LOW',
+const registerMode = ref('DIRECT')
-      aiFormatLimit: 3,
+const isLoadingPage = ref(false)
-      registerMode: 'DIRECT',
+const isSaving = ref(false)
-      isLoadingPage: false,
+
-      isSaving: false,
+onMounted(async () => {
-    }
+  isLoadingPage.value = true
-  },
-  async mounted() {
-    this.isLoadingPage = true
   const user = await fetchCurrentUser()
 
   if (user) {
-      this.username = user.username
+    username.value = user.username
-      this.introduction = user.introduction || ''
+    introduction.value = user.introduction || ''
-      this.avatar = user.avatar
+    avatar.value = user.avatar
-      this.role = user.role
+    role.value = user.role
-      if (this.role === 'ADMIN') {
+    if (role.value === 'ADMIN') {
-        this.loadAdminConfig()
+      loadAdminConfig()
     }
   } else {
     toast.error('请先登录')
-      this.$router.push('/login')
+    router.push('/login')
   }
-    this.isLoadingPage = false
+  isLoadingPage.value = false
-  },
+})
-  methods: {
+
-    onAvatarChange(e) {
+const onAvatarChange = (e) => {
   const file = e.target.files[0]
   if (file) {
     const reader = new FileReader()
     reader.onload = () => {
-          this.tempAvatar = reader.result
+      tempAvatar.value = reader.result
-          this.showCropper = true
+      showCropper.value = true
     }
     reader.readAsDataURL(file)
   }
-    },
+}
-    onCropped({ file, url }) {
+const onCropped = ({ file, url }) => {
-      this.avatarFile = file
+  avatarFile.value = file
-      this.avatar = url
+  avatar.value = url
-    },
+}
-    fetchPublishModes() {
+const fetchPublishModes = () => {
   return Promise.resolve([
     { id: 'DIRECT', name: '直接发布', icon: 'fas fa-bolt' },
     { id: 'REVIEW', name: '审核后发布', icon: 'fas fa-search' },
   ])
-    },
+}
-    fetchPasswordStrengths() {
+const fetchPasswordStrengths = () => {
   return Promise.resolve([
     { id: 'LOW', name: '低', icon: 'fas fa-lock-open' },
     { id: 'MEDIUM', name: '中', icon: 'fas fa-lock' },
     { id: 'HIGH', name: '高', icon: 'fas fa-user-shield' },
   ])
-    },
+}
-    fetchAiLimits() {
+const fetchAiLimits = () => {
   return Promise.resolve([
     { id: 3, name: '3次' },
     { id: 5, name: '5次' },
     { id: 10, name: '10次' },
     { id: -1, name: '无限' },
   ])
-    },
+}
-    fetchRegisterModes() {
+const fetchRegisterModes = () => {
   return Promise.resolve([
     { id: 'DIRECT', name: '直接注册', icon: 'fas fa-user-check' },
     { id: 'WHITELIST', name: '白名单邀请制', icon: 'fas fa-envelope' },
   ])
-    },
+}
-    async loadAdminConfig() {
+const loadAdminConfig = async () => {
   try {
     const token = getToken()
     const res = await fetch(`${API_BASE_URL}/api/admin/config`, {
@@ -160,31 +157,31 @@ export default {
     })
     if (res.ok) {
       const data = await res.json()
-          this.publishMode = data.publishMode
+      publishMode.value = data.publishMode
-          this.passwordStrength = data.passwordStrength
+      passwordStrength.value = data.passwordStrength
-          this.aiFormatLimit = data.aiFormatLimit
+      aiFormatLimit.value = data.aiFormatLimit
-          this.registerMode = data.registerMode
+      registerMode.value = data.registerMode
     }
   } catch (e) {
     // ignore
   }
-    },
+}
-    async save() {
+const save = async () => {
-      this.isSaving = true
+  isSaving.value = true
 
   do {
     let token = getToken()
-        this.usernameError = ''
+    usernameError.value = ''
-        if (!this.username) {
+    if (!username.value) {
-          this.usernameError = '用户名不能为空'
+      usernameError.value = '用户名不能为空'
     }
-        if (this.usernameError) {
+    if (usernameError.value) {
-          toast.error(this.usernameError)
+      toast.error(usernameError.value)
       break
     }
-        if (this.avatarFile) {
+    if (avatarFile.value) {
       const form = new FormData()
-          form.append('file', this.avatarFile)
+      form.append('file', avatarFile.value)
       const res = await fetch(`${API_BASE_URL}/api/users/me/avatar`, {
         method: 'POST',
         headers: { Authorization: `Bearer ${token}` },
@@ -192,7 +189,7 @@ export default {
       })
       const data = await res.json()
       if (res.ok) {
-            this.avatar = data.url
+        avatar.value = data.url
       } else {
         toast.error(data.error || '上传失败')
         break
@@ -201,7 +198,7 @@ export default {
     const res = await fetch(`${API_BASE_URL}/api/users/me`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
-          body: JSON.stringify({ username: this.username, introduction: this.introduction }),
+      body: JSON.stringify({ username: username.value, introduction: introduction.value }),
     })
 
     const data = await res.json()
@@ -213,24 +210,22 @@ export default {
       setToken(data.token)
       token = data.token
     }
-        if (this.role === 'ADMIN') {
+    if (role.value === 'ADMIN') {
       await fetch(`${API_BASE_URL}/api/admin/config`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
         body: JSON.stringify({
-              publishMode: this.publishMode,
+          publishMode: publishMode.value,
-              passwordStrength: this.passwordStrength,
+          passwordStrength: passwordStrength.value,
-              aiFormatLimit: this.aiFormatLimit,
+          aiFormatLimit: aiFormatLimit.value,
-              registerMode: this.registerMode,
+          registerMode: registerMode.value,
         }),
       })
     }
     toast.success('保存成功')
-      } while (!this.isSaving)
+  } while (!isSaving.value)
 
-      this.isSaving = false
+  isSaving.value = false
-    },
-  },
 }
 </script>
 

frontend_nuxt/pages/signup-reason.vue

@@ -18,36 +18,32 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import BaseInput from '~/components/BaseInput.vue'
-import { API_BASE_URL, toast } from '~/main'
+import { toast } from '~/main'
+const config = useRuntimeConfig()
+const API_BASE_URL = config.public.apiBaseUrl
 
-export default {
+const reason = ref('')
-  name: 'SignupReasonPageView',
+const error = ref('')
-  components: { BaseInput },
+const isWaitingForRegister = ref(false)
-  data() {
+const token = ref('')
-    return {
+
-      reason: '',
+onMounted(() => {
-      error: '',
+  token.value = route.query.token || ''
-      isWaitingForRegister: false,
+  if (!token.value) {
-      token: '',
+    router.push('/signup')
   }
-  },
+})
-  mounted() {
+
-    this.token = this.$route.query.token || ''
+const submit = async () => {
-    if (!this.token) {
+  if (!reason.value || reason.value.trim().length < 20) {
-      this.$router.push('/signup')
+    error.value = '请至少输入20个字'
-    }
-  },
-  methods: {
-    async submit() {
-      if (!this.reason || this.reason.trim().length < 20) {
-        this.error = '请至少输入20个字'
     return
   }
 
   try {
-        this.isWaitingForRegister = true
+    isWaitingForRegister.value = true
     const res = await fetch(`${API_BASE_URL}/api/auth/reason`, {
       method: 'POST',
       headers: {
@@ -58,23 +54,21 @@ export default {
         reason: this.reason,
       }),
     })
-        this.isWaitingForRegister = false
+    isWaitingForRegister.value = false
     const data = await res.json()
     if (res.ok) {
       toast.success('注册理由已提交,请等待审核')
-          this.$router.push('/')
+      router.push('/')
     } else if (data.reason_code === 'INVALID_CREDENTIALS') {
       toast.error('登录已过期,请重新登录')
-          this.$router.push('/login')
+      router.push('/login')
     } else {
       toast.error(data.error || '提交失败')
     }
   } catch (e) {
-        this.isWaitingForRegister = false
+    isWaitingForRegister.value = false
     toast.error('提交失败')
   }
-    },
-  },
 }
 </script>
 

frontend_nuxt/pages/signup.vue

@@ -89,115 +89,110 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import BaseInput from '~/components/BaseInput.vue'
-import { API_BASE_URL, toast } from '~/main'
+import { toast } from '~/main'
 import { discordAuthorize } from '~/utils/discord'
 import { githubAuthorize } from '~/utils/github'
 import { googleAuthorize } from '~/utils/google'
 import { twitterAuthorize } from '~/utils/twitter'
-export default {
+const config = useRuntimeConfig()
-  name: 'SignupPageView',
+const API_BASE_URL = config.public.apiBaseUrl
-  components: { BaseInput },
+const emailStep = ref(0)
-  setup() {
+const email = ref('')
-    return { googleAuthorize }
+const username = ref('')
-  },
+const password = ref('')
-  data() {
+const registerMode = ref('DIRECT')
-    return {
+const emailError = ref('')
-      emailStep: 0,
+const usernameError = ref('')
-      email: '',
+const passwordError = ref('')
-      username: '',
+const code = ref('')
-      password: '',
+const isWaitingForEmailSent = ref(false)
-      registerMode: 'DIRECT',
+const isWaitingForEmailVerified = ref(false)
-      emailError: '',
+
-      usernameError: '',
+onMounted(async () => {
-      passwordError: '',
+  username.value = route.query.u || ''
-      code: '',
-      isWaitingForEmailSent: false,
-      isWaitingForEmailVerified: false,
-    }
-  },
-  async mounted() {
-    this.username = this.$route.query.u || ''
   try {
     const res = await fetch(`${API_BASE_URL}/api/config`)
     if (res.ok) {
       const data = await res.json()
-        this.registerMode = data.registerMode
+      registerMode.value = data.registerMode
     }
   } catch {
     /* ignore */
   }
-    if (this.$route.query.verify) {
+  if (route.query.verify) {
-      this.emailStep = 1
+    emailStep.value = 1
   }
-  },
+})
-  methods: {
+
-    clearErrors() {
+const clearErrors = () => {
-      this.emailError = ''
+  emailError.value = ''
-      this.usernameError = ''
+  usernameError.value = ''
-      this.passwordError = ''
+  passwordError.value = ''
-    },
+}
-    async sendVerification() {
+
-      this.clearErrors()
+const sendVerification = async () => {
+  clearErrors()
   const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-      if (!emailRegex.test(this.email)) {
+  if (!emailRegex.test(email.value)) {
-        this.emailError = '邮箱格式不正确'
+    emailError.value = '邮箱格式不正确'
   }
-      if (!this.password || this.password.length < 6) {
+  if (!password.value || password.value.length < 6) {
-        this.passwordError = '密码至少6位'
+    passwordError.value = '密码至少6位'
   }
-      if (!this.username) {
+  if (!username.value) {
-        this.usernameError = '用户名不能为空'
+    usernameError.value = '用户名不能为空'
   }
-      if (this.emailError || this.passwordError || this.usernameError) {
+  if (emailError.value || passwordError.value || usernameError.value) {
     return
   }
   try {
-        this.isWaitingForEmailSent = true
+    isWaitingForEmailSent.value = true
     const res = await fetch(`${API_BASE_URL}/api/auth/register`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
-            username: this.username,
+        username: username.value,
-            email: this.email,
+        email: email.value,
-            password: this.password,
+        password: password.value,
       }),
     })
-        this.isWaitingForEmailSent = false
+    isWaitingForEmailSent.value = false
     const data = await res.json()
     if (res.ok) {
-          this.emailStep = 1
+      emailStep.value = 1
       toast.success('验证码已发送，请查看邮箱')
     } else if (data.field) {
-          if (data.field === 'username') this.usernameError = data.error
+      if (data.field === 'username') usernameError.value = data.error
-          if (data.field === 'email') this.emailError = data.error
+      if (data.field === 'email') emailError.value = data.error
-          if (data.field === 'password') this.passwordError = data.error
+      if (data.field === 'password') passwordError.value = data.error
     } else {
       toast.error(data.error || '发送失败')
     }
   } catch (e) {
     toast.error('发送失败')
   }
-    },
+}
-    async verifyCode() {
+
+const verifyCode = async () => {
   try {
-        this.isWaitingForEmailVerified = true
+    isWaitingForEmailVerified.value = true
     const res = await fetch(`${API_BASE_URL}/api/auth/verify`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
-            code: this.code,
+        code: code.value,
-            username: this.username,
+        username: username.value,
       }),
     })
     const data = await res.json()
     if (res.ok) {
-          if (this.registerMode === 'WHITELIST') {
+      if (registerMode.value === 'WHITELIST') {
-            this.$router.push('/signup-reason?token=' + data.token)
+        router.push('/signup-reason?token=' + data.token)
       } else {
         toast.success('注册成功，请登录')
-            this.$router.push('/login')
+        router.push('/login')
       }
     } else {
       toast.error(data.error || '注册失败')
@@ -205,19 +200,17 @@ export default {
   } catch (e) {
     toast.error('注册失败')
   } finally {
-        this.isWaitingForEmailVerified = false
+    isWaitingForEmailVerified.value = false
   }
-    },
+}
-    signupWithGithub() {
+const signupWithGithub = () => {
   githubAuthorize()
-    },
+}
-    signupWithDiscord() {
+const signupWithDiscord = () => {
   discordAuthorize()
-    },
+}
-    signupWithTwitter() {
+const signupWithTwitter = () => {
   twitterAuthorize()
-    },
-  },
 }
 </script>