docs: 优化文档和注释中的单词大小写和语义

src/App.vue

@@ -2,8 +2,8 @@
 import { useAppStore } from "@/store/modules/app"
 import zhCn from "element-plus/lib/locale/lang/zh-cn"
 
-useAppStore().initTheme() // 初始化 theme
-const locale = zhCn // element-plus 设置为中文
+useAppStore().initTheme() // 初始化主题
+const locale = zhCn // 将 Element-Plus 的语言设置为中文
 </script>
 
 <template>

src/config/layout.ts

@@ -1,16 +1,16 @@
 /** 布局配置 */
 interface ILayoutSettings {
-  /** 控制 settings panel 显示 */
+  /** 是否显示 Settings Panel */
   showSettings: boolean
-  /** 控制 tagsview 显示 */
+  /** 是否显示标签栏 */
   showTagsView: boolean
-  /** 控制 siderbar logo 显示 */
+  /** 是否显示侧边栏 Logo */
   showSidebarLogo: boolean
-  /** 如果为真，将固定 header */
+  /** 是否固定 Header */
   fixedHeader: boolean
-  /** 控制 换肤按钮 显示 */
+  /** 是否显示切换主题按钮 */
   showThemeSwitch: boolean
-  /** 控制 全屏按钮 显示 */
+  /** 是否显示全屏按钮 */
   showScreenfull: boolean
 }
 

src/directives/permission/index.ts

@@ -15,7 +15,7 @@ export const permission: Directive = {
         el.style.display = "none"
       }
     } else {
-      throw new Error("need roles! Like v-permission=\"['admin','editor']\"")
+      throw new Error(`need roles! Like v-permission="['admin','editor']"`)
     }
   }
 }

src/icons/index.ts

@@ -1,5 +1,5 @@
 import { createApp } from "vue"
