README.md

@@ -5,21 +5,6 @@
 
 ## 对话记录
 
-### 本次会话总结 (2026年2月6日)
-
-本次会话完成了 `jsCoreNav.vue` 导航页面的开发任务：
-
-1.  **创建 Vue 页面**:
-    *   在 `src/views/tool/` 目录下创建了 `jsCoreNav.vue` 单文件组件。
-    *   实现了响应式的网格布局，展示 JavaScript 核心基础知识点卡片。
-    *   集成了 **搜索过滤** 功能，支持根据标题和描述实时筛选导航项。
-    *   页面采用 **配置驱动** 模式，通过修改内部的 `navList` 常量即可轻松增删导航内容。
-
-2.  **交互与视觉设计**:
-    *   使用 `Element Plus` 的 `el-card` 和 `TailwindCSS` 构建，支持悬浮动效。
-    *   集成 `Iconify` 图标库，为每个知识点提供直观的图标标识。
-    *   统一处理了内部路由跳转和外部链接跳转的逻辑。
-
 ### 本次会话总结 (2025年10月30日)
 
 本次会话完成了 `computedWithEnumList` 示例页面的开发任务，主要包含以下步骤：
@@ -84,13 +69,7 @@
 
 ### 任务列表
 
-
+* 项目首页/welcome这个路由下是默认的的首页介绍页面，但是现在这个页面是一个静态的页面，是由一些模拟数据渲染的，我现在希望完成功能如下：
-
-* [x] 在 `src/views/tool/` 目录下创建 `jsCoreNav.vue` 导航跳转页面。
-
-* 项目首页/welcome这个路由下是默认的的首页介绍页面
-
-，但是现在这个页面是一个静态的页面，是由一些模拟数据渲染的，我现在希望完成功能如下：
 - 在package.json中添加一个命令，当执行这个命令的时候可以本地统计/src/views下的/demo，/python，/utils，/screen，这四个模块下分别有多少个页面，页面维度请按照router路由来统计，例如/python文件夹有五个文件夹，这就是5个页面。当统计完成后在/src/views/welcome中创建或者更新config.json文件，以便后续页面可以直接读取json配置文件
 - 请读取/src/view/welcome中页面，其中页面的数据来源为/scripts/statistics.mjs，请更新该脚本，以便获得更多的信息，来满足/src/view/welcome页面所需数据的渲染
 - 将/src/view/welcome/config.json作为数据源，渲染到/src/view/welcome的vue组件中

src/router/modules/demo.ts

@@ -194,14 +194,6 @@ const titleArr = [
         key: 'canvasExample',
         title: 'canvas示例',
     },
-    {
-        key: 'jsEventLoop',
-        title: 'js事件循环',
-    },
-    {
-        key: 'jsHoistingScope',
-        title: 'js中变量提升与作用域',
-    },
 ];
 
 // @/views/demo/**/*.vue

src/router/modules/tool.ts

@@ -19,13 +19,5 @@ export default {
                 title: '工具导航',
             },
         },
-        {
-            path: '/tool/jsCore',
-            name: 'JsCore',
-            component: () => import('@/views/tool/jsCoreNav.vue'),
-            meta: {
-                title: 'js核心基础知识导航',
-            },
-        },
     ],
 } satisfies RouteConfigsTable;

src/views/demo/jsEventLoop/index.vue

@@ -1,20 +0,0 @@
-<template>
-    <div
-        class="markdown-body"
-        v-html="htmlStr"
-    />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { marked } from 'marked';
-import { getMarkdownContent } from '@/utils/tools';
-
-const htmlStr = ref('');
-
-// getMarkdownContent 的参数路径相对于 public 目录，
-// move-md-plugin 会将 src 下的所有 .md 文件移动到 public/md/ 目录下
-getMarkdownContent('./md/jsEventLoop.md').then((res) => {
-    htmlStr.value = marked(res);
-});
-</script>

src/views/demo/jsEventLoop/jsEventLoop.md

