feat(media): 添加空状态检查工具函数并优化单媒体编辑器逻辑
新增 shouldShowMediaEmptyState 工具函数用于判断是否显示媒体空状态,为其编写单元测试覆盖核心场景,同时在单媒体编辑器组件中使用该函数替换原有的内联条件判断,提升代码可维护性。
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user