gavin/lupin-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
douboer
2026-01-21 13:22:26 +08:00
commit 24452838a1
28 changed files with 7901 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

193
public/complex-luopan.json Normal file
View File

@@ -0,0 +1,193 @@
{
"name": "传统风水罗盘（完整版）",
"description": "24层复杂罗盘配置，包含天干地支、八卦、二十四山、六十甲子等",
"theme": "chinese",
"outerRadius": 500,
"layers": [
{
"divisions": 2,
"rInner": 0,
"rOuter": 30,
"sectors": [
{ "content": "阴", "fillColor": "#000000", "textColor": "#FFFFFF" },
{ "content": "阳", "fillColor": "#FFFFFF", "textColor": "#000000" }
]
},
{
"divisions": 4,
"rInner": 30,
"rOuter": 60,
"sectors": [
{ "content": "少阳", "fillColor": "#FFD700" },
{ "content": "太阳", "fillColor": "#FF0000", "textColor": "#FFFFFF" },
{ "content": "少阴", "fillColor": "#32CD32" },
{ "content": "太阴", "fillColor": "#0000FF", "textColor": "#FFFFFF" }
]
},
{
"divisions": 8,
"rInner": 60,
"rOuter": 100,
"sectors": [
{ "content": "乾☰", "fillColor": "#DC143C", "textColor": "#FFFFFF" },
{ "content": "兑☱", "fillColor": "#FFD700", "textColor": "#000000" },
{ "content": "离☲", "fillColor": "#FF6347", "textColor": "#FFFFFF" },
{ "content": "震☳", "fillColor": "#32CD32", "textColor": "#000000" },
{ "content": "巽☴", "fillColor": "#00A86B", "textColor": "#FFFFFF" },
{ "content": "坎☵", "fillColor": "#4169E1", "textColor": "#FFFFFF" },
{ "content": "艮☶", "fillColor": "#CD853F", "textColor": "#000000" },
{ "content": "坤☷", "fillColor": "#8B4513", "textColor": "#FFFFFF" }
]
},
{
"divisions": 12,
"rInner": 100,
"rOuter": 130,
"sectors": [
{ "content": "子", "fillColor": "#4169E1", "textColor": "#FFFFFF" },
{ "content": "丑", "fillColor": "#8B4513", "textColor": "#FFFFFF" },
{ "content": "寅", "fillColor": "#228B22", "textColor": "#FFFFFF" },
{ "content": "卯", "fillColor": "#00A86B", "textColor": "#FFFFFF" },
{ "content": "辰", "fillColor": "#8B7355", "textColor": "#FFFFFF" },
{ "content": "巳", "fillColor": "#FF4500", "textColor": "#FFFFFF" },
{ "content": "午", "fillColor": "#DC143C", "textColor": "#FFFFFF" },
{ "content": "未", "fillColor": "#8B4513", "textColor": "#FFFFFF" },
{ "content": "申", "fillColor": "#FFD700", "textColor": "#000000" },
{ "content": "酉", "fillColor": "#FFA500", "textColor": "#000000" },
{ "content": "戌", "fillColor": "#8B7355", "textColor": "#FFFFFF" },
{ "content": "亥", "fillColor": "#000080", "textColor": "#FFFFFF" }
]
},
{
"divisions": 24,
"rInner": 130,
"rOuter": 170,
"sectors": [
{ "content": "壬" }, { "content": "子" }, { "content": "癸" },
{ "content": "丑" }, { "content": "艮" }, { "content": "寅" },
{ "content": "甲" }, { "content": "卯" }, { "content": "乙" },
{ "content": "辰" }, { "content": "巽" }, { "content": "巳" },
{ "content": "丙" }, { "content": "午" }, { "content": "丁" },
{ "content": "未" }, { "content": "坤" }, { "content": "申" },
{ "content": "庚" }, { "content": "酉" }, { "content": "辛" },
{ "content": "戌" }, { "content": "乾" }, { "content": "亥" }
],
"colorMode": "alternating",
"alternatingColors": ["#FFF9C4", "#FFCCBC"]
},
{
"divisions": 60,
"rInner": 170,
"rOuter": 210,
"sectors": [
{ "content": "甲子" }, { "content": "乙丑" }, { "content": "丙寅" }, { "content": "丁卯" }, { "content": "戊辰" },
{ "content": "己巳" }, { "content": "庚午" }, { "content": "辛未" }, { "content": "壬申" }, { "content": "癸酉" },
{ "content": "甲戌" }, { "content": "乙亥" }, { "content": "丙子" }, { "content": "丁丑" }, { "content": "戊寅" },
{ "content": "己卯" }, { "content": "庚辰" }, { "content": "辛巳" }, { "content": "壬午" }, { "content": "癸未" },
{ "content": "甲申" }, { "content": "乙酉" }, { "content": "丙戌" }, { "content": "丁亥" }, { "content": "戊子" },
{ "content": "己丑" }, { "content": "庚寅" }, { "content": "辛卯" }, { "content": "壬辰" }, { "content": "癸巳" },
{ "content": "甲午" }, { "content": "乙未" }, { "content": "丙申" }, { "content": "丁酉" }, { "content": "戊戌" },
{ "content": "己亥" }, { "content": "庚子" }, { "content": "辛丑" }, { "content": "壬寅" }, { "content": "癸卯" },
{ "content": "甲辰" }, { "content": "乙巳" }, { "content": "丙午" }, { "content": "丁未" }, { "content": "戊申" },
{ "content": "己酉" }, { "content": "庚戌" }, { "content": "辛亥" }, { "content": "壬子" }, { "content": "癸丑" },
{ "content": "甲寅" }, { "content": "乙卯" }, { "content": "丙辰" }, { "content": "丁巳" }, { "content": "戊午" },
{ "content": "己未" }, { "content": "庚申" }, { "content": "辛酉" }, { "content": "壬戌" }, { "content": "癸亥" }
],
"colorMode": "alternating",
"alternatingColors": ["#FFE082", "#FFCC80", "#FFAB91"]
},
{
"divisions": 72,
"rInner": 210,
"rOuter": 250,
"sectors": [
{ "content": "1" }, { "content": "2" }, { "content": "3" }, { "content": "4" }, { "content": "5" },
{ "content": "6" }, { "content": "7" }, { "content": "8" }, { "content": "9" }, { "content": "10" },
{ "content": "11" }, { "content": "12" }, { "content": "13" }, { "content": "14" }, { "content": "15" },
{ "content": "16" }, { "content": "17" }, { "content": "18" }, { "content": "19" }, { "content": "20" },
{ "content": "21" }, { "content": "22" }, { "content": "23" }, { "content": "24" }, { "content": "25" },
{ "content": "26" }, { "content": "27" }, { "content": "28" }, { "content": "29" }, { "content": "30" },
{ "content": "31" }, { "content": "32" }, { "content": "33" }, { "content": "34" }, { "content": "35" },
{ "content": "36" }, { "content": "37" }, { "content": "38" }, { "content": "39" }, { "content": "40" },
{ "content": "41" }, { "content": "42" }, { "content": "43" }, { "content": "44" }, { "content": "45" },
{ "content": "46" }, { "content": "47" }, { "content": "48" }, { "content": "49" }, { "content": "50" },
{ "content": "51" }, { "content": "52" }, { "content": "53" }, { "content": "54" }, { "content": "55" },
{ "content": "56" }, { "content": "57" }, { "content": "58" }, { "content": "59" }, { "content": "60" },
{ "content": "61" }, { "content": "62" }, { "content": "63" }, { "content": "64" }, { "content": "65" },
{ "content": "66" }, { "content": "67" }, { "content": "68" }, { "content": "69" }, { "content": "70" },
{ "content": "71" }, { "content": "72" }
],
"colorMode": "solid",
"defaultFillColor": "#FFF59D"
},
{
"divisions": 120,
"rInner": 250,
"rOuter": 290,
"colorMode": "alternating",
"alternatingColors": ["#FFEB3B", "#FFC107"]
},
{
"divisions": 120,
"rInner": 290,
"rOuter": 320,
"colorMode": "solid",
"defaultFillColor": "#FFFDE7"
},
{
"divisions": 72,
"rInner": 320,
"rOuter": 350,
"sectors": [
{ "content": "0" }, { "content": "5" }, { "content": "10" }, { "content": "15" },
{ "content": "20" }, { "content": "25" }, { "content": "30" }, { "content": "35" },
{ "content": "40" }, { "content": "45" }, { "content": "50" }, { "content": "55" },
{ "content": "60" }, { "content": "65" }, { "content": "70" }, { "content": "75" },
{ "content": "80" }, { "content": "85" }, { "content": "90" }, { "content": "95" },
{ "content": "100" }, { "content": "105" }, { "content": "110" }, { "content": "115" },
{ "content": "120" }, { "content": "125" }, { "content": "130" }, { "content": "135" },
{ "content": "140" }, { "content": "145" }, { "content": "150" }, { "content": "155" },
{ "content": "160" }, { "content": "165" }, { "content": "170" }, { "content": "175" },
{ "content": "180" }, { "content": "185" }, { "content": "190" }, { "content": "195" },
{ "content": "200" }, { "content": "205" }, { "content": "210" }, { "content": "215" },
{ "content": "220" }, { "content": "225" }, { "content": "230" }, { "content": "235" },
{ "content": "240" }, { "content": "245" }, { "content": "250" }, { "content": "255" },
{ "content": "260" }, { "content": "265" }, { "content": "270" }, { "content": "275" },
{ "content": "280" }, { "content": "285" }, { "content": "290" }, { "content": "295" },
{ "content": "300" }, { "content": "305" }, { "content": "310" }, { "content": "315" },
{ "content": "320" }, { "content": "325" }, { "content": "330" }, { "content": "335" },
{ "content": "340" }, { "content": "345" }, { "content": "350" }, { "content": "355" }
],
"colorMode": "solid",
"defaultFillColor": "#FFFDE7"
},
{
"divisions": 72,
"rInner": 350,
"rOuter": 380,
"colorMode": "alternating",
"alternatingColors": ["#FFD54F", "#FFF176"]
},
{
"divisions": 72,
"rInner": 380,
"rOuter": 420,
"colorMode": "solid",
"defaultFillColor": "#FFEB3B"
},
{
"divisions": 72,
"rInner": 420,
"rOuter": 460,
"colorMode": "alternating",
"alternatingColors": ["#FFD54F", "#FFCA28", "#FFC107"]
},
{
"divisions": 72,
"rInner": 460,
"rOuter": 500,
"colorMode": "solid",
"defaultFillColor": "#FFD54F"
}
]
}

