diff --git a/src/assets/images/misc/storage.png b/src/assets/images/misc/storage.png
new file mode 100644
index 00000000..00e1ba32
Binary files /dev/null and b/src/assets/images/misc/storage.png differ
diff --git a/src/pages/dashboard.vue b/src/pages/dashboard.vue
index 837a9a2c..54808795 100644
--- a/src/pages/dashboard.vue
+++ b/src/pages/dashboard.vue
@@ -1,32 +1,10 @@
 <script setup lang="ts">
-import CardStatisticsVertical from "@/components/cards/CardStatisticsVertical.vue";
-import AnalyticsBarCharts from "@/views/dashboard/AnalyticsBarCharts.vue";
-import AnalyticsDepositWithdraw from "@/views/dashboard/AnalyticsDepositWithdraw.vue";
 import AnalyticsMediaStatistic from "@/views/dashboard/AnalyticsMediaStatistic.vue";
 import AnalyticsProcesses from "@/views/dashboard/AnalyticsProcesses.vue";
-import AnalyticsSalesByCountries from "@/views/dashboard/AnalyticsSalesByCountries.vue";
+import AnalyticsScheduler from "@/views/dashboard/AnalyticsScheduler.vue";
+import AnalyticsSpeed from "@/views/dashboard/AnalyticsSpeed.vue";
 import AnalyticsStorage from "@/views/dashboard/AnalyticsStorage.vue";
-import AnalyticsTotalEarning from "@/views/dashboard/AnalyticsTotalEarning.vue";
-import AnalyticsTotalProfitLineCharts from "@/views/dashboard/AnalyticsTotalProfitLineCharts.vue";
 import AnalyticsWeeklyOverview from "@/views/dashboard/AnalyticsWeeklyOverview.vue";
-
-const totalProfit = {
-  title: "Total Profit",
-  color: "secondary",
-  icon: "mdi-poll",
-  stats: "$25.6k",
-  change: 42,
-  subtitle: "Weekly Project",
-};
-
-const newProject = {
-  title: "New Project",
-  color: "primary",
-  icon: "mdi-briefcase-variant-outline",
-  stats: "862",
-  change: -18,
-  subtitle: "Yearly Project",
-};
 </script>
 
 <template>
