lesscode-v0.2.2 (#388)

feat: merge
TencentBlueKing · Jun 17, 2021 · b0a5353 · b0a5353
1 parent b18423a
commit b0a5353
Show file tree

Hide file tree

Showing 29 changed files with 428 additions and 135 deletions.
diff --git a/paas-ce/lesscode/lib/client/src/App.vue b/paas-ce/lesscode/lib/client/src/App.vue
@@ -18,6 +18,9 @@
             <app-header></app-header>
             <router-view :name="topView" v-show="!mainContentLoading" />
         </div>
+        <bk-fixed-navbar v-if="!isCanvas"
+            :position="position"
+            :nav-items="navItems"></bk-fixed-navbar>
     </section>
 </template>
 <script>
@@ -30,7 +33,27 @@
 
         data () {
             return {
-                systemCls: 'mac'
+                systemCls: 'mac',
+                position: 'middle',
+                navItems: [
+                    {
+                        icon: 'bk-drag-icon bk-drag-document',
+                        text: '文档',
+                        action: () => {
+                            const routerUrl = this.$router.resolve({
+                                path: '/help'
+                            })
+                            window.open(routerUrl.href, '_blank')
+                        }
+                    },
+                    {
+                        icon: 'bk-drag-icon bk-drag-comment-fill',
+                        text: '反馈',
+                        action: () => {
+                            window.open('https://github.com/Tencent/bk-PaaS/labels/lesscode')
+                        }
+                    }
+                ]
             }
         },
 
@@ -45,6 +68,9 @@
             topView () {
                 const topRoute = this.$route.matched[0]
                 return (topRoute && topRoute.meta.view) || 'default'
+            },
+            isCanvas () {
+                return this.$route.name === 'new'
             }
         },
 
@@ -83,6 +109,10 @@
         font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, Helvetica Neue, Arial;
     }
 
+    .bk-fixed-navbar-wrapper {
+        z-index: 9999;
+    }
+
     .win {
         /* font-family: Microsoft Yahei, PingFang SC, Helvetica, Aria; */
         font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Microsoft YaHei, Helvetica Neue, Arial;

diff --git a/paas-ce/lesscode/lib/client/src/components/code-viewer/index.vue b/paas-ce/lesscode/lib/client/src/components/code-viewer/index.vue
@@ -12,10 +12,12 @@
 <template>
     <div :class="[$style['code-viewer'], { [$style['fullscreen']]: isFullscreen }]">
         <div :class="$style['toolbar']">
+            <p><span v-if="pageType === 'json'">仅包含页面内容区域Json数据</span></p>
             <div :class="$style['buttons']">
-                <i v-bk-tooltips="{ boundary: 'window', content: '复制代码' }" :class="['bk-drag-icon', 'bk-drag-copy', $style['icon']]" @click="handleCodeCopy"></i>
-                <i v-bk-tooltips="{ boundary: 'window', content: '下载源码' }" :class="['bk-drag-icon', 'bk-drag-download', $style['icon']]" @click="handleDownloadFile"></i>
-                <i v-bk-tooltips="{ boundary: 'window', content: withNav ? '包含导航源码' : '不包含导航源码' }" :class="['bk-drag-icon', 'bk-drag-switcher', $style['icon'], { [$style['without-nav']]: !withNav }]" @click="switchWithNav"></i>
+                <i v-bk-tooltips="{ boundary: 'window', content: `复制${typeName}` }" :class="['bk-drag-icon', 'bk-drag-copy', $style['icon']]" @click="handleCodeCopy"></i>
+                <i v-bk-tooltips="{ boundary: 'window', content: `下载${typeName}` }" :class="['bk-drag-icon', 'bk-drag-download', $style['icon']]" @click="handleDownloadFile"></i>
+                <i v-if="pageType === 'json'" v-bk-tooltips="{ boundary: 'window', content: '导入json' }" :class="['bk-drag-icon', 'bk-drag-upload', $style['icon']]" @click="showEditData"></i>
+                <i v-if="pageType === 'code'" v-bk-tooltips="{ boundary: 'window', content: withNav ? '包含导航源码' : '不包含导航源码' }" :class="['bk-drag-icon', 'bk-drag-switcher', $style['icon'], { [$style['without-nav']]: !withNav }]" @click="switchWithNav"></i>
                 <i v-bk-tooltips="{ boundary: 'window', content: '全屏' }" :class="['bk-drag-icon', 'bk-drag-full-screen', $style['icon']]" @click="handleScreenfull"></i>
             </div>
         </div>
@@ -30,7 +32,6 @@
 <script>
     import screenfull from 'screenfull'
     import hljs from 'highlight.js'
-    // import 'highlight.js/styles/tomorrow.css'
     import 'highlight.js/styles/monokai-sublime.css'
 
     export default {
@@ -45,13 +46,22 @@
             },
             withNav: {
                 type: Boolean
+            },
+            pageType: {
+                type: String,
+                default: 'code'
             }
         },
         data () {
             return {
                 isFullscreen: false
             }
         },
