refactor: 重构layout文件命名规范，更易读 (#1110)

src/layout/components/lay-search/components/SearchFooter.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { useNav } from "@/layout/hooks/useNav";
+import MdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
+import EnterOutlined from "@/assets/svg/enter_outlined.svg?component";
+import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
+import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
+
+const props = withDefaults(defineProps<{ total: number }>(), {
+  total: 0
+});
+
+const { t } = useI18n();
+const { device } = useNav();
+</script>
+
+<template>
+  <div class="search-footer text-[#333] dark:text-white">
+    <span class="search-footer-item">
+      <EnterOutlined class="icon" />
+      {{ t("buttons.pureConfirm") }}
+    </span>
+    <span class="search-footer-item">
+      <IconifyIconOffline :icon="ArrowUpLine" class="icon" />
+      <IconifyIconOffline :icon="ArrowDownLine" class="icon" />
+      {{ t("buttons.pureSwitch") }}
+    </span>
+    <span class="search-footer-item">
+      <MdiKeyboardEsc class="icon" />
+      {{ t("buttons.pureClose") }}
+    </span>
+    <p v-if="device !== 'mobile' && total > 0" class="search-footer-total">
+      {{ `${t("search.pureTotal")} ${total}` }}
+    </p>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.search-footer {
+  display: flex;
+
+  .search-footer-item {
+    display: flex;
+    align-items: center;
+    margin-right: 14px;
+  }
+
+  .icon {
+    padding: 2px;
+    margin-right: 3px;
+    font-size: 20px;
+    box-shadow:
+      inset 0 -2px #cdcde6,
+      inset 0 0 1px 1px #fff,
+      0 1px 2px 1px #1e235a66;
+  }
+
+  .search-footer-total {
+    position: absolute;
+    right: 20px;
+  }
+}
+</style>

src/layout/components/lay-search/components/SearchHistory.vue

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import Sortable from "sortablejs";
+import { useI18n } from "vue-i18n";
+import SearchHistoryItem from "./SearchHistoryItem.vue";
+import type { optionsItem, dragItem, Props } from "../types";
+import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+import { useResizeObserver, isArray, delay } from "@pureadmin/utils";
+import { ref, watch, nextTick, computed, getCurrentInstance } from "vue";
+
+interface Emits {
+  (e: "update:value", val: string): void;
+  (e: "enter"): void;
+  (e: "collect", val: optionsItem): void;
+  (e: "delete", val: optionsItem): void;
+  (e: "drag", val: dragItem): void;
+}
+
+const historyRef = ref();
+const innerHeight = ref();
+/** 判断是否停止鼠标移入事件处理 */
+const stopMouseEvent = ref(false);
+
+const { t } = useI18n();
+const emit = defineEmits<Emits>();
+const instance = getCurrentInstance()!;
+const props = withDefaults(defineProps<Props>(), {});
+
+const itemStyle = computed(() => {
+  return item => {
+    return {
+      background:
+        item?.path === active.value ? useEpThemeStoreHook().epThemeColor : "",
+      color: item.path === active.value ? "#fff" : "",
+      fontSize: item.path === active.value ? "16px" : "14px"
+    };
+  };
+});
+
+const titleStyle = computed(() => {
+  return {
+    color: useEpThemeStoreHook().epThemeColor,
+    fontWeight: 500
+  };
+});
+
+const active = computed({
+  get() {
+    return props.value;
+  },
+  set(val: string) {
+    emit("update:value", val);
+  }
+});
+
+watch(
+  () => props.value,
+  newValue => {
+    if (newValue) {
+      if (stopMouseEvent.value) {
+        delay(100).then(() => (stopMouseEvent.value = false));
+      }
+    }
+  }
+);
+
+const historyList = computed(() => {
+  return props.options.filter(item => item.type === "history");
+});
+
+const collectList = computed(() => {
+  return props.options.filter(item => item.type === "collect");
+});
+
+function handleCollect(item) {
+  emit("collect", item);
+}
+
+function handleDelete(item) {
+  stopMouseEvent.value = true;
+  emit("delete", item);
+}
+
+/** 鼠标移入 */
+async function handleMouse(item) {
+  if (!stopMouseEvent.value) active.value = item.path;
+}
+
+function handleTo() {
+  emit("enter");
+}
+
+function resizeResult() {
+  // el-scrollbar max-height="calc(90vh - 140px)"
+  innerHeight.value = window.innerHeight - window.innerHeight / 10 - 140;
+}
+
+useResizeObserver(historyRef, resizeResult);
+
+function handleScroll(index: number) {
+  const curInstance = instance?.proxy?.$refs[`historyItemRef${index}`];
+  if (!curInstance) return 0;
+  const curRef = isArray(curInstance)
+    ? (curInstance[0] as ElRef)
+    : (curInstance as ElRef);
+  const scrollTop = curRef.offsetTop + 128; // 128 两个history-item（56px+56px=112px）高度加上下margin（8px+8px=16px）
+  return scrollTop > innerHeight.value ? scrollTop - innerHeight.value : 0;
+}
+
+const handleChangeIndex = (evt): void => {
+  emit("drag", { oldIndex: evt.oldIndex, newIndex: evt.newIndex });
+};
+
+let sortableInstance = null;
+
+watch(
+  collectList,
+  val => {
+    if (val.length > 1) {
+      nextTick(() => {
+        const wrapper: HTMLElement =
+          document.querySelector(".collect-container");
+        if (!wrapper || sortableInstance) return;
+        sortableInstance = Sortable.create(wrapper, {
+          animation: 160,
+          onStart: event => {
+            event.item.style.cursor = "move";
+          },
+          onEnd: event => {
+            event.item.style.cursor = "pointer";
+          },
+          onUpdate: handleChangeIndex
+        });
+        resizeResult();
+      });
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+defineExpose({ handleScroll });
+</script>
+
+<template>
+  <div ref="historyRef" class="history">
+    <template v-if="historyList.length">
+      <div :style="titleStyle">
+        {{ t("search.pureHistory") }}
+      </div>
+      <div
+        v-for="(item, index) in historyList"
+        :key="item.path"
+        :ref="'historyItemRef' + index"
+        class="history-item dark:bg-[#1d1d1d]"
+        :style="itemStyle(item)"
+        @click="handleTo"
+        @mouseenter="handleMouse(item)"
+      >
+        <SearchHistoryItem
+          :item="item"
+          @delete-item="handleDelete"
+          @collect-item="handleCollect"
+        />
+      </div>
+    </template>
+    <template v-if="collectList.length">
+      <div :style="titleStyle">
+        {{
+          `${t("search.pureCollect")}${collectList.length > 1 ? t("search.pureDragSort") : ""}`
+        }}
+      </div>
+      <div class="collect-container">
+        <div
+          v-for="(item, index) in collectList"
+          :key="item.path"
+          :ref="'historyItemRef' + (index + historyList.length)"
+          class="history-item dark:bg-[#1d1d1d]"
+          :style="itemStyle(item)"
+          @click="handleTo"
+          @mouseenter="handleMouse(item)"
+        >
+          <SearchHistoryItem :item="item" @delete-item="handleDelete" />
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.history {
+  padding-bottom: 12px;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    height: 56px;
+    padding: 14px;
+    margin: 8px auto 10px;
+    cursor: pointer;
+    border: 0.1px solid #ccc;
+    border-radius: 4px;
+    transition: font-size 0.16s;
+  }
+}
+</style>

src/layout/components/lay-search/components/SearchHistoryItem.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { optionsItem } from "../types";
+import { transformI18n } from "@/plugins/i18n";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import StarIcon from "@iconify-icons/ep/star";
+import CloseIcon from "@iconify-icons/ep/close";
+
+interface Props {
+  item: optionsItem;
+}
+
+interface Emits {
+  (e: "collectItem", val: optionsItem): void;
+  (e: "deleteItem", val: optionsItem): void;
+}
+
+const emit = defineEmits<Emits>();
+withDefaults(defineProps<Props>(), {});
+
+function handleCollect(item) {
+  emit("collectItem", item);
+}
+
+function handleDelete(item) {
+  emit("deleteItem", item);
+}
+</script>
+
+<template>
+  <component :is="useRenderIcon(item.meta?.icon)" />
+  <span class="history-item-title">
+    {{ transformI18n(item.meta?.title) }}
+  </span>
+  <IconifyIconOffline
+    v-show="item.type === 'history'"
+    :icon="StarIcon"
+    class="w-[18px] h-[18px] mr-2 hover:text-[#d7d5d4]"
+    @click.stop="handleCollect(item)"
+  />
+  <IconifyIconOffline
+    :icon="CloseIcon"
+    class="w-[18px] h-[18px] hover:text-[#d7d5d4] cursor-pointer"
+    @click.stop="handleDelete(item)"
+  />
+</template>
+
+<style lang="scss" scoped>
+.history-item-title {
+  display: flex;
+  flex: 1;
+  margin-left: 5px;
+}
+</style>

src/layout/components/lay-search/components/SearchModal.vue

@@ -0,0 +1,338 @@
+<script setup lang="ts">
+import { match } from "pinyin-pro";
+import { useI18n } from "vue-i18n";
+import { getConfig } from "@/config";
+import { useRouter } from "vue-router";
+import SearchResult from "./SearchResult.vue";
+import SearchFooter from "./SearchFooter.vue";
+import { useNav } from "@/layout/hooks/useNav";
+import SearchHistory from "./SearchHistory.vue";
+import { transformI18n, $t } from "@/plugins/i18n";
+import type { optionsItem, dragItem } from "../types";
+import { ref, computed, shallowRef, watch } from "vue";
+import { useDebounceFn, onKeyStroke } from "@vueuse/core";
+import { usePermissionStoreHook } from "@/store/modules/permission";
+import { cloneDeep, isAllEmpty, storageLocal } from "@pureadmin/utils";
+import SearchIcon from "@iconify-icons/ri/search-line";
+
+interface Props {
+  /** 弹窗显隐 */
+  value: boolean;
+}
+
+interface Emits {
+  (e: "update:value", val: boolean): void;
+}
+
+const { device } = useNav();
+const emit = defineEmits<Emits>();
+const props = withDefaults(defineProps<Props>(), {});
+
+const router = useRouter();
+const { t, locale } = useI18n();
+
+const HISTORY_TYPE = "history";
+const COLLECT_TYPE = "collect";
+const LOCALEHISTORYKEY = "menu-search-history";
+const LOCALECOLLECTKEY = "menu-search-collect";
+
+const keyword = ref("");
+const resultRef = ref();
+const historyRef = ref();
+const scrollbarRef = ref();
+const activePath = ref("");
+const historyPath = ref("");
+const resultOptions = shallowRef([]);
+const historyOptions = shallowRef([]);
+const handleSearch = useDebounceFn(search, 300);
+const historyNum = getConfig().MenuSearchHistory;
+const inputRef = ref<HTMLInputElement | null>(null);
+
+/** 菜单树形结构 */
+const menusData = computed(() => {
+  return cloneDeep(usePermissionStoreHook().wholeMenus);
+});
+
+const show = computed({
+  get() {
+    return props.value;
+  },
+  set(val: boolean) {
+    emit("update:value", val);
+  }
+});
+
+watch(
+  () => props.value,
+  newValue => {
+    if (newValue) getHistory();
+  }
+);
+
+const showSearchResult = computed(() => {
+  return keyword.value && resultOptions.value.length > 0;
+});
+
+const showSearchHistory = computed(() => {
+  return !keyword.value && historyOptions.value.length > 0;
+});
+
+const showEmpty = computed(() => {
+  return (
+    (!keyword.value && historyOptions.value.length === 0) ||
+    (keyword.value && resultOptions.value.length === 0)
+  );
+});
+
+function getStorageItem(key) {
+  return storageLocal().getItem<optionsItem[]>(key) || [];
+}
+
+function setStorageItem(key, value) {
+  storageLocal().setItem(key, value);
+}
+
+/** 将菜单树形结构扁平化为一维数组，用于菜单查询 */
+function flatTree(arr) {
+  const res = [];
+  function deep(arr) {
+    arr.forEach(item => {
+      res.push(item);
+      item.children && deep(item.children);
+    });
+  }
+  deep(arr);
+  return res;
+}
+
+/** 查询 */
+function search() {
+  const flatMenusData = flatTree(menusData.value);
+  resultOptions.value = flatMenusData.filter(menu =>
+    keyword.value
+      ? transformI18n(menu.meta?.title)
+          .toLocaleLowerCase()
+          .includes(keyword.value.toLocaleLowerCase().trim()) ||
+        (locale.value === "zh" &&
+          !isAllEmpty(
+            match(
+              transformI18n(menu.meta?.title).toLocaleLowerCase(),
+              keyword.value.toLocaleLowerCase().trim()
+            )
+          ))
+      : false
+  );
+  activePath.value =
+    resultOptions.value?.length > 0 ? resultOptions.value[0].path : "";
+}
+
+function handleClose() {
+  show.value = false;
+  /** 延时处理防止用户看到某些操作 */
+  setTimeout(() => {
+    resultOptions.value = [];
+    historyPath.value = "";
+    keyword.value = "";
+  }, 200);
+}
+
+function scrollTo(index) {
+  const ref = resultOptions.value.length ? resultRef.value : historyRef.value;
+  const scrollTop = ref.handleScroll(index);
+  scrollbarRef.value.setScrollTop(scrollTop);
+}
+
+/** 获取当前选项和路径 */
+function getCurrentOptionsAndPath() {
+  const isResultOptions = resultOptions.value.length > 0;
+  const options = isResultOptions ? resultOptions.value : historyOptions.value;
+  const currentPath = isResultOptions ? activePath.value : historyPath.value;
+  return { options, currentPath, isResultOptions };
+}
+
+/** 更新路径并滚动到指定项 */
+function updatePathAndScroll(newIndex, isResultOptions) {
+  if (isResultOptions) {
+    activePath.value = resultOptions.value[newIndex].path;
+  } else {
+    historyPath.value = historyOptions.value[newIndex].path;
+  }
+  scrollTo(newIndex);
+}
+
+/** key up */
+function handleUp() {
+  const { options, currentPath, isResultOptions } = getCurrentOptionsAndPath();
+  if (options.length === 0) return;
+  const index = options.findIndex(item => item.path === currentPath);
+  const prevIndex = (index - 1 + options.length) % options.length;
+  updatePathAndScroll(prevIndex, isResultOptions);
+}
+
+/** key down */
+function handleDown() {
+  const { options, currentPath, isResultOptions } = getCurrentOptionsAndPath();
+  if (options.length === 0) return;
+  const index = options.findIndex(item => item.path === currentPath);
+  const nextIndex = (index + 1) % options.length;
+  updatePathAndScroll(nextIndex, isResultOptions);
+}
+
+/** key enter */
+function handleEnter() {
+  const { options, currentPath, isResultOptions } = getCurrentOptionsAndPath();
+  if (options.length === 0 || currentPath === "") return;
+  const index = options.findIndex(item => item.path === currentPath);
+  if (index === -1) return;
+  if (isResultOptions) {
+    saveHistory();
+  } else {
+    updateHistory();
+  }
+  router.push(options[index].path);
+  handleClose();
+}
+
+/** 删除历史记录 */
+function handleDelete(item) {
+  const key = item.type === HISTORY_TYPE ? LOCALEHISTORYKEY : LOCALECOLLECTKEY;
+  let list = getStorageItem(key);
+  list = list.filter(listItem => listItem.path !== item.path);
+  setStorageItem(key, list);
+  getHistory();
+}
+
+/** 收藏历史记录 */
+function handleCollect(item) {
+  let searchHistoryList = getStorageItem(LOCALEHISTORYKEY);
+  let searchCollectList = getStorageItem(LOCALECOLLECTKEY);
+  searchHistoryList = searchHistoryList.filter(
+    historyItem => historyItem.path !== item.path
+  );
+  setStorageItem(LOCALEHISTORYKEY, searchHistoryList);
+  if (!searchCollectList.some(collectItem => collectItem.path === item.path)) {
+    searchCollectList.unshift({ ...item, type: COLLECT_TYPE });
+    setStorageItem(LOCALECOLLECTKEY, searchCollectList);
+  }
+  getHistory();
+}
+
+/** 存储搜索记录 */
+function saveHistory() {
+  const { path, meta } = resultOptions.value.find(
+    item => item.path === activePath.value
+  );
+  const searchHistoryList = getStorageItem(LOCALEHISTORYKEY);
+  const searchCollectList = getStorageItem(LOCALECOLLECTKEY);
+  const isCollected = searchCollectList.some(item => item.path === path);
+  const existingIndex = searchHistoryList.findIndex(item => item.path === path);
+  if (!isCollected) {
+    if (existingIndex !== -1) searchHistoryList.splice(existingIndex, 1);
+    if (searchHistoryList.length >= historyNum) searchHistoryList.pop();
+    searchHistoryList.unshift({ path, meta, type: HISTORY_TYPE });
+    storageLocal().setItem(LOCALEHISTORYKEY, searchHistoryList);
+  }
+}
+
+/** 更新存储的搜索记录 */
+function updateHistory() {
+  let searchHistoryList = getStorageItem(LOCALEHISTORYKEY);
+  const historyIndex = searchHistoryList.findIndex(
+    item => item.path === historyPath.value
+  );
+  if (historyIndex !== -1) {
+    const [historyItem] = searchHistoryList.splice(historyIndex, 1);
+    searchHistoryList.unshift(historyItem);
+    setStorageItem(LOCALEHISTORYKEY, searchHistoryList);
+  }
+}
+
+/** 获取本地历史记录 */
+function getHistory() {
+  const searchHistoryList = getStorageItem(LOCALEHISTORYKEY);
+  const searchCollectList = getStorageItem(LOCALECOLLECTKEY);
+  historyOptions.value = [...searchHistoryList, ...searchCollectList];
+  historyPath.value = historyOptions.value[0]?.path;
+}
+
+/** 拖拽改变收藏顺序 */
+function handleDrag(item: dragItem) {
+  const searchCollectList = getStorageItem(LOCALECOLLECTKEY);
+  const [reorderedItem] = searchCollectList.splice(item.oldIndex, 1);
+  searchCollectList.splice(item.newIndex, 0, reorderedItem);
+  storageLocal().setItem(LOCALECOLLECTKEY, searchCollectList);
+  historyOptions.value = [
+    ...getStorageItem(LOCALEHISTORYKEY),
+    ...getStorageItem(LOCALECOLLECTKEY)
+  ];
+  historyPath.value = reorderedItem.path;
+}
+
+onKeyStroke("Enter", handleEnter);
+onKeyStroke("ArrowUp", handleUp);
+onKeyStroke("ArrowDown", handleDown);
+</script>
+
+<template>
+  <el-dialog
+    v-model="show"
+    top="5vh"
+    class="pure-search-dialog"
+    :show-close="false"
+    :width="device === 'mobile' ? '80vw' : '40vw'"
+    :before-close="handleClose"
+    :style="{
+      borderRadius: '6px'
+    }"
+    append-to-body
+    @opened="inputRef.focus()"
+    @closed="inputRef.blur()"
+  >
+    <el-input
+      ref="inputRef"
+      v-model="keyword"
+      size="large"
+      clearable
+      :placeholder="t('search.purePlaceholder')"
+      @input="handleSearch"
+    >
+      <template #prefix>
+        <IconifyIconOffline
+          :icon="SearchIcon"
+          class="text-primary w-[24px] h-[24px]"
+        />
+      </template>
+    </el-input>
+    <div class="search-content">
+      <el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
+        <el-empty v-if="showEmpty" :description="t('search.pureEmpty')" />
+        <SearchHistory
+          v-if="showSearchHistory"
+          ref="historyRef"
+          v-model:value="historyPath"
+          :options="historyOptions"
+          @click="handleEnter"
+          @delete="handleDelete"
+          @collect="handleCollect"
+          @drag="handleDrag"
+        />
+        <SearchResult
+          v-if="showSearchResult"
+          ref="resultRef"
+          v-model:value="activePath"
+          :options="resultOptions"
+          @click="handleEnter"
+        />
+      </el-scrollbar>
+    </div>
+    <template #footer>
+      <SearchFooter :total="resultOptions.length" />
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.search-content {
+  margin-top: 12px;
+}
+</style>

src/layout/components/lay-search/components/SearchResult.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import type { Props } from "../types";
+import { transformI18n } from "@/plugins/i18n";
+import { useResizeObserver } from "@pureadmin/utils";
+import { useEpThemeStoreHook } from "@/store/modules/epTheme";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import { ref, computed, getCurrentInstance, onMounted } from "vue";
+import EnterOutlined from "@/assets/svg/enter_outlined.svg?component";
+
+interface Emits {
+  (e: "update:value", val: string): void;
+  (e: "enter"): void;
+}
+
+const resultRef = ref();
+const innerHeight = ref();
+const emit = defineEmits<Emits>();
+const instance = getCurrentInstance()!;
+const props = withDefaults(defineProps<Props>(), {});
+
+const itemStyle = computed(() => {
+  return item => {
+    return {
+      background:
+        item?.path === active.value ? useEpThemeStoreHook().epThemeColor : "",
+      color: item.path === active.value ? "#fff" : "",
+      fontSize: item.path === active.value ? "16px" : "14px"
+    };
+  };
+});
+
+const active = computed({
+  get() {
+    return props.value;
+  },
+  set(val: string) {
+    emit("update:value", val);
+  }
+});
+
+/** 鼠标移入 */
+async function handleMouse(item) {
+  active.value = item.path;
+}
+
+function handleTo() {
+  emit("enter");
+}
+
+function resizeResult() {
+  // el-scrollbar max-height="calc(90vh - 140px)"
+  innerHeight.value = window.innerHeight - window.innerHeight / 10 - 140;
+}
+
+useResizeObserver(resultRef, resizeResult);
+
+function handleScroll(index: number) {
+  const curInstance = instance?.proxy?.$refs[`resultItemRef${index}`];
+  if (!curInstance) return 0;
+  const curRef = curInstance[0] as ElRef;
+  const scrollTop = curRef.offsetTop + 128; // 128 两个result-item（56px+56px=112px）高度加上下margin（8px+8px=16px）
+  return scrollTop > innerHeight.value ? scrollTop - innerHeight.value : 0;
+}
+
+onMounted(() => {
+  resizeResult();
+});
+
+defineExpose({ handleScroll });
+</script>
+
+<template>
+  <div ref="resultRef" class="result">
+    <div
+      v-for="(item, index) in options"
+      :key="item.path"
+      :ref="'resultItemRef' + index"
+      class="result-item dark:bg-[#1d1d1d]"
+      :style="itemStyle(item)"
+      @click="handleTo"
+      @mouseenter="handleMouse(item)"
+    >
+      <component :is="useRenderIcon(item.meta?.icon)" />
+      <span class="result-item-title">
+        {{ transformI18n(item.meta?.title) }}
+      </span>
+      <EnterOutlined />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.result {
+  padding-bottom: 12px;
+
+  &-item {
+    display: flex;
+    align-items: center;
+    height: 56px;
+    padding: 14px;
+    margin-top: 8px;
+    cursor: pointer;
+    border: 0.1px solid #ccc;
+    border-radius: 4px;
+    transition: font-size 0.16s;
+
+    &-title {
+      display: flex;
+      flex: 1;
+      margin-left: 5px;
+    }
+  }
+}
+</style>

src/layout/components/lay-search/index.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useBoolean } from "../../hooks/useBoolean";
+import SearchModal from "./components/SearchModal.vue";
+
+const { bool: show, toggle } = useBoolean();
+function handleSearch() {
+  toggle();
+}
+</script>
+
+<template>
+  <div>
+    <div
+      class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
+      @click="handleSearch"
+    >
+      <IconifyIconOffline icon="ri:search-line" />
+    </div>
+    <SearchModal v-model:value="show" />
+  </div>
+</template>

src/layout/components/lay-search/types.ts

@@ -0,0 +1,20 @@
+interface optionsItem {
+  path: string;
+  type: "history" | "collect";
+  meta: {
+    icon?: string;
+    title?: string;
+  };
+}
+
+interface dragItem {
+  oldIndex: number;
+  newIndex: number;
+}
+
+interface Props {
+  value: string;
+  options: Array<optionsItem>;
+}
+
+export type { optionsItem, dragItem, Props };