@jetlinks-web/components 1.0.5 → 2.0.1

package/index.ts

@@ -1,25 +1,64 @@
 import type { App } from 'vue'
 
-import FullPage from './src/FullPage/index.vue'
-import PermissionButton from './src/PermissionButton/index'
+import { InitAMap } from './src/AMap'
 import BadgeStatus from './src/BadgeStatus'
-import GeoComponent from './src/GeoComponent'
-import ValueItem from './src/ValueItem'
+import CardSelect from './src/CardSelect'
+import CheckButton from './src/CheckButton'
+import ConfigProvider from './src/ConfigProvider'
 import Echarts from './src/Echarts'
+import Ellipsis from './src/Ellipsis'
+import Empty from './src/Empty'
+import FullPage from './src/FullPage'
+import AIcon from './src/Icon'
+import MonacoEditor from './src/MonacoEditor'
+import PermissionButton from './src/PermissionButton'
+import ProLayout, { PageContainer } from './src/ProLayout'
+import ProTable from './src/ProTable'
+import Scrollbar from './src/Scrollbar'
+import Search, { AdvancedSearch } from './src/Search'
+import ValueItem from './src/ValueItem'
 
-import { PageContainer, AIcon } from 'jetlinks-ui-components'
-import { InitAMap } from './src/AMap'
+export * from './src/style'
 
+export {
+  BadgeStatus,
+  CardSelect,
+  CheckButton,
+  Echarts,
+  Ellipsis,
+  Empty,
+  FullPage,
+  AIcon,
+  MonacoEditor,
+  PermissionButton,
+  ValueItem,
+  ProTable,
+  Scrollbar,
+  Search,
+  AdvancedSearch,
+  ConfigProvider,
+}
 export default {
   install(app: App) {
-    app.component('PageContainer', PageContainer)
+    app
+      .component('JAMap', InitAMap)
+      .component('JBadgeStatus', BadgeStatus)
+      .component('JCardSelect', CardSelect)
+      .component('JCheckButton', CheckButton)
+      .component('JConfigProvider', ConfigProvider)
+      .component('JEcharts', Echarts)
+      .component('JEllipsis', Ellipsis)
+      .component('JEmpty', Empty)
+      .component('JFullPage', FullPage)
       .component('AIcon', AIcon)
-      .component('PermissionButton', PermissionButton)
-      .component('FullPage', FullPage)
-      .component('BadgeStatus', BadgeStatus)
-      .component('InitAmap', InitAMap)
-      .component('GeoComponent', GeoComponent)
-      .component('ValueItem', ValueItem)
-      .component('Echarts', Echarts)
-  }
+      .component('JMonacoEditor', MonacoEditor)
+      .component('JPermissionButton', PermissionButton)
+      .component('JProLayout', ProLayout)
+      .component('JPageContainer', PageContainer)
+      .component('JProTable', ProTable)
+      .component('JScrollbar', Scrollbar)
+      .component('JSearch', Search)
+      .component('JAdvancedSearch', AdvancedSearch)
+      .component('JValueItem', ValueItem)
+  },
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetlinks-web/components",
-  "version": "1.0.5",
+  "version": "2.0.1",
   "description": "",
   "main": "index.ts",
   "module": "index.ts",
