fix dashboard

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>