前端代码格式化

resources/admin/src/layouts/components/search.vue

@@ -1,36 +1,14 @@
 <template>
-	<a-modal
-		v-model:open="visible"
-		:title="$t('common.searchMenu')"
-		:footer="null"
-		:width="600"
-		:destroyOnClose="true"
-		@cancel="handleClose"
-	>
+	<a-modal v-model:open="visible" :title="$t('common.searchMenu')" :footer="null" :width="600" :destroyOnClose="true" @cancel="handleClose">
 		<div class="menu-search">
-			<a-input
-				v-model:value="searchKeyword"
-				:placeholder="$t('common.searchPlaceholder')"
-				size="large"
-				allow-clear
-				@input="handleSearch"
-				@keydown="handleKeydown"
-				ref="searchInputRef"
-			>
+			<a-input v-model:value="searchKeyword" :placeholder="$t('common.searchPlaceholder')" size="large" allow-clear @input="handleSearch" @keydown="handleKeydown" ref="searchInputRef">
 				<template #prefix>
 					<SearchOutlined />
 				</template>
 			</a-input>
 
 			<div v-if="searchResults.length > 0" class="search-results">
-				<div
-					v-for="(item, index) in searchResults"
-					:key="item.path"
-					class="result-item"
-					:class="{ active: selectedIndex === index }"
-					@click="handleSelect(item)"
-					@mouseenter="selectedIndex = index"
-				>
+				<div v-for="(item, index) in searchResults" :key="item.path" class="result-item" :class="{ active: selectedIndex === index }" @click="handleSelect(item)" @mouseenter="selectedIndex = index">
 					<div class="result-icon">
 						<component :is="item.icon || 'MenuOutlined'" />
 					</div>
@@ -48,20 +26,20 @@
 			</div>
 
 			<div v-else class="search-tips">
-				<div class="tip-title">{{ $t("common.searchTips") }}</div>
+				<div class="tip-title">{{ $t('common.searchTips') }}</div>
 				<div class="tip-list">
 					<div class="tip-item">
 						<kbd>↑</kbd>
 						<kbd>↓</kbd>
-						<span>{{ $t("common.navigateResults") }}</span>
+						<span>{{ $t('common.navigateResults') }}</span>
 					</div>
 					<div class="tip-item">
 						<kbd>Enter</kbd>
-						<span>{{ $t("common.selectResult") }}</span>
+						<span>{{ $t('common.selectResult') }}</span>
 					</div>
 					<div class="tip-item">
 						<kbd>Esc</kbd>
-						<span>{{ $t("common.closeSearch") }}</span>
+						<span>{{ $t('common.closeSearch') }}</span>
 					</div>
 				</div>
 			</div>
@@ -70,137 +48,128 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, nextTick } from "vue";
-import { useRouter } from "vue-router";
-import { SearchOutlined, MenuOutlined } from "@ant-design/icons-vue";
-import { useUserStore } from "@/stores/modules/user";
-import { useI18n } from "vue-i18n";
+import { ref, computed, watch, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { SearchOutlined, MenuOutlined } from '@ant-design/icons-vue'
+import { useUserStore } from '@/stores/modules/user'
+import { useI18n } from 'vue-i18n'
 
 // 定义组件名称
 defineOptions({
-	name: "MenuSearch",
-});
+	name: 'MenuSearch',
+})
 
-const { t } = useI18n();
-const router = useRouter();
-const userStore = useUserStore();
+const { t } = useI18n()
+const router = useRouter()
+const userStore = useUserStore()
 
