125 lines
3.1 KiB
Vue
125 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import type { IImageHistoryItem } from "#shared/types";
|
|
import { ImageService } from "~/services";
|
|
import { useUserStore } from "~/stores";
|
|
|
|
const userStore = useUserStore();
|
|
const { isOnline } = storeToRefs(userStore);
|
|
|
|
const histories = ref<IImageHistoryItem[]>([]);
|
|
const loading = ref(false);
|
|
const errorMessage = ref("");
|
|
const operatingRecordId = ref("");
|
|
|
|
const loadHistory = async () => {
|
|
if (!isOnline.value) {
|
|
histories.value = [];
|
|
errorMessage.value = "";
|
|
loading.value = false;
|
|
return;
|
|
}
|
|
|
|
loading.value = true;
|
|
errorMessage.value = "";
|
|
|
|
try {
|
|
const res = await ImageService.GetImageHistory(1, 20);
|
|
|
|
if (res.code === 0 && res.data) {
|
|
histories.value = res.data.items;
|
|
return;
|
|
}
|
|
|
|
errorMessage.value = res.msg || "获取生图历史失败";
|
|
} catch (error) {
|
|
errorMessage.value = getErrorMessage(error, "获取生图历史失败");
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const updatePublicState = async (item: IImageHistoryItem) => {
|
|
operatingRecordId.value = item.id;
|
|
errorMessage.value = "";
|
|
|
|
try {
|
|
const res = item.isPublic
|
|
? await ImageService.HideHistoryImage(item.id)
|
|
: await ImageService.PublishHistoryImage(item.id);
|
|
|
|
if (res.code === 0 && res.data) {
|
|
item.isPublic = res.data.isPublic;
|
|
return;
|
|
}
|
|
|
|
errorMessage.value = res.msg || "更新公开状态失败";
|
|
} catch (error) {
|
|
errorMessage.value = getErrorMessage(error, "更新公开状态失败");
|
|
} finally {
|
|
operatingRecordId.value = "";
|
|
}
|
|
};
|
|
|
|
onMounted(loadHistory);
|
|
|
|
watch(isOnline, () => {
|
|
loadHistory();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section class="w-full max-w-xl space-y-3">
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-base font-medium text-gray-900">历史记录</h2>
|
|
<el-button size="small" :loading="loading" @click="loadHistory">
|
|
刷新
|
|
</el-button>
|
|
</div>
|
|
|
|
<p v-if="errorMessage" class="text-sm text-red-500">
|
|
{{ errorMessage }}
|
|
</p>
|
|
|
|
<p
|
|
v-else-if="!loading && histories.length === 0"
|
|
class="text-sm text-gray-500"
|
|
>
|
|
暂无历史记录
|
|
</p>
|
|
|
|
<div v-else class="space-y-4">
|
|
<article
|
|
v-for="item in histories"
|
|
:key="item.id"
|
|
class="space-y-2 border-b border-gray-200 pb-4"
|
|
>
|
|
<p class="text-sm leading-6 text-gray-800">
|
|
{{ item.prompt }}
|
|
</p>
|
|
|
|
<img
|
|
v-if="item.hostedImageUrl"
|
|
:src="item.hostedImageUrl"
|
|
alt="历史生成图片"
|
|
class="block w-full rounded border border-gray-200 object-contain"
|
|
/>
|
|
|
|
<p v-else class="text-sm text-gray-500">图片归档中</p>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-xs text-gray-500">
|
|
{{ item.isPublic ? "已公开" : "未公开" }}
|
|
</span>
|
|
|
|
<el-button
|
|
size="small"
|
|
:loading="operatingRecordId === item.id"
|
|
@click="updatePublicState(item)"
|
|
>
|
|
{{ item.isPublic ? "取消公开" : "公开" }}
|
|
</el-button>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</template>
|