xingyy/chatgpt-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

s

Browse Source
This commit is contained in:
Phoenix 2024-02-06 14:46:56 +08:00
parent 19fb7e2bac
commit b7f46d1c22
5 changed files with 492 additions and 424 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

@ -1,7 +1,7 @@
# Glob API URL # Glob API URL
VITE_GLOB_API_URL=/api VITE_GLOB_API_URL=/api
VITE_APP_API_BASE_URL=https://erpapi.fontree.cn VITE_APP_API_BASE_URL=http://114.218.158.24:9020
https://erpapi.fontree.cn#正式 https://erpapi.fontree.cn#正式
http://114.218.158.24:9020#测试 http://114.218.158.24:9020#测试
# Whether long replies are supported, which may result in higher API fees # Whether long replies are supported, which may result in higher API fees

1
src/views/chat/components/Message/Text.vue
View File

@ -43,6 +43,7 @@ const wrapClass = computed(() => {
return [ return [
'text-wrap', 'text-wrap',
'min-w-[20px]', 'min-w-[20px]',
'min-h-[31px]',
'rounded-md', 'rounded-md',
isMobile.value ? 'p-2' : 'px-3 py-2', isMobile.value ? 'p-2' : 'px-3 py-2',
props.inversion ? 'bg-[#dfd7f3]' : 'bg-[#f4f6f8]', props.inversion ? 'bg-[#dfd7f3]' : 'bg-[#f4f6f8]',

13
src/views/chat/components/Message/index.vue
View File

@ -45,12 +45,7 @@ const options = computed(() => {
label: t('chat.copy'), label: t('chat.copy'),
key: 'copyText', key: 'copyText',
icon: iconRender({ icon: 'ri:file-copy-2-line' }), icon: iconRender({ icon: 'ri:file-copy-2-line' }),
}/* , }
{
label: t('common.delete'),
key: 'delete',
icon: iconRender({ icon: 'ri:delete-bin-line' }),
}, */
] ]
if (!props.inversion) { if (!props.inversion) {
@ -76,12 +71,6 @@ function handleSelect(key: 'copyText' | 'delete' | 'toggleRenderType') {
emit('delete') emit('delete')
} }
} }
/* function handleRegenerate() {
messageRef.value?.scrollIntoView()
emit('regenerate')
} */
async function handleCopy() { async function handleCopy() {
try { try {
await copyToClip(props.text || '') await copyToClip(props.text || '')

1
src/views/chat/hooks/useScroll.ts
View File

@ -12,7 +12,6 @@ interface ScrollReturn {
export function useScroll(): ScrollReturn { export function useScroll(): ScrollReturn {
const scrollRef = ref<ScrollElement>(null) const scrollRef = ref<ScrollElement>(null)
const scrollToBottom = async () => { const scrollToBottom = async () => {
await nextTick() await nextTick()
if (scrollRef.value) if (scrollRef.value)

295
src/views/chat/index.vue
View File

@ -1,36 +1,55 @@
<script setup > <script setup>
import {uploadFormData, uploadImg} from "@/api/api"; import {uploadFormData, uploadImg} from "@/api/api";
import {Local} from "@/utils/storage/storage"; import {Local} from "@/utils/storage/storage";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { computed, onMounted, onUnmounted, ref,watch } from 'vue' import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
import { useRoute } from 'vue-router' import {useRoute} from 'vue-router'
import { NAutoComplete, NButton, NInput, useDialog, useMessage } from 'naive-ui' import {NAutoComplete, NButton, NInput, useDialog, useMessage, NBackTop} from 'naive-ui'
import { AreaChartOutlined ,PlusOutlined } from '@ant-design/icons-vue'; import {AreaChartOutlined, PlusOutlined} from '@ant-design/icons-vue';
import html2canvas from 'html2canvas' import html2canvas from 'html2canvas'
import { Message } from './components' import {Message} from './components'
import { useScroll } from './hooks/useScroll' import {useScroll} from './hooks/useScroll'
import { useChat } from './hooks/useChat' import {useChat} from './hooks/useChat'
import { useUsingContext } from './hooks/useUsingContext' import {useUsingContext} from './hooks/useUsingContext'
import HeaderComponent from './components/Header/index.vue' import HeaderComponent from './components/Header/index.vue'
import { HoverButton, SvgIcon } from '@/components/common' import {HoverButton, SvgIcon} from '@/components/common'
import { useBasicLayout } from '@/hooks/useBasicLayout' import {useBasicLayout} from '@/hooks/useBasicLayout'
import { useChatStore, usePromptStore } from '@/store' import {useChatStore, usePromptStore} from '@/store'
import { fetchChatAPIProcess } from '@/api' import {fetchChatAPIProcess} from '@/api'
import { t } from '@/locales' import {t} from '@/locales'
import { UploadOutlined } from '@ant-design/icons-vue'; import {UploadOutlined} from '@ant-design/icons-vue';
import {storeToRefs} from 'pinia' import {storeToRefs} from 'pinia'
import { sessionDetailForSetup } from '@/store' import {sessionDetailForSetup} from '@/store'
const sessionDetailData=sessionDetailForSetup()
const sessionDetailData = sessionDetailForSetup()
let controller = new AbortController() let controller = new AbortController()
const { sessionDetail:dataSources ,currentListUuid,gptMode,isStop,isGPT4} = storeToRefs(sessionDetailData) const {
sessionDetail: dataSources,
currentListUuid,
gptMode,
isStop,
isGPT4
} = storeToRefs(sessionDetailData)
const dialog = useDialog() const dialog = useDialog()
const ms = useMessage() const ms = useMessage()
const chatStore = useChatStore() const chatStore = useChatStore()
const { isMobile } = useBasicLayout() const {isMobile} = useBasicLayout()
const { addChat, updateChat, updateChatSome, getChatByUuidAndIndex } = useChat() const {
const { scrollRef, scrollToBottom, scrollToBottomIfAtBottom } = useScroll() addChat,
const { usingContext, toggleUsingContext } = useUsingContext() updateChat,
updateChatSome,
getChatByUuidAndIndex
} = useChat()
const {
scrollRef,
scrollToBottom,
scrollToBottomIfAtBottom
} = useScroll()
const {
usingContext,
toggleUsingContext
} = useUsingContext()
const prompt = ref('') const prompt = ref('')
const loading = ref(false) const loading = ref(false)
const inputRef = ref(null) const inputRef = ref(null)
@ -39,35 +58,44 @@ const inputRef = ref(null)
const promptStore = usePromptStore() const promptStore = usePromptStore()
// 使用storeToRefs，保证store修改后，联想部分能够重新渲染 // 使用storeToRefs，保证store修改后，联想部分能够重新渲染
const { promptList: promptTemplate } = storeToRefs(promptStore) const {promptList: promptTemplate} = storeToRefs(promptStore)
// 未知原因刷新页面，loading 状态不会重置，手动重置 // 未知原因刷新页面，loading 状态不会重置，手动重置
dataSources.value.forEach((item, index) => { dataSources.value.forEach((item, index) => {
if (item.loading) if (item.loading) {
updateChatSome(+uuid, index, { loading: false }) updateChatSome(+uuid, index, {loading: false})
}
}) })
function handleSubmit() { function handleSubmit() {
dataSources.value.push({ dataSources.value.push({
dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'), dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
text: prompt.value, text: prompt.value,
inversion: true, inversion: true,
error: false, error: false,
fileList:fileList.value.map(x=>x.url), fileList: fileList.value.map(x => x.url),
loading:false loading: false
}) })
sendDataStream() sendDataStream()
} }
const API_URL = `${import.meta.env.VITE_APP_API_BASE_URL}/chat/completion`; const API_URL = `${import.meta.env.VITE_APP_API_BASE_URL}/chat/completion`;
const createParams = () => { const createParams = () => {
const messages = dataSources.value.map((x) => { const messages = dataSources.value.map((x) => {
return { return {
content:(()=>{ content: (() => {
if (gptMode.value==='gpt-4-vision-preview'){ if (gptMode.value === 'gpt-4-vision-preview') {
return [{type: "text", text: x.text},...x.fileList.map((y)=>{ return [{
return {type: "image_url", image_url:y} type: "text",
text: x.text
}, ...x.fileList.map((y) => {
return {
type: "image_url",
image_url: y
}
})] })]
}else { } else {
return x.text return x.text
} }
})(), })(),
@ -75,7 +103,7 @@ const createParams = () => {
} }
}); });
return { return {
type:isFile.value?'custom':'', type: isFile.value ? 'custom' : '',
listUuid: currentListUuid.value, listUuid: currentListUuid.value,
messages, messages,
frequency_penalty: 0, frequency_penalty: 0,
@ -88,49 +116,51 @@ const createParams = () => {
}; };
}; };
const handleResponseStream = async (reader) => { const handleResponseStream = async (reader) => {
const { done, value } = await reader.read(); const {
done,
value
} = await reader.read();
if (!done) { if (!done) {
let decoded = new TextDecoder().decode(value); let decoded = new TextDecoder().decode(value);
let decodedArray = decoded.split("data: "); let decodedArray = decoded.split("data: ");
decodedArray.forEach((decoded) => { for (const decoded of decodedArray) {
if (decoded !== "") { if (decoded !== "") {
if (decoded.trim() === "[DONE]") { if (decoded.trim() === "[DONE]") {
dataSources.value[dataSources.value.length - 1].loading=false dataSources.value[dataSources.value.length - 1].loading = false
loading.value=false loading.value = false
return;
} else { } else {
if (isStop.value){ if (isStop.value) {
loading.value=false dataSources.value[dataSources.value.length - 1].loading = false
loading.value = false
return; return;
} }
loading.value=true loading.value = true
dataSources.value[dataSources.value.length - 1].loading=true dataSources.value[dataSources.value.length - 1].loading = true
const response = JSON.parse(decoded).choices[0].delta.content const response = JSON.parse(decoded).choices[0].delta.content
? JSON.parse(decoded).choices[0].delta.content ? JSON.parse(decoded).choices[0].delta.content
: ""; : "";
dataSources.value[dataSources.value.length - 1].text += response; dataSources.value[dataSources.value.length - 1].text += response;
} }
} }
}); }
await handleResponseStream(reader); await handleResponseStream(reader);
} }
}; };
const sendDataStream = async () => { const sendDataStream = async () => {
const params = createParams(); const params = createParams();
fileList.value=[] fileList.value = []
prompt.value='' prompt.value = ''
isStop.value=false isStop.value = false
dataSources.value.push({ dataSources.value.push({
dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'), dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
text: '思考中..', text: '思考中..',
inversion: false, inversion: false,
error: false, error: false,
loading:true loading: true
}); });
visible.value=false visible.value = false
try { try {
loading.value=true loading.value = true
const response = await fetch(API_URL, { const response = await fetch(API_URL, {
method: "POST", method: "POST",
timeout: 10000, timeout: 10000,
@ -145,16 +175,18 @@ const sendDataStream = async () => {
const contentType = response.headers.get('Content-Type'); const contentType = response.headers.get('Content-Type');
if (!contentType || !contentType.includes('application/json')) { if (!contentType || !contentType.includes('application/json')) {
const reader = response.body.getReader(); const reader = response.body.getReader();
dataSources.value[dataSources.value.length-1].text='' dataSources.value[dataSources.value.length - 1].text = ''
await handleResponseStream(reader); await handleResponseStream(reader);
} }
} catch (error) { } catch (error) {
console.error('发生错误:', error); console.error('发生错误:', error);
} }
}; };
function handleExport() { function handleExport() {
if (loading.value) if (loading.value) {
return return
}
const d = dialog.warning({ const d = dialog.warning({
title: t('chat.exportImage'), title: t('chat.exportImage'),
@ -173,8 +205,9 @@ function handleExport() {
tempLink.style.display = 'none' tempLink.style.display = 'none'
tempLink.href = imgUrl tempLink.href = imgUrl
tempLink.setAttribute('download', 'chat-shot.png') tempLink.setAttribute('download', 'chat-shot.png')
if (typeof tempLink.download === 'undefined') if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank') tempLink.setAttribute('target', '_blank')
}
document.body.appendChild(tempLink) document.body.appendChild(tempLink)
tempLink.click() tempLink.click()
@ -183,11 +216,9 @@ function handleExport() {
d.loading = false d.loading = false
ms.success(t('chat.exportSuccess')) ms.success(t('chat.exportSuccess'))
Promise.resolve() Promise.resolve()
} } catch (error) {
catch (error) {
ms.error(t('chat.exportFailed')) ms.error(t('chat.exportFailed'))
} } finally {
finally {
d.loading = false d.loading = false
} }
}, },
@ -195,8 +226,9 @@ function handleExport() {
} }
function handleDelete(index) { function handleDelete(index) {
if (loading.value) if (loading.value) {
return return
}
dialog.warning({ dialog.warning({
title: t('chat.deleteMessage'), title: t('chat.deleteMessage'),
@ -210,8 +242,9 @@ function handleDelete(index) {
} }
function handleClear() { function handleClear() {
if (loading.value) if (loading.value) {
return return
}
dialog.warning({ dialog.warning({
title: t('chat.clearChat'), title: t('chat.clearChat'),
@ -230,18 +263,18 @@ function handleEnter(event) {
event.preventDefault() event.preventDefault()
handleSubmit() handleSubmit()
} }
} } else {
else {
if (event.key === 'Enter' && event.ctrlKey) { if (event.key === 'Enter' && event.ctrlKey) {
event.preventDefault() event.preventDefault()
handleSubmit() handleSubmit()
} }
} }
} }
function handleStop() {
function handleStop(item) {
if (loading.value) { if (loading.value) {
loading.value = false loading.value = false
isStop.value=true isStop.value = true
} }
} }
@ -256,8 +289,7 @@ const searchOptions = computed(() => {
value: obj.value, value: obj.value,
} }
}) })
} } else {
else {
return [] return []
} }
}) })
@ -265,15 +297,17 @@ const searchOptions = computed(() => {
// value反渲染key // value反渲染key
const renderOption = (option) => { const renderOption = (option) => {
for (const i of promptTemplate.value) { for (const i of promptTemplate.value) {
if (i.value === option.label) if (i.value === option.label) {
return [i.key] return [i.key]
} }
}
return [] return []
} }
const placeholder = computed(() => { const placeholder = computed(() => {
if (isMobile.value) if (isMobile.value) {
return t('chat.placeholderMobile') return t('chat.placeholderMobile')
}
return t('chat.placeholder') return t('chat.placeholder')
}) })
@ -283,23 +317,26 @@ const buttonDisabled = computed(() => {
const footerClass = computed(() => { const footerClass = computed(() => {
let classes = ['p-4'] let classes = ['p-4']
if (isMobile.value) if (isMobile.value) {
classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden'] classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden']
}
return classes return classes
}) })
onMounted(() => { onMounted(() => {
scrollToBottom() scrollToBottom()
if (inputRef.value && !isMobile.value) if (inputRef.value && !isMobile.value) {
inputRef.value?.focus() inputRef.value?.focus()
}
}) })
const fileList = ref([ const fileList = ref([]);
]);
onUnmounted(() => { onUnmounted(() => {
if (loading.value) if (loading.value) {
controller.abort() controller.abort()
}
}) })
function getBase64(file) { function getBase64(file) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const reader = new FileReader(); const reader = new FileReader();
@ -308,6 +345,7 @@ function getBase64(file) {
reader.onerror = error => reject(error); reader.onerror = error => reject(error);
}); });
} }
const previewVisible = ref(false); const previewVisible = ref(false);
const previewImage = ref(''); const previewImage = ref('');
const previewTitle = ref(''); const previewTitle = ref('');
@ -324,25 +362,25 @@ const handlePreview = async (file) => {
previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1); previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
}; };
const value = ref('gpt-3.5-turbo'); const value = ref('gpt-3.5-turbo');
const visible=ref(false) const visible = ref(false)
const removeImg=(data)=>{ const removeImg = (data) => {
fileList.value.splice(fileList.value.findIndex(x=>x.url===data.url),1) fileList.value.splice(fileList.value.findIndex(x => x.url === data.url), 1)
} }
watch(gptMode,()=>{ watch(gptMode, () => {
currentListUuid.value='' currentListUuid.value = ''
dataSources.value=[] dataSources.value = []
}) })
const visible1=ref(false) const visible1 = ref(false)
const fileList1=ref([]) const fileList1 = ref([])
const isFile=ref(false) const isFile = ref(false)
const upItemImage1= async (file)=>{ const upItemImage1 = async (file) => {
const data = { const data = {
file: file.file, file: file.file,
} }
const res=await uploadFormData(data) const res = await uploadFormData(data)
if (res.code===0){ if (res.code === 0) {
file.onSuccess() file.onSuccess()
dataSources.value=[...dataSources.value,...res.data.paragraph.flatMap(n=>[n,'']).map((x)=>{ dataSources.value = [...dataSources.value, ...res.data.paragraph.flatMap(n => [n, '']).map((x) => {
return { return {
dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'), dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
text: x, text: x,
@ -350,19 +388,22 @@ if (res.code===0){
error: false, error: false,
} }
})] })]
isFile.value=true isFile.value = true
fileList1.value=[] fileList1.value = []
visible1.value=false visible1.value = false
sendDataStream() sendDataStream()
} }
} }
const customRequest=async (file)=>{ const customRequest = async (file) => {
const res=await uploadImg({file:file.file,source:'approval'}) const res = await uploadImg({
if (res.code===0){ file: file.file,
source: 'approval'
})
if (res.code === 0) {
file.onSuccess() file.onSuccess()
fileList.value.push({ fileList.value.push({
url:res.data.ori_url url: res.data.ori_url
}) })
} }
} }
@ -376,7 +417,25 @@ const customRequest=async (file)=>{
@handle-clear="handleClear" @handle-clear="handleClear"
/> />
<main class="flex-1 overflow-hidden"> <main class="flex-1 overflow-hidden">
<div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto" > <div class="shortcut-arrow">
<div class="top">
<n-button @click="scrollToBottom" type="primary" dashed circle>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
d="M244 400L100 256l144-144"
></path>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48"
d="M120 256h292"
></path>
</svg>
</template>
</n-button>
</div>
</div>
<div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
<div <div
id="image-wrapper" id="image-wrapper"
class="w-full max-w-screen-xl m-auto dark:bg-[#101014]" class="w-full max-w-screen-xl m-auto dark:bg-[#101014]"
@ -385,14 +444,14 @@ const customRequest=async (file)=>{
> >
<template v-if="!dataSources.length"> <template v-if="!dataSources.length">
<div class="flex items-center justify-center mt-4 text-center text-neutral-300"> <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
<SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" /> <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl"/>
<span>当前没有会话哦</span> <span>当前没有会话哦</span>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div> <div>
<Message <Message
v-for="(item, index) of dataSources.filter(x=>x.text||x.fileList?.length>0)" v-for="(item, index) of dataSources"
:key="index" :key="index"
:date-time="item.dateTime" :date-time="item.dateTime"
:text="item.text" :text="item.text"
@ -403,9 +462,9 @@ const customRequest=async (file)=>{
@delete="handleDelete(index)" @delete="handleDelete(index)"
/> />
<div class="sticky bottom-0 left-0 flex justify-center"> <div class="sticky bottom-0 left-0 flex justify-center">
<NButton v-if="loading" type="warning" @click="handleStop"> <NButton v-if="loading" type="warning" @click="handleStop(item)">
<template #icon> <template #icon>
<SvgIcon icon="ri:stop-circle-line" /> <SvgIcon icon="ri:stop-circle-line"/>
</template> </template>
停止响应 停止响应
</NButton> </NButton>
@ -435,8 +494,10 @@ const customRequest=async (file)=>{
</div> </div>
</template> </template>
<HoverButton @click="visible1=!visible1"> <HoverButton @click="visible1=!visible1">
<span class="text-xl text-[#4f555e] dark:text-white" style="display: flex;justify-content: center;align-items: center"> <span class="text-xl text-[#4f555e] dark:text-white"
<SvgIcon icon="ri:upload-2-line" /> style="display: flex;justify-content: center;align-items: center"
>
<SvgIcon icon="ri:upload-2-line"/>
</span> </span>
</HoverButton> </HoverButton>
</a-popover> </a-popover>
@ -451,32 +512,34 @@ const customRequest=async (file)=>{
@remove="removeImg" @remove="removeImg"
> >
<div> <div>
<plus-outlined /> <plus-outlined/>
<div style="margin-top: 8px">上传</div> <div style="margin-top: 8px">上传</div>
</div> </div>
</a-upload> </a-upload>
<a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel"> <a-modal :open="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
<img alt="example" style="width: 100%" :src="previewImage" /> <img alt="example" style="width: 100%" :src="previewImage"/>
</a-modal> </a-modal>
</div> </div>
</template> </template>
<HoverButton @click="visible=!visible"> <HoverButton @click="visible=!visible">
<span class="text-xl text-[#4f555e] dark:text-white" style="display: flex;justify-content: center;align-items: center"> <span class="text-xl text-[#4f555e] dark:text-white"
<AreaChartOutlined /> style="display: flex;justify-content: center;align-items: center"
>
<AreaChartOutlined/>
</span> </span>
</HoverButton> </HoverButton>
</a-popover> </a-popover>
<!-- <HoverButton v-if="!isMobile" @click="handleClear"> <!-- <HoverButton v-if="!isMobile" @click="handleClear">
<span class="text-xl text-[#4f555e] dark:text-white"> <span class="text-xl text-[#4f555e] dark:text-white">
<SvgIcon icon="ri:delete-bin-line" /> <SvgIcon icon="ri:delete-bin-line" />
</span> </span>
</HoverButton>--> </HoverButton>-->
<HoverButton v-if="!isMobile" @click="handleExport"> <HoverButton v-if="!isMobile" @click="handleExport">
<span class="text-xl text-[#4f555e] dark:text-white"> <span class="text-xl text-[#4f555e] dark:text-white">
<SvgIcon icon="ri:download-2-line" /> <SvgIcon icon="ri:download-2-line"/>
</span> </span>
</HoverButton> </HoverButton>
<!-- <HoverButton @click="toggleUsingContext"> <!-- <HoverButton @click="toggleUsingContext">
<span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }"> <span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
<SvgIcon icon="ri:chat-history-line" /> <SvgIcon icon="ri:chat-history-line" />
</span> </span>
@ -499,7 +562,7 @@ const customRequest=async (file)=>{
<NButton color="#8a2be2" type="primary" :disabled="buttonDisabled" @click="handleSubmit"> <NButton color="#8a2be2" type="primary" :disabled="buttonDisabled" @click="handleSubmit">
<template #icon> <template #icon>
<span class="dark:text-black"> <span class="dark:text-black">
<SvgIcon icon="ri:send-plane-fill" /> <SvgIcon icon="ri:send-plane-fill"/>
</span> </span>
</template> </template>
</NButton> </NButton>
@ -508,3 +571,19 @@ const customRequest=async (file)=>{
</footer> </footer>
</div> </div>
</template> </template>
<style lang="scss" scoped>
.shortcut-arrow {
width: min-content;
height: min-content;
position: absolute;
z-index: 10;
left: 50%;
bottom: 90px;
.top {
transform: rotate(270deg) translateX(-50%);
width: min-content;
height: min-content;
}
}
</style>