-const visible = defineModel("visible", { type: Boolean, default: false });
-const searchKeyword = ref("");
-const searchResults = ref([]);
-const selectedIndex = ref(0);
-const searchInputRef = ref(null);
+const visible = defineModel('visible', { type: Boolean, default: false })
+const searchKeyword = ref('')
+const searchResults = ref([])
+const selectedIndex = ref(0)
+const searchInputRef = ref(null)
 
 // 将扁平化的菜单数据转换为可搜索格式
 function flattenMenus(menus, breadcrumbs = []) {
-	const result = [];
+	const result = []
 
 	menus.forEach((menu) => {
-		if (menu.hidden) return;
+		if (menu.hidden) return
 
-		const currentBreadcrumbs = [...breadcrumbs, menu.title];
+		const currentBreadcrumbs = [...breadcrumbs, menu.title]
 
 		// 如果有路径且不是外部链接，添加到搜索结果
-		if (menu.path && !menu.path.startsWith("http")) {
+		if (menu.path && !menu.path.startsWith('http')) {
 			result.push({
 				title: menu.title,
 				path: menu.path,
 				icon: menu.icon,
-				breadcrumbs: currentBreadcrumbs.join(" / "),
-			});
+				breadcrumbs: currentBreadcrumbs.join(' / '),
+			})
 		}
 
 		// 递归处理子菜单
 		if (menu.children && menu.children.length > 0) {
-			const children = flattenMenus(menu.children, currentBreadcrumbs);
-			result.push(...children);
+			const children = flattenMenus(menu.children, currentBreadcrumbs)
+			result.push(...children)
 		}
-	});
+	})
 
-	return result;
+	return result
 }
 
 // 获取所有菜单项
 const allMenus = computed(() => {
-	const menus = userStore.menu || [];
-	return flattenMenus(menus);
-});
+	const menus = userStore.menu || []
+	return flattenMenus(menus)
+})
 
 // 执行搜索
 function handleSearch() {
 	if (!searchKeyword.value.trim()) {
-		searchResults.value = [];
-		selectedIndex.value = 0;
-		return;
+		searchResults.value = []
+		selectedIndex.value = 0
+		return
 	}
 
-	const keyword = searchKeyword.value.toLowerCase().trim();
+	const keyword = searchKeyword.value.toLowerCase().trim()
 	searchResults.value = allMenus.value.filter((menu) => {
-		return (
-			menu.title.toLowerCase().includes(keyword) ||
-			menu.breadcrumbs.toLowerCase().includes(keyword)
-		);
-	});
+		return menu.title.toLowerCase().includes(keyword) || menu.breadcrumbs.toLowerCase().includes(keyword)
+	})
 
-	selectedIndex.value = 0;
+	selectedIndex.value = 0
 }
 
 // 键盘导航
 function handleKeydown(e) {
-	if (!searchResults.value.length) return;
+	if (!searchResults.value.length) return
 
 	switch (e.key) {
-		case "ArrowUp":
-			e.preventDefault();
-			selectedIndex.value =
-				selectedIndex.value > 0
-					? selectedIndex.value - 1
-					: searchResults.value.length - 1;
-			break;
-		case "ArrowDown":
-			e.preventDefault();
-			selectedIndex.value =
-				selectedIndex.value < searchResults.value.length - 1
-					? selectedIndex.value + 1
-					: 0;
-			break;
-		case "Enter":
-			e.preventDefault();
+		case 'ArrowUp':
+			e.preventDefault()
+			selectedIndex.value = selectedIndex.value > 0 ? selectedIndex.value - 1 : searchResults.value.length - 1
+			break
+		case 'ArrowDown':
+			e.preventDefault()
+			selectedIndex.value = selectedIndex.value < searchResults.value.length - 1 ? selectedIndex.value + 1 : 0
+			break
+		case 'Enter':
+			e.preventDefault()
 			if (searchResults.value[selectedIndex.value]) {
-				handleSelect(searchResults.value[selectedIndex.value]);
+				handleSelect(searchResults.value[selectedIndex.value])
 			}
-			break;
-		case "Escape":
-			e.preventDefault();
-			handleClose();
-			break;
+			break
+		case 'Escape':
+			e.preventDefault()
+			handleClose()
+			break
 	}
 }
 
 // 选择菜单项
 function handleSelect(item) {
-	visible.value = false;
-	router.push(item.path);
+	visible.value = false
+	router.push(item.path)
 }
 
 // 关闭搜索弹窗
 function handleClose() {
-	visible.value = false;
-	searchKeyword.value = "";
-	searchResults.value = [];
-	selectedIndex.value = 0;
+	visible.value = false
+	searchKeyword.value = ''
+	searchResults.value = []
+	selectedIndex.value = 0
 }
 
 // 监听弹窗显示，自动聚焦输入框
 watch(visible, (newVal) => {
 	if (newVal) {
 		nextTick(() => {
-			searchInputRef.value?.focus();
-		});
+			searchInputRef.value?.focus()
+		})
 	} else {
-		handleClose();
+		handleClose()
 	}
-});
+})
 </script>
 
 <style scoped lang="scss">