@@ -1,102 +0,0 @@
-# JS 事件循环 (Event Loop)
-## 知识点总结（个人整理）
-
-### 执行顺序
-1. 同步任务
-2. 微任务队列（执行完毕后会再次检查微任务队列，直到清空微任务队列为止）
-3. 第一个宏任务
-4. 再次检查微任务队列，有就清空
-5. 第二个宏任务
-
-...重复上面步骤直到清空宏任务队列
-
-### 代码示例
-```javascript
-<script>
-    console.log("同步1");
-
-    Promise.resolve().then(() => {
-        console.log("微任务1");
-        Promise.resolve().then(() => {
-            console.log("微任务1-1");
-            Promise.resolve().then(() => {
-                console.log("微任务2-1");
-            });
-        });
-    });
-
-    setTimeout(() => {
-        console.log("宏任务1");
-        Promise.resolve().then(() => {
-            console.log("宏任务1-微任务");
-        });
-    }, 0);
-
-    console.log("同步2");
-
-    Promise.resolve().then(() => {
-        console.log("微任务2");
-    });
-
-    setTimeout(() => {
-        console.log("宏任务2");
-    }, 0);
-
-    console.log("同步3");
-</script>
-
-/**
- 同步1
- 同步2
- 同步3
- 微任务1
- 微任务2
- 微任务1-1
- 微任务2-1
- 宏任务1
- 宏任务1-微任务
- 宏任务2
- */
-```
-
-
-## 知识点总结（以下为AI整理）
-
-### 1. 为什么会有事件循环？
-JavaScript 是单线程的，为了协调事件、用户交互、脚本、UI 渲染、网络等，必须使用事件循环。
-
-### 2. 宏任务 (Macrotasks) 与 微任务 (Microtasks)
-*   **宏任务**: script (整体代码), setTimeout, setInterval, setImmediate (Node.js), I/O, UI rendering.
-*   **微任务**: Promise.then, process.nextTick (Node.js), MutationObserver.
-
-### 3. 执行顺序
-1.  执行一个宏任务（栈为空，执行整体 script 代码）。
-2.  执行过程中遇到微任务，将其加入微任务队列。
-3.  宏任务执行完毕，立即依次执行当前微任务队列中的所有微任务。
-4.  微任务执行完毕，如果有 UI 渲染需求，则进行渲染。
-5.  检查是否有宏任务，如果有，取出下一个宏任务，回到第 1 步。
-
-## 代码演示
-
-```javascript
-console.log('script start');
-
-setTimeout(function() {
-    console.log('setTimeout');
-}, 0);
-
-Promise.resolve().then(function() {
-    console.log('promise1');
-}).then(function() {
-    console.log('promise2');
-});
-
-console.log('script end');
-```
-
-**预期输出顺序：**
-1. script start
-2. script end
-3. promise1
-4. promise2
-5. setTimeout

src/views/demo/jsHoistingScope/index.vue

@@ -1,20 +0,0 @@
-<template>
-    <div
-        class="markdown-body"
-        v-html="htmlStr"
-    />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { marked } from 'marked';
-import { getMarkdownContent } from '@/utils/tools';
-
-const htmlStr = ref('');
-
-// getMarkdownContent 的参数路径相对于 public 目录，
-// move-md-plugin 会将 src 下的所有 .md 文件移动到 public/md/ 目录下
-getMarkdownContent('./md/jsHoistingScope.md').then((res) => {
-    htmlStr.value = marked(res);
-});
-</script>

src/views/demo/jsHoistingScope/jsHoistingScope.md

@@ -1,83 +0,0 @@
-# JS 变量提升与作用域 (Hoisting & Scope)
-
-## 知识点总结
-
-### 1. 变量提升 (Hoisting)
-JavaScript 代码在执行前会先进行编译。在编译阶段，变量和函数的声明会被移动到其所在作用域的顶部。
-
-*   **var 声明**: 变量会被提升，但赋值不会。初始值为 `undefined`。
-*   **let/const 声明**: 也会被提升，但在声明之前访问会触发“暂时性死区 (TDZ)”。
-*   **函数声明**: 整个函数体都会被提升（函数声明优先于变量声明）。
-
-### 2. 作用域 (Scope)
-作用域决定了代码中变量和其他资源的可见性。
-
-*   **全局作用域**: 脚本中任何地方都能访问。
-*   **函数作用域**: 变量仅在函数内部可见。
-*   **块级作用域**: `let` 和 `const` 引入。变量仅在 `{}` 块内可见。
-
-### 3. 作用域链 (Scope Chain)
-当在一个作用域中使用变量时，JavaScript 引擎会首先在当前作用域查找，如果没有找到，就向上一级作用域查找，直到找到或到达全局作用域。
-
-## 代码演示
-
-### 收集题目
-```javascript
-let outerValue = 'outer'; //let声明的变量不会挂在全局window上
-function outer() {
-    function inner() {
-        const arrowFunc = () => console.log(this.outerValue);
-        arrowFunc();
-    }
-    inner();
-}
-outer();
-
-// undefined
-```
-
-```javascript
-var outerValue = 'outer';
-function outer() {
-    function inner() {
-        const arrowFunc = () => console.log(this.outerValue);
-        arrowFunc();
-    }
-    inner();
-}
-outer();
-
-// outer
-```
-
-### 变量提升演示
-```javascript
-console.log(a); // undefined
-var a = 1;
-
-try {
-    console.log(b); // ReferenceError
-    let b = 2;
-} catch (e) {
-    console.log(e);
-}
-
-foo(); // "hello"
-function foo() {
-    console.log("hello");
-}
-```
-
-### 作用域链演示
-```javascript
-var x = 10;
-function outer() {
-    var y = 20;
-    function inner() {
-        var z = 30;
-        console.log(x + y + z); // 60
-    }
-    inner();
-}
-outer();
-```

