调整部分ui

chat/src/layout/components/Login/Email.vue

@@ -230,10 +230,6 @@ onMounted(() => {
           <NInput v-model:value="loginForm.password" placeholder="请输入您的账户密码" type="password" :maxlength="30" show-password-on="click" tabindex="0" @keyup.enter="handlerSubmit" />
         </NFormItem>
       </Motion>
-      <div style="color:red">
-        老用户密码统一重置为112233<br>
-        登录后请自行修改密码
-      </div>
       <NFormItem>
         <NButton
           block

chat/src/layout/siderBar/index.vue

@@ -180,7 +180,7 @@ watch(
 
 <template>
   <div
-    class="flex min-w-[80px] bg-[#e8eaf1] pb-2 dark:bg-[#25272d] dark:border-[#3a3a40] border-#efeff5-800"
+    class="flex min-w-[70px] bg-[#e8eaf1] pb-2 dark:bg-[#25272d] dark:border-[#3a3a40] border-#efeff5-800"
     :class="getMobileLayoutClass"
     :style="mobileSafeArea"
   >
@@ -199,7 +199,7 @@ watch(
             v-for="item in menuList"
             :key="item.menuName"
             class="flex justify-center flex-col items-center"
-            :class="isMobile ? 'mt-0' : 'mt-3'"
+            :class="isMobile ? 'mt-0' : 'mt-2'"
             @click="handleClickMenu(item)"
           >
             <NTooltip
@@ -209,7 +209,7 @@ watch(
             >
               <template #trigger>
                 <div
-                  class="h-12 w-12 cursor-pointer bg-white dark:bg-[#34373c] rounded-lg duration-300 flex justify-center items-center"
+                  class="h-10 w-10 cursor-pointer bg-white dark:bg-[#34373c] rounded-lg duration-300 flex justify-center items-center"
                   :class="[
                     isActive(item)
                       ? 'borderRadis shadow-[#3076fd] btns'

chat/src/styles/global.less

@@ -4,8 +4,8 @@ body,
 	height: 100%;
 }
 
-*{
+* {
-  font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif;
+	font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif;
 }
 
 body {
@@ -13,51 +13,52 @@ body {
 	padding-bottom: env(safe-area-inset-bottom);
 }
 
-
+img {
-
+	transition: transform 0.3s;
+}
+img:hover {
+	transform: scale(1.1);
+}
 
 * :focus {
 	outline: none;
 }
 
-.tem{
+.tem {
 	// .n-slider .n-slider-rail{
 	// 	width: 4px !important;
 	// }
 
-	.n-slider-rail__fill{
+	.n-slider-rail__fill {
 		width: 4px;
 	}
 
-	.n-slider.n-slider--vertical .n-slider-rail .n-slider-rail__fill{
+	.n-slider.n-slider--vertical .n-slider-rail .n-slider-rail__fill {
 		left: -2px;
 	}
-
 }
 ::selection {
 	color: #fff;
 	background: #798aae;
-	}
+}
 
-
+.ele-drag {
-.ele-drag{
 	-webkit-app-region: drag;
 	// background-color: red;
 }
 
-
 // 自动移滚动条样式
-::-webkit-scrollbar{
+::-webkit-scrollbar {
-  width: 3px;
+	width: 3px;
-  height: 3px;
+	height: 3px;
 }
 // 滑块部分
-::-webkit-scrollbar-thumb{
+::-webkit-scrollbar-thumb {
-  border-radius: 1em;
+	border-radius: 1em;
-  background-color: rgba(50,50,50,.3);
+	background-color: rgba(50, 50, 50, 0.3);
 }
 // 辊道部分
-::-webkit-scrollbar-track{
+::-webkit-scrollbar-track {
-  border-radius: 1em;
+	border-radius: 1em;
-  background-color: rgba(50,50,50,.1);
+	background-color: rgba(50, 50, 50, 0.1);
 }

chat/src/views/chat/chatBase.vue

@@ -534,7 +534,7 @@ async function onConversation(msg?: string) {
               dataSources.value.length === 2 &&
               !activeGroupInfo?.value?.appId
             ) {
-              const lengthStr = isMobile.value ? 10 : 20
+              const lengthStr = isMobile.value ? 15 : 20
               const title =
                 dataSources.value[1].text.length > lengthStr
                   ? dataSources.value[1].text.slice(0, lengthStr)

chat/src/views/chat/components/Header/index.vue

@@ -120,9 +120,9 @@ function handleSignIn() {
     class="sticky top-0 left-0 right-0 z-30 border-b dark:border-neutral-800 bg-white/80 dark:bg-black/20 backdrop-blur"
   >
     <div
-      class="relative flex items-center justify-center min-w-0 overflow-hidden h-14"
+      class="relative flex items-center justify-center min-w-0 overflow-hidden h-12"
     >
-      <div class="max-w-screen-4xl flex w-full h-full items-center px-4">
+      <div class="max-w-screen-4xl flex w-full h-full items-center px-2">
         <div v-if="isMobile" class="flex items-center">
           <button
             class="flex items-center justify-center w-11 h-11"
@@ -138,10 +138,13 @@ function handleSignIn() {
         </div>
 
         <!-- pc -->
-        <div class="flex justify-between items-center h-full w-full">
+        <div
-          <div class="flex-1 flex ele-drag items-center h-full">
+          class="flex justify-between items-center h-full w-full"
+          :class="[isMobile ? 'title-wrapper' : '']"
+        >
+          <div class="flex ele-drag items-center h-full over-hidden">
             <h1
-              class="flex-1 px-4 font-bold pr-6 overflow-hidden cursor-pointer select-none text-ellipsis whitespace-nowrap"
+              class="font-bold overflow-hidden cursor-pointer select-none text-ellipsis whitespace-nowrap px-2 pr-2"
               @dblclick="onScrollToTop"
             >
               {{ currentChatHistory?.title ?? '' }}
@@ -268,3 +271,13 @@ function handleSignIn() {
     </NPopover> -->
   </header>
 </template>
+
+<style scoped>
+.title-wrapper {
+  width: calc(100% - 44px);
+}
+.over-hidden {
+  width: 100%;
+  overflow: hidden;
+}
+</style>

chat/src/views/chat/components/Message/Text.vue

@@ -307,7 +307,7 @@ defineExpose({ textRef })
 }
 
 .header-1 {
-  background-color: #f1f3f8 !important;
+  background-color: #fff !important;
   border-bottom: 1px solid #e3e8f7 !important;
   height: 30px !important;
   position: absolute !important;

chat/src/views/chat/components/Message/index.vue

@@ -121,7 +121,7 @@ function handleRegenerate() {
       </p>
       <div
         class="flex items-end gap-1 mt-2"
-        :class="[inversion ? 'flex-row-reverse' : 'flex-row']"
+        :class="[inversion ? 'flex-row-reverse' : 'flex-row',inversion ? 'pl-5' : 'pr-5']"
       >
         <TextComponent
           ref="textRef"

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

@@ -2,12 +2,24 @@
 import type { CSSProperties } from 'vue'
 import { computed, nextTick, ref, watch } from 'vue'
 import type { NumberAnimationInst } from 'naive-ui'
-import { NButton, NInput, NLayoutSider, NNumberAnimation, useDialog, useMessage } from 'naive-ui'
+import {
+  NButton,
+  NInput,
+  NLayoutSider,
+  NNumberAnimation,
+  useDialog,
+  useMessage,
+} from 'naive-ui'
 import { useRouter } from 'vue-router'
 import List from './List.vue'
 import { SvgIcon } from '@/components/common'
 
-import { useAppStore, useAuthStore, useChatStore, useGlobalStoreWithOut } from '@/store'
+import {
+  useAppStore,
+  useAuthStore,
+  useChatStore,
+  useGlobalStoreWithOut,
+} from '@/store'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 const useGlobalStore = useGlobalStoreWithOut()
 
@@ -22,7 +34,9 @@ const userBalance = computed(() => authStore.userBalance)
 const dialog = useDialog()
 
 /* 当前选用的模型的扣费类型 1: 普通 2： 高级  */
-const activeModelKeyDeductType = computed(() => chatStore?.activeModelKeyDeductType)
+const activeModelKeyDeductType = computed(
+  () => chatStore?.activeModelKeyDeductType
+)
 const activeModelKeyPrice = computed(() => chatStore?.activeModelKeyPrice)
 
 const oldUse3Token = ref(0)
@@ -32,22 +46,30 @@ const newUse4Token = ref(0)
 
 const isSearch = ref(false)
 const searchRef = ref(null)
-watch(() => authStore.userBalance.useModel3Token, (newVal, oldVal) => {
+watch(
-  oldUse3Token.value = oldVal || 0
+  () => authStore.userBalance.useModel3Token,
-  newUse3Token.value = newVal || 0
+  (newVal, oldVal) => {
-  model3AnimationInstRef.value?.play()
+    oldUse3Token.value = oldVal || 0
-}, {
+    newUse3Token.value = newVal || 0
-  immediate: true,
+    model3AnimationInstRef.value?.play()
-  flush: 'post',
+  },
-})
+  {
-watch(() => authStore.userBalance.useModel4Token, (newVal, oldVal) => {
+    immediate: true,
-  oldUse4Token.value = oldVal || 0
+    flush: 'post',
-  newUse4Token.value = newVal || 0
+  }
-  model4AnimationInstRef.value?.play()
+)
-}, {
+watch(
-  immediate: true,
+  () => authStore.userBalance.useModel4Token,
-  flush: 'post',
+  (newVal, oldVal) => {
-})
+    oldUse4Token.value = oldVal || 0
+    newUse4Token.value = newVal || 0
+    model4AnimationInstRef.value?.play()
+  },
+  {
+    immediate: true,
+    flush: 'post',
+  }
+)
 
 const { isMobile } = useBasicLayout()
 const addLoading = ref(false)
@@ -55,9 +77,10 @@ const addLoading = ref(false)
 const collapsed = computed(() => appStore.siderCollapsed)
 const groupKeyWord = ref('')
 
-function handleInputGroupSearch(val: string) {
+function handleInputGroupSearch(event: { target: { value: any } }) {
-  groupKeyWord.value = val
+  const val = event.target.value;
-  chatStore.setGroupKeyWord(val)
+  groupKeyWord.value = val;
+  chatStore.setGroupKeyWord(val);
 }
 
 function handleBlurInput() {
@@ -76,10 +99,8 @@ async function handleAdd() {
     await chatStore.queryMyGroup()
     addLoading.value = false
 
-    if (isMobile.value)
+    if (isMobile.value) appStore.setSiderCollapsed(true)
-      appStore.setSiderCollapsed(true)
+  } catch (error) {
-  }
-  catch (error) {
     addLoading.value = false
   }
 }
@@ -135,7 +156,7 @@ watch(
   {
     immediate: true,
     flush: 'post',
-  },
+  }
 )
 </script>
 
@@ -152,83 +173,174 @@ watch(
       :style="getMobileClass"
       @update-collapsed="handleUpdateCollapsed"
     >
-      <div class="flex flex-col h-full bg-[#fafbfc] dark:bg-[#18181c]" :style="mobileSafeArea">
+      <div
+        class="flex flex-col h-full bg-[#fafbfc] dark:bg-[#18181c]"
+        :style="mobileSafeArea"
+      >
         <main class="flex flex-col h-full flex-1 min-h-0">
-          <div v-if="isSearch" class="flex h-14 items-center space-x-2 bg-[#fafbfc] dark:bg-[#18181c]">
+          <div
-            <NButton type="primary" :loading="addLoading" @click="handleAdd">
+            class="flex items-center space-x-2 bg-white dark:bg-gray-900 h-12 px-3 border-b border-t-gray-100 dark:border-b dark:border-b-gray-800 text-lg mb-2"
-              <SvgIcon icon="ion:add-outline" class="text-xl" />
+          >
-            </NButton>
+            <!-- 搜索框 -->
-            <div class="flex-1">
+            <div class="flex-1 relative">
-              <NInput ref="searchRef" v-model="groupKeyWord" type="text" placeholder="对话历史查找" clearable @blur="handleBlurInput" @input="handleInputGroupSearch" />
+              <div class="flex-1 relative">
+                <!-- 搜索图标按钮 -->
+                <SvgIcon
+                  icon="material-symbols-light:search"
+                  class="pointer-events-none absolute inset-y-0 left-0 h-full w-6 h-6 text-gray-400"
+                />
+                <!-- 搜索输入框 -->
+                <input
+                  ref="searchRef"
+                  v-model="groupKeyWord"
+                  type="text"
+                  placeholder="搜索历史对话"
+                  class="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-700 placeholder:text-gray-400 sm:text-sm dark:bg-gray-900 dark:text-gray-400"
+                  @blur="handleBlurInput"
+                  @input="handleInputGroupSearch"
+                />
+              </div>
             </div>
-          </div>
+            <!-- 新建对话按钮 -->
-          <div v-if="!isSearch" class="flex h-14 items-center space-x-2 px-2 bg-[#fafbfc] dark:bg-[#18181c]">
+            <button
-            <div class="flex-1">
+              type="button"
-              <NButton type="primary" style="width: 100%" :loading="addLoading" @click="handleAdd">
+              class="rounded-md p-2 text-sm focus-visible:outline bg-white text-gray-400 dark:bg-gray-800"
-                新对话
+              @click="handleAdd"
-                <SvgIcon icon="ion:add-outline" class="text-xl" />
+            >
-              </NButton>
+              <SvgIcon icon="material-symbols-light:add" class="h-6 w-6" />
-            </div>
+            </button>
-            <NButton @click="handleOpenSearch">
-              <SvgIcon icon="icon-park-outline:search" class="text-xl" />
-            </NButton>
           </div>
           <div class="flex-1 min-h-0 pb-4 overflow-hidden">
             <List />
           </div>
-          <div v-if="!isMobile" class="px-6 py-2 flex items-center   border-t dark:border-t-neutral-800">
+          <!-- <div
-            <div class="flex items-center w-full p-1 mb-1 text-[#3076fd] rounded cursor-pointer transition hover:bg-[#eef0f3] dark:border-neutral-700 dark:hover:bg-[#33373c]" @click="useGlobalStore.updateGoodsDialog(true)">
+            v-if="!isMobile"
-              <SvgIcon icon="material-symbols:shopping-bag-outline" class="mr-1 text-base" />
+            class="px-6 py-2 flex items-center border-t dark:border-t-neutral-800"
+          >
+            <div
+              class="flex items-center w-full p-1 mb-1 text-[#3076fd] rounded cursor-pointer transition hover:bg-[#eef0f3] dark:border-neutral-700 dark:hover:bg-[#33373c]"
+              @click="useGlobalStore.updateGoodsDialog(true)"
+            >
+              <SvgIcon
+                icon="material-symbols:shopping-bag-outline"
+                class="mr-1 text-base"
+              />
               进入市场选购您的商品
             </div>
-          </div>
+          </div> -->
-          <div class="p-4  border-t dark:border-t-neutral-800 flex flex-col">
+          <div class="p-4 border-t dark:border-t-neutral-800 flex flex-col">
-            <div v-if="activeModelKeyDeductType === 1" class="my-1 flex items-center select-none">
+            <div
-              <SvgIcon icon="material-symbols:account-balance-wallet-outline" class="ml-2 mr-2 text-base" />普通额度： {{ `${userBalance.sumModel3Count || 0} 积分` }}
+              v-if="activeModelKeyDeductType === 1"
+              class="my-1 flex items-center select-none"
+            >
+              <SvgIcon
+                icon="material-symbols:account-balance-wallet-outline"
+                class="ml-2 mr-2 text-base"
+              />普通额度： {{ `${userBalance.sumModel3Count || 0} 积分` }}
             </div>
-            <div v-if="activeModelKeyDeductType === 1" class="my-1 flex items-center select-none">
+            <div
-              <SvgIcon icon="ic:twotone-hourglass-top" class="ml-2 mr-2 text-base" /> 我已使用：  <NNumberAnimation ref="model3AnimationInstRef" :from="oldUse3Token" :to="newUse3Token" /> Token
+              v-if="activeModelKeyDeductType === 1"
+              class="my-1 flex items-center select-none"
+            >
+              <SvgIcon
+                icon="ic:twotone-hourglass-top"
+                class="ml-2 mr-2 text-base"
+              />
+              我已使用：
+              <NNumberAnimation
+                ref="model3AnimationInstRef"
+                :from="oldUse3Token"
+                :to="newUse3Token"
+              />
+              Token
             </div>
-            <div v-if="activeModelKeyDeductType === 1" class="my-1 flex items-center select-none">
+            <div
-              <SvgIcon icon="mingcute:bill-line" class="ml-2 mr-2 text-base" /> 模型费用： {{ `${activeModelKeyPrice || 0}积分 / 次对话` }}
+              v-if="activeModelKeyDeductType === 1"
+              class="my-1 flex items-center select-none"
+            >
+              <SvgIcon icon="mingcute:bill-line" class="ml-2 mr-2 text-base" />
+              模型费用： {{ `${activeModelKeyPrice || 0}积分 / 次对话` }}
             </div>
 
-            <div v-if="activeModelKeyDeductType === 2" class="my-1 flex items-center select-none">
+            <div
-              <SvgIcon icon="ic:twotone-hourglass-top" class="ml-2 mr-2 text-base" />我已使用：  <NNumberAnimation ref="model4AnimationInstRef" :from="oldUse4Token" :to="newUse4Token" /> Token
+              v-if="activeModelKeyDeductType === 2"
+              class="my-1 flex items-center select-none"
+            >
+              <SvgIcon
+                icon="ic:twotone-hourglass-top"
+                class="ml-2 mr-2 text-base"
+              />我已使用：
+              <NNumberAnimation
+                ref="model4AnimationInstRef"
+                :from="oldUse4Token"
+                :to="newUse4Token"
+              />
+              Token
             </div>
-            <div v-if="activeModelKeyDeductType === 2" class="my-1 flex items-center select-none">
+            <div
-              <SvgIcon icon="material-symbols:account-balance-wallet-outline" class="ml-2 mr-2 text-base " />高级额度： {{ `${userBalance.sumModel4Count || 0} 积分` }}
+              v-if="activeModelKeyDeductType === 2"
+              class="my-1 flex items-center select-none"
+            >
+              <SvgIcon
+                icon="material-symbols:account-balance-wallet-outline"
+                class="ml-2 mr-2 text-base"
+              />高级额度： {{ `${userBalance.sumModel4Count || 0} 积分` }}
             </div>
-            <div v-if="activeModelKeyDeductType === 2" class="my-1 flex items-center select-none">
+            <div
-              <SvgIcon icon="mingcute:bill-line" class="ml-2 mr-2 text-base " />模型费用： {{ `${activeModelKeyPrice || 0}积分 / 次对话` }}
+              v-if="activeModelKeyDeductType === 2"
+              class="my-1 flex items-center select-none"
+            >
+              <SvgIcon
+                icon="mingcute:bill-line"
+                class="ml-2 mr-2 text-base"
+              />模型费用： {{ `${activeModelKeyPrice || 0}积分 / 次对话` }}
             </div>
 
             <div class="flex justify-between my-3">
-              <NButton type="tertiary" size="small" @click="useGlobalStore.updateNoticeDialog(true)">
+              <NButton
+                type="tertiary"
+                size="small"
+                @click="useGlobalStore.updateNoticeDialog(true)"
+              >
                 <SvgIcon icon="mdi:notice-board" class="ml-2 mr-2 text-sm" />
                 <span class="mr-2">公告栏</span>
               </NButton>
               <NButton type="tertiary" size="small" @click="handleOpenRole">
-                <SvgIcon icon="ri:emoji-sticker-line" class="ml-2 mr-2 text-sm" />
+                <SvgIcon
+                  icon="ri:emoji-sticker-line"
+                  class="ml-2 mr-2 text-sm"
+                />
                 <span class="mr-3">工作台</span>
               </NButton>
             </div>
             <div class="flex justify-betweenx">
-              <NButton type="tertiary" size="small" style="width: 100%" @click="handleDelGroup">
+              <NButton
-                <SvgIcon icon="ant-design:delete-outlined" class="ml-2 mr-2 text-sm" />
+                type="tertiary"
+                size="small"
+                style="width: 100%"
+                @click="handleDelGroup"
+              >
+                <SvgIcon
+                  icon="ant-design:delete-outlined"
+                  class="ml-2 mr-2 text-sm"
+                />
                 <span class="mr-3">清空全部非置顶会话</span>
               </NButton>
             </div>
-          <!-- <NButton block @click="show = true">
+            <!-- <NButton block @click="show = true">
             {{ $t('store.siderButton') }}
           </NButton> -->
           </div>
         </main>
-      <!-- <Footer /> -->
+        <!-- <Footer /> -->
       </div>
     </NLayoutSider>
     <template v-if="isMobile">
-      <div v-show="!collapsed" class="fixed inset-0 z-40 bg-black/40" @click="handleUpdateCollapsed" />
+      <div
+        v-show="!collapsed"
+        class="fixed inset-0 z-40 bg-black/40"
+        @click="handleUpdateCollapsed"
+      />
     </template>
   </div>
 </template>