1: fixed bug of ui in mobile

2: add backgound image

views/src/views/chat/index.vue

@@ -3,7 +3,7 @@ import type { Ref } from 'vue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
-import { NAutoComplete, NButton, NInput, NRadioButton, NRadioGroup, useDialog, useMessage } from 'naive-ui'
+import { NAutoComplete, NButton, NDropdown, NInput, NRadioButton, NRadioGroup, useDialog, useMessage } from 'naive-ui'
 import html2canvas from 'html2canvas'
 import { Message } from './components'
 import { useScroll } from './hooks/useScroll'
@@ -11,13 +11,14 @@ import { useChat } from './hooks/useChat'
 import { useUsingContext } from './hooks/useUsingContext'
 import HeaderComponent from './components/Header/index.vue'
 import { HoverButton, SvgIcon } from '@/components/common'
+import { useIconRender } from '@/hooks/useIconRender'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
 import { useChatStore, usePromptStore } from '@/store'
 import { t } from '@/locales'
 import { bing_search, chat, chatfile } from '@/api/chat'
 import { idStore } from '@/store/modules/knowledgebaseid/id'
 let controller = new AbortController()
-
+const { iconRender } = useIconRender()
 // const openLongReply = import.meta.env.VITE_GLOB_OPEN_LONG_REPLY === 'true'
 
 const route = useRoute()
@@ -525,7 +526,57 @@ const footerClass = computed(() => {
     classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden']
   return classes
 })
+const options = computed(() => {
+  const common = [
+    {
+      label: '对话',
+      key: '对话',
+      icon: iconRender({ icon: 'ri-chat-1-line' }),
+    },
+    {
+      label: '知识库',
+      key: '知识库',
+      icon: iconRender({ icon: 'ri-store-2-line' }),
+    },
+    {
+      label: 'Bing搜索',
+      key: 'Bing搜索',
+      icon: iconRender({ icon: 'ri-search-line' }),
+    },
+    {
+      type: 'divider',
+      key: 'd1',
+    },
+    {
+      label: '清除会话',
+      key: '清除会话',
+      icon: iconRender({ icon: 'ri:delete-bin-line' }),
+    },
+  ]
 
+  return common
+})
+function handleSelect(key: 'copyText' | 'delete' | 'toggleRenderType') {
+  if (key == '清除会话') {
+    handleClear()
+  }
+  else {
+    search.value = key
+    searchfun()
+    ms.success(`切换${key}成功！`)
+  }
+
+  // switch (key) {
+  //   case 'copyText':
+  //     handleCopy()
+  //     return
+  //   case 'toggleRenderType':
+  //     asRawText.value = !asRawText.value
+  //     return
+  //   case 'delete':
+  //     emit('delete')
+  // }
+}
 onMounted(() => {
   scrollToBottom()
   if (inputRef.value && !isMobile.value)
@@ -595,16 +646,27 @@ function searchfun() {
     <footer :class="footerClass">
       <div class="w-full max-w-screen-xl m-auto">
         <div class="flex items-center justify-between space-x-2">
-          <NRadioGroup v-model:value="search" @change="searchfun">
+          <NRadioGroup v-if="!isMobile" v-model:value="search" @change="searchfun">
             <NRadioButton value="对话" label="对话" />
             <NRadioButton value="知识库" label="知识库" />
             <NRadioButton value="Bing搜索" label="Bing搜索" />
           </NRadioGroup>
-          <HoverButton @click="handleClear">
+          <HoverButton v-if="!isMobile" @click="handleClear">
             <span class="text-xl text-[#4f555e] dark:text-white">
               <SvgIcon icon="ri:delete-bin-line" />
             </span>
           </HoverButton>
+          <NDropdown
+            v-if="isMobile"
+            :trigger="isMobile ? 'click' : 'hover'"
+            :placement="!inversion ? 'right' : 'left'"
+            :options="options"
+            @select="handleSelect"
+          >
+            <button>
+              <SvgIcon icon="ri:more-2-fill" />
+            </button>
+          </NDropdown>
           <HoverButton v-if="!isMobile" @click="handleExport">
             <span class="text-xl text-[#4f555e] dark:text-white">
               <SvgIcon icon="ri:download-2-line" />
@@ -642,3 +704,27 @@ function searchfun() {
     </footer>
   </div>
 </template>
+
+<style>
+#app{
+  background-image: url(../../assets/bg.jpg);
+  background-size:100% 100%;
+
+}
+.bg-green-50{
+  background-color: rgba(250, 250, 250, 0);
+}
+.n-layout{
+  background-color: rgba(250, 250, 250, 0.5);
+}
+.n-layout-sider{
+  background-color: rgba(250, 250, 250, 0.5);
+}
+.n-switch__button{
+  font-size: 10px;
+}
+.shadow-md{
+  box-shadow: 0 12px 40px 0 rgba(148,186,215,.2);
+  border: 1px solid ;
+}
+</style>

views/src/views/chat/layout/sider/knowledge-base/index.vue

@@ -34,7 +34,6 @@ const rules = {
   },
 }
 const handleValidateClick = (item: any) => {
-  // console.log(item)
   choice.value = item
   store.knowledgeid = choice.value
   items.value.forEach((res: { value: any; show: boolean }) => {