feat: add Plotly.js usage page

package.json

@@ -72,6 +72,7 @@
     "page-stack-vue3": "^2.5.6",
     "pinia": "^3.0.1",
     "pinia-plugin-persistedstate": "^4.2.0",
+    "plotly.js-dist-min": "^3.0.1",
     "primeicons": "^7.0.0",
     "primelocale": "^2.1.2",
     "primevue": "^4.3.3",
@@ -106,6 +107,7 @@
     "@types/mockjs": "^1.0.10",
     "@types/node": "^22.14.0",
     "@types/nprogress": "^0.2.3",
+    "@types/plotly.js-dist-min": "^2.3.4",
     "@types/three": "^0.175.0",
     "@vant/auto-import-resolver": "^1.3.0",
     "@vitejs/plugin-vue": "^5.2.3",

src/pages/PkgsUsage/PlotlyJs.page.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import Plotly from 'plotly.js-dist-min';
+
+const plotRef = useTemplateRef<import('plotly.js-dist-min').PlotlyHTMLElement | null>('plotRef');
+
+// 数据
+const trace1 = {
+  x: [1, 2, 3, 4, 5],
+  y: [2, 4, 1, 5, 3],
+  type: 'scatter',
+} satisfies import('plotly.js-dist-min').Data;
+
+const data = [trace1];
+
+// 布局
+const layout = {
+  title: '简单折线图',
+  xaxis: {
+    title: 'X 轴',
+  },
+  yaxis: {
+    title: 'Y 轴',
+  },
+} satisfies Partial<import('plotly.js-dist-min').Layout>;
+
+onMounted(async () => {
+  // 绘制图表
+  Plotly.newPlot(plotRef.value!, data, layout);
+
+  plotRef.value?.on('plotly_relayout', (eventData) => {
+    console.debug(`eventData :>> `, eventData);
+  });
+});
+</script>
+
+<template>
+  <div ref="plotRef" style="width: 600px; height: 400px"></div>
+</template>
+
+<style scoped></style>

typed-router.d.ts

@@ -36,6 +36,7 @@ declare module 'vue-router/auto-routes' {
     'PageP5Js': RouteRecordInfo<'PageP5Js', '/Page/p5_js', Record<never, never>, Record<never, never>>,
     'PageStyle': RouteRecordInfo<'PageStyle', '/Page/Style', Record<never, never>, Record<never, never>>,
     'PkgsUsageI18n': RouteRecordInfo<'PkgsUsageI18n', '/PkgsUsage/I18n', Record<never, never>, Record<never, never>>,
+    'PkgsUsagePlotlyJs': RouteRecordInfo<'PkgsUsagePlotlyJs', '/PkgsUsage/PlotlyJs', Record<never, never>, Record<never, never>>,
     'PkgsUsageTsEnumUtil': RouteRecordInfo<'PkgsUsageTsEnumUtil', '/PkgsUsage/ts-enum-util', Record<never, never>, Record<never, never>>,
     'UIComponentsAntdV': RouteRecordInfo<'UIComponentsAntdV', '/UI-components/AntdV', Record<never, never>, Record<never, never>>,
     'UIComponentsComponents': RouteRecordInfo<'UIComponentsComponents', '/UI-components/Components', Record<never, never>, Record<never, never>>,