update at 2026-01-22 20:17:52

public/demo.json

@@ -4,7 +4,7 @@
   "background": "金",
   "strokeWidth": 0.5,
   "strokeColor": "冷",
-  "insetDistance": 5,
+  "insetDistance": 1,
   "strokeOpacity": 0.5,
   "theme": {
     "name": "五行配色主题",

src/Luopan.vue

@@ -62,26 +62,14 @@
           />
         </g>
 
-        <!-- 内缩白边 + 内部填色区域 -->
+        <!-- 内部填色区域 -->
         <g>
           <template v-for="s in sectors" :key="s.key + '-inner'">
-            <path
-              v-if="s.innerFillPath"
-              :d="s.path"
-              fill="#ffffff"
-              stroke="none"
-            />
-            <path
-              v-if="s.innerFillPath"
-              :d="s.innerFillPath"
-              :fill="s.fill"
-              stroke="none"
-            />
             <path
               v-if="s.innerFillPath"
               :d="s.innerFillPath"
               :fill="s.innerFillColor"
-              fill-opacity="0.6"
+              fill-opacity="1"
               stroke="none"
             />
           </template>

src/sectorBuilder.ts

@@ -66,6 +66,7 @@ export class SectorBuilder {
             this.insetDistance
           )
         : undefined;
+      const baseFillColor = innerFill ? '#ffffff' : fillColor;
 
       const sectorKey = `L${layerIndex}-P${i}`;
       const textPathId = `text-path-${sectorKey}`;
@@ -114,7 +115,7 @@ export class SectorBuilder {
         aMidRad: centroid.aMidRad,
         cx: centroid.cx,
         cy: centroid.cy,
-        fill: fillColor,
+        fill: baseFillColor,
         textColor,
         label: isMultiText ? '' : rawContent,
         path: annularSectorPath(layer.rInner, layer.rOuter, aStart, aEnd),