batch update

src/shared/composables/breakpoints.ts

@@ -1,6 +1,20 @@
-import { breakpointsTailwind } from "@vueuse/core"
+import {
+  breakpointsTailwind,
+  useBreakpoints as useVueUseBreakpoints,
+} from "@vueuse/core"
 
-const breakpoints = useBreakpoints(breakpointsTailwind)
+/**
+ * 响应式断点检测 composable
+ * 每次调用创建新的断点检测实例
+ */
+export function useBreakpoints() {
+  const breakpoints = useVueUseBreakpoints(breakpointsTailwind)
 
-export const isMobile = breakpoints.smallerOrEqual("md")
-export const isDesktop = breakpoints.greater("md")
+  const isMobile = breakpoints.smallerOrEqual("md")
+  const isDesktop = breakpoints.greater("md")
+
+  return {
+    isMobile,
+    isDesktop,
+  }
+}

src/shared/composables/modal.ts

@@ -1,2 +0,0 @@
-export const [loginModal, toggleLogin] = useToggle()
-export const [signupModal, toggleSignup] = useToggle()

src/shared/composables/pagination.ts

@@ -1,3 +1,5 @@
+import { reactive, watch } from "vue"
+import { useRoute, useRouter } from "vue-router"
 import { filterEmptyValue } from "utils/functions"
 
 export interface PaginationQuery {
@@ -17,6 +19,7 @@ export interface UsePaginationOptions {
 
 /**
  * 分页相关的 composable，处理分页状态和 URL 同步
+ * 每次调用创建新的分页状态实例
  * @param initialQuery 初始查询参数对象
  * @param options 配置选项
  */
@@ -139,6 +142,7 @@ export function usePagination<T extends Record<string, any>>(
 
 /**
  * 简化版本的分页 composable，只处理基本的分页逻辑
+ * 每次调用创建新的分页状态实例
  * @param defaultLimit 默认每页条数
  * @param defaultPage 默认页码
  */

src/shared/composables/switchScreen.ts

@@ -1,18 +0,0 @@
-import { ScreenMode } from "utils/constants"
-
-export const { state: screenMode, next: switchScreenMode } = useCycleList(
-  Object.values(ScreenMode),
-  {
-    initialValue: ScreenMode.both,
-  },
-)
-
-export function resetScreenMode() {
-  screenMode.value = ScreenMode.both
-}
-
-export const bothAndProblem = computed(
-  () =>
-    screenMode.value === ScreenMode.both ||
-    screenMode.value === ScreenMode.problem,
-)

src/shared/composables/sync.ts

@@ -1,3 +1,4 @@
+import { useMessage } from "naive-ui"
 import { useUserStore } from "../store/user"
 import type { EditorView } from "@codemirror/view"
 import { Compartment } from "@codemirror/state"
@@ -81,10 +82,15 @@ export interface SyncStatus {
   otherUser?: UserInfo
 }
 
+/**
+ * 代码同步 composable
+ * 每次调用创建新的同步实例
+ */
 export function useCodeSync() {
   const userStore = useUserStore()
   const message = useMessage()
 
+  // 每次调用创建新的实例变量
   let ydoc: Doc | null = null
   let provider: WebrtcProvider | null = null
   let ytext: Text | null = null

src/shared/composables/websocket.ts

@@ -324,37 +324,26 @@ class SubmissionWebSocket extends BaseWebSocket<SubmissionUpdate> {
   }
 }
 
-// 全局单例
-let wsInstance: SubmissionWebSocket | null = null
-
-/**
- * 获取 WebSocket 实例
- */
-export function getWebSocketInstance(): SubmissionWebSocket {
-  if (!wsInstance) {
-    wsInstance = new SubmissionWebSocket()
-  }
-  return wsInstance
-}
-
 /**
  * 用于组件中使用 WebSocket 的 Composable
+ * 每次调用创建新的 WebSocket 实例
  */
 export function useSubmissionWebSocket(
   handler?: MessageHandler<SubmissionUpdate>,
 ) {
-  const ws = getWebSocketInstance()
+  const ws = new SubmissionWebSocket()
 
   // 如果提供了处理器，添加到实例中
   if (handler) {
     ws.addHandler(handler)
   }
 
-  // 组件卸载时移除处理器
+  // 组件卸载时清理资源
   onUnmounted(() => {
     if (handler) {
       ws.removeHandler(handler)
     }
+    ws.disconnect()
   })
 
   return {