chuanyinweb.git

parent: cac2d5a6 | 补丁 | 提交 | ignore whitespace

zhangwei

2026-04-08 ef5050890cf37409628df47e9c820ac345434209

3个文件已修改

2个文件已添加

	example.html	351 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/header/index.vue	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/static/img/lunzhuan1.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/equipment/index.vue	25 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/login/index.vue	4 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 example.html

New file
@@ -0,0 +1,351 @@

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3响应式系统原理 · 宋体五号示意图</title>
    <style>
        /* 全局字体设置：宋体五号 (五号 ≈ 10.5pt ≈ 14px，为屏幕清晰稍调) */
        body {
            font-family: 'SimSun', '宋体', 'Songti SC', STSong, 'Times New Roman', serif;
            font-size: 14px;          /* 五号约10.5pt，对应14px清晰 */
            line-height: 1.5;
            background: #f5f7fa;
            margin: 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
        }
        .diagram-container {
            max-width: 1000px;
            width: 100%;
            background: white;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
            border-radius: 16px;
            padding: 24px 20px 30px 20px;
            border: 1px solid #e2e8f0;
        }
        /* 主标题 */
        .title {
            text-align: center;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 16px;
            color: #2c3e50;
            letter-spacing: 1px;
            border-bottom: 2px solid #42b883;
            padding-bottom: 10px;
        }
        /* 副标题/区域标识 */
        .section-label {
            font-weight: 600;
            color: #2c3e50;
            background: #edf2f7;
            display: inline-block;
            padding: 4px 14px;
            border-radius: 30px;
            font-size: 14px;
            margin-bottom: 12px;
            border-left: 4px solid #42b883;
        }
        /* 三列布局: 左侧优势 + 核心流程 + 右侧ref */
        .main-panel {
            display: flex;
            gap: 16px;
            margin-top: 10px;
            flex-wrap: wrap;
        }
        .left-panel {
            flex: 1.2;
            min-width: 220px;
            background: #f8fafc;
            border-radius: 16px;
            padding: 16px 14px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.03);
            border: 1px solid #e9eef3;
        }
        .center-panel {
            flex: 2.2;
            min-width: 380px;
            background: #f8fafc;
            border-radius: 16px;
            padding: 16px 14px;
            border: 1px solid #e9eef3;
            box-shadow: 0 2px 8px rgba(0,0,0,0.03);
        }
        .right-panel {
            flex: 1;
            min-width: 210px;
            background: #f8fafc;
            border-radius: 16px;
            padding: 16px 14px;
            border: 1px solid #e9eef3;
            box-shadow: 0 2px 8px rgba(0,0,0,0.03);
        }
        /* 引用标记小字 */
        .ref-note {
            color: #64748b;
            font-size: 12px;   /* 稍小但仍保持宋体 */
            margin-top: 8px;
            border-top: 1px dashed #cbd5e1;
            padding-top: 8px;
        }
        /* 流程图卡片样式 */
        .flow-step {
            background: white;
            border-radius: 12px;
            padding: 12px 10px;
            margin-bottom: 12px;
            border-left: 5px solid #42b883;
            box-shadow: 0 2px 6px rgba(0,0,0,0.02);
            border: 1px solid #dde7f0;
            border-left-width: 5px;
            border-left-color: #42b883;
            position: relative;
        }
        .flow-step strong {
            color: #1e293b;
            font-weight: 600;
            display: block;
            margin-bottom: 5px;
            font-size: 14.5px;
        }
        .flow-step .desc {
            color: #334155;
            margin-left: 6px;
        }
        /* 箭头连线示意 (简单用字符) */
        .arrow-down {
            text-align: center;
            color: #94a3b8;
            font-size: 18px;
            margin: -4px 0 -2px 0;
            letter-spacing: -2px;
        }
        /* 小标签 */
        .proxy-badge {
            background: #e0f2fe;
            color: #0369a1;
            padding: 2px 10px;
            border-radius: 20px;
            font-size: 12px;
            display: inline-block;
            margin-right: 8px;
        }
        .ref-badge {
            background: #fef9c3;
            color: #854d0e;
            padding: 2px 10px;
            border-radius: 20px;
            font-size: 12px;
            display: inline-block;
            margin-right: 8px;
        }
        .highlight {
            background: #dcfce7;
            color: #166534;
            padding: 2px 8px;
            border-radius: 16px;
            font-weight: 500;
        }
        /* 列表样式 */
        ul {
            margin: 8px 0 0 0;
            padding-left: 20px;
        }
        li {
            margin-bottom: 5px;
            color: #2d3c50;
        }
        hr {
            border: none;
            border-top: 1px solid #d1d9e6;
            margin: 16px 0 10px 0;
        }
        /* 右侧ref特殊盒子 */
        .ref-box {
            background: white;
            border-radius: 12px;
            padding: 14px;
            border: 1px dashed #f59e0b;
            margin: 15px 0 5px;
        }
        .ref-value {
            background: #f1f5f9;
            font-family: monospace;
            padding: 4px 8px;
            border-radius: 20px;
            display: inline-block;
            margin: 6px 0;
        }
        .auto-unpack {
            background: #f1f5f9;
            border-radius: 20px;
            padding: 4px 12px;
            font-size: 12px;
            color: #334155;
        }
        /* 五号字体全局已定，保持所有字体系列 */
        p, li, div, span, .desc, .flow-step, .section-label {
            font-family: inherit;
        }
        /* 小字引用 */
        .cite {
            color: #6b7b8f;
            font-size: 12px;
            margin-top: 16px;
            text-align: right;
            border-top: 1px solid #e2e8f0;
            padding-top: 12px;
        }
    </style>
