@utogether/udp-core 1.0.0

package/src/components/ReSplitPane/index.tsx

@@ -0,0 +1,119 @@
+import { defineComponent, ref, unref, computed, type PropType } from 'vue';
+import resizer from './resizer';
+import './index.css';
+
+export interface ContextProps {
+  minPercent: number;
+  defaultPercent: number;
+  split: string;
+}
+
+/** 切割面板组件 */
+export default defineComponent({
+  name: 'SplitPane',
+  components: { resizer },
+  props: {
+    splitSet: {
+      type: Object as PropType<ContextProps>,
+      require: true
+    }
+  },
+  emits: ['resize'],
+  setup(props, ctx) {
+    const active = ref(false);
+    const hasMoved = ref(false);
+    const percent = ref(props.splitSet?.defaultPercent);
+    const type = props.splitSet?.split === 'vertical' ? 'width' : 'height';
+    const resizeType = props.splitSet?.split === 'vertical' ? 'left' : 'top';
+
+    const leftClass = ref(['splitter-pane splitter-paneL', props.splitSet?.split]);
+
+    const rightClass = ref(['splitter-pane splitter-paneR', props.splitSet?.split]);
+
+    const cursor = computed(() => {
+      return active.value
+        ? props.splitSet?.split === 'vertical'
+          ? { cursor: 'col-resize' }
+          : { cursor: 'row-resize' }
+        : { cursor: 'default' };
+    });
+
+    const onClick = (): void => {
+      if (!hasMoved.value) {
+        percent.value = 50;
+        ctx.emit('resize', percent.value);
+      }
+    };
+
+    const onMouseDown = (): void => {
+      active.value = true;
+      hasMoved.value = false;
+    };
+
+    const onMouseUp = (): void => {
+      active.value = false;
+    };
+
+    const onMouseMove = (e: any): void => {
+      if (e.buttons === 0 || e.which === 0) {
+        active.value = false;
+      }
+
+      if (active.value) {
+        let offset = 0;
+        let target = e.currentTarget;
+        if (props.splitSet?.split === 'vertical') {
+          while (target) {
+            offset += target.offsetLeft;
+            target = target.offsetParent;
+          }
+        } else {
+          while (target) {
+            offset += target.offsetTop;
+            target = target.offsetParent;
+          }
+        }
+
+        const currentPage = props.splitSet?.split === 'vertical' ? e.pageX : e.pageY;
+        const targetOffset =
+          props.splitSet?.split === 'vertical'
+            ? e.currentTarget.offsetWidth
+            : e.currentTarget.offsetHeight;
+        const percents = Math.floor(((currentPage - offset) / targetOffset) * 10000) / 100;
+
+        if (percents > props.splitSet?.minPercent && percents < 100 - props.splitSet?.minPercent) {
+          percent.value = percents;
+        }
+
+        ctx.emit('resize', percent.value);
+
+        hasMoved.value = true;
+      }
+    };
+
+    return () => (
+      <>
+        <div
+          class="vue-splitter-container clearfix"
+          style={unref(cursor)}
+          onMouseup={() => onMouseUp()}
+          onMousemove={() => onMouseMove(event)}
+        >
+          <div class={unref(leftClass)} style={{ [unref(type)]: unref(percent) + '%' }}>
+            {ctx.slots.paneL()}
+          </div>
+          <resizer
+            style={`${unref([resizeType])}:${unref(percent)}%`}
+            split={props.splitSet?.split}
+            onMousedown={() => onMouseDown()}
+            onClick={() => onClick()}
+          ></resizer>
+          <div class={unref(rightClass)} style={{ [unref(type)]: 100 - unref(percent) + '%' }}>
+            {ctx.slots.paneR()}
+          </div>
+          <div v-show={unref(active)} class="vue-splitter-container-mask"></div>
+        </div>
+      </>
+    );
+  }
+});

package/src/components/ReSplitPane/resizer.css

