dashboard (#6)

* feat(dashboard): 增加dashboard示例

* feat(chart-ui): 增加图表UI组件库

* feat(dashboard): 完善dashboard示例

packages/business/chart-ui/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@vben/chart-ui",
+  "version": "5.0.0",
+  "homepage": "https://github.com/vbenjs/vue-vben-admin",
+  "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vbenjs/vue-vben-admin.git",
+    "directory": "packages/business/chart-ui"
+  },
+  "license": "MIT",
+  "type": "module",
+  "scripts": {
+    "build": "pnpm vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "peerDependencies": {
+    "@vben-core/design": "workspace:*"
+  },
+  "dependencies": {
+    "@vben-core/preferences": "workspace:*",
+    "echarts": "^5.5.0",
+    "vue": "^3.4.29"
+  },
+  "devDependencies": {
+    "@vben/types": "workspace:*"
+  }
+}

packages/business/chart-ui/src/chart.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { echartsInstance, ECOption } from './index';
+import { onMounted, ref, unref, warn } from 'vue';
+import { usePreferences } from '@vben-core/preferences';
+const { isDark } = usePreferences();
+interface Props {
+  height?: string;
+  width?: string;
+}
+withDefaults(defineProps<Props>(), {
+  height: '500px',
+  width: '100%',
+});
+
+const instance = ref();
+const instanceRef = ref(HTMLElement);
+onMounted(() => {
+  instance.value = echartsInstance.init(
+    instanceRef.value,
+    isDark.value ? 'dark' : '',
+  );
+});
+const setChart = (option: ECOption, clear: boolean = true) => {
+  const c = unref(instance);
+  if (!c) {
+    warn('instance is null');
+    return;
+  }
+  if (clear) c.clear();
+  c.setOption(option);
+};
+defineExpose({ setChart });
+</script>
+
+<template>
+  <div ref="instanceRef" :style="{ height, width }"></div>
+</template>

packages/business/chart-ui/src/index.ts

@@ -0,0 +1,59 @@
+import * as echarts from 'echarts/core';
+import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+
+  // 数据集组件
+  DatasetComponent,
+  // 内置数据转换器组件 (filter, sort)
+  TransformComponent,
+  LegendComponent,
+  ToolboxComponent,
+} from 'echarts/components';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import type {
+  // 系列类型的定义后缀都为 SeriesOption
+  BarSeriesOption,
+  LineSeriesOption,
+} from 'echarts/charts';
+import type {
+  // 组件类型的定义后缀都为 ComponentOption
+  TitleComponentOption,
+  TooltipComponentOption,
+  GridComponentOption,
+  DatasetComponentOption,
+} from 'echarts/components';
+import type { ComposeOption } from 'echarts/core';
+
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
+export type ECOption = ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | TitleComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | DatasetComponentOption
+>;
+
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  PieChart,
+  RadarChart,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  BarChart,
+  LineChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+  LegendComponent,
+  ToolboxComponent,
+]);
+export const echartsInstance = echarts;
+export { default as chart } from './chart.vue';

packages/business/chart-ui/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "@vben/tsconfig/web.json",
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

packages/business/chart-ui/vite.config.mts

@@ -0,0 +1,3 @@
+import { defineConfig } from '@vben/vite-config';
+
+export default defineConfig();