src/views/tool/jsCoreNav.vue

@@ -1,183 +0,0 @@
-<template>
-    <div class="p-6 min-h-full bg-white">
-        <!-- 顶部区域：扁平化标题与搜索 -->
-        <div class="flex flex-col md:flex-row md:items-center justify-between mb-8 pb-6 border-b-2 border-gray-100">
-            <div class="mb-4 md:mb-0">
-                <h1 class="text-2xl font-black text-gray-900 tracking-tight">JS <span class="text-primary">CORE</span> NAV</h1>
-                <p class="text-sm text-gray-500 mt-1 font-medium">JavaScript 核心基础知识点速查</p>
-            </div>
-
-            <div class="relative">
-                <el-input
-                    v-model="searchText"
-                    placeholder="输入关键字过滤..."
-                    class="custom-search !w-full md:!w-80"
-                    clearable
-                >
-                    <template #prefix>
-                        <iconify-icon-online
-                            icon="ep:search"
-                            class="text-gray-400"
-                        />
-                    </template>
-                </el-input>
-            </div>
-        </div>
-
-        <!-- 导航网格：扁平化高对比度设计 -->
-        <div
-            v-if="filteredList.length > 0"
-            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"
-        >
-            <div
-                v-for="(item, index) in filteredList"
-                :key="item.path"
-                class="nav-card group cursor-pointer relative overflow-hidden border-2 transition-all duration-200"
-                :style="{ borderColor: getThemeColor(index, 'border') }"
-                @click="handleNav(item)"
-            >
-                <!-- 左侧色条对比 -->
-                <div
-                    class="absolute left-0 top-0 bottom-0 w-1.5"
-                    :style="{ backgroundColor: getThemeColor(index, 'main') }"
-                ></div>
-
-                <div class="p-5 pl-7">
-                    <!-- 标题：高对比度加粗 -->
-                    <h3
-                        class="text-lg font-bold mb-2 transition-colors duration-200"
-                        :style="{ color: getThemeColor(index, 'text') }"
-                    >
-                        {{ item.title }}
-                    </h3>
-
-                    <!-- 描述：简洁明了 -->
-                    <p class="text-sm text-gray-600 leading-relaxed font-medium line-clamp-2">
-                        {{ item.desc }}
-                    </p>
-
-                    <!-- 底部装饰线 -->
-                    <div
-                        class="mt-4 w-8 h-1 transition-all duration-300 group-hover:w-full"
-                        :style="{ backgroundColor: getThemeColor(index, 'main') }"
-                    ></div>
-                </div>
-            </div>
-        </div>
-
-        <!-- 空状态 -->
-        <el-empty
-            v-else
-            description="未找到相关内容"
-        />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-import { useRouter } from 'vue-router';
-
-defineOptions({
-    name: 'JsCoreNav',
-});
-
-const router = useRouter();
-const searchText = ref('');
-
-interface NavItem {
-    title: string;
-    path: string;
-    desc: string;
-}
-
-/**
- * 预设高对比度色彩库 (扁平化风格)
- */
-const THEME_COLORS = [
-    { main: '#3B82F6', border: '#DBEafe', text: '#1E40AF' }, // 蓝色
-    { main: '#EF4444', border: '#FEE2E2', text: '#991B1B' }, // 红色
-    { main: '#10B981', border: '#D1FAE5', text: '#065F46' }, // 绿色
-    { main: '#F59E0B', border: '#FEF3C7', text: '#92400E' }, // 橙色
-    { main: '#8B5CF6', border: '#EDE9FE', text: '#5B21B6' }, // 紫色
-    { main: '#EC4899', border: '#FCE7F3', text: '#9D174D' }, // 粉色
-    { main: '#06B6D4', border: '#CFFAFE', text: '#155E75' }, // 青色
-];
-
-const getThemeColor = (index: number, type: 'main' | 'border' | 'text') => {
-    const colorSet = THEME_COLORS[index % THEME_COLORS.length];
-    return colorSet[type];
-};
-
-/**
- * 导航数据
- */
-const navList = ref<NavItem[]>([
-    {
-        title: '变量提升与作用域',
-        path: '/demo/jsHoistingScope',
-        desc: '执行上下文、词法作用域与 var/let/const 的底层差异。',
-    },
-    {
-        title: '闭包与内存模型',
-        path: '/js/closures',
-        desc: '函数作用域链的延续、私有变量实现与内存泄漏规避。',
-    },
-    {
-        title: '原型继承链',
-        path: '/demo/prototype',
-        desc: '从 __proto__ 到 prototype，构建 JavaScript 的对象继承大厦。',
-    },
-    {
-        title: 'This 上下文绑定',
-        path: '/js/this-context',
-        desc: '默认绑定、隐式绑定、显式绑定与箭头函数的静态指向。',
-    },
-    {
-        title: '事件循环模型',
-        path: '/demo/jsEventLoop',
-        desc: '宏任务与微任务的交替执行，浏览器渲染帧的调度机制。',
-    },
-]);
-
-const filteredList = computed(() => {
-    const keyword = searchText.value.trim().toLowerCase();
-    if (!keyword) return navList.value;
-    return navList.value.filter((item) => item.title.toLowerCase().includes(keyword) || item.desc.toLowerCase().includes(keyword));
-});
-
-const handleNav = (item: NavItem) => {
-    if (item.path.startsWith('http')) {
-        window.open(item.path, '_blank');
-    } else {
-        router.push(item.path).catch(() => {});
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.nav-card {
-    background-color: #fff;
-
-    &:hover {
-        transform: translateX(4px);
-        background-color: #f9fafb;
-    }
-}
-
-.custom-search {
-    :deep(.el-input__wrapper) {
-        box-shadow: none !important;
-        border: 2px solid #f3f4f6;
-        border-radius: 0;
-        padding: 8px 12px;
-
-        &.is-focus {
-            border-color: var(--el-color-primary);
-        }
-    }
-}
-
-.text-primary {
-    color: var(--el-color-primary);
-}
-</style>

src/views/welcome/config.json

@@ -1,12 +1,12 @@
 {
-    "totalNotes": 94,
+    "totalNotes": 92,
     "categories": 5,
-    "lastUpdated": "2026-02-06T02:19:56.712Z",
+    "lastUpdated": "2026-02-03T02:46:03.140Z",
-    "weeklyAdded": 9,
+    "weeklyAdded": 7,
     "categoryChartData": [
         {
             "name": "demo",
-            "value": 83
+            "value": 81
         },
         {
             "name": "python",
@@ -26,18 +26,6 @@
         }
     ],
     "recentNotes": [
-        {
-            "path": "demo/jsEventLoop/index.vue",
-            "title": "js事件循环",
-            "category": "demo",
-            "date": "2026-02-06"
-        },
-        {
-            "path": "demo/constructor/index.vue",
-            "title": "constructor",
-            "category": "demo",
-            "date": "2026-02-04"
-        },
         {
             "path": "demo/canvasExample.vue",
             "title": "canvas示例",
@@ -55,6 +43,18 @@
             "title": "面试手写题",
             "category": "demo",
             "date": "2026-02-02"
+        },
+        {
+            "path": "demo/formItemWithRangeFields.vue",
+            "title": "表单一个formItem中校验多个字段",
+            "category": "demo",
+            "date": "2026-02-02"
+        },
+        {
+            "path": "demo/formChangeTrack.vue",
+            "title": "表单敏感字段变更追踪标记",
+            "category": "demo",
+            "date": "2026-02-02"
         }
     ]
 }