root/Jyotisha
1
0
Fork 0
Code Issues 32 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: fold dasha periods and redraw the western wheel

Browse Source 
The dasha tab leads with a now card and a duration bar, and keeps sub-periods inside the current details element. A zero-year Chara row stays grey, shows 0 年, and cannot expand. The tropical wheel uses a 520 view box, element bands, separated planet labels, and aspect lines that stay visible while a selected body is highlighted.
This commit is contained in:
jesse-ux
2026-09-25 03:01:48 +08:00
parent c2030a4f36
commit 5a2d9da985
17 changed files with 1305 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/globals.css
+196 -7
View File
@@ -141,6 +141,12 @@
--color-planet-saturn: #5b6bb0;
--color-planet-node: #6b7280;
--color-planet-ascendant: #b0413e;
/* Zodiac-band fills. Sign names sit on them in --color-ink, not as general
text surfaces. Dark values are in both dark blocks. */
--color-element-fire: #f4d3c3;
--color-element-earth: #e7dfc6;
--color-element-air: #d5e2f2;
--color-element-water: #d3e6e8;
--shadow-soft: 0 1px 2px rgba(29, 29, 31, .06), 0 8px 20px -18px rgba(29, 29, 31, .2);
--shadow-elevated: 0 1px 2px rgba(29, 29, 31, .07), 0 12px 28px -16px rgba(29, 29, 31, .18);
/* Display and body share one sans stack. The old value led with two Anthropic
@@ -295,6 +301,10 @@
--color-planet-saturn: #8d9be0;
--color-planet-node: #a1a7b3;
--color-planet-ascendant: #e07b78;
--color-element-fire: #5a3a32;
--color-element-earth: #4a4636;
--color-element-air: #2e3c4e;
--color-element-water: #2a4448;
}
}
@@ -379,6 +389,10 @@
--color-planet-saturn: #8d9be0;
--color-planet-node: #a1a7b3;
--color-planet-ascendant: #e07b78;
--color-element-fire: #5a3a32;
--color-element-earth: #4a4636;
--color-element-air: #2e3c4e;
--color-element-water: #2a4448;
}
@@ -5062,9 +5076,75 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
}
.chart-page-planet-card p { margin: 0 0 var(--space-2); font-size: var(--type-body-sm); }
.chart-page-symbol { color: var(--color-ink-tertiary); }
.chart-page-dasha-now {
display: grid;
gap: var(--space-2);
margin: var(--space-3) 0;
padding: var(--space-3);
border-radius: var(--radius-sm);
background: var(--color-canvas-muted);
}
.chart-page-dasha-now h4 {
margin: 0;
color: var(--color-ink-secondary);
font-size: var(--type-caption);
font-weight: 500;
}
.chart-page-dasha-now dl { display: grid; gap: var(--space-1); margin: 0; }
.chart-page-dasha-now div {
display: flex;
justify-content: space-between;
gap: var(--space-3);
align-items: baseline;
}
.chart-page-dasha-now dt {
color: var(--color-ink-tertiary);
font-size: var(--type-caption);
}
.chart-page-dasha-now dd {
margin: 0;
color: var(--color-ink);
font-size: var(--type-body-sm);
font-variant-numeric: tabular-nums;
text-align: right;
}
.chart-page-dasha-axis { margin: 0 0 var(--space-4); }
.chart-page-dasha-bar-wrap { position: relative; }
.chart-page-dasha-bar {
display: flex;
height: 12px;
overflow: hidden;
border-radius: 999px;
background: var(--color-canvas);
gap: 1px;
}
.chart-page-dasha-segment { min-width: 0; height: 100%; }
.chart-page-dasha-segment:nth-child(6n + 1) { background: var(--color-action-soft); }
.chart-page-dasha-segment:nth-child(6n + 2) { background: var(--color-success-muted); }
.chart-page-dasha-segment:nth-child(6n + 3) { background: var(--color-canvas-strong); }
.chart-page-dasha-segment:nth-child(6n + 4) { background: var(--color-danger-muted); }
.chart-page-dasha-segment:nth-child(6n + 5) { background: var(--color-selected); }
.chart-page-dasha-segment:nth-child(6n + 6) { background: var(--color-canvas-muted); }
.chart-page-dasha-segment.is-current { box-shadow: inset 0 0 0 2px var(--color-ink); }
.chart-page-dasha-today {
position: absolute;
top: -2px;
width: 2px;
height: 16px;
background: var(--color-ink);
transform: translateX(-1px);
}
.chart-page-dasha-scale {
display: flex;
justify-content: space-between;
margin-top: var(--space-1);
color: var(--color-ink-tertiary);
font-size: var(--type-caption);
font-variant-numeric: tabular-nums;
}
.chart-page-dasha-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.chart-page-dasha-period {
padding: var(--space-3);
padding: var(--space-2) var(--space-3);
border: 1px solid transparent;
border-radius: var(--radius-sm);
}
@@ -5073,6 +5153,8 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
border-color: var(--color-border-strong);
box-shadow: inset 2px 0 0 var(--color-focus);
}
.chart-page-dasha-period.is-zero { color: var(--color-ink-tertiary); }
.chart-page-dasha-period.is-zero span { margin-left: auto; }
.chart-page-dasha-period p {
display: flex;
flex-wrap: wrap;
@@ -5080,14 +5162,53 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
margin: 0;
font-size: var(--type-body-sm);
}
.chart-page-dasha-period summary {
display: flex;
align-items: center;
gap: var(--space-2);
min-height: 44px;
cursor: pointer;
list-style: none;
font-size: var(--type-body-sm);
}
.chart-page-dasha-period summary::-webkit-details-marker { display: none; }
.chart-page-dasha-period summary::before {
content: "";
width: 0.45em;
height: 0.45em;
flex: 0 0 auto;
border-right: 1.5px solid var(--color-ink-tertiary);
border-bottom: 1.5px solid var(--color-ink-tertiary);
transform: rotate(-45deg);
}
.chart-page-dasha-period details[open] > summary::before { transform: rotate(45deg); }
.chart-page-dasha-period details:not([open]) > ul { display: none; }
.chart-page-dasha-summary-label { min-width: 0; }
.chart-page-dasha-dates {
margin-left: auto;
color: var(--color-ink-secondary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.chart-page-dasha-period ul {
margin: var(--space-2) 0 0;
margin: 0;
padding: 0;
list-style: none;
color: var(--color-ink-secondary);
font-size: var(--type-caption);
}
.chart-page-dasha-period ul li.is-current { color: var(--color-ink); font-weight: 500; }
.chart-page-dasha-antar {
display: flex;
align-items: center;
gap: var(--space-2);
min-height: 44px;
}
.chart-page-dasha-antar.is-current { color: var(--color-ink); font-weight: 500; }
.chart-page-western-wheel {
width: 100%;
max-width: 520px;
margin-inline: auto;
}
.chart-page-western-svg { display: block; width: 100%; height: auto; color: var(--color-ink); }
.chart-page-western-ring,
.chart-page-western-spoke,
@@ -5096,10 +5217,78 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
stroke: var(--color-border-strong);
stroke-width: 1.25;
}
.chart-page-western-core { fill: var(--color-canvas-muted); stroke: var(--color-border-strong); }
.chart-page-western-svg text { fill: currentColor; font-size: 16px; }
.chart-page-western-house-label,
.chart-page-western-asc { fill: var(--color-ink-tertiary); }
.chart-page-western-house.is-axis { stroke: var(--color-ink-secondary); stroke-width: 2.4; }
.chart-page-western-sign { stroke: none; }
.chart-page-western-sign[data-element="fire"] { fill: var(--color-element-fire); }
.chart-page-western-sign[data-element="earth"] { fill: var(--color-element-earth); }
.chart-page-western-sign[data-element="air"] { fill: var(--color-element-air); }
.chart-page-western-sign[data-element="water"] { fill: var(--color-element-water); }
.chart-page-western-svg text { fill: currentColor; font-size: 17px; }
.chart-page-western-sign-label { fill: var(--color-ink); }
.chart-page-western-house-label { fill: var(--color-ink-secondary); }
.chart-page-western-angle { fill: var(--color-ink); font-weight: 600; }
.chart-page-western-planet { cursor: pointer; }
.chart-page-western-planet text {
font-family: var(--font-planet-glyphs), "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols", sans-serif;
}
.chart-page-western-hit { fill: var(--color-canvas); opacity: 0; }
.chart-page-western-leader,
.chart-page-western-tick {
fill: none;
stroke: var(--color-ink-tertiary);
stroke-width: 0.8;
}
.chart-page-western-aspect { fill: none; stroke-width: 1.15; }
.chart-page-western-aspect[data-tone="soft"] { stroke: var(--color-success); }
.chart-page-western-aspect[data-tone="hard"] { stroke: var(--color-danger); }
.chart-page-western-aspect[data-tone="other"] { stroke: var(--color-border-strong); }
.chart-page-western-svg[data-filtering="true"] .chart-page-western-planet:not(.is-selected),
.chart-page-western-svg[data-filtering="true"] .chart-page-western-leader:not([data-active="true"]),
.chart-page-western-svg[data-filtering="true"] .chart-page-western-tick { opacity: 0.28; }
.chart-page-western-svg[data-filtering="true"] .chart-page-western-aspect:not([data-active="true"]) { opacity: 0.12; }
.chart-page-western-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0 0 var(--space-4);
padding: 0;
list-style: none;
}
.chart-page-western-chips li {
padding: var(--space-2) var(--space-3);
border-radius: 999px;
background: var(--color-canvas-muted);
color: var(--color-ink);
font-size: var(--type-body-sm);
}
.chart-page-western-table-wrap {
min-width: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
}
.chart-page-western-table {
width: 100%;
border-collapse: collapse;
background: var(--color-canvas);
font-size: var(--type-body-sm);
}
.chart-page-western-table th,
.chart-page-western-table td {
height: 44px;
padding: 0 var(--space-3);
border-bottom: 1px solid var(--color-border);
text-align: left;
}
.chart-page-western-table thead th {
background: var(--color-canvas-muted);
color: var(--color-ink-secondary);
font-size: var(--type-caption);
font-weight: 500;
}
.chart-page-western-num { font-variant-numeric: tabular-nums; }
.chart-page-western-table tbody tr[tabindex] { cursor: pointer; }
.chart-page-western-table tbody tr[tabindex]:hover { background: var(--color-canvas-muted); }
.chart-page-western-table tr.is-selected { background: var(--color-selected); }
.chart-page-qizheng-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));