@@ -0,0 +1,45 @@
+.splitter-pane-resizer {
+  box-sizing: border-box;
+  background: #000;
+  position: absolute;
+  opacity: 0.2;
+  z-index: 1;
+  background-clip: padding;
+  background-clip: padding-box;
+}
+
+.splitter-pane-resizer.horizontal {
+  height: 6px;
+  width: 100%;
+  background: #e5e6eb;
+  cursor: row-resize;
+}
+
+.splitter-pane-resizer.horizontal:before {
+  content: '\eda3';
+  font-family: 'iconfont';
+  font-size: 13px;
+  color: #000;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.splitter-pane-resizer.vertical {
+  width: 6px;
+  height: 100%;
+  background: #e5e6eb;
+  cursor: col-resize;
+}
+
+.splitter-pane-resizer.vertical:before {
+  content: '\e647';
+  font-family: 'iconfont';
+  font-size: 13px;
+  color: #000;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

package/src/components/ReSplitPane/resizer.tsx

@@ -0,0 +1,30 @@
+/*
+ * @Author: wei.li
+ * @Date: 2022-05-24 11:26:59
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-08-24 11:42:11
+ * @Description: file content
+ */
+import { computed, unref, defineComponent } from 'vue';
+import './resizer.css';
+
+export default defineComponent({
+  name: 'SuResizer',
+  props: {
+    split: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props) {
+    const classes = computed(() => {
+      return ['splitter-pane-resizer', props.split, props.className].join(' ');
+    });
+
+    return () => <div class={unref(classes)}></div>;
+  }
+});

package/src/components/SuCharts/index.ts

@@ -0,0 +1,36 @@
+/*
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:02:30
+ * @LastEditors: wei.li
+ * @LastEditTime: 2023-03-30 09:11:42
+ * @Description: file content
+ */
+import type { App } from 'vue';
+import bar from './src/EchartBar.vue';
+import reGithub from './src/UserInfo.vue';
+import line from './src/echart-line.vue';
+import pie from './src/echart-pie.vue';
+
+export const ChartBar = Object.assign(bar, {
+  install(app: App) {
+    app.component(bar.name, bar);
+  }
+});
+
+export const ReGithub = Object.assign(reGithub, {
+  install(app: App) {
+    app.component(reGithub.name, reGithub);
+  }
+});
+
+export const ChartLine = Object.assign(line, {
+  install(app: App) {
+    app.component(line.name, line);
+  }
+});
+
+export const ChartPie = Object.assign(pie, {
+  install(app: App) {
+    app.component(ChartPie.name, pie);
+  }
+});

package/src/components/SuCharts/src/EchartBar.vue

@@ -0,0 +1,134 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:02:30
+ * @LastEditors: wei.li
+ * @LastEditTime: 2023-03-30 09:04:23
+ * @Description: file content
+-->
+
+<script setup lang="ts">
+import { watch, onBeforeMount, onMounted, nextTick } from 'vue';
+import { ECharts } from 'echarts';
+import echarts from '@/plugins/echarts';
+import { useEventListener, tryOnUnmounted, useTimeoutFn } from '@vueuse/core';
+
+defineOptions({ name: 'EchartBar' });
+
+let echartInstance: ECharts;
+
+const props = defineProps({
+  index: {
+    type: Number,
+    default: 0
+  },
+  option: {
+    type: Object
+  },
+  data: { type: Object }
+});
+
+watch(
+  () => props.data,
+  () => {
+    console.log('-------pie---------', props.data);
+    echartInstance.setOption(props.data);
+  }
+);
+
+watch(
+  () => props.option,
+  () => {
+    // const option = getOption();
+    // option.series[0].data = props.value;
+    console.log('----------------', props.option);
+    echartInstance.setOption(props.option);
+  },
+  {
+    deep: true
+  }
+);
+
+// const getOption = () => {
+//   const option = {
+//     tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+//     grid: { bottom: '2%', height: '80%', left: '3%', containLabel: true },
+//     xAxis: {
+//       type: 'category',
+//       axisTick: { alignWithLabel: true },
+//       axisLabel: { interval: 0, color: '#fff' },
+//       data: ['open_issues', 'forks', 'watchers', 'star']
+//     },
+
+//     yAxis: { type: 'value', axisLabel: { color: '#fff' } },
+//     series: [
+//       {
+//         name: '制作信息',
+//         type: 'bar',
+//         itemStyle: {
+//           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+//             { offset: 0, color: '#83bff6' },
+//             { offset: 0.5, color: '#188df0' },
+//             { offset: 1, color: '#188df0' }
+//           ])
+//         },
+//         emphasis: {
+//           itemStyle: {
+//             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+//               { offset: 0, color: '#2378f7' },
+//               { offset: 0.7, color: '#2378f7' },
+//               { offset: 1, color: '#83bff6' }
+//             ])
+//           }
+//         },
+//         data: [300, 500, 800, 1395]
+//       }
+//     ]
+//   };
+
+//   Object.assign(option, props.option);
+//   return option;
+// };
+
+function initechartInstance() {
+  const echartDom = document.querySelector('.bar' + props.index);
+  if (!echartDom) return;
+  // @ts-ignore
+  echartInstance = echarts.init(echartDom);
+  echartInstance.clear(); //清除旧画布 重新渲染
+  echartInstance.setOption(props.option);
+  echartInstance.on('click', click);
+}
+
+onBeforeMount(() => {
+  nextTick(() => {
+    initechartInstance();
+  });
+});
+
+onMounted(() => {
+  nextTick(() => {
+    useEventListener('resize', () => {
+      if (!echartInstance) return;
+      useTimeoutFn(() => {
+        echartInstance.resize();
+      }, 180);
+    });
+  });
+});
+
+tryOnUnmounted(() => {
+  if (!echartInstance) return;
+  echartInstance.dispose();
+  echartInstance = null;
+});
+
+const click = e => {
+  emit('onClick', e);
+};
+
+const emit = defineEmits<{ (e: 'onClick', refresh?: string): void }>();
+</script>
+
+<template>
+  <div :class="'bar' + props.index" style="width: 100%; height: 100%" />
+</template>

package/src/components/SuCharts/src/UserInfo.vue

@@ -0,0 +1,78 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:02:30
+ * @LastEditors: wei.li
+ * @LastEditTime: 2021-12-02 09:28:42
+ * @Description: file content
+-->
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useSystemStoreHook } from '@/store/modules/system';
+const employee = useSystemStoreHook().getEmployee;
+const lists = ref([
+  { type: 'info', label: '善良' },
+  { type: 'success', label: '好学' },
+  // { type: 'info', label: '幽默' },
+  { type: 'danger', label: '旅游' },
+  { type: 'warning', label: '追剧' }
+]);
+</script>
+
+<template>
+  <el-descriptions class="margin-top" direction="vertical" :column="3" border>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-user" />
+        {{ $t('message.userName') }}
+      </template>
+      {{ employee.userName }}
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-location-outline" />
+        {{ $t('message.employeeName') }}
+      </template>
+      {{ employee.employeeName }}
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-mobile-phone" />
+        {{ $t('message.mobile') }}
+      </template>
+      {{ employee.mobile }}
+    </el-descriptions-item>
+  </el-descriptions>
+  <el-descriptions class="margin-top" direction="vertical" :column="2" border>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-tickets" />
+        标签
+      </template>
+      <el-tag v-for="item in lists" :key="item.label" :type="item.type" effect="dark">
+        {{ item.label }}
+      </el-tag>
+    </el-descriptions-item>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-office-building" />
+        {{ $t('message.department') }}
+      </template>
+      {{ employee.department }}
+    </el-descriptions-item>
+  </el-descriptions>
+  <el-descriptions class="margin-top" direction="vertical" :column="1" border>
+    <el-descriptions-item>
+      <template #label>
+        <i class="el-icon-notebook-1" />
+        留言
+      </template>
+      好好学习，天天向上
+    </el-descriptions-item>
+  </el-descriptions>
+</template>
+
+<style scoped>
+.el-tag--mini {
+  margin-right: 10px !important;
+}
+</style>

