chore: 移除/更换部分三方插件示例

apps/example/package.json

@@ -13,9 +13,6 @@
     "lint": "vue-tsc -b"
   },
   "dependencies": {
-    "@antv/g2plot": "catalog:",
-    "@bytemd/plugin-gfm": "catalog:",
-    "@bytemd/vue-next": "catalog:",
     "@fantastic-admin/components": "workspace:*",
     "@fantastic-admin/composables": "workspace:*",
     "@fantastic-admin/settings": "workspace:*",
@@ -28,7 +25,6 @@
     "@zumer/snapdom": "catalog:",
     "animate.css": "catalog:",
     "axios": "catalog:",
-    "bytemd": "catalog:",
     "class-variance-authority": "catalog:",
     "clsx": "catalog:",
     "cropperjs": "catalog:",
@@ -49,6 +45,7 @@
     "qs": "catalog:",
     "reka-ui": "catalog:",
     "scule": "catalog:",
+    "sign-canvas": "catalog:",
     "splitpanes": "catalog:",
     "swiper": "catalog:",
     "tailwind-merge": "catalog:",
@@ -60,7 +57,6 @@
     "vue": "catalog:",
     "vue-currency-input": "catalog:",
     "vue-data-ui": "catalog:",
-    "vue-esign": "catalog:",
     "vue-hooks-plus": "catalog:",
     "vue-router": "catalog:",
     "vxe-pc-ui": "catalog:",

apps/example/src/router/modules/plugin.example.ts

@@ -82,14 +82,6 @@ const routes: RouteRecordRaw = {
             title: 'VChart',
           },
         },
-        {
-          path: 'g2plot',
-          name: 'pluginExampleChartG2plot',
-          component: () => import('@/views/plugin_example/g2plot.vue'),
-          meta: {
-            title: 'G2plot',
-          },
-        },
         {
           path: 'vue-data-ui',
           name: 'pluginExampleChartVueDataUi',
@@ -109,15 +101,6 @@ const routes: RouteRecordRaw = {
         icon: 'i-file-icons:tinymce',
       },
     },