-import SvgIcon from "@/components/SvgIcon/index.vue" // svg component
+import SvgIcon from "@/components/SvgIcon/index.vue" // Svg Component
 import "virtual:svg-icons-register"
 
 export default (app: ReturnType<typeof createApp>) => {

src/layout/components/Settings/index.vue

@@ -64,7 +64,7 @@ watch(
     <div>
       <h3 class="drawer-title">系统布局配置</h3>
       <div class="drawer-item">
-        <span>显示 Tags-View</span>
+        <span>显示标签栏</span>
         <el-switch v-model="state.showTagsView" class="drawer-switch" />
       </div>
       <div class="drawer-item">
@@ -76,7 +76,7 @@ watch(
         <el-switch v-model="state.fixedHeader" class="drawer-switch" />
       </div>
       <div class="drawer-item">
-        <span>显示换肤按钮</span>
+        <span>显示切换主题按钮</span>
         <el-switch v-model="state.showThemeSwitch" class="drawer-switch" />
       </div>
       <div class="drawer-item">

src/layout/components/Sidebar/index.vue

@@ -64,7 +64,7 @@ const isCollapse = computed(() => {
 
 <style lang="scss">
 .sidebar-container {
-  // 重置当前页面的 element-plus css, ，注意，虽然没有加 scoped 标识，但是被该页面的 sidebar-container 类名包裹，所以不会影响其他页面
+  // 重置当前页面的 Element-Plus CSS, ，注意，虽然没有加 scoped 标识，但是被该页面的 sidebar-container 类名包裹，所以不会影响其他页面
   .horizontal-collapse-transition {
     transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
   }

src/layout/components/TagsView/index.vue

@@ -20,7 +20,7 @@ const toLastView = (visitedViews: ITagView[], view: ITagView) => {
       console.warn(err)
     })
   } else {
-    // 如果没有 tags-view，请默认重定向到主页，如果你需要，可以自行调整它
+    // 如果没有 TagsView，请默认重定向到主页，如果你需要，可以自行调整它
     if (view.name === "Dashboard") {
       // 重新加载主页
       router.push({ path: "/redirect" + view.fullPath }).catch((err) => {

src/layout/useResize.ts

@@ -2,7 +2,7 @@ import { computed, watch } from "vue"
 import { useRoute } from "vue-router"
 import { useAppStore, DeviceType } from "@/store/modules/app"
 
-/** 参考 Bootstrap 的响应式设计 width = 992 */
+/** 参考 Bootstrap 的响应式设计 WIDTH = 992 */
 const WIDTH = 992
 
 /** 根据大小变化重新布局 */

src/main.ts

@@ -14,9 +14,9 @@ import "element-plus/theme-chalk/dark/css-vars.css"
 import "@/styles/index.scss"
 
 const app = createApp(App)
-/** element-plus 组件完整引入 */
+/** Element-Plus 组件完整引入 */
 app.use(ElementPlus)
-/** 加载全局 svg */
+/** 加载全局 SVG */
 loadSvg(app)
 /** 自定义指令 */
 Object.keys(directives).forEach((key) => {

src/router/index.ts

@@ -135,8 +135,8 @@ export const constantRoutes: Array<RouteRecordRaw> = [
 
 /**
  * 动态路由
- * 用来放置有权限（roles 属性）的路由
- * 必须带有 name 属性
+ * 用来放置有权限 (Roles 属性) 的路由
+ * 必须带有 Name 属性
  */
 export const asyncRoutes: Array<RouteRecordRaw> = [
   {
@@ -208,7 +208,7 @@ const router = createRouter({
 
 /** 重置路由 */
 export function resetRouter() {
-  // 注意：所有动态路由路由必须带有 name 属性，否则可能会不能完全重置干净
+  // 注意：所有动态路由路由必须带有 Name 属性，否则可能会不能完全重置干净
   try {
     router.getRoutes().forEach((route) => {
       const { name, meta } = route

src/router/permission.ts

@@ -18,7 +18,7 @@ router.beforeEach(async (to: RouteLocationNormalized, _: RouteLocationNormalized
   // 判断该用户是否登录
   if (getToken()) {
     if (to.path === "/login") {
-      // 如果登录，并准备进入 login 页面，则重定向到主页
+      // 如果登录，并准备进入 Login 页面，则重定向到主页
       next({ path: "/" })
       NProgress.done()
     } else {
@@ -29,14 +29,14 @@ router.beforeEach(async (to: RouteLocationNormalized, _: RouteLocationNormalized
             // 注意：角色必须是一个数组！ 例如: ['admin'] 或 ['developer', 'editor']
             await userStore.getInfo()
             const roles = userStore.roles
-            // 根据角色生成可访问的 routes（可访问路由 = 常驻路由 + 有访问权限的动态路由）
+            // 根据角色生成可访问的 Routes（可访问路由 = 常驻路由 + 有访问权限的动态路由）
             permissionStore.setRoutes(roles)
           } else {
             // 没有开启动态路由功能，则启用默认角色
             userStore.setRoles(asyncRouteSettings.defaultRoles)
             permissionStore.setRoutes(asyncRouteSettings.defaultRoles)
           }
-          // 将'有访问权限的动态路由' 添加到 router 中
+          // 将'有访问权限的动态路由' 添加到 Router 中
           permissionStore.dynamicRoutes.forEach((route) => {
             router.addRoute(route)
           })
@@ -44,7 +44,7 @@ router.beforeEach(async (to: RouteLocationNormalized, _: RouteLocationNormalized
           // 设置 replace: true, 因此导航将不会留下历史记录
           next({ ...to, replace: true })
         } catch (err: any) {
-          // 过程中发生任何错误，都直接重置 token，并重定向到登录页面
+          // 过程中发生任何错误，都直接重置 Token，并重定向到登录页面
           userStore.resetToken()
           ElMessage.error(err.message || "路由守卫过程发生错误")
           next("/login")
@@ -55,7 +55,7 @@ router.beforeEach(async (to: RouteLocationNormalized, _: RouteLocationNormalized
       }
     }
   } else {
-    // 如果没有 token
+    // 如果没有 Token
     if (whiteList.indexOf(to.path) !== -1) {
       // 如果在免登录的白名单中，则直接进入
       next()

src/store/modules/app.ts

@@ -55,7 +55,7 @@ export const useAppStore = defineStore({
       this.activeThemeName = this.themeList.find((theme) => theme.name === activeThemeName)
         ? activeThemeName
         : this.themeList[0].name
-      // 应用到 dom
+      // 应用到 Dom
       document.documentElement.className = this.activeThemeName
       // 持久化
       setActiveThemeName(this.activeThemeName)

src/store/modules/user.ts

@@ -74,7 +74,7 @@ export const useUserStore = defineStore({
       this.roles = []
       resetRouter()
     },
-    /** 重置 token */
+    /** 重置 Token */
     resetToken() {
       removeToken()
       this.token = ""

src/styles/index.scss

@@ -1,6 +1,6 @@
-// 全局 css 变量
+// 全局 CSS 变量
 @import "variables.css";
-// transition
+// Transition
 @import "./transition.scss";
 // 注册主题
 @import "./theme/register.scss";

src/styles/theme/theme.scss

@@ -42,7 +42,7 @@
       }
     }
 
-    // tags-view
+    // TagsView
     .tags-view-container {
       background-color: $theme-bg-color !important;
       border-bottom: 1px solid lighten($theme-bg-color, 10%) !important;
@@ -73,7 +73,7 @@
     }
   }
 
-  /** app-main 主要写 view 页面的黑暗样式 */
+  /** AppMain 主要写 View 页面的黑暗样式 */
 
   .app-main {
     // 指令权限页面 /permission/directive
@@ -82,7 +82,7 @@
     }
   }
 
-  /** login 页面 */
+  /** Login 页面 */
 
   .login-container {
     background-color: $theme-bg-color;
@@ -92,7 +92,7 @@
     }
   }
 
-  /** element-plus */
+  /** Element-Plus */
 
   // 侧边栏的 item 的 popper
   .el-popper {

src/styles/variables.css

@@ -1,4 +1,4 @@
-/** 全局 css 变量，这种变量不仅可以在 css 和 scss 中使用，还可以导入到 js 中使用 */
+/** 全局 CSS 变量，这种变量不仅可以在 CSS 和 SCSS 中使用，还可以导入到 JS 中使用 */
 
 :root {
   /** 全局背景色 */

src/utils/cookies.ts

@@ -1,4 +1,4 @@
-/** cookies 封装 */
+/** 统一处理 Cookie */
 
 import Keys from "@/constant/key"
 import Cookies from "js-cookie"

src/utils/index.ts

@@ -9,7 +9,7 @@ export const formatDateTime = (time: any) => {
   return dayjs(date).format("YYYY-MM-DD HH:mm:ss")
 }
 
-/** 将全局 css 导入 js 中使用 */
+/** 将全局 CSS 导入 JS 中使用 */
 export const getCssVariableValue = (cssVariableName: string) => {
   let cssVariableValue = ""
   try {

src/utils/service.ts

@@ -6,7 +6,7 @@ import { getToken } from "@/utils/cookies"
 
 /** 创建请求实例 */
 function createService() {
-  // 创建一个 axios 实例
+  // 创建一个 Axios 实例
   const service = axios.create()
   // 请求拦截
   service.interceptors.request.use(
@@ -17,11 +17,11 @@ function createService() {
   // 响应拦截（可根据具体业务作出相应的调整）
   service.interceptors.response.use(
     (response) => {
-      // apiData 是 api 返回的数据
+      // apiData 是 API 返回的数据
       const apiData = response.data as any
-      // 这个 code 是和后端约定的业务 code
+      // 这个 Code 是和后端约定的业务 Code
       const code = apiData.code
-      // 如果没有 code, 代表这不是项目后端开发的 api
+      // 如果没有 Code, 代表这不是项目后端开发的 API
       if (code === undefined) {
         ElMessage.error("非本系统的接口")
         return Promise.reject(new Error("非本系统的接口"))
@@ -34,14 +34,14 @@ function createService() {
             // code === 20000 代表没有错误
             return apiData
           default:
-            // 不是正确的 code
+            // 不是正确的 Code
             ElMessage.error(apiData.msg || "Error")
             return Promise.reject(new Error("Error"))
         }
       }
     },
     (error) => {
-      // status 是 HTTP 状态码
+      // Status 是 HTTP 状态码
       const status = get(error, "response.status")
       switch (status) {
         case 400:
@@ -51,7 +51,7 @@ function createService() {
           error.message = "未授权，请登录"
           break
         case 403:
-          // token 过期时，直接退出登录并强制刷新页面（会重定向到登录页）
+          // Token 过期时，直接退出登录并强制刷新页面（会重定向到登录页）
           useUserStoreHook().logout()
           location.reload()
           break
@@ -94,7 +94,7 @@ function createRequestFunction(service: AxiosInstance) {
   return function (config: AxiosRequestConfig) {
     const configDefault = {
       headers: {
-        // 携带 token
+        // 携带 Token
         "X-Access-Token": getToken(),
         "Content-Type": get(config, "headers.Content-Type", "application/json")
       },

src/views/login/index.vue

@@ -18,7 +18,7 @@ const router = useRouter()
 const loginFormDom = ref<any>()
 
 const state = reactive({
-  /** 登录按钮 loading */
+  /** 登录按钮 Loading */
   loading: false,
   /** 验证码图片 URL */
   codeUrl: "",

src/views/permission/directive.vue

@@ -45,7 +45,7 @@ const state = reactive({
     </div>
     <div :key="'checkPermission' + state.key" style="margin-top: 60px">
       <el-tag type="info" size="large">
-        在某些情况下，不适合使用 v-permission。例如：element-plus 的 el-tab 或 el-table-column 以及其它动态渲染 dom
+        在某些情况下，不适合使用 v-permission。例如: Element-Plus 的 el-tab 或 el-table-column 以及其它动态渲染 dom
         的场景。你只能通过手动设置 v-if 来实现。
       </el-tag>
       <el-tabs type="border-card" style="width: 550px; margin-top: 60px">
@@ -53,12 +53,10 @@ const state = reactive({
           admin 可以看见这个
           <el-tag class="permission-sourceCode" type="info"> v-if="checkPermission(['admin'])" </el-tag>
         </el-tab-pane>
-
         <el-tab-pane v-if="checkPermission(['editor'])" label="editor">
           editor 可以看见这个
           <el-tag class="permission-sourceCode" type="info"> v-if="checkPermission(['editor'])" </el-tag>
         </el-tab-pane>
-
         <el-tab-pane v-if="checkPermission(['admin', 'editor'])" label="admin 和 editor">
           两者 admin 和 editor 都可以看见这个
           <el-tag class="permission-sourceCode" type="info"> v-if="checkPermission(['admin', 'editor'])" </el-tag>