molong/laravel_swoole
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

格式化代码，websocket功能完善

Browse Source
This commit is contained in:
龙渊
2026-02-18 21:50:05 +08:00
parent 6543e2ccdd
commit b6c133952b
101 changed files with 15829 additions and 10739 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/admin/src/layouts/components/search.vue
+77 -71
View File
@@ -36,7 +36,9 @@
</div>
<div class="result-content">
<div class="result-title">{{ item.title }}</div>
<div v-if="item.breadcrumbs" class="result-path">{{ item.breadcrumbs }}</div>
<div v-if="item.breadcrumbs" class="result-path">
{{ item.breadcrumbs }}
</div>
</div>
</div>
</div>
@@ -46,20 +48,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>
@@ -68,133 +70,137 @@
</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) ||
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">