11<template >
2- <el-dropdown placement =" bottom-start" class =" workspace-dropdown" >
2+ <el-dropdown placement =" bottom-start" class =" workspace-dropdown" popper-class = " workspace-dropdown-popper " >
33 <el-button text style =" font-size : 14px " class =" workspace-dropdown__button" >
44 <AppIcon iconName =" app-workspace" style =" font-size : 18px " ></AppIcon >
55 <span class =" ellipsis" style =" max-width : 155px " >
1010 </el-icon >
1111 </el-button >
1212 <template #dropdown >
13+ <div class =" w-full p-8" style =" box-sizing : border-box " >
14+ <el-input v-model =" filterText" :placeholder =" $t('common.search')" prefix-icon =" Search" clearable />
15+ </div >
1316 <el-dropdown-menu v-loading =" loading" >
14- <el-dropdown-item
15- v-for =" item in data"
16- :key =" item.id"
17- :class =" item.id === currentWorkspace?.id ? 'active' : ''"
18- @click =" changeWorkspace(item)"
19- >
20- <AppIcon class =" mr-8" iconName =" app-workspace" style =" font-size : 16px " ></AppIcon >
21- <span class =" ellipsis" style =" max-width : 230px " >
22- {{ item.name }}
23- </span >
24- <el-icon
25- v-show =" item.id === currentWorkspace?.id"
26- class =" ml-8"
27- style =" font-size : 16px ; margin-right : 0 "
28- >
17+ <el-dropdown-item v-for =" item in filterData" :key =" item.id"
18+ :class =" `${item.id === currentWorkspace?.id ? 'active' : ''} flex-between`" @click =" changeWorkspace(item)" >
19+ <div class =" flex align-center" >
20+ <AppIcon class =" mr-8" iconName =" app-workspace" style =" font-size : 16px " ></AppIcon >
21+ <span class =" ellipsis" >
22+ {{ item.name }}
23+ </span >
24+ </div >
25+ <el-icon v-show =" item.id === currentWorkspace?.id" class =" ml-8" style =" font-size : 16px ; margin-right : 0 " >
2926 <Check />
3027 </el-icon >
3128 </el-dropdown-item >
3532</template >
3633
3734<script setup lang="ts">
38- import { computed , ref } from ' vue'
35+ import { watch , ref } from ' vue'
3936import type { WorkspaceItem } from ' @/api/type/workspace'
4037import useStore from ' @/stores'
4138const props = defineProps ({
@@ -56,6 +53,18 @@ function changeWorkspace(item: WorkspaceItem) {
5653 folder .setCurrentFolder ({})
5754 emit (' changeWorkspace' , item )
5855}
56+
57+ const filterText = ref (' ' )
58+ const filterData = ref <any []>([])
59+
60+ watch ([() => props .data , () => filterText .value ], () => {
61+ if (! filterText .value .length ) {
62+ filterData .value = props .data
63+ }
64+ filterData .value = props .data .filter ((v : any ) =>
65+ v .name .toLowerCase ().includes (filterText .value .toLowerCase ()),
66+ )
67+ }, { immediate: true })
5968 </script >
6069<style lang="scss" scoped>
6170.workspace-dropdown {
@@ -66,3 +75,8 @@ function changeWorkspace(item: WorkspaceItem) {
6675 }
6776}
6877 </style >
78+ <style lang="scss">
79+ .workspace-dropdown-popper {
80+ width : 280px ;
81+ }
82+ </style >
0 commit comments