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

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

No files matched your search

@@ -2,7 +2,7 @@
import { ref } from "vue"; import { ref } from "vue";
import { uploadMediaAsset } from "@/api/client"; import { uploadMediaAsset } from "@/api/client";
import { validateMediaFile } from "@/lib/media"; import { validateMediaFile } from "@/lib/media";
import { resolveAdminMediaUrl } from "@/lib/media-url"; import { resolveAdminMediaUrl, shouldShowMediaEmptyState } from "@/lib/media-url";
const props = defineProps<{ const props = defineProps<{
modelValue: string; modelValue: string;
@@ -58,7 +58,7 @@ function clear() {
<el-alert v-if="error" :title="error" type="error" :closable="false" show-icon /> <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-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-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> <el-button v-if="modelValue" link type="danger" :disabled="disabled || uploading" @click="clear">移除图片</el-button>
</div> </div>
</template> </template>
@@ -1,5 +1,5 @@
import { describe, expect, it } from "vitest"; import { describe, expect, it } from "vitest";
import { resolveAdminMediaUrl, resolveAdminMediaUrls } from "@/lib/media-url"; import { resolveAdminMediaUrl, resolveAdminMediaUrls, shouldShowMediaEmptyState } from "@/lib/media-url";
describe("resolveAdminMediaUrl", () => { describe("resolveAdminMediaUrl", () => {
it("将公共本地资源挂载到管理端 base 下", () => { it("将公共本地资源挂载到管理端 base 下", () => {
@@ -18,4 +18,9 @@ describe("resolveAdminMediaUrl", () => {
"https://example.com/b.jpg", "https://example.com/b.jpg",
]); ]);
}); });
it("已有图片地址时不显示暂无图片占位", () => {
expect(shouldShowMediaEmptyState("https://example.com/image.webp", false)).toBe(false);
expect(shouldShowMediaEmptyState("", false)).toBe(true);
});
}); });
@@ -17,3 +17,7 @@ export function resolveAdminMediaUrl(value: string | null | undefined, baseUrl =
export function resolveAdminMediaUrls(values: string[], baseUrl = import.meta.env.BASE_URL): string[] { export function resolveAdminMediaUrls(values: string[], baseUrl = import.meta.env.BASE_URL): string[] {
return values.map((value) => resolveAdminMediaUrl(value, baseUrl) ?? ""); return values.map((value) => resolveAdminMediaUrl(value, baseUrl) ?? "");
} }
export function shouldShowMediaEmptyState(value: string | null | undefined, previewFailed: boolean): boolean {
return !value && !previewFailed;
}