feat: ai

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

@@ -6,6 +6,7 @@ import type { AiImageApi } from '#/api/ai/image';
 import { onMounted, ref, toRefs, watch } from 'vue';
 
 import { confirm } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
 
 import { Button, Card, Image, message } from 'ant-design-vue';
 
@@ -86,28 +87,28 @@ onMounted(async () => {
           type="text"
           @click="handleButtonClick('download', detail)"
         >
-          <span class="icon-[ant-design--download-outlined]"></span>
+          <IconifyIcon icon="lucide:download" />
         </Button>
         <Button
           class="m-0 p-[10px]"
           type="text"
           @click="handleButtonClick('regeneration', detail)"
         >
-          <span class="icon-[ant-design--redo-outlined]"></span>
+          <IconifyIcon icon="lucide:refresh-cw" />
         </Button>
         <Button
           class="m-0 p-[10px]"
           type="text"
           @click="handleButtonClick('delete', detail)"
         >
-          <span class="icon-[ant-design--delete-outlined]"></span>
+          <IconifyIcon icon="lucide:trash" />
         </Button>
         <Button
           class="m-0 p-[10px]"
           type="text"
           @click="handleButtonClick('more', detail)"
         >
-          <span class="icon-[ant-design--more-outlined]"></span>
+          <IconifyIcon icon="lucide:ellipsis-vertical" />
         </Button>
       </div>
     </div>

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

@@ -92,7 +92,9 @@ onMounted(async () => {
 
 <template>
   <Page auto-content-height>
-    <DocAlert title="AI 绘图创作" url="https://doc.iocoder.cn/ai/image/" />
+    <template #doc>
+      <DocAlert title="AI 绘图创作" url="https://doc.iocoder.cn/ai/image/" />
+    </template>
     <Grid table-title="绘画管理列表">
       <template #toolbar-tools>
         <TableAction :actions="[]" />
@@ -101,9 +103,9 @@ onMounted(async () => {
         <Image :src="row.picUrl" class="h-80px w-80px" />
       </template>
       <template #userId="{ row }">
-        <span>{{
-          userList.find((item) => item.id === row.userId)?.nickname
-        }}</span>
+        <span>
+          {{ userList.find((item) => item.id === row.userId)?.nickname }}
+        </span>
       </template>
       <template #publicStatus="{ row }">
         <Switch

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

@@ -45,7 +45,7 @@ onMounted(async () => {
 </script>
 <template>
   <Page auto-content-height>
-    <div class="bg-[#fff] p-[20px]">
+    <div class="bg-white p-[20px]">
       <!-- TODO @fan：Search 可以换成 Icon 组件么？ -->
       <Input.Search
         v-model="queryParams.prompt"
@@ -55,14 +55,14 @@ onMounted(async () => {
         @keyup.enter="handleQuery"
       />
       <div
-        class="grid gap-[10px] bg-[#fff] shadow-[0_0_10px_rgba(0,0,0,0.1)]"
+        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))"
       >
         <!-- TODO @fan：这个图片的风格，要不和 ImageCard.vue 界面一致？（只有卡片，没有操作）；因为看着更有相框的感觉~~~ -->
         <div
           v-for="item in list"
           :key="item.id"
-          class="relative cursor-pointer overflow-hidden bg-[#f0f0f0] transition-transform duration-300 hover:scale-[1.05]"
+          class="relative cursor-pointer overflow-hidden bg-white transition-transform duration-300 hover:scale-[1.05]"
         >
           <img
             :src="item.picUrl"