feat: 添加 vue-echarts

locales/English.yml

@@ -2,6 +2,7 @@
 
 home: home
 about: about
+echarts: echarts
 edit: Edit
 to test HMR: to test HMR
 check out: Check out

locales/简体中文.yml

@@ -2,6 +2,7 @@
 
 home: 主页
 about: 关于
+echarts: 图表
 edit: 编辑
 to test HMR: 测试热更新
 check out: 查看

package.json

@@ -47,6 +47,7 @@
     "bumpp": "^9.1.0",
     "c8": "^7.13.0",
     "cross-env": "^7.0.3",
+    "echarts": "^5.4.2",
     "eslint": "^8.40.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -87,6 +88,7 @@
     "vitest": "^0.31.0",
     "vue": "^3.3.2",
     "vue-dark-switch": "^0.5.9",
+    "vue-echarts": "^6.5.5",
     "vue-i18n": "^9.2.2",
     "vue-request": "2.0.0-rc.4",
     "vue-router": "^4.2.0"

presets/types/type-router.d.ts

@@ -42,6 +42,7 @@ declare module 'vue-router/auto/routes' {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
     '/[...notFound]': RouteRecordInfo<'/[...notFound]', '/:notFound(.*)', { notFound: ParamValue<true> }, { notFound: ParamValue<false> }>,
     '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
+    '/echarts': RouteRecordInfo<'/echarts', '/echarts', Record<never, never>, Record<never, never>>,
   }
 }
 

src/components/Navigation.vue

@@ -1,8 +1,24 @@
 <script setup lang="ts">
+import { getRoutes } from '../modules/router'
 import { SwitchIcon } from 'vue-dark-switch'
 import 'vue-dark-switch/dist/style.css'
 
 const { t } = useI18n()
+
+const routes = getRoutes()
+	.filter((r) => !r.path.includes('notFound'))
+	.map((r) => {
+		let { path, name } = r
+		if (path === '/') {
+			return { path, name: 'home' }
+		}
+
+		if (!name) {
+			name = path
+		}
+
+		return { path, name: name.toString().slice(1).replaceAll('/', ' · ') }
+	})
 </script>
 
 <template>
@@ -15,15 +31,9 @@ const { t } = useI18n()
 		</span>
 
 		<ul class="flex items-center gap-2 text-sm font-medium">
-			<li class="hidden !block">
-				<RouterLink class="rounded-lg px-3 py-2" to="/">
-					{{ t('home') }}
-				</RouterLink>
-			</li>
-
-			<li>
-				<RouterLink class="rounded-lg px-3 py-2" to="/about">
-					{{ t('about') }}
+			<li v-for="r of routes" :key="r.path" class="hidden !block">
+				<RouterLink class="rounded-lg px-3 py-2" :to="r.path">
+					{{ t(r.name) }}
 				</RouterLink>
 			</li>
 

src/modules/router.ts

@@ -1,5 +1,5 @@
 import type { App } from 'vue'
-import { setupLayouts } from 'virtual:meta-layouts'
+import { setupLayouts, createGetRoutes } from 'virtual:meta-layouts'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes as fileRoutes } from 'vue-router/auto/routes'
 
@@ -8,4 +8,6 @@ export const router = createRouter({
 	routes: setupLayouts(fileRoutes),
 })
 
+export const getRoutes = createGetRoutes(router)
+
 export default (app: App) => app.use(router)

src/pages/[...notFound].vue

@@ -45,7 +45,10 @@ const typedRef = useTyped([' is not found!'])
 }
 </style>
 
-<route lang="yaml">
-meta:
-  layout: notFound
+<route lang="json">
+{
+	"meta": {
+		"layout": "notFound"
+	}
+}
 </route>

src/pages/echarts.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { PieChart } from 'echarts/charts'
+import {
+	TitleComponent,
+	TooltipComponent,
+	LegendComponent,
+} from 'echarts/components'
+import VChart, { THEME_KEY } from 'vue-echarts'
+import { ref, provide } from 'vue'
+
+use([
+	CanvasRenderer,
+	PieChart,
+	TitleComponent,
+	TooltipComponent,
+	LegendComponent,
+])
+
+const { isDark } = useDarks()
+
+provide(
+	THEME_KEY,
+	computed(() => (isDark.value ? 'dark' : ''))
+)
+
+const option = ref({
+	title: {
+		text: 'Traffic Sources',
+		left: 'center',
+	},
+	tooltip: {
+		trigger: 'item',
+		formatter: '{a} <br/>{b} : {c} ({d}%)',
+	},
+	legend: {
+		orient: 'vertical',
+		left: 'left',
+		data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
+	},
+	series: [
+		{
+			name: 'Traffic Sources',
+			type: 'pie',
+			radius: '55%',
+			center: ['50%', '60%'],
+			data: [
+				{ value: 335, name: 'Direct' },
+				{ value: 310, name: 'Email' },
+				{ value: 234, name: 'Ad Networks' },
+				{ value: 135, name: 'Video Ads' },
+				{ value: 1548, name: 'Search Engines' },
+			],
+			emphasis: {
+				itemStyle: {
+					shadowBlur: 10,
+					shadowOffsetX: 0,
+					shadowColor: 'rgba(0, 0, 0, 0.5)',
+				},
+			},
+		},
+	],
+})
+</script>
+
+<template>
+	<v-chart class="chart" :option="option" autoresize />
+</template>
+
+<style scoped>
+.chart {
+	height: 100vh;
+}
+</style>