feat: 示例文档--template-page.md

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

@@ -285,6 +285,9 @@
 
             .help-doc {
                 color: #96A2B9;
+                &:hover {
+                    color: #d3d9e4;
+                }
             }
 
             .info-item {

lib/client/src/components/help-doc-detail/docs/template-page.md

@@ -1,71 +1,59 @@
-## 页面模板的使用指引
-蓝鲸运维开发平台提供了两种不同粒度的模板，应用级模板和页面模板，页面模板是较应用级是更低粒度的模板，可以灵活的在应用各个页面当中使用。
+# 页面模板的使用指引
 
+蓝鲸运维开发平台提供了两种不同粒度的模板，项目级模板和页面模板，页面模板是较项目级是更低粒度的模板，可以灵活的应用在各个页面当中。
 
-### 如何使用页面模板
+## 第一种：通过模板市场添加至项目当中
 
-### 第一种：通过模板市场添加至应用当中
-1.进入模板市场，选择合适的模板，点击“添加至应用”
+1. 进入“**模板市场**”，选择合适的模板，然后“**添加至应用**”
 
-2.添加完成后，就可以在应用画布，查看模板库并拖拽至画布使用了
-<br/>
-<br/>
+<img src="../../../images/help/media/17168668712027/17168724549240.jpg" width="350px">
 
- ![](../../../images/help/media/16401439633109/16402483764730.jpg){width="80%"}
+2. 在添加完成后，就可以在画布模板库里使用了
 
+<img src="../../../images/help/media/17168668712027/17168724794286.jpg" width="80%">
 
+## 第二种：通过画布的模板市场添加
 
-### 第二种：通过画布的模板市场添加
+在画布的模板市场也可以快捷的添加页面模板，有黑色遮照部分代表未添加至应用的页面模板，点击“**添加到应用**”，即可在项目中快捷使用。
 
-在画布的模板市场也可以快捷的添加页面模板，有黑色遮照部分代表未添加至应用的页面模板，点击“添加到应用”，即可在应用中快捷使用。
-<br/>
-<br/>
+<img src="../../../images/help/media/17168668712027/17168725201892.jpg" width="80%">
 
-![](../../../images/help/media/16401439633109/16402486714369.jpg){width="80%"}
+## 存储模板
 
-### 存储模板
+ 在页面的排版过程中，也可以将页面内容存为页面模板，实现局部内容的快速复用。
+
+ 1. 选中对应的模块，点击“**存为模板**”
 
- 在页面的排版过程中，也可以将画布中页面内容存为页面模板，实现局部内容的快速复用。
+ <img src="../../../images/help/media/17168668712027/17168725346892.jpg" width="80%">
 
- <br/>
- 1.选中对应的模块，点击“存为模板”
-<br/>
-<br/>
+2. 填写要存入的模板分类
 
- ![](../../../images/help/media/16401439633109/16402490797956.jpg){width="80%"}
+  <img src="../../../images/help/media/17168668712027/17168725520542.jpg" width="80%">
+
 
-<br/>
-2.填写要存入的模板分类
-<br/>
-<br/>
+3. 还可以在画布中直接将某个页面的内容存为页面模板（不包含导航内容），可以嵌入进任何形式排版的页面
+
+   <img src="../../../images/help/media/17168668712027/17168727190183.jpg" width="80%">
 
-![](../../../images/help/media/16401439633109/16402491127394.jpg){width="80%"}
 
+## 如何管理模板？
 
-<br/>
-3.还可以在画布中直接将某个页面的内容存为页面模板（不包含导航内容），可以嵌入进任何形式排版的页面
-<br/>
-<br/>
+对于从市场中添加的模板和自定义的模板，我们提供了专门的模板管理功能，用户可以自定义分类管理，以及对模板进行编辑、删除，导出等管理。
 
-![](../../../images/help/media/16401439633109/16402500179604.jpg){width="80%"}
+1. 进入“**页面模板管理**”，可以导入导出模板（支持json 格式）、修改分类名称、模板的属性等等
 
+   <img src="../../../images/help/media/17168668712027/17168725738364.jpg" width="80%">
+
+   <img src="../../../images/help/media/17168668712027/17168725867105.jpg" width="80%">
+
+
+2. 修改后的效果会同步至画布中的模板
+
+   <img src="../../../images/help/media/17168668712027/17168726001070.jpg" width="80%">
 
 
-### 如何管理模板？
 
-对于从市场中添加的模板和自定义的模板，我们提供了专门的模板管理功能，用户可以自定义分类管理，以及对模板进行编辑、删除，导出等管理。
 
-<br/>
-1.进入应用模板库管理，可以导入新的模板（支持JSON 格式）、修改分类名称、模板的属性等等
-<br/>
-<br/>
 
-![](../../../images/help/media/16401439633109/16402494734135.jpg){width="80%"}
-![](../../../images/help/media/16401439633109/16402495559475.jpg){width="80%"}
 
-<br/>
-2.修改后的效果会同步至画布中的模板
-<br/>
-<br/>
 
-![](../../../images/help/media/16401439633109/16402497665091.jpg){width="80%"}

lib/client/src/components/help-doc-detail/index.css

@@ -23,10 +23,13 @@ $headerHeight: 64px;
             overflow: auto;
             code {
                 font-family: 'Microsoft Yahei', arial;
-                /* background-color: #f9fafc; */
                 background-color: rgba(225, 236, 255, 0.6);
                 padding: 0 5px;
             }
+            img {
+                display: block;
+                margin: 12px 0;
+            }
 
             ul {
                 padding: 10px 30px 15px 20px;
@@ -58,13 +61,32 @@ $headerHeight: 64px;
                     }
                 }
             }
