This is an automated email from the ASF dual-hosted git repository.
wuzhiguo pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/bigtop-manager.git
The following commit(s) were added to refs/heads/main by this push:
new 65af28b8 BIGTOP-4510: Add usePngImage composable with default PNG
fallback (#284)
65af28b8 is described below
commit 65af28b8c22d6486c7833e55328e009e9cfe2a26
Author: Fdefined <[email protected]>
AuthorDate: Thu Nov 20 13:48:34 2025 +0800
BIGTOP-4510: Add usePngImage composable with default PNG fallback (#284)
---
.../src/components/base/header-card/index.vue | 2 +-
bigtop-manager-ui/src/composables/use-png-image.ts | 25 ++++++++++++++++++++++
.../src/features/ai-assistant/empty-content.vue | 2 +-
.../create-service/components/service-selector.vue | 22 ++++++-------------
bigtop-manager-ui/src/layouts/default.vue | 2 +-
.../src/pages/cluster-manage/cluster/overview.vue | 2 +-
.../src/pages/cluster-manage/cluster/service.vue | 2 +-
.../src/pages/cluster-manage/hosts/overview.vue | 3 ++-
.../cluster-manage/infrastructures/service.vue | 2 +-
.../llm-config/components/llm-item.vue | 2 +-
bigtop-manager-ui/src/utils/tools.ts | 10 ---------
11 files changed, 40 insertions(+), 34 deletions(-)
diff --git a/bigtop-manager-ui/src/components/base/header-card/index.vue
b/bigtop-manager-ui/src/components/base/header-card/index.vue
index 1de8c149..bb6a7e34 100644
--- a/bigtop-manager-ui/src/components/base/header-card/index.vue
+++ b/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'
diff --git a/bigtop-manager-ui/src/composables/use-png-image.ts
b/bigtop-manager-ui/src/composables/use-png-image.ts
new file mode 100644
index 00000000..8968e6d6
--- /dev/null
+++ b/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)
+}
diff --git a/bigtop-manager-ui/src/features/ai-assistant/empty-content.vue
b/bigtop-manager-ui/src/features/ai-assistant/empty-content.vue
index c8362ec2..bdbeb577 100644
--- a/bigtop-manager-ui/src/features/ai-assistant/empty-content.vue
+++ b/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 {
diff --git
a/bigtop-manager-ui/src/features/create-service/components/service-selector.vue
b/bigtop-manager-ui/src/features/create-service/components/service-selector.vue
index c46e87fd..25527d4b 100644
---
a/bigtop-manager-ui/src/features/create-service/components/service-selector.vue
+++
b/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>
diff --git a/bigtop-manager-ui/src/layouts/default.vue
b/bigtop-manager-ui/src/layouts/default.vue
index 92bf941b..530ac53b 100644
--- a/bigtop-manager-ui/src/layouts/default.vue
+++ b/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>
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
b/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
index 51f13c87..abf3f32b 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/overview.vue
+++ b/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'
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
b/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
index 4bcf6f97..a5256d8e 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/cluster/service.vue
+++ b/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'
diff --git a/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue
b/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue
index 78be5a3a..95689567 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/hosts/overview.vue
+++ b/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'
diff --git
a/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/service.vue
b/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/service.vue
index 04da3813..20b081ea 100644
--- a/bigtop-manager-ui/src/pages/cluster-manage/infrastructures/service.vue
+++ b/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'
diff --git
a/bigtop-manager-ui/src/pages/system-manage/llm-config/components/llm-item.vue
b/bigtop-manager-ui/src/pages/system-manage/llm-config/components/llm-item.vue
index a58f6e46..aa7e7b23 100644
---
a/bigtop-manager-ui/src/pages/system-manage/llm-config/components/llm-item.vue
+++
b/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 {
diff --git a/bigtop-manager-ui/src/utils/tools.ts
b/bigtop-manager-ui/src/utils/tools.ts
index 2b3cb572..49b09787 100644
--- a/bigtop-manager-ui/src/utils/tools.ts
+++ b/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.
*
