Merge pull request #94 from TencentBlueKing/develop

lesscode 0.3.5

.gitignore

@@ -49,3 +49,4 @@ lib/server/project-template/bklesscode-proj*
 
 .codecc
 build.yml
+package-lock.json

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

@@ -26,6 +26,12 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .bk-drag-home:before {
 	content: "\e15d";
 }
+.bk-drag-minus-circle:before {
+	content: "\e219";
+}
+.bk-drag-plus-circle:before {
+	content: "\e21a";
+}
 .bk-drag-check-circle-fill:before {
 	content: "\e180";
 }
@@ -434,6 +440,12 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .bk-drag-router:before {
 	content: "\e187";
 }
+.bk-drag-un-full-screen-2:before {
+	content: "\e21c";
+}
+.bk-drag-filliscreen-line:before {
+	content: "\e21b";
+}
 .bk-drag-card:before {
 	content: "\e189";
 }
@@ -650,31 +662,31 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .bk-drag-templateline:before {
 	content: "\e1d4";
 }
-.bk-drag-shipin:before {
+.bk-drag-file-video:before {
 	content: "\e1f5";
 }
-.bk-drag-tupian:before {
+.bk-drag-file-image:before {
 	content: "\e1f6";
 }
-.bk-drag-wenben:before {
+.bk-drag-file-text:before {
 	content: "\e1f7";
 }
-.bk-drag-yasuobao:before {
+.bk-drag-file-zip:before {
 	content: "\e1f8";
 }
-.bk-drag-pdf:before {
+.bk-drag-file-pdf:before {
 	content: "\e1f9";
 }
-.bk-drag-yinle:before {
+.bk-drag-file-audio:before {
 	content: "\e1fa";
 }
-.bk-drag-doc-2:before {
+.bk-drag-file-doc:before {
 	content: "\e1fb";
 }
-.bk-drag-excel:before {
+.bk-drag-file-excel:before {
 	content: "\e1fc";
 }
-.bk-drag-ppt:before {
+.bk-drag-file-ppt:before {
 	content: "\e1fd";
 }
 .bk-drag-cellcellgroup:before {
@@ -755,7 +767,7 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .bk-drag-page:before {
 	content: "\e1ee";
 }
-.bk-drag-picture:before {
+.bk-drag-image-small:before {
 	content: "\e1ef";
 }
 .bk-drag-flow:before {
@@ -770,10 +782,10 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .bk-drag-grid:before {
 	content: "\e1f3";
 }
-.bk-drag-cardd:before {
+.bk-drag-display-card:before {
 	content: "\e1fe";
 }
-.bk-drag-lists:before {
+.bk-drag-display-list:before {
 	content: "\e1ff";
 }
 .bk-drag-links:before {
@@ -848,3 +860,30 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .bk-drag-zuoyouchengman:before {
 	content: "\e218";
 }
+.bk-drag-rengongjiedian:before {
+	content: "\e221";
+}
+.bk-drag-shenpijiedian:before {
+	content: "\e220";
+}
+.bk-drag-huiqianjiedian:before {
+	content: "\e21f";
+}
+.bk-drag-apijiedian:before {
+	content: "\e21e";
+}
+.bk-drag-shujuchulijiedian:before {
+	content: "\e21d";
+}
+.bk-drag-end:before {
+	content: "\e222";
+}
+.bk-drag-parallel:before {
+	content: "\e223";
+}
+.bk-drag-converge:before {
+	content: "\e224";
+}
+.bk-drag-start:before {
+	content: "\e225";
+}

lib/client/src/components/choose-data-table.vue

@@ -1,6 +1,13 @@
 <template>
     <section>
-        <bk-select @change="chooseTable" :value="value" searchable>
+        <bk-select
+            searchable
+            :value="value"
+            :loading="isLoadingList"
+            @selected="handleSelectTable"
+            @toggle="handleToggleSelect"
+            @clear="handleClearTable"
+        >
             <bk-option v-for="table in tableList"
                 :key="table.tableName"
                 :id="table.tableName"
@@ -16,15 +23,16 @@
             size="small"
             :disabled="!value"
             :loading="isLoading"
-            @click="chooseTable(value)"
+            @click="handleSelectTable(value)"
         >获取数据</bk-button>
     </section>
 </template>
 
 <script lang="ts">
     import {
         defineComponent,
-        ref
+        ref,
+        onBeforeMount
     } from '@vue/composition-api'
     import { messageError } from '@/common/bkmagic'
     import store from '@/store'
@@ -35,38 +43,69 @@
             value: String
         },
 
-        setup (_, { emit }) {
+        setup (props, { emit }) {
             const isLoading = ref(false)
+            const isLoadingList = ref(false)
             const projectId = router?.currentRoute?.params?.projectId
-            const tableList = store?.state?.dataSource?.tableList
+            const tableList = ref([])
 
-            const chooseTable = (tableName) => {
+            const handleSelectTable = (tableName) => {
                 isLoading.value = true
                 const queryData = {
                     projectId,
                     environment: 'preview',
                     tableName
                 }
                 store.dispatch('dataSource/getOnlineTableDatas', queryData).then((data) => {
-                    const table = tableList.find((table) => table.tableName === tableName)
+                    const table = tableList.value.find((table) => table.tableName === tableName)
                     emit('update:value', tableName)
-                    emit('choose', tableName, data, table)
+                    emit('choose', { tableName, data, table })
                 }).catch((error) => {
                     messageError(error.message || error)
                 }).finally(() => {
                     isLoading.value = false
                 })
             }
 
+            const handleToggleSelect = (isOpen) => {
+                if (isOpen) {
+                    getTableList()
+                }
+            }
+
+            const getTableList = () => {
+                isLoadingList.value = true
+                store.dispatch('dataSource/list', { projectId }).then((data) => {
+                    tableList.value = data.list || []
+                }).finally(() => {
+                    isLoadingList.value = false
+                })
+            }
+
             const handleCreate = () => {
                 window.open(`/project/${projectId}/data-source-manage/`, '_blank')
             }
 
+            const handleClearTable = () => {
+                emit('clear')
+            }
+
+            onBeforeMount(() => {
+                getTableList()
+                // 初始化的时候，需要同步获取最新的表数据
+                if (props.value) {
+                    handleSelectTable(props.value)
+                }
+            })
+
             return {
                 isLoading,
+                isLoadingList,
                 tableList,
-                chooseTable,
-                handleCreate
+                handleSelectTable,
+                handleCreate,
+                handleToggleSelect,
+                handleClearTable
             }
         }
     })

lib/client/src/components/filelib/file-icon.vue

@@ -0,0 +1,83 @@
+<!--
+  Tencent is pleased to support the open source community by making 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
+  Copyright (C) 2017-2019 THL A29 Limited, a Tencent company. All rights reserved.
+  Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  http://opensource.org/licenses/MIT
+  Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
+  an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
+  specific language governing permissions and limitations under the License.
+-->
+
+<script lang="ts">
+    import { defineComponent, PropType, h } from '@vue/composition-api'
+    import { UploadFile, getFileUrl, getFileExt, isImageFile } from './helper'
+
+    export default defineComponent({
+        props: {
+            file: {
+                type: Object as PropType<UploadFile>,
+                default: null
+            },
+            isCard: {
+                type: Boolean,
+                default: true
+            }
+        },
+        setup (props) {
+            const ext = getFileExt(props.file)
+            const isImage = isImageFile(props.file)
+
+            if (isImage) {
+                if (props.isCard) {
+                    return () => h('img', { domProps: { src: getFileUrl(props.file), alt: props.file.name } })
+                }
+                return () => h('i', { class: { 'bk-drag-icon': true, 'file-preview-icon': true, 'bk-drag-file-image': true } })
+            }
+
+            const iconMap = {
+                'doc': 'bk-drag-file-doc',
+                'docx': 'bk-drag-file-doc',
+                'xls': 'bk-drag-file-excel',
+                'xlsx': 'bk-drag-file-excel',
+                'ppt': 'bk-drag-file-ppt',
+                'pptx': 'bk-drag-file-ppt',
+                'pdf': 'bk-drag-file-pdf',
+                'zip': 'bk-drag-file-zip',
+                'tar': 'bk-drag-file-zip',
+                'gz': 'bk-drag-file-zip'
+            }
+            const fileIcon = iconMap[ext] || 'bk-drag-file-text'
+            return () => h('i', { class: { 'bk-drag-icon': true, 'file-preview-icon': true, [fileIcon]: true } })
+        }
+    })
+</script>
+
+<style lang="postcss" scoped>
+    .file-preview-icon {
+        &.bk-drag-file-doc {
+            color: #3A84FF;
+        }
+
+        &.bk-drag-file-excel {
+            color: #2DCB56;
+        }
+
+        &.bk-drag-file-ppt {
+            color: #EE5656;
+        }
+
+        &.bk-drag-file-pdf {
+            color: #EA3636;
+        }
+
+        &.bk-drag-file-zip {
+            color: #699DF4;
+        }
+
+        &.bk-drag-file-text,
+        &.bk-drag-file-image, {
+            color: #979BA5;
+        }
+    }
+</style>

lib/client/src/components/filelib/helper.ts

@@ -23,6 +23,11 @@ export enum DISPLAY_TYPES {
 
 export type UploadStatus = Lowercase<keyof typeof UPLOAD_STATUS>
 
+export const FILE_MAX_LIMIT = {
+    IMAGE_SIZE: 5,
+    FILE_SIZE: 10
+}
+
 export interface UploadRawFile extends File {
     uid: number
 }
@@ -32,6 +37,8 @@ export interface UploadFile {
     percentage?: number
     status: UploadStatus
     size?: number
+    ext?: string
+    mime?: string
     response?: { code: number, data: Record<string, unknown>, message: string }
     uid: number
     url?: string
@@ -45,9 +52,42 @@ export function formatSize (value: number) {
     return `${size.toFixed(2)} ${uints[index]}`
 }
 
-export function getFileUrl (file: UploadFile, isServer = false) {
+export function getFileUrl (file: UploadFile, isServer = false, isPreview = false) {
     if (isServer) {
-        return file?.response?.data?.url || file.url
+        const url = (file?.response?.data?.url || file.url) as string
+        if (!isPreview) {
+            return url
+        }
+        const previewParam = 'preview=true'
+        if (url && url.indexOf('?') !== -1) {
+            return `${url}&${previewParam}`
+        }
+        return `${url}?${previewParam}`
     }
     return file.url
 }
+
+export function getFileExt (file: UploadFile): string {
+    if (file?.ext) {
+        return file.ext
+    }
+    if (file?.raw) {
+        return file.raw.name.split('.').pop()
+    }
+    return file?.response?.data?.ext as string
+}
+
+export function getFileMime (file: UploadFile): string {
+    if (file?.mime) {
+        return file.mime
+    }
+    if (file?.raw) {
+        return file.raw.type
+    }
+    return file?.response?.data?.mime as string
+}
+
+export function isImageFile (file: UploadFile): boolean {
+    const mime = getFileMime(file)
+    return mime.startsWith('image/')
+}