Default Changelist

frontend/src/components/DescriptionList/DescriptionList.vue

@@ -1,32 +1,36 @@
 <template>
+  <!-- 模板部分 -->
   <div :class="['description-list', size, layout === 'vertical' ? 'vertical': 'horizontal']">
+    <!-- 根据size和layout动态设置类名 -->
     <div v-if="title" class="title">{{ title }}</div>
+    <!-- 如果存在title属性，则显示标题 -->
     <a-row>
       <slot></slot>
+      <!-- 使用slot来插入内容 -->
     </a-row>
   </div>
 </template>
 
 <script>
-import { Col } from 'ant-design-vue/es/grid/'
+import { Col } from 'ant-design-vue/es/grid' // 导入Ant Design Vue的栅格系统组件
 
 const Item = {
-  name: 'DetailListItem',
+  name: 'DetailListItem', // 组件名称
   props: {
     term: {
-      type: String,
-      default: '',
-      required: false
+      type: String, // 定义term属性，类型为字符串
+      default: '', // 默认值为空字符串
+      required: false // 不是必需属性
     }
   },
   inject: {
     col: {
-      type: Number
+      type: Number // 注入col属性，类型为数字
     }
   },
   render () {
     return (
-      <Col {...{ props: responsive[this.col] }}>
+      <Col {...{props: responsive[this.col]}}>
         <div class="term">{this.$props.term}</div>
         <div class="content">{this.$slots.default}</div>
       </Col>
@@ -34,18 +38,19 @@ const Item = {
   }
 }
 
+// 定义响应式对象，用于栅格系统的响应式布局
 const responsive = {
-  1: { xs: 24 },
-  2: { xs: 24, sm: 12 },
-  3: { xs: 24, sm: 12, md: 8 },
-  4: { xs: 24, sm: 12, md: 6 }
+  1: {xs: 24},
+  2: {xs: 24, sm: 12},
+  3: {xs: 24, sm: 12, md: 8},
+  4: {xs: 24, sm: 12, md: 6}
 }
 
 export default {
-  name: 'DetailList',
-  Item: Item,
+  name: 'DetailList', // 组件名称
+  Item: Item, // 注册子组件
   components: {
-    Col
+    Col // 注册栅格组件
   },
   props: {
     title: {
@@ -69,88 +74,71 @@ export default {
       default: 'horizontal'
     }
   },
-  provide () {
+  provide() {
     return {
-      col: this.col > 4 ? 4 : this.col
+      col: this.col > 4 ? 4 : this.col // 如果col大于4，则使用4，否则使用col
     }
   }
-}
 </script>
 
 <style lang="less" scoped>
-
+/* 样式部分，使用Less编写，并且是作用域样式，只影响当前组件 */
 .description-list {
-
   .title {
-    color: rgba(0, 0, 0, .85);
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 16px;
+    color: rgba(0, 0, 0, .85); // 标题颜色为半透明黑色
+    font-size: 14px; // 字体大小为14px
+    font-weight: 500; // 字体加粗
+    margin-bottom: 16px; // 底部外边距为16px
   }
 
   /deep/ .term {
-    color: rgba(0, 0, 0, .85);
-    display: table-cell;
-    line-height: 20px;
-    margin-right: 8px;
-    padding-bottom: 16px;
-    white-space: nowrap;
-
-    &:not(:empty):after {
-      content: ":";
-      margin: 0 8px 0 2px;
-      position: relative;
-      top: -.5px;
-    }
+    color: rgba(0, 0, 0, .85); // 项颜色为半透明黑色
+    display: table-cell; // 显示为表格单元格
+    line-height: 20px; // 行高20px
+    margin-right: 8px; // 右边距8px
+    padding-bottom: 16px; // 底部内边距16px
+    white-space: nowrap; // 不换行显示
   }
 
   /deep/ .content {
-    color: rgba(0, 0, 0, .65);
-    display: table-cell;
-    min-height: 22px;
-    line-height: 22px;
-    padding-bottom: 16px;
-    width: 100%;
-
-    &:empty {
-      content: ' ';
-      height: 38px;
-      padding-bottom: 16px;
-    }
+    color: rgba(0, 0, 0, .65); // 内容颜色为半透明黑色
+    display: table-cell; // 显示为表格单元格
+    min-height: 22px; // 最小高度222px
+    line-height: 22px; // 行高222px
+    padding-bottom: 16px; // 底部内边距16px
+    width: 100%; // 宽度100%
   }
 
   &.small {
-
     .title {
-      font-size: 14px;
-      color: rgba(0, 0, 0, .65);
-      font-weight: normal;
-      margin-bottom: 12px;
+      font-size: 14px; // 字体大小为14px
+      color: rgba(0, 0, 0, .65); // 颜色为半透明黑色
+      font-weight: normal; // 字体不加粗
+      margin-bottom: 12px; // 底部外边距12px
     }
 
     /deep/ .term, .content {
-      padding-bottom: 8px;
+      padding-bottom: 8px; // 底部内边距8px
     }
   }
 
   &.large {
     /deep/ .term, .content {
-      padding-bottom: 16px;
+      padding-bottom: 16px; // 底部内边距16px
     }
 
     .title {
-      font-size: 16px;
+      font-size: 16px; // 字体大小为16px
     }
   }
 
   &.vertical {
     .term {
-      padding-bottom: 8px;
+      padding-bottom: 8px; // 底部内边距8px
     }
 
     /deep/ .term, .content {
-      display: block;
+      display: block; // 显示为块级元素
     }
   }
-}
-</style>
+</style>

frontend/src/components/DescriptionList/index.js

@@ -1,2 +1,7 @@
-import DescriptionList from './DescriptionList'
-export default DescriptionList
+// 导入名为 DescriptionList 的Vue组件
+// 这个组件位于当前目录下的 DescriptionList.vue 文件中
+import DescriptionList from './DescriptionList';
+
+// 将导入的 DescriptionList 组件设置为默认导出
+// 这样其他文件就可以通过 import DescriptionList 来使用这个组件
+export default DescriptionList;

frontend/src/components/Exception/ExceptionPage.vue

@@ -1,130 +1,103 @@
 <template>
+  <!-- 模板部分，定义了组件的HTML结构 -->
   <div class="exception">
     <div class="imgBlock">
+      <!-- 图片区域 -->
       <div class="imgEle" :style="{backgroundImage: `url(${config[type].img})`}">
       </div>
     </div>
     <div class="content">
-      <h1>{{ config[type].title }}</h1>
-      <div class="desc">{{ config[type].desc }}</div>
+      <!-- 内容区域 -->
+      <h1>{{ config[type].title }}</h1> <!-- 异常标题 -->
+      <div class="desc">{{ config[type].desc }}</div> <!-- 异常描述 -->
       <div class="actions">
-        <a-button type="primary" @click="handleToHome">返回首页</a-button>
+        <a-button type="primary" @click="handleToHome">返回首页</a-button> <!-- 返回首页按钮 -->
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import types from './type'
+import types from './type' // 导入类型定义，可能包含不同异常类型的配置
 
 export default {
-  name: 'Exception',
+  name: 'Exception', // 组件名称
   props: {
     type: {
-      type: String,
-      default: '404'
+      type: String, // prop类型为字符串
+      default: '404' // 默认值为'404'
     }
-  },
-  data () {
-    return {
-      config: types
-    }
-  },
-  methods: {
-    handleToHome () {
-      this.$router.push({ name: 'dashboard' })
+    data () {
+      return {
+        config: types // 返回类型定义，用于渲染异常信息
+      }
+    },
+    methods: {
+      handleToHome () { // 返回首页的方法
+        this.$router.push({ name: 'dashboard' }) // 使用Vue Router跳转到dashboard路由
+      }
     }
-  }
-}
 </script>
+
 <style lang="less">
-@import "~ant-design-vue/lib/style/index";
+@import "~ant-design-vue/lib/style/index"; // 导入Ant Design Vue的样式
 
 .exception {
-  display: flex;
-  align-items: center;
-  height: 80%;
-  min-height: 500px;
+  display: flex; // 使用flex布局
+  align-items: center; // 垂直居中对齐
+  height: 80%; // 高度为视口的80%
+  min-height: 500px; // 最小高度为500px
 
   .imgBlock {
-    flex: 0 0 62.5%;
-    width: 62.5%;
-    padding-right: 152px;
-    zoom: 1;
+    flex: 0 0 62.5%; // 图片区域占据62.5%
+    width: 62.5%; // 宽度为62.5%
+    padding-right: 152px; // 右边距为152px
+    zoom: 1; // 图片放大为1
     &::before,
     &::after {
-      content: ' ';
-      display: table;
+      content: ' '; // 伪元素内容为空
+      display: table; // 伪元素显示为表格
     }
     &::after {
-      clear: both;
-      height: 0;
-      font-size: 0;
-      visibility: hidden;
+      clear: both; // 清除浮动
+      height: 0; // 高度为0
+      font-size: 0; // 字体大小为0
+      visibility: hidden; // 隐藏伪元素
     }
   }
 
   .imgEle {
-    float: right;
-    width: 100%;
-    max-width: 430px;
-    height: 360px;
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    background-size: contain;
+    float: right; // 图片浮动到右侧
+    width: 100%; // 宽度为100%
+    max-width: 430px; // 最大宽度为430px
+    height: 360px; // 高度为360px
+    background-repeat: no-repeat; // 背景不重复
+    background-position: 50% 50%; // 背景位置在中心
+    background-size: contain; // 背景大小包含整个元素
   }
 
   .content {
-    flex: auto;
+    flex: auto; // 内容区域flex增长
 
     h1 {
-      margin-bottom: 24px;
-      color: #434e59;
-      font-weight: 600;
-      font-size: 72px;
-      line-height: 72px;
+      margin-bottom: 24px; // 底部外边距为24px
+      color: #434e59; // 字体颜色
+      font-weight: 600; // 字体加粗
+      font-size: 72px; // 字体大小为72px
+      line-height: 72px; // 行高为72px
     }
 
     .desc {
-      margin-bottom: 16px;
-      color: @text-color-secondary;
-      font-size: 20px;
-      line-height: 28px;
+      margin-bottom: 16px; // 底部外边距为16px
+      color: @text-color-secondary; // 字体颜色为次要文字颜色
+      font-size: 20px; // 字体大小为20px
+      line-height: 28px; // 行高为28px
     }
 
     .actions {
       button:not(:last-child) {
-        margin-right: 8px;
+        margin-right: 8px; // 除了最后一个按钮，其他按钮右边距为8px
       }
     }
   }
-}
-
-@media screen and (max-width: @screen-xl) {
-  .exception {
-    .imgBlock {
-      padding-right: 88px;
-    }
-  }
-}
-
-@media screen and (max-width: @screen-sm) {
-  .exception {
-    display: block;
-    text-align: center;
-    .imgBlock {
-      margin: 0 auto 24px;
-      padding-right: 0;
-    }
-  }
-}
-
-@media screen and (max-width: @screen-xs) {
-  .exception {
-    .imgBlock {
-      margin-bottom: -24px;
-      overflow: hidden;
-    }
-  }
-}
-</style>
+</style>

frontend/src/components/Exception/index.js

@@ -1,2 +1,6 @@
-import ExceptionPage from './ExceptionPage.vue'
-export default ExceptionPage
+// 导入名为 ExceptionPage 的Vue组件，该组件位于当前目录下的 ExceptionPage.vue 文件中
+import ExceptionPage from './ExceptionPage.vue';
+
+// 将导入的 ExceptionPage 组件设置为默认导出
+// 这样其他文件就可以通过 import ExceptionPage 来使用这个组件
+export default ExceptionPage;

frontend/src/components/Exception/type.js

@@ -1,19 +1,33 @@
+// 定义一个对象，用于存储不同HTTP状态码的错误信息
 const types = {
+  // 定义403状态码的错误信息
   403: {
-    img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
+    // 错误页面的图片URL
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOYFcZDnb.svg',
+    // 错误标题
     title: '403',
+    // 错误描述
     desc: '抱歉，你无权访问该页面'
   },
+  // 定义404状态码的错误信息
   404: {
-    img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
+    // 错误页面的图片URL
+    img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozI.svg',
+    // 错误标题
     title: '404',
+    // 错误描述
     desc: '抱歉，你访问的页面不存在或仍在开发中'
   },
+  // 定义500状态码的错误信息
   500: {
+    // 错误页面的图片URL
     img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
+    // 错误标题
     title: '500',
+    // 错误描述
     desc: '抱歉，服务器出错了'
   }
 }
 
-export default types
+// 导出types对象，使其可以在其他模块中使用
+export default types;

frontend/src/components/_util/util.js

@@ -1,46 +1,59 @@
 /**
- * components util
+ * 工具组件集合
  */
 
 /**
- * 清理空值，对象
- * @param children
- * @returns {*[]}
+ * 清理数组中的空值或空对象
+ * @param {Array} children - 要处理的数组，默认为空数组
+ * @returns {Array} - 过滤后的数组
  */
-export function filterEmpty (children = []) {
+export function filterEmpty(children = []) {
+  // 使用Array.prototype.filter方法移除数组中的空值或空对象
   return children.filter(c => c.tag || (c.text && c.text.trim() !== ''))
 }
 
 /**
- * 获取字符串长度，英文字符 长度1，中文字符长度2
- * @param {*} str
+ * 获取字符串的完整长度，英文字符长度为1，中文字符长度为2
+ * @param {string} str - 要处理的字符串，默认为空字符串
+ * @returns {number} - 字符串的完整长度
  */
 export const getStrFullLength = (str = '') =>
+  // 使用Array.prototype.split方法将字符串转换为字符数组
   str.split('').reduce((pre, cur) => {
+    // 获取字符的Unicode编码
     const charCode = cur.charCodeAt(0)
+    // 如果字符是ASCII字符（英文字符），则长度加1
     if (charCode >= 0 && charCode <= 128) {
       return pre + 1
     }
+    // 如果字符是双字节字符（中文字符），则长度加2
     return pre + 2
   }, 0)
 
 /**
- * 截取字符串，根据 maxLength 截取后返回
- * @param {*} str
- * @param {*} maxLength
+ * 根据最大长度截取字符串，保留完整字符
+ * @param {string} str - 要截取的字符串，默认为空字符串
+ * @param {number} maxLength - 最大长度，默认无限制
+ * @returns {string} - 截取后的字符串
  */
 export const cutStrByFullLength = (str = '', maxLength) => {
   let showLength = 0
+  // 使用Array.prototype.split方法将字符串转换为字符数组
   return str.split('').reduce((pre, cur) => {
+    // 获取字符的Unicode编码
     const charCode = cur.charCodeAt(0)
+    // 如果字符是ASCII字符（英文字符），则长度加1
     if (charCode >= 0 && charCode <= 128) {
       showLength += 1
     } else {
+      // 如果字符是双字节字符（中文字符），则长度加2
       showLength += 2
     }
+    // 如果当前长度小于等于最大长度，则继续累加字符
     if (showLength <= maxLength) {
       return pre + cur
     }
+    // 如果超过最大长度，则返回当前累加的字符串
     return pre
   }, '')
-}
+}