Initial commit

src/views/Main.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ChartRadar from '@/components/ChartRadar.vue'
+import ChartLine from '@/components/ChartLine.vue'
+import ChartBar from '@/components/ChartBar.vue'
+import ChartPie from '@/components/ChartPie.vue'
+import StatsCard from '@/components/StatsCard.vue'
+
+// Import MDI icons
+import { mdiWeb, mdiRss, mdiSend, mdiBell, mdiGithub, mdiCurrencyCny } from '@mdi/js'
+
+const stats = ref([
+  {
+    icon: mdiWeb,
+    title: 'Bandwidth',
+    value: 230,
+    unit: 'GB',
+    color: 'primary',
+    caption: 'Up: 100, Down: 130',
+  },
+  {
+    icon: mdiRss,
+    title: 'Submissions',
+    value: 108,
+    color: 'primary',
+    caption: 'Too young, too naive',
+  },
+  {
+    icon: mdiSend,
+    title: 'Requests',
+    value: 1238,
+    color: 'warning',
+    caption: 'Limit: 1320',
+  },
+  {
+    icon: mdiBell,
+    title: 'Messages',
+    value: 9042,
+    color: 'primary',
+    caption: 'Warnings: 300, erros: 47',
+  },
+  {
+    icon: mdiGithub,
+    title: 'Github Stars',
+    value: NaN,
+    color: 'grey',
+    caption: 'API has no response',
+  },
+  {
+    icon: mdiCurrencyCny,
+    title: 'Total Fee',
+    value: 2300,
+    unit: '￥',
+    color: 'error',
+    caption: 'Upper Limit: 2000 ￥',
+  },
+])
+</script>
+
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col
+        v-for="stat in stats"
+        :key="stat.title"
+        cols="12"
+        sm="6"
+        md="4"
+        lg="2"
+      >
+        <StatsCard
+          :title="stat.title"
+          :unit="stat.unit"
+          :color="stat.color"
+          :icon="stat.icon"
+          :value="stat.value"
+        >
+          <template #footer>
+            {{ stat.caption }}
+          </template>
+        </StatsCard>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col cols="12" md="6" lg="12">
+        <v-card class="pa-2 chart-card">
+          <ChartLine />
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="6" lg="4">
+        <v-card class="pa-2 chart-card">
+          <ChartRadar />
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="6" lg="4">
+        <v-card class="pa-2 chart-card">
+          <ChartPie />
+        </v-card>
+      </v-col>
+      <v-col cols="12" md="6" lg="4">
+        <v-card class="pa-2 chart-card">
+          <ChartBar />
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style scoped lang="scss">
+.chart-card {
+  height: 350px;
+  display: flex;
+  flex-direction: column;
+  
+  :deep(.chart-container) {
+    flex: 1;
+    width: 100%;
+    min-height: 300px;
+    position: relative;
+  }
+  
+  :deep(.v-chart) {
+    width: 100% !important;
+    height: 100% !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+</style>
+