细节优化

package.json

@@ -56,6 +56,7 @@
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-link-attributes": "^3.0.1",
     "@types/node": "^18.14.6",
+    "@vicons/ionicons5": "^0.12.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.13",
     "axios": "^1.3.4",

src/store/modules/session/index.js

@@ -61,7 +61,7 @@ const currentListUuid=ref('')
 	const deleteSession =async () => {
 	const res=await	postRequest('/chat/del', {listUuid:currentListUuid.value})
 		if (res.code === 0) {
-			getDataList()
+			//getDataList()
 		}
 	}
 	return { sessionDetail,currentListUuid ,gptMode,getDataList,dataList,getSessionDetail,createSessionStore,deleteSession,isStop,isGPT4,loading};

src/views/chat/index.vue

@@ -4,11 +4,12 @@ import {Local} from "@/utils/storage/storage";
 import dayjs from "dayjs";
 import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
 import {useRoute} from 'vue-router'
-import {NAutoComplete, NButton, NInput, useDialog, useMessage, NBackTop} from 'naive-ui'
+import {NAutoComplete, NButton, NInput, useDialog, useMessage, NBackTop,NIcon} from 'naive-ui'
 import {AreaChartOutlined, PlusOutlined} from '@ant-design/icons-vue';
 import html2canvas from 'html2canvas'
 import {Message} from './components'
 import {useScroll} from './hooks/useScroll'
+import { FlashOutline } from '@vicons/ionicons5'
 import {useChat} from './hooks/useChat'
 import {useUsingContext} from './hooks/useUsingContext'
 import HeaderComponent from './components/Header/index.vue'
