完善首页显示

src/components/index/Category.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { defineAsyncComponent } from 'vue'
+const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+</script>
+<template>
+  <header class="header">
+    <div class="header-left">
+      <button class="header-button create-category"><i class="fa-solid fa-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>
+  </header>
+  <Nodata />
+</template>
+<style>
+  .create-category {
+    color: #fff;
+    background-color: #00b7ff;
+  }
+  .create-category:hover {
+    background-color: #00a2e2;
+  }
+  .create-category:active {
+    background-color: #0088c3;
+  }
+</style>

src/components/index/Components.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { defineAsyncComponent } from 'vue'
+const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+</script>
+<template>
+  <header class="header">
+    <div class="header-left">
+      <button class="header-button create-component"><i class="fa-solid fa-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">ECharts 组件</button>
+        <button class="header-components-item header-button">HTML 组件</button>
+    </div>
+  </header>
+  <Nodata />
+</template>
+<style>
+  .create-component {
+    color: #fff;
+    background-color: #00b7ff;
+  }
+  .create-component:hover {
+    background-color: #00a2e2;
+  }
+  .create-component:active {
+    background-color: #0088c3;
+  }
+  .header-components-list {
+    position: absolute;
+    top: 58px;
+    left: 15px;
+  }
+  .header-components-item {
+    background-color: rgba(255,255,255,0.05);
+    backdrop-filter: blur(10px) saturate(180%);
+    -webkit-backdrop-filter: blur(10px) saturate(180%);
+    border: 1px solid rgba(255,255,255,0.4);
+    box-shadow:
+        0 8px 32px rgba(0,0,0,0.2),
+        inset 0 4px 20px rgba(255,255,255,0.3);
+    color: #333;
+    text-shadow: 1px 1px 4px rgba(255,255,255,0.4);
+  }
+  .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);
+  }
+</style>

src/components/index/Datascreen.vue

@@ -1,3 +1,7 @@
+<script setup>
+import { defineAsyncComponent } from 'vue'
+const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+</script>
 <template>
   <header class="header">
     <div class="header-left">
@@ -9,38 +13,9 @@
       <button class="header-button search-button"><i class="fa-solid fa-magnifying-glass"></i></button>
     </div>
   </header>
-  <main class="main">
+  <Nodata />
-    <div class="no-data">
-      <i class="fa-solid fa-circle-xmark"></i>
-      <span>暂无数据</span>
-    </div>
-  </main>
 </template>
 <style>
-  .header-left {
-    position: absolute;
-    top: 15px;
-    left: 15px;
-  }
-  .header-right {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-  }
-  .header-button {
-    width: 120px;
-    height: 32px;
-    font-size: 15px;
-    border: none;
-    border-radius: 10px;
-    margin: 0 4px;
-  }
-  .header-button:first-child {
-    margin-left: 0;
-  }
-  .header-button:last-child {
-    margin-right: 0;
-  }
   .create-datascreen {
     color: #fff;
     background-color: #00b7ff;
@@ -55,55 +30,10 @@
     color: #fff;
     background-color: #f472b6;
   }
-  .import-datascreen:hover,
+  .import-datascreen:hover {
-  .search-button:hover {
     background-color: #e267a7;
   }
-  .import-datascreen:active,
+  .import-datascreen:active {
-  .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);
-  }
-  .header-search:hover {
-    background-color: rgba(255,255,255,0.4);
-  }
-  .header-search:focus {
-    outline: none;
-    background-color: rgba(255,255,255,0.5);
-  }
-  .search-button {
-    width: 32px;
-    height: 32px;
-    background-color: #f472b6;
-    color: #fff;
-  }
-  .main {
-    height: calc(100vh - 62px);
-    padding-top: 62px;
-    box-sizing: border-box;
-  }
-  .no-data {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    font-size: 20px;
-  }
-  .no-data i {
-    font-size: 64px;
-    margin-bottom: 16px;
-    color: #0095cf;
-  }
-  .no-data span {
-    color: #00354a;
-  }
 </style>

src/components/index/Datasource.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { defineAsyncComponent } from 'vue'
+const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+</script>
+<template>
+  <header class="header">
+    <div class="header-left">
+      <button class="header-button create-datasource"><i class="fa-solid fa-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>
+  </header>
+  <Nodata />
+</template>
+<style>
+  .create-datasource {
+    color: #fff;
+    background-color: #00b7ff;
+  }
+  .create-datasource:hover {
+    background-color: #00a2e2;
+  }
+  .create-datasource:active {
+    background-color: #0088c3;
+  }
+</style>