</head>
<body>
    <div class="diagram-container">
        <!-- 大标题 -->
        <div class="title">🟢 Vue3 响应式系统原理 · 基于Proxy全面监听</div>

        <!-- 三块内容 -->
        <div class="main-panel">
            <!-- 左侧：Proxy优势 -->
            <div class="left-panel">
                <div class="section-label">✨ 基于Proxy · 优势</div>
                <div style="background: #e6f7ff; border-radius: 12px; padding: 12px; border: 1px solid #bae7ff;">
                    <span class="proxy-badge">ES6 Proxy</span><span style="font-weight: 500;"> 取代 Object.defineProperty</span>
                    <ul style="margin-top: 12px;">
                        <li>✅ 拦截对象<strong>各种操作</strong>：读取(get)、设置(set)、删除(deleteProperty)、枚举(ownKeys) 等</li>
                        <li>✅ <strong>全面监听</strong>：属性新增、删除、数组索引/length修改都能捕获</li>
                        <li>✅ 无需递归遍历所有属性，性能更优且支持动态属性</li>
                        <li>✅ 可拦截 <code>in</code> 操作符、<code>for...in</code> 等元操作</li>
                    </ul>
                    <div style="margin-top: 10px; background: #ffffffb3; padding: 8px; border-radius: 8px; font-size: 13px;">
                        <span style="color: #2c3e50;">📋 对比Vue2：</span>无法检测对象属性添加/删除，需用 <code>$set</code>；对数组需重写方法。Proxy完美解决。
                    </div>
                </div>
                <!-- 文献引用[10] -->
                <div class="ref-note">📎 参考文献 [10]: Proxy可以拦截对象的各种操作，包括属性读取、设置、删除、枚举等，实现对对象变化的全面监听。</div>
            </div>

            <!-- 中间：核心流程 (依赖收集/触发更新) -->
            <div class="center-panel">
                <div class="section-label">⚙️ 核心流程 · reactive + 依赖追踪</div>
                
                <!-- 步骤1：reactive -->
                <div class="flow-step">
                    <strong>1️⃣ reactive(data) 创建代理对象</strong>
                    <div class="desc">原始对象通过 <code style="background:#e9ecf3; padding:2px 6px;">new Proxy(target, handler)</code> 变为响应式代理。</div>
                </div>
                <div class="arrow-down">▼</div>

                <!-- 步骤2：组件渲染/访问 -->
                <div class="flow-step">
                    <strong>2️⃣ 组件渲染过程中访问响应式数据</strong>
                    <div class="desc">例如模板中使用 <code>{{ state.count }}</code> 或 <code>computed</code> 中读取。</div>
                </div>
                <div class="arrow-down">▼</div>

                <!-- 步骤3：getter拦截 & 依赖收集 -->
                <div class="flow-step" style="border-left-color: #f59e0b;">
                    <strong>3️⃣ <span class="highlight">getter 拦截</span> → 依赖收集</strong>
                    <div class="desc">触发Proxy的 <code>get</code> 陷阱，将当前副作用(如组件的渲染函数)记录为该属性的依赖。</div>
                    <div style="background: #fff7e6; border-radius: 20px; padding: 4px 10px; margin-top: 8px; font-size:13px;">
                        🧠 依赖关系：target Map (属性 → Set(副作用))
                    </div>
                </div>
                <div class="arrow-down">▼</div>

                <!-- 步骤4：数据变化 setter -->
                <div class="flow-step" style="border-left-color: #ef4444;">
                    <strong>4️⃣ 响应式数据变化 🔁 <span class="highlight">setter 拦截</span></strong>
                    <div class="desc">修改属性值触发 <code>set</code> 陷阱，比对变化后进入通知阶段。</div>
                </div>
                <div class="arrow-down">▼</div>

                <!-- 步骤5：通知依赖更新 -->
                <div class="flow-step" style="border-left-color: #3b82f6;">
                    <strong>5️⃣ 触发更新 (通知相关依赖)</strong>
                    <div class="desc">从依赖映射中找到所有与该属性相关的副作用(组件渲染函数、计算属性等)，加入调度队列。</div>
                </div>
                <div class="arrow-down">▼</div>

                <!-- 步骤6：组件重新渲染 -->
                <div class="flow-step">
                    <strong>6️⃣ 组件重新渲染 · 更新DOM</strong>
                    <div class="desc">执行副作用，生成新虚拟DOM，高效更新真实DOM。</div>
                </div>

                <!-- 附加说明：依赖收集与触发更新的简洁描述 -->
                <hr>
                <div style="display: flex; gap: 12px; justify-content: space-between; background: #e7f3ff; padding: 10px; border-radius: 12px;">
                    <div><span style="background: #2563eb; color:white; padding:2px 10px; border-radius: 30px;">⬇️ 依赖收集</span> 在getter中建立关系</div>
                    <div>➡️</div>
                    <div><span style="background: #db2777; color:white; padding:2px 10px; border-radius: 30px;">⬆️ 触发更新</span> 在setter中派发任务</div>
                </div>
            </div>

            <!-- 右侧：ref概念 -->
            <div class="right-panel">
                <div class="section-label">🔁 ref 包装基本类型</div>
                <div style="background: #fffbeb; border-radius: 14px; padding: 12px; border:1px solid #fde68a;">
                    <span class="ref-badge">ref()</span> 用于 <code>string | number | boolean</code> 等原始值
                    <div class="ref-box">
                        <div style="display: flex; align-items: center; gap: 6px;">
                            <span>🔸 构造:</span>
                            <code style="background:#e9eef3; padding:4px 8px; border-radius: 20px;">ref('hello')</code>
                        </div>
                        <div style="margin: 12px 0 8px 0; background:#e6f7ff; padding: 8px; border-radius: 12px;">
                            ⚡ 返回一个包含 <strong style="color:#b45309;">.value</strong> 属性的对象：
                            <div style="background: #1e293b; color: #facc15; padding: 6px 12px; border-radius: 20px; margin-top: 6px; font-family: monospace;">
                                { value: 'hello' }
                            </div>
                        </div>
                        <div><span class="auto-unpack">✨ 模板中自动解包</span></div>
                        <div style="margin-top: 10px; background:#fff; border-radius: 20px; padding: 6px 10px;">
                            ✅ <code>&lt;div&gt;{{ msg }}&lt;/div&gt;</code>  无需写 <code>msg.value</code>
                        </div>
                        <div style="margin-top: 10px; border-top: 1px dotted #cbd5e1; padding-top: 8px;">
                            🧩 <strong>script中必须使用 .value</strong> 修改/读取
                        </div>
                    </div>
                    <div style="font-size: 13px; margin-top: 8px; background: #d9f99d; padding: 4px 8px; border-radius: 20px;">
                        📦 同样基于Proxy/reactive实现，但通过value属性嵌套保证响应式
                    </div>
                </div>
                <!-- 简洁对比 -->
                <div style="margin-top: 16px;">
                    <span style="background: #cbd5e1; padding:2px 10px; border-radius: 30px;">reactive vs ref</span>
                    <ul style="margin-top: 10px;">
                        <li><strong>reactive</strong>：用于对象/数组，直接代理</li>
                        <li><strong>ref</strong>：用于基本类型，也可包裹对象(但自动用reactive转换深层)</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 底部整合描述：完全呼应题目内容 -->
        <div style="display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; background: #f1f5f9; border-radius: 20px; padding: 14px 18px;">
            <div style="flex:1; min-width: 200px;">
                <span style="font-weight: 600;">📌 Proxy全面监听</span>：get/set/deleteProperty/ownKeys · 全面代替Vue2的Object.defineProperty
            </div>
            <div style="flex:1; min-width: 220px;">
                <span style="font-weight: 600;">🎯 核心流程闭环</span>：reactive → 渲染访问 → getter收集 → setter触发 → 通知更新 → 重绘
            </div>
            <div style="flex:1; min-width: 180px;">
                <span style="font-weight: 600;">🔖 ref自动解包</span>：模板中直接使用标识符，底层访问.value
            </div>
        </div>

        <!-- 完整引用及字体声明 -->
        <!-- <div class="cite">
            <span>📖 内容依据：Vue3响应式原理 · 基于Proxy的优势、核心流程 (依赖收集/触发更新) 及 ref 包装基本类型。 </span>
            <span style="margin-left: 12px;">🔤 全图字体: 宋体 (SimSun) 五号 (14px)</span>
        </div> -->
    </div>
    <!-- 确保任何位置都强制宋体（备用） -->
    <div style="display: none;">字体检测</div>
