update at 2026-01-21 19:04:10

todolist.md

@@ -3,7 +3,7 @@
 ## 当前实现优化点
 1. 目前绘制罗盘代码的demo仅仅是为了测试工具类是否正确。优化为统一使用json配置来实现罗盘绘制。
 2. 扇区的内容可以是是文字或者SVG图标，如为SVG，sectors的content中指定svg文件名，SVG布局规则同文字。
-3. 扇区内容支持多文本单元：使用"|"分隔多个文本（如"甲乙|子|丙丁"），角度分配采用智能策略：
+3. 扇区内容支持多文本单元：使用"|"分隔多个文本（如"甲乙|子|丙丁"），角度分配采用智能策略，全局配置LAYOUT_RATIO_PRESETS：
    - 1个单元：100%
    - 2个单元：平均 [0.5, 0.5]
    - 3个单元：中间大 [0.25, 0.5, 0.25]
@@ -14,7 +14,75 @@
 5. Json中不用关注是第几层，按配置的rinner，router等参数绘制即可。
 
 ## Json文件配置
-1. 扇区背景色着色原则：
+1. json字段配置说明
+   
+    ### 罗盘级别参数（根级别）
+    | 参数名 | 类型 | 必填 | 说明 | 示例 |
+    |--------|------|------|------|------|
+    | name | string | 是 | 罗盘配置名称 | "demo" |
+    | description | string | 否 | 罗盘配置描述 | "luopan demo config" |
+    | background | string | 是 | 全局背景色（十六进制颜色值），未着色扇区使用此颜色 | "#000000" |
+    | outerRadius | number | 是 | 罗盘外半径，单位：像素（去掉该参数，自动计算最大半径） | 500 |
+    | theme | object | 是 | 主题配置对象，包含colorPalettes命名配色方案 | 见下方theme说明 |
+    | centerIcon | object | 否 | 中心图标配置 | 见下方centerIcon说明 |
+    | degreeRing | object | 否 | 360度刻度环配置 | 见下方degreeRing说明 |
+    | layers | array | 是 | 层配置数组，从内向外定义每一层 | 见下方layers说明 |
+
+    **theme对象参数：**
+    | 参数名 | 类型 | 必填 | 说明 | 示例 |
+    |--------|------|------|------|------|
+    | name | string | 否 | 主题名称 | "五行配色主题" |
+    | colorPalettes | object | 是 | 命名配色方案，定义可复用的颜色键值对 | {"木": "#43A047", "火": "#E53935"} |
+
+    **centerIcon对象参数：**
+    | 参数名 | 类型 | 必填 | 说明 | 示例 |
+    |--------|------|------|------|------|
+    | rIcon | number | 是 | 图标半径，单位：像素 | 50 |
+    | opacity | number | 是 | 图标透明度（0.0-1.0） | 0.8 |
+    | name | string | 是 | SVG图标文件名，路径固定为src/assets/icons/ | "centericon.svg" |
+
+    **degreeRing对象参数：**
+    | 参数名 | 类型 | 必填 | 说明 | 示例 |
+    |--------|------|------|------|------|
+    | rInner | number | 是 | 刻度环内半径 | 450 |
+    | rOuter | number | 是 | 刻度环外半径 | 500 |
+    | showDegree | number | 是 | 是否显示度数：0=不显示，1=显示 | 1 |
+    | mode | string | 是 | 刻度线模式："inner"、"outer"或"both" | "both" |
+    | opacity | number | 是 | 圆环透明度（0.0-1.0） | 0.3 |
+    | tickLength | number | 是 | 刻度线长度，单位：像素 | 6 |
+    | majorTick | number | 是 | 主刻度间隔（度） | 10 |
+    | minorTick | number | 是 | 次刻度间隔（度） | 5 |
+    | microTick | number | 是 | 微刻度间隔（度） | 1 |
+    | tickColor | string | 是 | 刻度线颜色（十六进制） | "#ffffff" |
+    | ringColor | string | 是 | 圆环颜色（十六进制） | "#ffffff" |
+
+    ### 层级别参数（layer对象）
+    | 参数名 | 类型 | 必填 | 说明 | 示例 |
+    |--------|------|------|------|------|
+    | divisions | number | 是 | 等分数，将该层分为多少个扇区 | 12 |
+    | rInner | number | 是 | 层内半径，单位：像素 | 160 |
+    | rOuter | number | 是 | 层外半径，单位：像素 | 200 |
+    | startAngle | number | 否 | 第一个扇区的起始角度（度，0度为正北，顺时针），默认0 | 0 |
+    | colorRef | string | 否 | 层级颜色引用，引用theme.colorPalettes中的颜色名 | "土" |
+    | innerFill | number | 否 | 内缩设置：0=不内缩，1=内缩1像素，用于规律填色的扇区 | 1 |
+    | num | number | 否 | 规律填色：连续着色的扇区数量，与interval配合使用 | 3 |
+    | interval | number | 否 | 规律填色：着色后间隔的扇区数量，0表示无间隔 | 1 |
+    | groupSplit | boolean | 否 | 是否显示同组扇区间分割线，false隐藏，默认true | false |
+    | sectors | array | 否 | 扇区配置数组，可省略表示该层只有填色无内容 | 见下方sectors说明 |
+
+    ### 扇区级别参数（sector对象）
+    | 参数名 | 类型 | 必填 | 说明 | 示例 |
+    |--------|------|------|------|------|
+    | content | string | 否 | 扇区文字内容或SVG文件名，支持"\|"分隔多文本单元 | "子" 或 "甲乙\|子\|丙丁" |
+    | colorRef | string | 否 | 扇区颜色引用（最高优先级），覆盖层级colorRef | "水" |
+    | innerFill | number | 否 | 扇区内缩设置：0=不内缩，1=内缩1像素 | 1 |
+
+    **多文本单元说明：**
+    - content使用"\|"分隔多个文本时，角度按LAYOUT_RATIO_PRESETS自动分配
+    - 1个单元：100%；2个：[0.5, 0.5]；3个：[0.25, 0.5, 0.25]；4个：[0.2, 0.3, 0.3, 0.2]；5个以上：平均
+    - 单元内自动计算字体大小，单元间无分割线
+
+2. 扇区背景色着色原则：
    最高优先级，在layer中指定colorRef
    第二优先级：colorRef规律填色，也就是说，如果同一个sector中指定了colorRef，该sector也指定了layer级别的colorRef，以前者为准，innerFill使用相同规则。
    参数：