src/components/index/Files.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { defineAsyncComponent } from 'vue'
+const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+</script>
+<template>
+  <header class="header">
+    <div class="header-left">
+      <button class="header-button create-files"><i class="fa-solid fa-upload"></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>
+  </header>
+  <Nodata />
+</template>
+<style>
+  .create-files {
+    color: #fff;
+    background-color: #00b7ff;
+  }
+  .create-files:hover {
+    background-color: #00a2e2;
+  }
+  .create-files:active {
+    background-color: #0088c3;
+  }
+</style>

src/components/index/Leftbar.vue

@@ -69,6 +69,7 @@
         cursor: pointer;
         font-size: 16px;
         color: #333;
+        text-shadow: 1px 1px 4px rgba(255,255,255,0.4);
     }
     .leftbar-item:hover {
         background-color: rgba(255,255,255,0.2);

src/components/index/Main.vue

@@ -8,6 +8,22 @@
             case '/':
             case '/datascreen':
                 return defineAsyncComponent(() => import('@/components/index/Datascreen.vue'))
+            case '/category':
+                return defineAsyncComponent(() => import('@/components/index/Category.vue'))
+            case '/datasource':
+                return defineAsyncComponent(() => import('@/components/index/Datasource.vue'))
+            case '/record':
+                return defineAsyncComponent(() => import('@/components/index/Record.vue'))
+            case '/components':
+                return defineAsyncComponent(() => import('@/components/index/Components.vue'))
+            case '/variables':
+                return defineAsyncComponent(() => import('@/components/index/Variables.vue'))
+            case '/files':
+                return defineAsyncComponent(() => import('@/components/index/Files.vue'))
+            case '/maps':
+                return defineAsyncComponent(() => import('@/components/index/Maps.vue'))
+            case '/tools':
+                return defineAsyncComponent(() => import('@/components/index/Tools.vue'))
         }
     })
 </script>
@@ -33,4 +49,63 @@
             inset 0 4px 20px rgba(255,255,255,0.3);
         z-index: 1;
     }
+    .header-left {
+        position: absolute;
+        top: 15px;
+        left: 15px;
+    }
+    .header-right {
+        position: absolute;
+        top: 15px;
+        right: 15px;
+    }
+    .header-button {
+        width: 128px;
+        height: 32px;
+        font-size: 15px;
+        border: none;
+        border-radius: 10px;
+        margin: 0 4px;
+        cursor: pointer;
+    }
+    .header-button:first-child {
+        margin-left: 0;
+    }
+    .header-button:last-child {
+        margin-right: 0;
+    }
+    .search-button:hover {
+        background-color: #e267a7;
+    }
+    .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);
+    }
+    .header-search:hover {
+        background-color: rgba(255,255,255,0.4);
+    }
+    .header-search:focus {
+        outline: none;
+        background-color: rgba(255,255,255,0.5);
+    }
+    .search-button {
+        width: 32px;
+        height: 32px;
+        background-color: #f472b6;
+        color: #fff;
+    }
+    .search-button:hover {
+        background-color: #e267a7;
+    }
+    .search-button:active {
+        background-color: #c35b99;
+    }
 </style>

src/components/index/Maps.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { defineAsyncComponent } from 'vue'
+const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+</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 download-maps"><i class="fa-solid fa-download"></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>
+  </header>
+  <Nodata />
+</template>
+<style>
+  .create-maps {
+    color: #fff;
+    background-color: #00b7ff;
+  }
+  .create-maps:hover {
+    background-color: #00a2e2;
+  }
+  .create-maps:active {
+    background-color: #0088c3;
+  }
+  .download-maps {
+    color: #fff;
+    background-color: #f472b6;
+  }
+  .download-maps:hover {
+    background-color: #e267a7;
+  }
+  .download-maps:active {
+    background-color: #c35b99;
+  }
+</style>

src/components/index/Nodata.vue

