[Fix] 🐛 Prompt Selector Style Error on Dark Mode #404

Author: Harry-zklcdc

frontend/package.json

@@ -12,12 +12,11 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "naive-ui": "^2.34.4",
+    "naive-ui": "^2.38.1",
     "pinia": "^2.0.36",
     "pinia-plugin-persistedstate": "^3.1.0",
     "vue": "^3.3.2",
-    "vue-router": "^4.2.0",
-    "vue3-virtual-scroll-list": "^0.2.1"
+    "vue-router": "^4.2.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.2.0",

frontend/src/components/ChatPromptStore/ChatPromptItem.vue

@@ -27,7 +27,7 @@ const showEditPromptPop = (item: IPrompt) => {
 </script>
 
 <template>
-  <NThing class="hover:bg-gray-100 cursor-pointer p-5">
+  <NThing class="hover:bg-gray-400 dark:md:hover:bg-slate-800 cursor-pointer p-5">
     <template #description>
       <NTag type="info">
         <span class="inline-block max-w-[120px] xl:max-w-[650px] overflow-hidden text-ellipsis">{{ source.act }}</span>

frontend/src/components/ChatPromptStore/ChatPromptStore.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { NModal, NList, NListItem, NButton, useMessage, NSpace, NInput, NUpload, type UploadFileInfo, NEmpty } from 'naive-ui';
+import { NModal, NList, NListItem, NButton, useMessage, NSpace, NInput, NUpload, NVirtualList, type UploadFileInfo, NEmpty } from 'naive-ui';
 import { usePromptStore, type IPrompt, type IPromptDownloadConfig } from '@/stores/modules/prompt';
 import { storeToRefs } from 'pinia';
-import VirtualList from 'vue3-virtual-scroll-list';
 import ChatPromptItem from './ChatPromptItem.vue';
 
 const messgae = useMessage();
@@ -155,14 +154,17 @@ const downloadPrompt = async (config: IPromptDownloadConfig) => {
       <NButton secondary type="success" @click="exportPrompt" :loading="isExporting">导出</NButton>
       <NButton secondary type="error" @click="clearPrompt">清空</NButton>
     </div>
-    <VirtualList
+    <NVirtualList
       v-if="searchPromptList.length > 0"
       class="h-[40vh] xl:h-[60vh] overflow-y-auto"
-      :data-key="'prompt'"
-      :data-sources="searchPromptList"
-      :data-component="ChatPromptItem"
-      :keeps="10"
-    />
+      :item-size="131"
+      item-resizable
+      :items="searchPromptList"
+    >
+      <template #default="{ item, index }">
+        <ChatPromptItem :index="index" :source="item" />
+      </template>
+    </NVirtualList>
     <NEmpty v-else class="h-[40vh] xl:h-[60vh] flex justify-center items-center" description="暂无数据">
       <template #extra>
         <NButton secondary type="info" @click="isShowDownloadPop = true">下载提示词</NButton>

frontend/src/views/chat/components/Chat/Chat.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref, computed, h } from 'vue';
-import { NEmpty, NButton, useDialog, useMessage, NResult, NInput, NAlert, NModal} from 'naive-ui';
+import { NEmpty, NButton, useDialog, useMessage, NResult, NInput, NAlert, NModal, NPopover, NVirtualList} from 'naive-ui';
 import conversationCssText from '@/assets/css/conversation.css?raw';
 import { usePromptStore, type IPrompt } from '@/stores/modules/prompt';
 import { storeToRefs } from 'pinia';
-import VirtualList from 'vue3-virtual-scroll-list';
 import ChatPromptItem from './ChatPromptItem.vue';
 import { isMobile } from '@/utils/utils';
 import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner.vue';
@@ -456,31 +455,35 @@ const auth = async () => {
 <template>
   <LoadingSpinner :is-show="isShowLoading" />
   <main>
-    <div
-      v-if="isShowChatPrompt"
-      class="box-border fixed bottom-[110px] w-full flex justify-center px-[14px] md:px-[34px] z-999"
-      :class="{
-        'md:px-[170px]': isShowHistory,
-        'xl:px-[220px]': isShowHistory,
-      }"
+    <NPopover
+      trigger="manual"
+      :show="isShowChatPrompt"
+      :show-arrow="false"
+      class="max-w-[1060px] max-h-[390px]"
+      :to="false"
     >
+      <template #trigger>
+        <NButton style="position: fixed; left: 20px; bottom: 80px; z-index: -1;" />
+      </template>
       <div class="w-0 md:w-[60px]"></div>
-      <VirtualList
-        ref="scrollbarRef"
+      <NVirtualList
         v-if="promptList.length > 0"
-        class="bg-white w-full max-w-[1060px] max-h-[390px] rounded-xl overflow-y-auto"
-        :data-key="'prompt'"
-        :data-sources="searchPromptList"
-        :data-component="ChatPromptItem"
-        :keeps="10"
+        class="w-full max-w-[1060px] max-h-[390px] overflow-y-auto"
+        :item-size="131"
+        item-resizable
+        :items="promptList"
         @scroll="handlePromptListScroll"
-      />
-      <NEmpty v-else class="bg-white w-full max-w-[1060px] max-h-[390px] rounded-xl py-6" description="暂未设置提示词数据">
+      >
+        <template #default="{ item, index }">
+          <ChatPromptItem :index="index" :source="item" />
+        </template>
+      </NVirtualList>
+      <NEmpty v-else class="w-full max-w-[1060px] max-h-[390px] rounded-xl py-6" description="暂未设置提示词数据">
         <template #extra>
           <NButton secondary type="info" @click="isShowPromptSotre = true">去提示词库添加</NButton>
         </template>
       </NEmpty>
-    </div>
+    </NPopover>
   </main>
   <footer>
     <!-- 服务器选择 -->

frontend/src/views/chat/components/Chat/ChatPromptItem.vue

@@ -25,7 +25,7 @@ const selectPrompt = (item: IPrompt) => {
 
 <template>
   <NThing
-    class="hover:bg-gray-100 cursor-pointer px-5 h-[130px] flex justify-start items-center"
+    class="hover:bg-gray-400 cursor-pointer px-5 h-[130px] flex justify-start items-center"
     :class="{
       'bg-gray-100': index === selectedPromptIndex,
     }"