feat: optimize rename logic

packages/client/src/components/atomic/AutoFocusInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
 import { NInput } from 'naive-ui'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 
 const props = defineProps<{
   value: string
@@ -13,6 +13,13 @@ const emits = defineEmits<{
 }>()
 
 const value = useVModel(props, 'value', emits)
+const base = computed(() => {
+  return /^([\s\S]*?)(?:\.[a-z]+)?$/.exec(value.value)?.[1] ?? value.value
+})
+const suffix = computed(() => {
+  return /(\.[a-z]+)$/.exec(value.value)?.[1] ?? ''
+})
+
 const el = ref<InstanceType<typeof NInput> | null>(null)
 
 onMounted(() => {
@@ -23,9 +30,18 @@ onMounted(() => {
 <template>
   <NInput
     ref="el"
-    v-model:value="value"
+    :value="base"
+    @update:value="
+      v => {
+        value = `${v}${suffix}`
+      }
+    "
     size="tiny"
     class="outline-none bg-transparent"
     @blur="emits('blur')"
-  ></NInput>
+  >
+    <template #suffix>
+      {{ suffix }}
+    </template>
+  </NInput>
 </template>