feat: 添加帮助文档弹框&文档中心调整

lib/client/src/bk-icon/style.css

@@ -1229,3 +1229,12 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .bk-drag-builder:before {
 	content: "\e298";
 }
+.bk-drag-tuopu:before {
+	content: "\e2a2";
+}
+.bk-drag-jiedian:before {
+	content: "\e2a3";
+}
+.bk-drag-rongqi:before {
+	content: "\e2a4";
+}

lib/client/src/components/app-header.vue

@@ -29,6 +29,7 @@
             </ul>
         </nav>
         <div class="top-info">
+            <div class="help-doc" @click="closePage(true)">{{ $t('帮助文档') }}</div>
             <bk-popover class="info-item"
                 theme="light header-top-info-popover"
                 animation="fade"
@@ -99,6 +100,7 @@
             </bk-popover>
         </div>
         <changelog ref="log"></changelog>
+        <helpDocs :visible="visible" @closePage="closePage" />
     </header>
 </template>
 
@@ -112,7 +114,8 @@
 
     export default defineComponent({
         components: {
-            changelog
+            changelog,
+            helpDocs
         },
         computed: {
             currentRoute () {
@@ -195,6 +198,10 @@
                 changeLang(lang.id)
             }
 
+            const visible = ref(false)
+            const closePage = (value) => {
+                visible.value = value
+            }
             return {
                 languageList,
                 userName,
@@ -205,7 +212,9 @@
                 goLogin,
                 toProjectList,
                 currentLang,
-                handleLanguageChange
+                handleLanguageChange,
+                visible,
+                closePage
             }
         }
     })
@@ -222,7 +231,6 @@
         top: 0;
         z-index: 1000;
         background: #182132;
-
         .logo {
             display: flex;
             align-items: center;
@@ -274,6 +282,13 @@
             align-items: center;
             margin-left: auto;
 
+            .help-doc {
+                font-family: MicrosoftYaHei;
+                color: #96A2B9;
+                cursor: pointer;
+                margin: 0 16px;
+            }
+
             .info-item {
                 cursor: pointer;
                 margin-left: 16px;

lib/client/src/views/help/docs/case-table-search.md → lib/client/src/components/help-doc-detail/docs/case-table-search.md

@@ -1,7 +1,7 @@
 ## 如何开发一个表格查询页面
 ### 第一步：拖拽“输入框”、“表格”组件到画布
 
-<img src="../../../images/help/case-table1.png" alt="grid" width="640" class="help-img">
+<img src="../../../images/help/case-table1.png" alt="grid" width="80%" class="help-img">
 
 ### 第二步：配置组件属性和指令
 
@@ -15,7 +15,7 @@
 
 ### 第三步：新建函数 “getTableData” 查询并获取表格数据
 
-<img src="../../../images/help/case-table2.png" alt="grid" width="640" class="help-img">
+<img src="../../../images/help/case-table2.png" alt="grid" width="80%" class="help-img">
 
 **注意：**
 
@@ -25,7 +25,7 @@
 
 2、可以使用 lesscode.函数名，必须通过编辑器自动补全功能选择需要调用的函数。
 
-<img src="../../../images/help/case-table3.png" alt="grid" width="640" class="help-img">
+<img src="../../../images/help/case-table3.png" alt="grid" width="80%" class="help-img">
 
 ### 第四步：“表格”组件 “data” 属性及事件配置
 
@@ -35,15 +35,15 @@
 
 ### 第五步：输入框 “enter” 事件绑定表格查询函数 “getTableData”
 
-<img src="../../../images/help/case-table5.png" alt="grid" width="640" class="help-img">
+<img src="../../../images/help/case-table5.png" alt="grid" width="80%" class="help-img">
 
 ### 第六步：表格分页事件绑定事件函数
 
 分别给 “page-change” 和 “page-limit-change” 事件绑定表格查询函数 “getTableData”，并配置对应函数调用参数。
 
-<img src="../../../images/help/case-table7.png" alt="grid" width="640" class="help-img">
+<img src="../../../images/help/case-table7.png" alt="grid" width="80%" class="help-img">
 
 
 ### 第七步：预览效果
 
-<img src="../../../images/help/case-table9.png" alt="grid" width="640" class="help-img">
+<img src="../../../images/help/case-table9.png" alt="grid" width="80%" class="help-img">