From bc2d5463ff49e68da11d7504f3235e68830002dc Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Mon, 30 Mar 2026 16:10:56 +0800
Subject: [PATCH 1/5] =?UTF-8?q?MPR=E8=A7=86=E5=9B=BE=E7=9A=84=EF=BC=9A?=
 =?UTF-8?q?=E5=8D=81=E5=AD=97=E7=BA=BF=E5=92=8C=E7=AA=97=E5=AE=BD=E7=AA=97?=
 =?UTF-8?q?=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dicoms3D/components/MPRViewport.vue       | 14 ++---
 .../reading/dicoms3D/components/ReadPage.vue  | 51 +++++++++++++++++--
 .../dicoms3D/components/VolumeViewport.vue    | 10 ++--
 3 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/MPRViewport.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/MPRViewport.vue
index dd7ce476..89cd93ee 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/MPRViewport.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/MPRViewport.vue
@@ -40,10 +40,10 @@
         <div v-if="series" class="right-bottom-text">
             <div v-show="imageInfo.location">Location: {{
                 `${Number(imageInfo.location).toFixed(digitPlaces)} mm`
-            }}</div>
+                }}</div>
             <div v-show="imageInfo.sliceThickness">Slice Thickness: {{
                 `${Number(imageInfo.sliceThickness).toFixed(digitPlaces)} mm`
-            }}</div>
+                }}</div>
             <div v-show="imageInfo.wwwc">WW/WL: {{ imageInfo.wwwc }}</div>
         </div>
         <div class="orientation-top">
