update charts

Author: NeserCode

package-lock.json

@@ -16,6 +16,7 @@
 		"@vueuse/core": "^10.3.0",
 		"axios": "^1.4.0",
 		"crypto-js": "^4.1.1",
+		"echarts": "^5.4.3",
 		"nprogress": "^0.2.0",
 		"vue": "^3.3.4",
 		"vue-router": "^4.2.4"

package.json

@@ -0,0 +1,167 @@
+<script lang="ts" setup>
+import { useStorage } from "@vueuse/core"
+import * as echarts from "echarts"
+import {
+	computed,
+	nextTick,
+	onMounted,
+	onUnmounted,
+	ref,
+	toRefs,
+	watch,
+} from "vue"
+
+import { useDarkMode } from "../composables/useDarkMode"
+
+import type { ECharts } from "echarts"
+import type { AngelDataObject } from "../share"
+
+const $props = defineProps<{
+	angel: AngelDataObject
+}>()
+const { angel } = toRefs($props)
+
+const chart = ref<ECharts | null>(null)
+const chartBody = ref<HTMLDivElement>()
+const isMini = useStorage("rocox-mini", true)
+const { isDarkMode } = useDarkMode()
+
+const init = () => {
+	chart.value = echarts.init(chartBody.value, "", {
+		renderer: "svg",
+		...bounding.value,
+	})
+	chart.value.setOption(opt.value)
+}
+
+const bounding = computed(() => ({
+	width: isMini.value ? 160 : 256,
+	height: isMini.value ? 160 : 256,
+}))
+const chartValues = computed(() => [
+	angel.value.wg,
+	angel.value.mg,
+	angel.value.fy,
+	angel.value.mk,
+	angel.value.sm,
+	angel.value.sd,
+])
+const optTitleColor = computed(() => (isDarkMode.value ? "#ccc" : "#333"))
+const optTextColor = computed(() => (isDarkMode.value ? "#aaa" : "#555"))
+const optBlurBg = computed(() =>
+	isDarkMode.value ? "rgba(32, 32, 32, 0.5)" : "rgba(255, 255, 255, 0.5)"
+)
+const opt = computed(() => ({
+	title: {
+		text: isMini.value ? angel.value.add : "种族值",
+		subtext: isMini.value ? undefined : angel.value.add,
+		textStyle: {
+			color: optTitleColor.value,
+		},
+	},
+	tooltip: {
+		show: true,
+		position: isMini.value ? ["-70%", "-5%"] : undefined,
+		hideDelay: 500,
+		confine: !isMini.value,
+		className: "tooltip",
+		backgroundColor: optBlurBg.value,
+		textStyle: {
+			color: optTextColor.value,
+			fontSize: isMini.value ? 12 : 14,
+		},
+	},
+	animationDuration: 300,
+	radar: {
+		center: ["50%", "50%"],
+		nameGap: 5,
+		slient: true,
+		indicator: [
+			{ name: `物攻`, min: 0, max: 200, color: optTextColor.value },
+			{ name: `魔攻`, min: 0, max: 200, color: optTextColor.value },
+			{ name: `物抗`, min: 0, max: 200, color: optTextColor.value },
+			{ name: `魔抗`, min: 0, max: 200, color: optTextColor.value },
+			{ name: `精力`, min: 0, max: 200, color: optTextColor.value },
+			{ name: `速度`, min: 0, max: 200, color: optTextColor.value },
+		],
+		axisLine: {
+			show: false,
+		},
+		splitLine: {
+			show: true,
+			lineStyle: {
+				color: optTextColor.value,
+				width: 2,
+			},
+		},
+	},
+	series: [
+		{
+			name: "种族值",
+			type: "radar",
+			select: {
+				disabled: true,
+				selectedMode: "single",
+			},
+			data: [
+				{
+					value: chartValues.value,
+					tooltip: chartValues.value,
+				},
+			],
+		},
+	],
+}))
+
+onMounted(() => {
+	watch(
+		opt,
+		() => {
+			if (!chart.value) {
+			} else chart.value?.dispose()
+
+			nextTick(() => {
+				init()
+				chart.value?.on("mouseover", (data) => {
+					console.log(data)
+				})
+			})
+		},
+		{
+			immediate: true,
+			deep: true,
+		}
+	)
+})
+onUnmounted(() => {
+	if (chart.value !== null) chart.value.dispose()
+})
+</script>
+
+<template>
+	<div class="chart-container">
+		<div id="power-chart" ref="chartBody"></div>
+	</div>
+</template>
+
+<style lang="postcss" scoped>
+.chart-container {
+	@apply flex items-center justify-center w-48 h-48
+  rounded-md dark:bg-slate-800
+  transition-all ease-in-out duration-300;
+
+	@apply sm:w-72 sm:h-72;
+}
+#power-chart {
+	@apply w-40 h-40;
+	@apply sm:w-64 sm:h-64;
+}
+#power-chart div {
+	@apply overflow-auto;
+}
+</style>
+<style lang="postcss">
+.tooltip {
+	@apply backdrop-blur;
+}
+</style>

src/components/AngelPowerChart.vue

@@ -93,7 +93,7 @@ const throttleToggleIspinned = useThrottleFn(() => {
 	toggleIspinned()
 }, 800)
 const throttleToggleMini = useThrottleFn(async () => {
-	toggleMiniWindow()
+	await toggleMiniWindow(!isMini.value)
 }, 800)
 
 function minimize() {
@@ -218,6 +218,8 @@ onMounted(async () => {
 	bg-slate-100 dark:bg-slate-900 text-slate-600 dark:text-slate-200
 	transition-all
   select-none;
+
+	z-index: 99999999;
 }
 
 .title {

src/components/native/TitleBar.vue

@@ -59,7 +59,7 @@ export const toggleMiniWindow = async (symbol?: boolean) => {
 	const isMini = useStorage("rocox-mini", true)
 	let size =
 		symbol !== undefined
-			? boundings[symbol ? 1 : 0]
+			? boundings[symbol ? 0 : 1]
 			: boundings[isMini.value ? 0 : 1]
 
 	await appWindow.setSize(new LogicalSize(size.width, size.height))