| | |
|---|
| | | |
|---|
| | | const isReadOnly = computed(() => props.formType === 'detail'); // 是否只读 |
|---|
| | | const title = computed(() => props.kind); // 当前媒体类型标题 |
|---|
| | | |
|---|
| | | /** 将完整 URL 转为相对路径，确保走前端代理 */ |
|---|
| | | function resolveImageUrl(url?: string): string { |
|---|
| | | if (!url) return ''; |
|---|
| | | try { |
|---|
| | | const { pathname } = new URL(url, window.location.origin); |
|---|
| | | return pathname; |
|---|
| | | } catch { |
|---|
| | | return url; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | const loading = ref(false); // SIP/SOP 列表加载中 |
|---|
| | | const formOpen = ref(false); // SIP/SOP 表单是否打开 |
|---|
| | | const formLoading = ref(false); // SIP/SOP 表单提交中 |
|---|
| | |
|---|
| | | 添加 {{ title }} |
|---|
| | | </Button> |
|---|
| | | <Spin :spinning="loading"> |
|---|
| | | <div v-if="list.length > 0" class="grid grid-cols-4 gap-3"> |
|---|
| | | <div v-if="list.length > 0" class="grid grid-cols-8 gap-1"> |
|---|
| | | <Card |
|---|
| | | v-for="item in list" |
|---|
| | | :key="item.id" |
|---|
| | | hoverable |
|---|
| | | class="!w-[120px]" |
|---|
| | | :body-style="{ padding: '0px' }" |
|---|
| | | > |
|---|
| | | <Image |
|---|
| | | v-if="item.url" |
|---|
| | | :src="item.url" |
|---|
| | | class="block h-40 w-full object-cover" |
|---|
| | | :preview="{ src: item.url }" |
|---|
| | | :src="resolveImageUrl(item.url)" |
|---|
| | | class="block !h-[90px] !w-[120px] object-cover" |
|---|
| | | :preview="{ src: resolveImageUrl(item.url) }" |
|---|
| | | /> |
|---|
| | | <div |
|---|
| | | v-else |
|---|
| | | class="flex h-40 w-full items-center justify-center bg-gray-100 text-gray-400" |
|---|
| | | class="flex !h-[90px] !w-[120px] items-center justify-center bg-gray-100 text-gray-400" |
|---|
| | | > |
|---|
| | | 暂无图片 |
|---|
| | | </div> |
|---|
| | | <div class="p-3"> |
|---|
| | | <div class="mb-1 truncate text-sm font-bold">{{ item.title }}</div> |
|---|
| | | <div class="p-2"> |
|---|
| | | <div class="mb-1 truncate text-xs font-bold">{{ item.title }}</div> |
|---|
| | | <div v-if="item.description" class="truncate text-xs text-gray-500"> |
|---|
| | | {{ item.description }} |
|---|
| | | </div> |
|---|
