diff --git a/nezha-fronted/src/assets/css/common/tableCommon.scss b/nezha-fronted/src/assets/css/common/tableCommon.scss
index 4c98131e7..11930d3fd 100644
--- a/nezha-fronted/src/assets/css/common/tableCommon.scss
+++ b/nezha-fronted/src/assets/css/common/tableCommon.scss
@@ -411,7 +411,7 @@
     margin-right: 20px;
     height: 22px;
     margin-top: 8px;
-    border: 1px solid $--click-search-items-border-color;
+    border: 1px solid $--explore-border-color-bottom;
     background: $--background-color-empty;
 
     .el-cascader {
@@ -461,7 +461,7 @@
     }
   }
   .nz-label-search:hover {
-    border-color: #C7C7C7;
+    border-color: $--explore-border-color-bottom;
   }
 }
 .click-search-dropdown {
diff --git a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
index cb1b713f1..007c8b3bf 100644
--- a/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/bottomBox/bottomBox.scss
@@ -33,7 +33,8 @@
   }
   &>.nz-table2 {
     height: 100%;
-    padding-top: 20px !important;
+    padding: 20px 20px 10px 20px !important;
+    box-sizing: border-box;
     .table-list {
       background-color: $--background-color-empty;
       .list-width {
@@ -44,6 +45,9 @@
       }
     }
   }
