Merge pull request #817 from TencentBlueKing/develop

merge develop to master v1.0.8

lib/client/src/common/util.js

@@ -12,6 +12,9 @@
 import { messageSuccess } from '@/common/bkmagic'
 import domToImage from './dom-to-image'
 import Vue from 'vue'
+import { useStore } from '@/store'
+
+const store = useStore()
 
 /**
  * 将html转换为Vnode
@@ -867,3 +870,51 @@ export const isValEmpty = (val) => {
     }
     return false
 }
+
+/**
+ * px单位转为rpx单位
+ * @param {*}
+ * value: number
+ */
+export function pxToRpx (value) {
+    const { width } = store.getters['page/pageSize']
+    const fullWidthRpx = 750
+    return (fullWidthRpx / width) * value
+}
+
+export function autoStyle (node, styleName, pxNumber, isGet = false) {
+    // 保持元素最初的单位状态，如果最初没设置，PC平台默认px,移动端默认rpx
+    const platform = store.getters['page/platform']
+    const defaultUnit = platform === 'PC' ? 'px' : 'rpx'
+    const hasOriginValue = node.renderStyles && /^\d+\D+$/.test(node.renderStyles[styleName])
+    const currentUnit = hasOriginValue ? /\D+$/.exec(node.renderStyles[styleName])[0] : defaultUnit
+
+    if (currentUnit === 'px') {
+        return isGet ? pxNumber + 'px' : node.setStyle(styleName, pxNumber + 'px')
+    } else if (currentUnit === 'rpx') {
+        return isGet ? pxToRpx(pxNumber) + 'rpx' : node.setStyle(styleName, pxToRpx(pxNumber) + 'rpx')
+    }
+    throw Error('传入错误参数，无法进行单位自动转换')
+}
+
+/** rem转为px
+ * 项目rem 基准
+ * fullWidth: 750 / 20rem
+ * 详见 lib/shared
+ */
+export function remToPx (value) {
+    const { width } = store.getters['page/pageSize']
+    const fullWidthRem = 20
+
+    const originValue = parseInt(value, 10)
+    return ((originValue / fullWidthRem) * width) + 'px'
+}
+
+/** 自动转为px */
+export function autoPxTransform (value) {
+    if (value.includes('px')) {
+        return value
+    } else if (value.includes('rem')) {
+        return remToPx(value)
+    }
+}

lib/client/src/components/api/create-api-sideslider/basic.vue

@@ -96,6 +96,19 @@
                 ></bk-input>
             </bk-compose-form-item>
         </bk-form-item>
+        <bk-form-item
+            property="withToken"
+        >
+            <bk-checkbox
+                :true-value="1"
+                :false-value="0"
+                :value="formData.withToken"
+                v-bk-tooltips="{
+                    content: '勾选后会在请求中携带 Api gateway 所需的认证信息（该认证信息根据发送请求用户和绑定应用生成）'
+                }"
+                @change="update('withToken', ...arguments)"
+            >蓝鲸应用认证</bk-checkbox>
+        </bk-form-item>
         <bk-form-item
             label="备注"
             property="summary"
@@ -254,6 +267,7 @@
 
 <style lang="postcss" scoped>
     .basic-compose-url {
+        display: block;
         width: 100%;
         .compose-method {
             width: 150px;

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

@@ -49,9 +49,7 @@
                     <router-link custom exact to="/help" v-slot="{ href, isActive }">
                         <a :class="['popover-link', { active: isActive }]" target="_blank" :href="href">产品文档</a>
                     </router-link>
-                    <router-link custom exact to="/help/changelog" v-slot="{ href, isActive }">
-                        <a :class="['popover-link', { active: isActive }]" target="_blank" :href="href">版本日志</a>
-                    </router-link>
+                    <a class="popover-link" href="javascript:;" @click="log.changeIsShow()">版本日志</a>
                     <a class="popover-link" target="_blank" href="https://github.com/TencentBlueKing/bk-lesscode/issues">问题反馈</a>
                     <a class="popover-link" target="_blank" href="https://github.com/TencentBlueKing/bk-lesscode/blob/master/readme.md">开源社区</a>
                 </template>
@@ -78,30 +76,35 @@
                 </template>
             </bk-popover>
         </div>
+        <changelog ref="log"></changelog>
     </header>
 </template>
 
 <script>
-    import { defineComponent, computed } from '@vue/composition-api'
+    import { defineComponent, computed, ref } from '@vue/composition-api'
     import { useStore } from '@/store'
     import { useRouter } from '@/router'
     import { IAM_ACTION } from 'shared/constant'
+    import changelog from '@/components/changelog-version'
 
     export default defineComponent({
+        components: {
+            changelog
+        },
         computed: {
             currentRoute () {
                 return this.$route
             }
         },
+
         setup () {
             const store = useStore()
             const router = useRouter()
-
+            const log = ref()
             const iamNoResourcesPerm = computed(() => store.getters['iamNoResourcesPerm'])
-
+            
             const user = computed(() => store.getters['user'])
             const userName = computed(() => user.value?.username ?? '')
-
             const menus = computed(() => {
                 const list = [
                     {
@@ -128,7 +131,6 @@
 
                 return list.filter(item => item.authed)
             })
-
             const isMenuActive = (route) => {
                 const [topRoute] = router.currentRoute.matched
                 return route.name === topRoute?.meta?.owner
@@ -152,6 +154,7 @@
             return {
                 userName,
                 menus,
+                log,
                 isMenuActive,
                 isRouteContains,
                 goLogin,
@@ -264,6 +267,7 @@
                 }
             }
         }
+       
     }
 
     .header-top-info-popover-theme {
@@ -280,6 +284,7 @@
             }
         }
     }
+
 </style>
 <style>
     .tippy-tooltip.header-top-info-popover-theme {
@@ -290,4 +295,5 @@
         border: 1px solid #DCDEE5;
         box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.10);
     }
+    
 </style>