feat(media): 添加空状态检查工具函数并优化单媒体编辑器逻辑

新增 shouldShowMediaEmptyState 工具函数用于判断是否显示媒体空状态,为其编写单元测试覆盖核心场景,同时在单媒体编辑器组件中使用该函数替换原有的内联条件判断,提升代码可维护性。
This commit is contained in:
duanshuwen
2026-08-27 09:20:10 +08:00
parent 4c245f0d1f
commit e74ecea6aa
3 changed files with 12 additions and 3 deletions

View File

@@ -2,7 +2,7 @@
import { ref } from "vue";
import { uploadMediaAsset } from "@/api/client";
import { validateMediaFile } from "@/lib/media";
import { resolveAdminMediaUrl } from "@/lib/media-url";
import { resolveAdminMediaUrl, shouldShowMediaEmptyState } from "@/lib/media-url";
const props = defineProps<{
modelValue: string;
@@ -58,7 +58,7 @@ function clear() {
<el-alert v-if="error" :title="error" type="error" :closable="false" show-icon />
<el-image v-if="modelValue" class="single-media-preview" :src="previewUrl(modelValue)" fit="cover" :preview-src-list="[previewUrl(modelValue) ?? modelValue]" @error="previewError = true" />
<el-alert v-if="previewError" title="图片加载失败,请重新上传" type="warning" :closable="false" show-icon />
<el-empty v-else :image-size="48" description="暂无图片" />
<el-empty v-if="shouldShowMediaEmptyState(modelValue, previewError)" :image-size="48" description="暂无图片" />
<el-button v-if="modelValue" link type="danger" :disabled="disabled || uploading" @click="clear">移除图片</el-button>
</div>
</template>

View File

@@ -1,5 +1,5 @@
import { describe, expect, it } from "vitest";
import { resolveAdminMediaUrl, resolveAdminMediaUrls } from "@/lib/media-url";
import { resolveAdminMediaUrl, resolveAdminMediaUrls, shouldShowMediaEmptyState } from "@/lib/media-url";
describe("resolveAdminMediaUrl", () => {
it("将公共本地资源挂载到管理端 base 下", () => {
@@ -18,4 +18,9 @@ describe("resolveAdminMediaUrl", () => {
"https://example.com/b.jpg",
]);
});
it("已有图片地址时不显示暂无图片占位", () => {
expect(shouldShowMediaEmptyState("https://example.com/image.webp", false)).toBe(false);
expect(shouldShowMediaEmptyState("", false)).toBe(true);
});
});

View File

@@ -17,3 +17,7 @@ export function resolveAdminMediaUrl(value: string | null | undefined, baseUrl =
export function resolveAdminMediaUrls(values: string[], baseUrl = import.meta.env.BASE_URL): string[] {
return values.map((value) => resolveAdminMediaUrl(value, baseUrl) ?? "");
}
export function shouldShowMediaEmptyState(value: string | null | undefined, previewFailed: boolean): boolean {
return !value && !previewFailed;
}