</body>
</html>

 src/components/header/index.vue

@@ -42,7 +42,7 @@
        </el-sub-menu>
      </el-menu>
      <div v-else>
        <el-button type="primary" @click="loginin" round>内部OA系统</el-button>
        <el-button type="text" @click="loginin" round>内部OA系统</el-button>
        <!-- <el-button>
            <a href="http://ycmht.51zhengcai.com:9010/#/user/login" target="_blank">员工登录</a>
          </el-button> -->

 src/static/img/lunzhuan1.png


 src/views/equipment/index.vue

@@ -83,7 +83,7 @@
            </div>
            <div class="content flex justify-between items-center py-16">
                <el-image style="width: 658.09px; height: 466.33px" :src="heibai"></el-image>
                <div class=" mx-16 px-16">
                <div class="mx-8">
                    <p class="w-1/2 font-['Source_Code_Pro'] font-semibold text-[36px]  align-middle capitalize">黑白印刷
                    </p>
                    <p
@@ -99,7 +99,7 @@
            </div>
            <div class="lunzhuanbg py-16">
                <div class="content  flex justify-between items-center ">
                    <div class=" mx-16 px-16">
                    <div class=" mx-8">
                        <p class="w-1/2 font-['Source_Code_Pro'] font-semibold text-[36px]  align-middle capitalize">
                            轮转印刷</p>
                        <p
