feat(文档): 添加RImg组件并配置资源路径别名

删除未使用的Custom.vue组件，新增RImg组件用于处理资源图片路径
在vite配置中添加资源路径别名，简化图片引用方式
更新client.ts注册RImg组件

docs/.vuepress/client.ts

@@ -1,22 +1,8 @@
 import { defineClientConfig } from 'vuepress/client'
-// import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
-// import NpmBadge from 'vuepress-theme-plume/features/NpmBadge.vue'
-// import NpmBadgeGroup from 'vuepress-theme-plume/features/NpmBadgeGroup.vue'
-// import Swiper from 'vuepress-theme-plume/features/Swiper.vue'
-
-// import CustomComponent from './theme/components/Custom.vue'
-
-// import './theme/styles/custom.css'
+import RImg from './theme/components/RImg.vue'
 
 export default defineClientConfig({
   enhance({ app }) {
-    // built-in components
-    // app.component('RepoCard', RepoCard)
-    // app.component('NpmBadge', NpmBadge)
-    // app.component('NpmBadgeGroup', NpmBadgeGroup)
-    // app.component('Swiper', Swiper) // you should install `swiper`
-
-    // your custom components
-    // app.component('CustomComponent', CustomComponent)
+    app.component('RImg', RImg)
   },
 })

docs/.vuepress/config.ts

@@ -3,6 +3,11 @@ import { plumeTheme } from 'vuepress-theme-plume'
 import { viteBundler } from '@vuepress/bundler-vite'
 import { commentPlugin } from '@vuepress/plugin-comment'
 import { umamiAnalyticsPlugin } from '@vuepress/plugin-umami-analytics'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
 export default defineUserConfig({
   base: '/',
@@ -14,7 +19,16 @@ export default defineUserConfig({
     ['link', { rel: 'icon', type: 'image/png', href: 'https://theme-plume.vuejs.press/favicon-32x32.png' }],
   ],
 
-  bundler: viteBundler(),
+  bundler: viteBundler({
+    viteOptions: {
+      resolve: {
+        alias: {
+          '@resources': path.resolve(__dirname, '../resources'),
+          '/@resources': path.resolve(__dirname, '../resources'),
+        },
+      },
+    },
+  }),
   shouldPrefetch: false,
 
   theme: plumeTheme({

docs/.vuepress/theme/components/Custom.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const message = ref('Hello World!')
-</script>
-
-<template>
-  <div class="my-custom-content">
-    {{ message }}
-  </div>
-</template>

docs/.vuepress/theme/components/RImg.vue

@@ -0,0 +1,27 @@
+<template>
+  <img :src="imageSrc" :alt="alt" v-bind="$attrs" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  alt: {
+    type: String,
+    default: ''
+  }
+})
+
+// 使用 Vite 的 import.meta.glob 或简单字符串拼接
+// 由于别名在运行时不可直接动态拼接，我们这里使用一个更稳妥的方法
+// 映射到我们配置好的别名
+const imageSrc = computed(() => {
+  // 处理路径，确保指向别名
+  const path = props.src.startsWith('/') ? props.src.slice(1) : props.src
+  return new URL(`../../../resources/${path}`, import.meta.url).href
+})
+</script>