package/src/components/SuCharts/src/echart-line.vue

@@ -0,0 +1,85 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:02:30
+ * @LastEditors: wei.li
+ * @LastEditTime: 2021-12-02 09:29:13
+ * @Description: file content
+-->
+
+<template>
+  <div :class="'line' + props.index" style="width: 100%; height: 100%" />
+</template>
+
+<script lang="ts">
+export default {
+  name: 'EchartLine'
+};
+</script>
+
+<script setup lang="ts">
+import { watch, onBeforeMount, onMounted, nextTick } from 'vue';
+import { ECharts } from 'echarts';
+import echarts from '@/plugins/echarts';
+import { useEventListener, tryOnUnmounted, useTimeoutFn } from '@vueuse/core';
+
+let echartInstance: ECharts;
+
+const props = defineProps({
+  index: {
+    type: Number,
+    default: 0
+  },
+  option: { type: Object }
+});
+
+watch(
+  () => props.option,
+  () => {
+    // echartInstance.resize();
+    echartInstance.setOption(props.option);
+  },
+  {
+    deep: true
+  }
+);
+
+function initechartInstance() {
+  const echartDom = document.querySelector('.line' + props.index);
+  if (!echartDom) return;
+  // @ts-ignore
+  echartInstance = echarts.init(echartDom);
+  echartInstance.clear(); //清除旧画布 重新渲染
+
+  echartInstance.setOption(props.option);
+  echartInstance.on('click', click);
+}
+
+onBeforeMount(() => {
+  nextTick(() => {
+    initechartInstance();
+  });
+});
+
+onMounted(() => {
+  nextTick(() => {
+    useEventListener('resize', () => {
+      if (!echartInstance) return;
+      useTimeoutFn(() => {
+        echartInstance.resize();
+      }, 180);
+    });
+  });
+});
+
+tryOnUnmounted(() => {
+  if (!echartInstance) return;
+  echartInstance.dispose();
+  echartInstance = null;
+});
+
+const click = e => {
+  emit('onClick', e);
+};
+
+const emit = defineEmits<{ (e: 'onClick', refresh?: string): void }>();
+</script>

