refactor:

viva-jinyi · viva-jinyi · commit 466f39c04a9a · 2025-10-29T12:11:45.000+09:00
- refactor(components): Use defineModel in TabList.vue for cleaner v-model implementation
- refactor(components): Extract MediaTitle component to eliminate duplication across media bottom components
  - Consolidate title rendering logic from MediaImageBottom, MediaVideoBottom, MediaAudioBottom, Media3DBottom
  - Improve code reusability and maintainability
- refactor(composables): Restructure useMediaAssets directory structure
  - Rename directory from 'useMediaAssets' to 'media'
  - Rename index.ts to useMediaAssets.ts to avoid index pattern
  - Update all import paths accordingly
- refactor(utils): Simplify UUID utility exports
  - Remove isValidUuid wrapper function
  - Export validate directly from uuid library
  - Update tests to use validate instead of isValidUuid
- test(formatUtil): Apply it.for pattern for better test readability
  - Convert repetitive test cases to data-driven tests using it.for
diff --git a/src/components/sidebar/tabs/AssetsSidebarTab.vue b/src/components/sidebar/tabs/AssetsSidebarTab.vue
@@ -100,7 +100,7 @@ import Tab from '@/components/tab/Tab.vue'
 import TabList from '@/components/tab/TabList.vue'
 import { t } from '@/i18n'
 import MediaAssetCard from '@/platform/assets/components/MediaAssetCard.vue'
-import { useMediaAssets } from '@/platform/assets/composables/useMediaAssets'
+import { useMediaAssets } from '@/platform/assets/composables/media/useMediaAssets'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { ResultItemImpl } from '@/stores/queueStore'
diff --git a/src/components/tab/TabList.vue b/src/components/tab/TabList.vue
@@ -5,17 +5,13 @@
 </template>
 
 <script setup lang="ts">
-import { provide, toRef } from 'vue'
+import { provide } from 'vue'
 
-const props = defineProps<{
-  modelValue: string
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: string]
-}>()
+const modelValue = defineModel<string>({ required: true })
 
 // Provide for child Tab components
-provide('tabs-value', toRef(props, 'modelValue'))
-provide('tabs-update', (value: string) => emit('update:modelValue', value))
+provide('tabs-value', modelValue)
+provide('tabs-update', (value: string) => {
+  modelValue.value = value
+})
 </script>
diff --git a/src/platform/assets/components/Media3DBottom.vue b/src/platform/assets/components/Media3DBottom.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="flex flex-col items-center gap-1">
-    <h3
-      class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
-      :title="asset.name"
-    >
-      {{ truncateFilename(fileName) }}
-    </h3>
+    <MediaTitle :file-name="fileName" />
     <div class="flex items-center gap-2 text-xs text-zinc-400">
       <span>{{ formatSize(asset.size) }}</span>
     </div>
@@ -15,13 +10,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import {
-  formatSize,
-  getFilenameDetails,
-  truncateFilename
-} from '@/utils/formatUtil'
+import { formatSize, getFilenameDetails } from '@/utils/formatUtil'
 
 import type { AssetMeta } from '../schemas/mediaAssetSchema'
