jojotaoo_components 0.0.1-beta.0

package/dist/components/charts/PieChart.vue.js

@@ -0,0 +1,106 @@
+import { computed, toRef } from 'vue';
+import { useECharts } from '../../composables/useECharts';
+import { useInteractFilter } from '../../composables/useInteractFilter';
+import { DEFAULT_CHART_STYLE } from '../../types';
+const props = withDefaults(defineProps(), {
+    componentId: '',
+    option: () => ({}),
+    width: 400,
+    height: 300,
+    bgColor: '#1e1e2e',
+    chartStyle: undefined,
+});
+const optionRef = toRef(props, 'option');
+const widthRef = toRef(props, 'width');
+const heightRef = toRef(props, 'height');
+const chartStyleRef = computed(() => props.chartStyle ?? DEFAULT_CHART_STYLE);
+const componentIdRef = toRef(props, 'componentId');
+const dimensions = computed(() => optionRef.value.dataset?.dimensions ?? []);
+const source = computed(() => optionRef.value.dataset?.source ?? []);
+const { filteredSource } = useInteractFilter(componentIdRef, dimensions, source);
+const filteredOption = computed(() => {
+    const ds = optionRef.value.dataset;
+    if (!ds)
+        return optionRef.value;
+    return {
+        ...optionRef.value,
+        dataset: { ...ds, source: filteredSource.value },
+    };
+});
+const containerBg = computed(() => {
+    const cs = chartStyleRef.value;
+    if (cs.backgroundOpacity < 1 && cs.backgroundColor !== 'transparent') {
+        const h = cs.backgroundColor.replace('#', '');
+        const r = parseInt(h.substring(0, 2), 16);
+        const g = parseInt(h.substring(2, 4), 16);
+        const b = parseInt(h.substring(4, 6), 16);
+        return `rgba(${r}, ${g}, ${b}, ${cs.backgroundOpacity})`;
+    }
+    return props.bgColor || cs.backgroundColor;
+});
+const seriesOption = computed(() => {
+    const s = chartStyleRef.value.series;
+    const ds = optionRef.value.dataset ?? { dimensions: [], source: [] };
+    const outerRadius = s.pieRadius > 0 ? '70%' : '70%';
+    const innerRadius = s.pieRadius > 0 ? s.pieRadius + '%' : '0%';
+    return {
+        type: 'pie',
+        name: ds.dimensions?.[1] ?? '',
+        radius: [innerRadius, outerRadius],
+        center: ['50%', '55%'],
+        roseType: s.pieRoseType ? 'area' : undefined,
+        data: filteredSource.value.map((item) => ({
+            name: item?.[0] ?? '',
+            value: item?.[1] ?? 0,
+        })),
+        label: {
+            show: s.showLabel,
+            position: s.pieLabelPosition,
+            color: s.labelColor,
+            fontSize: s.labelFontSize,
+        },
+        emphasis: {
+            itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+        },
+        itemStyle: {
+            borderRadius: 4,
+            borderColor: 'transparent',
+            borderWidth: 2,
+        },
+    };
+});
+const { chartRef } = useECharts(filteredOption, widthRef, heightRef, chartStyleRef, seriesOption, 'pie');
+const __VLS_defaults = {
+    componentId: '',
+    option: () => ({}),
+    width: 400,
+    height: 300,
+    bgColor: '#1e1e2e',
+    chartStyle: undefined,
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ref: "chartRef",
+    ...{ class: "pie-chart" },
+    ...{ style: ({ backgroundColor: __VLS_ctx.containerBg }) },
+});
+/** @type {__VLS_StyleScopedClasses['pie-chart']} */ ;
+// @ts-ignore
+[containerBg,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/components/charts/PieGridChart.vue.d.ts

@@ -0,0 +1,20 @@
+import type { ChartStyleConfig } from '../../types';
+type __VLS_Props = {
+    componentId?: string;
+    option?: Record<string, any>;
+    width?: number;
+    height?: number;
+    bgColor?: string;
+    chartStyle?: ChartStyleConfig;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    bgColor: string;
+    height: number;
+    option: Record<string, any>;
+    chartStyle: ChartStyleConfig;
+    width: number;
+    componentId: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=PieGridChart.vue.d.ts.map

package/dist/components/charts/PieGridChart.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieGridChart.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/PieGridChart.vue"],"names":[],"mappings":"AAqOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAInD,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,gBAAgB,CAAA;CAC9B,CAAC;AAqPF,QAAA,MAAM,YAAY;aAvPN,MAAM;YADP,MAAM;YAFN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;gBAIf,gBAAgB;WAHrB,MAAM;iBAFA,MAAM;6EA8PpB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/charts/PieGridChart.vue.js

@@ -0,0 +1,214 @@
+import { computed, toRef } from 'vue';
+import { useECharts } from '../../composables/useECharts';
+import { useInteractFilter } from '../../composables/useInteractFilter';
+import { DEFAULT_CHART_STYLE } from '../../types';
+import CustomLegend from './CustomLegend.vue';
+const props = withDefaults(defineProps(), {
+    componentId: '',
+    option: () => ({}),
+    width: 400,
+    height: 300,
+    bgColor: '#1e1e2e',
+    chartStyle: undefined,
+});
+const optionRef = toRef(props, 'option');
+const widthRef = toRef(props, 'width');
+const heightRef = toRef(props, 'height');
+const chartStyleRef = computed(() => props.chartStyle ?? DEFAULT_CHART_STYLE);
+const componentIdRef = toRef(props, 'componentId');
+const dimensions = computed(() => optionRef.value.dataset?.dimensions ?? []);
+const source = computed(() => optionRef.value.dataset?.source ?? []);
+const { filteredSource } = useInteractFilter(componentIdRef, dimensions, source);
+const filteredOption = computed(() => {
+    const ds = optionRef.value.dataset;
+    if (!ds)
+        return optionRef.value;
+    return {
+        ...optionRef.value,
+        dataset: { ...ds, source: filteredSource.value },
+        legend: { show: false },
+    };
+});
+const containerBg = computed(() => {
+    const cs = chartStyleRef.value;
+    if (cs.backgroundOpacity < 1 && cs.backgroundColor !== 'transparent') {
+        const h = cs.backgroundColor.replace('#', '');
+        const r = parseInt(h.substring(0, 2), 16);
+        const g = parseInt(h.substring(2, 4), 16);
+        const b = parseInt(h.substring(4, 6), 16);
+        return `rgba(${r}, ${g}, ${b}, ${cs.backgroundOpacity})`;
+    }
+    return props.bgColor || cs.backgroundColor;
+});
+const filteredData = computed(() => filteredSource.value.map((item) => ({ name: item?.[0] ?? '' })));
+const legendData = computed(() => {
+    const total = filteredSource.value.reduce((sum, item) => sum + (Number(item?.[1]) || 0), 0);
+    return filteredSource.value.map((item) => ({
+        name: item?.[0] ?? '',
+        value: item?.[1] ?? 0,
+        percent: total > 0 ? ((Number(item?.[1]) / total) * 100).toFixed(1) : '0',
+    }));
+});
+const colorList = computed(() => chartStyleRef.value.series.colorList);
+const totalValue = computed(() => filteredSource.value.reduce((sum, item) => sum + (Number(item?.[1]) || 0), 0));
+const seriesOption = computed(() => {
+    const s = chartStyleRef.value.series;
+    const ds = optionRef.value.dataset ?? { dimensions: [], source: [] };
+    const outerRadius = s.pieRadius > 0 ? '70%' : '70%';
+    const innerRadius = s.pieRadius > 0 ? s.pieRadius + '%' : '0%';
+    return {
+        type: 'pie',
+        name: ds.dimensions?.[1] ?? '',
+        radius: [innerRadius, outerRadius],
+        center: ['50%', '50%'],
+        roseType: s.pieRoseType ? 'area' : undefined,
+        data: filteredSource.value.map((item) => ({
+            name: item?.[0] ?? '',
+            value: item?.[1] ?? 0,
+        })),
+        label: {
+            show: s.showLabel,
+            position: s.pieLabelPosition,
+            color: s.labelColor,
+            fontSize: s.labelFontSize,
+            // formatter: ['{a|{c}}','{b|{b}}'].join('\n'),
+            // rich: {
+            //   a: {
+            //     fontSize: s.labelFontSize,
+            //     color: s.labelColor,
+            //     fontWeight: 900,
+            //   },
+            //   b: {
+            //     fontSize: s.labelFontSize / 2,
+            //     color: 'gray',
+            //     lineHeight: 18,
+            //     padding: [s.labelFontSize / 5, 0, 0, 0],
+            //   }
+            // }
+            //   formatter: [
+            //     '{a|{b} ({d}%)}',
+            //     '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
+            // ].join('\n'),
+            // rich: {
+            //     a: {
+            //         color: 'red',
+            //         lineHeight: 10
+            //     },
+            //     b: {
+            //         backgroundColor: {
+            //             image: 'xxx/xxx.jpg'
+            //         },
+            //         height: 40
+            //     },
+            //     x: {
+            //         fontSize: 18,
+            //         fontFamily: 'Microsoft YaHei',
+            //         borderColor: '#449933',
+            //         borderRadius: 4
+            //     },
+            // }
+        },
+        emphasis: {
+            focus: 'self',
+            itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+        },
+        blur: {
+            itemStyle: {
+                opacity: 0.3,
+            },
+        },
+        itemStyle: {
+            borderRadius: 0,
+            borderColor: 'transparent',
+            borderWidth: 2,
+        },
+    };
+});
+const { chartRef, chartInstance } = useECharts(filteredOption, widthRef, heightRef, chartStyleRef, seriesOption, 'pie');
+const __VLS_defaults = {
+    componentId: '',
+    option: () => ({}),
+    width: 400,
+    height: 300,
+    bgColor: '#1e1e2e',
+    chartStyle: undefined,
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "pie-grid-chart" },
+    ...{ style: ({ backgroundColor: __VLS_ctx.containerBg }) },
+});
+/** @type {__VLS_StyleScopedClasses['pie-grid-chart']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "chart-area" },
+});
+/** @type {__VLS_StyleScopedClasses['chart-area']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ref: "chartRef",
+    ...{ class: "pie-chart" },
+});
+/** @type {__VLS_StyleScopedClasses['pie-chart']} */ ;
+if (__VLS_ctx.chartStyle?.series.subTitle) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: (['center-text', { fontSize: __VLS_ctx.chartStyle.series.labelFontSize }]) },
+    });
+    /** @type {__VLS_StyleScopedClasses['fontSize']} */ ;
+    /** @type {__VLS_StyleScopedClasses['center-text']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "total-label" },
+    });
+    /** @type {__VLS_StyleScopedClasses['total-label']} */ ;
+    (__VLS_ctx.totalValue);
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "sub-title" },
+    });
+    /** @type {__VLS_StyleScopedClasses['sub-title']} */ ;
+    (__VLS_ctx.chartStyle.series.subTitle);
+}
+if (__VLS_ctx.chartStyle?.legend.show && __VLS_ctx.chartStyle?.legend.layoutMode === 'grid') {
+    const __VLS_0 = CustomLegend;
+    // @ts-ignore
+    const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+        data: (__VLS_ctx.legendData),
+        colorList: (__VLS_ctx.colorList),
+        chartInstance: (__VLS_ctx.chartInstance),
+        icon: (__VLS_ctx.chartStyle.legend.icon),
+        fontSize: (__VLS_ctx.chartStyle.legend.fontSize),
+        textColor: (__VLS_ctx.chartStyle.legend.textColor),
+        gridColumns: (__VLS_ctx.chartStyle.legend.gridColumns),
+        itemGap: (__VLS_ctx.chartStyle.legend.itemGap),
+        unit: (__VLS_ctx.chartStyle.legend.unit || ''),
+        position: "bottom-flow",
+    }));
+    const __VLS_2 = __VLS_1({
+        data: (__VLS_ctx.legendData),
+        colorList: (__VLS_ctx.colorList),
+        chartInstance: (__VLS_ctx.chartInstance),
+        icon: (__VLS_ctx.chartStyle.legend.icon),
+        fontSize: (__VLS_ctx.chartStyle.legend.fontSize),
+        textColor: (__VLS_ctx.chartStyle.legend.textColor),
+        gridColumns: (__VLS_ctx.chartStyle.legend.gridColumns),
+        itemGap: (__VLS_ctx.chartStyle.legend.itemGap),
+        unit: (__VLS_ctx.chartStyle.legend.unit || ''),
+        position: "bottom-flow",
+    }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+}
+// @ts-ignore
+[containerBg, chartStyle, chartStyle, chartStyle, chartStyle, chartStyle, chartStyle, chartStyle, chartStyle, chartStyle, chartStyle, chartStyle, totalValue, legendData, colorList, chartInstance,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/components/charts/RiskScrollList.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    option?: Record<string, any>;
+    width?: number;
+    height?: number;
+    riskProps?: Record<string, any>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: number;
+    option: Record<string, any>;
+    width: number;
+    riskProps: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=RiskScrollList.vue.d.ts.map

package/dist/components/charts/RiskScrollList.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RiskScrollList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/RiskScrollList.vue"],"names":[],"mappings":"AA6TA,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAChC,CAAC;AAmWF,QAAA,MAAM,YAAY;YArWP,MAAM;YAFN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WACpB,MAAM;eAEF,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;6EAuW/B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/charts/RiskScrollList.vue.js

@@ -0,0 +1,294 @@
+import { computed } from 'vue';
+const props = withDefaults(defineProps(), {
+    option: () => ({}),
+    width: 400,
+    height: 400,
+    riskProps: () => ({}),
+});
+const rp = computed(() => props.riskProps ?? {});
+const ds = computed(() => props.option?.dataset ?? { dimensions: [], source: [] });
+const source = computed(() => ds.value.source ?? []);
+const doubledSource = computed(() => [...source.value, ...source.value]);
+const scrollSpeed = computed(() => rp.value.scrollSpeed ?? 30);
+const visibleRows = computed(() => rp.value.visibleRows ?? 5);
+const showFooter = computed(() => rp.value.showFooter ?? true);
+const bgColor = computed(() => rp.value.bgColor ?? '#ffffff');
+const borderRadius = computed(() => rp.value.borderRadius ?? 12);
+const borderColor = computed(() => rp.value.borderColor ?? '#e8ecf1');
+const containerBorderWidth = computed(() => rp.value.containerBorderWidth ?? 0);
+const shadow = computed(() => rp.value.shadow ?? '0 1px 4px rgba(0,0,0,0.04)');
+const maxHeight = computed(() => rp.value.maxHeight ?? 500);
+const itemPadding = computed(() => rp.value.itemPadding ?? '16px 24px');
+const itemBorderColor = computed(() => rp.value.itemBorderColor ?? '#f0f2f5');
+const itemBorderWidth = computed(() => rp.value.itemBorderWidth ?? 1);
+const itemBorderRadius = computed(() => rp.value.itemBorderRadius ?? 0);
+const itemBoxBorderColor = computed(() => rp.value.itemBoxBorderColor ?? '#e8ecf1');
+const itemBoxBorderWidth = computed(() => rp.value.itemBoxBorderWidth ?? 0);
+const itemBoxBorderRadius = computed(() => rp.value.itemBoxBorderRadius ?? 8);
+const itemGap = computed(() => rp.value.itemGap ?? 0);
+const itemHoverBg = computed(() => rp.value.itemHoverBg ?? '#fafbfc');
+const dotSize = computed(() => rp.value.dotSize ?? 10);
+const nameFontSize = computed(() => rp.value.nameFontSize ?? 15);
+const nameFontWeight = computed(() => rp.value.nameFontWeight ?? 600);
+const nameColor = computed(() => rp.value.nameColor ?? '#1d2a3a');
+const subFontSize = computed(() => rp.value.subFontSize ?? 13);
+const subColor = computed(() => rp.value.subColor ?? '#6b7a8a');
+const timeColor = computed(() => rp.value.timeColor ?? '#8c9aa8');
+const typeTagBg = computed(() => rp.value.typeTagBg ?? '#f4f6f9');
+const typeTagColor = computed(() => rp.value.typeTagColor ?? '#8c9aa8');
+const footerBg = computed(() => rp.value.footerBg ?? '#fafbfc');
+const footerColor = computed(() => rp.value.footerColor ?? '#8c9aa8');
+const footerFontSize = computed(() => rp.value.footerFontSize ?? 13);
+const footerAlign = computed(() => rp.value.footerAlign ?? 'right');
+// Container padding props
+const containerPaddingTop = computed(() => rp.value.containerPaddingTop ?? 0);
+const containerPaddingRight = computed(() => rp.value.containerPaddingRight ?? 0);
+const containerPaddingBottom = computed(() => rp.value.containerPaddingBottom ?? 0);
+const containerPaddingLeft = computed(() => rp.value.containerPaddingLeft ?? 0);
+// Item background color props
+const itemBgColor = computed(() => rp.value.itemBgColor ?? '#ffffff');
+const itemBgOdd = computed(() => rp.value.itemBgOdd ?? '#fafbfc');
+const itemBgEven = computed(() => rp.value.itemBgEven ?? '#ffffff');
+const useZebra = computed(() => rp.value.useZebra ?? false);
+const riskTypes = computed(() => rp.value.riskTypes ?? []);
+const defaultColor = computed(() => rp.value.defaultColor ?? '#b0bec5');
+const badgeOpacity = computed(() => rp.value.badgeOpacity ?? 0.3);
+function hexToRgba(hex, alpha) {
+    const h = hex.replace('#', '');
+    const r = parseInt(h.substring(0, 2), 16);
+    const g = parseInt(h.substring(2, 4), 16);
+    const b = parseInt(h.substring(4, 6), 16);
+    return `rgba(${r},${g},${b},${alpha})`;
+}
+function getLevelStyle(level) {
+    const found = riskTypes.value.find((t) => t.name === level);
+    const color = found?.color ?? defaultColor.value;
+    return { color, bg: hexToRgba(color, badgeOpacity.value) };
+}
+function getCell(row, ci) {
+    return row[ci] ?? '';
+}
+const totalContentHeight = computed(() => source.value.length * 56);
+const viewportHeight = computed(() => visibleRows.value * 56);
+const duration = computed(() => totalContentHeight.value / scrollSpeed.value);
+const containerStyle = computed(() => ({
+    width: '100%',
+    height: '100%',
+    background: 'tranparent', // || bgColor.value,
+    borderRadius: borderRadius.value + 'px',
+    border: `${containerBorderWidth.value}px solid ${borderColor.value}`,
+    boxShadow: shadow.value,
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    fontFamily: "'PingFang SC', 'Microsoft YaHei', sans-serif",
+    padding: `${containerPaddingTop.value}px ${containerPaddingRight.value}px ${containerPaddingBottom.value}px ${containerPaddingLeft.value}px`,
+}));
+const viewportStyle = computed(() => ({
+    flex: '1',
+    overflow: 'hidden',
+}));
+const scrollClass = computed(() => 'scroll-content scroll-animate');
+const scrollContentStyle = computed(() => ({
+    '--scroll-duration': duration.value + 's',
+}));
+const useFullBorder = computed(() => rp.value.itemUseFullBorder ?? false);
+const itemStyle = computed(() => {
+    const hasBoxBorder = itemBoxBorderWidth.value > 0;
+    return {
+        display: 'flex',
+        alignItems: 'flex-start',
+        padding: itemPadding.value,
+        ...(hasBoxBorder
+            ? { border: `${itemBoxBorderWidth.value}px solid ${itemBoxBorderColor.value}` }
+            : useFullBorder.value
+                ? { border: `${itemBorderWidth.value}px solid ${itemBorderColor.value}` }
+                : { borderBottom: `${itemBorderWidth.value}px solid ${itemBorderColor.value}` }),
+        gap: '14px',
+        transition: 'background 0.15s',
+        cursor: 'default',
+        marginBottom: itemGap.value + 'px',
+        borderRadius: hasBoxBorder ? itemBoxBorderRadius.value + 'px' : itemBorderRadius.value + 'px',
+    };
+});
+const nameStyle = computed(() => ({
+    fontWeight: nameFontWeight.value,
+    fontSize: nameFontSize.value + 'px',
+    color: nameColor.value,
+}));
+const timeStyle = computed(() => ({
+    color: timeColor.value,
+    fontSize: subFontSize.value + 'px',
+    whiteSpace: 'nowrap',
+}));
+function dotStyle(row) {
+    const s = getLevelStyle(getCell(row, 1));
+    return {
+        flexShrink: '0',
+        width: dotSize.value + 'px',
+        height: dotSize.value + 'px',
+        borderRadius: '50%',
+        marginTop: '5px',
+        background: s.color,
+    };
+}
+function badgeStyle(row) {
+    const s = getLevelStyle(getCell(row, 1));
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: '1px 12px',
+        borderRadius: '30px',
+        fontSize: '12px',
+        fontWeight: '600',
+        lineHeight: '22px',
+        minWidth: '36px',
+        letterSpacing: '0.3px',
+        background: s.bg,
+        color: s.color,
+    };
+}
+function subTagStyle(row) {
+    return {
+        fontSize: '12px',
+        color: typeTagColor.value,
+        background: typeTagBg.value,
+        padding: '0 10px',
+        borderRadius: '30px',
+        lineHeight: '22px',
+        marginLeft: '6px',
+    };
+}
+const riskSubStyle = computed(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '16px',
+    flexWrap: 'wrap',
+    fontSize: subFontSize.value + 'px',
+    color: subColor.value,
+}));
+const footerStyle = computed(() => ({
+    padding: '14px 24px',
+    borderTop: `1px solid ${itemBorderColor.value}`,
+    display: 'flex',
+    justifyContent: footerAlign.value === 'center' ? 'center' : footerAlign.value === 'left' ? 'flex-start' : 'flex-end',
+    background: footerBg.value,
+    fontSize: footerFontSize.value + 'px',
+    color: footerColor.value,
+    flexShrink: '0',
+}));
+const __VLS_defaults = {
+    option: () => ({}),
+    width: 400,
+    height: 400,
+    riskProps: () => ({}),
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "risk-scroll-list" },
+    ...{ style: (__VLS_ctx.containerStyle) },
+});
+/** @type {__VLS_StyleScopedClasses['risk-scroll-list']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "scroll-viewport" },
+    ...{ style: (__VLS_ctx.viewportStyle) },
+});
+/** @type {__VLS_StyleScopedClasses['scroll-viewport']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: (__VLS_ctx.scrollClass) },
+    ...{ style: (__VLS_ctx.scrollContentStyle) },
+});
+for (const [row, ri] of __VLS_vFor((__VLS_ctx.doubledSource))) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        key: (ri),
+        ...{ class: "risk-list-item" },
+        ...{ style: ({
+                ...__VLS_ctx.itemStyle,
+                '--item-hover-bg': __VLS_ctx.itemHoverBg,
+                background: __VLS_ctx.useZebra ? (ri % 2 === 0 ? __VLS_ctx.itemBgOdd : __VLS_ctx.itemBgEven) : __VLS_ctx.itemBgColor,
+            }) },
+    });
+    /** @type {__VLS_StyleScopedClasses['risk-list-item']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "risk-dot" },
+        ...{ style: (__VLS_ctx.dotStyle(row)) },
+    });
+    /** @type {__VLS_StyleScopedClasses['risk-dot']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "risk-content" },
+    });
+    /** @type {__VLS_StyleScopedClasses['risk-content']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "risk-main" },
+    });
+    /** @type {__VLS_StyleScopedClasses['risk-main']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "company-name" },
+        ...{ style: (__VLS_ctx.nameStyle) },
+    });
+    /** @type {__VLS_StyleScopedClasses['company-name']} */ ;
+    (__VLS_ctx.getCell(row, 0));
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "risk-badge" },
+        ...{ style: (__VLS_ctx.badgeStyle(row)) },
+    });
+    /** @type {__VLS_StyleScopedClasses['risk-badge']} */ ;
+    (__VLS_ctx.getCell(row, 1) || '未标注');
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "risk-sub" },
+        ...{ style: (__VLS_ctx.riskSubStyle) },
+    });
+    /** @type {__VLS_StyleScopedClasses['risk-sub']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "risk-type" },
+    });
+    /** @type {__VLS_StyleScopedClasses['risk-type']} */ ;
+    (__VLS_ctx.getCell(row, 2));
+    if (__VLS_ctx.getCell(row, 4)) {
+        __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+            ...{ class: "sub-tag" },
+            ...{ style: (__VLS_ctx.subTagStyle(row)) },
+        });
+        /** @type {__VLS_StyleScopedClasses['sub-tag']} */ ;
+        (__VLS_ctx.getCell(row, 4));
+    }
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "risk-time" },
+        ...{ style: (__VLS_ctx.timeStyle) },
+    });
+    /** @type {__VLS_StyleScopedClasses['risk-time']} */ ;
+    (__VLS_ctx.getCell(row, 3) || '—');
+    // @ts-ignore
+    [containerStyle, viewportStyle, scrollClass, scrollContentStyle, doubledSource, itemStyle, itemHoverBg, useZebra, itemBgOdd, itemBgEven, itemBgColor, dotStyle, nameStyle, getCell, getCell, getCell, getCell, getCell, getCell, badgeStyle, riskSubStyle, subTagStyle, timeStyle,];
+}
+if (__VLS_ctx.source.length === 0) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "empty-state" },
+    });
+    /** @type {__VLS_StyleScopedClasses['empty-state']} */ ;
+}
+if (__VLS_ctx.showFooter) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "list-footer" },
+        ...{ style: (__VLS_ctx.footerStyle) },
+    });
+    /** @type {__VLS_StyleScopedClasses['list-footer']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({});
+    (__VLS_ctx.source.length);
+}
+// @ts-ignore
+[source, source, showFooter, footerStyle,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/components/charts/ScrollList.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    option?: Record<string, any>;
+    width?: number;
+    height?: number;
+    scrollProps?: Record<string, any>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: number;
+    option: Record<string, any>;
+    width: number;
+    scrollProps: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=ScrollList.vue.d.ts.map

package/dist/components/charts/ScrollList.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollList.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/ScrollList.vue"],"names":[],"mappings":"AAiKA,KAAK,WAAW,GAAG;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAClC,CAAC;AAuLF,QAAA,MAAM,YAAY;YAzLP,MAAM;YAFN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WACpB,MAAM;iBAEA,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;6EA2LjC,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}