DataBuddyEngine/DataBuddy-vue
1
1
Fork 0
Code Issues Releases Activity

完善首页显示

Browse Source
This commit is contained in:
苏雨洛
2025-12-14 20:24:45 +08:00
parent 970e734dda
commit c5cfce2ea4
13 changed files with 406 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/index/Category.vue Normal file
View File

@@ -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>

56
src/components/index/Components.vue Normal file
View File

@@ -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>

84
src/components/index/Datascreen.vue
View File

@@ -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">
<div class="no-data">
<i class="fa-solid fa-circle-xmark"></i>
<span>暂无数据</span>
</div>
</main>
<Nodata />
</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,
.search-button:hover {
.import-datascreen:hover {
background-color: #e267a7;
}
.import-datascreen:active,
.search-button:active {
.import-datascreen: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>

28
src/components/index/Datasource.vue Normal file
View File

@@ -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>

28
src/components/index/Files.vue Normal file
View File

@@ -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>

1
src/components/index/Leftbar.vue
View File

@@ -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);

75
src/components/index/Main.vue
View File

@@ -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>

39
src/components/index/Maps.vue Normal file
View File

@@ -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>

31
src/components/index/Nodata.vue Normal file
View File

@@ -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>

28
src/components/index/Record.vue Normal file
View File

@@ -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>

53
src/components/index/Tools.vue Normal file
View File

@@ -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>

8
src/components/index/Topbar.vue
View File

@@ -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);

28
src/components/index/Variables.vue Normal file
View File

@@ -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>