296 lines
181 KiB
HTML
296 lines
181 KiB
HTML
<!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 "4.4 前端分层架构""></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 "架构全景""></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 "各层职责详解""></a></h2><h3 id="View-层-视图-" tabindex="-1">View 层(视图) <a class="header-anchor" href="#View-层-视图-" aria-label="Permalink to "View 层(视图)""></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;"><</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">template</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:#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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">false</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">pt-3 mb-3 proCard</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">></span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> <!-- 搜索区(BasicForm 驱动) --></span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> <</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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">registerForm</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">handleSubmit</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">handleReset</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</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:#F286C4;--shiki-light:#1E754F;">n-card</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> <</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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">false</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">proCard</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">></span></span>
|
||
<span class="line"><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> <!-- 操作栏 + 数据表格(BasicTable 驱动,分页内置) --></span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> <</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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">columns</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">loadDataTable</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">(row) => row.id</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">basicTableRef</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">actionColumn</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</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 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;">></span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"> <</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">n-space</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:#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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">'sys:example:add'</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">primary</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">handleAdd</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">></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;"> </</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">n-button</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:#F286C4;--shiki-light:#1E754F;">n-space</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:#F286C4;--shiki-light:#1E754F;">template</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:#F286C4;--shiki-light:#1E754F;">BasicTable</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:#F286C4;--shiki-light:#1E754F;">n-card</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:#F286C4;--shiki-light:#1E754F;">template</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"><</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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">ts</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</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;"> 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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">vue</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">naive-ui</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">@/components/Table</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">@/components/Form</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">@/api/tool/example</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">name</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">名称</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">NInput</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">ID</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">id</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">名称</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">name</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">状态</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">statusText</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">操作</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">action</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">编辑</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">warning</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;">=></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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">sys:example:update</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">删除</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">error</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;">=></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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">sys:example:delete</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> =></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;"></</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">script</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">></span></span></code></pre></div><h3 id="API-层-接口-" tabindex="-1">API 层(接口) <a class="header-anchor" href="#API-层-接口-" aria-label="Permalink to "API 层(接口)""></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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">@/utils/http/axios</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/user/page</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">GET</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/user/detail/</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">GET</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/user/add</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">POST</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/user/update</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">PUT</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/user/delete/</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">DELETE</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">/user/batchDelete</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">DELETE</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</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 "HTTP 层(请求)""></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 <token> │</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 "Store 层(状态)""></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 "路由与动态菜单""></a></h2><h3 id="路由架构" tabindex="-1">路由架构 <a class="header-anchor" href="#路由架构" aria-label="Permalink to "路由架构""></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 "动态路由生成流程""></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 "布局系统""></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 "权限控制""></a></h2><h3 id="按钮级权限指令" tabindex="-1">按钮级权限指令 <a class="header-anchor" href="#按钮级权限指令" aria-label="Permalink to "按钮级权限指令""></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;"><!-- v-perm:单权限 --></span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"><</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;">"</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">sys:user:add</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#DEE492;--shiki-light:#999999;">"</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;">"</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">primary</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">"</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">></span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">新增</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"></</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">n-button</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;"><!-- v-perms:多权限(满足任一即可) --></span></span>
|
||
<span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"><</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;">"</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">[</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">sys:user:add</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">,</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;"> '</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">sys:user:update</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">]</span><span style="--shiki-dark:#DEE492;--shiki-light:#999999;">"</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">></span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">操作</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"></</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">n-button</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">></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 "支撑模块""></a></h2><h3 id="Hooks-组合式函数-" tabindex="-1">Hooks(组合式函数) <a class="header-anchor" href="#Hooks-组合式函数-" aria-label="Permalink to "Hooks(组合式函数)""></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 "Directives(自定义指令)""></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 "Utils(工具函数)""></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 "数据流向""></a></h2><h3 id="完整请求链路" tabindex="-1">完整请求链路 <a class="header-anchor" href="#完整请求链路" aria-label="Permalink to "完整请求链路""></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&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 "Store 数据流""></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 "前后端对应关系""></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 "层间通信规范""></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> |