@@ -13,15 +13,18 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@jetlinks-web/hooks": "^1.0.6",
-    "@jetlinks-web/stores": "^1.0.1",
-    "@jetlinks-web/utils": "^1.0.4"
+    "@ant-design/icons-vue": "^7.0.1",
+    "@vueuse/core": "^10.2.1",
+    "@vueuse/router": "^10.9.0",
+    "@vuemap/vue-amap": "^2.0.17",
+    "sortablejs": "^1.15.2",
+    "echarts": "^5.4.3",
+    "monaco-editor": "^0.40.0",
+    "@jetlinks-web/constants": "^1.0.2",
+    "@jetlinks-web/utils": "^1.0.6",
+    "@jetlinks-web/hooks": "^1.0.10"
   },
   "devDependencies": {
-    "@vuemap/vue-amap": "^2.0.17",
-    "@vueuse/core": "^10.2.1",
-    "ant-design-vue": "^3.2.20",
-    "jetlinks-ui-components": "^1.0.34-16",
     "lodash-es": "^4.17.21",
     "pinia": "^2.1.6",
     "vue": "^3.3.4",

package/src/AMap/Map.vue

@@ -1,107 +1,110 @@
-<template>
-  <div
-    :style="props.style || { width: '100%', height: '100%' }"
-    :class="props.class"
-  >
-    <el-amap
-      v-if="amapKey"
-      v-bind="{
-        ...props,
-        ...$attrs
-      }"
-      :map-style="_mapStyle"
-      @init="initMap"
-      @click="(e) => emit('click', e)"
-      @dblclick="(e) => emit('dblclick', e)"
-      @movestart="(e) => emit('movestart', e)"
-      @moveend="(e) => emit('moveend', e)"
-      @rightclick="(e) => emit('rightclick', e)"
-    >
-      <template v-if="isOpenUi">
-        <template v-if="uiLoading">
-          <slot></slot>
-        </template>
-      </template>
-      <template v-else><slot></slot></template>
-    </el-amap>
-    <JEmpty v-else description="请配置高德地图key" style="padding: 20%" />
-  </div>
-</template>
-
-<script setup name="InitAMap" lang="ts">
-import type { CSSProperties, PropType } from 'vue';
-import { ref, computed } from 'vue'
-import { initAMapApiLoader, ElAmap } from '@vuemap/vue-amap';
-import '@vuemap/vue-amap/dist/style.css';
-import { store } from '@jetlinks-web/stores'
-import { getAMapUiPromise } from '@jetlinks-web/utils'
-import { MapProps } from './util'
-interface AMapProps {
-  style?: CSSProperties;
-  class?: string;
-  AMapUI?: string | boolean;
-  plugins?: string[]
-}
-
-const systemStore = store.SystemStore
-
-const amapKey = systemStore.systemInfo.apiKey
-
-const emit = defineEmits([
-  'initMap',
-  'click',
-  'dblclick',
-  'movestart',
-  'moveend',
-  'rightclick',
-])
-
-const props = defineProps({
-  ...MapProps(),
-  style: Object as PropType<AMapProps['style']>,
-  class: String as PropType<AMapProps['class']>,
-  AMapUI: [String, Boolean],
-  center: Array,
-  plugin: Array,
-  zooms: {
-    type: Array,
-    default: [3, 20]
-  }
-});
-
-const _mapStyle = computed(() => {
-  return props.mapStyle ? `amap://styles/${props.mapStyle}` : undefined
-})
-
-initAMapApiLoader({
-  key: amapKey || '',
-  plugin: props.plugin
-});
-
-const uiLoading = ref<boolean>(false);
-
-const map = ref<any>(null);
-
-const isOpenUi = computed(() => {
-  return 'AMapUI' in props || props.AMapUI;
-});
-const getAMapUI = () => {
-  const version = typeof props.AMapUI === 'string' ? props.AMapUI : '1.1';
-  getAMapUiPromise(version).then(() => {
-    uiLoading.value = true;
-  });
-};
-
-const initMap = (e: any) => {
-  map.value = e;
-  emit('initMap', e)
-  if (isOpenUi.value) {
-    getAMapUI();
-  }
-};
-
-</script>
-
-<style scoped>
-
-</style>
+<template>
+  <div
+    :style="props.style || { width: '100%', height: '100%' }"
+    :class="props.class"
+  >
+    <el-amap
+      v-if="hasAMapKey"
+      :map-style="_mapStyle"
+      v-bind="{
+        ...props,
+        ...$attrs
+      }"
+      @init="initMap"
+    >
+      <template v-if="uiLoading">
+        <slot></slot>
+      </template>
+      <template v-else><slot></slot></template>
+    </el-amap>
+    <Empty v-else description="请配置高德地图key" style="padding: 20%" />
+  </div>
+</template>
+
+<script setup name="InitAMap" lang="ts">
+import type { CSSProperties, PropType } from 'vue';
+import { ref, computed } from 'vue'
+import { initAMapApiLoader, ElAmap } from '@vuemap/vue-amap';
+import { getAMapUiPromise } from '@jetlinks-web/utils'
+import { MapProps } from './util'
+import { MAPConfig } from "@jetlinks-web/constants";
+import Empty from '../Empty'
+import '@vuemap/vue-amap/dist/style.css';
+
+interface AMapProps {
+  style?: CSSProperties;
+  class?: string;
+  AMapUI?: string | boolean;
+  plugins?: string[]
+}
+
+const emit = defineEmits([
+  'initMap',
+])
+
+const props = defineProps({
+  ...MapProps(),
+  style: Object as PropType<AMapProps['style']>,
+  class: String as PropType<AMapProps['class']>,
+  AMapUI: [String, Boolean],
+  center: Array,
+  plugins: Array as PropType<string[]>,
+  zooms: {
+    type: Array,
+    default: [3, 20]
+  },
+  JSKey: String,
+  WebKey: String,
+});
+
+const config = inject<{ mapStyle: any, JSKey: string, WebKey: string }>(MAPConfig)
+
+const _mapStyle = computed(() => {
+  if (props.mapStyle) {
+    return `amap://styles/${props.mapStyle}`
+  }
+
+  if (config.mapStyle) {
+    return config.mapStyle
+  }
+
+  return undefined
+})
+
+const hasAMapKey = computed(() => {
+  return !!(props.JSKey || config.JSKey)
+})
+
+initAMapApiLoader({
+  key: props.JSKey || config.JSKey || '',
+  securityJsCode: props.WebKey || config.WebKey,
+  plugins: props.plugins
+});
+
+const uiLoading = ref<boolean>(false);
+
+const map = ref<any>(null);
+
+const isOpenUi = computed(() => {
+  return 'AMapUI' in props || props.AMapUI;
+});
+const getAMapUI = () => {
+  const version = typeof props.AMapUI === 'string' ? props.AMapUI : '1.1';
+  getAMapUiPromise(version).then(() => {
+    uiLoading.value = true;
+  });
+};
+
+const initMap = (e: any) => {
+  map.value = e;
+  emit('initMap', e)
+  if (isOpenUi.value) {
+    getAMapUI();
+  }
+};
+
+</script>
+
+<style scoped>
+
+</style>

