feat: 将项目内图片和本地js等资源改为放置在public目录下，以根目录的形式引入，保证开发和生产都兼容

src/views/demo/backToHttp/backToHttp.md

@@ -14,8 +14,8 @@
 3. 选择`允许`选项
 4. 刷新页面生效
 
-![操作示例](/src/views/demo/backToHttp/1.png) 
-![操作示例](/src/views/demo/backToHttp/2.png)
+![操作示例](/absRes/backToHttp/1.png) 
+![操作示例](/absRes/backToHttp/2.png)
 
 ## 参考网站
 [Chrome 浏览器：取消http自动跳转https的默认设置](https://maoyanqing.com/chrome-delete-domain-security-policies)

src/views/demo/cssDemo.vue

@@ -78,7 +78,7 @@
 .blurred-glass-box {
     width: 100%;
     height: 300px;
-    background: url('/src/views/demo/tuiImageEditor/img/test.jpg') no-repeat center center;
+    background: url('/absRes/tuiImageEditor/img/test.jpg') no-repeat center center;
     background-size: cover;
     display: flex;
     align-items: center;

src/views/demo/scssLiveTranslate/index.vue

@@ -306,7 +306,7 @@ async function ensureSass() {
     try {
         await new Promise((resolve, reject) => {
             const script = document.createElement('script');
-            script.src = '/src/views/demo/scssLiveTranslate/sass.sync.js';
+            script.src = '/absRes/scssLiveTranslate/sass.sync.js';
             script.onload = () => resolve();
             script.onerror = (e) => reject(new Error('Sass.js failed to load'));
             document.head.appendChild(script);

src/views/demo/tuiImageEditor/components/image-editor.vue

@@ -74,13 +74,13 @@ onMounted(async () => {
     loading.value = true;
     if (!window.hasOwnProperty('tui')) {
         // 加载同级目录下的js文件
-        await createScriptElement('/src/views/demo/tuiImageEditor/js/fabric.js');
-        await createScriptElement('/src/views/demo/tuiImageEditor/js/tui-code-snippet.js');
-        await createScriptElement('/src/views/demo/tuiImageEditor/js/tui-color-picker.js');
-        await createScriptElement('/src/views/demo/tuiImageEditor/js/FileSaver.js');
-        await createScriptElement('/src/views/demo/tuiImageEditor/js/tui-image-editor.js');
-        await createScriptElement('/src/views/demo/tuiImageEditor/js/white-theme.js');
-        await createScriptElement('/src/views/demo/tuiImageEditor/js/black-theme.js');
+        await createScriptElement('/absRes/tuiImageEditor/js/fabric.js');
+        await createScriptElement('/absRes/tuiImageEditor/js/tui-code-snippet.js');
+        await createScriptElement('/absRes/tuiImageEditor/js/tui-color-picker.js');
+        await createScriptElement('/absRes/tuiImageEditor/js/FileSaver.js');
+        await createScriptElement('/absRes/tuiImageEditor/js/tui-image-editor.js');
+        await createScriptElement('/absRes/tuiImageEditor/js/white-theme.js');
+        await createScriptElement('/absRes/tuiImageEditor/js/black-theme.js');
     }
     initTuiImageEditor();
     addEventListenerFN();

src/views/demo/tuiImageEditor/index.vue

@@ -38,7 +38,7 @@ const imgList = ref([
         name: '3',
     },
     {
-        path: '/src/views/demo/tuiImageEditor/img/test.jpg',
+        path: '/absRes/tuiImageEditor/img/test.jpg',
         name: '3',
     },
 ]);

src/views/demo/vListDoc1/vListDoc1.md

@@ -9,7 +9,7 @@
 有的特殊场景我们不能分页，只能渲染一个长列表。这个长列表中可能有几万条数据，如果全部渲染到页面上用户的设备差点可能就会直接卡死了，这时我们就需要虚拟列表来解决问题。
 
 一个常见的虚拟列表是下面这样的，如下图：  
-![v1](/src/views/demo/vListDoc1/img/1.png)
+![v1](/absRes/vListDoc1/img/1.png)
 
 其中实线框的item表示在视口区域内真实渲染DOM，虚线框的item表示并没有渲染的DOM。
 
@@ -119,19 +119,19 @@ function handleScroll(e) {
 如果当前`itemSize`的值为100。
 
 如果此时滚动的距离在0-100之间，比如下面这样：  
-![v1](/src/views/demo/vListDoc1/img/2.png)
+![v1](/absRes/vListDoc1/img/2.png)
 上面这张图item1还没完全滚出可视区域，有部分在可视区域内，部分在可视区域外。此时可视区域内显示的就是`item1-item7`的模块了，这就是为什么前面我们计算end时要多渲染一个item，不然这里item7就没法显示了。
 
 **滚动距离在0-100之间时，渲染的DOM没有变化，我们完全是复用浏览器的滚动，并没有进行任何处理。**
 
 当`scrollTop`的值为100时，也就是刚刚把item1滚到可视区外面时。此时item1已经不需要渲染了，因为已经看不见他了。所以此时的`start`的值就应该从`0`更新为`1`，同理如果`scrollTop`的值为`110`，start的值也一样是`1`。所以得出`start.value = Math.floor(scrollTop / itemSize);`如下图：  
-![v1](/src/views/demo/vListDoc1/img/3.png)
+![v1](/absRes/vListDoc1/img/3.png)
 此时的`start`从item2开始渲染，但是由于前面我们复用了浏览器的滚动，所以实际渲染的DOM第一个已经在可视区外面了。此时可视区看见的第一个是item3，很明显是不对的，应该看见的是第一个是item2。
 
 此时应该怎么办呢？
 
 很简单，使用`translate`将列表向下偏移一个item的高度就行，也就是100px。列表偏移后就是下面这样的了：  
-![v1](/src/views/demo/vListDoc1/img/4.png)
+![v1](/absRes/vListDoc1/img/4.png)
 如果当前`scrollTop`的值为200，那么偏移值就是200px。所以我们得出
 
 ```javascript
@@ -145,7 +145,7 @@ offset.value = scrollTop - (scrollTop % itemSize);
 实际上从一个item滚动到另外一个item时，比如从`item0`滚动到`item1`。此时会做两件事情：将`start`的值从`0`更新为`1`和根据`scrollTop`计算得到列表的偏移值`100`，从而让新的start对应的`item1`重新回到可视范围内。
 
 这个是运行效果图：  
-![v1](/src/views/demo/vListDoc1/img/5.gif)
+![v1](/absRes/vListDoc1/img/5.gif)
 下面是完整的代码：
 
 ```javascript

src/views/demo/vListDoc2/vListDocs2.md

@@ -7,7 +7,7 @@
 # 什么是不定高虚拟列表
 
 不定高的意思很简单，就是不知道每一项item的具体高度，如下图：  
-![v1](/src/views/demo/vListDoc2/img/1.png)
+![v1](/absRes/vListDoc2/img/1.png)
 
 现在我们有个问题，**在不定高的情况下我们就不能根据当前滚动条的`scrollTop`去计算可视区域里面实际渲染的第一个item的index位置，也就是`start`的值。**
 
@@ -266,7 +266,7 @@ const getTransform = computed(() => `translate3d(0,${props.offset}px,0)`);
 ```
 
 这个是最终的运行效果图：  
-![v1](/src/views/demo/vListDoc2/img/2.gif)
+![v1](/absRes/vListDoc2/img/2.gif)
 完整的父组件代码如下：
 
 ```javascript

src/views/welcome/config.json

@@ -1,8 +1,8 @@
 {
     "totalNotes": 74,
     "categories": 5,
-    "lastUpdated": "2025-10-14T03:06:31.162Z",
-    "weeklyAdded": 5,
+    "lastUpdated": "2025-10-15T08:30:23.764Z",
+    "weeklyAdded": 8,
     "categoryChartData": [
         {
             "name": "demo",
@@ -27,34 +27,34 @@
     ],
     "recentNotes": [
         {
-            "path": "demo/deletdNodeModules/index.vue",
-            "title": "删除 node_modules 文件夹非常耗时解决办法",
+            "path": "demo/scssLiveTranslate/index.vue",
+            "title": "SCSS → CSS 实时翻译器",
             "category": "demo",
-            "date": "2025-10-14"
+            "date": "2025-10-15"
         },
         {
-            "path": "demo/asyncDynComp/index.vue",
-            "title": "异步动态加载组件",
+            "path": "demo/cssDemo.vue",
+            "title": "cssDemo",
             "category": "demo",
-            "date": "2025-10-11"
+            "date": "2025-10-15"
         },
         {
-            "path": "demo/asyncDynComp/moduleA/item2.vue",
-            "title": "item2",
+            "path": "demo/tuiImageEditor/index.vue",
+            "title": "tuiImageEditor",
             "category": "demo",
-            "date": "2025-10-11"
+            "date": "2025-10-15"
         },
         {
-            "path": "demo/asyncDynComp/moduleA/item1.vue",
-            "title": "item1",
+            "path": "demo/deletdNodeModules/index.vue",
+            "title": "删除 node_modules 文件夹非常耗时解决办法",
             "category": "demo",
-            "date": "2025-10-11"
+            "date": "2025-10-14"
         },
         {
-            "path": "demo/dataSafe/index.vue",
-            "title": "数据安全-加密解密与掩码",
+            "path": "demo/asyncDynComp/index.vue",
+            "title": "异步动态加载组件",
             "category": "demo",
-            "date": "2025-10-10"
+            "date": "2025-10-11"
         }
     ]
 }