From eb51add05d40f5b7a180f8119638b4c043a3f6e1 Mon Sep 17 00:00:00 2001
From: markthree <1801982702@qq.com>
Date: Sun, 26 Feb 2023 17:27:42 +0800
Subject: [PATCH] feat: preview img

---
 components/content/prose-img.vue | 35 +++++++++++++++
 package.json                     |  4 +-
 pnpm-lock.yaml                   | 74 ++++++++++++++++++++++++++++----
 3 files changed, 104 insertions(+), 9 deletions(-)
 create mode 100644 components/content/prose-img.vue

diff --git a/components/content/prose-img.vue b/components/content/prose-img.vue
new file mode 100644
index 0000000..65ea3f5
--- /dev/null
+++ b/components/content/prose-img.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { withBase } from 'ufo'
+import { Image as AImage } from "@arco-design/web-vue";
+import "@arco-design/web-vue/es/image/style/css.js"
+
+const props = defineProps({
+    src: {
+        type: String,
+        default: ''
+    },
+    alt: {
+        type: String,
+        default: ''
+    },
+    width: {
+        type: [String, Number],
+        default: undefined
+    },
+    height: {
+        type: [String, Number],
+        default: undefined
+    }
+})
+const refinedSrc = computed(() => {
+    if (props.src?.startsWith('/') && !props.src.startsWith('//')) {
+        return withBase(props.src, useRuntimeConfig().app.baseURL)
+    }
+    return props.src
+})
+</script>
+
+<template>
+    <AImage class="cursor-pointer" v-bind="$attrs" :src="refinedSrc" :alt="alt" :width="width" :height="height">
+    </AImage>
+</template>
diff --git a/package.json b/package.json
index f7c3caf..60aa367 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "release": "bumpp --commit --push --tag"
   },
   "devDependencies": {
+    "@arco-design/web-vue": "^2.43.2",
     "@nuxt-themes/docus": "^1.8.3",
     "@nuxt/devtools": "^0.2.3",
     "@nuxt/image-edge": "1.0.0-27954023.4cee565",
@@ -35,7 +36,8 @@
     "nuxt3-intelligence": "^0.1.1",
     "serve": "^14.2.0",
     "sitemap": "^7.1.1",
-    "tsx": "^3.12.3"
+    "tsx": "^3.12.3",
+    "ufo": "^1.1.0"
   },
   "pnpm": {
     "peerDependencyRules": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2133d6a..8dbf04a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,6 +1,7 @@
 lockfileVersion: 5.4
 
 specifiers:
+  '@arco-design/web-vue': ^2.43.2
   '@nuxt-themes/docus': ^1.8.3
   '@nuxt/devtools': ^0.2.3
   '@nuxt/image-edge': 1.0.0-27954023.4cee565
@@ -15,8 +16,10 @@ specifiers:
   serve: ^14.2.0
   sitemap: ^7.1.1
   tsx: ^3.12.3
+  ufo: ^1.1.0
 
 devDependencies:
+  '@arco-design/web-vue': 2.43.2
   '@nuxt-themes/docus': 1.8.3_nuxt@3.2.2
   '@nuxt/devtools': 0.2.3_nuxt@3.2.2
   '@nuxt/image-edge': 1.0.0-27954023.4cee565
@@ -31,6 +34,7 @@ devDependencies:
   serve: 14.2.0
   sitemap: 7.1.1
   tsx: 3.12.3
+  ufo: 1.1.0
 
 packages:
 
@@ -57,6 +61,30 @@ packages:
     resolution: {integrity: sha512-vy9fM3pIxZmX07dL+VX1aZe7ynZ+YyB0jY+jE6r3hOK6GNY2t6W8rzpFC4tgpbXUYABkFQwgJq2XYXlxbXAI0g==}
     dev: true
 
+  /@arco-design/color/0.4.0:
+    resolution: {integrity: sha512-s7p9MSwJgHeL8DwcATaXvWT3m2SigKpxx4JA1BGPHL4gfvaQsmQfrLBDpjOJFJuJ2jG2dMt3R3P8Pm9E65q18g==}
+    dependencies:
+      color: 3.2.1
+    dev: true
+
+  /@arco-design/web-vue/2.43.2:
+    resolution: {integrity: sha512-g07sP64WI7v+U0NzfhdOAOvGPbT3hksjLELHcNVb350y9SpjG7PGGK2wvOVGla+JTnE6LPqxwlIBbXErTI6hbw==}
+    peerDependencies:
+      vue: ^3.1.0
+    peerDependenciesMeta:
+      vue:
+        optional: true
+    dependencies:
+      '@arco-design/color': 0.4.0
+      b-tween: 0.3.3
+      b-validate: 1.4.4
+      compute-scroll-into-view: 1.0.20
+      dayjs: 1.11.7
+      number-precision: 1.6.0
+      resize-observer-polyfill: 1.5.1
+      scroll-into-view-if-needed: 2.2.31
+    dev: true
+
   /@babel/code-frame/7.18.6:
     resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
     engines: {node: '>=6.9.0'}
@@ -1556,7 +1584,7 @@ packages:
       fontaine: 0.2.3
       magic-string: 0.27.0
       pathe: 1.1.0
-      ufo: 1.0.1
+      ufo: 1.1.0
     transitivePeerDependencies:
       - encoding
       - rollup
@@ -2566,6 +2594,14 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /b-tween/0.3.3:
+    resolution: {integrity: sha512-oEHegcRpA7fAuc9KC4nktucuZn2aS8htymCPcP3qkEGPqiBH+GfqtqoG2l7LxHngg6O0HFM7hOeOYExl1Oz4ZA==}
+    dev: true
+
+  /b-validate/1.4.4:
+    resolution: {integrity: sha512-E2tnSnxxKDyxP1G+TMTbVHA8XajfHHOJKeWm9YVRISSPtzTL7ZP/7tIYp01b+O83L5R/6i31+Su+vCOJBnQWFQ==}
+    dev: true
+
   /bail/2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
     dev: true
@@ -3058,13 +3094,19 @@ packages:
       color-name: 1.1.4
       simple-swizzle: 0.2.2
     dev: true
-    optional: true
 
   /color-support/1.1.3:
     resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
     hasBin: true
     dev: true
 
+  /color/3.2.1:
+    resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==}
+    dependencies:
+      color-convert: 1.9.3
+      color-string: 1.9.1
+    dev: true
+
   /color/4.2.3:
     resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
     engines: {node: '>=12.5.0'}
