Files
rxthinkcmf-wiki/RXThinkCMF_ThinkPhp8_NaiveVue/.vitepress/dist/zh/architecture/frontend-layer.html
T
2026-10-25 18:52:36 +08:00

296 lines
181 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>前端分层架构 | RXThinkCMF 开发文档</title>
<meta name="description" content="前端采用 Vue 3 + TypeScript 组件化架构,分为 View(视图)→ API(接口)→ Store(状态)→ HTTP(请求)四层。">
<meta name="generator" content="VitePress v1.3.4">
<link rel="preload stylesheet" href="/assets/style.DgIBCYhU.css" as="style">
<script type="module" src="/assets/app.B4uh89vd.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/theme.kZCdami4.js">
<link rel="modulepreload" href="/assets/chunks/framework.B-QBKwc1.js">
<link rel="modulepreload" href="/assets/zh_architecture_frontend-layer.md.BTDgI7w-.lean.js">
<link rel="icon" type="image/svg+xml" href="/logo.svg">
<link rel="icon" type="image/png" href="/logo.png">
<meta property="twitter:card" content="summary_large_image">
<script src="/banner.js" async type="text/javascript"></script>
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"light",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
<script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?0c49c7c3cd09fbcaaf60dc5e5c8ff6e7";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(e,c)})();</script>
<link rel="canonical" href="http://docs.thinkphp8.naivevue.rxthink.cn/zh/architecture/frontend-layer.html">
<meta property="og:type" content="article">
<meta property="og:site_name" content="RXThinkCMF">
<meta property="og:locale" content="zh_CN">
<meta property="og:title" content="前端分层架构">
<meta property="og:description" content="前端采用 Vue 3 + TypeScript 组件化架构,分为 View(视图)→ API(接口)→ Store(状态)→ HTTP(请求)四层。">
<meta property="og:url" content="http://docs.thinkphp8.naivevue.rxthink.cn/zh/architecture/frontend-layer.html">
<meta property="og:image" content="http://docs.thinkphp8.naivevue.rxthink.cn/logo.png">
<meta property="twitter:title" content="前端分层架构">
<meta property="twitter:description" content="前端采用 Vue 3 + TypeScript 组件化架构,分为 View(视图)→ API(接口)→ Store(状态)→ HTTP(请求)四层。">
<meta property="twitter:url" content="http://docs.thinkphp8.naivevue.rxthink.cn/zh/architecture/frontend-layer.html">
<meta property="twitter:image" content="http://docs.thinkphp8.naivevue.rxthink.cn/logo.png">
<script type="application/ld+json">[{"@context":"https://schema.org","@type":"TechArticle","headline":"4.4 前端分层架构","description":"前端采用 Vue 3 + TypeScript 组件化架构,分为 View(视图)→ API(接口)→ Store(状态)→ HTTP(请求)四层。","url":"http://docs.thinkphp8.naivevue.rxthink.cn/zh/architecture/frontend-layer.html","inLanguage":"zh-CN","mainEntityOfPage":{"@type":"WebPage","@id":"http://docs.thinkphp8.naivevue.rxthink.cn/zh/architecture/frontend-layer.html"},"publisher":{"@type":"Organization","name":"RXThinkCMF","url":"https://www.rxthink.cn","logo":"http://docs.thinkphp8.naivevue.rxthink.cn/logo.png","sameAs":["https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp8_NaiveVue","https://www.rxthink.cn"]},"dateModified":"2026-10-10T19:17:02+08:00"},{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"首页","item":"http://docs.thinkphp8.naivevue.rxthink.cn/"},{"@type":"ListItem","position":2,"name":"4. 架构设计"},{"@type":"ListItem","position":3,"name":"4.4 前端分层架构","item":"http://docs.thinkphp8.naivevue.rxthink.cn/zh/architecture/frontend-layer.html"}]}]</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-d8b57b2d><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c8291ffa></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c8291ffa> Skip to content </a><!--]--><!----><header class="VPNav" data-v-d8b57b2d data-v-7ad780c2><div class="VPNavBar" data-v-7ad780c2 data-v-9fd4d1dd><div class="wrapper" data-v-9fd4d1dd><div class="container" data-v-9fd4d1dd><div class="title" data-v-9fd4d1dd><div class="VPNavBarTitle has-sidebar" data-v-9fd4d1dd data-v-0ad69264><a class="title" href="/" data-v-0ad69264><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.svg" alt data-v-ab19afbb><!--]--><span data-v-0ad69264>小蚂蚁云</span><!--[--><!--]--></a></div></div><div class="content" data-v-9fd4d1dd><div class="content-body" data-v-9fd4d1dd><!--[--><!--]--><div class="VPNavBarSearch search" data-v-9fd4d1dd><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-9fd4d1dd data-v-afb2845e><span id="main-nav-aria-label" class="visually-hidden" data-v-afb2845e> Main Navigation </span><!--[--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://www.rxthink.cn" target="_blank" rel="noreferrer" tabindex="0" data-v-afb2845e data-v-08fbf4b6><!--[--><span data-v-08fbf4b6>官网</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://www.rxthink.cn/goods/detail/2" target="_blank" rel="noreferrer" tabindex="0" data-v-afb2845e data-v-08fbf4b6><!--[--><span data-v-08fbf4b6>授权</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-afb2845e data-v-af5898d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-af5898d3><span class="text" data-v-af5898d3><!----><span data-v-af5898d3>部署文档</span><span class="vpi-chevron-down text-icon" data-v-af5898d3></span></span></button><div class="menu" data-v-af5898d3><div class="VPMenu" data-v-af5898d3 data-v-20ed86d6><div class="items" data-v-20ed86d6><!--[--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://docs.thinkphp6.layui.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF混编版ThinkPHP6+Layui版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://docs.thinkphp6.elevue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离ThinkPHP6+ElementPlus版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://docs.thinkphp6.antdvue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离ThinkPHP6+AntDesign版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://docs.thinkphp6.naivevue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离ThinkPHP6+NaiveUI版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://docs.thinkphp8.layui.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF混编版ThinkPHP8+Layui版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://docs.thinkphp8.elevue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离ThinkPHP8+ElementPlus版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://docs.thinkphp8.antdvue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离ThinkPHP8+AntDesign版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://docs.thinkphp8.naivevue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离ThinkPHP8+NaiveUI版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://docs.laravel13.layui.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF混编版Laravel13+Layui版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://docs.laravel13.elevue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离Laravel13+ElementPlus版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://docs.laravel13.antdvue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离Laravel13+AntDesign版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://docs.laravel13.naivevue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离Laravel13+NaiveUI版本<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-afb2845e data-v-af5898d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-af5898d3><span class="text" data-v-af5898d3><!----><span data-v-af5898d3>在线演示</span><span class="vpi-chevron-down text-icon" data-v-af5898d3></span></span></button><div class="menu" data-v-af5898d3><div class="VPMenu" data-v-af5898d3 data-v-20ed86d6><div class="items" data-v-20ed86d6><!--[--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://manage.thinkphp6.layui.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF混编版ThinkPHP6+Layui版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://manage.thinkphp6.elevue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离ThinkPHP6+ElementPlus版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://manage.thinkphp6.antdvue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离ThinkPHP6+AntDesign版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://manage.thinkphp6.naivevue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离ThinkPHP6+NaiveUI版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://manage.thinkphp8.layui.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF混编版ThinkPHP8+Layui版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://manage.thinkphp8.elevue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离ThinkPHP8+ElementPlus版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://manage.thinkphp8.antdvue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离ThinkPHP8+AntDesign版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://manage.thinkphp8.naivevue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离ThinkPHP8+NaiveUI版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://manage.laravel13.layui.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF混编版Laravel13+Layui版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://manage.laravel13.elevue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离Laravel13+ElementPlus版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://manage.laravel13.antdvue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离Laravel13+AntDesign版本<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="http://manage.laravel13.naivevue.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->RXThinkCMF前后端分离Laravel13+NaiveUI版本<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/zh/other/sponsor.html" tabindex="0" data-v-afb2845e data-v-08fbf4b6><!--[--><span data-v-08fbf4b6>广告赞助</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-afb2845e data-v-af5898d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-af5898d3><span class="text" data-v-af5898d3><!----><span data-v-af5898d3>相关链接</span><span class="vpi-chevron-down text-icon" data-v-af5898d3></span></span></button><div class="menu" data-v-af5898d3><div class="VPMenu" data-v-af5898d3 data-v-20ed86d6><div class="items" data-v-20ed86d6><!--[--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="https://www.rxthink.cn" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->官方网站<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp8_NaiveVue" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->Gitee 仓库<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="https://www.thinkphp.cn/" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->ThinkPHP 官网<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="https://cn.vuejs.org/" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->Vue3 文档<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-20ed86d6 data-v-f51f088d><a class="VPLink link vp-external-link-icon" href="https://www.naiveui.com/" target="_blank" rel="noreferrer" data-v-f51f088d><!--[-->NaiveUI<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-9fd4d1dd data-v-3f90c1a5><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-3f90c1a5 data-v-be9742d9 data-v-b4ccac88><span class="check" data-v-b4ccac88><span class="icon" data-v-b4ccac88><!--[--><span class="vpi-sun sun" data-v-be9742d9></span><span class="vpi-moon moon" data-v-be9742d9></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-9fd4d1dd data-v-ef6192dc data-v-e71e869c><!--[--><a class="VPSocialLink no-icon" href="https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp8_NaiveVue" aria-label="github" target="_blank" rel="noopener" data-v-e71e869c data-v-358b6670><span class="vpi-social-github" /></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-9fd4d1dd data-v-f953d92f data-v-af5898d3><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-af5898d3><span class="vpi-more-horizontal icon" data-v-af5898d3></span></button><div class="menu" data-v-af5898d3><div class="VPMenu" data-v-af5898d3 data-v-20ed86d6><!----><!--[--><!--[--><!----><div class="group" data-v-f953d92f><div class="item appearance" data-v-f953d92f><p class="label" data-v-f953d92f>Appearance</p><div class="appearance-action" data-v-f953d92f><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-f953d92f data-v-be9742d9 data-v-b4ccac88><span class="check" data-v-b4ccac88><span class="icon" data-v-b4ccac88><!--[--><span class="vpi-sun sun" data-v-be9742d9></span><span class="vpi-moon moon" data-v-be9742d9></span><!--]--></span></span></button></div></div></div><div class="group" data-v-f953d92f><div class="item social-links" data-v-f953d92f><div class="VPSocialLinks social-links-list" data-v-f953d92f data-v-e71e869c><!--[--><a class="VPSocialLink no-icon" href="https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp8_NaiveVue" aria-label="github" target="_blank" rel="noopener" data-v-e71e869c data-v-358b6670><span class="vpi-social-github" /></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-9fd4d1dd data-v-6bee1efd><span class="container" data-v-6bee1efd><span class="top" data-v-6bee1efd></span><span class="middle" data-v-6bee1efd></span><span class="bottom" data-v-6bee1efd></span></span></button></div></div></div></div><div class="divider" data-v-9fd4d1dd><div class="divider-line" data-v-9fd4d1dd></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-d8b57b2d data-v-2488c25a><div class="container" data-v-2488c25a><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-2488c25a><span class="vpi-align-left menu-icon" data-v-2488c25a></span><span class="menu-text" data-v-2488c25a>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-2488c25a data-v-883964e0><button data-v-883964e0>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-d8b57b2d data-v-42c4c606><div class="curtain" data-v-42c4c606></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-42c4c606><span class="visually-hidden" id="sidebar-aria-label" data-v-42c4c606> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>📖 1. 了解项目</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/introduction.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>1.1 项目介绍</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/why.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>1.2 为什么选择我们</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/directory.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>1.3 项目目录结构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/course.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>1.4 新手入门指南</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/tech-stack.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>1.5 技术栈说明</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/changelog.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>1.6 更新日志</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>🚀 2. 快速入门</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/quickstart/environment.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>2.1 开发环境准备</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/quickstart/backend-start.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>2.2 后端服务启动</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/quickstart/frontend-start.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>2.3 前端服务启动</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/quickstart/database-init.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>2.4 数据库初始化</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/quickstart/env-vars.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>2.5 环境变量配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/quickstart/first-api.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>2.6 第一个接口调试</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/quickstart/docker.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>2.7 Docker 快速体验</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/quickstart/faq.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>2.8 常见问题 FAQ</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>🧪 3. 模块开发实战</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/guide/overview.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>3.1 概述与目标</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/guide/database.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>3.2 数据库建表</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/guide/model.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>3.3 模型层开发</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/guide/validator.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>3.4 验证器开发</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/guide/logic.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>3.5 逻辑层开发</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/guide/controller.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>3.6 控制器开发</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/guide/route.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>3.7 路由注册</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/guide/permission.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>3.8 权限节点配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/guide/frontend-integration.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>3.9 前端联调指引</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/guide/code-list.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>3.10 完整代码清单</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/guide/faq.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>3.11 常见问题与排错</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible has-active" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>🏛️ 4. 架构设计</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/architecture/overview.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>4.1 整体架构概览</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/architecture/request-flow.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>4.2 请求处理链路</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/architecture/backend-layer.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>4.3 后端分层架构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/architecture/frontend-layer.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>4.4 前端分层架构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/architecture/directory-design.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>4.5 目录结构设计</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/architecture/base-classes.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>4.6 核心基类体系</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/architecture/cross-cutting.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>4.7 横切机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/architecture/cache.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>4.8 缓存架构设计</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/architecture/database-design.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>4.9 数据库设计</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/architecture/security.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>4.10 安全架构设计</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/architecture/extensibility.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>4.11 扩展性设计</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>🔐 5. 核心功能</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><section class="VPSidebarItem level-1 collapsible" data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h3 class="text" data-v-edd2eed8>认证与安全</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/jwt.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.1 用户认证(JWT)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/auth-flow.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.2 认证流程实战</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/captcha.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.3 验证码机制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/rbac.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.4 权限管理(RBAC)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/cors.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.5 跨域资源共享</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/password.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.6 密码加密服务</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/demo-mode.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.7 演示模式</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible" data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h3 class="text" data-v-edd2eed8>数据与配置</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/tenant.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.8 多租户隔离</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/data-scope.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.9 数据权限</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/dict.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.10 字典模块</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/dict-guide.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.11 字典配置与使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/config.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.12 系统配置管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/param.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.13 系统参数管理</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible" data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h3 class="text" data-v-edd2eed8>日志与监控</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/operation-log.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.14 操作日志</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/login-log.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.15 登录日志</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/exception.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.16 异常与响应处理</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible" data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h3 class="text" data-v-edd2eed8>防护与治理</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/idempotent.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.17 防重复提交</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible" data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h3 class="text" data-v-edd2eed8>注解系统</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/core/attributes.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>5.18 注解系统总览</p><!--]--></a><!----></div><!----></div><!--]--></div></section><!--]--></div></section></div><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>📦 6. 业务模块</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/modules/user.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>6.1 用户管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/modules/role.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>6.2 角色管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/modules/menu.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>6.3 菜单管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/modules/dept.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>6.4 部门管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/modules/level.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>6.5 职级管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/modules/position.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>6.6 岗位管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/modules/article.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>6.7 文章管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/modules/content.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>6.8 公告与链接管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/modules/city.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>6.9 行政区划管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/modules/category.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>6.10 分类管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/modules/job.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>6.11 定时任务</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/modules/param.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>6.12 参数管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/modules/tenant.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>6.13 租户管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/modules/filetemplate.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>6.14 文件模板管理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/modules/index.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>6.15 首页与个人中心</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>🧰 7. 文件处理</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/tools/upload.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>7.1 文件上传全流程</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/tools/upload-config.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>7.2 上传配置详解</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/tools/rich-text.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>7.3 富文本处理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/tools/excel.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>7.4 数据导入导出</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/tools/file-components.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>7.5 前端文件组件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/tools/db-migrate.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>7.6 数据库迁移工具</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>🔗 8. 接口规范与对接</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/api-spec/response.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>8.1 统一响应格式</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/api-spec/error-code.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>8.2 错误码对照表</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/api-spec/pagination.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>8.3 分页查询规范</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/api-spec/upload.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>8.4 文件上传接口</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/api-spec/dict-api.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>8.5 字典数据接口</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/api-spec/token.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>8.6 Token 使用说明</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/api-spec/overview.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>8.7 API 接口总览</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>🖥️ 9. 前端开发</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><section class="VPSidebarItem level-1 collapsible" data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h3 class="text" data-v-edd2eed8>工程基础</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/overview.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.1 前端工程概述</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/directory.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.2 目录结构详解</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/env-config.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.3 环境与构建配置</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible" data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h3 class="text" data-v-edd2eed8>核心机制</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/http.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.4 HTTP 请求封装</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/router.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.5 路由与动态菜单</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/store.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.6 状态管理(Pinia)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/permission.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.7 权限控制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/login.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.8 登录流程</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible" data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h3 class="text" data-v-edd2eed8>公共组件</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/display-components.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.9 数据展示组件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/form-components.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.10 数据录入组件</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/excel-components.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.11 Excel 导入导出组件</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible" data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h3 class="text" data-v-edd2eed8>开发实践</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/new-page.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.12 新增页面开发步骤</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/api-module.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.13 API 模块编写规范</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/style.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.14 样式与主题定制</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/layout.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.15 布局系统</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/utils.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.16 工具函数</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/frontend/i18n.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>9.17 国际化(i18n)</p><!--]--></a><!----></div><!----></div><!--]--></div></section><!--]--></div></section></div><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>🔧 10. 代码生成器</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/generator/overview.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>10.1 概述与架构</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/generator/cli.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>10.2 CLI 命令行使用</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/generator/web-ui.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>10.3 Web 管理界面</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/generator/parser.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>10.4 表结构解析引擎</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/generator/code-engine.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>10.5 代码生成引擎</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/generator/templates.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>10.6 自定义模板开发</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/generator/config.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>10.7 配置文件详解</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/generator/demo.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>10.8 实战案例</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/generator/faq.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>10.9 常见问题</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>⚙️ 11. 运维部署</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/deploy/checklist.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>11.1 部署 Checklist</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/deploy/env-plan.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>11.2 环境规划</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/deploy/db-migrate.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>11.3 数据库迁移</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/deploy/backend.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>11.4 后端部署</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/deploy/frontend.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>11.5 前端部署</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/deploy/docker.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>11.6 Docker 生产部署</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/deploy/performance.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>11.7 性能调优</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/deploy/security.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>11.8 安全加固清单</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/deploy/backup.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>11.9 备份与恢复</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/deploy/troubleshooting.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>11.10 故障排查手册</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/deploy/ci-cd.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>11.11 CI/CD 流水线</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>📋 12. 规范标准</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><section class="VPSidebarItem level-1 collapsible" data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h3 class="text" data-v-edd2eed8>⭐ 必须遵守</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/standards/api-response.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>12.1 API 响应规范</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/standards/pagination.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>12.2 分页查询规范</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/standards/git.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>12.3 Git 提交规范</p><!--]--></a><!----></div><!----></div><!--]--></div></section><section class="VPSidebarItem level-1 collapsible" data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h3 class="text" data-v-edd2eed8>📌 建议遵守</h3><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/standards/deletion.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>12.4 数据删除规范</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/standards/code-review.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>12.5 代码审查清单</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/standards/backend-code.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>12.6 后端编码规范</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-2 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/standards/frontend-code.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>12.7 前端编码规范</p><!--]--></a><!----></div><!----></div><!--]--></div></section><!--]--></div></section></div><div class="no-transition group" data-v-51288d80><section class="VPSidebarItem level-0 collapsible" data-v-51288d80 data-v-edd2eed8><div class="item" role="button" tabindex="0" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><h2 class="text" data-v-edd2eed8>📄 附录</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-edd2eed8><span class="vpi-chevron-right caret-icon" data-v-edd2eed8></span></div></div><div class="items" data-v-edd2eed8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/appendix/faq.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>A. 常见问题汇总</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/appendix/database-tables.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>B. 数据库表结构速查</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/appendix/config-reference.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>C. 配置项速查</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/appendix/functions.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>D. 公共函数速查</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/appendix/api-cheatsheet.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>E. API 接口速查表</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/appendix/middleware.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>F. 中间件执行顺序</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/appendix/components.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>G. 前端组件速查</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/appendix/stores.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>H. 前端 Store 速查</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/appendix/enums.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>I. 前端 Enums 速查</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/appendix/glossary.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>J. 术语表</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/other/contributing.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>K. 贡献指南</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/other/declare.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>L. 免责声明</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link link" href="/zh/other/sponsor.html" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>M. 广告赞助</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-edd2eed8><div class="item" data-v-edd2eed8><div class="indicator" data-v-edd2eed8></div><a class="VPLink link vp-external-link-icon link" href="https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp8_NaiveVue" target="_blank" rel="noreferrer" data-v-edd2eed8><!--[--><p class="text" data-v-edd2eed8>N. 开源协议</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-d8b57b2d data-v-9a6c75ad><div class="VPDoc has-sidebar has-aside" data-v-9a6c75ad data-v-e6f2a212><!--[--><!--]--><div class="container" data-v-e6f2a212><div class="aside" data-v-e6f2a212><div class="aside-curtain" data-v-e6f2a212></div><div class="aside-container" data-v-e6f2a212><div class="aside-content" data-v-e6f2a212><div class="VPDocAside" data-v-e6f2a212 data-v-cb998dce><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-cb998dce data-v-f610f197><div class="content" data-v-f610f197><div class="outline-marker" data-v-f610f197></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-f610f197>本页内容</div><ul class="VPDocOutlineItem root" data-v-f610f197 data-v-53c99d69><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-cb998dce></div><!--[--><!--[--><!--[--><!--[--><!--[--><div class="VPDocAsideSponsors" data-v-46d2db61><div class="VPSponsors vp-sponsor aside"><!--[--><section class="vp-sponsor-section"><!----><div class="VPSponsorsGrid vp-sponsor-grid mini"><!--[--><div class="vp-sponsor-grid-item"><a class="vp-sponsor-grid-link" href="https://www.rxthink.cn" target="_blank" rel="sponsored noopener"><article class="vp-sponsor-grid-box"><h4 class="visually-hidden">Become a sponsor</h4><img class="vp-sponsor-grid-image" src="/sponsor/rxthinkcmf.png" alt="Become a sponsor"></article></a></div><!--]--></div></section><section class="vp-sponsor-section"><!----><div class="VPSponsorsGrid vp-sponsor-grid xmini"><!--[--><div class="vp-sponsor-grid-item"><a class="vp-sponsor-grid-link" href="https://www.rxthink.cn" target="_blank" rel="sponsored noopener"><article class="vp-sponsor-grid-box"><h4 class="visually-hidden">企业级中台解决方案</h4><img class="vp-sponsor-grid-image" src="/sponsor/rxthinkcmf.png" alt="企业级中台解决方案"></article></a></div><div class="vp-sponsor-grid-item"><a class="vp-sponsor-grid-link" href="https://www.rxthink.cn" target="_blank" rel="sponsored noopener"><article class="vp-sponsor-grid-box"><h4 class="visually-hidden">企业级中台解决方案</h4><img class="vp-sponsor-grid-image" src="/sponsor/rxthinkcmf.png" alt="企业级中台解决方案"></article></a></div><!--]--></div></section><!--]--></div></div><a class="banner mp" href="https://www.rxthink.cn" target="_blank" data-v-46d2db61><img width="22" height="22" src="/sponsor/rxthinkcmf.png" data-v-46d2db61><span data-v-46d2db61><p class="extra-info" data-v-46d2db61>赋能开发者</p><p class="heading" data-v-46d2db61>企业级中台解决方案</p><p class="extra-info" data-v-46d2db61>助力企业发展</p></span></a><a class="banner cert" href="https://www.rxthink.cn" target="_blank" data-v-46d2db61><img width="22" height="22" src="/sponsor/rxthinkcmf.png" data-v-46d2db61><span data-v-46d2db61><p class="extra-info" data-v-46d2db61>赋能开发者</p><p class="heading" data-v-46d2db61>企业级中台解决方案</p><p class="extra-info" data-v-46d2db61>助力企业发展</p></span></a><!--]--><!--]--><!--]--><!--]--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-e6f2a212><div class="content-container" data-v-e6f2a212><!--[--><!--]--><main class="main" data-v-e6f2a212><div style="position:relative;" class="vp-doc _zh_architecture_frontend-layer" data-v-e6f2a212><div><h1 id="_4-4-前端分层架构" tabindex="-1">4.4 前端分层架构 <a class="header-anchor" href="#_4-4-前端分层架构" aria-label="Permalink to &quot;4.4 前端分层架构&quot;">​</a></h1><div class="tip custom-block"><p class="custom-block-title">概述</p><p>前端采用 Vue 3 + TypeScript 组件化架构,分为 View(视图)→ API(接口)→ Store(状态)→ HTTP(请求)四层。辅以 Router(路由)、Directives(指令)、Hooks(组合式函数)、Utils(工具)等支撑模块。</p></div><h2 id="架构全景" tabindex="-1">架构全景 <a class="header-anchor" href="#架构全景" aria-label="Permalink to &quot;架构全景&quot;">​</a></h2><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span>┌─────────────────────────────────────────────────────────────────────┐</span></span>
<span class="line"><span>│ 支撑模块 │</span></span>
<span class="line"><span>│ │</span></span>
<span class="line"><span>│ Router(路由) Directives(指令) Hooks(组合式函数) │</span></span>
<span class="line"><span>│ src/router/ src/directives/ src/hooks/ │</span></span>
<span class="line"><span>│ │</span></span>
<span class="line"><span>│ Utils(工具) Enums(枚举) Styles(样式) │</span></span>
<span class="line"><span>│ src/utils/ src/enums/ src/styles/ │</span></span>
<span class="line"><span>└──────────────────────────────┬──────────────────────────────────────┘</span></span>
<span class="line"><span> │ 被主干层引用</span></span>
<span class="line"><span> ▼</span></span>
<span class="line"><span>┌─────────────────────────────────────────────────────────────────────┐</span></span>
<span class="line"><span>│ 主干链路 │</span></span>
<span class="line"><span>│ │</span></span>
<span class="line"><span>│ ┌─────────────────────────────────────────────────────────────┐ │</span></span>
<span class="line"><span>│ │ View(视图层) │ │</span></span>
<span class="line"><span>│ │ 页面渲染、用户交互、调用 API 和 Store │ │</span></span>
<span class="line"><span>│ │ 文件:src/views/**/*.vue │ │</span></span>
<span class="line"><span>│ └──────────────────────────┬──────────────────────────────────┘ │</span></span>
<span class="line"><span>│ │ 调用 API 函数 │</span></span>
<span class="line"><span>│ ▼ │</span></span>
<span class="line"><span>│ ┌─────────────────────────────────────────────────────────────┐ │</span></span>
<span class="line"><span>│ │ API(接口层) │ │</span></span>
<span class="line"><span>│ │ 封装后端 API 调用,定义请求参数和响应类型 │ │</span></span>
<span class="line"><span>│ │ 文件:src/api/**/*.ts │ │</span></span>
<span class="line"><span>│ └──────────────────────────┬──────────────────────────────────┘ │</span></span>
<span class="line"><span>│ │ 调用 http.request() │</span></span>
<span class="line"><span>│ ▼ │</span></span>
<span class="line"><span>│ ┌─────────────────────────────────────────────────────────────┐ │</span></span>
<span class="line"><span>│ │ HTTP(请求层) │ │</span></span>
<span class="line"><span>│ │ Axios 封装:拦截器、Token 携带、错误处理 │ │</span></span>
<span class="line"><span>│ │ 文件:src/utils/http/axios/ │ │</span></span>
<span class="line"><span>│ └──────────────────────────┬──────────────────────────────────┘ │</span></span>
<span class="line"><span>│ │ │</span></span>
<span class="line"><span>│ ▼ │</span></span>
<span class="line"><span>│ ┌─────────────────────────────────────────────────────────────┐ │</span></span>
<span class="line"><span>│ │ 后端 API(RESTful JSON) │ │</span></span>
<span class="line"><span>│ └─────────────────────────────────────────────────────────────┘ │</span></span>
<span class="line"><span>│ │</span></span>
<span class="line"><span>│ ┌─────────────────────────────────────────────────────────────┐ │</span></span>
<span class="line"><span>│ │ Store(状态层) │ │</span></span>
<span class="line"><span>│ │ 全局状态管理:Token、用户信息、权限列表、动态路由 │ │</span></span>
<span class="line"><span>│ │ 文件:src/store/modules/*.ts │ │</span></span>
<span class="line"><span>│ └─────────────────────────────────────────────────────────────┘ │</span></span>
<span class="line"><span>└─────────────────────────────────────────────────────────────────────┘</span></span></code></pre></div><h2 id="各层职责详解" tabindex="-1">各层职责详解 <a class="header-anchor" href="#各层职责详解" aria-label="Permalink to &quot;各层职责详解&quot;">​</a></h2><h3 id="View-层-视图-" tabindex="-1">View 层(视图) <a class="header-anchor" href="#View-层-视图-" aria-label="Permalink to &quot;View 层(视图)&quot;">​</a></h3><p><strong>文件</strong>:<code>src/views/**/*.vue</code><strong>职责</strong>:页面渲染、用户交互、调用 API 获取数据</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span>src/views/</span></span>
<span class="line"><span>├── system/ 系统管理</span></span>
<span class="line"><span>│ ├── user/ 用户管理</span></span>
<span class="line"><span>│ │ ├── index.vue 列表页</span></span>
<span class="line"><span>│ │ └── edit.vue 编辑弹窗</span></span>
<span class="line"><span>│ ├── role/ 角色管理</span></span>
<span class="line"><span>│ └── menu/ 菜单管理</span></span>
<span class="line"><span>├── content/ 内容管理</span></span>
<span class="line"><span>│ ├── article/ 文章管理</span></span>
<span class="line"><span>│ └── category/ 分类管理</span></span>
<span class="line"><span>├── login.vue 登录页</span></span>
<span class="line"><span>├── dashboard/ 仪表盘</span></span>
<span class="line"><span>└── ...</span></span></code></pre></div><p><strong>典型页面结构:</strong></p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&lt;</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">template</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> &lt;</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">n-card</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> :bordered</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">false</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> class</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">pt-3 mb-3 proCard</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> &lt;!-- 搜索区(BasicForm 驱动) --&gt;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> &lt;</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">BasicForm</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> @register</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">registerForm</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> @submit</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">handleSubmit</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> @reset</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">handleReset</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> /&gt;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> &lt;/</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">n-card</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> &lt;</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">n-card</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> :bordered</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">false</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> class</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">proCard</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> &lt;!-- 操作栏 + 数据表格(BasicTable 驱动,分页内置) --&gt;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> &lt;</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">BasicTable</span></span>
<span class="line"><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> :columns</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">columns</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span></span>
<span class="line"><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> :request</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">loadDataTable</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span></span>
<span class="line"><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> :row-key</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">(row) =&gt; row.id</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span></span>
<span class="line"><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> ref</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">basicTableRef</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span></span>
<span class="line"><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> :actionColumn</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">actionColumn</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> &gt;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> &lt;</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">template</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> #</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#59873A;--shiki-light-font-style:inherit;">tableTitle</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> &lt;</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">n-space</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> &lt;</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">n-button</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> v-perm</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">&#39;sys:example:add&#39;</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> type</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">primary</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> @click</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">handleAdd</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;"> 新增</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> &lt;/</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">n-button</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> &lt;/</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">n-space</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> &lt;/</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">template</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> &lt;/</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">BasicTable</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> &lt;/</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">n-card</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&lt;/</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">template</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&lt;</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">script</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> setup</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> lang</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">ts</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">import</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> h</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> }</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> from</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">vue</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">import</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> NButton</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> }</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> from</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">naive-ui</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">import</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> BasicTable</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> TableAction</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> }</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> from</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">@/components/Table</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">import</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> BasicForm</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> useForm</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> }</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> from</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">@/components/Form</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">import</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> getExamplePage</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> exampleDelete</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> }</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> from</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">@/api/tool/example</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;">const</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> [</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">registerForm</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> handleSubmit</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> handleReset</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> }]</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;"> =</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> useForm</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">({</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;"> schemas</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> [</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> { </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">field</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">name</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">label</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">名称</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">component</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">NInput</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> },</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> ],</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;">const</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> columns</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;"> =</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> [</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> { </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">title</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">ID</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">key</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">id</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">width</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#2F798A;"> 80</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> },</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> { </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">title</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">名称</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">key</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">name</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> },</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> { </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">title</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">状态</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">key</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">statusText</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> },</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">];</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;">const</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> actionColumn</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;"> =</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;"> width</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#BF9EEE;--shiki-light:#2F798A;"> 200</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;"> title</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">操作</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;"> key</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">action</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</span></span>
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> render</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">(</span><span style="--shiki-dark:#FFB86C;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;">record</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">) {</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> return</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> h</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">(</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">TableAction</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, {</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;"> actions</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> [</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> { </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">label</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">编辑</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">type</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">warning</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">onClick</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> () </span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=&gt;</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> handleEdit</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">(</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">record</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">), </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">auth</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">sys:example:update</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> },</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> { </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">label</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">删除</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">type</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">error</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">onClick</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> () </span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=&gt;</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> handleDelete</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">(</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">record</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">id</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">), </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">auth</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">sys:example:delete</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> },</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> ],</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> });</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> },</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">};</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;">// 分页数据请求(BasicTable 内置分页)</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;">const</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> loadDataTable</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;"> =</span><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;"> async</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> (</span><span style="--shiki-dark:#FFB86C;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;">params</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">)</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;"> =&gt;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;"> const</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> res</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;"> =</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> await</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> getExamplePage</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">({ </span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">...</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">params</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> });</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> return</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> { </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">records</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> res</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">records</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">total</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> res</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">total</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> };</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">};</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&lt;/</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">script</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span></code></pre></div><h3 id="API-层-接口-" tabindex="-1">API 层(接口) <a class="header-anchor" href="#API-层-接口-" aria-label="Permalink to &quot;API 层(接口)&quot;">​</a></h3><p><strong>文件</strong>:<code>src/api/**/*.ts</code><strong>职责</strong>:封装后端 API 调用,一个后端模块对应一个 API 文件</p><p><strong>命名规范:</strong></p><table tabindex="0"><thead><tr><th>操作</th><th>函数名</th><th>HTTP 方法</th><th>参数传递</th></tr></thead><tbody><tr><td>分页查询</td><td><code>get{Module}Page</code></td><td>GET</td><td><code>params</code></td></tr><tr><td>全量列表</td><td><code>get{Module}List</code></td><td>GET</td><td><code>params</code></td></tr><tr><td>详情</td><td><code>get{Module}Detail</code></td><td>GET</td><td>URL 参数</td></tr><tr><td>新增</td><td><code>{module}Add</code></td><td>POST</td><td><code>data</code></td></tr><tr><td>修改</td><td><code>{module}Update</code></td><td>PUT</td><td><code>data</code></td></tr><tr><td>删除</td><td><code>{module}Delete</code></td><td>DELETE</td><td>URL 参数</td></tr><tr><td>批量删除</td><td><code>{module}BatchDelete</code></td><td>DELETE</td><td><code>data</code></td></tr><tr><td>导入</td><td><code>{module}Import</code></td><td>POST</td><td>FormData</td></tr><tr><td>导出</td><td><code>{module}Export</code></td><td>GET</td><td><code>params</code></td></tr></tbody></table><p><strong>完整示例:</strong></p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;">// src/api/system/user.ts</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">import</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> http</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> }</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> from</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">@/utils/http/axios</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;">// 分页查询</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">export</span><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;"> function</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> getUserPage</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">(</span><span style="--shiki-dark:#FFB86C;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;">params</span><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;">?</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">)</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> return</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> http</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">request</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">({ </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">url</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/user/page</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">method</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">GET</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">params</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> });</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;">// 详情</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">export</span><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;"> function</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> getUserDetail</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">(</span><span style="--shiki-dark:#FFB86C;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;">id</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">)</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> return</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> http</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">request</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">({ </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">url</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/user/detail/</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;"> +</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> id</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">method</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">GET</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> });</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;">// 新增</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">export</span><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;"> function</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> userAdd</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">(</span><span style="--shiki-dark:#FFB86C;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;">data</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#97E1F1;--shiki-dark-font-style:italic;--shiki-light:#2E8F82;--shiki-light-font-style:inherit;"> any</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">)</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> return</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> http</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">request</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">({ </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">url</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/user/add</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">method</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">POST</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">data</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> });</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;">// 修改</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">export</span><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;"> function</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> userUpdate</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">(</span><span style="--shiki-dark:#FFB86C;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;">data</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#97E1F1;--shiki-dark-font-style:italic;--shiki-light:#2E8F82;--shiki-light-font-style:inherit;"> any</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">)</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> return</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> http</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">request</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">({ </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">url</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/user/update</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">method</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">PUT</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">data</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> });</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;">// 删除</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">export</span><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;"> function</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> userDelete</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">(</span><span style="--shiki-dark:#FFB86C;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;">id</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">)</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> return</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> http</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">request</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">({ </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">url</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/user/delete/</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;"> +</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> id</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">method</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">DELETE</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> });</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;">// 批量删除</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">export</span><span style="--shiki-dark:#F286C4;--shiki-light:#AB5959;"> function</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;"> userBatchDelete</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">(</span><span style="--shiki-dark:#FFB86C;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;">data</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#97E1F1;--shiki-dark-font-style:italic;--shiki-light:#2E8F82;--shiki-light-font-style:inherit;"> any</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">)</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> {</span></span>
<span class="line"><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;"> return</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;"> http</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">.</span><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">request</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">({ </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">url</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/user/batchDelete</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#998418;">method</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">:</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">DELETE</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">, </span><span style="--shiki-dark:#F6F6F4;--shiki-light:#B07D48;">data</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> });</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">}</span></span></code></pre></div><h3 id="HTTP-层-请求-" tabindex="-1">HTTP 层(请求) <a class="header-anchor" href="#HTTP-层-请求-" aria-label="Permalink to &quot;HTTP 层(请求)&quot;">​</a></h3><p><strong>文件</strong>:<code>src/utils/http/axios/</code><strong>职责</strong>:Axios 封装,自动处理 Token、响应码、错误提示</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span>src/utils/http/axios/</span></span>
<span class="line"><span>├── index.ts Axios 实例配置和拦截器</span></span>
<span class="line"><span>├── Axios.ts VAxios 类封装</span></span>
<span class="line"><span>├── axiosTransform.ts 数据转换接口</span></span>
<span class="line"><span>├── checkStatus.ts HTTP 状态码处理</span></span>
<span class="line"><span>├── helper.ts 辅助函数</span></span>
<span class="line"><span>└── types.ts 类型定义</span></span></code></pre></div><p><strong>核心拦截器:</strong></p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span>请求拦截器:</span></span>
<span class="line"><span> ┌──────────────────────────────────────────┐</span></span>
<span class="line"><span> │ 1. 从 Store 获取 Token │</span></span>
<span class="line"><span> │ 2. 自动添加 Authorization: Bearer &lt;token&gt; │</span></span>
<span class="line"><span> └──────────────────────────────────────────┘</span></span>
<span class="line"><span></span></span>
<span class="line"><span>响应拦截器:</span></span>
<span class="line"><span> ┌──────────────────────────────────────────┐</span></span>
<span class="line"><span> │ code === 0 → 成功,返回 data │</span></span>
<span class="line"><span> │ code === 401 → Token 过期,跳转登录页 │</span></span>
<span class="line"><span> │ code === 403 → 权限不足,显示错误提示 │</span></span>
<span class="line"><span> │ 其它 code → 业务失败,显示 msg │</span></span>
<span class="line"><span> └──────────────────────────────────────────┘</span></span></code></pre></div><h3 id="Store-层-状态-" tabindex="-1">Store 层(状态) <a class="header-anchor" href="#Store-层-状态-" aria-label="Permalink to &quot;Store 层(状态)&quot;">​</a></h3><p><strong>文件</strong>:<code>src/store/modules/*.ts</code><strong>职责</strong>:全局状态管理(Pinia)</p><table tabindex="0"><thead><tr><th>Store</th><th>文件</th><th>管理的状态</th></tr></thead><tbody><tr><td>userStore</td><td><code>user.ts</code></td><td>Token、用户信息、权限列表、登录/登出</td></tr><tr><td>asyncRouteStore</td><td><code>asyncRoute.ts</code></td><td>动态路由、keep-alive 缓存列表</td></tr><tr><td>projectSettingStore</td><td><code>projectSetting.ts</code></td><td>项目配置(主题、布局等)</td></tr><tr><td>tabsViewStore</td><td><code>tabsView.ts</code></td><td>标签页导航状态</td></tr><tr><td>designSettingStore</td><td><code>designSetting.ts</code></td><td>主题设计配置</td></tr><tr><td>ossConfigStore</td><td><code>ossConfig.ts</code></td><td>云存储配置</td></tr><tr><td>lockscreenStore</td><td><code>lockscreen.ts</code></td><td>锁屏状态</td></tr></tbody></table><p><strong>userStore 核心流程:</strong></p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span>登录:</span></span>
<span class="line"><span> userStore.login(userInfo)</span></span>
<span class="line"><span> → POST /login → 获取 access_token</span></span>
<span class="line"><span> → Storage.set(ACCESS_TOKEN, token)</span></span>
<span class="line"><span> → this.setToken(token)</span></span>
<span class="line"><span></span></span>
<span class="line"><span>获取用户信息:</span></span>
<span class="line"><span> userStore.GetInfo()</span></span>
<span class="line"><span> → GET /index/getUserInfo</span></span>
<span class="line"><span> → this.setPermissions(res.permissions)</span></span>
<span class="line"><span> → this.setUserInfo(res)</span></span>
<span class="line"><span></span></span>
<span class="line"><span>登出:</span></span>
<span class="line"><span> userStore.logout()</span></span>
<span class="line"><span> → POST /logout</span></span>
<span class="line"><span> → 清除 Token、用户信息、权限列表</span></span>
<span class="line"><span> → 跳转登录页</span></span></code></pre></div><h2 id="路由与动态菜单" tabindex="-1">路由与动态菜单 <a class="header-anchor" href="#路由与动态菜单" aria-label="Permalink to &quot;路由与动态菜单&quot;">​</a></h2><h3 id="路由架构" tabindex="-1">路由架构 <a class="header-anchor" href="#路由架构" aria-label="Permalink to &quot;路由架构&quot;">​</a></h3><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span>静态路由(固定,src/router/)</span></span>
<span class="line"><span>├── /login 登录页</span></span>
<span class="line"><span>├── / 根路径,重定向到首页</span></span>
<span class="line"><span>├── /redirect/:path 重定向路由</span></span>
<span class="line"><span>└── /:path(.*)* 404 错误页</span></span>
<span class="line"><span></span></span>
<span class="line"><span>动态路由(从后端菜单生成)</span></span>
<span class="line"><span>├── /dashboard 仪表盘</span></span>
<span class="line"><span>├── /system/user 用户管理</span></span>
<span class="line"><span>├── /system/role 角色管理</span></span>
<span class="line"><span>├── /content/article 文章管理</span></span>
<span class="line"><span>└── ...</span></span></code></pre></div><h3 id="动态路由生成流程" tabindex="-1">动态路由生成流程 <a class="header-anchor" href="#动态路由生成流程" aria-label="Permalink to &quot;动态路由生成流程&quot;">​</a></h3><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span>1. 用户登录 → 获取 Token → 存入 Store</span></span>
<span class="line"><span>2. 路由守卫(router.beforeEach)检测到 Token</span></span>
<span class="line"><span>3. 调用 GET /index/getMenus 获取菜单树</span></span>
<span class="line"><span>4. generator-routers.ts 将菜单树转换为路由表</span></span>
<span class="line"><span>5. router.addRoute() 动态注入路由</span></span>
<span class="line"><span>6. 渲染侧边栏菜单</span></span></code></pre></div><h3 id="布局系统" tabindex="-1">布局系统 <a class="header-anchor" href="#布局系统" aria-label="Permalink to &quot;布局系统&quot;">​</a></h3><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span>┌─────────────────────────────────────────────────────────────┐</span></span>
<span class="line"><span>│ 顶部导航栏 │</span></span>
<span class="line"><span>│ [Logo] [面包屑] [搜索] [通知] [头像] │</span></span>
<span class="line"><span>├──────────┬──────────────────────────────────────────────────┤</span></span>
<span class="line"><span>│ │ │</span></span>
<span class="line"><span>│ 侧边栏 │ 内容区域 │</span></span>
<span class="line"><span>│ 菜单 │ │</span></span>
<span class="line"><span>│ │ ┌──────────────────────────────────────────┐ │</span></span>
<span class="line"><span>│ ──────── │ │ 标签页导航 │ │</span></span>
<span class="line"><span>│ 系统管理 │ ├──────────────────────────────────────────┤ │</span></span>
<span class="line"><span>│ ├ 用户 │ │ │ │</span></span>
<span class="line"><span>│ ├ 角色 │ │ 页面内容(keep-alive 缓存) │ │</span></span>
<span class="line"><span>│ └ 菜单 │ │ │ │</span></span>
<span class="line"><span>│ │ └──────────────────────────────────────────┘ │</span></span>
<span class="line"><span>└──────────┴──────────────────────────────────────────────────┘</span></span></code></pre></div><h2 id="权限控制" tabindex="-1">权限控制 <a class="header-anchor" href="#权限控制" aria-label="Permalink to &quot;权限控制&quot;">​</a></h2><h3 id="按钮级权限指令" tabindex="-1">按钮级权限指令 <a class="header-anchor" href="#按钮级权限指令" aria-label="Permalink to &quot;按钮级权限指令&quot;">​</a></h3><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;">&lt;!-- v-perm:单权限 --&gt;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&lt;</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">n-button</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#59873A;--shiki-light-font-style:inherit;"> v-perm</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#999999;">&quot;</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">sys:user:add</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#DEE492;--shiki-light:#999999;">&quot;</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#B07D48;--shiki-light-font-style:inherit;"> type</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">primary</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&quot;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">新增</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&lt;/</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">n-button</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;">&lt;!-- v-perms:多权限(满足任一即可) --&gt;</span></span>
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&lt;</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">n-button</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#59873A;--shiki-light-font-style:inherit;"> v-perms</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#999999;">&quot;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">[</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">sys:user:add</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> &#39;</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">sys:user:update</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">&#39;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">]</span><span style="--shiki-dark:#DEE492;--shiki-light:#999999;">&quot;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">操作</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&lt;/</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">n-button</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">&gt;</span></span></code></pre></div><p>无权限时元素直接从 DOM 移除,而非仅隐藏。</p><div class="tip custom-block"><p class="custom-block-title">超级管理员</p><p>用户权限列表包含 <code>*:*:*</code> 时,表示超级管理员,拥有所有权限,<code>v-perm</code>/<code>v-perms</code> 指令始终放行。</p></div><h2 id="支撑模块" tabindex="-1">支撑模块 <a class="header-anchor" href="#支撑模块" aria-label="Permalink to &quot;支撑模块&quot;">​</a></h2><h3 id="Hooks-组合式函数-" tabindex="-1">Hooks(组合式函数) <a class="header-anchor" href="#Hooks-组合式函数-" aria-label="Permalink to &quot;Hooks(组合式函数)&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Hook</th><th>文件</th><th>说明</th></tr></thead><tbody><tr><td><code>usePermission</code></td><td><code>hooks/web/usePermission.ts</code></td><td>权限判断(hasPermission、hasSomePermission)</td></tr><tr><td><code>useMessage</code> / <code>useDialog</code></td><td><code>hooks/web/useMessage.ts</code>、<code>useDialog.ts</code></td><td>消息提示 / 确认弹窗(离散 API,可在非组件上下文调用)</td></tr><tr><td><code>useLoadingBar</code></td><td><code>hooks/web/useLoadingBar.ts</code></td><td>顶部加载条</td></tr><tr><td><code>useLockFn</code></td><td><code>utils/useLockFn.ts</code></td><td>请求级防重复提交</td></tr><tr><td><code>useForm</code></td><td><code>components/Form/src/hooks/useForm.ts</code></td><td>表单通用逻辑(注册、提交、重置、校验)</td></tr><tr><td>表格逻辑</td><td><code>components/Table/src/hooks/*</code></td><td>BasicTable 内部钩子(分页、数据源、搜索)</td></tr></tbody></table><h3 id="Directives-自定义指令-" tabindex="-1">Directives(自定义指令) <a class="header-anchor" href="#Directives-自定义指令-" aria-label="Permalink to &quot;Directives(自定义指令)&quot;">​</a></h3><table tabindex="0"><thead><tr><th>指令</th><th>说明</th></tr></thead><tbody><tr><td><code>v-perm</code></td><td>单权限控制</td></tr><tr><td><code>v-perms</code></td><td>多权限控制(满足任一)</td></tr></tbody></table><h3 id="Utils-工具函数-" tabindex="-1">Utils(工具函数) <a class="header-anchor" href="#Utils-工具函数-" aria-label="Permalink to &quot;Utils(工具函数)&quot;">​</a></h3><table tabindex="0"><thead><tr><th>工具</th><th>文件</th><th>说明</th></tr></thead><tbody><tr><td>HTTP</td><td><code>utils/http/axios/</code></td><td>Axios 封装</td></tr><tr><td>Storage</td><td><code>utils/Storage.ts</code></td><td>localStorage 封装</td></tr><tr><td>Dict</td><td><code>utils/dict.ts</code></td><td>字典工具(从 Store 获取字典值)</td></tr></tbody></table><h2 id="数据流向" tabindex="-1">数据流向 <a class="header-anchor" href="#数据流向" aria-label="Permalink to &quot;数据流向&quot;">​</a></h2><h3 id="完整请求链路" tabindex="-1">完整请求链路 <a class="header-anchor" href="#完整请求链路" aria-label="Permalink to &quot;完整请求链路&quot;">​</a></h3><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span>用户操作(点击搜索按钮)</span></span>
<span class="line"><span> │</span></span>
<span class="line"><span> ▼</span></span>
<span class="line"><span>View: fetchData()</span></span>
<span class="line"><span> │ 调用 API 函数</span></span>
<span class="line"><span> ▼</span></span>
<span class="line"><span>API: getExamplePage(params)</span></span>
<span class="line"><span> │ 调用 http.request()</span></span>
<span class="line"><span> ▼</span></span>
<span class="line"><span>HTTP: 请求拦截器添加 Token</span></span>
<span class="line"><span> │ 发送 GET /example/page?pageNo=1&amp;pageSize=20</span></span>
<span class="line"><span> ▼</span></span>
<span class="line"><span>后端: Controller → Logic → Model → Database</span></span>
<span class="line"><span> │</span></span>
<span class="line"><span> ▼</span></span>
<span class="line"><span>HTTP: 响应拦截器判断 code</span></span>
<span class="line"><span> │ code === 0 → 返回 data</span></span>
<span class="line"><span> ▼</span></span>
<span class="line"><span>API: 返回 data</span></span>
<span class="line"><span> │</span></span>
<span class="line"><span> ▼</span></span>
<span class="line"><span>View: tableData.value = res.records; total.value = res.total</span></span>
<span class="line"><span> │</span></span>
<span class="line"><span> ▼</span></span>
<span class="line"><span>Vue 响应式 → 表格自动刷新</span></span></code></pre></div><h3 id="Store-数据流" tabindex="-1">Store 数据流 <a class="header-anchor" href="#Store-数据流" aria-label="Permalink to &quot;Store 数据流&quot;">​</a></h3><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span>登录成功</span></span>
<span class="line"><span> │</span></span>
<span class="line"><span> ▼</span></span>
<span class="line"><span>userStore.setToken(token) → 响应式更新</span></span>
<span class="line"><span>userStore.setUserInfo(info) → 响应式更新</span></span>
<span class="line"><span>userStore.setPermissions(perm) → 响应式更新</span></span>
<span class="line"><span> │</span></span>
<span class="line"><span> ▼</span></span>
<span class="line"><span>其他组件通过 userStore.username / userStore.permissions 读取</span></span>
<span class="line"><span> │</span></span>
<span class="line"><span> ▼</span></span>
<span class="line"><span>v-perm 指令读取 permissions 列表 → 控制元素显隐</span></span></code></pre></div><h2 id="前后端对应关系" tabindex="-1">前后端对应关系 <a class="header-anchor" href="#前后端对应关系" aria-label="Permalink to &quot;前后端对应关系&quot;">​</a></h2><table tabindex="0"><thead><tr><th>后端</th><th>前端</th><th>说明</th></tr></thead><tbody><tr><td><code>app/controller/UserController.php</code></td><td><code>src/api/system/user.ts</code></td><td>API 函数映射</td></tr><tr><td><code>app/logic/UserLogic.php</code></td><td><code>src/views/system/user/</code></td><td>业务页面</td></tr><tr><td><code>app/model/User.php</code></td><td>—</td><td>前端不直接操作模型</td></tr><tr><td><code>app/validate/UserValidate.php</code></td><td>—</td><td>前端校验由表单组件处理</td></tr><tr><td><code>app/validate/*Validate.php</code> 的场景</td><td>表单 <code>rules</code></td><td>前端表单校验规则</td></tr><tr><td><code>route/app.php</code></td><td><code>src/api/**/*.ts</code></td><td>路由 ↔ API 函数</td></tr><tr><td>后端字典 <code>DictService</code></td><td><code>src/enums/</code> + 字典 Store</td><td>枚举常量</td></tr><tr><td>后端 <code>#[Permission]</code> 注解</td><td><code>v-perm</code> 指令</td><td>权限码对应</td></tr></tbody></table><h2 id="层间通信规范" tabindex="-1">层间通信规范 <a class="header-anchor" href="#层间通信规范" aria-label="Permalink to &quot;层间通信规范&quot;">​</a></h2><table tabindex="0"><thead><tr><th>调用方向</th><th>是否允许</th><th>说明</th></tr></thead><tbody><tr><td>View → API</td><td>✅</td><td>标准调用</td></tr><tr><td>View → Store</td><td>✅</td><td>读取/修改全局状态</td></tr><tr><td>View → Hooks</td><td>✅</td><td>复用逻辑</td></tr><tr><td>API → HTTP</td><td>✅</td><td>调用 http.request()</td></tr><tr><td>API → Store</td><td>❌</td><td>API 层不应操作状态</td></tr><tr><td>Store → API</td><td>✅</td><td>Store actions 中调用 API</td></tr><tr><td>HTTP → Store</td><td>⚠️</td><td>仅在拦截器中读取 Token</td></tr><tr><td>Hooks → API</td><td>✅</td><td>Hooks 中可调用 API</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-e6f2a212 data-v-1bcd8184><!--[--><!--]--><div class="edit-info" data-v-1bcd8184><div class="edit-link" data-v-1bcd8184><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp8_NaiveVue" target="_blank" rel="noreferrer" data-v-1bcd8184><!--[--><span class="vpi-square-pen edit-link-icon" data-v-1bcd8184></span> 对本页提出修改建议<!--]--></a></div><!----></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-1bcd8184><span class="visually-hidden" id="doc-footer-aria-label" data-v-1bcd8184>Pager</span><div class="pager" data-v-1bcd8184><a class="VPLink link pager-link prev" href="/zh/architecture/backend-layer.html" data-v-1bcd8184><!--[--><span class="desc" data-v-1bcd8184>上一页</span><span class="title" data-v-1bcd8184>4.3 后端分层架构</span><!--]--></a></div><div class="pager" data-v-1bcd8184><a class="VPLink link pager-link next" href="/zh/architecture/directory-design.html" data-v-1bcd8184><!--[--><span class="desc" data-v-1bcd8184>下一页</span><span class="title" data-v-1bcd8184>4.5 目录结构设计</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-d8b57b2d data-v-566314d4><div class="container" data-v-566314d4><p class="message" data-v-566314d4>小蚂蚁云团队 · 提供技术支持</p><p class="copyright" data-v-566314d4>Copyright © 2018~2026 www.rxthink.cn. All rights reserved.</p></div></footer><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"404.md\":\"DnXdkDqR\",\"index.md\":\"DwKmi-4G\",\"readme.md\":\"Dc96kdRW\",\"zh_api-spec_dict-api.md\":\"NUiuUSlq\",\"zh_api-spec_error-code.md\":\"CQ4T4ZFZ\",\"zh_api-spec_overview.md\":\"CK-OeLss\",\"zh_api-spec_pagination.md\":\"Bo7Ef76-\",\"zh_api-spec_response.md\":\"Bk-AaRct\",\"zh_api-spec_token.md\":\"jMkJ5xgQ\",\"zh_api-spec_upload.md\":\"ChSSxCN7\",\"zh_appendix_api-cheatsheet.md\":\"D87VO31-\",\"zh_appendix_components.md\":\"fyJ7jrzR\",\"zh_appendix_config-reference.md\":\"B6EqUS-b\",\"zh_appendix_database-tables.md\":\"DKTMWuOe\",\"zh_appendix_enums.md\":\"CkvyY7GT\",\"zh_appendix_faq.md\":\"COwfiwYP\",\"zh_appendix_functions.md\":\"CGQtr08x\",\"zh_appendix_glossary.md\":\"J0bEzd0I\",\"zh_appendix_middleware.md\":\"CmbJWEbW\",\"zh_appendix_stores.md\":\"Dh_hF39k\",\"zh_architecture_backend-layer.md\":\"BZ5R8HPk\",\"zh_architecture_base-classes.md\":\"uc2FGZ_j\",\"zh_architecture_cache.md\":\"BOw_8G_U\",\"zh_architecture_cross-cutting.md\":\"vc1kRYiE\",\"zh_architecture_database-design.md\":\"BzfgR92I\",\"zh_architecture_directory-design.md\":\"BM2YdUmT\",\"zh_architecture_extensibility.md\":\"QZ84R2i9\",\"zh_architecture_frontend-layer.md\":\"BTDgI7w-\",\"zh_architecture_overview.md\":\"BnaVTCi_\",\"zh_architecture_request-flow.md\":\"D0BsQMGR\",\"zh_architecture_security.md\":\"Iqt-Ebwd\",\"zh_changelog.md\":\"Drokr7z3\",\"zh_core_attributes.md\":\"DeNMX0Z4\",\"zh_core_auth-flow.md\":\"BThny9jG\",\"zh_core_captcha.md\":\"CUOr7Tra\",\"zh_core_config.md\":\"BaqCBguN\",\"zh_core_cors.md\":\"Dh5Ib53O\",\"zh_core_data-scope.md\":\"BOydYtLz\",\"zh_core_demo-mode.md\":\"CqKw8Jyv\",\"zh_core_dict-guide.md\":\"DvZUKnNa\",\"zh_core_dict.md\":\"CxbQP8i-\",\"zh_core_exception.md\":\"BUYcfedi\",\"zh_core_idempotent.md\":\"nD_czH0E\",\"zh_core_jwt.md\":\"D2TavJa5\",\"zh_core_login-log.md\":\"Dmm4xVWZ\",\"zh_core_operation-log.md\":\"DiMhJXDh\",\"zh_core_param.md\":\"BL-GPRt2\",\"zh_core_password.md\":\"WTfXkxK9\",\"zh_core_rbac.md\":\"DOL5F3cl\",\"zh_core_tenant.md\":\"CQg_N2UO\",\"zh_course.md\":\"Cph30bJQ\",\"zh_deploy_backend.md\":\"CU8XNhiE\",\"zh_deploy_backup.md\":\"Bf8X87lY\",\"zh_deploy_checklist.md\":\"BrBUbhj_\",\"zh_deploy_ci-cd.md\":\"BRWcT7CB\",\"zh_deploy_db-migrate.md\":\"Bt5W_64F\",\"zh_deploy_docker.md\":\"BOaY2fag\",\"zh_deploy_env-plan.md\":\"DRKpus9J\",\"zh_deploy_frontend.md\":\"BrGHU1F8\",\"zh_deploy_performance.md\":\"DRGl6LxH\",\"zh_deploy_security.md\":\"CJ8IPLiZ\",\"zh_deploy_troubleshooting.md\":\"BlTG-JyI\",\"zh_directory.md\":\"Qt8gqC8l\",\"zh_faq.md\":\"BYKIm3Ca\",\"zh_frontend_api-module.md\":\"CnTYnrH5\",\"zh_frontend_directory.md\":\"BUirGLbE\",\"zh_frontend_display-components.md\":\"C68WbxFR\",\"zh_frontend_env-config.md\":\"DzzZ83kk\",\"zh_frontend_excel-components.md\":\"CD_Qzpi8\",\"zh_frontend_form-components.md\":\"Bnvr8f9n\",\"zh_frontend_http.md\":\"BSE1Sv4o\",\"zh_frontend_i18n.md\":\"DUs0JKIN\",\"zh_frontend_layout.md\":\"Dh0nlAcl\",\"zh_frontend_login.md\":\"C_-duo1r\",\"zh_frontend_new-page.md\":\"DkxO_HHk\",\"zh_frontend_overview.md\":\"D9Xb2BBe\",\"zh_frontend_permission.md\":\"Cq5kb5Ze\",\"zh_frontend_router.md\":\"D8QFo_kK\",\"zh_frontend_store.md\":\"z9sk_Uwh\",\"zh_frontend_style.md\":\"ztz67v8q\",\"zh_frontend_utils.md\":\"DhHK_RMH\",\"zh_generator_cli.md\":\"Dwtxs8pc\",\"zh_generator_code-engine.md\":\"D1FCDohb\",\"zh_generator_config.md\":\"BmLwY9ZN\",\"zh_generator_demo.md\":\"Bl9RCUrJ\",\"zh_generator_faq.md\":\"Byk-CMbK\",\"zh_generator_overview.md\":\"YUs40sI_\",\"zh_generator_parser.md\":\"m1nglXOp\",\"zh_generator_templates.md\":\"CtSA1kb0\",\"zh_generator_web-ui.md\":\"C9039zMB\",\"zh_guide_code-list.md\":\"JJTI-waS\",\"zh_guide_controller.md\":\"B3mcOAa-\",\"zh_guide_database.md\":\"DjsE5XOJ\",\"zh_guide_faq.md\":\"CCrcIy_p\",\"zh_guide_frontend-integration.md\":\"B12Frb9q\",\"zh_guide_logic.md\":\"B_PfGiwh\",\"zh_guide_model.md\":\"DHkU7EAm\",\"zh_guide_overview.md\":\"C5OyGWBL\",\"zh_guide_permission.md\":\"bjP9Fqiv\",\"zh_guide_route.md\":\"UZ6FkdKT\",\"zh_guide_validator.md\":\"BkbaSS6W\",\"zh_introduction.md\":\"DMqVN1Wj\",\"zh_modules_article.md\":\"BXsydoGy\",\"zh_modules_category.md\":\"B5Gj7rN0\",\"zh_modules_city.md\":\"BhtDw6n8\",\"zh_modules_content.md\":\"BuvJMAXR\",\"zh_modules_dept.md\":\"CGqctAiD\",\"zh_modules_filetemplate.md\":\"kWi6iDKt\",\"zh_modules_index.md\":\"DvKrh8b3\",\"zh_modules_job.md\":\"CAG6vctw\",\"zh_modules_level.md\":\"DBxSBy0k\",\"zh_modules_menu.md\":\"DWuKGLC2\",\"zh_modules_param.md\":\"_zgPjMmj\",\"zh_modules_position.md\":\"B_57MtnP\",\"zh_modules_role.md\":\"CIbbOvQn\",\"zh_modules_tenant.md\":\"DqsIRMEg\",\"zh_modules_user.md\":\"oiyHINGQ\",\"zh_other_contributing.md\":\"jQgDHTkE\",\"zh_other_declare.md\":\"DcbcZmrU\",\"zh_other_sponsor.md\":\"ATS7Udz-\",\"zh_quickstart_backend-start.md\":\"gv0vih9k\",\"zh_quickstart_database-init.md\":\"D5I5-rMl\",\"zh_quickstart_docker.md\":\"CrDzzKL8\",\"zh_quickstart_env-vars.md\":\"C6Sd8A2w\",\"zh_quickstart_environment.md\":\"DjDv4deJ\",\"zh_quickstart_faq.md\":\"DpjVbUSP\",\"zh_quickstart_first-api.md\":\"C3sEiyn-\",\"zh_quickstart_frontend-start.md\":\"CQn1XT_x\",\"zh_standards_api-response.md\":\"Di-uTKI6\",\"zh_standards_backend-code.md\":\"d2uVUR0z\",\"zh_standards_code-review.md\":\"DjZ5o7Ff\",\"zh_standards_deletion.md\":\"QmZTglzc\",\"zh_standards_frontend-code.md\":\"BUh8hNLV\",\"zh_standards_git.md\":\"DmaSsCtY\",\"zh_standards_pagination.md\":\"C-ZXANxf\",\"zh_tech-stack.md\":\"ITO2y2Rd\",\"zh_tools_db-migrate.md\":\"CPk-22lX\",\"zh_tools_excel.md\":\"xC3i8gqs\",\"zh_tools_file-components.md\":\"BcyIWLMs\",\"zh_tools_rich-text.md\":\"Gjwkfhnl\",\"zh_tools_upload-config.md\":\"BAIrAcEW\",\"zh_tools_upload.md\":\"Bum_cMj_\",\"zh_why.md\":\"tZMPA-kP\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"小蚂蚁云\",\"titleTemplate\":\"RXThinkCMF 开发文档\",\"description\":\"A VitePress site\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":\"light\",\"themeConfig\":{\"logo\":\"/logo.svg\",\"outline\":[2,3],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp8_NaiveVue\"}],\"footer\":{\"copyright\":\"Copyright © 2018~2026 www.rxthink.cn. All rights reserved.\",\"message\":\"小蚂蚁云团队 · 提供技术支持\"},\"editLink\":{\"pattern\":\"https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp8_NaiveVue\",\"text\":\"对本页提出修改建议\"},\"search\":{\"provider\":\"local\"}},\"locales\":{\"root\":{\"label\":\"简体中文\",\"lang\":\"zh-CN\",\"link\":\"/\",\"description\":\"RXThinkCMF 企业级前后端分离后台管理系统 - ThinkPHP8 + Vue3 + NaiveUI\",\"head\":[[\"meta\",{\"property\":\"og:url\",\"content\":\"http://docs.thinkphp8.naivevue.rxthink.cn\"}],[\"meta\",{\"property\":\"og:description\",\"content\":\"RXThinkCMF 企业级前后端分离后台管理系统 - ThinkPHP8 + Vue3 + NaiveUI\"}],[\"meta\",{\"property\":\"twitter:url\",\"content\":\"http://docs.thinkphp8.naivevue.rxthink.cn\"}],[\"meta\",{\"property\":\"twitter:title\",\"content\":\"RXThinkCMF ThinkPHP8+NaiveUI 开发文档\"}],[\"meta\",{\"property\":\"twitter:description\",\"content\":\"RXThinkCMF 企业级前后端分离后台管理系统 - ThinkPHP8 + Vue3 + NaiveUI\"}],[\"script\",{},\"\\n var _hmt = _hmt || [];\\n (function() {\\n var hm = document.createElement(\\\"script\\\");\\n hm.src = \\\"https://hm.baidu.com/hm.js?0c49c7c3cd09fbcaaf60dc5e5c8ff6e7\\\";\\n var s = document.getElementsByTagName(\\\"script\\\")[0];\\n s.parentNode.insertBefore(hm, s);\\n })();\\n \"]],\"themeConfig\":{\"editLink\":{\"pattern\":\"https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp8_NaiveVue\",\"text\":\"对本页提出修改建议\"},\"outline\":{\"label\":\"本页内容\"},\"docFooter\":{\"prev\":\"上一页\",\"next\":\"下一页\"},\"nav\":[{\"text\":\"官网\",\"link\":\"https://www.rxthink.cn\"},{\"text\":\"授权\",\"link\":\"https://www.rxthink.cn/goods/detail/2\"},{\"text\":\"部署文档\",\"items\":[{\"text\":\"RXThinkCMF混编版ThinkPHP6+Layui版本\",\"link\":\"http://docs.thinkphp6.layui.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离ThinkPHP6+ElementPlus版本\",\"link\":\"http://docs.thinkphp6.elevue.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离ThinkPHP6+AntDesign版本\",\"link\":\"http://docs.thinkphp6.antdvue.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离ThinkPHP6+NaiveUI版本\",\"link\":\"http://docs.thinkphp6.naivevue.rxthink.cn\"},{\"text\":\"RXThinkCMF混编版ThinkPHP8+Layui版本\",\"link\":\"http://docs.thinkphp8.layui.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离ThinkPHP8+ElementPlus版本\",\"link\":\"http://docs.thinkphp8.elevue.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离ThinkPHP8+AntDesign版本\",\"link\":\"http://docs.thinkphp8.antdvue.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离ThinkPHP8+NaiveUI版本\",\"link\":\"http://docs.thinkphp8.naivevue.rxthink.cn\"},{\"text\":\"RXThinkCMF混编版Laravel13+Layui版本\",\"link\":\"http://docs.laravel13.layui.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离Laravel13+ElementPlus版本\",\"link\":\"http://docs.laravel13.elevue.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离Laravel13+AntDesign版本\",\"link\":\"http://docs.laravel13.antdvue.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离Laravel13+NaiveUI版本\",\"link\":\"http://docs.laravel13.naivevue.rxthink.cn\"}]},{\"text\":\"在线演示\",\"items\":[{\"text\":\"RXThinkCMF混编版ThinkPHP6+Layui版本\",\"link\":\"http://manage.thinkphp6.layui.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离ThinkPHP6+ElementPlus版本\",\"link\":\"http://manage.thinkphp6.elevue.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离ThinkPHP6+AntDesign版本\",\"link\":\"http://manage.thinkphp6.antdvue.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离ThinkPHP6+NaiveUI版本\",\"link\":\"http://manage.thinkphp6.naivevue.rxthink.cn\"},{\"text\":\"RXThinkCMF混编版ThinkPHP8+Layui版本\",\"link\":\"http://manage.thinkphp8.layui.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离ThinkPHP8+ElementPlus版本\",\"link\":\"http://manage.thinkphp8.elevue.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离ThinkPHP8+AntDesign版本\",\"link\":\"http://manage.thinkphp8.antdvue.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离ThinkPHP8+NaiveUI版本\",\"link\":\"http://manage.thinkphp8.naivevue.rxthink.cn\"},{\"text\":\"RXThinkCMF混编版Laravel13+Layui版本\",\"link\":\"http://manage.laravel13.layui.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离Laravel13+ElementPlus版本\",\"link\":\"http://manage.laravel13.elevue.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离Laravel13+AntDesign版本\",\"link\":\"http://manage.laravel13.antdvue.rxthink.cn\"},{\"text\":\"RXThinkCMF前后端分离Laravel13+NaiveUI版本\",\"link\":\"http://manage.laravel13.naivevue.rxthink.cn\"}]},{\"text\":\"广告赞助\",\"link\":\"/zh/other/sponsor.html\"},{\"text\":\"相关链接\",\"items\":[{\"text\":\"官方网站\",\"link\":\"https://www.rxthink.cn\"},{\"text\":\"Gitee 仓库\",\"link\":\"https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp8_NaiveVue\"},{\"text\":\"ThinkPHP 官网\",\"link\":\"https://www.thinkphp.cn/\"},{\"text\":\"Vue3 文档\",\"link\":\"https://cn.vuejs.org/\"},{\"text\":\"NaiveUI\",\"link\":\"https://www.naiveui.com/\"}]}],\"sidebar\":{\"/zh/\":[{\"text\":\"📖 1. 了解项目\",\"collapsed\":false,\"items\":[{\"text\":\"1.1 项目介绍\",\"link\":\"/zh/introduction.html\"},{\"text\":\"1.2 为什么选择我们\",\"link\":\"/zh/why.html\"},{\"text\":\"1.3 项目目录结构\",\"link\":\"/zh/directory.html\"},{\"text\":\"1.4 新手入门指南\",\"link\":\"/zh/course.html\"},{\"text\":\"1.5 技术栈说明\",\"link\":\"/zh/tech-stack.html\"},{\"text\":\"1.6 更新日志\",\"link\":\"/zh/changelog.html\"}]},{\"text\":\"🚀 2. 快速入门\",\"collapsed\":false,\"items\":[{\"text\":\"2.1 开发环境准备\",\"link\":\"/zh/quickstart/environment.html\"},{\"text\":\"2.2 后端服务启动\",\"link\":\"/zh/quickstart/backend-start.html\"},{\"text\":\"2.3 前端服务启动\",\"link\":\"/zh/quickstart/frontend-start.html\"},{\"text\":\"2.4 数据库初始化\",\"link\":\"/zh/quickstart/database-init.html\"},{\"text\":\"2.5 环境变量配置\",\"link\":\"/zh/quickstart/env-vars.html\"},{\"text\":\"2.6 第一个接口调试\",\"link\":\"/zh/quickstart/first-api.html\"},{\"text\":\"2.7 Docker 快速体验\",\"link\":\"/zh/quickstart/docker.html\"},{\"text\":\"2.8 常见问题 FAQ\",\"link\":\"/zh/quickstart/faq.html\"}]},{\"text\":\"🧪 3. 模块开发实战\",\"collapsed\":false,\"items\":[{\"text\":\"3.1 概述与目标\",\"link\":\"/zh/guide/overview.html\"},{\"text\":\"3.2 数据库建表\",\"link\":\"/zh/guide/database.html\"},{\"text\":\"3.3 模型层开发\",\"link\":\"/zh/guide/model.html\"},{\"text\":\"3.4 验证器开发\",\"link\":\"/zh/guide/validator.html\"},{\"text\":\"3.5 逻辑层开发\",\"link\":\"/zh/guide/logic.html\"},{\"text\":\"3.6 控制器开发\",\"link\":\"/zh/guide/controller.html\"},{\"text\":\"3.7 路由注册\",\"link\":\"/zh/guide/route.html\"},{\"text\":\"3.8 权限节点配置\",\"link\":\"/zh/guide/permission.html\"},{\"text\":\"3.9 前端联调指引\",\"link\":\"/zh/guide/frontend-integration.html\"},{\"text\":\"3.10 完整代码清单\",\"link\":\"/zh/guide/code-list.html\"},{\"text\":\"3.11 常见问题与排错\",\"link\":\"/zh/guide/faq.html\"}]},{\"text\":\"🏛️ 4. 架构设计\",\"collapsed\":false,\"items\":[{\"text\":\"4.1 整体架构概览\",\"link\":\"/zh/architecture/overview.html\"},{\"text\":\"4.2 请求处理链路\",\"link\":\"/zh/architecture/request-flow.html\"},{\"text\":\"4.3 后端分层架构\",\"link\":\"/zh/architecture/backend-layer.html\"},{\"text\":\"4.4 前端分层架构\",\"link\":\"/zh/architecture/frontend-layer.html\"},{\"text\":\"4.5 目录结构设计\",\"link\":\"/zh/architecture/directory-design.html\"},{\"text\":\"4.6 核心基类体系\",\"link\":\"/zh/architecture/base-classes.html\"},{\"text\":\"4.7 横切机制\",\"link\":\"/zh/architecture/cross-cutting.html\"},{\"text\":\"4.8 缓存架构设计\",\"link\":\"/zh/architecture/cache.html\"},{\"text\":\"4.9 数据库设计\",\"link\":\"/zh/architecture/database-design.html\"},{\"text\":\"4.10 安全架构设计\",\"link\":\"/zh/architecture/security.html\"},{\"text\":\"4.11 扩展性设计\",\"link\":\"/zh/architecture/extensibility.html\"}]},{\"text\":\"🔐 5. 核心功能\",\"collapsed\":false,\"items\":[{\"text\":\"认证与安全\",\"collapsed\":false,\"items\":[{\"text\":\"5.1 用户认证(JWT)\",\"link\":\"/zh/core/jwt.html\"},{\"text\":\"5.2 认证流程实战\",\"link\":\"/zh/core/auth-flow.html\"},{\"text\":\"5.3 验证码机制\",\"link\":\"/zh/core/captcha.html\"},{\"text\":\"5.4 权限管理(RBAC)\",\"link\":\"/zh/core/rbac.html\"},{\"text\":\"5.5 跨域资源共享\",\"link\":\"/zh/core/cors.html\"},{\"text\":\"5.6 密码加密服务\",\"link\":\"/zh/core/password.html\"},{\"text\":\"5.7 演示模式\",\"link\":\"/zh/core/demo-mode.html\"}]},{\"text\":\"数据与配置\",\"collapsed\":false,\"items\":[{\"text\":\"5.8 多租户隔离\",\"link\":\"/zh/core/tenant.html\"},{\"text\":\"5.9 数据权限\",\"link\":\"/zh/core/data-scope.html\"},{\"text\":\"5.10 字典模块\",\"link\":\"/zh/core/dict.html\"},{\"text\":\"5.11 字典配置与使用\",\"link\":\"/zh/core/dict-guide.html\"},{\"text\":\"5.12 系统配置管理\",\"link\":\"/zh/core/config.html\"},{\"text\":\"5.13 系统参数管理\",\"link\":\"/zh/core/param.html\"}]},{\"text\":\"日志与监控\",\"collapsed\":false,\"items\":[{\"text\":\"5.14 操作日志\",\"link\":\"/zh/core/operation-log.html\"},{\"text\":\"5.15 登录日志\",\"link\":\"/zh/core/login-log.html\"},{\"text\":\"5.16 异常与响应处理\",\"link\":\"/zh/core/exception.html\"}]},{\"text\":\"防护与治理\",\"collapsed\":false,\"items\":[{\"text\":\"5.17 防重复提交\",\"link\":\"/zh/core/idempotent.html\"}]},{\"text\":\"注解系统\",\"collapsed\":false,\"items\":[{\"text\":\"5.18 注解系统总览\",\"link\":\"/zh/core/attributes.html\"}]}]},{\"text\":\"📦 6. 业务模块\",\"collapsed\":false,\"items\":[{\"text\":\"6.1 用户管理\",\"link\":\"/zh/modules/user.html\"},{\"text\":\"6.2 角色管理\",\"link\":\"/zh/modules/role.html\"},{\"text\":\"6.3 菜单管理\",\"link\":\"/zh/modules/menu.html\"},{\"text\":\"6.4 部门管理\",\"link\":\"/zh/modules/dept.html\"},{\"text\":\"6.5 职级管理\",\"link\":\"/zh/modules/level.html\"},{\"text\":\"6.6 岗位管理\",\"link\":\"/zh/modules/position.html\"},{\"text\":\"6.7 文章管理\",\"link\":\"/zh/modules/article.html\"},{\"text\":\"6.8 公告与链接管理\",\"link\":\"/zh/modules/content.html\"},{\"text\":\"6.9 行政区划管理\",\"link\":\"/zh/modules/city.html\"},{\"text\":\"6.10 分类管理\",\"link\":\"/zh/modules/category.html\"},{\"text\":\"6.11 定时任务\",\"link\":\"/zh/modules/job.html\"},{\"text\":\"6.12 参数管理\",\"link\":\"/zh/modules/param.html\"},{\"text\":\"6.13 租户管理\",\"link\":\"/zh/modules/tenant.html\"},{\"text\":\"6.14 文件模板管理\",\"link\":\"/zh/modules/filetemplate.html\"},{\"text\":\"6.15 首页与个人中心\",\"link\":\"/zh/modules/index.html\"}]},{\"text\":\"🧰 7. 文件处理\",\"collapsed\":false,\"items\":[{\"text\":\"7.1 文件上传全流程\",\"link\":\"/zh/tools/upload.html\"},{\"text\":\"7.2 上传配置详解\",\"link\":\"/zh/tools/upload-config.html\"},{\"text\":\"7.3 富文本处理\",\"link\":\"/zh/tools/rich-text.html\"},{\"text\":\"7.4 数据导入导出\",\"link\":\"/zh/tools/excel.html\"},{\"text\":\"7.5 前端文件组件\",\"link\":\"/zh/tools/file-components.html\"},{\"text\":\"7.6 数据库迁移工具\",\"link\":\"/zh/tools/db-migrate.html\"}]},{\"text\":\"🔗 8. 接口规范与对接\",\"collapsed\":false,\"items\":[{\"text\":\"8.1 统一响应格式\",\"link\":\"/zh/api-spec/response.html\"},{\"text\":\"8.2 错误码对照表\",\"link\":\"/zh/api-spec/error-code.html\"},{\"text\":\"8.3 分页查询规范\",\"link\":\"/zh/api-spec/pagination.html\"},{\"text\":\"8.4 文件上传接口\",\"link\":\"/zh/api-spec/upload.html\"},{\"text\":\"8.5 字典数据接口\",\"link\":\"/zh/api-spec/dict-api.html\"},{\"text\":\"8.6 Token 使用说明\",\"link\":\"/zh/api-spec/token.html\"},{\"text\":\"8.7 API 接口总览\",\"link\":\"/zh/api-spec/overview.html\"}]},{\"text\":\"🖥️ 9. 前端开发\",\"collapsed\":false,\"items\":[{\"text\":\"工程基础\",\"collapsed\":false,\"items\":[{\"text\":\"9.1 前端工程概述\",\"link\":\"/zh/frontend/overview.html\"},{\"text\":\"9.2 目录结构详解\",\"link\":\"/zh/frontend/directory.html\"},{\"text\":\"9.3 环境与构建配置\",\"link\":\"/zh/frontend/env-config.html\"}]},{\"text\":\"核心机制\",\"collapsed\":false,\"items\":[{\"text\":\"9.4 HTTP 请求封装\",\"link\":\"/zh/frontend/http.html\"},{\"text\":\"9.5 路由与动态菜单\",\"link\":\"/zh/frontend/router.html\"},{\"text\":\"9.6 状态管理(Pinia)\",\"link\":\"/zh/frontend/store.html\"},{\"text\":\"9.7 权限控制\",\"link\":\"/zh/frontend/permission.html\"},{\"text\":\"9.8 登录流程\",\"link\":\"/zh/frontend/login.html\"}]},{\"text\":\"公共组件\",\"collapsed\":false,\"items\":[{\"text\":\"9.9 数据展示组件\",\"link\":\"/zh/frontend/display-components.html\"},{\"text\":\"9.10 数据录入组件\",\"link\":\"/zh/frontend/form-components.html\"},{\"text\":\"9.11 Excel 导入导出组件\",\"link\":\"/zh/frontend/excel-components.html\"}]},{\"text\":\"开发实践\",\"collapsed\":false,\"items\":[{\"text\":\"9.12 新增页面开发步骤\",\"link\":\"/zh/frontend/new-page.html\"},{\"text\":\"9.13 API 模块编写规范\",\"link\":\"/zh/frontend/api-module.html\"},{\"text\":\"9.14 样式与主题定制\",\"link\":\"/zh/frontend/style.html\"},{\"text\":\"9.15 布局系统\",\"link\":\"/zh/frontend/layout.html\"},{\"text\":\"9.16 工具函数\",\"link\":\"/zh/frontend/utils.html\"},{\"text\":\"9.17 国际化(i18n)\",\"link\":\"/zh/frontend/i18n.html\"}]}]},{\"text\":\"🔧 10. 代码生成器\",\"collapsed\":false,\"items\":[{\"text\":\"10.1 概述与架构\",\"link\":\"/zh/generator/overview.html\"},{\"text\":\"10.2 CLI 命令行使用\",\"link\":\"/zh/generator/cli.html\"},{\"text\":\"10.3 Web 管理界面\",\"link\":\"/zh/generator/web-ui.html\"},{\"text\":\"10.4 表结构解析引擎\",\"link\":\"/zh/generator/parser.html\"},{\"text\":\"10.5 代码生成引擎\",\"link\":\"/zh/generator/code-engine.html\"},{\"text\":\"10.6 自定义模板开发\",\"link\":\"/zh/generator/templates.html\"},{\"text\":\"10.7 配置文件详解\",\"link\":\"/zh/generator/config.html\"},{\"text\":\"10.8 实战案例\",\"link\":\"/zh/generator/demo.html\"},{\"text\":\"10.9 常见问题\",\"link\":\"/zh/generator/faq.html\"}]},{\"text\":\"⚙️ 11. 运维部署\",\"collapsed\":false,\"items\":[{\"text\":\"11.1 部署 Checklist\",\"link\":\"/zh/deploy/checklist.html\"},{\"text\":\"11.2 环境规划\",\"link\":\"/zh/deploy/env-plan.html\"},{\"text\":\"11.3 数据库迁移\",\"link\":\"/zh/deploy/db-migrate.html\"},{\"text\":\"11.4 后端部署\",\"link\":\"/zh/deploy/backend.html\"},{\"text\":\"11.5 前端部署\",\"link\":\"/zh/deploy/frontend.html\"},{\"text\":\"11.6 Docker 生产部署\",\"link\":\"/zh/deploy/docker.html\"},{\"text\":\"11.7 性能调优\",\"link\":\"/zh/deploy/performance.html\"},{\"text\":\"11.8 安全加固清单\",\"link\":\"/zh/deploy/security.html\"},{\"text\":\"11.9 备份与恢复\",\"link\":\"/zh/deploy/backup.html\"},{\"text\":\"11.10 故障排查手册\",\"link\":\"/zh/deploy/troubleshooting.html\"},{\"text\":\"11.11 CI/CD 流水线\",\"link\":\"/zh/deploy/ci-cd.html\"}]},{\"text\":\"📋 12. 规范标准\",\"collapsed\":false,\"items\":[{\"text\":\"⭐ 必须遵守\",\"collapsed\":false,\"items\":[{\"text\":\"12.1 API 响应规范\",\"link\":\"/zh/standards/api-response.html\"},{\"text\":\"12.2 分页查询规范\",\"link\":\"/zh/standards/pagination.html\"},{\"text\":\"12.3 Git 提交规范\",\"link\":\"/zh/standards/git.html\"}]},{\"text\":\"📌 建议遵守\",\"collapsed\":false,\"items\":[{\"text\":\"12.4 数据删除规范\",\"link\":\"/zh/standards/deletion.html\"},{\"text\":\"12.5 代码审查清单\",\"link\":\"/zh/standards/code-review.html\"},{\"text\":\"12.6 后端编码规范\",\"link\":\"/zh/standards/backend-code.html\"},{\"text\":\"12.7 前端编码规范\",\"link\":\"/zh/standards/frontend-code.html\"}]}]},{\"text\":\"📄 附录\",\"collapsed\":false,\"items\":[{\"text\":\"A. 常见问题汇总\",\"link\":\"/zh/appendix/faq.html\"},{\"text\":\"B. 数据库表结构速查\",\"link\":\"/zh/appendix/database-tables.html\"},{\"text\":\"C. 配置项速查\",\"link\":\"/zh/appendix/config-reference.html\"},{\"text\":\"D. 公共函数速查\",\"link\":\"/zh/appendix/functions.html\"},{\"text\":\"E. API 接口速查表\",\"link\":\"/zh/appendix/api-cheatsheet.html\"},{\"text\":\"F. 中间件执行顺序\",\"link\":\"/zh/appendix/middleware.html\"},{\"text\":\"G. 前端组件速查\",\"link\":\"/zh/appendix/components.html\"},{\"text\":\"H. 前端 Store 速查\",\"link\":\"/zh/appendix/stores.html\"},{\"text\":\"I. 前端 Enums 速查\",\"link\":\"/zh/appendix/enums.html\"},{\"text\":\"J. 术语表\",\"link\":\"/zh/appendix/glossary.html\"},{\"text\":\"K. 贡献指南\",\"link\":\"/zh/other/contributing.html\"},{\"text\":\"L. 免责声明\",\"link\":\"/zh/other/declare.html\"},{\"text\":\"M. 广告赞助\",\"link\":\"/zh/other/sponsor.html\"},{\"text\":\"N. 开源协议\",\"link\":\"https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp8_NaiveVue\"}]}]}}}},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>