add Dashboard

src/pages/dashboard/DockerDashboard/DockerDashboard.vue

@@ -0,0 +1,57 @@
+<template>
+	<div class="docker-dashboard">
+		<section class="card">
+			<p class="tag">Docker</p>
+			<h2 class="title">容器状态</h2>
+			<p class="desc">这里用于承载容器列表、运行状态、镜像占用和资源使用情况。</p>
+		</section>
+	</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="less">
+.docker-dashboard {
+	padding: 1rem;
+
+	.card {
+		gap: .6rem;
+		display: flex;
+		padding: 1rem;
+		border-radius: 1rem;
+		flex-direction: column;
+		border: 1px solid var(--app-line);
+		background: var(--app-card);
+		box-shadow: 0 .35rem 1rem rgba(17, 32, 56, .05);
+	}
+
+	.tag,
+	.title,
+	.desc {
+		margin: 0;
+	}
+
+	.tag,
+	.desc {
+		color: var(--app-sub);
+	}
+
+	.tag {
+		font-size: .875rem;
+	}
+
+	.title {
+		font-size: 1.1rem;
+	}
+
+	.desc {
+		line-height: 1.6;
+	}
+}
+
+:global(.theme-dark) .docker-dashboard {
+	.card {
+		box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .2);
+	}
+}
+</style>