feat(ai): 新增 AI 绘图功能

- 添加 AI 绘图相关的 API 接口和路由
- 实现 AI 绘图页面，支持不同平台的绘图功能
- 添加绘图作品列表和重新生成功能
- 优化绘图页面样式和布局

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>