[{"data":1,"prerenderedAt":2051},["ShallowReactive",2],{"content-\u002Fcomponents\u002Fcontent-dialog":3,"content-en-fallback-\u002Fcomponents\u002Fcontent-dialog":2050},{"id":4,"title":5,"body":6,"description":2042,"extension":2043,"meta":2044,"nav":2045,"navigation":250,"path":2046,"seo":2047,"stem":2048,"__hash__":2049},"content\u002Fcomponents\u002Fcontent-dialog.md","Content Dialog 对话框",{"type":7,"value":8,"toc":2034},"minimark",[9,13,32,43,125,129,165,478,481,491,612,714,718,747,835,839,862,1034,1037,1063,1113,1175,1179,1440,1576,1621,2030],[10,11,5],"h1",{"id":12},"content-dialog-对话框",[14,15,16,17,21,22,26,27,31],"p",{},"Content Dialog 用来在继续之前向用户索取确认或补充信息（WinUI 官方描述：",[18,19,20],"em",{},"use a content dialog to prompt the user to confirm an action or provide additional information","）。它是",[23,24,25],"strong",{},"模态","弹层：遮罩层吃掉背后的指针输入，焦点被困在弹窗内，",[28,29,30],"code",{},"Esc"," 或按钮才能结束它。",[14,33,34,35,38,39,42],{},"几何、状态机与动效对齐 WinUI 3 \u002F Windows App SDK 的 ContentDialog（",[28,36,37],{},"microsoft-ui-xaml"," ",[28,40,41],{},"winui3\u002Frelease\u002F2.5.1","，已核对与最新 WinUI3 Gallery 发行版 v2.9.3 所用的 WindowsAppSDK 2.0.1 在目标文件上一致）：",[44,45,46,73,99],"ul",{},[47,48,49,52,53,56,57,60,61,64,65,68,69,72],"li",{},[23,50,51],{},"几何","：",[28,54,55],{},"MinWidth"," 320 \u002F ",[28,58,59],{},"MaxWidth"," 548 \u002F ",[28,62,63],{},"MinHeight"," 184 \u002F ",[28,66,67],{},"MaxHeight"," 756、圆角 8（",[28,70,71],{},"OverlayCornerRadius","）、描边 1、内边距 24、标题下间距 12、按钮间距 8。",[47,74,75,78,79,82,83,86,87,90,91,94,95,98],{},[23,76,77],{},"解剖","：全屏内容层（",[28,80,81],{},"LayoutRoot","）→ 居中表面（",[28,84,85],{},"BackgroundElement","：底色 + 描边 + 阴影）→ 两行（内容 ",[28,88,89],{},"*"," \u002F 命令区 ",[28,92,93],{},"auto","）→ 内容层（",[28,96,97],{},"ContentDialogTopOverlay"," 底色 + 下边框）与 5 列命令区网格。",[47,100,101,104,105,108,109,112,113,116,117,120,121,124],{},[23,102,103],{},"动效","：进入 ",[28,106,107],{},"scale 1.05 → 1","（250ms，",[28,110,111],{},"cubic-bezier(0,0,0,1)","）+ ",[28,114,115],{},"opacity 0 → 1","（83ms，linear）；退出 ",[28,118,119],{},"scale 1 → 1.05","（167ms）+ ",[28,122,123],{},"opacity 1 → 0","（83ms）；遮罩层只做 83ms linear 的透明度、不缩放。",[126,127,128],"h2",{"id":128},"基础用法",[14,130,131,134,135,138,139,142,143,146,147,150,151,138,154,138,157,160,161,164],{},[28,132,133],{},"v-model:open"," 控制开关（对齐 ",[28,136,137],{},"ShowAsync()"," \u002F ",[28,140,141],{},"Hide()","），",[28,144,145],{},"closed"," 的 ",[28,148,149],{},"args.result"," 带回返回值（",[28,152,153],{},"primary",[28,155,156],{},"secondary",[28,158,159],{},"none","，对齐 ",[28,162,163],{},"ContentDialogResult","）。",[166,167,169,176],"demo-block",{"title":168},"基础：标题 + 正文 + 主\u002F次按钮（defaultButton = primary）",[170,171,173],"template",{"v-slot:preview":172},"",[174,175],"content-dialog-basic-demo",{},[170,177,178],{"v-slot:code":172},[179,180,184],"pre",{"className":181,"code":182,"language":183,"meta":172,"style":172},"language-vue shiki shiki-themes github-light github-dark","\u003Cscript setup lang=\"ts\">\nimport { FluereButton, FluereContentDialog } from '@fluere-vue\u002Fui'\nimport { ref } from 'vue'\n\nconst open = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFluereButton @click=\"open = true\">删除草稿\u003C\u002FFluereButton>\n  \u003CFluereContentDialog\n    v-model:open=\"open\"\n    title=\"要删除这份草稿吗？\"\n    primary-button-text=\"删除\"\n    secondary-button-text=\"取消\"\n    default-button=\"primary\"\n    @closed=\"(args) => console.log(args.result)\"\n  >\n    删除后将从本机与云端一并移除，且无法恢复。\n  \u003C\u002FFluereContentDialog>\n\u003C\u002Ftemplate>\n","vue",[28,185,186,216,232,245,252,277,287,292,301,338,346,367,378,389,400,411,446,452,458,469],{"__ignoreMap":172},[187,188,191,195,199,203,206,209,213],"span",{"class":189,"line":190},"line",1,[187,192,194],{"class":193},"sVt8B","\u003C",[187,196,198],{"class":197},"s9eBZ","script",[187,200,202],{"class":201},"sScJk"," setup",[187,204,205],{"class":201}," lang",[187,207,208],{"class":193},"=",[187,210,212],{"class":211},"sZZnC","\"ts\"",[187,214,215],{"class":193},">\n",[187,217,219,223,226,229],{"class":189,"line":218},2,[187,220,222],{"class":221},"szBVR","import",[187,224,225],{"class":193}," { FluereButton, FluereContentDialog } ",[187,227,228],{"class":221},"from",[187,230,231],{"class":211}," '@fluere-vue\u002Fui'\n",[187,233,235,237,240,242],{"class":189,"line":234},3,[187,236,222],{"class":221},[187,238,239],{"class":193}," { ref } ",[187,241,228],{"class":221},[187,243,244],{"class":211}," 'vue'\n",[187,246,248],{"class":189,"line":247},4,[187,249,251],{"emptyLinePlaceholder":250},true,"\n",[187,253,255,258,262,265,268,271,274],{"class":189,"line":254},5,[187,256,257],{"class":221},"const",[187,259,261],{"class":260},"sj4cs"," open",[187,263,264],{"class":221}," =",[187,266,267],{"class":201}," ref",[187,269,270],{"class":193},"(",[187,272,273],{"class":260},"false",[187,275,276],{"class":193},")\n",[187,278,280,283,285],{"class":189,"line":279},6,[187,281,282],{"class":193},"\u003C\u002F",[187,284,198],{"class":197},[187,286,215],{"class":193},[187,288,290],{"class":189,"line":289},7,[187,291,251],{"emptyLinePlaceholder":250},[187,293,295,297,299],{"class":189,"line":294},8,[187,296,194],{"class":193},[187,298,170],{"class":197},[187,300,215],{"class":193},[187,302,304,307,310,313,316,318,321,324,326,329,331,334,336],{"class":189,"line":303},9,[187,305,306],{"class":193},"  \u003C",[187,308,309],{"class":197},"FluereButton",[187,311,312],{"class":193}," @",[187,314,315],{"class":201},"click",[187,317,208],{"class":193},[187,319,320],{"class":211},"\"",[187,322,323],{"class":193},"open ",[187,325,208],{"class":221},[187,327,328],{"class":260}," true",[187,330,320],{"class":211},[187,332,333],{"class":193},">删除草稿\u003C\u002F",[187,335,309],{"class":197},[187,337,215],{"class":193},[187,339,341,343],{"class":189,"line":340},10,[187,342,306],{"class":193},[187,344,345],{"class":197},"FluereContentDialog\n",[187,347,349,352,355,358,360,362,364],{"class":189,"line":348},11,[187,350,351],{"class":201},"    v-model",[187,353,354],{"class":193},":",[187,356,357],{"class":201},"open",[187,359,208],{"class":193},[187,361,320],{"class":211},[187,363,357],{"class":193},[187,365,366],{"class":211},"\"\n",[187,368,370,373,375],{"class":189,"line":369},12,[187,371,372],{"class":201},"    title",[187,374,208],{"class":193},[187,376,377],{"class":211},"\"要删除这份草稿吗？\"\n",[187,379,381,384,386],{"class":189,"line":380},13,[187,382,383],{"class":201},"    primary-button-text",[187,385,208],{"class":193},[187,387,388],{"class":211},"\"删除\"\n",[187,390,392,395,397],{"class":189,"line":391},14,[187,393,394],{"class":201},"    secondary-button-text",[187,396,208],{"class":193},[187,398,399],{"class":211},"\"取消\"\n",[187,401,403,406,408],{"class":189,"line":402},15,[187,404,405],{"class":201},"    default-button",[187,407,208],{"class":193},[187,409,410],{"class":211},"\"primary\"\n",[187,412,414,417,419,421,423,425,429,432,435,438,441,444],{"class":189,"line":413},16,[187,415,416],{"class":193},"    @",[187,418,145],{"class":201},[187,420,208],{"class":193},[187,422,320],{"class":211},[187,424,270],{"class":193},[187,426,428],{"class":427},"s4XuR","args",[187,430,431],{"class":193},") ",[187,433,434],{"class":221},"=>",[187,436,437],{"class":193}," console.",[187,439,440],{"class":201},"log",[187,442,443],{"class":193},"(args.result)",[187,445,366],{"class":211},[187,447,449],{"class":189,"line":448},17,[187,450,451],{"class":193},"  >\n",[187,453,455],{"class":189,"line":454},18,[187,456,457],{"class":193},"    删除后将从本机与云端一并移除，且无法恢复。\n",[187,459,461,464,467],{"class":189,"line":460},19,[187,462,463],{"class":193},"  \u003C\u002F",[187,465,466],{"class":197},"FluereContentDialog",[187,468,215],{"class":193},[187,470,472,474,476],{"class":189,"line":471},20,[187,473,282],{"class":193},[187,475,170],{"class":197},[187,477,215],{"class":193},[126,479,480],{"id":480},"八种按钮组合",[14,482,483,484,146,487,490],{},"命令区状态只由「三个按钮文案是否为空」推导（对齐 ",[28,485,486],{},"ChangeVisualState",[28,488,489],{},"ButtonsVisibilityStates"," 八个分支）：",[492,493,494,514],"table",{},[495,496,497],"thead",{},[498,499,500,508,511],"tr",{},[501,502,503,504,507],"th",{},"状态（",[28,505,506],{},"data-buttons","）",[501,509,510],{},"触发条件",[501,512,513],{},"按钮落位",[515,516,517,541,554,570,584,597],"tbody",{},[498,518,519,525,528],{},[520,521,522],"td",{},[28,523,524],{},"all",[520,526,527],{},"三个文案都有",[520,529,530,531,534,535,538,539,507],{},"三列各占 1\u002F3，列间距 8 + 8（",[28,532,533],{},"FirstSpacer"," = 8、",[28,536,537],{},"SecondaryColumn"," = ",[28,540,89],{},[498,542,543,548,551],{},[520,544,545],{},[28,546,547],{},"primary-secondary",[520,549,550],{},"主 + 次",[520,552,553],{},"主按钮第 1 列、次按钮第 5 列，各占半宽",[498,555,556,564,567],{},[520,557,558,138,561],{},[28,559,560],{},"primary-close",[28,562,563],{},"secondary-close",[520,565,566],{},"主+关 \u002F 次+关",[520,568,569],{},"前一个按钮第 1 列、关闭按钮第 5 列",[498,571,572,578,581],{},[520,573,574,138,576],{},[28,575,153],{},[28,577,156],{},[520,579,580],{},"只有主 \u002F 只有次",[520,582,583],{},"该按钮移到第 5 列（右半宽）",[498,585,586,591,594],{},[520,587,588],{},[28,589,590],{},"close",[520,592,593],{},"只有关闭按钮",[520,595,596],{},"关闭按钮第 5 列",[498,598,599,603,606],{},[520,600,601],{},[28,602,159],{},[520,604,605],{},"全空",[520,607,608,609,507],{},"命令区整体折叠（",[28,610,611],{},"CommandSpace.Visibility = Collapsed",[166,613,615,620],{"title":614},"八种组合逐一切换",[170,616,617],{"v-slot:preview":172},[618,619],"content-dialog-buttons-demo",{},[170,621,622],{"v-slot:code":172},[179,623,625],{"className":181,"code":624,"language":183,"meta":172,"style":172},"\u003CFluereContentDialog\n  v-model:open=\"open\"\n  title=\"命令区按钮组合\"\n  :primary-button-text=\"active.primary\"\n  :secondary-button-text=\"active.secondary\"\n  :close-button-text=\"active.close\"\n\u002F>\n",[28,626,627,633,650,660,677,693,709],{"__ignoreMap":172},[187,628,629,631],{"class":189,"line":190},[187,630,194],{"class":193},[187,632,345],{"class":197},[187,634,635,638,640,642,644,646,648],{"class":189,"line":218},[187,636,637],{"class":201},"  v-model",[187,639,354],{"class":193},[187,641,357],{"class":201},[187,643,208],{"class":193},[187,645,320],{"class":211},[187,647,357],{"class":193},[187,649,366],{"class":211},[187,651,652,655,657],{"class":189,"line":234},[187,653,654],{"class":201},"  title",[187,656,208],{"class":193},[187,658,659],{"class":211},"\"命令区按钮组合\"\n",[187,661,662,665,668,670,672,675],{"class":189,"line":247},[187,663,664],{"class":193},"  :",[187,666,667],{"class":201},"primary-button-text",[187,669,208],{"class":193},[187,671,320],{"class":211},[187,673,674],{"class":193},"active.primary",[187,676,366],{"class":211},[187,678,679,681,684,686,688,691],{"class":189,"line":254},[187,680,664],{"class":193},[187,682,683],{"class":201},"secondary-button-text",[187,685,208],{"class":193},[187,687,320],{"class":211},[187,689,690],{"class":193},"active.secondary",[187,692,366],{"class":211},[187,694,695,697,700,702,704,707],{"class":189,"line":279},[187,696,664],{"class":193},[187,698,699],{"class":201},"close-button-text",[187,701,208],{"class":193},[187,703,320],{"class":211},[187,705,706],{"class":193},"active.close",[187,708,366],{"class":211},[187,710,711],{"class":189,"line":289},[187,712,713],{"class":193},"\u002F>\n",[126,715,717],{"id":716},"默认按钮与-enter","默认按钮与 Enter",[14,719,720,723,724,727,728,731,732,735,736,739,740,743,744,746],{},[28,721,722],{},"default-button"," 决定哪个按钮拿到强调样式（对应 ",[28,725,726],{},"DefaultButton"," + ",[28,729,730],{},"AccentButtonStyle","）。焦点规则与 WinUI 逐字一致：",[23,733,734],{},"焦点不在命令区","（或正好落在该按钮上）时保留强调态；焦点移到命令区里的",[23,737,738],{},"其它","按钮时，强调态消失（",[28,741,742],{},"NoDefaultButton"," 分支）。按下 Enter 时激活的是 ",[28,745,722],{}," 指向的按钮，而不是当前强调的那个。",[166,748,750,755],{"title":749},"DefaultButton 四档 + Enter 行为",[170,751,752],{"v-slot:preview":172},[753,754],"content-dialog-default-button-demo",{},[170,756,757],{"v-slot:code":172},[179,758,760],{"className":181,"code":759,"language":183,"meta":172,"style":172},"\u003CFluereContentDialog\n  v-model:open=\"open\"\n  title=\"默认按钮与 Enter\"\n  primary-button-text=\"确定\"\n  secondary-button-text=\"取消\"\n  close-button-text=\"关闭\"\n  default-button=\"primary\"\n\u002F>\n",[28,761,762,768,784,793,803,812,822,831],{"__ignoreMap":172},[187,763,764,766],{"class":189,"line":190},[187,765,194],{"class":193},[187,767,345],{"class":197},[187,769,770,772,774,776,778,780,782],{"class":189,"line":218},[187,771,637],{"class":201},[187,773,354],{"class":193},[187,775,357],{"class":201},[187,777,208],{"class":193},[187,779,320],{"class":211},[187,781,357],{"class":193},[187,783,366],{"class":211},[187,785,786,788,790],{"class":189,"line":234},[187,787,654],{"class":201},[187,789,208],{"class":193},[187,791,792],{"class":211},"\"默认按钮与 Enter\"\n",[187,794,795,798,800],{"class":189,"line":247},[187,796,797],{"class":201},"  primary-button-text",[187,799,208],{"class":193},[187,801,802],{"class":211},"\"确定\"\n",[187,804,805,808,810],{"class":189,"line":254},[187,806,807],{"class":201},"  secondary-button-text",[187,809,208],{"class":193},[187,811,399],{"class":211},[187,813,814,817,819],{"class":189,"line":279},[187,815,816],{"class":201},"  close-button-text",[187,818,208],{"class":193},[187,820,821],{"class":211},"\"关闭\"\n",[187,823,824,827,829],{"class":189,"line":289},[187,825,826],{"class":201},"  default-button",[187,828,208],{"class":193},[187,830,410],{"class":211},[187,832,833],{"class":189,"line":294},[187,834,713],{"class":193},[126,836,838],{"id":837},"取消关闭closing-的-cancel","取消关闭（Closing 的 Cancel）",[14,840,841,146,844,847,848,138,851,138,854,857,858,861],{},[28,842,843],{},"closing",[28,845,846],{},"args.cancel = true"," 会取消本次关闭，弹窗留在原地且不播放退出动画；三个按钮的点击事件（",[28,849,850],{},"primaryButtonClick",[28,852,853],{},"secondaryButtonClick",[28,855,856],{},"closeButtonClick","）同样可以 ",[28,859,860],{},"args.cancel"," 阻止后续关闭。",[166,863,865,870],{"title":864},"先确认再关闭（closing.cancel）",[170,866,867],{"v-slot:preview":172},[868,869],"content-dialog-cancel-demo",{},[170,871,872],{"v-slot:code":172},[179,873,875],{"className":181,"code":874,"language":183,"meta":172,"style":172},"\u003Cscript setup lang=\"ts\">\nconst onClosing = (args) => {\n  if (needConfirm.value) {\n    args.cancel = true \u002F\u002F 第一次拦下\n    needConfirm.value = false\n  }\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFluereContentDialog\n    v-model:open=\"open\"\n    title=\"放弃未保存的更改？\"\n    @closing=\"onClosing\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[28,876,877,893,914,922,935,945,950,955,963,967,975,981,997,1006,1021,1026],{"__ignoreMap":172},[187,878,879,881,883,885,887,889,891],{"class":189,"line":190},[187,880,194],{"class":193},[187,882,198],{"class":197},[187,884,202],{"class":201},[187,886,205],{"class":201},[187,888,208],{"class":193},[187,890,212],{"class":211},[187,892,215],{"class":193},[187,894,895,897,900,902,905,907,909,911],{"class":189,"line":218},[187,896,257],{"class":221},[187,898,899],{"class":201}," onClosing",[187,901,264],{"class":221},[187,903,904],{"class":193}," (",[187,906,428],{"class":427},[187,908,431],{"class":193},[187,910,434],{"class":221},[187,912,913],{"class":193}," {\n",[187,915,916,919],{"class":189,"line":234},[187,917,918],{"class":221},"  if",[187,920,921],{"class":193}," (needConfirm.value) {\n",[187,923,924,927,929,931],{"class":189,"line":247},[187,925,926],{"class":193},"    args.cancel ",[187,928,208],{"class":221},[187,930,328],{"class":260},[187,932,934],{"class":933},"sJ8bj"," \u002F\u002F 第一次拦下\n",[187,936,937,940,942],{"class":189,"line":254},[187,938,939],{"class":193},"    needConfirm.value ",[187,941,208],{"class":221},[187,943,944],{"class":260}," false\n",[187,946,947],{"class":189,"line":279},[187,948,949],{"class":193},"  }\n",[187,951,952],{"class":189,"line":289},[187,953,954],{"class":193},"}\n",[187,956,957,959,961],{"class":189,"line":294},[187,958,282],{"class":193},[187,960,198],{"class":197},[187,962,215],{"class":193},[187,964,965],{"class":189,"line":303},[187,966,251],{"emptyLinePlaceholder":250},[187,968,969,971,973],{"class":189,"line":340},[187,970,194],{"class":193},[187,972,170],{"class":197},[187,974,215],{"class":193},[187,976,977,979],{"class":189,"line":348},[187,978,306],{"class":193},[187,980,345],{"class":197},[187,982,983,985,987,989,991,993,995],{"class":189,"line":369},[187,984,351],{"class":201},[187,986,354],{"class":193},[187,988,357],{"class":201},[187,990,208],{"class":193},[187,992,320],{"class":211},[187,994,357],{"class":193},[187,996,366],{"class":211},[187,998,999,1001,1003],{"class":189,"line":380},[187,1000,372],{"class":201},[187,1002,208],{"class":193},[187,1004,1005],{"class":211},"\"放弃未保存的更改？\"\n",[187,1007,1008,1010,1012,1014,1016,1019],{"class":189,"line":391},[187,1009,416],{"class":193},[187,1011,843],{"class":201},[187,1013,208],{"class":193},[187,1015,320],{"class":211},[187,1017,1018],{"class":193},"onClosing",[187,1020,366],{"class":211},[187,1022,1023],{"class":189,"line":402},[187,1024,1025],{"class":193},"  \u002F>\n",[187,1027,1028,1030,1032],{"class":189,"line":413},[187,1029,282],{"class":193},[187,1031,170],{"class":197},[187,1033,215],{"class":193},[126,1035,1036],{"id":1036},"全尺寸与长内容",[14,1038,1039,1042,1043,1046,1047,1050,1051,1054,1055,1058,1059,1062],{},[28,1040,1041],{},"full-size-desired"," 对应 ",[28,1044,1045],{},"FullSizeDesired"," → ",[28,1048,1049],{},"FullDialogSizing","（只把表面的纵向对齐改为 Stretch，横向仍居中）；内容超出高度时由内容区内部滚动，命令区固定在底部。WinUI 的 ",[28,1052,1053],{},"ContentScrollViewer"," 把 ",[28,1056,1057],{},"VerticalScrollBarVisibility"," 设为 Disabled，因此",[23,1060,1061],{},"滚动条不可见","但内容仍可滚动。",[166,1064,1066,1071],{"title":1065},"FullSizeDesired：纵向撑满（上限 756）",[170,1067,1068],{"v-slot:preview":172},[1069,1070],"content-dialog-full-size-demo",{},[170,1072,1073],{"v-slot:code":172},[179,1074,1076],{"className":181,"code":1075,"language":183,"meta":172,"style":172},"\u003CFluereContentDialog v-model:open=\"open\" title=\"全尺寸弹窗\" full-size-desired \u002F>\n",[28,1077,1078],{"__ignoreMap":172},[187,1079,1080,1082,1084,1087,1089,1091,1093,1095,1097,1099,1102,1104,1107,1110],{"class":189,"line":190},[187,1081,194],{"class":193},[187,1083,466],{"class":197},[187,1085,1086],{"class":201}," v-model",[187,1088,354],{"class":193},[187,1090,357],{"class":201},[187,1092,208],{"class":193},[187,1094,320],{"class":211},[187,1096,357],{"class":193},[187,1098,320],{"class":211},[187,1100,1101],{"class":201}," title",[187,1103,208],{"class":193},[187,1105,1106],{"class":211},"\"全尺寸弹窗\"",[187,1108,1109],{"class":201}," full-size-desired",[187,1111,1112],{"class":193}," \u002F>\n",[166,1114,1116,1121],{"title":1115},"长内容 + 无按钮：内容区滚动，Esc 关闭",[170,1117,1118],{"v-slot:preview":172},[1119,1120],"content-dialog-long-content-demo",{},[170,1122,1123],{"v-slot:code":172},[179,1124,1126],{"className":181,"code":1125,"language":183,"meta":172,"style":172},"\u003C!-- 三个按钮文案都不给 ⇒ data-buttons=\"none\"，命令区折叠 -->\n\u003CFluereContentDialog v-model:open=\"open\" title=\"服务条款摘要（无按钮）\">\n  \u003Cp v-for=\"index in paragraphs\" :key=\"index\">第 {{ index }} 段…\u003C\u002Fp>\n\u003C\u002FFluereContentDialog>\n",[28,1127,1128,1133,1162,1167],{"__ignoreMap":172},[187,1129,1130],{"class":189,"line":190},[187,1131,1132],{"class":933},"\u003C!-- 三个按钮文案都不给 ⇒ data-buttons=\"none\"，命令区折叠 -->\n",[187,1134,1135,1137,1139,1141,1143,1145,1147,1149,1151,1153,1155,1157,1160],{"class":189,"line":218},[187,1136,194],{"class":193},[187,1138,466],{"class":197},[187,1140,1086],{"class":201},[187,1142,354],{"class":193},[187,1144,357],{"class":201},[187,1146,208],{"class":193},[187,1148,320],{"class":211},[187,1150,357],{"class":193},[187,1152,320],{"class":211},[187,1154,1101],{"class":201},[187,1156,208],{"class":193},[187,1158,1159],{"class":211},"\"服务条款摘要（无按钮）\"",[187,1161,215],{"class":193},[187,1163,1164],{"class":189,"line":234},[187,1165,1166],{"class":193},"  \u003Cp v-for=\"index in paragraphs\" :key=\"index\">第 {{ index }} 段…\u003C\u002Fp>\n",[187,1168,1169,1171,1173],{"class":189,"line":247},[187,1170,282],{"class":193},[187,1172,466],{"class":197},[187,1174,215],{"class":193},[126,1176,1178],{"id":1177},"api","API",[492,1180,1181,1197],{},[495,1182,1183],{},[498,1184,1185,1188,1191,1194],{},[501,1186,1187],{},"属性（Props）",[501,1189,1190],{},"类型",[501,1192,1193],{},"默认",[501,1195,1196],{},"说明",[515,1198,1199,1224,1247,1268,1289,1310,1332,1353,1375,1395,1417],{},[498,1200,1201,1205,1210,1214],{},[520,1202,1203],{},[28,1204,357],{},[520,1206,1207],{},[28,1208,1209],{},"boolean",[520,1211,1212],{},[28,1213,273],{},[520,1215,1216,1217,1219,1220,138,1222],{},"是否显示（",[28,1218,133],{},"）；对齐 ",[28,1221,137],{},[28,1223,141],{},[498,1225,1226,1231,1236,1241],{},[520,1227,1228],{},[28,1229,1230],{},"title",[520,1232,1233],{},[28,1234,1235],{},"string",[520,1237,1238],{},[28,1239,1240],{},"''",[520,1242,1243,1244],{},"标题，20px \u002F SemiBold，最多 2 行；对齐 ",[28,1245,1246],{},"Title",[498,1248,1249,1254,1258,1262],{},[520,1250,1251],{},[28,1252,1253],{},"primaryButtonText",[520,1255,1256],{},[28,1257,1235],{},[520,1259,1260],{},[28,1261,1240],{},[520,1263,1264,1265],{},"主按钮文案；空则不渲染；对齐 ",[28,1266,1267],{},"PrimaryButtonText",[498,1269,1270,1275,1279,1283],{},[520,1271,1272],{},[28,1273,1274],{},"secondaryButtonText",[520,1276,1277],{},[28,1278,1235],{},[520,1280,1281],{},[28,1282,1240],{},[520,1284,1285,1286],{},"次按钮文案；空则不渲染；对齐 ",[28,1287,1288],{},"SecondaryButtonText",[498,1290,1291,1296,1300,1304],{},[520,1292,1293],{},[28,1294,1295],{},"closeButtonText",[520,1297,1298],{},[28,1299,1235],{},[520,1301,1302],{},[28,1303,1240],{},[520,1305,1306,1307],{},"关闭按钮文案；空则不渲染；对齐 ",[28,1308,1309],{},"CloseButtonText",[498,1311,1312,1317,1321,1326],{},[520,1313,1314],{},[28,1315,1316],{},"isPrimaryButtonEnabled",[520,1318,1319],{},[28,1320,1209],{},[520,1322,1323],{},[28,1324,1325],{},"true",[520,1327,1328,1329],{},"主按钮是否可用；对齐 ",[28,1330,1331],{},"IsPrimaryButtonEnabled",[498,1333,1334,1339,1343,1347],{},[520,1335,1336],{},[28,1337,1338],{},"isSecondaryButtonEnabled",[520,1340,1341],{},[28,1342,1209],{},[520,1344,1345],{},[28,1346,1325],{},[520,1348,1349,1350],{},"次按钮是否可用；对齐 ",[28,1351,1352],{},"IsSecondaryButtonEnabled",[498,1354,1355,1360,1365,1370],{},[520,1356,1357],{},[28,1358,1359],{},"defaultButton",[520,1361,1362],{},[28,1363,1364],{},"'none' | 'primary' | 'secondary' | 'close'",[520,1366,1367],{},[28,1368,1369],{},"'none'",[520,1371,1372,1373],{},"默认按钮（强调样式 + Enter 目标）；对齐 ",[28,1374,726],{},[498,1376,1377,1382,1386,1390],{},[520,1378,1379],{},[28,1380,1381],{},"fullSizeDesired",[520,1383,1384],{},[28,1385,1209],{},[520,1387,1388],{},[28,1389,273],{},[520,1391,1392,1393],{},"纵向撑满（上限 756）；对齐 ",[28,1394,1045],{},[498,1396,1397,1402,1406,1411],{},[520,1398,1399],{},[28,1400,1401],{},"ariaLabel",[520,1403,1404],{},[28,1405,1235],{},[520,1407,1408],{},[28,1409,1410],{},"—",[520,1412,1413,1414],{},"无标题时的可访问名；对齐 ",[28,1415,1416],{},"AutomationProperties.Name",[498,1418,1419,1424,1429,1434],{},[520,1420,1421],{},[28,1422,1423],{},"to",[520,1425,1426],{},[28,1427,1428],{},"string | HTMLElement",[520,1430,1431],{},[28,1432,1433],{},"'body'",[520,1435,1436,1437,507],{},"门户目标（Web 侧替代 ",[28,1438,1439],{},"XamlRoot",[492,1441,1442,1454],{},[495,1443,1444],{},[498,1445,1446,1449,1452],{},[501,1447,1448],{},"事件（Emits）",[501,1450,1451],{},"载荷",[501,1453,1196],{},[515,1455,1456,1472,1487,1505,1518,1531,1551],{},[498,1457,1458,1463,1467],{},[520,1459,1460],{},[28,1461,1462],{},"update:open",[520,1464,1465],{},[28,1466,1209],{},[520,1468,1469,1471],{},[28,1470,133],{}," 的更新",[498,1473,1474,1479,1481],{},[520,1475,1476],{},[28,1477,1478],{},"opened",[520,1480,1410],{},[520,1482,1483,1484],{},"弹窗已打开；对齐 ",[28,1485,1486],{},"Opened",[498,1488,1489,1493,1498],{},[520,1490,1491],{},[28,1492,850],{},[520,1494,1495],{},[28,1496,1497],{},"{ cancel }",[520,1499,1500,1501,1504],{},"主按钮被点击；",[28,1502,1503],{},"cancel = true"," 阻止后续关闭",[498,1506,1507,1511,1515],{},[520,1508,1509],{},[28,1510,853],{},[520,1512,1513],{},[28,1514,1497],{},[520,1516,1517],{},"次按钮被点击；同上",[498,1519,1520,1524,1528],{},[520,1521,1522],{},[28,1523,856],{},[520,1525,1526],{},[28,1527,1497],{},[520,1529,1530],{},"关闭按钮被点击；同上",[498,1532,1533,1537,1542],{},[520,1534,1535],{},[28,1536,843],{},[520,1538,1539],{},[28,1540,1541],{},"{ result, cancel }",[520,1543,1544,1545,1547,1548],{},"请求关闭；",[28,1546,1503],{}," 取消关闭；对齐 ",[28,1549,1550],{},"Closing",[498,1552,1553,1557,1562],{},[520,1554,1555],{},[28,1556,145],{},[520,1558,1559],{},[28,1560,1561],{},"{ result }",[520,1563,1564,1565,1568,1569,1572,1573],{},"已关闭，",[28,1566,1567],{},"result"," ∈ ",[28,1570,1571],{},"'primary' | 'secondary' | 'none'","；对齐 ",[28,1574,1575],{},"Closed",[492,1577,1578,1587],{},[495,1579,1580],{},[498,1581,1582,1585],{},[501,1583,1584],{},"插槽（Slots）",[501,1586,1196],{},[515,1588,1589,1606],{},[498,1590,1591,1595],{},[520,1592,1593],{},[28,1594,1230],{},[520,1596,1597,1598,138,1600,1603,1604],{},"对应 ",[28,1599,1246],{},[28,1601,1602],{},"TitleTemplate","；提供后取代 ",[28,1605,1230],{},[498,1607,1608,1613],{},[520,1609,1610],{},[28,1611,1612],{},"default",[520,1614,1597,1615,138,1618],{},[28,1616,1617],{},"Content",[28,1619,1620],{},"ContentTemplate",[1622,1623,1624,1648,1693,1698],"blockquote",{},[14,1625,1626,1629,1630,727,1633,1636,1637,1640,1641,1643,1644,1647],{},[23,1627,1628],{},"无障碍","：内容层渲染 ",[28,1631,1632],{},"role=\"dialog\"",[28,1634,1635],{},"aria-modal=\"true\"","（对齐 WinUI 弹窗的 ",[28,1638,1639],{},"IsDialog"," + 模态语义），可访问名取标题（无标题时可用 ",[28,1642,1401],{},"）；初始焦点按 WinUI 的三级优先设置（内容区第一个可聚焦元素 → 默认按钮 → 命令区第一个可聚焦按钮）；",[28,1645,1646],{},"Tab"," 在弹窗内循环，关闭后焦点回到弹出前聚焦的元素；遮罩层对 AT 隐藏。",[14,1649,1650,1653,1654,1657,1658,1661,1662,1665,1666,146,1669,1672,1673,138,1676,138,1679,138,1682,138,1685,1688,1689,1692],{},[23,1651,1652],{},"共享弹层原语","：遮罩层由 ",[28,1655,1656],{},"FluereSmokeLayer"," 提供（独立 Teleport + reka ",[28,1659,1660],{},"Presence","，83ms linear 淡入淡出、锁定 body 滚动、",[28,1663,1664],{},"aria-hidden","），状态机由 ",[28,1667,1668],{},"@fluere-vue\u002Fhooks",[28,1670,1671],{},"useDisclosure"," 提供（",[28,1674,1675],{},"isOpen",[28,1677,1678],{},"isClosing",[28,1680,1681],{},"requestClose",[28,1683,1684],{},"finishClose",[28,1686,1687],{},"cancelClose","，SSR 安全且尊重 ",[28,1690,1691],{},"prefers-reduced-motion","）。后续 Tooltip \u002F Flyout 类组件复用同一组原语。",[14,1694,1695],{},[23,1696,1697],{},"实现要点",[44,1699,1700,1721,1776,1786,1809,1827,1946,1963,1981,1995],{},[47,1701,1702,1705,1706,1708,1709,1712,1713,1716,1717,1720],{},[23,1703,1704],{},"动效不是一条动画","：reka 的 ",[28,1707,1660],{}," 以节点上第一次 ",[28,1710,1711],{},"animationend"," 决定卸载时机，而 WinUI 的缩放（250 \u002F 167ms）与淡入淡出（83ms）时长不同。因此本组件把",[23,1714,1715],{},"缩放放在内容层根节点","（最长的一条，负责门控卸载，退出动画不会被截断），",[23,1718,1719],{},"透明度放在内层表面","（83ms 结束即保持 0，剩余时间里的缩放不可见），遮罩层另在独立 Teleport 层上跑自己的 83ms —— 与 WinUI「两个 Popup、同一 Storyboard 多目标」的结构同构。",[47,1722,1723,52,1726,1729,1730,1733,1734,1737,1738,1741,1742,1745,1746,138,1749,138,1752,1755,1756,146,1759,138,1762,138,1765,1768,1769,138,1772,1775],{},[23,1724,1725],{},"动效逐帧对齐源码",[28,1727,1728],{},"ContentDialogOpenCloseThemeTransition::CreateStoryboardImpl","（",[28,1731,1732],{},"LayoutTransition_partial.cpp","）里 Load 分支注册 ",[28,1735,1736],{},"ScaleX\u002FY"," 1.05 → 1.0（250ms，",[28,1739,1740],{},"TimingFunctionDescription{cp3.X=0}"," = cubic-bezier(0,0,0,1)）与 ",[28,1743,1744],{},"Opacity"," 0 → 1（83ms，linear），Unload 分支对称（167ms \u002F 83ms）；",[28,1747,1748],{},"s_OpenScaleDuration=250",[28,1750,1751],{},"s_CloseScaleDuration=167",[28,1753,1754],{},"s_OpacityChangeDuration=83"," 与 ",[28,1757,1758],{},"Common_themeresources_any.xaml",[28,1760,1761],{},"ControlNormalAnimationDuration",[28,1763,1764],{},"ControlFastAnimationDuration",[28,1766,1767],{},"ControlFasterAnimationDuration"," 一一对应。250ms 与缓动都命中 token（",[28,1770,1771],{},"--durationGentle",[28,1773,1774],{},"--curveDecelerateMid","），167ms \u002F 83ms 无同值 token，落成组件局部变量并注明来源。",[47,1777,1778,1781,1782,1785],{},[23,1779,1780],{},"遮罩层与弹窗同层","：两者 ",[28,1783,1784],{},"z-index"," 都是 1000，靠 Teleport 挂载顺序（遮罩先、弹窗后）决定绘制次序 —— 这是为了让弹窗内部再 Teleport 的浮层（如 Combobox 下拉，同为 1000）仍能盖在弹窗之上。",[47,1787,1788,1791,1792,138,1795,138,1798,1801,1802,1805,1806,1808],{},[23,1789,1790],{},"点击遮罩不关闭","：WinUI 的 ContentDialog 没有任何 light-dismiss 路径，本组件同样把 ",[28,1793,1794],{},"pointer-down-outside",[28,1796,1797],{},"interact-outside",[28,1799,1800],{},"focus-outside"," 一律 ",[28,1803,1804],{},"preventDefault()","，只有 ",[28,1807,30],{}," 与三个按钮能关闭。",[47,1810,1811,1816,1817,1820,1821,1823,1824,1826],{},[23,1812,1813,1815],{},[28,1814,30],{}," 与关闭按钮","：对齐 ",[28,1818,1819],{},"ExecuteCloseAction()"," —— 存在可点的关闭按钮时，「程序化点击」它（先走 ",[28,1822,856],{},"），否则直接以 ",[28,1825,159],{}," 关闭。",[47,1828,1829,1832,1833,1836,1837,1046,1840,1843,1844,1836,1846,1849,1850,1853,1854,1836,1857,1860,1861,138,1864,1867,1868,1871,1872,1836,1875,1046,1878,1881,1882,1836,1885,1888,1889,1892,1893],{},[23,1830,1831],{},"配色映射","（WinUI 资源 → token）：",[28,1834,1835],{},"ContentDialogBackground"," ← ",[28,1838,1839],{},"SolidBackgroundFillColorBase",[28,1841,1842],{},"colorNeutralBackground2","（ΔE 2.3 \u002F 0.6）；",[28,1845,97],{},[28,1847,1848],{},"LayerFillColorAlt"," 叠底后的结果 → ",[28,1851,1852],{},"colorNeutralBackground1","（ΔE 0 \u002F 1.4）；",[28,1855,1856],{},"ContentDialogBorderBrush",[28,1858,1859],{},"SurfaceStrokeColorDefault","（合成后 ",[28,1862,1863],{},"#C1C1C1",[28,1865,1866],{},"#424242","）→ ",[28,1869,1870],{},"colorNeutralStroke2","（ΔE 31 \u002F 16）；",[28,1873,1874],{},"ContentDialogSeparatorBorderBrush",[28,1876,1877],{},"CardStrokeColorDefault",[28,1879,1880],{},"colorNeutralStrokeAlpha","；",[28,1883,1884],{},"ContentDialogSmokeFill",[28,1886,1887],{},"SmokeFillColorDefault","（30% 黑）→ ",[28,1890,1891],{},"colorBackgroundOverlay","（40% \u002F 50%）。Fluent 2 Web 的 token 表没有同值档，需要严格对齐实机时覆盖局部变量：",[179,1894,1898],{"className":1895,"code":1896,"language":1897,"meta":172,"style":172},"language-css shiki shiki-themes github-light github-dark",".my-dialog .fui-content-dialog__surface {\n  --fui-content-dialog-surface: #f3f3f3; \u002F* SolidBackgroundFillColorBase *\u002F\n  --fui-content-dialog-border: #c1c1c1; \u002F* SurfaceStrokeColorDefault 合成值 *\u002F\n}\n","css",[28,1899,1900,1910,1927,1942],{"__ignoreMap":172},[187,1901,1902,1905,1908],{"class":189,"line":190},[187,1903,1904],{"class":201},".my-dialog",[187,1906,1907],{"class":201}," .fui-content-dialog__surface",[187,1909,913],{"class":193},[187,1911,1912,1915,1918,1921,1924],{"class":189,"line":218},[187,1913,1914],{"class":427},"  --fui-content-dialog-surface",[187,1916,1917],{"class":193},": ",[187,1919,1920],{"class":260},"#f3f3f3",[187,1922,1923],{"class":193},"; ",[187,1925,1926],{"class":933},"\u002F* SolidBackgroundFillColorBase *\u002F\n",[187,1928,1929,1932,1934,1937,1939],{"class":189,"line":234},[187,1930,1931],{"class":427},"  --fui-content-dialog-border",[187,1933,1917],{"class":193},[187,1935,1936],{"class":260},"#c1c1c1",[187,1938,1923],{"class":193},[187,1940,1941],{"class":933},"\u002F* SurfaceStrokeColorDefault 合成值 *\u002F\n",[187,1943,1944],{"class":189,"line":247},[187,1945,954],{"class":193},[47,1947,1948,52,1951,1954,1955,1958,1959,1962],{},[23,1949,1950],{},"阴影是 B 级近似",[28,1952,1953],{},"PrepareContent"," 用 ",[28,1956,1957],{},"ApplyElevationEffect(depth 0, baseElevation 128)"," 投阴影，源码只给 elevation 值、没有 px 可换算，这里按浮层语义位取 Fluent 2 最大档 ",[28,1960,1961],{},"--shadow64","。",[47,1964,1965,1969,1970,1973,1974,138,1977,1980],{},[23,1966,1967],{},[28,1968,1691],{},"：关闭缩放与淡入淡出（",[28,1971,1972],{},"animation: none","），静态形态就是最终态（",[28,1975,1976],{},"scale 1",[28,1978,1979],{},"opacity 1","），关闭变为立即卸载。",[47,1982,1983,1986,1987,1990,1991,1994],{},[23,1984,1985],{},"窄视口","：WinUI 的 ",[28,1988,1989],{},"MinWidth 320"," 等绝对尺寸在 Web 上用 ",[28,1992,1993],{},"min(..., 100%)"," 与视口对齐（WinUI 假定桌面窗口足够宽），属响应式补充。",[47,1996,1997,52,2000,138,2003,2005,2006,2009,2010,2013,2014,2017,2018,2021,2022,2025,2026,2029],{},[23,1998,1999],{},"与 WinUI 的差异",[28,2001,2002],{},"ButtonClick",[28,2004,1550],{}," 的取消是",[23,2007,2008],{},"同步标志","（不做异步 Deferral）；",[28,2011,2012],{},"Enter"," 在 button \u002F a \u002F input \u002F textarea \u002F select \u002F summary \u002F contenteditable \u002F ",[28,2015,2016],{},"role=button"," 上不接管（WinUI 靠路由事件的 ",[28,2019,2020],{},"Handled"," 达到同一效果）；焦点还原发生在退出动画结束（WinUI 在关闭流程开始时就还焦点）；不暴露 ",[28,2023,2024],{},"PrimaryButtonCommand"," 等 Command 属性与三个 ",[28,2027,2028],{},"*ButtonStyle","（由点击事件 \u002F 固定样式承担）；不做「同一父节点只允许一个 Popup 弹窗」的强约束；高对比度主题未实现（属已知缺口）。",[2031,2032,2033],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":172,"searchDepth":218,"depth":218,"links":2035},[2036,2037,2038,2039,2040,2041],{"id":128,"depth":218,"text":128},{"id":480,"depth":218,"text":480},{"id":716,"depth":218,"text":717},{"id":837,"depth":218,"text":838},{"id":1036,"depth":218,"text":1036},{"id":1177,"depth":218,"text":1178},"模态对话框：标题 + 正文 + 主\u002F次\u002F关闭三个按钮，遮罩层与弹窗的进入 \u002F 退出缓动逐帧对齐 WinUI 3。","md",{},{"title":5},"\u002Fcomponents\u002Fcontent-dialog",{"title":5,"description":2042},"components\u002Fcontent-dialog","g3fVQkbMdwXa48nXZ1lrPpud5IjRgrySo9hGOCpq3Ls",null,1791802960849]