@@ -44,35 +22,11 @@ const newProject = {
     </VCol>
 
     <VCol cols="12" md="4">
-      <AnalyticsTotalEarning />
+      <AnalyticsSpeed />
     </VCol>
 
     <VCol cols="12" md="4">
-      <VRow class="match-height">
-        <VCol cols="12" sm="6">
-          <AnalyticsTotalProfitLineCharts />
-        </VCol>
-
-        <VCol cols="12" sm="6">
-          <CardStatisticsVertical v-bind="totalProfit" />
-        </VCol>
-
-        <VCol cols="12" sm="6">
-          <CardStatisticsVertical v-bind="newProject" />
-        </VCol>
-
-        <VCol cols="12" sm="6">
-          <AnalyticsBarCharts />
-        </VCol>
-      </VRow>
-    </VCol>
-
-    <VCol cols="12" md="4">
-      <AnalyticsSalesByCountries />
-    </VCol>
-
-    <VCol cols="12" md="8">
-      <AnalyticsDepositWithdraw />
+      <AnalyticsScheduler />
     </VCol>
 
     <VCol cols="12">
diff --git a/src/views/dashboard/AnalyticsDepositWithdraw.vue b/src/views/dashboard/AnalyticsDepositWithdraw.vue
deleted file mode 100644
index 162e158c..00000000
--- a/src/views/dashboard/AnalyticsDepositWithdraw.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<script setup lang="ts">
-import americanBank from '@images/logos/american-bank.png'
-import aws from '@images/logos/aws.png'
-import citiBank from '@images/logos/citi-bank.png'
-import digitalOcean from '@images/logos/digital-ocean.png'
-import github from '@images/logos/github.png'
-import google from '@images/logos/google.png'
-import gumroad from '@images/logos/gumroad.png'
-import mastercardLabel from '@images/logos/mastercard-label.png'
-import slack from '@images/logos/slack.png'
-import stripe from '@images/logos/stripe.png'
-
-const deposits = [
-  {
-    title: 'Gumroad Account',
-    subtitle: 'Sell UI Kit',
-    amount: '+$4,650',
-    logo: gumroad,
-  },
-  {
-    title: 'Mastercard',
-    subtitle: 'Wallet deposit',
-    amount: '+$92,705',
-    logo: mastercardLabel,
-  },
-  {
-    title: 'Stripe Account',
-    subtitle: 'iOS Application',
-    amount: '+$957',
-    logo: stripe,
-  },
-  {
-    title: 'American Bank',
-    subtitle: 'American Bank',
-    amount: '+$6,837',
-    logo: americanBank,
-  },
-  {
-    title: 'Bank Account',
-    subtitle: 'Wallet deposit',
-    amount: '+$8,934',
-    logo: citiBank,
-  },
-]
-
-const withdraws = [
-  {
-    title: 'Google Adsense',
-    subtitle: 'Paypal deposit',
-    amount: '-$145',
-    logo: google,
-  },
-  {
-    title: 'Github Enterprise',
-    subtitle: 'Security & compliance',
-    amount: '-$1870',
-    logo: github,
-  },
-  {
-    title: 'Upgrade Slack Plan',
-    subtitle: 'Debit card deposit',
-    amount: '-$450',
-    logo: slack,
-  },
-  {
-    title: 'Digital Ocean',
-    subtitle: 'Cloud Hosting',
-    amount: '-$540',
-    logo: digitalOcean,
-  },
-  {
-    title: 'AWS Account',
-    subtitle: 'Choosing a Cloud Platform',
-    amount: '-$21',
-    logo: aws,
-  },
-]
-</script>
-
-<template>
-  <VCard>
-    <VRow no-gutters>
-      <VCol
-        cols="12"
-        md="6"
-      >
-        <VCardItem>
-          <VCardTitle>Deposit</VCardTitle>
-
-          <template #append>
-            <a
-              href="javascript:void(0)"
-              class="text-sm font-weight-medium"
-            >View All</a>
-          </template>
-        </VCardItem>
-
-        <VCardText>
-          <VList class="card-list">
-            <VListItem
-              v-for="deposit in deposits"
-              :key="deposit.logo"
-            >
-              <template #prepend>
-                <VAvatar
-                  start
-                  rounded
-                >
-                  <VImg
-                    :height="29"
-                    :width="28"
-                    :src="deposit.logo"
-                  />
-                </VAvatar>
-              </template>
-
-              <VListItemTitle class="text-sm font-weight-medium mb-1">
-                {{ deposit.title }}
-              </VListItemTitle>
-              <VListItemSubtitle class="text-xs">
-                {{ deposit.subtitle }}
-              </VListItemSubtitle>
-
-              <template #append>
-                <VListItemAction class="text-success font-weight-medium">
-                  {{ deposit.amount }}
-                </VListItemAction>
-              </template>
-            </VListItem>
-          </VList>
-        </VCardText>
-      </VCol>
-
-      <VDivider
-        :vertical="$vuetify.display.mdAndUp"
-        :inset="$vuetify.display.mdAndUp"
-      />
-
-      <VCol
-        cols="12"
-        md="6"
-      >
-        <VCardItem>
-          <VCardTitle>Withdraw</VCardTitle>
-
-          <template #append>
-            <a
-              href="javascript:void(0)"
-              class="text-sm font-weight-medium"
-            >View All</a>
-          </template>
-        </VCardItem>
-
-        <VCardText>
-          <VList class="card-list">
-            <VListItem
-              v-for="withdraw in withdraws"
-              :key="withdraw.logo"
-            >
-              <template #prepend>
-                <VAvatar
-                  start
-                  rounded
-                >
-                  <VImg
-                    :height="29"
-                    :width="28"
-                    :src="withdraw.logo"
-                  />
-                </VAvatar>
-              </template>
-
-              <VListItemTitle class="text-sm font-weight-medium mb-1">
-                {{ withdraw.title }}
-              </VListItemTitle>
-              <VListItemSubtitle class="text-xs">
-                {{ withdraw.subtitle }}
-              </VListItemSubtitle>
-
-              <template #append>
-                <VListItemAction class="text-error font-weight-medium">
-                  {{ withdraw.amount }}
-                </VListItemAction>
-              </template>
-            </VListItem>
-          </VList>
-        </VCardText>
-      </VCol>
-    </VRow>
-  </VCard>
-</template>
-
-<style lang="scss" scoped>
-.card-list {
-  --v-card-list-gap: 1.5rem;
-}
-</style>
diff --git a/src/views/dashboard/AnalyticsMediaStatistic.vue b/src/views/dashboard/AnalyticsMediaStatistic.vue
index b4a2ec6a..de6e1df8 100644
--- a/src/views/dashboard/AnalyticsMediaStatistic.vue
+++ b/src/views/dashboard/AnalyticsMediaStatistic.vue
@@ -55,12 +55,6 @@ onMounted(() => {
   <VCard>
     <VCardItem>
       <VCardTitle>媒体统计</VCardTitle>
-
-      <template #append>
-        <div class="me-n3">
-          <MoreBtn />
-        </div>
-      </template>
     </VCardItem>
 
     <VCardText>
diff --git a/src/views/dashboard/AnalyticsSalesByCountries.vue b/src/views/dashboard/AnalyticsSalesByCountries.vue
deleted file mode 100644
index a60c6b45..00000000
--- a/src/views/dashboard/AnalyticsSalesByCountries.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<script setup lang="ts">
-const salesByCountries = [
-  {
-    abbr: 'US',
-    amount: '$8,656k',
-    country: 'United states of america',
-    change: '+25.8%',
-    sales: '894k',
-    color: 'success',
-  },
-  {
-    abbr: 'UK',
-    amount: '$2,415k',
-    country: 'United kingdom',
-    change: '-6.2%',
-    sales: '645k',
-    color: 'error',
-  },
-  {
-    abbr: 'IN',
-    amount: '$865k',
-    country: 'India',
-    change: '+12.4%',
-    sales: '148k',
-    color: 'warning',
-  },
-  {
-    abbr: 'JA',
-    amount: '$745k',
-    country: 'Japan',
-    change: '-11.9%',
-    sales: '86k',
-    color: 'secondary',
-  },
-  {
-    abbr: 'KO',
-    amount: '$45k',
-    country: 'Korea',
-    change: '+16.2%',
-    sales: '42k',
-    color: 'error',
-  },
-
-]
-</script>
-
-<template>
-  <VCard>
-    <VCardItem>
-      <VCardTitle>Sales by Countries</VCardTitle>
-
-      <template #append>
-        <div class="me-n3">
-          <MoreBtn />
-        </div>
-      </template>
-    </VCardItem>
-
-    <VCardText>
-      <VList class="card-list">
-        <VListItem
-          v-for="data in salesByCountries"
-          :key="data.country"
-        >
-          <template #prepend>
-            <VAvatar
-              size="40"
-              variant="tonal"
-              :color="data.color"
-              class="me-3"
-            >
-              {{ data.abbr }}
-            </VAvatar>
-          </template>
-
-          <VListItemTitle class="mb-1">
-            <span class="text-sm font-weight-medium">{{ data.amount }}</span>
-            <VIcon
-              size="22"
-              :color="data.change.charAt(0) === '+' ? 'success' : 'error'"
-              class="mx-1"
-            >
-              {{ data.change.charAt(0) === '+' ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
-            </VIcon>
-            <span :class="`text-xs ${data.change.charAt(0) === '+' ? 'text-success' : 'text-error'}`">
-              {{ data.change.slice(1) }}
-            </span>
-          </VListItemTitle>
-
-          <VListItemSubtitle class="text-xs">
-            {{ data.country }}
-          </VListItemSubtitle>
-
-          <template #append>
-            <div>
-              <h4 class="font-weight-medium">
-                {{ data.sales }}
-              </h4>
-              <span class="text-xs text-medium-emphasis">Sales</span>
-            </div>
-          </template>
-        </VListItem>
-      </VList>
-    </VCardText>
-  </VCard>
-</template>
-
-  <style lang="scss" scoped>
-  .card-list {
-    --v-card-list-gap: 1.5rem;
-  }
-  </style>
diff --git a/src/views/dashboard/AnalyticsScheduler.vue b/src/views/dashboard/AnalyticsScheduler.vue
new file mode 100644
index 00000000..97780f11
--- /dev/null
+++ b/src/views/dashboard/AnalyticsScheduler.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+const salesByCountries = [
+  {
+    abbr: "CC",
+    amount: "CookieCloud同步",
+    country: "2小时5分钟后",
+    sales: "等待",
+    color: "success",
+  },
+  {
+    abbr: "刷",
+    amount: "订阅刷新",
+    country: "30分钟后",
+    sales: "运行中",
+    color: "error",
+  },
+  {
+    abbr: "搜",
+    amount: "订阅搜索",
+    country: "12小时后",
+    sales: "等待",
+    color: "error",
+  },
+  {
+    abbr: "豆",
+    amount: "豆瓣想看同步",
+    country: "25分钟后",
+    sales: "运行中",
+    color: "warning",
+  },
+  {
+    abbr: "下",
+    amount: "下载文件整理",
+    country: "每隔5分钟",
+    sales: "等待",
+    color: "secondary",
+  },
+];
+</script>
+
+<template>
+  <VCard>
+    <VCardItem>
+      <VCardTitle>后台任务</VCardTitle>
+    </VCardItem>
+
+    <VCardText>
+      <VList class="card-list">
+        <VListItem v-for="data in salesByCountries" :key="data.country">
+          <template #prepend>
+            <VAvatar size="40" variant="tonal" :color="data.color" class="me-3">
+              {{ data.abbr }}
+            </VAvatar>
+          </template>
+
+          <VListItemTitle class="mb-1">
+            <span class="text-sm font-weight-medium">{{ data.amount }}</span>
+          </VListItemTitle>
+
+          <VListItemSubtitle class="text-xs">
+            {{ data.country }}
+          </VListItemSubtitle>
+
+          <template #append>
+            <div>
+              <h4 class="font-weight-medium">
+                {{ data.sales }}
+              </h4>
+            </div>
+          </template>
+        </VListItem>
+      </VList>
+    </VCardText>
+  </VCard>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+  --v-card-list-gap: 1.5rem;
+}
+</style>
diff --git a/src/views/dashboard/AnalyticsSpeed.vue b/src/views/dashboard/AnalyticsSpeed.vue
new file mode 100644
index 00000000..37f6e0e9
--- /dev/null
+++ b/src/views/dashboard/AnalyticsSpeed.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+const earnings = [
+  {
+    avatar: "mdi-upload",
+    title: "总上传量",
+    amount: "193 GB",
+  },
+  {
+    avatar: "mdi-download",
+    title: "总下载量",
+    amount: "12,235 GB",
+  },
+  {
+    avatar: "mdi-content-save",
+    title: "磁盘剩余空间",
+    amount: "1.24 TB",
+  },
+];
+</script>
+
+<template>
+  <VCard>
+    <VCardItem>
+      <VCardTitle>实时速率</VCardTitle>
+
+      <template #append>
+        <div class="me-n3">
+          <MoreBtn />
+        </div>
+      </template>
+    </VCardItem>
+
+    <VCardText class="pt-4">
+      <div class="d-flex align-center">
+        <h4 class="text-h4 me-2">
+          ↑21 KB/s <br />
+          ↓24,895 KB/s
+        </h4>
+      </div>
+      <VList class="card-list mt-9">
+        <VListItem v-for="earning in earnings" :key="earning.title">
+          <template #prepend>
+            <VIcon rounded :icon="earning.avatar" />
+          </template>
+
+          <VListItemTitle class="text-sm font-weight-medium mb-1">
+            {{ earning.title }}
+          </VListItemTitle>
+
+          <template #append>
+            <div>
+              <h6 class="text-sm font-weight-medium mb-2">
+                {{ earning.amount }}
+              </h6>
+            </div>
+          </template>
+        </VListItem>
+      </VList>
+    </VCardText>
+  </VCard>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+  --v-card-list-gap: 1rem;
+}
+</style>
diff --git a/src/views/dashboard/AnalyticsStorage.vue b/src/views/dashboard/AnalyticsStorage.vue
index 4bc8b84f..4ba052d1 100644
--- a/src/views/dashboard/AnalyticsStorage.vue
+++ b/src/views/dashboard/AnalyticsStorage.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { formatFileSize } from "@/@core/utils/formatters";
 import api from "@/api";
+import trophy from "@images/misc/storage.png";
 import triangleDark from "@images/misc/triangle-dark.png";
 import triangleLight from "@images/misc/triangle-light.png";
-import trophy from "@images/misc/trophy.png";
 import { useTheme } from "vuetify";
 
 const { global } = useTheme();
diff --git a/src/views/dashboard/AnalyticsTotalEarning.vue b/src/views/dashboard/AnalyticsTotalEarning.vue
deleted file mode 100644
index 0bbb87db..00000000
--- a/src/views/dashboard/AnalyticsTotalEarning.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import aviato from '@images/logos/aviato.png'
-import bitbank from '@images/logos/bitbank.png'
-import zipcar from '@images/logos/zipcar.png'
-
-const earnings = [
-  {
-    avatar: zipcar,
-    title: 'Zipcar',
-    subtitle: 'Vuejs, React & HTML',
-    amount: '$24,895.65',
-    progress: 'primary',
-  },
-  {
-    avatar: bitbank,
-    title: 'Bitbank',
-    subtitle: 'Sketch, Figma & XD',
-    amount: '$8,6500.20',
-    progress: 'info',
-  },
-  {
-    avatar: aviato,
-    title: 'Aviato',
-    subtitle: 'HTML & Anguler',
-    amount: '$1,2450.80',
-    progress: 'secondary',
-  },
-]
-</script>
-
-<template>
-  <VCard>
-    <VCardItem>
-      <VCardTitle>Total Earning</VCardTitle>
-
-      <template #append>
-        <div class="me-n3">
-          <MoreBtn />
-        </div>
-      </template>
-    </VCardItem>
-
-    <VCardText class="pt-4">
-      <div class="d-flex align-center">
-        <h4 class="text-h4 me-2">
-          $24,895
-        </h4>
-
-        <span class="text-success">
-          <VIcon
-            size="30"
-            icon="mdi-menu-up"
-          />
-          <span>10%</span>
-        </span>
-      </div>
-      <span class="text-xs">Compared to $84,325 last year</span>
-
-      <VList class="card-list mt-9">
-        <VListItem
-          v-for="earning in earnings"
-          :key="earning.title"
-        >
-          <template #prepend>
-            <VAvatar
-              rounded
-              :image="earning.avatar"
-            />
-          </template>
-
-          <VListItemTitle class="text-sm font-weight-medium mb-1">
-            {{ earning.title }}
-          </VListItemTitle>
-          <VListItemSubtitle class="text-xs">
-            {{ earning.subtitle }}
-          </VListItemSubtitle>
-
-          <template #append>
-            <div>
-              <h6 class="text-sm font-weight-medium mb-2">
-                {{ earning.amount }}
-              </h6>
-              <VProgressLinear
-                :color="earning.progress"
-                model-value="80"
-              />
-            </div>
-          </template>
-        </VListItem>
-      </VList>
-    </VCardText>
-  </VCard>
-</template>
-
-<style lang="scss" scoped>
-.card-list {
-  --v-card-list-gap: 2.625rem;
-}
-</style>
diff --git a/src/views/dashboard/AnalyticsTotalProfitLineCharts.vue b/src/views/dashboard/AnalyticsTotalProfitLineCharts.vue
deleted file mode 100644
index 906236ff..00000000
--- a/src/views/dashboard/AnalyticsTotalProfitLineCharts.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<script setup lang="ts">
-import VueApexCharts from 'vue3-apexcharts'
-import { useTheme } from 'vuetify'
-import { hexToRgb } from '@layouts/utils'
-
-const vuetifyTheme = useTheme()
-
-const currentTheme = controlledComputed(() => vuetifyTheme.name.value, () => vuetifyTheme.current.value.colors)
-const variableTheme = controlledComputed(() => vuetifyTheme.name.value, () => vuetifyTheme.current.value.variables)
-
-const series = [
-  {
-    data: [0, 20, 5, 30, 15, 45],
-  },
-]
-
-const chartOptions = controlledComputed(() => vuetifyTheme.name.value, () => {
-  return {
-    chart: {
-      parentHeightOffset: 0,
-      toolbar: { show: false },
-    },
-    tooltip: { enabled: false },
-    grid: {
-      borderColor: `rgba(${hexToRgb(String(variableTheme.value['border-color']))},${variableTheme.value['border-opacity']})`,
-      strokeDashArray: 6,
-      xaxis: {
-        lines: { show: true },
-      },
-      yaxis: {
-        lines: { show: false },
-      },
-      padding: {
-        top: -10,
-        left: -7,
-        right: 5,
-        bottom: 5,
-      },
-    },
-    stroke: {
-      width: 3,
-      lineCap: 'butt',
-      curve: 'straight',
-    },
-    colors: [currentTheme.value.primary],
-    markers: {
-      size: 6,
-      offsetY: 4,
-      offsetX: -2,
-      strokeWidth: 3,
-      colors: ['transparent'],
-      strokeColors: 'transparent',
-      discrete: [
-        {
-          size: 5.5,
-          seriesIndex: 0,
-          strokeColor: currentTheme.value.primary,
-          fillColor: currentTheme.value.surface,
-          dataPointIndex: series[0].data.length - 1,
-        },
-      ],
-      hover: { size: 7 },
-    },
-    xaxis: {
-      labels: { show: false },
-      axisTicks: { show: false },
-      axisBorder: { show: false },
-    },
-    yaxis: {
-      labels: { show: false },
-    },
-  }
-})
-</script>
-
-<template>
-  <VCard>
-    <VCardText>
-      <h6 class="text-h6">
-        $86.4k
-      </h6>
-      <VueApexCharts
-        type="line"
-        :options="chartOptions"
-        :series="series"
-        :height="100"
-      />
-
-      <p class="text-center font-weight-medium mb-0">
-        Total Profit
-      </p>
-    </VCardText>
-  </VCard>
-</template>
diff --git a/src/views/dashboard/AnalyticsWeeklyOverview.vue b/src/views/dashboard/AnalyticsWeeklyOverview.vue
index af949cb8..4ecf2d30 100644
--- a/src/views/dashboard/AnalyticsWeeklyOverview.vue
+++ b/src/views/dashboard/AnalyticsWeeklyOverview.vue
@@ -1,90 +1,98 @@
 <script setup lang="ts">
-import VueApexCharts from 'vue3-apexcharts'
-import { useTheme } from 'vuetify'
-import { hexToRgb } from '@layouts/utils'
+import { hexToRgb } from "@layouts/utils";
+import VueApexCharts from "vue3-apexcharts";
+import { useTheme } from "vuetify";
 
-const vuetifyTheme = useTheme()
+const vuetifyTheme = useTheme();
 
-const options = controlledComputed(() => vuetifyTheme.name.value, () => {
-  const currentTheme = ref(vuetifyTheme.current.value.colors)
-  const variableTheme = ref(vuetifyTheme.current.value.variables)
+const options = controlledComputed(
+  () => vuetifyTheme.name.value,
+  () => {
+    const currentTheme = ref(vuetifyTheme.current.value.colors);
+    const variableTheme = ref(vuetifyTheme.current.value.variables);
 
-  const disabledColor = `rgba(${hexToRgb(currentTheme.value['on-surface'])},${variableTheme.value['disabled-opacity']})`
-  const borderColor = `rgba(${hexToRgb(String(variableTheme.value['border-color']))},${variableTheme.value['border-opacity']})`
+    const disabledColor = `rgba(${hexToRgb(currentTheme.value["on-surface"])},${
+      variableTheme.value["disabled-opacity"]
+    })`;
+    const borderColor = `rgba(${hexToRgb(String(variableTheme.value["border-color"]))},${
+      variableTheme.value["border-opacity"]
+    })`;
 
-  return {
-    chart: {
-      parentHeightOffset: 0,
-      toolbar: { show: false },
-    },
-    plotOptions: {
-      bar: {
-        borderRadius: 9,
-        distributed: true,
-        columnWidth: '40%',
-        endingShape: 'rounded',
-        startingShape: 'rounded',
+    return {
+      chart: {
+        parentHeightOffset: 0,
+        toolbar: { show: false },
       },
-    },
-    stroke: {
-      width: 2,
-      colors: [currentTheme.value.surface],
-    },
-    legend: { show: false },
-    grid: {
-      borderColor,
-      strokeDashArray: 7,
-      padding: {
-        top: -1,
-        right: 0,
-        left: -12,
-        bottom: 5,
-      },
-    },
-    dataLabels: { enabled: false },
-    colors: [
-      currentTheme.value['grey-100'],
-      currentTheme.value['grey-100'],
-      currentTheme.value['grey-100'],
-      currentTheme.value.primary,
-      currentTheme.value['grey-100'],
-      currentTheme.value['grey-100'],
-    ],
-    states: {
-      hover: { filter: { type: 'none' } },
-      active: { filter: { type: 'none' } },
-    },
-    xaxis: {
-      categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-      tickPlacement: 'on',
-      labels: { show: false },
-      crosshairs: { opacity: 0 },
-      axisTicks: { show: false },
-      axisBorder: { show: false },
-    },
-    yaxis: {
-      show: true,
-      tickAmount: 4,
-      labels: {
-        offsetX: -17,
-        style: {
-          colors: disabledColor,
-          fontSize: '12px',
+      plotOptions: {
+        bar: {
+          borderRadius: 9,
+          distributed: true,
+          columnWidth: "40%",
+          endingShape: "rounded",
+          startingShape: "rounded",
         },
-
-        formatter: (value: number) => `${value > 999 ? `${(value / 1000).toFixed(0)}` : value}k`,
       },
-    },
-  }
-})
+      stroke: {
+        width: 2,
+        colors: [currentTheme.value.surface],
+      },
+      legend: { show: false },
+      grid: {
+        borderColor,
+        strokeDashArray: 7,
+        padding: {
+          top: -1,
+          right: 0,
+          left: -12,
+          bottom: 5,
+        },
+      },
+      dataLabels: { enabled: false },
+      colors: [
+        currentTheme.value["grey-100"],
+        currentTheme.value["grey-100"],
+        currentTheme.value["grey-100"],
+        currentTheme.value.primary,
+        currentTheme.value["grey-100"],
+        currentTheme.value["grey-100"],
+      ],
+      states: {
+        hover: { filter: { type: "none" } },
+        active: { filter: { type: "none" } },
+      },
+      xaxis: {
+        categories: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+        tickPlacement: "on",
+        labels: { show: false },
+        crosshairs: { opacity: 0 },
+        axisTicks: { show: false },
+        axisBorder: { show: false },
+      },
+      yaxis: {
+        show: true,
+        tickAmount: 4,
+        labels: {
+          offsetX: -17,
+          style: {
+            colors: disabledColor,
+            fontSize: "12px",
+          },
 
-const series = [{ data: [37, 57, 45, 75, 57, 40, 65] }]
+          formatter: (value: number) =>
+            `${value > 999 ? `${(value / 1000).toFixed(0)}` : value}k`,
+        },
+      },
+    };
+  }
+);
+
+const series = [{ data: [37, 57, 45, 75, 57, 40, 65] }];
 </script>
 
 <template>
   <VCard>
     <VCardItem>
-      <VCardTitle>Weekly Overview</VCardTitle>
+      <VCardTitle>最近入库</VCardTitle>
 
       <template #append>
         <div class="me-n3">
@@ -94,25 +102,14 @@ const series = [{ data: [37, 57, 45, 75, 57, 40, 65] }]
     </VCardItem>
 
     <VCardText>
-      <VueApexCharts
-        type="bar"
-        :options="options"
-        :series="series"
-        :height="220"
-      />
+      <VueApexCharts type="bar" :options="options" :series="series" :height="220" />
 
       <div class="d-flex align-center mb-3">
-        <h5 class="text-h5 me-4">
-          45%
-        </h5>
-        <p>
-          Your sales performance is 45% 😎 better compared to last month
-        </p>
+        <h5 class="text-h5 me-4">45</h5>
+        <p>最近一周入库了 45 部影片 😎</p>
       </div>
 
-      <VBtn block>
-        Details
-      </VBtn>
+      <VBtn block> 查看详情 </VBtn>
     </VCardText>
   </VCard>
 </template>