[{"data":1,"prerenderedAt":1633},["ShallowReactive",2],{"navigation":3,"blogNavigation":232,"page-\u002Fdocs\u002F%E7%AE%80%E5%8D%95%E6%96%87%E6%A1%A3\u002Fwriting\u002Fmdc-content":418,"\u002Fdocs\u002F%E7%AE%80%E5%8D%95%E6%96%87%E6%A1%A3\u002Fwriting\u002Fmdc-content-surround":1628},[4],{"title":5,"path":6,"stem":7,"children":8,"page":57},"Docs","\u002Fdocs","docs",[9,176,184],{"title":10,"path":11,"stem":12,"children":13,"icon":16},"简单文档","\u002Fdocs\u002F简单文档","docs\u002F1.简单文档\u002F1.index",[14,17,22,58,63,166,171],{"title":15,"path":11,"stem":12,"icon":16},"入门简介","lucide-house",{"title":18,"path":19,"stem":20,"icon":21},"安装与开发","\u002Fdocs\u002F简单文档\u002Finstallation","docs\u002F1.简单文档\u002F2.installation","lucide-play",{"title":23,"path":24,"stem":25,"children":26,"page":57},"开始写作","\u002Fdocs\u002F简单文档\u002Fwriting","docs\u002F1.简单文档\u002F3.writing",[27,32,37,42,47,52],{"title":28,"path":29,"stem":30,"icon":31},"Markdown","\u002Fdocs\u002F简单文档\u002Fwriting\u002Fmarkdown","docs\u002F1.简单文档\u002F3.writing\u002F1.markdown","simple-icons:markdown",{"title":33,"path":34,"stem":35,"icon":36},"页面 frontmatter","\u002Fdocs\u002F简单文档\u002Fwriting\u002Fpages","docs\u002F1.简单文档\u002F3.writing\u002F2.pages","lucide:file-text",{"title":38,"path":39,"stem":40,"icon":41},"目录与文件命名","\u002Fdocs\u002F简单文档\u002Fwriting\u002Ffolders","docs\u002F1.简单文档\u002F3.writing\u002F3.folders","lucide:folder",{"title":43,"path":44,"stem":45,"icon":46},"单页面示例","\u002Fdocs\u002F简单文档\u002Fwriting\u002Ffull-page-example","docs\u002F1.简单文档\u002F3.writing\u002F4.full-page-example","lucide:layout-template",{"title":48,"path":49,"stem":50,"icon":51},"内容检查与测试","\u002Fdocs\u002F简单文档\u002Fwriting\u002Ftest","docs\u002F1.简单文档\u002F3.writing\u002F5.test","lucide:shield-check",{"title":53,"path":54,"stem":55,"icon":56},"在文章中使用组件","\u002Fdocs\u002F简单文档\u002Fwriting\u002Fmdc-content","docs\u002F1.简单文档\u002F3.writing\u002F6.mdc-content","lucide-blocks",false,{"title":59,"path":60,"stem":61,"icon":62},"部署服务","\u002Fdocs\u002F简单文档\u002Fdeployment","docs\u002F1.简单文档\u002F4.deployment","lucide:cloud",{"title":64,"path":65,"stem":66,"children":67,"page":57},"组件特性","\u002Fdocs\u002F简单文档\u002Fcomponents","docs\u002F1.简单文档\u002F5.components",[68,73,77,81,85,89,93,97,101,105,110,114,118,122,126,131,136,141,146,150,154,158,162],{"title":69,"path":70,"stem":71,"icon":72},"常用组件","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fapi","docs\u002F1.简单文档\u002F5.components\u002F1.API","lucide-component",{"title":74,"path":75,"stem":76},"Alert","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Falert","docs\u002F1.简单文档\u002F5.components\u002Falert",{"title":78,"path":79,"stem":80},"Badge","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fbadge","docs\u002F1.简单文档\u002F5.components\u002Fbadge",{"title":82,"path":83,"stem":84},"Button Link","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fbutton-link","docs\u002F1.简单文档\u002F5.components\u002Fbutton-link",{"title":86,"path":87,"stem":88},"Callout","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fcallout","docs\u002F1.简单文档\u002F5.components\u002Fcallout",{"title":90,"path":91,"stem":92},"Card","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fcard","docs\u002F1.简单文档\u002F5.components\u002Fcard",{"title":94,"path":95,"stem":96},"Card Group","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fcard-group","docs\u002F1.简单文档\u002F5.components\u002Fcard-group",{"title":98,"path":99,"stem":100},"Code Group","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fcode-group","docs\u002F1.简单文档\u002F5.components\u002Fcode-group",{"title":102,"path":103,"stem":104},"Code Tree","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fcode-tree","docs\u002F1.简单文档\u002F5.components\u002Fcode-tree",{"title":106,"path":107,"stem":108,"icon":109},"博客与文档内容块","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fcontent-blocks","docs\u002F1.简单文档\u002F5.components\u002Fcontent-blocks","lucide-panels-top-left",{"title":111,"path":112,"stem":113},"Field","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Ffield","docs\u002F1.简单文档\u002F5.components\u002Ffield",{"title":115,"path":116,"stem":117},"Field Group","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Ffield-group","docs\u002F1.简单文档\u002F5.components\u002Ffield-group",{"title":119,"path":120,"stem":121},"File Tree","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Ffile-tree","docs\u002F1.简单文档\u002F5.components\u002Ffile-tree",{"title":123,"path":124,"stem":125},"Icon","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Ficon","docs\u002F1.简单文档\u002F5.components\u002Ficon",{"title":127,"path":128,"stem":129,"icon":130},"数据、API 与阅读交互组件","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Finteractive-blocks","docs\u002F1.简单文档\u002F5.components\u002Finteractive-blocks","lucide-table-properties",{"title":132,"path":133,"stem":134,"icon":135},"进阶组件交互演示","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Finteractive-showcase","docs\u002F1.简单文档\u002F5.components\u002Finteractive-showcase","lucide-sliders-horizontal",{"title":137,"path":138,"stem":139,"icon":140},"MDC 语法与组件注册","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fmdc-guide","docs\u002F1.简单文档\u002F5.components\u002Fmdc-guide","lucide-file-code",{"title":142,"path":143,"stem":144,"icon":145},"MDC 组件交互演示","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fmdc-showcase","docs\u002F1.简单文档\u002F5.components\u002Fmdc-showcase","lucide-mouse-pointer-click",{"title":147,"path":148,"stem":149},"Playground","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fplayground","docs\u002F1.简单文档\u002F5.components\u002Fplayground",{"title":151,"path":152,"stem":153},"Read More","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fread-more","docs\u002F1.简单文档\u002F5.components\u002Fread-more",{"title":155,"path":156,"stem":157},"Stack","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fstack","docs\u002F1.简单文档\u002F5.components\u002Fstack",{"title":159,"path":160,"stem":161},"Steps","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fsteps","docs\u002F1.简单文档\u002F5.components\u002Fsteps",{"title":163,"path":164,"stem":165},"Tabs","\u002Fdocs\u002F简单文档\u002Fcomponents\u002Ftabs","docs\u002F1.简单文档\u002F5.components\u002Ftabs",{"title":167,"path":168,"stem":169,"icon":170},"功能与路线图","\u002Fdocs\u002F简单文档\u002F功能与路线图","docs\u002F1.简单文档\u002F6.功能与路线图","lucide:map",{"title":172,"path":173,"stem":174,"icon":175},"Nuxt Studio 现状与运维说明","\u002Fdocs\u002F简单文档\u002Fnuxt-studio-upgrade-plan","docs\u002F1.简单文档\u002F7.nuxt-studio-upgrade-plan","simple-icons:nuxtdotjs",{"title":177,"path":178,"stem":179,"children":180,"icon":183},"无人自助系统","\u002Fdocs\u002F无人自助系统","docs\u002F2.无人自助系统\u002F1.index",[181],{"title":182,"path":178,"stem":179,"icon":183},"介绍","simple-icons:opencollective",{"title":185,"path":186,"stem":187,"children":188,"icon":191},"SwitchOps 交换机巡检","\u002Fdocs\u002Fswitchops交换机巡检","docs\u002F3.SwitchOps交换机巡检\u002F1.index",[189,192,197,202,207,212,217,222,227],{"title":190,"path":186,"stem":187,"icon":191},"产品简介","lucide:house",{"title":193,"path":194,"stem":195,"icon":196},"快速开始","\u002Fdocs\u002Fswitchops交换机巡检\u002Fquick-start","docs\u002F3.SwitchOps交换机巡检\u002F2.quick-start","lucide:rocket",{"title":198,"path":199,"stem":200,"icon":201},"设备清单配置","\u002Fdocs\u002Fswitchops交换机巡检\u002Fdevice-config","docs\u002F3.SwitchOps交换机巡检\u002F3.device-config","lucide:list-tree",{"title":203,"path":204,"stem":205,"icon":206},"图形界面使用","\u002Fdocs\u002Fswitchops交换机巡检\u002Fgui-guide","docs\u002F3.SwitchOps交换机巡检\u002F4.gui-guide","lucide:monitor",{"title":208,"path":209,"stem":210,"icon":211},"命令行使用","\u002Fdocs\u002Fswitchops交换机巡检\u002Fcli-guide","docs\u002F3.SwitchOps交换机巡检\u002F5.cli-guide","lucide:square-terminal",{"title":213,"path":214,"stem":215,"icon":216},"报告与历史数据","\u002Fdocs\u002Fswitchops交换机巡检\u002Freports-history","docs\u002F3.SwitchOps交换机巡检\u002F6.reports-history","lucide:file-chart-column",{"title":218,"path":219,"stem":220,"icon":221},"高级配置","\u002Fdocs\u002Fswitchops交换机巡检\u002Fadvanced-config","docs\u002F3.SwitchOps交换机巡检\u002F7.advanced-config","lucide:settings",{"title":223,"path":224,"stem":225,"icon":226},"Windows 打包部署","\u002Fdocs\u002Fswitchops交换机巡检\u002Fwindows-deployment","docs\u002F3.SwitchOps交换机巡检\u002F8.windows-deployment","lucide:package",{"title":228,"path":229,"stem":230,"icon":231},"故障排查与安全","\u002Fdocs\u002Fswitchops交换机巡检\u002Ftroubleshooting-security","docs\u002F3.SwitchOps交换机巡检\u002F9.troubleshooting-security","lucide:shield-alert",[233],{"title":234,"path":235,"stem":236,"children":237,"page":57},"Blog","\u002Fblog","blog",[238,401,410],{"title":239,"path":240,"stem":241,"children":242,"page":57},"技术栈","\u002Fblog\u002F技术栈","blog\u002F1.技术栈",[243,248,253,258,262,267,271,276,280,284,289,294,299,303,307,311,315,319,324,328,333,338,343,347,352,357,362,367,372,376,381,386,391,396],{"title":244,"path":245,"stem":246,"icon":247},"最近给文档站补了些什么","\u002Fblog\u002F技术栈\u002Festel-docs-recent-updates","blog\u002F1.技术栈\u002F968.estel-docs-recent-updates","lucide:blocks",{"title":249,"path":250,"stem":251,"icon":252},"国产化终端能上办公网，却登录不了 OA：一次网络准入故障排查","\u002Fblog\u002F技术栈\u002F国产化终端办公oa网络准入故障排查","blog\u002F1.技术栈\u002F969.国产化终端办公OA网络准入故障排查","lucide:network",{"title":254,"path":255,"stem":256,"icon":257},"准备新的插件","\u002Fblog\u002F技术栈\u002F新的插件","blog\u002F1.技术栈\u002F970.新的插件","simple-icons:debian",{"title":259,"path":260,"stem":261,"icon":257},"防于未然，先固不破 — Debian 12 快速加固实战","\u002Fblog\u002F技术栈\u002F服务器加固实战","blog\u002F1.技术栈\u002F971.服务器加固实战",{"title":263,"path":264,"stem":265,"icon":266},"nmap高级应用技巧-实战","\u002Fblog\u002F技术栈\u002Fnmap高级应用技巧-实战","blog\u002F1.技术栈\u002F972.nmap高级应用技巧-实战","simple-icons:openstreetmap",{"title":268,"path":269,"stem":270,"icon":266},"nmap高级应用技巧-NSE","\u002Fblog\u002F技术栈\u002Fnmap高级应用技巧-nse","blog\u002F1.技术栈\u002F973.nmap高级应用技巧-NSE",{"title":272,"path":273,"stem":274,"icon":275},"部分vue组件语法预览","\u002Fblog\u002F技术栈\u002F部分组件语法展示","blog\u002F1.技术栈\u002F974.部分组件语法展示","simple-icons:vuedotjs",{"title":277,"path":278,"stem":279,"icon":175},"新的文档渲染样式","\u002Fblog\u002F技术栈\u002F新的文档渲染样式","blog\u002F1.技术栈\u002F975.新的文档渲染样式",{"title":281,"path":282,"stem":283,"icon":175},"Nuxt 微信分享接口","\u002Fblog\u002F技术栈\u002Fnuxt-微信分享接口","blog\u002F1.技术栈\u002F976.Nuxt 微信分享接口",{"title":285,"path":286,"stem":287,"icon":288},"AI复合应用 合同审查","\u002Fblog\u002F技术栈\u002Fai复合应用-合同审查","blog\u002F1.技术栈\u002F978.AI复合应用 合同审查","simple-icons:openai",{"title":290,"path":291,"stem":292,"icon":293},"Kali 安装 GVM","\u002Fblog\u002F技术栈\u002Fkali-安装-gvm","blog\u002F1.技术栈\u002F979.Kali 安装 GVM","simple-icons:kalilinux",{"title":295,"path":296,"stem":297,"icon":298},"GPT-5","\u002Fblog\u002F技术栈\u002Fgpt5","blog\u002F1.技术栈\u002F980.GPT5","simple-icons:powershell",{"title":300,"path":301,"stem":302,"icon":288},"使用 AI 守护内网安全","\u002Fblog\u002F技术栈\u002F使用-ai-守护内网安全","blog\u002F1.技术栈\u002F981.使用 AI 守护内网安全",{"title":304,"path":305,"stem":306,"icon":266},"系统安全扫描工具命令集合","\u002Fblog\u002F技术栈\u002F系统安全扫描工具命令集合","blog\u002F1.技术栈\u002F982.系统安全扫描工具命令集合",{"title":308,"path":309,"stem":310},"用 MDC 组织技术文章","\u002Fblog\u002F技术栈\u002Fmdc-article-example","blog\u002F1.技术栈\u002F983.mdc-article-example",{"title":312,"path":313,"stem":314,"icon":293},"系统安全综合评估报告","\u002Fblog\u002F技术栈\u002F系统安全综合评估报告","blog\u002F1.技术栈\u002F983.系统安全综合评估报告",{"title":316,"path":317,"stem":318},"用交互组件写一份技术说明","\u002Fblog\u002F技术栈\u002Fmdc-interactive-example","blog\u002F1.技术栈\u002F984.mdc-interactive-example",{"title":320,"path":321,"stem":322,"icon":323},"树莓派安装 Kali Linux","\u002Fblog\u002F技术栈\u002F树莓派安装-kali-linux","blog\u002F1.技术栈\u002F984.树莓派安装 Kali Linux","simple-icons:raspberrypi",{"title":325,"path":326,"stem":327,"icon":175},"Nuxt UI Pro","\u002Fblog\u002F技术栈\u002Fnuxt-ui-pro","blog\u002F1.技术栈\u002F985.Nuxt UI Pro",{"title":329,"path":330,"stem":331,"icon":332},"Supabase 阿里云短信","\u002Fblog\u002F技术栈\u002Fsupabase-阿里云短信","blog\u002F1.技术栈\u002F986.Supabase 阿里云短信","simple-icons:alibabacloud",{"title":334,"path":335,"stem":336,"icon":337},"Coolify","\u002Fblog\u002F技术栈\u002Fcoolify","blog\u002F1.技术栈\u002F987.Coolify","simple-icons:chai",{"title":339,"path":340,"stem":341,"icon":342},"Python 代码规范","\u002Fblog\u002F技术栈\u002Fpython-代码规范","blog\u002F1.技术栈\u002F988.Python 代码规范","simple-icons:python",{"title":344,"path":345,"stem":346,"icon":175},"Nuxt3 代码规范","\u002Fblog\u002F技术栈\u002Fnuxt3-代码规范","blog\u002F1.技术栈\u002F989.Nuxt3 代码规范",{"title":348,"path":349,"stem":350,"icon":351},"Linux 系统 Swap 分区配置指南","\u002Fblog\u002F技术栈\u002Flinux-系统-swap-分区配置指南","blog\u002F1.技术栈\u002F990.Linux 系统 Swap 分区配置指南","simple-icons:linux",{"title":353,"path":354,"stem":355,"icon":356},"从Supabase迁移到Appwrite","\u002Fblog\u002F技术栈\u002F从supabase迁移到appwrite","blog\u002F1.技术栈\u002F991.从Supabase迁移到Appwrite","simple-icons:supabase",{"title":358,"path":359,"stem":360,"icon":361},"AppWrite 项目资源占用情况","\u002Fblog\u002F技术栈\u002Fappwrite-项目资源占用情况","blog\u002F1.技术栈\u002F992.AppWrite 项目资源占用情况","simple-icons:appwrite",{"title":363,"path":364,"stem":365,"icon":366},"Docker 里配置hosts","\u002Fblog\u002F技术栈\u002Fdocker-里配置hosts","blog\u002F1.技术栈\u002F993.Docker 里配置hosts","simple-icons:docker",{"title":368,"path":369,"stem":370,"icon":371},"MySQL 中如何忽略表名的大小写","\u002Fblog\u002F技术栈\u002Fmysql-中如何忽略表名的大小写","blog\u002F1.技术栈\u002F994.MySQL 中如何忽略表名的大小写","simple-icons:mysql",{"title":373,"path":374,"stem":375,"icon":257},"Debian 12 安装nodejs","\u002Fblog\u002F技术栈\u002Fdebian-12-安装nodejs","blog\u002F1.技术栈\u002F995.Debian 12 安装nodejs",{"title":377,"path":378,"stem":379,"icon":380},"Dify + Supabase：打造带数据库的AI问答机器人","\u002Fblog\u002F技术栈\u002Fdify-supabase：打造带数据库的ai问答机器人","blog\u002F1.技术栈\u002F996.Dify + Supabase：打造带数据库的AI问答机器人","simple-icons:reactbootstrap",{"title":382,"path":383,"stem":384,"icon":385},"安装 VS Code到浏览器 -- Code Server","\u002Fblog\u002F技术栈\u002F安装-vs-code到浏览器-code-server-copy","blog\u002F1.技术栈\u002F996.安装 VS Code到浏览器 -- Code Server copy","simple-icons:visualstudiocode",{"title":387,"path":388,"stem":389,"icon":390},"Debian 12 云服务器初始安全设置与优化指南","\u002Fblog\u002F技术栈\u002Fdebian-12-云服务器初始安全设置与优化指南","blog\u002F1.技术栈\u002F997.Debian 12 云服务器初始安全设置与优化指南","lucide-server",{"title":392,"path":393,"stem":394,"icon":395},"Iperf3 万兆网络打流测试指南","\u002Fblog\u002F技术栈\u002Fiperf3-万兆网络打流测试指南","blog\u002F1.技术栈\u002F998.Iperf3 万兆网络打流测试指南","lucide-network",{"title":397,"path":398,"stem":399,"icon":400},"GROK3 and Deepseek","\u002Fblog\u002F技术栈\u002Fgrok3-and-deepseek","blog\u002F1.技术栈\u002F999.GROK3-and-Deepseek","lucide-brain",{"title":402,"path":403,"stem":404,"children":405,"page":57},"AI","\u002Fblog\u002Fai","blog\u002F2.AI",[406],{"title":407,"path":408,"stem":409,"icon":337},"AI最佳实践","\u002Fblog\u002Fai\u002Fai","blog\u002F2.AI\u002F01.AI",{"title":411,"path":412,"stem":413,"children":414,"page":57},"生活","\u002Fblog\u002F生活","blog\u002F3.生活",[415],{"title":411,"path":416,"stem":417,"icon":337},"\u002Fblog\u002F生活\u002F生活","blog\u002F3.生活\u002F01.生活",{"id":419,"title":53,"badges":420,"body":421,"date":420,"description":1621,"draft":57,"extension":1622,"fullpage":57,"icon":420,"links":420,"meta":1623,"navBadges":420,"navigation":1624,"path":54,"rawbody":1625,"seo":1626,"stem":55,"updated":420,"__hash__":1627},"docs\u002Fdocs\u002F1.简单文档\u002F3.writing\u002F6.mdc-content.md",null,{"type":422,"value":423,"toc":1611},"minimark",[424,428,432,459,474,477,486,503,510,625,653,656,662,669,898,914,918,936,939,1019,1211,1224,1228,1237,1277,1283,1290,1372,1375,1378,1392,1398,1460,1466,1471,1545,1548,1587,1590,1601,1607],[425,426,427],"p",{},"普通段落、列表和短表格仍然直接写 Markdown。需要折叠长说明、查找多行数据，或者把接口参数集中展示时，再加入组件。docs 和 blog 的写法相同，不需要为每篇文章导入 Vue 文件。",[429,430,431],"h2",{"id":431},"先知道名字怎么写",[425,433,434,435,439,440,443,444,439,447,450,451,454,455,458],{},"组件名转换为短横线写法：",[436,437,438],"code",{},"ArticleSummary"," 写成 ",[436,441,442],{},"::article-summary","，",[436,445,446],{},"DataTable",[436,448,449],{},"::data-table","。块组件以 ",[436,452,453],{},"::"," 开始和结束，行内术语使用单个 ",[436,456,457],{},":","。",[425,460,461,462,465,466,468,469,458],{},"字符串属性可以放在花括号里；数组和对象放在组件内部的 YAML 属性区。嵌套组件时，外层使用 ",[436,463,464],{},":::","，内层使用 ",[436,467,453],{},"。详细规则见 ",[470,471,473],"a",{"href":472},"\u002Fdocs\u002F%E7%AE%80%E5%8D%95%E6%96%87%E6%A1%A3\u002Fcomponents\u002Fmdc-guide","MDC 语法与注册",[429,475,476],{"id":476},"给长文章一个入口",[425,478,479,481,482,485],{},[436,480,438],{}," 适合先交代阅读范围，",[436,483,484],{},"ExpandBox"," 用来收起暂时用不到的细节。下面展示实际效果，随后是同一段内容的源码。",[487,488,490],"article-summary",{"title":489},"这份操作说明包含什么",[491,492,493,497,500],"ul",{},[494,495,496],"li",{},"准备运行环境。",[494,498,499],{},"检查设备清单中的地址。",[494,501,502],{},"导出报告后核对失败项。",[504,505,507],"expand-box",{"title":506},"只想先看运行步骤？",[425,508,509],{},"可以先按正文操作，遇到连接失败时再回来看超时、凭据和网络可达性的说明。",[511,512,517],"pre",{"className":513,"code":514,"language":515,"meta":516,"style":516},"language-mdc shiki shiki-themes github-light github-light github-dark vitesse-light vitesse-dark catppuccin-latte catppuccin-mocha one-light one-dark-pro material-theme-lighter material-theme-palenight min-light min-dark","::article-summary{title=\"这份操作说明包含什么\"}\n- 准备运行环境。\n- 检查设备清单中的地址。\n- 导出报告后核对失败项。\n::\n\n::expand-box{title=\"只想先看运行步骤？\"}\n可以先按正文操作，遇到连接失败时再回来看超时、凭据和网络可达性的说明。\n::\n","mdc","",[436,518,519,553,564,572,580,586,593,614,620],{"__ignoreMap":516},[520,521,524,527,530,533,537,541,545,548,550],"span",{"class":522,"line":523},"line",1,[520,525,453],{"class":526},"s4Bi8",[520,528,487],{"class":529},"spV5I",[520,531,532],{"class":526},"{",[520,534,536],{"class":535},"shR_7","title",[520,538,540],{"class":539},"stNAY","=",[520,542,544],{"class":543},"sLXf0","\"",[520,546,489],{"class":547},"sCtJb",[520,549,544],{"class":543},[520,551,552],{"class":526},"}\n",[520,554,556,560],{"class":522,"line":555},2,[520,557,559],{"class":558},"s67oU","-",[520,561,563],{"class":562},"sw9Yk"," 准备运行环境。\n",[520,565,567,569],{"class":522,"line":566},3,[520,568,559],{"class":558},[520,570,571],{"class":562}," 检查设备清单中的地址。\n",[520,573,575,577],{"class":522,"line":574},4,[520,576,559],{"class":558},[520,578,579],{"class":562}," 导出报告后核对失败项。\n",[520,581,583],{"class":522,"line":582},5,[520,584,585],{"class":526},"::\n",[520,587,589],{"class":522,"line":588},6,[520,590,592],{"emptyLinePlaceholder":591},true,"\n",[520,594,596,598,600,602,604,606,608,610,612],{"class":522,"line":595},7,[520,597,453],{"class":526},[520,599,504],{"class":529},[520,601,532],{"class":526},[520,603,536],{"class":535},[520,605,540],{"class":539},[520,607,544],{"class":543},[520,609,506],{"class":547},[520,611,544],{"class":543},[520,613,552],{"class":526},[520,615,617],{"class":522,"line":616},8,[520,618,619],{"class":562},"可以先按正文操作，遇到连接失败时再回来看超时、凭据和网络可达性的说明。\n",[520,621,623],{"class":522,"line":622},9,[520,624,585],{"class":526},[425,626,627,628,631,632,635,636,639,640,643,644,647,648,652],{},"相关阅读使用 ",[436,629,630],{},"LinkCard","，引用并标注来源使用 ",[436,633,634],{},"QuoteBlock","，几个统计数字使用 ",[436,637,638],{},"StatGrid","，按时间记录过程使用 ",[436,641,642],{},"DocTimeline"," 和 ",[436,645,646],{},"TimelineItem","。这些组件的 ",[470,649,651],{"href":650},"\u002Fdocs\u002F%E7%AE%80%E5%8D%95%E6%96%87%E6%A1%A3\u002Fcomponents\u002Fcontent-blocks","属性和示例"," 放在同一页。",[429,654,655],{"id":655},"让较长的清单能查找",[425,657,658,659,661],{},"两三行对照用普通表格就够了。下面的 ",[436,660,446],{}," 演示搜索、列排序和分页：输入“接入”只看接入设备，点击“端口数”可改变排序，清空搜索后可以翻到下一页。",[663,664],"data-table",{":columns":665,":pageSize":666,":rows":667,"title":668},"[{\"key\":\"name\",\"label\":\"设备\"},{\"key\":\"ports\",\"label\":\"端口数\"},{\"key\":\"enabled\",\"label\":\"启用\"}]","2","[{\"name\":\"核心交换机\",\"ports\":48,\"enabled\":true},{\"name\":\"接入交换机 2\",\"ports\":24,\"enabled\":true},{\"name\":\"接入交换机 10\",\"ports\":8,\"enabled\":false}]","设备清单示例",[511,670,672],{"className":513,"code":671,"language":515,"meta":516,"style":516},"::data-table\n---\ntitle: 设备清单示例\npageSize: 2\ncolumns:\n  - key: name\n    label: 设备\n  - key: ports\n    label: 端口数\n  - key: enabled\n    label: 启用\nrows:\n  - name: 核心交换机\n    ports: 48\n    enabled: true\n  - name: 接入交换机 2\n    ports: 24\n    enabled: true\n  - name: 接入交换机 10\n    ports: 8\n    enabled: false\n---\n::\n",[436,673,674,681,686,696,707,715,729,739,750,759,771,781,789,802,813,825,837,847,856,868,878,888,893],{"__ignoreMap":516},[520,675,676,678],{"class":522,"line":523},[520,677,453],{"class":526},[520,679,680],{"class":529},"data-table\n",[520,682,683],{"class":522,"line":555},[520,684,685],{"class":562},"---\n",[520,687,688,691,693],{"class":522,"line":566},[520,689,536],{"class":690},"sBSHF",[520,692,457],{"class":539},[520,694,695],{"class":547}," 设备清单示例\n",[520,697,698,701,703],{"class":522,"line":574},[520,699,700],{"class":690},"pageSize",[520,702,457],{"class":539},[520,704,706],{"class":705},"s_Zq6"," 2\n",[520,708,709,712],{"class":522,"line":582},[520,710,711],{"class":690},"columns",[520,713,714],{"class":539},":\n",[520,716,717,721,724,726],{"class":522,"line":588},[520,718,720],{"class":719},"sIQTy","  -",[520,722,723],{"class":690}," key",[520,725,457],{"class":539},[520,727,728],{"class":547}," name\n",[520,730,731,734,736],{"class":522,"line":595},[520,732,733],{"class":690},"    label",[520,735,457],{"class":539},[520,737,738],{"class":547}," 设备\n",[520,740,741,743,745,747],{"class":522,"line":616},[520,742,720],{"class":719},[520,744,723],{"class":690},[520,746,457],{"class":539},[520,748,749],{"class":547}," ports\n",[520,751,752,754,756],{"class":522,"line":622},[520,753,733],{"class":690},[520,755,457],{"class":539},[520,757,758],{"class":547}," 端口数\n",[520,760,762,764,766,768],{"class":522,"line":761},10,[520,763,720],{"class":719},[520,765,723],{"class":690},[520,767,457],{"class":539},[520,769,770],{"class":547}," enabled\n",[520,772,774,776,778],{"class":522,"line":773},11,[520,775,733],{"class":690},[520,777,457],{"class":539},[520,779,780],{"class":547}," 启用\n",[520,782,784,787],{"class":522,"line":783},12,[520,785,786],{"class":690},"rows",[520,788,714],{"class":539},[520,790,792,794,797,799],{"class":522,"line":791},13,[520,793,720],{"class":719},[520,795,796],{"class":690}," name",[520,798,457],{"class":539},[520,800,801],{"class":547}," 核心交换机\n",[520,803,805,808,810],{"class":522,"line":804},14,[520,806,807],{"class":690},"    ports",[520,809,457],{"class":539},[520,811,812],{"class":705}," 48\n",[520,814,816,819,821],{"class":522,"line":815},15,[520,817,818],{"class":690},"    enabled",[520,820,457],{"class":539},[520,822,824],{"class":823},"sle2E"," true\n",[520,826,828,830,832,834],{"class":522,"line":827},16,[520,829,720],{"class":719},[520,831,796],{"class":690},[520,833,457],{"class":539},[520,835,836],{"class":547}," 接入交换机 2\n",[520,838,840,842,844],{"class":522,"line":839},17,[520,841,807],{"class":690},[520,843,457],{"class":539},[520,845,846],{"class":705}," 24\n",[520,848,850,852,854],{"class":522,"line":849},18,[520,851,818],{"class":690},[520,853,457],{"class":539},[520,855,824],{"class":823},[520,857,859,861,863,865],{"class":522,"line":858},19,[520,860,720],{"class":719},[520,862,796],{"class":690},[520,864,457],{"class":539},[520,866,867],{"class":547}," 接入交换机 10\n",[520,869,871,873,875],{"class":522,"line":870},20,[520,872,807],{"class":690},[520,874,457],{"class":539},[520,876,877],{"class":705}," 8\n",[520,879,881,883,885],{"class":522,"line":880},21,[520,882,818],{"class":690},[520,884,457],{"class":539},[520,886,887],{"class":823}," false\n",[520,889,891],{"class":522,"line":890},22,[520,892,685],{"class":562},[520,894,896],{"class":522,"line":895},23,[520,897,585],{"class":526},[425,899,900,903,904,906,907,643,910,913],{},[436,901,902],{},"columns.key"," 对应 ",[436,905,786],{}," 中的键。端口数写成数值，启用状态写成布尔值；",[436,908,909],{},"0",[436,911,912],{},"false"," 会保留，空值显示为“—”。搜索、排序和分页都在当前页面完成，不连接后端数据源。",[429,915,917],{"id":916},"把接口参数和响应放在一起","把接口、参数和响应放在一起",[425,919,920,923,924,927,928,931,932,935],{},[436,921,922],{},"ApiEndpoint"," 展示方法与路径，",[436,925,926],{},"ParameterTable"," 展示参数。请求和响应分别写进 ",[436,929,930],{},"request","、",[436,933,934],{},"response"," 插槽。",[425,937,938],{},"以下是虚构的报告查询接口，用来说明组件布局；复制这段代码不会创建接口，也不会发送请求。",[940,941,946,950,964],"api-endpoint",{":status":942,"method":943,"path":944,"title":945},"200","GET","\u002Fapi\u002Freports\u002F{id}","报告查询示例",[947,948],"parameter-table",{":parameters":949},"[{\"name\":\"id\",\"type\":\"string\",\"location\":\"path\",\"required\":true,\"description\":\"要查询的报告标识\"}]",[951,952,953],"template",{"v-slot:request":516},[511,954,958],{"className":955,"code":956,"language":957,"meta":516,"style":516},"language-http shiki shiki-themes github-light github-light github-dark vitesse-light vitesse-dark catppuccin-latte catppuccin-mocha one-light one-dark-pro material-theme-lighter material-theme-palenight min-light min-dark","GET \u002Fapi\u002Freports\u002Fdemo HTTP\u002F1.1\n","http",[436,959,960],{"__ignoreMap":516},[520,961,962],{"class":522,"line":523},[520,963,956],{},[951,965,966],{"v-slot:response":516},[511,967,971],{"className":968,"code":969,"language":970,"meta":516,"style":516},"language-json shiki shiki-themes github-light github-light github-dark vitesse-light vitesse-dark catppuccin-latte catppuccin-mocha one-light one-dark-pro material-theme-lighter material-theme-palenight min-light min-dark","{ \"id\": \"demo\", \"status\": \"ready\" }\n","json",[436,972,973],{"__ignoreMap":516},[520,974,975,977,981,985,987,990,992,995,997,1000,1002,1005,1007,1009,1011,1014,1016],{"class":522,"line":523},[520,976,532],{"class":719},[520,978,980],{"class":979},"sOgDI"," \"",[520,982,984],{"class":983},"sSdLo","id",[520,986,544],{"class":979},[520,988,457],{"class":989},"sRS6S",[520,991,980],{"class":543},[520,993,994],{"class":547},"demo",[520,996,544],{"class":543},[520,998,999],{"class":989},",",[520,1001,980],{"class":979},[520,1003,1004],{"class":983},"status",[520,1006,544],{"class":979},[520,1008,457],{"class":989},[520,1010,980],{"class":543},[520,1012,1013],{"class":547},"ready",[520,1015,544],{"class":543},[520,1017,1018],{"class":719}," }\n",[511,1020,1022],{"className":513,"code":1021,"language":515,"meta":516,"style":516},":::api-endpoint{title=\"报告查询示例\" method=\"GET\" path=\"\u002Fapi\u002Freports\u002F{id}\" :status=\"200\"}\n::parameter-table\n---\nparameters:\n  - name: id\n    type: string\n    location: path\n    required: true\n    description: 要查询的报告标识\n---\n::\n\n#request\n```http\nGET \u002Fapi\u002Freports\u002Fdemo HTTP\u002F1.1\n```\n\n#response\n```json\n{ \"id\": \"demo\", \"status\": \"ready\" }\n```\n:::\n",[436,1023,1024,1077,1084,1088,1095,1106,1116,1126,1135,1145,1149,1153,1157,1162,1172,1177,1182,1186,1191,1198,1202,1206],{"__ignoreMap":516},[520,1025,1026,1028,1030,1032,1034,1036,1038,1040,1042,1045,1047,1049,1051,1053,1056,1058,1060,1062,1064,1067,1069,1071,1073,1075],{"class":522,"line":523},[520,1027,464],{"class":526},[520,1029,940],{"class":529},[520,1031,532],{"class":526},[520,1033,536],{"class":535},[520,1035,540],{"class":539},[520,1037,544],{"class":543},[520,1039,945],{"class":547},[520,1041,544],{"class":543},[520,1043,1044],{"class":535}," method",[520,1046,540],{"class":539},[520,1048,544],{"class":543},[520,1050,943],{"class":547},[520,1052,544],{"class":543},[520,1054,1055],{"class":535}," path",[520,1057,540],{"class":539},[520,1059,544],{"class":543},[520,1061,944],{"class":547},[520,1063,544],{"class":543},[520,1065,1066],{"class":535}," :status",[520,1068,540],{"class":539},[520,1070,544],{"class":543},[520,1072,942],{"class":547},[520,1074,544],{"class":543},[520,1076,552],{"class":526},[520,1078,1079,1081],{"class":522,"line":555},[520,1080,453],{"class":526},[520,1082,1083],{"class":529},"parameter-table\n",[520,1085,1086],{"class":522,"line":566},[520,1087,685],{"class":562},[520,1089,1090,1093],{"class":522,"line":574},[520,1091,1092],{"class":690},"parameters",[520,1094,714],{"class":539},[520,1096,1097,1099,1101,1103],{"class":522,"line":582},[520,1098,720],{"class":719},[520,1100,796],{"class":690},[520,1102,457],{"class":539},[520,1104,1105],{"class":547}," id\n",[520,1107,1108,1111,1113],{"class":522,"line":588},[520,1109,1110],{"class":690},"    type",[520,1112,457],{"class":539},[520,1114,1115],{"class":547}," string\n",[520,1117,1118,1121,1123],{"class":522,"line":595},[520,1119,1120],{"class":690},"    location",[520,1122,457],{"class":539},[520,1124,1125],{"class":547}," path\n",[520,1127,1128,1131,1133],{"class":522,"line":616},[520,1129,1130],{"class":690},"    required",[520,1132,457],{"class":539},[520,1134,824],{"class":823},[520,1136,1137,1140,1142],{"class":522,"line":622},[520,1138,1139],{"class":690},"    description",[520,1141,457],{"class":539},[520,1143,1144],{"class":547}," 要查询的报告标识\n",[520,1146,1147],{"class":522,"line":761},[520,1148,685],{"class":562},[520,1150,1151],{"class":522,"line":773},[520,1152,585],{"class":526},[520,1154,1155],{"class":522,"line":783},[520,1156,592],{"emptyLinePlaceholder":591},[520,1158,1159],{"class":522,"line":791},[520,1160,1161],{"class":535},"#request\n",[520,1163,1164,1168],{"class":522,"line":804},[520,1165,1167],{"class":1166},"sO_xl","```",[520,1169,1171],{"class":1170},"ssTbb","http\n",[520,1173,1174],{"class":522,"line":815},[520,1175,956],{"class":1176},"sMLmi",[520,1178,1179],{"class":522,"line":827},[520,1180,1181],{"class":1166},"```\n",[520,1183,1184],{"class":522,"line":839},[520,1185,592],{"emptyLinePlaceholder":591},[520,1187,1188],{"class":522,"line":849},[520,1189,1190],{"class":535},"#response\n",[520,1192,1193,1195],{"class":522,"line":858},[520,1194,1167],{"class":1166},[520,1196,1197],{"class":1170},"json\n",[520,1199,1200],{"class":522,"line":870},[520,1201,969],{"class":1176},[520,1203,1204],{"class":522,"line":880},[520,1205,1181],{"class":1166},[520,1207,1208],{"class":522,"line":890},[520,1209,1210],{"class":526},":::\n",[425,1212,1213,1214,931,1217,643,1220,1223],{},"参数还可以写 ",[436,1215,1216],{},"default",[436,1218,1219],{},"enum",[436,1221,1222],{},"deprecated","。属性由作者填写，组件不会自动从 TypeScript 或 OpenAPI 推导。",[429,1225,1227],{"id":1226},"解释术语留一道自测","解释术语，留一道自测",[425,1229,1230,1231,1236],{},"页面先经过 ",[1232,1233],"glossary-term",{"definition":1234,"term":1235},"服务端渲染：服务器先生成页面的初始 HTML，再交给浏览器。","SSR","，浏览器随后接管交互。点击这句话里的 SSR 就能看解释，不必跳出正文。",[511,1238,1240],{"className":513,"code":1239,"language":515,"meta":516,"style":516},"页面先经过 :glossary-term{term=\"SSR\" definition=\"服务端渲染：服务器先生成页面的初始 HTML，再交给浏览器。\"}，浏览器随后接管交互。\n",[436,1241,1242],{"__ignoreMap":516},[520,1243,1244,1247,1249,1252,1254,1256,1258,1260,1263,1265,1267,1269,1271,1274],{"class":522,"line":523},[520,1245,1246],{"class":562},"页面先经过 :glossary-term",[520,1248,532],{"class":526},[520,1250,1251],{"class":535},"term",[520,1253,540],{"class":539},[520,1255,544],{"class":543},[520,1257,1235],{"class":547},[520,1259,544],{"class":543},[520,1261,1262],{"class":535}," definition",[520,1264,540],{"class":539},[520,1266,544],{"class":543},[520,1268,1234],{"class":547},[520,1270,544],{"class":543},[520,1272,1273],{"class":526},"}",[520,1275,1276],{"class":562},"，浏览器随后接管交互。\n",[425,1278,1279,1282],{},[436,1280,1281],{},"ContentQuiz"," 适合操作指南中的小问题，帮助读者核对是否读懂了参数：",[1284,1285],"content-quiz",{":answer":1286,":choices":1287,"explanation":1288,"question":1289},"1","[\"第一项\",\"第二项\",\"第三项\"]","answer 从 0 开始计数，0 是第一项，1 是第二项。","answer 为 1 时，哪一项是正确选项？",[511,1291,1293],{"className":513,"code":1292,"language":515,"meta":516,"style":516},"::content-quiz\n---\nquestion: answer 为 1 时，哪一项是正确选项？\nchoices:\n  - 第一项\n  - 第二项\n  - 第三项\nanswer: 1\nexplanation: answer 从 0 开始计数，0 是第一项，1 是第二项。\n---\n::\n",[436,1294,1295,1302,1306,1316,1323,1330,1337,1344,1354,1364,1368],{"__ignoreMap":516},[520,1296,1297,1299],{"class":522,"line":523},[520,1298,453],{"class":526},[520,1300,1301],{"class":529},"content-quiz\n",[520,1303,1304],{"class":522,"line":555},[520,1305,685],{"class":562},[520,1307,1308,1311,1313],{"class":522,"line":566},[520,1309,1310],{"class":690},"question",[520,1312,457],{"class":539},[520,1314,1315],{"class":547}," answer 为 1 时，哪一项是正确选项？\n",[520,1317,1318,1321],{"class":522,"line":574},[520,1319,1320],{"class":690},"choices",[520,1322,714],{"class":539},[520,1324,1325,1327],{"class":522,"line":582},[520,1326,720],{"class":719},[520,1328,1329],{"class":547}," 第一项\n",[520,1331,1332,1334],{"class":522,"line":588},[520,1333,720],{"class":719},[520,1335,1336],{"class":547}," 第二项\n",[520,1338,1339,1341],{"class":522,"line":595},[520,1340,720],{"class":719},[520,1342,1343],{"class":547}," 第三项\n",[520,1345,1346,1349,1351],{"class":522,"line":616},[520,1347,1348],{"class":690},"answer",[520,1350,457],{"class":539},[520,1352,1353],{"class":705}," 1\n",[520,1355,1356,1359,1361],{"class":522,"line":622},[520,1357,1358],{"class":690},"explanation",[520,1360,457],{"class":539},[520,1362,1363],{"class":547}," answer 从 0 开始计数，0 是第一项，1 是第二项。\n",[520,1365,1366],{"class":522,"line":761},[520,1367,685],{"class":562},[520,1369,1370],{"class":522,"line":773},[520,1371,585],{"class":526},[425,1373,1374],{},"自测只在当前页面显示反馈，不上传成绩；答案也在公开内容里，不能用于保密考试。",[429,1376,1377],{"id":1377},"附上文件和核对清单",[425,1379,1380,1383,1384,1387,1388,1391],{},[436,1381,1382],{},"DownloadCard"," 使用已存在的文件地址，不生成文件。站内文件可以放在 ",[436,1385,1386],{},"public\u002F"," 中，例如 ",[436,1389,1390],{},"public\u002Fexamples\u002Fdevices.example.json"," 对应下面的下载地址。",[1393,1394],"download-card",{"description":1395,"filename":1396,"href":1397,"title":668},"用于演示下载，字段需按实际工具格式调整。","devices.example.json","\u002Fexamples\u002Fdevices.example.json",[511,1399,1401],{"className":513,"code":1400,"language":515,"meta":516,"style":516},"::download-card{title=\"设备清单示例\" href=\"\u002Fexamples\u002Fdevices.example.json\" filename=\"devices.example.json\" description=\"用于演示下载，字段需按实际工具格式调整。\"}\n::\n",[436,1402,1403,1456],{"__ignoreMap":516},[520,1404,1405,1407,1409,1411,1413,1415,1417,1419,1421,1424,1426,1428,1430,1432,1435,1437,1439,1441,1443,1446,1448,1450,1452,1454],{"class":522,"line":523},[520,1406,453],{"class":526},[520,1408,1393],{"class":529},[520,1410,532],{"class":526},[520,1412,536],{"class":535},[520,1414,540],{"class":539},[520,1416,544],{"class":543},[520,1418,668],{"class":547},[520,1420,544],{"class":543},[520,1422,1423],{"class":535}," href",[520,1425,540],{"class":539},[520,1427,544],{"class":543},[520,1429,1397],{"class":547},[520,1431,544],{"class":543},[520,1433,1434],{"class":535}," filename",[520,1436,540],{"class":539},[520,1438,544],{"class":543},[520,1440,1396],{"class":547},[520,1442,544],{"class":543},[520,1444,1445],{"class":535}," description",[520,1447,540],{"class":539},[520,1449,544],{"class":543},[520,1451,1395],{"class":547},[520,1453,544],{"class":543},[520,1455,552],{"class":526},[520,1457,1458],{"class":522,"line":555},[520,1459,585],{"class":526},[425,1461,1462,1465],{},[436,1463,1464],{},"TaskChecklist"," 可以给操作说明收尾。读者可以勾选，但刷新页面会恢复作者设置的初始状态。",[1467,1468],"task-checklist",{":items":1469,"title":1470},"[{\"label\":\"示例地址和数据可以公开\"},{\"label\":\"下载文件存在，链接能打开\"},{\"label\":\"组件在手机上也能操作\"}]","发布前核对",[511,1472,1474],{"className":513,"code":1473,"language":515,"meta":516,"style":516},"::task-checklist\n---\ntitle: 发布前核对\nitems:\n  - label: 示例地址和数据可以公开\n  - label: 下载文件存在，链接能打开\n  - label: 组件在手机上也能操作\n---\n::\n",[436,1475,1476,1483,1487,1496,1503,1515,1526,1537,1541],{"__ignoreMap":516},[520,1477,1478,1480],{"class":522,"line":523},[520,1479,453],{"class":526},[520,1481,1482],{"class":529},"task-checklist\n",[520,1484,1485],{"class":522,"line":555},[520,1486,685],{"class":562},[520,1488,1489,1491,1493],{"class":522,"line":566},[520,1490,536],{"class":690},[520,1492,457],{"class":539},[520,1494,1495],{"class":547}," 发布前核对\n",[520,1497,1498,1501],{"class":522,"line":574},[520,1499,1500],{"class":690},"items",[520,1502,714],{"class":539},[520,1504,1505,1507,1510,1512],{"class":522,"line":582},[520,1506,720],{"class":719},[520,1508,1509],{"class":690}," label",[520,1511,457],{"class":539},[520,1513,1514],{"class":547}," 示例地址和数据可以公开\n",[520,1516,1517,1519,1521,1523],{"class":522,"line":588},[520,1518,720],{"class":719},[520,1520,1509],{"class":690},[520,1522,457],{"class":539},[520,1524,1525],{"class":547}," 下载文件存在，链接能打开\n",[520,1527,1528,1530,1532,1534],{"class":522,"line":595},[520,1529,720],{"class":719},[520,1531,1509],{"class":690},[520,1533,457],{"class":539},[520,1535,1536],{"class":547}," 组件在手机上也能操作\n",[520,1538,1539],{"class":522,"line":616},[520,1540,685],{"class":562},[520,1542,1543],{"class":522,"line":622},[520,1544,585],{"class":526},[429,1546,1547],{"id":1547},"图片和其他组件去哪里找",[491,1549,1550,1561,1572,1578],{},[494,1551,1552,1553,1556,1557,458],{},"多张截图用 ",[436,1554,1555],{},"ImageGallery","：支持点击放大、左右键切换和 Esc 关闭，见 ",[470,1558,1560],{"href":1559},"\u002Fdocs\u002F%E7%AE%80%E5%8D%95%E6%96%87%E6%A1%A3\u002Fcomponents\u002Fmdc-showcase","图库示例",[494,1562,1563,1564,1567,1568,458],{},"同一对象修改前后的图片用 ",[436,1565,1566],{},"ImageCompare","：两张图尽量保持相同尺寸和构图，见 ",[470,1569,1571],{"href":1570},"\u002Fdocs\u002F%E7%AE%80%E5%8D%95%E6%96%87%E6%A1%A3\u002Fcomponents\u002Finteractive-showcase","图片对比演示",[494,1573,1574,1575,458],{},"老文章中的卡片、标签页、文件树和代码树可以继续使用。27 个公共组件的清单见 ",[470,1576,69],{"href":1577},"\u002Fdocs\u002F%E7%AE%80%E5%8D%95%E6%96%87%E6%A1%A3\u002Fcomponents\u002Fapi",[494,1579,1580,1581,643,1584,458],{},"完整参数见 ",[470,1582,1583],{"href":650},"文章内容组件",[470,1585,127],{"href":1586},"\u002Fdocs\u002F%E7%AE%80%E5%8D%95%E6%96%87%E6%A1%A3\u002Fcomponents\u002Finteractive-blocks",[429,1588,1589],{"id":1589},"保存后检查",[425,1591,1592,1593,1596,1597,1600],{},"先运行 ",[436,1594,1595],{},"pnpm content:check","，检查站内链接、图片和已覆盖的组件属性，再运行 ",[436,1598,1599],{},"pnpm build"," 并打开页面确认效果。检查通过后仍要手动试一次交互，尤其是嵌套组件、命名插槽和下载文件。",[425,1602,1603,1604,458],{},"写作实例见 ",[470,1605,244],{"href":1606},"\u002Fblog\u002F%E6%8A%80%E6%9C%AF%E6%A0%88\u002Festel-docs-recent-updates",[1608,1609,1610],"style",{},"html pre.shiki code .s4Bi8, html code.shiki .s4Bi8{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8;--shiki-code-theme-vitesse-light:#999999;--shiki-code-theme-vitesse-dark:#666666;--shiki-code-theme-catppuccin-light:#179299;--shiki-code-theme-catppuccin-dark:#94E2D5;--shiki-code-theme-one-light:#383A42;--shiki-code-theme-one-dark:#ABB2BF;--shiki-code-theme-material-light:#39ADB5;--shiki-code-theme-material-dark:#89DDFF;--shiki-code-theme-min-light:#24292EFF;--shiki-code-theme-min-dark:#B392F0}html pre.shiki code .spV5I, html code.shiki .spV5I{--shiki-light:#22863A;--shiki-default:#22863A;--shiki-dark:#85E89D;--shiki-code-theme-vitesse-light:#1E754F;--shiki-code-theme-vitesse-dark:#4D9375;--shiki-code-theme-catppuccin-light:#1E66F5;--shiki-code-theme-catppuccin-dark:#89B4FA;--shiki-code-theme-one-light:#E45649;--shiki-code-theme-one-dark:#E06C75;--shiki-code-theme-material-light:#E53935;--shiki-code-theme-material-dark:#F07178;--shiki-code-theme-min-light:#22863A;--shiki-code-theme-min-dark:#FFAB70}html pre.shiki code .shR_7, html code.shiki .shR_7{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#B392F0;--shiki-code-theme-vitesse-light:#B07D48;--shiki-code-theme-vitesse-dark:#BD976A;--shiki-code-theme-catppuccin-light:#DF8E1D;--shiki-code-theme-catppuccin-dark:#F9E2AF;--shiki-code-theme-one-light:#986801;--shiki-code-theme-one-dark:#D19A66;--shiki-code-theme-material-light:#9C3EDA;--shiki-code-theme-material-dark:#C792EA;--shiki-code-theme-min-light:#6F42C1;--shiki-code-theme-min-dark:#B392F0}html pre.shiki code .stNAY, html code.shiki .stNAY{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8;--shiki-code-theme-vitesse-light:#999999;--shiki-code-theme-vitesse-dark:#666666;--shiki-code-theme-catppuccin-light:#179299;--shiki-code-theme-catppuccin-dark:#94E2D5;--shiki-code-theme-one-light:#383A42;--shiki-code-theme-one-dark:#ABB2BF;--shiki-code-theme-material-light:#39ADB5;--shiki-code-theme-material-dark:#89DDFF;--shiki-code-theme-min-light:#D32F2F;--shiki-code-theme-min-dark:#F97583}html pre.shiki code .sLXf0, html code.shiki .sLXf0{--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#9ECBFF;--shiki-code-theme-vitesse-light:#B5695977;--shiki-code-theme-vitesse-dark:#C98A7D77;--shiki-code-theme-catppuccin-light:#40A02B;--shiki-code-theme-catppuccin-dark:#A6E3A1;--shiki-code-theme-one-light:#50A14F;--shiki-code-theme-one-dark:#98C379;--shiki-code-theme-material-light:#39ADB5;--shiki-code-theme-material-dark:#89DDFF;--shiki-code-theme-min-light:#22863A;--shiki-code-theme-min-dark:#FFAB70}html pre.shiki code .sCtJb, html code.shiki .sCtJb{--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#9ECBFF;--shiki-code-theme-vitesse-light:#B56959;--shiki-code-theme-vitesse-dark:#C98A7D;--shiki-code-theme-catppuccin-light:#40A02B;--shiki-code-theme-catppuccin-dark:#A6E3A1;--shiki-code-theme-one-light:#50A14F;--shiki-code-theme-one-dark:#98C379;--shiki-code-theme-material-light:#91B859;--shiki-code-theme-material-dark:#C3E88D;--shiki-code-theme-min-light:#22863A;--shiki-code-theme-min-dark:#FFAB70}html pre.shiki code .s67oU, html code.shiki .s67oU{--shiki-light:#E36209;--shiki-default:#E36209;--shiki-dark:#FFAB70;--shiki-code-theme-vitesse-light:#A65E2B;--shiki-code-theme-vitesse-dark:#D4976C;--shiki-code-theme-catppuccin-light:#179299;--shiki-code-theme-catppuccin-dark:#94E2D5;--shiki-code-theme-one-light:#383A42;--shiki-code-theme-one-dark:#E5C07B;--shiki-code-theme-material-light:#39ADB5;--shiki-code-theme-material-dark:#89DDFF;--shiki-code-theme-min-light:#24292EFF;--shiki-code-theme-min-dark:#B392F0}html pre.shiki code .sw9Yk, html code.shiki .sw9Yk{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8;--shiki-code-theme-vitesse-light:#393A34;--shiki-code-theme-vitesse-dark:#DBD7CAEE;--shiki-code-theme-catppuccin-light:#4C4F69;--shiki-code-theme-catppuccin-dark:#CDD6F4;--shiki-code-theme-one-light:#383A42;--shiki-code-theme-one-dark:#ABB2BF;--shiki-code-theme-material-light:#90A4AE;--shiki-code-theme-material-dark:#BABED8;--shiki-code-theme-min-light:#24292EFF;--shiki-code-theme-min-dark:#B392F0}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 .code-theme-vitesse-light .shiki span {color: var(--shiki-code-theme-vitesse-light);background: var(--shiki-code-theme-vitesse-light-bg);font-style: var(--shiki-code-theme-vitesse-light-font-style);font-weight: var(--shiki-code-theme-vitesse-light-font-weight);text-decoration: var(--shiki-code-theme-vitesse-light-text-decoration);}html.code-theme-vitesse-light .shiki span {color: var(--shiki-code-theme-vitesse-light);background: var(--shiki-code-theme-vitesse-light-bg);font-style: var(--shiki-code-theme-vitesse-light-font-style);font-weight: var(--shiki-code-theme-vitesse-light-font-weight);text-decoration: var(--shiki-code-theme-vitesse-light-text-decoration);}html .code-theme-vitesse-dark .shiki span {color: var(--shiki-code-theme-vitesse-dark);background: var(--shiki-code-theme-vitesse-dark-bg);font-style: var(--shiki-code-theme-vitesse-dark-font-style);font-weight: var(--shiki-code-theme-vitesse-dark-font-weight);text-decoration: var(--shiki-code-theme-vitesse-dark-text-decoration);}html.code-theme-vitesse-dark .shiki span {color: var(--shiki-code-theme-vitesse-dark);background: var(--shiki-code-theme-vitesse-dark-bg);font-style: var(--shiki-code-theme-vitesse-dark-font-style);font-weight: var(--shiki-code-theme-vitesse-dark-font-weight);text-decoration: var(--shiki-code-theme-vitesse-dark-text-decoration);}html .code-theme-catppuccin-light .shiki span {color: var(--shiki-code-theme-catppuccin-light);background: var(--shiki-code-theme-catppuccin-light-bg);font-style: var(--shiki-code-theme-catppuccin-light-font-style);font-weight: var(--shiki-code-theme-catppuccin-light-font-weight);text-decoration: var(--shiki-code-theme-catppuccin-light-text-decoration);}html.code-theme-catppuccin-light .shiki span {color: var(--shiki-code-theme-catppuccin-light);background: var(--shiki-code-theme-catppuccin-light-bg);font-style: var(--shiki-code-theme-catppuccin-light-font-style);font-weight: var(--shiki-code-theme-catppuccin-light-font-weight);text-decoration: var(--shiki-code-theme-catppuccin-light-text-decoration);}html .code-theme-catppuccin-dark .shiki span {color: var(--shiki-code-theme-catppuccin-dark);background: var(--shiki-code-theme-catppuccin-dark-bg);font-style: var(--shiki-code-theme-catppuccin-dark-font-style);font-weight: var(--shiki-code-theme-catppuccin-dark-font-weight);text-decoration: var(--shiki-code-theme-catppuccin-dark-text-decoration);}html.code-theme-catppuccin-dark .shiki span {color: var(--shiki-code-theme-catppuccin-dark);background: var(--shiki-code-theme-catppuccin-dark-bg);font-style: var(--shiki-code-theme-catppuccin-dark-font-style);font-weight: var(--shiki-code-theme-catppuccin-dark-font-weight);text-decoration: var(--shiki-code-theme-catppuccin-dark-text-decoration);}html .code-theme-one-light .shiki span {color: var(--shiki-code-theme-one-light);background: var(--shiki-code-theme-one-light-bg);font-style: var(--shiki-code-theme-one-light-font-style);font-weight: var(--shiki-code-theme-one-light-font-weight);text-decoration: var(--shiki-code-theme-one-light-text-decoration);}html.code-theme-one-light .shiki span {color: var(--shiki-code-theme-one-light);background: var(--shiki-code-theme-one-light-bg);font-style: var(--shiki-code-theme-one-light-font-style);font-weight: var(--shiki-code-theme-one-light-font-weight);text-decoration: var(--shiki-code-theme-one-light-text-decoration);}html .code-theme-one-dark .shiki span {color: var(--shiki-code-theme-one-dark);background: var(--shiki-code-theme-one-dark-bg);font-style: var(--shiki-code-theme-one-dark-font-style);font-weight: var(--shiki-code-theme-one-dark-font-weight);text-decoration: var(--shiki-code-theme-one-dark-text-decoration);}html.code-theme-one-dark .shiki span {color: var(--shiki-code-theme-one-dark);background: var(--shiki-code-theme-one-dark-bg);font-style: var(--shiki-code-theme-one-dark-font-style);font-weight: var(--shiki-code-theme-one-dark-font-weight);text-decoration: var(--shiki-code-theme-one-dark-text-decoration);}html .code-theme-material-light .shiki span {color: var(--shiki-code-theme-material-light);background: var(--shiki-code-theme-material-light-bg);font-style: var(--shiki-code-theme-material-light-font-style);font-weight: var(--shiki-code-theme-material-light-font-weight);text-decoration: var(--shiki-code-theme-material-light-text-decoration);}html.code-theme-material-light .shiki span {color: var(--shiki-code-theme-material-light);background: var(--shiki-code-theme-material-light-bg);font-style: var(--shiki-code-theme-material-light-font-style);font-weight: var(--shiki-code-theme-material-light-font-weight);text-decoration: var(--shiki-code-theme-material-light-text-decoration);}html .code-theme-material-dark .shiki span {color: var(--shiki-code-theme-material-dark);background: var(--shiki-code-theme-material-dark-bg);font-style: var(--shiki-code-theme-material-dark-font-style);font-weight: var(--shiki-code-theme-material-dark-font-weight);text-decoration: var(--shiki-code-theme-material-dark-text-decoration);}html.code-theme-material-dark .shiki span {color: var(--shiki-code-theme-material-dark);background: var(--shiki-code-theme-material-dark-bg);font-style: var(--shiki-code-theme-material-dark-font-style);font-weight: var(--shiki-code-theme-material-dark-font-weight);text-decoration: var(--shiki-code-theme-material-dark-text-decoration);}html .code-theme-min-light .shiki span {color: var(--shiki-code-theme-min-light);background: var(--shiki-code-theme-min-light-bg);font-style: var(--shiki-code-theme-min-light-font-style);font-weight: var(--shiki-code-theme-min-light-font-weight);text-decoration: var(--shiki-code-theme-min-light-text-decoration);}html.code-theme-min-light .shiki span {color: var(--shiki-code-theme-min-light);background: var(--shiki-code-theme-min-light-bg);font-style: var(--shiki-code-theme-min-light-font-style);font-weight: var(--shiki-code-theme-min-light-font-weight);text-decoration: var(--shiki-code-theme-min-light-text-decoration);}html .code-theme-min-dark .shiki span {color: var(--shiki-code-theme-min-dark);background: var(--shiki-code-theme-min-dark-bg);font-style: var(--shiki-code-theme-min-dark-font-style);font-weight: var(--shiki-code-theme-min-dark-font-weight);text-decoration: var(--shiki-code-theme-min-dark-text-decoration);}html.code-theme-min-dark .shiki span {color: var(--shiki-code-theme-min-dark);background: var(--shiki-code-theme-min-dark-bg);font-style: var(--shiki-code-theme-min-dark-font-style);font-weight: var(--shiki-code-theme-min-dark-font-weight);text-decoration: var(--shiki-code-theme-min-dark-text-decoration);}html pre.shiki code .sBSHF, html code.shiki .sBSHF{--shiki-light:#22863A;--shiki-default:#22863A;--shiki-dark:#85E89D;--shiki-code-theme-vitesse-light:#998418;--shiki-code-theme-vitesse-dark:#B8A965;--shiki-code-theme-catppuccin-light:#1E66F5;--shiki-code-theme-catppuccin-dark:#89B4FA;--shiki-code-theme-one-light:#E45649;--shiki-code-theme-one-dark:#E06C75;--shiki-code-theme-material-light:#E53935;--shiki-code-theme-material-dark:#F07178;--shiki-code-theme-min-light:#D32F2F;--shiki-code-theme-min-dark:#F8F8F8}html pre.shiki code .s_Zq6, html code.shiki .s_Zq6{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#79B8FF;--shiki-code-theme-vitesse-light:#2F798A;--shiki-code-theme-vitesse-dark:#4C9A91;--shiki-code-theme-catppuccin-light:#FE640B;--shiki-code-theme-catppuccin-dark:#FAB387;--shiki-code-theme-one-light:#986801;--shiki-code-theme-one-dark:#D19A66;--shiki-code-theme-material-light:#F76D47;--shiki-code-theme-material-dark:#F78C6C;--shiki-code-theme-min-light:#1976D2;--shiki-code-theme-min-dark:#F8F8F8}html pre.shiki code .sIQTy, html code.shiki .sIQTy{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8;--shiki-code-theme-vitesse-light:#999999;--shiki-code-theme-vitesse-dark:#666666;--shiki-code-theme-catppuccin-light:#7C7F93;--shiki-code-theme-catppuccin-dark:#9399B2;--shiki-code-theme-one-light:#383A42;--shiki-code-theme-one-dark:#ABB2BF;--shiki-code-theme-material-light:#39ADB5;--shiki-code-theme-material-dark:#89DDFF;--shiki-code-theme-min-light:#24292EFF;--shiki-code-theme-min-dark:#B392F0}html pre.shiki code .sle2E, html code.shiki .sle2E{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#79B8FF;--shiki-code-theme-vitesse-light:#1E754F;--shiki-code-theme-vitesse-dark:#4D9375;--shiki-code-theme-catppuccin-light:#FE640B;--shiki-code-theme-catppuccin-dark:#FAB387;--shiki-code-theme-one-light:#986801;--shiki-code-theme-one-dark:#D19A66;--shiki-code-theme-material-light:#FF5370;--shiki-code-theme-material-dark:#FF9CAC;--shiki-code-theme-min-light:#1976D2;--shiki-code-theme-min-dark:#79B8FF}html pre.shiki code .sO_xl, html code.shiki .sO_xl{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8;--shiki-code-theme-vitesse-light:#999999;--shiki-code-theme-vitesse-dark:#666666;--shiki-code-theme-catppuccin-light:#7C7F93;--shiki-code-theme-catppuccin-dark:#9399B2;--shiki-code-theme-one-light:#383A42;--shiki-code-theme-one-dark:#ABB2BF;--shiki-code-theme-material-light:#91B859;--shiki-code-theme-material-dark:#C3E88D;--shiki-code-theme-min-light:#2B5581;--shiki-code-theme-min-dark:#9DB1C5}html pre.shiki code .ssTbb, html code.shiki .ssTbb{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8;--shiki-code-theme-vitesse-light:#393A34;--shiki-code-theme-vitesse-dark:#DBD7CAEE;--shiki-code-theme-catppuccin-light:#04A5E5;--shiki-code-theme-catppuccin-dark:#89DCEB;--shiki-code-theme-one-light:#383A42;--shiki-code-theme-one-dark:#ABB2BF;--shiki-code-theme-material-light:#90A4AE90;--shiki-code-theme-material-dark:#BABED890;--shiki-code-theme-min-light:#2B5581;--shiki-code-theme-min-dark:#9DB1C5}html pre.shiki code .sMLmi, html code.shiki .sMLmi{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8;--shiki-code-theme-vitesse-light:#393A34;--shiki-code-theme-vitesse-dark:#DBD7CAEE;--shiki-code-theme-catppuccin-light:#4C4F69;--shiki-code-theme-catppuccin-dark:#CDD6F4;--shiki-code-theme-one-light:#383A42;--shiki-code-theme-one-dark:#ABB2BF;--shiki-code-theme-material-light:#90A4AE90;--shiki-code-theme-material-dark:#BABED890;--shiki-code-theme-min-light:#2B5581;--shiki-code-theme-min-dark:#9DB1C5}html pre.shiki code .sOgDI, html code.shiki .sOgDI{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#79B8FF;--shiki-code-theme-vitesse-light:#99841877;--shiki-code-theme-vitesse-dark:#B8A96577;--shiki-code-theme-catppuccin-light:#7C7F93;--shiki-code-theme-catppuccin-dark:#9399B2;--shiki-code-theme-one-light:#E45649;--shiki-code-theme-one-dark:#E06C75;--shiki-code-theme-material-light:#39ADB5;--shiki-code-theme-material-dark:#89DDFF;--shiki-code-theme-min-light:#D32F2F;--shiki-code-theme-min-dark:#F8F8F8}html pre.shiki code .sSdLo, html code.shiki .sSdLo{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#79B8FF;--shiki-code-theme-vitesse-light:#998418;--shiki-code-theme-vitesse-dark:#B8A965;--shiki-code-theme-catppuccin-light:#1E66F5;--shiki-code-theme-catppuccin-dark:#89B4FA;--shiki-code-theme-one-light:#E45649;--shiki-code-theme-one-dark:#E06C75;--shiki-code-theme-material-light:#9C3EDA;--shiki-code-theme-material-dark:#C792EA;--shiki-code-theme-min-light:#D32F2F;--shiki-code-theme-min-dark:#F8F8F8}html pre.shiki code .sRS6S, html code.shiki .sRS6S{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8;--shiki-code-theme-vitesse-light:#999999;--shiki-code-theme-vitesse-dark:#666666;--shiki-code-theme-catppuccin-light:#7C7F93;--shiki-code-theme-catppuccin-dark:#9399B2;--shiki-code-theme-one-light:#383A42;--shiki-code-theme-one-dark:#ABB2BF;--shiki-code-theme-material-light:#39ADB5;--shiki-code-theme-material-dark:#89DDFF;--shiki-code-theme-min-light:#212121;--shiki-code-theme-min-dark:#BBBBBB}",{"title":516,"searchDepth":555,"depth":555,"links":1612},[1613,1614,1615,1616,1617,1618,1619,1620],{"id":431,"depth":555,"text":431},{"id":476,"depth":555,"text":476},{"id":655,"depth":555,"text":655},{"id":916,"depth":555,"text":917},{"id":1226,"depth":555,"text":1227},{"id":1377,"depth":555,"text":1377},{"id":1547,"depth":555,"text":1547},{"id":1589,"depth":555,"text":1589},"从一份操作说明出发，选择内容组件，复制 MDC 写法，并核对交互状态和示例数据的边界。","md",{},{"icon":56},"---\ntitle: 在文章中使用组件\ndescription: 从一份操作说明出发，选择内容组件，复制 MDC 写法，并核对交互状态和示例数据的边界。\nnavigation:\n  icon: lucide-blocks\n---\n\n普通段落、列表和短表格仍然直接写 Markdown。需要折叠长说明、查找多行数据，或者把接口参数集中展示时，再加入组件。docs 和 blog 的写法相同，不需要为每篇文章导入 Vue 文件。\n\n## 先知道名字怎么写\n\n组件名转换为短横线写法：`ArticleSummary` 写成 `::article-summary`，`DataTable` 写成 `::data-table`。块组件以 `::` 开始和结束，行内术语使用单个 `:`。\n\n字符串属性可以放在花括号里；数组和对象放在组件内部的 YAML 属性区。嵌套组件时，外层使用 `:::`，内层使用 `::`。详细规则见 [MDC 语法与注册](\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fmdc-guide)。\n\n## 给长文章一个入口\n\n`ArticleSummary` 适合先交代阅读范围，`ExpandBox` 用来收起暂时用不到的细节。下面展示实际效果，随后是同一段内容的源码。\n\n::article-summary{title=\"这份操作说明包含什么\"}\n- 准备运行环境。\n- 检查设备清单中的地址。\n- 导出报告后核对失败项。\n::\n\n::expand-box{title=\"只想先看运行步骤？\"}\n可以先按正文操作，遇到连接失败时再回来看超时、凭据和网络可达性的说明。\n::\n\n```mdc\n::article-summary{title=\"这份操作说明包含什么\"}\n- 准备运行环境。\n- 检查设备清单中的地址。\n- 导出报告后核对失败项。\n::\n\n::expand-box{title=\"只想先看运行步骤？\"}\n可以先按正文操作，遇到连接失败时再回来看超时、凭据和网络可达性的说明。\n::\n```\n\n相关阅读使用 `LinkCard`，引用并标注来源使用 `QuoteBlock`，几个统计数字使用 `StatGrid`，按时间记录过程使用 `DocTimeline` 和 `TimelineItem`。这些组件的 [属性和示例](\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fcontent-blocks) 放在同一页。\n\n## 让较长的清单能查找\n\n两三行对照用普通表格就够了。下面的 `DataTable` 演示搜索、列排序和分页：输入“接入”只看接入设备，点击“端口数”可改变排序，清空搜索后可以翻到下一页。\n\n::data-table\n---\ntitle: 设备清单示例\npageSize: 2\ncolumns:\n  - key: name\n    label: 设备\n  - key: ports\n    label: 端口数\n  - key: enabled\n    label: 启用\nrows:\n  - name: 核心交换机\n    ports: 48\n    enabled: true\n  - name: 接入交换机 2\n    ports: 24\n    enabled: true\n  - name: 接入交换机 10\n    ports: 8\n    enabled: false\n---\n::\n\n```mdc\n::data-table\n---\ntitle: 设备清单示例\npageSize: 2\ncolumns:\n  - key: name\n    label: 设备\n  - key: ports\n    label: 端口数\n  - key: enabled\n    label: 启用\nrows:\n  - name: 核心交换机\n    ports: 48\n    enabled: true\n  - name: 接入交换机 2\n    ports: 24\n    enabled: true\n  - name: 接入交换机 10\n    ports: 8\n    enabled: false\n---\n::\n```\n\n`columns.key` 对应 `rows` 中的键。端口数写成数值，启用状态写成布尔值；`0` 和 `false` 会保留，空值显示为“—”。搜索、排序和分页都在当前页面完成，不连接后端数据源。\n\n## 把接口、参数和响应放在一起\n\n`ApiEndpoint` 展示方法与路径，`ParameterTable` 展示参数。请求和响应分别写进 `request`、`response` 插槽。\n\n以下是虚构的报告查询接口，用来说明组件布局；复制这段代码不会创建接口，也不会发送请求。\n\n:::api-endpoint{title=\"报告查询示例\" method=\"GET\" path=\"\u002Fapi\u002Freports\u002F{id}\" :status=\"200\"}\n::parameter-table\n---\nparameters:\n  - name: id\n    type: string\n    location: path\n    required: true\n    description: 要查询的报告标识\n---\n::\n\n#request\n```http\nGET \u002Fapi\u002Freports\u002Fdemo HTTP\u002F1.1\n```\n\n#response\n```json\n{ \"id\": \"demo\", \"status\": \"ready\" }\n```\n:::\n\n````mdc\n:::api-endpoint{title=\"报告查询示例\" method=\"GET\" path=\"\u002Fapi\u002Freports\u002F{id}\" :status=\"200\"}\n::parameter-table\n---\nparameters:\n  - name: id\n    type: string\n    location: path\n    required: true\n    description: 要查询的报告标识\n---\n::\n\n#request\n```http\nGET \u002Fapi\u002Freports\u002Fdemo HTTP\u002F1.1\n```\n\n#response\n```json\n{ \"id\": \"demo\", \"status\": \"ready\" }\n```\n:::\n````\n\n参数还可以写 `default`、`enum` 和 `deprecated`。属性由作者填写，组件不会自动从 TypeScript 或 OpenAPI 推导。\n\n## 解释术语，留一道自测\n\n页面先经过 :glossary-term{term=\"SSR\" definition=\"服务端渲染：服务器先生成页面的初始 HTML，再交给浏览器。\"}，浏览器随后接管交互。点击这句话里的 SSR 就能看解释，不必跳出正文。\n\n```mdc\n页面先经过 :glossary-term{term=\"SSR\" definition=\"服务端渲染：服务器先生成页面的初始 HTML，再交给浏览器。\"}，浏览器随后接管交互。\n```\n\n`ContentQuiz` 适合操作指南中的小问题，帮助读者核对是否读懂了参数：\n\n::content-quiz\n---\nquestion: answer 为 1 时，哪一项是正确选项？\nchoices:\n  - 第一项\n  - 第二项\n  - 第三项\nanswer: 1\nexplanation: answer 从 0 开始计数，0 是第一项，1 是第二项。\n---\n::\n\n```mdc\n::content-quiz\n---\nquestion: answer 为 1 时，哪一项是正确选项？\nchoices:\n  - 第一项\n  - 第二项\n  - 第三项\nanswer: 1\nexplanation: answer 从 0 开始计数，0 是第一项，1 是第二项。\n---\n::\n```\n\n自测只在当前页面显示反馈，不上传成绩；答案也在公开内容里，不能用于保密考试。\n\n## 附上文件和核对清单\n\n`DownloadCard` 使用已存在的文件地址，不生成文件。站内文件可以放在 `public\u002F` 中，例如 `public\u002Fexamples\u002Fdevices.example.json` 对应下面的下载地址。\n\n::download-card{title=\"设备清单示例\" href=\"\u002Fexamples\u002Fdevices.example.json\" filename=\"devices.example.json\" description=\"用于演示下载，字段需按实际工具格式调整。\"}\n::\n\n```mdc\n::download-card{title=\"设备清单示例\" href=\"\u002Fexamples\u002Fdevices.example.json\" filename=\"devices.example.json\" description=\"用于演示下载，字段需按实际工具格式调整。\"}\n::\n```\n\n`TaskChecklist` 可以给操作说明收尾。读者可以勾选，但刷新页面会恢复作者设置的初始状态。\n\n::task-checklist\n---\ntitle: 发布前核对\nitems:\n  - label: 示例地址和数据可以公开\n  - label: 下载文件存在，链接能打开\n  - label: 组件在手机上也能操作\n---\n::\n\n```mdc\n::task-checklist\n---\ntitle: 发布前核对\nitems:\n  - label: 示例地址和数据可以公开\n  - label: 下载文件存在，链接能打开\n  - label: 组件在手机上也能操作\n---\n::\n```\n\n## 图片和其他组件去哪里找\n\n- 多张截图用 `ImageGallery`：支持点击放大、左右键切换和 Esc 关闭，见 [图库示例](\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fmdc-showcase)。\n- 同一对象修改前后的图片用 `ImageCompare`：两张图尽量保持相同尺寸和构图，见 [图片对比演示](\u002Fdocs\u002F简单文档\u002Fcomponents\u002Finteractive-showcase)。\n- 老文章中的卡片、标签页、文件树和代码树可以继续使用。27 个公共组件的清单见 [常用组件](\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fapi)。\n- 完整参数见 [文章内容组件](\u002Fdocs\u002F简单文档\u002Fcomponents\u002Fcontent-blocks) 和 [数据、API 与阅读交互组件](\u002Fdocs\u002F简单文档\u002Fcomponents\u002Finteractive-blocks)。\n\n## 保存后检查\n\n先运行 `pnpm content:check`，检查站内链接、图片和已覆盖的组件属性，再运行 `pnpm build` 并打开页面确认效果。检查通过后仍要手动试一次交互，尤其是嵌套组件、命名插槽和下载文件。\n\n写作实例见 [最近给文档站补了些什么](\u002Fblog\u002F技术栈\u002Festel-docs-recent-updates)。\n",{"title":53,"description":1621},"S2TuLypEnnnX_Tv46cwdn5wxDrbiW5l5xgXOu5OPgEY",[1629,1631],{"title":48,"path":49,"stem":50,"description":1630,"icon":51,"children":-1},"使用项目现有脚本检查内容、类型、单元测试和页面构建。",{"title":59,"path":60,"stem":61,"description":1632,"icon":62,"children":-1},"在 GitHub 生成静态站点，通过 SSH 发布到 Nginx，微信接口由独立 Go 服务提供。",1791307029734]