@@ -108,13 +108,29 @@
                        <div
                            class="font-['Source_Han_Sans_SC'] font-normal text-[24px]  tracking-[4%] capitalize text-[#696969] mt-8">
                            <p>印刷速度：约30000 张/小时</p>
                            <p> 纸张克重范围：45g/m² - 150g/m²</p>
                            <p> 最大印刷面积：787mm × 546mm</p>
                            <p>纸张克重范围：45g/m² - 150g/m²</p>
                            <p>最大印刷面积：787mm × 546mm</p>
                        </div>
                    </div>
                    <el-image style="width: 658.09px; height: 466.33px" :src="lunzhuan"></el-image>
                </div>

            </div>
            <div class="content flex justify-between items-center py-16">
                <el-image style="width: 658.09px; height: 466.33px" :src="lunzhuan1"></el-image>
                <div class="mx-8">
                    <p class="w-1/2 font-['Source_Code_Pro'] font-semibold text-[36px]  align-middle capitalize">轮转印刷
                    </p>
                    <p
                        class="font-['Source_Han_Sans_SC'] font-medium text-[32px] leading-[50px] tracking-[5%] capitalize h-[50px] flex items-center text-[#2646B3] mt-8">
                        小森商业轮转印刷机</p>
                    <div
                        class="font-['Source_Han_Sans_SC'] font-normal text-[24px]  tracking-[4%] capitalize text-[#696969] mt-8">
                        <p>印刷面积：880mm*546mm</p>
                        <p>纸张范围：铜版纸、轻涂纸、双胶纸、新闻纸</p>
                        <p>折页开本：8开、16开、0.5印张、8开单页</p>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="data.tab == 3" class="bg-white ">
@@ -225,6 +241,7 @@
import baseyinshuaji1 from '@/static/img/baseyinshuaji1.png'
import heibai from '@/static/img/heibai.png'
import lunzhuan from '@/static/img/lunzhuan.png'
import lunzhuan1 from '@/static/img/lunzhuan1.png'
import zhuangding2 from '@/static/img/zhuangding-2.png'
import Frame from '@/static/img/Frame.png'
import Frame1 from '@/static/img/Frame-1.png'

 src/views/login/index.vue

@@ -7,9 +7,9 @@
      </el-header>
      <el-main style="padding:0;" class="mainbg" >
          <div class="content flex flex-wrap justify-between pt-16">
            <div v-for="(item,index) in arrayList" @click="goWeb(item.link)" class="relative mt-6 cursor-pointer w-[30%] h-[20%]" style="margin: 0 auto;">
            <div v-for="(item,index) in arrayList" @click="goWeb(item.link)" class="relative mt-6 cursor-pointer w-[28%] h-[20%]" style="margin: 0 auto;">
              <el-image style="width: 100%; height: 100%" :src="item.url"></el-image>
              <p  class="absolute inset-0 whitespace-pre-line  font-['Source_Han_Sans_CN_VF'] font-medium text-[32px] leading-[50px] tracking-[-5%]  capitalize p-10 pl-14">{{ item.name }}</p>
              <p  class="absolute inset-0 whitespace-pre-line  font-['Source_Han_Sans_CN_VF'] font-medium text-[30px] leading-[50px] tracking-[-5%]  capitalize p-10 pl-14">{{ item.name }}</p>
            </div>
          </div>
      </el-main>

