feat: ai code

2025-10-22 14:52:42 +08:00
parent 7aacec3e69
commit 66647802af
26 changed files with 148 additions and 181 deletions
--- a/apps/web-antd/src/views/ai/image/index/components/ImageDetail.vue
+++ b/apps/web-antd/src/views/ai/image/index/components/ImageDetail.vue
@@ -44,7 +44,7 @@ watch(

 <template>
  <div class="mb-5 w-full overflow-hidden break-words">
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
      <Image class="rounded-lg" :src="detail?.picUrl" />
    </div>
  </div>
@@ -52,7 +52,7 @@ watch(
  <!-- 时间 -->
  <div class="mb-5 w-full overflow-hidden break-words">
    <div class="text-lg font-bold">时间</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
      <div>
        提交时间：{{ formatDate(detail.createTime, 'yyyy-MM-dd HH:mm:ss') }}
      </div>
@@ -65,7 +65,7 @@ watch(
  <!-- 模型 -->
  <div class="mb-5 w-full overflow-hidden break-words">
    <div class="text-lg font-bold">模型</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
      {{ detail.model }}({{ detail.height }}x{{ detail.width }})
    </div>
  </div>
@@ -73,7 +73,7 @@ watch(
  <!-- 提示词 -->
  <div class="mb-5 w-full overflow-hidden break-words">
    <div class="text-lg font-bold">提示词</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
      {{ detail.prompt }}
    </div>
  </div>
@@ -81,7 +81,7 @@ watch(
  <!-- 图片地址 -->
  <div class="mb-5 w-full overflow-hidden break-words">
    <div class="text-lg font-bold">图片地址</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
      {{ detail.picUrl }}
    </div>
  </div>
@@ -95,7 +95,7 @@ watch(
    class="mb-5 w-full overflow-hidden break-words"
  >
    <div class="text-lg font-bold">采样方法</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
      {{
        StableDiffusionSamplers.find(
          (item) => item.key === detail?.options?.sampler,
@@ -112,7 +112,7 @@ watch(
    class="mb-5 w-full overflow-hidden break-words"
  >
    <div class="text-lg font-bold">CLIP</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
      {{
        StableDiffusionClipGuidancePresets.find(
          (item) => item.key === detail?.options?.clipGuidancePreset,
@@ -129,7 +129,7 @@ watch(
    class="mb-5 w-full overflow-hidden break-words"
  >
    <div class="text-lg font-bold">风格</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
      {{
        StableDiffusionStylePresets.find(
          (item) => item.key === detail?.options?.stylePreset,
@@ -146,7 +146,7 @@ watch(
    class="mb-5 w-full overflow-hidden break-words"
  >
    <div class="text-lg font-bold">迭代步数</div>
-    <div class="mt-2 text-gray-600">{{ detail?.options?.steps }}</div>
+    <div class="mt-2">{{ detail?.options?.steps }}</div>
  </div>

  <div
@@ -157,7 +157,7 @@ watch(
    class="mb-5 w-full overflow-hidden break-words"
  >
    <div class="text-lg font-bold">引导系数</div>
-    <div class="mt-2 text-gray-600">{{ detail?.options?.scale }}</div>
+    <div class="mt-2">{{ detail?.options?.scale }}</div>
  </div>

  <div
@@ -168,7 +168,7 @@ watch(
    class="mb-5 w-full overflow-hidden break-words"
  >
    <div class="text-lg font-bold">随机因子</div>
-    <div class="mt-2 text-gray-600">{{ detail?.options?.seed }}</div>
+    <div class="mt-2">{{ detail?.options?.seed }}</div>
  </div>

  <!-- Dall3 专属 -->
@@ -177,7 +177,7 @@ watch(
    class="mb-5 w-full overflow-hidden break-words"
  >
    <div class="text-lg font-bold">风格选择</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
      {{
        Dall3StyleList.find((item) => item.key === detail?.options?.style)?.name
      }}
@@ -192,7 +192,7 @@ watch(
    class="mb-5 w-full overflow-hidden break-words"
  >
    <div class="text-lg font-bold">模型版本</div>
-    <div class="mt-2 text-gray-600">{{ detail?.options?.version }}</div>
+    <div class="mt-2">{{ detail?.options?.version }}</div>
  </div>

  <div
@@ -203,7 +203,7 @@ watch(
    class="mb-5 w-full overflow-hidden break-words"
  >
    <div class="text-lg font-bold">参考图</div>
-    <div class="mt-2 text-gray-600">
+    <div class="mt-2">
      <Image :src="detail.options.referImageUrl" />
    </div>
  </div>
--- a/apps/web-antd/src/views/ai/image/index/index.vue
+++ b/apps/web-antd/src/views/ai/image/index/index.vue
@@ -47,15 +47,15 @@ const platformOptions = [
 const models = ref<AiModelModelApi.Model[]>([]); // 模型列表

 /** 绘画 start  */
-const handleDrawStart = async () => {};
+async function handleDrawStart() {}

 /** 绘画 complete */
-const handleDrawComplete = async () => {
+async function handleDrawComplete() {
  await imageListRef.value.getImageList();
-};
+}

 /** 重新生成：将画图详情填充到对应平台 */
-const handleRegeneration = async (image: AiImageApi.Image) => {
+async function handleRegeneration(image: AiImageApi.Image) {
  // 切换平台
  selectPlatform.value = image.platform;
  // 根据不同平台填充 image
@@ -79,7 +79,7 @@ const handleRegeneration = async (image: AiImageApi.Image) => {
    // No default
  }
  // TODO @fan：貌似 other 重新设置不行？
-};
+}

 /** 组件挂载的时候 */
 onMounted(async () => {
--- a/apps/web-antd/src/views/ai/image/manager/data.ts
+++ b/apps/web-antd/src/views/ai/image/manager/data.ts
@@ -1,5 +1,6 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';

 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -7,6 +8,13 @@ import { getDictOptions } from '@vben/hooks';
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';

+let userList: SystemUserApi.User[] = [];
+async function getUserData() {
+  userList = await getSimpleUserList();
+}
+
+getUserData();
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
  return [
@@ -69,15 +77,20 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
      fixed: 'left',
    },
    {
+      field: 'picUrl',
      title: '图片',
      minWidth: 110,
      fixed: 'left',
-      slots: { default: 'picUrl' },
+      cellRender: {
+        name: 'CellImage',
+      },
    },
    {
-      minWidth: 180,
+      field: 'userId',
      title: '用户',
-      slots: { default: 'userId' },
+      minWidth: 180,
+      formatter: ({ cellValue }) =>
+        userList.find((user) => user.id === cellValue)?.nickname || '-',
    },
    {
      field: 'platform',
--- a/apps/web-antd/src/views/ai/image/manager/index.vue
+++ b/apps/web-antd/src/views/ai/image/manager/index.vue
@@ -1,23 +1,18 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiImageApi } from '#/api/ai/image';
-import type { SystemUserApi } from '#/api/system/user';
-
-import { onMounted, ref } from 'vue';

 import { confirm, DocAlert, Page } from '@vben/common-ui';
 import { AiImageStatusEnum } from '@vben/constants';

-import { Image, message, Switch } from 'ant-design-vue';
+import { message, Switch } from 'ant-design-vue';

 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteImage, getImagePage, updateImage } from '#/api/ai/image';
-import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';

 import { useGridColumns, useGridFormSchema } from './data';

-const userList = ref<SystemUserApi.User[]>([]); // 用户列表
 /** 刷新表格 */
 function handleRefresh() {
  gridApi.query();
@@ -40,7 +35,7 @@ async function handleDelete(row: AiImageApi.Image) {
  }
 }
 /** 修改是否发布 */
-const handleUpdatePublicStatusChange = async (row: AiImageApi.Image) => {
+async function handleUpdatePublicStatusChange(row: AiImageApi.Image) {
  try {
    // 修改状态的二次确认
    const text = row.publicStatus ? '公开' : '私有';
@@ -54,7 +49,7 @@ const handleUpdatePublicStatusChange = async (row: AiImageApi.Image) => {
  } catch {
    row.publicStatus = !row.publicStatus;
  }
-};
+}
 const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useGridFormSchema(),
@@ -83,10 +78,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
  } as VxeTableGridOptions<AiImageApi.Image>,
 });
-onMounted(async () => {
-  // 获得下拉数据
-  userList.value = await getSimpleUserList();
-});
 </script>

 <template>
@@ -95,20 +86,6 @@ onMounted(async () => {
      <DocAlert title="AI 绘图创作" url="https://doc.iocoder.cn/ai/image/" />
    </template>
    <Grid table-title="绘画管理列表">
-      <template #toolbar-tools>
-        <TableAction :actions="[]" />
-      </template>
-      <template #picUrl="{ row }">
-        <Image :src="row.picUrl" class="h-20 w-20" />
-      </template>
-      <template #userId="{ row }">
-        <span>
-          {{
-            userList.find((item: SystemUserApi.User) => item.id === row.userId)
-              ?.nickname
-          }}
-        </span>
-      </template>
      <template #publicStatus="{ row }">
        <Switch
          v-model:checked="row.publicStatus"
--- a/apps/web-antd/src/views/ai/image/square/index.vue
+++ b/apps/web-antd/src/views/ai/image/square/index.vue
@@ -33,10 +33,10 @@ async function getList() {
 }
 const debounceGetList = useDebounceFn(getList, 80);
 /** 搜索按钮操作 */
-const handleQuery = () => {
+function handleQuery() {
  queryParams.pageNo = 1;
  getList();
-};
+}

 /** 初始化 */
 onMounted(async () => {