misp-ui-library-test 0.0.1

package/src/packages/slider/src/main.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="ui-slider" :class="[size ? 'ui-slider--' + size : '', { 'ui-slider--disabled': disabled }]" @click.self="onSliderClick">
+    <div class="ui-slider__runway" :style="{ height: vertical ? sliderSize + 'px' : '' }">
+      <div
+        class="ui-slider__bar"
+        :style="barStyle"
+      ></div>
+      <div
+        v-if="showStops"
+        class="ui-slider__stops"
+        :style="stopsStyle"
+      >
+        <div
+          v-for="(stop, key) in stops"
+          :key="key"
+          class="ui-slider__stop"
+          :style="getStopStyle(stop)"
+        ></div>
+      </div>
+      <div
+        ref="button"
+        class="ui-slider__button-wrapper"
+        :style="buttonStyle"
+        @mousedown="onButtonDown"
+        @touchstart="onButtonDown"
+      >
+        <div class="ui-slider__button"></div>
+        <div v-if="showTooltip" class="ui-slider__popover">{{ currentValue }}</div>
+      </div>
+    </div>
+    <div v-if="showInput && !range" class="ui-slider__input">
+      <ui-input-number
+        v-model="currentValue"
+        :disabled="disabled"
+        :size="size"
+      ></ui-input-number>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiSlider',
+
+  props: {
+    value: {
+      type: [Number, Array],
+      default: 0
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    disabled: Boolean,
+    showInput: Boolean,
+    showInputControls: {
+      type: Boolean,
+      default: true
+    },
+    showStops: Boolean,
+    showTooltip: Boolean,
+    range: Boolean,
+    vertical: Boolean,
+    height: String,
+    size: String
+  },
+
+  data() {
+    return {
+      currentValue: this.value,
+      dragging: false,
+      sliderSize: 4
+    };
+  },
+
+  computed: {
+    stops() {
+      const stopCount = (this.max - this.min) / this.step;
+      const stops = [];
+      for (let i = 1; i < stopCount; i++) {
+        stops.push(this.min + i * this.step);
+      }
+      return stops;
+    },
+    barStyle() {
+      const percentage = this.formatPercentage(this.currentValue);
+      if (this.vertical) {
+        return { height: percentage + '%' };
+      }
+      return { width: percentage + '%' };
+    },
+    buttonStyle() {
+      const percentage = this.formatPercentage(this.currentValue);
+      if (this.vertical) {
+        return { bottom: percentage + '%', transform: 'translateY(50%)' };
+      }
+      return { left: percentage + '%', transform: 'translateX(-50%)' };
+    },
+    stopsStyle() {
+      if (this.vertical) {
+        return { height: '100%' };
+      }
+      return { width: '100%' };
+    }
+  },
+
+  watch: {
+    value(val) {
+      this.currentValue = val;
+    },
+    currentValue(val) {
+      this.$emit('input', val);
+    }
+  },
+
+  methods: {
+    formatPercentage(value) {
+      return ((value - this.min) / (this.max - this.min)) * 100;
+    },
+    getStopStyle(stop) {
+      const percentage = this.formatPercentage(stop);
+      if (this.vertical) {
+        return { bottom: percentage + '%', transform: 'translateY(50%)' };
+      }
+      return { left: percentage + '%', transform: 'translateX(-50%)' };
+    },
+    onButtonDown(e) {
+      if (this.disabled) return;
+      e.preventDefault();
+      this.dragging = true;
+
+      const mouseMove = (e) => {
+        this.onDrag(e);
+      };
+
+      const mouseUp = () => {
+        this.dragging = false;
+        document.removeEventListener('mousemove', mouseMove);
+        document.removeEventListener('mouseup', mouseUp);
+      };
+
+      document.addEventListener('mousemove', mouseMove);
+      document.addEventListener('mouseup', mouseUp);
+    },
+    onDrag(e) {
+      const slider = this.$el.querySelector('.ui-slider__runway');
+      const rect = slider.getBoundingClientRect();
+      let percentage;
+
+      if (this.vertical) {
+        percentage = ((rect.bottom - e.clientY) / rect.height) * 100;
+      } else {
+        percentage = ((e.clientX - rect.left) / rect.width) * 100;
+      }
+
+      percentage = Math.max(0, Math.min(100, percentage));
+      const value = this.min + (percentage / 100) * (this.max - this.min);
+      const stepValue = this.step * Math.round(value / this.step);
+
+      this.currentValue = Math.max(this.min, Math.min(this.max, stepValue));
+    },
+    onSliderClick(e) {
+      if (this.disabled) return;
+      this.onDrag(e);
+    }
+  }
+};
+</script>

package/src/packages/spinner/index.js

