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

update at 2026-01-23 23:20:39

Browse Source
This commit is contained in:
douboer@gmail.com
2026-01-23 23:20:39 +08:00
parent dc45937623
commit d6312fcd16
24 changed files with 982 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
public/demo.json
View File

@@ -6,23 +6,7 @@
"strokeOpacity": 1,
"strokeColor": "黑",
"insetDistance": 1,
"theme": {
"name": "五行配色主题",
"colorPalettes": {
"黑": "#000000",
"灰": "#757575",
"白": "#ffffff",
"木": "#43A047",
"火": "#E53935",
"土": "#8D6E63",
"金": "#D4AF37",
"水": "#0288D1",
"热": "#FF8F00",
"冷": "#1976D2",
"强": "#D32F2F",
"软": "#FFE0B2"
}
},
"themeRef": "五行强",
"layers": [
{
"type": "centerIcon",

37
public/demo.json.conf
View File

@@ -26,33 +26,9 @@
-- ========================================
-- 主题配置
-- ========================================
"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" -- 柔和杏（低饱和度）
},
},
-- 主题统一放在 public/themes.json 中管理
-- 通过 themeRef 引用主题名称；不填则使用 themes.json.default
"themeRef": "五行弱",
-- ========================================
-- 层配置 (Layers Configuration)
@@ -129,7 +105,7 @@
"startAngle": 0, -- 第一个扇区的起始角度（度，0度为正北方向，顺时针）
"colorRef": "土", -- 着色使用的颜色引用
"innerFill": 1, -- 着色区域的内缩设置
-- "start": 1, -- 从第1个扇区开始着色（已废弃，统一从第1个扇区开始）
-- "patternOffset": 2, -- 第一个着色单元偏移1个扇区（可选）
"num": 3, -- 连续着色3个扇区
"interval": 1, -- 着色后间隔1个扇区
"sectors": [
@@ -265,17 +241,18 @@
-- 示例：{ "content": "木", "colorRef": "木" }
--
-- 优先级2：层级规律填色配置
-- 通过 colorRef + start + num + interval 实现规律着色
-- 通过 colorRef + patternOffset + num + interval 实现规律着色
-- 未着色的扇区使用全局 background 颜色
--
-- ========================================
-- 规律填色算法说明
-- ========================================
-- startAngle: 第一个扇区的起始角度（度，0度为正北方向，顺时针增加）
-- patternOffset: 规律填色起始偏移（扇区序号，从1开始，默认1，未指定时与startAngle对齐）
-- num: 连续着色扇区数量
-- interval: 着色后间隔的扇区数量
--
-- 算法：从第1个扇区开始，循环执行 "着色num个" → "跳过interval个"
-- 算法：从第 patternOffset 个扇区开始，循环执行 "着色num个" → "跳过interval个"
-- 特殊情况：interval=0 表示无间隔，全部着色
--
-- 示例：divisions=12, startAngle=0, num=3, interval=1

31
public/demo2.json
View File

@@ -1,25 +1,13 @@
{
"name": "demo2",
"description": "luopan demo config with named color palettes",
"description": "luopan demo2 config with named color palettes",
"background": "#000000",
"strokeWidth": 1,
"strokeOpacity": 1,
"strokeColor": "白",
"insetDistance": 1,
"outerRadius": 500,
"theme": {
"name": "五行配色主题",
"colorPalettes": {
"黑": "#000000",
"灰": "#757575",
"白": "#ffffff",
"木": "#43A047",
"火": "#E53935",
"土": "#8D6E63",
"金": "#78909C",
"水": "#0288D1",
"热": "#FF8F00",
"冷": "#1976D2",
"强": "#D32F2F",
"\u8f6f": "#FFE0B2"
}
},
"themeRef": "五行弱",
"layers": [
{
"type": "centerIcon",
@@ -38,11 +26,12 @@
"sectors": [
{
"content": "阴",
"colorRef": "黑",
"innerFill": 1
},
{
"content": "阳",
"colorRef": "White",
"colorRef": "白",
"innerFill": 0
}
]
@@ -150,8 +139,8 @@
"startAngle": -4.5,
"innerFill": 0,
"colorRef": "火",
"num": 3,
"interval": 2,
"num": 4,
"interval": 1,
"groupSplit": false
},
{

160
public/demo3.json Normal file
View File

@@ -0,0 +1,160 @@
{
"name": "demo",
"description": "luopan demo config with named color palettes",
"background": "白",
"strokeWidth": 1,
"strokeOpacity": 1,
"strokeColor": "黑",
"insetDistance": 1,
"themeRef": "五行弱",
"layers": [
{
"type": "centerIcon",
"centerIcon": {
"rIcon": 50,
"opacity": 0.8,
"name": "centericon.svg"
}
},
{
"divisions": 2,
"rInner": 60,
"rOuter": 100,
"startAngle": 0,
"sectors": [
{
"content": "阴",
"colorRef": "黑"
},
{
"content": "阳",
"colorRef": "白"
}
]
},
{
"divisions": 8,
"rInner": 120,
"rOuter": 160,
"startAngle": 0,
"colorRef": "水",
"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 }
]
},
{
"divisions": 12,
"rInner": 160,
"rOuter": 200,
"startAngle": 0,
"colorRef": "土",
"num": 3,
"interval": 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 }
]
},
{
"divisions": 24,
"rInner": 200,
"rOuter": 240,
"startAngle": 0,
"sectors": [
{ "content": "甲乙|子|丙丁", "colorRef": "木", "innerFill": 1 },
{ "content": "丑" },
{ "content": "戊己|寅|庚辛", "colorRef": "土", "innerFill": 0 },
{ "content": "卯" },
{ "content": "壬癸|辰|甲乙", "innerFill": 1 },
{ "content": "巳" },
{ "content": "丙丁|午|戊己", "colorRef": "火", "innerFill": 0 },
{ "content": "未" },
{ "content": "庚辛|申|壬癸", "colorRef": "金", "innerFill": 1 },
{ "content": "酉" },
{ "content": "甲乙|戌|丙丁", "innerFill": 0 },
{ "content": "亥" },
{ "content": "戊己|子|庚辛" },
{ "content": "丑" },
{ "content": "壬癸|寅|甲乙" },
{ "content": "卯" },
{ "content": "丙丁|辰|戊己" },
{ "content": "巳" },
{ "content": "庚辛|午|壬癸" },
{ "content": "未" },
{ "content": "甲乙|申|丙丁" },
{ "content": "酉" },
{ "content": "戊己|戌|庚辛" },
{ "content": "亥" }
]
},
{
"divisions": 16,
"rInner": 250,
"rOuter": 270,
"startAngle": 0,
"sectors": [
{ "content": "甲乙|丙丁|戊己|庚辛", "colorRef": "木", "innerFill": 1 },
{ "content": "壬癸|甲乙|丙丁|戊己", "colorRef": "土", "innerFill": 0 },
{ "content": "庚辛|壬癸|甲乙|丙丁", "innerFill": 1 },
{ "content": "戊己|庚辛|壬癸|甲乙", "colorRef": "火", "innerFill": 0 },
{ "content": "丙丁|戊己|庚辛|壬癸", "colorRef": "金", "innerFill": 1 },
{ "content": "子丑|寅卯|辰巳|午未", "innerFill": 0 },
{ "content": "申酉|戌亥|子丑|寅卯", "colorRef": "木", "innerFill": 1 },
{ "content": "辰巳|午未|申酉|戌亥", "colorRef": "水", "innerFill": 0 },
{ "content": "甲乙|丙丁|戊己|庚辛", "innerFill": 1 },
{ "content": "壬癸|甲乙|丙丁|戊己", "colorRef": "土", "innerFill": 0 },
{ "content": "庚辛|壬癸|甲乙|丙丁", "colorRef": "木", "innerFill": 1 },
{ "content": "戊己|庚辛|壬癸|甲乙", "innerFill": 0 },
{ "content": "丙丁|戊己|庚辛|壬癸", "colorRef": "火", "innerFill": 1 },
{ "content": "子丑|寅卯|辰巳|午未", "colorRef": "金", "innerFill": 0 },
{ "content": "申酉|戌亥|子丑|寅卯", "innerFill": 1 },
{ "content": "辰巳|午未|申酉|戌亥", "colorRef": "水", "innerFill": 0 }
]
},
{
"divisions": 120,
"rInner": 300,
"rOuter": 310,
"startAngle": -4.5,
"innerFill": 0,
"colorRef": "火",
"num": 3,
"interval": 2,
"groupSplit": false
},
{
"type": "degreeRing",
"degreeRing": {
"rInner": 350,
"rOuter": 380,
"showDegree": 1,
"mode": "both",
"opacity": 1,
"tickLength": 6,
"tickLengthStep": 2,
"majorTick": 10,
"minorTick": 5,
"microTick": 1,
"tickColor": "#000000",
"ringColor": "#000000"
}
}
]
}

21
public/luopan-configs.json Normal file
View File

@@ -0,0 +1,21 @@
{
"default": "demo.json",
"items": [
{
"name": "样式测试1",
"path": "/demo.json"
},
{
"name": "样式测试2",
"path": "/demo2.json"
},
{
"name": "样式测试3",
"path": "/demo3.json"
},
{
"name": "入门罗盘",
"path": "/rumen.json"
}
]
}

162
public/rumen.json Normal file
View File

@@ -0,0 +1,162 @@
{
"name": "rumen",
"description": "luopan rumen config",
"background": "金",
"strokeWidth": 1,
"strokeOpacity": 1,
"strokeColor": "黑",
"insetDistance": 1,
"themeRef": "五行弱",
"layers": [
{
"type": "centerIcon",
"centerIcon": {
"rIcon": 50,
"opacity": 0.8,
"name": "centericon.svg"
}
},
{
"divisions": 2,
"rInner": 60,
"rOuter": 100,
"startAngle": 0,
"sectors": [
{
"content": "阴",
"colorRef": "黑"
},
{
"content": "阳",
"colorRef": "白"
}
]
},
{
"divisions": 8,
"rInner": 120,
"rOuter": 160,
"startAngle": 0,
"sectors": [
{ "content": "乾", "colorRef": "火", "innerFill": 1 },
{ "content": "兑", "colorRef": "冷", "innerFill": 0 },
{ "content": "离", "colorRef": "火", "innerFill": 1 },
{ "content": "震", "colorRef": "木", "innerFill": 0 },
{ "content": "巽", "colorRef": "木", "innerFill": 1 },
{ "content": "坎", "colorRef": "冷", "innerFill": 0 },
{ "content": "艮", "colorRef": "强", "innerFill": 1 },
{ "content": "坤", "colorRef": "土", "innerFill": 0 }
]
},
{
"divisions": 12,
"rInner": 160,
"rOuter": 200,
"startAngle": 0,
"colorRef": "金",
"num": 3,
"interval": 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 }
]
},
{
"divisions": 24,
"rInner": 200,
"rOuter": 240,
"startAngle": 0,
"colorRef": "金",
"num": 2,
"interval": 1,
"sectors": [
{ "content": "甲乙|子|丙丁", "colorRef": "木", "innerFill": 1 },
{ "content": "丑" },
{ "content": "戊己|寅|庚辛", "colorRef": "土", "innerFill": 0 },
{ "content": "卯" },
{ "content": "壬癸|辰|甲乙", "innerFill": 1 },
{ "content": "巳" },
{ "content": "丙丁|午|戊己", "colorRef": "火", "innerFill": 0 },
{ "content": "未" },
{ "content": "庚辛|申|壬癸", "colorRef": "金", "innerFill": 1 },
{ "content": "酉" },
{ "content": "甲乙|戌|丙丁", "innerFill": 0 },
{ "content": "亥" },
{ "content": "戊己|子|庚辛" },
{ "content": "丑" },
{ "content": "壬癸|寅|甲乙" },
{ "content": "卯" },
{ "content": "丙丁|辰|戊己" },
{ "content": "巳" },
{ "content": "庚辛|午|壬癸" },
{ "content": "未" },
{ "content": "甲乙|申|丙丁" },
{ "content": "酉" },
{ "content": "戊己|戌|庚辛" },
{ "content": "亥" }
]
},
{
"divisions": 16,
"rInner": 250,
"rOuter": 270,
"startAngle": 0,
"sectors": [
{ "content": "甲乙|丙丁|戊己|庚辛", "colorRef": "木", "innerFill": 1 },
{ "content": "壬癸|甲乙|丙丁|戊己", "colorRef": "土", "innerFill": 0 },
{ "content": "庚辛|壬癸|甲乙|丙丁", "innerFill": 1 },
{ "content": "戊己|庚辛|壬癸|甲乙", "colorRef": "火", "innerFill": 0 },
{ "content": "丙丁|戊己|庚辛|壬癸", "colorRef": "金", "innerFill": 1 },
{ "content": "子丑|寅卯|辰巳|午未", "innerFill": 0 },
{ "content": "申酉|戌亥|子丑|寅卯", "colorRef": "木", "innerFill": 1 },
{ "content": "辰巳|午未|申酉|戌亥", "colorRef": "水", "innerFill": 0 },
{ "content": "甲乙|丙丁|戊己|庚辛", "innerFill": 1 },
{ "content": "壬癸|甲乙|丙丁|戊己", "colorRef": "土", "innerFill": 0 },
{ "content": "庚辛|壬癸|甲乙|丙丁", "colorRef": "木", "innerFill": 1 },
{ "content": "戊己|庚辛|壬癸|甲乙", "innerFill": 0 },
{ "content": "丙丁|戊己|庚辛|壬癸", "colorRef": "火", "innerFill": 1 },
{ "content": "子丑|寅卯|辰巳|午未", "colorRef": "金", "innerFill": 0 },
{ "content": "申酉|戌亥|子丑|寅卯", "innerFill": 1 },
{ "content": "辰巳|午未|申酉|戌亥", "colorRef": "水", "innerFill": 0 }
]
},
{
"divisions": 120,
"rInner": 300,
"rOuter": 310,
"startAngle": -4.5,
"innerFill": 0,
"colorRef": "火",
"num": 3,
"interval": 2,
"groupSplit": false
},
{
"type": "degreeRing",
"degreeRing": {
"rInner": 350,
"rOuter": 380,
"showDegree": 1,
"mode": "both",
"opacity": 1,
"tickLength": 6,
"tickLengthStep": 2,
"majorTick": 10,
"minorTick": 5,
"microTick": 1,
"tickColor": "#000000",
"ringColor": "#000000"
}
}
]
}

