refactor: 替换Input、Message

src/components/Input.vue

@@ -11,12 +11,15 @@
     </span>
     <input
       type="text"
+      ref="inputRef"
       :disabled="disabled"
       :value="value" 
       :placeholder="placeholder"
       @input="$event => handleInput($event)"
-      @focus="focused = true"
+      @focus="$event => handleFocus($event)"
-      @blur="focused = false"
+      @blur="$event => handleBlur($event)"
+      @change="$event => emit('change', $event)"
+      @keydown.enter="$event => emit('enter', $event)"
     />
     <span class="suffix">
       <slot name="suffix"></slot>
@@ -38,13 +41,36 @@ withDefaults(defineProps<{
 
 const emit = defineEmits<{
   (event: 'update:value', payload: string): void
+  (event: 'input', payload: Event): void
+  (event: 'change', payload: Event): void
+  (event: 'blur', payload: Event): void
+  (event: 'focus', payload: Event): void
+  (event: 'enter', payload: Event): void
 }>()
 
 const focused = ref(false)
 
 const handleInput = (e: Event) => {
   emit('update:value', (e.target as HTMLInputElement).value)
+  emit('input', e)
 }
+const handleBlur = (e: Event) => {
+  focused.value = false
+  emit('blur', e)
+}
+const handleFocus = (e: Event) => {
+  focused.value = true
+  emit('focus', e)
+}
+
+const inputRef = ref<HTMLInputElement>()
+const focus = () => {
+  if (inputRef.value) inputRef.value.focus()
+}
+
+defineExpose({
+  focus,
+})
 </script>
 
 <style lang="scss" scoped>
@@ -55,7 +81,7 @@ const handleInput = (e: Event) => {
   border-radius: $borderRadius;
   transition: border-color .25s;
   font-size: 13px;
-  display: inline-flex;
+  display: flex;
 
   input {
     min-width: 0;

src/components/NumberInput.vue

@@ -15,8 +15,11 @@
         :disabled="disabled"
         v-model="number" 
         :placeholder="placeholder"
-        @focus="focused = true"
+        @input="$event => emit('input', $event)"
-        @blur="focused = false"
+        @focus="$event => handleFocus($event)"
+        @blur="$event => handleBlur($event)"
+        @change="$event => emit('change', $event)"
+        @keydown.enter="$event => emit('enter', $event)"
       />
       <div class="handlers">
         <span class="handler" @click="number += step">
@@ -53,6 +56,11 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
   (event: 'update:value', payload: number): void
+  (event: 'input', payload: Event): void
+  (event: 'change', payload: Event): void
+  (event: 'blur', payload: Event): void
+  (event: 'focus', payload: Event): void
+  (event: 'enter', payload: Event): void
 }>()
 
 const number = ref(0)
@@ -73,6 +81,15 @@ watch(number, () => {
   number.value = value
   emit('update:value', number.value)
 })
+
+const handleBlur = (e: Event) => {
+  focused.value = false
+  emit('blur', e)
+}
+const handleFocus = (e: Event) => {
+  focused.value = true
+  emit('focus', e)
+}
 </script>
 
 <style lang="scss" scoped>

src/utils/message.ts

@@ -51,7 +51,7 @@ const message: Message = (options: MessageOptions) => {
       position: fixed;
       top: 0;
       left: 0;
-      z-index: 1010;
+      z-index: 6000;
       pointer-events: none;
       display: flex;
       flex-direction: column;

src/views/Editor/Canvas/LinkDialog.vue

@@ -47,10 +47,10 @@ import useLink from '@/hooks/useLink'
 
 import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import Tabs from '@/components/Tabs.vue'
+import Input from '@/components/Input.vue'
 import {
   Button,
   Select,
-  Input,
 } from 'ant-design-vue'
 const SelectOption = Select.Option
 

src/views/Editor/CanvasTool/MediaInput.vue

@@ -26,12 +26,10 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import {
+import { Button } from 'ant-design-vue'
-  Button,
+import message from '@/utils/message'
-  Input,
-  message,
-} from 'ant-design-vue'
 import Tabs from '@/components/Tabs.vue'
+import Input from '@/components/Input.vue'
 
 type TypeKey = 'video' | 'audio'
 interface TabItem {

src/views/Editor/CanvasTool/TableGenerator.vue

@@ -53,10 +53,10 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+import message from '@/utils/message'
 import {
   InputNumber,
   Button,
-  message,
 } from 'ant-design-vue'
 
 interface InsertData {

src/views/Editor/EditorHeader/index.vue

@@ -85,9 +85,9 @@ import HotkeyDoc from './HotkeyDoc.vue'
 import FileInput from '@/components/FileInput.vue'
 import FullscreenSpin from '@/components/FullscreenSpin.vue'
 import Drawer from '@/components/Drawer.vue'
+import Input from '@/components/Input.vue'
 import {
   Popover,
-  Input,
 } from 'ant-design-vue'
 
 const mainStore = useMainStore()
@@ -179,7 +179,7 @@ const setDialogForExport = (type: DialogForExportTypes) => {
   }
 }
 .title {
-  height: 30px;
+  height: 32px;
   margin-left: 2px;
   font-size: 13px;
 
@@ -193,8 +193,8 @@ const setDialogForExport = (type: DialogForExportTypes) => {
   .title-text {
     min-width: 20px;
     max-width: 400px;
-    line-height: 30px;
+    line-height: 32px;
-    padding: 0 6px;
+    padding: 0 8px;
     border-radius: $borderRadius;
     cursor: pointer;
 

src/views/Editor/SearchPanel.vue

@@ -13,7 +13,7 @@
     />
 
     <div class="content" :class="type" @mousedown.stop>
-      <Input class="input" v-model:value="searchWord" placeholder="输入查找内容" @keydown.enter="searchNext()" ref="searchInpRef">
+      <Input class="input" v-model:value="searchWord" placeholder="输入查找内容" @enter="searchNext()" ref="searchInpRef">
         <template #suffix>
           <span class="count">{{searchIndex + 1}}/{{searchResults.length}}</span>
           <Divider type="vertical" />
@@ -21,7 +21,7 @@
           <IconRight class="next-btn right" @click="searchNext()" />
         </template>
       </Input>
-      <Input class="input" v-model:value="replaceWord" placeholder="输入替换内容" @keydown.enter="replace()" v-if="type === 'replace'"></Input>
+      <Input class="input" v-model:value="replaceWord" placeholder="输入替换内容" @enter="replace()" v-if="type === 'replace'"></Input>
       <div class="footer" v-if="type === 'replace'">
         <Button :disabled="!searchWord" style="margin-left: 5px;" @click="replace()">替换</Button>
         <Button :disabled="!searchWord" type="primary" style="margin-left: 5px;" @click="replaceAll()">全部替换</Button>
@@ -37,9 +37,9 @@ import useSearch from '@/hooks/useSearch'
 import MoveablePanel from '@/components/MoveablePanel.vue'
 import Tabs from '@/components/Tabs.vue'
 import Divider from '@/components/Divider.vue'
+import Input from '@/components/Input.vue'
 import {
   Button,
-  Input,
 } from 'ant-design-vue'
 
 type TypeKey = 'search' | 'replace'
@@ -97,6 +97,7 @@ watch(type, () => {
 }
 .count {
   font-size: 12px;
+  margin-right: 8px;
   user-select: none;
 }
 .next-btn {
@@ -124,7 +125,7 @@ watch(type, () => {
   height: 32px;
   position: absolute;
   top: 8px;
-  right: 0;
+  right: 3px;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -309,6 +309,7 @@ import emitter, { EmitterEvents, type RichTextAction } from '@/utils/emitter'
 import { WEB_FONTS } from '@/configs/font'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
 import useTextFormatPainter from '@/hooks/useTextFormatPainter'
+import message from '@/utils/message'
 
 import ElementOpacity from '../common/ElementOpacity.vue'
 import ElementOutline from '../common/ElementOutline.vue'
@@ -319,17 +320,17 @@ import CheckboxButton from '@/components/CheckboxButton.vue'
 import CheckboxButtonGroup from '@/components/ButtonGroup.vue'
 import ColorPicker from '@/components/ColorPicker/index.vue'
 import Divider from '@/components/Divider.vue'
+import Input from '@/components/Input.vue'
 import {
   Button,
   Popover,
   Select,
   Radio,
-  Input,
+  Input as AntInput,
-  message,
 } from 'ant-design-vue'
 const { Group: RadioGroup, Button: RadioButton } = Radio
 const { OptGroup: SelectOptGroup, Option: SelectOption } = Select
-const InputGroup = Input.Group
+const InputGroup = AntInput.Group
 const ButtonGroup = Button.Group
 
 // 注意，存在一个未知原因的BUG，如果文本加粗后文本框高度增加，画布的可视区域定位会出现错误
@@ -491,10 +492,9 @@ const openLinkPopover = () => {
   linkPopoverVisible.value = true
 }
 const updateLink = (link?: string) => {
-  if (link) {
   const linkRegExp = /^(https?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-.,@?^=%&:\/~+#]*[\w\-@?^=%&\/~+#])?$/
-    if (!linkRegExp.test(link)) return message.error('不是正确的网页链接地址')
+  if (!link || !linkRegExp.test(link)) return message.error('不是正确的网页链接地址')
-  }
+
   emitRichTextCommand('link', link)
   linkPopoverVisible.value = false
 }

src/views/Editor/Toolbar/SlideAnimationPanel.vue

@@ -23,8 +23,9 @@ import { useSlidesStore } from '@/store'
 import type { TurningMode } from '@/types/slides'
 import { SLIDE_ANIMATIONS } from '@/configs/animation'
 import useHistorySnapshot from '@/hooks/useHistorySnapshot'
+import message from '@/utils/message'
 
-import { Button, message } from 'ant-design-vue'
+import { Button } from 'ant-design-vue'
 
 const slidesStore = useSlidesStore()
 const { slides, currentSlide } = storeToRefs(slidesStore)