+  &>.bottom-panel{
+    padding: 15px 10px 10px 10px !important;
+  }
 }
 .sub-top-tools .top-tool-btn-txt .nz-icon{
   display: inline-block;
@@ -141,9 +145,7 @@
 }
 
 .bottom-panel {
-  padding-top: 15px;
   background-color: $--background-color-empty;
-  padding-bottom: 10px;
   height: calc(100% - 30px);
 }
 .bottom-log {
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index 6c1213999..5a5e0f403 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -72,6 +72,7 @@ import logsData from '@/components/chart/logsData'
 import lodash from 'lodash'
 
 export default {
+  // 该组件用于获取chart的具体数据
   name: 'panelChart',
   components: {
     chartHeader,
@@ -79,44 +80,44 @@ export default {
     ChartScreenHeader
   },
   props: {
-    chartInfo: Object, // 其中的param json串已转化为对象
+    chartInfo: Object, // 其中的param json串已转化为对象  // 当前chart的具体信息
     timeRange: Array, // 时间范围
-    isFullscreen: Boolean,
-    panelLock: Boolean,
+    isFullscreen: Boolean, // 是否全屏
+    panelLock: Boolean, // 是否被锁定
     chartDetailInfo: Object,
-    from: String,
+    from: String, // 使用该组件的位置
     filter: {},
-    showHeader: {
+    showHeader: { // 是否显示header
       type: Boolean,
       default: true
     },
-    isExportHtml: {
+    isExportHtml: { // 是否是导出的html
       type: Boolean,
       default: false
     },
-    dataJson: {
+    dataJson: { // 导出的html的数据
       type: Object
     }
   },
   data () {
     return {
-      chartData: [],
+      chartData: [], // 当前chart的数据
       loading: true,
       isError: false,
-      multipleTime: false,
-      minusTime: '',
-      showAllData: false,
+      multipleTime: false, // 是否开启对比
+      minusTime: '', // 是否开启对比相差的时间
+      showAllData: false, // 是否显示所有legend
       allDataLength: 0,
-      severityData: this.$store.getters.severityData,
+      severityData: this.$store.getters.severityData, // 告警级别的数据
       severityDataWeight: this.$store.getters.severityDataWeight
       // isExportData: false
     }
   },
   computed: {
-    headerH () {
+    headerH () { // 50px header所包含的高
       return this.$store.getters.getHeaderH
     },
-    headerHPadding () {
+    headerHPadding () { // 50px header + padding 主要用于展开的空group
       return this.$store.getters.getHeaderHPadding
     }
   },
@@ -142,7 +143,7 @@ export default {
       this.chartInfo.loaded && this.query(elements, startTime, endTime, step)
     },
     // 参数 isRefresh 标识是否是刷新操作
-    getChartData (isRefresh, params) {
+    getChartData (isRefresh, params) { // 获取chart的数据前的准备 主要用于处理时间参数
       this.loading = true
       // TODO assetInfo、endpointInfo、echarts等进行不同的处理
       let startTime = ''
@@ -172,7 +173,7 @@ export default {
       }
       this.chartInfo.loaded && this.query(elements, startTime, endTime, step, params)
     },
-    query (elements, startTime, endTime, step, params) {
+    query (elements, startTime, endTime, step, params) { // 获取chart的数据
       this.isError = false
       this.allDataLength = 0
       // this.chartData = this.chartInfo.chartData
@@ -419,7 +420,7 @@ export default {
         this.loading = false
       }
     },
-    queryData (elements, startTime, endTime, step, params) {
+    queryData (elements, startTime, endTime, step, params) { // 获取chart的数据主要用于导出的html
       this.isError = false
       this.allDataLength = 0
       // this.chartData = this.chartInfo.chartData
diff --git a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
index 9eabb34e6..294847c5c 100644
--- a/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
+++ b/nezha-fronted/src/components/common/bottomBox/nzBottomDataList.vue
@@ -99,8 +99,8 @@ export default {
     subContentClass () {
       const className = []
       switch (this.targetTab) {
-        case 'panel':
-          className.push('bottom-panel')
+        case 'panelTab':
+          className.push('nz-table2 bottom-panel')
           break
         case 'log': {
           className.push('bottom-log')
diff --git a/nezha-fronted/src/entrance/app/App.vue b/nezha-fronted/src/entrance/app/App.vue
index 13caa42e9..9949d28d3 100644
--- a/nezha-fronted/src/entrance/app/App.vue
+++ b/nezha-fronted/src/entrance/app/App.vue
@@ -22,7 +22,7 @@ export default {
     }
     const Timestamp = new Date().getTime()
     const url = 'static/config.json?Timestamp=' + Timestamp
-    const result = await this.$http.get(url)
+    const result = await this.$http.get(url) // 获取本地的config.json 判断是否需要清空localStorage 以及设备的宽 和 axios的baseUrl
     this.$axios.defaults.baseURL = result.body.baseUrl
     const version = result.body.version
     const defaultWindowWidth = result.body.width || 1024
diff --git a/nezha-fronted/src/entrance/app/main.js b/nezha-fronted/src/entrance/app/main.js
index dc67b7271..00653f23a 100644
--- a/nezha-fronted/src/entrance/app/main.js
+++ b/nezha-fronted/src/entrance/app/main.js
@@ -50,14 +50,14 @@ Vue.use(vSelectPage, {
     })
   }
 })
-Vue.use(myDatePicker)
-Vue.component('Pagination', Pagination)
-Vue.component('searchInput', searchInput)
-Vue.component('element-set', elementSet)
-Vue.component('loading', loading)
-Vue.component('pick-time', pickTime)
+Vue.use(myDatePicker) // 对element-ui的时间组件进行二次重构
+Vue.component('Pagination', Pagination) // 公用分页组件
+Vue.component('searchInput', searchInput) // 公用搜索组件
+Vue.component('element-set', elementSet) // 公用设置表头
+Vue.component('loading', loading)// 公用loading 除特殊情况使用 正常使用自定义指令 v-my-loading
+Vue.component('pick-time', pickTime)// 时间组件 包含刷新 单位 同步等
 Vue.component('myDatePicker', myDatePicker)
-Vue.component('nzDataList', nzDataList)
+Vue.component('nzDataList', nzDataList) // 公用表格父组件
 Vue.component('chartList', chartList)
 
 Vue.prototype.$axios = axios
@@ -65,11 +65,11 @@ Vue.prototype.$post = post
 Vue.prototype.$get = get
 Vue.prototype.$put = put
 Vue.prototype.$delete = del
-Vue.prototype.$loadsh = loadsh
+Vue.prototype.$loadsh = loadsh // JavaScript 实用工具库  https://www.lodashjs.com/
 Vue.prototype.$CONSTANTS = constants
 Vue.prototype.$TOOLS = tools
 Vue.prototype.$bottomBoxWindow = bottomBoxWindow // 底部上滑框控制
-Vue.prototype.$stringTimeParseToUnix = stringTimeParseToUnix
+Vue.prototype.$stringTimeParseToUnix = stringTimeParseToUnix // 处理string类型的时间为时间戳 单位s
 Vue.prototype.$unixTimeParseToString = unixTimeParseToString
 Vue.prototype.$chartResizeTool = chartResizeTool
 Vue.prototype.$tableSet = tableSet
@@ -101,13 +101,13 @@ Vue.mixin({
     }
   },
   computed: {
-    timeFormatMain () {
+    timeFormatMain () { // 所有组件添加默认时间格式
       return this.$store.getters.getTimeFormatMain
     },
-    getMenuList () {
+    getMenuList () { // 所有的菜单权限
       return this.$store.state.user.menuList
     },
-    getButtonList () {
+    getButtonList () { // 所有的按钮权限
       return this.$store.state.buttonList
     },
     $routePath () {
@@ -115,7 +115,7 @@ Vue.mixin({
     }
   },
   methods: {
-    hasButton (code) {
+    hasButton (code) { // 同v-has 主要判断button的权限
       return hasButton(this.$store.getters.buttonList, code)
     },
     ...mainMixin.methods