feat: 对接生图功能

Co-authored-by: Copilot <copilot@github.com>

app/components/ImageGenerateCom.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { ImageService } from "~/services";
+
+const prompt = ref("");
+const imageUrl = ref("");
+const errorMessage = ref("");
+const loading = ref(false);
+
+const generate = async () => {
+  const text = prompt.value.trim();
+  if (!text) {
+    errorMessage.value = "请输入图片描述";
+    return;
+  }
+
+  loading.value = true;
+  errorMessage.value = "";
+  imageUrl.value = "";
+
+  try {
+    const res = await ImageService.GenerateImage({
+      prompt: text
+    });
+
+    if (res.code === 0 && res.data?.imageUrl) {
+      imageUrl.value = res.data.imageUrl;
+      return;
+    }
+
+    errorMessage.value = res.msg || "图片生成失败";
+  } catch (error) {
+    errorMessage.value = getErrorMessage(error, "图片生成失败");
+  } finally {
+    loading.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="w-full max-w-xl space-y-3">
+    <el-input
+      v-model="prompt"
+      type="textarea"
+      :rows="3"
+      placeholder="请输入图片描述"
+      :disabled="loading"
+    />
+
+    <el-button type="primary" :loading="loading" @click="generate">
+      立即生成
+    </el-button>
+
+    <p v-if="errorMessage" class="text-sm text-red-500">
+      {{ errorMessage }}
+    </p>
+
+    <img
+      v-if="imageUrl"
+      :src="imageUrl"
+      alt="生成图片"
+      class="block max-w-full rounded border"
+    />
+  </div>
+</template>

app/pages/index.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import { useUserStore } from "~/stores";
-
 definePageMeta({
   layout: "index-view"
 });
-
-const userStore = useUserStore();
-const { isOnline } = storeToRefs(userStore);
 </script>
 
 <template>
-  <div>123</div>
+  <div class="py-2">
+    <ImageGenerateCom />
+  </div>
 </template>

app/services/image_service.ts

@@ -0,0 +1,19 @@
+import type {
+  ICommonResponse,
+  IImageGenerateData,
+  IImageGenerateRequest
+} from "#shared/types";
+
+export class ImageService {
+  public static basePath = "/api/images";
+
+  public static GenerateImage(request: IImageGenerateRequest) {
+    return $fetch<ICommonResponse<IImageGenerateData>>(
+      `${ImageService.basePath}/generate`,
+      {
+        method: "POST",
+        body: request
+      }
+    );
+  }
+}

app/services/index.ts

@@ -1 +1,2 @@
+export * from "./image_service";
 export * from "./user_service";