wui-components-v2 1.1.68 → 1.1.70

package/components/wui-search-history-babbar/wui-search-history-babbar.vue

@@ -1,204 +1,204 @@
-<script setup lang="ts">
-import { computed, defineOptions, onMounted, ref } from 'vue'
-import { useRouter } from 'uni-mini-router'
-import { useMenus } from '../../composables/useMenus'
-import type { MenuItem } from '../../composables/useMenus'
-import { useGlobalToast } from '../../composables/useGlobalToast'
-import { menu } from '../../api/menu'
-import SearchHistory from './components/SearchBar.vue'
-
-defineOptions({
-  name: 'WuiSearchHistoryBabbar',
-})
-
-const { gotoPage, filtermenu, menuList } = useMenus()
-const router = useRouter()
-const toast = useGlobalToast()
-
-function queryList() {
-  // 此处请求仅为演示，请替换为自己项目中的请求
-  menu()
-    .then((res: any) => {
-      if (!res?.blocks?.length) {
-        toast.warning('暂无权限，请重新登录或联系管理员')
-      } else {
-        menuList.value = res?.blocks
-      }
-    })
-    .catch((res: any) => {
-      console.log(res)
-    })
-}
-
-/**
- * 提取树形结构中最深层的数据节点
- * @param treeData - 树形结构数据
- * @param childrenKey - 子节点的键名，默认为 'children'
- * @returns 最深层节点组成的数组
- */
-function extractDeepestNodes<T>(treeData: T[], childrenKey: string = 'children'): T[] {
-  const result: T[] = []
-
-  /**
-   * 递归遍历树节点
-   */
-  function traverse(nodes: T[], depth: number = 0) {
-    for (const node of nodes) {
-      // 检查当前节点是否有子节点
-      const children = (node as any)[childrenKey]
-
-      if (children && Array.isArray(children) && children.length > 0) {
-        // 如果有子节点，继续深入
-        traverse(children, depth + 1)
-      } else {
-        // 如果没有子节点，这是最深层的节点，添加到结果中
-        result.push(node)
-      }
-    }
-  }
-
-  traverse(treeData)
-  return result
-}
-
-const a = computed(() => {
-  return extractDeepestNodes(filtermenu.value, 'items')
-})
-
-const searchQuery = ref('')
-const searchHistory = ref<string[]>([])
-const inputRef = ref<HTMLInputElement | null>(null)
-
-const filteredMenus = computed<MenuItem[]>(() => {
-  if (!searchQuery.value.trim()) {
-    return a.value
-  }
-  const query = searchQuery.value.toLowerCase().trim()
-  return a.value.filter(
-    menu => menu.title.toLowerCase().includes(query) || (menu.tip && menu.tip.toLowerCase().includes(query))
-  )
-})
-
-function highlightedLabel(menu: MenuItem) {
-  if (!searchQuery.value.trim()) return menu.title
-  const query = searchQuery.value.toLowerCase().trim()
-  const index = menu.title.toLowerCase().indexOf(query)
-  if (index === -1) return menu.title
-  const before = menu.title.substring(0, index)
-  const match = menu.title.substring(index, index + query.length)
-  const after = menu.title.substring(index + query.length)
-  return `${before}<mark class="bg-yellow-200 text-yellow-800 rounded px-0.5">${match}</mark>${after}`
-}
-
-// const handleBack = () => {
-//   router.back()
-// }
-
-function handleClear() {
-  searchQuery.value = ''
-  inputRef?.value?.focus()
-}
-
-function handleMenuClick(menu: MenuItem) {
-  if (searchQuery.value.trim()) {
-    addToHistory(searchQuery.value.trim())
-  }
-  gotoPage(menu)
-}
-
-function addToHistory(keyword: string) {
-  if (!keyword.trim()) return
-  const current = [...searchHistory.value]
-  const index = current.indexOf(keyword)
-  if (index > -1) {
-    current.splice(index, 1)
-  }
-  current.unshift(keyword)
-  if (current.length > 5) {
-    current.pop()
-  }
-  searchHistory.value = current
-  localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value))
-}
-
-function handleSelectHistory(keyword: string) {
-  searchQuery.value = keyword
-}
-
-onMounted(() => {
-  queryList()
-  const saved = localStorage.getItem('searchHistory')
-  if (saved) {
-    try {
-      searchHistory.value = JSON.parse(saved)
-    } catch {
-      searchHistory.value = []
-    }
-  }
-})
-</script>
-
-<template>
-  <view class="min-h-screen bg-slate-50">
-    <view class="sticky top-0 z-10 bg-white shadow-sm">
-      <view class="flex items-center gap-3 px-4 py-3">
-        <view class="h-11 flex flex-1 items-center rounded-xl bg-slate-100 px-4">
-          <input
-            ref="inputRef"
-            v-model="searchQuery"
-            type="text"
-            placeholder="搜索菜单、功能..."
-            class="ml-2 flex-1 bg-transparent text-base text-slate-800 outline-none placeholder:text-slate-400"
-          />
-          <view
-            v-if="searchQuery"
-            class="cursor-pointer rounded-full p-1 transition-colors hover:bg-slate-200"
-            @click="handleClear"
-          >
-            <wd-icon name="close-circle-filled" size="22px" color="#ccc" />
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <view class="px-4 pb-4">
-      <SearchHistory v-model="searchHistory" @select="handleSelectHistory" />
-
-      <view v-if="filteredMenus.length === 0" class="mt-6">
-        <p class="text-center text-sm text-slate-400">未找到相关菜单</p>
-      </view>
-
-      <view v-else class="mt-4">
-        <p class="mb-3 text-xs text-slate-400">
-          {{ searchQuery.trim() ? `找到 ${filteredMenus.length} 个相关菜单` : '全部菜单' }}
-        </p>
-        <view class="space-y-2">
-          <view
-            v-for="menu in filteredMenus"
-            :key="menu.id"
-            class="flex cursor-pointer items-center gap-3 rounded-xl bg-white p-3 shadow-sm transition-all duration-200 active:scale-[0.98] hover:shadow-md"
-            @click="handleMenuClick(menu)"
-          >
-            <view
-              :style="{ background: menu.color }"
-              class="h-10 w-10 flex flex-shrink-0 items-center justify-center rounded-lg"
-            >
-              <!-- <component
-                v-if="iconMap[menu.icon]"
-                :is="iconMap[menu.icon]"
-                class="w-5 h-5 text-white"
-              /> -->
-              <wd-icon name="picture" size="22px" color="#FFF" />
-            </view>
-            <view class="flex-1 text-left">
-              <p class="text-base text-slate-800 font-medium" v-html="highlightedLabel(menu)" />
-              <p v-if="menu.tip" class="mt-0.5 text-xs text-slate-400">
-                {{ menu.tip }}
-              </p>
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-  </view>
-</template>
+<script setup lang="ts">
+import { computed, defineOptions, onMounted, ref } from 'vue'
+import { useRouter } from 'uni-mini-router'
+import { useMenus } from '../../composables/useMenus'
+import type { MenuItem } from '../../composables/useMenus'
+import { useGlobalToast } from '../../composables/useGlobalToast'
+import { menu } from '../../api/menu'
+import SearchHistory from './components/SearchBar.vue'
+
+defineOptions({
+  name: 'WuiSearchHistoryBabbar',
+})
+
+const { gotoPage, filtermenu, menuList } = useMenus()
+const router = useRouter()
+const toast = useGlobalToast()
+
+function queryList() {
+  // 此处请求仅为演示，请替换为自己项目中的请求
+  menu()
+    .then((res: any) => {
+      if (!res?.blocks?.length) {
+        toast.warning('暂无权限，请重新登录或联系管理员')
+      } else {
+        menuList.value = res?.blocks
+      }
+    })
+    .catch((res: any) => {
+      console.log(res)
+    })
+}
+
+/**
+ * 提取树形结构中最深层的数据节点
+ * @param treeData - 树形结构数据
+ * @param childrenKey - 子节点的键名，默认为 'children'
+ * @returns 最深层节点组成的数组
+ */
+function extractDeepestNodes<T>(treeData: T[], childrenKey: string = 'children'): T[] {
+  const result: T[] = []
+
+  /**
+   * 递归遍历树节点
+   */
+  function traverse(nodes: T[], depth: number = 0) {
+    for (const node of nodes) {
+      // 检查当前节点是否有子节点
+      const children = (node as any)[childrenKey]
+
+      if (children && Array.isArray(children) && children.length > 0) {
+        // 如果有子节点，继续深入
+        traverse(children, depth + 1)
+      } else {
+        // 如果没有子节点，这是最深层的节点，添加到结果中
+        result.push(node)
+      }
+    }
+  }
+
+  traverse(treeData)
+  return result
+}
+
+const a = computed(() => {
+  return extractDeepestNodes(filtermenu.value, 'items')
+})
+
+const searchQuery = ref('')
+const searchHistory = ref<string[]>([])
+const inputRef = ref<HTMLInputElement | null>(null)
+
+const filteredMenus = computed<MenuItem[]>(() => {
+  if (!searchQuery.value.trim()) {
+    return a.value
+  }
+  const query = searchQuery.value.toLowerCase().trim()
+  return a.value.filter(
+    menu => menu.title.toLowerCase().includes(query) || (menu.tip && menu.tip.toLowerCase().includes(query))
+  )
+})
+
+function highlightedLabel(menu: MenuItem) {
+  if (!searchQuery.value.trim()) return menu.title
+  const query = searchQuery.value.toLowerCase().trim()
+  const index = menu.title.toLowerCase().indexOf(query)
+  if (index === -1) return menu.title
+  const before = menu.title.substring(0, index)
+  const match = menu.title.substring(index, index + query.length)
+  const after = menu.title.substring(index + query.length)
+  return `${before}<mark class="bg-yellow-200 text-yellow-800 rounded px-0.5">${match}</mark>${after}`
+}
+
+// const handleBack = () => {
+//   router.back()
+// }
+
+function handleClear() {
+  searchQuery.value = ''
+  inputRef?.value?.focus()
+}
+
+function handleMenuClick(menu: MenuItem) {
+  if (searchQuery.value.trim()) {
+    addToHistory(searchQuery.value.trim())
+  }
+  gotoPage(menu)
+}
+
+function addToHistory(keyword: string) {
+  if (!keyword.trim()) return
+  const current = [...searchHistory.value]
+  const index = current.indexOf(keyword)
+  if (index > -1) {
+    current.splice(index, 1)
+  }
+  current.unshift(keyword)
+  if (current.length > 5) {
+    current.pop()
+  }
+  searchHistory.value = current
+  localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value))
+}
+
+function handleSelectHistory(keyword: string) {
+  searchQuery.value = keyword
+}
+
+onMounted(() => {
+  queryList()
+  const saved = localStorage.getItem('searchHistory')
+  if (saved) {
+    try {
+      searchHistory.value = JSON.parse(saved)
+    } catch {
+      searchHistory.value = []
+    }
+  }
+})
+</script>
+
+<template>
+  <view class="min-h-screen bg-slate-50">
+    <view class="sticky top-0 z-10 bg-white shadow-sm">
+      <view class="flex items-center gap-3 px-4 py-3">
+        <view class="h-11 flex flex-1 items-center rounded-xl bg-slate-100 px-4">
+          <input
+            ref="inputRef"
+            v-model="searchQuery"
+            type="text"
+            placeholder="搜索菜单、功能..."
+            class="ml-2 flex-1 bg-transparent text-base text-slate-800 outline-none placeholder:text-slate-400"
+          />
+          <view
+            v-if="searchQuery"
+            class="cursor-pointer rounded-full p-1 transition-colors hover:bg-slate-200"
+            @click="handleClear"
+          >
+            <wd-icon name="close-circle-filled" size="22px" color="#ccc" />
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="px-4 pb-4">
+      <SearchHistory v-model="searchHistory" @select="handleSelectHistory" />
+
+      <view v-if="filteredMenus.length === 0" class="mt-6">
+        <p class="text-center text-sm text-slate-400">未找到相关菜单</p>
+      </view>
+
+      <view v-else class="mt-4">
+        <p class="mb-3 text-xs text-slate-400">
+          {{ searchQuery.trim() ? `找到 ${filteredMenus.length} 个相关菜单` : '全部菜单' }}
+        </p>
+        <view class="space-y-2">
+          <view
+            v-for="menu in filteredMenus"
+            :key="menu.id"
+            class="flex cursor-pointer items-center gap-3 rounded-xl bg-white p-3 shadow-sm transition-all duration-200 active:scale-[0.98] hover:shadow-md"
+            @click="handleMenuClick(menu)"
+          >
+            <view
+              :style="{ background: menu.color }"
+              class="h-10 w-10 flex flex-shrink-0 items-center justify-center rounded-lg"
+            >
+              <!-- <component
+                v-if="iconMap[menu.icon]"
+                :is="iconMap[menu.icon]"
+                class="w-5 h-5 text-white"
+              /> -->
+              <wd-icon name="picture" size="22px" color="#FFF" />
+            </view>
+            <view class="flex-1 text-left">
+              <p class="text-base text-slate-800 font-medium" v-html="highlightedLabel(menu)" />
+              <p v-if="menu.tip" class="mt-0.5 text-xs text-slate-400">
+                {{ menu.tip }}
+              </p>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>