From fa46f982eb9e3cfc056afeb0c4a35032d5fd7b27 Mon Sep 17 00:00:00 2001
From: Thomas Wang <55052188+cxzlw@users.noreply.github.com>
Date: Fri, 29 Nov 2024 23:17:28 +0800
Subject: [PATCH] fix: pass eslint (#46)

* fix: @typescript-eslint/no-empty-object-type

* fix: vue/no-dupe-keys

* fix: use @ts-expect-error instead of @ts-ignore

* fix: irregular space

* fix: @typescript-eslint/no-empty-object-type

* fix: v-for and v-if related errors

* fix: add eslint disable for typst
---
 eslint.config.js                              |   2 +
 extensions/chart/src/widgets/bubbleChart.vue  |  23 ++--
 extensions/chart/src/widgets/scatterChart.vue |  23 ++--
 extensions/geometry/src/dot.vue               |  43 +++----
 extensions/layout/src/container.vue           |   6 +-
 extensions/math/src/math-function.vue         |   6 +-
 extensions/math/src/number-axis.vue           |  92 ++++++++++----
 extensions/math/src/number-plane.vue          | 120 +++++++++---------
 extensions/table/src/table-item.vue           |   6 +-
 extensions/typst/src/index.vue                |  34 +++--
 packages/app/src/components/Preview.vue       |  40 +++---
 packages/client/entry.ts                      |  19 ++-
 12 files changed, 228 insertions(+), 186 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index 2eff106..91cf0e0 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -23,6 +23,8 @@ export default [
       "@typescript-eslint/no-explicit-any": "off",
       "vue/multi-word-component-names": "off",
       "@typescript-eslint/no-unused-vars": "warn",
+      // 这条规则被类型检查器替代
+      "no-undef": "off",
     },
   },
 ];
diff --git a/extensions/chart/src/widgets/bubbleChart.vue b/extensions/chart/src/widgets/bubbleChart.vue
index a970b97..aeb420d 100644
--- a/extensions/chart/src/widgets/bubbleChart.vue
+++ b/extensions/chart/src/widgets/bubbleChart.vue
@@ -1,24 +1,21 @@
 <script setup lang="ts">
-import { useSimpleChart } from '../utils/useSimpleChart.ts'
-import type { LineChartOptions } from '..'
-import { LineChart } from '..'
+import type { LineChartOptions } from "..";
+import { LineChart } from "..";
+import { useSimpleChart } from "../utils/useSimpleChart.ts";
 
-export interface BubbleChartOptions extends LineChartOptions {
-}
+export type BubbleChartOptions = LineChartOptions;
 
 const props = withDefaults(defineProps<BubbleChartOptions>(), {
   gridAlign: false,
-})
-const {
-  options,
-} = useSimpleChart<BubbleChartOptions>(props)
+});
+const { options } = useSimpleChart<BubbleChartOptions>(props);
 
-options.style ??= {}
+options.style ??= {};
 options.style = {
   showLine: false,
   animateIndex: true,
   ...options.style,
-}
+};
 </script>
 
 <template>
@@ -27,6 +24,4 @@ options.style = {
   </LineChart>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/extensions/chart/src/widgets/scatterChart.vue b/extensions/chart/src/widgets/scatterChart.vue
index 0909e96..eee7544 100644
--- a/extensions/chart/src/widgets/scatterChart.vue
+++ b/extensions/chart/src/widgets/scatterChart.vue
@@ -1,24 +1,21 @@
 <script setup lang="ts">
-import { useSimpleChart } from '../utils/useSimpleChart.ts'
-import type { LineChartOptions } from '..'
-import { LineChart } from '..'
+import type { LineChartOptions } from "..";
+import { LineChart } from "..";
+import { useSimpleChart } from "../utils/useSimpleChart.ts";
 
-export interface ScatterChartOptions extends LineChartOptions {
-}
+export type ScatterChartOptions = LineChartOptions;
 
 const props = withDefaults(defineProps<ScatterChartOptions>(), {
   gridAlign: false,
-})
-const {
-  options,
-} = useSimpleChart<ScatterChartOptions>(props)
+});
+const { options } = useSimpleChart<ScatterChartOptions>(props);
 
