🔥 添加自定义后缀

pages/settings/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {useStyleStore} from "~/stores/style";
 import {useSettingsStore} from "~/stores/settings";
+import {useDomainStore} from "~/stores/domain";
 
 const styleStore = useStyleStore()
 const settingsStore = useSettingsStore()
@@ -11,6 +12,7 @@ styleStore.setIsPage(true)
 const {isHistory} = storeToRefs(settingsStore)
 const isOpen = ref(false)
 
+const isEditDomainOpen = ref(false)
 
 const handleReset = async () => {
   settingsStore.setHistory(true)
@@ -37,11 +39,61 @@ const handleReset = async () => {
     </UCard>
   </div>
 
+  <div class="setting">
+    <div class="text-2xl font-bold mt-[30px] mb-[20px]"> 后缀设置 </div>
+    <u-card class="set-item">
+      <div class="flex justify-between items-center">
+        <div class="text-base"> 自定义后缀 </div>
+        <div class="text-sm			" >
+          自定义编辑管理添加后缀
+        </div>
+        <div>
+          <u-button type="warning"
+                    @click="isEditDomainOpen = true"
+          > 管理 </u-button>
+        </div>
+      </div>
+
+      <UModal
+          v-model="isEditDomainOpen"
+      >
+        <UCard
+            :ui="{
+          base: 'h-full flex flex-col',
+          rounded: '10',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+          body: {
+            base: 'grow'
+          }
+        }"
+        >
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+                后缀管理
+              </h3>
+              <UButton
+                  color="gray"
+                  variant="ghost"
+                  icon="i-heroicons-x-mark-20-solid"
+                  class="-my-1"
+                  type="button"
+                  @click="isEditDomainOpen = false" />
+            </div>
+          </template>
+          <div class="mx-auto">
+            <DomainEditor />
+          </div>
+        </UCard>
+      </UModal>
+    </u-card>
+  </div>
+
   <div class="setting">
     <div class="text-2xl font-bold mt-[30px] mb-[20px]">{{ t('settings.linkOpenType') }}</div>
     <UCard>
       <div class="flex justify-between items-center">
-        <div class="text-base		"> {{ t('settings.linkOpenTypeDesc') }} </div>
+        <div class="text-base	"> {{ t('settings.linkOpenTypeDesc') }} </div>
         <div>
           <ClientOnly>
           <CommonLinkChange />
@@ -51,6 +103,7 @@ const handleReset = async () => {
     </UCard>
   </div>
 
+
   <div class="setting">
     <div class="text-2xl font-bold mt-[30px] mb-[20px]"> {{ t('settings.miscellaneous') }} </div>
     <u-card class="set-item">