324
public/demo.json.conf Normal file
View File

@@ -0,0 +1,324 @@
-- ========================================
-- 罗盘配置文件 (Demo Configuration)
-- ========================================
-- 该文件不是正式JSON，支持使用 -- 添加注释
--
-- 功能说明：
-- 1. 支持命名配色方案 (Named Color Palettes)
-- 2. 支持规律填色机制 (Pattern-based Coloring)
-- 3. 文字颜色自动计算 (Auto Text Color)
-- 4. 扇区内缩效果控制 (Inner Fill Control)
-- ========================================
{
"name": "demo",
"description": "luopan demo config with named color palettes",
-- ========================================
-- 全局配置
-- ========================================
"background": "#000000", -- 全局背景色，未着色扇区使用此颜色
"outerRadius": 500, -- 罗盘外半径，单位：像素
-- ========================================
-- 主题配置
-- ========================================
"theme": {
"name": "五行配色主题",
-- 文字颜色自动计算：根据背景色明暗度自动选择黑/白文字，确保高对比度
-- "textOnLight": "#1a1a1a", 已删除，由系统自动计算
-- "textOnDark": "#ffffff", 已删除，由系统自动计算
-- ========================================
-- 命名配色方案 (Named Color Palettes)
-- ========================================
-- 定义可复用的命名颜色，在 layers 中通过名称引用
-- 包含10种配色：黑、灰、白、五行（木火土金水）、热、冷、强、软
"colorPalettes": {
"黑": "#000000", -- 纯黑
"灰": "#757575", -- 中灰
"白": "#ffffff", -- 纯白
"木": "#43A047", -- 生机绿（五行：木）
"火": "#E53935", -- 烈焰红（五行：火）
"土": "#8D6E63", -- 大地棕（五行：土）
"金": "#78909C", -- 金属灰（五行：金）
"水": "#0288D1", -- 水蓝（五行：水）
"热": "#FF8F00", -- 暖橙（暖色调）
"冷": "#1976D2", -- 冷蓝（冷色调）
"强": "#D32F2F", -- 强烈红（高饱和度）
"\u8f6f": "#FFE0B2" -- 柔和杏（低饱和度）
}
},
-- ========================================
-- 中心图标配置 (Center Icon Configuration)
-- ========================================
"centerIcon": {
"rIcon": 50, -- 图标半径，单位：像素
"opacity": 0.8, -- 图标透明度（0.0-1.0，0为完全透明，1为完全不透明）
"name": "taiji.svg" -- SVG图标文件名，路径固定为 /icons/ 目录
},
-- ========================================
-- 360度刻度环配置 (360 Degree Scale Ring)
-- ========================================
"degreeRing": {
"rInner": 450, -- 刻度环内半径
"rOuter": 500, -- 刻度环外半径
"showDegree": 1, -- 是否显示度数：0=不显示，1=显示（按 10° 间隔）
"mode": "both", -- 刻度线模式："inner"（在rInner外侧）、"outer"（在rOuter内侧）、"both"（两侧都有，度数居中）
"opacity": 0.3, -- 圆环透明度（0.0-1.0，设置为0可以只显示刻度而不显示圆圈）
"tickLength": 6, -- 刻度线长度，单位：像素, minorTick比majorTick短1px， microTick比minorTick短1px
"majorTick": 10, -- 主刻度间隔（度），如 10 表示每 10° 一个主刻度
"minorTick": 5, -- 次刻度间隔（度），如 2 表示每 2° 一个次刻度
"microTick": 1, -- 微刻度间隔（度），如 1 表示每 1° 一个微刻度
"tickColor": "#ffffff",-- 刻度线颜色
"ringColor": "#ffffff" -- 圆环颜色
},
-- ========================================
-- 层配置 (Layers Configuration)
-- ========================================
-- 从内向外定义每一层的配置
"layers": [
-- ========================================
-- 第1层：阴阳 (2等分)
-- ========================================
-- 演示：扇区级别 colorRef 优先级最高
{
"divisions": 2, -- 2等分
"rInner": 60, -- 内半径
"rOuter": 90, -- 外半径
-- "colorPalette": "Black", -- 默认配色（已废弃，已注释）
"sectors": [
{
"content": "阴", -- 扇区文字内容
"innerFill": 1 -- 1=显示内缩效果，0=不显示
},
{
"content": "阳",
"colorRef": "White", -- 扇区级别指定颜色（优先级最高）
"innerFill": 0
}
]
},
-- ========================================
-- 第2层：四象 (4等分)
-- ========================================
-- 演示：旧的 colorMode 方式（将被移除）
{
"divisions": 4,
"rInner": 90,
"rOuter": 120,
-- "colorPalette": "Fire", -- 旧方式：使用 colorPalette（已废弃，已注释）
-- "colorMode": "alternating", -- 旧方式：交替色模式（已废弃，已注释）
"sectors": [
{ "content": "少阳", "innerFill": 1 },
{ "content": "太阳", "innerFill": 0 },
{ "content": "少阴", "innerFill": 1 },
{ "content": "太阴", "innerFill": 0 }
]
},
-- ========================================
-- 第3层：八卦 (8等分)
-- ========================================
-- 演示：旧的 colorMode 方式（将被移除）
{
"divisions": 8,
"rInner": 120,
"rOuter": 160,
-- "colorPalette": "Wood", -- 旧方式：使用 colorPalette
-- "colorMode": "gradient", -- 旧方式：渐变模式（将被移除）
"sectors": [
{ "content": "乾", "innerFill": 1 },
{ "content": "兑", "innerFill": 0 },
{ "content": "离", "innerFill": 1 },
{ "content": "震", "innerFill": 0 },
{ "content": "巽", "innerFill": 1 },
{ "content": "坎", "innerFill": 0 },
{ "content": "艮", "innerFill": 1 },
{ "content": "坤", "innerFill": 0 }
]
},
-- ========================================
-- 第4层：地支 (12等分)
-- ========================================
-- 演示：规律填色 - 3个着色，1个间隔
-- 着色规律：start=2, num=3, interval=1
-- 效果：扇区2-4着色，5空白，6-8着色，9空白，10-12着色，1空白
{
"divisions": 12,
"rInner": 160,
"rOuter": 200,
"colorRef": "土", -- 着色使用的颜色引用
"innerFill": 1, -- 着色区域的内缩设置
"start": 2, -- 从第2个扇区开始着色（1-based索引）
"num": 3, -- 连续着色3个扇区
"interval": 1, -- 着色后间隔1个扇区
"sectors": [
{ "content": "子", "colorRef": "水", "innerFill": 1 }, -- 高优先级着色：水
{ "content": "丑" },
{ "content": "寅", "colorRef": "木", "innerFill": 0 }, -- 高优先级着色：木
{ "content": "卯", "colorRef": "木", "innerFill": 1 }, -- 高优先级着色：木
{ "content": "辰" },
{ "content": "巳", "colorRef": "火", "innerFill": 1 }, -- 高优先级着色：火
{ "content": "午", "colorRef": "火", "innerFill": 0 }, -- 高优先级着色：火
{ "content": "未", "innerFill": 1 },
{ "content": "申", "colorRef": "金", "innerFill": 0 }, -- 高优先级着色：金
{ "content": "酉", "colorRef": "金", "innerFill": 1 }, -- 高优先级着色：金
{ "content": "戌" },
{ "content": "亥", "innerFill": 0 }
]
},
-- ========================================
-- 第5层：二十四山 (24等分)
-- ========================================
-- 演示：规律填色 - 2个着色，2个间隔
-- 着色规律：start=1, num=2, interval=2
-- 效果：扇区1-2着色，3-4空白，5-6着色，7-8空白……
{
"divisions": 24,
"rInner": 200,
"rOuter": 250,
"colorRef": "水", -- 使用"水"配色
"innerFill": 0, -- 不显示内缩
"start": 1, -- 从第1个扇区开始
"num": 2, -- 连续着色2个扇区
"interval": 2, -- 着色后间隔2个扇区
"sectors": [
{ "content": "壬" }, { "content": "子" }, { "content": "癸" },
{ "content": "丑" }, { "content": "艮" }, { "content": "寅" },
{ "content": "甲" }, { "content": "卯" }, { "content": "乙" },
{ "content": "辰" }, { "content": "巽" }, { "content": "巳" },
{ "content": "丙" }, { "content": "午" }, { "content": "丁" },
{ "content": "未" }, { "content": "坤" }, { "content": "申" },
{ "content": "庚" }, { "content": "酉" }, { "content": "辛" },
{ "content": "戌" }, { "content": "乾" }, { "content": "亥" }
]
},
-- ========================================
-- 第6层：五行 (5等分)
-- ========================================
-- 演示：每个扇区单独指定 colorRef（优先级最高）
{
"divisions": 5,
"rInner": 250,
"rOuter": 300,
"sectors": [
{ "content": "木", "colorRef": "Wood", "innerFill": 1 }, -- 单独指定木色
{ "content": "火", "colorRef": "Fire", "innerFill": 1 }, -- 单独指定火色
{ "content": "土", "colorRef": "Earth", "innerFill": 0 }, -- 单独指定土色
{ "content": "金", "colorRef": "Metal", "innerFill": 1 }, -- 单独指定金色
{ "content": "水", "colorRef": "Water", "innerFill": 1 } -- 单独指定水色
]
},
-- ========================================
-- 第7层：8等分示例
-- ========================================
-- 演示：规律填色 - 交替着色（1个着色，1个间隔）
-- 着色规律：start=1, num=1, interval=1
-- 效果：奇数扇区着色，偶数扇区空白
{
"divisions": 8,
"rInner": 300,
"rOuter": 360,
"colorRef": "热", -- 使用"热"配色（暖橙色）
"innerFill": 1, -- 显示内缩
"start": 1, -- 从第1个扇区开始
"num": 1, -- 连续着色1个扇区
"interval": 1, -- 着色后间隔1个扇区（形成交替效果）
"sectors": [
{ "content": "1" }, { "content": "2" }, { "content": "3" },
{ "content": "4" }, { "content": "5" }, { "content": "6" },
{ "content": "7" }, { "content": "8" }
]
},
-- ========================================
-- 第8层：16等分示例
-- ========================================
-- 演示：规律填色 - 4个着色，2个间隔，从第3个开始
-- 着色规律：start=3, num=4, interval=2
-- 效果：扇区3-6着色，7-8空白，9-12着色，13-14空白，15-18着色……
{
"divisions": 16,
"rInner": 360,
"rOuter": 430,
"colorRef": "冷", -- 使用"冷"配色（冷蓝色）
"innerFill": 0, -- 不显示内缩
"start": 3, -- 从第3个扇区开始
"num": 4, -- 连续着色4个扇区
"interval": 2 -- 着色后间隔2个扇区
},
-- ========================================
-- 第9层：8等分示例
-- ========================================
-- 演示：规律填色 - 连续着色（无间隔）
-- 着色规律：start=1, num=2, interval=0
-- 效果：全部扇区都着色（因为 interval=0，会连续循环）
{
"divisions": 8,
"rInner": 430,
"rOuter": 480,
"colorRef": "强", -- 使用"强"配色（强烈红）
"innerFill": 1, -- 显示内缩
"start": 1, -- 从第1个扇区开始
"num": 2, -- 连续着色2个扇区
"interval": 0 -- 0=无间隔，全部着色
},
-- ========================================
-- 第10层：12等分示例（最外层）
-- ========================================
-- 演示：规律填色 - 1个着色，2个间隔
-- 着色规律：start=1, num=1, interval=2
-- 效果：扇区1着色，2-3空白，4着色，5-6空白，7着色……
{
"divisions": 12,
"rInner": 480,
"rOuter": 500,
"colorRef": "软", -- 使用"软"配色（柔和杏）
"innerFill": 0, -- 不显示内缩
"start": 1, -- 从第1个扇区开始
"num": 1, -- 连续着色1个扇区
"interval": 2 -- 着色后间隔2个扇区
}
]
}
-- ========================================
-- 扇区背景色着色优先级总结
-- ========================================
-- 优先级1（最高）：sectors 中单独指定 colorRef
-- 示例：{ "content": "木", "colorRef": "木" }
--
-- 优先级2：层级规律填色配置
-- 通过 colorRef + start + num + interval 实现规律着色
-- 未着色的扇区使用全局 background 颜色
--
-- ========================================
-- 规律填色算法说明
-- ========================================
-- start: 起始扇区索引（1-based，从1开始计数）
-- num: 连续着色扇区数量
-- interval: 着色后间隔的扇区数量
--
-- 算法：循环执行 "着色num个" → "跳过interval个"
-- 特殊情况：interval=0 表示无间隔，全部着色
--
-- 示例：divisions=12, start=2, num=3, interval=1
-- 扇区1: 空白（start之前）
-- 扇区2-4: 着色（num=3）
-- 扇区5: 空白（interval=1）
-- 扇区6-8: 着色（num=3）
-- 扇区9: 空白（interval=1）
-- 扇区10-12: 着色（num=3）
-- ========================================