package/src/BadgeStatus/Badge.vue

@@ -1,40 +1,41 @@
-<template>
-  <j-badge
-    :color="_color"
-    :text="text"
-  ></j-badge>
-</template>
-
-<script setup lang="ts" name="BadgeStatus">
-import { defineProps, computed } from 'vue'
-import { getHexColor } from './color'
-const props = defineProps({
-  text: {
-    type: String,
-  },
-  status: {
-    type: [String, Number],
-    default: 'default',
-  },
-  /**
-   * 自定义status值颜色
-   * @example {
-   *   1: 'success',
-   *   0: 'error'
-   * }
-   */
-  statusNames: {
-    type: Object,
-    default: () => ({
-      'success': 'success',
-      'warning': 'warning',
-      'error': 'error',
-      'default': 'default',
-    })
-  },
-});
-
-const _color = computed(() => {
-  return getHexColor(props.statusNames[props.status], 1)
-})
-</script>
+<template>
+  <a-badge
+    :color="_color"
+    :text="text"
+  ></a-badge>
+</template>
+
+<script setup lang="ts" name="BadgeStatus">
+import { computed } from 'vue'
+import { getHexColor } from './color'
+
+const props = defineProps({
+  text: {
+    type: String,
+  },
+  status: {
+    type: [String, Number],
+    default: 'default',
+  },
+  /**
+   * 自定义status值颜色
+   * @example {
+   *   1: 'success',
+   *   0: 'error'
+   * }
+   */
+  statusNames: {
+    type: Object,
+    default: () => ({
+      'success': 'success',
+      'warning': 'warning',
+      'error': 'error',
+      'default': 'default',
+    })
+  },
+});
+
+const _color = computed(() => {
+  return getHexColor(props.status, props.statusNames, 1)
+})
+</script>

package/src/BadgeStatus/color.ts

