BIGTOP-4510: Add usePngImage composable with default PNG fallback

bigtop-manager-ui/src/components/base/header-card/index.vue

@@ -18,7 +18,7 @@
 -->
 
 <script setup lang="ts">
-  import { usePngImage } from '@/utils/tools'
+  import { usePngImage } from '@/composables/use-png-image'
 
   import type { GroupItem } from '@/components/common/button-group/types'
 

bigtop-manager-ui/src/composables/use-png-image.ts

@@ -0,0 +1,25 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *    https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const images = import.meta.glob('../assets/images/*.png', { eager: true, import: 'default' })
+
+export function usePngImage(imageName: string = 'logo'): string {
+  const path = `../assets/images/${imageName}.png`
+  return (images[path] as string) || (images['../assets/images/logo.png'] as string)
+}

bigtop-manager-ui/src/features/ai-assistant/empty-content.vue

@@ -17,7 +17,7 @@
   ~ under the License.
   -->
 <script setup lang="ts">
-  import { usePngImage } from '@/utils/tools'
+  import { usePngImage } from '@/composables/use-png-image'
   import { useAiChatStore } from '@/store/ai-assistant'
 
   interface Emits {

bigtop-manager-ui/src/features/create-service/components/service-selector.vue

@@ -18,7 +18,7 @@
 -->
 
 <script setup lang="ts">
-  import { usePngImage } from '@/utils/tools'
+  import { usePngImage } from '@/composables/use-png-image'
   import { useStackStore } from '@/store/stack'
   import { useServiceStore } from '@/store/service'
   import { useCreateServiceStore } from '@/store/create-service'
@@ -104,7 +104,7 @@
     }
   }
 
-  const splitSearchStr = (splitStr: string) => {
+  const splitSearchStr = (splitStr: string = '--') => {
     return splitStr.toString().split(new RegExp(`(?<=${searchStr.value})|(?=${searchStr.value})`, 'i'))
   }
 
@@ -241,7 +241,7 @@
                     </template>
                   </div>
                   <a-tag :color="licenseOfConflictService.includes(item.license) ? 'error' : 'success'">
-                    <span class="item-tag">{{ item.license }}</span>
+                    <span class="item-tag">{{ item.license ?? '--' }}</span>
                   </a-tag>
                 </div>
               </template>
@@ -256,12 +256,7 @@
                 </div>
               </template>
               <template #avatar>
-                <a-avatar
-                  v-if="item.displayName"
-                  :src="usePngImage(item.displayName.toLowerCase())"
-                  :size="54"
-                  class="header-icon"
-                />
+                <a-avatar :src="usePngImage(item.name.toLowerCase())" :size="54" class="header-icon" />
               </template>
             </a-list-item-meta>
           </a-list-item>
@@ -288,7 +283,7 @@
                     {{ item.displayName }}
                   </div>
                   <a-tag :color="licenseOfConflictService.includes(item.license) ? 'error' : 'success'">
-                    <span class="item-tag">{{ item.license }}</span>
+                    <span class="item-tag">{{ item.license ?? '--' }}</span>
                   </a-tag>
                 </div>
               </template>
@@ -298,12 +293,7 @@
                 </div>
               </template>
               <template #avatar>
-                <a-avatar
-                  v-if="item.displayName"
-                  :src="usePngImage(item.displayName.toLowerCase())"
-                  :size="54"
-                  class="header-icon"
-                />
+                <a-avatar :src="usePngImage(item.name.toLowerCase())" :size="54" class="header-icon" />
               </template>
             </a-list-item-meta>
           </a-list-item>

bigtop-manager-ui/src/layouts/default.vue

@@ -18,7 +18,7 @@
 -->
 
 <script setup lang="ts">
-  import { usePngImage } from '@/utils/tools'
+  import { usePngImage } from '@/composables/use-png-image'
   const { t } = useI18n()
 </script>
 

bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue

@@ -19,7 +19,7 @@
 
 <script setup lang="ts">
   import { formatFromByte } from '@/utils/storage'
-  import { usePngImage } from '@/utils/tools'
+  import { usePngImage } from '@/composables/use-png-image'
   import { CommonStatus } from '@/enums/state'
   import { TIME_RANGES, STATUS_COLOR, POLLING_INTERVAL } from '@/utils/constant'
 

bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue

@@ -23,7 +23,7 @@
   import { CommonStatus } from '@/enums/state'
   import { useJobProgress } from '@/store/job-progress'
   import { useTabStore } from '@/store/tab-state'
-  import { usePngImage } from '@/utils/tools'
+  import { usePngImage } from '@/composables/use-png-image'
   import { STATUS_COLOR } from '@/utils/constant'
 
   import type { GroupItem } from '@/components/common/button-group/types'

bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue

@@ -20,8 +20,9 @@
 <script setup lang="ts">
   import { Empty } from 'ant-design-vue'
   import { formatFromByte } from '@/utils/storage.ts'
-  import { usePngImage, isEmpty } from '@/utils/tools'
+  import { isEmpty } from '@/utils/tools'
   import { TIME_RANGES, STATUS_COLOR, POLLING_INTERVAL } from '@/utils/constant'
+  import { usePngImage } from '@/composables/use-png-image'
   import { CommonStatus } from '@/enums/state.ts'
 
   import { useServiceStore } from '@/store/service'

bigtop-manager-ui/src/pages/cluster-manage/infrastructures/service.vue

@@ -23,7 +23,7 @@
   import { useJobProgress } from '@/store/job-progress'
 
   import { CommonStatus } from '@/enums/state'
-  import { usePngImage } from '@/utils/tools'
+  import { usePngImage } from '@/composables/use-png-image'
   import { STATUS_COLOR } from '@/utils/constant'
 
   import type { ServiceVO } from '@/api/service/types'

bigtop-manager-ui/src/pages/system-manage/llm-config/components/llm-item.vue

@@ -26,7 +26,7 @@
     type AuthPlatformStatusType
   } from '@/api/llm-config/types'
   import type { MenuItemType } from 'ant-design-vue/es/menu/src/interface'
-  import { usePngImage } from '@/utils/tools'
+  import { usePngImage } from '@/composables/use-png-image'
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   enum Actions {

bigtop-manager-ui/src/utils/tools.ts

@@ -55,16 +55,6 @@ export function copyText(text: string): Promise<any> {
   })
 }
 
-/**
- * Returns the URL of a PNG image from the assets folder.
- *
- * @param imageName - The name of the image (default is 'logo').
- * @returns The URL of the image.
- */
-export function usePngImage(imageName: string = 'logo'): string {
-  return new URL(`../assets/images/${imageName}.png`, import.meta.url).href
-}
-
 /**
  * Scrolls the given container element to the bottom.
  *