迁移UI框架至naive-ui，重构组件和样式，添加Gallery和Mask组件

src/Index.vue

@@ -1,38 +1,112 @@
 <template>
-  <d-layout>
-    <d-header class="dheader-1">
+  <n-layout>
+    <n-layout-header class="dheader-1">
       <menu-h />
-    </d-header>
-    <d-content class="dcontent-1">
+    </n-layout-header>
+    <n-layout-content class="dcontent-1">
       <router-view />
-    </d-content>
-    <d-footer v-show="route.path == '/home'" class="dfooter-1">
+    </n-layout-content>
+    <n-layout-footer v-show="route.path == '/home'" class="flex justify-center dfooter-1">
       <div class="beian" ref="footer">
         <a class="text-primary" href="https://beian.miit.gov.cn" target="_blank">皖ICP备2021017362号-1</a>
         <a class="swag text-primary" target="_blank" href="https://www.hxyouzi.com/swag">api文档</a>
       </div>
-    </d-footer>
-  </d-layout>
+    </n-layout-footer>
+  </n-layout>
+
+
+  <n-modal v-model:show="modal.visible" preset="dialog" title="Dialog">
+    <template #header>
+      <div>{{ modal.title }}</div>
+    </template>
+    <div>
+      <div class="my-2">{{ modal.content }}</div>
+      <div v-if="modal.contType == 'input'">
+        <n-input @change="modal.handdleInputChange($event)" :placeholder="modal.placeholder"></n-input>
+      </div>
+    </div>
+    <template #action>
+      <n-button @click="modal.handdleCancel">{{ modal.cancelText }}</n-button>
+      <n-button type="primary" @click="modal.handdleSubmit">{{ modal.submitText }}</n-button>
+    </template>
+  </n-modal>
+
+
 </template>
 
 <script setup lang="ts">
 const route = useRoute()
 const footer = ref<HTMLElement | null>(null)
+window.$msg = useMessage()
+const modal: NmodalItem = reactive({
+  visible: false,
+  title: '',
+  content: '',
+  contType: 'text',
+  cancelText: '取消',
+  submitText: '确定',
+  placeholder: '请输入内容',
+  handdleCancel: () => { },
+  handdleSubmit: () => { },
+  handdleInputChange: (e: any) => { }
+})
+interface NmodalItem {
+  visible: boolean
+  title: string
+  content: string
+  contType?: string
+  placeholder?: string
+  cancelText?: string
+  submitText?: string
+  handdleCancel?: () => void
+  handdleSubmit?: () => void
+  handdleInputChange: (e: any) => void
+}
+//mark method
+function comemodal(mv: NmodalItem) {
+  if (!mv) return
+  modal.visible = true
+  modal.title = mv.title
+  modal.content = mv.content
+  modal.contType = mv.contType || "text"
+  modal.placeholder = mv.placeholder || "请输入内容"
+  modal.cancelText = mv.cancelText || "取消"
+  modal.submitText = mv.submitText || "确定"
+  modal.handdleCancel = (): void => {
+    if (mv.handdleCancel) {
+      mv.handdleCancel()
+    }
+    modal.visible = false
+  }
+  modal.handdleSubmit = () => {
+    if (mv.handdleSubmit) {
+      mv.handdleSubmit()
+    }
+    modal.visible = false
+  }
+  modal.handdleInputChange = (e) => {
+    if (mv.handdleInputChange) {
+      mv.handdleInputChange(e)
+    }
+  }
+}
+
+window.$modal = comemodal
 onMounted(() => {
   // 计算footer的高度
-
   const footerHeight = footer.value?.clientHeight || 0;
-
   console.log('footerHeight', footerHeight);
 })
 </script>
 
-<style scoped>
+<style scoped lang="less">
 .dcontent-1 {
+
   background-color: #fbfbfb;
 }
 
 .beian {
+  width: 100%;
   padding: 20px 0;
   display: flex;
   justify-content: center;