-
+            h1 {
+                display: block;
+                font-size: 1.75em;
+                margin-block-start: 0.67em;
+                margin-block-end: 0.67em;
+                margin-inline-start: 0px;
+                margin-inline-end: 0px;
+                font-weight: bold;
+                unicode-bidi: isolate;
+                margin: 40px 0 24px 0;
+                padding-bottom: 0.8em;
+            }
+            h2 {
+                margin: 32px 0 24px 0;
+                padding-bottom: 0.5em;
+            }
+            h1, h2 {
+                border-bottom: 1px solid #DCDEE5;
+            }
+            h1,
             h2,
             h3,
             h4,
             h5 {
-                font-weight: 400;
-                color: #1f2f3d;
+                font-weight: 500;
+                color: #313238;
                 &:hover {
                     .header-anchor {
                         visibility: visible;
@@ -74,7 +96,7 @@ $headerHeight: 64px;
 
             p {
                 font-size: 14px;
-                color: #5e6d82;
+                color: #63656E;
                 line-height: 1.5em;
             }
 
@@ -84,25 +106,6 @@ $headerHeight: 64px;
                 cursor: pointer;
             }
 
-            h3 {
-                margin: 35px 0 15px;
-            }
-
-            .demo-box {
-                border: 1px solid #f0f0f0;
-                position: relative;
-            }
-
-            .demo-box .demo-desc code {
-                background-color: #f1f1f1;
-                border: 1px solid #eaeefb;
-                border-radius: 4px;
-                transition: .2s;
-                display: inline-block;
-                padding: 0 4px;
-                margin: 5px;
-            }
-
             .header-anchor {
                 float: left;
                 margin-left: -20px;
@@ -111,135 +114,6 @@ $headerHeight: 64px;
                 padding-top: 1px;
             }
 
-            .demo-box .demo-source {
-                padding: 24px;
-            }
-
-            .demo-box .demo-meta {
-                background-color: #f9fafc;
-                border-top: 1px solid #eaeefb;
-                overflow: hidden;
-                transition: height .2s;
-                display: flex;
-                max-height: 300px;
-
-                &:before,
-                &:after {
-                    content: '';
-                    display: table;
-                    line-height: 0;
-                }
-
-                &:after {
-                    clear: both;
-                }
-            }
-
-            .demo-box .demo-code {
-                background-color: #f9fafc;
-                border-top: 1px solid #eaeefb;
-                transition: height .2s;
-                display: flex;
-
-                &:before,
-                &:after {
-                    content: '';
-                    display: table;
-                    line-height: 0;
-                }
-
-                &:after {
-                    clear: both;
-                }
-            }
-
-            .demo-box .demo-code > pre {
-                display: block;
-                overflow: auto;
-                margin: 0;
-                padding: 10px;
-                font-family: "微软雅黑", arial;
-
-                &::-webkit-scrollbar {
-                    width: 6px;
-                    height: 5px;
-                }
-                &::-webkit-scrollbar-thumb {
-                    border-radius: 20px;
-                    background: #a5a5a5;
-                    -webkit-box-shadow: inset 0 0 6px hsla(0, 0%, 80%, .3);
-                }
-            }
-
-            .demo-box .demo-meta > pre {
-                display: block;
-                width: 60%;
-                border-left: 1px solid #eaeefb;
-                overflow: auto;
-                margin: 0;
-                padding: 24px;
-                font-family: "微软雅黑", arial;
-
-                &::-webkit-scrollbar {
-                    width: 6px;
-                    height: 5px;
-                }
-                &::-webkit-scrollbar-thumb {
-                    border-radius: 20px;
-                    background: #a5a5a5;
-                    -webkit-box-shadow: inset 0 0 6px hsla(0, 0%, 80%, .3);
-                }
-            }
-
-            .demo-box .demo-meta > pre code {
-                font-size: 12px;
-                display: block;
-                line-height: 1.5;
-                padding: 0;
-                background-color: #f9fafc;
-                border: none;
-            }
-
-            .demo-box .demo-code > pre code {
-                font-size: 12px;
-                display: block;
-                line-height: 1.8;
-                padding: 0;
-                background-color: #f9fafc;
-                border: none;
-            }
-
-            .demo-meta {
-                .demo-source-code {
-                    position: absolute;
-                    top: 32px;
-                    left: 32px;
-                }
-            }
-
-            .demo-box .demo-desc {
-                padding: 18px 24px;
-                width: 40%;
-                box-sizing: border-box;
-                float: right;
-                font-size: 14px;
-                line-height: 1.8;
-                color: #5e6d82;
-                word-break: break-word;
-                p {
-                    margin: 0;
-                    line-height: 1.5;
-                    font-size: 13px;
-                }
-            }
-            .demo-box .code-copy {
-                position: absolute;
-                right: 25px;
-                margin-top: 10px;
-                cursor: pointer;
-                z-index: 1;
-            }
-
             .auto-height {
                 .demo-box {
                     .demo-meta {

lib/client/src/components/help-doc-detail/index.vue

@@ -273,9 +273,9 @@
             })
 
             const isExistDoc = computed(() => {
-                const comKeys = Object.keys(docComs)
-                const firstCharUp = props.selectDoc?.slice(0, 1).toUpperCase() + props.selectDoc?.slice(1)
-                if (comKeys.includes(firstCharUp)) {
+                const comKeys = Object.keys(docComs)?.map(item => item.toLocaleUpperCase())
+                const selectDoc = props.selectDoc?.toUpperCase()?.replaceAll('-', '')
+                if (comKeys.includes(selectDoc)) {
                     return true
                 }
                 return false

lib/client/src/views/index/components/action-tool/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="action-tool-list">
-        <save-as-template v-if="iamNoResourcesPerm[$IAM_ACTION.manage_template[0]]" />
+        <save-as-template />
         <clear-canvas />
         <code-and-json />
         <show-function />

lib/client/src/views/project/data-source-manage/data-operation/children/sql-query.vue

@@ -1,6 +1,6 @@
 <template>
     <section>
-        <ai-sql-input :table-data="tableData" :generate-sql="generateAiSql" />
+        <ai-sql-input v-if="isAiValid" :table-data="tableData" :generate-sql="generateAiSql" />
         <bk-divider></bk-divider>
         <section class="sql-query">
             <monaco
@@ -105,6 +105,8 @@
             const store = useStore()
             const apiData = ref([])
 
+            const isAiValid = computed(() => store.getters['ai/isAiAvailable'])
+
             // 构造节点数据
             const getNodeValue = (data, isLeaf) => {
                 const node = {
@@ -211,6 +213,7 @@
             )
 
             return {
+                isAiValid,
                 tableData,
                 apiData,
                 handleSqlChange,

lib/server/controller/data-source.js

@@ -660,7 +660,7 @@ export default class DataSourceController {
 
     // 导出项目下所有表结构
     @OutputZip()
-    @ProjectAuthorization({})
+    @ProjectAuthorization({ getId: ctx => ctx.params.projectId })
     @Get('/exportStruct/projectId/:projectId/fileType/:fileType')
     async exportStruct (
         @PathParams({ name: 'projectId', require: true }) projectId,
@@ -692,7 +692,7 @@ export default class DataSourceController {
 
     // 导出项目下所有表数据
     @OutputZip()
-    @ProjectAuthorization({})
+    @ProjectAuthorization({ getId: ctx => ctx.params.projectId })
     @Get('/exportDatas/projectId/:projectId/fileType/:fileType/tableName/:tableName/environment/:environment')
     async exportDatas (
         @PathParams({ name: 'projectId', require: true }) projectId,