bohui-vue 1.0.1

package/templates/vue-project/src/assets/styles/reset.css

@@ -0,0 +1,186 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+body {
+    line-height: 1;
+}
+ol,
+ul {
+    list-style: none;
+}
+a {
+    text-decoration: none;
+}
+blockquote,
+q {
+    quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: "";
+    content: none;
+}
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+#classManagement .luboConfig .el-icon-close:before {
+    content: "关闭";
+    font-size: 12px;
+}
+
+#classManagement .el-dialog__title {
+    font-size: 12px;
+}
+#classManagement .luboConfig .el-dialog__footer {
+    text-align: center;
+}
+#classManagement .luboConfig .el-dialog__header {
+    padding: 6px 0;
+    border-bottom: 1px solid #ccc;
+}
+#classManagement .luboConfig .el-dialog__headerbtn {
+    top: 13px;
+    right: 64px;
+    font-size: 12px;
+}
+#classManagement .luboConfig .el-dialog {
+    border: 1px solid #ccc;
+}
+#classManagement .luboConfig .el-dialog__body {
+    display: block;
+}
+#classManagement .luboConfig .el-button {
+    padding: 8px 40px;
+    background-color: #169bd5;
+    font-size: 12px;
+}
+#classManagement .rightConfig .el-dialog__header {
+    width: 95%;
+    margin: 0 auto;
+    padding: 10px 0;
+    border-bottom: 2px solid orange;
+}
+#classManagement .rightConfig .el-button--primary {
+    background-color: orange;
+    border-color: orange;
+}
+#classManagement .rightConfig .el-dialog__footer {
+    text-align: center;
+}
+#classManagement .rightConfig .el-dialog__headerbtn {
+    top: 13px;
+    right: 18px;
+    font-size: 14px;
+}
+#classManagement .el-table .cell,
+#classManagement .el-table__body-wrapper,
+#classManagement .el-table {
+    overflow: visible;
+}

package/templates/vue-project/src/assets/styles/theme.css

