smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: style

Browse Source
This commit is contained in:
xingyu4j
2025-06-17 20:22:24 +08:00
parent 7276d0a909
commit a4f4c0d6f6
162 changed files with 689 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/web-antd/src/views/ai/image/index/components/ImageCard.vue
View File

@@ -64,10 +64,7 @@ onMounted(async () => {
});
</script>
<template>
<Card
body-class=""
class="relative flex h-auto w-[320px] flex-col rounded-[10px]"
>
<Card class="relative flex h-auto w-80 flex-col rounded-lg">
<!-- 图片操作区 -->
<div class="flex flex-row justify-between">
<div>
@@ -83,28 +80,28 @@ onMounted(async () => {
</div>
<div class="flex">
<Button
class="m-0 p-[10px]"
class="m-0 p-2.5"
type="text"
@click="handleButtonClick('download', detail)"
>
<IconifyIcon icon="lucide:download" />
</Button>
<Button
class="m-0 p-[10px]"
class="m-0 p-2.5"
type="text"
@click="handleButtonClick('regeneration', detail)"
>
<IconifyIcon icon="lucide:refresh-cw" />
</Button>
<Button
class="m-0 p-[10px]"
class="m-0 p-2.5"
type="text"
@click="handleButtonClick('delete', detail)"
>
<IconifyIcon icon="lucide:trash" />
</Button>
<Button
class="m-0 p-[10px]"
class="m-0 p-2.5"
type="text"
@click="handleButtonClick('more', detail)"
>
@@ -114,20 +111,20 @@ onMounted(async () => {
</div>
<!-- 图片展示区域 -->
<div class="mt-[20px] h-[280px] flex-1 overflow-hidden" ref="cardImageRef">
<Image class="w-full rounded-[10px]" :src="detail?.picUrl" />
<div class="mt-5 h-72 flex-1 overflow-hidden" ref="cardImageRef">
<Image class="w-full rounded-lg" :src="detail?.picUrl" />
<div v-if="detail?.status === AiImageStatusEnum.FAIL">
{{ detail?.errorMessage }}
</div>
</div>
<!-- Midjourney 专属操作按钮 -->
<div class="mt-[5px] flex w-full flex-wrap justify-start">
<div class="mt-2 flex w-full flex-wrap justify-start">
<Button
size="small"
v-for="(button, index) in detail?.buttons"
:key="index"
class="ml-0 mr-[10px] mt-[5px] min-w-[40px]"
class="m-2 ml-0 min-w-10"
@click="handleMidjourneyBtnClick(button)"
>
{{ button.label }}{{ button.emoji }}

56
apps/web-antd/src/views/ai/image/index/components/ImageDetail.vue
View File

@@ -44,15 +44,15 @@ watch(
<template>
<div class="mb-5 w-full overflow-hidden break-words">
<div class="body mt-2 text-gray-600">
<Image class="rounded-[10px]" :src="detail?.picUrl" />
<div class="mt-2 text-gray-600">
<Image class="rounded-lg" :src="detail?.picUrl" />
</div>
</div>
<!-- 时间 -->
<div class="mb-5 w-full overflow-hidden break-words">
<div class="tip text-lg font-bold">时间</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">时间</div>
<div class="mt-2 text-gray-600">
<div>
提交时间：{{ formatDate(detail.createTime, 'yyyy-MM-dd HH:mm:ss') }}
</div>
@@ -64,24 +64,24 @@ watch(
<!-- 模型 -->
<div class="mb-5 w-full overflow-hidden break-words">
<div class="tip text-lg font-bold">模型</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">模型</div>
<div class="mt-2 text-gray-600">
{{ detail.model }}({{ detail.height }}x{{ detail.width }})
</div>
</div>
<!-- 提示词 -->
<div class="mb-5 w-full overflow-hidden break-words">
<div class="tip text-lg font-bold">提示词</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">提示词</div>
<div class="mt-2 text-gray-600">
{{ detail.prompt }}
</div>
</div>
<!-- 图片地址 -->
<div class="mb-5 w-full overflow-hidden break-words">
<div class="tip text-lg font-bold">图片地址</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">图片地址</div>
<div class="mt-2 text-gray-600">
{{ detail.picUrl }}
</div>
</div>
@@ -94,8 +94,8 @@ watch(
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">采样方法</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">采样方法</div>
<div class="mt-2 text-gray-600">
{{
StableDiffusionSamplers.find(
(item) => item.key === detail?.options?.sampler,
@@ -111,8 +111,8 @@ watch(
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">CLIP</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">CLIP</div>
<div class="mt-2 text-gray-600">
{{
StableDiffusionClipGuidancePresets.find(
(item) => item.key === detail?.options?.clipGuidancePreset,
@@ -128,8 +128,8 @@ watch(
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">风格</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">风格</div>
<div class="mt-2 text-gray-600">
{{
StableDiffusionStylePresets.find(
(item) => item.key === detail?.options?.stylePreset,
@@ -145,8 +145,8 @@ watch(
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">迭代步数</div>
<div class="body mt-2 text-gray-600">{{ detail?.options?.steps }}</div>
<div class="text-lg font-bold">迭代步数</div>
<div class="mt-2 text-gray-600">{{ detail?.options?.steps }}</div>
</div>
<div
@@ -156,8 +156,8 @@ watch(
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">引导系数</div>
<div class="body mt-2 text-gray-600">{{ detail?.options?.scale }}</div>
<div class="text-lg font-bold">引导系数</div>
<div class="mt-2 text-gray-600">{{ detail?.options?.scale }}</div>
</div>
<div
@@ -167,8 +167,8 @@ watch(
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">随机因子</div>
<div class="body mt-2 text-gray-600">{{ detail?.options?.seed }}</div>
<div class="text-lg font-bold">随机因子</div>
<div class="mt-2 text-gray-600">{{ detail?.options?.seed }}</div>
</div>
<!-- Dall3 专属 -->
@@ -176,8 +176,8 @@ watch(
v-if="detail.platform === AiPlatformEnum.OPENAI && detail?.options?.style"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">风格选择</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">风格选择</div>
<div class="mt-2 text-gray-600">
{{
Dall3StyleList.find((item) => item.key === detail?.options?.style)?.name
}}
@@ -191,8 +191,8 @@ watch(
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">模型版本</div>
<div class="body mt-2 text-gray-600">{{ detail?.options?.version }}</div>
<div class="text-lg font-bold">模型版本</div>
<div class="mt-2 text-gray-600">{{ detail?.options?.version }}</div>
</div>
<div
@@ -202,8 +202,8 @@ watch(
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">参考图</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">参考图</div>
<div class="mt-2 text-gray-600">
<Image :src="detail.options.referImageUrl" />
</div>
</div>

8
apps/web-antd/src/views/ai/image/index/components/ImageList.vue
View File

@@ -170,11 +170,11 @@ onUnmounted(async () => {
});
</script>
<template>
<Drawer class="w-[600px]">
<Drawer class="w-2/5">
<ImageDetail :id="showImageDetailId" />
</Drawer>
<Card
class="dr-task flex h-full w-full flex-col"
class="flex h-full w-full flex-col"
:body-style="{
margin: 0,
padding: 0,
@@ -190,7 +190,7 @@ onUnmounted(async () => {
</template>
<div
class="task-image-list flex flex-1 flex-wrap content-start overflow-y-auto p-5 pb-[140px] pt-5"
class="flex flex-1 flex-wrap content-start overflow-y-auto p-5 pb-28 pt-5"
ref="imageListRef"
>
<ImageCard
@@ -204,7 +204,7 @@ onUnmounted(async () => {
</div>
<div
class="task-image-pagination sticky bottom-0 z-50 flex h-[60px] items-center justify-center bg-white shadow-[0_-2px_8px_rgba(0,0,0,0.1)]"
class="sticky bottom-0 z-50 flex h-16 items-center justify-center bg-white shadow-sm"
>
<Pagination
:total="pageTotal"

34
apps/web-antd/src/views/ai/image/index/components/common/index.vue
View File

@@ -113,20 +113,20 @@ defineExpose({ settingValues });
v-model:value="prompt"
:maxlength="1024"
:rows="5"
class="mt-[15px] w-full"
class="mt-4 w-full"
placeholder="例如：童话里的小屋应该是什么样子？"
show-count
/>
</div>
<div class="hot-words mt-[30px] flex flex-col">
<div class="mt-8 flex flex-col">
<div>
<b>随机热词</b>
</div>
<Space wrap class="word-list mt-[15px] flex flex-wrap justify-start">
<Space wrap class="mt-4 flex flex-col flex-wrap justify-start">
<Button
shape="round"
class="btn m-0"
class="m-0"
:type="selectHotWord === hotWord ? 'primary' : 'default'"
v-for="hotWord in ImageHotWords"
:key="hotWord"
@@ -137,16 +137,16 @@ defineExpose({ settingValues });
</Space>
</div>
<div class="group-item mt-[30px]">
<div class="mt-8">
<div>
<b>平台</b>
</div>
<Space wrap class="group-item-body mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<Select
v-model:value="otherPlatform"
placeholder="Select"
size="large"
class="!important w-[330px]"
class="!w-80"
@change="handlerPlatformChange"
>
<Select.Option
@@ -160,16 +160,16 @@ defineExpose({ settingValues });
</Space>
</div>
<div class="group-item mt-[30px]">
<div class="mt-8">
<div>
<b>模型</b>
</div>
<Space wrap class="group-item-body mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<Select
v-model:value="modelId"
placeholder="Select"
size="large"
class="!important w-[330px]"
class="!w-80"
>
<Select.Option
v-for="item in platformModels"
@@ -182,25 +182,29 @@ defineExpose({ settingValues });
</Space>
</div>
<div class="group-item mt-[30px]">
<div class="mt-8">
<div>
<b>图片尺寸</b>
</div>
<Space wrap class="group-item-body mt-[15px] flex flex-wrap gap-x-[20px]">
<Space wrap class="mt-4 flex flex-wrap gap-x-5">
<InputNumber
v-model:value="width"
class="mt-[10px] w-[170px]"
class="w-40"
placeholder="图片宽度"
addon-before="宽"
addon-after="px"
/>
<InputNumber
v-model:value="height"
class="w-[170px]"
class="w-40"
placeholder="图片高度"
addon-before="高"
addon-after="px"
/>
</Space>
</div>
<div class="btns mt-[50px] flex justify-center">
<div class="mt-12 flex justify-center">
<Button
type="primary"
size="large"

47
apps/web-antd/src/views/ai/image/index/components/dall3/index.vue
View File

@@ -151,18 +151,18 @@ defineExpose({ settingValues });
v-model:value="prompt"
:maxlength="1024"
:rows="5"
class="mt-[15px] w-full"
class="mt-4 w-full"
placeholder="例如：童话里的小屋应该是什么样子？"
show-count
/>
</div>
<div class="hot-words mt-[30px] flex flex-col">
<div class="mt-8 flex flex-col">
<div><b>随机热词</b></div>
<Space wrap class="word-list mt-[15px] flex flex-wrap justify-start">
<Space wrap class="mt-4 flex flex-wrap justify-start">
<Button
shape="round"
class="btn m-0"
class="m-0"
:type="selectHotWord === hotWord ? 'primary' : 'default'"
v-for="hotWord in ImageHotWords"
:key="hotWord"
@@ -173,15 +173,13 @@ defineExpose({ settingValues });
</Space>
</div>
<div class="model mt-[30px]">
<div class="mt-8">
<div><b>模型选择</b></div>
<Space wrap class="model-list mt-[15px] flex flex-wrap gap-[10px]">
<Space wrap class="mt-4 flex flex-wrap gap-2">
<div
class="modal-item flex w-[110px] cursor-pointer flex-col items-center overflow-hidden rounded-[5px] border-[3px]"
class="flex w-28 cursor-pointer flex-col items-center overflow-hidden rounded-lg border-2"
:class="[
selectModel === model.key
? 'border-[#1293ff!important]'
: 'border-transparent',
selectModel === model.key ? '!border-blue-500' : 'border-transparent',
]"
v-for="model in Dall3Models"
:key="model.key"
@@ -192,20 +190,20 @@ defineExpose({ settingValues });
fit="contain"
@click="handleModelClick(model)"
/>
<div class="model-font text-[14px] font-bold text-[#3e3e3e]">
<div class="text-sm font-bold text-gray-600">
{{ model.name }}
</div>
</div>
</Space>
</div>
<div class="image-style mt-[30px]">
<div class="mt-8">
<div><b>风格选择</b></div>
<Space wrap class="image-style-list mt-[15px] flex flex-wrap gap-[10px]">
<Space wrap class="mt-4 flex flex-wrap gap-2">
<div
class="image-style-item flex w-[110px] cursor-pointer flex-col items-center overflow-hidden rounded-[5px] border-[3px]"
class="flex w-28 cursor-pointer flex-col items-center overflow-hidden rounded-lg border-2"
:class="[
style === imageStyle.key ? 'border-[#1293ff]' : 'border-transparent',
style === imageStyle.key ? 'border-blue-500' : 'border-transparent',
]"
v-for="imageStyle in Dall3StyleList"
:key="imageStyle.key"
@@ -216,41 +214,38 @@ defineExpose({ settingValues });
fit="contain"
@click="handleStyleClick(imageStyle)"
/>
<div class="style-font text-[14px] font-bold text-[#3e3e3e]">
<div class="text-sm font-bold text-gray-600">
{{ imageStyle.name }}
</div>
</div>
</Space>
</div>
<div class="image-size mt-[30px] w-full">
<div class="mt-8 w-full">
<div><b>画面比例</b></div>
<Space
wrap
class="size-list mt-[20px] flex w-full flex-row justify-between"
>
<Space wrap class="mt-5 flex w-full flex-wrap gap-2">
<div
class="size-item flex cursor-pointer flex-col items-center"
class="flex cursor-pointer flex-col items-center"
v-for="imageSize in Dall3SizeList"
:key="imageSize.key"
@click="handleSizeClick(imageSize)"
>
<div
class="size-wrapper flex h-[50px] w-[50px] flex-col items-center justify-center rounded-[7px] border bg-white p-[4px]"
class="flex h-12 w-12 flex-col items-center justify-center rounded-lg border bg-white p-0"
:class="[
selectSize === imageSize.key ? 'border-[#1293ff]' : 'border-white',
selectSize === imageSize.key ? 'border-blue-500' : 'border-white',
]"
>
<div :style="imageSize.style"></div>
</div>
<div class="size-font text-[14px] font-bold text-[#3e3e3e]">
<div class="text-sm font-bold text-gray-600">
{{ imageSize.name }}
</div>
</div>
</Space>
</div>
<div class="btns mt-[50px] flex justify-center">
<div class="mt-12 flex justify-center">
<Button
type="primary"
size="large"

30
apps/web-antd/src/views/ai/image/index/components/midjourney/index.vue
View File

@@ -150,7 +150,7 @@ defineExpose({ settingValues });
v-model:value="prompt"
:maxlength="1024"
:rows="5"
class="mt-[15px] w-full"
class="mt-4 w-full"
placeholder="例如：童话里的小屋应该是什么样子？"
show-count
/>
@@ -172,38 +172,38 @@ defineExpose({ settingValues });
</Space>
</div>
<div class="mt-8 w-full">
<div class="mt-8">
<div><b>尺寸</b></div>
<Space wrap class="mt-5 flex w-full flex-row justify-between">
<Space wrap class="mt-4 flex w-full flex-wrap gap-2">
<div
class="flex cursor-pointer flex-col items-center"
class="flex cursor-pointer flex-col items-center overflow-hidden"
v-for="imageSize in MidjourneySizeList"
:key="imageSize.key"
@click="handleSizeClick(imageSize)"
>
<div
class="flex h-[50px] w-[50px] items-center justify-center rounded-[7px] border bg-white p-1"
class="flex h-12 w-12 items-center justify-center rounded-lg border bg-white p-0"
:class="[
selectSize === imageSize.key ? 'border-[#1293ff]' : 'border-white',
selectSize === imageSize.key ? 'border-blue-500' : 'border-white',
]"
>
<div :style="imageSize.style"></div>
</div>
<div class="text-sm font-bold text-[#3e3e3e]">{{ imageSize.key }}</div>
<div class="text-sm font-bold text-gray-600">{{ imageSize.key }}</div>
</div>
</Space>
</div>
<div class="mt-8">
<div><b>模型</b></div>
<Space wrap class="mt-4 flex flex-wrap gap-4">
<Space wrap class="mt-4 flex flex-wrap gap-2">
<div
v-for="model in MidjourneyModels"
:key="model.key"
class="flex w-[150px] cursor-pointer flex-col items-center overflow-hidden border-[3px]"
class="flex max-w-40 cursor-pointer flex-col items-center overflow-hidden"
:class="[
selectModel === model.key
? 'rounded border-[#1293ff]'
? 'rounded border-blue-500'
: 'border-transparent',
]"
>
@@ -213,17 +213,17 @@ defineExpose({ settingValues });
fit="contain"
@click="handleModelClick(model)"
/>
<div class="text-sm font-bold text-[#3e3e3e]">{{ model.name }}</div>
<div class="text-sm font-bold text-gray-600">{{ model.name }}</div>
</div>
</Space>
</div>
<div class="mt-5">
<div class="mt-8">
<div><b>版本</b></div>
<Space wrap class="mt-5 w-full">
<Space wrap class="mt-5 flex w-full flex-wrap gap-2">
<Select
v-model:value="selectVersion"
class="!w-[330px]"
class="!w-80"
clearable
placeholder="请选择版本"
>
@@ -245,7 +245,7 @@ defineExpose({ settingValues });
</Space>
</div>
<div class="mt-[50px] flex justify-center">
<div class="mt-8 flex justify-center">
<Button
type="primary"
size="large"

56
apps/web-antd/src/views/ai/image/index/components/stableDiffusion/index.vue
View File

@@ -140,16 +140,16 @@ defineExpose({ settingValues });
v-model:value="prompt"
:maxlength="1024"
:rows="5"
class="mt-[15px] w-full"
class="mt-4 w-full"
placeholder="例如：童话里的小屋应该是什么样子？"
show-count
/>
</div>
<!-- 热词区域 -->
<div class="mt-[30px] flex flex-col">
<div class="mt-8 flex flex-col">
<div><b>随机热词</b></div>
<Space wrap class="mt-[15px] flex flex-wrap justify-start">
<Space wrap class="mt-4 flex flex-wrap gap-2">
<Button
shape="round"
class="m-0"
@@ -164,14 +164,14 @@ defineExpose({ settingValues });
</div>
<!-- 参数项：采样方法 -->
<div class="mt-[30px]">
<div class="mt-8">
<div><b>采样方法</b></div>
<Space wrap class="mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<Select
v-model:value="sampler"
placeholder="Select"
size="large"
class="!w-[330px]"
class="!w-80"
>
<Select.Option
v-for="item in StableDiffusionSamplers"
@@ -185,14 +185,14 @@ defineExpose({ settingValues });
</div>
<!-- CLIP -->
<div class="mt-[30px]">
<div class="mt-8">
<div><b>CLIP</b></div>
<Space wrap class="mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<Select
v-model:value="clipGuidancePreset"
placeholder="Select"
size="large"
class="!w-[330px]"
class="!w-80"
>
<Select.Option
v-for="item in StableDiffusionClipGuidancePresets"
@@ -206,14 +206,14 @@ defineExpose({ settingValues });
</div>
<!-- 风格 -->
<div class="mt-[30px]">
<div class="mt-8">
<div><b>风格</b></div>
<Space wrap class="mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<Select
v-model:value="stylePreset"
placeholder="Select"
size="large"
class="!w-[330px]"
class="!w-80"
>
<Select.Option
v-for="item in StableDiffusionStylePresets"
@@ -228,64 +228,68 @@ defineExpose({ settingValues });
</div>
<!-- 图片尺寸 -->
<div class="mt-[30px]">
<div class="mt-8">
<div><b>图片尺寸</b></div>
<Space wrap class="mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<InputNumber
v-model:value="width"
class="w-[170px]"
class="w-40"
placeholder="图片宽度"
addon-before="宽"
addon-after="px"
/>
<InputNumber
v-model:value="height"
class="w-[170px]"
class="w-40"
placeholder="图片高度"
addon-before="高"
addon-after="px"
/>
</Space>
</div>
<!-- 迭代步数 -->
<div class="mt-[30px]">
<div class="mt-8">
<div><b>迭代步数</b></div>
<Space wrap class="mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<InputNumber
v-model:value="steps"
size="large"
class="!w-[330px]"
class="!w-80"
placeholder="Please input"
/>
</Space>
</div>
<!-- 引导系数 -->
<div class="mt-[30px]">
<div class="mt-8">
<div><b>引导系数</b></div>
<Space wrap class="mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<InputNumber
v-model:value="scale"
type="number"
size="large"
class="!w-[330px]"
class="!w-80"
placeholder="Please input"
/>
</Space>
</div>
<!-- 随机因子 -->
<div class="mt-[30px]">
<div class="mt-8">
<div><b>随机因子</b></div>
<Space wrap class="mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<InputNumber
v-model:value="seed"
size="large"
class="!w-[330px]"
class="!w-80"
placeholder="Please input"
/>
</Space>
</div>
<!-- 生成按钮 -->
<div class="mt-[50px] flex justify-center">
<div class="mt-12 flex justify-center">
<Button
type="primary"
size="large"

10
apps/web-antd/src/views/ai/image/index/index.vue
View File

@@ -90,16 +90,16 @@ onMounted(async () => {
<template>
<Page auto-content-height>
<div class="ai-image absolute inset-0 flex h-full w-full flex-row">
<div class="left flex w-[390px] flex-col p-5">
<div class="absolute inset-0 flex h-full w-full flex-row bg-gray-50">
<div class="left-0 flex w-96 flex-col p-4">
<div class="segmented flex justify-center">
<Segmented
v-model:value="selectPlatform"
:options="platformOptions"
class="bg-[#ececec]"
class="bg-gray-100"
/>
</div>
<div class="modal-switch-container mt-[30px] h-full overflow-y-auto">
<div class="mt-8 h-full overflow-y-auto">
<Common
v-if="selectPlatform === 'common'"
ref="commonRef"
@@ -126,7 +126,7 @@ onMounted(async () => {
/>
</div>
</div>
<div class="main flex-1 bg-white">
<div class="ml-4 flex-1 bg-white">
<ImageList ref="imageListRef" @on-regeneration="handleRegeneration" />
</div>
</div>

2
apps/web-antd/src/views/ai/image/manager/index.vue
View File

@@ -100,7 +100,7 @@ onMounted(async () => {
<TableAction :actions="[]" />
</template>
<template #picUrl="{ row }">
<Image :src="row.picUrl" class="h-80px w-80px" />
<Image :src="row.picUrl" class="h-20 w-20" />
</template>
<template #userId="{ row }">
<span>

20
apps/web-antd/src/views/ai/image/square/index.vue
View File

@@ -6,7 +6,7 @@ import { onMounted, reactive, ref } from 'vue';
import { Page } from '@vben/common-ui';
import { useDebounceFn } from '@vueuse/core';
import { Input, Pagination } from 'ant-design-vue';
import { Image, Input, Pagination } from 'ant-design-vue';
import { getImagePageMy } from '#/api/ai/image';
@@ -45,32 +45,28 @@ onMounted(async () => {
</script>
<template>
<Page auto-content-height>
<div class="bg-white p-[20px]">
<!-- TODO @fan：Search 可以换成 Icon 组件么？ -->
<div class="bg-white p-5">
<Input.Search
v-model="queryParams.prompt"
class="mb-[20px] w-full"
class="mb-5 w-full"
size="large"
placeholder="请输入要搜索的内容"
@keyup.enter="handleQuery"
/>
<div
class="grid gap-[10px] bg-white shadow-[0_0_10px_rgba(0,0,0,0.1)]"
style="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))"
class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2.5 bg-white shadow-sm"
>
<!-- TODO @fan：这个图片的风格，要不和 ImageCard.vue 界面一致？（只有卡片，没有操作）；因为看着更有相框的感觉~~~ -->
<div
v-for="item in list"
:key="item.id"
class="relative cursor-pointer overflow-hidden bg-white transition-transform duration-300 hover:scale-[1.05]"
class="relative cursor-pointer overflow-hidden bg-white transition-transform duration-300 hover:scale-105"
>
<img
<Image
:src="item.picUrl"
class="block h-auto w-full transition-transform duration-300 hover:scale-[1.1]"
class="block h-auto w-full transition-transform duration-300 hover:scale-110"
/>
</div>
</div>
<!-- TODO @fan：缺少翻页 -->
<!-- 分页 -->
<Pagination
:total="total"
@@ -81,7 +77,7 @@ onMounted(async () => {
v-model:page-size="queryParams.pageSize"
@change="debounceGetList"
@show-size-change="debounceGetList"
class="mt-[20px]"
class="mt-5"
/>
</div>
</Page>