@@ -0,0 +1,31 @@
+<template>
+    <main class="main">
+    <div class="no-data">
+      <i class="fa-solid fa-circle-xmark"></i>
+      <span>暂无数据</span>
+    </div>
+  </main>
+</template>
+<style>
+    .main {
+        height: calc(100vh - 62px);
+        padding-top: 62px;
+        box-sizing: border-box;
+    }
+    .no-data {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        font-size: 20px;
+    }
+    .no-data i {
+        font-size: 64px;
+        margin-bottom: 16px;
+        color: #0095cf;
+    }
+    .no-data span {
+        color: #00354a;
+    }
+</style>

src/components/index/Record.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { defineAsyncComponent } from 'vue'
+const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+</script>
+<template>
+  <header class="header">
+    <div class="header-left">
+      <button class="header-button create-record"><i class="fa-solid fa-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>
+  </header>
+  <Nodata />
+</template>
+<style>
+  .create-record {
+    color: #fff;
+    background-color: #00b7ff;
+  }
+  .create-record:hover {
+    background-color: #00a2e2;
+  }
+  .create-record:active {
+    background-color: #0088c3;
+  }
+</style>

src/components/index/Tools.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="tools-item">
+        <h2>大屏轮播</h2>
+        <input type="text" placeholder="请输入大屏ID多个用','间隔" class="tools-item-input"></input>
+        <button class="tools-item-btn">预览大屏</button>
+    </div>
+    <div class="tools-item">
+        <h2>HTML 页面</h2>
+        <input type="text" placeholder="请输入大屏ID" class="tools-item-input"></input>
+        <button class="tools-item-btn">预览大屏</button>
+    </div>
+</template>
+<style>
+    .tools-item {
+        margin-left: 20px;
+        color: #333;
+        text-shadow: 1px 1px 4px rgba(255,255,255,0.4);
+    }
+    .tools-item-input {
+        margin-top: -24px;
+        width: calc(100vw - 380px);
+        height: 32px;
+        font-size: 15px;
+        padding: 0 10px;
+        border: none;
+        border-radius: 10px;
+        background-color: rgba(255,255,255,0.3);
+    }
+    .tools-item-input:hover {
+        background-color: rgba(255,255,255,0.4);
+    }
+    .tools-item-input:focus {
+        outline: none;
+        background-color: rgba(255,255,255,0.5);
+    }
+    .tools-item-btn {
+        margin-left: 5px;
+        width: 90px;
+        height: 32px;
+        border: none;
+        border-radius: 10px;
+        font-size: 15px;
+        background-color: rgba(255,255,255,0.3);
+        color: #333;
+        cursor: pointer;
+    }
+    .tools-item-btn:hover {
+        background-color: rgba(255,255,255,0.4);
+    }
+    .tools-item-btn:active {
+        background-color: rgba(255,255,255,0.5);
+    }
+</style>

src/components/index/Topbar.vue

@@ -25,11 +25,11 @@ onUnmounted(() => {
 </script>
 <template>
     <div class="topbar">
-        <div class="logo" @click="router.push('/')">
+        <div class="logo">
             <img src="@/assets/logo.svg" alt="logo" />
         </div>
         <div class="topbar-left">
-            <button @click="router.push('/')">{{ config.title }}</button>
+            <button>{{ config.title }}</button>
         </div>
         <div class="topbar-right">
             <div id="time"></div>
@@ -50,7 +50,7 @@ onUnmounted(() => {
     }
     .logo {
         position: fixed;
-        top: 6px;
+        top: 8px;
         left: 10px;
     }
     .logo img {
@@ -60,7 +60,7 @@ onUnmounted(() => {
     .topbar-left,
     .topbar-right {
         position: fixed;
-        top: 3px;
+        top: 5px;
         font-size: 16px;
         color: #fff;
         text-shadow: 1px 1px 4px rgba(0,0,0,0.4);

src/components/index/Variables.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { defineAsyncComponent } from 'vue'
+const Nodata = defineAsyncComponent(() => import('@/components/index/Nodata.vue'))
+</script>
+<template>
+  <header class="header">
+    <div class="header-left">
+      <button class="header-button create-variables"><i class="fa-solid fa-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>
+  </header>
+  <Nodata />
+</template>
+<style>
+  .create-variables {
+    color: #fff;
+    background-color: #00b7ff;
+  }
+  .create-variables:hover {
+    background-color: #00a2e2;
+  }
+  .create-variables:active {
+    background-color: #0088c3;
+  }
+</style>