fix:修复了搜索框聚焦与交互冲突的bug，优化了样式，新增滚动栏定位

kanoqwq · Oct 30, 2024 · c744d8e · c744d8e
1 parent e1439c8
commit c744d8e
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 47 deletions.
diff --git a/src/components/Live2D/Live2DSettings.vue b/src/components/Live2D/Live2DSettings.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="L2dList">
-    <ul class="list">
+    <ul class="list" ref="scrollList">
       <li
         class="dark:dark-text dark:dark-btn rounded dark:hover:dark-input"
         v-for="(item, index) in l2DList"
@@ -17,13 +17,14 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, nextTick } from 'vue';
 import useStore from '@/store';
 import { Toast } from '../Toast';
 import Button from '../Button/Button.vue';
 const l2DList = ref<any>({});
 const selectedIndex = ref<number>(0);
 const Configs = useStore.Configs();
+const scrollList = ref();
 const getL2DList = async () => {
   let { messages } = await (
     await fetch('./assets/Live2d/model_list.json')
@@ -63,7 +64,17 @@ const save = () => {
 };
 
 onMounted(() => {
-  getL2DList();
+  getL2DList().then(() => {
+    nextTick(() => {
+      setTimeout(() => {
+        scrollList.value.children[Configs.modId].scrollIntoView({
+          behavior: 'smooth',
+          block: 'start',
+          inline: 'nearest',
+        });
+      }, 300);
+    });
+  });
 });
 </script>
 

diff --git a/src/components/Search.less b/src/components/Search.less
@@ -4,6 +4,9 @@
 }
 
 .container {
+  &::-webkit-scrollbar {
+    display: none;
+  }
   position: relative;
   z-index: 99;
   height: 100%;
@@ -75,7 +78,7 @@
   .search-engine {
     position: relative;
     height: 50px;
-    transition: all 0.3s;
+    transition: all 0.2s;
     transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
     backdrop-filter: blur(10px);
     border-radius: 6px;

diff --git a/src/components/Search.vue b/src/components/Search.vue
@@ -55,23 +55,19 @@
           @mouseleave.stop="suggestActiveControl"
           class="search-suggestion top-border absolute dark:dark-suggest-bg"
           v-show="suggestWords.length && suggestIsShow">
-          <ul>
+          <ul ref="scrollUl">
             <li
               class="inner dark:dark-text"
               :class="{ active: item.isSelected }"
-              @click.stop="
-                () => {
-                  startSearch(item.title);
-                }
-              "
+              @click.stop="startSearch(item.title)"
               v-for="(item, index) in suggestWords"
               :key="index">
               <span class="searchkey" :id="`key_${index}_${Math.random()}`">{{
                 item.title
               }}</span>
               <i
                 v-show="item.allowDel"
-                @click.stop="delHistory(index)"
+                @click.stop.prevent="delHistory(index)"
                 class="iconfont icon-close icon close"></i>
             </li>
           </ul>
@@ -89,7 +85,7 @@
  * @Email: [email protected]
  * @Date: 2023-04-17 14:47:15
  * @Last Modified by: kanoqwq
- * @Last Modified time: 2024-10-30 00:23:04
+ * @Last Modified time: 2024-10-30 20:27:38
  * @Description: Description
  */
 import { ref, reactive, watch, computed, onMounted } from 'vue';
@@ -103,9 +99,12 @@ import Favorites from './Favorites/Favorites.vue';
 onMounted(() => {
   window.onkeyup = (e: KeyboardEvent) => {
     e.preventDefault();
-    if (e.key == 'Alt' || e.key == 'Control') {
+    if (e.key == 'Alt') {
       if (isSearchFocused.value) {
         searchBox.value.blur();
+        searchBlur();
+        uncheckSuggestWords();
+        isSearchFocused.value = false;
       } else {
         searchBox.value.focus();
       }
@@ -128,7 +127,7 @@ let engineIndex: number = searchEnginesStore.selectedEngine;
 let selectedEngine = reactive<SearchEngine>({
   ...searchEnginesStore.searchEngines[engineIndex],
 });
-let suggestionIndex = -1;
+let suggestionIndex = ref(-1);
 let suggestWords = ref<Array<SuggestWords>>([]);
 const Configs = useStore.Configs();
 const searchBox = ref();
@@ -153,7 +152,11 @@ const containerClick = (e: Event) => {
   if (e.target == container.value) {
     showHideSearchHistory(e);
     uncheckSuggestWords();
+    searchBox.value.blur();
+    searchBlur();
+    uncheckSuggestWords();
     isSearchFocused.value = false;
+    suggestIsShow.value = false;
   }
 };
 
@@ -186,6 +189,7 @@ const switchEngine = (): void => {
 //开始搜索
 //FIX:fixed problem when search string has spacial character
 //feat:Support for directly entering URL addresses in the search box
+let timeout: any = null;
 const startSearch = (
   keyWord = searchContent.value.trim(),
   needClear = false
@@ -199,26 +203,37 @@ const startSearch = (
   if (keyWord.trim() !== searchContent.value.trim()) {
     searchContent.value = keyWord.trim();
   }
+  //搜索历史滚动到最顶部
+  isScrollingToTop.value = true;
+  scrollUl.value.children[0].scrollIntoView({
+    top: 0,
+    behavior: 'instant',
+  });
+
   //添加搜索历史
   addSearchHistory(keyWord);
 
+  // 隐藏
+  searchBox.value.blur();
+  searchBlur();
   uncheckSuggestWords();
-
-  suggestionIndex = 0;
-
-  // 隐藏搜索建议框
+  isSearchFocused.value = false;
   suggestIsShow.value = false;
 
-  //If keyWord is an URL
-  if (URLReg.exec(keyWord)) {
-    window.open(keyWord, '_blank');
-  } else {
-    //新标签页打开
-    window.open(reqUrl, '_blank');
-  }
-  if (needClear) {
-    clearContent();
-  }
+  clearTimeout(timeout);
+  timeout = setTimeout(() => {
+    isScrollingToTop.value = false;
+    //If keyWord is an URL
+    if (URLReg.exec(keyWord)) {
+      window.open(keyWord, '_blank');
+    } else {
+      //新标签页打开
+      window.open(reqUrl, '_blank');
+    }
+    if (needClear) {
+      clearContent();
+    }
+  }, 400);
 };
 
 const searchEngineElement = ref<HTMLFormElement>();
@@ -285,7 +300,7 @@ const searchSuggestion = throttle(
       //清除阴影
       toggleShadow(false);
       //清除一下历史选择的index
-      suggestionIndex = -1;
+      suggestionIndex.value = -1;
       //搜索建议的trigger保持开启
       suggestIsShow.value = true;
       if (searchContent.value) {
@@ -319,43 +334,69 @@ const clearContent = (): void => {
   searchContent.value = '';
 };
 
+const scrollUl = ref();
+const isScrollingToTop = ref(false);
+
+watch(suggestionIndex, () => {
+  //滚动
+  if (isScrollingToTop.value) return;
+  scrollUl.value.children[suggestionIndex.value].scrollIntoView({
+    behavior: 'smooth',
+    block: 'start',
+    inline: 'nearest',
+  });
+});
+
 //实现上下键选择候选词
+let removeandInit = () => {
+  removeActive();
+  suggestWords.value[suggestionIndex.value].isSelected = true;
+  searchContent.value = suggestWords.value[suggestionIndex.value].title;
+};
 const moveSuggestion = (e: KeyboardEvent): void => {
   let key = e.key;
   //候选词列表不为空
   if (suggestWords.value.length != 0) {
     if (key == 'ArrowUp') {
       //阻止上下按键操作光标
       e.preventDefault();
-      if (suggestionIndex == 0 || suggestionIndex == -1) {
-        suggestionIndex = suggestWords.value.length - 1;
+      if (suggestionIndex.value == 0 || suggestionIndex.value == -1) {
+        suggestionIndex.value = suggestWords.value.length - 1;
       } else {
-        suggestionIndex = (suggestionIndex - 1) % suggestWords.value.length;
+        suggestionIndex.value =
+          (suggestionIndex.value - 1) % suggestWords.value.length;
       }
-      removeActive();
-      suggestWords.value[suggestionIndex].isSelected = true;
-      searchContent.value = suggestWords.value[suggestionIndex].title;
+      removeandInit();
     } else if (key == 'ArrowDown') {
       e.preventDefault();
-      if (suggestWords.value.length - 1 == suggestionIndex) {
-        suggestionIndex = 0;
+      if (suggestWords.value.length - 1 == suggestionIndex.value) {
+        suggestionIndex.value = 0;
       } else {
-        suggestionIndex = (suggestionIndex + 1) % suggestWords.value.length;
+        suggestionIndex.value =
+          (suggestionIndex.value + 1) % suggestWords.value.length;
       }
-      removeActive();
-      suggestWords.value[suggestionIndex].isSelected = true;
-      searchContent.value = suggestWords.value[suggestionIndex].title;
+      removeandInit();
+    } else if (key == 'Home') {
+      e.preventDefault();
+      suggestionIndex.value = 0;
+      removeandInit();
+    } else if (key == 'End') {
+      e.preventDefault();
+      suggestionIndex.value = suggestWords.value.length - 1;
+      removeandInit();
     }
   }
   //del按下可以快速删除历史
   if (key == 'Delete') {
     //防止误删搜索建议中的内容
     if (suggestWords.value.length != 0 && !isSuggestMode) {
-      historySearch.deleteHistory(suggestionIndex);
-      suggestWords.value.splice(suggestionIndex, 1);
+      historySearch.deleteHistory(suggestionIndex.value);
+      suggestWords.value.splice(suggestionIndex.value, 1);
       if (suggestWords.value.length) {
-        suggestionIndex - 1 >= 0 ? suggestionIndex-- : suggestionIndex;
-        suggestWords.value[suggestionIndex].isSelected = true;
+        suggestionIndex.value - 1 >= 0
+          ? suggestionIndex.value--
+          : suggestionIndex.value;
+        suggestWords.value[suggestionIndex.value].isSelected = true;
       } else {
         toggleSearchBorder(true);
       }
@@ -381,6 +422,10 @@ const showHideSearchHistory = (e: Event) => {
   if (e.type == 'focusin') {
     focus();
   } else {
+    if (isSearchFocused.value) {
+      isSearchFocused.value = false;
+      return;
+    }
     searchBlur();
   }
 };
@@ -396,6 +441,8 @@ const suggestActiveControl = (e: Event) => {
 
 //删除搜索历史
 const delHistory = (index: number) => {
+  focus();
+  emit('focus');
   suggestWords.value.splice(index, 1);
   historySearch.deleteHistory(index);
   //删空后将搜索框设为圆角边框

diff --git a/src/components/UploadImage/UploadImage.vue b/src/components/UploadImage/UploadImage.vue
@@ -50,8 +50,6 @@ const isShowConfrim = ref();
 const fileInput = ref();
 const { change } = useUploadImage({ emit });
 
-console.log(Configs.bgs.length);
-
 const addPicClick = () => {
   if (fileInput.value) {
     fileInput.value.click();