@hecom/codearts 0.4.1 → 0.4.3

package/dist/charts/index.js

@@ -8,10 +8,10 @@ const bug_by_fix_duration_1 = require("./modules/bug-by-fix-duration");
 const bug_by_developer_hours_1 = require("./modules/bug-by-developer-hours");
 const bug_open_priority_heatmap_1 = require("./modules/bug-open-priority-heatmap");
 exports.allCharts = [
-    bug_by_defect_analysis_1.bugByDefectAnalysisChart,
-    bug_by_assignee_1.bugByAssigneeChart,
     bug_by_module_1.bugByModuleChart,
+    bug_by_defect_analysis_1.bugByDefectAnalysisChart,
     bug_by_fix_duration_1.bugByFixDurationChart,
-    bug_by_developer_hours_1.bugByDeveloperHoursChart,
     bug_open_priority_heatmap_1.bugOpenPriorityHeatmapChart,
+    bug_by_assignee_1.bugByAssigneeChart,
+    bug_by_developer_hours_1.bugByDeveloperHoursChart,
 ];

package/dist/charts/macarons.d.ts

@@ -0,0 +1,354 @@
+declare const macarons: {
+    color: string[];
+    backgroundColor: string;
+    textStyle: {};
+    title: {
+        textStyle: {
+            color: string;
+        };
+        subtextStyle: {
+            color: string;
+        };
+    };
+    line: {
+        itemStyle: {
+            borderWidth: number;
+        };
+        lineStyle: {
+            width: number;
+        };
+        symbolSize: number;
+        symbol: string;
+        smooth: boolean;
+    };
+    radar: {
+        itemStyle: {
+            borderWidth: number;
+        };
+        lineStyle: {
+            width: number;
+        };
+        symbolSize: number;
+        symbol: string;
+        smooth: boolean;
+    };
+    bar: {
+        itemStyle: {
+            barBorderWidth: number;
+            barBorderColor: string;
+        };
+    };
+    pie: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    scatter: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    boxplot: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    parallel: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    sankey: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    funnel: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    gauge: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+    };
+    candlestick: {
+        itemStyle: {
+            color: string;
+            color0: string;
+            borderColor: string;
+            borderColor0: string;
+            borderWidth: number;
+        };
+    };
+    graph: {
+        itemStyle: {
+            borderWidth: number;
+            borderColor: string;
+        };
+        lineStyle: {
+            width: number;
+            color: string;
+        };
+        symbolSize: number;
+        symbol: string;
+        smooth: boolean;
+        color: string[];
+        label: {
+            color: string;
+        };
+    };
+    map: {
+        itemStyle: {
+            areaColor: string;
+            borderColor: string;
+            borderWidth: number;
+        };
+        label: {
+            color: string;
+        };
+        emphasis: {
+            itemStyle: {
+                areaColor: string;
+                borderColor: string;
+                borderWidth: number;
+            };
+            label: {
+                color: string;
+            };
+        };
+    };
+    geo: {
+        itemStyle: {
+            areaColor: string;
+            borderColor: string;
+            borderWidth: number;
+        };
+        label: {
+            color: string;
+        };
+        emphasis: {
+            itemStyle: {
+                areaColor: string;
+                borderColor: string;
+                borderWidth: number;
+            };
+            label: {
+                color: string;
+            };
+        };
+    };
+    categoryAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    valueAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    logAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    timeAxis: {
+        axisLine: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        axisLabel: {
+            show: boolean;
+            color: string;
+        };
+        splitLine: {
+            show: boolean;
+            lineStyle: {
+                color: string[];
+            };
+        };
+        splitArea: {
+            show: boolean;
+            areaStyle: {
+                color: string[];
+            };
+        };
+    };
+    toolbox: {
+        iconStyle: {
+            borderColor: string;
+        };
+        emphasis: {
+            iconStyle: {
+                borderColor: string;
+            };
+        };
+    };
+    legend: {
+        textStyle: {
+            color: string;
+        };
+        left: string;
+        right: string;
+        top: number;
+        bottom: number;
+    };
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: string;
+                width: string;
+            };
+            crossStyle: {
+                color: string;
+                width: string;
+            };
+        };
+    };
+    timeline: {
+        lineStyle: {
+            color: string;
+            width: number;
+        };
+        itemStyle: {
+            color: string;
+            borderWidth: number;
+        };
+        controlStyle: {
+            color: string;
+            borderColor: string;
+            borderWidth: number;
+        };
+        checkpointStyle: {
+            color: string;
+            borderColor: string;
+        };
+        label: {
+            color: string;
+        };
+        emphasis: {
+            itemStyle: {
+                color: string;
+            };
+            controlStyle: {
+                color: string;
+                borderColor: string;
+                borderWidth: number;
+            };
+            label: {
+                color: string;
+            };
+        };
+    };
+    visualMap: {
+        color: string[];
+    };
+    markPoint: {
+        label: {
+            color: string;
+        };
+        emphasis: {
+            label: {
+                color: string;
+            };
+        };
+    };
+    grid: {
+        left: string;
+        right: string;
+        bottom: number;
+    };
+};
+export default macarons;