+import MediaTitle from './MediaTitle.vue'
 
 const { asset } = defineProps<{
   asset: AssetMeta
diff --git a/src/platform/assets/components/MediaAssetCard.vue b/src/platform/assets/components/MediaAssetCard.vue
@@ -143,8 +143,8 @@ import SquareChip from '@/components/chip/SquareChip.vue'
 import { formatDuration, getMediaTypeFromFilename } from '@/utils/formatUtil'
 import { cn } from '@/utils/tailwindUtil'
 
+import { getAssetType } from '../composables/media/assetMappers'
 import { useMediaAssetActions } from '../composables/useMediaAssetActions'
-import { getAssetType } from '../composables/useMediaAssets/assetMappers'
 import type { AssetItem } from '../schemas/assetSchema'
 import type { MediaKind } from '../schemas/mediaAssetSchema'
 import { MediaAssetKey } from '../schemas/mediaAssetSchema'
diff --git a/src/platform/assets/components/MediaAudioBottom.vue b/src/platform/assets/components/MediaAudioBottom.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="flex flex-col items-center gap-1">
-    <h3
-      class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
-      :title="asset.name"
-    >
-      {{ truncateFilename(fileName) }}
-    </h3>
+    <MediaTitle :file-name="fileName" />
     <div class="flex items-center gap-2 text-xs text-zinc-400">
       <span>{{ formatSize(asset.size) }}</span>
     </div>
@@ -15,13 +10,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import {
-  formatSize,
-  getFilenameDetails,
-  truncateFilename
-} from '@/utils/formatUtil'
+import { formatSize, getFilenameDetails } from '@/utils/formatUtil'
 
 import type { AssetContext, AssetMeta } from '../schemas/mediaAssetSchema'
+import MediaTitle from './MediaTitle.vue'
 
 const { asset } = defineProps<{
   asset: AssetMeta
diff --git a/src/platform/assets/components/MediaImageBottom.vue b/src/platform/assets/components/MediaImageBottom.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="flex flex-col items-center gap-1">
-    <h3
-      class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
-      :title="asset.name"
-    >
-      {{ truncateFilename(fileName) }}
-    </h3>
+    <MediaTitle :file-name="fileName" />
     <div class="flex items-center text-xs text-zinc-400">
       <span v-if="asset.dimensions"
         >{{ asset.dimensions?.width }}x{{ asset.dimensions?.height }}</span
@@ -17,9 +12,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { getFilenameDetails, truncateFilename } from '@/utils/formatUtil'
+import { getFilenameDetails } from '@/utils/formatUtil'
 
 import type { AssetContext, AssetMeta } from '../schemas/mediaAssetSchema'
+import MediaTitle from './MediaTitle.vue'
 
 const { asset } = defineProps<{
   asset: AssetMeta
diff --git a/src/platform/assets/components/MediaTitle.vue b/src/platform/assets/components/MediaTitle.vue
@@ -0,0 +1,21 @@
+<template>
+  <h3
+    class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
+    :title="fullName"
+  >
+    {{ displayName }}
+  </h3>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { truncateFilename } from '@/utils/formatUtil'
+
+const props = defineProps<{
+  fileName: string
+}>()
+
+const fullName = computed(() => props.fileName)
+const displayName = computed(() => truncateFilename(props.fileName))
+</script>
diff --git a/src/platform/assets/components/MediaVideoBottom.vue b/src/platform/assets/components/MediaVideoBottom.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="flex flex-col items-center gap-1">
-    <h3
-      class="m-0 line-clamp-1 text-sm font-bold text-zinc-900 dark-theme:text-white"
-      :title="asset.name"
-    >
-      {{ truncateFilename(fileName) }}
-    </h3>
+    <MediaTitle :file-name="fileName" />
     <div class="flex items-center text-xs text-zinc-400">
       <span>{{ formatSize(asset.size) }}</span>
     </div>
@@ -15,13 +10,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import {
-  formatSize,
-  getFilenameDetails,
-  truncateFilename
-} from '@/utils/formatUtil'
+import { formatSize, getFilenameDetails } from '@/utils/formatUtil'
 
 import type { AssetContext, AssetMeta } from '../schemas/mediaAssetSchema'
+import MediaTitle from './MediaTitle.vue'
 
 const { asset } = defineProps<{
   asset: AssetMeta
diff --git a/src/platform/assets/composables/media/IAssetsProvider.ts b/src/platform/assets/composables/media/IAssetsProvider.ts
diff --git a/src/platform/assets/composables/media/assetMappers.ts b/src/platform/assets/composables/media/assetMappers.ts
diff --git a/src/platform/assets/composables/media/useAssetsApi.ts b/src/platform/assets/composables/media/useAssetsApi.ts
diff --git a/src/platform/assets/composables/media/useInternalFilesApi.ts b/src/platform/assets/composables/media/useInternalFilesApi.ts
diff --git a/src/platform/assets/composables/media/useMediaAssets.ts b/src/platform/assets/composables/media/useMediaAssets.ts
diff --git a/src/stores/assetsStore.ts b/src/stores/assetsStore.ts
@@ -5,7 +5,7 @@ import { computed } from 'vue'
 import {
   mapInputFileToAssetItem,
   mapTaskOutputToAssetItem
-} from '@/platform/assets/composables/useMediaAssets/assetMappers'
+} from '@/platform/assets/composables/media/assetMappers'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { assetService } from '@/platform/assets/services/assetService'
 import { isCloud } from '@/platform/distribution/types'
diff --git a/src/utils/uuidUtil.ts b/src/utils/uuidUtil.ts
@@ -1,18 +1,21 @@
-import { validate as uuidValidate } from 'uuid'
+import { validate } from 'uuid'
 
 /**
  * UUID utility functions
+ * Used for extracting prompt IDs from asset IDs in the media assets feature
  */
 
 /**
  * Regular expression for matching UUID format at the beginning of a string
  * Format: 8-4-4-4-12 (e.g., 98b0b007-7d78-4e3f-b7a8-0f483b9cf2d3)
+ * Example use case: "98b0b007-7d78-4e3f-b7a8-0f483b9cf2d3-nodeId-filename.png"
  */
 const UUID_REGEX =
   /^([a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12})/i
 
 /**
  * Extract UUID from the beginning of a string
+ * Used when asset IDs contain UUIDs as prefixes (e.g., "uuid-nodeId-filename")
  * @param str - The string to extract UUID from
  * @returns The extracted UUID or null if not found
  */
@@ -21,17 +24,7 @@ export function extractUuidFromString(str: string): string | null {
   if (!match) return null
 
   const uuid = match[1]
-  // Validate the extracted string is a valid UUID
-  return uuidValidate(uuid) ? uuid : null
-}
-
-/**
- * Check if a string is a valid UUID (any version)
- * @param str - The string to check
- * @returns true if the string is a valid UUID
- */
-export function isValidUuid(str: string): boolean {
-  return uuidValidate(str)
+  return validate(uuid) ? uuid : null
 }
 
 /**
diff --git a/tests-ui/tests/utils/formatUtil.test.ts b/tests-ui/tests/utils/formatUtil.test.ts
@@ -46,14 +46,21 @@ describe('formatUtil', () => {
 
   describe('getMediaTypeFromFilename', () => {
     describe('image files', () => {
-      it('should identify image extensions correctly', () => {
-        expect(getMediaTypeFromFilename('test.png')).toBe('image')
-        expect(getMediaTypeFromFilename('photo.jpg')).toBe('image')
-        expect(getMediaTypeFromFilename('image.jpeg')).toBe('image')
-        expect(getMediaTypeFromFilename('animation.gif')).toBe('image')
-        expect(getMediaTypeFromFilename('web.webp')).toBe('image')
-        expect(getMediaTypeFromFilename('bitmap.bmp')).toBe('image')
-      })
+      const imageTestCases = [
+        { filename: 'test.png', expected: 'image' },
+        { filename: 'photo.jpg', expected: 'image' },
+        { filename: 'image.jpeg', expected: 'image' },
+        { filename: 'animation.gif', expected: 'image' },
+        { filename: 'web.webp', expected: 'image' },
+        { filename: 'bitmap.bmp', expected: 'image' }
+      ]
+
+      it.for(imageTestCases)(
+        'should identify $filename as $expected',
+        ({ filename, expected }) => {
+          expect(getMediaTypeFromFilename(filename)).toBe(expected)
+        }
+      )
 
       it('should handle uppercase extensions', () => {
         expect(getMediaTypeFromFilename('test.PNG')).toBe('image')
diff --git a/tests-ui/tests/utils/uuidUtil.test.ts b/tests-ui/tests/utils/uuidUtil.test.ts
@@ -2,9 +2,9 @@ import { describe, expect, it } from 'vitest'
 
 import {
   extractPromptIdFromAssetId,
-  extractUuidFromString,
-  isValidUuid
+  extractUuidFromString
 } from '@/utils/uuidUtil'
+import { validate } from 'uuid'
 
 describe('uuidUtil', () => {
   describe('extractUuidFromString', () => {
@@ -56,49 +56,49 @@ describe('uuidUtil', () => {
     })
   })
 
-  describe('isValidUuid', () => {
+  describe('validate', () => {
     it('should return true for valid UUID v4', () => {
       const uuid = '98b0b007-7d78-4e3f-b7a8-0f483b9cf2d3'
-      expect(isValidUuid(uuid)).toBe(true)
+      expect(validate(uuid)).toBe(true)
     })
 
     it('should return true for uppercase UUID', () => {
       const uuid = 'A8B0B007-7D78-4E3F-B7A8-0F483B9CF2D3'
-      expect(isValidUuid(uuid)).toBe(true)
+      expect(validate(uuid)).toBe(true)
     })
 
     it('should return true for mixed case UUID', () => {
       const uuid = 'a8B0b007-7D78-4e3F-B7a8-0F483b9CF2d3'
-      expect(isValidUuid(uuid)).toBe(true)
+      expect(validate(uuid)).toBe(true)
     })
 
     it('should return false for UUID with extra characters', () => {
       const uuid = '98b0b007-7d78-4e3f-b7a8-0f483b9cf2d3-extra'
-      expect(isValidUuid(uuid)).toBe(false)
+      expect(validate(uuid)).toBe(false)
     })
 
     it('should return false for incomplete UUID', () => {
       const uuid = '98b0b007-7d78-4e3f-b7a8'
-      expect(isValidUuid(uuid)).toBe(false)
+      expect(validate(uuid)).toBe(false)
     })
 
     it('should return false for UUID with wrong segment lengths', () => {
       const uuid = '98b0b0007-7d78-4e3f-b7a8-0f483b9cf2d3'
-      expect(isValidUuid(uuid)).toBe(false)
+      expect(validate(uuid)).toBe(false)
     })
 
     it('should return false for UUID with invalid characters', () => {
       const uuid = '98b0b007-7d78-4e3f-b7a8-0f483b9cfzd3'
-      expect(isValidUuid(uuid)).toBe(false)
+      expect(validate(uuid)).toBe(false)
     })
 
     it('should return false for empty string', () => {
-      expect(isValidUuid('')).toBe(false)
+      expect(validate('')).toBe(false)
     })
 
     it('should return false for null-like values', () => {
-      expect(isValidUuid('null')).toBe(false)
-      expect(isValidUuid('undefined')).toBe(false)
+      expect(validate('null')).toBe(false)
+      expect(validate('undefined')).toBe(false)
     })
   })
 
