feat: HTML2Canvas

[LIUBINfighter]

提示：组件有一些可以被 primevue 替代但是我搞忘了，所以还有待修改（以及添加说明文本），先放一个pr在这里，用来进一步讨论 #211

本PR实现了分享卡片功能的全面优化，主要包括：

• 复制到剪贴板功能/下载到本地
• QR码指向当前文章
• 多种颜色主题选项 （包括 VIS 中的橙色和天青色）
• 3倍分辨率的高清图片导出

原本采用 html2canvas，实际采用 dom-to-image-more

使用指南：

1.选择对应文字会在正上方显示 复制文字 和 分享 两个按钮。

2.点击复制复制文字，点击分享弹出卡片预览框

• 切换主题色
• 添加到剪切栏和下载png到本地
• 二维码预览等

测试： Windows 10, MS Edge 与 Google Chrome

[netlify]

✅ Deploy Preview for sustech-app ready!

Name	Link
🔨 Latest commit	09633a3
🔍 Latest deploy log	https://app.netlify.com/sites/sustech-app/deploys/6808a9432c852d00087e3316
😎 Deploy Preview	https://deploy-preview-243--sustech-app.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[LIUBINfighter]

添加的依赖为：

+    "dom-to-image-more": "^3.5.0",
+    "qrcodejs2": "^0.0.2"

dom-to-image-more
qrcodejs2

稍晚一些我改一下ui组件以及看下能不能更新到其他的包

[sghng]

iPhone 上 Safari 不能使用

此外引入 Tailwind CSS 或者 UnoCSS 会不会让样式代码短一些

不嫌麻烦的话建议用 TypeScript 写？

[sghng]

除此之外，tsconfig 里面也可以配置 globals

{
  "compilerOptions": {
  ...
  },
  "globals": {
    "browser": true
  }
}

不太清楚配置了 tsconfig 之后还需不需要 eslint 里面再配置一次 globals

[sghng]

ESLint 配置不需要手动加这么多 globals，只需要这样即可：

languageOptions: {
      globals: {
        ...globals.browser,
      },
    },

需要安装 globals 作为依赖

[sghng]

这个类型声明也是不需要的，都包含在 globals 这个包里面了