feat: restructure wiki and notes, enhance Viewer component

- Removed obsolete theme index and documentation files.
- Deleted unused images and canvas files.
- Added new images for notes and updated canvas files.
- Enhanced Viewer component with improved zoom and fullscreen functionalities.
- Updated wiki configuration with new navigation and sidebar structure.
- Created new index pages for notes and wiki with categorized content.
- Updated links and references in markdown files to reflect new structure.

wiki/.vitepress/config.mts

@@ -5,4 +5,49 @@ export default defineConfig({
   title: "OmooLab",
   description: "An OmooLab Project",
   base: '/', // Replace with your repository name if deploying to GitHub Pages
+  themeConfig: {
+    logo: '/logo.png',
+    siteTitle: false,
+    nav: [
+      { text: '首页', link: '/' },
+      { text: '记录', link: '/notes/' },
+      { text: '我们', link: 'https://www.omoolab.xyz' }
+    ],
+    sidebar: {
+      '/': [
+        {
+          text: '导航',
+          items: [
+            { text: '首页', link: '/' },
+            { text: '笔记列表', link: '/notes/' },
+            { text: '测试笔记', link: '/notes/测试导出/' }
+          ]
+        }
+      ],
+      '/notes/': [
+        {
+          text: '笔记',
+          items: [
+            { text: '所有笔记', link: '/notes/' },
+            { text: '测试笔记', link: '/notes/测试导出/' }
+          ]
+        },
+        {
+          text: '画板',
+          items: [
+            { text: '测试画板 1', link: '/notes/测试画板-1.canvas/' },
+            { text: '测试画板 2', link: '/notes/测试画板-2.canvas/' }
+          ]
+        }
+      ]
+    },
+    footer: {
+      message: '<a href="https://beian.miit.gov.cn/" target="_blank">浙ICP备2025208399号-1</a>',
+      copyright: 'Copyright © 2025-present OmooLab'
+    },
+    search: {
+      provider: 'local'
+    }
+  },
+
 })

wiki/.vitepress/theme/components/Viewer.vue

@@ -1,10 +1,56 @@
 <template>
-  <div class="viewer-wrapper">
-    <!-- 正常模式 -->
+  <!-- 正常模式 -->
+  <div
+    v-show="!isFullscreen"
+    class="zoom-container"
+    ref="containerRef"
+    v-bind="attrs"
+    @wheel.prevent="handleWheel"
+    @mousedown="handleMouseDown"
+    @touchstart="handleTouchStart"
+    @touchmove="handleTouchMove"
+    @touchend="handleTouchEnd"
+  >
+    <canvas
+      ref="canvasRef"
+      class="zoom-canvas"
+    ></canvas>
+
+    <div class="loading-indicator" v-if="isLoading">
+      加载中...
+    </div>
+
+    <!-- 小地图 -->
     <div
-      v-show="!isFullscreen"
-      class="zoom-container"
-      ref="containerRef"
+      class="minimap"
+      ref="minimapRef"
+      @mousedown="handleMinimapMouseDown"
+      @wheel.stop
+      :style="minimapStyle"
+    >
+      <canvas
+        ref="minimapCanvasRef"
+        class="minimap-canvas"
+      ></canvas>
+      <div
+        class="minimap-viewport"
+        :style="minimapViewportStyle"
+      ></div>
+    </div>
+
+    <div class="zoom-controls" @wheel.stop @mousedown.stop>
+      <button @click="zoomIn" title="放大">+</button>
+      <button @click="zoomOut" title="缩小">-</button>
+      <button @click="resetZoom" title="重置">↺</button>
+      <button @click="toggleFullscreen" title="全屏">⛶</button>
+    </div>
+  </div>
+
+  <!-- 全屏模式 -->
+  <Teleport to="body">
+    <div
+      v-if="isFullscreen"
+      class="fullscreen-overlay"
       @wheel.prevent="handleWheel"
       @mousedown="handleMouseDown"
       @touchstart="handleTouchStart"
@@ -12,24 +58,20 @@
       @touchend="handleTouchEnd"
     >
       <canvas
-        ref="canvasRef"
+        ref="fullscreenCanvasRef"
         class="zoom-canvas"
       ></canvas>
 