@@ -71,6 +72,7 @@ function handleSubmit() {
   if (loading.value){
     handleStop()
   }else {
+      loading.value = true
     dataSources.value.push({
       dateTime: dayjs().format('YYYY/MM/DD HH:mm:ss'),
       text: prompt.value?.trim(),
@@ -140,7 +142,7 @@ const handleResponseStream = async (reader) => {
 			if (decoded !== "") {
 				if (decoded.trim() === "[DONE]") {
 					dataSources.value[dataSources.value.length - 1].loading = false
-					loading.value = false
+            loading.value = false
 				} else {
 					if (isStop.value) {
 						dataSources.value[dataSources.value.length - 1].loading = false
@@ -512,7 +514,7 @@ const customRequest = async (file) => {
 		</main>
 		<footer :class="footerClass">
 			<div class="w-full max-w-screen-xl m-auto">
-				<div class="flex items-center justify-between space-x-2" style="flex-wrap: initial">
+				<div class="flex items-center justify-center space-x-2" style="flex-wrap: initial">
 					<a-popover :open="visible1" trigger="click">
 						<template #content>
 							<div class="clearfix">
@@ -570,33 +572,48 @@ const customRequest = async (file) => {
 												<SvgIcon icon="ri:delete-bin-line" />
 											</span>
 										</HoverButton>-->
-					<HoverButton v-if="!isMobile" @click="handleExport">
+<!--					<HoverButton v-if="!isMobile" @click="handleExport">
             <span class="text-xl text-[#4f555e] dark:text-white">
               <SvgIcon icon="ri:download-2-line"/>
             </span>
-					</HoverButton>
+					</HoverButton>-->
 					<!--          <HoverButton @click="toggleUsingContext">
 											<span class="text-xl" :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }">
 												<SvgIcon icon="ri:chat-history-line" />
 											</span>
 										</HoverButton>-->
-					<NAutoComplete v-model:value="prompt" :options="searchOptions" :render-label="renderOption">
+<!--					<NAutoComplete v-model:value="prompt" :options="searchOptions" :render-label="renderOption">
 						<template #default="{ handleInput, handleBlur, handleFocus }">
-							<NInput
+
-								ref="inputRef"
+
-								v-model:value="prompt"
-								type="textarea"
-								:placeholder="placeholder"
-								:autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
-								@input="handleInput"
-								@focus="handleFocus"
-								@blur="handleBlur"
-								@keypress="handleEnter"
-							/>
 						</template>
-					</NAutoComplete>
+
-					<NButton color="#8a2be2" type="primary" :disabled="buttonDisabled"  @click="handleSubmit">
+					</NAutoComplete>-->
-						<template #icon>
+<!--		          <NInput
+            ref="inputRef"
+            v-model:value="prompt"
+            type="textarea"
+            size="large"
+            :placeholder="placeholder"
+            :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
+            @input="handleInput"
+            @focus="handleFocus"
+            @blur="handleBlur"
+            @keypress="handleEnter"
+          />			-->
+          <NInput
+              style="width:75%"
+            ref="inputRef"
+            v-model:value="prompt"
+            type="textarea"
+            size="large"
+            :placeholder="placeholder"
+            :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
+            @keypress="handleEnter"
+					>
+					</NInput>
+          <NButton color="#8a2be2" type="primary" size="large" :disabled="buttonDisabled"  @click="handleSubmit">
+            <template #icon>
               <span class="dark:text-black" v-if="!loading">
                 <SvgIcon  icon="ri:send-plane-fill"/>
               </span>
@@ -604,8 +621,8 @@ const customRequest = async (file) => {
               <span class="dark:text-black" v-if="loading">
                      <svg style="width:100%;height:100%;" xmlns="http://www.w3.org/2000/svg" :style="{color:currentColor}" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 12 12"><g fill="none"><path d="M5 4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5zm6 2A5 5 0 1 1 1 6a5 5 0 0 1 10 0zm-1 0a4 4 0 1 0-8 0a4 4 0 0 0 8 0z" fill="currentColor"></path></g></svg>
               </span>
-						</template>
+            </template>
-					</NButton>
+          </NButton>
 				</div>
 			</div>
 		</footer>

src/views/chat/layout/sider/List.vue

@@ -1,8 +1,8 @@
 <script setup >
 import {storeToRefs} from "pinia";
-import {computed, ref} from 'vue'
+import {computed, ref,nextTick} from 'vue'
 import dayjs from "dayjs";
-import { NInput, NPopconfirm, NScrollbar } from 'naive-ui'
+import { NInput, NPopconfirm, NScrollbar,NButton } from 'naive-ui'
 import { SvgIcon } from '@/components/common'
 import { useAppStore, useChatStore } from '@/store'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
@@ -26,9 +26,16 @@ function handleEdit({ listUuid }) {
   })
   item.isEdit=true
 }
-const handleDeleteDebounce = ()=>{
+const handleDeleteDebounce = (item)=>{
-sessionDetailData.deleteSession()
+	show.value=false
-  sessionDetail.value=[]
+setTimeout(async ()=>{
+await	sessionDetailData.deleteSession()
+	const index= dataList.value.findIndex((x) => x.listUuid === item.listUuid)
+	if (index!==-1){
+		dataList.value.splice(index, 1)
+	}
+	sessionDetail.value=[]
+},200)
 }
 function handleEnter({ listUuid }, isEdit, event) {
   event?.stopPropagation()
@@ -38,12 +45,12 @@ function handleEnter({ listUuid }, isEdit, event) {
 function isActive(listUuid) {
   return currentListUuid.value === listUuid
 }
-
+const show=ref(false)
 </script>
 
 <template>
   <NScrollbar class="px-4">
-    <div class="flex flex-col gap-2 text-sm">
+    <div class="flex flex-col gap-2 text-sm mb-1">
       <template v-if="!dataList.length">
         <div class="flex flex-col items-center mt-4 text-center text-neutral-300">
           <SvgIcon icon="ri:inbox-line" class="mb-2 text-3xl" />
@@ -75,18 +82,23 @@ function isActive(listUuid) {
                 </button>
               </template>
               <template v-else>
-<!--                <button class="p-1">
-                  <SvgIcon icon="ri:edit-line" @click.stop="handleEdit(item, true, $event)" />
-                </button>-->
 
-                <NPopconfirm placement="bottom" @positive-click.stop="handleDeleteDebounce(index, $event)">
+								<NPopconfirm v-model:show="show">
-                  <template #trigger>
+									<template #trigger>
-                    <button class="p-1">
+										<button class="p-1">
-                      <SvgIcon icon="ri:delete-bin-line" />
+											<SvgIcon icon="ri:delete-bin-line" />
-                    </button>
+										</button>
-                  </template>
+									</template>
-                  是否删除此记录？
+									<template #action>
-                </NPopconfirm>
+										<NButton size="small" @click="show = false">
+											取消
+										</NButton>
+										<NButton size="small" type="primary" @click="handleDeleteDebounce(item)">
+											确认
+										</NButton>
+									</template>
+									是否删除此记录？
+								</NPopconfirm>
               </template>
             </div>
           </a>

src/views/chat/layout/sider/index.vue

@@ -136,7 +136,7 @@ watch(
 						<n-select v-model:value="gptMode" :options="options()"/>
 					</div>
 				</div>
-				<div class="flex-1 min-h-0 pb-4 overflow-hidden">
+				<div class="flex-1 min-h-0 pb-3 overflow-hidden">
 					<List/>
 				</div>
 				<!--        <div class="flex items-center p-4 space-x-4">