174
public/themes.json Normal file
View File

@@ -0,0 +1,174 @@
{
"default": "五行强",
"items": [
{
"name": "五行强",
"colorPalettes": {
"黑": "#000000",
"灰": "#757575",
"白": "#ffffff",
"木": "#43A047",
"火": "#E53935",
"土": "#8D6E63",
"金": "#D4AF37",
"水": "#0288D1",
"热": "#FF8F00",
"冷": "#1976D2",
"强": "#D32F2F",
"软": "#FFE0B2"
}
},
{
"name": "五行弱",
"colorPalettes": {
"黑": "#000000",
"灰": "#DADADA",
"白": "#ffffff",
"木": "#2A6B2D",
"火": "#C44846",
"土": "#A57563",
"金": "#E7D238",
"水": "#1E7BAC",
"热": "#FF8F00",
"冷": "#1976D2",
"强": "#FF0000",
"弱": "#EFD272"
}
},
{
"name": "晨曦",
"colorPalettes": {
"霞光": "#FFB997",
"暖金": "#FFC857",
"薄雾": "#E6EFF6",
"嫩绿": "#A8E6CE",
"朝蓝": "#7AC7E3",
"珊红": "#FF6B6B",
"砂色": "#D9B99B",
"云白": "#FFFFFF",
"影灰": "#7D7F87",
"墨蓝": "#2A3D66"
}
},
{
"name": "暮色",
"colorPalettes": {
"暮紫": "#6C5B7B",
"深蓝": "#283149",
"暮橙": "#FF914D",
"黯灰": "#5D5D66",
"暗玉": "#2E8B7C",
"烟蓝": "#4B6F86",
"月白": "#F2F6F8",
"铜黄": "#C08F35",
"绛红": "#A23E48",
"夜黑": "#0B0F1A"
}
},
{
"name": "海风",
"colorPalettes": {
"海蓝": "#0077B6",
"浅滩": "#EAF6F6",
"浪白": "#F7FCFF",
"蔚蓝": "#00B4D8",
"青绿": "#2EC4B6",
"碧玉": "#118AB2",
"珊粉": "#FF7A7A",
"深海": "#023E8A",
"泡沫": "#CFF7F3",
"夕珊": "#FFB4A2"
}
},
{
"name": "砂岩",
"colorPalettes": {
"砂黄": "#DDB892",
"土褐": "#A67C52",
"岩灰": "#8A8776",
"日黄": "#FFDA77",
"褐红": "#A65E3B",
"朽木": "#C7B299",
"石白": "#F5F3EE",
"暮砂": "#BFAE9D",
"土灰": "#9E8F80",
"暗褐": "#5C3A21"
}
},
{
"name": "森林",
"colorPalettes": {
"树绿": "#2F7A1F",
"苔绿": "#69995B",
"深绿": "#1B4636",
"叶黄": "#C8D44B",
"泥褐": "#7C5A3A",
"树皮": "#6A4C3B",
"莹绿": "#9FD89B",
"林影": "#254117",
"嫩叶": "#B7E4A6",
"藤蔓": "#3B6B35"
}
},
{
"name": "霓虹",
"colorPalettes": {
"电青": "#00F5D4",
"霓粉": "#FF6AC1",
"紫光": "#9D4EDD",
"亮黄": "#FFD60A",
"霓橙": "#FF7A00",
"洋红": "#FF007F",
"亮蓝": "#00A3FF",
"霓绿": "#41F582",
"黑底": "#0A0A0A",
"白晕": "#F8F8FF"
}
},
{
"name": "芙蓉",
"colorPalettes": {
"芙粉": "#FADCD9",
"荷绿": "#9BD7C6",
"莲白": "#FFF7F3",
"柔紫": "#E9D6FF",
"粉橙": "#FFD1BA",
"浅灰": "#E6E6E6",
"香黄": "#FFE9A8",
"薄荷": "#BCEBCB",
"桃红": "#FF94A6",
"雾蓝": "#DDECF7"
}
},
{
"name": "墨韵",
"colorPalettes": {
"墨黑": "#0B0B0B",
"浓灰": "#4A4A4A",
"烟白": "#F5F5F5",
"石墨": "#2E2E2E",
"青黛": "#1F6F8B",
"皓白": "#FFFFFF",
"墨蓝": "#14213D",
"暗灰": "#6B6B6B",
"笔褐": "#5B4B3A",
"玄青": "#0F4C5C"
}
},
{
"name": "灰阶",
"colorPalettes": {
"墨灰": "#0B0B0B",
"深灰": "#2F2F2F",
"石灰": "#595959",
"烟灰": "#808080",
"中灰": "#A0A0A0",
"银灰": "#C0C0C0",
"雾灰": "#D9D9D9",
"亮灰": "#EAEAEA",
"浅灰": "#F5F5F5",
"乳白": "#FFFFFF"
}
}
]
}