init portal

2025-12-24 22:49:39 +08:00
parent 91fd3c4ac2
commit 365427c851
119 changed files with 29103 additions and 0 deletions
--- a/frontend/portal/src/components/dashboard/RevenueStreamWidget.vue
+++ b/frontend/portal/src/components/dashboard/RevenueStreamWidget.vue
@@ -0,0 +1,96 @@
+<script setup>
+import { useLayout } from '@/layout/composables/layout';
+import { onMounted, ref, watch } from 'vue';
+
+const { getPrimary, getSurface, isDarkTheme } = useLayout();
+
+const chartData = ref(null);
+const chartOptions = ref(null);
+
+function setChartData() {
+    const documentStyle = getComputedStyle(document.documentElement);
+
+    return {
+        labels: ['Q1', 'Q2', 'Q3', 'Q4'],
+        datasets: [
+            {
+                type: 'bar',
+                label: 'Subscriptions',
+                backgroundColor: documentStyle.getPropertyValue('--p-primary-400'),
+                data: [4000, 10000, 15000, 4000],
+                barThickness: 32
+            },
+            {
+                type: 'bar',
+                label: 'Advertising',
+                backgroundColor: documentStyle.getPropertyValue('--p-primary-300'),
+                data: [2100, 8400, 2400, 7500],
+                barThickness: 32
+            },
+            {
+                type: 'bar',
+                label: 'Affiliate',
+                backgroundColor: documentStyle.getPropertyValue('--p-primary-200'),
+                data: [4100, 5200, 3400, 7400],
+                borderRadius: {
+                    topLeft: 8,
+                    topRight: 8
+                },
+                borderSkipped: true,
+                barThickness: 32
+            }
+        ]
+    };
+}
+
+function setChartOptions() {
+    const documentStyle = getComputedStyle(document.documentElement);
+    const borderColor = documentStyle.getPropertyValue('--surface-border');
+    const textMutedColor = documentStyle.getPropertyValue('--text-color-secondary');
+
+    return {
+        maintainAspectRatio: false,
+        aspectRatio: 0.8,
+        scales: {
+            x: {
+                stacked: true,
+                ticks: {
+                    color: textMutedColor
+                },
+                grid: {
+                    color: 'transparent',
+                    borderColor: 'transparent'
+                }
+            },
+            y: {
+                stacked: true,
+                ticks: {
+                    color: textMutedColor
+                },
+                grid: {
+                    color: borderColor,
+                    borderColor: 'transparent',
+                    drawTicks: false
+                }
+            }
+        }
+    };
+}
+
+watch([getPrimary, getSurface, isDarkTheme], () => {
+    chartData.value = setChartData();
+    chartOptions.value = setChartOptions();
+});
+
+onMounted(() => {
+    chartData.value = setChartData();
+    chartOptions.value = setChartOptions();
+});
+</script>
+
+<template>
+    <div class="card">
+        <div class="font-semibold text-xl mb-4">Revenue Stream</div>
+        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-80" />
+    </div>
+</template>