use default props

src/shared/components/CodeEditor.vue

@@ -22,21 +22,19 @@ interface Props {
   placeholder?: string
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  language: "Python3",
-  fontSize: 20,
-  height: "100%",
-  readonly: false,
-  placeholder: "",
-})
-
-const { readonly, placeholder, height, fontSize } = toRefs(props)
+const {
+  language = "Python3",
+  fontSize = 20,
+  height = "100%",
+  readonly = false,
+  placeholder = "",
+} = defineProps<Props>()
 const code = defineModel<string>("value")
 
 const isDark = useDark()
 
 const langExtension = computed(() => {
-  return ["Python2", "Python3"].includes(props.language) ? python() : cpp()
+  return ["Python2", "Python3"].includes(language) ? python() : cpp()
 })
 
 const extensions = computed(() => [
@@ -45,7 +43,7 @@ const extensions = computed(() => [
   bracketMatching(),
   closeBrackets(),
   autocompletion({
-    override: [enhanceCompletion(props.language), completeAnyWord],
+    override: [enhanceCompletion(language), completeAnyWord],
   }),
   isDark.value ? oneDark : smoothy,
 ])

src/shared/components/FlowchartEditor/CustomNode.vue

@@ -78,7 +78,7 @@ const emit = defineEmits<Emits>()
 const isHovered = ref(false)
 const isEditing = ref(false)
 const editText = ref("")
-const editInput = ref<HTMLInputElement>()
+const editInput = useTemplateRef<HTMLInputElement>("editInput")
 
 // 定时器和事件处理器
 let hideTimeout: ReturnType<typeof setTimeout> | null = null

src/shared/components/FlowchartEditor/index.vue

@@ -26,9 +26,7 @@ interface Props {
   height?: string
 }
 
-withDefaults(defineProps<Props>(), {
-  height: "calc(100vh - 133px)",
-})
+const { height = "calc(100vh - 133px)" } = defineProps<Props>()
 
 // Vue Flow 实例
 const { addEdges, removeNodes, removeEdges } = useVueFlow()

src/shared/components/Login.vue

@@ -17,7 +17,7 @@ const {
   loginLoading: isLoading,
   loginError: msg,
 } = storeToRefs(authStore)
-const loginRef = ref()
+const loginRef = useTemplateRef("loginRef")
 const classUserOptions = ref<SelectOption[]>([])
 const classUserLoading = ref(false)
 const isClassLogin = computed(() => Boolean(form.value.class))

src/shared/components/Pagination.vue

@@ -7,17 +7,14 @@ interface Props {
   page: number
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  limit: 10,
-  page: 1,
-})
+const { total, limit: initialLimit = 10, page: initialPage = 1 } = defineProps<Props>()
 
 const emit = defineEmits(["update:limit", "update:page"])
 
 const { isDesktop } = useBreakpoints()
 
-const limit = ref(props.limit)
-const page = ref(props.page)
+const limit = ref(initialLimit)
+const page = ref(initialPage)
 const sizes = [10, 30, 50]
 
 watch(limit, () => emit("update:limit", limit))
@@ -26,9 +23,9 @@ watch(page, () => emit("update:page", page))
 
 <template>
   <n-pagination
-    v-if="props.total"
+    v-if="total"
     class="right margin"
-    :item-count="props.total"
+    :item-count="total"
     v-model:page="page"
     v-model:page-size="limit"
     :page-sizes="sizes"

src/shared/components/Signup.vue

@@ -12,7 +12,7 @@ const {
   signupError: msg,
   captchaSrc,
 } = storeToRefs(authStore)
-const signupRef = ref()
+const signupRef = useTemplateRef("signupRef")
 
 const rules: FormRules = {
   username: [{ required: true, message: "用户名必填", trigger: "blur" }],

src/shared/components/SyncCodeEditor.vue

@@ -36,15 +36,15 @@ interface Props {
   placeholder?: string
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  language: "Python3",
-  fontSize: 20,
-  height: "100%",
-  readonly: false,
-  placeholder: "",
-})
-
-const { readonly, placeholder, height, fontSize } = toRefs(props)
+const {
+  sync,
+  problem,
+  language = "Python3",
+  fontSize = 20,
+  height = "100%",
+  readonly = false,
+  placeholder = "",
+} = defineProps<Props>()
 const code = defineModel<string>("value")
 
 const emit = defineEmits<{
@@ -57,7 +57,7 @@ const emit = defineEmits<{
 const { isDesktop } = useBreakpoints()
 
 const langExtension = computed((): Extension => {
-  return ["Python2", "Python3"].includes(props.language) ? python() : cpp()
+  return ["Python2", "Python3"].includes(language) ? python() : cpp()
 })
 
 const extensions = computed(() => [
@@ -67,7 +67,7 @@ const extensions = computed(() => [
   closeBrackets(),
   isDark.value ? oneDark : smoothy,
   autocompletion({
-    override: [enhanceCompletion(props.language), completeAnyWord],
+    override: [enhanceCompletion(language), completeAnyWord],
   }),
   getInitialExtension(),
 ])
@@ -85,12 +85,12 @@ const cleanupSyncResources = () => {
 }
 
 const initSync = async () => {
-  if (!editorView.value || !props.problem || !isDesktop.value) return
+  if (!editorView.value || !problem || !isDesktop.value) return
 
   cleanupSyncResources()
 
   cleanupSync = await startSync({
-    problemId: props.problem,
+    problemId: problem,
     editorView: editorView.value as EditorView,
     onStatusChange: (status) => {
       // 处理需要断开同步的情况
@@ -108,13 +108,13 @@ const initSync = async () => {
 
 const handleEditorReady = (payload: EditorReadyPayload) => {
   editorView.value = payload.view as EditorView
-  if (props.sync) {
+  if (sync) {
     initSync()
   }
 }
 
 watch(
-  () => props.sync,
+  () => sync,
   (shouldSync) => {
     if (shouldSync) {
       initSync()
@@ -125,9 +125,9 @@ watch(
 )
 
 watch(
-  () => props.problem,
+  () => problem,
   (newProblem, oldProblem) => {
-    if (newProblem !== oldProblem && props.sync) {
+    if (newProblem !== oldProblem && sync) {
       initSync()
     }
   },

src/shared/components/TextEditor.vue

@@ -17,10 +17,7 @@ interface Props {
 const rawHtml = defineModel<string>("value")
 type InsertFnType = (url: string, alt: string, href: string) => void
 
-const props = withDefaults(defineProps<Props>(), {
-  minHeight: 0,
-  simple: false,
-})
+const { title, minHeight = 0, simple = false } = defineProps<Props>()
 
 const message = useMessage()
 
@@ -112,17 +109,17 @@ async function customUpload(file: File, insertFn: InsertFnType) {
 </script>
 
 <template>
-  <div class="title" v-if="props.title">{{ props.title }}</div>
+  <div class="title" v-if="title">{{ title }}</div>
   <div class="editorWrapper">
     <Toolbar
       class="toolbar"
       :editor="toolbarEditorRef"
-      :defaultConfig="props.simple ? toolbarConfigSimple : toolbarConfig"
+      :defaultConfig="simple ? toolbarConfigSimple : toolbarConfig"
       mode="simple"
     />
     <Editor
       @click="onClick"
-      :style="{ minHeight: props.minHeight + 'px' }"
+      :style="{ minHeight: minHeight + 'px' }"
       v-model="rawHtml"
       :defaultConfig="editorConfig"
       mode="simple"