hlq-cli 1.0.0

package/templates/src/components/chart/radarChart.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="chartConent">
+    <div ref="chartRef" class="chart-container"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, watch, onUnmounted, nextTick } from "vue";
+import * as echarts from "echarts";
+import { colorList, colorList2 } from "./color";
+
+interface Props {
+  data?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  data: () => ({
+    indicator: [
+      { name: "销售", max: 100 },
+      { name: "利润", max: 100 },
+      { name: "市场", max: 100 },
+      { name: "研发", max: 100 },
+      { name: "客服", max: 100 },
+      { name: "管理", max: 100 }
+    ],
+    series: [
+      {
+        name: "2023",
+        data: [65, 59, 90, 81, 56, 55]
+      },
+      {
+        name: "2024",
+        data: [28, 48, 40, 19, 96, 27]
+      }
+    ]
+  }),
+});
+
+const chartRef = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  nextTick(() => {
+    chart = echarts.init(chartRef.value);
+    const option = {
+      tooltip: {},
+      legend: {
+        data: props.data.series.map((item: any) => item.name),
+        top: "top",
+        right: "10%",
+        orient: "horizontal"
+      },
+      radar: {
+        indicator: props.data.indicator,
+        radius: "65%"
+      },
+      series: props.data.series.map((item: any, index: number) => ({
+        name: item.name,
+        type: "radar",
+        data: [
+          {
+            value: item.data,
+            name: item.name,
+            areaStyle: {
+              color: colorList2[index % colorList2.length]
+            },
+            lineStyle: {
+              color: colorList[index % colorList.length]
+            },
+            itemStyle: {
+              color: colorList[index % colorList.length]
+            }
+          }
+        ]
+      }))
+    };
+    chart.setOption(option);
+    chart?.resize();
+  });
+};
+
+const handleResize = () => {
+  chart?.resize();
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+  chart?.dispose();
+});
+
+watch(
+  () => props.data,
+  () => {
+    initChart();
+  },
+  { deep: true },
+);
+</script>
+<style lang="scss" scoped>
+.chartConent {
+  height: 100%;
+}
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/templates/src/components/chart/scatterChart.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="chartConent">
+    <div ref="chartRef" class="chart-container"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, watch, onUnmounted, nextTick } from "vue";
+import * as echarts from "echarts";
+import { colorList, colorList2 } from "./color";
+
+interface Props {
+  data?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  data: () => ({
+    series: [
+      {
+        name: "Group A",
+        data: [
+          [10.0, 8.04],
+          [8.07, 6.95],
+          [13.0, 7.58],
+          [9.05, 8.81],
+          [11.0, 8.33],
+          [14.0, 9.96],
+          [6.08, 7.24],
+          [4.03, 4.26],
+          [12.0, 10.84],
+          [7.03, 4.82],
+          [5.0, 5.68]
+        ]
+      },
+      {
+        name: "Group B",
+        data: [
+          [10.0, 9.14],
+          [8.0, 8.14],
+          [13.0, 8.74],
+          [9.05, 8.77],
+          [11.0, 9.26],
+          [14.0, 8.1],
+          [6.08, 6.13],
+          [4.03, 3.1],
+          [12.0, 9.13],
+          [7.03, 7.26],
+          [5.0, 4.74]
+        ]
+      }
+    ]
+  }),
+});
+
+const chartRef = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  nextTick(() => {
+    chart = echarts.init(chartRef.value);
+    const option = {
+      tooltip: {
+        trigger: "item",
+        axisPointer: {
+          type: "cross"
+        }
+      },
+      legend: {
+        data: props.data.series.map((item: any) => item.name),
+        top: "top",
+        right: "10%",
+        orient: "horizontal"
+      },
+      grid: {
+        left: "3%",
+        right: "4%",
+        bottom: "3%",
+        top: "20%",
+        containLabel: true
+      },
+      xAxis: {
+        type: "value",
+        name: "X",
+        splitLine: {
+          lineStyle: {
+            type: "dashed"
+          }
+        }
+      },
+      yAxis: {
+        type: "value",
+        name: "Y",
+        splitLine: {
+          lineStyle: {
+            type: "dashed"
+          }
+        }
+      },
+      series: props.data.series.map((item: any, index: number) => ({
+        name: item.name,
+        type: "scatter",
+        data: item.data,
+        symbolSize: 10,
+        itemStyle: {
+          color: colorList[index % colorList.length]
+        }
+      }))
+    };
+    chart.setOption(option);
+    chart?.resize();
+  });
+};
+
+const handleResize = () => {
+  chart?.resize();
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+  chart?.dispose();
+});
+
+watch(
+  () => props.data,
+  () => {
+    initChart();
+  },
+  { deep: true },
+);
+</script>
+<style lang="scss" scoped>
+.chartConent {
+  height: 100%;
+}
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/templates/src/components/chart/sunburstChart.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="chartConent">
+    <div ref="chartRef" class="chart-container"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, watch, onUnmounted, nextTick } from "vue";
+import * as echarts from "echarts";
+import { colorList, colorList2 } from "./color";
+
+interface Props {
+  data?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  data: () => ({
+    series: [
+      {
+        name: "旭日图",
+        data: [
+          {
+            name: "类别1",
+            children: [
+              {
+                name: "子类1-1",
+                value: 10
+              },
+              {
+                name: "子类1-2",
+                value: 20
+              },
+              {
+                name: "子类1-3",
+                value: 15
+              }
+            ]
+          },
+          {
+            name: "类别2",
+            children: [
+              {
+                name: "子类2-1",
+                value: 25
+              },
+              {
+                name: "子类2-2",
+                value: 30
+              }
+            ]
+          },
+          {
+            name: "类别3",
+            children: [
+              {
+                name: "子类3-1",
+                value: 18
+              },
+              {
+                name: "子类3-2",
+                value: 22
+              },
+              {
+                name: "子类3-3",
+                value: 16
+              },
+              {
+                name: "子类3-4",
+                value: 24
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }),
+});
+
+const chartRef = ref<HTMLElement | null>(null);
+let chart: echarts.ECharts | null = null;
+
+const initChart = () => {
+  if (!chartRef.value) return;
+  nextTick(() => {
+    chart = echarts.init(chartRef.value);
+    const option = {
+      tooltip: {
+        trigger: "item"
+      },
+      legend: {
+        data: props.data.series[0].data.map((item: any) => item.name),
+        top: "top",
+        right: "10%",
+        orient: "horizontal"
+      },
+      series: [
+        {
+          name: "旭日图",
+          type: "sunburst",
+          radius: ["10%", "90%"],
+          center: ["50%", "50%"],
+          data: props.data.series[0].data,
+          sort: null,
+          emphasis: {
+            focus: "ancestor"
+          },
+          levels: [
+            {},
+            {
+              r0: "15%",
+              r: "35%",
+              itemStyle: {
+                borderWidth: 2
+              },
+              label: {
+                rotate: "tangential"
+              }
+            },
+            {
+              r0: "35%",
+              r: "70%",
+              label: {
+                align: "right"
+              }
+            },
+            {
+              r0: "70%",
+              r: "72%",
+              label: {
+                position: "outside",
+                padding: 3,
+                silent: false
+              },
+              itemStyle: {
+                borderWidth: 3
+              }
+            }
+          ],
+          itemStyle: {
+            color: function(params: any) {
+              const depth = params.treePathInfo.length;
+              const colors = colorList;
+              return colors[(params.dataIndex + depth) % colors.length];
+            }
+          }
+        }
+      ]
+    };
+    chart.setOption(option);
+    chart?.resize();
+  });
+};
+
+const handleResize = () => {
+  chart?.resize();
+};
+
+onMounted(() => {
+  initChart();
+  window.addEventListener("resize", handleResize);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", handleResize);
+  chart?.dispose();
+});
+
+watch(
+  () => props.data,
+  () => {
+    initChart();
+  },
+  { deep: true },
+);
+</script>
+<style lang="scss" scoped>
+.chartConent {
+  height: 100%;
+}
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/templates/src/components/descript/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <el-descriptions
+    style="height: 100%; width: 100%; overflow-y: auto"
+    class="margin-top"
+    :title="descriptConfig.title"
+    :column="3"
+    border
+  >
+    <el-descriptions-item :rowspan="4" :colspan="1" label="图片" :width="180">
+      <el-image
+        style="width: 130px; height: 130px"
+        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+      />
+    </el-descriptions-item>
+    <el-descriptions-item
+      v-for="item in configList"
+      :label="item.label"
+      :key="item.key"
+      :span="1"
+    >
+      <template v-if="item.type === 'tag'">
+        <el-tag size="small">{{ item.value || '' }}</el-tag>
+      </template>
+      <template v-else>
+        {{ (data && data[item.key]) || item.value || '' }}
+        <!-- {{ showValue(item) }} -->
+      </template>
+    </el-descriptions-item>
+  </el-descriptions>
+</template>
+<script lang="ts" setup>
+interface Props {
+  descriptConfig: Data
+  configList: any[]
+  data?: Data
+}
+const props = withDefaults(defineProps<Props>(), {
+  descriptConfig: () => {
+    return {
+      title: '信息',
+    }
+  },
+})
+</script>
+<style lang="scss" scoped></style>

package/templates/src/components/dialog/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-dialog
+    :destroy-on-close="destroy"
+    v-model="state.show"
+    :title="title"
+    :width="width"
+    @close="close"
+    draggable
+  >
+    <slot></slot>
+    <template #footer v-if="footerShow">
+      <div class="drawer-footer">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="submit"> 确定 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { reactive, watch } from 'vue'
+
+interface Props {
+  modelValue: boolean
+  title: string
+  destroy?: boolean
+  width?: string
+  footerShow?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  title: '',
+  destroy: false,
+  footerShow: true,
+})
+const state = reactive({
+  show: false,
+})
+const emits = defineEmits(['update:modelValue', 'submit'])
+// 关闭
+const close = () => {
+  emits('update:modelValue', false)
+}
+// 确定
+const submit = () => {
+  emits('submit')
+}
+watch(
+  () => props.modelValue,
+  (val: boolean) => {
+    state.show = val
+  },
+)
+</script>
+<style lang="scss" scoped></style>

package/templates/src/components/drawer/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-drawer
+    :destroy-on-close="destroy"
+    v-model="state.show"
+    :title="title"
+    :size="width"
+    @close="close"
+  >
+    <slot></slot>
+    <template #footer v-if="footerShow">
+      <div class="drawer-footer">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary" @click="submit"> 确定 </el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script lang="ts" setup>
+import { reactive, watch } from "vue";
+
+interface Props {
+  modelValue: boolean;
+  title: string;
+  destroy?: boolean;
+  width?: string;
+  footerShow?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  title: "",
+  destroy: false,
+  footerShow: true,
+});
+const state = reactive({
+  show: false,
+});
+const emits = defineEmits(["update:modelValue", "submit"]);
+// 关闭
+const close = () => {
+  emits("update:modelValue", false);
+};
+// 确定
+const submit = () => {
+  emits("submit");
+};
+watch(
+  () => props.modelValue,
+  (val) => {
+    state.show = val;
+  }
+);
+</script>
+<style lang="scss" scoped></style>

package/templates/src/components/form/component/cascader.vue

@@ -0,0 +1,65 @@
+<template>
+  <el-cascader
+    clearable
+    ref="cascaderRef"
+    v-model="formData[config.key]"
+    :placeholder="config.placeholder || '请选择' + config.label"
+    :disabled="disabled"
+    :options="
+      config.options && config.options.length ? config.options : state.options
+    "
+    :props="state.cascaderProp"
+    style="width: 100%"
+    filterable
+    :filter-method="filterMethod"
+    @change="close"
+  />
+</template>
+<script lang="ts" setup>
+import { debounce } from 'lodash'
+import { nextTick, ref } from 'vue'
+const cascaderRef = ref()
+const closeFlag = ref(false)
+const debouncedFilter = debounce((keyword: string) => {
+  nextTick(() => {
+    // 获取内部过滤后的选项
+    const options = cascaderRef.value?.cascaderPanelRef?.getFlattedNodes()
+    const filteredOptions = options.filter((option: any) => {
+      return option.label.indexOf(keyword) > -1
+    })
+    if (filteredOptions.length > 0) {
+      closeFlag.value = true
+      cascaderRef.value.cascaderPanelRef.handleCheckChange(
+        filteredOptions[0],
+        true,
+        false,
+      )
+      cascaderRef.value.cascaderPanelRef.calculateCheckedValue()
+      setTimeout(() => {
+        closeFlag.value = false
+      })
+    }
+  })
+}, 1000)
+interface Props {
+  config: FormCascaderConfig
+  data?: Data
+  formData: Data
+  disabled: boolean
+  state: any
+}
+const props = defineProps<Props>()
+const filterMethod = (node: any, keyword: string) => {
+  debouncedFilter(keyword)
+  const { label } = node
+  return label.indexOf(keyword) > -1
+}
+const emits = defineEmits(['change'])
+const close = (data?: any) => {
+  emits('change', data)
+  if (cascaderRef.value && !closeFlag.value) {
+    cascaderRef.value.togglePopperVisible(false)
+  }
+}
+</script>
+<style lang="scss" scoped></style>

package/templates/src/components/form/component/checkbox.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-checkbox-group
+    v-model="formData[config.key]"
+    style="width: 100%"
+    @change="change"
+  >
+    <el-checkbox
+      v-for="item in config.options"
+      :key="item.value"
+      :value="item.value"
+    >
+      {{ item.label }}
+    </el-checkbox>
+  </el-checkbox-group>
+</template>
+<script lang="ts" setup>
+interface Props {
+  config: FormCheckBoxConfig;
+  data?: Data;
+  formData: Data;
+  disabled: boolean;
+  state: any;
+}
+const props = defineProps<Props>();
+
+const emits = defineEmits(["change"]);
+const change = (val: any) => {
+  emits("change", val);
+};
+</script>
+<style lang="scss" scoped></style>