@@ -0,0 +1,100 @@
+:root {
+    /* 状态颜色 */
+    --color-brand: #674fde;
+    --color-success: #22ac38;
+    --color-warning: #ef8700;
+    --color-danger: #d20303;
+    --color-info: #909399;
+
+    /* 背景颜色 */
+    /* 页面背景 */
+    --bg-color-page: #eee;
+    /* 主要区块背景 */
+    --bg-block-color-primary: #f6f7fb;
+    /* 深色区块背景 */
+    --bg-block-color-dark: #807d8b;
+    /* 品牌色区块背景 */
+    --bg-block-color-brand: color.adjust(#674fde, $lightness: 35%);
+    /* 表格行1背景 */
+    --bg-td-1-color: #fff;
+    /* 表格行2背景 */
+    --bg-td-2-color: #f4f7f9;
+    /* 滚动条颜色 */
+    --scrollbar-color: #cccccc;
+
+    /* 文字颜色 */
+    /* 主要文字颜色 */
+    --text-color-primary: #151515;
+    /* 常规文字颜色 */
+    --text-color-regular: #2f2f2f;
+    /* 次要文字颜色 */
+    --text-color-secondary: #666;
+    /* 占位符颜色 */
+    --text-color-placeholder: #f9fbfc;
+    --text-color-disabled: #ced4da;
+    /* 白色文字颜色 */
+    --text-color-white: #fff;
+    /* 品牌色文字颜色 */
+    --text-color-brand: #674fde;
+    --text-color-warning: #ef8700;
+    --text-color-danger: #d20303;
+    --text-color-success: #22ac38;
+    --text-color-blue: #2d95ed;
+
+    /* 边框颜色 */
+    --border-color-primary: #dddddd;
+    --border-color-brand: #b8aafe;
+
+    --line-height-base: 1.5;
+    --line-height-sm: 1.4;
+    --line-height-lg: 1.6;
+
+    --font-size-large-4: 3.4rem;
+    --font-size-large-3: 2.4rem;
+    --font-size-large-2: 2rem;
+    --font-size-large-1: 1.8rem;
+    --font-size-base: 1.6rem;
+    --font-size-small-1: 1.4rem;
+    --font-size-small-2: 1.2rem;
+
+    --text-underline-offset: 0.2rem;
+
+    --font-family-regular: "Alibaba PuHuiTi";
+    --font-family-bold: "Alibaba-PuHuiTi-Medium";
+}
+
+/* 暗黑模式变量 */
+[data-theme="dark"] {
+    /* 状态颜色（暗黑模式下保持不变或微调） */
+    --color-brand: #080808;
+    --color-success: #22ac38;
+    --color-warning: #ef8700;
+    --color-danger: #ff4444;
+    --color-info: #909399;
+
+    /* 背景颜色（暗黑模式） */
+    --bg-color-page: #1a1a1a;
+    --bg-block-color-primary: #252525;
+    --bg-block-color-dark: #2d2d2d;
+    --bg-block-color-brand: #{color.adjust(#8b7df0, $lightness: -20%)};
+    --bg-td-1-color: #1e1e1e;
+    --bg-td-2-color: #252525;
+    --scrollbar-color: #4a4a4a;
+
+    /* 文字颜色（暗黑模式） */
+    --text-color-primary: #e5e5e5;
+    --text-color-regular: #d0d0d0;
+    --text-color-secondary: #a0a0a0;
+    --text-color-placeholder: #666666;
+    --text-color-disabled: #555555;
+    --text-color-white: #ffffff;
+    --text-color-brand: #8b7df0;
+    --text-color-warning: #ef8700;
+    --text-color-danger: #ff4444;
+    --text-color-success: #22ac38;
+    --text-color-blue: #4da6ff;
+
+    /* 边框颜色（暗黑模式） */
+    --border-color-primary: #404040;
+    --border-color-brand: #6b5dd9;
+}

package/templates/vue-project/src/components/BarChart.vue

@@ -0,0 +1,238 @@
+<template>
+    <div class="bar-chart">
+        <div
+            v-if="source.title"
+            class="chart-title"
+        >
+            {{ source.title }}
+        </div>
+        <div class="chart-body">
+            <EChart
+                :option="option"
+                theme="light"
+            />
+        </div>
+        <div
+            class="legend"
+            :class="{
+                'legend-bottom-center': legendPosition === 'bottom-center',
+                'legend-top-right': legendPosition === 'top-right',
+            }"
+        >
+            <div
+                v-for="(s, idx) in source.series"
+                :key="`${s.name}-${idx}`"
+                class="legend-item"
+            >
+                <span
+                    class="dot"
+                    :style="{ backgroundColor: s.color }"
+                ></span>
+                <span class="label">{{ s.name }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { EChartsOption } from "echarts";
+import { computed } from "vue";
+import { getResponsiveFontSize } from "@/utils/responsive";
+import { clamp, useResizeTrigger, wrapLabel } from "@/utils/com-methods";
+
+/**
+ * 图表数据源（原始数据层）。
+ * - title：图表标题
+ * - categories：x 轴类目
+ * - series[].values：与 categories 一一对应的百分比数值（0~100）
+ * - series[].name/color：展示元信息（图例名称、柱子颜色）
+ */
+type BarChartSource = {
+    title?: string;
+    categories: string[];
+    barWidth?: number;
+    series: Array<{ name: string; color: string; values: number[] }>;
+    legendPosition?: "top-right" | "bottom-center";
+};
+
+/**
+ * 父组件传递的数据源
+ */
+const props = defineProps<{
+    barChartData: BarChartSource;
+}>();
+
+/**
+ * 当前组件使用的数据源。
+ */
+const source = props.barChartData;
+const legendPosition = computed(() =>
+    source.legendPosition === "bottom-center" ? "bottom-center" : "top-right"
+);
+
+/**
+ * 图表渲染选项（EChartsOption）：
+ * - 依赖 windowSize 来触发重算，以便响应式字号在 resize 后生效
+ * - 颜色/名称来自 source
+ * - 结构化结果来自 model（由 source 转换而来）
+ */
+const option = computed<EChartsOption>(() => {
+    void windowSize.value;
+
+    const model = buildChartModel(source);
+    const textColor = "#333";
+    const fontSize10 = getResponsiveFontSize(10);
+    const fontSize12 = getResponsiveFontSize(12);
+    const fontSize14 = getResponsiveFontSize(14);
+    const fontSize20 = getResponsiveFontSize(20);
+    const fontSize30 = getResponsiveFontSize(30);
+    const xAxisLabelMaxChars = 6;
+    const barMaxWidth =
+        typeof source.barWidth === "number" && source.barWidth > 0
+            ? source.barWidth
+            : clamp(fontSize20, 30, 40);
+
+    return {
+        animation: false,
+        grid: { left: fontSize30, right: fontSize20, top: fontSize20, bottom: fontSize30 },
+        tooltip: {
+            trigger: "axis",
+            axisPointer: { type: "shadow" },
+            backgroundColor: "rgba(0,0,0,0.82)",
+            borderWidth: 0,
+            textStyle: { color: "#fff", fontSize: fontSize12 },
+            /**
+             * tooltip formatter：输入 params 为当前类目上的多个 series 数据点。
+             * 这里拼接 HTML 字符串展示类目与两组对比值。
+             */
+            formatter: (params: any) => {
+                const list = Array.isArray(params) ? params : [];
+                const category = list?.[0]?.axisValue ?? "";
+                const lines = [category];
+                list.forEach((p: any) => {
+                    const name = p.seriesName ?? "";
+                    const v = p.value ?? 0;
+                    lines.push(`${name}：${v}%`);
+                });
+                return lines.join("<br/>");
+            },
+        },
+        xAxis: {
+            type: "category",
+            data: source.categories,
+            axisLine: { lineStyle: { color: "rgba(0,0,0,0.2)" } },
+            axisTick: { show: false },
+            axisLabel: {
+                color: textColor,
+                fontSize: fontSize12,
+                interval: 0,
+                lineHeight: Math.round(fontSize12 * 1.6),
+                formatter: (value: string) => wrapLabel(value, xAxisLabelMaxChars, 2),
+            },
+            splitLine: { show: true, lineStyle: { color: "rgba(0,0,0,0.12)", type: "dashed" } },
+        },
+        yAxis: {
+            type: "value",
+            min: 0,
+            max: model.yMax,
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: {
+                color: textColor,
+                fontSize: fontSize12,
+                formatter: (v: number) => `${v}%`,
+            },
+            name: "百分比（%）",
+            nameTextStyle: { color: textColor, fontSize: fontSize14 },
+            splitLine: { show: true, lineStyle: { color: "rgba(0,0,0,0.12)", type: "dashed" } },
+        },
+        series: source.series.map((s) => ({
+            name: s.name,
+            type: "bar",
+            data: s.values,
+            barMaxWidth,
+            itemStyle: { color: s.color },
+            label: {
+                show: true,
+                position: "top",
+                color: textColor,
+                fontSize: fontSize10,
+                formatter: (p: any) => `${p.value}`,
+            },
+        })),
+    };
+});
+
+const { windowSize } = useResizeTrigger();
+
+/**
+ * 将 Source 转换为图表 Model（只做数据整形与派生值计算，不关心 UI 布局）。
+ * 输出内容：
+ * - yMax：y 轴上限（至少为 100，并向上取整到 10 的整数倍）
+ */
+function buildChartModel(data: BarChartSource) {
+    const values = data.series.flatMap((s) => s.values);
+    const maxValue = values.length ? Math.max(...values) : 0;
+    const yMax = Math.max(100, Math.ceil(maxValue / 10) * 10);
+
+    return {
+        yMax,
+    };
+}
+</script>
+
+<style scoped lang="scss">
+.bar-chart {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    background: #fff;
+    height: 100%;
+}
+
+.chart-title {
+    font-size: 1.4rem;
+    line-height: 1;
+    text-align: center;
+    padding-top: 2rem;
+    color: #333;
+}
+
+.chart-body {
+    flex: 1;
+    min-height: 0;
+    padding: 2rem;
+}
+
+.legend {
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+
+    .legend-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: #333;
+        font-size: 1.2rem;
+        line-height: 1;
+    }
+
+    .dot {
+        width: 1.2rem;
+        height: 1.2rem;
+        border-radius: 2px;
+    }
+}
+
+.legend-top-right {
+    position: absolute;
+    right: 4rem;
+    top: 5.5rem;
+}
+
+.legend-bottom-center {
+    justify-content: center;
+    padding-bottom: 2rem;
+}
+</style>

