'admin-21.02.26:添加代码注释、优化主题样式、添加form手机适配样式'

src/router/index.ts

@@ -507,7 +507,7 @@ export function setBackEndControlRoutesFun(res: any) {
     setAddRoute() // 添加动态路由
     setFilterMenu() // 过滤权限菜单
     setCacheTagsViewRoutes() // 添加 keepAlive 缓存
-    window.location.href = window.location.href
+    window.location.href = window.location.href // 防止页面刷新时，出现空白或404
 }
 
 // 后端控制路由，后端路由 component 转换

src/theme/element.scss

@@ -570,40 +570,40 @@
 ------------------------------- */
 // success
 .el-alert--success.is-light {
-  @include Alert(success, success-light-9, success-light-8);
+  @include Alert(success, success-light-9, success-light-7);
 }
 .el-alert--success.is-dark {
-  @include Alert(whites, success, success-light-8);
+  @include Alert(whites, success, success-light-7);
 }
 .el-alert--success.is-light .el-alert__description {
   color: set-color(success);
 }
 // warning
 .el-alert--warning.is-light {
-  @include Alert(warning, warning-light-9, warning-light-8);
+  @include Alert(warning, warning-light-9, warning-light-7);
 }
 .el-alert--warning.is-dark {
-  @include Alert(whites, warning, warning-light-8);
+  @include Alert(whites, warning, warning-light-7);
 }
 .el-alert--warning.is-light .el-alert__description {
   color: set-color(warning);
 }
 // info
 .el-alert--info.is-light {
-  @include Alert(info, info-light-9, info-light-8);
+  @include Alert(info, info-light-9, info-light-7);
 }
 .el-alert--info.is-dark {
-  @include Alert(whites, info, info-light-8);
+  @include Alert(whites, info, info-light-7);
 }
 .el-alert--info.is-light .el-alert__description {
   color: set-color(info);
 }
 // error
 .el-alert--error.is-light {
-  @include Alert(danger, danger-light-9, danger-light-8);
+  @include Alert(danger, danger-light-9, danger-light-7);
 }
 .el-alert--error.is-dark {
-  @include Alert(whites, danger, danger-light-8);
+  @include Alert(whites, danger, danger-light-7);
 }
 .el-alert--error.is-light .el-alert__description {
   color: set-color(danger);

src/theme/media/form.scss

@@ -0,0 +1,13 @@
+@import './index.scss';
+
+/* 页面宽度小于576px
+------------------------------- */
+@media screen and (max-width: $xs) {
+  .el-form-item__label {
+    width: 100% !important;
+    text-align: left !important;
+  }
+  .el-form-item__content {
+    margin-left: 0 !important;
+  }
+}

src/theme/media/media.scss

@@ -5,3 +5,4 @@
 @import './tagsView.scss';
 @import './home.scss';
 @import './chart.scss';
+@import './form.scss';

src/utils/themeConfig.ts

@@ -1,43 +1,105 @@
 // 布局配置
 export default {
+    // 是否开启布局配置抽屉
     isDrawer: false,
+
+    /* 全局主题
+    ------------------------------- */
+    // 默认 primary 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
     primary: "#409eff",
+    // 默认 success 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
     success: "#67c23a",
+    // 默认 info 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
     info: "#909399",
+    // 默认 warning 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
     warning: "#e6a23c",
+    // 默认 danger 颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
     danger: "#f56c6c",
+
+    /* 菜单 / 顶栏
+    ------------------------------- */
+    // 默认顶栏导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
     topBar: "#ffffff",
+    // 默认菜单导航背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
     menuBar: "#545c64",
+    // 默认分栏菜单背景颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
     columnsMenuBar: '#545c64',
+    // 默认顶栏导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
     topBarColor: "#606266",
+    // 默认菜单导航字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
     menuBarColor: "#eaeaea",
+    // 默认分栏菜单字体颜色，请注意：需要同时修改 `/@/theme/common/var.scss` 对应的值
     columnsMenuBarColor: '#e6e6e6',
+    // 是否开启顶栏背景颜色渐变
     isTopBarColorGradual: false,
+    // 是否开启菜单背景颜色渐变
     isMenuBarColorGradual: false,
+    // 是否开启菜单字体背景高亮
     isMenuBarColorHighlight: false,
+    // 是否开启菜单字体背景高亮
+
+    /* 界面设置
+    ------------------------------- */
+    // 是否开启菜单水平折叠效果
     isCollapse: false,
+    // 是否开启菜单手风琴效果
     isUniqueOpened: false,
+    // 是否开启固定 Header
     isFixedHeader: false,
+    // 初始化变量，用于更新菜单 el-scrollbar 的高度，请勿删除
     isFixedHeaderChange: false,
+    // 是否开启经典布局分割菜单（仅经典布局生效）
     isClassicSplitMenu: false,
+    // 是否开启自动锁屏
     isLockScreen: false,
+    // 开启自动锁屏倒计时(s/秒)
     lockScreenTime: 30,
+
+    /* 界面显示
+    ------------------------------- */
+    // 是否开启侧边栏 Logo
     isShowLogo: false,
+    // 初始化变量，用于 el-scrollbar 的高度更新，请勿删除
     isShowLogoChange: false,
+    // 是否开启 Breadcrumb
     isBreadcrumb: true,
+    // 是否开启 Tagsview
     isTagsview: true,
+    // 是否开启 Breadcrumb 图标
     isBreadcrumbIcon: false,
+    // 是否开启 Tagsview 图标 
     isTagsviewIcon: false,
+    // 是否开启 TagsView 缓存
     isCacheTagsView: false,
+    // 是否开启 TagsView 拖拽
     isSortableTagsView: true,
+    // 是否开启 Footer 底部版权信息
     isFooter: false,
+    // 是否开启灰色模式
     isGrayscale: false,
+    // 是否开启色弱模式
     isInvert: false,
+    // 是否开启水印
     isWartermark: false,
+    // 水印文案
     wartermarkText: 'small@小柒',
+
+    /* 其它设置
+    ------------------------------- */
+    // 默认 Tagsview 风格，可选 1、 tagsStyleOne 2、 tagsStyleTwo 3、 tagsStyleThree 4、 tagsStyleFour
     tagsStyle: 'tagsStyleOne',
+    // 默认主页面切换动画，可选 1、 slideRight 2、 slideLeft 3、 opacitys
     animation: 'slideRight',
+    // 默认分栏高亮风格，可选 1、 圆角 columnsRound 2、 卡片 columnsCard
     columnsAsideStyle: 'columnsRound',
+
+    /* 布局切换
+    ------------------------------- */
+    // 默认布局，可选 1、默认 defaults 2、经典 classic 3、横向 transverse 4、分栏 columns
     layout: 'defaults',
+
+    /* 后端控制路由
+    ------------------------------- */
+    // 是否开启后端控制路由
     isRequestRoutes: false
 }

src/utils/toolsValidate.js

@@ -1,6 +1,7 @@
 /**
  * 2020.11.29 lyt 整理
  * 工具类集合，适用于平时开发
+ * 后期改成 xx.ts
  */
 
 // 小数或整数(不可以负数)

src/views/limits/backEnd/page/index.vue

@@ -1,20 +1,26 @@
 <template>
   <div>
-    limitsBackEndEndPage
+    <el-alert title="温馨提示：1、此页面无法模拟后端控制路由，因为 `gitee` 上所请求的 `json` 菜单数据线上会出现跨域的情况（json地址：
-    <el-input v-model="val"></el-input>
+      https://gitee.com/lyt-top/vue-admin-wonderful-images/raw/master/next/menu/testMenu.json）。2、本地接口请求文件位置：`/src/api/menu/index.ts`。
+      3、拉取代码后本地请求查看后端控制页面路由效果：`/src/utils/themeConfig.ts`中开启（isRequestRoutes 为 true，则开启后端控制路由）。
+      4、此页面效果只作为演示使用，若出现不可逆转的bug，请尝试 `F5` 刷新页面。5、默认启用的是 `前端控制路由`。" type="warning" :closable="false"></el-alert>
+    <el-button type="primary" size="small" class="mt15" icon="el-icon-position" @click="onGoToFrontEndPage">立即前往前端控制路由
+    </el-button>
   </div>
 </template>
 
 <script lang="ts">
-import { toRefs, reactive } from "vue";
+import { useRouter } from "vue-router";
 export default {
   name: "limitsBackEndEndPage",
   setup() {
-    const state = reactive({
+    const router = useRouter();
-      val: "",
+    // 立即前往前端控制路由
-    });
+    const onGoToFrontEndPage = () => {
+      router.push("/limits/frontEnd/page");
+    };
     return {
-      ...toRefs(state),
+      onGoToFrontEndPage,
     };
   },
 };