+        computed: {
+            typeName () {
+                return this.pageType === 'json' ? 'json' : '源码'
+            }
+        },
         watch: {
             code: {
                 handler () {
@@ -75,6 +85,9 @@
             switchWithNav () {
                 this.$emit('change-with-nav', !this.withNav)
             },
+            showEditData () {
+                this.$emit('show-edit-data')
+            },
             highlightCode () {
                 this.$nextTick(() => {
                     const ele = document.querySelector('code[viewer]')
@@ -121,7 +134,7 @@
                     document.getSelection().removeAllRanges()
                     document.getSelection().addRange(selected)
                 }
-                this.$bkMessage({ theme: 'primary', message: '代码复制成功', delay: 2000, dismissable: false })
+                this.$bkMessage({ theme: 'primary', message: '复制成功', delay: 2000, dismissable: false })
             }
         }
     }
@@ -146,9 +159,9 @@
         .toolbar {
             display: flex;
             align-items: center;
-            justify-content: flex-end;
+            justify-content: space-between;
             height: var(--toolbar-height);
-            padding: 0 22px;
+            padding: 0 22px 0 10px;
             background: #4B4D55;
 
             .buttons {
@@ -175,6 +188,7 @@
 
         .content {
             height: calc(100% - var(--toolbar-height));
+            min-height: 400px;
             overflow: auto;
             @mixin scroller #63656E;
 

diff --git a/paas-ce/lesscode/lib/client/src/components/novice-guide/help.png b/paas-ce/lesscode/lib/client/src/components/novice-guide/help.png
diff --git a/paas-ce/lesscode/lib/client/src/components/ui/extra-links.vue b/paas-ce/lesscode/lib/client/src/components/ui/extra-links.vue
@@ -1,14 +1,8 @@
 <template>
     <div class="extra-links">
-        <bk-popover placement="bottom-end" theme="light extra-links" :arrow="false">
-            <div class="help-box">
-                <i class="dropdown-trigger-btn bk-icon icon-question-circle-shape" />
-            </div>
-            <div class="extra-links-popover-panel" slot="content">
-                <slot name="before" />
-                <div @click="goStart">帮助文档</div>
-            </div>
-        </bk-popover>
+        <div class="help-box" @click="helpClick" v-bk-tooltips="helpTooltips">
+            <i class="dropdown-trigger-btn bk-icon icon-question-circle-shape" />
+        </div>
         <div class="github-link" @click="goGithub" v-bk-tooltips="{ content: 'Github', placements: ['bottom'] }">
             <i class="bk-drag-icon bk-drag-github-logo"></i>
         </div>
@@ -17,6 +11,23 @@
 
 <script>
     export default {
+        props: {
+            showHelpBox: {
+                type: Boolean,
+                default: false
+            },
+            helpClick: {
+                type: Function,
+                default: () => {}
+            },
+            helpTooltips: {
+                type: Object,
+                default: () => ({
+                    content: '帮助',
+                    placements: ['bottom']
+                })
+            }
+        },
         data () {
             return {
                 routeName: 'start'
@@ -41,13 +52,6 @@
         methods: {
             goGithub () {
                 window.open('https://github.com/Tencent/bk-PaaS/blob/lesscode-master/paas-ce/lesscode/README.md')
-            },
-
-            goStart () {
-                const routerUrl = this.$router.resolve({
-                    name: this.routeName
-                })
-                window.open(routerUrl.href, '_blank')
             }
         }
     }

diff --git a/paas-ce/lesscode/lib/client/src/components/variable/variable-select.vue b/paas-ce/lesscode/lib/client/src/components/variable/variable-select.vue
@@ -152,6 +152,7 @@
 
                 return retObj
             },
+
             filterVariableList () {
                 const variableList = JSON.parse(JSON.stringify(this.variableList || []))
                 return variableList.filter((variable) => {

diff --git a/paas-ce/lesscode/lib/client/src/element-materials/materials/bk/badge/index.js b/paas-ce/lesscode/lib/client/src/element-materials/materials/bk/badge/index.js
@@ -9,8 +9,6 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import { formatLink } from '@/common/util'
-
 export default {
     name: 'badge',
     type: 'bk-badge',
@@ -41,10 +39,7 @@ export default {
         },
         icon: {
             type: 'icon',
-            val: '',
-            tips: {
-                html: '组件显示图标；当设置 icon 时，将忽略设置的 val 值，' + formatLink({ content: '查看支持的 icon' })
-            }
+            val: ''
         },
         max: {
             type: 'number',

diff --git a/paas-ce/lesscode/lib/client/src/element-materials/materials/bk/input/index.js b/paas-ce/lesscode/lib/client/src/element-materials/materials/bk/input/index.js
@@ -9,8 +9,6 @@
  * specific language governing permissions and limitations under the License.
  */
 
-import { formatLink } from '@/common/util'
-
 export default {
     name: 'input',
     type: 'bk-input',
@@ -56,7 +54,7 @@ export default {
     props: {
         value: {
             type: 'string',
-            val: 'hello world'
+            val: ''
         },
         type: {
             type: 'string',
@@ -104,16 +102,10 @@ export default {
             tips: 'html 原生属性 name'
         },
         'left-icon': {
-            type: 'icon',
-            tips: {
-                html: '左边显示的 icon，' + formatLink({ content: '查看支持的 icon' })
-            }
+            type: 'icon'
         },
         'right-icon': {
-            type: 'icon',
-            tips: {
-                html: '右边显示的 icon，' + formatLink({ content: '查看支持的 icon' })
-            }
+            type: 'icon'
         },
         precision: {
             type: 'number',

diff --git a/paas-ce/lesscode/lib/client/src/element-materials/modifier/component/directives/index.vue b/paas-ce/lesscode/lib/client/src/element-materials/modifier/component/directives/index.vue
@@ -154,8 +154,9 @@
 
             triggleUpdate (directive) {
                 const renderDirectives = JSON.parse(JSON.stringify(this.lastDirectives))
-                const changedDirective = renderDirectives.find((dirVal) => ((dirVal.type + dirVal.prop) === (directive.type + directive.prop))) || {}
-                if (changedDirective.val === undefined) {
+                const index = renderDirectives.findIndex((dirVal) => ((dirVal.type + dirVal.prop) === (directive.type + directive.prop)))
+                const changedDirective = renderDirectives[index] || {}
+                if (index <= -1) {
                     renderDirectives.push(changedDirective)
                 }
                 Object.assign(changedDirective, directive)

diff --git a/...code/lib/client/src/element-materials/modifier/component/props/components/render-prop.vue b/...code/lib/client/src/element-materials/modifier/component/props/components/render-prop.vue
@@ -39,7 +39,7 @@
                 </div>
             </template>
             <template v-else>
-                <bk-radio-group v-model="mutlTypeSelected" style="margin-bottom: 10px;">
+                <bk-radio-group v-model="mutlTypeSelected" style="margin-bottom: 10px;" @change="changePropType">
                     <bk-radio-button
                         v-for="item in formCom"
                         :key="item.typeName"
@@ -324,6 +324,10 @@
             batchUpdate (renderData) {
                 this.$emit('batch-update', renderData)
             },
+            changePropType (type) {
+                const value = this.describe.val || this.defaultValue
+                this.handleUpdate(this.name, value, type)
+            },
             changeVariable (variableData) {
                 const value = variableData.defaultVal === undefined ? this.describe.val : variableData.defaultVal
                 const com = this.formCom.find((com) => (variableData.valueType === com.typeName)) || {}
@@ -338,8 +342,9 @@
             },
             updateDirectives (variableData) {
                 const renderDirectives = JSON.parse(JSON.stringify(this.lastDirectives || []))
-                const curDirective = (renderDirectives || []).find((item) => (item.type + item.prop) === ('v-bind' + this.name)) || {}
-                if (curDirective.val === undefined) {
+                const index = renderDirectives.findIndex((item) => (item.type + item.prop) === ('v-bind' + this.name))
+                const curDirective = renderDirectives[index] || {}
+                if (index <= -1) {
                     renderDirectives.push(curDirective)
                 }
                 const data = { type: 'v-bind', prop: this.name, val: variableData.val, valType: variableData.valType, modifiers: this.describe.modifiers }