From 5b4cc097bcaa2d0a50d0c69d178df1cbd0442bf3 Mon Sep 17 00:00:00 2001
From: wangxiaoshuang <825034831@qq.com>
Date: Wed, 8 Apr 2026 14:58:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=86=E5=89=B2=E8=A7=86=E5=9B=BE=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E7=9B=B4=E6=96=B9=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reading/dicoms3D/components/ReadPage.vue  |   72 +-
 .../dicoms3D/components/VolumeViewport.vue    |    5 +
 .../reading/dicoms3D/components/histogram.vue | 1040 +++++++++++++++--
 3 files changed, 1035 insertions(+), 82 deletions(-)

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 f296c2f8..1c47b07e 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/ReadPage.vue
@@ -313,7 +313,8 @@
                   @dblclick="toggleFullScreen($event, index)" @click="activeViewport(index)">
                   <VolumeViewport :ref="`viewport-${index}`" :data-viewport-uid="`viewport-${index}`"
                     :rendering-engine-id="renderingEngineId" :viewport-id="`viewport-${index}`" :viewport-index="index"
-                    @activeViewport="activeViewport" @toggleTaskByViewport="toggleTaskByViewport" @previewCD="previewCD"
+                    :histogramVisible="histogramVisible" @activeViewport="activeViewport"
+                    @toggleTaskByViewport="toggleTaskByViewport" @previewCD="previewCD"
                     @renderAnnotations="renderAnnotations" @contentMouseup="contentMouseup" v-if="readingTool === 3"
                     v-resize="(e) => handleSizeChange(e, `viewport-${index}`)" />
                   <Viewport :ref="`viewport-${index}`" :data-viewport-uid="`viewport-${index}`"
@@ -493,6 +494,9 @@
       <SegmentForm ref="SegmentForm" v-if="segmentVisible" :visible.sync="segmentVisible" :visitInfo="segmentVisitInfo"
         @handleSegmentSave="handleSegmentSave" />
     </el-dialog>
+    <!--直方图-->
+    <histogram ref="histogram" v-if="readingTool === 3" :visible.sync="histogramVisible" :activeTool.sync="activeTool"
+      :viewportKey="viewportKey" :rendering-engine-id="renderingEngineId" :activeViewportIndex="activeViewportIndex" />
     <upload-dicom-and-nonedicom v-if="uploadImageVisible" :subject-id="uploadSubjectId"
       :subject-code="uploadSubjectCode" :criterion="uploadTrialCriterion" :visible.sync="uploadImageVisible"
       :visit-task-id="taskId" :is-reading-task-view-in-order="isReadingTaskViewInOrder" />
@@ -500,7 +504,6 @@
       :subject-code="uploadSubjectCode" :criterion="uploadTrialCriterion" :task-id="taskId"
       :visible.sync="downloadImageVisible" />
     <readingChart ref="readingChart" />
-    <histogram ref="histogram" />
   </div>
 </template>
 <script>
@@ -773,7 +776,9 @@ export default {
       hasFusionUpperInitialized: false,
       timer: null,
       FullTimerOut: null,
-      isDelay: false
+      isDelay: false,
+
+      histogramVisible: false
     }
   },
   computed: {
@@ -866,7 +871,37 @@ export default {
           this.setToolsPassive()
         }
       }