@@ -276,6 +276,7 @@ export default {
             let imageIds = viewport.getImageIds(this.volumeId)
             let imageId = imageIds[0]
             let volume = cache.getVolume(this.volumeId)
+            console.log(volume, 'volume')
             let spacing = volume ? volume.spacing : []
             // if (this.series.orientation === 'AXIAL') imageId = viewport.getCurrentImageId() 
             if (imageId && volume) {
@@ -467,13 +468,13 @@ export default {
             this.loading = true
             try {
                 return await createImageIdsAndCacheMetaData({
-                modality: obj.Modality,
-                imageIds: obj.ImageIds
+                    modality: obj.Modality,
+                    imageIds: obj.ImageIds
                 })
             } finally {
                 this.loading = false
             }
-        }, 
+        },
         async setSeriesInfo(obj, isLocate = false) {
             try {
                 let data = obj
@@ -501,7 +502,8 @@ export default {
                             DicomEvent.$emit("isloaded", {})
                         }
                     }]).then(r => {
-                        if (data.isLocation) {
+                        console.log(this.imageInfo.zoom, 'this.imageInfo.zoom')
+                        if (data.isLocation || !this.imageInfo.zoom) {
                             setTimeout(() => { csUtils.jumpToSlice(viewport.element, { imageIndex: data.SliceIndex }); })
                         }
                     })
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
index 6810f7fc..4eeabe3f 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
@@ -1401,7 +1401,9 @@ export default {
           toolGroup.addTool(WindowLevelTool.toolName, {
             targetViewportIds: volumeViewportIds
           })
-          toolGroup.addTool(CrosshairsTool.toolName);
+          toolGroup.addTool(CrosshairsTool.toolName, {
+            getReferenceLineColor: this.setCrosshairsToolLineColor
+          });
         } else {
           toolGroup.addTool(WindowLevelTool.toolName)
         }
@@ -2037,6 +2039,21 @@ export default {
       const viewport = renderingEngine.getViewport(viewportId)
       viewport.render()
     },
+    setCrosshairsToolLineColor(viewportId) {
+      let colors = [
+        '#0ca8df',
+        '#ffd10a',
+        '#b6d634',
+        '#3fbe95',
+        '#785db0',
+        '#5070dd',
+        '#505372',
+        '#ff994d',
+        '#fb628b',
+      ]
+      let index = viewportId.split("-").pop()
+      return colors[colors.length - 1 - Number(index)] || colors[0]
+    },
     getLengthToolTextLines(data, targetId) {
       const cachedVolumeStats = data.cachedStats[targetId]
       const { length, unit } = cachedVolumeStats
@@ -2519,6 +2536,9 @@ export default {
       viewport.resetProperties()
       viewport.render()
       renderingEngine.render()
+      if (this.readingTool === 3) {
+        DicomEvent.$emit('isloaded', {})
+      }
     },
     // 更改视图布局
     async changeLayout(v) {
@@ -2797,6 +2817,18 @@ export default {
     toggleFullScreen(e, index) {
       this.fullScreenIndex = this.fullScreenIndex === index ? null : index
       this.activeViewportIndex = index
+      if (this.readingTool === 3 || this.isMPR) {
+        // this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].setSeriesInfo(this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series)
+        this.$nextTick(() => {
+          const renderingEngine = getRenderingEngine(renderingEngineId)
+          renderingEngine.resize(true, false)
+          renderingEngine.render()
+          if (this.readingTool === 3) {
+            DicomEvent.$emit('isloaded', {})
+          }
+        })
+
+      }
       if (this.isFusion) {
         const viewportIds = [`${this.viewportKey}-0`, `${this.viewportKey}-1`, `${this.viewportKey}-2`]
         viewportIds.forEach(id => {
@@ -2899,7 +2931,16 @@ export default {
         this.activeViewportIndex = 0
         this.fullScreenIndex = null
         this.isMPR = false
-        return this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].setSeriesInfo(obj)
+        this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].setSeriesInfo(obj)
+        return this.$nextTick(() => {
+          const renderingEngine = getRenderingEngine(renderingEngineId)
+          renderingEngine.resize(true, false)
+          renderingEngine.render()
+          if (this.readingTool === 3) {
+            DicomEvent.$emit('isloaded', {})
+          }
+        })
+
       }
       if (!obj.IsDicom) {
         return this.previewNoneDicoms(obj)
@@ -3523,9 +3564,9 @@ export default {
         syncColormap: false
       })
       let viewportIds = [
-        `viewport-volume-0`,
-        `viewport-volume-1`,
-        `viewport-volume-2`
+        `viewport-MPR-0`,
+        `viewport-MPR-1`,
+        `viewport-MPR-2`
       ]
       viewportIds.forEach((viewportId) => {
         MPRVoiSynchronizer.add({
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/VolumeViewport.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/VolumeViewport.vue
index 91ae1046..10ea8748 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/VolumeViewport.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/VolumeViewport.vue
@@ -40,10 +40,10 @@
         <div v-if="series" class="right-bottom-text">
             <div v-show="imageInfo.location">Location: {{
                 `${Number(imageInfo.location).toFixed(digitPlaces)} mm`
-            }}</div>
+                }}</div>
             <div v-show="imageInfo.sliceThickness">Slice Thickness: {{
                 `${Number(imageInfo.sliceThickness).toFixed(digitPlaces)} mm`
-            }}</div>
+                }}</div>
             <div v-show="imageInfo.wwwc">WW/WL: {{ imageInfo.wwwc }}</div>
         </div>
         <div class="orientation-top">
@@ -234,7 +234,7 @@ export default {
                 // 如果行向量主要在 X-Y 平面 (rowZ 很小)，则为 Axial。
                 // 如果行向量主要在 X-Z 平面 (rowY 很小)，则为 Sagittal。
                 // 为了简化，我们可以直接根据视线方向（法线）来判断。
-	                // 法线方向 = 行向量 × 列向量
+                // 法线方向 = 行向量 × 列向量
                 const [colX, colY, colZ] = imageOrientationPatient.slice(3);
                 const normalX = rowY * colZ - rowZ * colY;
                 const normalY = rowZ * colX - rowX * colZ;
@@ -488,8 +488,8 @@ export default {
             this.loading = true
             try {
                 return await createImageIdsAndCacheMetaData({
-                modality: obj.Modality,
-                imageIds: obj.ImageIds
+                    modality: obj.Modality,
+                    imageIds: obj.ImageIds
                 })
             } finally {
                 this.loading = false

From 3fe16b4166ce44e882a8d9b1889d1c68fcc28212 Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Mon, 30 Mar 2026 16:19:05 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E4=BD=93=E6=95=B0=E6=8D=AE=E9=98=85?=
 =?UTF-8?q?=E7=89=87=E5=9B=9B=E8=A7=92=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reading/dicoms3D/components/MPRViewport.vue            | 7 +++----
 .../reading/dicoms3D/components/VolumeViewport.vue         | 4 ++++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/MPRViewport.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/MPRViewport.vue
index 89cd93ee..93bb25c6 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/MPRViewport.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/MPRViewport.vue
@@ -40,10 +40,10 @@
         <div v-if="series" class="right-bottom-text">
             <div v-show="imageInfo.location">Location: {{
                 `${Number(imageInfo.location).toFixed(digitPlaces)} mm`
-                }}</div>
+            }}</div>
             <div v-show="imageInfo.sliceThickness">Slice Thickness: {{
                 `${Number(imageInfo.sliceThickness).toFixed(digitPlaces)} mm`
-                }}</div>
+            }}</div>
             <div v-show="imageInfo.wwwc">WW/WL: {{ imageInfo.wwwc }}</div>
         </div>
         <div class="orientation-top">
@@ -127,7 +127,6 @@ export default {
                 sliceThickness: null,
                 wwwc: null,
                 total: 0,
-                sliceThickness: 0
             },
             digitPlaces: 2,
             orientationMarkers: [],
@@ -276,8 +275,8 @@ export default {
             let imageIds = viewport.getImageIds(this.volumeId)
             let imageId = imageIds[0]
             let volume = cache.getVolume(this.volumeId)
-            console.log(volume, 'volume')
             let spacing = volume ? volume.spacing : []
+            console.log(spacing, 'spacing')
             // if (this.series.orientation === 'AXIAL') imageId = viewport.getCurrentImageId() 
             if (imageId && volume) {
                 this.$emit('setMPRInfo', { type: this.series.orientation, key: "imageNum", value: detail.numberOfSlices })
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/VolumeViewport.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/VolumeViewport.vue
index 10ea8748..c6ba91af 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/VolumeViewport.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/VolumeViewport.vue
@@ -281,6 +281,10 @@ export default {
                 this.imageInfo.size = `${imagePlaneModule.columns}*${imagePlaneModule.rows}`
                 this.imageInfo.location = imagePlaneModule.sliceLocation
                 this.imageInfo.total = detail.numberOfSlices
+                let type = this.determineImagePlane(imagePlaneModule.imageOrientationPatient)
+                let volume = cache.getVolume(this.volumeId)
+                let spacing = volume ? volume.spacing : []
+                this.imageInfo.sliceThickness = type === 'AXIAL' ? spacing[2] : spacing[0]
                 this.getOrientationMarker()
                 if (this.series && this.series.Id) {
                     let annotations = cornerstoneTools.annotation.state.getAllAnnotations().filter(item => item.metadata.toolName !== 'ScaleOverlay' && item.metadata.volumeId !== this.volumeId && !item.metadata.segmentationId && item.seriesId !== this.series.Id)

From 920d0b21c6494953c72a041140fbce3a6a85fdcf Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Mon, 30 Mar 2026 16:50:25 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E3=80=90dicom=E5=88=86=E5=89=B2=E3=80=91?=
 =?UTF-8?q?=E5=BD=93=E5=89=8D=E5=88=86=E7=BB=84=E9=80=89=E6=8B=A9=E4=B8=BA?=
 =?UTF-8?q?=E5=88=86=E7=BB=842=EF=BC=8C=E5=88=86=E7=BB=842=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=E6=A0=87=E8=AE=B0=E6=95=B0=E6=8D=AE=EF=BC=8C=E5=BD=93?=
 =?UTF-8?q?=E5=88=87=E5=85=A5mpr=E6=A8=A1=E5=BC=8F=E6=97=B6=EF=BC=8C?=
 =?UTF-8?q?=E6=AD=A4=E6=97=B6=E6=98=BE=E7=A4=BA=E4=BA=86=E5=88=86=E7=BB=84?=
 =?UTF-8?q?1=E7=9A=84=E6=A0=87=E8=AE=B0=EF=BC=8C=E8=BF=99=E9=87=8C?=
 =?UTF-8?q?=E5=BD=B1=E5=83=8F=E6=A0=87=E8=AE=B0=E5=BA=94=E8=AF=A5=E4=B8=8E?=
 =?UTF-8?q?=E5=8F=B3=E4=BE=A7=E5=88=86=E5=89=B2=E9=80=89=E6=8B=A9=E7=BB=84?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reading/dicoms3D/components/Segmentations.vue            | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/Segmentations.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/Segmentations.vue
index 7cd876d5..06f0e03c 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/Segmentations.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/Segmentations.vue
@@ -559,7 +559,7 @@ export default {
                 let item = arr[j]
                 let bidirectional = annotation.state.getAllAnnotations().find(i => i.metadata.segmentationId === item.segmentationId && i.metadata.segmentIndex === item.segmentIndex && i.metadata.toolName === "SegmentBidirectional");
                 item.bidirectionalView = view
-                if (!bidirectional) return false
+                if (!bidirectional) continue
                 annotation.visibility.setAnnotationVisibility(bidirectional.annotationUID, view)
             }
             this.resetViewport()
@@ -720,7 +720,7 @@ export default {
                     segmentIndex: segmentIndex,
                     segmentationId: this.segmentationId,
                     SegmentLabel: `Segment ${segmentIndex}`,
-                    color: item.segments.length > this.colors.length ? this.colors[0] : this.colors[item.segments.length],
+                    color: item.segments.length >= this.colors.length ? this.colors[0] : this.colors[item.segments.length],
                     stats: null,
                     bidirectional: null,
                     bidirectionalView: true,
@@ -1485,6 +1485,7 @@ export default {
                         })
                     }
                     this.isloaded = false
+                    this.readingSegmentByConfig()
                 }
             } catch (err) {
                 this.loading = false

From c5c9e4364c8db55a80465f7f02f84ce541e1f989 Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Mon, 30 Mar 2026 17:17:17 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E3=80=90dicom=E5=88=86=E5=89=B2=E3=80=91?=
 =?UTF-8?q?=E5=88=86=E6=AE=B5=E8=8F=9C=E5=8D=95=E6=8C=89=E9=92=AE=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E5=90=8E=EF=BC=8C=E5=86=8D=E7=82=B9=E5=87=BB=E5=8F=A6?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AA=E5=88=86=E6=AE=B5=E8=8F=9C=E5=8D=95=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=EF=BC=8C=E4=B8=8A=E4=B8=80=E4=B8=AA=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=E7=9A=84=E5=BC=B9=E7=AA=97=E5=BA=94=E8=AF=A5=E6=B6=88=E5=A4=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reading/dicoms3D/components/Segmentations.vue   | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/Segmentations.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/Segmentations.vue
index 06f0e03c..60ed03ee 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/Segmentations.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/Segmentations.vue
@@ -205,7 +205,9 @@
                                 <svg-icon :icon-class="item && !item.view ? 'eye' : 'eye-open'"
                                     @click.stop="viewSegment(item, !item.view)" class="docShow" />
                                 <i class="el-icon-lock" v-if="item.lock" @click.stop="lockSegment(item, false)"></i>
-                                <el-popover placement="bottom" width="40" trigger="click" class="docShow">
+                                <el-popover placement="bottom" width="40" trigger="click" class="docShow"
+                                    :value="popoverId === `popover-${item.segmentationId}_${item.segmentIndex}`"
+                                    @show="handleClickPopover(item)">
                                     <div class="SegmentGroupBtnBox">
                                         <div class="SegmentGroupBtn" @click.stop="rename('segment', item)">
                                             {{ $t('trials:reading:Segmentations:button:renameSegmentGroup') }}
@@ -352,7 +354,8 @@ export default {
             drawing: false, // 是否正在分割
             isDel: false,
             digitPlaces: 2,
-            isloaded: false
+            isloaded: false,
+            popoverId: null
         }
     },
     mounted() {
@@ -376,6 +379,9 @@ export default {
         })
         const digitPlaces = Number(localStorage.getItem('digitPlaces'))
         this.digitPlaces = digitPlaces === -1 ? this.digitPlaces : digitPlaces
+        // document.addEventListener("click", () => {
+        //     this.popoverId = null
+        // });
     },
     computed: {
         curSegmentGroup() {
@@ -411,6 +417,9 @@ export default {
         }
     },
     methods: {
+        handleClickPopover(item) {
+            this.popoverId = `popover-${item.segmentationId}_${item.segmentIndex}`
+        },
         initThreshold() {
             if (!this.ThresholdTools.includes(this.activeTool)) {
                 this.setToolActive(this.ThresholdTools[0])

From 76e6ef087fda8aefb0f201a898968cd14d4cc7e5 Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Mon, 30 Mar 2026 17:33:52 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E5=88=86=E5=89=B2=E6=A0=87=E8=AE=B0?=
 =?UTF-8?q?=E7=9A=84=E9=A2=9C=E8=89=B2=E9=9C=80=E8=A6=81=E9=9A=8F=E6=9C=BA?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=8D=E8=83=BD=E9=87=8D=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dicoms3D/components/Segmentations.vue     | 95 ++++++++++++++++++-
 1 file changed, 91 insertions(+), 4 deletions(-)

diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/Segmentations.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/Segmentations.vue
index 60ed03ee..a58bd948 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/Segmentations.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/Segmentations.vue
@@ -120,7 +120,7 @@
                         </el-switch>
                         <span style="margin-left: 5px;">{{
                             $t('trials:reading:Segmentations:title:InactiveSegmentationsShow')
-                        }}</span>
+                            }}</span>
                     </div>
                     <!-- <div class="SegmentConfig" v-if="SegmentConfig.InactiveSegmentations.show">
                         <span>{{ $t('trials:reading:Segmentations:title:Opacity') }}</span>
@@ -191,7 +191,7 @@
                                         <div v-for="k in statsKey" :key="k" class="statsBox">
                                             <span>{{ k }}</span>
                                             <span v-if="item.stats[k]">{{ Number(item.stats[k].value).toFixed(2)
-                                            }}<i>{{ item.stats[k].unit }}</i></span>
+                                                }}<i>{{ item.stats[k].unit }}</i></span>
                                         </div>
                                     </template>
                                     <div class="serialNum" slot="reference">{{ index + 1 }}</div>
@@ -234,7 +234,7 @@
         </el-collapse>
         <div class="saveBtnBox">
             <el-button type="success" size="small" @click="saveSegmentGroup()">{{ $t("common:button:save")
-            }}</el-button>
+                }}</el-button>
         </div>
     </div>
 </template>
@@ -724,7 +724,8 @@ export default {
 
             } else {
                 let item = this.segmentList.find(i => i.segmentationId === this.segmentationId)
-                let segmentIndex = item.segments[item.segments.length - 1].segmentIndex + 1
+                let arr = item.segments.sort((a, b) => a.segmentIndex - b.segmentIndex)
+                let segmentIndex = arr[item.segments.length - 1].segmentIndex + 1
                 let obj = {
                     segmentIndex: segmentIndex,
                     segmentationId: this.segmentationId,
@@ -736,6 +737,11 @@ export default {
                     view: true,
                     lock: false
                 }
+                if (item.segments.length >= this.colors.length) {
+                    let index = item.segments.length % this.colors.length
+                    let color = this.randomNearColor(this.colors[index], 4)
+                    obj.color = color
+                }
                 let id = await this.addOrUpdateSegment({ name: obj.SegmentLabel, color: obj.color, segmentIndex: obj.segmentIndex, segmentationId: obj.segmentationId })
                 obj.id = id
                 item.segments.push(obj)
@@ -1599,6 +1605,87 @@ export default {
                 b = parseInt(rgb[3], 16);
             return [r, g, b, alpha * 255];
         },
+        randomNearColor(hex, range = 3) {
+            if (!/^#([0-9a-fA-F]{6})$/.test(hex)) {
+                throw new Error('请输入正确的 6 位十六进制颜色值，例如 #000000');
+            }
+
+            const hexToRgb = (hex) => ({
+                r: parseInt(hex.slice(1, 3), 16),
+                g: parseInt(hex.slice(3, 5), 16),
+                b: parseInt(hex.slice(5, 7), 16),
+            });
+
+            const rgbToHsl = (r, g, b) => {
+                r /= 255; g /= 255; b /= 255;
+                const max = Math.max(r, g, b);
+                const min = Math.min(r, g, b);
+                let h = 0, s = 0;
+                const l = (max + min) / 2;
+
+                if (max !== min) {
+                    const d = max - min;
+                    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+                    switch (max) {
+                        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+                        case g: h = (b - r) / d + 2; break;
+                        case b: h = (r - g) / d + 4; break;
+                    }
+
+                    h *= 60;
+                }
+
+                return { h, s: s * 100, l: l * 100 };
+            };
+
+            const hslToRgb = (h, s, l) => {
+                h /= 360; s /= 100; l /= 100;
+                let r, g, b;
+
+                if (s === 0) {
+                    r = g = b = l;
+                } else {
+                    const hue2rgb = (p, q, t) => {
+                        if (t < 0) t += 1;
+                        if (t > 1) t -= 1;
+                        if (t < 1 / 6) return p + (q - p) * 6 * t;
+                        if (t < 1 / 2) return q;
+                        if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+                        return p;
+                    };
+
+                    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+                    const p = 2 * l - q;
+
+                    r = hue2rgb(p, q, h + 1 / 3);
+                    g = hue2rgb(p, q, h);
+                    b = hue2rgb(p, q, h - 1 / 3);
+                }
+
+                return {
+                    r: Math.round(r * 255),
+                    g: Math.round(g * 255),
+                    b: Math.round(b * 255),
+                };
+            };
+
+            const rgbToHex = (r, g, b) =>
+                `#${[r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')}`;
+
+            const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+            const randomOffset = (n) => (Math.random() * 2 - 1) * n;
+
+            const { r, g, b } = hexToRgb(hex);
+            const { h, s, l } = rgbToHsl(r, g, b);
+
+            const nh = (h + randomOffset(range) + 360) % 360;
+            const ns = clamp(s + randomOffset(range), 0, 100);
+            const nl = clamp(l + randomOffset(range), 0, 100);
+
+            const rgb = hslToRgb(nh, ns, nl);
+            return rgbToHex(rgb.r, rgb.g, rgb.b);
+        }
     },
 
 }