package/dist/charts/macarons.js

@@ -0,0 +1,398 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const macarons = {
+    color: [
+        '#2ec7c9',
+        '#b6a2de',
+        '#5ab1ef',
+        '#ffb980',
+        '#d87a80',
+        '#8d98b3',
+        '#e5cf0d',
+        '#97b552',
+        '#95706d',
+        '#dc69aa',
+        '#07a2a4',
+        '#9a7fd1',
+        '#588dd5',
+        '#f5994e',
+        '#c05050',
+        '#59678c',
+        '#c9ab00',
+        '#7eb00a',
+        '#6f5553',
+        '#c14089',
+    ],
+    backgroundColor: 'rgba(0,0,0,0)',
+    textStyle: {},
+    title: {
+        textStyle: {
+            color: '#008acd',
+        },
+        subtextStyle: {
+            color: '#aaa',
+        },
+    },
+    line: {
+        itemStyle: {
+            borderWidth: 1,
+        },
+        lineStyle: {
+            width: 2,
+        },
+        symbolSize: 3,
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    radar: {
+        itemStyle: {
+            borderWidth: 1,
+        },
+        lineStyle: {
+            width: 2,
+        },
+        symbolSize: 3,
+        symbol: 'emptyCircle',
+        smooth: true,
+    },
+    bar: {
+        itemStyle: {
+            barBorderWidth: 0,
+            barBorderColor: '#ccc',
+        },
+    },
+    pie: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    scatter: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    boxplot: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    parallel: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    sankey: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    funnel: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    gauge: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+    },
+    candlestick: {
+        itemStyle: {
+            color: '#d87a80',
+            color0: '#2ec7c9',
+            borderColor: '#d87a80',
+            borderColor0: '#2ec7c9',
+            borderWidth: 1,
+        },
+    },
+    graph: {
+        itemStyle: {
+            borderWidth: 0,
+            borderColor: '#ccc',
+        },
+        lineStyle: {
+            width: 1,
+            color: '#aaa',
+        },
+        symbolSize: 3,
+        symbol: 'emptyCircle',
+        smooth: true,
+        color: [
+            '#2ec7c9',
+            '#b6a2de',
+            '#5ab1ef',
+            '#ffb980',
+            '#d87a80',
+            '#8d98b3',
+            '#e5cf0d',
+            '#97b552',
+            '#95706d',
+            '#dc69aa',
+            '#07a2a4',
+            '#9a7fd1',
+            '#588dd5',
+            '#f5994e',
+            '#c05050',
+            '#59678c',
+            '#c9ab00',
+            '#7eb00a',
+            '#6f5553',
+            '#c14089',
+        ],
+        label: {
+            color: '#eee',
+        },
+    },
+    map: {
+        itemStyle: {
+            areaColor: '#dddddd',
+            borderColor: '#eeeeee',
+            borderWidth: 0.5,
+        },
+        label: {
+            color: '#d87a80',
+        },
+        emphasis: {
+            itemStyle: {
+                areaColor: 'rgba(254,153,78,1)',
+                borderColor: '#444',
+                borderWidth: 1,
+            },
+            label: {
+                color: 'rgb(100,0,0)',
+            },
+        },
+    },
+    geo: {
+        itemStyle: {
+            areaColor: '#dddddd',
+            borderColor: '#eeeeee',
+            borderWidth: 0.5,
+        },
+        label: {
+            color: '#d87a80',
+        },
+        emphasis: {
+            itemStyle: {
+                areaColor: 'rgba(254,153,78,1)',
+                borderColor: '#444',
+                borderWidth: 1,
+            },
+            label: {
+                color: 'rgb(100,0,0)',
+            },
+        },
+    },
+    categoryAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#008acd',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#333',
+        },
+        splitLine: {
+            show: false,
+            lineStyle: {
+                color: ['#eee'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+            },
+        },
+    },
+    valueAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#008acd',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#333',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#eee'],
+            },
+        },
+        splitArea: {
+            show: true,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+            },
+        },
+    },
+    logAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#008acd',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#333',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#eee'],
+            },
+        },
+        splitArea: {
+            show: true,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+            },
+        },
+    },
+    timeAxis: {
+        axisLine: {
+            show: true,
+            lineStyle: {
+                color: '#008acd',
+            },
+        },
+        axisTick: {
+            show: true,
+            lineStyle: {
+                color: '#333',
+            },
+        },
+        axisLabel: {
+            show: true,
+            color: '#333',
+        },
+        splitLine: {
+            show: true,
+            lineStyle: {
+                color: ['#eee'],
+            },
+        },
+        splitArea: {
+            show: false,
+            areaStyle: {
+                color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
+            },
+        },
+    },
+    toolbox: {
+        iconStyle: {
+            borderColor: '#2ec7c9',
+        },
+        emphasis: {
+            iconStyle: {
+                borderColor: '#18a4a6',
+            },
+        },
+    },
+    legend: {
+        textStyle: {
+            color: '#333333',
+        },
+        left: 'center',
+        right: 'auto',
+        top: 0,
+        bottom: 10,
+    },
+    tooltip: {
+        axisPointer: {
+            lineStyle: {
+                color: '#008acd',
+                width: '1',
+            },
+            crossStyle: {
+                color: '#008acd',
+                width: '1',
+            },
+        },
+    },
+    timeline: {
+        lineStyle: {
+            color: '#008acd',
+            width: 1,
+        },
+        itemStyle: {
+            color: '#008acd',
+            borderWidth: 1,
+        },
+        controlStyle: {
+            color: '#008acd',
+            borderColor: '#008acd',
+            borderWidth: 0.5,
+        },
+        checkpointStyle: {
+            color: '#2ec7c9',
+            borderColor: 'rgba(46,199,201,0.4)',
+        },
+        label: {
+            color: '#008acd',
+        },
+        emphasis: {
+            itemStyle: {
+                color: '#a9334c',
+            },
+            controlStyle: {
+                color: '#008acd',
+                borderColor: '#008acd',
+                borderWidth: 0.5,
+            },
+            label: {
+                color: '#008acd',
+            },
+        },
+    },
+    visualMap: {
+        color: ['#5ab1ef', '#e0ffff'],
+    },
+    markPoint: {
+        label: {
+            color: '#eee',
+        },
+        emphasis: {
+            label: {
+                color: '#eee',
+            },
+        },
+    },
+    grid: {
+        left: '3%',
+        right: '6%',
+        bottom: 70,
+    },
+};
+exports.default = macarons;