package/templates/vue-project/src/components/echarts/EChart.vue

@@ -0,0 +1,140 @@
+<template>
+    <div
+        ref="chartRef"
+        class="echart-container"
+    ></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, nextTick } from "vue";
+import type { EChartsOption } from "echarts";
+import type { ECharts, ECElementEvent } from "echarts/core";
+import { echarts } from "@/utils/echarts";
+
+const props = withDefaults(
+    defineProps<{
+        option: EChartsOption;
+        theme?: string;
+        autoResize?: boolean;
+        autoRefresh?: boolean;
+    }>(),
+    {
+        option: () => ({}),
+        theme: "",
+        autoResize: true,
+        autoRefresh: true,
+    }
+);
+
+const emit = defineEmits<{
+    (e: "chart-click", params: ECElementEvent): void;
+    (e: "zr-click", params: { offsetX: number; offsetY: number }, instance: ECharts): void;
+}>();
+
+const chartRef = ref<HTMLElement>();
+const isInitialized = ref(false); // 添加初始化标记
+
+let chartInstance: ECharts | null = null;
+let resizeObserver: ResizeObserver | null = null;
+
+const initChart = () => {
+    if (!chartRef.value) return;
+
+    chartInstance = echarts.init(chartRef.value, props.theme);
+
+    chartInstance.on("click", (params: ECElementEvent) => {
+        emit("chart-click", params);
+    });
+
+    // 监听 ZRender 的点击事件（覆盖整个画布）
+    chartInstance.getZr().on("click", (params: any) => {
+        if (chartInstance) {
+            emit("zr-click", params, chartInstance);
+        }
+    });
+
+    setTimeout(() => {
+        if (chartInstance) {
+            chartInstance.setOption(props.option);
+            isInitialized.value = true; // 标记已初始化
+        }
+    }, 100);
+
+    if (props.autoResize) {
+        resizeObserver = new ResizeObserver(() => {
+            chartInstance?.resize();
+        });
+        resizeObserver.observe(chartRef.value);
+    }
+};
+
+const updateChart = () => {
+    if (chartInstance) {
+        chartInstance.clear();
+        chartInstance.setOption(props.option);
+    }
+};
+
+watch(
+    () => props.option,
+    () => {
+        // 只有在已经初始化后才响应 watch
+        if (!isInitialized.value) {
+            return;
+        }
+
+        nextTick(() => {
+            updateChart();
+        });
+    },
+    { deep: true }
+);
+
+// TODO 新增自动刷新机制，为了演示。后续需修改为父级先获取最新的数据，并且给此组件赋值最新数据，来触发刷新
+let refreshTimer: ReturnType<typeof setInterval> | null = null;
+const startAutoRefresh = () => {
+    refreshTimer = setInterval(() => {
+        updateChart();
+    }, 60 * 1000);
+};
+const stopAutoRefresh = () => {
+    if (refreshTimer) {
+        clearInterval(refreshTimer);
+        refreshTimer = null;
+    }
+};
+
+onMounted(() => {
+    nextTick(() => {
+        initChart();
+        if (props.autoRefresh) {
+            startAutoRefresh();
+        }
+    });
+});
+
+onUnmounted(() => {
+    stopAutoRefresh();
+    if (resizeObserver) {
+        resizeObserver.disconnect();
+    }
+    if (chartInstance) {
+        chartInstance.dispose();
+        chartInstance = null;
+    }
+});
+
+defineExpose({
+    getInstance: () => chartInstance,
+    resize: () => chartInstance?.resize(),
+    clear: () => chartInstance?.clear(),
+    updateChart,
+});
+</script>
+
+<style lang="scss" scoped>
+.echart-container {
+    width: 100%;
+    height: 100%;
+}
+</style>