-    }
+    },
+    histogramVisible: {
+      handler() {
+        if (this.readingTool !== 3) return false
+        this.setToolsPassive()
+        let viewportIds = ['viewport-0', 'viewport-1', 'viewport-2', 'viewport-3']
+        if (this.isMPR) {
+          viewportIds = ['viewport-MPR-0', 'viewport-MPR-1', 'viewport-MPR-2']
+        }
+        viewportIds.forEach(id => {
+          const toolGroup = ToolGroupManager.getToolGroup(id)
+          if (this.histogramVisible) {
+            toolGroup.setToolEnabled(StackScrollTool.toolName)
+          } else {
+            toolGroup.setToolActive(StackScrollTool.toolName, {
+              bindings: [{ mouseButton: MouseBindings.Wheel }]
+            })
+            let annotations = annotation.state.getAllAnnotations().filter(item => item.metadata.toolName.includes('histogram_'));
+            annotations.forEach(item => {
+              annotation.state.removeAnnotation(item.annotationUID)
+            })
+            for (let i = 0; i < this.cells.length; i++) {
+              const viewportId = `${this.viewportKey}-${i}`
+              const viewport = renderingEngine.getViewport(viewportId)
+              viewport.render()
+            }
+          }
+
+        })
+      }
+    },
   },
   mounted() {
     this.taskInfo = JSON.parse(sessionStorage.getItem('taskInfo'))
@@ -915,8 +950,10 @@ export default {
   },
   methods: {
     async openHistogram() {
-      let res = await this.$refs.histogram.getCurrentSliceValuesFromVoxelManager(renderingEngineId, `${this.viewportKey}-${this.activeViewportIndex}`)
-      console.log(res, 'openHistogram')
+      this.histogramVisible = true
+      this.setToolsPassive()
+      this.$refs.histogram.init()
+
     },
     handleSizeChange(e, viewportId) {
       // console.log('handleSizeChange', e)
@@ -1380,6 +1417,18 @@ export default {
         toolGroup.addTool(ZoomTool.toolName)
         toolGroup.addTool(BrushTool.toolName)
         if (this.readingTool === 3 || toolGroupId === this.volumeToolGroupId) {
+          toolGroup.addToolInstance(
+            'histogram_RectangleROI',
+            RectangleROITool.toolName,
+          );
+          toolGroup.addToolInstance(
+            'histogram_CircleROI',
+            CircleROITool.toolName,
+          );
+          toolGroup.addToolInstance(
+            'histogram_PlanarFreehandROI',
+            PlanarFreehandROITool.toolName,
+          );
           toolGroup.addToolInstance(
             'CircularBrush',
             BrushTool.toolName,
@@ -1699,6 +1748,7 @@ export default {
       if (this.readingTaskState === 2) return
       const { annotation } = e.detail
       if (!annotation) return
+      if (annotation.metadata.toolName.includes('histogram_')) return this.$refs.histogram.initToolValue(annotation)
       if (annotation.metadata.toolName === 'PlanarFreehandROI' && !annotation.data.contour.closed) return
       const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
       if (series && series.TaskInfo.VisitTaskId && series.TaskInfo.VisitTaskId === this.taskInfo.VisitTaskId) {
@@ -1725,6 +1775,7 @@ export default {
       const { annotation } = e.detail
       if (!annotation.highlighted) return
       if (!annotation) return
+      if (annotation.metadata.toolName.includes('histogram_')) return this.$refs.histogram.initToolValue(annotation)
       if (annotation.metadata.toolName === 'PlanarFreehandROI' && !annotation.data.contour.closed) return
       const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
       if (series && series.TaskInfo.VisitTaskId && series.TaskInfo.VisitTaskId === this.taskInfo.VisitTaskId) {
@@ -1767,6 +1818,7 @@ export default {
       if (this.readingTaskState === 2) return
       const { annotation } = e.detail
       if (!annotation) return
+      if (annotation.metadata.toolName.includes('histogram_')) return this.$refs.histogram.initToolValue(annotation)
       const i = this.tools.findIndex(i => i.toolName === annotation.metadata.toolName)
       if (i === -1) {
         if (annotation.metadata.toolName !== LabelMapEditWithContourTool.toolName) this.setToolsPassive()
@@ -1855,6 +1907,7 @@ export default {
       const { annotation } = e.detail
       if (!annotation.highlighted) return
       if (!annotation) return
+      if (annotation.metadata.toolName.includes('histogram_')) return this.$refs.histogram.initToolValue(annotation)
       const i = this.tools.findIndex(i => i.toolName === annotation.metadata.toolName)
       if (i === -1) {
         if (annotation.metadata.toolName !== LabelMapEditWithContourTool.toolName) this.setToolsPassive()
@@ -2339,6 +2392,7 @@ export default {
     },
     // 激活工具
     setToolActive(toolName) {
+      if (this.histogramVisible) return false
       const toolGroupId = this.isMPR ? this.volumeToolGroupId : `${this.viewportKey}-${this.activeViewportIndex}`
       const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
       if (this.activeTool === toolName) {
@@ -2365,6 +2419,7 @@ export default {
     // 激活标注工具
     setAnnotateToolActive(toolName) {
       // if (this.readingTaskState === 2) return
+      if (this.histogramVisible) return false
       const toolObj = this.tools.find(i => i.toolName === toolName)
       if (!toolObj || toolObj.isDisabled) return
       const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
@@ -2434,6 +2489,7 @@ export default {
     },
     setMoreToolActive(toolName) {
       // if (this.readingTaskState === 2) return
+      if (this.histogramVisible) return false
       this.setToolsPassive()
       const series = this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].series
       if (series && series.TaskInfo.VisitTaskId && series.TaskInfo.VisitTaskId === this.taskInfo.VisitTaskId) {
@@ -2706,11 +2762,13 @@ export default {
     },
     // 翻页
     scrollPage(type) {
+      if (this.histogramVisible) return false
       this.clipPlaying = false
       this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].scrollPage(type)
     },
     // 播放
     toggleClipPlay(isPlay) {
+      if (this.histogramVisible) return false
       this.clipPlaying = !this.clipPlaying
       this.$refs[`${this.viewportKey}-${this.activeViewportIndex}`][0].toggleClipPlay(isPlay, this.fps)
     },
@@ -2986,6 +3044,7 @@ export default {
           const confirm = await this.$confirm(this.$t('trials:reading:confirm:changeStack'))
           if (!confirm) return false
         }
+        if (this.histogramVisible) this.$refs.histogram.close()
         this.isFusion = false
         this.setToolsPassive()
         this.rows = 1
@@ -3005,6 +3064,7 @@ export default {
         })
 
       }
+      if (this.histogramVisible) this.$refs.histogram.close()
       if (!obj.IsDicom) {
         return this.previewNoneDicoms(obj)
       }
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 3496e147..0cf01f3e 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/VolumeViewport.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/VolumeViewport.vue
@@ -96,6 +96,10 @@ export default {
             type: Number,
             required: true
         },
+        histogramVisible: {
+            type: Boolean,
+            default: false
+        }
     },
     data() {
         return {
@@ -183,6 +187,7 @@ export default {
             this.element.addEventListener('CORNERSTONE_VOI_MODIFIED', this.voiModified)
             this.element.addEventListener('CORNERSTONE_IMAGE_RENDERED', this.imageRendered)
             this.element.addEventListener('wheel', (e) => {
+                if (this.histogramVisible) return false
                 console.log('CORNERSTONE_STACK_VIEWPORT_SCROLL')
                 const renderingEngine = getRenderingEngine(this.renderingEngineId)
                 const viewport = renderingEngine.getViewport(this.viewportId)
diff --git a/src/views/trials/trials-panel/reading/dicoms3D/components/histogram.vue b/src/views/trials/trials-panel/reading/dicoms3D/components/histogram.vue
index 89438e12..214cea71 100644
--- a/src/views/trials/trials-panel/reading/dicoms3D/components/histogram.vue
+++ b/src/views/trials/trials-panel/reading/dicoms3D/components/histogram.vue
@@ -1,11 +1,38 @@
 <template>
-    <div class="histogram">
-        <div ref="chartContainer" style="width: 490px; height: 290px;" v-loading="loading"></div>
+    <div v-dialogDrag v-show="visible">
+        <div class="el-dialog">
+            <div class="el-dialog__header">
+                <div class="btnBox">
+                    <div :class="['tool-item', activeTool === 'histogram_RectangleROI' ? 'tool-item-active' : '']"
+                        :title="$t('trials:histogram:button:histogramRectangleROI')"
+                        @click.prevent="setToolActive('histogram_RectangleROI')">
+                        <svg-icon icon-class="rectangle" class="svg-icon" />
+                    </div>
+                    <div :class="['tool-item', activeTool === 'histogram_CircleROI' ? 'tool-item-active' : '']"
+                        :title="$t('trials:histogram:button:histogramCircleROI')"
+                        @click.prevent="setToolActive('histogram_CircleROI')">
+                        <svg-icon icon-class="oval" class="svg-icon" />
+                    </div>
+                    <div :class="['tool-item', activeTool === 'histogram_PlanarFreehandROI' ? 'tool-item-active' : '']"
+                        :title="$t('trials:histogram:button:histogramPlanarFreehandROI')"
+                        @click.prevent="setToolActive('histogram_PlanarFreehandROI')">
+                        <svg-icon icon-class="polygon" class="svg-icon" />
+                    </div>
+                </div>
+                <div class="title">{{ $t("trials:histogram:title:histogram") }}</div>
+                <i class="el-icon-circle-close closeBtn" @click.stop="close"></i>
+            </div>
+            <div class="histogram">
+                <div ref="chartContainer" style="width: 450px; height: 260px;" v-loading="loading"></div>
+            </div>
+        </div>
     </div>
+
 </template>
 <script>
 import * as echarts from 'echarts/core';
 import { LineChart } from 'echarts/charts';
+import { AxisBreak } from "echarts/features.js"
 import {
     TitleComponent,
     TooltipComponent,
@@ -29,6 +56,7 @@ echarts.use([
     DataZoomComponent,
     LegendComponent,
     LineChart,
+    AxisBreak,
     LabelLayout,
     UniversalTransition,
     CanvasRenderer
@@ -39,6 +67,14 @@ import {
     utilities,
     Enums,
 } from '@cornerstonejs/core';
+import * as cornerstoneTools from '@cornerstonejs/tools';
+const {
+    ToolGroupManager,
+    Enums: csToolsEnums,
+    CrosshairsTool,
+    annotation
+} = cornerstoneTools;
+const { MouseBindings, Events: toolsEvents } = csToolsEnums
 export default {
     name: "histogram",
     props: {
@@ -54,26 +90,122 @@ export default {
             type: String,
             required: true
         },
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        activeTool: {
+            type: String,
+            default: ''
+        },
     },
     data() {
         return {
-            chart: null
+            chart: null,
+            loading: false,
+            defaultColors: [
+                '#0ca8df',
+                '#ffd10a',
+                '#b6d634',
+                '#3fbe95',
+                '#785db0',
+                '#5070dd',
+                '#505372',
+                '#ff994d',
+                '#fb628b',
+            ],
+            colors: [],
+            seriesData: {}
         }
     },
+    mounted() {
+        // this.initChart()
+    },
     methods: {
-        init() {
-
+        setToolActive(toolName) {
+            const toolGroupId = `${this.viewportKey}-${this.activeViewportIndex}`
+            const toolGroup = ToolGroupManager.getToolGroup(toolGroupId)
+            if (this.activeTool === toolName) {
+                if (toolName === CrosshairsTool.toolName) {
+                    toolGroup.setToolDisabled(this.activeTool)
+                } else {
+                    toolGroup.setToolPassive(this.activeTool)
+                }
+                this.$emit('update:activeTool', '')
+            } else {
+                if (this.activeTool) {
+                    if (toolName === CrosshairsTool.toolName) {
+                        toolGroup.setToolDisabled(this.activeTool)
+                    } else {
+                        toolGroup.setToolPassive(this.activeTool)
+                    }
+                }
+                toolGroup.setToolActive(toolName, {
+                    bindings: [{ mouseButton: MouseBindings.Primary }]
+                })
+                this.$emit('update:activeTool', toolName)
+            }
+        },
+        close() {
+            this.dispose()
+            this.seriesData = {}
+            this.$emit("update:visible", false)
+        },
+        async init() {
+            this.colors = this.defaultColors
+            let _data = await this.generateData();
+            this.seriesData['default'] = _data.seriesData
+            this.seriesData['default'].color = this.colors[0]
+            this.initChart()
+        },
+        async initToolValue(an) {
+            let data = await this.generateData(an);
+            if (this.seriesData[an.annotationUID]) {
+                this.seriesData[an.annotationUID] = Object.assign(this.seriesData[an.annotationUID], data.seriesData)
+            } else {
+                let color = null;
+                let keys = Object.keys(this.seriesData)
+                if (keys.length >= this.defaultColors.length) {
+                    let index = keys.length % this.defaultColors.length
+                    color = this.randomNearColor(this.defaultColors[index], 30)
+                    this.colors.push(color)
+                } else {
+                    color = this.defaultColors[keys.length]
+                }
+                annotation.config.style.setAnnotationStyles(an.annotationUID, {
+                    color: this.hex2Rgb(color),
+                    colorLocked: this.hex2Rgb(color),
+                    colorSelected: this.hex2Rgb(color),
+                });
+                this.seriesData[an.annotationUID] = data.seriesData
+                this.seriesData[an.annotationUID].color = color
+            }
+            this.initChart()
         },
         initChart() {
-            this.chart = echarts.init(this.$refs.chartContainer);
-            var formatTime = echarts.time.format;
-            var _data = this.generateData1();
+            if (!this.chart) {
+                this.chart = echarts.init(this.$refs.chartContainer);
+            }
+            let seriesData = []
+            Object.keys(this.seriesData).forEach(key => {
+                seriesData.push(this.seriesData[key])
+            })
+            console.log(seriesData, 'seriesData')
             const option = {
-                // Choose axis ticks based on UTC time.
                 useUTC: true,
                 title: {
-                    text: 'Intraday Chart with Breaks (Single Day)',
-                    left: 'center'
+                    text: this.$t("trials:histogram:title:histogram"),
+                    textStyle: {
+                        color: "#fff"
+                    },
+                    left: 0,
+                    top: 0
+                },
+                color: this.colors,
+                grid: {
+                    left: 50,
+                    bottom: 80,
+                    right: 20
                 },
                 tooltip: {
                     show: true,
@@ -81,91 +213,88 @@ export default {
                 },
                 xAxis: [
                     {
-                        type: 'time',
-                        interval: 1000 * 60 * 30,
+                        type: 'category',
                         axisLabel: {
-                            showMinLabel: true,
-                            showMaxLabel: true,
-                            formatter: (value, index, extra) => {
-                                if (!extra || !extra.break) {
-                                    // The third parameter is `useUTC: true`.
-                                    return formatTime(value, '{HH}:{mm}', true);
-                                }
-                                // Only render the label on break start, but not on break end.
-                                if (extra.break.type === 'start') {
-                                    return (
-                                        formatTime(extra.break.start, '{HH}:{mm}', true) +
-                                        '/' +
-                                        formatTime(extra.break.end, '{HH}:{mm}', true)
-                                    );
-                                }
-                                return '';
+                            textStyle: {
+                                color: '#fff'
+                            },
+
+                        },
+                        axisLine: { // 设置 x 轴线颜色
+                            lineStyle: {
+                                color: '#fff',
                             }
                         },
-                        breakLabelLayout: {
-                            // Disable auto move of break labels if overlapping,
-                            // and use `axisLabel.formatter` to control the label display.
-                            moveOverlap: false
-                        },
-                        breaks: [
-                            {
-                                start: _data.breakStart,
-                                end: _data.breakEnd,
-                                gap: 0
-                            }
-                        ],
-                        breakArea: {
-                            expandOnClick: false,
-                            zigzagAmplitude: 0,
-                            zigzagZ: 200
-                        }
                     }
                 ],
                 yAxis: {
-                    type: 'value',
-                    min: 'dataMin'
+                    axisLabel: {
+                        textStyle: {
+                            color: '#fff',
+                        }
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: '#fff',
+                        }
+                    },
                 },
                 dataZoom: [
                     {
                         type: 'inside',
-                        xAxisIndex: 0
+                        xAxisIndex: 0,
                     },
                     {
                         type: 'slider',
-                        xAxisIndex: 0
+                        xAxisIndex: 0,
                     }
                 ],
-                series: [
-                    {
-                        type: 'line',
-                        symbolSize: 0,
-                        data: _data.seriesData
-                    }
-                ]
+                series: seriesData
             };
             this.chart.setOption(option);
         },
-        generateData1() {
+        async generateData(annotation) {
             var seriesData = [];
-            var time = new Date('2024-04-09T09:30:00Z');
-            var endTime = new Date('2024-04-09T15:00:00Z').getTime();
-            var breakStart = new Date('2024-04-09T11:30:00Z').getTime();
-            var breakEnd = new Date('2024-04-09T13:00:00Z').getTime();
-            for (var val = 1669; time.getTime() <= endTime;) {
-                if (time.getTime() <= breakStart || time.getTime() >= breakEnd) {
-                    val =
-                        val +
-                        Math.floor((Math.random() - 0.5 * Math.sin(val / 1000)) * 20 * 100) /
-                        100;
-                    val = +val.toFixed(2);
-                    seriesData.push([time.getTime(), val]);
-                }
-                time.setMinutes(time.getMinutes() + 1);
+            var min = null;
+            var max = null;
+            let res = null
+            if (annotation) {
+                res = await this[`get${annotation.metadata.toolName.split('histogram_')[1]}Values`](this.renderingEngineId, `${this.viewportKey}-${this.activeViewportIndex}`, annotation)
+            } else {
+                res = await this.getCurrentSliceValuesFromVoxelManager(this.renderingEngineId, `${this.viewportKey}-${this.activeViewportIndex}`)
             }
+            if (res) {
+                let obj = {
+
+                }
+                res.values.forEach(item => {
+                    if (obj[item]) {
+                        obj[item]++
+                    } else {
+                        obj[item] = 1
+                    }
+                    if (min > item) {
+                        min = item
+                    }
+                    if (max < item) {
+                        max = item
+                    }
+                })
+                Object.keys(obj).forEach(key => {
+                    let arr = [key, obj[key]]
+                    seriesData.push(arr)
+                })
+            }
+            seriesData.sort((a, b) => a[0] - b[0])
             return {
-                seriesData: seriesData,
-                breakStart: breakStart,
-                breakEnd: breakEnd
+                seriesData: {
+                    type: 'line',
+                    symbolSize: 0,
+                    data: seriesData
+                },
+                min: min,
+                max: max
             };
         },
         resize() {
@@ -179,6 +308,517 @@ export default {
                 this.chart = null
             }
         },
+        async getPlanarFreehandROIValues(
+            renderingEngineId,
+            viewportId,
+            annotation,
+        ) {
+            const renderingEngine = getRenderingEngine(renderingEngineId);
+            const viewport = renderingEngine.getViewport(viewportId);
+
+            const volumeId = viewport.getVolumeId();
+            if (!volumeId) {
+                throw new Error('No volumeId found on viewport');
+            }
+
+            const volume = cache.getVolume(volumeId);
+            if (!volume) {
+                throw new Error(`Volume not found in cache: ${volumeId}`);
+            }
+
+            if (!volume.load) {
+                await volume.load();
+            }
+
+            const voxelManager = volume.voxelManager;
+            if (!voxelManager) {
+                throw new Error('voxelManager not found on volume');
+            }
+
+            const metadata = volume.metadata || {};
+            const modality = metadata.Modality || metadata.modality || 'UNKNOWN';
+            const [dimX, dimY, dimZ] = volume.dimensions;
+
+            const contourPointsWorld = this.getFreehandPointsFromAnnotation(annotation);
+            if (!contourPointsWorld.length) {
+                throw new Error('Freehand contour points not found');
+            }
+
+            // 世界坐标 -> IJK
+            const contourPointsIJK = contourPointsWorld.map((p) =>
+                utilities.transformWorldToIndex(volume.imageData, p)
+            );
+
+            const orientation = this.guessOrthogonalOrientation(
+                viewport.getCamera().viewPlaneNormal
+            );
+
+            let values = [];
+
+            if (orientation === Enums.OrientationAxis.AXIAL) {
+                // 使用 x,y 做二维点，z 固定
+                const k = this.clamp(
+                    Math.round(this.avg(contourPointsIJK.map((p) => p[2]))),
+                    0,
+                    dimZ - 1
+                );
+
+                const polygon2D = contourPointsIJK.map((p) => [p[0], p[1]]);
+
+                const minX = this.clamp(
+                    Math.floor(Math.min(...polygon2D.map((p) => p[0]))),
+                    0,
+                    dimX - 1
+                );
+                const maxX = this.clamp(
+                    Math.ceil(Math.max(...polygon2D.map((p) => p[0]))),
+                    0,
+                    dimX - 1
+                );
+                const minY = this.clamp(
+                    Math.floor(Math.min(...polygon2D.map((p) => p[1]))),
+                    0,
+                    dimY - 1
+                );
+                const maxY = this.clamp(
+                    Math.ceil(Math.max(...polygon2D.map((p) => p[1]))),
+                    0,
+                    dimY - 1
+                );
+
+                for (let y = minY; y <= maxY; y++) {
+                    for (let x = minX; x <= maxX; x++) {
+                        if (this.isPointInPolygon([x + 0.5, y + 0.5], polygon2D)) {
+                            const raw = voxelManager.getAtIJK(x, y, k);
+                            const physicalValue = this.convertToPhysicalValue(raw, metadata, modality);
+                            values.push(physicalValue);
+                        }
+                    }
+                }
+
+                return {
+                    modality,
+                    valueType: this.getValueType(modality, metadata),
+                    orientation: 'AXIAL',
+                    sliceIndex: k,
+                    bounds: { minX, maxX, minY, maxY },
+                    count: values.length,
+                    values,
+                    stats: this.getStats(values),
+                };
+            }
+
+            if (orientation === Enums.OrientationAxis.CORONAL) {
+                // 使用 x,z 做二维点，y 固定
+                const j = this.clamp(
+                    Math.round(this.avg(contourPointsIJK.map((p) => p[1]))),
+                    0,
+                    dimY - 1
+                );
+
+                const polygon2D = contourPointsIJK.map((p) => [p[0], p[2]]);
+
+                const minX = this.clamp(
+                    Math.floor(Math.min(...polygon2D.map((p) => p[0]))),
+                    0,
+                    dimX - 1
+                );
+                const maxX = this.clamp(
+                    Math.ceil(Math.max(...polygon2D.map((p) => p[0]))),
+                    0,
+                    dimX - 1
+                );
+                const minZ = this.clamp(
+                    Math.floor(Math.min(...polygon2D.map((p) => p[1]))),
+                    0,
+                    dimZ - 1
+                );
+                const maxZ = this.clamp(
+                    Math.ceil(Math.max(...polygon2D.map((p) => p[1]))),
+                    0,
+                    dimZ - 1
+                );
+
+                for (let z = minZ; z <= maxZ; z++) {
+                    for (let x = minX; x <= maxX; x++) {
+                        if (this.isPointInPolygon([x + 0.5, z + 0.5], polygon2D)) {
+                            const raw = voxelManager.getAtIJK(x, j, z);
+                            const physicalValue = this.convertToPhysicalValue(raw, metadata, modality);
+                            values.push(physicalValue);
+                        }
+                    }
+                }
+
+                return {
+                    modality,
+                    valueType: this.getValueType(modality, metadata),
+                    orientation: 'CORONAL',
+                    sliceIndex: j,
+                    bounds: { minX, maxX, minZ, maxZ },
+                    count: values.length,
+                    values,
+                    stats: this.getStats(values),
+                };
+            }
+
+            if (orientation === Enums.OrientationAxis.SAGITTAL) {
+                // 使用 y,z 做二维点，x 固定
+                const i = this.clamp(
+                    Math.round(this.avg(contourPointsIJK.map((p) => p[0]))),
+                    0,
+                    dimX - 1
+                );
+
+                const polygon2D = contourPointsIJK.map((p) => [p[1], p[2]]);
+
+                const minY = this.clamp(
+                    Math.floor(Math.min(...polygon2D.map((p) => p[0]))),
+                    0,
+                    dimY - 1
+                );
+                const maxY = this.clamp(
+                    Math.ceil(Math.max(...polygon2D.map((p) => p[0]))),
+                    0,
+                    dimY - 1
+                );
+                const minZ = this.clamp(
+                    Math.floor(Math.min(...polygon2D.map((p) => p[1]))),
+                    0,
+                    dimZ - 1
+                );
+                const maxZ = this.clamp(
+                    Math.ceil(Math.max(...polygon2D.map((p) => p[1]))),
+                    0,
+                    dimZ - 1
+                );
+
+                for (let z = minZ; z <= maxZ; z++) {
+                    for (let y = minY; y <= maxY; y++) {
+                        if (this.isPointInPolygon([y + 0.5, z + 0.5], polygon2D)) {
+                            const raw = voxelManager.getAtIJK(i, y, z);
+                            const physicalValue = this.convertToPhysicalValue(raw, metadata, modality);
+                            values.push(physicalValue);
+                        }
+                    }
+                }
+
+                return {
+                    modality,
+                    valueType: this.getValueType(modality, metadata),
+                    orientation: 'SAGITTAL',
+                    sliceIndex: i,
+                    bounds: { minY, maxY, minZ, maxZ },
+                    count: values.length,
+                    values,
+                    stats: this.getStats(values),
+                };
+            }
+
+            throw new Error('Only standard orthogonal orientation is supported');
+        },
+        async getCircleROIValues(
+            renderingEngineId,
+            viewportId,
+            annotation,
+        ) {
+            const renderingEngine = getRenderingEngine(renderingEngineId);
+            const viewport = renderingEngine.getViewport(viewportId);
+
+            const volumeId = viewport.getVolumeId();
+            if (!volumeId) {
+                throw new Error('No volumeId found on viewport');
+            }
+
+            const volume = cache.getVolume(volumeId);
+            if (!volume) {
+                throw new Error(`Volume not found in cache: ${volumeId}`);
+            }
+
+            if (!volume.load) {
+                await volume.load();
+            }
+
+            const voxelManager = volume.voxelManager;
+            if (!voxelManager) {
+                throw new Error('voxelManager not found on volume');
+            }
+
+            const metadata = volume.metadata || {};
+            const modality = metadata.Modality || metadata.modality || 'UNKNOWN';
+            const [dimX, dimY, dimZ] = volume.dimensions;
+
+            const points = annotation?.data?.handles?.points;
+            if (!points || points.length < 2) {
+                throw new Error('CircleROI annotation points not found');
+            }
+
+            // 假设第一个点是圆心，第二个点在圆边
+            const centerWorld = points[0];
+            const edgeWorld = points[1];
+
+            const centerIJK = utilities.transformWorldToIndex(volume.imageData, centerWorld);
+            const edgeIJK = utilities.transformWorldToIndex(volume.imageData, edgeWorld);
+
+            const orientation = this.guessOrthogonalOrientation(
+                viewport.getCamera().viewPlaneNormal
+            );
+
+            let values = [];
+
+            if (orientation === Enums.OrientationAxis.AXIAL) {
+                // 圆位于 XY 平面，固定 z
+                const cx = centerIJK[0];
+                const cy = centerIJK[1];
+                const k = this.clamp(Math.round(centerIJK[2]), 0, dimZ - 1);
+
+                const dx = edgeIJK[0] - cx;
+                const dy = edgeIJK[1] - cy;
+                const radius = Math.sqrt(dx * dx + dy * dy);
+
+                const minX = this.clamp(Math.floor(cx - radius), 0, dimX - 1);
+                const maxX = this.clamp(Math.ceil(cx + radius), 0, dimX - 1);
+                const minY = this.clamp(Math.floor(cy - radius), 0, dimY - 1);
+                const maxY = this.clamp(Math.ceil(cy + radius), 0, dimY - 1);
+
+                for (let y = minY; y <= maxY; y++) {
+                    for (let x = minX; x <= maxX; x++) {
+                        const dist2 = (x - cx) * (x - cx) + (y - cy) * (y - cy);
+                        if (dist2 <= radius * radius) {
+                            const raw = voxelManager.getAtIJK(x, y, k);
+                            const physicalValue = this.convertToPhysicalValue(raw, metadata, modality);
+                            values.push(physicalValue);
+                        }
+                    }
+                }
+
+                return {
+                    modality,
+                    valueType: this.getValueType(modality, metadata),
+                    orientation: 'AXIAL',
+                    center: { x: cx, y: cy, z: k },
+                    radius,
+                    count: values.length,
+                    values,
+                    stats: this.getStats(values),
+                };
+            }
+
+            if (orientation === Enums.OrientationAxis.CORONAL) {
+                // 圆位于 XZ 平面，固定 y
+                const cx = centerIJK[0];
+                const cz = centerIJK[2];
+                const j = this.clamp(Math.round(centerIJK[1]), 0, dimY - 1);
+
+                const dx = edgeIJK[0] - cx;
+                const dz = edgeIJK[2] - cz;
+                const radius = Math.sqrt(dx * dx + dz * dz);
+
+                const minX = this.clamp(Math.floor(cx - radius), 0, dimX - 1);
+                const maxX = this.clamp(Math.ceil(cx + radius), 0, dimX - 1);
+                const minZ = this.clamp(Math.floor(cz - radius), 0, dimZ - 1);
+                const maxZ = this.clamp(Math.ceil(cz + radius), 0, dimZ - 1);
+
+                for (let z = minZ; z <= maxZ; z++) {
+                    for (let x = minX; x <= maxX; x++) {
+                        const dist2 = (x - cx) * (x - cx) + (z - cz) * (z - cz);
+                        if (dist2 <= radius * radius) {
+                            const raw = voxelManager.getAtIJK(x, j, z);
+                            const physicalValue = this.convertToPhysicalValue(raw, metadata, modality);
+                            values.push(physicalValue);
+                        }
+                    }
+                }
+
+                return {
+                    modality,
+                    valueType: this.getValueType(modality, metadata),
+                    orientation: 'CORONAL',
+                    center: { x: cx, y: j, z: cz },
+                    radius,
+                    count: values.length,
+                    values,
+                    stats: this.getStats(values),
+                };
+            }
+
+            if (orientation === Enums.OrientationAxis.SAGITTAL) {
+                // 圆位于 YZ 平面，固定 x
+                const cy = centerIJK[1];
+                const cz = centerIJK[2];
+                const i = this.clamp(Math.round(centerIJK[0]), 0, dimX - 1);
+
+                const dy = edgeIJK[1] - cy;
+                const dz = edgeIJK[2] - cz;
+                const radius = Math.sqrt(dy * dy + dz * dz);
+
+                const minY = this.clamp(Math.floor(cy - radius), 0, dimY - 1);
+                const maxY = this.clamp(Math.ceil(cy + radius), 0, dimY - 1);
+                const minZ = this.clamp(Math.floor(cz - radius), 0, dimZ - 1);
+                const maxZ = this.clamp(Math.ceil(cz + radius), 0, dimZ - 1);
+
+                for (let z = minZ; z <= maxZ; z++) {
+                    for (let y = minY; y <= maxY; y++) {
+                        const dist2 = (y - cy) * (y - cy) + (z - cz) * (z - cz);
+                        if (dist2 <= radius * radius) {
+                            const raw = voxelManager.getAtIJK(i, y, z);
+                            const physicalValue = this.convertToPhysicalValue(raw, metadata, modality);
+                            values.push(physicalValue);
+                        }
+                    }
+                }
+
+                return {
+                    modality,
+                    valueType: this.getValueType(modality, metadata),
+                    orientation: 'SAGITTAL',
+                    center: { x: i, y: cy, z: cz },
+                    radius,
+                    count: values.length,
+                    values,
+                    stats: this.getStats(values),
+                };
+            }
+
+            throw new Error('Only standard orthogonal orientation is supported');
+        },
+        async getRectangleROIValues(
+            renderingEngineId,
+            viewportId,
+            annotation,
+        ) {
+            const renderingEngine = getRenderingEngine(renderingEngineId);
+            const viewport = renderingEngine.getViewport(viewportId);
+
+            const volumeId = viewport.getVolumeId();
+            if (!volumeId) {
+                throw new Error('No volumeId found on viewport');
+            }
+
+            const volume = cache.getVolume(volumeId);
+            if (!volume) {
+                throw new Error(`Volume not found in cache: ${volumeId}`);
+            }
+
+            if (!volume.load) {
+                await volume.load();
+            }
+
+            const voxelManager = volume.voxelManager;
+            if (!voxelManager) {
+                throw new Error('voxelManager not found on volume');
+            }
+
+            const metadata = volume.metadata || {};
+            const modality = metadata.Modality || metadata.modality || 'UNKNOWN';
+
+            const [dimX, dimY, dimZ] = volume.dimensions;
+
+            const points = annotation?.data?.handles?.points;
+            if (!points || points.length < 4) {
+                throw new Error('RectangleROI annotation points not found');
+            }
+
+            // 世界坐标 -> IJK
+            const ijkPoints = points.map((p) =>
+                utilities.transformWorldToIndex(volume.imageData, p)
+            );
+
+            // 根据当前切面方向，确定遍历哪两个轴
+            const orientation = this.guessOrthogonalOrientation(
+                viewport.getCamera().viewPlaneNormal
+            );
+
+            let values = [];
+
+            if (orientation === Enums.OrientationAxis.AXIAL) {
+                // 固定 z = k，遍历 x,y
+                const k = this.clamp(Math.round(this.avg(ijkPoints.map((p) => p[2]))), 0, dimZ - 1);
+
+                const minX = this.clamp(Math.floor(Math.min(...ijkPoints.map((p) => p[0]))), 0, dimX - 1);
+                const maxX = this.clamp(Math.ceil(Math.max(...ijkPoints.map((p) => p[0]))), 0, dimX - 1);
+
+                const minY = this.clamp(Math.floor(Math.min(...ijkPoints.map((p) => p[1]))), 0, dimY - 1);
+                const maxY = this.clamp(Math.ceil(Math.max(...ijkPoints.map((p) => p[1]))), 0, dimY - 1);
+
+                for (let y = minY; y <= maxY; y++) {
+                    for (let x = minX; x <= maxX; x++) {
+                        const raw = voxelManager.getAtIJK(x, y, k);
+                        const physicalValue = this.convertToPhysicalValue(raw, metadata, modality);
+                        values.push(physicalValue);
+                    }
+                }
+
+                return {
+                    modality,
+                    valueType: this.getValueType(modality, metadata),
+                    orientation: 'AXIAL',
+                    bounds: { minX, maxX, minY, maxY, k },
+                    count: values.length,
+                    values,
+                    stats: this.getStats(values),
+                };
+            }
+
+            if (orientation === Enums.OrientationAxis.CORONAL) {
+                // 固定 y = j，遍历 x,z
+                const j = this.clamp(Math.round(this.avg(ijkPoints.map((p) => p[1]))), 0, dimY - 1);
+
+                const minX = this.clamp(Math.floor(Math.min(...ijkPoints.map((p) => p[0]))), 0, dimX - 1);
+                const maxX = this.clamp(Math.ceil(Math.max(...ijkPoints.map((p) => p[0]))), 0, dimX - 1);
+
+                const minZ = this.clamp(Math.floor(Math.min(...ijkPoints.map((p) => p[2]))), 0, dimZ - 1);
+                const maxZ = this.clamp(Math.ceil(Math.max(...ijkPoints.map((p) => p[2]))), 0, dimZ - 1);
+
+                for (let z = minZ; z <= maxZ; z++) {
+                    for (let x = minX; x <= maxX; x++) {
+                        const raw = voxelManager.getAtIJK(x, j, z);
+                        const physicalValue = this.convertToPhysicalValue(raw, metadata, modality);
+                        values.push(physicalValue);
+                    }
+                }
+
+                return {
+                    modality,
+                    valueType: this.getValueType(modality, metadata),
+                    orientation: 'CORONAL',
+                    bounds: { minX, maxX, j, minZ, maxZ },
+                    count: values.length,
+                    values,
+                    stats: this.getStats(values),
+                };
+            }
+
+            if (orientation === Enums.OrientationAxis.SAGITTAL) {
+                // 固定 x = i，遍历 y,z
+                const i = this.clamp(Math.round(this.avg(ijkPoints.map((p) => p[0]))), 0, dimX - 1);
+
+                const minY = this.clamp(Math.floor(Math.min(...ijkPoints.map((p) => p[1]))), 0, dimY - 1);
+                const maxY = this.clamp(Math.ceil(Math.max(...ijkPoints.map((p) => p[1]))), 0, dimY - 1);
+
+                const minZ = this.clamp(Math.floor(Math.min(...ijkPoints.map((p) => p[2]))), 0, dimZ - 1);
+                const maxZ = this.clamp(Math.ceil(Math.max(...ijkPoints.map((p) => p[2]))), 0, dimZ - 1);
+
+                for (let z = minZ; z <= maxZ; z++) {
+                    for (let y = minY; y <= maxY; y++) {
+                        const raw = voxelManager.getAtIJK(i, y, z);
+                        const physicalValue = this.convertToPhysicalValue(raw, metadata, modality);
+                        values.push(physicalValue);
+                    }
+                }
+
+                return {
+                    modality,
+                    valueType: this.getValueType(modality, metadata),
+                    orientation: 'SAGITTAL',
+                    bounds: { i, minY, maxY, minZ, maxZ },
+                    count: values.length,
+                    values,
+                    stats: this.getStats(values),
+                };
+            }
+
+            throw new Error('Only standard orthogonal orientation is supported');
+        },
         async getCurrentSliceValuesFromVoxelManager(renderingEngineId, viewportId) {
             const renderingEngine = getRenderingEngine(renderingEngineId);
             const viewport = renderingEngine.getViewport(viewportId);
@@ -346,7 +986,35 @@ export default {
         clamp(v, min, max) {
             return Math.max(min, Math.min(max, v));
         },
+        avg(arr) {
+            return arr.reduce((s, v) => s + v, 0) / arr.length;
+        },
+        getStats(values) {
+            if (!values.length) {
+                return { min: null, max: null, mean: null, stdDev: null };
+            }
 
+            let min = Infinity;
+            let max = -Infinity;
+            let sum = 0;
+
+            for (const v of values) {
+                if (v < min) min = v;
+                if (v > max) max = v;
+                sum += v;
+            }
+
+            const mean = sum / values.length;
+
+            let varianceSum = 0;
+            for (const v of values) {
+                varianceSum += (v - mean) * (v - mean);
+            }
+
+            const stdDev = Math.sqrt(varianceSum / values.length);
+
+            return { min, max, mean, stdDev };
+        },
         guessOrthogonalOrientation(viewPlaneNormal) {
             const [nx, ny, nz] = viewPlaneNormal.map(Math.abs);
 
@@ -359,8 +1027,228 @@ export default {
             }
 
             return Enums.OrientationAxis.SAGITTAL;
+        },
+        getFreehandPointsFromAnnotation(annotation) {
+            if (!annotation?.data) {
+                return [];
+            }
+
+            // 常见结构 1
+            if (Array.isArray(annotation.data.contour?.polyline)) {
+                return annotation.data.contour.polyline;
+            }
+
+            // 常见结构 2
+            if (Array.isArray(annotation.data.polyline)) {
+                return annotation.data.polyline;
+            }
+
+            // 常见结构 3
+            if (Array.isArray(annotation.data.handles?.points)) {
+                return annotation.data.handles.points;
+            }
+
+            return [];
+        },
+        isPointInPolygon(point, polygon) {
+            const [px, py] = point;
+            let inside = false;
+
+            for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+                const [xi, yi] = polygon[i];
+                const [xj, yj] = polygon[j];
+
+                const intersect =
+                    yi > py !== yj > py &&
+                    px < ((xj - xi) * (py - yi)) / (yj - yi + 1e-12) + xi;
+
+                if (intersect) {
+                    inside = !inside;
+                }
+            }
+
+            return inside;
+        },
+        hex2Rgb(hexValue, alpha = 1) {
+            const rgx = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+            const hex = hexValue.replace(rgx, (m, r, g, b) => r + r + g + g + b + b);
+            const rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+            if (!rgb) {
+                return hexValue;
+            }
+            const r = parseInt(rgb[1], 16),
+                g = parseInt(rgb[2], 16),
+                b = parseInt(rgb[3], 16);
+            return `rgb(${r},${g},${b})`;
+        },
+        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);
         }
     }
 }
 </script>
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.el-dialog {
+    position: fixed;
+    top: 10px;
+    z-index: 9999;
+    width: 450px;
+    text-align: center;
+
+    .el-dialog__header {
+        text-align: left;
+        padding: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .btnBox {
+            display: flex;
+            align-items: center;
+        }
+
+        .closeBtn {
+            cursor: pointer;
+        }
+    }
+
+    .svg-icon {
+        color: #fff;
+        font-size: 20px;
+    }
+
+    .tool-item {
+        padding: 5px;
+        margin: 0 5px;
+        border: 1px solid #333;
+        // font-size: 20px;
+        cursor: pointer;
+    }
+
+    .tool-item-active {
+        background-color: #607d8b;
+    }
+
+    .tool-disabled {
+        cursor: not-allowed;
+    }
+
+    .tool-frame {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        // margin-right: 20px;
+        padding: 5px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #404040;
+
+        .icon {
+            padding: 5px;
+            border-right: 1px solid #404040;
+            cursor: pointer;
+            text-align: center;
+
+            .svg-icon {
+                font-size: 20px;
+                color: #ddd;
+            }
+        }
+
+        .select-wrapper {
+            width: 60px;
+            background-color: black;
+            color: #ddd;
+            border: none;
+            font-size: 13px;
+            outline: none;
+        }
+
+        .text {
+            position: relative;
+            font-size: 12px;
+            margin-top: 5px;
+            color: #d0d0d0;
+            display: none;
+        }
+    }
+}
+</style>
\ No newline at end of file