feat: 添加搜索下拉框

src/components/Divider.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="['divider', type]"
     :style="{
-      margin: type === 'horizontal' ? `${margin || 24}px 0` : `0 ${margin || 8}px`
+      margin: type === 'horizontal' ? `${margin >= 0 ? margin : 24}px 0` : `0 ${margin >= 0 ? margin : 8}px`
     }"
   ></div>
 </template>
@@ -12,7 +12,7 @@ withDefaults(defineProps<{
   margin?: number
 }>(), {
   type: 'horizontal',
-  margin: 0,
+  margin: -1,
 })
 </script>
 

src/components/Input.vue

@@ -4,6 +4,7 @@
     :class="{
       'disabled': disabled,
       'focused': focused,
+      'simple': simple,
     }"
   >
     <span class="prefix">
@@ -34,9 +35,11 @@ withDefaults(defineProps<{
   value: string
   disabled?: boolean
   placeholder?: string
+  simple?: boolean
 }>(), {
   disabled: false,
   placeholder: '',
+  simple: false,
 })
 
 const emit = defineEmits<{
@@ -114,6 +117,10 @@ defineExpose({
     }
   }
 
+  &.simple {
+    border: 0;
+  }
+
   .prefix, .suffix {
     display: flex;
     justify-content: center;

src/components/Select.vue

@@ -21,13 +21,17 @@
     v-else
   >
     <template #content>
+      <template v-if="search">
+        <Input ref="searchInputRef" simple :placeholder="searchLabel" v-model:value="searchKey" :style="{ width: width + 2 + 'px' }" />
+        <Divider :margin="0" />
+      </template>
       <div class="options" :style="{ width: width + 2 + 'px' }">
         <div class="option" 
           :class="{
             'disabled': option.disabled,
             'selected': option.value === value,
           }"
-          v-for="option in options" 
+          v-for="option in showOptions" 
           :key="option.value"
           @click="handleSelect(option)"
         >{{ option.label }}</div>
@@ -47,6 +51,11 @@
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import Popover from './Popover.vue'
+import Input from './Input.vue'
+import Divider from './Divider.vue'
+import { watch } from 'vue';
+import { nextTick } from 'vue';
+import { onBeforeUnmount } from 'vue';
 
 interface SelectOption {
   label: string
@@ -58,12 +67,12 @@ const props = withDefaults(defineProps<{
   value: string | number
   options: SelectOption[]
   disabled?: boolean
+  search?: boolean
+  searchLabel?: string
 }>(), {
   disabled: false,
-})
+  search: false,
-
+  searchLabel: '搜索',
-const showLabel = computed(() => {
-  return props.options.find(item => item.value === props.value)?.label || props.value
 })
 
 const emit = defineEmits<{
@@ -72,7 +81,34 @@ const emit = defineEmits<{
 
 const popoverVisible = ref(false)
 const selectRef = ref<HTMLElement>()
+const searchInputRef = ref<InstanceType<typeof Input>>()
 const width = ref(0)
+const searchKey = ref('')
+
+const showLabel = computed(() => {
+  return props.options.find(item => item.value === props.value)?.label || props.value
+})
+
+const showOptions = computed(() => {
+  if (!props.search) return props.options
+  if (!searchKey.value.trim()) return props.options
+  const opts = props.options.filter(item => {
+    return item.label.toLowerCase().indexOf(searchKey.value.toLowerCase()) !== -1
+  })
+  return opts.length ? opts : props.options
+})
+
+watch(popoverVisible, () => {
+  if (popoverVisible.value) {
+    nextTick(() => {
+      if (searchInputRef.value) searchInputRef.value.focus()
+    })
+  }
+  else searchKey.value = ''
+})
+onBeforeUnmount(() => {
+  searchKey.value = ''
+})
 
 const updateWidth = () => {
   if (!selectRef.value) return

src/views/Editor/Toolbar/ElementAnimationPanel.vue

@@ -74,7 +74,7 @@
           </div>
 
           <div class="configs" v-if="handleElementAnimation[0]?.elId === element.elId">
-            <Divider style="margin: 16px 0;" />
+            <Divider :margin="16" />
 
             <div class="config-item">
               <div style="width: 35%;">持续时长：</div>

src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue

@@ -54,6 +54,8 @@
       <Select
         style="width: 60%;;"
         :value="richTextAttrs.fontname"
+        search
+        searchLabel="搜索字体"
         @update:value="value => updateFontStyle('fontname', value as string)"
         :options="[
           ...availableFonts,
@@ -67,6 +69,8 @@
       <Select
         style="width: 40%;"
         :value="richTextAttrs.fontsize"
+        search
+        searchLabel="搜索字号"
         @update:value="value => updateFontStyle('fontsize', value as string)"
         :options="fontSizeOptions.map(item => ({
           label: item, value: item

src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue

@@ -4,6 +4,8 @@
       <Select
         style="width: 50%;"
         :value="textAttrs.fontname"
+        search
+        searchLabel="搜索字体"
         @update:value="value => updateTextAttrs({ fontname: value as string })"
         :options="[
           ...availableFonts,
@@ -17,6 +19,8 @@
       <Select
         style="width: 50%;"
         :value="textAttrs.fontsize"
+        search
+        searchLabel="搜索字号"
         @update:value="value => updateTextAttrs({ fontsize: value as string })"
         :options="fontSizeOptions.map(item => ({
           label: item, value: item

src/views/Editor/Toolbar/SlideDesignPanel.vue

@@ -128,6 +128,8 @@
       <Select
         style="width: 60%;"
         :value="theme.fontName"
+        search
+        searchLabel="搜索字体"
         @update:value="value => updateTheme({ fontName: value as string })"
         :options="[
           ...availableFonts,

src/views/Editor/Toolbar/common/RichTextBase.vue

@@ -5,6 +5,8 @@
         class="font-select"
         style="width: 60%;"
         :value="richTextAttrs.fontname"
+        search
+        searchLabel="搜索字体"
         @update:value="value => emitRichTextCommand('fontname', value as string)"
         :options="[
           ...availableFonts,
@@ -18,6 +20,8 @@
       <Select
         style="width: 40%;"
         :value="richTextAttrs.fontsize"
+        search
+        searchLabel="搜索字号"
         @update:value="value => emitRichTextCommand('fontsize', value as string)"
         :options="fontSizeOptions.map(item => ({
           label: item, value: item

src/views/Mobile/MobileEditor/ElementToolbar.vue

@@ -46,7 +46,7 @@
           ><IconFontSize />-</Button>
         </ButtonGroup>
         
-        <Divider style="margin: 20px 0;" />
+        <Divider :margin="20" />
 
         <RadioGroup 
           class="row" 
@@ -59,7 +59,7 @@
           <RadioButton value="right" style="flex: 1;"><IconAlignTextRight /></RadioButton>
         </RadioGroup>
         
-        <Divider style="margin: 20px 0;" />
+        <Divider :margin="20" />
 
         <div class="row-block">
           <div class="label">文字颜色：</div>
@@ -93,7 +93,7 @@
           <Button style="flex: 1;" @click="deleteElement()"><IconDelete class="icon" /> 删除</Button>
         </ButtonGroup>
         
-        <Divider style="margin: 20px 0;" />
+        <Divider :margin="20" />
 
         <ButtonGroup class="row">
           <Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.TOP)"><IconSendToBack class="icon" /> 置顶</Button>
@@ -102,7 +102,7 @@
           <Button style="flex: 1;" @click="orderElement(handleElement!, ElementOrderCommands.DOWN)"><IconSentToBack class="icon" /> 下移</Button>
         </ButtonGroup>
         
-        <Divider style="margin: 20px 0;" />
+        <Divider :margin="20" />
 
         <ButtonGroup class="row">
           <Button style="flex: 1;" @click="alignElementToCanvas(ElementAlignCommands.LEFT)"><IconAlignLeft class="icon" /> 左对齐</Button>