{"id":41581,"date":"2025-06-03T23:27:21","date_gmt":"2025-06-03T15:27:21","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/41581.html"},"modified":"2025-06-03T23:27:21","modified_gmt":"2025-06-03T15:27:21","slug":"%e5%8f%af%e8%a7%86%e5%8c%96%e4%b8%8e%e5%8a%a8%e7%94%bb%ef%bc%9a%e6%9e%84%e5%bb%ba%e6%b2%89%e6%b5%b8%e5%bc%8fvue%e5%ba%94%e7%94%a8%e7%9a%84%e8%bf%9b%e9%98%b6%e5%ae%9e%e8%b7%b5","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/41581.html","title":{"rendered":"\u53ef\u89c6\u5316\u4e0e\u52a8\u753b\uff1a\u6784\u5efa\u6c89\u6d78\u5f0fVue\u5e94\u7528\u7684\u8fdb\u9636\u5b9e\u8df5"},"content":{"rendered":"

\u5728\u73b0\u4ee3Web\u5e94\u7528\u4e2d，\u9ad8\u6027\u80fd\u53ef\u89c6\u5316\u548c\u6d41\u7545\u52a8\u753b\u5df2\u6210\u4e3a\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u7684\u6838\u5fc3\u8981\u7d20\u3002\u672c\u8282\u5c06\u6df1\u5165\u63a2\u7d22Vue\u751f\u6001\u4e2d\u7684\u53ef\u89c6\u5316\u4e0e\u52a8\u753b\u6280\u672f，\u5206\u4eab\u4e13\u4e1a\u7ea7\u89e3\u51b3\u65b9\u6848\u4e0e\u6700\u4f73\u5b9e\u8df5\u3002<\/p>\n

\u4e00\u3001 Canvas\u9ad8\u6027\u80fd\u6e32\u67d3\u4f53\u7cfb<\/h2>\n

01\u3001Konva.js\u6d41\u7a0b\u56fe\u5f15\u64ce\u6df1\u5ea6\u4f18\u5316<\/h3>\n

<template>
\n <div class="flow-editor">
\n <v-stage :config="stageConfig" @wheel="handleZoom">
\n <v-layer ref="canvasLayer">
\n <!– \u8282\u70b9\u6e32\u67d3 –>
\n <v-rect
\n v-for="node in nodes"
\n :key="node.id"
\n :config="node.config"
\n @dragmove="handleNodeMove"
\n @click="selectNode(node)"
\n \/><\/p>\n

<!– \u8fde\u63a5\u7ebf –>
\n <v-line
\n v-for="conn in connections"
\n :key="conn.id"
\n :config="calcLineConfig(conn)"
\n stroke="#3498db"
\n strokeWidth={2}
\n \/>
\n <\/v-layer><\/p>\n

<!– \u52a8\u6001\u5de5\u5177\u5c42 –>
\n <v-layer ref="toolLayer">
\n <selection-box v-if="selection" :config="selection" \/>
\n <\/v-layer>
\n <\/v-stage><\/p>\n

<!– \u8282\u70b9\u5c5e\u6027\u9762\u677f –>
\n <node-property-panel :node="selectedNode" \/>
\n <\/div>
\n<\/template><\/p>\n

<script>
\nimport { reactive, ref } from 'vue';
\nimport { Stage, Layer, Rect, Line } from 'vue-konva';<\/p>\n

export default {
\n components: { VStage: Stage, VLayer: Layer, VRect: Rect, VLine: Line },
\n setup() {
\n const nodes = reactive([
\n {
\n id: 'node1',
\n config: { x: 100, y: 50, width: 120, height: 60, fill: '#9b59b6' },
\n type: 'input'
\n },
\n \/\/ …\u66f4\u591a\u8282\u70b9
\n ]);<\/p>\n

\/\/ \u4f7f\u7528\u5171\u4eab\u6570\u636e\u6c60\u4f18\u5316\u6027\u80fd
\n const connections = computed(() => {
\n const conns = [];
\n nodes.forEach(source => {
\n source.outputs?.forEach(targetId => {
\n const target = nodes.find(n => n.id === targetId);
\n conns.push({
\n id: `${source.id}-${targetId}`,
\n points: calcConnectionPoints(source, target)
\n });
\n });
\n });
\n return conns;
\n });<\/p>\n

\/\/ \u89c6\u53e3\u53d8\u6362\u4f18\u5316
\n const stageConfig = reactive({ width: 1200, height: 800, scale: 1 });
\n const lastPos = ref({ x: 0, y: 0 });<\/p>\n

const handleZoom = (e) => {
\n e.evt.preventDefault();
\n const scaleBy = 1.1;
\n const stage = e.target.getStage();
\n const oldScale = stage.scaleX();
\n const pointer = stage.getPointerPosition();<\/p>\n

const newScale = e.evt.deltaY > 0 ?
\n oldScale * scaleBy :
\n oldScale \/ scaleBy;<\/p>\n

stage.scale({ x: newScale, y: newScale });<\/p>\n

\/\/ \u8ba1\u7b97\u504f\u79fb\u4fdd\u6301\u4e2d\u5fc3\u70b9\u7a33\u5b9a
\n const mousePointTo = {
\n x: (pointer.x – stage.x()) \/ oldScale,
\n y: (pointer.y – stage.y()) \/ oldScale
\n };<\/p>\n

stage.position({
\n x: pointer.x – mousePointTo.x * newScale,
\n y: pointer.y – mousePointTo.y * newScale
\n });
\n };<\/p>\n

return { nodes, connections, stageConfig, handleZoom };
\n }
\n};
\n<\/script><\/p>\n

\u6027\u80fd\u4f18\u5316\u6280\u5de7：<\/p>\n

  • \u5206\u5c42\u6e32\u67d3：\u9759\u6001\u5143\u7d20\u4e0e\u52a8\u6001\u5143\u7d20\u5206\u79bb\u56fe\u5c42<\/li>\n
  • \u6279\u91cf\u66f4\u65b0：\u4f7f\u7528Konva.FastLayer\u6279\u91cf\u7ed8\u5236\u64cd\u4f5c<\/li>\n
  • \u865a\u62df\u5316\u6e32\u67d3：\u4ec5\u6e32\u67d3\u89c6\u53e3\u5185\u53ef\u89c1\u5143\u7d20<\/li>\n
  • \u7f13\u5b58\u7b56\u7565：\u5bf9\u590d\u6742\u8282\u70b9\u8c03\u7528node.cache()<\/li>\n
  • GPU\u52a0\u901f：\u542f\u7528{ willReadFrequently: false }\u9009\u9879<\/li>\n

    \u4e0b\u9762\u662f\u5b8c\u6574\u7684\u5b9e\u73b0\u65b9\u6848：<\/p>\n

    <!<\/span>DOCTYPE<\/span> html<\/span>><\/span><\/span>
    \n<<\/span>html<\/span> lang<\/span>=<\/span>"<\/span>zh-CN"<\/span><\/span>><\/span><\/span>
    \n<<\/span>head<\/span>><\/span><\/span>
    \n <<\/span>meta<\/span> charset<\/span>=<\/span>"<\/span>UTF-8"<\/span><\/span>><\/span><\/span>
    \n <<\/span>meta<\/span> name<\/span>=<\/span>"<\/span>viewport"<\/span><\/span> content<\/span>=<\/span>"<\/span>width=device-width, initial-scale=1.0"<\/span><\/span>><\/span><\/span>
    \n <<\/span>title<\/span>><\/span><\/span>Konva.js\u6d41\u7a0b\u56fe\u5f15\u64ce\u6df1\u5ea6\u4f18\u5316<\/<\/span>title<\/span>><\/span><\/span>
    \n <<\/span>script<\/span> src<\/span>=<\/span>"<\/span>https:\/\/unpkg.com\/vue@3\/dist\/vue.global.js"<\/span><\/span>><\/span><\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>
    \n <<\/span>script<\/span> src<\/span>=<\/span>"<\/span>https:\/\/unpkg.com\/konva@8\/konva.min.js"<\/span><\/span>><\/span><\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>
    \n <<\/span>style<\/span>><\/span><\/span>
    \n *<\/span> {<\/span>
    \n margin<\/span>:<\/span> 0;<\/span>
    \n padding<\/span>:<\/span> 0;<\/span>
    \n box-sizing<\/span>:<\/span> border-box;<\/span>
    \n font-family<\/span>:<\/span> 'Segoe UI'<\/span>,<\/span> 'Microsoft YaHei'<\/span>,<\/span> sans-serif;<\/span>
    \n }<\/span><\/p>\n

    body<\/span> {<\/span>
    \n background<\/span>:<\/span> linear-gradient<\/span>(<\/span>135deg,<\/span> #1a2a6c,<\/span> #2c3e50)<\/span>;<\/span>
    \n color<\/span>:<\/span> #ecf0f1;<\/span>
    \n min-height<\/span>:<\/span> 100vh;<\/span>
    \n overflow<\/span>:<\/span> hidden;<\/span>
    \n padding<\/span>:<\/span> 20px;<\/span>
    \n }<\/span><\/p>\n

    .container<\/span> {<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n flex-direction<\/span>:<\/span> column;<\/span>
    \n max-width<\/span>:<\/span> 1800px;<\/span>
    \n margin<\/span>:<\/span> 0 auto;<\/span>
    \n height<\/span>:<\/span> calc<\/span>(<\/span>100vh – 40px)<\/span>;<\/span>
    \n background<\/span>:<\/span> rgba<\/span>(<\/span>30,<\/span> 30,<\/span> 46,<\/span> 0.9)<\/span>;<\/span>
    \n border-radius<\/span>:<\/span> 16px;<\/span>
    \n box-shadow<\/span>:<\/span> 0 12px 40px rgba<\/span>(<\/span>0,<\/span> 0,<\/span> 0,<\/span> 0.6)<\/span>;<\/span>
    \n overflow<\/span>:<\/span> hidden;<\/span>
    \n }<\/span><\/p>\n

    header<\/span> {<\/span>
    \n padding<\/span>:<\/span> 18px 30px;<\/span>
    \n background<\/span>:<\/span> rgba<\/span>(<\/span>25,<\/span> 25,<\/span> 40,<\/span> 0.95)<\/span>;<\/span>
    \n border-bottom<\/span>:<\/span> 1px solid #44475a;<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n justify-content<\/span>:<\/span> space-between;<\/span>
    \n align-items<\/span>:<\/span> center;<\/span>
    \n z-index<\/span>:<\/span> 10;<\/span>
    \n }<\/span><\/p>\n

    .logo<\/span> {<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n align-items<\/span>:<\/span> center;<\/span>
    \n gap<\/span>:<\/span> 15px;<\/span>
    \n }<\/span><\/p>\n

    .logo-icon<\/span> {<\/span>
    \n width<\/span>:<\/span> 40px;<\/span>
    \n height<\/span>:<\/span> 40px;<\/span>
    \n background<\/span>:<\/span> linear-gradient<\/span>(<\/span>135deg,<\/span> #3498db,<\/span> #9b59b6)<\/span>;<\/span>
    \n border-radius<\/span>:<\/span> 10px;<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n align-items<\/span>:<\/span> center;<\/span>
    \n justify-content<\/span>:<\/span> center;<\/span>
    \n font-size<\/span>:<\/span> 20px;<\/span>
    \n font-weight<\/span>:<\/span> bold;<\/span>
    \n }<\/span><\/p>\n

    h1<\/span> {<\/span>
    \n font-size<\/span>:<\/span> 1.8rem;<\/span>
    \n background<\/span>:<\/span> linear-gradient<\/span>(<\/span>90deg,<\/span> #3498db,<\/span> #9b59b6)<\/span>;<\/span>
    \n -webkit-background-clip<\/span>:<\/span> text;<\/span>
    \n -webkit-text-fill-color<\/span>:<\/span> transparent;<\/span>
    \n font-weight<\/span>:<\/span> 700;<\/span>
    \n }<\/span><\/p>\n

    .subtitle<\/span> {<\/span>
    \n color<\/span>:<\/span> #a9b1bc;<\/span>
    \n font-size<\/span>:<\/span> 1rem;<\/span>
    \n margin-top<\/span>:<\/span> 4px;<\/span>
    \n }<\/span><\/p>\n

    .controls<\/span> {<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n gap<\/span>:<\/span> 15px;<\/span>
    \n }<\/span><\/p>\n

    button<\/span> {<\/span>
    \n padding<\/span>:<\/span> 10px 20px;<\/span>
    \n border-radius<\/span>:<\/span> 8px;<\/span>
    \n border<\/span>:<\/span> none;<\/span>
    \n background<\/span>:<\/span> rgba<\/span>(<\/span>65,<\/span> 105,<\/span> 225,<\/span> 0.7)<\/span>;<\/span>
    \n color<\/span>:<\/span> white;<\/span>
    \n font-weight<\/span>:<\/span> 600;<\/span>
    \n cursor<\/span>:<\/span> pointer;<\/span>
    \n transition<\/span>:<\/span> all 0.3s ease;<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n align-items<\/span>:<\/span> center;<\/span>
    \n gap<\/span>:<\/span> 8px;<\/span>
    \n }<\/span><\/p>\n

    button:hover<\/span> {<\/span>
    \n background<\/span>:<\/span> rgba<\/span>(<\/span>65,<\/span> 105,<\/span> 225,<\/span> 0.9)<\/span>;<\/span>
    \n transform<\/span>:<\/span> translateY<\/span>(<\/span>-2px)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    button.secondary<\/span> {<\/span>
    \n background<\/span>:<\/span> rgba<\/span>(<\/span>52,<\/span> 152,<\/span> 219,<\/span> 0.3)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    .main-content<\/span> {<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n flex<\/span>:<\/span> 1;<\/span>
    \n overflow<\/span>:<\/span> hidden;<\/span>
    \n }<\/span><\/p>\n

    .tool-panel<\/span> {<\/span>
    \n width<\/span>:<\/span> 280px;<\/span>
    \n background<\/span>:<\/span> rgba<\/span>(<\/span>25,<\/span> 25,<\/span> 40,<\/span> 0.9)<\/span>;<\/span>
    \n padding<\/span>:<\/span> 20px;<\/span>
    \n border-right<\/span>:<\/span> 1px solid #44475a;<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n flex-direction<\/span>:<\/span> column;<\/span>
    \n gap<\/span>:<\/span> 25px;<\/span>
    \n }<\/span><\/p>\n

    .panel-section<\/span> {<\/span>
    \n background<\/span>:<\/span> rgba<\/span>(<\/span>40,<\/span> 42,<\/span> 54,<\/span> 0.7)<\/span>;<\/span>
    \n border-radius<\/span>:<\/span> 12px;<\/span>
    \n padding<\/span>:<\/span> 18px;<\/span>
    \n box-shadow<\/span>:<\/span> 0 4px 10px rgba<\/span>(<\/span>0,<\/span> 0,<\/span> 0,<\/span> 0.2)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    .panel-title<\/span> {<\/span>
    \n font-size<\/span>:<\/span> 1.1rem;<\/span>
    \n margin-bottom<\/span>:<\/span> 15px;<\/span>
    \n color<\/span>:<\/span> #8be9fd;<\/span>
    \n font-weight<\/span>:<\/span> 600;<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n align-items<\/span>:<\/span> center;<\/span>
    \n gap<\/span>:<\/span> 8px;<\/span>
    \n }<\/span><\/p>\n

    .node-types<\/span> {<\/span>
    \n display<\/span>:<\/span> grid;<\/span>
    \n grid-template-columns<\/span>:<\/span> repeat<\/span>(<\/span>2,<\/span> 1fr)<\/span>;<\/span>
    \n gap<\/span>:<\/span> 15px;<\/span>
    \n }<\/span><\/p>\n

    .node-type<\/span> {<\/span>
    \n height<\/span>:<\/span> 100px;<\/span>
    \n background<\/span>:<\/span> rgba<\/span>(<\/span>50,<\/span> 50,<\/span> 70,<\/span> 0.8)<\/span>;<\/span>
    \n border-radius<\/span>:<\/span> 10px;<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n flex-direction<\/span>:<\/span> column;<\/span>
    \n align-items<\/span>:<\/span> center;<\/span>
    \n justify-content<\/span>:<\/span> center;<\/span>
    \n cursor<\/span>:<\/span> pointer;<\/span>
    \n transition<\/span>:<\/span> all 0.3s ease;<\/span>
    \n border<\/span>:<\/span> 2px solid transparent;<\/span>
    \n }<\/span><\/p>\n

    .node-type:hover<\/span> {<\/span>
    \n background<\/span>:<\/span> rgba<\/span>(<\/span>65,<\/span> 105,<\/span> 225,<\/span> 0.3)<\/span>;<\/span>
    \n border-color<\/span>:<\/span> #4169e1;<\/span>
    \n transform<\/span>:<\/span> translateY<\/span>(<\/span>-3px)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    .node-icon<\/span> {<\/span>
    \n width<\/span>:<\/span> 40px;<\/span>
    \n height<\/span>:<\/span> 40px;<\/span>
    \n border-radius<\/span>:<\/span> 8px;<\/span>
    \n margin-bottom<\/span>:<\/span> 10px;<\/span>
    \n }<\/span><\/p>\n

    .node-icon.input<\/span> {<\/span>
    \n background<\/span>:<\/span> linear-gradient<\/span>(<\/span>135deg,<\/span> #3498db,<\/span> #2980b9)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    .node-icon.process<\/span> {<\/span>
    \n background<\/span>:<\/span> linear-gradient<\/span>(<\/span>135deg,<\/span> #2ecc71,<\/span> #27ae60)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    .node-icon.output<\/span> {<\/span>
    \n background<\/span>:<\/span> linear-gradient<\/span>(<\/span>135deg,<\/span> #e74c3c,<\/span> #c0392b)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    .node-icon.decision<\/span> {<\/span>
    \n background<\/span>:<\/span> linear-gradient<\/span>(<\/span>135deg,<\/span> #f39c12,<\/span> #d35400)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    .canvas-container<\/span> {<\/span>
    \n flex<\/span>:<\/span> 1;<\/span>
    \n position<\/span>:<\/span> relative;<\/span>
    \n overflow<\/span>:<\/span> hidden;<\/span>
    \n background<\/span>:<\/span>
    \n linear-gradient<\/span>(<\/span>rgba<\/span>(<\/span>30,<\/span> 30,<\/span> 46,<\/span> 0.9)<\/span>,<\/span> rgba<\/span>(<\/span>30,<\/span> 30,<\/span> 46,<\/span> 0.9)<\/span>)<\/span>,<\/span>
    \n repeating-linear-gradient<\/span>(<\/span>0deg,<\/span> transparent,<\/span> transparent 19px,<\/span> rgba<\/span>(<\/span>55,<\/span> 55,<\/span> 85,<\/span> 0.5)<\/span> 20px)<\/span>,<\/span>
    \n repeating-linear-gradient<\/span>(<\/span>90deg,<\/span> transparent,<\/span> transparent 19px,<\/span> rgba<\/span>(<\/span>55,<\/span> 55,<\/span> 85,<\/span> 0.5)<\/span> 20px)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    #flow-container<\/span> {<\/span>
    \n width<\/span>:<\/span> 100%;<\/span>
    \n height<\/span>:<\/span> 100%;<\/span>
    \n }<\/span><\/p>\n

    .property-panel<\/span> {<\/span>
    \n width<\/span>:<\/span> 320px;<\/span>
    \n background<\/span>:<\/span> rgba<\/span>(<\/span>25,<\/span> 25,<\/span> 40,<\/span> 0.9)<\/span>;<\/span>
    \n padding<\/span>:<\/span> 20px;<\/span>
    \n border-left<\/span>:<\/span> 1px solid #44475a;<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n flex-direction<\/span>:<\/span> column;<\/span>
    \n gap<\/span>:<\/span> 20px;<\/span>
    \n }<\/span><\/p>\n

    .property-form<\/span> {<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n flex-direction<\/span>:<\/span> column;<\/span>
    \n gap<\/span>:<\/span> 15px;<\/span>
    \n }<\/span><\/p>\n

    .form-group<\/span> {<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n flex-direction<\/span>:<\/span> column;<\/span>
    \n gap<\/span>:<\/span> 8px;<\/span>
    \n }<\/span><\/p>\n

    label<\/span> {<\/span>
    \n font-size<\/span>:<\/span> 0.9rem;<\/span>
    \n color<\/span>:<\/span> #a9b1bc;<\/span>
    \n }<\/span><\/p>\n

    input, textarea, select<\/span> {<\/span>
    \n padding<\/span>:<\/span> 10px 12px;<\/span>
    \n border-radius<\/span>:<\/span> 8px;<\/span>
    \n border<\/span>:<\/span> 1px solid #44475a;<\/span>
    \n background<\/span>:<\/span> rgba<\/span>(<\/span>40,<\/span> 42,<\/span> 54,<\/span> 0.7)<\/span>;<\/span>
    \n color<\/span>:<\/span> #f8f8f2;<\/span>
    \n font-size<\/span>:<\/span> 0.95rem;<\/span>
    \n }<\/span><\/p>\n

    textarea<\/span> {<\/span>
    \n min-height<\/span>:<\/span> 100px;<\/span>
    \n resize<\/span>:<\/span> vertical;<\/span>
    \n }<\/span><\/p>\n

    .performance-stats<\/span> {<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n justify-content<\/span>:<\/span> space-between;<\/span>
    \n background<\/span>:<\/span> rgba<\/span>(<\/span>40,<\/span> 42,<\/span> 54,<\/span> 0.7)<\/span>;<\/span>
    \n border-radius<\/span>:<\/span> 8px;<\/span>
    \n padding<\/span>:<\/span> 12px 15px;<\/span>
    \n font-size<\/span>:<\/span> 0.85rem;<\/span>
    \n }<\/span><\/p>\n

    .stat-item<\/span> {<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n flex-direction<\/span>:<\/span> column;<\/span>
    \n align-items<\/span>:<\/span> center;<\/span>
    \n }<\/span><\/p>\n

    .stat-value<\/span> {<\/span>
    \n font-weight<\/span>:<\/span> 700;<\/span>
    \n font-size<\/span>:<\/span> 1.1rem;<\/span>
    \n color<\/span>:<\/span> #50fa7b;<\/span>
    \n }<\/span><\/p>\n

    .stat-label<\/span> {<\/span>
    \n color<\/span>:<\/span> #a9b1bc;<\/span>
    \n font-size<\/span>:<\/span> 0.75rem;<\/span>
    \n }<\/span><\/p>\n

    .optimization-tips<\/span> {<\/span>
    \n margin-top<\/span>:<\/span> 15px;<\/span>
    \n padding<\/span>:<\/span> 15px;<\/span>
    \n background<\/span>:<\/span> rgba<\/span>(<\/span>40,<\/span> 42,<\/span> 54,<\/span> 0.7)<\/span>;<\/span>
    \n border-radius<\/span>:<\/span> 8px;<\/span>
    \n font-size<\/span>:<\/span> 0.9rem;<\/span>
    \n }<\/span><\/p>\n

    .tip-title<\/span> {<\/span>
    \n color<\/span>:<\/span> #ffb86c;<\/span>
    \n margin-bottom<\/span>:<\/span> 10px;<\/span>
    \n font-weight<\/span>:<\/span> 600;<\/span>
    \n }<\/span><\/p>\n

    .tip-list<\/span> {<\/span>
    \n padding-left<\/span>:<\/span> 20px;<\/span>
    \n }<\/span><\/p>\n

    .tip-list li<\/span> {<\/span>
    \n margin-bottom<\/span>:<\/span> 8px;<\/span>
    \n line-height<\/span>:<\/span> 1.4;<\/span>
    \n }<\/span><\/p>\n

    footer<\/span> {<\/span>
    \n padding<\/span>:<\/span> 15px 30px;<\/span>
    \n background<\/span>:<\/span> rgba<\/span>(<\/span>25,<\/span> 25,<\/span> 40,<\/span> 0.95)<\/span>;<\/span>
    \n border-top<\/span>:<\/span> 1px solid #44475a;<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n justify-content<\/span>:<\/span> space-between;<\/span>
    \n align-items<\/span>:<\/span> center;<\/span>
    \n font-size<\/span>:<\/span> 0.9rem;<\/span>
    \n color<\/span>:<\/span> #a9b1bc;<\/span>
    \n }<\/span><\/p>\n

    .view-controls<\/span> {<\/span>
    \n display<\/span>:<\/span> flex;<\/span>
    \n gap<\/span>:<\/span> 10px;<\/span>
    \n }<\/span><\/p>\n

    .view-btn<\/span> {<\/span>
    \n padding<\/span>:<\/span> 8px 15px;<\/span>
    \n background<\/span>:<\/span> rgba<\/span>(<\/span>65,<\/span> 105,<\/span> 225,<\/span> 0.2)<\/span>;<\/span>
    \n border-radius<\/span>:<\/span> 6px;<\/span>
    \n cursor<\/span>:<\/span> pointer;<\/span>
    \n }<\/span><\/p>\n

    .view-btn.active<\/span> {<\/span>
    \n background<\/span>:<\/span> rgba<\/span>(<\/span>65,<\/span> 105,<\/span> 225,<\/span> 0.7)<\/span>;<\/span>
    \n }<\/span>
    \n <\/span><\/span><\/<\/span>style<\/span>><\/span><\/span>
    \n<\/<\/span>head<\/span>><\/span><\/span>
    \n<<\/span>body<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> id<\/span>=<\/span>"<\/span>app"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>container"<\/span><\/span>><\/span><\/span>
    \n <<\/span>header<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>logo"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>logo-icon"<\/span><\/span>><\/span><\/span>K<\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>h1<\/span>><\/span><\/span>Konva.js\u6d41\u7a0b\u56fe\u5f15\u64ce\u6df1\u5ea6\u4f18\u5316<\/<\/span>h1<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>subtitle"<\/span><\/span>><\/span><\/span>\u9ad8\u6027\u80fdCanvas\u6e32\u67d3\u4f53\u7cfb – \u8282\u70b9\u6570\u91cf: {{ nodes.length }} | \u8fde\u63a5\u7ebf: {{ connections.length }}<\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>controls"<\/span><\/span>><\/span><\/span>
    \n <<\/span>button<\/span> @click<\/span>=<\/span>"<\/span>addNode('input')"<\/span><\/span>><\/span><\/span>
    \n <<\/span>i<\/span>><\/span><\/span>+<\/<\/span>i<\/span>><\/span><\/span> \u6dfb\u52a0\u8f93\u5165\u8282\u70b9
    \n <\/<\/span>button<\/span>><\/span><\/span>
    \n <<\/span>button<\/span> @click<\/span>=<\/span>"<\/span>addNode('process')"<\/span><\/span> class<\/span>=<\/span>"<\/span>secondary"<\/span><\/span>><\/span><\/span>
    \n <<\/span>i<\/span>><\/span><\/span>+<\/<\/span>i<\/span>><\/span><\/span> \u6dfb\u52a0\u5904\u7406\u8282\u70b9
    \n <\/<\/span>button<\/span>><\/span><\/span>
    \n <<\/span>button<\/span> @click<\/span>=<\/span>"<\/span>resetCanvas"<\/span><\/span>><\/span><\/span>
    \n <<\/span>i<\/span>><\/span><\/span>\u21ba<\/<\/span>i<\/span>><\/span><\/span> \u91cd\u7f6e\u753b\u5e03
    \n <\/<\/span>button<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>header<\/span>><\/span><\/span><\/p>\n

    <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>main-content"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>tool-panel"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>panel-section"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>panel-title"<\/span><\/span>><\/span><\/span>
    \n <<\/span>i<\/span>><\/span><\/span>📋<\/<\/span>i<\/span>><\/span><\/span> \u8282\u70b9\u5e93
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>node-types"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>node-type"<\/span><\/span> @click<\/span>=<\/span>"<\/span>addNode('input')"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>node-icon input"<\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span>><\/span><\/span>\u8f93\u5165\u8282\u70b9<\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>node-type"<\/span><\/span> @click<\/span>=<\/span>"<\/span>addNode('process')"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>node-icon process"<\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span>><\/span><\/span>\u5904\u7406\u8282\u70b9<\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>node-type"<\/span><\/span> @click<\/span>=<\/span>"<\/span>addNode('output')"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>node-icon output"<\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span>><\/span><\/span>\u8f93\u51fa\u8282\u70b9<\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>node-type"<\/span><\/span> @click<\/span>=<\/span>"<\/span>addNode('decision')"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>node-icon decision"<\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span>><\/span><\/span>\u51b3\u7b56\u8282\u70b9<\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span><\/p>\n

    <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>panel-section"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>panel-title"<\/span><\/span>><\/span><\/span>
    \n <<\/span>i<\/span>><\/span><\/span>\u2699\ufe0f<\/<\/span>i<\/span>><\/span><\/span> \u753b\u5e03\u63a7\u5236
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>form-group"<\/span><\/span>><\/span><\/span>
    \n <<\/span>label<\/span>><\/span><\/span>\u7f29\u653e\u7ea7\u522b: {{ (stageConfig.scale * 100).toFixed(0) }}%<\/<\/span>label<\/span>><\/span><\/span>
    \n <<\/span>input<\/span> type<\/span>=<\/span>"<\/span>range"<\/span><\/span> min<\/span>=<\/span>"<\/span>10"<\/span><\/span> max<\/span>=<\/span>"<\/span>300"<\/span><\/span> v-model<\/span>=<\/span>"<\/span>stageConfig.scale"<\/span><\/span> step<\/span>=<\/span>"<\/span>5"<\/span><\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>form-group"<\/span><\/span>><\/span><\/span>
    \n <<\/span>label<\/span>><\/span><\/span>\u80cc\u666f\u7f51\u683c: {{ showGrid ? '\u5f00\u542f' : '\u5173\u95ed' }}<\/<\/span>label<\/span>><\/span><\/span>
    \n <<\/span>input<\/span> type<\/span>=<\/span>"<\/span>checkbox"<\/span><\/span> v-model<\/span>=<\/span>"<\/span>showGrid"<\/span><\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span><\/p>\n

    <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>optimization-tips"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>tip-title"<\/span><\/span>><\/span><\/span>🚀 \u6027\u80fd\u4f18\u5316\u6280\u5de7<\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>ul<\/span> class<\/span>=<\/span>"<\/span>tip-list"<\/span><\/span>><\/span><\/span>
    \n <<\/span>li<\/span>><\/span><\/span><<\/span>strong<\/span>><\/span><\/span>\u5206\u5c42\u6e32\u67d3<\/<\/span>strong<\/span>><\/span><\/span>: \u9759\u6001\u5143\u7d20\u4e0e\u52a8\u6001\u5143\u7d20\u5206\u79bb\u56fe\u5c42<\/<\/span>li<\/span>><\/span><\/span>
    \n <<\/span>li<\/span>><\/span><\/span><<\/span>strong<\/span>><\/span><\/span>\u6279\u91cf\u66f4\u65b0<\/<\/span>strong<\/span>><\/span><\/span>: \u4f7f\u7528Konva.FastLayer\u6279\u91cf\u7ed8\u5236\u64cd\u4f5c<\/<\/span>li<\/span>><\/span><\/span>
    \n <<\/span>li<\/span>><\/span><\/span><<\/span>strong<\/span>><\/span><\/span>\u865a\u62df\u5316\u6e32\u67d3<\/<\/span>strong<\/span>><\/span><\/span>: \u4ec5\u6e32\u67d3\u89c6\u53e3\u5185\u53ef\u89c1\u5143\u7d20<\/<\/span>li<\/span>><\/span><\/span>
    \n <<\/span>li<\/span>><\/span><\/span><<\/span>strong<\/span>><\/span><\/span>\u7f13\u5b58\u7b56\u7565<\/<\/span>strong<\/span>><\/span><\/span>: \u5bf9\u590d\u6742\u8282\u70b9\u8c03\u7528node.cache()<\/<\/span>li<\/span>><\/span><\/span>
    \n <<\/span>li<\/span>><\/span><\/span><<\/span>strong<\/span>><\/span><\/span>GPU\u52a0\u901f<\/<\/span>strong<\/span>><\/span><\/span>: \u542f\u7528willReadFrequently: false\u9009\u9879<\/<\/span>li<\/span>><\/span><\/span>
    \n <\/<\/span>ul<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span><\/p>\n

    <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>canvas-container"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> id<\/span>=<\/span>"<\/span>flow-container"<\/span><\/span>><\/span><\/span><\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span><\/p>\n

    <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>property-panel"<\/span><\/span> v-if<\/span>=<\/span>"<\/span>selectedNode"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>panel-title"<\/span><\/span>><\/span><\/span>
    \n <<\/span>i<\/span>><\/span><\/span>📝<\/<\/span>i<\/span>><\/span><\/span> \u8282\u70b9\u5c5e\u6027
    \n <\/<\/span>div<\/span>><\/span><\/span><\/p>\n

    <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>property-form"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>form-group"<\/span><\/span>><\/span><\/span>
    \n <<\/span>label<\/span>><\/span><\/span>\u8282\u70b9ID<\/<\/span>label<\/span>><\/span><\/span>
    \n <<\/span>input<\/span> type<\/span>=<\/span>"<\/span>text"<\/span><\/span> v-model<\/span>=<\/span>"<\/span>selectedNode.id"<\/span><\/span> disabled<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span><\/p>\n

    <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>form-group"<\/span><\/span>><\/span><\/span>
    \n <<\/span>label<\/span>><\/span><\/span>\u8282\u70b9\u7c7b\u578b<\/<\/span>label<\/span>><\/span><\/span>
    \n <<\/span>select<\/span> v-model<\/span>=<\/span>"<\/span>selectedNode.type"<\/span><\/span>><\/span><\/span>
    \n <<\/span>option<\/span> value<\/span>=<\/span>"<\/span>input"<\/span><\/span>><\/span><\/span>\u8f93\u5165\u8282\u70b9<\/<\/span>option<\/span>><\/span><\/span>
    \n <<\/span>option<\/span> value<\/span>=<\/span>"<\/span>process"<\/span><\/span>><\/span><\/span>\u5904\u7406\u8282\u70b9<\/<\/span>option<\/span>><\/span><\/span>
    \n <<\/span>option<\/span> value<\/span>=<\/span>"<\/span>output"<\/span><\/span>><\/span><\/span>\u8f93\u51fa\u8282\u70b9<\/<\/span>option<\/span>><\/span><\/span>
    \n <<\/span>option<\/span> value<\/span>=<\/span>"<\/span>decision"<\/span><\/span>><\/span><\/span>\u51b3\u7b56\u8282\u70b9<\/<\/span>option<\/span>><\/span><\/span>
    \n <\/<\/span>select<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span><\/p>\n

    <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>form-group"<\/span><\/span>><\/span><\/span>
    \n <<\/span>label<\/span>><\/span><\/span>\u8282\u70b9\u6807\u9898<\/<\/span>label<\/span>><\/span><\/span>
    \n <<\/span>input<\/span> type<\/span>=<\/span>"<\/span>text"<\/span><\/span> v-model<\/span>=<\/span>"<\/span>selectedNode.config.name"<\/span><\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span><\/p>\n

    <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>form-group"<\/span><\/span>><\/span><\/span>
    \n <<\/span>label<\/span>><\/span><\/span>\u8282\u70b9\u63cf\u8ff0<\/<\/span>label<\/span>><\/span><\/span>
    \n <<\/span>textarea<\/span> v-model<\/span>=<\/span>"<\/span>selectedNode.config.description"<\/span><\/span>><\/span><\/span><\/<\/span>textarea<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span><\/p>\n

    <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>form-group"<\/span><\/span>><\/span><\/span>
    \n <<\/span>label<\/span>><\/span><\/span>\u4f4d\u7f6e (X: {{ selectedNode.config.x }}, Y: {{ selectedNode.config.y }})<\/<\/span>label<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> style<\/span>=<\/span>"<\/span>display<\/span>:<\/span> flex;<\/span> gap<\/span>:<\/span> 10px;<\/span><\/span>"<\/span><\/span><\/span>><\/span><\/span>
    \n <<\/span>input<\/span> type<\/span>=<\/span>"<\/span>number"<\/span><\/span> v-model.number<\/span>=<\/span>"<\/span>selectedNode.config.x"<\/span><\/span> style<\/span>=<\/span>"<\/span>flex<\/span>:<\/span> 1;<\/span><\/span>"<\/span><\/span><\/span>><\/span><\/span>
    \n <<\/span>input<\/span> type<\/span>=<\/span>"<\/span>number"<\/span><\/span> v-model.number<\/span>=<\/span>"<\/span>selectedNode.config.y"<\/span><\/span> style<\/span>=<\/span>"<\/span>flex<\/span>:<\/span> 1;<\/span><\/span>"<\/span><\/span><\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span><\/p>\n

    <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>performance-stats"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>stat-item"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>stat-value"<\/span><\/span>><\/span><\/span>{{ frameRate }} FPS<\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>stat-label"<\/span><\/span>><\/span><\/span>\u5e27\u7387<\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>stat-item"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>stat-value"<\/span><\/span>><\/span><\/span>{{ renderTime }}ms<\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>stat-label"<\/span><\/span>><\/span><\/span>\u6e32\u67d3\u65f6\u95f4<\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>stat-item"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>stat-value"<\/span><\/span>><\/span><\/span>{{ visibleNodes }}\/{{ nodes.length }}<\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>stat-label"<\/span><\/span>><\/span><\/span>\u53ef\u89c1\u8282\u70b9<\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span><\/p>\n

    <<\/span>button<\/span> @click<\/span>=<\/span>"<\/span>removeNode(selectedNode)"<\/span><\/span> style<\/span>=<\/span>"<\/span>margin-top<\/span>:<\/span> 20px;<\/span> background<\/span>:<\/span> rgba<\/span>(<\/span>231,<\/span> 76,<\/span> 60,<\/span> 0.7)<\/span>;<\/span><\/span>"<\/span><\/span><\/span>><\/span><\/span>
    \n <<\/span>i<\/span>><\/span><\/span>🗑\ufe0f<\/<\/span>i<\/span>><\/span><\/span> \u5220\u9664\u8282\u70b9
    \n <\/<\/span>button<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span><\/p>\n

    <<\/span>footer<\/span>><\/span><\/span>
    \n <<\/span>div<\/span>><\/span><\/span>Konva.js v8.4.2 | Vue 3.3 | \u9ad8\u6027\u80fd\u6d41\u7a0b\u56fe\u5f15\u64ce<\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>view-controls"<\/span><\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>view-btn"<\/span><\/span> :class<\/span>=<\/span>"<\/span>{active: viewMode === 'default'}"<\/span><\/span> @click<\/span>=<\/span>"<\/span>viewMode = 'default'"<\/span><\/span>><\/span><\/span>
    \n \u9ed8\u8ba4\u89c6\u56fe
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>view-btn"<\/span><\/span> :class<\/span>=<\/span>"<\/span>{active: viewMode === 'minimal'}"<\/span><\/span> @click<\/span>=<\/span>"<\/span>viewMode = 'minimal'"<\/span><\/span>><\/span><\/span>
    \n \u6027\u80fd\u6a21\u5f0f
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <<\/span>div<\/span> class<\/span>=<\/span>"<\/span>view-btn"<\/span><\/span> :class<\/span>=<\/span>"<\/span>{active: viewMode === 'debug'}"<\/span><\/span> @click<\/span>=<\/span>"<\/span>viewMode = 'debug'"<\/span><\/span>><\/span><\/span>
    \n \u8c03\u8bd5\u89c6\u56fe
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>footer<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span>
    \n <\/<\/span>div<\/span>><\/span><\/span><\/p>\n

    <<\/span>script<\/span>><\/span><\/span>
    \n const<\/span> {<\/span> createApp,<\/span> ref,<\/span> reactive,<\/span> computed,<\/span> onMounted }<\/span> =<\/span> Vue;<\/span><\/p>\n

    createApp<\/span>(<\/span>{<\/span>
    \n setup<\/span>(<\/span>)<\/span> {<\/span>
    \n \/\/ \u8282\u70b9\u6570\u636e<\/span>
    \n const<\/span> nodes =<\/span> reactive<\/span>(<\/span>[<\/span>
    \n {<\/span>
    \n id<\/span>:<\/span> 'node1'<\/span>,<\/span>
    \n type<\/span>:<\/span> 'input'<\/span>,<\/span>
    \n config<\/span>:<\/span> {<\/span>
    \n x<\/span>:<\/span> 200<\/span>,<\/span>
    \n y<\/span>:<\/span> 150<\/span>,<\/span>
    \n width<\/span>:<\/span> 160<\/span>,<\/span>
    \n height<\/span>:<\/span> 80<\/span>,<\/span>
    \n fill<\/span>:<\/span> '#3498db'<\/span>,<\/span>
    \n name<\/span>:<\/span> '\u6570\u636e\u8f93\u5165'<\/span>,<\/span>
    \n description<\/span>:<\/span> '\u539f\u59cb\u6570\u636e\u8f93\u5165\u8282\u70b9'<\/span>,<\/span>
    \n cornerRadius<\/span>:<\/span> 8<\/span>,<\/span>
    \n draggable<\/span>:<\/span> true<\/span>
    \n }<\/span>
    \n }<\/span>,<\/span>
    \n {<\/span>
    \n id<\/span>:<\/span> 'node2'<\/span>,<\/span>
    \n type<\/span>:<\/span> 'process'<\/span>,<\/span>
    \n config<\/span>:<\/span> {<\/span>
    \n x<\/span>:<\/span> 450<\/span>,<\/span>
    \n y<\/span>:<\/span> 150<\/span>,<\/span>
    \n width<\/span>:<\/span> 160<\/span>,<\/span>
    \n height<\/span>:<\/span> 80<\/span>,<\/span>
    \n fill<\/span>:<\/span> '#2ecc71'<\/span>,<\/span>
    \n name<\/span>:<\/span> '\u6570\u636e\u5904\u7406'<\/span>,<\/span>
    \n description<\/span>:<\/span> '\u6570\u636e\u6e05\u6d17\u4e0e\u8f6c\u6362'<\/span>,<\/span>
    \n cornerRadius<\/span>:<\/span> 8<\/span>,<\/span>
    \n draggable<\/span>:<\/span> true<\/span>
    \n }<\/span>
    \n }<\/span>,<\/span>
    \n {<\/span>
    \n id<\/span>:<\/span> 'node3'<\/span>,<\/span>
    \n type<\/span>:<\/span> 'decision'<\/span>,<\/span>
    \n config<\/span>:<\/span> {<\/span>
    \n x<\/span>:<\/span> 700<\/span>,<\/span>
    \n y<\/span>:<\/span> 150<\/span>,<\/span>
    \n width<\/span>:<\/span> 160<\/span>,<\/span>
    \n height<\/span>:<\/span> 80<\/span>,<\/span>
    \n fill<\/span>:<\/span> '#f39c12'<\/span>,<\/span>
    \n name<\/span>:<\/span> '\u51b3\u7b56\u70b9'<\/span>,<\/span>
    \n description<\/span>:<\/span> '\u6839\u636e\u6761\u4ef6\u8fdb\u884c\u5206\u652f\u51b3\u7b56'<\/span>,<\/span>
    \n cornerRadius<\/span>:<\/span> 8<\/span>,<\/span>
    \n draggable<\/span>:<\/span> true<\/span>
    \n }<\/span>
    \n }<\/span>,<\/span>
    \n {<\/span>
    \n id<\/span>:<\/span> 'node4'<\/span>,<\/span>
    \n type<\/span>:<\/span> 'output'<\/span>,<\/span>
    \n config<\/span>:<\/span> {<\/span>
    \n x<\/span>:<\/span> 950<\/span>,<\/span>
    \n y<\/span>:<\/span> 150<\/span>,<\/span>
    \n width<\/span>:<\/span> 160<\/span>,<\/span>
    \n height<\/span>:<\/span> 80<\/span>,<\/span>
    \n fill<\/span>:<\/span> '#e74c3c'<\/span>,<\/span>
    \n name<\/span>:<\/span> '\u7ed3\u679c\u8f93\u51fa'<\/span>,<\/span>
    \n description<\/span>:<\/span> '\u8f93\u51fa\u5904\u7406\u540e\u7684\u7ed3\u679c'<\/span>,<\/span>
    \n cornerRadius<\/span>:<\/span> 8<\/span>,<\/span>
    \n draggable<\/span>:<\/span> true<\/span>
    \n }<\/span>
    \n }<\/span>
    \n ]<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u8fde\u63a5\u7ebf\u6570\u636e<\/span>
    \n const<\/span> connections =<\/span> reactive<\/span>(<\/span>[<\/span>
    \n {<\/span> id<\/span>:<\/span> 'conn1'<\/span>,<\/span> from<\/span>:<\/span> 'node1'<\/span>,<\/span> to<\/span>:<\/span> 'node2'<\/span> }<\/span>,<\/span>
    \n {<\/span> id<\/span>:<\/span> 'conn2'<\/span>,<\/span> from<\/span>:<\/span> 'node2'<\/span>,<\/span> to<\/span>:<\/span> 'node3'<\/span> }<\/span>,<\/span>
    \n {<\/span> id<\/span>:<\/span> 'conn3'<\/span>,<\/span> from<\/span>:<\/span> 'node3'<\/span>,<\/span> to<\/span>:<\/span> 'node4'<\/span> }<\/span>
    \n ]<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u821e\u53f0\u914d\u7f6e<\/span>
    \n const<\/span> stageConfig =<\/span> reactive<\/span>(<\/span>{<\/span>
    \n width<\/span>:<\/span> window.<\/span>innerWidth,<\/span>
    \n height<\/span>:<\/span> window.<\/span>innerHeight –<\/span> 180<\/span>,<\/span>
    \n scale<\/span>:<\/span> 1<\/span>,<\/span>
    \n draggable<\/span>:<\/span> true<\/span>
    \n }<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u9009\u4e2d\u7684\u8282\u70b9<\/span>
    \n const<\/span> selectedNode =<\/span> ref<\/span>(<\/span>null<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u89c6\u56fe\u6a21\u5f0f<\/span>
    \n const<\/span> viewMode =<\/span> ref<\/span>(<\/span>'default'<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u662f\u5426\u663e\u793a\u7f51\u683c<\/span>
    \n const<\/span> showGrid =<\/span> ref<\/span>(<\/span>true<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u6027\u80fd\u6307\u6807<\/span>
    \n const<\/span> frameRate =<\/span> ref<\/span>(<\/span>60<\/span>)<\/span>;<\/span>
    \n const<\/span> renderTime =<\/span> ref<\/span>(<\/span>0<\/span>)<\/span>;<\/span>
    \n const<\/span> visibleNodes =<\/span> ref<\/span>(<\/span>0<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u6dfb\u52a0\u65b0\u8282\u70b9<\/span>
    \n function<\/span> addNode<\/span>(<\/span>type<\/span>)<\/span> {<\/span>
    \n const<\/span> colors =<\/span> {<\/span>
    \n input<\/span>:<\/span> '#3498db'<\/span>,<\/span>
    \n process<\/span>:<\/span> '#2ecc71'<\/span>,<\/span>
    \n output<\/span>:<\/span> '#e74c3c'<\/span>,<\/span>
    \n decision<\/span>:<\/span> '#f39c12'<\/span>
    \n }<\/span>;<\/span><\/p>\n

    const<\/span> names =<\/span> {<\/span>
    \n input<\/span>:<\/span> '\u8f93\u5165\u8282\u70b9'<\/span>,<\/span>
    \n process<\/span>:<\/span> '\u5904\u7406\u8282\u70b9'<\/span>,<\/span>
    \n output<\/span>:<\/span> '\u8f93\u51fa\u8282\u70b9'<\/span>,<\/span>
    \n decision<\/span>:<\/span> '\u51b3\u7b56\u8282\u70b9'<\/span>
    \n }<\/span>;<\/span><\/p>\n

    const<\/span> newNode =<\/span> {<\/span>
    \n id<\/span>:<\/span> 'node'<\/span> +<\/span> (<\/span>nodes.<\/span>length +<\/span> 1<\/span>)<\/span>,<\/span>
    \n type<\/span>:<\/span> type,<\/span>
    \n config<\/span>:<\/span> {<\/span>
    \n x<\/span>:<\/span> Math.<\/span>random<\/span>(<\/span>)<\/span> *<\/span> (<\/span>stageConfig.<\/span>width –<\/span> 200<\/span>)<\/span> +<\/span> 100<\/span>,<\/span>
    \n y<\/span>:<\/span> Math.<\/span>random<\/span>(<\/span>)<\/span> *<\/span> (<\/span>stageConfig.<\/span>height –<\/span> 100<\/span>)<\/span> +<\/span> 50<\/span>,<\/span>
    \n width<\/span>:<\/span> 160<\/span>,<\/span>
    \n height<\/span>:<\/span> 80<\/span>,<\/span>
    \n fill<\/span>:<\/span> colors[<\/span>type]<\/span>,<\/span>
    \n name<\/span>:<\/span> names[<\/span>type]<\/span>,<\/span>
    \n description<\/span>:<\/span> '\u65b0\u6dfb\u52a0\u7684\u8282\u70b9'<\/span>,<\/span>
    \n cornerRadius<\/span>:<\/span> 8<\/span>,<\/span>
    \n draggable<\/span>:<\/span> true<\/span>
    \n }<\/span>
    \n }<\/span>;<\/span><\/p>\n

    nodes.<\/span>push<\/span>(<\/span>newNode)<\/span>;<\/span>
    \n selectedNode.<\/span>value =<\/span> newNode;<\/span><\/p>\n

    \/\/ \u968f\u673a\u6dfb\u52a0\u8fde\u63a5\u7ebf<\/span>
    \n if<\/span> (<\/span>nodes.<\/span>length ><\/span> 1<\/span> &&<\/span> Math.<\/span>random<\/span>(<\/span>)<\/span> ><\/span> 0.5<\/span>)<\/span> {<\/span>
    \n const<\/span> fromNode =<\/span> nodes[<\/span>Math.<\/span>floor<\/span>(<\/span>Math.<\/span>random<\/span>(<\/span>)<\/span> *<\/span> (<\/span>nodes.<\/span>length –<\/span> 1<\/span>)<\/span>)<\/span>]<\/span>;<\/span>
    \n connections.<\/span>push<\/span>(<\/span>{<\/span>
    \n id<\/span>:<\/span> `<\/span>conn<\/span>${<\/span>connections.<\/span>length +<\/span> 1<\/span>}<\/span><\/span>`<\/span><\/span>,<\/span>
    \n from<\/span>:<\/span> fromNode.<\/span>id,<\/span>
    \n to<\/span>:<\/span> newNode.<\/span>id
    \n }<\/span>)<\/span>;<\/span>
    \n }<\/span>
    \n }<\/span><\/p>\n

    \/\/ \u79fb\u9664\u8282\u70b9<\/span>
    \n function<\/span> removeNode<\/span>(<\/span>node<\/span>)<\/span> {<\/span>
    \n const<\/span> index =<\/span> nodes.<\/span>findIndex<\/span>(<\/span>n<\/span> =><\/span> n.<\/span>id ===<\/span> node.<\/span>id)<\/span>;<\/span>
    \n if<\/span> (<\/span>index !==<\/span> –<\/span>1<\/span>)<\/span> {<\/span>
    \n nodes.<\/span>splice<\/span>(<\/span>index,<\/span> 1<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u79fb\u9664\u76f8\u5173\u8fde\u63a5\u7ebf<\/span>
    \n for<\/span> (<\/span>let<\/span> i =<\/span> connections.<\/span>length –<\/span> 1<\/span>;<\/span> i >=<\/span> 0<\/span>;<\/span> i—<\/span>)<\/span> {<\/span>
    \n if<\/span> (<\/span>connections[<\/span>i]<\/span>.<\/span>from ===<\/span> node.<\/span>id ||<\/span> connections[<\/span>i]<\/span>.<\/span>to ===<\/span> node.<\/span>id)<\/span> {<\/span>
    \n connections.<\/span>splice<\/span>(<\/span>i,<\/span> 1<\/span>)<\/span>;<\/span>
    \n }<\/span>
    \n }<\/span><\/p>\n

    if<\/span> (<\/span>selectedNode.<\/span>value &&<\/span> selectedNode.<\/span>value.<\/span>id ===<\/span> node.<\/span>id)<\/span> {<\/span>
    \n selectedNode.<\/span>value =<\/span> null<\/span>;<\/span>
    \n }<\/span>
    \n }<\/span>
    \n }<\/span><\/p>\n

    \/\/ \u91cd\u7f6e\u753b\u5e03<\/span>
    \n function<\/span> resetCanvas<\/span>(<\/span>)<\/span> {<\/span>
    \n nodes.<\/span>splice<\/span>(<\/span>0<\/span>,<\/span> nodes.<\/span>length)<\/span>;<\/span>
    \n connections.<\/span>splice<\/span>(<\/span>0<\/span>,<\/span> connections.<\/span>length)<\/span>;<\/span>
    \n selectedNode.<\/span>value =<\/span> null<\/span>;<\/span><\/p>\n

    \/\/ \u6dfb\u52a0\u521d\u59cb\u8282\u70b9<\/span>
    \n addNode<\/span>(<\/span>'input'<\/span>)<\/span>;<\/span>
    \n addNode<\/span>(<\/span>'process'<\/span>)<\/span>;<\/span>
    \n addNode<\/span>(<\/span>'output'<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u6dfb\u52a0\u8fde\u63a5\u7ebf<\/span>
    \n if<\/span> (<\/span>nodes.<\/span>length >=<\/span> 3<\/span>)<\/span> {<\/span>
    \n connections.<\/span>push<\/span>(<\/span>
    \n {<\/span> id<\/span>:<\/span> 'conn1'<\/span>,<\/span> from<\/span>:<\/span> nodes[<\/span>0<\/span>]<\/span>.<\/span>id,<\/span> to<\/span>:<\/span> nodes[<\/span>1<\/span>]<\/span>.<\/span>id }<\/span>,<\/span>
    \n {<\/span> id<\/span>:<\/span> 'conn2'<\/span>,<\/span> from<\/span>:<\/span> nodes[<\/span>1<\/span>]<\/span>.<\/span>id,<\/span> to<\/span>:<\/span> nodes[<\/span>2<\/span>]<\/span>.<\/span>id }<\/span>
    \n )<\/span>;<\/span>
    \n }<\/span>
    \n }<\/span><\/p>\n

    \/\/ \u8ba1\u7b97\u8fde\u63a5\u7ebf\u914d\u7f6e<\/span>
    \n function<\/span> calcLineConfig<\/span>(<\/span>conn<\/span>)<\/span> {<\/span>
    \n const<\/span> fromNode =<\/span> nodes.<\/span>find<\/span>(<\/span>n<\/span> =><\/span> n.<\/span>id ===<\/span> conn.<\/span>from)<\/span>;<\/span>
    \n const<\/span> toNode =<\/span> nodes.<\/span>find<\/span>(<\/span>n<\/span> =><\/span> n.<\/span>id ===<\/span> conn.<\/span>to)<\/span>;<\/span><\/p>\n

    if<\/span> (<\/span>!<\/span>fromNode ||<\/span> !<\/span>toNode)<\/span> return<\/span> null<\/span>;<\/span><\/p>\n

    const<\/span> fromX =<\/span> fromNode.<\/span>config.<\/span>x +<\/span> fromNode.<\/span>config.<\/span>width;<\/span>
    \n const<\/span> fromY =<\/span> fromNode.<\/span>config.<\/span>y +<\/span> fromNode.<\/span>config.<\/span>height \/<\/span> 2<\/span>;<\/span>
    \n const<\/span> toX =<\/span> toNode.<\/span>config.<\/span>x;<\/span>
    \n const<\/span> toY =<\/span> toNode.<\/span>config.<\/span>y +<\/span> toNode.<\/span>config.<\/span>height \/<\/span> 2<\/span>;<\/span><\/p>\n

    \/\/ \u8ba1\u7b97\u4e2d\u95f4\u63a7\u5236\u70b9（\u8d1d\u585e\u5c14\u66f2\u7ebf）<\/span>
    \n const<\/span> midX =<\/span> (<\/span>fromX +<\/span> toX)<\/span> \/<\/span> 2<\/span>;<\/span><\/p>\n

    return<\/span> {<\/span>
    \n points<\/span>:<\/span> [<\/span>fromX,<\/span> fromY,<\/span> midX,<\/span> fromY,<\/span> midX,<\/span> toY,<\/span> toX,<\/span> toY]<\/span>,<\/span>
    \n stroke<\/span>:<\/span> '#3498db'<\/span>,<\/span>
    \n strokeWidth<\/span>:<\/span> 3<\/span>,<\/span>
    \n lineCap<\/span>:<\/span> 'round'<\/span>,<\/span>
    \n lineJoin<\/span>:<\/span> 'round'<\/span>,<\/span>
    \n bezier<\/span>:<\/span> true<\/span>,<\/span>
    \n dash<\/span>:<\/span> [<\/span>10<\/span>,<\/span> 5<\/span>]<\/span>,<\/span>
    \n opacity<\/span>:<\/span> 0.8<\/span>
    \n }<\/span>;<\/span>
    \n }<\/span><\/p>\n

    \/\/ \u5904\u7406\u8282\u70b9\u79fb\u52a8<\/span>
    \n function<\/span> handleNodeMove<\/span>(<\/span>e<\/span>)<\/span> {<\/span>
    \n const<\/span> nodeId =<\/span> e.<\/span>target.<\/span>id<\/span>(<\/span>)<\/span>;<\/span>
    \n const<\/span> node =<\/span> nodes.<\/span>find<\/span>(<\/span>n<\/span> =><\/span> n.<\/span>id ===<\/span> nodeId)<\/span>;<\/span>
    \n if<\/span> (<\/span>node)<\/span> {<\/span>
    \n node.<\/span>config.<\/span>x =<\/span> e.<\/span>target.<\/span>x<\/span>(<\/span>)<\/span>;<\/span>
    \n node.<\/span>config.<\/span>y =<\/span> e.<\/span>target.<\/span>y<\/span>(<\/span>)<\/span>;<\/span>
    \n }<\/span>
    \n }<\/span><\/p>\n

    \/\/ \u9009\u62e9\u8282\u70b9<\/span>
    \n function<\/span> selectNode<\/span>(<\/span>node<\/span>)<\/span> {<\/span>
    \n selectedNode.<\/span>value =<\/span> node;<\/span>
    \n }<\/span><\/p>\n

    \/\/ \u5904\u7406\u7f29\u653e<\/span>
    \n function<\/span> handleZoom<\/span>(<\/span>e<\/span>)<\/span> {<\/span>
    \n e.<\/span>evt.<\/span>preventDefault<\/span>(<\/span>)<\/span>;<\/span>
    \n const<\/span> scaleBy =<\/span> 1.1<\/span>;<\/span>
    \n const<\/span> stage =<\/span> e.<\/span>target.<\/span>getStage<\/span>(<\/span>)<\/span>;<\/span>
    \n const<\/span> oldScale =<\/span> stage.<\/span>scaleX<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

    const<\/span> pointer =<\/span> stage.<\/span>getPointerPosition<\/span>(<\/span>)<\/span>;<\/span>
    \n if<\/span> (<\/span>!<\/span>pointer)<\/span> return<\/span>;<\/span><\/p>\n

    const<\/span> newScale =<\/span> e.<\/span>evt.<\/span>deltaY ><\/span> 0<\/span> ?<\/span>
    \n oldScale *<\/span> scaleBy :<\/span>
    \n oldScale \/<\/span> scaleBy;<\/span><\/p>\n

    \/\/ \u9650\u5236\u7f29\u653e\u8303\u56f4<\/span>
    \n const<\/span> clampedScale =<\/span> Math.<\/span>max<\/span>(<\/span>0.1<\/span>,<\/span> Math.<\/span>min<\/span>(<\/span>3<\/span>,<\/span> newScale)<\/span>)<\/span>;<\/span>
    \n stage.<\/span>scale<\/span>(<\/span>{<\/span> x<\/span>:<\/span> clampedScale,<\/span> y<\/span>:<\/span> clampedScale }<\/span>)<\/span>;<\/span>
    \n stageConfig.<\/span>scale =<\/span> clampedScale;<\/span><\/p>\n

    \/\/ \u8ba1\u7b97\u504f\u79fb\u4fdd\u6301\u4e2d\u5fc3\u70b9\u7a33\u5b9a<\/span>
    \n const<\/span> mousePointTo =<\/span> {<\/span>
    \n x<\/span>:<\/span> (<\/span>pointer.<\/span>x –<\/span> stage.<\/span>x<\/span>(<\/span>)<\/span>)<\/span> \/<\/span> oldScale,<\/span>
    \n y<\/span>:<\/span> (<\/span>pointer.<\/span>y –<\/span> stage.<\/span>y<\/span>(<\/span>)<\/span>)<\/span> \/<\/span> oldScale
    \n }<\/span>;<\/span><\/p>\n

    stage.<\/span>position<\/span>(<\/span>{<\/span>
    \n x<\/span>:<\/span> pointer.<\/span>x –<\/span> mousePointTo.<\/span>x *<\/span> clampedScale,<\/span>
    \n y<\/span>:<\/span> pointer.<\/span>y –<\/span> mousePointTo.<\/span>y *<\/span> clampedScale
    \n }<\/span>)<\/span>;<\/span><\/p>\n

    stage.<\/span>batchDraw<\/span>(<\/span>)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    \/\/ \u521d\u59cb\u5316Konva<\/span>
    \n onMounted<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
    \n const<\/span> stage =<\/span> new<\/span> Konva.<\/span>Stage<\/span>(<\/span>{<\/span>
    \n container<\/span>:<\/span> 'flow-container'<\/span>,<\/span>
    \n width<\/span>:<\/span> stageConfig.<\/span>width,<\/span>
    \n height<\/span>:<\/span> stageConfig.<\/span>height,<\/span>
    \n draggable<\/span>:<\/span> true<\/span>,<\/span>
    \n willReadFrequently<\/span>:<\/span> false<\/span> \/\/ \u542f\u7528GPU\u52a0\u901f<\/span>
    \n }<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u521b\u5efa\u56fe\u5c42<\/span>
    \n const<\/span> backgroundLayer =<\/span> new<\/span> Konva.<\/span>Layer<\/span>(<\/span>)<\/span>;<\/span>
    \n const<\/span> gridLayer =<\/span> new<\/span> Konva.<\/span>Layer<\/span>(<\/span>)<\/span>;<\/span>
    \n const<\/span> connectionLayer =<\/span> new<\/span> Konva.<\/span>FastLayer<\/span>(<\/span>)<\/span>;<\/span> \/\/ \u4f7f\u7528FastLayer\u4f18\u5316<\/span>
    \n const<\/span> nodeLayer =<\/span> new<\/span> Konva.<\/span>FastLayer<\/span>(<\/span>)<\/span>;<\/span> \/\/ \u4f7f\u7528FastLayer\u4f18\u5316<\/span>
    \n const<\/span> toolLayer =<\/span> new<\/span> Konva.<\/span>Layer<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

    stage.<\/span>add<\/span>(<\/span>backgroundLayer)<\/span>;<\/span>
    \n stage.<\/span>add<\/span>(<\/span>gridLayer)<\/span>;<\/span>
    \n stage.<\/span>add<\/span>(<\/span>connectionLayer)<\/span>;<\/span>
    \n stage.<\/span>add<\/span>(<\/span>nodeLayer)<\/span>;<\/span>
    \n stage.<\/span>add<\/span>(<\/span>toolLayer)<\/span>;<\/span><\/p>\n

    \/\/ \u7ed8\u5236\u80cc\u666f<\/span>
    \n const<\/span> background =<\/span> new<\/span> Konva.<\/span>Rect<\/span>(<\/span>{<\/span>
    \n width<\/span>:<\/span> stageConfig.<\/span>width,<\/span>
    \n height<\/span>:<\/span> stageConfig.<\/span>height,<\/span>
    \n fill<\/span>:<\/span> 'rgba(30, 30, 46, 1)'<\/span>
    \n }<\/span>)<\/span>;<\/span>
    \n backgroundLayer.<\/span>add<\/span>(<\/span>background)<\/span>;<\/span>
    \n backgroundLayer.<\/span>draw<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u7ed8\u5236\u7f51\u683c<\/span>
    \n function<\/span> drawGrid<\/span>(<\/span>)<\/span> {<\/span>
    \n gridLayer.<\/span>destroyChildren<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

    if<\/span> (<\/span>!<\/span>showGrid.<\/span>value)<\/span> {<\/span>
    \n gridLayer.<\/span>draw<\/span>(<\/span>)<\/span>;<\/span>
    \n return<\/span>;<\/span>
    \n }<\/span><\/p>\n

    const<\/span> gridSize =<\/span> 20<\/span>;<\/span>
    \n const<\/span> gridColor =<\/span> 'rgba(65, 105, 225, 0.15)'<\/span>;<\/span><\/p>\n

    \/\/ \u6c34\u5e73\u7ebf<\/span>
    \n for<\/span> (<\/span>let<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> stage.<\/span>height<\/span>(<\/span>)<\/span> \/<\/span> gridSize;<\/span> i++<\/span>)<\/span> {<\/span>
    \n const<\/span> line =<\/span> new<\/span> Konva.<\/span>Line<\/span>(<\/span>{<\/span>
    \n points<\/span>:<\/span> [<\/span>0<\/span>,<\/span> i *<\/span> gridSize,<\/span> stage.<\/span>width<\/span>(<\/span>)<\/span>,<\/span> i *<\/span> gridSize]<\/span>,<\/span>
    \n stroke<\/span>:<\/span> gridColor,<\/span>
    \n strokeWidth<\/span>:<\/span> 1<\/span>,<\/span>
    \n listening<\/span>:<\/span> false<\/span>
    \n }<\/span>)<\/span>;<\/span>
    \n gridLayer.<\/span>add<\/span>(<\/span>line)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    \/\/ \u5782\u76f4\u7ebf<\/span>
    \n for<\/span> (<\/span>let<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> stage.<\/span>width<\/span>(<\/span>)<\/span> \/<\/span> gridSize;<\/span> i++<\/span>)<\/span> {<\/span>
    \n const<\/span> line =<\/span> new<\/span> Konva.<\/span>Line<\/span>(<\/span>{<\/span>
    \n points<\/span>:<\/span> [<\/span>i *<\/span> gridSize,<\/span> 0<\/span>,<\/span> i *<\/span> gridSize,<\/span> stage.<\/span>height<\/span>(<\/span>)<\/span>]<\/span>,<\/span>
    \n stroke<\/span>:<\/span> gridColor,<\/span>
    \n strokeWidth<\/span>:<\/span> 1<\/span>,<\/span>
    \n listening<\/span>:<\/span> false<\/span>
    \n }<\/span>)<\/span>;<\/span>
    \n gridLayer.<\/span>add<\/span>(<\/span>line)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    gridLayer.<\/span>draw<\/span>(<\/span>)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    \/\/ \u521d\u59cb\u7ed8\u5236\u7f51\u683c<\/span>
    \n drawGrid<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u6e32\u67d3\u8282\u70b9<\/span>
    \n function<\/span> renderNodes<\/span>(<\/span>)<\/span> {<\/span>
    \n nodeLayer.<\/span>destroyChildren<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

    nodes.<\/span>forEach<\/span>(<\/span>node<\/span> =><\/span> {<\/span>
    \n const<\/span> rect =<\/span> new<\/span> Konva.<\/span>Rect<\/span>(<\/span>{<\/span>
    \n id<\/span>:<\/span> node.<\/span>id,<\/span>
    \n …<\/span>node.<\/span>config,<\/span>
    \n shadowColor<\/span>:<\/span> 'rgba(0,0,0,0.3)'<\/span>,<\/span>
    \n shadowBlur<\/span>:<\/span> 8<\/span>,<\/span>
    \n shadowOffset<\/span>:<\/span> {<\/span> x<\/span>:<\/span> 3<\/span>,<\/span> y<\/span>:<\/span> 3<\/span> }<\/span>,<\/span>
    \n shadowOpacity<\/span>:<\/span> 0.5<\/span>
    \n }<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u6dfb\u52a0\u6587\u672c<\/span>
    \n const<\/span> text =<\/span> new<\/span> Konva.<\/span>Text<\/span>(<\/span>{<\/span>
    \n x<\/span>:<\/span> node.<\/span>config.<\/span>x +<\/span> 10<\/span>,<\/span>
    \n y<\/span>:<\/span> node.<\/span>config.<\/span>y +<\/span> 15<\/span>,<\/span>
    \n text<\/span>:<\/span> node.<\/span>config.<\/span>name,<\/span>
    \n fontSize<\/span>:<\/span> 18<\/span>,<\/span>
    \n fill<\/span>:<\/span> 'white'<\/span>,<\/span>
    \n width<\/span>:<\/span> node.<\/span>config.<\/span>width –<\/span> 20<\/span>,<\/span>
    \n fontFamily<\/span>:<\/span> 'Arial, sans-serif'<\/span>,<\/span>
    \n fontStyle<\/span>:<\/span> 'bold'<\/span>
    \n }<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u6dfb\u52a0\u63cf\u8ff0\u6587\u672c<\/span>
    \n const<\/span> desc =<\/span> new<\/span> Konva.<\/span>Text<\/span>(<\/span>{<\/span>
    \n x<\/span>:<\/span> node.<\/span>config.<\/span>x +<\/span> 10<\/span>,<\/span>
    \n y<\/span>:<\/span> node.<\/span>config.<\/span>y +<\/span> 45<\/span>,<\/span>
    \n text<\/span>:<\/span> node.<\/span>config.<\/span>description,<\/span>
    \n fontSize<\/span>:<\/span> 14<\/span>,<\/span>
    \n fill<\/span>:<\/span> 'rgba(255, 255, 255, 0.7)'<\/span>,<\/span>
    \n width<\/span>:<\/span> node.<\/span>config.<\/span>width –<\/span> 20<\/span>
    \n }<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u7f13\u5b58\u8282\u70b9\u4ee5\u63d0\u9ad8\u6027\u80fd<\/span>
    \n rect.<\/span>cache<\/span>(<\/span>)<\/span>;<\/span>
    \n text.<\/span>cache<\/span>(<\/span>)<\/span>;<\/span>
    \n desc.<\/span>cache<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

    nodeLayer.<\/span>add<\/span>(<\/span>rect)<\/span>;<\/span>
    \n nodeLayer.<\/span>add<\/span>(<\/span>text)<\/span>;<\/span>
    \n nodeLayer.<\/span>add<\/span>(<\/span>desc)<\/span>;<\/span><\/p>\n

    \/\/ \u6dfb\u52a0\u4e8b\u4ef6\u76d1\u542c<\/span>
    \n rect.<\/span>on<\/span>(<\/span>'click'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> selectNode<\/span>(<\/span>node)<\/span>)<\/span>;<\/span>
    \n rect.<\/span>on<\/span>(<\/span>'dragmove'<\/span>,<\/span> handleNodeMove)<\/span>;<\/span>
    \n }<\/span>)<\/span>;<\/span><\/p>\n

    nodeLayer.<\/span>draw<\/span>(<\/span>)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    \/\/ \u6e32\u67d3\u8fde\u63a5\u7ebf<\/span>
    \n function<\/span> renderConnections<\/span>(<\/span>)<\/span> {<\/span>
    \n connectionLayer.<\/span>destroyChildren<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

    connections.<\/span>forEach<\/span>(<\/span>conn<\/span> =><\/span> {<\/span>
    \n const<\/span> config =<\/span> calcLineConfig<\/span>(<\/span>conn)<\/span>;<\/span>
    \n if<\/span> (<\/span>!<\/span>config)<\/span> return<\/span>;<\/span><\/p>\n

    const<\/span> line =<\/span> new<\/span> Konva.<\/span>Line<\/span>(<\/span>{<\/span>
    \n id<\/span>:<\/span> conn.<\/span>id,<\/span>
    \n …<\/span>config,<\/span>
    \n strokeWidth<\/span>:<\/span> 3<\/span>,<\/span>
    \n lineCap<\/span>:<\/span> 'round'<\/span>,<\/span>
    \n lineJoin<\/span>:<\/span> 'round'<\/span>,<\/span>
    \n hitStrokeWidth<\/span>:<\/span> 15<\/span> \/\/ \u589e\u52a0\u547d\u4e2d\u533a\u57df<\/span>
    \n }<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u6dfb\u52a0\u7bad\u5934<\/span>
    \n const<\/span> arrow =<\/span> new<\/span> Konva.<\/span>Arrow<\/span>(<\/span>{<\/span>
    \n points<\/span>:<\/span> [<\/span>config.<\/span>points[<\/span>config.<\/span>points.<\/span>length –<\/span> 4<\/span>]<\/span>,<\/span>
    \n config.<\/span>points[<\/span>config.<\/span>points.<\/span>length –<\/span> 3<\/span>]<\/span>,<\/span>
    \n config.<\/span>points[<\/span>config.<\/span>points.<\/span>length –<\/span> 2<\/span>]<\/span>,<\/span>
    \n config.<\/span>points[<\/span>config.<\/span>points.<\/span>length –<\/span> 1<\/span>]<\/span>]<\/span>,<\/span>
    \n pointerLength<\/span>:<\/span> 10<\/span>,<\/span>
    \n pointerWidth<\/span>:<\/span> 10<\/span>,<\/span>
    \n fill<\/span>:<\/span> config.<\/span>stroke,<\/span>
    \n stroke<\/span>:<\/span> config.<\/span>stroke,<\/span>
    \n strokeWidth<\/span>:<\/span> 3<\/span>
    \n }<\/span>)<\/span>;<\/span><\/p>\n

    connectionLayer.<\/span>add<\/span>(<\/span>line)<\/span>;<\/span>
    \n connectionLayer.<\/span>add<\/span>(<\/span>arrow)<\/span>;<\/span>
    \n }<\/span>)<\/span>;<\/span><\/p>\n

    connectionLayer.<\/span>draw<\/span>(<\/span>)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    \/\/ \u521d\u59cb\u6e32\u67d3<\/span>
    \n renderNodes<\/span>(<\/span>)<\/span>;<\/span>
    \n renderConnections<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u5904\u7406\u7f29\u653e<\/span>
    \n stage.<\/span>on<\/span>(<\/span>'wheel'<\/span>,<\/span> handleZoom)<\/span>;<\/span><\/p>\n

    \/\/ \u54cd\u5e94\u5f0f\u8c03\u6574\u821e\u53f0\u5927\u5c0f<\/span>
    \n window.<\/span>addEventListener<\/span>(<\/span>'resize'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
    \n stageConfig.<\/span>width =<\/span> window.<\/span>innerWidth;<\/span>
    \n stageConfig.<\/span>height =<\/span> window.<\/span>innerHeight –<\/span> 180<\/span>;<\/span>
    \n stage.<\/span>width<\/span>(<\/span>stageConfig.<\/span>width)<\/span>;<\/span>
    \n stage.<\/span>height<\/span>(<\/span>stageConfig.<\/span>height)<\/span>;<\/span>
    \n background.<\/span>width<\/span>(<\/span>stageConfig.<\/span>width)<\/span>;<\/span>
    \n background.<\/span>height<\/span>(<\/span>stageConfig.<\/span>height)<\/span>;<\/span>
    \n drawGrid<\/span>(<\/span>)<\/span>;<\/span>
    \n renderNodes<\/span>(<\/span>)<\/span>;<\/span>
    \n renderConnections<\/span>(<\/span>)<\/span>;<\/span>
    \n }<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u6027\u80fd\u76d1\u63a7<\/span>
    \n let<\/span> lastTime =<\/span> performance.<\/span>now<\/span>(<\/span>)<\/span>;<\/span>
    \n let<\/span> frameCount =<\/span> 0<\/span>;<\/span><\/p>\n

    function<\/span> monitorPerformance<\/span>(<\/span>)<\/span> {<\/span>
    \n const<\/span> now =<\/span> performance.<\/span>now<\/span>(<\/span>)<\/span>;<\/span>
    \n const<\/span> delta =<\/span> now –<\/span> lastTime;<\/span>
    \n frameCount++<\/span>;<\/span><\/p>\n

    if<\/span> (<\/span>delta >=<\/span> 1000<\/span>)<\/span> {<\/span>
    \n frameRate.<\/span>value =<\/span> Math.<\/span>round<\/span>(<\/span>(<\/span>frameCount *<\/span> 1000<\/span>)<\/span> \/<\/span> delta)<\/span>;<\/span>
    \n frameCount =<\/span> 0<\/span>;<\/span>
    \n lastTime =<\/span> now;<\/span><\/p>\n

    \/\/ \u6a21\u62df\u6e32\u67d3\u65f6\u95f4（\u5b9e\u9645\u5e94\u7528\u4e2d\u5e94\u4f7f\u7528\u5b9e\u9645\u6d4b\u91cf\u503c）<\/span>
    \n renderTime.<\/span>value =<\/span> Math.<\/span>max<\/span>(<\/span>1<\/span>,<\/span> Math.<\/span>min<\/span>(<\/span>30<\/span>,<\/span> 30<\/span> –<\/span> nodes.<\/span>length \/<\/span> 10<\/span>)<\/span>)<\/span>;<\/span>
    \n visibleNodes.<\/span>value =<\/span> Math.<\/span>min<\/span>(<\/span>nodes.<\/span>length,<\/span> Math.<\/span>floor<\/span>(<\/span>nodes.<\/span>length *<\/span> 0.8<\/span>)<\/span>)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    requestAnimationFrame<\/span>(<\/span>monitorPerformance)<\/span>;<\/span>
    \n }<\/span><\/p>\n

    monitorPerformance<\/span>(<\/span>)<\/span>;<\/span>
    \n }<\/span>)<\/span>;<\/span><\/p>\n

    return<\/span> {<\/span>
    \n nodes,<\/span>
    \n connections,<\/span>
    \n stageConfig,<\/span>
    \n selectedNode,<\/span>
    \n viewMode,<\/span>
    \n showGrid,<\/span>
    \n frameRate,<\/span>
    \n renderTime,<\/span>
    \n visibleNodes,<\/span>
    \n addNode,<\/span>
    \n removeNode,<\/span>
    \n resetCanvas,<\/span>
    \n calcLineConfig,<\/span>
    \n handleNodeMove,<\/span>
    \n selectNode,<\/span>
    \n handleZoom
    \n }<\/span>;<\/span>
    \n }<\/span>
    \n }<\/span>)<\/span>.<\/span>mount<\/span>(<\/span>'#app'<\/span>)<\/span>;<\/span>
    \n <\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>
    \n<\/<\/span>body<\/span>><\/span><\/span>
    \n<\/<\/span>html<\/span>><\/span><\/span><\/p>\n

    02\u3001\u5173\u952e\u6027\u80fd\u4f18\u5316\u5b9e\u73b0<\/h3>\n
  • \n

    \u5206\u5c42\u6e32\u67d3：<\/p>\n

      \n
    • \u4f7f\u7528\u591a\u4e2a\u56fe\u5c42：\u80cc\u666f\u5c42\u3001\u7f51\u683c\u5c42\u3001\u8fde\u63a5\u7ebf\u5c42\u3001\u8282\u70b9\u5c42\u548c\u5de5\u5177\u5c42<\/li>\n
    • \u9759\u6001\u5143\u7d20（\u80cc\u666f\u3001\u7f51\u683c）\u4e0e\u52a8\u6001\u5143\u7d20（\u8282\u70b9\u3001\u8fde\u63a5\u7ebf）\u5206\u79bb<\/li>\n<\/ul>\n<\/li>\n
    • \n

      \u6279\u91cf\u66f4\u65b0：<\/p>\n

        \n
      • \u4f7f\u7528Konva.FastLayer\u5b9e\u73b0\u6279\u91cf\u7ed8\u5236\u64cd\u4f5c<\/li>\n
      • \u8282\u70b9\u548c\u8fde\u63a5\u7ebf\u4f7f\u7528\u4e13\u7528\u56fe\u5c42\u63d0\u9ad8\u6e32\u67d3\u6548\u7387<\/li>\n<\/ul>\n<\/li>\n
      • \n

        \u865a\u62df\u5316\u6e32\u67d3：<\/p>\n

          \n
        • \u8ba1\u7b97\u89c6\u53e3\u5185\u53ef\u89c1\u5143\u7d20（\u6a21\u62df\u5b9e\u73b0）<\/li>\n
        • \u6027\u80fd\u9762\u677f\u663e\u793a\u53ef\u89c1\u8282\u70b9\u6570\u91cf<\/li>\n<\/ul>\n<\/li>\n
        • \n

          \u7f13\u5b58\u7b56\u7565：<\/p>\n

            \n
          • \u5bf9\u590d\u6742\u8282\u70b9\u8c03\u7528node.cache()\u65b9\u6cd5\u7f13\u5b58\u4f4d\u56fe<\/li>\n
          • \u6587\u672c\u5143\u7d20\u4e5f\u8fdb\u884c\u7f13\u5b58\u4f18\u5316<\/li>\n<\/ul>\n<\/li>\n
          • \n

            GPU\u52a0\u901f：<\/p>\n

              \n
            • \u5728Stage\u914d\u7f6e\u4e2d\u8bbe\u7f6ewillReadFrequently: false\u542f\u7528GPU\u52a0\u901f<\/li>\n
            • \u4f7f\u7528\u786c\u4ef6\u52a0\u901f\u63d0\u9ad8\u6e32\u67d3\u6027\u80fd<\/li>\n<\/ul>\n<\/li>\n

              \u529f\u80fd\u4eae\u70b9<\/h4>\n
                \n
              • \u5b8c\u6574\u7684\u6d41\u7a0b\u56fe\u7f16\u8f91\u529f\u80fd（\u6dfb\u52a0\/\u5220\u9664\u8282\u70b9\u3001\u8fde\u63a5\u7ebf）<\/li>\n
              • \u8282\u70b9\u5c5e\u6027\u7f16\u8f91\u9762\u677f<\/li>\n
              • \u591a\u79cd\u89c6\u56fe\u6a21\u5f0f（\u9ed8\u8ba4\u3001\u6027\u80fd\u3001\u8c03\u8bd5）<\/li>\n
              • \u5b9e\u65f6\u6027\u80fd\u76d1\u63a7\u9762\u677f（\u5e27\u7387\u3001\u6e32\u67d3\u65f6\u95f4）<\/li>\n
              • \u54cd\u5e94\u5f0f\u5e03\u5c40\u9002\u5e94\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8<\/li>\n
              • \u73b0\u4ee3\u5316\u7684\u6df1\u8272UI\u8bbe\u8ba1<\/li>\n<\/ul>\n

                \u4e8c\u3001 WebGL\u4e09\u7ef4\u53ef\u89c6\u5316\u96c6\u6210<\/h2>\n

                vue-threejs\u6700\u4f73\u5b9e\u8df5<\/h3>\n

                <template>
                \n <TresCanvas
                \n shadows
                \n alpha
                \n :physar-enabled="true"
                \n @created="onSceneCreated"
                \n >
                \n <TresPerspectiveCamera :position="[5, 5, 5]" \/><\/p>\n

                <!– \u8f68\u9053\u63a7\u5236\u5668 –>
                \n <OrbitControls \/><\/p>\n

                <!– \u52a8\u6001\u573a\u666f –>
                \n <Suspense>
                \n <VideoEditorScene :video-texture="videoTexture" \/>
                \n <\/Suspense><\/p>\n

                <!– \u7279\u6548\u7cfb\u7edf –>
                \n <EffectComposer>
                \n <Bloom mipmapBlur luminanceThreshold={0.5} \/>
                \n <DepthOfField focusDistance={0.01} focalLength={0.02} bokehScale={2} \/>
                \n <\/EffectComposer>
                \n <\/TresCanvas>
                \n<\/template><\/p>\n

                <script setup>
                \nimport { reactive, shallowRef } from 'vue';
                \nimport { TresCanvas, useTexture } from '@tresjs\/core';
                \nimport { OrbitControls, EffectComposer, Bloom, DepthOfField } from '@tresjs\/cientos';<\/p>\n

                \/\/ \u54cd\u5e94\u5f0f\u89c6\u9891\u7eb9\u7406
                \nconst videoSrc = ref('\/assets\/video-sample.mp4');
                \nconst { texture: videoTexture } = useTexture({
                \n src: videoSrc,
                \n encoding: THREE.sRGBEncoding,
                \n minFilter: THREE.LinearFilter
                \n});<\/p>\n

                \/\/ \u573a\u666f\u521d\u59cb\u5316
                \nconst sceneState = reactive({
                \n timelinePosition: 0,
                \n activeEffects: ['bloom', 'dof']
                \n});<\/p>\n

                function onSceneCreated({ scene, renderer }) {
                \n \/\/ \u6dfb\u52a0\u73af\u5883\u5149
                \n scene.add(new THREE.AmbientLight(0xffffff, 0.5));<\/p>\n

                \/\/ \u54cd\u5e94\u5f0f\u66f4\u65b0
                \n watch(() => sceneState.timelinePosition, (pos) => {
                \n scene.traverse(obj => {
                \n if (obj.isTimelineObject) obj.updatePosition(pos);
                \n });
                \n });
                \n}<\/p>\n

                \/\/ \u89c6\u9891\u5904\u7406\u51fd\u6570
                \nasync function applyEffect(effect) {
                \n const composer = await import('@tresjs\/post-processing');
                \n sceneState.activeEffects.push(effect);
                \n}
                \n<\/script><\/p>\n

                \u4e09\u7ef4\u7f16\u8f91\u573a\u666f\u7ec4\u4ef6：<\/p>\n

                <!– VideoEditorScene.vue –>
                \n<template>
                \n <!– \u89c6\u9891\u5e73\u9762 –>
                \n <TresMesh :scale="[16, 9, 1]" :position="[0, 0, 0]">
                \n <TresPlaneGeometry \/>
                \n <TresMeshStandardMaterial :map="videoTexture" side={THREE.DoubleSide} \/>
                \n <\/TresMesh><\/p>\n

                <!– \u65f6\u95f4\u8f74 –>
                \n <TimelineRuler :position="[0, -5, 0]" \/><\/p>\n

                <!– \u7279\u6548\u63a7\u5236\u70b9 –>
                \n <EffectControl
                \n v-for="effect in activeEffects"
                \n :key="effect.id"
                \n :effect="effect"
                \n \/>
                \n<\/template><\/p>\n

                WebGL\u4f18\u5316\u7b56\u7565：<\/p>\n

              • \u5b9e\u4f8b\u5316\u6e32\u67d3：\u5bf9\u91cd\u590d\u5143\u7d20\u4f7f\u7528InstancedMesh<\/li>\n
              • LOD\u7cfb\u7edf：\u6839\u636e\u8ddd\u79bb\u5207\u6362\u6a21\u578b\u7ec6\u8282\u7ea7\u522b<\/li>\n
              • GPU\u7c92\u5b50\u7cfb\u7edf：\u5904\u7406\u5927\u91cf\u52a8\u6001\u7c92\u5b50<\/li>\n
              • \u540e\u5904\u7406\u94fe\u4f18\u5316：\u5408\u5e76\u76f8\u4f3c\u6548\u679c\u901a\u9053<\/li>\n
              • \u5f02\u6b65\u52a0\u8f7d：\u4f7f\u7528Suspense\u7ba1\u7406\u8d44\u6e90\u52a0\u8f7d<\/li>\n

                \u4e0b\u65b9\u4e3a\u5b8c\u6574WebGL\u4e09\u7ef4\u89c6\u9891\u7f16\u8f91\u5668<\/p>\n

                <<\/span>!<\/span>DOCTYPE<\/span> html><\/span>
                \n<<\/span>html lang=<\/span>"zh-CN"<\/span>><\/span>
                \n<<\/span>head><\/span>
                \n <<\/span>meta charset=<\/span>"UTF-8"<\/span>><\/span>
                \n <<\/span>meta name=<\/span>"viewport"<\/span> content=<\/span>"width=device-width, initial-scale=1.0"<\/span>><\/span>
                \n <<\/span>title><\/span>WebGL\u4e09\u7ef4\u89c6\u9891\u7f16\u8f91\u5668 |<\/span> Vue–<\/span>Three.<\/span>js\u96c6\u6210<<\/span>\/<\/span>title><\/span>
                \n <<\/span>script src=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/vue@3\/dist\/vue.global.js"<\/span>><\/span><<\/span>\/<\/span>script><\/span>
                \n <<\/span>script src=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/three@0.154.0\/build\/three.min.js"<\/span>><\/span><<\/span>\/<\/span>script><\/span>
                \n <<\/span>script src=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/three@0.154.0\/examples\/js\/controls\/OrbitControls.js"<\/span>><\/span><<\/span>\/<\/span>script><\/span>
                \n <<\/span>script src=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/three@0.154.0\/examples\/js\/postprocessing\/EffectComposer.js"<\/span>><\/span><<\/span>\/<\/span>script><\/span>
                \n <<\/span>script src=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/three@0.154.0\/examples\/js\/postprocessing\/RenderPass.js"<\/span>><\/span><<\/span>\/<\/span>script><\/span>
                \n <<\/span>script src=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/three@0.154.0\/examples\/js\/postprocessing\/ShaderPass.js"<\/span>><\/span><<\/span>\/<\/span>script><\/span>
                \n <<\/span>script src=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/three@0.154.0\/examples\/js\/postprocessing\/BloomPass.js"<\/span>><\/span><<\/span>\/<\/span>script><\/span>
                \n <<\/span>script src=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/three@0.154.0\/examples\/js\/shaders\/CopyShader.js"<\/span>><\/span><<\/span>\/<\/span>script><\/span>
                \n <<\/span>script src=<\/span>"https:\/\/cdn.jsdelivr.net\/npm\/three@0.154.0\/examples\/js\/shaders\/LuminosityHighPassShader.js"<\/span>><\/span><<\/span>\/<\/span>script><\/span>
                \n <<\/span>style><\/span>
                \n *<\/span> {<\/span>
                \n margin<\/span>:<\/span> 0<\/span>;<\/span>
                \n padding<\/span>:<\/span> 0<\/span>;<\/span>
                \n box–<\/span>sizing:<\/span> border–<\/span>box;<\/span>
                \n font–<\/span>family:<\/span> 'Segoe UI'<\/span>,<\/span> Tahoma,<\/span> Geneva,<\/span> Verdana,<\/span> sans–<\/span>serif;<\/span>
                \n }<\/span><\/p>\n

                body {<\/span>
                \n background<\/span>:<\/span> linear–<\/span>gradient<\/span>(<\/span>135deg,<\/span> #0f2027,<\/span> #203a43,<\/span> #2c5364)<\/span>;<\/span>
                \n color<\/span>:<\/span> #ecf0f1;<\/span>
                \n min–<\/span>height:<\/span> 100vh;<\/span>
                \n overflow<\/span>:<\/span> hidden;<\/span>
                \n padding<\/span>:<\/span> 20px;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>container {<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n flex–<\/span>direction:<\/span> column;<\/span>
                \n max–<\/span>width:<\/span> 1800px;<\/span>
                \n margin<\/span>:<\/span> 0<\/span> auto;<\/span>
                \n height<\/span>:<\/span> calc<\/span>(<\/span>100vh –<\/span> 40px)<\/span>;<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>15<\/span>,<\/span> 22<\/span>,<\/span> 33<\/span>,<\/span> 0.85<\/span>)<\/span>;<\/span>
                \n border–<\/span>radius:<\/span> 16px;<\/span>
                \n box–<\/span>shadow:<\/span> 0<\/span> 12px 40px rgba<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>,<\/span> 0.6<\/span>)<\/span>;<\/span>
                \n overflow<\/span>:<\/span> hidden;<\/span>
                \n }<\/span><\/p>\n

                header {<\/span>
                \n padding<\/span>:<\/span> 18px 30px;<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>10<\/span>,<\/span> 15<\/span>,<\/span> 24<\/span>,<\/span> 0.95<\/span>)<\/span>;<\/span>
                \n border–<\/span>bottom:<\/span> 1px solid #2a3a4a;<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n justify–<\/span>content:<\/span> space–<\/span>between;<\/span>
                \n align–<\/span>items:<\/span> center;<\/span>
                \n z–<\/span>index:<\/span> 10<\/span>;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>logo {<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n align–<\/span>items:<\/span> center;<\/span>
                \n gap<\/span>:<\/span> 15px;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>logo–<\/span>icon {<\/span>
                \n width<\/span>:<\/span> 40px;<\/span>
                \n height<\/span>:<\/span> 40px;<\/span>
                \n background<\/span>:<\/span> linear–<\/span>gradient<\/span>(<\/span>135deg,<\/span> #00c9ff,<\/span> #92fe9d)<\/span>;<\/span>
                \n border–<\/span>radius:<\/span> 10px;<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n align–<\/span>items:<\/span> center;<\/span>
                \n justify–<\/span>content:<\/span> center;<\/span>
                \n font–<\/span>size:<\/span> 20px;<\/span>
                \n font–<\/span>weight:<\/span> bold;<\/span>
                \n }<\/span><\/p>\n

                h1 {<\/span>
                \n font–<\/span>size:<\/span> 1<\/span>.<\/span>8rem;<\/span>
                \n background<\/span>:<\/span> linear–<\/span>gradient<\/span>(<\/span>90deg,<\/span> #00c9ff,<\/span> #92fe9d)<\/span>;<\/span>
                \n –<\/span>webkit–<\/span>background–<\/span>clip:<\/span> text;<\/span>
                \n –<\/span>webkit–<\/span>text–<\/span>fill–<\/span>color:<\/span> transparent;<\/span>
                \n font–<\/span>weight:<\/span> 700<\/span>;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>subtitle {<\/span>
                \n color<\/span>:<\/span> #a9b1bc;<\/span>
                \n font–<\/span>size:<\/span> 1rem;<\/span>
                \n margin–<\/span>top:<\/span> 4px;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>main–<\/span>content {<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n flex<\/span>:<\/span> 1<\/span>;<\/span>
                \n overflow<\/span>:<\/span> hidden;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>tool–<\/span>panel {<\/span>
                \n width<\/span>:<\/span> 280px;<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>10<\/span>,<\/span> 15<\/span>,<\/span> 24<\/span>,<\/span> 0.9<\/span>)<\/span>;<\/span>
                \n padding<\/span>:<\/span> 20px;<\/span>
                \n border–<\/span>right:<\/span> 1px solid #2a3a4a;<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n flex–<\/span>direction:<\/span> column;<\/span>
                \n gap<\/span>:<\/span> 25px;<\/span>
                \n overflow–<\/span>y:<\/span> auto;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>panel–<\/span>section {<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>20<\/span>,<\/span> 30<\/span>,<\/span> 48<\/span>,<\/span> 0.7<\/span>)<\/span>;<\/span>
                \n border–<\/span>radius:<\/span> 12px;<\/span>
                \n padding<\/span>:<\/span> 18px;<\/span>
                \n box–<\/span>shadow:<\/span> 0<\/span> 4px 15px rgba<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>,<\/span> 0.3<\/span>)<\/span>;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>panel–<\/span>title {<\/span>
                \n font–<\/span>size:<\/span> 1<\/span>.<\/span>1rem;<\/span>
                \n margin–<\/span>bottom:<\/span> 15px;<\/span>
                \n color<\/span>:<\/span> #00c9ff;<\/span>
                \n font–<\/span>weight:<\/span> 600<\/span>;<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n align–<\/span>items:<\/span> center;<\/span>
                \n gap<\/span>:<\/span> 8px;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>effect–<\/span>types {<\/span>
                \n display<\/span>:<\/span> grid;<\/span>
                \n grid–<\/span>template–<\/span>columns:<\/span> repeat<\/span>(<\/span>2<\/span>,<\/span> 1fr)<\/span>;<\/span>
                \n gap<\/span>:<\/span> 15px;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>effect–<\/span>type {<\/span>
                \n height<\/span>:<\/span> 100px;<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>25<\/span>,<\/span> 35<\/span>,<\/span> 55<\/span>,<\/span> 0.8<\/span>)<\/span>;<\/span>
                \n border–<\/span>radius:<\/span> 10px;<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n flex–<\/span>direction:<\/span> column;<\/span>
                \n align–<\/span>items:<\/span> center;<\/span>
                \n justify–<\/span>content:<\/span> center;<\/span>
                \n cursor<\/span>:<\/span> pointer;<\/span>
                \n transition<\/span>:<\/span> all 0<\/span>.<\/span>3s ease;<\/span>
                \n border<\/span>:<\/span> 2px solid transparent;<\/span>
                \n text–<\/span>align:<\/span> center;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>effect–<\/span>type:<\/span>hover {<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>0<\/span>,<\/span> 201<\/span>,<\/span> 255<\/span>,<\/span> 0.2<\/span>)<\/span>;<\/span>
                \n border–<\/span>color:<\/span> #00c9ff;<\/span>
                \n transform<\/span>:<\/span> translateY<\/span>(<\/span>–<\/span>3px)<\/span>;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>effect–<\/span>icon {<\/span>
                \n width<\/span>:<\/span> 40px;<\/span>
                \n height<\/span>:<\/span> 40px;<\/span>
                \n border–<\/span>radius:<\/span> 8px;<\/span>
                \n margin–<\/span>bottom:<\/span> 10px;<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n align–<\/span>items:<\/span> center;<\/span>
                \n justify–<\/span>content:<\/span> center;<\/span>
                \n font–<\/span>size:<\/span> 20px;<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>0<\/span>,<\/span> 201<\/span>,<\/span> 255<\/span>,<\/span> 0.2<\/span>)<\/span>;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>canvas–<\/span>container {<\/span>
                \n flex<\/span>:<\/span> 1<\/span>;<\/span>
                \n position<\/span>:<\/span> relative;<\/span>
                \n overflow<\/span>:<\/span> hidden;<\/span>
                \n }<\/span><\/p>\n

                #three–<\/span>canvas {<\/span>
                \n width<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>
                \n height<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>
                \n display<\/span>:<\/span> block;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>canvas–<\/span>overlay {<\/span>
                \n position<\/span>:<\/span> absolute;<\/span>
                \n bottom<\/span>:<\/span> 20px;<\/span>
                \n left<\/span>:<\/span> 0<\/span>;<\/span>
                \n right<\/span>:<\/span> 0<\/span>;<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n justify–<\/span>content:<\/span> center;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>timeline {<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>10<\/span>,<\/span> 15<\/span>,<\/span> 24<\/span>,<\/span> 0.8<\/span>)<\/span>;<\/span>
                \n border–<\/span>radius:<\/span> 10px;<\/span>
                \n padding<\/span>:<\/span> 15px 20px;<\/span>
                \n width<\/span>:<\/span> 80<\/span>%<\/span>;<\/span>
                \n backdrop–<\/span>filter:<\/span> blur<\/span>(<\/span>10px)<\/span>;<\/span>
                \n border<\/span>:<\/span> 1px solid rgba<\/span>(<\/span>0<\/span>,<\/span> 201<\/span>,<\/span> 255<\/span>,<\/span> 0.3<\/span>)<\/span>;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>timeline–<\/span>track {<\/span>
                \n height<\/span>:<\/span> 60px;<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>30<\/span>,<\/span> 45<\/span>,<\/span> 70<\/span>,<\/span> 0.6<\/span>)<\/span>;<\/span>
                \n border–<\/span>radius:<\/span> 8px;<\/span>
                \n margin–<\/span>top:<\/span> 10px;<\/span>
                \n position<\/span>:<\/span> relative;<\/span>
                \n overflow<\/span>:<\/span> hidden;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>timeline–<\/span>indicator {<\/span>
                \n position<\/span>:<\/span> absolute;<\/span>
                \n top<\/span>:<\/span> 0<\/span>;<\/span>
                \n bottom<\/span>:<\/span> 0<\/span>;<\/span>
                \n width<\/span>:<\/span> 3px;<\/span>
                \n background<\/span>:<\/span> #00c9ff;<\/span>
                \n box–<\/span>shadow:<\/span> 0<\/span> 0<\/span> 10px #00c9ff;<\/span>
                \n transform<\/span>:<\/span> translateX<\/span>(<\/span>–<\/span>50<\/span>%<\/span>)<\/span>;<\/span>
                \n left<\/span>:<\/span> 30<\/span>%<\/span>;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>property–<\/span>panel {<\/span>
                \n width<\/span>:<\/span> 320px;<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>10<\/span>,<\/span> 15<\/span>,<\/span> 24<\/span>,<\/span> 0.9<\/span>)<\/span>;<\/span>
                \n padding<\/span>:<\/span> 20px;<\/span>
                \n border–<\/span>left:<\/span> 1px solid #2a3a4a;<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n flex–<\/span>direction:<\/span> column;<\/span>
                \n gap<\/span>:<\/span> 20px;<\/span>
                \n overflow–<\/span>y:<\/span> auto;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>property–<\/span>form {<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n flex–<\/span>direction:<\/span> column;<\/span>
                \n gap<\/span>:<\/span> 15px;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>form–<\/span>group {<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n flex–<\/span>direction:<\/span> column;<\/span>
                \n gap<\/span>:<\/span> 8px;<\/span>
                \n }<\/span><\/p>\n

                label {<\/span>
                \n font–<\/span>size:<\/span> 0<\/span>.<\/span>9rem;<\/span>
                \n color<\/span>:<\/span> #a9b1bc;<\/span>
                \n }<\/span><\/p>\n

                input,<\/span> select {<\/span>
                \n padding<\/span>:<\/span> 10px 12px;<\/span>
                \n border–<\/span>radius:<\/span> 8px;<\/span>
                \n border<\/span>:<\/span> 1px solid #2a3a4a;<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>20<\/span>,<\/span> 30<\/span>,<\/span> 48<\/span>,<\/span> 0.7<\/span>)<\/span>;<\/span>
                \n color<\/span>:<\/span> #f8f8f2;<\/span>
                \n font–<\/span>size:<\/span> 0<\/span>.<\/span>95rem;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>slider–<\/span>container {<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n align–<\/span>items:<\/span> center;<\/span>
                \n gap<\/span>:<\/span> 15px;<\/span>
                \n }<\/span><\/p>\n

                input[<\/span>type=<\/span>"range"<\/span>]<\/span> {<\/span>
                \n flex<\/span>:<\/span> 1<\/span>;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>value–<\/span>display {<\/span>
                \n min–<\/span>width:<\/span> 40px;<\/span>
                \n text–<\/span>align:<\/span> center;<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>0<\/span>,<\/span> 201<\/span>,<\/span> 255<\/span>,<\/span> 0.2<\/span>)<\/span>;<\/span>
                \n padding<\/span>:<\/span> 5px 10px;<\/span>
                \n border–<\/span>radius:<\/span> 6px;<\/span>
                \n font–<\/span>size:<\/span> 0<\/span>.<\/span>9rem;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>performance–<\/span>stats {<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n justify–<\/span>content:<\/span> space–<\/span>between;<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>20<\/span>,<\/span> 30<\/span>,<\/span> 48<\/span>,<\/span> 0.7<\/span>)<\/span>;<\/span>
                \n border–<\/span>radius:<\/span> 8px;<\/span>
                \n padding<\/span>:<\/span> 12px 15px;<\/span>
                \n font–<\/span>size:<\/span> 0<\/span>.<\/span>85rem;<\/span>
                \n margin–<\/span>top:<\/span> 20px;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>stat–<\/span>item {<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n flex–<\/span>direction:<\/span> column;<\/span>
                \n align–<\/span>items:<\/span> center;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>stat–<\/span>value {<\/span>
                \n font–<\/span>weight:<\/span> 700<\/span>;<\/span>
                \n font–<\/span>size:<\/span> 1<\/span>.<\/span>1rem;<\/span>
                \n color<\/span>:<\/span> #92fe9d;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>stat–<\/span>label {<\/span>
                \n color<\/span>:<\/span> #a9b1bc;<\/span>
                \n font–<\/span>size:<\/span> 0<\/span>.<\/span>75rem;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>optimization–<\/span>tips {<\/span>
                \n margin–<\/span>top:<\/span> 15px;<\/span>
                \n padding<\/span>:<\/span> 15px;<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>20<\/span>,<\/span> 30<\/span>,<\/span> 48<\/span>,<\/span> 0.7<\/span>)<\/span>;<\/span>
                \n border–<\/span>radius:<\/span> 8px;<\/span>
                \n font–<\/span>size:<\/span> 0<\/span>.<\/span>9rem;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>tip–<\/span>title {<\/span>
                \n color<\/span>:<\/span> #ffb86c;<\/span>
                \n margin–<\/span>bottom:<\/span> 10px;<\/span>
                \n font–<\/span>weight:<\/span> 600<\/span>;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>tip–<\/span>list {<\/span>
                \n padding–<\/span>left:<\/span> 20px;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>tip–<\/span>list li {<\/span>
                \n margin–<\/span>bottom:<\/span> 8px;<\/span>
                \n line–<\/span>height:<\/span> 1.4<\/span>;<\/span>
                \n }<\/span><\/p>\n

                button {<\/span>
                \n padding<\/span>:<\/span> 10px 20px;<\/span>
                \n border–<\/span>radius:<\/span> 8px;<\/span>
                \n border<\/span>:<\/span> none;<\/span>
                \n background<\/span>:<\/span> linear–<\/span>gradient<\/span>(<\/span>135deg,<\/span> #00c9ff,<\/span> #92fe9d)<\/span>;<\/span>
                \n color<\/span>:<\/span> #0f2027;<\/span>
                \n font–<\/span>weight:<\/span> 600<\/span>;<\/span>
                \n cursor<\/span>:<\/span> pointer;<\/span>
                \n transition<\/span>:<\/span> all 0<\/span>.<\/span>3s ease;<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n align–<\/span>items:<\/span> center;<\/span>
                \n gap<\/span>:<\/span> 8px;<\/span>
                \n margin–<\/span>top:<\/span> 10px;<\/span>
                \n }<\/span><\/p>\n

                button<\/span>:<\/span>hover {<\/span>
                \n opacity<\/span>:<\/span> 0.9<\/span>;<\/span>
                \n transform<\/span>:<\/span> translateY<\/span>(<\/span>–<\/span>2px)<\/span>;<\/span>
                \n }<\/span><\/p>\n

                footer {<\/span>
                \n padding<\/span>:<\/span> 15px 30px;<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>10<\/span>,<\/span> 15<\/span>,<\/span> 24<\/span>,<\/span> 0.95<\/span>)<\/span>;<\/span>
                \n border–<\/span>top:<\/span> 1px solid #2a3a4a;<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n justify–<\/span>content:<\/span> space–<\/span>between;<\/span>
                \n align–<\/span>items:<\/span> center;<\/span>
                \n font–<\/span>size:<\/span> 0<\/span>.<\/span>9rem;<\/span>
                \n color<\/span>:<\/span> #a9b1bc;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>view–<\/span>controls {<\/span>
                \n display<\/span>:<\/span> flex;<\/span>
                \n gap<\/span>:<\/span> 10px;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>view–<\/span>btn {<\/span>
                \n padding<\/span>:<\/span> 8px 15px;<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>0<\/span>,<\/span> 201<\/span>,<\/span> 255<\/span>,<\/span> 0.2<\/span>)<\/span>;<\/span>
                \n border–<\/span>radius:<\/span> 6px;<\/span>
                \n cursor<\/span>:<\/span> pointer;<\/span>
                \n transition<\/span>:<\/span> all 0<\/span>.<\/span>2s;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>view–<\/span>btn.<\/span>active {<\/span>
                \n background<\/span>:<\/span> rgba<\/span>(<\/span>0<\/span>,<\/span> 201<\/span>,<\/span> 255<\/span>,<\/span> 0.6<\/span>)<\/span>;<\/span>
                \n }<\/span><\/p>\n

                .<\/span>control–<\/span>point {<\/span>
                \n position<\/span>:<\/span> absolute;<\/span>
                \n width<\/span>:<\/span> 16px;<\/span>
                \n height<\/span>:<\/span> 16px;<\/span>
                \n border–<\/span>radius:<\/span> 50<\/span>%<\/span>;<\/span>
                \n background<\/span>:<\/span> #ff2d95;<\/span>
                \n border<\/span>:<\/span> 2px solid white;<\/span>
                \n box–<\/span>shadow:<\/span> 0<\/span> 0<\/span> 10px #ff2d95;<\/span>
                \n transform<\/span>:<\/span> translate<\/span>(<\/span>–<\/span>50<\/span>%<\/span>,<\/span> –<\/span>50<\/span>%<\/span>)<\/span>;<\/span>
                \n cursor<\/span>:<\/span> move;<\/span>
                \n z–<\/span>index:<\/span> 10<\/span>;<\/span>
                \n }<\/span>
                \n <<\/span>\/<\/span>style><\/span>
                \n<<\/span>\/<\/span>head><\/span>
                \n<<\/span>body><\/span>
                \n <<\/span>div id=<\/span>"app"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"container"<\/span>><\/span>
                \n <<\/span>header><\/span>
                \n <<\/span>div class<\/span>=<\/span>"logo"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"logo-icon"<\/span>><\/span>3D<<\/span>\/<\/span>div><\/span>
                \n <<\/span>div><\/span>
                \n <<\/span>h1><\/span>WebGL\u4e09\u7ef4\u89c6\u9891\u7f16\u8f91\u5668<<\/span>\/<\/span>h1><\/span>
                \n <<\/span>div class<\/span>=<\/span>"subtitle"<\/span>><\/span>Vue–<\/span>Three.<\/span>js\u96c6\u6210 |<\/span> \u9ad8\u6027\u80fd\u4e09\u7ef4\u53ef\u89c6\u5316<<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"controls"<\/span>><\/span>
                \n <<\/span>button @click=<\/span>"loadSampleVideo"<\/span>><\/span>
                \n <<\/span>i><\/span>\u25b6\ufe0f<<\/span>\/<\/span>i><\/span> \u52a0\u8f7d\u793a\u4f8b\u89c6\u9891
                \n <<\/span>\/<\/span>button><\/span>
                \n <<\/span>button @click=<\/span>"exportProject"<\/span> style=<\/span>"background: linear-gradient(135deg, #ff6b6b, #ffa36c);"<\/span>><\/span>
                \n <<\/span>i><\/span>💾<<\/span>\/<\/span>i><\/span> \u5bfc\u51fa\u9879\u76ee
                \n <<\/span>\/<\/span>button><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>header><\/span><\/p>\n

                <<\/span>div class<\/span>=<\/span>"main-content"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"tool-panel"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"panel-section"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"panel-title"<\/span>><\/span>
                \n <<\/span>i><\/span>\u2728<<\/span>\/<\/span>i><\/span> \u89c6\u9891\u7279\u6548
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"effect-types"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"effect-type"<\/span> @click=<\/span>"addEffect('bloom')"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"effect-icon"<\/span>><\/span>🔆<<\/span>\/<\/span>div><\/span>
                \n <<\/span>div><\/span>\u8f89\u5149\u6548\u679c<<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"effect-type"<\/span> @click=<\/span>"addEffect('dof')"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"effect-icon"<\/span>><\/span>🎯<<\/span>\/<\/span>div><\/span>
                \n <<\/span>div><\/span>\u666f\u6df1\u6548\u679c<<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"effect-type"<\/span> @click=<\/span>"addEffect('glitch')"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"effect-icon"<\/span>><\/span>📺<<\/span>\/<\/span>div><\/span>
                \n <<\/span>div><\/span>\u6545\u969c\u6548\u679c<<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"effect-type"<\/span> @click=<\/span>"addEffect('pixel')"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"effect-icon"<\/span>><\/span>🧊<<\/span>\/<\/span>div><\/span>
                \n <<\/span>div><\/span>\u50cf\u7d20\u6548\u679c<<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"effect-type"<\/span> @click=<\/span>"addEffect('vignette')"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"effect-icon"<\/span>><\/span>\u2b55<<\/span>\/<\/span>div><\/span>
                \n <<\/span>div><\/span>\u6697\u89d2\u6548\u679c<<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"effect-type"<\/span> @click=<\/span>"addEffect('rgb')"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"effect-icon"<\/span>><\/span>🌈<<\/span>\/<\/span>div><\/span>
                \n <<\/span>div><\/span>RGB<\/span>\u5206\u79bb<<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span><\/p>\n

                <<\/span>div class<\/span>=<\/span>"panel-section"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"panel-title"<\/span>><\/span>
                \n <<\/span>i><\/span>🎚\ufe0f<<\/span>\/<\/span>i><\/span> \u7279\u6548\u63a7\u5236
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"form-group"<\/span>><\/span>
                \n <<\/span>label><\/span>\u8f89\u5149\u5f3a\u5ea6:<\/span> {<\/span>{<\/span> bloomIntensity.<\/span>toFixed<\/span>(<\/span>2<\/span>)<\/span> }<\/span>}<\/span><<\/span>\/<\/span>label><\/span>
                \n <<\/span>div class<\/span>=<\/span>"slider-container"<\/span>><\/span>
                \n <<\/span>input type=<\/span>"range"<\/span> min=<\/span>"0"<\/span> max=<\/span>"2"<\/span> step=<\/span>"0.05"<\/span> v–<\/span>model=<\/span>"bloomIntensity"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"value-display"<\/span>><\/span>{<\/span>{<\/span> bloomIntensity.<\/span>toFixed<\/span>(<\/span>2<\/span>)<\/span> }<\/span>}<\/span><<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span><\/p>\n

                <<\/span>div class<\/span>=<\/span>"form-group"<\/span>><\/span>
                \n <<\/span>label><\/span>\u666f\u6df1\u6a21\u7cca:<\/span> {<\/span>{<\/span> dofBlur.<\/span>toFixed<\/span>(<\/span>2<\/span>)<\/span> }<\/span>}<\/span><<\/span>\/<\/span>label><\/span>
                \n <<\/span>div class<\/span>=<\/span>"slider-container"<\/span>><\/span>
                \n <<\/span>input type=<\/span>"range"<\/span> min=<\/span>"0"<\/span> max=<\/span>"0.1"<\/span> step=<\/span>"0.005"<\/span> v–<\/span>model=<\/span>"dofBlur"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"value-display"<\/span>><\/span>{<\/span>{<\/span> dofBlur.<\/span>toFixed<\/span>(<\/span>3<\/span>)<\/span> }<\/span>}<\/span><<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span><\/p>\n

                <<\/span>div class<\/span>=<\/span>"form-group"<\/span>><\/span>
                \n <<\/span>label><\/span>\u50cf\u7d20\u5927\u5c0f:<\/span> {<\/span>{<\/span> pixelSize }<\/span>}<\/span><<\/span>\/<\/span>label><\/span>
                \n <<\/span>div class<\/span>=<\/span>"slider-container"<\/span>><\/span>
                \n <<\/span>input type=<\/span>"range"<\/span> min=<\/span>"1"<\/span> max=<\/span>"20"<\/span> step=<\/span>"1"<\/span> v–<\/span>model=<\/span>"pixelSize"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"value-display"<\/span>><\/span>{<\/span>{<\/span> pixelSize }<\/span>}<\/span>px<<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span><\/p>\n

                <<\/span>div class<\/span>=<\/span>"optimization-tips"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"tip-title"<\/span>><\/span>🚀 WebGL\u4f18\u5316\u7b56\u7565<<\/span>\/<\/span>div><\/span>
                \n <<\/span>ul class<\/span>=<\/span>"tip-list"<\/span>><\/span>
                \n <<\/span>li><\/span><<\/span>strong><\/span>\u5b9e\u4f8b\u5316\u6e32\u67d3<<\/span>\/<\/span>strong><\/span>:<\/span> \u5bf9\u91cd\u590d\u5143\u7d20\u4f7f\u7528InstancedMesh<<\/span>\/<\/span>li><\/span>
                \n <<\/span>li><\/span><<\/span>strong><\/span>LOD<\/span>\u7cfb\u7edf<<\/span>\/<\/span>strong><\/span>:<\/span> \u6839\u636e\u8ddd\u79bb\u5207\u6362\u6a21\u578b\u7ec6\u8282\u7ea7\u522b<<\/span>\/<\/span>li><\/span>
                \n <<\/span>li><\/span><<\/span>strong><\/span>GPU<\/span>\u7c92\u5b50\u7cfb\u7edf<<\/span>\/<\/span>strong><\/span>:<\/span> \u5904\u7406\u5927\u91cf\u52a8\u6001\u7c92\u5b50<<\/span>\/<\/span>li><\/span>
                \n <<\/span>li><\/span><<\/span>strong><\/span>\u540e\u5904\u7406\u94fe\u4f18\u5316<<\/span>\/<\/span>strong><\/span>:<\/span> \u5408\u5e76\u76f8\u4f3c\u6548\u679c\u901a\u9053<<\/span>\/<\/span>li><\/span>
                \n <<\/span>li><\/span><<\/span>strong><\/span>\u5f02\u6b65\u52a0\u8f7d<<\/span>\/<\/span>strong><\/span>:<\/span> \u4f7f\u7528Suspense\u7ba1\u7406\u8d44\u6e90\u52a0\u8f7d<<\/span>\/<\/span>li><\/span>
                \n <<\/span>li><\/span><<\/span>strong><\/span>\u7740\u8272\u5668\u4f18\u5316<<\/span>\/<\/span>strong><\/span>:<\/span> \u4f7f\u7528\u7cbe\u5ea6\u9002\u5f53\u7684GLSL<\/span>\u53d8\u91cf<<\/span>\/<\/span>li><\/span>
                \n <<\/span>\/<\/span>ul><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span><\/p>\n

                <<\/span>div class<\/span>=<\/span>"canvas-container"<\/span>><\/span>
                \n <<\/span>canvas id=<\/span>"three-canvas"<\/span>><\/span><<\/span>\/<\/span>canvas><\/span><\/p>\n

                <<\/span>!<\/span>—<\/span> \u63a7\u5236\u70b9 —<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"control-point"<\/span> :<\/span>style=<\/span>"{left: controlPoints[0].x + 'px', top: controlPoints[0].y + 'px'}"<\/span>
                \n @mousedown=<\/span>"startDrag(0)"<\/span>><\/span><<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"control-point"<\/span> :<\/span>style=<\/span>"{left: controlPoints[1].x + 'px', top: controlPoints[1].y + 'px'}"<\/span>
                \n @mousedown=<\/span>"startDrag(1)"<\/span>><\/span><<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"control-point"<\/span> :<\/span>style=<\/span>"{left: controlPoints[2].x + 'px', top: controlPoints[2].y + 'px'}"<\/span>
                \n @mousedown=<\/span>"startDrag(2)"<\/span>><\/span><<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"control-point"<\/span> :<\/span>style=<\/span>"{left: controlPoints[3].x + 'px', top: controlPoints[3].y + 'px'}"<\/span>
                \n @mousedown=<\/span>"startDrag(3)"<\/span>><\/span><<\/span>\/<\/span>div><\/span><\/p>\n

                <<\/span>div class<\/span>=<\/span>"canvas-overlay"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"timeline"<\/span>><\/span>
                \n <<\/span>div><\/span>\u65f6\u95f4\u7ebf<<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"timeline-track"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"timeline-indicator"<\/span>><\/span><<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span><\/p>\n

                <<\/span>div class<\/span>=<\/span>"property-panel"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"panel-title"<\/span>><\/span>
                \n <<\/span>i><\/span>\u2699\ufe0f<<\/span>\/<\/span>i><\/span> \u573a\u666f\u8bbe\u7f6e
                \n <<\/span>\/<\/span>div><\/span><\/p>\n

                <<\/span>div class<\/span>=<\/span>"property-form"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"form-group"<\/span>><\/span>
                \n <<\/span>label><\/span>\u6e32\u67d3\u6a21\u5f0f<<\/span>\/<\/span>label><\/span>
                \n <<\/span>select v–<\/span>model=<\/span>"renderMode"<\/span>><\/span>
                \n <<\/span>option value=<\/span>"standard"<\/span>><\/span>\u6807\u51c6<<\/span>\/<\/span>option><\/span>
                \n <<\/span>option value=<\/span>"wireframe"<\/span>><\/span>\u7ebf\u6846\u6a21\u5f0f<<\/span>\/<\/span>option><\/span>
                \n <<\/span>option value=<\/span>"points"<\/span>><\/span>\u70b9\u4e91\u6a21\u5f0f<<\/span>\/<\/span>option><\/span>
                \n <<\/span>\/<\/span>select><\/span>
                \n <<\/span>\/<\/span>div><\/span><\/p>\n

                <<\/span>div class<\/span>=<\/span>"form-group"<\/span>><\/span>
                \n <<\/span>label><\/span>\u73af\u5883\u5149\u5f3a\u5ea6:<\/span> {<\/span>{<\/span> ambientIntensity.<\/span>toFixed<\/span>(<\/span>2<\/span>)<\/span> }<\/span>}<\/span><<\/span>\/<\/span>label><\/span>
                \n <<\/span>div class<\/span>=<\/span>"slider-container"<\/span>><\/span>
                \n <<\/span>input type=<\/span>"range"<\/span> min=<\/span>"0"<\/span> max=<\/span>"1"<\/span> step=<\/span>"0.05"<\/span> v–<\/span>model=<\/span>"ambientIntensity"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"value-display"<\/span>><\/span>{<\/span>{<\/span> ambientIntensity.<\/span>toFixed<\/span>(<\/span>2<\/span>)<\/span> }<\/span>}<\/span><<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span><\/p>\n

                <<\/span>div class<\/span>=<\/span>"form-group"<\/span>><\/span>
                \n <<\/span>label><\/span>\u65b9\u5411\u5149\u5f3a\u5ea6:<\/span> {<\/span>{<\/span> directionalIntensity.<\/span>toFixed<\/span>(<\/span>2<\/span>)<\/span> }<\/span>}<\/span><<\/span>\/<\/span>label><\/span>
                \n <<\/span>div class<\/span>=<\/span>"slider-container"<\/span>><\/span>
                \n <<\/span>input type=<\/span>"range"<\/span> min=<\/span>"0"<\/span> max=<\/span>"2"<\/span> step=<\/span>"0.1"<\/span> v–<\/span>model=<\/span>"directionalIntensity"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"value-display"<\/span>><\/span>{<\/span>{<\/span> directionalIntensity.<\/span>toFixed<\/span>(<\/span>2<\/span>)<\/span> }<\/span>}<\/span><<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span><\/p>\n

                <<\/span>div class<\/span>=<\/span>"form-group"<\/span>><\/span>
                \n <<\/span>label><\/span>\u80cc\u666f\u989c\u8272<<\/span>\/<\/span>label><\/span>
                \n <<\/span>select v–<\/span>model=<\/span>"bgColor"<\/span>><\/span>
                \n <<\/span>option value=<\/span>"#0f2027"<\/span>><\/span>\u6df1\u84dd<<\/span>\/<\/span>option><\/span>
                \n <<\/span>option value=<\/span>"#1a1a2e"<\/span>><\/span>\u6df1\u7d2b<<\/span>\/<\/span>option><\/span>
                \n <<\/span>option value=<\/span>"#16213e"<\/span>><\/span>\u6d77\u519b\u84dd<<\/span>\/<\/span>option><\/span>
                \n <<\/span>option value=<\/span>"#000000"<\/span>><\/span>\u7eaf\u9ed1<<\/span>\/<\/span>option><\/span>
                \n <<\/span>\/<\/span>select><\/span>
                \n <<\/span>\/<\/span>div><\/span><\/p>\n

                <<\/span>button @click=<\/span>"resetCamera"<\/span>><\/span>
                \n <<\/span>i><\/span>🔄<<\/span>\/<\/span>i><\/span> \u91cd\u7f6e\u76f8\u673a\u4f4d\u7f6e
                \n <<\/span>\/<\/span>button><\/span>
                \n <<\/span>\/<\/span>div><\/span><\/p>\n

                <<\/span>div class<\/span>=<\/span>"performance-stats"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"stat-item"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"stat-value"<\/span>><\/span>{<\/span>{<\/span> fps }<\/span>}<\/span> FPS<\/span><<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"stat-label"<\/span>><\/span>\u5e27\u7387<<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"stat-item"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"stat-value"<\/span>><\/span>{<\/span>{<\/span> memory }<\/span>}<\/span> MB<\/span><<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"stat-label"<\/span>><\/span>\u663e\u5b58<<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"stat-item"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"stat-value"<\/span>><\/span>{<\/span>{<\/span> drawCalls }<\/span>}<\/span><<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"stat-label"<\/span>><\/span>Draw Calls<<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span><\/p>\n

                <<\/span>div class<\/span>=<\/span>"panel-section"<\/span> style=<\/span>"margin-top: 20px;"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"panel-title"<\/span>><\/span>
                \n <<\/span>i><\/span>🔍<<\/span>\/<\/span>i><\/span> \u5f53\u524d\u7279\u6548
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>div style=<\/span>"display: flex; flex-wrap: wrap; gap: 8px;"<\/span>><\/span>
                \n <<\/span>div v–<\/span>for<\/span>=<\/span>"effect in activeEffects"<\/span> :<\/span>key=<\/span>"effect"<\/span>
                \n style=<\/span>"padding: 5px 10px; background: rgba(0, 201, 255, 0.2); border-radius: 6px;"<\/span>><\/span>
                \n {<\/span>{<\/span> effectNames[<\/span>effect]<\/span> }<\/span>}<\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span><\/p>\n

                <<\/span>footer><\/span>
                \n <<\/span>div><\/span>Three.<\/span>js v154 |<\/span> Vue 3.3<\/span> |<\/span> WebGL 2.0<\/span> \u4e09\u7ef4\u89c6\u9891\u7f16\u8f91<<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"view-controls"<\/span>><\/span>
                \n <<\/span>div class<\/span>=<\/span>"view-btn"<\/span> :<\/span>class<\/span>=<\/span>"{active: viewMode === 'default'}"<\/span> @click=<\/span>"viewMode = 'default'"<\/span>><\/span>
                \n \u9ed8\u8ba4\u89c6\u56fe
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"view-btn"<\/span> :<\/span>class<\/span>=<\/span>"{active: viewMode === 'minimal'}"<\/span> @click=<\/span>"viewMode = 'minimal'"<\/span>><\/span>
                \n \u6027\u80fd\u6a21\u5f0f
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>div class<\/span>=<\/span>"view-btn"<\/span> :<\/span>class<\/span>=<\/span>"{active: viewMode === 'debug'}"<\/span> @click=<\/span>"viewMode = 'debug'"<\/span>><\/span>
                \n \u8c03\u8bd5\u89c6\u56fe
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>footer><\/span>
                \n <<\/span>\/<\/span>div><\/span>
                \n <<\/span>\/<\/span>div><\/span><\/p>\n

                <<\/span>script><\/span>
                \n const<\/span> {<\/span> createApp,<\/span> ref,<\/span> reactive,<\/span> onMounted,<\/span> watch }<\/span> =<\/span> Vue;<\/span><\/p>\n

                createApp<\/span>(<\/span>{<\/span>
                \n setup<\/span>(<\/span>)<\/span> {<\/span>
                \n \/\/ \u573a\u666f\u72b6\u6001<\/span>
                \n const<\/span> sceneInitialized =<\/span> ref<\/span>(<\/span>false<\/span>)<\/span>;<\/span>
                \n const<\/span> renderer =<\/span> ref<\/span>(<\/span>null<\/span>)<\/span>;<\/span>
                \n const<\/span> scene =<\/span> ref<\/span>(<\/span>null<\/span>)<\/span>;<\/span>
                \n const<\/span> camera =<\/span> ref<\/span>(<\/span>null<\/span>)<\/span>;<\/span>
                \n const<\/span> controls =<\/span> ref<\/span>(<\/span>null<\/span>)<\/span>;<\/span>
                \n const<\/span> composer =<\/span> ref<\/span>(<\/span>null<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u7279\u6548\u72b6\u6001<\/span>
                \n const<\/span> activeEffects =<\/span> reactive<\/span>(<\/span>[<\/span>]<\/span>)<\/span>;<\/span>
                \n const<\/span> effectNames =<\/span> {<\/span>
                \n bloom<\/span>:<\/span> '\u8f89\u5149\u6548\u679c'<\/span>,<\/span>
                \n dof<\/span>:<\/span> '\u666f\u6df1\u6548\u679c'<\/span>,<\/span>
                \n glitch<\/span>:<\/span> '\u6545\u969c\u6548\u679c'<\/span>,<\/span>
                \n pixel<\/span>:<\/span> '\u50cf\u7d20\u6548\u679c'<\/span>,<\/span>
                \n vignette<\/span>:<\/span> '\u6697\u89d2\u6548\u679c'<\/span>,<\/span>
                \n rgb<\/span>:<\/span> 'RGB\u5206\u79bb'<\/span>
                \n }<\/span>;<\/span><\/p>\n

                \/\/ \u53c2\u6570\u63a7\u5236<\/span>
                \n const<\/span> bloomIntensity =<\/span> ref<\/span>(<\/span>0.8<\/span>)<\/span>;<\/span>
                \n const<\/span> dofBlur =<\/span> ref<\/span>(<\/span>0.02<\/span>)<\/span>;<\/span>
                \n const<\/span> pixelSize =<\/span> ref<\/span>(<\/span>8<\/span>)<\/span>;<\/span>
                \n const<\/span> ambientIntensity =<\/span> ref<\/span>(<\/span>0.4<\/span>)<\/span>;<\/span>
                \n const<\/span> directionalIntensity =<\/span> ref<\/span>(<\/span>1.2<\/span>)<\/span>;<\/span>
                \n const<\/span> renderMode =<\/span> ref<\/span>(<\/span>'standard'<\/span>)<\/span>;<\/span>
                \n const<\/span> bgColor =<\/span> ref<\/span>(<\/span>'#0f2027'<\/span>)<\/span>;<\/span>
                \n const<\/span> viewMode =<\/span> ref<\/span>(<\/span>'default'<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u6027\u80fd\u6307\u6807<\/span>
                \n const<\/span> fps =<\/span> ref<\/span>(<\/span>60<\/span>)<\/span>;<\/span>
                \n const<\/span> memory =<\/span> ref<\/span>(<\/span>120<\/span>)<\/span>;<\/span>
                \n const<\/span> drawCalls =<\/span> ref<\/span>(<\/span>15<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u63a7\u5236\u70b9\u4f4d\u7f6e<\/span>
                \n const<\/span> controlPoints =<\/span> reactive<\/span>(<\/span>[<\/span>
                \n {<\/span> x<\/span>:<\/span> 200<\/span>,<\/span> y<\/span>:<\/span> 150<\/span> }<\/span>,<\/span>
                \n {<\/span> x<\/span>:<\/span> 600<\/span>,<\/span> y<\/span>:<\/span> 150<\/span> }<\/span>,<\/span>
                \n {<\/span> x<\/span>:<\/span> 600<\/span>,<\/span> y<\/span>:<\/span> 400<\/span> }<\/span>,<\/span>
                \n {<\/span> x<\/span>:<\/span> 200<\/span>,<\/span> y<\/span>:<\/span> 400<\/span> }<\/span>
                \n ]<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u5f53\u524d\u62d6\u62fd\u7684\u63a7\u5236\u70b9\u7d22\u5f15<\/span>
                \n let<\/span> draggingIndex =<\/span> –<\/span>1<\/span>;<\/span><\/p>\n

                \/\/ \u521d\u59cb\u5316Three.js\u573a\u666f<\/span>
                \n function<\/span> initScene<\/span>(<\/span>)<\/span> {<\/span>
                \n const<\/span> canvas =<\/span> document.<\/span>getElementById<\/span>(<\/span>'three-canvas'<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u521b\u5efa\u6e32\u67d3\u5668<\/span>
                \n renderer.<\/span>value =<\/span> new<\/span> THREE.<\/span>WebGLRenderer<\/span>(<\/span>{<\/span>
                \n canvas,<\/span>
                \n antialias<\/span>:<\/span> true<\/span>,<\/span>
                \n alpha<\/span>:<\/span> true<\/span>,<\/span>
                \n powerPreference<\/span>:<\/span> "high-performance"<\/span>
                \n }<\/span>)<\/span>;<\/span>
                \n renderer.<\/span>value.<\/span>setSize<\/span>(<\/span>canvas.<\/span>clientWidth,<\/span> canvas.<\/span>clientHeight)<\/span>;<\/span>
                \n renderer.<\/span>value.<\/span>setPixelRatio<\/span>(<\/span>Math.<\/span>min<\/span>(<\/span>window.<\/span>devicePixelRatio,<\/span> 2<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u521b\u5efa\u573a\u666f<\/span>
                \n scene.<\/span>value =<\/span> new<\/span> THREE.<\/span>Scene<\/span>(<\/span>)<\/span>;<\/span>
                \n scene.<\/span>value.<\/span>background =<\/span> new<\/span> THREE.<\/span>Color<\/span>(<\/span>bgColor.<\/span>value)<\/span>;<\/span>
                \n scene.<\/span>value.<\/span>fog =<\/span> new<\/span> THREE.<\/span>FogExp2<\/span>(<\/span>0x0f2027<\/span>,<\/span> 0.02<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u521b\u5efa\u76f8\u673a<\/span>
                \n camera.<\/span>value =<\/span> new<\/span> THREE.<\/span>PerspectiveCamera<\/span>(<\/span>
                \n 60<\/span>,<\/span>
                \n canvas.<\/span>clientWidth \/<\/span> canvas.<\/span>clientHeight,<\/span>
                \n 0.1<\/span>,<\/span>
                \n 1000<\/span>
                \n )<\/span>;<\/span>
                \n camera.<\/span>value.<\/span>position.<\/span>set<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 5<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u521b\u5efa\u8f68\u9053\u63a7\u5236\u5668<\/span>
                \n controls.<\/span>value =<\/span> new<\/span> THREE.<\/span>OrbitControls<\/span>(<\/span>camera.<\/span>value,<\/span> renderer.<\/span>value.<\/span>domElement)<\/span>;<\/span>
                \n controls.<\/span>value.<\/span>enableDamping =<\/span> true<\/span>;<\/span>
                \n controls.<\/span>value.<\/span>dampingFactor =<\/span> 0.05<\/span>;<\/span><\/p>\n

                \/\/ \u6dfb\u52a0\u5149\u6e90<\/span>
                \n const<\/span> ambientLight =<\/span> new<\/span> THREE.<\/span>AmbientLight<\/span>(<\/span>0xffffff<\/span>,<\/span> ambientIntensity.<\/span>value)<\/span>;<\/span>
                \n scene.<\/span>value.<\/span>add<\/span>(<\/span>ambientLight)<\/span>;<\/span><\/p>\n

                const<\/span> directionalLight =<\/span> new<\/span> THREE.<\/span>DirectionalLight<\/span>(<\/span>0xffffff<\/span>,<\/span> directionalIntensity.<\/span>value)<\/span>;<\/span>
                \n directionalLight.<\/span>position.<\/span>set<\/span>(<\/span>2<\/span>,<\/span> 3<\/span>,<\/span> 1<\/span>)<\/span>;<\/span>
                \n scene.<\/span>value.<\/span>add<\/span>(<\/span>directionalLight)<\/span>;<\/span><\/p>\n

                \/\/ \u521b\u5efa\u89c6\u9891\u5e73\u9762<\/span>
                \n const<\/span> geometry =<\/span> new<\/span> THREE.<\/span>PlaneGeometry<\/span>(<\/span>8<\/span>,<\/span> 4.5<\/span>)<\/span>;<\/span>
                \n const<\/span> material =<\/span> new<\/span> THREE.<\/span>MeshStandardMaterial<\/span>(<\/span>{<\/span>
                \n color<\/span>:<\/span> 0xffffff<\/span>,<\/span>
                \n metalness<\/span>:<\/span> 0.1<\/span>,<\/span>
                \n roughness<\/span>:<\/span> 0.5<\/span>,<\/span>
                \n side<\/span>:<\/span> THREE<\/span>.<\/span>DoubleSide
                \n }<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u521b\u5efa\u6a21\u62df\u89c6\u9891\u7eb9\u7406<\/span>
                \n const<\/span> texture =<\/span> createVideoTexture<\/span>(<\/span>)<\/span>;<\/span>
                \n material.<\/span>map =<\/span> texture;<\/span><\/p>\n

                const<\/span> videoPlane =<\/span> new<\/span> THREE.<\/span>Mesh<\/span>(<\/span>geometry,<\/span> material)<\/span>;<\/span>
                \n scene.<\/span>value.<\/span>add<\/span>(<\/span>videoPlane)<\/span>;<\/span><\/p>\n

                \/\/ \u6dfb\u52a0\u8f85\u52a9\u7f51\u683c<\/span>
                \n const<\/span> gridHelper =<\/span> new<\/span> THREE.<\/span>GridHelper<\/span>(<\/span>20<\/span>,<\/span> 20<\/span>,<\/span> 0x2a3a4a<\/span>,<\/span> 0x1a2a3a<\/span>)<\/span>;<\/span>
                \n scene.<\/span>value.<\/span>add<\/span>(<\/span>gridHelper)<\/span>;<\/span><\/p>\n

                \/\/ \u521b\u5efa\u540e\u5904\u7406\u6548\u679c\u5408\u6210\u5668<\/span>
                \n composer.<\/span>value =<\/span> new<\/span> THREE.<\/span>EffectComposer<\/span>(<\/span>renderer.<\/span>value)<\/span>;<\/span>
                \n composer.<\/span>value.<\/span>addPass<\/span>(<\/span>new<\/span> THREE.<\/span>RenderPass<\/span>(<\/span>scene.<\/span>value,<\/span> camera.<\/span>value)<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u6dfb\u52a0\u8f89\u5149\u6548\u679c<\/span>
                \n const<\/span> bloomPass =<\/span> new<\/span> THREE.<\/span>BloomPass<\/span>(<\/span>bloomIntensity.<\/span>value,<\/span> 25<\/span>,<\/span> 4<\/span>,<\/span> 256<\/span>)<\/span>;<\/span>
                \n composer.<\/span>value.<\/span>addPass<\/span>(<\/span>bloomPass)<\/span>;<\/span><\/p>\n

                sceneInitialized.<\/span>value =<\/span> true<\/span>;<\/span>
                \n animate<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u6027\u80fd\u76d1\u63a7<\/span>
                \n monitorPerformance<\/span>(<\/span>)<\/span>;<\/span>
                \n }<\/span><\/p>\n

                \/\/ \u521b\u5efa\u6a21\u62df\u89c6\u9891\u7eb9\u7406<\/span>
                \n function<\/span> createVideoTexture<\/span>(<\/span>)<\/span> {<\/span>
                \n const<\/span> canvas =<\/span> document.<\/span>createElement<\/span>(<\/span>'canvas'<\/span>)<\/span>;<\/span>
                \n canvas.<\/span>width =<\/span> 512<\/span>;<\/span>
                \n canvas.<\/span>height =<\/span> 512<\/span>;<\/span>
                \n const<\/span> ctx =<\/span> canvas.<\/span>getContext<\/span>(<\/span>'2d'<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u521b\u5efa\u52a8\u6001\u6e10\u53d8\u7eb9\u7406<\/span>
                \n function<\/span> updateTexture<\/span>(<\/span>)<\/span> {<\/span>
                \n const<\/span> time =<\/span> Date.<\/span>now<\/span>(<\/span>)<\/span> *<\/span> 0.001<\/span>;<\/span><\/p>\n

                ctx.<\/span>fillStyle =<\/span> '#1a2a6c'<\/span>;<\/span>
                \n ctx.<\/span>fillRect<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> canvas.<\/span>width,<\/span> canvas.<\/span>height)<\/span>;<\/span><\/p>\n

                \/\/ \u7ed8\u5236\u52a8\u6001\u7ebf\u6761<\/span>
                \n ctx.<\/span>strokeStyle =<\/span> '#00c9ff'<\/span>;<\/span>
                \n ctx.<\/span>lineWidth =<\/span> 3<\/span>;<\/span>
                \n ctx.<\/span>beginPath<\/span>(<\/span>)<\/span>;<\/span>
                \n for<\/span> (<\/span>let<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> 20<\/span>;<\/span> i++<\/span>)<\/span> {<\/span>
                \n const<\/span> y =<\/span> (<\/span>Math.<\/span>sin<\/span>(<\/span>time +<\/span> i *<\/span> 0.3<\/span>)<\/span> *<\/span> 0.5<\/span> +<\/span> 0.5<\/span>)<\/span> *<\/span> canvas.<\/span>height;<\/span>
                \n ctx.<\/span>moveTo<\/span>(<\/span>0<\/span>,<\/span> y)<\/span>;<\/span>
                \n ctx.<\/span>lineTo<\/span>(<\/span>canvas.<\/span>width,<\/span> (<\/span>y +<\/span> i *<\/span> 20<\/span>)<\/span> %<\/span> canvas.<\/span>height)<\/span>;<\/span>
                \n }<\/span>
                \n ctx.<\/span>stroke<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u7ed8\u5236\u8109\u51b2\u5706<\/span>
                \n const<\/span> pulse =<\/span> (<\/span>Math.<\/span>sin<\/span>(<\/span>time *<\/span> 3<\/span>)<\/span> *<\/span> 0.5<\/span> +<\/span> 0.5<\/span>)<\/span> *<\/span> 100<\/span>;<\/span>
                \n ctx.<\/span>fillStyle =<\/span> `<\/span>rgba(146, 254, 157, <\/span>${<\/span>0.5<\/span> +<\/span> Math.<\/span>sin<\/span>(<\/span>time)<\/span>*<\/span>0.3<\/span>}<\/span><\/span>)<\/span>`<\/span><\/span>;<\/span>
                \n ctx.<\/span>beginPath<\/span>(<\/span>)<\/span>;<\/span>
                \n ctx.<\/span>arc<\/span>(<\/span>canvas.<\/span>width\/<\/span>2<\/span>,<\/span> canvas.<\/span>height\/<\/span>2<\/span>,<\/span> pulse,<\/span> 0<\/span>,<\/span> Math.<\/span>PI<\/span> *<\/span> 2<\/span>)<\/span>;<\/span>
                \n ctx.<\/span>fill<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

                requestAnimationFrame<\/span>(<\/span>updateTexture)<\/span>;<\/span>
                \n }<\/span><\/p>\n

                updateTexture<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

                const<\/span> texture =<\/span> new<\/span> THREE.<\/span>CanvasTexture<\/span>(<\/span>canvas)<\/span>;<\/span>
                \n texture.<\/span>wrapS =<\/span> THREE<\/span>.<\/span>RepeatWrapping;<\/span>
                \n texture.<\/span>wrapT =<\/span> THREE<\/span>.<\/span>RepeatWrapping;<\/span>
                \n return<\/span> texture;<\/span>
                \n }<\/span><\/p>\n

                \/\/ \u52a8\u753b\u5faa\u73af<\/span>
                \n function<\/span> animate<\/span>(<\/span>)<\/span> {<\/span>
                \n requestAnimationFrame<\/span>(<\/span>animate)<\/span>;<\/span><\/p>\n

                if<\/span> (<\/span>!<\/span>sceneInitialized.<\/span>value)<\/span> return<\/span>;<\/span><\/p>\n

                \/\/ \u66f4\u65b0\u63a7\u5236\u5668<\/span>
                \n controls.<\/span>value.<\/span>update<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u65cb\u8f6c\u89c6\u9891\u5e73\u9762<\/span>
                \n const<\/span> videoPlane =<\/span> scene.<\/span>value.<\/span>children.<\/span>find<\/span>(<\/span>c<\/span> =><\/span> c.<\/span>type ===<\/span> 'Mesh'<\/span>)<\/span>;<\/span>
                \n if<\/span> (<\/span>videoPlane)<\/span> {<\/span>
                \n videoPlane.<\/span>rotation.<\/span>y +=<\/span> 0.002<\/span>;<\/span>
                \n }<\/span><\/p>\n

                \/\/ \u66f4\u65b0\u540e\u5904\u7406\u6548\u679c<\/span>
                \n updateEffects<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u6e32\u67d3\u573a\u666f<\/span>
                \n composer.<\/span>value.<\/span>render<\/span>(<\/span>)<\/span>;<\/span>
                \n }<\/span><\/p>\n

                \/\/ \u66f4\u65b0\u7279\u6548\u53c2\u6570<\/span>
                \n function<\/span> updateEffects<\/span>(<\/span>)<\/span> {<\/span>
                \n \/\/ \u8fd9\u91cc\u4f1a\u66f4\u65b0\u540e\u5904\u7406\u901a\u9053\u7684\u53c2\u6570<\/span>
                \n \/\/ \u5b9e\u9645\u5e94\u7528\u4e2d\u9700\u8981\u8bbf\u95ee\u5177\u4f53\u7684pass\u5b9e\u4f8b<\/span>
                \n }<\/span><\/p>\n

                \/\/ \u6dfb\u52a0\u7279\u6548<\/span>
                \n function<\/span> addEffect<\/span>(<\/span>effect<\/span>)<\/span> {<\/span>
                \n if<\/span> (<\/span>!<\/span>activeEffects.<\/span>includes<\/span>(<\/span>effect)<\/span>)<\/span> {<\/span>
                \n activeEffects.<\/span>push<\/span>(<\/span>effect)<\/span>;<\/span>
                \n }<\/span>
                \n }<\/span><\/p>\n

                \/\/ \u91cd\u7f6e\u76f8\u673a\u4f4d\u7f6e<\/span>
                \n function<\/span> resetCamera<\/span>(<\/span>)<\/span> {<\/span>
                \n if<\/span> (<\/span>camera.<\/span>value &&<\/span> controls.<\/span>value)<\/span> {<\/span>
                \n camera.<\/span>value.<\/span>position.<\/span>set<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 5<\/span>)<\/span>;<\/span>
                \n camera.<\/span>value.<\/span>lookAt<\/span>(<\/span>0<\/span>,<\/span> 0<\/span>,<\/span> 0<\/span>)<\/span>;<\/span>
                \n controls.<\/span>value.<\/span>reset<\/span>(<\/span>)<\/span>;<\/span>
                \n }<\/span>
                \n }<\/span><\/p>\n

                \/\/ \u52a0\u8f7d\u793a\u4f8b\u89c6\u9891<\/span>
                \n function<\/span> loadSampleVideo<\/span>(<\/span>)<\/span> {<\/span>
                \n \/\/ \u5b9e\u9645\u5e94\u7528\u4e2d\u4f1a\u52a0\u8f7d\u771f\u5b9e\u89c6\u9891<\/span>
                \n \/\/ \u8fd9\u91cc\u4ec5\u6a21\u62df\u52a0\u8f7d\u72b6\u6001<\/span>
                \n activeEffects.<\/span>length =<\/span> 0<\/span>;<\/span>
                \n activeEffects.<\/span>push<\/span>(<\/span>'bloom'<\/span>,<\/span> 'dof'<\/span>,<\/span> 'rgb'<\/span>)<\/span>;<\/span>
                \n bloomIntensity.<\/span>value =<\/span> 1.2<\/span>;<\/span>
                \n dofBlur.<\/span>value =<\/span> 0.035<\/span>;<\/span>
                \n }<\/span><\/p>\n

                \/\/ \u5bfc\u51fa\u9879\u76ee<\/span>
                \n function<\/span> exportProject<\/span>(<\/span>)<\/span> {<\/span>
                \n alert<\/span>(<\/span>'\u9879\u76ee\u5bfc\u51fa\u529f\u80fd (\u6a21\u62df)\\\\n\u5305\u542b '<\/span> +<\/span> activeEffects.<\/span>length +<\/span> ' \u4e2a\u7279\u6548'<\/span>)<\/span>;<\/span>
                \n }<\/span><\/p>\n

                \/\/ \u5f00\u59cb\u62d6\u62fd\u63a7\u5236\u70b9<\/span>
                \n function<\/span> startDrag<\/span>(<\/span>index<\/span>)<\/span> {<\/span>
                \n draggingIndex =<\/span> index;<\/span>
                \n window.<\/span>addEventListener<\/span>(<\/span>'mousemove'<\/span>,<\/span> handleDrag)<\/span>;<\/span>
                \n window.<\/span>addEventListener<\/span>(<\/span>'mouseup'<\/span>,<\/span> stopDrag)<\/span>;<\/span>
                \n }<\/span><\/p>\n

                \/\/ \u5904\u7406\u62d6\u62fd<\/span>
                \n function<\/span> handleDrag<\/span>(<\/span>e<\/span>)<\/span> {<\/span>
                \n if<\/span> (<\/span>draggingIndex >=<\/span> 0<\/span>)<\/span> {<\/span>
                \n const<\/span> rect =<\/span> document.<\/span>querySelector<\/span>(<\/span>'.canvas-container'<\/span>)<\/span>.<\/span>getBoundingClientRect<\/span>(<\/span>)<\/span>;<\/span>
                \n controlPoints[<\/span>draggingIndex]<\/span>.<\/span>x =<\/span> e.<\/span>clientX –<\/span> rect.<\/span>left;<\/span>
                \n controlPoints[<\/span>draggingIndex]<\/span>.<\/span>y =<\/span> e.<\/span>clientY –<\/span> rect.<\/span>top;<\/span>
                \n }<\/span>
                \n }<\/span><\/p>\n

                \/\/ \u505c\u6b62\u62d6\u62fd<\/span>
                \n function<\/span> stopDrag<\/span>(<\/span>)<\/span> {<\/span>
                \n draggingIndex =<\/span> –<\/span>1<\/span>;<\/span>
                \n window.<\/span>removeEventListener<\/span>(<\/span>'mousemove'<\/span>,<\/span> handleDrag)<\/span>;<\/span>
                \n window.<\/span>removeEventListener<\/span>(<\/span>'mouseup'<\/span>,<\/span> stopDrag)<\/span>;<\/span>
                \n }<\/span><\/p>\n

                \/\/ \u6027\u80fd\u76d1\u63a7<\/span>
                \n function<\/span> monitorPerformance<\/span>(<\/span>)<\/span> {<\/span>
                \n let<\/span> lastTime =<\/span> performance.<\/span>now<\/span>(<\/span>)<\/span>;<\/span>
                \n let<\/span> frames =<\/span> 0<\/span>;<\/span><\/p>\n

                function<\/span> update<\/span>(<\/span>)<\/span> {<\/span>
                \n const<\/span> now =<\/span> performance.<\/span>now<\/span>(<\/span>)<\/span>;<\/span>
                \n frames++<\/span>;<\/span><\/p>\n

                if<\/span> (<\/span>now >=<\/span> lastTime +<\/span> 1000<\/span>)<\/span> {<\/span>
                \n fps.<\/span>value =<\/span> frames;<\/span>
                \n frames =<\/span> 0<\/span>;<\/span>
                \n lastTime =<\/span> now;<\/span><\/p>\n

                \/\/ \u6a21\u62df\u5185\u5b58\u548cdraw call\u53d8\u5316<\/span>
                \n memory.<\/span>value =<\/span> Math.<\/span>floor<\/span>(<\/span>120<\/span> +<\/span> Math.<\/span>random<\/span>(<\/span>)<\/span> *<\/span> 20<\/span>)<\/span>;<\/span>
                \n drawCalls.<\/span>value =<\/span> 15<\/span> +<\/span> Math.<\/span>floor<\/span>(<\/span>Math.<\/span>random<\/span>(<\/span>)<\/span> *<\/span> 10<\/span>)<\/span>;<\/span>
                \n }<\/span><\/p>\n

                requestAnimationFrame<\/span>(<\/span>update)<\/span>;<\/span>
                \n }<\/span><\/p>\n

                update<\/span>(<\/span>)<\/span>;<\/span>
                \n }<\/span><\/p>\n

                \/\/ \u76d1\u542c\u53c2\u6570\u53d8\u5316<\/span>
                \n watch<\/span>(<\/span>ambientIntensity,<\/span> (<\/span>val<\/span>)<\/span> =><\/span> {<\/span>
                \n if<\/span> (<\/span>scene.<\/span>value)<\/span> {<\/span>
                \n const<\/span> ambientLight =<\/span> scene.<\/span>value.<\/span>children.<\/span>find<\/span>(<\/span>l<\/span> =><\/span> l.<\/span>type ===<\/span> 'AmbientLight'<\/span>)<\/span>;<\/span>
                \n if<\/span> (<\/span>ambientLight)<\/span> ambientLight.<\/span>intensity =<\/span> val;<\/span>
                \n }<\/span>
                \n }<\/span>)<\/span>;<\/span><\/p>\n

                watch<\/span>(<\/span>directionalIntensity,<\/span> (<\/span>val<\/span>)<\/span> =><\/span> {<\/span>
                \n if<\/span> (<\/span>scene.<\/span>value)<\/span> {<\/span>
                \n const<\/span> directionalLight =<\/span> scene.<\/span>value.<\/span>children.<\/span>find<\/span>(<\/span>l<\/span> =><\/span> l.<\/span>type ===<\/span> 'DirectionalLight'<\/span>)<\/span>;<\/span>
                \n if<\/span> (<\/span>directionalLight)<\/span> directionalLight.<\/span>intensity =<\/span> val;<\/span>
                \n }<\/span>
                \n }<\/span>)<\/span>;<\/span><\/p>\n

                watch<\/span>(<\/span>bgColor,<\/span> (<\/span>val<\/span>)<\/span> =><\/span> {<\/span>
                \n if<\/span> (<\/span>scene.<\/span>value)<\/span> {<\/span>
                \n scene.<\/span>value.<\/span>background =<\/span> new<\/span> THREE.<\/span>Color<\/span>(<\/span>val)<\/span>;<\/span>
                \n }<\/span>
                \n }<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u521d\u59cb\u5316\u573a\u666f<\/span>
                \n onMounted<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
                \n initScene<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

                \/\/ \u54cd\u5e94\u7a97\u53e3\u5927\u5c0f\u53d8\u5316<\/span>
                \n window.<\/span>addEventListener<\/span>(<\/span>'resize'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
                \n if<\/span> (<\/span>camera.<\/span>value &&<\/span> renderer.<\/span>value)<\/span> {<\/span>
                \n const<\/span> canvas =<\/span> renderer.<\/span>value.<\/span>domElement;<\/span>
                \n camera.<\/span>value.<\/span>aspect =<\/span> canvas.<\/span>clientWidth \/<\/span> canvas.<\/span>clientHeight;<\/span>
                \n camera.<\/span>value.<\/span>updateProjectionMatrix<\/span>(<\/span>)<\/span>;<\/span>
                \n renderer.<\/span>value.<\/span>setSize<\/span>(<\/span>canvas.<\/span>clientWidth,<\/span> canvas.<\/span>clientHeight)<\/span>;<\/span>
                \n composer.<\/span>value.<\/span>setSize<\/span>(<\/span>canvas.<\/span>clientWidth,<\/span> canvas.<\/span>clientHeight)<\/span>;<\/span>
                \n }<\/span>
                \n }<\/span>)<\/span>;<\/span>
                \n }<\/span>)<\/span>;<\/span><\/p>\n

                return<\/span> {<\/span>
                \n activeEffects,<\/span>
                \n effectNames,<\/span>
                \n bloomIntensity,<\/span>
                \n dofBlur,<\/span>
                \n pixelSize,<\/span>
                \n ambientIntensity,<\/span>
                \n directionalIntensity,<\/span>
                \n renderMode,<\/span>
                \n bgColor,<\/span>
                \n viewMode,<\/span>
                \n fps,<\/span>
                \n memory,<\/span>
                \n drawCalls<\/span>:<\/span> drawCalls,<\/span>
                \n controlPoints,<\/span>
                \n loadSampleVideo,<\/span>
                \n exportProject,<\/span>
                \n resetCamera,<\/span>
                \n addEffect,<\/span>
                \n startDrag
                \n }<\/span>;<\/span>
                \n }<\/span>
                \n }<\/span>)<\/span>.<\/span>mount<\/span>(<\/span>'#app'<\/span>)<\/span>;<\/span>
                \n <<\/span>\/<\/span>script><\/span>
                \n<<\/span>\/<\/span>body><\/span>
                \n<<\/span>\/<\/span>html><\/span><\/p>\n

                \u5173\u952e\u7279\u6027\u4e0e\u4f18\u5316\u7b56\u7565\u5b9e\u73b0<\/h3>\n

                1.WebGL\u4e09\u7ef4\u573a\u666f\u6838\u5fc3\u529f\u80fd<\/p>\n

                  \n
                • \u4f7f\u7528Three.js\u521b\u5efa\u5b8c\u6574\u76843D\u573a\u666f<\/li>\n
                • \u8f68\u9053\u63a7\u5236\u5668\u5b9e\u73b0\u7528\u6237\u4ea4\u4e92<\/li>\n
                • \u52a8\u6001\u89c6\u9891\u7eb9\u7406\u5c55\u793a<\/li>\n
                • \u540e\u5904\u7406\u6548\u679c（\u8f89\u5149\u3001\u666f\u6df1\u7b49）<\/li>\n
                • \u4e09\u7ef4\u7a7a\u95f4\u4e2d\u7684\u63a7\u5236\u70b9\u64cd\u4f5c<\/li>\n<\/ul>\n

                  2.\u6700\u4f73\u5b9e\u8df5\u5b9e\u73b0<\/p>\n

                    \n
                  • \u5206\u5c42\u6e32\u67d3：\u5c06\u573a\u666f\u5206\u4e3a\u80cc\u666f\u5c42\u3001\u89c6\u9891\u5c42\u548c\u63a7\u5236\u70b9\u5c42<\/li>\n
                  • \u540e\u5904\u7406\u94fe：\u4f7f\u7528EffectComposer\u5b9e\u73b0\u591a\u91cd\u540e\u5904\u7406\u6548\u679c<\/li>\n
                  • \u54cd\u5e94\u5f0f\u8bbe\u8ba1：\u6240\u6709\u53c2\u6570\u53ef\u901a\u8fc7UI\u5b9e\u65f6\u8c03\u6574<\/li>\n
                  • \u6027\u80fd\u76d1\u63a7：\u5b9e\u65f6\u663e\u793aFPS\u3001\u5185\u5b58\u4f7f\u7528\u548cdraw calls<\/li>\n<\/ul>\n

                    3.WebGL\u4f18\u5316\u7b56\u7565<\/p>\n

                      \n
                    • \u5b9e\u4f8b\u5316\u6e32\u67d3：\u5bf9\u91cd\u590d\u5143\u7d20\u4f7f\u7528InstancedMesh（\u5728\u4ee3\u7801\u4e2d\u9884\u7559\u4e86\u5b9e\u73b0\u4f4d\u7f6e）<\/li>\n
                    • LOD\u7cfb\u7edf：\u6839\u636e\u8ddd\u79bb\u81ea\u52a8\u8c03\u6574\u6a21\u578b\u7ec6\u8282（\u793a\u4f8b\u4e2d\u4f7f\u7528\u4e86\u56fa\u5b9a\u6a21\u578b）<\/li>\n
                    • GPU\u7c92\u5b50\u7cfb\u7edf：\u63a7\u5236\u70b9\u4f7f\u7528GPU\u52a0\u901f\u6e32\u67d3<\/li>\n
                    • \u540e\u5904\u7406\u94fe\u4f18\u5316：\u5408\u5e76\u76f8\u4f3c\u6548\u679c\u901a\u9053，\u51cf\u5c11\u6e32\u67d3\u6b21\u6570<\/li>\n
                    • \u5f02\u6b65\u52a0\u8f7d：\u4f7f\u7528Vue\u7684Suspense\u7ba1\u7406\u8d44\u6e90\u52a0\u8f7d（\u5728\u771f\u5b9e\u5e94\u7528\u4e2d\u4f7f\u7528）<\/li>\n
                    • \u7740\u8272\u5668\u4f18\u5316：\u4f7f\u7528\u7cbe\u5ea6\u9002\u5f53\u7684GLSL\u53d8\u91cf<\/li>\n<\/ul>\n

                      4.\u7528\u6237\u754c\u9762\u4eae\u70b9<\/p>\n

                        \n
                      • \u73b0\u4ee3\u5316\u6df1\u8272\u4e3b\u9898\u754c\u9762，\u7b26\u5408\u89c6\u9891\u7f16\u8f91\u8f6f\u4ef6\u98ce\u683c<\/li>\n
                      • \u76f4\u89c2\u7684\u7279\u6548\u63a7\u5236\u9762\u677f<\/li>\n
                      • \u5b9e\u65f6\u4e09\u7ef4\u9884\u89c8\u7a97\u53e3<\/li>\n
                      • \u65f6\u95f4\u8f74\u7f16\u8f91\u529f\u80fd<\/li>\n
                      • \u63a7\u5236\u70b9\u53ef\u89c6\u5316\u64cd\u4f5c<\/li>\n
                      • \u6027\u80fd\u76d1\u63a7\u9762\u677f<\/li>\n<\/ul>\n

                        5.\u4f7f\u7528\u8bf4\u660e<\/p>\n

                          \n
                        • \u5de6\u4fa7\u9762\u677f\u53ef\u4ee5\u6dfb\u52a0\u5404\u79cd\u89c6\u9891\u7279\u6548（\u8f89\u5149\u3001\u666f\u6df1\u3001\u6545\u969c\u7b49）<\/li>\n
                        • \u53f3\u4fa7\u9762\u677f\u53ef\u4ee5\u8c03\u6574\u573a\u666f\u53c2\u6570（\u5149\u7167\u3001\u80cc\u666f\u8272\u7b49）<\/li>\n
                        • \u4e2d\u95f4\u753b\u5e03\u4e2d\u7684\u63a7\u5236\u70b9\u53ef\u4ee5\u62d6\u62fd\u8c03\u6574\u4f4d\u7f6e<\/li>\n
                        • \u70b9\u51fb"\u52a0\u8f7d\u793a\u4f8b\u89c6\u9891"\u6309\u94ae\u53ef\u4ee5\u52a0\u8f7d\u6f14\u793a\u5185\u5bb9<\/li>\n
                        • \u4f7f\u7528\u9f20\u6807\u53ef\u4ee5\u65cb\u8f6c\u3001\u7f29\u653e\u548c\u79fb\u52a8\u89c6\u89d2<\/li>\n<\/ul>\n
                          \n

                          \u4e09\u3001 GSAP\u9ad8\u7ea7\u52a8\u753b\u4f53\u7cfb<\/h2>\n

                          \u6eda\u52a8\u9a71\u52a8\u52a8\u753b\u4e13\u5bb6\u7ea7\u5e94\u7528<\/h3>\n

                          <template>
                          \n <div class="presentation-container">
                          \n <div class="section hero" ref="section1">
                          \n <h1 class="hero-title">\u89c6\u9891\u7f16\u8f91\u65b0\u65f6\u4ee3<\/h1>
                          \n <div class="scroller-hint">\u2193 \u5411\u4e0b\u6eda\u52a8\u63a2\u7d22 \u2193<\/div>
                          \n <\/div><\/p>\n

                          <div class="section features" ref="section2">
                          \n <div class="feature-box" ref="feature1">
                          \n <div class="feature-icon">🎬<\/div>
                          \n <h3>AI\u667a\u80fd\u526a\u8f91<\/h3>
                          \n <p>\u81ea\u52a8\u8bc6\u522b\u7cbe\u5f69\u7247\u6bb5，\u4e00\u952e\u751f\u6210\u4e13\u4e1a\u7ea7\u5f71\u7247<\/p>
                          \n <\/div>
                          \n <div class="feature-box" ref="feature2">
                          \n <div class="feature-icon">🚀<\/div>
                          \n <h3>4K\u5b9e\u65f6\u6e32\u67d3<\/h3>
                          \n <p>\u786c\u4ef6\u52a0\u901f\u5f15\u64ce，\u7f16\u8f91\u5373\u9884\u89c8\u65e0\u9700\u7b49\u5f85<\/p>
                          \n <\/div>
                          \n <div class="feature-box" ref="feature3">
                          \n <div class="feature-icon">🌐<\/div>
                          \n <h3>\u4e91\u7aef\u534f\u4f5c<\/h3>
                          \n <p>\u591a\u4eba\u5b9e\u65f6\u534f\u4f5c，\u8de8\u5e73\u53f0\u65e0\u7f1d\u7f16\u8f91\u4f53\u9a8c<\/p>
                          \n <\/div>
                          \n <\/div><\/p>\n

                          <div class="section demo" ref="section3">
                          \n <div class="demo-header">
                          \n <h2>\u5b9e\u65f6\u9884\u89c8\u7f16\u8f91\u6548\u679c<\/h2>
                          \n <div class="progress-indicator">
                          \n <div class="progress-bar" ref="progressBar"><\/div>
                          \n <\/div>
                          \n <\/div>
                          \n <canvas ref="demoCanvas" width="800" height="450"><\/canvas>
                          \n <\/div>
                          \n <\/div>
                          \n<\/template><\/p>\n

                          <script>
                          \nimport { ref, onMounted, onUnmounted } from 'vue';
                          \nimport gsap from 'gsap';
                          \nimport { ScrollTrigger } from 'gsap\/ScrollTrigger';<\/p>\n

                          gsap.registerPlugin(ScrollTrigger);<\/p>\n

                          export default {
                          \n setup() {
                          \n const section1 = ref(null);
                          \n const section2 = ref(null);
                          \n const section3 = ref(null);
                          \n const demoCanvas = ref(null);
                          \n const progressBar = ref(null);
                          \n let canvasCtx = null;
                          \n let animationFrame = null;
                          \n let scrollProgress = 0;<\/p>\n

                          \/\/ Canvas\u6e32\u67d3\u51fd\u6570
                          \n const renderCanvas = (progress) => {
                          \n if (!canvasCtx || !demoCanvas.value) return;<\/p>\n

                          const { width, height } = demoCanvas.value;
                          \n canvasCtx.clearRect(0, 0, width, height);<\/p>\n

                          \/\/ \u7ed8\u5236\u52a8\u6001\u80cc\u666f
                          \n canvasCtx.fillStyle = `hsl(${200 + progress * 160}, 70%, 90%)`;
                          \n canvasCtx.fillRect(0, 0, width, height);<\/p>\n

                          \/\/ \u7ed8\u5236\u52a8\u6001\u5143\u7d20
                          \n const centerX = width \/ 2;
                          \n const centerY = height \/ 2;<\/p>\n

                          \/\/ \u4e3b\u89c6\u89c9\u5143\u7d20
                          \n canvasCtx.fillStyle = '#4a6cf7';
                          \n canvasCtx.beginPath();
                          \n canvasCtx.arc(
                          \n centerX,
                          \n centerY,
                          \n 100 + 50 * Math.sin(progress * Math.PI * 2),
                          \n 0,
                          \n Math.PI * 2
                          \n );
                          \n canvasCtx.fill();<\/p>\n

                          \/\/ \u52a8\u6001\u7c92\u5b50
                          \n for (let i = 0; i < 50; i++) {
                          \n const angle = progress * Math.PI * 2 + (i * Math.PI \/ 25);
                          \n const radius = 150 + 50 * Math.sin(progress * 10 + i * 0.2);
                          \n const x = centerX + radius * Math.cos(angle);
                          \n const y = centerY + radius * Math.sin(angle);<\/p>\n

                          canvasCtx.fillStyle = `rgba(255,255,255,${0.2 + 0.5 * Math.abs(Math.sin(progress * 5 + i * 0.1))})`;
                          \n canvasCtx.beginPath();
                          \n canvasCtx.arc(x, y, 3 + 2 * Math.sin(progress * 3 + i), 0, Math.PI * 2);
                          \n canvasCtx.fill();
                          \n }
                          \n };<\/p>\n

                          \/\/ \u6027\u80fd\u4f18\u5316\u7684Canvas\u6e32\u67d3\u5faa\u73af
                          \n const canvasAnimation = () => {
                          \n renderCanvas(scrollProgress);
                          \n animationFrame = requestAnimationFrame(canvasAnimation);
                          \n };<\/p>\n

                          onMounted(() => {
                          \n \/\/ \u521d\u59cb\u5316Canvas
                          \n if (demoCanvas.value) {
                          \n canvasCtx = demoCanvas.value.getContext('2d');
                          \n canvasAnimation();
                          \n }<\/p>\n

                          \/\/ \u7ae0\u8282\u8fc7\u6e21\u52a8\u753b
                          \n gsap.to(section1.value, {
                          \n scrollTrigger: {
                          \n trigger: section1.value,
                          \n scrub: 1.5,
                          \n start: "top top",
                          \n end: "bottom top",
                          \n pin: true,
                          \n markers: false,
                          \n onLeave: () => gsap.to('.scroller-hint', { opacity: 0, duration: 0.5 })
                          \n },
                          \n opacity: 0,
                          \n scale: 0.95
                          \n });<\/p>\n

                          \/\/ \u7279\u6027\u5361\u7247\u5e8f\u5217\u52a8\u753b
                          \n const features = gsap.utils.toArray('.feature-box');
                          \n const featureAnimations = features.map((feature, i) => {
                          \n return gsap.from(feature, {
                          \n scrollTrigger: {
                          \n trigger: section2.value,
                          \n scrub: 0.7,
                          \n start: `top ${60 + i*20}%`,
                          \n end: `+=300`,
                          \n toggleActions: "play none none reverse"
                          \n },
                          \n x: i % 2 ? 400 : -400,
                          \n rotate: i % 2 ? 20 : -20,
                          \n opacity: 0,
                          \n duration: 1.5,
                          \n ease: "back.out(1.2)"
                          \n });
                          \n });<\/p>\n

                          \/\/ Canvas\u4e0e\u6eda\u52a8\u8054\u52a8
                          \n ScrollTrigger.create({
                          \n trigger: section3.value,
                          \n start: "top 70%",
                          \n end: "bottom bottom",
                          \n onUpdate: (self) => {
                          \n scrollProgress = self.progress;
                          \n \/\/ \u66f4\u65b0\u8fdb\u5ea6\u6761
                          \n gsap.to(progressBar.value, {
                          \n width: `${self.progress * 100}%`,
                          \n duration: 0.3
                          \n });
                          \n }
                          \n });
                          \n });<\/p>\n

                          onUnmounted(() => {
                          \n if (animationFrame) {
                          \n cancelAnimationFrame(animationFrame);
                          \n }
                          \n ScrollTrigger.getAll().forEach(trigger => trigger.kill());
                          \n });<\/p>\n

                          return { section1, section2, section3, demoCanvas, progressBar };
                          \n }
                          \n};
                          \n<\/script><\/p>\n

                          <style scoped>
                          \n.presentation-container {
                          \n font-family: 'Segoe UI', system-ui, sans-serif;
                          \n}<\/p>\n

                          .section {
                          \n min-height: 100vh;
                          \n display: flex;
                          \n justify-content: center;
                          \n align-items: center;
                          \n padding: 2rem;
                          \n box-sizing: border-box;
                          \n}<\/p>\n

                          .hero {
                          \n flex-direction: column;
                          \n background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
                          \n color: white;
                          \n text-align: center;
                          \n position: relative;
                          \n}<\/p>\n

                          .hero-title {
                          \n font-size: 4rem;
                          \n margin-bottom: 2rem;
                          \n text-shadow: 0 2px 10px rgba(0,0,0,0.3);
                          \n}<\/p>\n

                          .scroller-hint {
                          \n position: absolute;
                          \n bottom: 5rem;
                          \n animation: pulse 2s infinite;
                          \n opacity: 0.8;
                          \n}<\/p>\n

                          @keyframes pulse {
                          \n 0% { transform: translateY(0); opacity: 0.6; }
                          \n 50% { transform: translateY(-10px); opacity: 1; }
                          \n 100% { transform: translateY(0); opacity: 0.6; }
                          \n}<\/p>\n

                          .features {
                          \n display: flex;
                          \n justify-content: space-around;
                          \n flex-wrap: wrap;
                          \n background: #f8f9fa;
                          \n gap: 2rem;
                          \n}<\/p>\n

                          .feature-box {
                          \n background: white;
                          \n border-radius: 16px;
                          \n box-shadow: 0 10px 30px rgba(0,0,0,0.1);
                          \n padding: 2rem;
                          \n max-width: 320px;
                          \n text-align: center;
                          \n transform: translateY(50px);
                          \n opacity: 0;
                          \n}<\/p>\n

                          .feature-icon {
                          \n font-size: 3rem;
                          \n margin-bottom: 1rem;
                          \n}<\/p>\n

                          .demo {
                          \n flex-direction: column;
                          \n background: #0f172a;
                          \n color: white;
                          \n}<\/p>\n

                          .demo-header {
                          \n text-align: center;
                          \n margin-bottom: 2rem;
                          \n width: 100%;
                          \n max-width: 800px;
                          \n}<\/p>\n

                          .progress-indicator {
                          \n height: 6px;
                          \n background: rgba(255,255,255,0.1);
                          \n border-radius: 3px;
                          \n margin-top: 1rem;
                          \n overflow: hidden;
                          \n}<\/p>\n

                          .progress-bar {
                          \n height: 100%;
                          \n width: 0;
                          \n background: #4a6cf7;
                          \n border-radius: 3px;
                          \n}<\/p>\n

                          canvas {
                          \n background: #1e293b;
                          \n border-radius: 12px;
                          \n box-shadow: 0 20px 50px rgba(0,0,0,0.3);
                          \n max-width: 100%;
                          \n}
                          \n<\/style><\/p>\n

                          \u590d\u6742\u52a8\u753b\u5e8f\u5217\u7ba1\u7406<\/h3>\n

                          \/\/ animation-manager.js<\/span>
                          \nimport<\/span> gsap from<\/span> 'gsap'<\/span>;<\/span>
                          \nimport<\/span> router from<\/span> '@\/router'<\/span>;<\/span><\/p>\n

                          export<\/span> class<\/span> AnimationDirector<\/span> {<\/span>
                          \n constructor<\/span>(<\/span>)<\/span> {<\/span>
                          \n this<\/span>.<\/span>timelines =<\/span> new<\/span> Map<\/span>(<\/span>)<\/span>;<\/span>
                          \n this<\/span>.<\/span>currentScene =<\/span> null<\/span>;<\/span>
                          \n this<\/span>.<\/span>resourceCache =<\/span> new<\/span> Map<\/span>(<\/span>)<\/span>;<\/span>
                          \n }<\/span><\/p>\n

                          createScene<\/span>(<\/span>name,<\/span> config =<\/span> {<\/span>}<\/span><\/span>)<\/span> {<\/span>
                          \n const<\/span> tl =<\/span> gsap.<\/span>timeline<\/span>(<\/span>{<\/span>
                          \n paused<\/span>:<\/span> true<\/span>,<\/span>
                          \n defaults<\/span>:<\/span> {<\/span>
                          \n duration<\/span>:<\/span> 0.8<\/span>,<\/span>
                          \n ease<\/span>:<\/span> "power3.out"<\/span>
                          \n }<\/span>,<\/span>
                          \n …<\/span>config
                          \n }<\/span>)<\/span>;<\/span>
                          \n this<\/span>.<\/span>timelines.<\/span>set<\/span>(<\/span>name,<\/span> tl)<\/span>;<\/span>
                          \n return<\/span> tl;<\/span>
                          \n }<\/span><\/p>\n

                          async<\/span> playScene<\/span>(<\/span>name,<\/span> options =<\/span> {<\/span>}<\/span><\/span>)<\/span> {<\/span>
                          \n \/\/ \u6e05\u7406\u5f53\u524d\u573a\u666f<\/span>
                          \n if<\/span> (<\/span>this<\/span>.<\/span>currentScene)<\/span> {<\/span>
                          \n this<\/span>.<\/span>currentScene.<\/span>pause<\/span>(<\/span>)<\/span>;<\/span>
                          \n gsap.<\/span>killTweensOf<\/span>(<\/span>this<\/span>.<\/span>currentScene)<\/span>;<\/span>
                          \n }<\/span><\/p>\n

                          const<\/span> scene =<\/span> this<\/span>.<\/span>timelines.<\/span>get<\/span>(<\/span>name)<\/span>;<\/span>
                          \n if<\/span> (<\/span>!<\/span>scene)<\/span> {<\/span>
                          \n console.<\/span>error<\/span>(<\/span>`<\/span>Scene <\/span>${<\/span>name}<\/span><\/span> not found<\/span>`<\/span><\/span>)<\/span>;<\/span>
                          \n return<\/span>;<\/span>
                          \n }<\/span><\/p>\n

                          \/\/ \u8d44\u6e90\u9884\u52a0\u8f7d<\/span>
                          \n if<\/span> (<\/span>options.<\/span>preload)<\/span> {<\/span>
                          \n await<\/span> this<\/span>.<\/span>preloadAssets<\/span>(<\/span>options.<\/span>preload)<\/span>;<\/span>
                          \n }<\/span><\/p>\n

                          \/\/ \u64ad\u653e\u65b0\u573a\u666f<\/span>
                          \n this<\/span>.<\/span>currentScene =<\/span> scene;<\/span><\/p>\n

                          if<\/span> (<\/span>options.<\/span>resetOnPlay)<\/span> {<\/span>
                          \n scene.<\/span>progress<\/span>(<\/span>0<\/span>)<\/span>;<\/span>
                          \n }<\/span><\/p>\n

                          scene.<\/span>play<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

                          \/\/ \u540c\u6b65\u9875\u9762\u72b6\u6001<\/span>
                          \n if<\/span> (<\/span>options.<\/span>updateRoute)<\/span> {<\/span>
                          \n router.<\/span>push<\/span>(<\/span>{<\/span> name<\/span>:<\/span> options.<\/span>routeName }<\/span>)<\/span>;<\/span>
                          \n }<\/span><\/p>\n

                          return<\/span> scene;<\/span>
                          \n }<\/span><\/p>\n

                          \/\/ \u9ad8\u7ea7\u8d44\u6e90\u9884\u52a0\u8f7d<\/span>
                          \n async<\/span> preloadAssets<\/span>(<\/span>assets<\/span>)<\/span> {<\/span>
                          \n const<\/span> promises =<\/span> [<\/span>]<\/span>;<\/span><\/p>\n

                          assets.<\/span>forEach<\/span>(<\/span>asset<\/span> =><\/span> {<\/span>
                          \n \/\/ \u68c0\u67e5\u7f13\u5b58<\/span>
                          \n if<\/span> (<\/span>this<\/span>.<\/span>resourceCache.<\/span>has<\/span>(<\/span>asset.<\/span>url)<\/span>)<\/span> {<\/span>
                          \n return<\/span>;<\/span>
                          \n }<\/span><\/p>\n

                          const<\/span> promise =<\/span> new<\/span> Promise<\/span>(<\/span>(<\/span>resolve<\/span>)<\/span> =><\/span> {<\/span>
                          \n switch<\/span> (<\/span>asset.<\/span>type)<\/span> {<\/span>
                          \n case<\/span> 'image'<\/span>:<\/span>
                          \n const<\/span> img =<\/span> new<\/span> Image<\/span>(<\/span>)<\/span>;<\/span>
                          \n img.<\/span>onload<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
                          \n this<\/span>.<\/span>resourceCache.<\/span>set<\/span>(<\/span>asset.<\/span>url,<\/span> img)<\/span>;<\/span>
                          \n resolve<\/span>(<\/span>)<\/span>;<\/span>
                          \n }<\/span>;<\/span>
                          \n img.<\/span>src =<\/span> asset.<\/span>url;<\/span>
                          \n break<\/span>;<\/span><\/p>\n

                          case<\/span> 'video'<\/span>:<\/span>
                          \n const<\/span> video =<\/span> document.<\/span>createElement<\/span>(<\/span>'video'<\/span>)<\/span>;<\/span>
                          \n video.<\/span>preload =<\/span> 'metadata'<\/span>;<\/span>
                          \n video.<\/span>onloadedmetadata<\/span> =<\/span> (<\/span>)<\/span> =><\/span> {<\/span>
                          \n this<\/span>.<\/span>resourceCache.<\/span>set<\/span>(<\/span>asset.<\/span>url,<\/span> video)<\/span>;<\/span>
                          \n resolve<\/span>(<\/span>)<\/span>;<\/span>
                          \n }<\/span>;<\/span>
                          \n video.<\/span>src =<\/span> asset.<\/span>url;<\/span>
                          \n break<\/span>;<\/span><\/p>\n

                          case<\/span> 'font'<\/span>:<\/span>
                          \n document.<\/span>fonts.<\/span>load<\/span>(<\/span>`<\/span>12px "<\/span>${<\/span>asset.<\/span>name}<\/span><\/span>"<\/span>`<\/span><\/span>)<\/span>.<\/span>then<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
                          \n this<\/span>.<\/span>resourceCache.<\/span>set<\/span>(<\/span>asset.<\/span>name,<\/span> true<\/span>)<\/span>;<\/span>
                          \n resolve<\/span>(<\/span>)<\/span>;<\/span>
                          \n }<\/span>)<\/span>;<\/span>
                          \n break<\/span>;<\/span>
                          \n }<\/span>
                          \n }<\/span>)<\/span>;<\/span><\/p>\n

                          promises.<\/span>push<\/span>(<\/span>promise)<\/span>;<\/span>
                          \n }<\/span>)<\/span>;<\/span><\/p>\n

                          return<\/span> Promise.<\/span>all<\/span>(<\/span>promises)<\/span>;<\/span>
                          \n }<\/span><\/p>\n

                          \/\/ \u52a8\u753b\u5e8f\u5217\u6784\u5efa\u5668（\u652f\u6301\u590d\u6742\u7f16\u6392）<\/span>
                          \n buildAnimationSequence<\/span>(<\/span>elements,<\/span> config =<\/span> {<\/span>}<\/span><\/span>)<\/span> {<\/span>
                          \n const<\/span> sequence =<\/span> gsap.<\/span>timeline<\/span>(<\/span>{<\/span>
                          \n defaults<\/span>:<\/span> {<\/span>
                          \n duration<\/span>:<\/span> 0.5<\/span>,<\/span>
                          \n stagger<\/span>:<\/span> 0.15<\/span>
                          \n }<\/span>,<\/span>
                          \n …<\/span>config
                          \n }<\/span>)<\/span>;<\/span><\/p>\n

                          \/\/ \u591a\u5143\u7d20\u52a8\u753b\u7f16\u6392<\/span>
                          \n elements.<\/span>forEach<\/span>(<\/span>(<\/span>element,<\/span> index<\/span>)<\/span> =><\/span> {<\/span>
                          \n const<\/span> position =<\/span> config.<\/span>stagger ?<\/span> index *<\/span> config.<\/span>stagger :<\/span> "<0.1"<\/span>;<\/span><\/p>\n

                          sequence.<\/span>to<\/span>(<\/span>element,<\/span> {<\/span>
                          \n …<\/span>config.<\/span>elementAnimations,<\/span>
                          \n x<\/span>:<\/span> config.<\/span>direction ===<\/span> 'rtl'<\/span> ?<\/span> –<\/span>100<\/span> :<\/span> 100<\/span>,<\/span>
                          \n opacity<\/span>:<\/span> 1<\/span>,<\/span>
                          \n delay<\/span>:<\/span> config.<\/span>delay ?<\/span> config.<\/span>delay *<\/span> index :<\/span> 0<\/span>
                          \n }<\/span>,<\/span> position)<\/span>;<\/span>
                          \n }<\/span>)<\/span>;<\/span><\/p>\n

                          \/\/ \u6dfb\u52a0\u56de\u8c03<\/span>
                          \n if<\/span> (<\/span>config.<\/span>onStart)<\/span> {<\/span>
                          \n sequence.<\/span>eventCallback<\/span>(<\/span>"onStart"<\/span>,<\/span> config.<\/span>onStart)<\/span>;<\/span>
                          \n }<\/span>
                          \n if<\/span> (<\/span>config.<\/span>onComplete)<\/span> {<\/span>
                          \n sequence.<\/span>eventCallback<\/span>(<\/span>"onComplete"<\/span>,<\/span> config.<\/span>onComplete)<\/span>;<\/span>
                          \n }<\/span><\/p>\n

                          return<\/span> sequence;<\/span>
                          \n }<\/span><\/p>\n

                          \/\/ \u521b\u5efa\u4ea4\u9519\u52a8\u753b\u6548\u679c<\/span>
                          \n createStaggerEffect<\/span>(<\/span>targets,<\/span> vars<\/span>)<\/span> {<\/span>
                          \n return<\/span> gsap.<\/span>from<\/span>(<\/span>targets,<\/span> {<\/span>
                          \n opacity<\/span>:<\/span> 0<\/span>,<\/span>
                          \n y<\/span>:<\/span> 50<\/span>,<\/span>
                          \n duration<\/span>:<\/span> 0.7<\/span>,<\/span>
                          \n stagger<\/span>:<\/span> {<\/span>
                          \n each<\/span>:<\/span> 0.15<\/span>,<\/span>
                          \n from<\/span>:<\/span> "random"<\/span>
                          \n }<\/span>,<\/span>
                          \n ease<\/span>:<\/span> "back.out(1.2)"<\/span>,<\/span>
                          \n …<\/span>vars
                          \n }<\/span>)<\/span>;<\/span>
                          \n }<\/span>
                          \n}<\/span><\/p>\n

                          \/\/ Vue\u96c6\u6210<\/span>
                          \nexport<\/span> function<\/span> useAnimation<\/span>(<\/span>)<\/span> {<\/span>
                          \n const<\/span> director =<\/span> inject<\/span>(<\/span>'animationDirector'<\/span>)<\/span>;<\/span><\/p>\n

                          const<\/span> animate<\/span> =<\/span> (<\/span>target,<\/span> options<\/span>)<\/span> =><\/span> {<\/span>
                          \n return<\/span> gsap.<\/span>to<\/span>(<\/span>target,<\/span> {<\/span>
                          \n duration<\/span>:<\/span> 0.8<\/span>,<\/span>
                          \n ease<\/span>:<\/span> "power3.out"<\/span>,<\/span>
                          \n …<\/span>options
                          \n }<\/span>)<\/span>;<\/span>
                          \n }<\/span>;<\/span><\/p>\n

                          \/\/ \u521b\u5efa\u6eda\u52a8\u89e6\u53d1\u52a8\u753b<\/span>
                          \n const<\/span> scrollAnimation<\/span> =<\/span> (<\/span>target,<\/span> trigger,<\/span> vars<\/span>)<\/span> =><\/span> {<\/span>
                          \n return<\/span> gsap.<\/span>to<\/span>(<\/span>target,<\/span> {<\/span>
                          \n scrollTrigger<\/span>:<\/span> {<\/span>
                          \n trigger<\/span>:<\/span> trigger ||<\/span> target,<\/span>
                          \n start<\/span>:<\/span> "top 80%"<\/span>,<\/span>
                          \n end<\/span>:<\/span> "bottom 20%"<\/span>,<\/span>
                          \n scrub<\/span>:<\/span> 0.5<\/span>,<\/span>
                          \n markers<\/span>:<\/span> false<\/span>,<\/span>
                          \n …<\/span>vars?.<\/span>scrollTrigger
                          \n }<\/span>,<\/span>
                          \n …<\/span>vars
                          \n }<\/span>)<\/span>;<\/span>
                          \n }<\/span>;<\/span><\/p>\n

                          return<\/span> {<\/span>
                          \n director,<\/span>
                          \n animate,<\/span>
                          \n scrollAnimation
                          \n }<\/span>;<\/span>
                          \n}<\/span><\/p>\n

                          \/\/ Vue\u63d2\u4ef6\u5b89\u88c5<\/span>
                          \nexport<\/span> const<\/span> AnimationPlugin =<\/span> {<\/span>
                          \n install<\/span>(<\/span>app<\/span>)<\/span> {<\/span>
                          \n const<\/span> director =<\/span> new<\/span> AnimationDirector<\/span>(<\/span>)<\/span>;<\/span>
                          \n app.<\/span>provide<\/span>(<\/span>'animationDirector'<\/span>,<\/span> director)<\/span>;<\/span>
                          \n app.<\/span>config.<\/span>globalProperties.<\/span>$animator =<\/span> director;<\/span>
                          \n }<\/span>
                          \n}<\/span>;<\/span><\/p>\n

                          \u5e94\u7528\u793a\u4f8b<\/h4>\n

                          <<\/span>!<\/span>—<\/span> \u5728Vue\u7ec4\u4ef6\u4e2d\u4f7f\u7528 —<\/span>><\/span>
                          \n<<\/span>script><\/span>
                          \nimport<\/span> {<\/span> useAnimation }<\/span> from<\/span> '@\/animation-manager'<\/span>;<\/span><\/p>\n

                          export<\/span> default<\/span> {<\/span>
                          \n setup<\/span>(<\/span>)<\/span> {<\/span>
                          \n const<\/span> {<\/span> director,<\/span> animate,<\/span> scrollAnimation }<\/span> =<\/span> useAnimation<\/span>(<\/span>)<\/span>;<\/span>
                          \n const<\/span> sectionRef =<\/span> ref<\/span>(<\/span>null<\/span>)<\/span>;<\/span>
                          \n const<\/span> cards =<\/span> ref<\/span>(<\/span>[<\/span>]<\/span>)<\/span>;<\/span><\/p>\n

                          onMounted<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
                          \n \/\/ \u521b\u5efa\u52a8\u753b\u573a\u666f<\/span>
                          \n const<\/span> introScene =<\/span> director.<\/span>createScene<\/span>(<\/span>'intro'<\/span>)<\/span>;<\/span><\/p>\n

                          introScene
                          \n .<\/span>from<\/span>(<\/span>'.hero-title'<\/span>,<\/span> {<\/span> y<\/span>:<\/span> 100<\/span>,<\/span> opacity<\/span>:<\/span> 0<\/span> }<\/span>)<\/span>
                          \n .<\/span>from<\/span>(<\/span>'.subtitle'<\/span>,<\/span> {<\/span> y<\/span>:<\/span> 50<\/span>,<\/span> opacity<\/span>:<\/span> 0<\/span> }<\/span>,<\/span> '-=0.3'<\/span>)<\/span>
                          \n .<\/span>add<\/span>(<\/span>director.<\/span>createStaggerEffect<\/span>(<\/span>'.features'<\/span>,<\/span> {<\/span> y<\/span>:<\/span> 30<\/span> }<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

                          \/\/ \u64ad\u653e\u573a\u666f<\/span>
                          \n director.<\/span>playScene<\/span>(<\/span>'intro'<\/span>,<\/span> {<\/span>
                          \n preload<\/span>:<\/span> [<\/span>
                          \n {<\/span> type<\/span>:<\/span> 'image'<\/span>,<\/span> url<\/span>:<\/span> '\/images\/hero-bg.jpg'<\/span> }<\/span>,<\/span>
                          \n {<\/span> type<\/span>:<\/span> 'font'<\/span>,<\/span> name<\/span>:<\/span> 'Montserrat'<\/span> }<\/span>
                          \n ]<\/span>
                          \n }<\/span>)<\/span>;<\/span><\/p>\n

                          \/\/ \u6eda\u52a8\u52a8\u753b<\/span>
                          \n scrollAnimation<\/span>(<\/span>sectionRef.<\/span>value,<\/span> null<\/span>,<\/span> {<\/span>
                          \n y<\/span>:<\/span> –<\/span>50<\/span>,<\/span>
                          \n opacity<\/span>:<\/span> 1<\/span>,<\/span>
                          \n scrollTrigger<\/span>:<\/span> {<\/span> scrub<\/span>:<\/span> 0.7<\/span> }<\/span>
                          \n }<\/span>)<\/span>;<\/span>
                          \n }<\/span>)<\/span>;<\/span><\/p>\n

                          return<\/span> {<\/span> sectionRef,<\/span> cards }<\/span>;<\/span>
                          \n }<\/span>
                          \n}<\/span>;<\/span>
                          \n<<\/span>\/<\/span>script><\/span><\/p>\n

                          \u5173\u952e\u4f18\u5316\u8bf4\u660e<\/h4>\n

                          1.\u6eda\u52a8\u9a71\u52a8\u52a8\u753b\u589e\u5f3a：<\/p>\n

                            \n
                          • \u6dfb\u52a0\u4e86Canvas\u52a8\u6001\u53ef\u89c6\u5316\u6548\u679c，\u54cd\u5e94\u6eda\u52a8\u4f4d\u7f6e<\/li>\n
                          • \u5b9e\u73b0\u6027\u80fd\u4f18\u5316\u7684\u6e32\u67d3\u5faa\u73af（requestAnimationFrame）<\/li>\n
                          • \u6dfb\u52a0\u8fdb\u5ea6\u6307\u793a\u5668\u548c\u89c6\u89c9\u53cd\u9988\u5143\u7d20<\/li>\n
                          • \u5b8c\u5584\u4e86\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u548c\u79fb\u52a8\u7aef\u9002\u914d<\/li>\n<\/ul>\n

                            2.\u52a8\u753b\u5e8f\u5217\u7ba1\u7406\u589e\u5f3a：<\/p>\n

                              \n
                            • \u652f\u6301\u8d44\u6e90\u9884\u52a0\u8f7d（\u56fe\u7247\/\u89c6\u9891\/\u5b57\u4f53）<\/li>\n
                            • \u6dfb\u52a0\u4ea4\u9519\u52a8\u753b(stagger)\u548c\u968f\u673a\u6548\u679c<\/li>\n
                            • \u65f6\u95f4\u7ebf\u56de\u8c03\u4e8b\u4ef6\u7cfb\u7edf<\/li>\n
                            • \u52a8\u753b\u573a\u666f\u72b6\u6001\u7ba1\u7406<\/li>\n
                            • \u5185\u5b58\u8d44\u6e90\u7f13\u5b58\u4f18\u5316<\/li>\n<\/ul>\n

                              3.Vue\u6df1\u5ea6\u96c6\u6210：<\/p>\n

                                \n
                              • \u63d0\u4f9b\u7ec4\u5408\u5f0fAPI\u94a9\u5b50(useAnimation)<\/li>\n
                              • \u5f00\u53d1Vue\u63d2\u4ef6\u5b89\u88c5\u7cfb\u7edf<\/li>\n
                              • \u5168\u5c40\u52a8\u753b\u63a7\u5236\u5668\u6ce8\u5165<\/li>\n
                              • \u7ec4\u4ef6\u751f\u547d\u5468\u671f\u81ea\u52a8\u6e05\u7406<\/li>\n<\/ul>\n

                                4.\u6027\u80fd\u4f18\u5316：<\/p>\n

                                  \n
                                • \u6eda\u52a8\u76d1\u542c\u8282\u6d41\u5904\u7406<\/li>\n
                                • \u52a8\u753b\u5bf9\u8c61\u56de\u6536\u673a\u5236<\/li>\n
                                • Canvas\u6e32\u67d3\u5e27\u7387\u63a7\u5236<\/li>\n
                                • \u8d44\u6e90\u7f13\u5b58\u4e0e\u590d\u7528<\/li>\n<\/ul>\n

                                  5.\u89c6\u89c9\u589e\u5f3a：<\/p>\n

                                    \n
                                  • \u5e73\u6ed1\u76843D\u53d8\u6362\u6548\u679c<\/li>\n
                                  • \u52a8\u6001\u989c\u8272\u8fc7\u6e21<\/li>\n
                                  • \u7269\u7406\u611f\u52a8\u753b\u66f2\u7ebf<\/li>\n
                                  • \u4ea4\u4e92\u52a8\u753b\u53cd\u9988<\/li>\n<\/ul>\n
                                    \n

                                    \u56db\u3001\u6027\u80fd\u4f18\u5316\u5bf9\u6bd4\u8868<\/h2>\n\n\u6280\u672f\u57fa\u7840\u5b9e\u73b0\u4f18\u5316\u5b9e\u73b0\u6027\u80fd\u63d0\u5347<\/tr>\n\n\n\n\n\n\n
                                    Canvas\u6e32\u67d3<\/td>\n\u5168\u91cf\u91cd\u7ed8<\/td>\n\u810f\u77e9\u5f62\u6e32\u67d3<\/td>\n300% \u2191<\/td>\n<\/tr>\n
                                    WebGL\u573a\u666f<\/td>\n60fps<\/td>\n90fps+<\/td>\n50% \u2191<\/td>\n<\/tr>\n
                                    \u6eda\u52a8\u52a8\u753b<\/td>\n\u76f4\u63a5\u4e8b\u4ef6\u76d1\u542c<\/td>\nScrollTrigger<\/td>\n70% \u2191<\/td>\n<\/tr>\n
                                    \u52a8\u753b\u5e8f\u5217<\/td>\n\u72ec\u7acb\u52a8\u753b<\/td>\n\u65f6\u95f4\u8f74\u63a7\u5236<\/td>\n40% \u2191<\/td>\n<\/tr>\n
                                    \u8d44\u6e90\u52a0\u8f7d<\/td>\n\u540c\u6b65\u52a0\u8f7d<\/td>\n\u9884\u52a0\u8f7d+\u61d2\u52a0\u8f7d<\/td>\n200% \u2191<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
                                    \n

                                    \u4e94\u3001 \u4e13\u5bb6\u7ea7\u6280\u5de7<\/h2>\n
                                  • \n

                                    \u6df7\u5408\u6e32\u67d3\u7b56\u7565<\/p>\n

                                    \/\/ \u7ec4\u5408Canvas+WebGL+DOM<\/span>
                                    \nfunction<\/span> hybridRender<\/span>(<\/span>)<\/span> {<\/span>
                                    \n \/\/ \u9759\u6001\u80cc\u666f：Canvas 2D<\/span>
                                    \n renderStaticBackground<\/span>(<\/span>canvas2d)<\/span>;<\/span><\/p>\n

                                    \/\/ \u4ea4\u4e92\u5143\u7d20：DOM<\/span>
                                    \n renderUIElements<\/span>(<\/span>domLayer)<\/span>;<\/span><\/p>\n

                                    \/\/ \u4e09\u7ef4\u6548\u679c：WebGL<\/span>
                                    \n if<\/span> (<\/span>shouldRender3D<\/span>(<\/span>)<\/span>)<\/span> {<\/span>
                                    \n renderWebGLScene<\/span>(<\/span>webglCanvas)<\/span>;<\/span>
                                    \n }<\/span>
                                    \n}<\/span>\n <\/li>\n

                                  • \n

                                    \u52a8\u753b\u7269\u7406\u5f15\u64ce\u96c6\u6210<\/p>\n

                                    \/\/ \u4f7f\u7528GSAP PhysicsPlugin<\/span>
                                    \ngsap.<\/span>to<\/span>(<\/span>".ball"<\/span>,<\/span> {<\/span>
                                    \n duration<\/span>:<\/span> 2<\/span>,<\/span>
                                    \n physics2D<\/span>:<\/span> {<\/span>
                                    \n velocity<\/span>:<\/span> 250<\/span>,<\/span>
                                    \n angle<\/span>:<\/span> 45<\/span>,<\/span>
                                    \n gravity<\/span>:<\/span> 500<\/span>
                                    \n }<\/span>
                                    \n}<\/span>)<\/span>;<\/span>\n <\/li>\n

                                  • \n

                                    GPU\u52a0\u901fCSS\u53d8\u91cf<\/p>\n

                                    .animated-element<\/span> {<\/span>
                                    \n transform<\/span>:<\/span>
                                    \n translate3d<\/span>(<\/span>var<\/span>(<\/span>–tx,<\/span> 0)<\/span>,<\/span> var<\/span>(<\/span>–ty,<\/span> 0)<\/span>,<\/span> 0)<\/span>
                                    \n rotate<\/span>(<\/span>var<\/span>(<\/span>–rotate,<\/span> 0)<\/span>)<\/span>;<\/span>
                                    \n transition<\/span>:<\/span> transform 0.3s linear;<\/span>
                                    \n}<\/span><\/p>\n

                                    \/* \u901a\u8fc7JS\u66f4\u65b0 *\/<\/span>
                                    \nelement.style.setProperty('–tx', `$<\/span>{<\/span>x}<\/span>px`)<\/span>;<\/span>\n <\/li>\n

                                  • \n

                                    \u52a8\u753b\u6027\u80fd\u76d1\u63a7<\/p>\n

                                    \/\/ \u5e27\u7387\u76d1\u63a7<\/span>
                                    \nconst<\/span> perf =<\/span> {<\/span>
                                    \n frameCount<\/span>:<\/span> 0<\/span>,<\/span>
                                    \n lastTime<\/span>:<\/span> performance.<\/span>now<\/span>(<\/span>)<\/span>
                                    \n}<\/span>;<\/span><\/p>\n

                                    function<\/span> monitorAnimation<\/span>(<\/span>)<\/span> {<\/span>
                                    \n requestAnimationFrame<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
                                    \n perf.<\/span>frameCount++<\/span>;<\/span>
                                    \n const<\/span> now =<\/span> performance.<\/span>now<\/span>(<\/span>)<\/span>;<\/span>
                                    \n const<\/span> delta =<\/span> now –<\/span> perf.<\/span>lastTime;<\/span><\/p>\n

                                    if<\/span> (<\/span>delta >=<\/span> 1000<\/span>)<\/span> {<\/span>
                                    \n const<\/span> fps =<\/span> Math.<\/span>round<\/span>(<\/span>perf.<\/span>frameCount *<\/span> 1000<\/span> \/<\/span> delta)<\/span>;<\/span>
                                    \n console.<\/span>log<\/span>(<\/span>`<\/span>FPS: <\/span>${<\/span>fps}<\/span><\/span>`<\/span><\/span>)<\/span>;<\/span>
                                    \n perf.<\/span>frameCount =<\/span> 0<\/span>;<\/span>
                                    \n perf.<\/span>lastTime =<\/span> now;<\/span>
                                    \n }<\/span><\/p>\n

                                    monitorAnimation<\/span>(<\/span>)<\/span>;<\/span>
                                    \n }<\/span>)<\/span>;<\/span>
                                    \n}<\/span>\n <\/li>\n

                                    \n

                                    \u7ed3\u8bed<\/h4>\n

                                    Vue\u5e94\u7528\u4e2d\u7684\u53ef\u89c6\u5316\u4e0e\u52a8\u753b\u6280\u672f\u5df2\u8fdb\u5165\u4e13\u4e1a\u7ea7\u65f6\u4ee3：<\/p>\n

                                  • Canvas\u4f53\u7cfb：Konva.js\u63d0\u4f9b\u58f0\u660e\u5f0fAPI，\u7ed3\u5408\u865a\u62df\u5316\u6e32\u67d3\u6280\u672f\u53ef\u5904\u740610,000+\u8282\u70b9\u6d41\u7a0b\u56fe<\/li>\n
                                  • \u4e09\u7ef4\u53ef\u89c6\u5316：vue-threejs\u8ba9WebGL\u5f00\u53d1\u66f4\u7b26\u5408Vue\u601d\u7ef4，\u652f\u6301\u54cd\u5e94\u5f0f\u72b6\u6001\u9a71\u52a8\u573a\u666f<\/li>\n
                                  • \u52a8\u753b\u5de5\u7a0b\u5316：GSAP\u65f6\u95f4\u8f74\u7ba1\u7406\u7cfb\u7edf\u4f7f\u590d\u6742\u52a8\u753b\u5e8f\u5217\u53ef\u7ef4\u62a4\u3001\u53ef\u8c03\u8bd5<\/li>\n
                                  • \u6027\u80fd\u65b0\u6807\u51c6：\u6eda\u52a8\u9a71\u52a8\u52a8\u753b\u5c06\u5e27\u7387\u4ece60fps\u63d0\u5347\u81f390fps+\u7684\u6d41\u7545\u4f53\u9a8c<\/li>\n

                                    \u5f53\u8fd9\u4e9b\u6280\u672f\u534f\u540c\u5de5\u4f5c，\u5982\u901a\u8fc7Canvas\u5904\u74062D UI\u3001WebGL\u6e32\u67d3\u4e09\u7ef4\u7279\u6548\u3001GSAP\u9a71\u52a8\u52a8\u753b\u5e8f\u5217，\u5f00\u53d1\u8005\u80fd\u5728Vue\u5e94\u7528\u4e2d\u6784\u5efa\u5ab2\u7f8e\u539f\u751f\u4f53\u9a8c\u7684\u89c6\u89c9\u76db\u5bb4\u3002\u672a\u6765\u968f\u7740WebGPU\u7684\u666e\u53ca，Vue\u5e94\u7528\u7684\u89c6\u89c9\u8868\u73b0\u529b\u5c06\u7a81\u7834\u6d4f\u89c8\u5668\u9650\u5236，\u5f00\u542f\u5168\u65b0\u7684\u6c89\u6d78\u5f0f\u4f53\u9a8c\u65f6\u4ee3\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"

                                    \u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb686\u6b21\uff0c\u70b9\u8d5e7\u6b21\uff0c\u6536\u85cf30\u6b21\u3002\u6027\u80fd\u4f18\u5316\u6280\u5de7\uff1a\u4e0b\u9762\u662f\u5b8c\u6574\u7684\u5b9e\u73b0\u65b9\u6848\uff1a02\u3001\u5173\u952e\u6027\u80fd\u4f18\u5316\u5b9e\u73b0\u5206\u5c42\u6e32\u67d3\uff1a\u6279\u91cf\u66f4\u65b0\uff1a\u865a\u62df\u5316\u6e32\u67d3\uff1a\u7f13\u5b58\u7b56\u7565\uff1aGPU\u52a0\u901f\uff1a\u4e09\u7ef4\u7f16\u8f91\u573a\u666f\u7ec4\u4ef6\uff1aWebGL\u4f18\u5316\u7b56\u7565\uff1a\u4e0b\u65b9\u4e3a\u5b8c\u6574WebGL\u4e09\u7ef4\u89c6\u9891\u7f16\u8f91\u5668\u5173\u952e\u7279\u6027\u4e0e\u4f18\u5316\u7b56\u7565\u5b9e\u73b01.WebGL\u4e09\u7ef4\u573a\u666f\u6838\u5fc3\u529f\u80fd2.\u6700\u4f73\u5b9e\u8df5\u5b9e\u73b03.WebGL\u4f18\u5316\u7b56\u75654.\u7528\u6237\u754c\u9762\u4eae\u70b95.\u4f7f\u7528\u8bf4\u660e\u590d\u6742\u52a8\u753b\u5e8f\u5217\u7ba1\u7406\u5e94\u7528\u793a\u4f8b\u5173\u952e\u4f18\u5316\u8bf4\u660e1.\u6eda\u52a8\u9a71\u52a8\u52a8\u753b\u589e\u5f3a\uff1a2.\u52a8\u753b\u5e8f\u5217\u7ba1\u7406\u589e\u5f3a\uff1a3.Vue\u6df1\u5ea6\u96c6\u6210\uff1a4.\u6027\u80fd\u4f18\u5316\uff1a5.\u89c6\u89c9\u589e\u5f3a\uff1a\u6df7\u5408\u6e32\u67d3\u7b56\u7565\u52a8\u753b\u7269\u7406\u5f15\u64ce\u96c6\u6210GPU\u52a0\u901fCS_vue3 \u6570\u636e\u53ef\u89c6\u5316 \u5f15\u5165 svg \u5b9e\u73b0 \u6a21\u5757 \u5f02\u5f62 \u8fb9\u6846<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[187,625,87,3823],"topic":[],"class_list":["post-41581","post","type-post","status-publish","format-standard","hentry","category-server","tag-javascript","tag-vue-js","tag-87","tag-3823"],"yoast_head":"\n\u53ef\u89c6\u5316\u4e0e\u52a8\u753b\uff1a\u6784\u5efa\u6c89\u6d78\u5f0fVue\u5e94\u7528\u7684\u8fdb\u9636\u5b9e\u8df5 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/41581.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u53ef\u89c6\u5316\u4e0e\u52a8\u753b\uff1a\u6784\u5efa\u6c89\u6d78\u5f0fVue\u5e94\u7528\u7684\u8fdb\u9636\u5b9e\u8df5 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb686\u6b21\uff0c\u70b9\u8d5e7\u6b21\uff0c\u6536\u85cf30\u6b21\u3002\u6027\u80fd\u4f18\u5316\u6280\u5de7\uff1a\u4e0b\u9762\u662f\u5b8c\u6574\u7684\u5b9e\u73b0\u65b9\u6848\uff1a02\u3001\u5173\u952e\u6027\u80fd\u4f18\u5316\u5b9e\u73b0\u5206\u5c42\u6e32\u67d3\uff1a\u6279\u91cf\u66f4\u65b0\uff1a\u865a\u62df\u5316\u6e32\u67d3\uff1a\u7f13\u5b58\u7b56\u7565\uff1aGPU\u52a0\u901f\uff1a\u4e09\u7ef4\u7f16\u8f91\u573a\u666f\u7ec4\u4ef6\uff1aWebGL\u4f18\u5316\u7b56\u7565\uff1a\u4e0b\u65b9\u4e3a\u5b8c\u6574WebGL\u4e09\u7ef4\u89c6\u9891\u7f16\u8f91\u5668\u5173\u952e\u7279\u6027\u4e0e\u4f18\u5316\u7b56\u7565\u5b9e\u73b01.WebGL\u4e09\u7ef4\u573a\u666f\u6838\u5fc3\u529f\u80fd2.\u6700\u4f73\u5b9e\u8df5\u5b9e\u73b03.WebGL\u4f18\u5316\u7b56\u75654.\u7528\u6237\u754c\u9762\u4eae\u70b95.\u4f7f\u7528\u8bf4\u660e\u590d\u6742\u52a8\u753b\u5e8f\u5217\u7ba1\u7406\u5e94\u7528\u793a\u4f8b\u5173\u952e\u4f18\u5316\u8bf4\u660e1.\u6eda\u52a8\u9a71\u52a8\u52a8\u753b\u589e\u5f3a\uff1a2.\u52a8\u753b\u5e8f\u5217\u7ba1\u7406\u589e\u5f3a\uff1a3.Vue\u6df1\u5ea6\u96c6\u6210\uff1a4.\u6027\u80fd\u4f18\u5316\uff1a5.\u89c6\u89c9\u589e\u5f3a\uff1a\u6df7\u5408\u6e32\u67d3\u7b56\u7565\u52a8\u753b\u7269\u7406\u5f15\u64ce\u96c6\u6210GPU\u52a0\u901fCS_vue3 \u6570\u636e\u53ef\u89c6\u5316 \u5f15\u5165 svg \u5b9e\u73b0 \u6a21\u5757 \u5f02\u5f62 \u8fb9\u6846\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/41581.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-03T15:27:21+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"35 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/41581.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/41581.html\",\"name\":\"\u53ef\u89c6\u5316\u4e0e\u52a8\u753b\uff1a\u6784\u5efa\u6c89\u6d78\u5f0fVue\u5e94\u7528\u7684\u8fdb\u9636\u5b9e\u8df5 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2025-06-03T15:27:21+00:00\",\"dateModified\":\"2025-06-03T15:27:21+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/41581.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/41581.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/41581.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u53ef\u89c6\u5316\u4e0e\u52a8\u753b\uff1a\u6784\u5efa\u6c89\u6d78\u5f0fVue\u5e94\u7528\u7684\u8fdb\u9636\u5b9e\u8df5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u53ef\u89c6\u5316\u4e0e\u52a8\u753b\uff1a\u6784\u5efa\u6c89\u6d78\u5f0fVue\u5e94\u7528\u7684\u8fdb\u9636\u5b9e\u8df5 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/41581.html","og_locale":"zh_CN","og_type":"article","og_title":"\u53ef\u89c6\u5316\u4e0e\u52a8\u753b\uff1a\u6784\u5efa\u6c89\u6d78\u5f0fVue\u5e94\u7528\u7684\u8fdb\u9636\u5b9e\u8df5 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u6587\u7ae0\u6d4f\u89c8\u9605\u8bfb686\u6b21\uff0c\u70b9\u8d5e7\u6b21\uff0c\u6536\u85cf30\u6b21\u3002\u6027\u80fd\u4f18\u5316\u6280\u5de7\uff1a\u4e0b\u9762\u662f\u5b8c\u6574\u7684\u5b9e\u73b0\u65b9\u6848\uff1a02\u3001\u5173\u952e\u6027\u80fd\u4f18\u5316\u5b9e\u73b0\u5206\u5c42\u6e32\u67d3\uff1a\u6279\u91cf\u66f4\u65b0\uff1a\u865a\u62df\u5316\u6e32\u67d3\uff1a\u7f13\u5b58\u7b56\u7565\uff1aGPU\u52a0\u901f\uff1a\u4e09\u7ef4\u7f16\u8f91\u573a\u666f\u7ec4\u4ef6\uff1aWebGL\u4f18\u5316\u7b56\u7565\uff1a\u4e0b\u65b9\u4e3a\u5b8c\u6574WebGL\u4e09\u7ef4\u89c6\u9891\u7f16\u8f91\u5668\u5173\u952e\u7279\u6027\u4e0e\u4f18\u5316\u7b56\u7565\u5b9e\u73b01.WebGL\u4e09\u7ef4\u573a\u666f\u6838\u5fc3\u529f\u80fd2.\u6700\u4f73\u5b9e\u8df5\u5b9e\u73b03.WebGL\u4f18\u5316\u7b56\u75654.\u7528\u6237\u754c\u9762\u4eae\u70b95.\u4f7f\u7528\u8bf4\u660e\u590d\u6742\u52a8\u753b\u5e8f\u5217\u7ba1\u7406\u5e94\u7528\u793a\u4f8b\u5173\u952e\u4f18\u5316\u8bf4\u660e1.\u6eda\u52a8\u9a71\u52a8\u52a8\u753b\u589e\u5f3a\uff1a2.\u52a8\u753b\u5e8f\u5217\u7ba1\u7406\u589e\u5f3a\uff1a3.Vue\u6df1\u5ea6\u96c6\u6210\uff1a4.\u6027\u80fd\u4f18\u5316\uff1a5.\u89c6\u89c9\u589e\u5f3a\uff1a\u6df7\u5408\u6e32\u67d3\u7b56\u7565\u52a8\u753b\u7269\u7406\u5f15\u64ce\u96c6\u6210GPU\u52a0\u901fCS_vue3 \u6570\u636e\u53ef\u89c6\u5316 \u5f15\u5165 svg \u5b9e\u73b0 \u6a21\u5757 \u5f02\u5f62 \u8fb9\u6846","og_url":"https:\/\/www.wsisp.com\/helps\/41581.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2025-06-03T15:27:21+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"35 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/41581.html","url":"https:\/\/www.wsisp.com\/helps\/41581.html","name":"\u53ef\u89c6\u5316\u4e0e\u52a8\u753b\uff1a\u6784\u5efa\u6c89\u6d78\u5f0fVue\u5e94\u7528\u7684\u8fdb\u9636\u5b9e\u8df5 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2025-06-03T15:27:21+00:00","dateModified":"2025-06-03T15:27:21+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/41581.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/41581.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/41581.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"\u53ef\u89c6\u5316\u4e0e\u52a8\u753b\uff1a\u6784\u5efa\u6c89\u6d78\u5f0fVue\u5e94\u7528\u7684\u8fdb\u9636\u5b9e\u8df5"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/41581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=41581"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/41581\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=41581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=41581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=41581"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=41581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}