-    {
-      path: 'markdown',
-      name: 'pluginExampleMarkdown',
-      component: () => import('@/views/plugin_example/markdown.vue'),
-      meta: {
-        title: 'Bytemd',
-        icon: 'i-teenyicons:markdown-outline',
-      },
-    },
     {
       path: 'currencyinput',
       name: 'pluginExampleCurrencyInput',

apps/example/src/types/shims.d.ts

@@ -15,6 +15,3 @@ declare const __SYSTEM_INFO__: {
 declare module 'virtual:fantastic-admin/turbo-console' {
   export function warnKeepAliveComponentNameMissing(filePath: string): void
 }
-
-declare module 'vue-esign'
-declare module '@bytemd/plugin-gfm/lib/locales/zh_Hans.json'

apps/example/src/views/plugin_example/esign.vue

@@ -1,43 +1,41 @@
 <script setup lang="ts">
-import VueEsign from 'vue-esign'
+import type { SignCanvasExpose, SignCanvasOptions } from 'sign-canvas'
+import SignCanvas from 'sign-canvas'
 import Alert from './components/alert.vue'
 import Command from './components/command.vue'
 
-const esignRef = useTemplateRef<any>('esignRef')
-const options = ref({
-  lineWidth: 6,
-  lineColor: '#000000',
+const signCanvasRef = useTemplateRef<SignCanvasExpose>('signCanvasRef')
+const signature = shallowRef<string | null>(null)
+const result = shallowRef<string | null>(null)
+const options = reactive<SignCanvasOptions>({
+  canvasWidth: 600,
+  canvasHeight: 360,
+  isDpr: true,
+  isSign: true,
+  writeColor: '#101010',
   bgColor: '#f0f0f0',
-  isCrop: false,
+  isShowBorder: false,
+  imgType: 'png',
 })
-const result = ref('')
 
 function handleReset() {
-  esignRef.value.reset()
-  nextTick(() => {
-    options.value.bgColor = '#f0f0f0'
-  })
+  signCanvasRef.value?.clear()
+  signature.value = null
+  result.value = null
 }
 function handleGenerate() {
-  esignRef.value.generate().then((res: string) => {
-    result.value = res
-  }).catch(() => {
+  const image = signCanvasRef.value?.toDataURL()
+  if (!image) {
     useFaToast().warning('画板为空，无法生成图片')
-  })
+    return
+  }
+  result.value = image
 }
 function handleDownload() {
-  esignRef.value.generate().then((res: string) => {
-    const image = new Image()
-    image.setAttribute('crossOrigin', 'anonymous')
-    image.onload = () => {
-      const a = document.createElement('a')
-      const event = new MouseEvent('click')
-      a.download = Date.parse(new Date().toString()).toString()
-      a.href = image.src
-      a.dispatchEvent(event)
-    }
-    image.src = res
-  })
+  const image = signCanvasRef.value?.downloadSignImg(Date.now().toString())
+  if (!image) {
+    useFaToast().warning('画板为空，无法下载图片')
+  }
 }
 
 function open(url: string) {
@@ -50,15 +48,15 @@ function open(url: string) {
     <Alert />
     <FaPageHeader title="电子签名">
       <template #description>
-        <Command text="pnpm add vue-esign" />
+        <Command text="pnpm add sign-canvas" />
       </template>
-      <FaButton variant="outline" size="icon" @click="open('https://github.com/JaimeCheng/vue-esign')">
+      <FaButton variant="outline" size="icon" @click="open('https://github.com/langyuxiansheng/vue-sign-canvas')">
         <FaIcon name="i-simple-icons:github" />
       </FaButton>
     </FaPageHeader>
     <FaPageMain>
       <div class="space-y-2">
-        <VueEsign ref="esignRef" v-model:bg-color="options.bgColor" :width="500" :height="300" :is-crop="options.isCrop" :line-width="options.lineWidth" :line-color="options.lineColor" />
+        <SignCanvas ref="signCanvasRef" v-model="signature" :options="options" />
         <div class="space-x-2">
           <FaButton @click="handleReset">
             清空画板
@@ -70,7 +68,7 @@ function open(url: string) {
             下载图片
           </FaButton>
         </div>
-        <img v-if="result" :src="result" :width="500" :height="300">
+        <img v-if="result" :src="result" :width="600" :height="360">
       </div>
     </FaPageMain>
   </div>

apps/example/src/views/plugin_example/g2plot.vue

@@ -1,175 +0,0 @@
-<script setup lang="ts">
-import { Column, Line, Pie, Radar } from '@antv/g2plot'
-import Alert from './components/alert.vue'
-import Command from './components/command.vue'
-
-let barPlot: any
-let linePlot: any
-let piePlot: any
-let radarPlot: any
-
-onMounted(() => {
-  initChart1()
-  initChart2()
-  initChart3()
-  initChart4()
-})
-
-onBeforeRouteLeave(() => {
-  barPlot.destroy()
-  linePlot.destroy()
-  piePlot.destroy()
-  radarPlot.destroy()
-})
-
-function initChart1() {
-  const data = [
-    { type: '分类一', values: [76, 100] },
-    { type: '分类二', values: [56, 108] },
-    { type: '分类三', values: [38, 129] },
-    { type: '分类四', values: [58, 155] },
-    { type: '分类五', values: [45, 120] },
-    { type: '分类六', values: [23, 99] },
-    { type: '分类七', values: [18, 56] },
-    { type: '分类八', values: [18, 34] },
-  ]
-  barPlot = new Column('chart1', {
-    data,
-    xField: 'type',
-    yField: 'values',
-    color: 'l(90) 0:#3e5bdb 1:#b4d9e4',
-    isRange: true,
-    columnStyle: {
-      fillOpacity: 0.8,
-    },
-    label: {
-      position: 'middle',
-      style: {
-        fill: '#fff',
-      },
-    },
-  })
-  barPlot.render()
-}
-function initChart2() {
-  fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
-    .then(res => res.json())
-    .then((data) => {
-      linePlot = new Line('chart2', {
-        data,
-        xField: 'year',
-        yField: 'gdp',
-        seriesField: 'name',
-        yAxis: {
-          label: {
-            formatter: v => `${(Number.parseInt(v) / 10e8).toFixed(1)} B`,
-          },
-        },
-        legend: {
-          position: 'top',
-        },
-        smooth: true,
-        // @TODO 后续会换一种动画方式
-        animation: {
-          appear: {
-            animation: 'path-in',
-            duration: 5000,
-          },
-        },
-      })
-      linePlot.render()
-    })
-}
-function initChart3() {
-  const data = [
-    { type: '分类一', value: 27 },
-    { type: '分类二', value: 25 },
-    { type: '分类三', value: 18 },
-    { type: '分类四', value: 15 },
-    { type: '分类五', value: 10 },
-    { type: '其他', value: 5 },
-  ]
-  piePlot = new Pie('chart3', {
-    appendPadding: 10,
-    data,
-    angleField: 'value',
-    colorField: 'type',
-    radius: 0.8,
-    label: {
-      type: 'outer',
-      content: '{name} {percentage}',
-    },
-    interactions: [{ type: 'pie-legend-active' }],
-  })
-  piePlot.render()
-}
-function initChart4() {
-  fetch('https://gw.alipayobjects.com/os/bmw-prod/5c41aa9b-9c8a-425f-9f4d-934b889bb75d.json')
-    .then(data => data.json())
-    .then((data) => {
-      radarPlot = new Radar('chart4', {
-        data,
-        xField: 'item',
-        yField: 'score',
-        seriesField: 'user',
-        xAxis: {
-          label: {
-            offset: 15,
-          },
-          grid: {
-            line: {
-              type: 'line',
-            },
-          },
-        },
-        yAxis: {
-          grid: {
-            line: {
-              type: 'circle',
-            },
-          },
-        },
-        point: {
-          shape: 'circle',
-        },
-        // 开启面积
-        area: {},
-        legend: {
-          position: 'bottom',
-        },
-      })
-      radarPlot.render()
-    })
-}
-function open(url: string) {
-  window.open(url, '_blank')
-}
-</script>
-
-<template>
-  <div>
-    <Alert />
-    <FaPageHeader title="G2plot">
-      <template #description>
-        <Command text="pnpm add @antv/g2plot" />
-      </template>
-      <FaButton variant="outline" size="icon" @click="open('https://github.com/antvis/G2Plot')">
-        <FaIcon name="i-simple-icons:github" />
-      </FaButton>
-    </FaPageHeader>
-    <div class="mx-4 gap-4 grid grid-cols-1 lg-grid-cols-2">
-      <FaPageMain title="柱状图" class="m-0">
-        <div id="chart1" class="h-[400px] w-full" />
-      </FaPageMain>
-      <FaPageMain title="折线图" class="m-0">
-        <div id="chart2" class="h-[400px] w-full" />
-      </FaPageMain>
-      <FaPageMain title="饼图" class="m-0">
-        <div id="chart3" class="h-[400px] w-full" />
-      </FaPageMain>
-      <FaPageMain title="雷达图" class="m-0">
-        <div id="chart4" class="h-[400px] w-full" />
-      </FaPageMain>
-    </div>
-  </div>
-</template>

apps/example/src/views/plugin_example/markdown.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import gfm from '@bytemd/plugin-gfm'
-import gfmLocale from '@bytemd/plugin-gfm/lib/locales/zh_Hans.json'
-// @ts-expect-error 忽略警告
-import { Editor, Viewer } from '@bytemd/vue-next'
-import zhHans from 'bytemd/locales/zh_Hans.json'
-import Alert from './components/alert.vue'
-import Command from './components/command.vue'
-import 'bytemd/dist/index.css'
-
-const content = ref('# Fantastic-admin')
-
-const plugins = [
-  gfm({
-    locale: gfmLocale,
-  }),
-]
-
-function handleChange(v: string) {
-  content.value = v
-}
-
-function open(url: string) {
-  window.open(url, '_blank')
-}
-</script>
-
-<template>
-  <div>
-    <Alert />
-    <FaPageHeader title="Markdown 编辑器">
-      <template #description>
-        <Command text="pnpm add bytemd @bytemd/vue-next @bytemd/plugin-gfm" />
-      </template>
-      <FaButton variant="outline" size="icon" @click="open('https://github.com/bytedance/bytemd')">
-        <FaIcon name="i-simple-icons:github" />
-      </FaButton>
-    </FaPageHeader>
-    <FaPageMain>
-      <div class="min-w-full prose">
-        <Editor :value="content" :plugins="plugins" :locale="zhHans" @change="handleChange" />
-      </div>
-    </FaPageMain>
-    <FaPageMain title="预览">
-      <div class="min-w-full prose">
-        <Viewer :value="content" />
-      </div>
-    </FaPageMain>
-  </div>
-</template>
-
-<style scoped>
-:deep(.bytemd-fullscreen) {
-  z-index: 2000;
-}
-</style>