-options.style ??= {}
+options.style ??= {};
 options.style = {
   showLine: false,
   animateIndex: true,
   ...options.style,
-}
+};
 </script>
 
 <template>
@@ -27,6 +24,4 @@ options.style = {
   </LineChart>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/extensions/geometry/src/dot.vue b/extensions/geometry/src/dot.vue
index 1724b21..29429fa 100644
--- a/extensions/geometry/src/dot.vue
+++ b/extensions/geometry/src/dot.vue
@@ -1,42 +1,41 @@
 <script setup lang="ts">
-import { defineWidget } from '@vue-motion/core'
-import { type FigureOptions, figure } from '@vue-motion/lib'
-import { computed, defineProps } from 'vue'
-import { Arc, Text } from '@vue-motion/lib'
+import { defineWidget } from "@vue-motion/core";
+import { Arc, type FigureOptions, Text, figure } from "@vue-motion/lib";
+import { computed, defineProps } from "vue";
 
 export interface DotOptions extends FigureOptions {
-  size?: number
-  tag?: string | null
-  position?: 'left' | 'right' | 'top' | 'bottom' | [number, number]
+  size?: number;
+  tag?: string | null;
+  position?: "left" | "right" | "top" | "bottom" | [number, number];
 }
 
-const props = defineProps<DotOptions>()
-const options = defineWidget<DotOptions>(props)
+const props = defineProps<DotOptions>();
+const options = defineWidget<DotOptions>(props);
 
-const position = computed(() => {
+const _position = computed(() => {
   if (Array.isArray(options.position)) {
-    return options.position
+    return options.position;
   }
-  if (options.position === 'left') {
-    return [-(options.size ?? 20), 0]
+  if (options.position === "left") {
+    return [-(options.size ?? 20), 0];
   }
-  if (options.position === 'right') {
-    return [options.size ?? 20, 0]
+  if (options.position === "right") {
+    return [options.size ?? 20, 0];
   }
-  if (options.position === 'top') {
-    return [0, -(options.size ?? 20)]
+  if (options.position === "top") {
+    return [0, -(options.size ?? 20)];
   }
-  if (options.position === 'bottom') {
-    return [0, options.size ?? 20]
+  if (options.position === "bottom") {
+    return [0, options.size ?? 20];
   }
-  return [0, -(options.size ?? 20)]
-})
+  return [0, -(options.size ?? 20)];
+});
 </script>
 
 <template>
   <g v-bind="figure(options)">
     <Arc :radius="(options.size ?? 20) / 2" />
-    <Text v-if="options.tag" :x="position[0]" :y="position[1]">
+    <Text v-if="options.tag" :x="_position[0]" :y="_position[1]">
       {{ options.tag }}
     </Text>
   </g>
diff --git a/extensions/layout/src/container.vue b/extensions/layout/src/container.vue
index ef942cd..f5e0342 100644
--- a/extensions/layout/src/container.vue
+++ b/extensions/layout/src/container.vue
@@ -30,7 +30,7 @@ const children = useChildren();
 
 const mountedFlag = ref(false);
 
-const width: ComputedRef<number> = computed(() => {
+const _width: ComputedRef<number> = computed(() => {
   if (!mountedFlag.value) return 0;
   if (options.width) return options.width;
   const counter: number[] = [];
@@ -39,7 +39,7 @@ const width: ComputedRef<number> = computed(() => {
   });
   return Math.max(...counter);
 });
-const height: ComputedRef<number> = computed(() => {
+const _height: ComputedRef<number> = computed(() => {
   if (!mountedFlag.value) return 0;
   if (options.height) return options.height;
   const counter: number[] = [];
@@ -94,7 +94,7 @@ const paddingRight = computed(
       height: `${height}px`,
     }"
   >
-    <g :transform="`translate(${width / 2}, ${height / 2})`">
+    <g :transform="`translate(${_width / 2}, ${_height / 2})`">
       <slot />
     </g>
   </svg>
diff --git a/extensions/math/src/math-function.vue b/extensions/math/src/math-function.vue
index 3c6ddad..1a72ba7 100644
--- a/extensions/math/src/math-function.vue
+++ b/extensions/math/src/math-function.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { defineWidget } from "@vue-motion/core";
 import type { FigureOptions, Growable } from "@vue-motion/lib";
 import { Path, figure } from "@vue-motion/lib";
-import { defineWidget } from "@vue-motion/core";
+import { ref, watch } from "vue";
 // import type { MathFunction } from './math-function'
 
 export interface MathFunctionOptions extends FigureOptions, Growable {
@@ -38,7 +38,7 @@ function generateSvgPath(
   for (let x = xMin; x <= xMax; x += step) {
     const y = mathFunc(x);
 
-    // Convert the values ​​of a mathematical function to SVG coordinates
+    // Convert the values of a mathematical function to SVG coordinates
     const svgX = (x - xMin) * scaleX;
     const svgY = (yMax - y) * scaleY; // Invert the y-axis to conform to the SVG coordinate system
 
diff --git a/extensions/math/src/number-axis.vue b/extensions/math/src/number-axis.vue
index 60e4dd7..5735e8a 100644
--- a/extensions/math/src/number-axis.vue
+++ b/extensions/math/src/number-axis.vue
@@ -1,49 +1,75 @@
 <script setup lang="ts">
-import { Line, Polygon, Text, widget } from '@vue-motion/lib'
-import { defineWidget } from '@vue-motion/core'
-import type { Growable, WidgetOptions } from '@vue-motion/lib'
+import { defineWidget } from "@vue-motion/core";
+import type { Growable, WidgetOptions } from "@vue-motion/lib";
+import { Line, Polygon, Text, widget } from "@vue-motion/lib";
 
 export interface NumberAxisOptions extends WidgetOptions, Growable {
-  baseUnit?: 'number' | 'radian' | 'degree'
-  interval?: number
-  trend?: (count: number) => string
-  tip?: string // Arrow tip color or 'none'
-  trim?: string // Arrow trim color or 'none'
-  fontColor?: string // Font color
-  fontSize?: number // Font size
-  domain: [number, number]
+  baseUnit?: "number" | "radian" | "degree";
+  interval?: number;
+  trend?: (count: number) => string;
+  tip?: string; // Arrow tip color or 'none'
+  trim?: string; // Arrow trim color or 'none'
+  fontColor?: string; // Font color
+  fontSize?: number; // Font size
+  domain: [number, number];
 }
 
-const props = defineProps<NumberAxisOptions>()
-const options = defineWidget<NumberAxisOptions>(props)
+const props = defineProps<NumberAxisOptions>();
+const options = defineWidget<NumberAxisOptions>(props);
 
 function getIntervalOrDefault(interval?: number): number {
-  return interval ?? 100
+  return interval ?? 100;
 }
 
 function getProgressOrDefault(progress?: number): number {
-  return progress ?? 1
+  return progress ?? 1;
 }
 </script>
 
 <template>
   <g v-if="options.baseUnit === 'radian'" v-bind="widget(options)">
     <Line
-      :from="[options.domain[0] * getIntervalOrDefault(options.interval) * getProgressOrDefault(options.progress), 0]"
-      :to="[options.domain[1] * getIntervalOrDefault(options.interval) * getProgressOrDefault(options.progress), 0]"
+      :from="[
+        options.domain[0] *
+          getIntervalOrDefault(options.interval) *
+          getProgressOrDefault(options.progress),
+        0,
+      ]"
+      :to="[
+        options.domain[1] *
+          getIntervalOrDefault(options.interval) *
+          getProgressOrDefault(options.progress),
+        0,
+      ]"
       :border-color="options.trim ?? 'white'"
     />
     <Line
-      v-for="i in Math.floor(Math.abs(options.domain[1] - options.domain[0]) / Math.PI * 2)"
-      :from="[(i + 1) * (options.interval ?? Math.PI * 50), -10]" :to="[(i + 1) * (options.interval ?? Math.PI * 50), 10]"
-      :border-color="trim ?? 'white'" :x="(options.domain[0] - 1) * (options.interval ?? Math.PI * 50)"
+      v-for="i in Math.floor(
+        (Math.abs(options.domain[1] - options.domain[0]) / Math.PI) * 2,
+      )"
+      :key="i"
+      :from="[(i + 1) * (options.interval ?? Math.PI * 50), -10]"
+      :to="[(i + 1) * (options.interval ?? Math.PI * 50), 10]"
+      :border-color="trim ?? 'white'"
+      :x="(options.domain[0] - 1) * (options.interval ?? Math.PI * 50)"
     />
     <Text
-      v-for="i in Math.floor(Math.abs(options.domain[1] - options.domain[0]) / Math.PI * 2)" border-color="none"
-      :fill-color="options.fontColor ?? 'white'" :x="(options.domain[0] + i) * (options.interval ?? Math.PI * 50)" :y="20"
-      :rotation="-(options.rotation ?? 0)" align="start" :font-size="20"
+      v-for="i in Math.floor(
+        (Math.abs(options.domain[1] - options.domain[0]) / Math.PI) * 2,
+      )"
+      :key="i"
+      border-color="none"
+      :fill-color="options.fontColor ?? 'white'"
+      :x="(options.domain[0] + i) * (options.interval ?? Math.PI * 50)"
+      :y="20"
+      :rotation="-(options.rotation ?? 0)"
+      align="start"
+      :font-size="20"
     >
-      {{ (options.trend ?? (x => (x).toString()))((i + options.domain[0]) / 2) }} π
+      {{
+        (options.trend ?? ((x) => x.toString()))((i + options.domain[0]) / 2)
+      }}
+      π
     </Text>
     <Polygon
       :points="[
@@ -60,12 +86,23 @@ function getProgressOrDefault(progress?: number): number {
   <!-- ToDo: Add support for degree -->
   <g v-else v-bind="widget(options)">
     <Line
-      :from="[options.domain[0] * getIntervalOrDefault(options.interval) * getProgressOrDefault(options.progress), 0]"
-      :to="[options.domain[1] * getIntervalOrDefault(options.interval) * getProgressOrDefault(options.progress), 0]"
+      :from="[
+        options.domain[0] *
+          getIntervalOrDefault(options.interval) *
+          getProgressOrDefault(options.progress),
+        0,
+      ]"
+      :to="[
+        options.domain[1] *
+          getIntervalOrDefault(options.interval) *
+          getProgressOrDefault(options.progress),
+        0,
+      ]"
       :border-color="options.trim ?? 'white'"
     />
     <Line
       v-for="i in Math.abs(options.domain[1] - options.domain[0])"
+      :key="i"
       :from="[(i + 1) * getIntervalOrDefault(options.interval), -10]"
       :to="[(i + 1) * getIntervalOrDefault(options.interval), 10]"
       :border-color="options.trim ?? 'white'"
@@ -73,6 +110,7 @@ function getProgressOrDefault(progress?: number): number {
     />
     <Text
       v-for="i in Math.abs(options.domain[1] - options.domain[0] + 1)"
+      :key="i"
       border-color="none"
       :fill-color="options.fontColor ?? 'white'"
       :x="(options.domain[0] + i - 1) * getIntervalOrDefault(options.interval)"
@@ -81,7 +119,7 @@ function getProgressOrDefault(progress?: number): number {
       align="start"
       :font-size="20"
     >
-      {{ (options.trend ?? (x => x.toString()))(i + options.domain[0] - 1) }}
+      {{ (options.trend ?? ((x) => x.toString()))(i + options.domain[0] - 1) }}
     </Text>
     <Polygon
       :points="[
diff --git a/extensions/math/src/number-plane.vue b/extensions/math/src/number-plane.vue
index 3ffc60e..949efaf 100644
--- a/extensions/math/src/number-plane.vue
+++ b/extensions/math/src/number-plane.vue
@@ -1,36 +1,36 @@
 <script setup lang="ts">
-import type { Growable, WidgetOptions } from '@vue-motion/lib'
-import { Line, Text, widget } from '@vue-motion/lib'
-import { defineWidget } from '@vue-motion/core'
-import { NumberAxis } from '.'
+import { defineWidget } from "@vue-motion/core";
+import type { Growable, WidgetOptions } from "@vue-motion/lib";
+import { Line, Text, widget } from "@vue-motion/lib";
+import { NumberAxis } from ".";
 
 export interface NumberPlaneOptions extends WidgetOptions, Growable {
-  intervalX?: number
-  trendX?: (count: number) => string
-  tipX?: string // Arrow tip color or 'none'
-  trimX?: string // Arrow trim color or 'none'
-  fontColorX?: string // Font color
-  fontSizeX?: number // Font size
-  domainX: [number, number]
-  intervalY?: number
-  trendY?: (count: number) => string
-  tipY?: string // Arrow tip color or 'none'
-  trimY?: string // Arrow trim color or 'none'
-  fontColorY?: string // Font color
-  fontSizeY?: number // Font size
-  domainY: [number, number]
-  baseUnit?: 'number' | 'radian' | 'degree'
-  grid?: boolean
-  gridColor?: string
-  gridWidth?: number
-  yRotation?: number
+  intervalX?: number;
+  trendX?: (count: number) => string;
+  tipX?: string; // Arrow tip color or 'none'
+  trimX?: string; // Arrow trim color or 'none'
+  fontColorX?: string; // Font color
+  fontSizeX?: number; // Font size
+  domainX: [number, number];
+  intervalY?: number;
+  trendY?: (count: number) => string;
+  tipY?: string; // Arrow tip color or 'none'
+  trimY?: string; // Arrow trim color or 'none'
+  fontColorY?: string; // Font color
+  fontSizeY?: number; // Font size
+  domainY: [number, number];
+  baseUnit?: "number" | "radian" | "degree";
+  grid?: boolean;
+  gridColor?: string;
+  gridWidth?: number;
+  yRotation?: number;
 }
 
-const props = defineProps<NumberPlaneOptions>()
-const options = defineWidget<NumberPlaneOptions>(props)
+const props = defineProps<NumberPlaneOptions>();
+const options = defineWidget<NumberPlaneOptions>(props);
 
-const Yrotation = options.yRotation ?? 90
-const domain = [options.domainX.sort(), options.domainY.sort()]
+const Yrotation = options.yRotation ?? 90;
+const domain = [options.domainX.sort(), options.domainY.sort()];
 </script>
 
 <template>
@@ -69,37 +69,39 @@ const domain = [options.domainX.sort(), options.domainY.sort()]
     >
       0
     </Text>
-    <Line
-      v-for="i in domain[0][1] - domain[0][0]"
-      v-if="options.grid"
-      :from="[
-        i * (options.intervalX ?? 100),
-        options.domainY[0] * (options.intervalY ?? 100),
-      ]"
-      :to="[
-        i * (options.intervalX ?? 100),
-        options.domainY[1] * (options.intervalY ?? 100),
-      ]"
-      :border-color="options.gridColor ?? 'white'"
-      :border-width="options.gridWidth ?? 1"
-      :x="(options.domainX[0] - 1) * (options.intervalX ?? 100)"
-      :progress="options.progress ?? 1"
-    />
-    <Line
-      v-for="i in domain[1][1] - domain[1][0]"
-      v-if="options.grid"
-      :from="[
-        options.domainX[0] * (options.intervalX ?? 100),
-        i * (options.intervalY ?? 100),
-      ]"
-      :to="[
-        options.domainX[1] * (options.intervalX ?? 100),
-        i * (options.intervalY ?? 100),
-      ]"
-      :border-color="options.gridColor ?? 'white'"
-      :border-width="options.gridWidth ?? 1"
-      :y="(options.domainY[0] - 1) * (options.intervalY ?? 100)"
-      :progress="options.progress ?? 1"
-    />
+    <g v-if="options.grid">
+      <Line
+        v-for="i in domain[0][1] - domain[0][0]"
+        :key="i"
+        :from="[
+          i * (options.intervalX ?? 100),
+          options.domainY[0] * (options.intervalY ?? 100),
+        ]"
+        :to="[
+          i * (options.intervalX ?? 100),
+          options.domainY[1] * (options.intervalY ?? 100),
+        ]"
+        :border-color="options.gridColor ?? 'white'"
+        :border-width="options.gridWidth ?? 1"
+        :x="(options.domainX[0] - 1) * (options.intervalX ?? 100)"
+        :progress="options.progress ?? 1"
+      />
+      <Line
+        v-for="i in domain[1][1] - domain[1][0]"
+        :key="i"
+        :from="[
+          options.domainX[0] * (options.intervalX ?? 100),
+          i * (options.intervalY ?? 100),
+        ]"
+        :to="[
+          options.domainX[1] * (options.intervalX ?? 100),
+          i * (options.intervalY ?? 100),
+        ]"
+        :border-color="options.gridColor ?? 'white'"
+        :border-width="options.gridWidth ?? 1"
+        :y="(options.domainY[0] - 1) * (options.intervalY ?? 100)"
+        :progress="options.progress ?? 1"
+      />
+    </g>
   </g>
 </template>
diff --git a/extensions/table/src/table-item.vue b/extensions/table/src/table-item.vue
index 81615c0..3b2073c 100644
--- a/extensions/table/src/table-item.vue
+++ b/extensions/table/src/table-item.vue
@@ -30,7 +30,7 @@ const children = useChildren();
 
 const mountedFlag = ref(false);
 
-const width: ComputedRef<number> = computed(() => {
+const _width: ComputedRef<number> = computed(() => {
   if (!mountedFlag.value) return 0;
   if (options.width) return options.width;
   const counter: number[] = [];
@@ -39,7 +39,7 @@ const width: ComputedRef<number> = computed(() => {
   });
   return Math.max(...counter);
 });
-const height: ComputedRef<number> = computed(() => {
+const _height: ComputedRef<number> = computed(() => {
   if (!mountedFlag.value) return 0;
   if (options.height) return options.height;
   const counter: number[] = [];
@@ -99,7 +99,7 @@ const paddingRight = computed(
         height: `${height}px`,
       }"
     >
-      <g :transform="`translate(${width / 2}, ${height / 2})`">
+      <g :transform="`translate(${_width / 2}, ${_height / 2})`">
         <slot />
       </g>
     </svg>
diff --git a/extensions/typst/src/index.vue b/extensions/typst/src/index.vue
index b32a8d3..bac5786 100644
--- a/extensions/typst/src/index.vue
+++ b/extensions/typst/src/index.vue
@@ -1,30 +1,36 @@
 <script setup lang="ts">
-import { defineWidget } from '@vue-motion/core'
-import { type WidgetOptions, widget } from '@vue-motion/lib'
-import { onMounted, ref, useSlots } from 'vue'
-import { $typst } from '@myriaddreamin/typst.ts/dist/esm/contrib/snippet'
+import { $typst } from "@myriaddreamin/typst.ts/dist/esm/contrib/snippet";
+import { defineWidget } from "@vue-motion/core";
+import { type WidgetOptions, widget } from "@vue-motion/lib";
+import { onMounted, ref, useSlots } from "vue";
 
 export interface TypstOptions extends WidgetOptions {
-  width?: number
-  height?: number
+  width?: number;
+  height?: number;
 }
 
-const props = defineProps<TypstOptions>()
-const options = defineWidget<TypstOptions>(props)
+const props = defineProps<TypstOptions>();
+const options = defineWidget<TypstOptions>(props);
 
-const compiled = ref()
+const compiled = ref();
 
-const slots = useSlots()
-const content = slots.default ? slots.default().map((vnode) => vnode.children).join('') : ''
+const slots = useSlots();
+const content = slots.default
+  ? slots
+      .default()
+      .map((vnode) => vnode.children)
+      .join("")
+  : "";
 
 onMounted(async () => {
-  console.log(content)
+  console.log(content);
   compiled.value = await $typst.svg({
     mainContent: content,
-  })
-})
+  });
+});
 </script>
 
 <template>
+  <!-- eslint-disable-next-line vue/no-v-text-v-html-on-component -->
   <g v-bind="widget(options)" v-html="compiled" />
 </template>
diff --git a/packages/app/src/components/Preview.vue b/packages/app/src/components/Preview.vue
index 8f623af..c64bb13 100644
--- a/packages/app/src/components/Preview.vue
+++ b/packages/app/src/components/Preview.vue
@@ -1,38 +1,44 @@
 <script setup lang="ts">
+import { Motion } from "@vue-motion/lib";
 /** @ts-expect-error virtual-import */
-import Animation from 'virtual:user-main'
-import { Motion } from '@vue-motion/lib'
-import { ref, watch } from 'vue'
+import Animation from "virtual:user-main";
+import { ref, watch } from "vue";
 // import TestAnimation from './__test__/TestAnimation.vue'
 
 const { width, height } = defineProps<{
-  width: number
-  height: number
-}>()
+  width: number;
+  height: number;
+}>();
 
-const zoom = ref((window.innerHeight - 40) * 0.6 / height)
+const zoom = ref(((window.innerHeight - 40) * 0.6) / height);
 
 function updateZoom() {
-  zoom.value = ((window.innerWidth - 40) * 0.6 / width) < ((window.innerHeight - 40) * 0.6 / height) ? ((window.innerHeight - 40) * 0.6 / height) : ((window.innerWidth - 40) * 0.6 / width)
+  zoom.value =
+    ((window.innerWidth - 40) * 0.6) / width <
+    ((window.innerHeight - 40) * 0.6) / height
+      ? ((window.innerHeight - 40) * 0.6) / height
+      : ((window.innerWidth - 40) * 0.6) / width;
 }
 
-window.addEventListener('resize', updateZoom)
+window.addEventListener("resize", updateZoom);
 
-watch(() => window.innerHeight, updateZoom)
+watch(() => window.innerHeight, updateZoom);
 
-let dev: boolean
-if (__D__)
-  dev = true
-else
-  dev = false
+let dev: boolean;
+if (__D__) dev = true;
+else dev = false;
 </script>
 
 <template>
   <div class="w-full h-[60%] flex overflow-hidden">
     <div class="w-full h-full flex items-center justify-center">
       <Motion
-        id="motion" :width="width" :height="height" :scale="dev ? zoom : (null as any)" :min-width="dev ? (width * zoom) : (null as any)"
-        :min-height="dev ? (height * zoom) : (null as any)"
+        id="motion"
+        :width="width"
+        :height="height"
+        :scale="dev ? zoom : (null as any)"
+        :min-width="dev ? width * zoom : (null as any)"
+        :min-height="dev ? height * zoom : (null as any)"
       >
         <Animation />
         <!-- <TestAnimation/> -->
diff --git a/packages/client/entry.ts b/packages/client/entry.ts
index e64a8e7..dc4e7ef 100644
--- a/packages/client/entry.ts
+++ b/packages/client/entry.ts
@@ -1,12 +1,11 @@
-import { createApp } from 'vue'
-// import './out.css'
-/** @ts-ignore  */
-import App from 'virtual:user-main'
-/** @ts-ignore */
-import router from 'virtual:router'
-/** @ts-ignore */
-import player from 'virtual:player'
+import { createApp } from "vue";
+/** @ts-expect-error virtual-import */
+import player from "virtual:player";
+/** @ts-expect-error virtual-import */
+import router from "virtual:router";
+/** @ts-expect-error virtual-import */
+import App from "virtual:user-main";
 
-console.log(player)
+console.log(player);
 
-createApp(App).use(router).use(player).mount('#app')
+createApp(App).use(router).use(player).mount("#app");