smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: style

Browse Source
This commit is contained in:
xingyu4j
2025-06-17 20:22:24 +08:00
parent 7276d0a909
commit a4f4c0d6f6
162 changed files with 689 additions and 796 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationList.vue
View File

@@ -6,9 +6,9 @@ import type { AiChatConversationApi } from '#/api/ai/chat/conversation';
import { h, onMounted, ref, toRefs, watch } from 'vue';
import { confirm, prompt, useVbenDrawer } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { IconifyIcon, SvgGptIcon } from '@vben/icons';
import { Button, Empty, Input, Layout, message } from 'ant-design-vue';
import { Avatar, Button, Empty, Input, Layout, message } from 'ant-design-vue';
import {
createChatConversationMy,
@@ -20,7 +20,6 @@ import {
import RoleRepository from '../role/RoleRepository.vue';
// 加载中定时器
// 定义组件 props
const props = defineProps({
activeId: {
@@ -308,24 +307,24 @@ onMounted(async () => {
<template>
<Layout.Sider
width="260px"
class="conversation-container relative flex h-full flex-col justify-between overflow-hidden bg-[hsl(var(--primary-foreground))!important] p-[10px_10px_0]"
class="!bg-primary-foreground conversation-container relative flex h-full flex-col justify-between overflow-hidden py-2.5 pb-0 pt-2.5"
>
<Drawer />
<!-- 左顶部：对话 -->
<div class="flex h-full flex-col">
<Button
class="btn-new-conversation h-[38px] w-full"
class="btn-new-conversation h-9 w-full"
type="primary"
@click="createConversation"
>
<IconifyIcon icon="lucide:plus" class="mr-[5px]" />
<IconifyIcon icon="lucide:plus" class="mr-1" />
新建对话
</Button>
<Input
v-model:value="searchName"
size="large"
class="search-input mt-[20px]"
class="search-input mt-5"
placeholder="搜索历史记录"
@keyup="searchConversation"
>
@@ -335,7 +334,7 @@ onMounted(async () => {
</Input>
<!-- 左中间：对话列表 -->
<div class="conversation-list mt-[10px] flex-1 overflow-auto">
<div class="conversation-list mt-2.5 flex-1 overflow-auto">
<!-- 情况一：加载中 -->
<Empty v-if="loading" description="." v-loading="loading" />
@@ -347,9 +346,9 @@ onMounted(async () => {
>
<div
v-if="conversationMap[conversationKey].length > 0"
class="conversation-item classify-title pt-[10px]"
class="conversation-item classify-title pt-2.5"
>
<b class="mx-[4px]">
<b class="mx-1">
{{ conversationKey }}
</b>
</div>
@@ -360,21 +359,22 @@ onMounted(async () => {
@click="handleConversationClick(conversation.id)"
@mouseover="hoverConversationId = conversation.id"
@mouseout="hoverConversationId = null"
class="conversation-item mt-[5px]"
class="conversation-item mt-1"
>
<div
class="conversation flex cursor-pointer flex-row items-center justify-between rounded-[5px] px-[5px] leading-[30px]"
class="conversation flex cursor-pointer flex-row items-center justify-between rounded-lg px-2.5 leading-10"
:class="[
conversation.id === activeConversationId ? 'bg-[#e6e6e6]' : '',
conversation.id === activeConversationId ? 'bg-gray-100' : '',
]"
>
<div class="title-wrapper flex items-center">
<img
class="avatar h-[25px] w-[25px] rounded-[5px]"
:src="conversation.roleAvatar ?? '/static/gpt.svg'"
<Avatar
v-if="conversation.roleAvatar"
:src="conversation.roleAvatar"
/>
<SvgGptIcon v-else class="size-8" />
<span
class="title text-black/77 max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap px-[10px] py-[2px] text-[14px] font-normal"
class="max-w-36 overflow-hidden text-ellipsis whitespace-nowrap px-2.5 py-1 text-sm font-normal text-gray-600"
>
{{ conversation.title }}
</span>
@@ -382,35 +382,35 @@ onMounted(async () => {
<div
v-show="hoverConversationId === conversation.id"
class="button-wrapper relative right-[2px] flex items-center text-[#606266]"
class="button-wrapper relative right-0.5 flex items-center text-gray-400"
>
<Button
class="btn mr-0 px-[5px]"
class="mr-0 px-1"
type="link"
@click.stop="handleTop(conversation)"
>
<IconifyIcon
v-if="!conversation.pinned"
icon="lucide:arrow-up"
icon="lucide:arrow-up-to-line"
/>
<IconifyIcon
v-if="conversation.pinned"
icon="lucide:arrow-down"
icon="lucide:arrow-down-from-line"
/>
</Button>
<Button
class="btn mr-0 px-[5px]"
class="mr-0 px-1"
type="link"
@click.stop="updateConversationTitle(conversation)"
>
<IconifyIcon icon="lucide:edit" />
</Button>
<Button
class="btn mr-0 px-[5px]"
class="mr-0 px-1"
type="link"
@click.stop="deleteChatConversation(conversation)"
>
<IconifyIcon icon="lucide:trash" />
<IconifyIcon icon="lucide:trash-2" />
</Button>
</div>
</div>
@@ -419,26 +419,26 @@ onMounted(async () => {
</div>
<!-- 底部占位 -->
<div class="h-[50px] w-full"></div>
<div class="h-12 w-full"></div>
</div>
<!-- 左底部：工具栏 -->
<div
class="tool-box absolute bottom-0 left-0 right-0 flex items-center justify-between bg-[#f4f4f4] px-[20px] leading-[35px] text-[var(--el-text-color)] shadow-[0_0_1px_1px_rgba(228,228,228,0.8)]"
class="tool-box absolute bottom-0 left-0 right-0 flex items-center justify-between bg-gray-50 px-5 leading-9 text-gray-400 shadow-sm"
>
<div
class="flex cursor-pointer items-center text-[#606266]"
class="flex cursor-pointer items-center text-gray-400"
@click="handleRoleRepository"
>
<IconifyIcon icon="lucide:user" />
<span class="ml-[5px]">角色仓库</span>
<span class="ml-1">角色仓库</span>
</div>
<div
class="flex cursor-pointer items-center text-[#606266]"
class="flex cursor-pointer items-center text-gray-400"
@click="handleClearConversation"
>
<IconifyIcon icon="lucide:trash" />
<span class="ml-[5px]">清空未置顶对话</span>
<span class="ml-1">清空未置顶对话</span>
</div>
</div>
</Layout.Sider>

2
apps/web-antd/src/views/ai/chat/index/components/conversation/ConversationUpdateForm.vue
View File

@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-[600px]" title="设定">
<Modal class="w-2/5" title="设定">
<Form class="mx-4" />
</Modal>
</template>

22
apps/web-antd/src/views/ai/chat/index/components/message/MessageKnowledge.vue
View File

@@ -57,21 +57,21 @@ function handleClick(doc: any) {
<!-- 知识引用列表 -->
<div
v-if="segments && segments.length > 0"
class="mt-[10px] rounded-[8px] bg-[#f5f5f5] p-[10px]"
class="mt-2 rounded-lg bg-gray-50 p-2"
>
<div class="text-14px mb-8px flex items-center text-[#666]">
<IconifyIcon icon="lucide:file-text" class="mr-[5px]" /> 知识引用
<div class="mb-2 flex items-center text-sm text-gray-400">
<IconifyIcon icon="lucide:file-text" class="mr-1" /> 知识引用
</div>
<div class="flex flex-wrap gap-[8px]">
<div class="flex flex-wrap gap-2">
<div
v-for="(doc, index) in documentList"
:key="index"
class="cursor-pointer rounded-[6px] bg-white p-[8px] px-[12px] transition-all hover:bg-[#e6f4ff]"
class="cursor-pointer rounded-lg bg-white p-2 px-3 transition-all hover:bg-blue-50"
@click="handleClick(doc)"
>
<div class="mb-[4px] text-[14px] text-[#333]">
<div class="mb-1 text-sm text-gray-600">
{{ doc.title }}
<span class="ml-[4px] text-[12px] text-[#999]">
<span class="ml-1 text-xs text-gray-300">
（{{ doc.segments.length }} 条）
</span>
</div>
@@ -81,19 +81,19 @@ function handleClick(doc: any) {
<Tooltip placement="topLeft" trigger="click">
<div ref="documentRef"></div>
<template #title>
<div class="mb-[12px] text-[16px] font-bold">{{ document?.title }}</div>
<div class="mb-3 text-base font-bold">{{ document?.title }}</div>
<div class="max-h-[60vh] overflow-y-auto">
<div
v-for="(segment, index) in document?.segments"
:key="index"
class="border-b-solid border-b-[#eee] p-[12px] last:border-b-0"
class="border-b-solid border-b-gray-200 p-3 last:border-b-0"
>
<div
class="mb-[8px] block w-fit rounded-[4px] bg-[#f5f5f5] px-[8px] py-[2px] text-[12px] text-[#666]"
class="mb-2 block w-fit rounded-sm bg-gray-50 px-2 py-1 text-xs text-gray-400"
>
分段 {{ segment.id }}
</div>
<div class="mt-[10px] text-[14px] leading-[1.6] text-[#333]">
<div class="mt-2 text-sm leading-[1.6] text-gray-600">
{{ segment.content }}
</div>
</div>

34
apps/web-antd/src/views/ai/chat/index/components/message/MessageList.vue
View File

@@ -114,7 +114,7 @@ onMounted(async () => {
<div
v-for="(item, index) in list"
:key="index"
class="mt-[50px] flex flex-col overflow-y-hidden px-[20px]"
class="mt-12 flex flex-col overflow-y-hidden px-5"
>
<!-- 左侧消息：system、assistant -->
<div v-if="item.type !== 'user'" class="flex flex-row">
@@ -125,22 +125,22 @@ onMounted(async () => {
/>
<SvgGptIcon v-else class="size-8" />
</div>
<div class="mx-[15px] flex flex-col text-left">
<div class="text-left leading-[30px]">
<div class="mx-4 flex flex-col text-left">
<div class="text-left leading-10">
{{ formatDate(item.createTime) }}
</div>
<div
class="relative flex flex-col break-words rounded-[10px] bg-[#e4e4e4cc] p-[10px] pb-[5px] pt-[10px] shadow-[0_0_0_1px_rgba(228,228,228,0.8)]"
class="relative flex flex-col break-words rounded-lg bg-gray-100 p-2.5 pb-1 pt-2.5 shadow-sm"
>
<MarkdownView
class="text-[0.95rem] text-[#393939]"
class="text-sm text-gray-600"
:content="item.content"
/>
<MessageKnowledge v-if="item.segments" :segments="item.segments" />
</div>
<div class="mt-[8px] flex flex-row">
<div class="mt-2 flex flex-row">
<Button
class="flex items-center bg-transparent px-[5px] hover:bg-[#f6f6f6]"
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
type="text"
@click="copyContent(item.content)"
>
@@ -148,7 +148,7 @@ onMounted(async () => {
</Button>
<Button
v-if="item.id > 0"
class="flex items-center bg-transparent px-[5px] hover:bg-[#f6f6f6]"
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
type="text"
@click="onDelete(item.id)"
>
@@ -163,41 +163,41 @@ onMounted(async () => {
<div class="avatar">
<Avatar :src="userAvatar" />
</div>
<div class="mx-[15px] flex flex-col text-left">
<div class="text-left leading-[30px]">
<div class="mx-4 flex flex-col text-left">
<div class="text-left leading-8">
{{ formatDate(item.createTime) }}
</div>
<div class="flex flex-row-reverse">
<div
class="inline w-auto whitespace-pre-wrap break-words rounded-[10px] bg-[#267fff] p-[10px] text-[0.95rem] text-white shadow-[0_0_0_1px_#267fff]"
class="inline w-auto whitespace-pre-wrap break-words rounded-lg bg-blue-500 p-2.5 text-sm text-white shadow-sm"
>
{{ item.content }}
</div>
</div>
<div class="mt-[8px] flex flex-row-reverse">
<div class="mt-2 flex flex-row-reverse">
<Button
class="flex items-center bg-transparent px-[5px] hover:bg-[#f6f6f6]"
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
type="text"
@click="copyContent(item.content)"
>
<IconifyIcon icon="lucide:copy" />
</Button>
<Button
class="flex items-center bg-transparent px-[5px] hover:bg-[#f6f6f6]"
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
type="text"
@click="onDelete(item.id)"
>
<IconifyIcon icon="lucide:trash" />
</Button>
<Button
class="flex items-center bg-transparent px-[5px] hover:bg-[#f6f6f6]"
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
type="text"
@click="onRefresh(item)"
>
<IconifyIcon icon="lucide:refresh-cw" />
</Button>
<Button
class="flex items-center bg-transparent px-[5px] hover:bg-[#f6f6f6]"
class="flex items-center bg-transparent px-1.5 hover:bg-gray-100"
type="text"
@click="onEdit(item)"
>
@@ -212,7 +212,7 @@ onMounted(async () => {
<!-- 回到底部按钮 -->
<div
v-if="isScrolling"
class="absolute bottom-0 right-1/2 z-[1000]"
class="z-1000 absolute bottom-0 right-1/2"
@click="handleGoBottom"
>
<Button shape="circle">

8
apps/web-antd/src/views/ai/chat/index/components/message/MessageListEmpty.vue
View File

@@ -20,17 +20,15 @@ async function handlerPromptClick(prompt: any) {
<!-- center-container -->
<div class="flex flex-col justify-center">
<!-- title -->
<div class="text-center text-[28px] font-bold">芋道 AI</div>
<div class="text-center text-3xl font-bold">芋道 AI</div>
<!-- role-list -->
<div
class="mt-[20px] flex w-[460px] flex-wrap items-center justify-center"
>
<div class="mt-5 flex w-96 flex-wrap items-center justify-center">
<div
v-for="prompt in promptList"
:key="prompt.prompt"
@click="handlerPromptClick(prompt)"
class="m-[10px] flex w-[180px] cursor-pointer justify-center rounded-[10px] border border-[#e4e4e4] leading-[50px] hover:bg-[rgba(243,243,243,0.73)]"
class="m-2.5 flex w-44 cursor-pointer justify-center rounded-lg border border-gray-200 leading-10 hover:bg-gray-100"
>
{{ prompt.prompt }}
</div>

2
apps/web-antd/src/views/ai/chat/index/components/message/MessageLoading.vue
View File

@@ -3,7 +3,7 @@ import { Skeleton } from 'ant-design-vue';
</script>
<template>
<div class="p-[30px]">
<div class="p-8">
<Skeleton active />
</div>
</template>

4
apps/web-antd/src/views/ai/chat/index/components/message/MessageNewConversation.vue
View File

@@ -12,10 +12,10 @@ function handlerNewChat() {
<template>
<div class="flex h-full w-full flex-row justify-center">
<div class="flex flex-col justify-center">
<div class="text-center text-[14px] text-[#858585]">
<div class="text-center text-sm text-gray-400">
点击下方按钮，开始你的对话吧
</div>
<div class="mt-[20px] flex flex-row justify-center">
<div class="mt-5 flex flex-row justify-center">
<Button type="primary" round @click="handlerNewChat">新建对话</Button>
</div>
</div>

33
apps/web-antd/src/views/ai/chat/index/components/role/RoleList.vue
View File

@@ -7,7 +7,7 @@ import { ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { Button, Card, Dropdown, Menu } from 'ant-design-vue';
import { Avatar, Button, Card, Dropdown, Menu } from 'ant-design-vue';
// tabs ref
@@ -61,17 +61,13 @@ async function handleTabsScroll() {
<template>
<div
class="relative flex h-full flex-wrap content-start items-start overflow-auto px-[25px] pb-[140px]"
class="relative flex h-full flex-wrap content-start items-start overflow-auto px-6 pb-36"
ref="tabsRef"
@scroll="handleTabsScroll"
>
<div
class="mb-[20px] mr-[20px] inline-block"
v-for="role in roleList"
:key="role.id"
>
<div class="mb-5 mr-5 inline-block" v-for="role in roleList" :key="role.id">
<Card
class="relative rounded-[10px]"
class="relative rounded-lg"
:body-style="{
position: 'relative',
display: 'flex',
@@ -83,9 +79,9 @@ async function handleTabsScroll() {
}"
>
<!-- 更多操作 -->
<div v-if="showMore" class="absolute right-[12px] top-0">
<div v-if="showMore" class="absolute right-3 top-0">
<Dropdown>
<Button type="text">
<Button type="link">
<IconifyIcon icon="lucide:ellipsis-vertical" />
</Button>
<template #overlay>
@@ -99,7 +95,7 @@ async function handleTabsScroll() {
<Menu.Item @click="handleMoreClick(['delete', role])">
<div class="flex items-center">
<IconifyIcon icon="lucide:trash" color="red" />
<span class="text-red-500">编辑</span>
<span class="text-red-500">删除</span>
</div>
</Menu.Item>
</Menu>
@@ -109,22 +105,19 @@ async function handleTabsScroll() {
<!-- 角色信息 -->
<div>
<img
:src="role.avatar"
class="h-[40px] w-[40px] overflow-hidden rounded-[10px]"
/>
<Avatar :src="role.avatar" class="h-10 w-10 overflow-hidden" />
</div>
<div class="ml-[10px] w-full">
<div class="h-[85px]">
<div class="max-w-[140px] text-[18px] font-bold text-[#3e3e3e]">
<div class="ml-2 w-full">
<div class="h-20">
<div class="max-w-36 text-lg font-bold text-gray-600">
{{ role.name }}
</div>
<div class="mt-[10px] text-[14px] text-[#6a6a6a]">
<div class="mt-2 text-sm text-gray-400">
{{ role.description }}
</div>
</div>
<div class="mt-[2px] flex flex-row-reverse">
<div class="mt-1 flex flex-row-reverse">
<Button type="primary" size="small" @click="handleUseClick(role)">
使用
</Button>

16
apps/web-antd/src/views/ai/chat/index/components/role/RoleRepository.vue
View File

@@ -21,7 +21,7 @@ const router = useRouter(); // 路由对象
const [Drawer] = useVbenDrawer({
title: '角色管理',
footer: false,
class: 'w-[754px]',
class: 'w-2/5',
});
const [FormModal, formModalApi] = useVbenModal({
@@ -179,12 +179,12 @@ onMounted(async () => {
<FormModal @success="handlerAddRoleSuccess" />
<Layout.Content class="relative m-0 flex-1 overflow-hidden p-0">
<div class="absolute right-0 top-[-5px] z-[100] mr-[20px] mt-[20px]">
<div class="z-100 absolute right-0 top--1 mr-5 mt-5">
<!-- 搜索输入框 -->
<Input.Search
:loading="loading"
v-model:value="search"
class="w-[240px]"
class="w-60"
placeholder="请输入搜索的内容"
@search="getActiveTabsRole"
/>
@@ -192,9 +192,9 @@ onMounted(async () => {
v-if="activeTab === 'my-role'"
type="primary"
@click="handlerAddRole"
class="ml-[20px]"
class="ml-5"
>
<IconifyIcon icon="lucide:user" style="margin-right: 5px" />
<IconifyIcon icon="lucide:user" class="mr-1.5" />
添加角色
</Button>
</div>
@@ -218,7 +218,7 @@ onMounted(async () => {
@on-edit="handlerCardEdit"
@on-use="handlerCardUse"
@on-page="handlerCardPage('my')"
class="mt-[20px]"
class="mt-5"
/>
</Tabs.TabPane>
@@ -231,7 +231,7 @@ onMounted(async () => {
:category-list="categoryList"
:active="activeCategory"
@on-category-click="handlerCategoryClick"
class="mx-[27px]"
class="mx-6"
/>
<RoleList
:role-list="publicRoleList"
@@ -239,7 +239,7 @@ onMounted(async () => {
@on-edit="handlerCardEdit"
@on-use="handlerCardUse"
@on-page="handlerCardPage('public')"
class="mt-[20px]"
class="mt-5"
loading
/>
</Tabs.TabPane>

35
apps/web-antd/src/views/ai/chat/index/index.vue
View File

@@ -494,10 +494,10 @@ onMounted(async () => {
<template>
<Page auto-content-height>
<Layout class="absolute left-0 top-0 h-full w-full flex-1">
<Layout class="absolute left-0 top-0 m-4 h-full w-full flex-1">
<!-- 左侧：对话列表 -->
<ConversationList
:active-id="activeConversationId"
:active-id="activeConversationId as any"
ref="conversationListRef"
@on-conversation-create="handleConversationCreateSuccess"
@on-conversation-click="handleConversationClick"
@@ -506,18 +506,18 @@ onMounted(async () => {
/>
<!-- 右侧：详情部分 -->
<Layout class="bg-white">
<Layout class="ml-4 bg-white">
<Layout.Header
class="flex items-center justify-between bg-[#fbfbfb!important] shadow-none"
class="flex items-center justify-between !bg-gray-50 shadow-none"
>
<div class="text-[18px] font-bold">
<div class="text-lg font-bold">
{{ activeConversation?.title ? activeConversation?.title : '对话' }}
<span v-if="activeMessageList.length > 0">
({{ activeMessageList.length }})
</span>
</div>
<div class="flex w-[300px] justify-end" v-if="activeConversation">
<div class="flex w-72 justify-end" v-if="activeConversation">
<Button
type="primary"
ghost
@@ -526,10 +526,10 @@ onMounted(async () => {
@click="openChatConversationUpdateForm"
>
<span v-html="activeConversation?.modelName"></span>
<IconifyIcon icon="lucide:settings" class="ml-2" />
<IconifyIcon icon="lucide:settings" class="ml-2 size-4" />
</Button>
<Button size="small" class="mr-2 px-2" @click="handlerMessageClear">
<IconifyIcon icon="lucide:trash" color="#787878" />
<IconifyIcon icon="lucide:trash-2" color="#787878" />
</Button>
<Button size="small" class="mr-2 px-2">
<IconifyIcon icon="lucide:download" color="#787878" />
@@ -567,12 +567,12 @@ onMounted(async () => {
</div>
</Layout.Content>
<Layout.Footer class="m-0 flex flex-col bg-[white!important] p-0">
<Layout.Footer class="m-0 flex flex-col !bg-white p-0">
<form
class="m-[10px_20px_20px] flex flex-col rounded-[10px] border border-[#e3e3e3] p-[9px_10px]"
class="my-5 mb-5 mt-2 flex flex-col rounded-xl border border-gray-200 px-2 py-2.5"
>
<textarea
class="box-border h-[80px] resize-none overflow-auto border-none p-[0_2px] focus:outline-none"
class="box-border h-20 resize-none overflow-auto border-none px-0 py-0.5 focus:outline-none"
v-model="prompt"
@keydown="handleSendByKeydown"
@input="handlePromptInput"
@@ -580,10 +580,10 @@ onMounted(async () => {
@compositionend="onCompositionend"
placeholder="问我任何问题...（Shift+Enter 换行，按下 Enter 发送）"
></textarea>
<div class="flex justify-between pb-0 pt-[5px]">
<div class="flex justify-between pb-0 pt-1">
<div class="flex items-center">
<Switch v-model:checked="enableContext" />
<span class="ml-[5px] text-[14px] text-[#8f8f8f]">上下文</span>
<span class="ml-1 text-sm text-gray-400">上下文</span>
</div>
<Button
type="primary"
@@ -591,13 +591,22 @@ onMounted(async () => {
:loading="conversationInProgress"
v-if="conversationInProgress === false"
>
<IconifyIcon
:icon="
conversationInProgress
? 'lucide:loader'
: 'lucide:send-horizontal'
"
/>
{{ conversationInProgress ? '进行中' : '发送' }}
</Button>
<Button
type="primary"
danger
@click="stopStream()"
v-if="conversationInProgress === true"
>
<IconifyIcon icon="lucide:circle-stop" />
停止
</Button>
</div>

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

@@ -64,10 +64,7 @@ onMounted(async () => {
});
</script>
<template>
<Card
body-class=""
class="relative flex h-auto w-[320px] flex-col rounded-[10px]"
>
<Card class="relative flex h-auto w-80 flex-col rounded-lg">
<!-- 图片操作区 -->
<div class="flex flex-row justify-between">
<div>
@@ -83,28 +80,28 @@ onMounted(async () => {
</div>
<div class="flex">
<Button
class="m-0 p-[10px]"
class="m-0 p-2.5"
type="text"
@click="handleButtonClick('download', detail)"
>
<IconifyIcon icon="lucide:download" />
</Button>
<Button
class="m-0 p-[10px]"
class="m-0 p-2.5"
type="text"
@click="handleButtonClick('regeneration', detail)"
>
<IconifyIcon icon="lucide:refresh-cw" />
</Button>
<Button
class="m-0 p-[10px]"
class="m-0 p-2.5"
type="text"
@click="handleButtonClick('delete', detail)"
>
<IconifyIcon icon="lucide:trash" />
</Button>
<Button
class="m-0 p-[10px]"
class="m-0 p-2.5"
type="text"
@click="handleButtonClick('more', detail)"
>
@@ -114,20 +111,20 @@ onMounted(async () => {
</div>
<!-- 图片展示区域 -->
<div class="mt-[20px] h-[280px] flex-1 overflow-hidden" ref="cardImageRef">
<Image class="w-full rounded-[10px]" :src="detail?.picUrl" />
<div class="mt-5 h-72 flex-1 overflow-hidden" ref="cardImageRef">
<Image class="w-full rounded-lg" :src="detail?.picUrl" />
<div v-if="detail?.status === AiImageStatusEnum.FAIL">
{{ detail?.errorMessage }}
</div>
</div>
<!-- Midjourney 专属操作按钮 -->
<div class="mt-[5px] flex w-full flex-wrap justify-start">
<div class="mt-2 flex w-full flex-wrap justify-start">
<Button
size="small"
v-for="(button, index) in detail?.buttons"
:key="index"
class="ml-0 mr-[10px] mt-[5px] min-w-[40px]"
class="m-2 ml-0 min-w-10"
@click="handleMidjourneyBtnClick(button)"
>
{{ button.label }}{{ button.emoji }}

56
apps/web-antd/src/views/ai/image/index/components/ImageDetail.vue
View File

@@ -44,15 +44,15 @@ watch(
<template>
<div class="mb-5 w-full overflow-hidden break-words">
<div class="body mt-2 text-gray-600">
<Image class="rounded-[10px]" :src="detail?.picUrl" />
<div class="mt-2 text-gray-600">
<Image class="rounded-lg" :src="detail?.picUrl" />
</div>
</div>
<!-- 时间 -->
<div class="mb-5 w-full overflow-hidden break-words">
<div class="tip text-lg font-bold">时间</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">时间</div>
<div class="mt-2 text-gray-600">
<div>
提交时间：{{ formatDate(detail.createTime, 'yyyy-MM-dd HH:mm:ss') }}
</div>
@@ -64,24 +64,24 @@ watch(
<!-- 模型 -->
<div class="mb-5 w-full overflow-hidden break-words">
<div class="tip text-lg font-bold">模型</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">模型</div>
<div class="mt-2 text-gray-600">
{{ detail.model }}({{ detail.height }}x{{ detail.width }})
</div>
</div>
<!-- 提示词 -->
<div class="mb-5 w-full overflow-hidden break-words">
<div class="tip text-lg font-bold">提示词</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">提示词</div>
<div class="mt-2 text-gray-600">
{{ detail.prompt }}
</div>
</div>
<!-- 图片地址 -->
<div class="mb-5 w-full overflow-hidden break-words">
<div class="tip text-lg font-bold">图片地址</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">图片地址</div>
<div class="mt-2 text-gray-600">
{{ detail.picUrl }}
</div>
</div>
@@ -94,8 +94,8 @@ watch(
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">采样方法</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">采样方法</div>
<div class="mt-2 text-gray-600">
{{
StableDiffusionSamplers.find(
(item) => item.key === detail?.options?.sampler,
@@ -111,8 +111,8 @@ watch(
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">CLIP</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">CLIP</div>
<div class="mt-2 text-gray-600">
{{
StableDiffusionClipGuidancePresets.find(
(item) => item.key === detail?.options?.clipGuidancePreset,
@@ -128,8 +128,8 @@ watch(
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">风格</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">风格</div>
<div class="mt-2 text-gray-600">
{{
StableDiffusionStylePresets.find(
(item) => item.key === detail?.options?.stylePreset,
@@ -145,8 +145,8 @@ watch(
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">迭代步数</div>
<div class="body mt-2 text-gray-600">{{ detail?.options?.steps }}</div>
<div class="text-lg font-bold">迭代步数</div>
<div class="mt-2 text-gray-600">{{ detail?.options?.steps }}</div>
</div>
<div
@@ -156,8 +156,8 @@ watch(
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">引导系数</div>
<div class="body mt-2 text-gray-600">{{ detail?.options?.scale }}</div>
<div class="text-lg font-bold">引导系数</div>
<div class="mt-2 text-gray-600">{{ detail?.options?.scale }}</div>
</div>
<div
@@ -167,8 +167,8 @@ watch(
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">随机因子</div>
<div class="body mt-2 text-gray-600">{{ detail?.options?.seed }}</div>
<div class="text-lg font-bold">随机因子</div>
<div class="mt-2 text-gray-600">{{ detail?.options?.seed }}</div>
</div>
<!-- Dall3 专属 -->
@@ -176,8 +176,8 @@ watch(
v-if="detail.platform === AiPlatformEnum.OPENAI && detail?.options?.style"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">风格选择</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">风格选择</div>
<div class="mt-2 text-gray-600">
{{
Dall3StyleList.find((item) => item.key === detail?.options?.style)?.name
}}
@@ -191,8 +191,8 @@ watch(
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">模型版本</div>
<div class="body mt-2 text-gray-600">{{ detail?.options?.version }}</div>
<div class="text-lg font-bold">模型版本</div>
<div class="mt-2 text-gray-600">{{ detail?.options?.version }}</div>
</div>
<div
@@ -202,8 +202,8 @@ watch(
"
class="mb-5 w-full overflow-hidden break-words"
>
<div class="tip text-lg font-bold">参考图</div>
<div class="body mt-2 text-gray-600">
<div class="text-lg font-bold">参考图</div>
<div class="mt-2 text-gray-600">
<Image :src="detail.options.referImageUrl" />
</div>
</div>

8
apps/web-antd/src/views/ai/image/index/components/ImageList.vue
View File

@@ -170,11 +170,11 @@ onUnmounted(async () => {
});
</script>
<template>
<Drawer class="w-[600px]">
<Drawer class="w-2/5">
<ImageDetail :id="showImageDetailId" />
</Drawer>
<Card
class="dr-task flex h-full w-full flex-col"
class="flex h-full w-full flex-col"
:body-style="{
margin: 0,
padding: 0,
@@ -190,7 +190,7 @@ onUnmounted(async () => {
</template>
<div
class="task-image-list flex flex-1 flex-wrap content-start overflow-y-auto p-5 pb-[140px] pt-5"
class="flex flex-1 flex-wrap content-start overflow-y-auto p-5 pb-28 pt-5"
ref="imageListRef"
>
<ImageCard
@@ -204,7 +204,7 @@ onUnmounted(async () => {
</div>
<div
class="task-image-pagination sticky bottom-0 z-50 flex h-[60px] items-center justify-center bg-white shadow-[0_-2px_8px_rgba(0,0,0,0.1)]"
class="sticky bottom-0 z-50 flex h-16 items-center justify-center bg-white shadow-sm"
>
<Pagination
:total="pageTotal"

34
apps/web-antd/src/views/ai/image/index/components/common/index.vue
View File

@@ -113,20 +113,20 @@ defineExpose({ settingValues });
v-model:value="prompt"
:maxlength="1024"
:rows="5"
class="mt-[15px] w-full"
class="mt-4 w-full"
placeholder="例如：童话里的小屋应该是什么样子？"
show-count
/>
</div>
<div class="hot-words mt-[30px] flex flex-col">
<div class="mt-8 flex flex-col">
<div>
<b>随机热词</b>
</div>
<Space wrap class="word-list mt-[15px] flex flex-wrap justify-start">
<Space wrap class="mt-4 flex flex-col flex-wrap justify-start">
<Button
shape="round"
class="btn m-0"
class="m-0"
:type="selectHotWord === hotWord ? 'primary' : 'default'"
v-for="hotWord in ImageHotWords"
:key="hotWord"
@@ -137,16 +137,16 @@ defineExpose({ settingValues });
</Space>
</div>
<div class="group-item mt-[30px]">
<div class="mt-8">
<div>
<b>平台</b>
</div>
<Space wrap class="group-item-body mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<Select
v-model:value="otherPlatform"
placeholder="Select"
size="large"
class="!important w-[330px]"
class="!w-80"
@change="handlerPlatformChange"
>
<Select.Option
@@ -160,16 +160,16 @@ defineExpose({ settingValues });
</Space>
</div>
<div class="group-item mt-[30px]">
<div class="mt-8">
<div>
<b>模型</b>
</div>
<Space wrap class="group-item-body mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<Select
v-model:value="modelId"
placeholder="Select"
size="large"
class="!important w-[330px]"
class="!w-80"
>
<Select.Option
v-for="item in platformModels"
@@ -182,25 +182,29 @@ defineExpose({ settingValues });
</Space>
</div>
<div class="group-item mt-[30px]">
<div class="mt-8">
<div>
<b>图片尺寸</b>
</div>
<Space wrap class="group-item-body mt-[15px] flex flex-wrap gap-x-[20px]">
<Space wrap class="mt-4 flex flex-wrap gap-x-5">
<InputNumber
v-model:value="width"
class="mt-[10px] w-[170px]"
class="w-40"
placeholder="图片宽度"
addon-before="宽"
addon-after="px"
/>
<InputNumber
v-model:value="height"
class="w-[170px]"
class="w-40"
placeholder="图片高度"
addon-before="高"
addon-after="px"
/>
</Space>
</div>
<div class="btns mt-[50px] flex justify-center">
<div class="mt-12 flex justify-center">
<Button
type="primary"
size="large"

47
apps/web-antd/src/views/ai/image/index/components/dall3/index.vue
View File

@@ -151,18 +151,18 @@ defineExpose({ settingValues });
v-model:value="prompt"
:maxlength="1024"
:rows="5"
class="mt-[15px] w-full"
class="mt-4 w-full"
placeholder="例如：童话里的小屋应该是什么样子？"
show-count
/>
</div>
<div class="hot-words mt-[30px] flex flex-col">
<div class="mt-8 flex flex-col">
<div><b>随机热词</b></div>
<Space wrap class="word-list mt-[15px] flex flex-wrap justify-start">
<Space wrap class="mt-4 flex flex-wrap justify-start">
<Button
shape="round"
class="btn m-0"
class="m-0"
:type="selectHotWord === hotWord ? 'primary' : 'default'"
v-for="hotWord in ImageHotWords"
:key="hotWord"
@@ -173,15 +173,13 @@ defineExpose({ settingValues });
</Space>
</div>
<div class="model mt-[30px]">
<div class="mt-8">
<div><b>模型选择</b></div>
<Space wrap class="model-list mt-[15px] flex flex-wrap gap-[10px]">
<Space wrap class="mt-4 flex flex-wrap gap-2">
<div
class="modal-item flex w-[110px] cursor-pointer flex-col items-center overflow-hidden rounded-[5px] border-[3px]"
class="flex w-28 cursor-pointer flex-col items-center overflow-hidden rounded-lg border-2"
:class="[
selectModel === model.key
? 'border-[#1293ff!important]'
: 'border-transparent',
selectModel === model.key ? '!border-blue-500' : 'border-transparent',
]"
v-for="model in Dall3Models"
:key="model.key"
@@ -192,20 +190,20 @@ defineExpose({ settingValues });
fit="contain"
@click="handleModelClick(model)"
/>
<div class="model-font text-[14px] font-bold text-[#3e3e3e]">
<div class="text-sm font-bold text-gray-600">
{{ model.name }}
</div>
</div>
</Space>
</div>
<div class="image-style mt-[30px]">
<div class="mt-8">
<div><b>风格选择</b></div>
<Space wrap class="image-style-list mt-[15px] flex flex-wrap gap-[10px]">
<Space wrap class="mt-4 flex flex-wrap gap-2">
<div
class="image-style-item flex w-[110px] cursor-pointer flex-col items-center overflow-hidden rounded-[5px] border-[3px]"
class="flex w-28 cursor-pointer flex-col items-center overflow-hidden rounded-lg border-2"
:class="[
style === imageStyle.key ? 'border-[#1293ff]' : 'border-transparent',
style === imageStyle.key ? 'border-blue-500' : 'border-transparent',
]"
v-for="imageStyle in Dall3StyleList"
:key="imageStyle.key"
@@ -216,41 +214,38 @@ defineExpose({ settingValues });
fit="contain"
@click="handleStyleClick(imageStyle)"
/>
<div class="style-font text-[14px] font-bold text-[#3e3e3e]">
<div class="text-sm font-bold text-gray-600">
{{ imageStyle.name }}
</div>
</div>
</Space>
</div>
<div class="image-size mt-[30px] w-full">
<div class="mt-8 w-full">
<div><b>画面比例</b></div>
<Space
wrap
class="size-list mt-[20px] flex w-full flex-row justify-between"
>
<Space wrap class="mt-5 flex w-full flex-wrap gap-2">
<div
class="size-item flex cursor-pointer flex-col items-center"
class="flex cursor-pointer flex-col items-center"
v-for="imageSize in Dall3SizeList"
:key="imageSize.key"
@click="handleSizeClick(imageSize)"
>
<div
class="size-wrapper flex h-[50px] w-[50px] flex-col items-center justify-center rounded-[7px] border bg-white p-[4px]"
class="flex h-12 w-12 flex-col items-center justify-center rounded-lg border bg-white p-0"
:class="[
selectSize === imageSize.key ? 'border-[#1293ff]' : 'border-white',
selectSize === imageSize.key ? 'border-blue-500' : 'border-white',
]"
>
<div :style="imageSize.style"></div>
</div>
<div class="size-font text-[14px] font-bold text-[#3e3e3e]">
<div class="text-sm font-bold text-gray-600">
{{ imageSize.name }}
</div>
</div>
</Space>
</div>
<div class="btns mt-[50px] flex justify-center">
<div class="mt-12 flex justify-center">
<Button
type="primary"
size="large"

30
apps/web-antd/src/views/ai/image/index/components/midjourney/index.vue
View File

@@ -150,7 +150,7 @@ defineExpose({ settingValues });
v-model:value="prompt"
:maxlength="1024"
:rows="5"
class="mt-[15px] w-full"
class="mt-4 w-full"
placeholder="例如：童话里的小屋应该是什么样子？"
show-count
/>
@@ -172,38 +172,38 @@ defineExpose({ settingValues });
</Space>
</div>
<div class="mt-8 w-full">
<div class="mt-8">
<div><b>尺寸</b></div>
<Space wrap class="mt-5 flex w-full flex-row justify-between">
<Space wrap class="mt-4 flex w-full flex-wrap gap-2">
<div
class="flex cursor-pointer flex-col items-center"
class="flex cursor-pointer flex-col items-center overflow-hidden"
v-for="imageSize in MidjourneySizeList"
:key="imageSize.key"
@click="handleSizeClick(imageSize)"
>
<div
class="flex h-[50px] w-[50px] items-center justify-center rounded-[7px] border bg-white p-1"
class="flex h-12 w-12 items-center justify-center rounded-lg border bg-white p-0"
:class="[
selectSize === imageSize.key ? 'border-[#1293ff]' : 'border-white',
selectSize === imageSize.key ? 'border-blue-500' : 'border-white',
]"
>
<div :style="imageSize.style"></div>
</div>
<div class="text-sm font-bold text-[#3e3e3e]">{{ imageSize.key }}</div>
<div class="text-sm font-bold text-gray-600">{{ imageSize.key }}</div>
</div>
</Space>
</div>
<div class="mt-8">
<div><b>模型</b></div>
<Space wrap class="mt-4 flex flex-wrap gap-4">
<Space wrap class="mt-4 flex flex-wrap gap-2">
<div
v-for="model in MidjourneyModels"
:key="model.key"
class="flex w-[150px] cursor-pointer flex-col items-center overflow-hidden border-[3px]"
class="flex max-w-40 cursor-pointer flex-col items-center overflow-hidden"
:class="[
selectModel === model.key
? 'rounded border-[#1293ff]'
? 'rounded border-blue-500'
: 'border-transparent',
]"
>
@@ -213,17 +213,17 @@ defineExpose({ settingValues });
fit="contain"
@click="handleModelClick(model)"
/>
<div class="text-sm font-bold text-[#3e3e3e]">{{ model.name }}</div>
<div class="text-sm font-bold text-gray-600">{{ model.name }}</div>
</div>
</Space>
</div>
<div class="mt-5">
<div class="mt-8">
<div><b>版本</b></div>
<Space wrap class="mt-5 w-full">
<Space wrap class="mt-5 flex w-full flex-wrap gap-2">
<Select
v-model:value="selectVersion"
class="!w-[330px]"
class="!w-80"
clearable
placeholder="请选择版本"
>
@@ -245,7 +245,7 @@ defineExpose({ settingValues });
</Space>
</div>
<div class="mt-[50px] flex justify-center">
<div class="mt-8 flex justify-center">
<Button
type="primary"
size="large"

56
apps/web-antd/src/views/ai/image/index/components/stableDiffusion/index.vue
View File

@@ -140,16 +140,16 @@ defineExpose({ settingValues });
v-model:value="prompt"
:maxlength="1024"
:rows="5"
class="mt-[15px] w-full"
class="mt-4 w-full"
placeholder="例如：童话里的小屋应该是什么样子？"
show-count
/>
</div>
<!-- 热词区域 -->
<div class="mt-[30px] flex flex-col">
<div class="mt-8 flex flex-col">
<div><b>随机热词</b></div>
<Space wrap class="mt-[15px] flex flex-wrap justify-start">
<Space wrap class="mt-4 flex flex-wrap gap-2">
<Button
shape="round"
class="m-0"
@@ -164,14 +164,14 @@ defineExpose({ settingValues });
</div>
<!-- 参数项：采样方法 -->
<div class="mt-[30px]">
<div class="mt-8">
<div><b>采样方法</b></div>
<Space wrap class="mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<Select
v-model:value="sampler"
placeholder="Select"
size="large"
class="!w-[330px]"
class="!w-80"
>
<Select.Option
v-for="item in StableDiffusionSamplers"
@@ -185,14 +185,14 @@ defineExpose({ settingValues });
</div>
<!-- CLIP -->
<div class="mt-[30px]">
<div class="mt-8">
<div><b>CLIP</b></div>
<Space wrap class="mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<Select
v-model:value="clipGuidancePreset"
placeholder="Select"
size="large"
class="!w-[330px]"
class="!w-80"
>
<Select.Option
v-for="item in StableDiffusionClipGuidancePresets"
@@ -206,14 +206,14 @@ defineExpose({ settingValues });
</div>
<!-- 风格 -->
<div class="mt-[30px]">
<div class="mt-8">
<div><b>风格</b></div>
<Space wrap class="mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<Select
v-model:value="stylePreset"
placeholder="Select"
size="large"
class="!w-[330px]"
class="!w-80"
>
<Select.Option
v-for="item in StableDiffusionStylePresets"
@@ -228,64 +228,68 @@ defineExpose({ settingValues });
</div>
<!-- 图片尺寸 -->
<div class="mt-[30px]">
<div class="mt-8">
<div><b>图片尺寸</b></div>
<Space wrap class="mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<InputNumber
v-model:value="width"
class="w-[170px]"
class="w-40"
placeholder="图片宽度"
addon-before="宽"
addon-after="px"
/>
<InputNumber
v-model:value="height"
class="w-[170px]"
class="w-40"
placeholder="图片高度"
addon-before="高"
addon-after="px"
/>
</Space>
</div>
<!-- 迭代步数 -->
<div class="mt-[30px]">
<div class="mt-8">
<div><b>迭代步数</b></div>
<Space wrap class="mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<InputNumber
v-model:value="steps"
size="large"
class="!w-[330px]"
class="!w-80"
placeholder="Please input"
/>
</Space>
</div>
<!-- 引导系数 -->
<div class="mt-[30px]">
<div class="mt-8">
<div><b>引导系数</b></div>
<Space wrap class="mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<InputNumber
v-model:value="scale"
type="number"
size="large"
class="!w-[330px]"
class="!w-80"
placeholder="Please input"
/>
</Space>
</div>
<!-- 随机因子 -->
<div class="mt-[30px]">
<div class="mt-8">
<div><b>随机因子</b></div>
<Space wrap class="mt-[15px] w-full">
<Space wrap class="mt-4 w-full">
<InputNumber
v-model:value="seed"
size="large"
class="!w-[330px]"
class="!w-80"
placeholder="Please input"
/>
</Space>
</div>
<!-- 生成按钮 -->
<div class="mt-[50px] flex justify-center">
<div class="mt-12 flex justify-center">
<Button
type="primary"
size="large"

10
apps/web-antd/src/views/ai/image/index/index.vue
View File

@@ -90,16 +90,16 @@ onMounted(async () => {
<template>
<Page auto-content-height>
<div class="ai-image absolute inset-0 flex h-full w-full flex-row">
<div class="left flex w-[390px] flex-col p-5">
<div class="absolute inset-0 flex h-full w-full flex-row bg-gray-50">
<div class="left-0 flex w-96 flex-col p-4">
<div class="segmented flex justify-center">
<Segmented
v-model:value="selectPlatform"
:options="platformOptions"
class="bg-[#ececec]"
class="bg-gray-100"
/>
</div>
<div class="modal-switch-container mt-[30px] h-full overflow-y-auto">
<div class="mt-8 h-full overflow-y-auto">
<Common
v-if="selectPlatform === 'common'"
ref="commonRef"
@@ -126,7 +126,7 @@ onMounted(async () => {
/>
</div>
</div>
<div class="main flex-1 bg-white">
<div class="ml-4 flex-1 bg-white">
<ImageList ref="imageListRef" @on-regeneration="handleRegeneration" />
</div>
</div>

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

@@ -100,7 +100,7 @@ onMounted(async () => {
<TableAction :actions="[]" />
</template>
<template #picUrl="{ row }">
<Image :src="row.picUrl" class="h-80px w-80px" />
<Image :src="row.picUrl" class="h-20 w-20" />
</template>
<template #userId="{ row }">
<span>

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

@@ -6,7 +6,7 @@ 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 { Image, Input, Pagination } from 'ant-design-vue';
import { getImagePageMy } from '#/api/ai/image';
@@ -45,32 +45,28 @@ onMounted(async () => {
</script>
<template>
<Page auto-content-height>
<div class="bg-white p-[20px]">
<!-- TODO @fan：Search 可以换成 Icon 组件么？ -->
<div class="bg-white p-5">
<Input.Search
v-model="queryParams.prompt"
class="mb-[20px] w-full"
class="mb-5 w-full"
size="large"
placeholder="请输入要搜索的内容"
@keyup.enter="handleQuery"
/>
<div
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))"
class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2.5 bg-white shadow-sm"
>
<!-- TODO @fan：这个图片的风格，要不和 ImageCard.vue 界面一致？（只有卡片，没有操作）；因为看着更有相框的感觉~~~ -->
<div
v-for="item in list"
:key="item.id"
class="relative cursor-pointer overflow-hidden bg-white transition-transform duration-300 hover:scale-[1.05]"
class="relative cursor-pointer overflow-hidden bg-white transition-transform duration-300 hover:scale-105"
>
<img
<Image
:src="item.picUrl"
class="block h-auto w-full transition-transform duration-300 hover:scale-[1.1]"
class="block h-auto w-full transition-transform duration-300 hover:scale-110"
/>
</div>
</div>
<!-- TODO @fan：缺少翻页 -->
<!-- 分页 -->
<Pagination
:total="total"
@@ -81,7 +77,7 @@ onMounted(async () => {
v-model:page-size="queryParams.pageSize"
@change="debounceGetList"
@show-size-change="debounceGetList"
class="mt-[20px]"
class="mt-5"
/>
</div>
</Page>

14
apps/web-antd/src/views/ai/knowledge/document/form/ProcessStep.vue
View File

@@ -114,16 +114,16 @@ onBeforeUnmount(() => {
<template>
<div>
<!-- 文件处理列表 -->
<div class="mt-[15px] grid grid-cols-1 gap-2">
<div class="mt-4 grid grid-cols-1 gap-2">
<div
v-for="(file, index) in modelValue.list"
:key="index"
class="flex items-center rounded-sm border-l-4 border-l-[#409eff] px-[12px] py-[4px] shadow-sm transition-all duration-300 hover:bg-[#ecf5ff]"
class="flex items-center rounded-sm border-l-4 border-l-blue-500 px-3 py-1 shadow-sm transition-all duration-300 hover:bg-blue-50"
>
<!-- 文件图标和名称 -->
<div class="mr-[10px] flex min-w-[200px] items-center">
<IconifyIcon icon="lucide:file-text" class="mr-8px text-[#409eff]" />
<span class="break-all text-[13px] text-[#303133]">
<div class="mr-2 flex min-w-48 items-center">
<IconifyIcon icon="lucide:file-text" class="mr-2 text-blue-500" />
<span class="break-all text-sm text-gray-600">
{{ file.name }}
</span>
</div>
@@ -138,14 +138,14 @@ onBeforeUnmount(() => {
</div>
<!-- 分段数量 -->
<div class="ml-[10px] text-[13px] text-[#606266]">
<div class="ml-2 text-sm text-gray-400">
分段数量：{{ file.count ? file.count : '-' }}
</div>
</div>
</div>
<!-- 底部完成按钮 -->
<div class="mt-[20px] flex justify-end">
<div class="mt-5 flex justify-end">
<Button
:type="allProcessComplete ? 'primary' : 'default'"
:disabled="!allProcessComplete"

46
apps/web-antd/src/views/ai/knowledge/document/form/SplitStep.vue
View File

@@ -168,9 +168,9 @@ onMounted(async () => {
<template>
<div>
<!-- 上部分段设置部分 -->
<div class="mb-[20px]">
<div class="mb-[20px] flex items-center justify-between">
<div class="flex items-center text-[16px] font-bold">
<div class="mb-5">
<div class="mb-5 flex items-center justify-between">
<div class="flex items-center text-base font-bold">
分段设置
<Tooltip placement="top">
<template #title>
@@ -178,7 +178,7 @@ onMounted(async () => {
</template>
<IconifyIcon
icon="lucide:circle-alert"
class="ml-[5px] text-gray-400"
class="ml-1 text-gray-400"
/>
</Tooltip>
</div>
@@ -188,7 +188,7 @@ onMounted(async () => {
</Button>
</div>
</div>
<div class="segment-settings mb-[20px]">
<div class="mb-5">
<Form :label-col="{ span: 5 }">
<Form.Item label="最大 Token 数">
<InputNumber
@@ -200,24 +200,24 @@ onMounted(async () => {
</Form>
</div>
</div>
<div class="mb-[10px]">
<div class="mb-[10px] text-[16px] font-bold">分段预览</div>
<div class="mb-2.5">
<div class="mb-2.5 text-base font-bold">分段预览</div>
<!-- 文件选择器 -->
<div class="file-selector mb-[10px]">
<div class="mb-2.5">
<Dropdown
v-if="modelData.list && modelData.list.length > 0"
trigger="click"
>
<div class="flex cursor-pointer items-center">
<IconifyIcon icon="lucide:file-text" class="text-danger mr-[5px]" />
<IconifyIcon icon="lucide:file-text" class="mr-1" />
<span>{{ currentFile?.name || '请选择文件' }}</span>
<span
v-if="currentFile?.segments"
class="ml-5px text-[12px] text-gray-500"
class="ml-1 text-sm text-gray-500"
>
({{ currentFile.segments.length }}个分片)
</span>
<IconifyIcon icon="lucide:chevron-down" class="ml-[5px]" />
<IconifyIcon icon="lucide:chevron-down" class="ml-1" />
</div>
<template #overlay>
<Menu>
@@ -227,10 +227,7 @@ onMounted(async () => {
@click="selectFile(index)"
>
{{ file.name }}
<span
v-if="file.segments"
class="ml-[5px] text-[12px] text-gray-500"
>
<span v-if="file.segments" class="ml-1 text-sm text-gray-500">
({{ file.segments.length }}个分片)
</span>
</Menu.Item>
@@ -240,15 +237,10 @@ onMounted(async () => {
<div v-else class="text-gray-400">暂无上传文件</div>
</div>
<!-- 文件内容预览 -->
<div
class="file-preview max-h-[600px] overflow-y-auto rounded-md bg-gray-50 p-[15px]"
>
<div
v-if="splitLoading"
class="flex items-center justify-center py-[20px]"
>
<div class="max-h-[600px] overflow-y-auto rounded-md bg-gray-50 p-4">
<div v-if="splitLoading" class="flex items-center justify-center py-5">
<IconifyIcon icon="lucide:loader" class="is-loading" />
<span class="ml-[10px]">正在加载分段内容...</span>
<span class="ml-2.5">正在加载分段内容...</span>
</div>
<template
v-else-if="
@@ -260,13 +252,13 @@ onMounted(async () => {
<div
v-for="(segment, index) in currentFile.segments"
:key="index"
class="mb-[10px]"
class="mb-2.5"
>
<div class="mb-[5px] text-[12px] text-gray-500">
<div class="mb-1 text-sm text-gray-500">
分片-{{ index + 1 }} · {{ segment.contentLength || 0 }} 字符数 ·
{{ segment.tokens || 0 }} Token
</div>
<div class="rounded-md bg-white p-[10px]">
<div class="rounded-md bg-white p-2">
{{ segment.content }}
</div>
</div>
@@ -275,7 +267,7 @@ onMounted(async () => {
</div>
</div>
<!-- 添加底部按钮 -->
<div class="mt-[20px] flex justify-between">
<div class="mt-5 flex justify-between">
<div>
<Button v-if="!modelData.id" @click="handlePrevStep">上一步</Button>
</div>

29
apps/web-antd/src/views/ai/knowledge/document/form/UploadStep.vue
View File

@@ -186,11 +186,11 @@ onMounted(() => {
</script>
<template>
<Form ref="formRef" :model="modelData" label-width="0" class="mt-[20px]">
<Form.Item class="mb-[20px]">
<Form ref="formRef" :model="modelData" label-width="0" class="mt-5">
<Form.Item class="mb-5">
<div class="w-full">
<div
class="w-full rounded-md border-2 border-dashed border-[#dcdfe6] p-[20px] text-center hover:border-[#409eff]"
class="w-full rounded-md border-2 border-dashed border-gray-200 p-5 text-center hover:border-blue-500"
>
<UploadDragger
ref="uploadRef"
@@ -203,18 +203,18 @@ onMounted(() => {
:custom-request="customRequest"
:multiple="true"
>
<div class="flex flex-col items-center justify-center py-[20px]">
<div class="flex flex-col items-center justify-center py-5">
<IconifyIcon
icon="ep:upload-filled"
class="mb-[10px] text-[48px] text-[#c0c4cc]"
class="mb-2.5 text-xs text-gray-400"
/>
<div class="ant-upload-text text-[16px] text-[#606266]">
<div class="ant-upload-text text-base text-gray-400">
拖拽文件至此，或者
<em class="cursor-pointer not-italic text-[#409eff]">
<em class="cursor-pointer not-italic text-blue-500">
选择文件
</em>
</div>
<div class="ant-upload-tip mt-10px text-[12px] text-[#909399]">
<div class="mt-2.5 text-sm text-gray-400">
已支持 {{ supportedFileTypes.join('、') }}，每个文件不超过
{{ maxFileSize }} MB。
</div>
@@ -223,19 +223,16 @@ onMounted(() => {
</div>
<div
v-if="modelData.list && modelData.list.length > 0"
class="mt-[15px] grid grid-cols-1 gap-2"
class="mt-4 grid grid-cols-1 gap-2"
>
<div
v-for="(file, index) in modelData.list"
:key="index"
class="flex items-center justify-between rounded-sm border-l-4 border-l-[#409eff] px-[12px] py-[4px] shadow-sm transition-all duration-300 hover:bg-[#ecf5ff]"
class="flex items-center justify-between rounded-sm border-l-4 border-l-blue-500 px-3 py-1 shadow-sm transition-all duration-300 hover:bg-blue-50"
>
<div class="flex items-center">
<IconifyIcon
icon="lucide:file-text"
class="mr-[8px] text-[#409eff]"
/>
<span class="break-all text-[13px] text-[#303133]">{{
<IconifyIcon icon="lucide:file-text" class="mr-2 text-blue-500" />
<span class="break-all text-sm text-gray-600">{{
file.name
}}</span>
</div>
@@ -246,7 +243,7 @@ onMounted(() => {
@click="removeFile(index)"
class="ml-2"
>
<IconifyIcon icon="lucide:trash" />
<IconifyIcon icon="lucide:trash-2" />
</Button>
</div>
</div>

14
apps/web-antd/src/views/ai/knowledge/document/form/index.vue
View File

@@ -131,26 +131,26 @@ defineExpose({
<div class="mx-auto">
<!-- 头部导航栏 -->
<div
class="border-bottom absolute left-0 right-0 top-0 z-10 flex h-[50px] items-center bg-white px-[20px]"
class="absolute left-0 right-0 top-0 z-10 flex h-12 items-center border-b bg-white px-4"
>
<!-- 左侧标题 -->
<div class="flex w-[200px] items-center overflow-hidden">
<div class="flex w-48 items-center overflow-hidden">
<ArrowLeft
class="size-5 flex-shrink-0 cursor-pointer"
@click="handleBack"
/>
<span class="ml-10px text-16px truncate">
<span class="ml-2.5 truncate text-base">
{{ formData.id ? '编辑知识库文档' : '创建知识库文档' }}
</span>
</div>
<!-- 步骤条 -->
<div class="flex h-full flex-1 items-center justify-center">
<div class="flex h-full w-[400px] items-center justify-between">
<div class="flex h-full w-96 items-center justify-between">
<div
v-for="(step, index) in steps"
:key="index"
class="relative mx-[15px] flex h-full cursor-pointer items-center"
class="relative mx-4 flex h-full cursor-pointer items-center"
:class="[
currentStep === index
? 'border-b-2 border-solid border-blue-500 text-blue-500'
@@ -158,7 +158,7 @@ defineExpose({
]"
>
<div
class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-[15px]"
class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-base"
:class="[
currentStep === index
? 'border-blue-500 bg-blue-500 text-white'
@@ -176,7 +176,7 @@ defineExpose({
</div>
<!-- 主体内容 -->
<Card :body-style="{ padding: '10px' }" class="mb-4">
<div class="mt-[50px]">
<div class="mt-12">
<!-- 第一步：上传文档 -->
<div v-if="currentStep === 0" class="mx-auto w-[560px]">
<UploadStep v-model="formData" ref="uploadDocumentRef" />

2
apps/web-antd/src/views/ai/knowledge/knowledge/modules/form.vue
View File

@@ -83,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-[600px]" :title="getTitle">
<Modal class="w-2/5" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

19
apps/web-antd/src/views/ai/knowledge/knowledge/retrieval/index.vue
View File

@@ -94,12 +94,11 @@ onMounted(() => {
<Card class="min-w-300 flex-1">
<div class="mb-15">
<h3
class="m-0 mb-2 font-semibold leading-none tracking-tight"
style="font-size: 18px"
class="m-0 mb-2 text-lg font-semibold leading-none tracking-tight"
>
召回测试
</h3>
<div class="text-14 text-gray-500">
<div class="text-sm text-gray-500">
根据给定的查询文本测试召回效果。
</div>
</div>
@@ -110,7 +109,7 @@ onMounted(() => {
:rows="8"
placeholder="请输入文本"
/>
<div class="text-12 absolute bottom-2 right-2 text-gray-400">
<div class="absolute bottom-2 right-2 text-sm text-gray-400">
{{ queryParams.content?.length }} / 200
</div>
</div>
@@ -148,7 +147,7 @@ onMounted(() => {
<Card class="min-w-300 flex-1">
<!-- 加载中状态 -->
<template v-if="loading">
<div class="flex h-[300px] items-center justify-center">
<div class="flex h-72 items-center justify-center">
<Empty description="正在检索中..." />
</div>
</template>
@@ -162,19 +161,19 @@ onMounted(() => {
:key="index"
class="p-15 mb-20 rounded border border-solid border-gray-200"
>
<div class="text-12 mb-5 flex justify-between text-gray-500">
<div class="mb-5 flex justify-between text-sm text-gray-500">
<span>
分段({{ segment.id }}) · {{ segment.contentLength }} 字符数 ·
{{ segment.tokens }} Token
</span>
<span
class="-8 text-12 rounded-full bg-blue-50 py-4 font-bold text-blue-500"
class="rounded-full bg-blue-50 py-4 text-sm font-bold text-blue-500"
>
score: {{ segment.score }}
</span>
</div>
<div
class="text-13 mb-10 overflow-hidden whitespace-pre-wrap rounded bg-gray-50 p-10 transition-all duration-100"
class="mb-10 overflow-hidden whitespace-pre-wrap rounded bg-gray-50 p-10 text-sm transition-all duration-100"
:class="{
'max-h-50 line-clamp-2': !segment.expanded,
'max-h-500': segment.expanded,
@@ -183,7 +182,7 @@ onMounted(() => {
{{ segment.content }}
</div>
<div class="flex items-center justify-between">
<div class="text-13 flex items-center text-gray-500">
<div class="flex items-center text-sm text-gray-500">
<IconifyIcon icon="lucide:file-text" class="mr-5" />
<span>{{ segment.documentName || '未知文档' }}</span>
</div>
@@ -205,7 +204,7 @@ onMounted(() => {
<!-- 无召回结果 -->
<template v-else>
<div class="flex h-[300px] items-center justify-center">
<div class="flex h-72 items-center justify-center">
<Empty description="暂无召回结果" />
</div>
</template>

22
apps/web-antd/src/views/ai/knowledge/segment/index.vue
View File

@@ -147,27 +147,9 @@ onMounted(() => {
</template>
<template #expand_content="{ row }">
<div
class="content-expand"
style="
padding: 10px 20px;
line-height: 1.5;
white-space: pre-wrap;
background-color: #f9f9f9;
border-left: 3px solid #409eff;
border-radius: 4px;
"
class="whitespace-pre-wrap border-l-4 border-blue-500 bg-gray-100 px-2.5 py-5 leading-5"
>
<div
class="content-title"
style="
margin-bottom: 8px;
font-size: 14px;
font-weight: bold;
color: #606266;
"
>
完整内容：
</div>
<div class="mb-2 text-sm font-bold text-gray-600">完整内容：</div>
{{ row.content }}
</div>
</template>

2
apps/web-antd/src/views/ai/knowledge/segment/modules/form.vue
View File

@@ -84,7 +84,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-[600px]" :title="getTitle">
<Modal class="w-2/5" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

3
apps/web-antd/src/views/ai/mindmap/index/index.vue
View File

@@ -75,9 +75,10 @@ onMounted(() => {
<template>
<Page auto-content-height>
<div class="absolute bottom-0 left-0 right-0 top-0 flex">
<div class="absolute bottom-0 left-0 right-0 top-0 m-4 flex">
<Left
ref="leftRef"
class="mr-4"
:is-generating="isGenerating"
@submit="submit"
@direct-generate="directGenerate"

16
apps/web-antd/src/views/ai/mindmap/index/modules/Left.vue
View File

@@ -23,10 +23,8 @@ defineExpose({
});
</script>
<template>
<div class="flex w-[350px] flex-col bg-[#f5f7f9] p-5">
<h3
class="h-[1.75rem] w-full text-center text-[1.25rem] leading-[28px] text-[hsl(var(--primary))]"
>
<div class="flex w-80 flex-col bg-gray-50 p-5">
<h3 class="text-primary h-7 w-full text-center text-xl leading-7">
思维导图创作中心
</h3>
<div class="flex-grow overflow-y-auto">
@@ -36,12 +34,12 @@ defineExpose({
v-model:value="formData.prompt"
:maxlength="1024"
:rows="8"
class="w-100% mt-15px"
class="mt-4 w-full"
placeholder="请输入提示词，让AI帮你完善"
show-count
/>
<Button
class="mt-[15px] !w-full"
class="mt-4 !w-full"
type="primary"
:loading="isGenerating"
@click="emits('submit', formData)"
@@ -49,18 +47,18 @@ defineExpose({
智能生成思维导图
</Button>
</div>
<div class="mt-[30px]">
<div class="mt-7">
<b>使用已有内容生成？</b>
<Textarea
v-model:value="generatedContent"
:maxlength="1024"
:rows="8"
class="w-100% mt-15px"
class="mt-4 w-full"
placeholder="例如：童话里的小屋应该是什么样子？"
show-count
/>
<Button
class="mt-[15px] !w-full"
class="mt-4 !w-full"
type="primary"
@click="emits('directGenerate', generatedContent)"
:disabled="isGenerating"

2
apps/web-antd/src/views/ai/mindmap/index/modules/Right.vue
View File

@@ -153,7 +153,7 @@ defineExpose({
:style="{ height: `${contentAreaHeight}px` }"
class="w-full"
/>
<div ref="toolBarRef" class="absolute bottom-[10px] right-5"></div>
<div ref="toolBarRef" class="absolute bottom-2.5 right-5"></div>
</div>
</div>
</Card>

2
apps/web-antd/src/views/ai/mindmap/manager/index.vue
View File

@@ -93,7 +93,7 @@ onMounted(async () => {
<template #doc>
<DocAlert title="AI 思维导图" url="https://doc.iocoder.cn/ai/mindmap/" />
</template>
<Drawer class="w-[800px]">
<Drawer class="w-3/5">
<Right
v-if="previewVisible"
:generated-content="previewContent"

2
apps/web-antd/src/views/ai/model/apiKey/modules/form.vue
View File

@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-[600px]" :title="getTitle">
<Modal class="w-2/5" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

2
apps/web-antd/src/views/ai/model/chatRole/index.vue
View File

@@ -110,7 +110,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<span v-else>引用 {{ row.toolIds.length }} 个</span>
</template>
<template #avatar="{ row }">
<Image :src="row.avatar" class="w-32px h-32px" />
<Image :src="row.avatar" class="h-8 w-8" />
</template>
<template #actions="{ row }">
<TableAction

2
apps/web-antd/src/views/ai/model/chatRole/modules/form.vue
View File

@@ -82,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-[600px]" :title="getTitle">
<Modal class="w-2/5" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

2
apps/web-antd/src/views/ai/model/model/modules/form.vue
View File

@@ -77,7 +77,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-[600px]" :title="getTitle">
<Modal class="w-2/5" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

2
apps/web-antd/src/views/ai/model/tool/modules/form.vue
View File

@@ -76,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-[600px]" :title="getTitle">
<Modal class="w-2/5" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

2
apps/web-antd/src/views/ai/music/index/index.vue
View File

@@ -18,7 +18,7 @@ function generateMusic(args: { formData: Recordable<any> }) {
</script>
<template>
<Page>
<Page auto-content-height>
<div class="flex h-full items-stretch">
<!-- 模式 -->
<Mode class="flex-none" @generate-music="generateMusic" />

39
apps/web-antd/src/views/ai/music/index/list/audioBar/index.vue
View File

@@ -1,6 +1,4 @@
<script lang="ts" setup>
import type { Nullable } from '@vben/types';
import { inject, reactive, ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
@@ -10,9 +8,9 @@ import { Image, Slider } from 'ant-design-vue';
defineOptions({ name: 'AiMusicAudioBarIndex' });
const currentSong = inject('currentSong', {});
const currentSong = inject<any>('currentSong', {});
const audioRef = ref<Nullable<HTMLElement>>(null);
const audioRef = ref<HTMLAudioElement | null>(null);
// 音频相关属性https://www.runoob.com/tags/ref-av-dom.html
const audioProps = reactive<any>({
autoplay: true,
@@ -42,26 +40,24 @@ function audioTimeUpdate(args: any) {
<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"
class="b-1 b-l-none h-18 flex items-center justify-between border border-solid border-rose-100 bg-white px-2"
>
<!-- 歌曲信息 -->
<div class="flex gap-[10px]">
<div class="flex gap-2.5">
<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 class="text-xs text-gray-400">{{ currentSong.singer }}</div>
</div>
</div>
<!-- 音频controls -->
<div class="flex items-center gap-[12px]">
<div class="flex items-center gap-3">
<IconifyIcon
icon="majesticons:back-circle"
:size="20"
class="cursor-pointer text-gray-300"
class="size-5 cursor-pointer text-gray-300"
/>
<IconifyIcon
:icon="
@@ -69,21 +65,19 @@ function audioTimeUpdate(args: any) {
? 'mdi:arrow-right-drop-circle'
: 'solar:pause-circle-bold'
"
:size="30"
class="cursor-pointer"
class="size-7 cursor-pointer"
@click="toggleStatus('paused')"
/>
<IconifyIcon
icon="majesticons:next-circle"
:size="20"
class="cursor-pointer text-gray-300"
class="size-5 cursor-pointer text-gray-300"
/>
<div class="flex items-center gap-[16px]">
<div class="flex items-center gap-4">
<span>{{ audioProps.currentTime }}</span>
<Slider
v-model:value="audioProps.duration"
color="#409eff"
class="w-[160px!important]"
class="!w-40"
/>
<span>{{ audioProps.duration }}</span>
</div>
@@ -98,18 +92,13 @@ function audioTimeUpdate(args: any) {
<!-- <source :src="audioUrl" /> -->
</audio>
</div>
<div class="flex items-center gap-[16px]">
<div class="flex items-center gap-4">
<IconifyIcon
:icon="audioProps.muted ? 'tabler:volume-off' : 'tabler:volume'"
:size="20"
class="cursor-pointer"
class="size-5 cursor-pointer"
@click="toggleStatus('muted')"
/>
<Slider
v-model:value="audioProps.volume"
color="#409eff"
class="w-[160px!important]"
/>
<Slider v-model:value="audioProps.volume" color="#409eff" class="!w-40" />
</div>
</div>
</template>

2
apps/web-antd/src/views/ai/music/index/list/index.vue
View File

@@ -74,7 +74,7 @@ provide('currentSong', currentSong);
<div class="flex flex-auto overflow-hidden">
<Tabs
v-model:active-key="currentType"
class="flex-auto px-[20px]"
class="flex-auto px-5"
tab-position="bottom"
>
<!-- 我的创作 -->

12
apps/web-antd/src/views/ai/music/index/list/songCard/index.vue
View File

@@ -16,7 +16,7 @@ defineProps({
const emits = defineEmits(['play']);
const currentSong = inject('currentSong', {});
const currentSong = inject<any>('currentSong', {});
function playSong() {
emits('play');
@@ -24,11 +24,11 @@ function playSong() {
</script>
<template>
<div class="rounded-1 mb-[12px] flex p-[12px]">
<div class="mb-3 flex rounded p-3">
<div class="relative" @click="playSong">
<Image :src="songInfo.imageUrl" class="w-80px flex-none" />
<Image :src="songInfo.imageUrl" class="w-20 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"
class="absolute left-0 top-0 flex h-full w-full cursor-pointer items-center justify-center bg-black bg-opacity-40"
>
<IconifyIcon
:icon="
@@ -40,9 +40,9 @@ function playSong() {
/>
</div>
</div>
<div class="ml-[8px]">
<div class="ml-2">
<div>{{ songInfo.title }}</div>
<div class="mt-[8px] line-clamp-2 text-[12px]">
<div class="mt-2 line-clamp-2 text-xs">
{{ songInfo.desc }}
</div>
</div>

14
apps/web-antd/src/views/ai/music/index/list/songInfo/index.vue
View File

@@ -5,21 +5,21 @@ import { Button, Card, Image } from 'ant-design-vue';
defineOptions({ name: 'AiMusicSongInfoIndex' });
const currentSong = inject('currentSong', {});
const currentSong = inject<any>('currentSong', {});
</script>
<template>
<Card class="line-height-24px mb-[0!important] w-[300px]">
<Image :src="currentSong.imageUrl" style="width: 100%; height: 100%" />
<Card class="!mb-0 w-40 leading-6">
<Image :src="currentSong.imageUrl" class="h-full w-full" />
<div class="">{{ currentSong.title }}</div>
<div class="line-clamp-1 text-[12px]">
<div class="line-clamp-1 text-xs">
{{ currentSong.desc }}
</div>
<div class="text-[12px]">
<div class="text-xs">
{{ currentSong.date }}
</div>
<Button size="small" shape="round" class="my-[6px]">信息复用</Button>
<div class="text-[12px]" v-html="currentSong.lyric"></div>
<Button size="small" shape="round" class="my-2">信息复用</Button>
<div class="text-xs" v-html="currentSong.lyric"></div>
</Card>
</template>

2
apps/web-antd/src/views/ai/music/index/mode/desc.vue
View File

@@ -33,7 +33,7 @@ defineExpose({
/>
</Title>
<Title title="纯音乐" class="mt-[20px]" desc="创建一首没有歌词的歌曲">
<Title title="纯音乐" class="mt-5" desc="创建一首没有歌词的歌曲">
<template #extra>
<Switch v-model:checked="formData.pure" size="small" />
</template>

4
apps/web-antd/src/views/ai/music/index/mode/index.vue
View File

@@ -27,8 +27,8 @@ function generateMusic() {
</script>
<template>
<Card class="mb-[0!important] h-full w-[300px]">
<Radio.Group v-model:value="generateMode" class="mb-[15px]">
<Card class="!mb-0 h-full w-80">
<Radio.Group v-model:value="generateMode" class="mb-4">
<Radio.Button value="desc"> 描述模式 </Radio.Button>
<Radio.Button value="lyric"> 歌词模式 </Radio.Button>
</Radio.Group>

6
apps/web-antd/src/views/ai/music/index/mode/lyric.vue
View File

@@ -37,7 +37,7 @@ defineExpose({
<Title title="音乐风格">
<Space class="flex-wrap">
<Tag v-for="tag in tags" :key="tag" class="mb-[8px]">
<Tag v-for="tag in tags" :key="tag" class="mb-2">
{{ tag }}
</Tag>
</Space>
@@ -46,7 +46,7 @@ defineExpose({
:type="showCustom ? 'primary' : 'default'"
shape="round"
size="small"
class="mb-[6px]"
class="mb-2"
@click="showCustom = !showCustom"
>
自定义风格
@@ -56,7 +56,7 @@ defineExpose({
<Title
v-show="showCustom"
desc="描述您想要的音乐风格，Suno无法识别艺术家的名字，但可以理解流派和氛围"
class="mt-[12px]"
class="mt-3"
>
<Textarea
v-model="formData.style"

6
apps/web-antd/src/views/ai/music/index/title/index.vue
View File

@@ -14,12 +14,12 @@ defineProps({
</script>
<template>
<div class="mb-[12px]">
<div class="flex items-center justify-between" style="color: #303133">
<div class="mb-3">
<div class="flex items-center justify-between text-gray-600">
<span>{{ title }}</span>
<slot name="extra"></slot>
</div>
<div class="my-[8px] text-[12px]" style="color: #909399">
<div class="my-2 text-xs text-gray-400">
{{ desc }}
</div>
<slot></slot>

10
apps/web-antd/src/views/ai/music/manager/index.vue
View File

@@ -111,7 +111,7 @@ onMounted(async () => {
v-if="row.audioUrl?.length > 0"
:href="row.audioUrl"
target="_blank"
style="padding: 0"
class="p-0"
>
音乐
</Button>
@@ -120,8 +120,7 @@ onMounted(async () => {
v-if="row.videoUrl?.length > 0"
:href="row.videoUrl"
target="_blank"
class="!pl-5px"
style="padding: 0"
class="p-0 !pl-1"
>
视频
</Button>
@@ -130,8 +129,7 @@ onMounted(async () => {
v-if="row.imageUrl?.length > 0"
:href="row.imageUrl"
target="_blank"
class="!pl-5px"
style="padding: 0"
class="p-0 !pl-1"
>
封面
</Button>
@@ -144,7 +142,7 @@ onMounted(async () => {
/>
</template>
<template #tags="{ row }">
<Tag v-for="tag in row.tags" :key="tag" class="ml-2px">
<Tag v-for="tag in row.tags" :key="tag" class="ml-1">
{{ tag }}
</Tag>
</template>

12
apps/web-antd/src/views/ai/workflow/form/index.vue
View File

@@ -210,7 +210,7 @@ onBeforeUnmount(() => {
class="absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b bg-white px-5"
>
<!-- 左侧标题 -->
<div class="flex w-[200px] items-center overflow-hidden">
<div class="flex w-48 items-center overflow-hidden">
<ArrowLeft
class="size-5 flex-shrink-0 cursor-pointer"
@click="handleBack"
@@ -225,11 +225,11 @@ onBeforeUnmount(() => {
<!-- 步骤条 -->
<div class="flex h-full flex-1 items-center justify-center">
<div class="flex h-full w-[400px] items-center justify-between">
<div class="flex h-full w-96 items-center justify-between">
<div
v-for="(step, index) in steps"
:key="index"
class="relative mx-[15px] flex h-full cursor-pointer items-center"
class="relative mx-4 flex h-full cursor-pointer items-center"
:class="[
currentStep === index
? 'border-b-2 border-solid border-blue-500 text-blue-500'
@@ -238,7 +238,7 @@ onBeforeUnmount(() => {
@click="handleStepClick(index)"
>
<div
class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-[15px]"
class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-base"
:class="[
currentStep === index
? 'border-blue-500 bg-blue-500 text-white'
@@ -255,7 +255,7 @@ onBeforeUnmount(() => {
</div>
<!-- 右侧按钮 -->
<div class="flex w-[200px] items-center justify-end gap-2">
<div class="flex w-48 items-center justify-end gap-2">
<Button
v-if="actionType === 'update'"
type="primary"
@@ -271,7 +271,7 @@ onBeforeUnmount(() => {
</div>
<!-- 主体内容 -->
<Card :body-style="{ padding: '10px' }" class="mb-4">
<div class="mt-[50px]">
<div class="mt-12">
<!-- 第一步：基本信息 -->
<div v-if="currentStep === 0" class="mx-auto w-4/6">
<BasicInfo v-model="formData" ref="basicInfoRef" />

44
apps/web-antd/src/views/ai/workflow/form/modules/workflow-design.vue
View File

@@ -4,6 +4,7 @@ import type { Ref } from 'vue';
import { inject, ref } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import { isNumber } from '@vben/utils';
import { Button, Input, Select } from 'ant-design-vue';
@@ -181,20 +182,20 @@ defineExpose({ validate });
</script>
<template>
<div class="relative h-[700px] w-[100%]">
<div class="relative h-[700px] w-full">
<Tinyflow
v-if="workflowData"
ref="tinyflowRef"
class-name="custom-class"
:style="{ width: '100%', height: '100%' }"
class="h-full w-full"
:data="workflowData"
:provider="provider"
/>
<div class="absolute right-[30px] top-[30px]">
<div class="absolute right-8 top-8">
<Button
@click="testWorkflowModel"
type="primary"
v-hasPermi="['ai:workflow:test']"
v-access:code="['ai:workflow:test']"
>
测试
</Button>
@@ -202,20 +203,18 @@ defineExpose({ validate });
<Drawer title="工作流测试">
<fieldset
class="min-inline-size-auto m-0 rounded-[6px] border border-[#dcdfe6] p-[12px_16px]"
class="min-inline-size-auto m-0 rounded-lg border border-gray-200 px-3 py-4"
>
<legend
class="ml-[8px] px-[10px] text-[16px] font-semibold text-[#303133]"
>
<legend class="ml-2 px-2.5 text-base font-semibold text-gray-600">
<h3>运行参数配置</h3>
</legend>
<div class="p-[8px]">
<div class="p-2">
<div
class="mb-[4px] flex items-center justify-around"
class="mb-1 flex items-center justify-around"
v-for="(param, index) in params4Test"
:key="index"
>
<Select class="w-[200px]" v-model="param.key" placeholder="参数名">
<Select class="w-48" v-model="param.key" placeholder="参数名">
<Select.Option
v-for="(value, key) in paramsOfStartNode"
:key="key"
@@ -226,45 +225,44 @@ defineExpose({ validate });
</Select.Option>
</Select>
<Input
class="mx-[8px] w-[200px]"
class="mx-2 w-48"
v-model:value="param.value"
placeholder="参数值"
/>
<Button danger plain circle @click="removeParam(index)">
<template #icon>
<span class="icon-[ant-design--delete-outlined]"></span>
<IconifyIcon icon="lucide:trash" />
</template>
</Button>
</div>
<Button type="primary" plain class="mt-[8px]" @click="addParam">
<Button type="primary" plain class="mt-2" @click="addParam">
添加参数
</Button>
</div>
</fieldset>
<fieldset
class="min-inline-size-auto m-0 mt-[8px] rounded-[6px] border border-[#dcdfe6] bg-[#f8f9fa] p-[12px_16px]"
class="m-0 mt-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-4"
>
<legend
class="ml-[8px] px-[10px] text-[16px] font-semibold text-[#303133]"
>
<legend class="ml-2 px-2.5 text-base font-semibold text-gray-600">
<h3>运行结果</h3>
</legend>
<div class="p-[8px]">
<div class="p-2">
<div v-if="loading" class="text-primary">执行中...</div>
<div v-else-if="error" class="text-danger">{{ error }}</div>
<pre
v-else-if="testResult"
class="max-h-[300px] overflow-auto whitespace-pre-wrap rounded-[4px] bg-white p-[12px] font-mono text-[14px] leading-[1.5]"
>{{ JSON.stringify(testResult, null, 2) }}
class="max-h-80 overflow-auto whitespace-pre-wrap rounded-lg bg-white p-3 font-mono text-sm leading-5"
>
{{ JSON.stringify(testResult, null, 2) }}
</pre>
<div v-else class="text-[#909399]">点击运行查看结果</div>
<div v-else class="text-gray-400">点击运行查看结果</div>
</div>
</fieldset>
<Button
size="large"
class="mt-[8px] w-[100%] bg-[#67c23a] text-white"
class="mt-2 w-full bg-green-500 text-white"
@click="goRun"
>
运行流程

22
apps/web-antd/src/views/ai/write/index/components/Left.vue
View File

@@ -3,6 +3,8 @@ import type { AiWriteApi } from '#/api/ai/write';
import { ref } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { createReusableTemplate } from '@vueuse/core';
import { Button, message, Textarea } from 'ant-design-vue';
@@ -121,8 +123,8 @@ function submit() {
<template>
<DefineTab v-slot="{ active, text, itemClick }">
<span
:class="active ? 'text-black shadow-md' : 'hover:bg-[#DDDFE3]'"
class="z-1 relative inline-block w-1/2 cursor-pointer rounded-full text-center leading-[30px] text-[5C6370] hover:text-black"
:class="active ? 'text-black shadow-md' : 'hover:bg-gray-200'"
class="relative z-10 inline-block w-1/2 cursor-pointer rounded-full text-center leading-7 text-gray-400 hover:text-black"
@click="itemClick"
>
{{ text }}
@@ -130,27 +132,27 @@ function submit() {
</DefineTab>
<!-- 定义 label 组件：长度/格式/语气/语言等 -->
<DefineLabel v-slot="{ label, hint, hintClick }">
<h3 class="mb-3 mt-5 flex items-center justify-between text-[14px]">
<h3 class="mb-3 mt-5 flex items-center justify-between text-sm">
<span>{{ label }}</span>
<span
v-if="hint"
class="flex cursor-pointer select-none items-center text-[12px] text-[#846af7]"
class="flex cursor-pointer select-none items-center text-xs text-purple-500"
@click="hintClick"
>
<span class="icon-[ant-design--question-circle-outlined]"> </span>
<IconifyIcon icon="lucide:circle-help" />
{{ hint }}
</span>
</h3>
</DefineLabel>
<div class="flex flex-col" v-bind="$attrs">
<div class="flex w-full justify-center bg-[#f5f7f9] pt-2">
<div class="z-10 w-[303px] rounded-full bg-[#DDDFE3] p-1">
<div class="flex w-full justify-center bg-gray-50 pt-2">
<div class="z-10 w-72 rounded-full bg-gray-200 p-1">
<div
:class="
selectedTab === AiWriteTypeEnum.REPLY &&
'after:translate-x-[100%] after:transform'
"
class="relative flex items-center after:absolute after:left-0 after:top-0 after:block after:h-[30px] after:w-1/2 after:rounded-full after:bg-white after:transition-transform after:content-['']"
class="relative flex items-center after:absolute after:left-0 after:top-0 after:block after:h-7 after:w-1/2 after:rounded-full after:bg-white after:transition-transform after:content-['']"
>
<ReuseTab
v-for="tab in tabs"
@@ -164,7 +166,7 @@ function submit() {
</div>
</div>
<div
class="box-border h-full w-[380px] flex-grow overflow-y-auto bg-[#f5f7f9] px-7 pb-2 lg:block"
class="box-border h-full w-96 flex-grow overflow-y-auto bg-gray-50 px-7 pb-2 lg:block"
>
<div>
<template v-if="selectedTab === 1">
@@ -233,7 +235,7 @@ function submit() {
</Button>
<Button
:loading="isWriting"
style="color: white; background-color: #846af7"
class="bg-purple-500 text-white"
@click="submit"
>
生成

11
apps/web-antd/src/views/ai/write/index/components/Right.vue
View File

@@ -1,6 +1,8 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { useClipboard } from '@vueuse/core';
import { Button, Card, message, Textarea } from 'ant-design-vue';
// 粘贴板
@@ -58,15 +60,14 @@ watch(copied, (val) => {
<span>预览</span>
<!-- 展示在右上角 -->
<Button
style="color: white; background-color: #846af7"
class="flex bg-purple-500 text-white"
v-show="showCopy"
@click="copyContent"
size="small"
class="flex"
>
<template #icon>
<div class="flex items-center justify-center">
<span class="icon-[ant-design--copy-twotone]"></span>
<IconifyIcon icon="lucide:copy" />
</div>
</template>
复制
@@ -83,13 +84,13 @@ watch(copied, (val) => {
<!-- 终止生成内容的按钮 -->
<Button
v-show="isWriting"
class="z-36 absolute bottom-2 left-1/2 flex -translate-x-1/2 sm:bottom-5"
class="absolute bottom-2 left-1/2 z-40 flex -translate-x-1/2 sm:bottom-5"
@click="emits('stopStream')"
size="small"
>
<template #icon>
<div class="flex items-center justify-center">
<span class="icon-[ant-design--stop-twotone]"></span>
<IconifyIcon icon="lucide:ban" />
</div>
</template>
终止生成

6
apps/web-antd/src/views/ai/write/index/components/Tag.vue
View File

@@ -17,12 +17,12 @@ const emits = defineEmits<{
</script>
<template>
<div class="flex flex-wrap gap-[8px]">
<div class="flex flex-wrap gap-2">
<span
v-for="tag in props.tags"
:key="tag.value"
class="tag mb-2 cursor-pointer rounded-[4px] border-[2px] border-solid border-[#DDDFE3] bg-[#DDDFE3] px-2 text-[12px] leading-6"
:class="modelValue === tag.value && '!border-[#846af7] text-[#846af7]'"
class="mb-2 cursor-pointer rounded border-2 border-solid border-gray-200 bg-gray-200 px-1 text-xs leading-6"
:class="modelValue === tag.value && '!border-purple-500 !text-purple-500'"
@click="emits('update:modelValue', tag.value)"
>
{{ tag.label }}