chore: 调整工作台页面样式-ui稿一致

apps/web-antd/src/components/background-chart/BackgroundChart.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+interface Props {
+  /** 图表配置选项 */
+  options: any;
+  /** 图表透明度 */
+  opacity?: number;
+  /** 图表容器底部内边距 */
+  paddingBottom?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  opacity: 0.6,
+  paddingBottom: '1.5rem',
+});
+
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+// 初始化图表
+function initChart() {
+  if (props.options) {
+    renderEcharts(props.options);
+  }
+}
+
+// 监听配置变化
+watch(
+  () => props.options,
+  () => {
+    initChart();
+  },
+  { deep: true },
+);
+
+// 窗口大小变化时调整图表
+const handleResize = () => {
+  if (chartRef.value) {
+    chartRef.value.resize?.();
+  }
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+});
+</script>
+
+<template>
+  <div
+    class="absolute inset-x-0 bottom-0 top-0 z-0 overflow-visible rounded-lg"
+    :style="{ paddingBottom: paddingBottom }"
+  >
+    <EchartsUI ref="chartRef" :style="{ opacity: opacity }" class="h-full w-full" />
+  </div>
+</template>
+

apps/web-antd/src/components/background-chart/index.ts

@@ -0,0 +1,2 @@
+export { default as BackgroundChart } from './BackgroundChart.vue';
+