New file
			@@ -0,0 +1,351 @@

			<!DOCTYPE html>
			<html lang="en">
			<head>
			<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<title>Vue3响应式系统原理 · 宋体五号示意图</title>
			<style>
			/* 全局字体设置：宋体五号 (五号 ≈ 10.5pt ≈ 14px，为屏幕清晰稍调) */
			body {
			font-family: 'SimSun', '宋体', 'Songti SC', STSong, 'Times New Roman', serif;
			font-size: 14px; /* 五号约10.5pt，对应14px清晰 */
			line-height: 1.5;
			background: #f5f7fa;
			margin: 0;
			min-height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20px;
			box-sizing: border-box;
			}
			.diagram-container {
			max-width: 1000px;
			width: 100%;
			background: white;
			box-shadow: 0 8px 20px rgba(0,0,0,0.1);
			border-radius: 16px;
			padding: 24px 20px 30px 20px;
			border: 1px solid #e2e8f0;
			}
			/* 主标题 */
			.title {
			text-align: center;
			font-size: 20px;
			font-weight: 600;
			margin-bottom: 16px;
			color: #2c3e50;
			letter-spacing: 1px;
			border-bottom: 2px solid #42b883;
			padding-bottom: 10px;
			}
			/* 副标题/区域标识 */
			.section-label {
			font-weight: 600;
			color: #2c3e50;
			background: #edf2f7;
			display: inline-block;
			padding: 4px 14px;
			border-radius: 30px;
			font-size: 14px;
			margin-bottom: 12px;
			border-left: 4px solid #42b883;
			}
			/* 三列布局: 左侧优势 + 核心流程 + 右侧ref */
			.main-panel {
			display: flex;
			gap: 16px;
			margin-top: 10px;
			flex-wrap: wrap;
			}
			.left-panel {
			flex: 1.2;
			min-width: 220px;
			background: #f8fafc;
			border-radius: 16px;
			padding: 16px 14px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.03);
			border: 1px solid #e9eef3;
			}
			.center-panel {
			flex: 2.2;
			min-width: 380px;
			background: #f8fafc;
			border-radius: 16px;
			padding: 16px 14px;
			border: 1px solid #e9eef3;
			box-shadow: 0 2px 8px rgba(0,0,0,0.03);
			}
			.right-panel {
			flex: 1;
			min-width: 210px;
			background: #f8fafc;
			border-radius: 16px;
			padding: 16px 14px;
			border: 1px solid #e9eef3;
			box-shadow: 0 2px 8px rgba(0,0,0,0.03);
			}
			/* 引用标记小字 */
			.ref-note {
			color: #64748b;
			font-size: 12px; /* 稍小但仍保持宋体 */
			margin-top: 8px;
			border-top: 1px dashed #cbd5e1;
			padding-top: 8px;
			}
			/* 流程图卡片样式 */
			.flow-step {
			background: white;
			border-radius: 12px;
			padding: 12px 10px;
			margin-bottom: 12px;
			border-left: 5px solid #42b883;
			box-shadow: 0 2px 6px rgba(0,0,0,0.02);
			border: 1px solid #dde7f0;
			border-left-width: 5px;
			border-left-color: #42b883;
			position: relative;
			}
			.flow-step strong {
			color: #1e293b;
			font-weight: 600;
			display: block;
			margin-bottom: 5px;
			font-size: 14.5px;
			}
			.flow-step .desc {
			color: #334155;
			margin-left: 6px;
			}
			/* 箭头连线示意 (简单用字符) */
			.arrow-down {
			text-align: center;
			color: #94a3b8;
			font-size: 18px;
			margin: -4px 0 -2px 0;
			letter-spacing: -2px;
			}
			/* 小标签 */
			.proxy-badge {
			background: #e0f2fe;
			color: #0369a1;
			padding: 2px 10px;
			border-radius: 20px;
			font-size: 12px;
			display: inline-block;
			margin-right: 8px;
			}
			.ref-badge {
			background: #fef9c3;
			color: #854d0e;
			padding: 2px 10px;
			border-radius: 20px;
			font-size: 12px;
			display: inline-block;
			margin-right: 8px;
			}
			.highlight {
			background: #dcfce7;
			color: #166534;
			padding: 2px 8px;
			border-radius: 16px;
			font-weight: 500;
			}
			/* 列表样式 */
			ul {
			margin: 8px 0 0 0;
			padding-left: 20px;
			}
			li {
			margin-bottom: 5px;
			color: #2d3c50;
			}
			hr {
			border: none;
			border-top: 1px solid #d1d9e6;
			margin: 16px 0 10px 0;
			}
			/* 右侧ref特殊盒子 */
			.ref-box {
			background: white;
			border-radius: 12px;
			padding: 14px;
			border: 1px dashed #f59e0b;
			margin: 15px 0 5px;
			}
			.ref-value {
			background: #f1f5f9;
			font-family: monospace;
			padding: 4px 8px;
			border-radius: 20px;
			display: inline-block;
			margin: 6px 0;
			}
			.auto-unpack {
			background: #f1f5f9;
			border-radius: 20px;
			padding: 4px 12px;
			font-size: 12px;
			color: #334155;
			}
			/* 五号字体全局已定，保持所有字体系列 */
			p, li, div, span, .desc, .flow-step, .section-label {
			font-family: inherit;
			}
			/* 小字引用 */
			.cite {
			color: #6b7b8f;
			font-size: 12px;
			margin-top: 16px;
			text-align: right;
			border-top: 1px solid #e2e8f0;
			padding-top: 12px;
			}
			</style>
			</head>
			<body>
			<div class="diagram-container">
			<!-- 大标题 -->
			<div class="title">🟢 Vue3 响应式系统原理 · 基于Proxy全面监听</div>

			<!-- 三块内容 -->
			<div class="main-panel">
			<!-- 左侧：Proxy优势 -->
			<div class="left-panel">
			<div class="section-label">✨ 基于Proxy · 优势</div>
			<div style="background: #e6f7ff; border-radius: 12px; padding: 12px; border: 1px solid #bae7ff;">
			<span class="proxy-badge">ES6 Proxy</span><span style="font-weight: 500;"> 取代 Object.defineProperty</span>
			<ul style="margin-top: 12px;">
			<li>✅ 拦截对象<strong>各种操作</strong>：读取(get)、设置(set)、删除(deleteProperty)、枚举(ownKeys) 等</li>
			<li>✅ <strong>全面监听</strong>：属性新增、删除、数组索引/length修改都能捕获</li>
			<li>✅ 无需递归遍历所有属性，性能更优且支持动态属性</li>
			<li>✅ 可拦截 <code>in</code> 操作符、<code>for...in</code> 等元操作</li>
			</ul>
			<div style="margin-top: 10px; background: #ffffffb3; padding: 8px; border-radius: 8px; font-size: 13px;">
			<span style="color: #2c3e50;">📋 对比Vue2：</span>无法检测对象属性添加/删除，需用 <code>$set</code>；对数组需重写方法。Proxy完美解决。
			</div>
			</div>
			<!-- 文献引用[10] -->
			<div class="ref-note">📎 参考文献 [10]: Proxy可以拦截对象的各种操作，包括属性读取、设置、删除、枚举等，实现对对象变化的全面监听。</div>
			</div>

			<!-- 中间：核心流程 (依赖收集/触发更新) -->
			<div class="center-panel">
			<div class="section-label">⚙️ 核心流程 · reactive + 依赖追踪</div>

			<!-- 步骤1：reactive -->
			<div class="flow-step">
			<strong>1️⃣ reactive(data) 创建代理对象</strong>
			<div class="desc">原始对象通过 <code style="background:#e9ecf3; padding:2px 6px;">new Proxy(target, handler)</code> 变为响应式代理。</div>
			</div>
			<div class="arrow-down">▼</div>

			<!-- 步骤2：组件渲染/访问 -->
			<div class="flow-step">
			<strong>2️⃣ 组件渲染过程中访问响应式数据</strong>
			<div class="desc">例如模板中使用 <code>{{ state.count }}</code> 或 <code>computed</code> 中读取。</div>
			</div>
			<div class="arrow-down">▼</div>

			<!-- 步骤3：getter拦截 & 依赖收集 -->
			<div class="flow-step" style="border-left-color: #f59e0b;">
			<strong>3️⃣ <span class="highlight">getter 拦截</span> → 依赖收集</strong>
			<div class="desc">触发Proxy的 <code>get</code> 陷阱，将当前副作用(如组件的渲染函数)记录为该属性的依赖。</div>
			<div style="background: #fff7e6; border-radius: 20px; padding: 4px 10px; margin-top: 8px; font-size:13px;">
			🧠 依赖关系：target Map (属性 → Set(副作用))
			</div>
			</div>
			<div class="arrow-down">▼</div>

			<!-- 步骤4：数据变化 setter -->
			<div class="flow-step" style="border-left-color: #ef4444;">
			<strong>4️⃣ 响应式数据变化 🔁 <span class="highlight">setter 拦截</span></strong>
			<div class="desc">修改属性值触发 <code>set</code> 陷阱，比对变化后进入通知阶段。</div>
			</div>
			<div class="arrow-down">▼</div>

			<!-- 步骤5：通知依赖更新 -->
			<div class="flow-step" style="border-left-color: #3b82f6;">
			<strong>5️⃣ 触发更新 (通知相关依赖)</strong>
			<div class="desc">从依赖映射中找到所有与该属性相关的副作用(组件渲染函数、计算属性等)，加入调度队列。</div>
			</div>
			<div class="arrow-down">▼</div>

			<!-- 步骤6：组件重新渲染 -->
			<div class="flow-step">
			<strong>6️⃣ 组件重新渲染 · 更新DOM</strong>
			<div class="desc">执行副作用，生成新虚拟DOM，高效更新真实DOM。</div>
			</div>

			<!-- 附加说明：依赖收集与触发更新的简洁描述 -->
			<hr>
			<div style="display: flex; gap: 12px; justify-content: space-between; background: #e7f3ff; padding: 10px; border-radius: 12px;">
			<div><span style="background: #2563eb; color:white; padding:2px 10px; border-radius: 30px;">⬇️ 依赖收集</span> 在getter中建立关系</div>
			<div>➡️</div>
			<div><span style="background: #db2777; color:white; padding:2px 10px; border-radius: 30px;">⬆️ 触发更新</span> 在setter中派发任务</div>
			</div>
			</div>

			<!-- 右侧：ref概念 -->
			<div class="right-panel">
			<div class="section-label">🔁 ref 包装基本类型</div>
			<div style="background: #fffbeb; border-radius: 14px; padding: 12px; border:1px solid #fde68a;">
			<span class="ref-badge">ref()</span> 用于 <code>string \| number \| boolean</code> 等原始值
			<div class="ref-box">
			<div style="display: flex; align-items: center; gap: 6px;">
			<span>🔸 构造:</span>
			<code style="background:#e9eef3; padding:4px 8px; border-radius: 20px;">ref('hello')</code>
			</div>
			<div style="margin: 12px 0 8px 0; background:#e6f7ff; padding: 8px; border-radius: 12px;">
			⚡ 返回一个包含 <strong style="color:#b45309;">.value</strong> 属性的对象：
			<div style="background: #1e293b; color: #facc15; padding: 6px 12px; border-radius: 20px; margin-top: 6px; font-family: monospace;">
			{ value: 'hello' }
			</div>
			</div>
			<div><span class="auto-unpack">✨ 模板中自动解包</span></div>
			<div style="margin-top: 10px; background:#fff; border-radius: 20px; padding: 6px 10px;">
			✅ <code><div>{{ msg }}</div></code> 无需写 <code>msg.value</code>
			</div>
			<div style="margin-top: 10px; border-top: 1px dotted #cbd5e1; padding-top: 8px;">
			🧩 <strong>script中必须使用 .value</strong> 修改/读取
			</div>
			</div>
			<div style="font-size: 13px; margin-top: 8px; background: #d9f99d; padding: 4px 8px; border-radius: 20px;">
			📦 同样基于Proxy/reactive实现，但通过value属性嵌套保证响应式
			</div>
			</div>
			<!-- 简洁对比 -->
			<div style="margin-top: 16px;">
			<span style="background: #cbd5e1; padding:2px 10px; border-radius: 30px;">reactive vs ref</span>
			<ul style="margin-top: 10px;">
			<li><strong>reactive</strong>：用于对象/数组，直接代理</li>
			<li><strong>ref</strong>：用于基本类型，也可包裹对象(但自动用reactive转换深层)</li>
			</ul>
			</div>
			</div>
			</div>

			<!-- 底部整合描述：完全呼应题目内容 -->
			<div style="display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; background: #f1f5f9; border-radius: 20px; padding: 14px 18px;">
			<div style="flex:1; min-width: 200px;">
			<span style="font-weight: 600;">📌 Proxy全面监听</span>：get/set/deleteProperty/ownKeys · 全面代替Vue2的Object.defineProperty
			</div>
			<div style="flex:1; min-width: 220px;">
			<span style="font-weight: 600;">🎯 核心流程闭环</span>：reactive → 渲染访问 → getter收集 → setter触发 → 通知更新 → 重绘
			</div>
			<div style="flex:1; min-width: 180px;">
			<span style="font-weight: 600;">🔖 ref自动解包</span>：模板中直接使用标识符，底层访问.value
			</div>
			</div>

			<!-- 完整引用及字体声明 -->
			<!-- <div class="cite">
			<span>📖 内容依据：Vue3响应式原理 · 基于Proxy的优势、核心流程 (依赖收集/触发更新) 及 ref 包装基本类型。 </span>
			<span style="margin-left: 12px;">🔤 全图字体: 宋体 (SimSun) 五号 (14px)</span>
			</div> -->
			</div>
			<!-- 确保任何位置都强制宋体（备用） -->
			<div style="display: none;">字体检测</div>
			</body>
			</html>

			@@ -42,7 +42,7 @@
			</el-sub-menu>
			</el-menu>
			<div v-else>
			<el-button type="primary" @click="loginin" round>内部OA系统</el-button>
			<el-button type="text" @click="loginin" round>内部OA系统</el-button>
			<!-- <el-button>
			<a href="http://ycmht.51zhengcai.com:9010/#/user/login" target="_blank">员工登录</a>
			</el-button> -->

			@@ -83,7 +83,7 @@
			</div>
			<div class="content flex justify-between items-center py-16">
			<el-image style="width: 658.09px; height: 466.33px" :src="heibai"></el-image>
			<div class=" mx-16 px-16">
			<div class="mx-8">
			<p class="w-1/2 font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize">黑白印刷
			</p>
			<p
			@@ -99,7 +99,7 @@
			</div>
			<div class="lunzhuanbg py-16">
			<div class="content flex justify-between items-center ">
			<div class=" mx-16 px-16">
			<div class=" mx-8">
			<p class="w-1/2 font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize">
			轮转印刷</p>
			<p
			@@ -108,13 +108,29 @@
			<div
			class="font-['Source_Han_Sans_SC'] font-normal text-[24px] tracking-[4%] capitalize text-[#696969] mt-8">
			<p>印刷速度：约30000 张/小时</p>
			<p> 纸张克重范围：45g/m² - 150g/m²</p>
			<p> 最大印刷面积：787mm × 546mm</p>
			<p>纸张克重范围：45g/m² - 150g/m²</p>
			<p>最大印刷面积：787mm × 546mm</p>
			</div>
			</div>
			<el-image style="width: 658.09px; height: 466.33px" :src="lunzhuan"></el-image>
			</div>

			</div>
			<div class="content flex justify-between items-center py-16">
			<el-image style="width: 658.09px; height: 466.33px" :src="lunzhuan1"></el-image>
			<div class="mx-8">
			<p class="w-1/2 font-['Source_Code_Pro'] font-semibold text-[36px] align-middle capitalize">轮转印刷
			</p>
			<p
			class="font-['Source_Han_Sans_SC'] font-medium text-[32px] leading-[50px] tracking-[5%] capitalize h-[50px] flex items-center text-[#2646B3] mt-8">
			小森商业轮转印刷机</p>
			<div
			class="font-['Source_Han_Sans_SC'] font-normal text-[24px] tracking-[4%] capitalize text-[#696969] mt-8">
			<p>印刷面积：880mm*546mm</p>
			<p>纸张范围：铜版纸、轻涂纸、双胶纸、新闻纸</p>
			<p>折页开本：8开、16开、0.5印张、8开单页</p>
			</div>
			</div>
			</div>
			</div>
			<div v-if="data.tab == 3" class="bg-white ">
			@@ -225,6 +241,7 @@
			import baseyinshuaji1 from '@/static/img/baseyinshuaji1.png'
			import heibai from '@/static/img/heibai.png'
			import lunzhuan from '@/static/img/lunzhuan.png'
			import lunzhuan1 from '@/static/img/lunzhuan1.png'
			import zhuangding2 from '@/static/img/zhuangding-2.png'
			import Frame from '@/static/img/Frame.png'
			import Frame1 from '@/static/img/Frame-1.png'

			@@ -7,9 +7,9 @@
			</el-header>
			<el-main style="padding:0;" class="mainbg" >
			<div class="content flex flex-wrap justify-between pt-16">
			<div v-for="(item,index) in arrayList" @click="goWeb(item.link)" class="relative mt-6 cursor-pointer w-[30%] h-[20%]" style="margin: 0 auto;">
			<div v-for="(item,index) in arrayList" @click="goWeb(item.link)" class="relative mt-6 cursor-pointer w-[28%] h-[20%]" style="margin: 0 auto;">
			<el-image style="width: 100%; height: 100%" :src="item.url"></el-image>
			<p class="absolute inset-0 whitespace-pre-line font-['Source_Han_Sans_CN_VF'] font-medium text-[32px] leading-[50px] tracking-[-5%] capitalize p-10 pl-14">{{ item.name }}</p>
			<p class="absolute inset-0 whitespace-pre-line font-['Source_Han_Sans_CN_VF'] font-medium text-[30px] leading-[50px] tracking-[-5%] capitalize p-10 pl-14">{{ item.name }}</p>
			</div>
			</div>
			</el-main>