-      <div class="loading-indicator" v-if="isLoading">
-        加载中...
-      </div>
-
       <!-- 小地图 -->
       <div
         class="minimap"
-        ref="minimapRef"
+        ref="fullscreenMinimapRef"
         @mousedown="handleMinimapMouseDown"
         @wheel.stop
         :style="minimapStyle"
       >
         <canvas
-          ref="minimapCanvasRef"
+          ref="fullscreenMinimapCanvasRef"
           class="minimap-canvas"
         ></canvas>
         <div
@@ -42,59 +84,23 @@
         <button @click="zoomIn" title="放大">+</button>
         <button @click="zoomOut" title="缩小">-</button>
         <button @click="resetZoom" title="重置">↺</button>
-        <button @click="toggleFullscreen" title="全屏">⛶</button>
+        <button @click="toggleFullscreen" title="退出全屏">⛶</button>
       </div>
     </div>
-
-    <!-- 全屏模式 -->
-    <Teleport to="body">
-      <div
-        v-if="isFullscreen"
-        class="fullscreen-overlay"
-        @wheel.prevent="handleWheel"
-        @mousedown="handleMouseDown"
-        @touchstart="handleTouchStart"
-        @touchmove="handleTouchMove"
-        @touchend="handleTouchEnd"
-      >
-        <canvas
-          ref="fullscreenCanvasRef"
-          class="zoom-canvas"
-        ></canvas>
-
-        <!-- 小地图 -->
-        <div
-          class="minimap"
-          ref="fullscreenMinimapRef"
-          @mousedown="handleMinimapMouseDown"
-          @wheel.stop
-          :style="minimapStyle"
-        >
-          <canvas
-            ref="fullscreenMinimapCanvasRef"
-            class="minimap-canvas"
-          ></canvas>
-          <div
-            class="minimap-viewport"
-            :style="minimapViewportStyle"
-          ></div>
-        </div>
-
-        <div class="zoom-controls" @wheel.stop @mousedown.stop>
-          <button @click="zoomIn" title="放大">+</button>
-          <button @click="zoomOut" title="缩小">-</button>
-          <button @click="resetZoom" title="重置">↺</button>
-          <button @click="toggleFullscreen" title="退出全屏">⛶</button>
-        </div>
-      </div>
-    </Teleport>
-  </div>
+  </Teleport>
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { ref, computed, onMounted, onUnmounted, watch, nextTick, useAttrs } from 'vue'
 import { withBase } from 'vitepress'
 
