完善弹窗功能

src/components/index/Category.vue

@@ -1,11 +1,21 @@
 <script setup>
 import { defineAsyncComponent } from 'vue'
 const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+
+const emit = defineEmits(['show-modal'])
+
+const handleCreate = () => {
+  emit('show-modal', {
+    title: '创建分类',
+    content: '开发中...',
+    theme: 'light'
+  })
+}
 </script>
 <template>
   <header class="header">
     <div class="header-left">
-      <button class="header-button create-category"><i class="fa-solid fa-folder-plus"></i> 创建分类</button>
+      <button class="header-button create-category" @click="handleCreate"><i class="fa-solid fa-folder-plus"></i> 创建分类</button>
     </div>
     <div class="header-right">
       <input type="text" placeholder="请输入名称" class="header-search"></input>
@@ -14,10 +24,11 @@ const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'
   </header>
   <Nodata />
 </template>
-<style>
+<style scoped>
   .create-category {
     color: #fff;
     background-color: #00b7ff;
+    transition: background-color 0.2s ease;
   }
   .create-category:hover {
     background-color: #00a2e2;

src/components/index/Components.vue

@@ -1,28 +1,54 @@
 <script setup>
-import { defineAsyncComponent } from 'vue'
+import { defineAsyncComponent, ref } from 'vue'
 const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+
+const activeTab = ref('all')
+
+const handleTabClick = (tabName) => {
+  activeTab.value = tabName
+  
+  // 这里可以添加实际业务逻辑，例如：
+  // if (tabName === 'vue') {
+  //   loadVueComponents()
+  // } else if (tabName === 'echarts') {
+  //   loadEchartsComponents()
+  // } else {
+  //   loadHtmlComponents()
+  // }
+}
+
+const emit = defineEmits(['show-modal'])
+const handleCreate = () => {
+  emit('show-modal', {
+    title: '创建组件',
+    content: '开发中...',
+    theme: 'light'
+  })
+}
 </script>
 <template>
   <header class="header">
     <div class="header-left">
-      <button class="header-button create-component"><i class="fa-solid fa-square-plus"></i> 创建组件</button>
+      <button class="header-button create-component" @click="handleCreate"><i class="fa-solid fa-square-plus"></i> 创建组件</button>
     </div>
     <div class="header-right">
       <input type="text" placeholder="请输入名称" class="header-search"></input>
       <button class="header-button search-button"><i class="fa-solid fa-magnifying-glass"></i></button>
     </div>
     <div class="header-components-list">
-        <button class="header-components-item header-button">VUE 组件</button>
+        <button class="header-components-item header-button" :class="{ 'components-item-actived': activeTab === 'all' }" @click="handleTabClick('all')">全部组件</button>
-        <button class="header-components-item header-button">ECharts 组件</button>
+        <button class="header-components-item header-button" :class="{ 'components-item-actived': activeTab === 'vue' }" @click="handleTabClick('vue')">VUE 组件</button>
-        <button class="header-components-item header-button">HTML 组件</button>
+        <button class="header-components-item header-button" :class="{ 'components-item-actived': activeTab === 'echarts' }" @click="handleTabClick('echarts')">ECharts 组件</button>
+        <button class="header-components-item header-button" :class="{ 'components-item-actived': activeTab === 'html' }" @click="handleTabClick('html')">HTML 组件</button>
     </div>
   </header>
   <Nodata />
 </template>
-<style>
+<style scoped>
   .create-component {
     color: #fff;
     background-color: #00b7ff;
+    transition: background-color 0.2s ease;
   }
   .create-component:hover {
     background-color: #00a2e2;
@@ -45,12 +71,13 @@ const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'
         inset 0 4px 20px rgba(255,255,255,0.3);
     color: #333;
     text-shadow: 1px 1px 4px rgba(255,255,255,0.4);
+    transition: background-color 0.2s ease;
   }
   .header-components-item:hover {
     background-color: rgba(255,255,255,0.25);
   }
   .components-item-actived,
   .header-components-item:active {
-    background-color: rgba(255,255,255,0.5);
+    background-color: rgba(255,255,255,0.6);
   }
 </style>

src/components/index/Datascreen.vue

@@ -1,12 +1,28 @@
 <script setup>
-import { defineAsyncComponent } from 'vue'
+import { defineAsyncComponent, ref } from 'vue'
 const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+
+const emit = defineEmits(['show-modal'])
+const handleCreate = () => {
+  emit('show-modal', {
+    title: '创建大屏',
+    content: '开发中...',
+    theme: 'light'
+  })
+}
+const handleImport = () => {
+  emit('show-modal', {
+    title: '导入大屏',
+    content: '开发中...',
+    theme: 'light'
+  })
+}
 </script>
 <template>
   <header class="header">
     <div class="header-left">
-      <button class="header-button create-datascreen"><i class="fa-solid fa-plus"></i> 创建大屏</button>
+      <button class="header-button create-datascreen" @click="handleCreate"><i class="fa-solid fa-plus"></i> 创建大屏</button>
-      <button class="header-button import-datascreen"><i class="fa-solid fa-file-import"></i> 导入大屏</button>
+      <button class="header-button import-datascreen" @click="handleImport"><i class="fa-solid fa-file-import"></i> 导入大屏</button>
     </div>
     <div class="header-right">
       <input type="text" placeholder="请输入名称" class="header-search"></input>
@@ -15,10 +31,11 @@ const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'
   </header>
   <Nodata />
 </template>
-<style>
+<style scoped>
   .create-datascreen {
     color: #fff;
     background-color: #00b7ff;
+    transition: background-color 0.2s ease;
   }
   .create-datascreen:hover {
     background-color: #00a2e2;
@@ -29,6 +46,7 @@ const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'
   .import-datascreen {
     color: #fff;
     background-color: #f472b6;
+    transition: background-color 0.2s ease;
   }
   .import-datascreen:hover {
     background-color: #e267a7;

src/components/index/Datasource.vue

@@ -1,11 +1,21 @@
 <script setup>
 import { defineAsyncComponent } from 'vue'
 const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+
+const emit = defineEmits(['show-modal'])
+
+const handleCreate = () => {
+  emit('show-modal', {
+    title: '创建数据源',
+    content: '开发中...',
+    theme: 'light'
+  })
+}
 </script>
 <template>
   <header class="header">
     <div class="header-left">
-      <button class="header-button create-datasource"><i class="fa-solid fa-calendar-plus"></i> 创建数据源</button>
+      <button class="header-button create-datasource" @click="handleCreate"><i class="fa-solid fa-calendar-plus"></i> 创建数据源</button>
     </div>
     <div class="header-right">
       <input type="text" placeholder="请输入名称" class="header-search"></input>
@@ -14,10 +24,11 @@ const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'
   </header>
   <Nodata />
 </template>
-<style>
+<style scoped>
   .create-datasource {
     color: #fff;
     background-color: #00b7ff;
+    transition: background-color 0.2s ease;
   }
   .create-datasource:hover {
     background-color: #00a2e2;

src/components/index/Files.vue

@@ -1,11 +1,20 @@
 <script setup>
 import { defineAsyncComponent } from 'vue'
 const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+
+const emit = defineEmits(['show-modal'])
+const handleCreate = () => {
+  emit('show-modal', {
+    title: '上传文件',
+    content: '开发中...',
+    theme: 'light'
+  })
+}
 </script>
 <template>
   <header class="header">
     <div class="header-left">
-      <button class="header-button create-files"><i class="fa-solid fa-upload"></i> 上传文件</button>
+      <button class="header-button create-files" @click="handleCreate"><i class="fa-solid fa-upload"></i> 上传文件</button>
     </div>
     <div class="header-right">
       <input type="text" placeholder="请输入名称" class="header-search"></input>
@@ -14,10 +23,11 @@ const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'
   </header>
   <Nodata />
 </template>
-<style>
+<style scoped>
   .create-files {
     color: #fff;
     background-color: #00b7ff;
+    transition: background-color 0.2s ease;
   }
   .create-files:hover {
     background-color: #00a2e2;

src/components/index/Leftbar.vue

@@ -37,7 +37,7 @@
         <button class="leftbar-item" :class="{ 'activated': activeMenu === '/tools' }" @click="handleMenuClick('/tools')"><i class="fa-solid fa-boxes-stacked"></i> 工具箱</button>
     </div>
 </template>
-<style>
+<style scoped>
     .leftbar {
         position: fixed;
         top: 38px;
@@ -70,6 +70,7 @@
         font-size: 16px;
         color: #333;
         text-shadow: 1px 1px 4px rgba(255,255,255,0.4);
+        transition: background-color 0.2s ease;
     }
     .leftbar-item:hover {
         background-color: rgba(255,255,255,0.2);

src/components/index/Main.vue

@@ -26,13 +26,18 @@
                 return defineAsyncComponent(() => import('@/components/index/Tools.vue'))
         }
     })
+
+    const emit = defineEmits(['show-modal'])
+    const handleShowModal = (payload) => {
+        emit('show-modal', payload)
+    }
 </script>
 <template>
     <div class="container">
-        <component :is="DynamicContent" />
+        <component :is="DynamicContent" @show-modal="handleShowModal" />
     </div>
 </template>
-<style>
+<style scoped>
     .container {
         position: fixed;
         top: 38px;
@@ -49,17 +54,19 @@
             inset 0 4px 20px rgba(255,255,255,0.3);
         z-index: 1;
     }
-    .header-left {
+    :deep(.header-left) {
         position: absolute;
         top: 15px;
         left: 15px;
     }
-    .header-right {
+    
+    :deep(.header-right) {
         position: absolute;
         top: 15px;
         right: 15px;
     }
-    .header-button {
+    
+    :deep(.header-button) {
         width: 128px;
         height: 32px;
         font-size: 15px;
@@ -68,44 +75,51 @@
         margin: 0 4px;
         cursor: pointer;
     }
-    .header-button:first-child {
+
+    :deep(.header-button:first-child) {
         margin-left: 0;
     }
-    .header-button:last-child {
+
+    :deep(.header-button:last-child) {
         margin-right: 0;
     }
-    .search-button:hover {
+
-        background-color: #e267a7;
+    :deep(.header-search) {
-    }
-    .search-button:active {
-        background-color: #c35b99;
-    }
-    .header-search {
         width: 150px;
         height: 32px;
         font-size: 15px;
         border: none;
         border-radius: 10px;
         padding: 0 10px;
-        background-color: rgba(255,255,255,0.3);
+        background-color: rgba(255, 255, 255, 0.3);
+        transition: background-color 0.2s ease;
     }
-    .header-search:hover {
+
-        background-color: rgba(255,255,255,0.4);
+    :deep(.header-search:hover) {
+        background-color: rgba(255, 255, 255, 0.4);
     }
-    .header-search:focus {
+
+    :deep(.header-search:focus) {
         outline: none;
-        background-color: rgba(255,255,255,0.5);
+        background-color: rgba(255, 255, 255, 0.5);
     }
-    .search-button {
+    
+    :deep(.search-button) {
         width: 32px;
         height: 32px;
         background-color: #f472b6;
         color: #fff;
+        border: none;
+        border-radius: 10px;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
     }
-    .search-button:hover {
+    
+    :deep(.search-button:hover) {
         background-color: #e267a7;
     }
-    .search-button:active {
+
+    :deep(.search-button:active) {
         background-color: #c35b99;
     }
 </style>

src/components/index/Maps.vue

@@ -1,12 +1,28 @@
 <script setup>
 import { defineAsyncComponent } from 'vue'
 const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+
+const emit = defineEmits(['show-modal'])
+const handleCreate = () => {
+  emit('show-modal', {
+    title: '创建地图',
+    content: '开发中...',
+    theme: 'light'
+  })
+}
+const handleDownload = () => {
+  emit('show-modal', {
+    title: '下载地图',
+    content: '开发中...',
+    theme: 'light'
+  })
+}
 </script>
 <template>
   <header class="header">
     <div class="header-left">
-      <button class="header-button create-maps"><i class="fa-solid fa-location-dot"></i> 创建地图</button>
+      <button class="header-button create-maps" @click="handleCreate"><i class="fa-solid fa-location-dot"></i> 创建地图</button>
-      <button class="header-button download-maps"><i class="fa-solid fa-download"></i> 地图下载</button>
+      <button class="header-button download-maps" @click="handleDownload"><i class="fa-solid fa-download"></i> 地图下载</button>
     </div>
     <div class="header-right">
       <input type="text" placeholder="请输入名称" class="header-search"></input>
@@ -15,10 +31,11 @@ const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'
   </header>
   <Nodata />
 </template>
-<style>
+<style scoped>
   .create-maps {
     color: #fff;
     background-color: #00b7ff;
+    transition: background-color 0.2s ease;
   }
   .create-maps:hover {
     background-color: #00a2e2;
@@ -29,6 +46,7 @@ const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'
   .download-maps {
     color: #fff;
     background-color: #f472b6;
+    transition: background-color 0.2s ease;
   }
   .download-maps:hover {
     background-color: #e267a7;

src/components/index/Nodata.vue

@@ -6,7 +6,7 @@
     </div>
   </main>
 </template>
-<style>
+<style scoped>
     .main {
         height: calc(100vh - 62px);
         padding-top: 62px;

src/components/index/Record.vue

@@ -1,11 +1,20 @@
 <script setup>
 import { defineAsyncComponent } from 'vue'
 const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+
+const emit = defineEmits(['show-modal'])
+const handleCreate = () => {
+  emit('show-modal', {
+    title: '创建数据集',
+    content: '开发中...',
+    theme: 'light'
+  })
+}
 </script>
 <template>
   <header class="header">
     <div class="header-left">
-      <button class="header-button create-record"><i class="fa-solid fa-file-circle-plus"></i> 创建数据集</button>
+      <button class="header-button create-record" @click="handleCreate"><i class="fa-solid fa-file-circle-plus"></i> 创建数据集</button>
     </div>
     <div class="header-right">
       <input type="text" placeholder="请输入名称" class="header-search"></input>
@@ -14,10 +23,11 @@ const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'
   </header>
   <Nodata />
 </template>
-<style>
+<style scoped>
   .create-record {
     color: #fff;
     background-color: #00b7ff;
+    transition: background-color 0.2s ease;
   }
   .create-record:hover {
     background-color: #00a2e2;

src/components/index/Tools.vue

@@ -1,3 +1,6 @@
+<script setup>
+    const emit = defineEmits(['show-modal'])
+</script>
 <template>
     <div class="tools-item">
         <h2>大屏轮播</h2>
@@ -10,7 +13,7 @@
         <button class="tools-item-btn">预览大屏</button>
     </div>
 </template>
-<style>
+<style scoped>
     .tools-item {
         margin-left: 20px;
         color: #333;
@@ -25,6 +28,7 @@
         border: none;
         border-radius: 10px;
         background-color: rgba(255,255,255,0.3);
+        transition: background-color 0.2s ease;
     }
     .tools-item-input:hover {
         background-color: rgba(255,255,255,0.4);
@@ -43,6 +47,7 @@
         background-color: rgba(255,255,255,0.3);
         color: #333;
         cursor: pointer;
+        transition: background-color 0.2s ease;
     }
     .tools-item-btn:hover {
         background-color: rgba(255,255,255,0.4);

src/components/index/Topbar.vue

@@ -36,7 +36,7 @@ onUnmounted(() => {
         </div>
     </div>
 </template>
-<style>
+<style scoped>
     .topbar {
         position: fixed;
         top: 0;

src/components/index/Variables.vue

@@ -1,11 +1,20 @@
 <script setup>
 import { defineAsyncComponent } from 'vue'
 const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+
+const emit = defineEmits(['show-modal'])
+const handleCreate = () => {
+  emit('show-modal', {
+    title: '创建变量',
+    content: '开发中...',
+    theme: 'light'
+  })
+}
 </script>
 <template>
   <header class="header">
     <div class="header-left">
-      <button class="header-button create-variables"><i class="fa-solid fa-square-root-variable"></i> 创建变量</button>
+      <button class="header-button create-variables" @click="handleCreate"><i class="fa-solid fa-square-root-variable"></i> 创建变量</button>
     </div>
     <div class="header-right">
       <input type="text" placeholder="请输入名称" class="header-search"></input>
@@ -14,10 +23,11 @@ const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'
   </header>
   <Nodata />
 </template>
-<style>
+<style scoped>
   .create-variables {
     color: #fff;
     background-color: #00b7ff;
+    transition: background-color 0.2s ease;
   }
   .create-variables:hover {
     background-color: #00a2e2;

src/components/layout/Loading.vue

@@ -3,6 +3,16 @@ import { onMounted } from 'vue'
 
 onMounted(() => {
     document.title = 'Loading...'
+    const loadingScreen = document.querySelector('.loading');
+    setTimeout(() => {
+        loadingScreen.classList.add('active');
+    }, 100);
+    setTimeout(() => {
+        loadingScreen.classList.add('fade-out');
+        setTimeout(() => {
+            loadingScreen.style.display = 'none';
+        }, 500);
+    }, 2400);
 })
 </script>
 <template>
@@ -21,8 +31,18 @@ onMounted(() => {
         height: 100vh;
         width: 100vw;
         background-color: #fff;
+        opacity: 0;
+        transition: opacity 0.5s ease-in-out;
+        -webkit-font-smoothing: antialiased;
         z-index: 9999;
     }
+    .loading.active {
+        opacity: 1;
+    }
+    .loading.fade-out {
+        opacity: 0;
+        pointer-events: none;
+    }
     .title {
         position: fixed;
         top: 45%;

src/components/layout/Modal.vue

@@ -0,0 +1,144 @@
+<script setup>
+import { defineProps } from 'vue'
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+  theme: {
+    type: String,
+    default: 'light',
+    validator: (value) => ['light', 'dark'].includes(value)
+  },
+  title: {
+    type: String,
+    default: '',
+    validator: (value) => typeof value ==='string' && value.length > 0
+  },
+  width: {
+    type: [String, Number],
+    default: 'auto',
+    validator: (value) => {
+      if (typeof value === 'number') return true;
+      return /^(\d+\.?\d*(px|rem|em|%|vw|vh|cm|mm|in|pt|pc)?|auto)$/.test(value);
+    }
+  },
+  height: {
+    type: [String, Number],
+    default: 'auto',
+    validator: (value) => {
+      if (typeof value === 'number') return true;
+      return /^(\d+\.?\d*(px|rem|em|%|vh|cm|mm|in|pt|pc)?|auto)$/.test(value);
+    }
+  },
+})
+
+const closeModal = () => emit('close')
+const getDimensionValue = (value) => {
+  if (typeof value === 'number') {
+    return `${value}px`;
+  }
+  return value;
+}
+</script>
+<template>
+  <div class="modal-mask">
+    <div class="modal-container" :class="theme" :style="{width: getDimensionValue(width), height: getDimensionValue(height),}">
+      <header class="modal-header">
+        <button class="modal-close-btn" @click="closeModal"></button>
+        <header class="modal-header-title">{{ title }}</header>
+      </header>
+      <div class="modal-main">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.modal-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+.modal-container {
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  min-width: 200px;
+  min-height: 80px;
+  max-width: 85%;
+  max-height: 85%;
+  overflow: auto;
+  position: relative;
+  z-index: 99999;
+}
+.modal-container.light {
+  background-color: #fff;
+  color: #333333;
+  box-shadow: 
+    0 4px 20px rgba(0, 0, 0, 0.15),
+    0 0 40px rgba(0, 0, 0, 0.08);
+}
+.modal-container.dark {
+  background-color: #2d2d2d;
+  color: #f0f0f0;
+  box-shadow: 
+    0 4px 20px rgba(0, 0, 0, 0.4),
+    inset 0 0 40px rgba(0, 0, 0, 0.2);
+  border: 1px solid #444;
+}
+.modal-header {
+  width: 100%;
+  height: 30px;
+  background-color: #e4e4e4;
+}
+.modal-container.dark .modal-header {
+  background-color: #3a3a3a;
+  border-bottom: 1px solid #444;
+}
+.modal-close-btn {
+  position: absolute;
+  top: 8px;
+  left: 10px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: none;
+  background-color: #ff5b5b;
+  color: #666;
+  font-weight: bold;
+  cursor: default;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.modal-close-btn::before {
+  content: "\f00d";
+  font-family: "Font Awesome 7 Free";
+  font-weight: bolder;
+  display: none;
+  font-size: 11px;
+  color: #555;
+}
+.modal-close-btn:hover::before {
+  display: block;
+}
+.modal-close-btn:active {
+  background-color: #c64848;
+}
+.modal-header-title {
+  position: absolute;
+  top: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+}
+.modal-main {
+  padding: 10px;
+}
+</style>

src/router.js

@@ -6,13 +6,20 @@ import 'nprogress/nprogress.css'
 NProgress.configure({
   easing: 'ease',
   speed: 500,
-  showSpinner: false,
+  showSpinner: true,
   trickleSpeed: 200,
   minimum: 0.3
 })
 
 const style = document.createElement('style')
 style.innerHTML = `
+  #nprogress {
+    z-index: 9999 !important;
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+  }
   #nprogress .bar {
     background: #f472b6 !important;
     height: 3px !important;
@@ -22,6 +29,10 @@ style.innerHTML = `
     box-shadow: 0 0 15px #f472b6, 0 0 10px #f472b6 !important;
     opacity: 1 !important;
   }
+  #nprogress .spinner-icon {
+    border-top-color: #f472b6 !important;
+    border-left-color: #f472b6 !important;
+  }
 `
 document.head.appendChild(style)
 
@@ -102,7 +113,7 @@ router.beforeEach(async (to, from, next) => {
     document.body.appendChild(loadingNode);
 
     try {
-      const LoadingComponent = (await import('@/components/index/Loading.vue')).default;
+      const LoadingComponent = (await import('@/components/layout/Loading.vue')).default;
       loadingApp = createApp({
         render: () => h(LoadingComponent)
       });

src/views/Index.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, defineAsyncComponent } from 'vue'
+import { onMounted, defineAsyncComponent, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import getConfig from '@/utils/config'
 
@@ -27,9 +27,35 @@ onMounted(() => {
 
   //document.head.appendChild(linkElement);
 })
+
+const Modal = defineAsyncComponent(() => import('@/components/layout/Modal.vue'))
+
+const showModal = ref(false)
+const modalContent = ref('')
+const modalTheme = ref('light')
+const modalTitle = ref('')
+const modalWidth = ref('auto')
+const modalHeight = ref('auto')
+
+const handleShowModal = (payload) => {
+  modalContent.value = payload.content || ''
+  modalTheme.value = ['light', 'dark'].includes(payload.theme) ? payload.theme : 'light'
+  modalTitle.value = payload.title || ''
+  showModal.value = true
+  modalWidth.value = payload.width || 'auto'
+  modalHeight.value = payload.height || 'auto'
+}
+
+const closeModal = () => {
+  showModal.value = false
+}
 </script>
 <template>
   <Topbar />
   <Leftbar />
-  <Main />
+  <Main @show-modal="handleShowModal" />
+  
+  <Modal v-if="showModal" @close="closeModal" :theme="modalTheme" :title="modalTitle" :width="modalWidth" :height="modalHeight">
+    {{ modalContent }}
+  </Modal>
 </template>

src/views/Loading.vue

@@ -17,3 +17,4 @@ onUnmounted(() => {
   }
 })
 </script>
+<template></template>

src/views/NotFound.vue

@@ -44,7 +44,7 @@ onMounted(() => {
         </div>
     </div>
 </template>
-<style>
+<style scoped>
     .container {
         position: fixed;
         top: 50%;