package/dist/charts/modules/bug-by-assignee.js

@@ -14,15 +14,25 @@ exports.bugByAssigneeChart = {
         const values = sorted.map(([, value]) => value);
         return {
             tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
-            grid: { left: '3%', right: '8%', bottom: '3%', containLabel: true },
-            xAxis: { type: 'value' },
-            yAxis: { type: 'category', data: names, inverse: true },
+            // grid: { left: '3%', right: '6%', bottom: '3%', containLabel: true },
+            xAxis: {
+                type: 'value',
+                axisLine: { show: false },
+            },
+            yAxis: {
+                type: 'category',
+                data: names,
+                inverse: true,
+                axisLine: { show: false },
+                axisTick: { show: false },
+            },
             series: [
                 {
                     type: 'bar',
                     data: values,
-                    label: { show: true, position: 'right' },
-                    itemStyle: { color: '#5470c6' },
+                    label: { show: true, position: 'right', fontWeight: 600 },
+                    itemStyle: { borderRadius: 6 },
+                    barCategoryGap: '40%',
                 },
             ],
         };

package/dist/charts/modules/bug-by-defect-analysis.js

@@ -19,9 +19,14 @@ exports.bugByDefectAnalysisChart = {
             series: [
                 {
                     type: 'pie',
-                    radius: ['40%', '70%'],
+                    radius: ['42%', '68%'],
                     avoidLabelOverlap: true,
-                    label: { show: true, formatter: '{b}: {d}%' },
+                    label: {
+                        show: true,
+                        position: 'outside',
+                        formatter: '{b}: {d}%',
+                    },
+                    labelLine: { length: 18, length2: 6, lineStyle: { width: 1 } },
                     data,
                 },
             ],

package/dist/charts/modules/bug-by-developer-hours.js

@@ -16,15 +16,31 @@ exports.bugByDeveloperHoursChart = {
         const values = sorted.map(([, hours]) => hours);
         return {
             tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
-            grid: { left: '3%', right: '8%', bottom: '3%', containLabel: true },
-            xAxis: { type: 'value', name: '小时' },
-            yAxis: { type: 'category', data: names, inverse: true },
+            // grid: { left: '3%', right: '6%', bottom: '3%', containLabel: true },
+            xAxis: {
+                type: 'value',
+                name: '小时',
+                axisLine: { show: false },
+            },
+            yAxis: {
+                type: 'category',
+                data: names,
+                inverse: true,
+                axisLine: { show: false },
+                axisTick: { show: false },
+            },
             series: [
                 {
                     type: 'bar',
                     data: values,
-                    label: { show: true, position: 'right', formatter: '{c}h' },
-                    itemStyle: { color: '#ee6666' },
+                    label: {
+                        show: true,
+                        position: 'right',
+                        formatter: '{c}h',
+                        fontWeight: 600,
+                    },
+                    itemStyle: { borderRadius: 6 },
+                    barCategoryGap: '40%',
                 },
             ],
         };

package/dist/charts/modules/bug-by-fix-duration.js

@@ -27,10 +27,12 @@ exports.bugByFixDurationChart = {
         const values = BUCKETS.map((b) => countMap.get(b) ?? 0);
         return {
             tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
-            grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+            // grid: { left: '6%', right: '6%', bottom: '8%', containLabel: true },
             xAxis: {
                 type: 'category',
                 data: [...BUCKETS],
+                axisLine: { show: false },
+                axisTick: { show: false },
             },
             yAxis: { type: 'value', minInterval: 1 },
             series: [
@@ -38,7 +40,8 @@ exports.bugByFixDurationChart = {
                     type: 'bar',
                     data: values,
                     label: { show: true, position: 'top' },
-                    itemStyle: { color: '#fac858' },
+                    itemStyle: { borderRadius: [6, 6, 0, 0] },
+                    barWidth: '46%',
                 },
             ],
         };

package/dist/charts/modules/bug-by-module.js

@@ -14,19 +14,21 @@ exports.bugByModuleChart = {
         const values = sorted.map(([, value]) => value);
         return {
             tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
-            grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
+            // grid: { left: '4%', right: '4%', bottom: '18%', containLabel: true },
             xAxis: {
                 type: 'category',
                 data: names,
-                axisLabel: { rotate: 30, overflow: 'truncate', width: 80 },
+                axisLabel: { rotate: 30, overflow: 'truncate', width: 90 },
+                axisLine: { show: false },
             },
-            yAxis: { type: 'value' },
+            yAxis: { type: 'value', splitLine: { lineStyle: {} } },
             series: [
                 {
                     type: 'bar',
                     data: values,
                     label: { show: true, position: 'top' },
-                    itemStyle: { color: '#91cc75' },
+                    itemStyle: { borderRadius: 6 },
+                    barWidth: '48%',
                 },
             ],
         };

package/dist/charts/modules/bug-open-priority-heatmap.js

@@ -38,7 +38,7 @@ exports.bugOpenPriorityHeatmapChart = {
                 position: 'top',
                 formatter: (params) => `${yCategories[params.data[1]]} / ${xCategories[params.data[0]]}: ${params.data[2]} 个`,
             },
-            grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
+            // grid: { left: '4%', right: '4%', bottom: '12%', containLabel: true },
             xAxis: {
                 type: 'category',
                 data: xCategories,
@@ -56,7 +56,6 @@ exports.bugOpenPriorityHeatmapChart = {
                 orient: 'horizontal',
                 left: 'center',
                 bottom: '0%',
-                inRange: { color: ['#ffffff', '#ee6666'] },
             },
             series: [
                 {

package/dist/charts/renderer.js

@@ -32,6 +32,9 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderReport = renderReport;
 exports.openInBrowser = openInBrowser;
@@ -39,6 +42,7 @@ const child_process_1 = require("child_process");
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 const logger_1 = require("../utils/logger");
+const macarons_1 = __importDefault(require("./macarons"));
 /**
  * 生成 HTML 报告并写入文件，返回文件路径。
  * @param bugs Bug 列表
@@ -87,18 +91,65 @@ function renderReport(bugs, charts, meta, outputDir) {
     return outputPath;
 }
 function buildHtml(bugs, charts, meta) {
+    // 使用打包友好的方式：直接从 macarons.ts 导出对象（避免构建后 JSON 丢失）
+    const macaronsForHtml = JSON.stringify(macarons_1.default || {});
     const chartContainers = charts
         .map((chart, i) => `<div class="chart-card">
           <div class="chart-title">${chart.title}</div>
-          <div id="chart-${i}" style="height:400px;"></div>
+          <div id="chart-${i}" class="chart-canvas"></div>
         </div>`)
         .join('\n');
     const chartScripts = charts
         .map((chart, i) => {
         const option = JSON.stringify(chart.buildOption(bugs));
-        return `echarts.init(document.getElementById('chart-${i}')).setOption(${option});`;
+        return `(() => {
+        const el = document.getElementById('chart-${i}');
+        if (!el) return;
+        let myChart;
+        try {
+          // 优先使用已注册的 macarons 主题进行初始化
+          myChart = echarts.init(el, 'macarons');
+          myChart.setOption(${option}, true);
+        } catch (e) {
+          // 回退：若主题不可用或初始化失败，使用原先的默认样式并继续渲染
+          const defaultTheme = {
+            color: ['#4A6CF7', '#6AD3FF', '#6BCB9B', '#FFD66B', '#FF9A76', '#7E63FF', '#FFA2EC'],
+            textStyle: { color: '#2b2b2b', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif' },
+            tooltip: { backgroundColor: 'rgba(0,0,0,0.75)', textStyle: { color: '#fff' } },
+            legend: { textStyle: { color: '#666' } },
+            axis: { axisLine: { lineStyle: { color: '#e9edf1' } }, axisLabel: { color: '#9aa0a6' }, splitLine: { lineStyle: { color: '#f0f3f7' } } }
+          };
+          myChart = echarts.init(el);
+          const userOption = ${option};
+          const merged = Object.assign({}, defaultTheme, userOption);
+          myChart.setOption(merged, true);
+        }
+        // store instance for global resize handling
+        window.__HECOM_CHARTS = window.__HECOM_CHARTS || [];
+        window.__HECOM_CHARTS.push(myChart);
+        // ensure initial render after layout
+        setTimeout(() => myChart.resize(), 60);
+      })();`;
     })
-        .join('\n');
+        .join('\n') +
+        `
+    ;(function(){
+      if (window.__HECOM_CHARTS_RESIZE_ADDED) return;
+      window.__HECOM_CHARTS_RESIZE_ADDED = true;
+      let _rt;
+      function resizeAll(){
+        (window.__HECOM_CHARTS || []).forEach(c => { try { c.resize(); } catch(e){} });
+      }
+      window.addEventListener('resize', () => { clearTimeout(_rt); _rt = setTimeout(resizeAll, 120); });
+      window.addEventListener('load', () => setTimeout(resizeAll, 100));
+      // in case layout changes without window resize (e.g. CSS media query), observe container
+      try {
+        const ro = new ResizeObserver(() => { clearTimeout(_rt); _rt = setTimeout(resizeAll, 80); });
+        document.querySelectorAll('.chart-canvas').forEach(el => ro.observe(el));
+      } catch (e) {
+        // ResizeObserver not available -> fallback only to window resize
+      }
+    })();`;
     const iterationsText = meta.iterationNames.join(', ') || '全部';
     const terminalText = meta.terminalTypes.join(', ') || '全部';
     return `<!DOCTYPE html>
@@ -108,20 +159,36 @@ function buildHtml(bugs, charts, meta) {
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Bug 分析报告</title>
   <style>
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0; padding: 20px; background: #f5f5f5; color: #333; }
-    .header { background: #fff; border-radius: 8px; padding: 24px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
-    .header h1 { margin: 0 0 16px; font-size: 22px; color: #1a1a1a; }
-    .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
-    .meta-item { background: #f8f9fa; border-radius: 6px; padding: 12px; }
-    .meta-label { font-size: 12px; color: #888; margin-bottom: 4px; }
-    .meta-value { font-size: 14px; font-weight: 600; color: #333; }
-    .charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
-    .chart-card { background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
-    .chart-title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 12px; }
-    @media (max-width: 900px) { .charts-grid { grid-template-columns: 1fr; } }
+    :root{ --bg:#f5f7fa; --card:#ffffff; --muted:#9aa0a6; --text:#2b2b2b; --accent:#4A6CF7; }
+    html,body{height:100%;}
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; margin: 0; padding: 28px 28px 64px; background: var(--bg); color: var(--text); -webkit-font-smoothing:antialiased; }
+    .container{max-width:1200px;margin:0 auto}
+    .header { background: var(--card); border-radius: 10px; padding: 28px; margin-bottom: 22px; box-shadow: 0 6px 18px rgba(18,23,34,0.06); }
+    .header h1 { margin: 0 0 10px; font-size: 20px; color: #111827; }
+    .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
+    .meta-item { background: #f8f9fb; border-radius: 8px; padding: 14px; }
+    .meta-label { font-size: 12px; color: #818a91; margin-bottom: 6px; }
+    .meta-value { font-size: 15px; font-weight: 700; color: #111827; }
+    .charts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; }
+    .chart-card { background: var(--card); border-radius: 10px; padding: 18px; box-shadow: 0 6px 18px rgba(18,23,34,0.04); display:flex; flex-direction:column; }
+    .chart-title { font-size: 15px; font-weight: 600; color: #111827; margin-bottom: 12px; }
+    .chart-canvas { width:100%; height:400px; }
+    .page-footer-spacer{height:56px;flex:0 0 56px}
+    /* card footer or small notes */
+    .muted { color: var(--muted); font-size:12px }
+
+    @media (max-width: 1199px){ .container{max-width:980px} }
+    @media (max-width: 900px) {
+      body{padding:16px}
+      .charts-grid { grid-template-columns: 1fr; }
+      .chart-canvas{height:320px}
+      .header { padding:18px }
+    }
+    @media (max-width: 480px){ .chart-canvas{height:280px} }
   </style>
 </head>
 <body>
+  <div class="container">
   <div class="header">
     <h1>Bug 分析报告</h1>
     <div class="meta-grid">
@@ -134,8 +201,21 @@ function buildHtml(bugs, charts, meta) {
   <div class="charts-grid">
     ${chartContainers}
   </div>
+  <div class="page-footer-spacer" aria-hidden="true"></div>
+  </div>
   <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
   <script>
+    // 注册 macarons 主题（若可用）
+    (function(){
+      try {
+        const theme = ${macaronsForHtml};
+        if (typeof echarts !== 'undefined' && theme && Object.keys(theme).length) {
+          echarts.registerTheme('macarons', theme);
+        }
+      } catch (e) {
+        // 主题注册失败则忽略，chart 初始化中有回退处理
+      }
+    })();
     ${chartScripts}
   </script>
 </body>

package/dist/commands/fix.command.js

@@ -52,9 +52,11 @@ async function fixCommand(cliOptions) {
             logger_1.logger.info('操作取消');
             return;
         }
-        // Step 5: 填写缺陷分析信息
+        // Step 5: 检查是否为客户反馈 bug
+        const isCustomerFeedback = checkIsCustomerFeedback(selectedBug);
+        // Step 6: 填写缺陷分析信息
         const bugFixData = {};
-        // 5.1: 选择缺陷技术分析（必填）
+        // 6.1: 选择缺陷技术分析（必填）
         const defectAnalysisOptions = customFieldOptions[types_1.CustomFieldId.DEFECT_TECHNICAL_ANALYSIS] || [];
         if (defectAnalysisOptions.length === 0) {
             logger_1.logger.error('无法获取缺陷技术分析选项');
@@ -67,24 +69,30 @@ async function fixCommand(cliOptions) {
                 value: option,
             })),
         });
-        // 5.2: 填写问题原因及解决办法（可选）
+        // 6.2: 填写问题原因及解决办法
         const problemReason = await (0, prompts_1.input)({
-            message: '请输入问题原因及解决办法（可选，留空跳过）',
+            message: isCustomerFeedback
+                ? '请输入问题原因及解决办法（必填）'
+                : '请输入问题原因及解决办法（可选，留空跳过）',
+            validate: (value) => {
+                if (isCustomerFeedback && !value.trim()) {
+                    return '问题原因及解决办法不能为空';
+                }
+                return true;
+            },
         });
         if (problemReason.trim()) {
             bugFixData.problemReason = problemReason;
         }
-        // 5.3: 填写影响范围（可选）
+        // 6.3: 填写影响范围（可选）
         const impactScope = await (0, prompts_1.input)({
             message: '请输入影响范围（可选，留空跳过）',
         });
         if (impactScope.trim()) {
             bugFixData.impactScope = impactScope;
         }
-        // Step 6: 检查是否为客户反馈 bug
-        const isCustomerFeedback = checkIsCustomerFeedback(selectedBug);
         if (isCustomerFeedback) {
-            // 6.1: 选择引入阶段（必填）
+            // 6.4: 选择引入阶段（必填）
             const introductionPhaseOptions = customFieldOptions[types_1.CustomFieldId.INTRODUCTION_PHASE] || [];
             if (introductionPhaseOptions.length === 0) {
                 logger_1.logger.error('无法获取引入阶段选项');
@@ -100,7 +108,7 @@ async function fixCommand(cliOptions) {
                     value: option,
                 })),
             });
-            // 6.2: 输入发布时间（必填）
+            // 6.5: 输入发布时间（必填）
             let releaseDate;
             let validDate = false;
             while (!validDate) {
@@ -205,7 +213,7 @@ async function showSummaryAndConfirm(bug, bugFixData, isCustomerFeedback) {
     logger_1.logger.info(`Bug ID: #${bug.id}`);
     logger_1.logger.info(`Bug 标题: ${bug.name}`);
     logger_1.logger.info(`缺陷技术分析: ${bugFixData.defectAnalysis || '未填写'}`);
-    logger_1.logger.info(`问题原因: ${bugFixData.problemReason || '未填写'}`);
+    logger_1.logger.info(`问题原因及解决办法: ${bugFixData.problemReason || '未填写'}`);
     logger_1.logger.info(`影响范围: ${bugFixData.impactScope || '未填写'}`);
     if (isCustomerFeedback) {
         logger_1.logger.info(`引入阶段: ${bugFixData.introductionStage || '未填写'}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hecom/codearts",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "华为云 CodeArts 统计分析工具",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,9 +18,9 @@
     "test:coverage": "jest --coverage --passWithNoTests",
     "prepublishOnly": "npm run build",
     "dev": "ts-node src/bin/cli.ts",
-    "minor": "npm version minor -m \"Bump version to %s\"; git push --tags",
-    "patch": "npm version patch -m \"Bump version to %s\"; git push --tags",
-    "major": "npm version major -m \"Bump version to %s\"; git push --tags"
+    "minor": "npm version minor -m \"Bump version to %s\"; git push --follow-tags",
+    "patch": "npm version patch -m \"Bump version to %s\"; git push --follow-tags",
+    "major": "npm version major -m \"Bump version to %s\"; git push --follow-tags"
   },
   "keywords": [
     "huawei-cloud",