feat: implement useListEvents composable and refactor related components

Author: bubaley

…ate/composables/useTemplateListEvents.ts …/app/shared/composables/useListEvents.tsfrontend/app/shared/ui/template/composables/useTemplateListEvents.ts renamed to frontend/app/shared/composables/useListEvents.ts frontend/app/shared/ui/template/composables/useTemplateListEvents.ts renamed to frontend/app/shared/composables/useListEvents.ts

@@ -3,7 +3,7 @@ export type AppListEventsConfig<T> = {
   key: keyof T
 }
 
-export const useTemplateListEvents = <T>(config: AppListEventsConfig<T>) => {
+export const useListEvents = <T>(config: AppListEventsConfig<T>) => {
   const items = computed(() => (isRef(config.items) ? config.items.value : config.items))
 
   const findListItemIndex = (value: T) => {

frontend/app/shared/composables/useWebSocket.ts

@@ -16,32 +16,67 @@ export interface UseWebSocketOptions {
   immediate?: boolean
 }
 
-export function useWebSocketService(channel: MaybeRefOrGetter<string | null>, options: UseWebSocketOptions = {}) {
+const resolveChannelValue = (channel: MaybeRefOrGetter<string | null>): string | null => {
+  if (typeof channel === 'function') return channel()
+  if (isRef(channel)) return channel.value
+  return channel
+}
+
+const resolveWsBaseUrl = (): string | undefined => {
   const config = useRuntimeConfig()
-  const baseUrl = config.public.wsURL as string | undefined
+  const explicit = config.public.wsURL as string | undefined
+  if (explicit?.trim()) {
+    return explicit.replace(/\/+$/, '')
+  }
+
+  const baseUrl = config.public.baseUrl as string | undefined
+  if (!baseUrl?.trim()) return undefined
+
+  try {
+    const url = new URL(baseUrl)
+    url.protocol = url.protocol === 'https:' ? 'wss:' : 'ws:'
+    url.pathname = '/ws'
+    url.search = ''
+    url.hash = ''
+    return `${url.origin}/ws`
+  } catch {
+    return undefined
+  }
+}
+
+export const useWebSocketService = (
+  channel: MaybeRefOrGetter<string | null>,
+  options: UseWebSocketOptions = {},
+) => {
+  const wsBaseUrl = resolveWsBaseUrl()
 
   const wsUrl = computed(() => {
-    let channelValue: string | null
-    if (typeof channel === 'function') {
-      channelValue = channel()
-    } else if (isRef(channel)) {
-      channelValue = channel.value
-    } else {
-      channelValue = channel
-    }
-    if (!baseUrl || !channelValue) return ''
-    return `${baseUrl}/${channelValue}`
+    const channelValue = resolveChannelValue(channel)
+    if (!wsBaseUrl || !channelValue) return undefined
+    return `${wsBaseUrl}/${channelValue.replace(/^\/+/, '')}`
   })
 
+  const closedStatus = ref<'OPEN' | 'CONNECTING' | 'CLOSED'>('CLOSED')
+
+  if (import.meta.server) {
+    return {
+      open: () => {},
+      close: () => {},
+      status: closedStatus,
+    }
+  }
+
   const { open, close, status } = useWebSocket(wsUrl, {
-    immediate: options.immediate ?? true,
+    immediate: false,
+    autoConnect: false,
+    autoClose: true,
     autoReconnect: options.autoReconnect ?? {
       delay: 1000,
-      onFailed() {
+      onFailed: () => {
         console.error('WebSocket connection failed')
       },
     },
-    onMessage(_ws: WebSocket, event: MessageEvent) {
+    onMessage: (_ws: WebSocket, event: MessageEvent) => {
       try {
         const parsed = JSON.parse(event.data) as WebSocketMessage
         if (parsed.type && options.onMessage) {
@@ -54,17 +89,21 @@ export function useWebSocketService(channel: MaybeRefOrGetter<string | null>, op
   })
 
   watch(
-    () => wsUrl.value,
+    wsUrl,
     (url) => {
       if (url) {
         open()
       } else {
         close()
       }
     },
-    { immediate: true }
+    { immediate: options.immediate ?? true },
   )
 
+  onBeforeUnmount(() => {
+    close()
+  })
+
   return {
     open,
     close,

frontend/app/shared/ui/app/AppAvatar.vue

@@ -3,6 +3,7 @@
     shape="circle"
     :size="size"
     :style="_style"
+    style="overflow: hidden"
   >
     <Image
       v-if="src"
@@ -19,15 +20,15 @@
 </template>
 
 <script lang="ts" setup>
-export type CAvatarSize = 'normal' | 'large' | 'xlarge' | 'small' | 'xsmall'
-export interface CAvatarProps {
+export type AppAvatarSize = 'normal' | 'large' | 'xlarge' | 'small' | 'xsmall'
+export interface AppAvatarProps {
   color?: string | null
   name?: string | null
   src?: string | null
-  size?: CAvatarSize
+  size?: AppAvatarSize
 }
 
-const props = withDefaults(defineProps<CAvatarProps>(), {
+const props = withDefaults(defineProps<AppAvatarProps>(), {
   size: 'normal',
 })
 

frontend/app/shared/ui/app/AppMultiSelect.vue

@@ -58,13 +58,13 @@ import type { MultiSelectProps } from 'primevue'
 import AppInput from './AppInput.vue'
 import { useSelectData, type UseSelectDataProps } from '../../composables/useSelectData'
 
-export type CMultiSelectProps<T> = Omit<MultiSelectProps, 'filterFields' | 'options'> &
+export type AppMultiSelectProps<T> = Omit<MultiSelectProps, 'filterFields' | 'options'> &
   UseSelectDataProps<T> & {
     label?: string
     class?: string
   }
 
-const props = withDefaults(defineProps<CMultiSelectProps<T>>(), {
+const props = withDefaults(defineProps<AppMultiSelectProps<T>>(), {
   showToggleAll: false,
   autoLoad: false,
   filter: true,

frontend/app/shared/ui/template/AppListTemplate.vue

@@ -152,7 +152,7 @@ const listBind = computed(
     }) as AppListProps<T>,
 )
 
-const { updateListItem, deleteListItem } = useTemplateListEvents({
+const { updateListItem, deleteListItem } = useListEvents({
   items: computed(() => repoData.items.value),
   key: 'id' as keyof T,
 })

frontend/app/shared/ui/template/composables/useDetailActions.ts

@@ -1,5 +1,4 @@
 import { last } from 'lodash-es'
-import { useTemplateListEvents } from './useTemplateListEvents'
 
 export type AppDetailActionsConfig = {
   disableNotification?: boolean
@@ -15,7 +14,7 @@ export const useDetailActions = <T extends AppModel>(repo: AppRepoStore<T>) => {
   const deleteLoading = ref(false)
   const _items = toRef(repo, 'items')
 
-  const { updateListItem, deleteListItem } = useTemplateListEvents({
+  const { updateListItem, deleteListItem } = useListEvents({
     items: _items,
     key: 'id',
   })