diff --git a/apps/web-antd/public/static/dall2.jpg b/apps/web-antd/public/static/dall2.jpg
new file mode 100644
index 00000000..c07374dc
Binary files /dev/null and b/apps/web-antd/public/static/dall2.jpg differ
diff --git a/apps/web-antd/public/static/dall3.jpg b/apps/web-antd/public/static/dall3.jpg
new file mode 100644
index 00000000..7f45803b
Binary files /dev/null and b/apps/web-antd/public/static/dall3.jpg differ
diff --git a/apps/web-antd/public/static/qingxi.jpg b/apps/web-antd/public/static/qingxi.jpg
new file mode 100644
index 00000000..d76b8156
Binary files /dev/null and b/apps/web-antd/public/static/qingxi.jpg differ
diff --git a/apps/web-antd/public/static/ziran.jpg b/apps/web-antd/public/static/ziran.jpg
new file mode 100644
index 00000000..62907242
Binary files /dev/null and b/apps/web-antd/public/static/ziran.jpg differ
diff --git a/apps/web-antd/src/api/ai/image/index.ts b/apps/web-antd/src/api/ai/image/index.ts
index 24699ac7..8e2856d7 100644
--- a/apps/web-antd/src/api/ai/image/index.ts
+++ b/apps/web-antd/src/api/ai/image/index.ts
@@ -40,7 +40,7 @@ export namespace AiImageApi {
   export interface ImageMidjourneyImagineReqVO {
     prompt: string; // 提示词
     modelId: number; // 模型
-    base64Array: string[]; // size不能为空
+    base64Array?: string[]; // size不能为空
     width: string; // 图片宽度
     height: string; // 图片高度
     version: string; // 版本
@@ -62,7 +62,7 @@ export function getImagePageMy(params: PageParam) {
 
 // 获取【我的】绘图记录
 export function getImageMy(id: number) {
-  return requestClient.get<AiImageApi.ImageVO[]>(`/ai/image/get-my?id=${id}`);
+  return requestClient.get<AiImageApi.ImageVO>(`/ai/image/get-my?id=${id}`);
 }
 
 // 获取【我的】绘图记录列表
diff --git a/apps/web-antd/src/router/routes/modules/ai.ts b/apps/web-antd/src/router/routes/modules/ai.ts
index 9e1feb92..67f9f69d 100644
--- a/apps/web-antd/src/router/routes/modules/ai.ts
+++ b/apps/web-antd/src/router/routes/modules/ai.ts
@@ -9,6 +9,18 @@ const routes: RouteRecordRaw[] = [
       hideInMenu: true,
     },
     children: [
+      {
+        path: 'image/square',
+        component: () => import('#/views/ai/image/square/index.vue'),
+        name: 'AiImageSquare',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '绘图作品',
+          activePath: '/ai/image',
+        },
+      },
       {
         path: 'knowledge/document',
         component: () => import('#/views/ai/knowledge/document/index.vue'),
diff --git a/apps/web-antd/src/utils/constants.ts b/apps/web-antd/src/utils/constants.ts
index 761df6fd..a9d192e6 100644
--- a/apps/web-antd/src/utils/constants.ts
+++ b/apps/web-antd/src/utils/constants.ts
@@ -30,7 +30,29 @@ export const AiModelTypeEnum = {
   EMBEDDING: 5, // 向量
   RERANK: 6, // 重排
 };
-
+export interface ImageModelVO {
+  key: string;
+  name: string;
+  image?: string;
+}
+export const OtherPlatformEnum: ImageModelVO[] = [
+  {
+    key: AiPlatformEnum.TONG_YI,
+    name: '通义万相',
+  },
+  {
+    key: AiPlatformEnum.YI_YAN,
+    name: '百度千帆',
+  },
+  {
+    key: AiPlatformEnum.ZHI_PU,
+    name: '智谱 AI',
+  },
+  {
+    key: AiPlatformEnum.SiliconFlow,
+    name: '硅基流动',
+  },
+];
 /**
  * AI 图像生成状态的枚举
  */
@@ -55,6 +77,172 @@ export enum AiWriteTypeEnum {
   WRITING = 1, // 撰写
   REPLY, // 回复
 }
+
+// ========== 【图片 UI】相关的枚举 ==========
+
+export const ImageHotWords = [
+  '中国旗袍',
+  '古装美女',
+  '卡通头像',
+  '机甲战士',
+  '童话小屋',
+  '中国长城',
+]; // 图片热词
+
+export const ImageHotEnglishWords = [
+  'Chinese Cheongsam',
+  'Ancient Beauty',
+  'Cartoon Avatar',
+  'Mech Warrior',
+  'Fairy Tale Cottage',
+  'The Great Wall of China',
+]; // 图片热词（英文）
+
+export const StableDiffusionSamplers: ImageModelVO[] = [
+  {
+    key: 'DDIM',
+    name: 'DDIM',
+  },
+  {
+    key: 'DDPM',
+    name: 'DDPM',
+  },
+  {
+    key: 'K_DPMPP_2M',
+    name: 'K_DPMPP_2M',
+  },
+  {
+    key: 'K_DPMPP_2S_ANCESTRAL',
+    name: 'K_DPMPP_2S_ANCESTRAL',
+  },
+  {
+    key: 'K_DPM_2',
+    name: 'K_DPM_2',
+  },
+  {
+    key: 'K_DPM_2_ANCESTRAL',
+    name: 'K_DPM_2_ANCESTRAL',
+  },
+  {
+    key: 'K_EULER',
+    name: 'K_EULER',
+  },
+  {
+    key: 'K_EULER_ANCESTRAL',
+    name: 'K_EULER_ANCESTRAL',
+  },
+  {
+    key: 'K_HEUN',
+    name: 'K_HEUN',
+  },
+  {
+    key: 'K_LMS',
+    name: 'K_LMS',
+  },
+];
+
+export const StableDiffusionStylePresets: ImageModelVO[] = [
+  {
+    key: '3d-model',
+    name: '3d-model',
+  },
+  {
+    key: 'analog-film',
+    name: 'analog-film',
+  },
+  {
+    key: 'anime',
+    name: 'anime',
+  },
+  {
+    key: 'cinematic',
+    name: 'cinematic',
+  },
+  {
+    key: 'comic-book',
+    name: 'comic-book',
+  },
+  {
+    key: 'digital-art',
+    name: 'digital-art',
+  },
+  {
+    key: 'enhance',
+    name: 'enhance',
+  },
+  {
+    key: 'fantasy-art',
+    name: 'fantasy-art',
+  },
+  {
+    key: 'isometric',
+    name: 'isometric',
+  },
+  {
+    key: 'line-art',
+    name: 'line-art',
+  },
+  {
+    key: 'low-poly',
+    name: 'low-poly',
+  },
+  {
+    key: 'modeling-compound',
+    name: 'modeling-compound',
+  },
+  // neon-punk origami photographic pixel-art tile-texture
+  {
+    key: 'neon-punk',
+    name: 'neon-punk',
+  },
+  {
+    key: 'origami',
+    name: 'origami',
+  },
+  {
+    key: 'photographic',
+    name: 'photographic',
+  },
+  {
+    key: 'pixel-art',
+    name: 'pixel-art',
+  },
+  {
+    key: 'tile-texture',
+    name: 'tile-texture',
+  },
+];
+
+export const StableDiffusionClipGuidancePresets: ImageModelVO[] = [
+  {
+    key: 'NONE',
+    name: 'NONE',
+  },
+  {
+    key: 'FAST_BLUE',
+    name: 'FAST_BLUE',
+  },
+  {
+    key: 'FAST_GREEN',
+    name: 'FAST_GREEN',
+  },
+  {
+    key: 'SIMPLE',
+    name: 'SIMPLE',
+  },
+  {
+    key: 'SLOW',
+    name: 'SLOW',
+  },
+  {
+    key: 'SLOWER',
+    name: 'SLOWER',
+  },
+  {
+    key: 'SLOWEST',
+    name: 'SLOWEST',
+  },
+];
 // ========== COMMON 模块 ==========
 // 全局通用状态枚举
 export const CommonStatusEnum = {
@@ -142,7 +330,136 @@ export const InfraApiErrorLogProcessStatusEnum = {
   DONE: 1, // 已处理
   IGNORE: 2, // 已忽略
 };
+export interface ImageSizeVO {
+  key: string;
+  name?: string;
+  style: string;
+  width: string;
+  height: string;
+}
+export const Dall3SizeList: ImageSizeVO[] = [
+  {
+    key: '1024x1024',
+    name: '1:1',
+    width: '1024',
+    height: '1024',
+    style: 'width: 30px; height: 30px;background-color: #dcdcdc;',
+  },
+  {
+    key: '1024x1792',
+    name: '3:5',
+    width: '1024',
+    height: '1792',
+    style: 'width: 30px; height: 50px;background-color: #dcdcdc;',
+  },
+  {
+    key: '1792x1024',
+    name: '5:3',
+    width: '1792',
+    height: '1024',
+    style: 'width: 50px; height: 30px;background-color: #dcdcdc;',
+  },
+];
 
+export const Dall3Models: ImageModelVO[] = [
+  {
+    key: 'dall-e-3',
+    name: 'DALL·E 3',
+    image: `/static/dall2.jpg`,
+  },
+  {
+    key: 'dall-e-2',
+    name: 'DALL·E 2',
+    image: `/static/dall3.jpg`,
+  },
+];
+
+export const Dall3StyleList: ImageModelVO[] = [
+  {
+    key: 'vivid',
+    name: '清晰',
+    image: `/static/qingxi.jpg`,
+  },
+  {
+    key: 'natural',
+    name: '自然',
+    image: `/static/ziran.jpg`,
+  },
+];
+export const MidjourneyModels: ImageModelVO[] = [
+  {
+    key: 'midjourney',
+    name: 'MJ',
+    image: 'https://bigpt8.com/pc/_nuxt/mj.34a61377.png',
+  },
+  {
+    key: 'niji',
+    name: 'NIJI',
+    image: 'https://bigpt8.com/pc/_nuxt/nj.ca79b143.png',
+  },
+];
+export const MidjourneyVersions = [
+  {
+    value: '6.0',
+    label: 'v6.0',
+  },
+  {
+    value: '5.2',
+    label: 'v5.2',
+  },
+  {
+    value: '5.1',
+    label: 'v5.1',
+  },
+  {
+    value: '5.0',
+    label: 'v5.0',
+  },
+  {
+    value: '4.0',
+    label: 'v4.0',
+  },
+];
+
+export const NijiVersionList = [
+  {
+    value: '5',
+    label: 'v5',
+  },
+];
+
+export const MidjourneySizeList: ImageSizeVO[] = [
+  {
+    key: '1:1',
+    width: '1',
+    height: '1',
+    style: 'width: 30px; height: 30px;background-color: #dcdcdc;',
+  },
+  {
+    key: '3:4',
+    width: '3',
+    height: '4',
+    style: 'width: 30px; height: 40px;background-color: #dcdcdc;',
+  },
+  {
+    key: '4:3',
+    width: '4',
+    height: '3',
+    style: 'width: 40px; height: 30px;background-color: #dcdcdc;',
+  },
+  {
+    key: '9:16',
+    width: '9',
+    height: '16',
+    style: 'width: 30px; height: 50px;background-color: #dcdcdc;',
+  },
+  {
+    key: '16:9',
+    width: '16',
+    height: '9',
+    style: 'width: 50px; height: 30px;background-color: #dcdcdc;',
+  },
+];
 // ========== PAY 模块 ==========
 /**
  * 支付渠道枚举
diff --git a/apps/web-antd/src/utils/formatTime.ts b/apps/web-antd/src/utils/formatTime.ts
index 45fe6442..9f2f30a8 100644
--- a/apps/web-antd/src/utils/formatTime.ts
+++ b/apps/web-antd/src/utils/formatTime.ts
@@ -1,3 +1,79 @@
+import dayjs from 'dayjs';
+
+/**
+ * 时间日期转换
+ * @param date 当前时间，new Date() 格式
+ * @param format 需要转换的时间格式字符串
+ * @description format 字符串随意，如 `YYYY-MM、YYYY-MM-DD`
+ * @description format 季度："YYYY-MM-DD HH:mm:ss QQQQ"
+ * @description format 星期："YYYY-MM-DD HH:mm:ss WWW"
+ * @description format 几周："YYYY-MM-DD HH:mm:ss ZZZ"
+ * @description format 季度 + 星期 + 几周："YYYY-MM-DD HH:mm:ss WWW QQQQ ZZZ"
+ * @returns 返回拼接后的时间字符串
+ */
+export function formatDate(date: Date, format?: string): string {
+  // 日期不存在，则返回空
+  if (!date) {
+    return '';
+  }
+  // 日期存在，则进行格式化
+  return date ? dayjs(date).format(format ?? 'YYYY-MM-DD HH:mm:ss') : '';
+}
+
+/**
+ * 将时间转换为 `几秒前`、`几分钟前`、`几小时前`、`几天前`
+ * @param param 当前时间，new Date() 格式或者字符串时间格式
+ * @param format 需要转换的时间格式字符串
+ * @description param 10秒：  10 * 1000
+ * @description param 1分：   60 * 1000
+ * @description param 1小时： 60 * 60 * 1000
+ * @description param 24小时：60 * 60 * 24 * 1000
+ * @description param 3天：   60 * 60* 24 * 1000 * 3
+ * @returns 返回拼接后的时间字符串
+ */
+export function formatPast(
+  param: Date | string,
+  format = 'YYYY-MM-DD HH:mm:ss',
+): string {
+  // 传入格式处理、存储转换值
+  let s: number, t: any;
+  // 获取js 时间戳
+  let time: number = Date.now();
+  // 是否是对象
+  typeof param === 'string' || typeof param === 'object'
+    ? (t = new Date(param).getTime())
+    : (t = param);
+  // 当前时间戳 - 传入时间戳
+  time = Number.parseInt(`${time - t}`);
+  if (time < 10_000) {
+    // 10秒内
+    return '刚刚';
+  } else if (time < 60_000 && time >= 10_000) {
+    // 超过10秒少于1分钟内
+    s = Math.floor(time / 1000);
+    return `${s}秒前`;
+  } else if (time < 3_600_000 && time >= 60_000) {
+    // 超过1分钟少于1小时
+    s = Math.floor(time / 60_000);
+    return `${s}分钟前`;
+  } else if (time < 86_400_000 && time >= 3_600_000) {
+    // 超过1小时少于24小时
+    s = Math.floor(time / 3_600_000);
+    return `${s}小时前`;
+  } else if (time < 259_200_000 && time >= 86_400_000) {
+    // 超过1天少于3天内
+    s = Math.floor(time / 86_400_000);
+    return `${s}天前`;
+  } else {
+    // 超过3天
+    const date =
+      typeof param === 'string' || typeof param === 'object'
+        ? new Date(param)
+        : param;
+    return formatDate(date, format);
+  }
+}
+
 /**
  * 将毫秒，转换成时间字符串。例如说，xx 分钟
  *
@@ -30,3 +106,39 @@ export function formatPast2(ms: number): string {
   }
   return second > 0 ? `${second} 秒` : `${0} 秒`;
 }
+
+/**
+ * @param {Date | number | string} time 需要转换的时间
+ * @param {string} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss
+ */
+export function formatTime(time: Date | number | string, fmt: string) {
+  if (time) {
+    const date = new Date(time);
+    const o = {
+      'M+': date.getMonth() + 1,
+      'd+': date.getDate(),
+      'H+': date.getHours(),
+      'm+': date.getMinutes(),
+      's+': date.getSeconds(),
+      'q+': Math.floor((date.getMonth() + 3) / 3),
+      S: date.getMilliseconds(),
+    };
+    if (/(y+)/.test(fmt)) {
+      fmt = fmt.replace(
+        RegExp.$1,
+        `${date.getFullYear()}`.slice(4 - RegExp.$1.length),
+      );
+    }
+    for (const k in o) {
+      if (new RegExp(`(${k})`).test(fmt)) {
+        fmt = fmt.replace(
+          RegExp.$1,
+          RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.slice(`${o[k]}`.length),
+        );
+      }
+    }
+    return fmt;
+  } else {
+    return '';
+  }
+}
diff --git a/apps/web-antd/src/utils/index.ts b/apps/web-antd/src/utils/index.ts
index 9e82ab96..4fa686cc 100644
--- a/apps/web-antd/src/utils/index.ts
+++ b/apps/web-antd/src/utils/index.ts
@@ -7,3 +7,4 @@ export * from './formCreate';
 export * from './rangePickerProps';
 export * from './routerHelper';
 export * from './upload';
+export * from './utils';
diff --git a/apps/web-antd/src/utils/utils.ts b/apps/web-antd/src/utils/utils.ts
new file mode 100644
index 00000000..d08eb778
--- /dev/null
+++ b/apps/web-antd/src/utils/utils.ts
@@ -0,0 +1,13 @@
+/**
+ * Created by 芋道源码
+ *
+ * AI 枚举类
+ *
+ * 问题：为什么不放在 src/utils/common-utils.ts 呢？
+ * 回答：主要 AI 是可选模块，考虑到独立、解耦，所以放在了 /views/ai/utils/common-utils.ts
+ */
+
+/**  判断字符串是否包含中文  */
+export const hasChinese = (str: string) => {
+  return /[\u4E00-\u9FA5]/.test(str);
+};
diff --git a/apps/web-antd/src/views/ai/image/index/components/ImageCard.vue b/apps/web-antd/src/views/ai/image/index/components/ImageCard.vue
new file mode 100644
index 00000000..4223edc3
--- /dev/null
+++ b/apps/web-antd/src/views/ai/image/index/components/ImageCard.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+import type { AiImageApi } from '#/api/ai/image';
+
+import { onMounted, ref, toRefs, watch } from 'vue';
+
+import { confirm } from '@vben/common-ui';
+
+import { Button, Card, Image, message } from 'ant-design-vue';
+
+import { AiImageStatusEnum } from '#/utils/constants';
+
+// 消息
+
+const props = defineProps({
+  detail: {
+    type: Object as PropType<AiImageApi.ImageVO>,
+    default: () => ({}),
+  },
+});
+const emits = defineEmits(['onBtnClick', 'onMjBtnClick']);
+
+const cardImageRef = ref<any>(); // 卡片 image ref
+
+/** 处理点击事件  */
+const handleButtonClick = async (type: string, detail: AiImageApi.ImageVO) => {
+  emits('onBtnClick', type, detail);
+};
+
+/** 处理 Midjourney 按钮点击事件  */
+const handleMidjourneyBtnClick = async (
+  button: AiImageApi.ImageMidjourneyButtonsVO,
+) => {
+  // 确认窗体
+  await confirm(`确认操作 "${button.label} ${button.emoji}" ?`);
+  emits('onMjBtnClick', button, props.detail);
+};
+
+// emits
+
+/** 监听详情 */
+const { detail } = toRefs(props);
+watch(detail, async (newVal) => {
+  await handleLoading(newVal.status);
+});
+const loading = ref();
+/** 处理加载状态 */
+const handleLoading = async (status: number) => {
+  // 情况一：如果是生成中，则设置加载中的 loading
+  if (status === AiImageStatusEnum.IN_PROGRESS) {
+    loading.value = message.loading({
+      content: `生成中...`,
+    });
+
+    // 情况二：如果已经生成结束，则移除 loading
+  } else {
+    if (loading.value) setTimeout(loading.value, 100);
+  }
+};
+
+/** 初始化 */
+onMounted(async () => {
+  await handleLoading(props.detail.status);
+});
+</script>
+<template>
+  <Card body-class="" class="image-card">
+    <div class="image-operation">
+      <div>
+        <Button v-if="detail?.status === AiImageStatusEnum.IN_PROGRESS">
+          生成中
+        </Button>
+        <Button v-else-if="detail?.status === AiImageStatusEnum.SUCCESS">
+          已完成
+        </Button>
+        <Button danger v-else-if="detail?.status === AiImageStatusEnum.FAIL">
+          异常
+        </Button>
+      </div>
+      <!-- 操作区 -->
+      <div>
+        <Button
+          class="btn"
+          type="text"
+          @click="handleButtonClick('download', detail)"
+        >
+          <span class="icon-[ant-design--download-outlined]"></span>
+        </Button>
+        <Button
+          class="btn"
+          type="text"
+          @click="handleButtonClick('regeneration', detail)"
+        >
+          <span class="icon-[ant-design--redo-outlined]"></span>
+        </Button>
+        <Button
+          class="btn"
+          type="text"
+          @click="handleButtonClick('delete', detail)"
+        >
+          <span class="icon-[ant-design--delete-outlined]"></span>
+        </Button>
+        <Button
+          class="btn"
+          type="text"
+          @click="handleButtonClick('more', detail)"
+        >
+          <span class="icon-[ant-design--more-outlined]"></span>
+        </Button>
+      </div>
+    </div>
+    <div class="image-wrapper" ref="cardImageRef">
+      <Image class="image" :src="detail?.picUrl" />
+      <div v-if="detail?.status === AiImageStatusEnum.FAIL">
+        {{ detail?.errorMessage }}
+      </div>
+    </div>
+    <!-- Midjourney 专属操作 -->
+    <div class="image-mj-btns">
+      <Button
+        size="small"
+        v-for="(button, index) in detail?.buttons"
+        :key="index"
+        class="ml-0 mr-[10px] mt-[5px] min-w-[40px]"
+        @click="handleMidjourneyBtnClick(button)"
+      >
+        {{ button.label }}{{ button.emoji }}
+      </Button>
+    </div>
+  </Card>
+</template>
+
+<style scoped lang="scss">
+.image-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 320px;
+  height: auto;
+  border-radius: 10px;
+
+  .image-operation {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    .btn {
+      //border: 1px solid red;
+      padding: 10px;
+      margin: 0;
+    }
+  }
+
+  .image-wrapper {
+    flex: 1;
+    height: 280px;
+    margin-top: 20px;
+    overflow: hidden;
+
+    .image {
+      width: 100%;
+      border-radius: 10px;
+    }
+  }
+
+  .image-mj-btns {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    width: 100%;
+    margin-top: 5px;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/ai/image/index/components/ImageDetail.vue b/apps/web-antd/src/views/ai/image/index/components/ImageDetail.vue
new file mode 100644
index 00000000..f408b722
--- /dev/null
+++ b/apps/web-antd/src/views/ai/image/index/components/ImageDetail.vue
@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import type { AiImageApi } from '#/api/ai/image';
+import type { ImageModelVO } from '#/utils/constants';
+
+import { ref, toRefs, watch } from 'vue';
+
+import { Image } from 'ant-design-vue';
+
+import { getImageMy } from '#/api/ai/image';
+import {
+  AiPlatformEnum,
+  Dall3StyleList,
+  StableDiffusionClipGuidancePresets,
+  StableDiffusionSamplers,
+  StableDiffusionStylePresets,
+} from '#/utils/constants';
+import { formatTime } from '#/utils/formatTime';
+
+// 图片详细信息
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+  },
+});
+const detail = ref<AiImageApi.ImageVO>({} as AiImageApi.ImageVO);
+
+/**  获取图片详情  */
+const getImageDetail = async (id: number) => {
+  detail.value = await getImageMy(id);
+};
+
+const { id } = toRefs(props);
+watch(
+  id,
+  async (newVal) => {
+    if (newVal) {
+      await getImageDetail(newVal);
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="item">
+    <div class="body">
+      <Image class="image" :src="detail?.picUrl" />
+    </div>
+  </div>
+  <!-- 时间 -->
+  <div class="item">
+    <div class="tip">时间</div>
+    <div class="body">
+      <div>
+        提交时间：{{ formatTime(detail.createTime, 'yyyy-MM-dd HH:mm:ss') }}
+      </div>
+      <div>
+        生成时间：{{ formatTime(detail.finishTime, 'yyyy-MM-dd HH:mm:ss') }}
+      </div>
+    </div>
+  </div>
+  <!-- 模型 -->
+  <div class="item">
+    <div class="tip">模型</div>
+    <div class="body">
+      {{ detail.model }}({{ detail.height }}x{{ detail.width }})
+    </div>
+  </div>
+  <!-- 提示词 -->
+  <div class="item">
+    <div class="tip">提示词</div>
+    <div class="body">
+      {{ detail.prompt }}
+    </div>
+  </div>
+  <!-- 地址 -->
+  <div class="item">
+    <div class="tip">图片地址</div>
+    <div class="body">
+      {{ detail.picUrl }}
+    </div>
+  </div>
+  <!-- StableDiffusion 专属区域 -->
+  <div
+    class="item"
+    v-if="
+      detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
+      detail?.options?.sampler
+    "
+  >
+    <div class="tip">采样方法</div>
+    <div class="body">
+      {{
+        StableDiffusionSamplers.find(
+          (item: ImageModelVO) => item.key === detail?.options?.sampler,
+        )?.name
+      }}
+    </div>
+  </div>
+  <div
+    class="item"
+    v-if="
+      detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
+      detail?.options?.clipGuidancePreset
+    "
+  >
+    <div class="tip">CLIP</div>
+    <div class="body">
+      {{
+        StableDiffusionClipGuidancePresets.find(
+          (item: ImageModelVO) =>
+            item.key === detail?.options?.clipGuidancePreset,
+        )?.name
+      }}
+    </div>
+  </div>
+  <div
+    class="item"
+    v-if="
+      detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
+      detail?.options?.stylePreset
+    "
+  >
+    <div class="tip">风格</div>
+    <div class="body">
+      {{
+        StableDiffusionStylePresets.find(
+          (item: ImageModelVO) => item.key === detail?.options?.stylePreset,
+        )?.name
+      }}
+    </div>
+  </div>
+  <div
+    class="item"
+    v-if="
+      detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
+      detail?.options?.steps
+    "
+  >
+    <div class="tip">迭代步数</div>
+    <div class="body">
+      {{ detail?.options?.steps }}
+    </div>
+  </div>
+  <div
+    class="item"
+    v-if="
+      detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
+      detail?.options?.scale
+    "
+  >
+    <div class="tip">引导系数</div>
+    <div class="body">
+      {{ detail?.options?.scale }}
+    </div>
+  </div>
+  <div
+    class="item"
+    v-if="
+      detail.platform === AiPlatformEnum.STABLE_DIFFUSION &&
+      detail?.options?.seed
+    "
+  >
+    <div class="tip">随机因子</div>
+    <div class="body">
+      {{ detail?.options?.seed }}
+    </div>
+  </div>
+  <!-- Dall3 专属区域 -->
+  <div
+    class="item"
+    v-if="detail.platform === AiPlatformEnum.OPENAI && detail?.options?.style"
+  >
+    <div class="tip">风格选择</div>
+    <div class="body">
+      {{
+        Dall3StyleList.find(
+          (item: ImageModelVO) => item.key === detail?.options?.style,
+        )?.name
+      }}
+    </div>
+  </div>
+  <!-- Midjourney 专属区域 -->
+  <div
+    class="item"
+    v-if="
+      detail.platform === AiPlatformEnum.MIDJOURNEY && detail?.options?.version
+    "
+  >
+    <div class="tip">模型版本</div>
+    <div class="body">
+      {{ detail?.options?.version }}
+    </div>
+  </div>
+  <div
+    class="item"
+    v-if="
+      detail.platform === AiPlatformEnum.MIDJOURNEY &&
+      detail?.options?.referImageUrl
+    "
+  >
+    <div class="tip">参考图</div>
+    <div class="body">
+      <Image :src="detail.options.referImageUrl" />
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.item {
+  width: 100%;
+  margin-bottom: 20px;
+  overflow: hidden;
+  word-wrap: break-word;
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .tip {
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .body {
+    margin-top: 10px;
+    color: #616161;
+
+    .taskImage {
+      border-radius: 10px;
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/ai/image/index/components/ImageList.vue b/apps/web-antd/src/views/ai/image/index/components/ImageList.vue
new file mode 100644
index 00000000..dcd44fae
--- /dev/null
+++ b/apps/web-antd/src/views/ai/image/index/components/ImageList.vue
@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import type { AiImageApi } from '#/api/ai/image';
+
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { confirm, useVbenDrawer } from '@vben/common-ui';
+
+import { useDebounceFn } from '@vueuse/core';
+import { Button, Card, message, Pagination } from 'ant-design-vue';
+
+import {
+  deleteImageMy,
+  getImageListMyByIds,
+  getImagePageMy,
+  midjourneyAction,
+} from '#/api/ai/image';
+import { AiImageStatusEnum } from '#/utils/constants';
+import { download } from '#/utils/download';
+
+import ImageCard from './ImageCard.vue';
+import ImageDetail from './ImageDetail.vue';
+
+// 暴露组件方法
+
+const emits = defineEmits(['onRegeneration']);
+const router = useRouter(); // 路由
+const [Drawer, drawerApi] = useVbenDrawer({
+  title: '图片详情',
+  footer: false,
+});
+// 图片分页相关的参数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+});
+const pageTotal = ref<number>(0); // page size
+const imageList = ref<AiImageApi.ImageVO[]>([]); // image 列表
+const imageListRef = ref<any>(); // ref
+// 图片轮询相关的参数（正在生成中的）
+const inProgressImageMap = ref<{}>({}); // 监听的 image 映射，一般是生成中（需要轮询），key 为 image 编号，value 为 image
+const inProgressTimer = ref<any>(); // 生成中的 image 定时器，轮询生成进展
+const showImageDetailId = ref<number>(0); // 图片详情的图片编号
+
+/** 处理查看绘图作品 */
+const handleViewPublic = () => {
+  router.push({
+    name: 'AiImageSquare',
+  });
+};
+
+/** 查看图片的详情  */
+const handleDetailOpen = async () => {
+  drawerApi.open();
+};
+/** 获得 image 图片列表 */
+const getImageList = async () => {
+  const loading = message.loading({
+    content: `加载中...`,
+  });
+  try {
+    // 1. 加载图片列表
+
+    const { list, total } = await getImagePageMy(queryParams);
+    imageList.value = list;
+    pageTotal.value = total;
+
+    // 2. 计算需要轮询的图片
+    const newWatImages: any = {};
+    imageList.value.forEach((item: any) => {
+      if (item.status === AiImageStatusEnum.IN_PROGRESS) {
+        newWatImages[item.id] = item;
+      }
+    });
+    inProgressImageMap.value = newWatImages;
+  } finally {
+    // 关闭正在“加载中”的 Loading
+    loading();
+  }
+};
+const debounceGetImageList = useDebounceFn(getImageList, 80);
+/** 轮询生成中的 image 列表 */
+const refreshWatchImages = async () => {
+  const imageIds = Object.keys(inProgressImageMap.value).map(Number);
+  if (imageIds.length === 0) {
+    return;
+  }
+  const list = (await getImageListMyByIds(imageIds)) as AiImageApi.ImageVO[];
+  const newWatchImages: any = {};
+  list.forEach((image) => {
+    if (image.status === AiImageStatusEnum.IN_PROGRESS) {
+      newWatchImages[image.id] = image;
+    } else {
+      const index = imageList.value.findIndex(
+        (oldImage) => image.id === oldImage.id,
+      );
+      if (index !== -1) {
+        // 更新 imageList
+        imageList.value[index] = image;
+      }
+    }
+  });
+  inProgressImageMap.value = newWatchImages;
+};
+
+/** 图片的点击事件 */
+const handleImageButtonClick = async (
+  type: string,
+  imageDetail: AiImageApi.ImageVO,
+) => {
+  // 详情
+  if (type === 'more') {
+    showImageDetailId.value = imageDetail.id;
+    await handleDetailOpen();
+    return;
+  }
+  // 删除
+  if (type === 'delete') {
+    await confirm(`是否删除照片?`);
+    await deleteImageMy(imageDetail.id);
+    await getImageList();
+    message.success('删除成功!');
+    return;
+  }
+  // 下载
+  if (type === 'download') {
+    await download.image({ url: imageDetail.picUrl });
+    return;
+  }
+  // 重新生成
+  if (type === 'regeneration') {
+    await emits('onRegeneration', imageDetail);
+  }
+};
+
+/** 处理 Midjourney 按钮点击事件  */
+const handleImageMidjourneyButtonClick = async (
+  button: AiImageApi.ImageMidjourneyButtonsVO,
+  imageDetail: AiImageApi.ImageVO,
+) => {
+  // 1. 构建 params 参数
+  const data = {
+    id: imageDetail.id,
+    customId: button.customId,
+  } as AiImageApi.ImageMidjourneyActionVO;
+  // 2. 发送 action
+  await midjourneyAction(data);
+  // 3. 刷新列表
+  await getImageList();
+};
+
+defineExpose({ getImageList }); /** 组件挂在的时候 */
+onMounted(async () => {
+  // 获取 image 列表
+  await getImageList();
+  // 自动刷新 image 列表
+  inProgressTimer.value = setInterval(async () => {
+    await refreshWatchImages();
+  }, 1000 * 3);
+});
+
+/** 组件取消挂在的时候 */
+onUnmounted(async () => {
+  if (inProgressTimer.value) {
+    clearInterval(inProgressTimer.value);
+  }
+});
+</script>
+
+<template>
+  <Drawer class="w-[600px]">
+    <ImageDetail :id="showImageDetailId" />
+  </Drawer>
+  <Card
+    class="dr-task"
+    :body-style="{
+      margin: 0,
+      padding: 0,
+      height: '100%',
+      position: 'relative',
+    }"
+  >
+    <template #title>
+      绘画任务
+      <!-- TODO @fan：看看，怎么优化下这个样子哈。 -->
+      <Button @click="handleViewPublic">绘画作品</Button>
+    </template>
+    <div class="task-image-list" ref="imageListRef">
+      <ImageCard
+        v-for="image in imageList"
+        :key="image.id"
+        :detail="image"
+        @on-btn-click="handleImageButtonClick"
+        @on-mj-btn-click="handleImageMidjourneyButtonClick"
+      />
+    </div>
+    <div class="task-image-pagination">
+      <Pagination
+        :total="pageTotal"
+        :show-total="(total: number) => `共 ${total} 条`"
+        show-quick-jumper
+        show-size-changer
+        v-model:current="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        @change="debounceGetImageList"
+        @show-size-change="debounceGetImageList"
+      />
+    </div>
+  </Card>
+</template>
+<style lang="scss">
+.dr-task {
+  width: 100%;
+  height: 100%;
+}
+
+.task-image-list {
+  position: relative;
+  box-sizing: border-box; /* 确保内边距不会增加高度 */
+  display: flex;
+  flex-flow: row wrap;
+  align-content: flex-start;
+  height: 100%;
+  padding: 20px 20px 140px;
+  overflow: auto;
+
+  > div {
+    margin-right: 20px;
+    margin-bottom: 20px;
+  }
+
+  > div:last-of-type {
+    //margin-bottom: 100px;
+  }
+}
+
+.task-image-pagination {
+  position: absolute;
+  bottom: 60px;
+  z-index: 999;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 50px;
+  line-height: 90px;
+  background-color: #fff;
+}
+</style>
diff --git a/apps/web-antd/src/views/ai/image/index/components/common/index.vue b/apps/web-antd/src/views/ai/image/index/components/common/index.vue
new file mode 100644
index 00000000..05b4ca59
--- /dev/null
+++ b/apps/web-antd/src/views/ai/image/index/components/common/index.vue
@@ -0,0 +1,248 @@
+<!-- dall3 -->
+<script setup lang="ts">
+import type { AiImageApi } from '#/api/ai/image';
+import type { AiModelModelApi } from '#/api/ai/model/model';
+
+import { ref, watch } from 'vue';
+
+import { confirm } from '@vben/common-ui';
+
+import { Button, InputNumber, Select, Space, Textarea } from 'ant-design-vue';
+
+import { drawImage } from '#/api/ai/image';
+import {
+  AiPlatformEnum,
+  ImageHotWords,
+  OtherPlatformEnum,
+} from '#/utils/constants';
+
+// 消息弹窗
+
+// 接收父组件传入的模型列表
+const props = defineProps({
+  models: {
+    type: Array<AiModelModelApi.ModelVO>,
+    default: () => [] as AiModelModelApi.ModelVO[],
+  },
+});
+const emits = defineEmits(['onDrawStart', 'onDrawComplete']);
+
+// 定义属性
+const drawIn = ref<boolean>(false); // 生成中
+const selectHotWord = ref<string>(''); // 选中的热词
+// 表单
+const prompt = ref<string>(''); // 提示词
+const width = ref<number>(512); // 图片宽度
+const height = ref<number>(512); // 图片高度
+const otherPlatform = ref<string>(AiPlatformEnum.TONG_YI); // 平台
+const platformModels = ref<AiModelModelApi.ModelVO[]>([]); // 模型列表
+const modelId = ref<number>(); // 选中的模型
+
+/** 选择热词 */
+const handleHotWordClick = async (hotWord: string) => {
+  // 情况一：取消选中
+  if (selectHotWord.value === hotWord) {
+    selectHotWord.value = '';
+    return;
+  }
+
+  // 情况二：选中
+  selectHotWord.value = hotWord; // 选中
+  prompt.value = hotWord; // 替换提示词
+};
+
+/** 图片生成 */
+const handleGenerateImage = async () => {
+  // 二次确认
+  await confirm(`确认生成内容?`);
+  try {
+    // 加载中
+    drawIn.value = true;
+    // 回调
+    emits('onDrawStart', otherPlatform.value);
+    // 发送请求
+    const form = {
+      platform: otherPlatform.value,
+      modelId: modelId.value, // 模型
+      prompt: prompt.value, // 提示词
+      width: width.value, // 图片宽度
+      height: height.value, // 图片高度
+      options: {},
+    } as unknown as AiImageApi.ImageDrawReqVO;
+    await drawImage(form);
+  } finally {
+    // 回调
+    emits('onDrawComplete', otherPlatform.value);
+    // 加载结束
+    drawIn.value = false;
+  }
+};
+
+/** 填充值 */
+const settingValues = async (detail: AiImageApi.ImageVO) => {
+  prompt.value = detail.prompt;
+  width.value = detail.width;
+  height.value = detail.height;
+};
+
+/** 平台切换 */
+const handlerPlatformChange = async (platform: any) => {
+  // 根据选择的平台筛选模型
+  platformModels.value = props.models.filter(
+    (item: AiModelModelApi.ModelVO) => item.platform === platform,
+  );
+  modelId.value =
+    platformModels.value.length > 0 && platformModels.value[0]
+      ? platformModels.value[0].id
+      : undefined;
+  // 切换平台，默认选择一个模型
+};
+
+/** 监听 models 变化 */
+watch(
+  () => props.models,
+  () => {
+    handlerPlatformChange(otherPlatform.value);
+  },
+  { immediate: true, deep: true },
+);
+/** 暴露组件方法 */
+defineExpose({ settingValues });
+</script>
+<template>
+  <div class="prompt">
+    <b>画面描述</b>
+    <p>建议使用“形容词 + 动词 + 风格”的格式，使用“，”隔开</p>
+    <Textarea
+      v-model:value="prompt"
+      :maxlength="1024"
+      :rows="5"
+      class="w-100% mt-[15px]"
+      placeholder="例如：童话里的小屋应该是什么样子？"
+      show-count
+    />
+  </div>
+  <div class="hot-words">
+    <div>
+      <b>随机热词</b>
+    </div>
+    <Space wrap class="word-list">
+      <Button
+        shape="round"
+        class="btn"
+        :type="selectHotWord === hotWord ? 'primary' : 'default'"
+        v-for="hotWord in ImageHotWords"
+        :key="hotWord"
+        @click="handleHotWordClick(hotWord)"
+      >
+        {{ hotWord }}
+      </Button>
+    </Space>
+  </div>
+  <div class="group-item">
+    <div>
+      <b>平台</b>
+    </div>
+    <Space wrap class="group-item-body">
+      <Select
+        v-model:value="otherPlatform"
+        placeholder="Select"
+        size="large"
+        class="!w-[330px]"
+        @change="handlerPlatformChange"
+      >
+        <Select.Option
+          v-for="item in OtherPlatformEnum"
+          :key="item.key"
+          :value="item.key"
+        >
+          {{ item.name }}
+        </Select.Option>
+      </Select>
+    </Space>
+  </div>
+  <div class="group-item">
+    <div>
+      <b>模型</b>
+    </div>
+    <Space wrap class="group-item-body">
+      <Select
+        v-model:value="modelId"
+        placeholder="Select"
+        size="large"
+        class="!w-[330px]"
+      >
+        <Select.Option
+          v-for="item in platformModels"
+          :key="item.id"
+          :value="item.id"
+        >
+          {{ item.name }}
+        </Select.Option>
+      </Select>
+    </Space>
+  </div>
+  <div class="group-item">
+    <div>
+      <b>图片尺寸</b>
+    </div>
+    <Space wrap class="group-item-body">
+      <InputNumber
+        v-model:value="width"
+        class="mt-[10px] w-[170px]"
+        placeholder="图片宽度"
+      />
+      <InputNumber
+        v-model:value="height"
+        class="w-[170px]"
+        placeholder="图片高度"
+      />
+    </Space>
+  </div>
+  <div class="btns">
+    <Button
+      type="primary"
+      size="large"
+      shape="round"
+      :loading="drawIn"
+      :disabled="prompt.length === 0"
+      @click="handleGenerateImage"
+    >
+      {{ drawIn ? '生成中' : '生成内容' }}
+    </Button>
+  </div>
+</template>
+<style scoped lang="scss">
+.hot-words {
+  display: flex;
+  flex-direction: column;
+  margin-top: 30px;
+
+  .word-list {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: start;
+    margin-top: 15px;
+
+    .btn {
+      margin: 0;
+    }
+  }
+}
+
+// 模型
+.group-item {
+  margin-top: 30px;
+
+  .group-item-body {
+    width: 100%;
+    margin-top: 15px;
+  }
+}
+
+.btns {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+}
+</style>
diff --git a/apps/web-antd/src/views/ai/image/index/components/dall3/index.vue b/apps/web-antd/src/views/ai/image/index/components/dall3/index.vue
new file mode 100644
index 00000000..f48bf094
--- /dev/null
+++ b/apps/web-antd/src/views/ai/image/index/components/dall3/index.vue
@@ -0,0 +1,389 @@
+<!-- dall3 -->
+<script setup lang="ts">
+import type { AiImageApi } from '#/api/ai/image';
+import type { AiModelModelApi } from '#/api/ai/model/model';
+import type { ImageModelVO, ImageSizeVO } from '#/utils/constants';
+
+import { ref } from 'vue';
+
+import { confirm } from '@vben/common-ui';
+
+import { Button, Image, message, Space, Textarea } from 'ant-design-vue';
+
+import { drawImage } from '#/api/ai/image';
+import {
+  AiPlatformEnum,
+  Dall3Models,
+  Dall3SizeList,
+  Dall3StyleList,
+  ImageHotWords,
+} from '#/utils/constants';
+
+// 接收父组件传入的模型列表
+const props = defineProps({
+  models: {
+    type: Array<AiModelModelApi.ModelVO>,
+    default: () => [] as AiModelModelApi.ModelVO[],
+  },
+});
+const emits = defineEmits(['onDrawStart', 'onDrawComplete']);
+
+// 定义属性
+const prompt = ref<string>(''); // 提示词
+const drawIn = ref<boolean>(false); // 生成中
+const selectHotWord = ref<string>(''); // 选中的热词
+const selectModel = ref<string>('dall-e-3'); // 模型
+const selectSize = ref<string>('1024x1024'); // 选中 size
+const style = ref<string>('vivid'); // style 样式
+
+/** 选择热词 */
+const handleHotWordClick = async (hotWord: string) => {
+  // 情况一：取消选中
+  if (selectHotWord.value === hotWord) {
+    selectHotWord.value = '';
+    return;
+  }
+
+  // 情况二：选中
+  selectHotWord.value = hotWord;
+  prompt.value = hotWord;
+};
+
+/** 选择 model 模型 */
+const handleModelClick = async (model: ImageModelVO) => {
+  selectModel.value = model.key;
+  // 可以在这里添加模型特定的处理逻辑
+  // 例如，如果未来需要根据不同模型设置不同参数
+  if (model.key === 'dall-e-3') {
+    // DALL-E-3 模型特定的处理
+    style.value = 'vivid'; // 默认设置vivid风格
+  } else if (model.key === 'dall-e-2') {
+    // DALL-E-2 模型特定的处理
+    style.value = 'natural'; // 如果有其他DALL-E-2适合的默认风格
+  }
+
+  // 更新其他相关参数
+  // 例如可以默认选择最适合当前模型的尺寸
+  const recommendedSize = Dall3SizeList.find(
+    (size) =>
+      (model.key === 'dall-e-3' && size.key === '1024x1024') ||
+      (model.key === 'dall-e-2' && size.key === '512x512'),
+  );
+
+  if (recommendedSize) {
+    selectSize.value = recommendedSize.key;
+  }
+};
+
+/** 选择 style 样式  */
+const handleStyleClick = async (imageStyle: ImageModelVO) => {
+  style.value = imageStyle.key;
+};
+
+/** 选择 size 大小  */
+const handleSizeClick = async (imageSize: ImageSizeVO) => {
+  selectSize.value = imageSize.key;
+};
+
+/**  图片生产  */
+const handleGenerateImage = async () => {
+  // 从 models 中查找匹配的模型
+  const matchedModel = props.models.find(
+    (item) =>
+      item.model === selectModel.value &&
+      item.platform === AiPlatformEnum.OPENAI,
+  );
+  if (!matchedModel) {
+    message.error('该模型不可用，请选择其它模型');
+    return;
+  }
+
+  // 二次确认
+  await confirm(`确认生成内容?`);
+  try {
+    // 加载中
+    drawIn.value = true;
+    // 回调
+    emits('onDrawStart', AiPlatformEnum.OPENAI);
+    const imageSize = Dall3SizeList.find(
+      (item) => item.key === selectSize.value,
+    ) as ImageSizeVO;
+    const form = {
+      platform: AiPlatformEnum.OPENAI,
+      prompt: prompt.value, // 提示词
+      modelId: matchedModel.id, // 使用匹配到的模型
+      style: style.value, // 图像生成的风格
+      width: imageSize.width, // size 不能为空
+      height: imageSize.height, // size 不能为空
+      options: {
+        style: style.value, // 图像生成的风格
+      },
+    } as AiImageApi.ImageDrawReqVO;
+    // 发送请求
+    await drawImage(form);
+  } finally {
+    // 回调
+    emits('onDrawComplete', AiPlatformEnum.OPENAI);
+    // 加载结束
+    drawIn.value = false;
+  }
+};
+
+/** 填充值 */
+const settingValues = async (detail: AiImageApi.ImageVO) => {
+  prompt.value = detail.prompt;
+  selectModel.value = detail.model;
+  style.value = detail.options?.style;
+  const imageSize = Dall3SizeList.find(
+    (item) => item.key === `${detail.width}x${detail.height}`,
+  ) as ImageSizeVO;
+  await handleSizeClick(imageSize);
+};
+
+/** 暴露组件方法 */
+defineExpose({ settingValues });
+</script>
+<template>
+  <div class="prompt">
+    <b>画面描述</b>
+    <p>建议使用"形容词 + 动词 + 风格"的格式，使用"，"隔开</p>
+    <Textarea
+      v-model:value="prompt"
+      :maxlength="1024"
+      :rows="5"
+      class="w-100% mt-[15px]"
+      placeholder="例如：童话里的小屋应该是什么样子？"
+      show-count
+    />
+  </div>
+  <div class="hot-words">
+    <div>
+      <b>随机热词</b>
+    </div>
+    <Space wrap class="word-list">
+      <Button
+        shape="round"
+        class="btn"
+        :type="selectHotWord === hotWord ? 'primary' : 'default'"
+        v-for="hotWord in ImageHotWords"
+        :key="hotWord"
+        @click="handleHotWordClick(hotWord)"
+      >
+        {{ hotWord }}
+      </Button>
+    </Space>
+  </div>
+  <div class="model">
+    <div>
+      <b>模型选择</b>
+    </div>
+    <Space wrap class="model-list">
+      <div
+        :class="
+          selectModel === model.key ? 'modal-item selectModel' : 'modal-item'
+        "
+        v-for="model in Dall3Models"
+        :key="model.key"
+      >
+        <Image
+          :preview="false"
+          :src="model.image"
+          fit="contain"
+          @click="handleModelClick(model)"
+        />
+        <div class="model-font">{{ model.name }}</div>
+      </div>
+    </Space>
+  </div>
+  <div class="image-style">
+    <div>
+      <b>风格选择</b>
+    </div>
+    <Space wrap class="image-style-list">
+      <div
+        :class="
+          style === imageStyle.key
+            ? 'image-style-item selectImageStyle'
+            : 'image-style-item'
+        "
+        v-for="imageStyle in Dall3StyleList"
+        :key="imageStyle.key"
+      >
+        <Image
+          :preview="false"
+          :src="imageStyle.image"
+          fit="contain"
+          @click="handleStyleClick(imageStyle)"
+        />
+        <div class="style-font">{{ imageStyle.name }}</div>
+      </div>
+    </Space>
+  </div>
+  <div class="image-size">
+    <div>
+      <b>画面比例</b>
+    </div>
+    <Space wrap class="size-list">
+      <div
+        class="size-item"
+        v-for="imageSize in Dall3SizeList"
+        :key="imageSize.key"
+        @click="handleSizeClick(imageSize)"
+      >
+        <div
+          :class="
+            selectSize === imageSize.key
+              ? 'size-wrapper selectImageSize'
+              : 'size-wrapper'
+          "
+        >
+          <div :style="imageSize.style"></div>
+        </div>
+        <div class="size-font">{{ imageSize.name }}</div>
+      </div>
+    </Space>
+  </div>
+  <div class="btns">
+    <Button
+      type="primary"
+      size="large"
+      shape="round"
+      :loading="drawIn"
+      :disabled="prompt.length === 0"
+      @click="handleGenerateImage"
+    >
+      {{ drawIn ? '生成中' : '生成内容' }}
+    </Button>
+  </div>
+</template>
+<style scoped lang="scss">
+// 热词
+.hot-words {
+  display: flex;
+  flex-direction: column;
+  margin-top: 30px;
+
+  .word-list {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: start;
+    margin-top: 15px;
+
+    .btn {
+      margin: 0;
+    }
+  }
+}
+
+// 模型
+.model {
+  margin-top: 30px;
+
+  .model-list {
+    margin-top: 15px;
+
+    .modal-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 110px;
+      //outline: 1px solid blue;
+      overflow: hidden;
+      cursor: pointer;
+      border: 3px solid transparent;
+
+      .model-font {
+        font-size: 14px;
+        font-weight: bold;
+        color: #3e3e3e;
+      }
+    }
+
+    .selectModel {
+      border: 3px solid #1293ff;
+      border-radius: 5px;
+    }
+  }
+}
+
+// 样式 style
+.image-style {
+  margin-top: 30px;
+
+  .image-style-list {
+    margin-top: 15px;
+
+    .image-style-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 110px;
+      //outline: 1px solid blue;
+      overflow: hidden;
+      cursor: pointer;
+      border: 3px solid transparent;
+
+      .style-font {
+        font-size: 14px;
+        font-weight: bold;
+        color: #3e3e3e;
+      }
+    }
+
+    .selectImageStyle {
+      border: 3px solid #1293ff;
+      border-radius: 5px;
+    }
+  }
+}
+
+// 尺寸
+.image-size {
+  width: 100%;
+  margin-top: 30px;
+
+  .size-list {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 20px;
+
+    .size-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+
+      .size-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 50px;
+        height: 50px;
+        padding: 4px;
+        background-color: #fff;
+        border: 1px solid #fff;
+        border-radius: 7px;
+      }
+
+      .size-font {
+        font-size: 14px;
+        font-weight: bold;
+        color: #3e3e3e;
+      }
+    }
+  }
+
+  .selectImageSize {
+    border: 1px solid #1293ff !important;
+  }
+}
+
+.btns {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+}
+</style>
diff --git a/apps/web-antd/src/views/ai/image/index/components/midjourney/index.vue b/apps/web-antd/src/views/ai/image/index/components/midjourney/index.vue
new file mode 100644
index 00000000..b82c0b14
--- /dev/null
+++ b/apps/web-antd/src/views/ai/image/index/components/midjourney/index.vue
@@ -0,0 +1,371 @@
+<!-- dall3 -->
+<script setup lang="ts">
+import type { AiImageApi } from '#/api/ai/image';
+import type { AiModelModelApi } from '#/api/ai/model/model';
+import type { ImageModelVO, ImageSizeVO } from '#/utils/constants';
+
+import { ref } from 'vue';
+
+import { confirm } from '@vben/common-ui';
+
+import {
+  Button,
+  Image,
+  message,
+  Select,
+  Space,
+  Textarea,
+} from 'ant-design-vue';
+
+import { midjourneyImagine } from '#/api/ai/image';
+import { ImageUpload } from '#/components/upload';
+import {
+  AiPlatformEnum,
+  ImageHotWords,
+  MidjourneyModels,
+  MidjourneySizeList,
+  MidjourneyVersions,
+  NijiVersionList,
+} from '#/utils/constants';
+
+// 消息弹窗
+
+// 接收父组件传入的模型列表
+const props = defineProps({
+  models: {
+    type: Array<AiModelModelApi.ModelVO>,
+    default: () => [] as AiModelModelApi.ModelVO[],
+  },
+});
+const emits = defineEmits(['onDrawStart', 'onDrawComplete']);
+
+// 定义属性
+const drawIn = ref<boolean>(false); // 生成中
+const selectHotWord = ref<string>(''); // 选中的热词
+// 表单
+const prompt = ref<string>(''); // 提示词
+const referImageUrl = ref<any>(); // 参考图
+const selectModel = ref<string>('midjourney'); // 选中的模型
+const selectSize = ref<string>('1:1'); // 选中 size
+const selectVersion = ref<any>('6.0'); // 选中的 version
+const versionList = ref<any>(MidjourneyVersions); // version 列表
+
+/** 选择热词 */
+const handleHotWordClick = async (hotWord: string) => {
+  // 情况一：取消选中
+  if (selectHotWord.value === hotWord) {
+    selectHotWord.value = '';
+    return;
+  }
+
+  // 情况二：选中
+  selectHotWord.value = hotWord; // 选中
+  prompt.value = hotWord; // 设置提示次
+};
+
+/** 点击 size 尺寸 */
+const handleSizeClick = async (imageSize: ImageSizeVO) => {
+  selectSize.value = imageSize.key;
+};
+
+/** 点击 model 模型 */
+const handleModelClick = async (model: ImageModelVO) => {
+  selectModel.value = model.key;
+  versionList.value =
+    model.key === 'niji' ? NijiVersionList : MidjourneyVersions;
+  selectVersion.value = versionList.value[0].value;
+};
+
+/** 图片生成 */
+const handleGenerateImage = async () => {
+  // 从 models 中查找匹配的模型
+  const matchedModel = props.models.find(
+    (item) =>
+      item.model === selectModel.value &&
+      item.platform === AiPlatformEnum.MIDJOURNEY,
+  );
+  if (!matchedModel) {
+    message.error('该模型不可用，请选择其它模型');
+    return;
+  }
+
+  // 二次确认
+  await confirm(`确认生成内容?`);
+  try {
+    // 加载中
+    drawIn.value = true;
+    // 回调
+    emits('onDrawStart', AiPlatformEnum.MIDJOURNEY);
+    // 发送请求
+    const imageSize = MidjourneySizeList.find(
+      (item) => selectSize.value === item.key,
+    ) as ImageSizeVO;
+    const req = {
+      prompt: prompt.value,
+      modelId: matchedModel.id,
+      width: imageSize.width,
+      height: imageSize.height,
+      version: selectVersion.value,
+      referImageUrl: referImageUrl.value,
+    } as AiImageApi.ImageMidjourneyImagineReqVO;
+    await midjourneyImagine(req);
+  } finally {
+    // 回调
+    emits('onDrawComplete', AiPlatformEnum.MIDJOURNEY);
+    // 加载结束
+    drawIn.value = false;
+  }
+};
+
+/** 填充值 */
+const settingValues = async (detail: AiImageApi.ImageVO) => {
+  // 提示词
+  prompt.value = detail.prompt;
+  // image size
+  const imageSize = MidjourneySizeList.find(
+    (item) => item.key === `${detail.width}:${detail.height}`,
+  ) as ImageSizeVO;
+  selectSize.value = imageSize.key;
+  // 选中模型
+  const model = MidjourneyModels.find(
+    (item) => item.key === detail.options?.model,
+  ) as ImageModelVO;
+  await handleModelClick(model);
+  // 版本
+  selectVersion.value = versionList.value.find(
+    (item: any) => item.value === detail.options?.version,
+  ).value;
+  // image
+  referImageUrl.value = detail.options.referImageUrl;
+};
+
+/** 暴露组件方法 */
+defineExpose({ settingValues });
+</script>
+<template>
+  <div class="prompt">
+    <b>画面描述</b>
+    <p>建议使用“形容词+动词+风格”的格式，使用“，”隔开.</p>
+    <Textarea
+      v-model:value="prompt"
+      :maxlength="1024"
+      :rows="5"
+      class="w-100% mt-[15px]"
+      placeholder="例如：童话里的小屋应该是什么样子？"
+      show-count
+    />
+  </div>
+  <div class="hot-words">
+    <div>
+      <b>随机热词</b>
+    </div>
+    <Space wrap class="word-list">
+      <Button
+        shape="round"
+        class="btn"
+        :type="selectHotWord === hotWord ? 'primary' : 'default'"
+        v-for="hotWord in ImageHotWords"
+        :key="hotWord"
+        @click="handleHotWordClick(hotWord)"
+      >
+        {{ hotWord }}
+      </Button>
+    </Space>
+  </div>
+  <div class="image-size">
+    <div>
+      <b>尺寸</b>
+    </div>
+    <Space wrap class="size-list">
+      <div
+        class="size-item"
+        v-for="imageSize in MidjourneySizeList"
+        :key="imageSize.key"
+        @click="handleSizeClick(imageSize)"
+      >
+        <div
+          :class="
+            selectSize === imageSize.key
+              ? 'size-wrapper selectImageSize'
+              : 'size-wrapper'
+          "
+        >
+          <div :style="imageSize.style"></div>
+        </div>
+        <div class="size-font">{{ imageSize.key }}</div>
+      </div>
+    </Space>
+  </div>
+  <div class="model">
+    <div>
+      <b>模型</b>
+    </div>
+    <Space wrap class="model-list">
+      <div
+        :class="
+          selectModel === model.key ? 'modal-item selectModel' : 'modal-item'
+        "
+        v-for="model in MidjourneyModels"
+        :key="model.key"
+      >
+        <Image
+          :preview="false"
+          :src="model.image"
+          fit="contain"
+          @click="handleModelClick(model)"
+        />
+        <div class="model-font">{{ model.name }}</div>
+      </div>
+    </Space>
+  </div>
+  <div class="version">
+    <div>
+      <b>版本</b>
+    </div>
+    <Space wrap class="version-list">
+      <Select
+        v-model:value="selectVersion"
+        class="version-select !w-[330px]"
+        clearable
+        placeholder="请选择版本"
+      >
+        <Select.Option
+          v-for="item in versionList"
+          :key="item.value"
+          :value="item.value"
+        >
+          {{ item.label }}
+        </Select.Option>
+      </Select>
+    </Space>
+  </div>
+  <div class="model">
+    <div>
+      <b>参考图</b>
+    </div>
+    <Space wrap class="model-list">
+      <ImageUpload v-model:value="referImageUrl" :show-description="false" />
+    </Space>
+  </div>
+  <div class="btns">
+    <Button
+      type="primary"
+      size="large"
+      shape="round"
+      :disabled="prompt.length === 0"
+      @click="handleGenerateImage"
+    >
+      {{ drawIn ? '生成中' : '生成内容' }}
+    </Button>
+  </div>
+</template>
+<style scoped lang="scss">
+// 热词
+.hot-words {
+  display: flex;
+  flex-direction: column;
+  margin-top: 30px;
+
+  .word-list {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: start;
+    margin-top: 15px;
+
+    .btn {
+      margin: 0;
+    }
+  }
+}
+
+// version
+.version {
+  margin-top: 20px;
+
+  .version-list {
+    width: 100%;
+    margin-top: 20px;
+  }
+}
+
+// 模型
+.model {
+  margin-top: 30px;
+
+  .model-list {
+    margin-top: 15px;
+
+    .modal-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 150px;
+      //outline: 1px solid blue;
+      overflow: hidden;
+      cursor: pointer;
+      border: 3px solid transparent;
+
+      .model-font {
+        font-size: 14px;
+        font-weight: bold;
+        color: #3e3e3e;
+      }
+    }
+
+    .selectModel {
+      border: 3px solid #1293ff;
+      border-radius: 5px;
+    }
+  }
+}
+
+// 尺寸
+.image-size {
+  width: 100%;
+  margin-top: 30px;
+
+  .size-list {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    margin-top: 20px;
+
+    .size-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+
+      .size-wrapper {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 50px;
+        height: 50px;
+        padding: 4px;
+        background-color: #fff;
+        border: 1px solid #fff;
+        border-radius: 7px;
+      }
+
+      .size-font {
+        font-size: 14px;
+        font-weight: bold;
+        color: #3e3e3e;
+      }
+    }
+  }
+
+  .selectImageSize {
+    border: 1px solid #1293ff !important;
+  }
+}
+
+.btns {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+}
+</style>
diff --git a/apps/web-antd/src/views/ai/image/index/components/stableDiffusion/index.vue b/apps/web-antd/src/views/ai/image/index/components/stableDiffusion/index.vue
new file mode 100644
index 00000000..cdd2f47b
--- /dev/null
+++ b/apps/web-antd/src/views/ai/image/index/components/stableDiffusion/index.vue
@@ -0,0 +1,324 @@
+<!-- dall3 -->
+<script setup lang="ts">
+import type { AiImageApi } from '#/api/ai/image';
+import type { AiModelModelApi } from '#/api/ai/model/model';
+
+import { ref } from 'vue';
+
+import { alert, confirm } from '@vben/common-ui';
+
+import {
+  Button,
+  Input,
+  InputNumber,
+  message,
+  Select,
+  Space,
+  Textarea,
+} from 'ant-design-vue';
+
+import { drawImage } from '#/api/ai/image';
+import {
+  AiPlatformEnum,
+  ImageHotEnglishWords,
+  StableDiffusionClipGuidancePresets,
+  StableDiffusionSamplers,
+  StableDiffusionStylePresets,
+} from '#/utils/constants';
+import { hasChinese } from '#/utils/utils';
+
+// 消息弹窗
+
+// 接收父组件传入的模型列表
+const props = defineProps({
+  models: {
+    type: Array<AiModelModelApi.ModelVO>,
+    default: () => [] as AiModelModelApi.ModelVO[],
+  },
+});
+const emits = defineEmits(['onDrawStart', 'onDrawComplete']);
+
+// 定义属性
+const drawIn = ref<boolean>(false); // 生成中
+const selectHotWord = ref<string>(''); // 选中的热词
+// 表单
+const prompt = ref<string>(''); // 提示词
+const width = ref<number>(512); // 图片宽度
+const height = ref<number>(512); // 图片高度
+const sampler = ref<string>('DDIM'); // 采样方法
+const steps = ref<number>(20); // 迭代步数
+const seed = ref<number>(42); // 控制生成图像的随机性
+const scale = ref<number>(7.5); // 引导系数
+const clipGuidancePreset = ref<string>('NONE'); // 文本提示相匹配的图像(clip_guidance_preset) 简称 CLIP
+const stylePreset = ref<string>('3d-model'); // 风格
+
+/** 选择热词 */
+const handleHotWordClick = async (hotWord: string) => {
+  // 情况一：取消选中
+  if (selectHotWord.value === hotWord) {
+    selectHotWord.value = '';
+    return;
+  }
+
+  // 情况二：选中
+  selectHotWord.value = hotWord; // 选中
+  prompt.value = hotWord; // 替换提示词
+};
+
+/** 图片生成 */
+const handleGenerateImage = async () => {
+  // 从 models 中查找匹配的模型
+  const selectModel = 'stable-diffusion-v1-6';
+  const matchedModel = props.models.find(
+    (item) =>
+      item.model === selectModel &&
+      item.platform === AiPlatformEnum.STABLE_DIFFUSION,
+  );
+  if (!matchedModel) {
+    message.error('该模型不可用，请选择其它模型');
+    return;
+  }
+
+  // 二次确认
+  if (hasChinese(prompt.value)) {
+    alert('暂不支持中文！');
+    return;
+  }
+  await confirm(`确认生成内容?`);
+
+  try {
+    // 加载中
+    drawIn.value = true;
+    // 回调
+    emits('onDrawStart', AiPlatformEnum.STABLE_DIFFUSION);
+    // 发送请求
+    const form = {
+      modelId: matchedModel.id,
+      prompt: prompt.value, // 提示词
+      width: width.value, // 图片宽度
+      height: height.value, // 图片高度
+      options: {
+        seed: seed.value, // 随机种子
+        steps: steps.value, // 图片生成步数
+        scale: scale.value, // 引导系数
+        sampler: sampler.value, // 采样算法
+        clipGuidancePreset: clipGuidancePreset.value, // 文本提示相匹配的图像 CLIP
+        stylePreset: stylePreset.value, // 风格
+      },
+    } as unknown as AiImageApi.ImageDrawReqVO;
+    await drawImage(form);
+  } finally {
+    // 回调
+    emits('onDrawComplete', AiPlatformEnum.STABLE_DIFFUSION);
+    // 加载结束
+    drawIn.value = false;
+  }
+};
+
+/** 填充值 */
+const settingValues = async (detail: AiImageApi.ImageVO) => {
+  prompt.value = detail.prompt;
+  width.value = detail.width;
+  height.value = detail.height;
+  seed.value = detail.options?.seed;
+  steps.value = detail.options?.steps;
+  scale.value = detail.options?.scale;
+  sampler.value = detail.options?.sampler;
+  clipGuidancePreset.value = detail.options?.clipGuidancePreset;
+  stylePreset.value = detail.options?.stylePreset;
+};
+
+/** 暴露组件方法 */
+defineExpose({ settingValues });
+</script>
+<template>
+  <div class="prompt">
+    <b>画面描述</b>
+    <p>建议使用“形容词 + 动词 + 风格”的格式，使用“，”隔开</p>
+    <Textarea
+      v-model:value="prompt"
+      :maxlength="1024"
+      :rows="5"
+      class="w-100% mt-[15px]"
+      placeholder="例如：童话里的小屋应该是什么样子？"
+      show-count
+    />
+  </div>
+  <div class="hot-words">
+    <div>
+      <b>随机热词</b>
+    </div>
+    <Space wrap class="word-list">
+      <Button
+        shape="round"
+        class="btn"
+        :type="selectHotWord === hotWord ? 'primary' : 'default'"
+        v-for="hotWord in ImageHotEnglishWords"
+        :key="hotWord"
+        @click="handleHotWordClick(hotWord)"
+      >
+        {{ hotWord }}
+      </Button>
+    </Space>
+  </div>
+  <div class="group-item">
+    <div>
+      <b>采样方法</b>
+    </div>
+    <Space wrap class="group-item-body">
+      <Select
+        v-model:value="sampler"
+        placeholder="Select"
+        size="large"
+        class="!w-[330px]"
+      >
+        <Select.Option
+          v-for="item in StableDiffusionSamplers"
+          :key="item.key"
+          :value="item.key"
+        >
+          {{ item.name }}
+        </Select.Option>
+      </Select>
+    </Space>
+  </div>
+  <div class="group-item">
+    <div>
+      <b>CLIP</b>
+    </div>
+    <Space wrap class="group-item-body">
+      <Select
+        v-model:value="clipGuidancePreset"
+        placeholder="Select"
+        size="large"
+        class="!w-[330px]"
+      >
+        <Select.Option
+          v-for="item in StableDiffusionClipGuidancePresets"
+          :key="item.key"
+          :value="item.key"
+        >
+          {{ item.name }}
+        </Select.Option>
+      </Select>
+    </Space>
+  </div>
+  <div class="group-item">
+    <div>
+      <b>风格</b>
+    </div>
+    <Space wrap class="group-item-body">
+      <Select
+        v-model:value="stylePreset"
+        placeholder="Select"
+        size="large"
+        class="!w-[330px]"
+      >
+        <Select.Option
+          v-for="item in StableDiffusionStylePresets"
+          :key="item.key"
+          :label="item.name"
+          :value="item.key"
+        >
+          {{ item.name }}
+        </Select.Option>
+      </Select>
+    </Space>
+  </div>
+  <div class="group-item">
+    <div>
+      <b>图片尺寸</b>
+    </div>
+    <Space wrap class="group-item-body">
+      <Input v-model="width" class="w-[170px]" placeholder="图片宽度" />
+      <Input v-model="height" class="w-[170px]" placeholder="图片高度" />
+    </Space>
+  </div>
+  <div class="group-item">
+    <div>
+      <b>迭代步数</b>
+    </div>
+    <Space wrap class="group-item-body">
+      <InputNumber
+        v-model="steps"
+        size="large"
+        class="!w-[330px]"
+        placeholder="Please input"
+      />
+    </Space>
+  </div>
+  <div class="group-item">
+    <div>
+      <b>引导系数</b>
+    </div>
+    <Space wrap class="group-item-body">
+      <InputNumber
+        v-model="scale"
+        type="number"
+        size="large"
+        class="!w-[330px]"
+        placeholder="Please input"
+      />
+    </Space>
+  </div>
+  <div class="group-item">
+    <div>
+      <b>随机因子</b>
+    </div>
+    <Space wrap class="group-item-body">
+      <InputNumber
+        v-model:value="seed"
+        size="large"
+        class="!w-[330px]"
+        placeholder="Please input"
+      />
+    </Space>
+  </div>
+  <div class="btns">
+    <Button
+      type="primary"
+      size="large"
+      shape="round"
+      :loading="drawIn"
+      :disabled="prompt.length === 0"
+      @click="handleGenerateImage"
+    >
+      {{ drawIn ? '生成中' : '生成内容' }}
+    </Button>
+  </div>
+</template>
+<style scoped lang="scss">
+// 热词
+.hot-words {
+  display: flex;
+  flex-direction: column;
+  margin-top: 30px;
+
+  .word-list {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: start;
+    margin-top: 15px;
+
+    .btn {
+      margin: 0;
+    }
+  }
+}
+
+// 模型
+.group-item {
+  margin-top: 30px;
+
+  .group-item-body {
+    width: 100%;
+    margin-top: 15px;
+  }
+}
+
+.btns {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+}
+</style>
diff --git a/apps/web-antd/src/views/ai/image/index/index.vue b/apps/web-antd/src/views/ai/image/index/index.vue
index 1d292d68..e63e7d23 100644
--- a/apps/web-antd/src/views/ai/image/index/index.vue
+++ b/apps/web-antd/src/views/ai/image/index/index.vue
@@ -1,28 +1,171 @@
 <script lang="ts" setup>
+import type { AiImageApi } from '#/api/ai/image';
+import type { AiModelModelApi } from '#/api/ai/model/model';
+
+import { nextTick, onMounted, ref } from 'vue';
+
 import { Page } from '@vben/common-ui';
 
-import { Button } from 'ant-design-vue';
+import { Segmented } from 'ant-design-vue';
+
+import { getModelSimpleList } from '#/api/ai/model/model';
+import { AiModelTypeEnum, AiPlatformEnum } from '#/utils/constants';
+
+import Common from './components/common/index.vue';
+import Dall3 from './components/dall3/index.vue';
+import ImageList from './components/ImageList.vue';
+import Midjourney from './components/midjourney/index.vue';
+import StableDiffusion from './components/stableDiffusion/index.vue';
+
+const imageListRef = ref<any>(); // image 列表 ref
+const dall3Ref = ref<any>(); // dall3(openai) ref
+const midjourneyRef = ref<any>(); // midjourney ref
+const stableDiffusionRef = ref<any>(); // stable diffusion ref
+const commonRef = ref<any>(); // stable diffusion ref
+
+// 定义属性
+const selectPlatform = ref('common'); // 选中的平台
+const platformOptions = [
+  {
+    label: '通用',
+    value: 'common',
+  },
+  {
+    label: 'DALL3 绘画',
+    value: AiPlatformEnum.OPENAI,
+  },
+  {
+    label: 'MJ 绘画',
+    value: AiPlatformEnum.MIDJOURNEY,
+  },
+  {
+    label: 'SD 绘图',
+    value: AiPlatformEnum.STABLE_DIFFUSION,
+  },
+];
+
+const models = ref<AiModelModelApi.ModelVO[]>([]); // 模型列表
+
+/** 绘画 start  */
+const handleDrawStart = async () => {};
+
+/** 绘画 complete */
+const handleDrawComplete = async () => {
+  await imageListRef.value.getImageList();
+};
+
+/** 重新生成：将画图详情填充到对应平台 */
+const handleRegeneration = async (image: AiImageApi.ImageVO) => {
+  // 切换平台
+  selectPlatform.value = image.platform;
+  // 根据不同平台填充 image
+  await nextTick();
+  switch (image.platform) {
+    case AiPlatformEnum.MIDJOURNEY: {
+      midjourneyRef.value.settingValues(image);
+
+      break;
+    }
+    case AiPlatformEnum.OPENAI: {
+      dall3Ref.value.settingValues(image);
+
+      break;
+    }
+    case AiPlatformEnum.STABLE_DIFFUSION: {
+      stableDiffusionRef.value.settingValues(image);
+
+      break;
+    }
+    // No default
+  }
+  // TODO @fan：貌似 other 重新设置不行？
+};
+
+/** 组件挂载的时候 */
+onMounted(async () => {
+  // 获取模型列表
+  models.value = await getModelSimpleList(AiModelTypeEnum.IMAGE);
+});
 </script>
 
 <template>
-  <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/image/index/index.vue"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/ai/image/index/index.vue
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <div class="ai-image">
+      <div class="left">
+        <div class="segmented flex justify-center">
+          <Segmented
+            v-model:value="selectPlatform"
+            :options="platformOptions"
+          />
+        </div>
+        <div class="modal-switch-container">
+          <Common
+            v-if="selectPlatform === 'common'"
+            ref="commonRef"
+            :models="models"
+            @on-draw-complete="handleDrawComplete"
+          />
+          <Dall3
+            v-if="selectPlatform === AiPlatformEnum.OPENAI"
+            ref="dall3Ref"
+            :models="models"
+            @on-draw-start="handleDrawStart"
+            @on-draw-complete="handleDrawComplete"
+          />
+          <Midjourney
+            v-if="selectPlatform === AiPlatformEnum.MIDJOURNEY"
+            ref="midjourneyRef"
+            :models="models"
+          />
+          <StableDiffusion
+            v-if="selectPlatform === AiPlatformEnum.STABLE_DIFFUSION"
+            ref="stableDiffusionRef"
+            :models="models"
+            @on-draw-complete="handleDrawComplete"
+          />
+        </div>
+      </div>
+      <div class="main">
+        <ImageList ref="imageListRef" @on-regeneration="handleRegeneration" />
+      </div>
+    </div>
   </Page>
 </template>
+
+<style scoped lang="scss">
+.ai-image {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+
+  .left {
+    display: flex;
+    flex-direction: column;
+    width: 390px;
+    padding: 20px;
+
+    .segmented .ant-segmented {
+      background-color: #ececec;
+    }
+
+    .modal-switch-container {
+      height: 100%;
+      margin-top: 30px;
+      overflow-y: auto;
+    }
+  }
+
+  .main {
+    flex: 1;
+    background-color: #fff;
+  }
+
+  .right {
+    width: 350px;
+    background-color: #f7f8fa;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/ai/image/square/index.vue b/apps/web-antd/src/views/ai/image/square/index.vue
new file mode 100644
index 00000000..6cf48984
--- /dev/null
+++ b/apps/web-antd/src/views/ai/image/square/index.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { AiImageApi } from '#/api/ai/image';
+
+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 { getImagePageMy } from '#/api/ai/image';
+// TODO @fan：加个 loading 加载中的状态
+const loading = ref(true); // 列表的加载中
+const list = ref<AiImageApi.ImageVO[]>([]); // 列表的数据
+const total = ref(0); // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  publicStatus: true,
+  prompt: undefined,
+});
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true;
+  try {
+    const data = await getImagePageMy(queryParams);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+};
+const debounceGetList = useDebounceFn(getList, 80);
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1;
+  getList();
+};
+
+/** 初始化 */
+onMounted(async () => {
+  await getList();
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <div class="square-container">
+      <!-- TODO @fan：style 建议换成 unocss -->
+      <!-- TODO @fan：Search 可以换成 Icon 组件么？ -->
+      <Input.Search
+        v-model="queryParams.prompt"
+        style="width: 100%; margin-bottom: 20px"
+        size="large"
+        placeholder="请输入要搜索的内容"
+        @keyup.enter="handleQuery"
+      />
+      <div class="gallery">
+        <!-- TODO @fan：这个图片的风格，要不和 ImageCard.vue 界面一致？（只有卡片，没有操作）；因为看着更有相框的感觉~~~ -->
+        <div v-for="item in list" :key="item.id" class="gallery-item">
+          <img :src="item.picUrl" class="img" />
+        </div>
+      </div>
+      <!-- TODO @fan：缺少翻页 -->
+      <!-- 分页 -->
+      <Pagination
+        :total="total"
+        :show-total="(total: number) => `共 ${total} 条`"
+        show-quick-jumper
+        show-size-changer
+        v-model:current="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        @change="debounceGetList"
+        @show-size-change="debounceGetList"
+      />
+    </div>
+  </Page>
+</template>
+<style scoped lang="scss">
+.square-container {
+  padding: 20px;
+  background-color: #fff;
+
+  .gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 10px;
+    //max-width: 1000px;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
+  }
+
+  .gallery-item {
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    background: #f0f0f0;
+    transition: transform 0.3s;
+  }
+
+  .gallery-item img {
+    display: block;
+    width: 100%;
+    height: auto;
+    transition: transform 0.3s;
+  }
+
+  .gallery-item:hover img {
+    transform: scale(1.1);
+  }
+
+  .gallery-item:hover {
+    transform: scale(1.05);
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/ai/music/index/index.vue b/apps/web-antd/src/views/ai/music/index/index.vue
index 0f275a36..ef81570c 100644
--- a/apps/web-antd/src/views/ai/music/index/index.vue
+++ b/apps/web-antd/src/views/ai/music/index/index.vue
@@ -5,6 +5,7 @@ import { ref, unref } from 'vue';
 
 import { Page } from '@vben/common-ui';
 
+import List from './list/index.vue';
 import Mode from './mode/index.vue';
 
 defineOptions({ name: 'Index' });
diff --git a/apps/web-antd/src/views/ai/music/index/list/audioBar/index.vue b/apps/web-antd/src/views/ai/music/index/list/audioBar/index.vue
new file mode 100644
index 00000000..d8f4b129
--- /dev/null
+++ b/apps/web-antd/src/views/ai/music/index/list/audioBar/index.vue
@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import type { Nullable } from '@vben/types';
+
+import { inject, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Image, Slider } from 'ant-design-vue';
+
+import { formatPast } from '#/utils/formatTime';
+
+defineOptions({ name: 'Index' });
+
+const currentSong = inject('currentSong', {});
+
+const audioRef = ref<Nullable<HTMLElement>>(null);
+// 音频相关属性https://www.runoob.com/tags/ref-av-dom.html
+const audioProps = reactive<any>({
+  autoplay: true,
+  paused: false,
+  currentTime: '00:00',
+  duration: '00:00',
+  muted: false,
+  volume: 50,
+});
+
+function toggleStatus(type: string) {
+  audioProps[type] = !audioProps[type];
+  if (type === 'paused' && audioRef.value) {
+    if (audioProps[type]) {
+      audioRef.value.pause();
+    } else {
+      audioRef.value.play();
+    }
+  }
+}
+
+// 更新播放位置
+function audioTimeUpdate(args: any) {
+  audioProps.currentTime = formatPast(new Date(args.timeStamp), 'mm:ss');
+}
+</script>
+
+<template>
+  <div
+    class="b-solid b-1 b-l-none flex h-[72px] items-center justify-between px-2"
+    style="background-color: #fffffd; border-color: #dcdfe6"
+  >
+    <!-- 歌曲信息 -->
+    <div class="flex gap-[10px]">
+      <Image
+        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        :width="45"
+      />
+      <div>
+        <div>{{ currentSong.name }}</div>
+        <div class="text-[12px] text-gray-400">{{ currentSong.singer }}</div>
+      </div>
+    </div>
+    <!-- 音频controls -->
+    <div class="flex items-center gap-[12px]">
+      <IconifyIcon
+        icon="majesticons:back-circle"
+        :size="20"
+        class="cursor-pointer text-gray-300"
+      />
+      <IconifyIcon
+        :icon="
+          audioProps.paused
+            ? 'mdi:arrow-right-drop-circle'
+            : 'solar:pause-circle-bold'
+        "
+        :size="30"
+        class="cursor-pointer"
+        @click="toggleStatus('paused')"
+      />
+      <IconifyIcon
+        icon="majesticons:next-circle"
+        :size="20"
+        class="cursor-pointer text-gray-300"
+      />
+      <div class="flex items-center gap-[16px]">
+        <span>{{ audioProps.currentTime }}</span>
+        <Slider
+          v-model:value="audioProps.duration"
+          color="#409eff"
+          class="w-[160px!important]"
+        />
+        <span>{{ audioProps.duration }}</span>
+      </div>
+      <!-- 音频 -->
+      <audio
+        v-bind="audioProps"
+        ref="audioRef"
+        controls
+        v-show="!audioProps"
+        @timeupdate="audioTimeUpdate"
+      >
+        <!-- <source :src="audioUrl" /> -->
+      </audio>
+    </div>
+    <div class="flex items-center gap-[16px]">
+      <IconifyIcon
+        :icon="audioProps.muted ? 'tabler:volume-off' : 'tabler:volume'"
+        :size="20"
+        class="cursor-pointer"
+        @click="toggleStatus('muted')"
+      />
+      <Slider
+        v-model:value="audioProps.volume"
+        color="#409eff"
+        class="w-[160px!important]"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/ai/music/index/list/index.vue b/apps/web-antd/src/views/ai/music/index/list/index.vue
new file mode 100644
index 00000000..7addf50c
--- /dev/null
+++ b/apps/web-antd/src/views/ai/music/index/list/index.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import type { Recordable } from '@vben/types';
+
+import { provide, ref } from 'vue';
+
+import { Col, Empty, Row, TabPane, Tabs } from 'ant-design-vue';
+
+import audioBar from './audioBar/index.vue';
+import songCard from './songCard/index.vue';
+import songInfo from './songInfo/index.vue';
+
+defineOptions({ name: 'Index' });
+
+const currentType = ref('mine');
+// loading 状态
+const loading = ref(false);
+// 当前音乐
+const currentSong = ref({});
+
+const mySongList = ref<Recordable<any>[]>([]);
+const squareSongList = ref<Recordable<any>[]>([]);
+
+/*
+ *@Description: 调接口生成音乐列表
+ *@MethodAuthor: xiaohong
+ *@Date: 2024-06-27 17:06:44
+ */
+function generateMusic(formData: Recordable<any>) {
+  loading.value = true;
+  setTimeout(() => {
+    mySongList.value = Array.from({ length: 20 }, (_, index) => {
+      return {
+        id: index,
+        audioUrl: '',
+        videoUrl: '',
+        title: `我走后${index}`,
+        imageUrl:
+          'https://www.carsmp3.com/data/attachment/forum/201909/19/091020q5kgre20fidreqyt.jpg',
+        desc: 'Metal, symphony, film soundtrack, grand, majesticMetal, dtrack, grand, majestic',
+        date: '2024年04月30日 14:02:57',
+        lyric: `<div class="_words_17xen_66"><div>大江东去，浪淘尽，千古风流人物。
+          </div><div>故垒西边，人道是，三国周郎赤壁。
+          </div><div>乱石穿空，惊涛拍岸，卷起千堆雪。
+          </div><div>江山如画，一时多少豪杰。
+          </div><div>
+          </div><div>遥想公瑾当年，小乔初嫁了，雄姿英发。
+          </div><div>羽扇纶巾，谈笑间，樯橹灰飞烟灭。
+          </div><div>故国神游，多情应笑我，早生华发。
+          </div><div>人生如梦，一尊还酹江月。</div></div>`,
+      };
+    });
+    loading.value = false;
+  }, 3000);
+}
+
+/*
+ *@Description: 设置当前播放的音乐
+ *@MethodAuthor: xiaohong
+ *@Date: 2024-07-19 11:22:33
+ */
+function setCurrentSong(music: Recordable<any>) {
+  currentSong.value = music;
+}
+
+defineExpose({
+  generateMusic,
+});
+
+provide('currentSong', currentSong);
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div class="flex flex-auto overflow-hidden">
+      <Tabs
+        v-model:active-key="currentType"
+        class="flex-auto px-[20px]"
+        tab-position="bottom"
+      >
+        <!-- 我的创作 -->
+        <TabPane key="mine" tab="我的创作" v-loading="loading">
+          <Row v-if="mySongList.length > 0" :gutter="12">
+            <Col v-for="song in mySongList" :key="song.id" :span="24">
+              <songCard :song-info="song" @play="setCurrentSong(song)" />
+            </Col>
+          </Row>
+          <Empty v-else description="暂无音乐" />
+        </TabPane>
+
+        <!-- 试听广场 -->
+        <TabPane key="square" tab="试听广场" v-loading="loading">
+          <Row v-if="squareSongList.length > 0" :gutter="12">
+            <Col v-for="song in squareSongList" :key="song.id" :span="24">
+              <songCard :song-info="song" @play="setCurrentSong(song)" />
+            </Col>
+          </Row>
+          <Empty v-else description="暂无音乐" />
+        </TabPane>
+      </Tabs>
+      <!-- songInfo -->
+      <songInfo class="flex-none" />
+    </div>
+    <audioBar class="flex-none" />
+  </div>
+</template>
+<style lang="scss" scoped>
+:deep(.ant-tabs) {
+  .ant-tabs__content {
+    padding: 0 7px;
+    overflow: auto;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/ai/music/index/list/songCard/index.vue b/apps/web-antd/src/views/ai/music/index/list/songCard/index.vue
new file mode 100644
index 00000000..251df5f6
--- /dev/null
+++ b/apps/web-antd/src/views/ai/music/index/list/songCard/index.vue
@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { inject } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Image } from 'ant-design-vue';
+
+defineOptions({ name: 'Index' });
+
+defineProps({
+  songInfo: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emits = defineEmits(['play']);
+
+const currentSong = inject('currentSong', {});
+
+function playSong() {
+  emits('play');
+}
+</script>
+
+<template>
+  <div class="rounded-1 mb-[12px] flex p-[12px]">
+    <div class="relative" @click="playSong">
+      <Image :src="songInfo.imageUrl" class="w-80px flex-none" />
+      <div
+        class="bg-op-40 absolute left-0 top-0 flex h-full w-full cursor-pointer items-center justify-center bg-black"
+      >
+        <IconifyIcon
+          :icon="
+            currentSong.id === songInfo.id
+              ? 'solar:pause-circle-bold'
+              : 'mdi:arrow-right-drop-circle'
+          "
+          :size="30"
+        />
+      </div>
+    </div>
+    <div class="ml-[8px]">
+      <div>{{ songInfo.title }}</div>
+      <div class="mt-[8px] line-clamp-2 text-[12px]">
+        {{ songInfo.desc }}
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/ai/music/index/list/songInfo/index.vue b/apps/web-antd/src/views/ai/music/index/list/songInfo/index.vue
new file mode 100644
index 00000000..dea2e6f6
--- /dev/null
+++ b/apps/web-antd/src/views/ai/music/index/list/songInfo/index.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { inject } from 'vue';
+
+import { Button, Card, Image } from 'ant-design-vue';
+
+defineOptions({ name: 'Index' });
+
+const currentSong = inject('currentSong', {});
+</script>
+
+<template>
+  <Card class="line-height-24px mb-[0!important] w-[300px]">
+    <Image :src="currentSong.imageUrl" style="width: 100%; height: 100%" />
+
+    <div class="">{{ currentSong.title }}</div>
+    <div class="line-clamp-1 text-[12px]">
+      {{ currentSong.desc }}
+    </div>
+    <div class="text-[12px]">
+      {{ currentSong.date }}
+    </div>
+    <Button size="small" shape="round" class="my-[6px]">信息复用</Button>
+    <div class="text-[12px]" v-html="currentSong.lyric"></div>
+  </Card>
+</template>