@@ -3141,6 +3183,10 @@ packages:
       - supports-color
     dev: true
 
+  /compute-scroll-into-view/1.0.20:
+    resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==}
+    dev: true
+
   /concat-map/0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
     dev: true
@@ -3373,6 +3419,10 @@ packages:
     engines: {node: '>= 12'}
     dev: true
 
+  /dayjs/1.11.7:
+    resolution: {integrity: sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ==}
+    dev: true
+
   /de-indent/1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
     dev: true
@@ -4971,7 +5021,6 @@ packages:
   /is-arrayish/0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
     dev: true
-    optional: true
 
   /is-bigint/1.0.4:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
@@ -6665,6 +6714,10 @@ packages:
       boolbase: 1.0.0
     dev: true
 
+  /number-precision/1.6.0:
+    resolution: {integrity: sha512-05OLPgbgmnixJw+VvEh18yNPUo3iyp4BEWJcrLu4X9W05KmMifN7Mu5exYvQXqxxeNWhvIF+j3Rij+HmddM/hQ==}
+    dev: true
+
   /nuxi/3.2.2:
     resolution: {integrity: sha512-JqPJqwfzQCVrjkMh+9Dd3q4qu7wYbmr+39SfjC6LL1oTNLFUjvjHG42tFJBDVHO+GImAo/kNjWGp2N/Jwo8/ag==}
     engines: {node: ^14.18.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0}
@@ -7950,6 +8003,10 @@ packages:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
     dev: true
 
+  /resize-observer-polyfill/1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+    dev: true
+
   /resolve-from/5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
@@ -8076,6 +8133,12 @@ packages:
     resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
     dev: true
 
+  /scroll-into-view-if-needed/2.2.31:
+    resolution: {integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==}
+    dependencies:
+      compute-scroll-into-view: 1.0.20
+    dev: true
+
   /scule/0.3.2:
     resolution: {integrity: sha512-zIvPdjOH8fv8CgrPT5eqtxHQXmPNnV/vHJYffZhE43KZkvULvpCTvOt1HPlFaCZx287INL9qaqrZg34e8NgI4g==}
     dev: true
@@ -8270,7 +8333,6 @@ packages:
     dependencies:
       is-arrayish: 0.3.2
     dev: true
-    optional: true
 
   /sirv/2.0.2:
     resolution: {integrity: sha512-4Qog6aE29nIjAOKe/wowFTxOdmbEZKb+3tsLljaBRzJwtqto0BChD2zzH0LhgCSXiI+V7X+Y45v14wBZQ1TK3w==}
@@ -8781,10 +8843,6 @@ packages:
     resolution: {integrity: sha512-fk6CmUgwKCfX79EzcDQQpSCMxrHstvbLswFChHS0Vump+kFkw7nJBfTZoC1j0bOGoY9I7R3n2DGek5ajbcYnOw==}
     dev: true
 
-  /ufo/1.0.1:
-    resolution: {integrity: sha512-boAm74ubXHY7KJQZLlXrtMz52qFvpsbOxDcZOnw/Wf+LS4Mmyu7JxmzD4tDLtUQtmZECypJ0FrCz4QIe6dvKRA==}
-    dev: true
-
   /ufo/1.1.0:
     resolution: {integrity: sha512-LQc2s/ZDMaCN3QLpa+uzHUOQ7SdV0qgv3VBXOolQGXTaaZpIur6PwUclF5nN2hNkiTRcUugXd1zFOW3FLJ135Q==}
     dev: true