@@ -0,0 +1,12 @@
+/**
+ * Spinner 加载图标组件
+ */
+
+import UiSpinner from './src/main.vue'
+
+// 自动安装
+UiSpinner.install = function(Vue) {
+  Vue.component(UiSpinner.name, UiSpinner)
+}
+
+export default UiSpinner

package/src/packages/spinner/src/main.vue

@@ -0,0 +1,27 @@
+<template>
+  <span class="ui-spinner">
+    <svg class="ui-spinner-inner" viewBox="0 0 50 50" :style="{ width: radius/2 + 'px', height: radius/2 + 'px' }">
+      <circle class="path" cx="25" cy="25" r="20" fill="none" :stroke="strokeColor" :stroke-width="strokeWidth"></circle>
+    </svg>
+  </span>
+</template>
+<script>
+export default {
+  name: 'UiSpinner',
+  props: {
+    type: String,
+    radius: {
+      type: Number,
+      default: 100
+    },
+    strokeWidth: {
+      type: Number,
+      default: 5
+    },
+    strokeColor: {
+      type: String,
+      default: '#efefef'
+    }
+  }
+};
+</script>

package/src/packages/statistic/index.js

@@ -0,0 +1,12 @@
+/**
+ * Statistic 统计数值组件
+ */
+
+import UiStatistic from './src/main.vue'
+
+// 自动安装
+UiStatistic.install = function(Vue) {
+  Vue.component(UiStatistic.name, UiStatistic)
+}
+
+export default UiStatistic

package/src/packages/statistic/src/main.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="ui-statistic">
+    <div class="ui-statistic__head" v-if="title || $slots.title">
+      <slot name="title">
+        <span class="ui-statistic__title">{{ title }}</span>
+      </slot>
+    </div>
+    <div class="ui-statistic__content">
+      <span class="ui-statistic__prefix" v-if="prefix || $slots.prefix">
+        <slot name="prefix">{{ prefix }}</slot>
+      </span>
+      <span class="ui-statistic__number" :style="valueStyle">{{ disposeValue }}</span>
+      <span class="ui-statistic__suffix" v-if="suffix || $slots.suffix">
+        <slot name="suffix">{{ suffix }}</slot>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UiStatistic',
+  props: {
+    decimalSeparator: {
+      type: String,
+      default: '.'
+    },
+    groupSeparator: {
+      type: String,
+      default: ','
+    },
+    precision: {
+      type: Number,
+      default: null
+    },
+    value: {
+      type: [String, Number],
+      default: ''
+    },
+    prefix: {
+      type: String,
+      default: ''
+    },
+    suffix: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    valueStyle: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      disposeValue: ''
+    };
+  },
+  watch: {
+    value() {
+      this.dispose();
+    },
+    groupSeparator() {
+      this.dispose();
+    }
+  },
+  created() {
+    this.dispose();
+  },
+  methods: {
+    magnification(num, mulriple = 1000, groupSeparator = ',') {
+      const level = String(mulriple).length;
+      return num.replace(new RegExp(`(\\d)(?=(\\d{${level - 1}})+$)`, 'g'), `$1${groupSeparator}`);
+    },
+    dispose() {
+      let { value, groupSeparator } = this;
+      if (typeof value !== 'number') return;
+
+      if (this.precision !== null) {
+        value = value.toFixed(this.precision);
+      }
+
+      let [integer, decimal] = String(value).split('.');
+
+      if (groupSeparator) {
+        integer = this.magnification(integer, 1000, groupSeparator);
+      }
+
+      let result = `${integer}${decimal ? this.decimalSeparator + decimal : ''}`;
+      this.disposeValue = result;
+      return result;
+    }
+  }
+};
+</script>

package/src/packages/status-timeline-chart/index.js

@@ -0,0 +1,7 @@
+import UiStatusTimelineChart from './src/main.vue'
+
+UiStatusTimelineChart.install = function(Vue) {
+  Vue.component(UiStatusTimelineChart.name, UiStatusTimelineChart)
+}
+
+export default UiStatusTimelineChart

package/src/packages/status-timeline-chart/src/constants.js

@@ -0,0 +1,20 @@
+/**
+ * 状态时序图默认色卡（按 yAxis / statusCode 顺序依次取色，可被 colorMap 覆盖）
+ */
+export const DEFAULT_STATUS_COLOR_PALETTE = [
+  '#56C08D',
+  '#EDC66B',
+  '#EA6E64',
+  '#9CDFDF',
+  '#1B73BB',
+  '#CB6B96',
+  '#994C0A',
+  '#006C45',
+  '#EAA87E',
+  '#03AAB6',
+  '#F9DEA7',
+  '#F4B4AC',
+  '#B3D1FD',
+  '#C47738',
+  '#5DA3EA'
+]