@@ -1,23 +1,25 @@
-
-const color = {
-  'processing': '9, 46, 231',
-  'error': '229, 0, 18',
-  'success': '36, 178, 118',
-  'warning': '255, 144, 0',
-  'default': '102, 102, 102',
-  //告警颜色
-  'level1': '229, 0,  18',
-  'level2': '255, 148,  87',
-  'level3': '250, 189,  71',
-  'level4': '153, 153, 153',
-  'level5': '196, 196,  196'
-}
-export const getHexColor = (code: string, pe: number = 0.1) => {
-  const _color = color[code] || color.default
-  if (code === 'default') {
-    pe = 0.1
-  }
-  return `rgba(${_color}, ${pe})`
-}
-
-export default color
+const colorMap = {
+  'success': '36, 178, 118',
+  'warning': '255, 144, 0',
+  'error': '229, 0, 18',
+  'processing': '9, 46, 231',
+  'default': '102, 102, 102',
+}
+
+export const getHexColor = (code: string | number, statusNames: Record<string | number, any>,  pe: number = 0.1) => {
+  if (!code) {
+    return `rgba(102, 102, 102, ${pe})`
+  }
+
+  if (colorMap[code]) {
+    return `rgba(${colorMap[code]}, ${pe})`
+  }
+
+  if (Object.keys(statusNames).length) {
+    return statusNames[code]
+  }
+
+  return
+}
+
+export default colorMap

package/src/CardSelect/CardSelect.vue

@@ -0,0 +1,136 @@
+<template>
+  <div class="j-card-select" :style="CardSelectStyle">
+    <div
+      v-for="item in options"
+      :class="{
+        'j-card-select-item': true,
+        'disabled': disabled || item.disabled,
+        'active': selectKeys.includes(item.value)
+      }"
+      @click="() => handleSelect(item.value, item)"
+    >
+      <slot name="itemRender" :node="item" >
+        <div class="j-card-select-item-content">
+          <div class="j-card-select-title">
+            {{ item.label }}
+          </div>
+          <div class="j-card-select-describe">
+            {{ item.describe }}
+          </div>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup name="CardSelect">
+import { has } from 'lodash-es'
+const props = defineProps({
+  layout: {
+    type: String,
+    default: 'horizontal'
+  },
+  options: {
+    type: Array,
+    default: () => [],
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+  column: {
+    type: Number,
+    default: 3,
+  },
+  value: {
+    type: [String, Array],
+    default: undefined,
+  },
+  itemLayout: {
+    type: String,
+    default: 'horizontal'
+  }
+})
+
+const emit = defineEmits(['select', 'change', 'update:value'])
+
+const selectKeys = ref([])
+
+const CardSelectStyle = computed(() => {
+  const _column = props.column > 0 && props.layout === 'horizontal' ? props.column : 1
+
+  return {
+    'grid-template-columns': `repeat(${_column}, 1fr)`
+  }
+})
+
+const isMultiple = computed(() => {
+  return has(props, 'multiple') && props.multiple !== false
+})
+
+const handleSelect = (key, node) => {
+  if (props.disabled || node.disabled) {
+    return
+  }
+
+  const selectKeysSet = new Set(selectKeys.value)
+  const isActive = selectKeysSet.has(key)
+
+  if (isMultiple.value) {
+    if (isActive) {
+      selectKeysSet.delete(key)
+    } else {
+      selectKeysSet.add(key)
+    }
+    selectKeys.value = [...selectKeysSet.values()]
+    const nodes = props.options.filter(item => selectKeys.value.includes(item.value))
+    emit('select', selectKeys.value, nodes)
+    emit('change', selectKeys.value, nodes)
+    emit('update:value', selectKeys.value)
+  } else {
+    selectKeys.value = [key]
+
+    emit('select', key, node)
+    emit('change', key, node)
+    emit('update:value', key)
+  }
+}
+
+watch(() => props.value, () => {
+  selectKeys.value = isMultiple.value ? props.value : [props.value]
+}, { immediate: true })
+
+</script>
+
+<style lang="less">
+@import '../style/variable.less';
+
+.j-card-select {
+  display: grid;
+  gap: 12px;
+
+  .j-card-select-item {
+    padding: 12px;
+    border: 1px solid #e6e6e6;
+    border-radius: @border-radius-base;
+    cursor: pointer;
+
+    &.active {
+      border-color: @primary-color;
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+      opacity: 0.75;
+    }
+
+    .j-card-select-describe {
+      color: @text-color-subtitle;
+    }
+  }
+}
+</style>

package/src/CardSelect/index.ts

@@ -0,0 +1,3 @@
+import CardSelect from "./CardSelect.vue";
+
+export default CardSelect