package/src/components/SuCharts/src/echart-pie.vue

@@ -0,0 +1,95 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:02:30
+ * @LastEditors: wei.li
+ * @LastEditTime: 2023-04-14 16:21:49
+ * @Description: file content
+-->
+
+<template>
+  <div :class="'pie' + props.index" style="width: 100%; height: 100%" />
+</template>
+
+<script setup lang="ts">
+import { watch, onBeforeMount, onMounted, nextTick } from 'vue';
+import { ECharts } from 'echarts';
+import echarts from '@/plugins/echarts';
+import { useAppStoreHook } from '@/store/modules/app';
+import { delay } from '@utogether/utils';
+import { useEventListener, tryOnUnmounted, useTimeoutFn } from '@vueuse/core';
+
+let echartInstance: ECharts;
+
+const props = defineProps({
+  index: { type: Number, default: 0 },
+  option: { type: Object },
+  data: { type: Object }
+});
+
+watch(
+  () => useAppStoreHook().getSidebarStatus,
+  () => {
+    delay(360).then(() => echartInstance.resize());
+  }
+);
+
+watch(
+  () => props.data,
+  () => {
+    console.log('----------------', props.data);
+    console.log('----------------', props.option);
+    // initechartInstance();
+    echartInstance.setOption(props.data);
+  }
+);
+
+watch(
+  () => props.option,
+  () => {
+    echartInstance.setOption(props.option);
+  },
+  {
+    deep: true
+  }
+);
+
+function initechartInstance() {
+  const echartDom = document.querySelector('.pie' + props.index);
+  if (!echartDom) return;
+  // @ts-ignore
+  echartInstance = echarts.init(echartDom);
+  echartInstance.clear(); //清除旧画布 重新渲染
+
+  echartInstance.setOption(props.option);
+  echartInstance.on('click', click);
+}
+
+onBeforeMount(() => {
+  nextTick(() => {
+    initechartInstance();
+  });
+});
+
+onMounted(() => {
+  nextTick(() => {
+    useEventListener('resize', () => {
+      if (!echartInstance) return;
+      useTimeoutFn(() => {
+        echartInstance.resize();
+      }, 180);
+    });
+  });
+});
+
+tryOnUnmounted(() => {
+  if (!echartInstance) return;
+  echartInstance.dispose();
+  echartInstance = null;
+});
+
+const click = e => {
+  emit('onClick', e);
+};
+
+const emit = defineEmits<{ (e: 'onClick', refresh?: string): void }>();
+</script>