update at 2026-01-22 19:50:23

src/composables/useLuopan.ts

@@ -22,6 +22,18 @@ import { loadCenterIcon } from '../centerIcon';
 const isSectorLayer = (layer: LayerConfig): layer is SectorLayerConfig =>
   layer.type !== 'centerIcon' && layer.type !== 'degreeRing';
 
+const HEX_COLOR_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+
+const resolveThemeColor = (
+  theme: LuopanConfig['theme'],
+  value: string | undefined,
+  fallback: string
+) => {
+  if (!value) return fallback;
+  if (HEX_COLOR_RE.test(value)) return value;
+  return theme.colorPalettes[value] ?? fallback;
+};
+
 const findDegreeRingLayer = (layers: LayerConfig[]) =>
   layers.find((layer) => layer.type === 'degreeRing');
 
@@ -71,15 +83,38 @@ export function useLuopan(
         configObj = configPathOrObject;
       }
 
-      config.value = configObj;
-      sectors.value = buildSectors(configObj);
+      const resolvedBackground = resolveThemeColor(
+        configObj.theme,
+        configObj.background,
+        '#000000'
+      );
+      const resolvedStrokeColor = resolveThemeColor(
+        configObj.theme,
+        configObj.strokeColor,
+        '#1f2937'
+      );
 
-      const degreeRingLayer = findDegreeRingLayer(configObj.layers);
+      const resolvedConfig: LuopanConfig = {
+        ...configObj,
+        background: resolvedBackground,
+        strokeColor: resolvedStrokeColor,
+        strokeWidth: typeof configObj.strokeWidth === 'number'
+          ? configObj.strokeWidth
+          : undefined,
+        strokeOpacity: typeof configObj.strokeOpacity === 'number'
+          ? configObj.strokeOpacity
+          : undefined,
+      };
+
+      config.value = resolvedConfig;
+      sectors.value = buildSectors(resolvedConfig);
+
+      const degreeRingLayer = findDegreeRingLayer(resolvedConfig.layers);
       degreeRing.value = degreeRingLayer
         ? buildDegreeRing(degreeRingLayer.degreeRing)
         : null;
 
-      const centerIconLayer = findCenterIconLayer(configObj.layers);
+      const centerIconLayer = findCenterIconLayer(resolvedConfig.layers);
       centerIcon.value = centerIconLayer
         ? await loadCenterIcon(centerIconLayer.centerIcon)
         : null;
@@ -116,14 +151,17 @@ export function useLuopan(
 
   const outerMost = computed(() => {
     if (!config.value) return 0;
-    if (typeof config.value.outerRadius === 'number') return config.value.outerRadius;
 
     const radii = sectorLayers.value.map((layer) => layer.rOuter);
     const degreeRingLayer = findDegreeRingLayer(config.value.layers);
     if (degreeRingLayer) {
       radii.push(degreeRingLayer.degreeRing.rOuter);
     }
-    return radii.length > 0 ? Math.max(...radii) : 0;
+
+    const maxRadius = radii.length > 0 ? Math.max(...radii) : 0;
+    if (maxRadius > 0) return maxRadius;
+
+    return typeof config.value.outerRadius === 'number' ? config.value.outerRadius : 0;
   });
 
   return {