[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fteam-documents\u002F08":3,"knowledge-related-\u002Fknowledge\u002Fteam-documents\u002F08":1998,"knowledge-series-\u002Fknowledge\u002Fteam-documents\u002F08":2024},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":15,"pinned":16,"draft":16,"body":17,"seo":1994,"stem":1995,"id":1996,"extension":1997},"\u002Fknowledge\u002Fteam-documents\u002F08","属性排序需求","需要实现属性的拖拽排序； 2. 支持同级子项排序，但禁止跨容器拖拽。 例如：A 容器内的项不能拖到 B 容器，只能在 A 容器内部调整顺序（B 容器同理）。","团队文档",[12,13,14],"team","vue","dnd","2024-06-16",false,{"type":18,"value":19,"toc":1990},"minimark",[20,23,27,41,44,51,69,73,80,89,795,801,824,1941,1944,1987],[21,22,8],"h1",{"id":8},[24,25,26],"p",{},"需求背景如下：",[28,29,30,34],"ol",{},[31,32,33],"li",{},"需要实现属性的拖拽排序；",[31,35,36,37,40],{},"支持同级子项排序，但禁止跨容器拖拽。",[38,39],"br",{},"\n例如：A 容器内的项不能拖到 B 容器，只能在 A 容器内部调整顺序（B 容器同理）。",[24,42,43],{},"示意图：",[24,45,46],{},[47,48],"img",{"alt":49,"src":50},"属性排序需求.png","https:\u002F\u002Fcdn.wangxiaoze.cn\u002Fstatic\u002Fimages\u002F237d5dcf-5be0-4336-8118-7ec210c0daa0.png",[24,52,53,54,58,59,62,63,65,66,68],{},"说明：",[55,56,57],"code",{},"规格配置"," 不能拖拽到 ",[55,60,61],{},"行业属性"," 容器，",[55,64,61],{}," 也不能拖拽到 ",[55,67,57],{}," 容器。",[70,71,72],"h2",{"id":72},"实现思路",[24,74,75,76,79],{},"将拖拽排序封装为独立组件 ",[55,77,78],{},"AttrDragItem","，由父组件传入数据并接收更新结果。组件同时支持：",[81,82,83,86],"ul",{},[31,84,85],{},"扁平列表排序；",[31,87,88],{},"树状结构（带子集）排序。",[90,91,95],"pre",{"className":92,"code":93,"language":13,"meta":94,"style":94},"language-vue shiki shiki-themes material-theme-lighter github-light github-dark","\u003C!-- 父组件 -->\n\n\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport attrDragItem from \".\u002FattrDragItem.vue\";\n\nconst test = ref(\n  Array.from({ length: 7 }, (_, i) => ({\n    id: i + 1,\n    name: `C00${i + 1}${\n      [\"白色\", \"黑色\", \"红色\", \"绿色\", \"蓝色\", \"黄色\", \"紫色\"][i]\n    }`,\n    elements: [],\n  }))\n);\nconst test2 = ref([\n  {\n    id: 1,\n    name: \"电机型号\",\n    elements: [\n      {\n        id: 1,\n        name: \"M2\u002FV2\",\n      },\n      {\n        id: 2,\n        name: \"米家\",\n      },\n    ],\n  },\n]);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ch3>颜色配置\u003C\u002Fh3>\n  \u003CattrDragItem\n    :data=\"test\"\n    :is-tree=\"false\"\n    @update:data=\"(newData) => (test = newData)\"\n  \u002F>\n\n  \u003Ch3>规格配置\u003C\u002Fh3>\n  \u003CattrDragItem\n    :data=\"test2\"\n    :is-tree=\"true\"\n    @update:data=\"(newData) => (test2 = newData)\"\n  \u002F>\n  \u003C!-- .... 其他属性配置 -->\n\u003C\u002Ftemplate>\n","",[55,96,97,106,113,147,177,197,202,223,278,298,326,402,410,423,432,439,454,460,471,487,497,503,515,532,538,543,555,571,576,584,590,598,608,613,623,644,652,668,683,698,704,709,726,733,747,761,775,780,786],{"__ignoreMap":94},[98,99,102],"span",{"class":100,"line":101},"line",1,[98,103,105],{"class":104},"sutJx","\u003C!-- 父组件 -->\n",[98,107,109],{"class":100,"line":108},2,[98,110,112],{"emptyLinePlaceholder":111},true,"\n",[98,114,116,120,124,128,131,134,138,142,144],{"class":100,"line":115},3,[98,117,119],{"class":118},"sP7_E","\u003C",[98,121,123],{"class":122},"sQzsp","script",[98,125,127],{"class":126},"s9AJx"," setup",[98,129,130],{"class":126}," lang",[98,132,133],{"class":118},"=",[98,135,137],{"class":136},"sjJ54","\"",[98,139,141],{"class":140},"s_sjI","ts",[98,143,137],{"class":136},[98,145,146],{"class":118},">\n",[98,148,150,154,157,161,164,167,170,172,174],{"class":100,"line":149},4,[98,151,153],{"class":152},"sVHd0","import",[98,155,156],{"class":118}," {",[98,158,160],{"class":159},"su5hD"," ref",[98,162,163],{"class":118}," }",[98,165,166],{"class":152}," from",[98,168,169],{"class":136}," \"",[98,171,13],{"class":140},[98,173,137],{"class":136},[98,175,176],{"class":118},";\n",[98,178,180,182,185,188,190,193,195],{"class":100,"line":179},5,[98,181,153],{"class":152},[98,183,184],{"class":159}," attrDragItem ",[98,186,187],{"class":152},"from",[98,189,169],{"class":136},[98,191,192],{"class":140},".\u002FattrDragItem.vue",[98,194,137],{"class":136},[98,196,176],{"class":118},[98,198,200],{"class":100,"line":199},6,[98,201,112],{"emptyLinePlaceholder":111},[98,203,205,209,213,217,220],{"class":100,"line":204},7,[98,206,208],{"class":207},"sbsja","const",[98,210,212],{"class":211},"s_hVV"," test",[98,214,216],{"class":215},"smGrS"," =",[98,218,160],{"class":219},"sGLFI",[98,221,222],{"class":159},"(\n",[98,224,226,229,232,234,237,240,244,247,251,254,257,261,264,267,270,273,275],{"class":100,"line":225},8,[98,227,228],{"class":159},"  Array",[98,230,231],{"class":118},".",[98,233,187],{"class":219},[98,235,236],{"class":159},"(",[98,238,239],{"class":118},"{",[98,241,243],{"class":242},"skxfh"," length",[98,245,246],{"class":118},":",[98,248,250],{"class":249},"srdBf"," 7",[98,252,253],{"class":118}," },",[98,255,256],{"class":118}," (",[98,258,260],{"class":259},"s99_P","_",[98,262,263],{"class":118},",",[98,265,266],{"class":259}," i",[98,268,269],{"class":118},")",[98,271,272],{"class":207}," =>",[98,274,256],{"class":159},[98,276,277],{"class":118},"{\n",[98,279,281,284,286,289,292,295],{"class":100,"line":280},9,[98,282,283],{"class":242},"    id",[98,285,246],{"class":118},[98,287,288],{"class":159}," i ",[98,290,291],{"class":215},"+",[98,293,294],{"class":249}," 1",[98,296,297],{"class":118},",\n",[98,299,301,304,306,309,312,315,318,321,323],{"class":100,"line":300},10,[98,302,303],{"class":242},"    name",[98,305,246],{"class":118},[98,307,308],{"class":136}," `",[98,310,311],{"class":140},"C00",[98,313,314],{"class":136},"${",[98,316,317],{"class":159},"i",[98,319,320],{"class":215}," +",[98,322,294],{"class":249},[98,324,325],{"class":136},"}${\n",[98,327,329,333,335,338,340,342,344,347,349,351,353,356,358,360,362,365,367,369,371,374,376,378,380,383,385,387,389,392,394,397,399],{"class":100,"line":328},11,[98,330,332],{"class":331},"sfo-9","      [",[98,334,137],{"class":136},[98,336,337],{"class":140},"白色",[98,339,137],{"class":136},[98,341,263],{"class":136},[98,343,169],{"class":136},[98,345,346],{"class":140},"黑色",[98,348,137],{"class":136},[98,350,263],{"class":136},[98,352,169],{"class":136},[98,354,355],{"class":140},"红色",[98,357,137],{"class":136},[98,359,263],{"class":136},[98,361,169],{"class":136},[98,363,364],{"class":140},"绿色",[98,366,137],{"class":136},[98,368,263],{"class":136},[98,370,169],{"class":136},[98,372,373],{"class":140},"蓝色",[98,375,137],{"class":136},[98,377,263],{"class":136},[98,379,169],{"class":136},[98,381,382],{"class":140},"黄色",[98,384,137],{"class":136},[98,386,263],{"class":136},[98,388,169],{"class":136},[98,390,391],{"class":140},"紫色",[98,393,137],{"class":136},[98,395,396],{"class":331},"][",[98,398,317],{"class":159},[98,400,401],{"class":331},"]\n",[98,403,405,408],{"class":100,"line":404},12,[98,406,407],{"class":136},"    }`",[98,409,297],{"class":118},[98,411,413,416,418,421],{"class":100,"line":412},13,[98,414,415],{"class":242},"    elements",[98,417,246],{"class":118},[98,419,420],{"class":159}," []",[98,422,297],{"class":118},[98,424,426,429],{"class":100,"line":425},14,[98,427,428],{"class":118},"  }",[98,430,431],{"class":159},"))\n",[98,433,435,437],{"class":100,"line":434},15,[98,436,269],{"class":159},[98,438,176],{"class":118},[98,440,442,444,447,449,451],{"class":100,"line":441},16,[98,443,208],{"class":207},[98,445,446],{"class":211}," test2",[98,448,216],{"class":215},[98,450,160],{"class":219},[98,452,453],{"class":159},"([\n",[98,455,457],{"class":100,"line":456},17,[98,458,459],{"class":118},"  {\n",[98,461,463,465,467,469],{"class":100,"line":462},18,[98,464,283],{"class":242},[98,466,246],{"class":118},[98,468,294],{"class":249},[98,470,297],{"class":118},[98,472,474,476,478,480,483,485],{"class":100,"line":473},19,[98,475,303],{"class":242},[98,477,246],{"class":118},[98,479,169],{"class":136},[98,481,482],{"class":140},"电机型号",[98,484,137],{"class":136},[98,486,297],{"class":118},[98,488,490,492,494],{"class":100,"line":489},20,[98,491,415],{"class":242},[98,493,246],{"class":118},[98,495,496],{"class":159}," [\n",[98,498,500],{"class":100,"line":499},21,[98,501,502],{"class":118},"      {\n",[98,504,506,509,511,513],{"class":100,"line":505},22,[98,507,508],{"class":242},"        id",[98,510,246],{"class":118},[98,512,294],{"class":249},[98,514,297],{"class":118},[98,516,518,521,523,525,528,530],{"class":100,"line":517},23,[98,519,520],{"class":242},"        name",[98,522,246],{"class":118},[98,524,169],{"class":136},[98,526,527],{"class":140},"M2\u002FV2",[98,529,137],{"class":136},[98,531,297],{"class":118},[98,533,535],{"class":100,"line":534},24,[98,536,537],{"class":118},"      },\n",[98,539,541],{"class":100,"line":540},25,[98,542,502],{"class":118},[98,544,546,548,550,553],{"class":100,"line":545},26,[98,547,508],{"class":242},[98,549,246],{"class":118},[98,551,552],{"class":249}," 2",[98,554,297],{"class":118},[98,556,558,560,562,564,567,569],{"class":100,"line":557},27,[98,559,520],{"class":242},[98,561,246],{"class":118},[98,563,169],{"class":136},[98,565,566],{"class":140},"米家",[98,568,137],{"class":136},[98,570,297],{"class":118},[98,572,574],{"class":100,"line":573},28,[98,575,537],{"class":118},[98,577,579,582],{"class":100,"line":578},29,[98,580,581],{"class":159},"    ]",[98,583,297],{"class":118},[98,585,587],{"class":100,"line":586},30,[98,588,589],{"class":118},"  },\n",[98,591,593,596],{"class":100,"line":592},31,[98,594,595],{"class":159},"])",[98,597,176],{"class":118},[98,599,601,604,606],{"class":100,"line":600},32,[98,602,603],{"class":118},"\u003C\u002F",[98,605,123],{"class":122},[98,607,146],{"class":118},[98,609,611],{"class":100,"line":610},33,[98,612,112],{"emptyLinePlaceholder":111},[98,614,616,618,621],{"class":100,"line":615},34,[98,617,119],{"class":118},[98,619,620],{"class":122},"template",[98,622,146],{"class":118},[98,624,626,629,632,635,638,640,642],{"class":100,"line":625},35,[98,627,628],{"class":118},"  \u003C",[98,630,631],{"class":122},"h3",[98,633,634],{"class":118},">",[98,636,637],{"class":159},"颜色配置",[98,639,603],{"class":118},[98,641,631],{"class":122},[98,643,146],{"class":118},[98,645,647,649],{"class":100,"line":646},36,[98,648,628],{"class":118},[98,650,651],{"class":122},"attrDragItem\n",[98,653,655,658,660,662,665],{"class":100,"line":654},37,[98,656,657],{"class":126},"    :data",[98,659,133],{"class":118},[98,661,137],{"class":136},[98,663,664],{"class":140},"test",[98,666,667],{"class":136},"\"\n",[98,669,671,674,676,678,681],{"class":100,"line":670},38,[98,672,673],{"class":126},"    :is-tree",[98,675,133],{"class":118},[98,677,137],{"class":136},[98,679,680],{"class":140},"false",[98,682,667],{"class":136},[98,684,686,689,691,693,696],{"class":100,"line":685},39,[98,687,688],{"class":126},"    @update:data",[98,690,133],{"class":118},[98,692,137],{"class":136},[98,694,695],{"class":140},"(newData) => (test = newData)",[98,697,667],{"class":136},[98,699,701],{"class":100,"line":700},40,[98,702,703],{"class":118},"  \u002F>\n",[98,705,707],{"class":100,"line":706},41,[98,708,112],{"emptyLinePlaceholder":111},[98,710,712,714,716,718,720,722,724],{"class":100,"line":711},42,[98,713,628],{"class":118},[98,715,631],{"class":122},[98,717,634],{"class":118},[98,719,57],{"class":159},[98,721,603],{"class":118},[98,723,631],{"class":122},[98,725,146],{"class":118},[98,727,729,731],{"class":100,"line":728},43,[98,730,628],{"class":118},[98,732,651],{"class":122},[98,734,736,738,740,742,745],{"class":100,"line":735},44,[98,737,657],{"class":126},[98,739,133],{"class":118},[98,741,137],{"class":136},[98,743,744],{"class":140},"test2",[98,746,667],{"class":136},[98,748,750,752,754,756,759],{"class":100,"line":749},45,[98,751,673],{"class":126},[98,753,133],{"class":118},[98,755,137],{"class":136},[98,757,758],{"class":140},"true",[98,760,667],{"class":136},[98,762,764,766,768,770,773],{"class":100,"line":763},46,[98,765,688],{"class":126},[98,767,133],{"class":118},[98,769,137],{"class":136},[98,771,772],{"class":140},"(newData) => (test2 = newData)",[98,774,667],{"class":136},[98,776,778],{"class":100,"line":777},47,[98,779,703],{"class":118},[98,781,783],{"class":100,"line":782},48,[98,784,785],{"class":104},"  \u003C!-- .... 其他属性配置 -->\n",[98,787,789,791,793],{"class":100,"line":788},49,[98,790,603],{"class":118},[98,792,620],{"class":122},[98,794,146],{"class":118},[24,796,797,800],{},[55,798,799],{},"attrDragItem"," 组件核心参数如下：",[81,802,803,809,818],{},[31,804,805,808],{},[55,806,807],{},"data","：排序数据（数组）；",[31,810,811,814,815,817],{},[55,812,813],{},"is-tree","：是否为树状结构，默认 ",[55,816,680],{},"；",[31,819,820,823],{},[55,821,822],{},"@update:data","：数据更新事件，返回最新排序结果。",[90,825,827],{"className":92,"code":826,"language":13,"meta":94,"style":94},"\u003C!-- 子组件 attrDragItem.vue -->\n\n\u003Cscript setup lang=\"ts\">\ndefineOptions({\n  name: \"AttrDragItem\",\n});\nimport VabDraggable from \"vuedraggable\";\n\nconst props = defineProps\u003C{\n  \u002F\u002F 数据\n  data: TAny[];\n  \u002F\u002F 是否是树结构\n  isTree: boolean;\n}>();\n\nconst emit = defineEmits\u003C{\n  \"update:data\": [value: any[]];\n}>();\n\nconst dataList = computed({\n  get: () => props.data,\n  set: (value) => emit(\"update:data\", value),\n});\n\nconst dragOptions = computed(() => {\n  return {\n    animation: 600,\n    disabled: false,\n    ghostClass: \"ghost\",\n  };\n});\n\n\u002F\u002F 处理子集元素更新（树结构）\nconst handleElementsUpdate = (item: TAny, newElements: TAny[]) => {\n  const index = dataList.value.findIndex((i) => i.id === item.id);\n  if (index !== -1) {\n    const newData = [...dataList.value];\n    newData[index] = { ...item, elements: newElements };\n    emit(\"update:data\", newData);\n  }\n};\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cvab-draggable\n    v-model=\"dataList\"\n    v-bind=\"dragOptions\"\n    item-key=\"id\"\n    style=\"display: flex; flex-wrap: wrap; justify-content: flex-start\"\n    :style=\"{ flexDirection: props.isTree ? 'column' : 'row' }\"\n  >\n    \u003Ctemplate #item=\"{ element: item }\">\n      \u003Cdiv>\n        \u003Cdiv :class=\"['drag-item-container', props.isTree ? 'mb' : '']\">\n          \u003Cvab-icon v-if=\"props.isTree\" icon=\"draggable\" \u002F>\n          \u003Cdiv :class=\"[props.isTree ? 'tree-item' : 'drag-item']\">\n            {{ item.name }}\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n        \u003Ctemplate v-if=\"props.isTree\">\n          \u003C!-- 递归调用子组件 -->\n          \u003CattrDragItem\n            :data=\"item.elements\"\n            :is-tree=\"false\"\n            @update:data=\"\n              (newElements) => handleElementsUpdate(item, newElements)\n            \"\n          \u002F>\n        \u003C\u002Ftemplate>\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002Fvab-draggable>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.drag-item-container {\n  display: flex;\n  align-items: center;\n  color: #333;\n\n  &.mb {\n    margin-bottom: 12px;\n  }\n  .drag-item {\n    padding: 6px 12px;\n    background-color: rgba(238, 238, 238, 1);\n    border-radius: 50px;\n    margin-bottom: 8px;\n    margin-right: 8px;\n    cursor: move;\n  }\n}\n\u003C\u002Fstyle>\n",[55,828,829,834,838,858,867,882,891,909,913,928,933,950,955,968,978,982,996,1024,1032,1036,1052,1072,1104,1112,1116,1136,1143,1155,1168,1184,1189,1197,1201,1206,1242,1294,1318,1345,1379,1400,1405,1410,1418,1422,1430,1437,1450,1464,1477,1491,1506,1512,1545,1556,1578,1614,1634,1640,1650,1660,1685,1691,1698,1713,1727,1737,1743,1749,1755,1764,1774,1784,1795,1804,1809,1833,1839,1845,1851,1857,1862,1868,1874,1879,1885,1891,1897,1903,1909,1915,1921,1926,1932],{"__ignoreMap":94},[98,830,831],{"class":100,"line":101},[98,832,833],{"class":104},"\u003C!-- 子组件 attrDragItem.vue -->\n",[98,835,836],{"class":100,"line":108},[98,837,112],{"emptyLinePlaceholder":111},[98,839,840,842,844,846,848,850,852,854,856],{"class":100,"line":115},[98,841,119],{"class":118},[98,843,123],{"class":122},[98,845,127],{"class":126},[98,847,130],{"class":126},[98,849,133],{"class":118},[98,851,137],{"class":136},[98,853,141],{"class":140},[98,855,137],{"class":136},[98,857,146],{"class":118},[98,859,860,863,865],{"class":100,"line":149},[98,861,862],{"class":219},"defineOptions",[98,864,236],{"class":159},[98,866,277],{"class":118},[98,868,869,872,874,876,878,880],{"class":100,"line":179},[98,870,871],{"class":242},"  name",[98,873,246],{"class":118},[98,875,169],{"class":136},[98,877,78],{"class":140},[98,879,137],{"class":136},[98,881,297],{"class":118},[98,883,884,887,889],{"class":100,"line":199},[98,885,886],{"class":118},"}",[98,888,269],{"class":159},[98,890,176],{"class":118},[98,892,893,895,898,900,902,905,907],{"class":100,"line":204},[98,894,153],{"class":152},[98,896,897],{"class":159}," VabDraggable ",[98,899,187],{"class":152},[98,901,169],{"class":136},[98,903,904],{"class":140},"vuedraggable",[98,906,137],{"class":136},[98,908,176],{"class":118},[98,910,911],{"class":100,"line":225},[98,912,112],{"emptyLinePlaceholder":111},[98,914,915,917,920,922,925],{"class":100,"line":280},[98,916,208],{"class":207},[98,918,919],{"class":211}," props",[98,921,216],{"class":215},[98,923,924],{"class":219}," defineProps",[98,926,927],{"class":118},"\u003C{\n",[98,929,930],{"class":100,"line":300},[98,931,932],{"class":104},"  \u002F\u002F 数据\n",[98,934,935,939,941,945,948],{"class":100,"line":328},[98,936,938],{"class":937},"sucvu","  data",[98,940,246],{"class":215},[98,942,944],{"class":943},"sbgvK"," TAny",[98,946,947],{"class":159},"[]",[98,949,176],{"class":118},[98,951,952],{"class":100,"line":404},[98,953,954],{"class":104},"  \u002F\u002F 是否是树结构\n",[98,956,957,960,962,966],{"class":100,"line":412},[98,958,959],{"class":937},"  isTree",[98,961,246],{"class":215},[98,963,965],{"class":964},"sZMiF"," boolean",[98,967,176],{"class":118},[98,969,970,973,976],{"class":100,"line":425},[98,971,972],{"class":118},"}>",[98,974,975],{"class":159},"()",[98,977,176],{"class":118},[98,979,980],{"class":100,"line":434},[98,981,112],{"emptyLinePlaceholder":111},[98,983,984,986,989,991,994],{"class":100,"line":441},[98,985,208],{"class":207},[98,987,988],{"class":211}," emit",[98,990,216],{"class":215},[98,992,993],{"class":219}," defineEmits",[98,995,927],{"class":118},[98,997,998,1001,1004,1006,1008,1011,1014,1016,1019,1022],{"class":100,"line":456},[98,999,1000],{"class":136},"  \"",[98,1002,1003],{"class":140},"update:data",[98,1005,137],{"class":136},[98,1007,246],{"class":215},[98,1009,1010],{"class":159}," [",[98,1012,1013],{"class":943},"value",[98,1015,246],{"class":118},[98,1017,1018],{"class":964}," any",[98,1020,1021],{"class":159},"[]]",[98,1023,176],{"class":118},[98,1025,1026,1028,1030],{"class":100,"line":462},[98,1027,972],{"class":118},[98,1029,975],{"class":159},[98,1031,176],{"class":118},[98,1033,1034],{"class":100,"line":473},[98,1035,112],{"emptyLinePlaceholder":111},[98,1037,1038,1040,1043,1045,1048,1050],{"class":100,"line":489},[98,1039,208],{"class":207},[98,1041,1042],{"class":211}," dataList",[98,1044,216],{"class":215},[98,1046,1047],{"class":219}," computed",[98,1049,236],{"class":159},[98,1051,277],{"class":118},[98,1053,1054,1057,1059,1062,1064,1066,1068,1070],{"class":100,"line":499},[98,1055,1056],{"class":219},"  get",[98,1058,246],{"class":118},[98,1060,1061],{"class":118}," ()",[98,1063,272],{"class":207},[98,1065,919],{"class":159},[98,1067,231],{"class":118},[98,1069,807],{"class":159},[98,1071,297],{"class":118},[98,1073,1074,1077,1079,1081,1083,1085,1087,1089,1091,1093,1095,1097,1099,1102],{"class":100,"line":505},[98,1075,1076],{"class":219},"  set",[98,1078,246],{"class":118},[98,1080,256],{"class":118},[98,1082,1013],{"class":259},[98,1084,269],{"class":118},[98,1086,272],{"class":207},[98,1088,988],{"class":219},[98,1090,236],{"class":159},[98,1092,137],{"class":136},[98,1094,1003],{"class":140},[98,1096,137],{"class":136},[98,1098,263],{"class":118},[98,1100,1101],{"class":159}," value)",[98,1103,297],{"class":118},[98,1105,1106,1108,1110],{"class":100,"line":517},[98,1107,886],{"class":118},[98,1109,269],{"class":159},[98,1111,176],{"class":118},[98,1113,1114],{"class":100,"line":534},[98,1115,112],{"emptyLinePlaceholder":111},[98,1117,1118,1120,1123,1125,1127,1129,1131,1133],{"class":100,"line":540},[98,1119,208],{"class":207},[98,1121,1122],{"class":211}," dragOptions",[98,1124,216],{"class":215},[98,1126,1047],{"class":219},[98,1128,236],{"class":159},[98,1130,975],{"class":118},[98,1132,272],{"class":207},[98,1134,1135],{"class":118}," {\n",[98,1137,1138,1141],{"class":100,"line":545},[98,1139,1140],{"class":152},"  return",[98,1142,1135],{"class":118},[98,1144,1145,1148,1150,1153],{"class":100,"line":557},[98,1146,1147],{"class":242},"    animation",[98,1149,246],{"class":118},[98,1151,1152],{"class":249}," 600",[98,1154,297],{"class":118},[98,1156,1157,1160,1162,1166],{"class":100,"line":573},[98,1158,1159],{"class":242},"    disabled",[98,1161,246],{"class":118},[98,1163,1165],{"class":1164},"syTEX"," false",[98,1167,297],{"class":118},[98,1169,1170,1173,1175,1177,1180,1182],{"class":100,"line":578},[98,1171,1172],{"class":242},"    ghostClass",[98,1174,246],{"class":118},[98,1176,169],{"class":136},[98,1178,1179],{"class":140},"ghost",[98,1181,137],{"class":136},[98,1183,297],{"class":118},[98,1185,1186],{"class":100,"line":586},[98,1187,1188],{"class":118},"  };\n",[98,1190,1191,1193,1195],{"class":100,"line":592},[98,1192,886],{"class":118},[98,1194,269],{"class":159},[98,1196,176],{"class":118},[98,1198,1199],{"class":100,"line":600},[98,1200,112],{"emptyLinePlaceholder":111},[98,1202,1203],{"class":100,"line":610},[98,1204,1205],{"class":104},"\u002F\u002F 处理子集元素更新（树结构）\n",[98,1207,1208,1210,1214,1216,1218,1221,1223,1225,1227,1230,1232,1234,1236,1238,1240],{"class":100,"line":615},[98,1209,208],{"class":207},[98,1211,1213],{"class":1212},"sfCm-"," handleElementsUpdate",[98,1215,216],{"class":215},[98,1217,256],{"class":118},[98,1219,1220],{"class":259},"item",[98,1222,246],{"class":215},[98,1224,944],{"class":943},[98,1226,263],{"class":118},[98,1228,1229],{"class":259}," newElements",[98,1231,246],{"class":215},[98,1233,944],{"class":943},[98,1235,947],{"class":159},[98,1237,269],{"class":118},[98,1239,272],{"class":207},[98,1241,1135],{"class":118},[98,1243,1244,1247,1250,1252,1254,1256,1258,1260,1263,1265,1267,1269,1271,1273,1275,1277,1280,1283,1286,1288,1290,1292],{"class":100,"line":625},[98,1245,1246],{"class":207},"  const",[98,1248,1249],{"class":211}," index",[98,1251,216],{"class":215},[98,1253,1042],{"class":159},[98,1255,231],{"class":118},[98,1257,1013],{"class":159},[98,1259,231],{"class":118},[98,1261,1262],{"class":219},"findIndex",[98,1264,236],{"class":242},[98,1266,236],{"class":118},[98,1268,317],{"class":259},[98,1270,269],{"class":118},[98,1272,272],{"class":207},[98,1274,266],{"class":159},[98,1276,231],{"class":118},[98,1278,1279],{"class":159},"id",[98,1281,1282],{"class":215}," ===",[98,1284,1285],{"class":159}," item",[98,1287,231],{"class":118},[98,1289,1279],{"class":159},[98,1291,269],{"class":242},[98,1293,176],{"class":118},[98,1295,1296,1299,1301,1304,1307,1310,1313,1316],{"class":100,"line":646},[98,1297,1298],{"class":152},"  if",[98,1300,256],{"class":242},[98,1302,1303],{"class":159},"index",[98,1305,1306],{"class":215}," !==",[98,1308,1309],{"class":215}," -",[98,1311,1312],{"class":249},"1",[98,1314,1315],{"class":242},") ",[98,1317,277],{"class":118},[98,1319,1320,1323,1326,1328,1330,1333,1336,1338,1340,1343],{"class":100,"line":654},[98,1321,1322],{"class":207},"    const",[98,1324,1325],{"class":211}," newData",[98,1327,216],{"class":215},[98,1329,1010],{"class":242},[98,1331,1332],{"class":215},"...",[98,1334,1335],{"class":159},"dataList",[98,1337,231],{"class":118},[98,1339,1013],{"class":159},[98,1341,1342],{"class":242},"]",[98,1344,176],{"class":118},[98,1346,1347,1350,1353,1355,1358,1360,1362,1365,1367,1369,1372,1374,1376],{"class":100,"line":670},[98,1348,1349],{"class":159},"    newData",[98,1351,1352],{"class":242},"[",[98,1354,1303],{"class":159},[98,1356,1357],{"class":242},"] ",[98,1359,133],{"class":215},[98,1361,156],{"class":118},[98,1363,1364],{"class":215}," ...",[98,1366,1220],{"class":159},[98,1368,263],{"class":118},[98,1370,1371],{"class":242}," elements",[98,1373,246],{"class":118},[98,1375,1229],{"class":159},[98,1377,1378],{"class":118}," };\n",[98,1380,1381,1384,1386,1388,1390,1392,1394,1396,1398],{"class":100,"line":685},[98,1382,1383],{"class":219},"    emit",[98,1385,236],{"class":242},[98,1387,137],{"class":136},[98,1389,1003],{"class":140},[98,1391,137],{"class":136},[98,1393,263],{"class":118},[98,1395,1325],{"class":159},[98,1397,269],{"class":242},[98,1399,176],{"class":118},[98,1401,1402],{"class":100,"line":700},[98,1403,1404],{"class":118},"  }\n",[98,1406,1407],{"class":100,"line":706},[98,1408,1409],{"class":118},"};\n",[98,1411,1412,1414,1416],{"class":100,"line":711},[98,1413,603],{"class":118},[98,1415,123],{"class":122},[98,1417,146],{"class":118},[98,1419,1420],{"class":100,"line":728},[98,1421,112],{"emptyLinePlaceholder":111},[98,1423,1424,1426,1428],{"class":100,"line":735},[98,1425,119],{"class":118},[98,1427,620],{"class":122},[98,1429,146],{"class":118},[98,1431,1432,1434],{"class":100,"line":749},[98,1433,628],{"class":118},[98,1435,1436],{"class":122},"vab-draggable\n",[98,1438,1439,1442,1444,1446,1448],{"class":100,"line":763},[98,1440,1441],{"class":126},"    v-model",[98,1443,133],{"class":118},[98,1445,137],{"class":136},[98,1447,1335],{"class":140},[98,1449,667],{"class":136},[98,1451,1452,1455,1457,1459,1462],{"class":100,"line":777},[98,1453,1454],{"class":126},"    v-bind",[98,1456,133],{"class":118},[98,1458,137],{"class":136},[98,1460,1461],{"class":140},"dragOptions",[98,1463,667],{"class":136},[98,1465,1466,1469,1471,1473,1475],{"class":100,"line":782},[98,1467,1468],{"class":126},"    item-key",[98,1470,133],{"class":118},[98,1472,137],{"class":136},[98,1474,1279],{"class":140},[98,1476,667],{"class":136},[98,1478,1479,1482,1484,1486,1489],{"class":100,"line":788},[98,1480,1481],{"class":126},"    style",[98,1483,133],{"class":118},[98,1485,137],{"class":136},[98,1487,1488],{"class":140},"display: flex; flex-wrap: wrap; justify-content: flex-start",[98,1490,667],{"class":136},[98,1492,1494,1497,1499,1501,1504],{"class":100,"line":1493},50,[98,1495,1496],{"class":126},"    :style",[98,1498,133],{"class":118},[98,1500,137],{"class":136},[98,1502,1503],{"class":140},"{ flexDirection: props.isTree ? 'column' : 'row' }",[98,1505,667],{"class":136},[98,1507,1509],{"class":100,"line":1508},51,[98,1510,1511],{"class":118},"  >\n",[98,1513,1515,1518,1520,1523,1525,1527,1529,1531,1534,1536,1539,1541,1543],{"class":100,"line":1514},52,[98,1516,1517],{"class":118},"    \u003C",[98,1519,620],{"class":122},[98,1521,1522],{"class":118}," #",[98,1524,1220],{"class":126},[98,1526,133],{"class":118},[98,1528,137],{"class":136},[98,1530,239],{"class":118},[98,1532,1533],{"class":242}," element",[98,1535,246],{"class":118},[98,1537,1538],{"class":159}," item ",[98,1540,886],{"class":118},[98,1542,137],{"class":136},[98,1544,146],{"class":118},[98,1546,1548,1551,1554],{"class":100,"line":1547},53,[98,1549,1550],{"class":118},"      \u003C",[98,1552,1553],{"class":122},"div",[98,1555,146],{"class":118},[98,1557,1559,1562,1564,1567,1569,1571,1574,1576],{"class":100,"line":1558},54,[98,1560,1561],{"class":118},"        \u003C",[98,1563,1553],{"class":122},[98,1565,1566],{"class":126}," :class",[98,1568,133],{"class":118},[98,1570,137],{"class":136},[98,1572,1573],{"class":140},"['drag-item-container', props.isTree ? 'mb' : '']",[98,1575,137],{"class":136},[98,1577,146],{"class":118},[98,1579,1581,1584,1587,1590,1592,1594,1597,1599,1602,1604,1606,1609,1611],{"class":100,"line":1580},55,[98,1582,1583],{"class":118},"          \u003C",[98,1585,1586],{"class":122},"vab-icon",[98,1588,1589],{"class":126}," v-if",[98,1591,133],{"class":118},[98,1593,137],{"class":136},[98,1595,1596],{"class":140},"props.isTree",[98,1598,137],{"class":136},[98,1600,1601],{"class":126}," icon",[98,1603,133],{"class":118},[98,1605,137],{"class":136},[98,1607,1608],{"class":140},"draggable",[98,1610,137],{"class":136},[98,1612,1613],{"class":118}," \u002F>\n",[98,1615,1617,1619,1621,1623,1625,1627,1630,1632],{"class":100,"line":1616},56,[98,1618,1583],{"class":118},[98,1620,1553],{"class":122},[98,1622,1566],{"class":126},[98,1624,133],{"class":118},[98,1626,137],{"class":136},[98,1628,1629],{"class":140},"[props.isTree ? 'tree-item' : 'drag-item']",[98,1631,137],{"class":136},[98,1633,146],{"class":118},[98,1635,1637],{"class":100,"line":1636},57,[98,1638,1639],{"class":159},"            {{ item.name }}\n",[98,1641,1643,1646,1648],{"class":100,"line":1642},58,[98,1644,1645],{"class":118},"          \u003C\u002F",[98,1647,1553],{"class":122},[98,1649,146],{"class":118},[98,1651,1653,1656,1658],{"class":100,"line":1652},59,[98,1654,1655],{"class":118},"        \u003C\u002F",[98,1657,1553],{"class":122},[98,1659,146],{"class":118},[98,1661,1663,1665,1667,1669,1671,1673,1676,1678,1681,1683],{"class":100,"line":1662},60,[98,1664,1561],{"class":118},[98,1666,620],{"class":122},[98,1668,1589],{"class":152},[98,1670,133],{"class":118},[98,1672,137],{"class":136},[98,1674,1675],{"class":159},"props",[98,1677,231],{"class":118},[98,1679,1680],{"class":159},"isTree",[98,1682,137],{"class":136},[98,1684,146],{"class":118},[98,1686,1688],{"class":100,"line":1687},61,[98,1689,1690],{"class":104},"          \u003C!-- 递归调用子组件 -->\n",[98,1692,1694,1696],{"class":100,"line":1693},62,[98,1695,1583],{"class":118},[98,1697,651],{"class":122},[98,1699,1701,1704,1706,1708,1711],{"class":100,"line":1700},63,[98,1702,1703],{"class":126},"            :data",[98,1705,133],{"class":118},[98,1707,137],{"class":136},[98,1709,1710],{"class":140},"item.elements",[98,1712,667],{"class":136},[98,1714,1716,1719,1721,1723,1725],{"class":100,"line":1715},64,[98,1717,1718],{"class":126},"            :is-tree",[98,1720,133],{"class":118},[98,1722,137],{"class":136},[98,1724,680],{"class":140},[98,1726,667],{"class":136},[98,1728,1730,1733,1735],{"class":100,"line":1729},65,[98,1731,1732],{"class":126},"            @update:data",[98,1734,133],{"class":118},[98,1736,667],{"class":136},[98,1738,1740],{"class":100,"line":1739},66,[98,1741,1742],{"class":140},"              (newElements) => handleElementsUpdate(item, newElements)\n",[98,1744,1746],{"class":100,"line":1745},67,[98,1747,1748],{"class":136},"            \"\n",[98,1750,1752],{"class":100,"line":1751},68,[98,1753,1754],{"class":118},"          \u002F>\n",[98,1756,1758,1760,1762],{"class":100,"line":1757},69,[98,1759,1655],{"class":118},[98,1761,620],{"class":122},[98,1763,146],{"class":118},[98,1765,1767,1770,1772],{"class":100,"line":1766},70,[98,1768,1769],{"class":118},"      \u003C\u002F",[98,1771,1553],{"class":122},[98,1773,146],{"class":118},[98,1775,1777,1780,1782],{"class":100,"line":1776},71,[98,1778,1779],{"class":118},"    \u003C\u002F",[98,1781,620],{"class":122},[98,1783,146],{"class":118},[98,1785,1787,1790,1793],{"class":100,"line":1786},72,[98,1788,1789],{"class":118},"  \u003C\u002F",[98,1791,1792],{"class":122},"vab-draggable",[98,1794,146],{"class":118},[98,1796,1798,1800,1802],{"class":100,"line":1797},73,[98,1799,603],{"class":118},[98,1801,620],{"class":122},[98,1803,146],{"class":118},[98,1805,1807],{"class":100,"line":1806},74,[98,1808,112],{"emptyLinePlaceholder":111},[98,1810,1812,1814,1817,1819,1821,1823,1826,1828,1831],{"class":100,"line":1811},75,[98,1813,119],{"class":118},[98,1815,1816],{"class":122},"style",[98,1818,130],{"class":126},[98,1820,133],{"class":118},[98,1822,137],{"class":136},[98,1824,1825],{"class":140},"scss",[98,1827,137],{"class":136},[98,1829,1830],{"class":126}," scoped",[98,1832,146],{"class":118},[98,1834,1836],{"class":100,"line":1835},76,[98,1837,1838],{"class":159},".drag-item-container {\n",[98,1840,1842],{"class":100,"line":1841},77,[98,1843,1844],{"class":159},"  display: flex;\n",[98,1846,1848],{"class":100,"line":1847},78,[98,1849,1850],{"class":159},"  align-items: center;\n",[98,1852,1854],{"class":100,"line":1853},79,[98,1855,1856],{"class":159},"  color: #333;\n",[98,1858,1860],{"class":100,"line":1859},80,[98,1861,112],{"emptyLinePlaceholder":111},[98,1863,1865],{"class":100,"line":1864},81,[98,1866,1867],{"class":159},"  &.mb {\n",[98,1869,1871],{"class":100,"line":1870},82,[98,1872,1873],{"class":159},"    margin-bottom: 12px;\n",[98,1875,1877],{"class":100,"line":1876},83,[98,1878,1404],{"class":159},[98,1880,1882],{"class":100,"line":1881},84,[98,1883,1884],{"class":159},"  .drag-item {\n",[98,1886,1888],{"class":100,"line":1887},85,[98,1889,1890],{"class":159},"    padding: 6px 12px;\n",[98,1892,1894],{"class":100,"line":1893},86,[98,1895,1896],{"class":159},"    background-color: rgba(238, 238, 238, 1);\n",[98,1898,1900],{"class":100,"line":1899},87,[98,1901,1902],{"class":159},"    border-radius: 50px;\n",[98,1904,1906],{"class":100,"line":1905},88,[98,1907,1908],{"class":159},"    margin-bottom: 8px;\n",[98,1910,1912],{"class":100,"line":1911},89,[98,1913,1914],{"class":159},"    margin-right: 8px;\n",[98,1916,1918],{"class":100,"line":1917},90,[98,1919,1920],{"class":159},"    cursor: move;\n",[98,1922,1924],{"class":100,"line":1923},91,[98,1925,1404],{"class":159},[98,1927,1929],{"class":100,"line":1928},92,[98,1930,1931],{"class":159},"}\n",[98,1933,1935,1937,1939],{"class":100,"line":1934},93,[98,1936,603],{"class":118},[98,1938,1816],{"class":122},[98,1940,146],{"class":118},[70,1942,1943],{"id":1943},"实现要点",[28,1945,1946,1959,1975],{},[31,1947,1948,1952,1954,1955,1958],{},[1949,1950,1951],"strong",{},"禁止跨容器拖拽",[38,1953],{},"\n每个容器使用独立数据源与组件实例；如需更严格限制，可为不同容器设置不同 ",[55,1956,1957],{},"group","。",[31,1960,1961,1964,1966,1967,1970,1971,1974],{},[1949,1962,1963],{},"树结构递归渲染",[38,1965],{},"\n当 ",[55,1968,1969],{},"isTree = true"," 时递归渲染子节点，并通过 ",[55,1972,1973],{},"handleElementsUpdate"," 回传子集变更。",[31,1976,1977,1980,1982,1983,1986],{},[1949,1978,1979],{},"排序结果持久化",[38,1981],{},"\n推荐在拖拽结束事件（如 ",[55,1984,1985],{},"@end","）触发后端保存接口，避免拖拽过程中频繁请求。",[1816,1988,1989],{},"html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s99_P, html code.shiki .s99_P{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}html pre.shiki code .sfo-9, html code.shiki .sfo-9{--shiki-light:#90A4AE;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sucvu, html code.shiki .sucvu{--shiki-light:#E53935;--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZMiF, html code.shiki .sZMiF{--shiki-light:#E2931D;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .syTEX, html code.shiki .syTEX{--shiki-light:#FF5370;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sfCm-, html code.shiki .sfCm-{--shiki-light:#90A4AE;--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":94,"searchDepth":108,"depth":108,"links":1991},[1992,1993],{"id":72,"depth":108,"text":72},{"id":1943,"depth":108,"text":1943},{"title":8,"description":9},"knowledge\u002Fteam-documents\u002F08","knowledge\u002Fknowledge\u002Fteam-documents\u002F08.md","md",{"items":1999},[2000,2004,2008,2012,2016,2020],{"path":2001,"title":2002,"description":2003,"category":10,"score":404},"\u002Fknowledge\u002Fteam-documents\u002F01","执行价格弹窗：表头 \u002F 表体合并与可配置表格","业务需要在「执行价格」类弹窗中展示多块价格配置（基础、颜色、规格、行业等）。每块区域具备：",{"path":2005,"title":2006,"description":2007,"category":10,"score":280},"\u002Fknowledge\u002Fteam-documents\u002F19","GridView 宫格加载渲染优化","系统首页 GridView 宫格模块接口耗时不高，但首次进入总耗时接近 22s。复盘耗时分层定位过程、代码层面的瓶颈（约 2000 行、100 个 tab 重复节点）、优化手段与最终指标对比。",{"path":2009,"title":2010,"description":2011,"category":10,"score":280},"\u002Fknowledge\u002Fteam-documents\u002F13","新商家系统性能优化实践","商家系统新版本上线后，团队持续针对构建效率与用户体验做了一轮系统性优化。本文记录核心方案与落地结果，供后续版本复用。",{"path":2013,"title":2014,"description":2015,"category":10,"score":280},"\u002Fknowledge\u002Fteam-documents\u002F04","老系统升级与兼容改造实践","公司原有业务系统采用 Node + jQuery 架构，长期运行后暴露出典型遗留系统问题：",{"path":2017,"title":2018,"description":2019,"category":10,"score":280},"\u002Fknowledge\u002Fteam-documents\u002F03","键盘弹起导致底部被顶起问题（H5 适配）","在移动端 H5 页面中，当用户聚焦 input、textarea 等可编辑元素、软键盘弹出时，常见表现包括：",{"path":2021,"title":2022,"description":2023,"category":10,"score":280},"\u002Fknowledge\u002Fteam-documents\u002F18","中英文输入法下搜索触发冲突复盘","在“边输入边查询”场景中，很多实现会直接在 input 事件中请求接口。 但在中文输入法（IME）场景下，如果不处理输入合成过程，容易出现“未完成输入就提前触发查询”的问题。",{"series":2025,"title":2026,"items":2027,"index":204,"prev":2101,"next":2102},"team-documents","team documents",[2028,2030,2034,2036,2038,2042,2046,2050,2051,2055,2059,2063,2067,2069,2073,2077,2081,2085,2087,2089,2093,2097],{"path":2001,"title":2002,"date":2029,"pinned":16},"2024-07-27",{"path":2031,"title":2032,"date":2033,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F02","防篡改水印","2024-01-09",{"path":2017,"title":2018,"date":2035,"pinned":16},"2024-09-17",{"path":2013,"title":2014,"date":2037,"pinned":16},"2024-12-12",{"path":2039,"title":2040,"date":2041,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F05","内部插件 \u002F 工具库开发实践","2021-08-19",{"path":2043,"title":2044,"date":2045,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F06","企业微信与小程序工单问题","2025-10-01",{"path":2047,"title":2048,"date":2049,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F07","企业微信群工具打开缓慢原因分析","2020-04-12",{"path":7,"title":8,"date":15,"pinned":16},{"path":2052,"title":2053,"date":2054,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F09","同业主重复单提醒规则","2020-06-07",{"path":2056,"title":2057,"date":2058,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F10","图片上传前的自定义水印实践","2021-06-10",{"path":2060,"title":2061,"date":2062,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F11","系统下单（重复单提示框）异常复盘","2023-11-21",{"path":2064,"title":2065,"date":2066,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F12","系统自动更新说明","2025-05-26",{"path":2009,"title":2010,"date":2068,"pinned":16},"2025-04-08",{"path":2070,"title":2071,"date":2072,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F14","选项卡切换与 Loading 状态封装","2019-11-03",{"path":2074,"title":2075,"date":2076,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F15","移动端返回事件触发两次问题复盘","2021-03-09",{"path":2078,"title":2079,"date":2080,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F16","在线协作表格接入实践","2023-10-27",{"path":2082,"title":2083,"date":2084,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F17","支付中转页面升级实践","2022-10-15",{"path":2021,"title":2022,"date":2086,"pinned":16},"2024-09-01",{"path":2005,"title":2006,"date":2088,"pinned":16},"2026-03-17",{"path":2090,"title":2091,"date":2092,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F20","H5 GPS 定位问题说明","2023-08-31",{"path":2094,"title":2095,"date":2096,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F21","vxe-table 行 Hover 联动高亮","2024-08-31",{"path":2098,"title":2099,"date":2100,"pinned":16},"\u002Fknowledge\u002Fteam-documents\u002F22","企业微信 uni-app H5：OAuth 回退白屏与列表缓存","2023-08-17",{"path":2047,"title":2048,"date":2049,"pinned":16},{"path":2052,"title":2053,"date":2054,"pinned":16}]