+// 禁用自动属性继承，手动控制 style 应用
+defineOptions({
+  inheritAttrs: false
+})
+
+const attrs = useAttrs()
+
 const props = defineProps({
   src: {
     type: String,
@@ -297,6 +303,14 @@ const updateMinimapSize = () => {
     width: `${width}px`,
     height: `${height}px`
   }
+
+  // 等待 DOM 更新后重新初始化小地图 canvas
+  nextTick(() => {
+    initMinimapCanvas(minimapCanvasRef.value, minimapRef.value, minimapCtx)
+    if (isFullscreen.value) {
+      initMinimapCanvas(fullscreenMinimapCanvasRef.value, fullscreenMinimapRef.value, fullscreenMinimapCtx)
+    }
+  })
 }
 
 // 获取当前应该使用的图片
@@ -340,6 +354,24 @@ const loadImage = () => {
   img.src = withBase(props.src)
 }
 
+// 初始化小地图 canvas 的尺寸和 context
+const initMinimapCanvas = (canvas, minimap, context) => {
+  if (!canvas || !minimap || !context) return
+
+  const dpr = window.devicePixelRatio || 1
+  const rect = minimap.getBoundingClientRect()
+
+  // 重置变换矩阵
+  context.setTransform(1, 0, 0, 1, 0, 0)
+
+  // 设置 canvas 实际分辨率
+  canvas.width = rect.width * dpr
+  canvas.height = rect.height * dpr
+
+  // 应用设备像素比缩放
+  context.scale(dpr, dpr)
+}
+
 // 调整Canvas尺寸
 const resizeCanvas = () => {
   if (!canvasRef.value || !containerRef.value) return
@@ -581,14 +613,10 @@ const renderMinimap = () => {
 
   minimapAnimationFrameId = requestAnimationFrame(() => {
     const dpr = window.devicePixelRatio || 1
-
-    // 设置小地图canvas尺寸
     const rect = minimap.getBoundingClientRect()
-    canvas.width = rect.width * dpr
-    canvas.height = rect.height * dpr
 
-    // 清空小地图
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    // 清空小地图（注意：canvas 已经在 initMinimapCanvas 中设置了正确的尺寸和 scale）
+    ctx.clearRect(0, 0, rect.width, rect.height)
 
     // 计算小地图中图片的显示尺寸（保持宽高比）
     const imgAspectRatio = currentImage.width / currentImage.height
@@ -613,10 +641,10 @@ const renderMinimap = () => {
       0,
       currentImage.width,
       currentImage.height,
-      offsetX * dpr,
-      offsetY * dpr,
-      minimapImgWidth * dpr,
-      minimapImgHeight * dpr
+      offsetX,
+      offsetY,
+      minimapImgWidth,
+      minimapImgHeight
     )
   })
 }
@@ -915,9 +943,10 @@ const toggleFullscreen = () => {
         }
       }
 
-      // 初始化全屏小地图 canvas
-      if (fullscreenMinimapCanvasRef.value) {
+      // 初始化全屏小地图 canvas 和 context
+      if (fullscreenMinimapCanvasRef.value && fullscreenMinimapRef.value) {
         fullscreenMinimapCtx = fullscreenMinimapCanvasRef.value.getContext('2d')
+        initMinimapCanvas(fullscreenMinimapCanvasRef.value, fullscreenMinimapRef.value, fullscreenMinimapCtx)
       }
 
       document.body.style.overflow = 'hidden'
@@ -951,8 +980,9 @@ onMounted(() => {
   loadImage()
   window.addEventListener('resize', handleResize)
 
-  // 初始化小地图
+  // 初始化小地图 canvas
   nextTick(() => {
+    initMinimapCanvas(minimapCanvasRef.value, minimapRef.value, minimapCtx)
     renderMinimap()
   })
 })
@@ -994,16 +1024,10 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-.viewer-wrapper {
-  width: 100%;
-  height: 100%;
-}
-
 .zoom-container {
   position: relative;
   width: 100%;
-  height: 100%;
-  min-height: 200px;
+  height: 400px;
   overflow: hidden;
   background: var(--vp-c-bg-soft);
   border: 1px solid var(--vp-c-border);

wiki/index.md

@@ -1 +1,26 @@
-# OmooLab Wiki
+# 风风风
+
+## 📚 最新内容
+
+### 测试笔记
+测试 Canvas 导出功能和图片查看器组件
+
+[查看笔记 →](/notes/测试导出/)
+
+
+
+## 🗂️ 内容分类
+
+### 笔记 & 文档
+- [测试笔记](/notes/测试导出/) - Canvas 导出功能测试
+
+### 画板
+- [测试画板 1](/notes/测试画板-1.canvas/)
+- [测试画板 2](/notes/测试画板-2.canvas/)
+
+
+
+## 🔗 快速链接
+
+- [关于我们](https://www.omoolab.xyz) - 了解更多关于 OmooLab 的信息
+- [备案信息](https://beian.miit.gov.cn/) - 浙ICP备2025208399号-1

wiki/notes/index.md

@@ -0,0 +1,17 @@
+# 📝 笔记记录
+
+这里收录了我们的学习和工作笔记。
+
+## 📂 笔记列表
+
+### 测试笔记
+- [测试笔记 - Canvas 导出](./测试导出/) - 测试 Canvas 导出功能和图片查看器组件
+
+## 🎨 画板
+
+- [测试画板 1](./测试画板-1.canvas/) - 第一个测试画板
+- [测试画板 2](./测试画板-2.canvas/) - 第二个测试画板
+
+---
+
+> 💡 **提示**：使用上方搜索框可以快速查找你需要的内容。

wiki/notes/测试画板-1.canvas/index.md

@@ -1 +1 @@
-<Viewer src="/测试画板-1.canvas.png" />
+![](/测试画板-1.canvas.png)