vue2-client 1.18.21 → 1.18.23

package/package.json

@@ -1,112 +1,112 @@
-{
-  "name": "vue2-client",
-  "version": "1.18.21",
-  "private": false,
-  "scripts": {
-    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",
-    "serve:gaslink": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode gaslink",
-    "serve:revenue": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode revenue",
-    "serve:liuli": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode liuli",
-    "serve:scada": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode scada",
-    "serve:iot": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode iot",
-    "serve:his": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode his",
-    "serve:runtime": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode runtime",
-    "serve:message": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode message",
-    "serve:apply": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode apply",
-    "mac-serve": "vue-cli-service serve --no-eslint --mode his",
-    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint",
-    "build:preview": "vue-cli-service build --mode preview",
-    "lint:nofix": "vue-cli-service lint --no-fix",
-    "test": "jest"
-  },
-  "dependencies": {
-    "@afwenming123/vue-easy-tree": "^1.0.1",
-    "@afwenming123/vue-plugin-hiprint": "^0.0.70",
-    "@amap/amap-jsapi-loader": "^1.0.1",
-    "@antv/data-set": "^0.11.8",
-    "@antv/g2plot": "^2.4.31",
-    "@hufe921/canvas-editor": "^0.9.49",
-    "@microsoft/fetch-event-source": "^2.0.1",
-    "@vue/babel-preset-jsx": "^1.4.0",
-    "animate.css": "^4.1.1",
-    "ant-design-vue": "^1.7.8",
-    "axios": "^0.27.2",
-    "clipboard": "^2.0.11",
-    "core-js": "^3.33.0",
-    "crypto-js": "^4.1.1",
-    "date-fns": "^2.29.3",
-    "default-passive-events": "^2.0.0",
-    "dotenv": "^16.3.1",
-    "echarts": "^5.5.0",
-    "enquire.js": "^2.1.6",
-    "file-saver": "^2.0.5",
-    "highlight.js": "^11.7.0",
-    "html2canvas": "^1.4.1",
-    "js-base64": "^3.7.5",
-    "js-cookie": "^2.2.1",
-    "jsencrypt": "^3.3.2",
-    "jspdf": "^2.5.1",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.debounce": "^4",
-    "lodash.get": "^4.4.2",
-    "marked": "^4",
-    "mockjs": "^1.1.0",
-    "nprogress": "^0.2.0",
-    "qs": "^6.11.2",
-    "regenerator-runtime": "^0.14.0",
-    "splitpanes": "^2.4.1",
-    "videojs-contrib-hls": "^5.15.0",
-    "viser-vue": "^2.4.8",
-    "vue": "^2.7.14",
-    "vue-codemirror": "4.0.6",
-    "vue-color": "2.7.0",
-    "vue-draggable-resizable": "^2.3.0",
-    "vue-i18n": "^8.28.2",
-    "vue-json-viewer": "^2.2.22",
-    "vue-router": "^3.6.5",
-    "vue-video-player": "^5.0.2",
-    "vue-virtual-scroller": "^1.1.2",
-    "vuedraggable": "^2.24.3",
-    "vuex": "^3.6.2",
-    "xlsx": "0.18.5"
-  },
-  "devDependencies": {
-    "@ant-design/colors": "^7.0.0",
-    "@babel/core": "^7.22.20",
-    "@babel/eslint-parser": "^7.22.15",
-    "@babel/preset-env": "^7.22.20",
-    "@vue/cli-plugin-babel": "^5.0.8",
-    "@vue/cli-plugin-eslint": "^5.0.8",
-    "@vue/cli-service": "^5.0.8",
-    "@vue/eslint-config-standard": "^8.0.1",
-    "@vue/test-utils": "^1.3.6",
-    "babel-plugin-transform-remove-console": "^6.9.4",
-    "compression-webpack-plugin": "^10.0.0",
-    "css-minimizer-webpack-plugin": "^5.0.1",
-    "deepmerge": "^4.3.1",
-    "eslint": "^8.51.0",
-    "eslint-plugin-vue": "^9.17.0",
-    "fast-deep-equal": "^3.1.3",
-    "ignore-loader": "^0.1.2",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-transform-stub": "^2.0.0",
-    "less-loader": "^6.2.0",
-    "script-loader": "^0.7.2",
-    "style-resources-loader": "^1.5.0",
-    "vue-cli-plugin-style-resources-loader": "^0.1.5",
-    "vue-jest": "^4.0.1",
-    "vue-template-compiler": "^2.7.14",
-    "webpack": "^5.88.2",
-    "webpack-theme-color-replacer": "^1.4.7",
-    "whatwg-fetch": "^3.6.19"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead",
-    "not ie 11"
-  ]
-}
+{
+  "name": "vue2-client",
+  "version": "1.18.23",
+  "private": false,
+  "scripts": {
+    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",
+    "serve:gaslink": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode gaslink",
+    "serve:revenue": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode revenue",
+    "serve:liuli": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode liuli",
+    "serve:scada": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode scada",
+    "serve:iot": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode iot",
+    "serve:his": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode his",
+    "serve:runtime": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode runtime",
+    "serve:message": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode message",
+    "serve:apply": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint --mode apply",
+    "mac-serve": "vue-cli-service serve --no-eslint --mode his",
+    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint",
+    "build:preview": "vue-cli-service build --mode preview",
+    "lint:nofix": "vue-cli-service lint --no-fix",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@afwenming123/vue-easy-tree": "^1.0.1",
+    "@afwenming123/vue-plugin-hiprint": "^0.0.70",
+    "@amap/amap-jsapi-loader": "^1.0.1",
+    "@antv/data-set": "^0.11.8",
+    "@antv/g2plot": "^2.4.31",
+    "@hufe921/canvas-editor": "^0.9.49",
+    "@microsoft/fetch-event-source": "^2.0.1",
+    "@vue/babel-preset-jsx": "^1.4.0",
+    "animate.css": "^4.1.1",
+    "ant-design-vue": "^1.7.8",
+    "axios": "^0.27.2",
+    "clipboard": "^2.0.11",
+    "core-js": "^3.33.0",
+    "crypto-js": "^4.1.1",
+    "date-fns": "^2.29.3",
+    "default-passive-events": "^2.0.0",
+    "dotenv": "^16.3.1",
+    "echarts": "^5.5.0",
+    "enquire.js": "^2.1.6",
+    "file-saver": "^2.0.5",
+    "highlight.js": "^11.7.0",
+    "html2canvas": "^1.4.1",
+    "js-base64": "^3.7.5",
+    "js-cookie": "^2.2.1",
+    "jsencrypt": "^3.3.2",
+    "jspdf": "^2.5.1",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.debounce": "^4",
+    "lodash.get": "^4.4.2",
+    "marked": "^4",
+    "mockjs": "^1.1.0",
+    "nprogress": "^0.2.0",
+    "qs": "^6.11.2",
+    "regenerator-runtime": "^0.14.0",
+    "splitpanes": "^2.4.1",
+    "videojs-contrib-hls": "^5.15.0",
+    "viser-vue": "^2.4.8",
+    "vue": "^2.7.14",
+    "vue-codemirror": "4.0.6",
+    "vue-color": "2.7.0",
+    "vue-draggable-resizable": "^2.3.0",
+    "vue-i18n": "^8.28.2",
+    "vue-json-viewer": "^2.2.22",
+    "vue-router": "^3.6.5",
+    "vue-video-player": "^5.0.2",
+    "vue-virtual-scroller": "^1.1.2",
+    "vuedraggable": "^2.24.3",
+    "vuex": "^3.6.2",
+    "xlsx": "0.18.5"
+  },
+  "devDependencies": {
+    "@ant-design/colors": "^7.0.0",
+    "@babel/core": "^7.22.20",
+    "@babel/eslint-parser": "^7.22.15",
+    "@babel/preset-env": "^7.22.20",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/eslint-config-standard": "^8.0.1",
+    "@vue/test-utils": "^1.3.6",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "compression-webpack-plugin": "^10.0.0",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "deepmerge": "^4.3.1",
+    "eslint": "^8.51.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "fast-deep-equal": "^3.1.3",
+    "ignore-loader": "^0.1.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-transform-stub": "^2.0.0",
+    "less-loader": "^6.2.0",
+    "script-loader": "^0.7.2",
+    "style-resources-loader": "^1.5.0",
+    "vue-cli-plugin-style-resources-loader": "^0.1.5",
+    "vue-jest": "^4.0.1",
+    "vue-template-compiler": "^2.7.14",
+    "webpack": "^5.88.2",
+    "webpack-theme-color-replacer": "^1.4.7",
+    "whatwg-fetch": "^3.6.19"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

package/src/base-client/components/common/HIS/HButtons/HButtons.vue

@@ -340,7 +340,7 @@ defineExpose({
         .ant-btn {
           border: none; /* 移除边框 */
           color: #FFFFFF; /* 字体颜色 */
-          background-color: #5D5C5C; /* 背景色 */
+          background-color: #0057FE; /* 背景色 */
           box-sizing: border-box; /* 盒模型 */
           left: 12px; /* 左偏移 */
           width: 280px; /* 宽度 */

package/src/base-client/components/his/HChart/HChart.vue

@@ -19,6 +19,36 @@
         </div>
       </div>
       <div class="chart-main">
+        <div v-if="showCascadeList" class="chart-cascade-panel">
+          <div v-if="sideListLabel" class="cascade-panel-label">{{ sideListLabel }}</div>
+          <div class="cascade-columns">
+            <div
+              v-for="column in cascadeColumns"
+              :key="column.field"
+              class="cascade-column"
+              :class="{ 'is-disabled': !column.options.length }"
+            >
+              <div class="cascade-column-header">
+                <span class="column-title">{{ column.label }}</span>
+                <span v-if="column.subtitle" class="column-subtitle">{{ column.subtitle }}</span>
+              </div>
+              <div class="cascade-option-list">
+                <button
+                  v-for="option in column.options"
+                  :key="option.value"
+                  type="button"
+                  class="cascade-option"
+                  :class="{ 'is-active': option.value === selectedCascadeValues[column.field] }"
+                  :disabled="!column.options.length"
+                  @click="handleCascadeChange(column.field, option.value)"
+                >
+                  <span class="option-label">{{ option.label }}</span>
+                  <span v-if="option.badge" class="option-badge">{{ option.badge }}</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
         <div v-if="showRadioFilter" class="chart-toolbar">
           <span v-if="radioFilterLabel" class="toolbar-label">{{ radioFilterLabel }}</span>
           <div class="toolbar-radio-group">
@@ -90,6 +120,7 @@ const activePointIndex = ref(-1)
 const activeBarIndex = ref(-1)
 const selectedFilterValue = ref('')
 const selectedSideListValue = ref('')
+const selectedCascadeValues = ref({})
 
 // 记录上一次的 queryParamsName，用于比较变化
 const lastQueryParamsName = ref('')
@@ -124,19 +155,85 @@ const filterQueryParams = computed(() => {
   return { [filterFieldName.value]: optionValue }
 })
 const sideListConfig = computed(() => props.config?.sideList || chartConfig.value?.sideList || null)
+const isCascadeMode = computed(() => sideListConfig.value?.mode === 'cascade')
 const sideListOptions = computed(() => {
   const options = sideListConfig.value?.options
   return Array.isArray(options) ? options : []
 })
 const sideListLabel = computed(() => sideListConfig.value?.label || sideListConfig.value?.title || '')
-const showSideList = computed(() => sideListOptions.value.length > 0)
+const cascadeLevels = computed(() => {
+  if (!isCascadeMode.value) return []
+  const levels = sideListConfig.value?.levels
+  return Array.isArray(levels) ? levels : []
+})
+const pickFirstArrayFromObject = (source) => {
+  if (!source || typeof source !== 'object') return []
+  for (const value of Object.values(source)) {
+    if (Array.isArray(value)) return value
+  }
+  return []
+}
+const normalizeOptionList = (options) => {
+  if (!options) return []
+  if (Array.isArray(options)) return options
+  return []
+}
+const cascadeColumns = computed(() => {
+  if (!isCascadeMode.value) return []
+  const columns = []
+  cascadeLevels.value.forEach((level, idx) => {
+    const field = level?.field || level?.prop || `cascade-field-${idx}`
+    const optionsSource = level?.options
+    let scopedOptions = normalizeOptionList(optionsSource)
+    if (!Array.isArray(optionsSource) && optionsSource && typeof optionsSource === 'object') {
+      if (idx === 0) {
+        const firstArray = optionsSource.default || optionsSource.list || pickFirstArrayFromObject(optionsSource)
+        scopedOptions = normalizeOptionList(firstArray)
+      } else {
+        const parentField = columns[idx - 1]?.field
+        const parentValue = parentField ? selectedCascadeValues.value[parentField] : undefined
+        const mappedOptions = (parentValue && optionsSource[parentValue]) || optionsSource.default || pickFirstArrayFromObject(optionsSource)
+        scopedOptions = normalizeOptionList(mappedOptions)
+      }
+    }
+    columns.push({
+      label: level?.label || level?.title || '',
+      subtitle: level?.subtitle || '',
+      field,
+      defaultValue: level?.defaultValue,
+      options: scopedOptions
+    })
+  })
+  return columns
+})
+const showSideList = computed(() => !isCascadeMode.value && sideListOptions.value.length > 0)
+const showCascadeList = computed(() => isCascadeMode.value && cascadeColumns.value.some(column => column.options.length))
 const sideListFieldName = computed(() => sideListConfig.value?.field || sideListConfig.value?.prop || 'category')
+const cascadeQueryParams = computed(() => {
+  if (!isCascadeMode.value) return {}
+  return cascadeColumns.value.reduce((params, column) => {
+    const field = column.field
+    if (!field) return params
+    const value = selectedCascadeValues.value[field]
+    if (value !== undefined && value !== null && value !== '') {
+      params[field] = value
+    }
+    return params
+  }, {})
+})
 const listQueryParams = computed(() => {
+  if (isCascadeMode.value) return cascadeQueryParams.value
   if (!showSideList.value) return {}
   const optionValue = selectedSideListValue.value
   if (optionValue === undefined || optionValue === null || optionValue === '') return {}
   return { [sideListFieldName.value]: optionValue }
 })
+const cascadeSelectedKeys = computed(() => {
+  if (!isCascadeMode.value) return []
+  return cascadeColumns.value
+    .map(column => column.field && selectedCascadeValues.value[column.field])
+    .filter(value => value !== undefined && value !== null && value !== '')
+})
 const resolveStaticDataset = (config) => {
   const dataset = config?.dataset
   if (Array.isArray(dataset)) return dataset
@@ -163,15 +260,37 @@ const resolveStaticDataset = (config) => {
       }
       return null
     }
-    const listKeys = [
-      selectedSideListValue.value,
-      sideListConfig.value?.defaultValue
-    ].filter(Boolean)
+    const pickNestedByKeys = (source, keys) => {
+      if (!source || typeof source !== 'object' || !keys.length) return null
+      let scoped = source
+      for (const key of keys) {
+        if (!key) continue
+        if (!scoped || typeof scoped !== 'object') return null
+        if (!(key in scoped)) return null
+        scoped = scoped[key]
+      }
+      return scoped
+    }
     let scopedDataset = dataset
-    if (showSideList.value) {
-      const listScoped = pickByKeys(dataset, listKeys, true)
-      if (Array.isArray(listScoped)) return listScoped
-      if (listScoped && typeof listScoped === 'object') scopedDataset = listScoped
+    if (isCascadeMode.value) {
+      const cascadeKeys = cascadeColumns.value
+        .map(column => column.field && selectedCascadeValues.value[column.field])
+        .filter(value => value !== undefined && value !== null && value !== '')
+      if (cascadeKeys.length) {
+        const cascadeScoped = pickNestedByKeys(dataset, cascadeKeys)
+        if (Array.isArray(cascadeScoped)) return cascadeScoped
+        if (cascadeScoped && typeof cascadeScoped === 'object') scopedDataset = cascadeScoped
+      }
+    } else {
+      const listKeys = [
+        selectedSideListValue.value,
+        sideListConfig.value?.defaultValue
+      ].filter(Boolean)
+      if (listKeys.length) {
+        const listScoped = pickByKeys(dataset, listKeys, true)
+        if (Array.isArray(listScoped)) return listScoped
+        if (listScoped && typeof listScoped === 'object') scopedDataset = listScoped
+      }
     }
     if (Array.isArray(scopedDataset)) return scopedDataset
     const filterKeys = [
@@ -233,13 +352,70 @@ const ensureListSelection = () => {
   const fallback = sideListConfig.value?.defaultValue ?? options[0]?.value ?? ''
   selectedSideListValue.value = fallback
 }
+const ensureCascadeSelections = () => {
+  if (!isCascadeMode.value) {
+    if (Object.keys(selectedCascadeValues.value).length) {
+      selectedCascadeValues.value = {}
+    }
+    return
+  }
+  const nextSelections = { ...selectedCascadeValues.value }
+  let changed = false
+  cascadeColumns.value.forEach(column => {
+    const field = column.field
+    if (!field) return
+    const options = column.options || []
+    if (!options.length) {
+      if (nextSelections[field]) {
+        delete nextSelections[field]
+        changed = true
+      }
+      return
+    }
+    const exists = options.some(option => option.value === nextSelections[field])
+    if (exists) return
+    const fallback = column.defaultValue ?? options[0]?.value ?? ''
+    if (fallback !== undefined && fallback !== null && fallback !== '') {
+      if (nextSelections[field] !== fallback) {
+        nextSelections[field] = fallback
+        changed = true
+      }
+    } else if (nextSelections[field]) {
+      delete nextSelections[field]
+      changed = true
+    }
+  })
+  if (changed) {
+    selectedCascadeValues.value = { ...nextSelections }
+  }
+}
 
 watch([radioFilterOptions, () => radioFilterConfig.value?.defaultValue], () => {
   ensureFilterSelection()
 }, { immediate: true })
-watch([sideListOptions, () => sideListConfig.value?.defaultValue], () => {
-  ensureListSelection()
-}, { immediate: true })
+watch(
+  () => ({
+    options: sideListOptions.value,
+    defaultValue: sideListConfig.value?.defaultValue,
+    cascadeMode: isCascadeMode.value
+  }),
+  () => {
+    if (isCascadeMode.value) return
+    ensureListSelection()
+  },
+  { immediate: true, deep: true }
+)
+watch(
+  () => cascadeColumns.value.map(column => ({
+    field: column.field,
+    defaultValue: column.defaultValue,
+    optionValues: column.options?.map(option => option.value)
+  })),
+  () => {
+    ensureCascadeSelections()
+  },
+  { immediate: true, deep: true }
+)
 
 const handleFilterChange = (value) => {
   if (value === selectedFilterValue.value) return
@@ -257,6 +433,26 @@ const handleListChange = (value) => {
     loadChartData(config)
   }
 }
+const handleCascadeChange = (field, value) => {
+  if (!isCascadeMode.value || !field) return
+  if (selectedCascadeValues.value[field] === value) return
+  const updatedSelections = { ...selectedCascadeValues.value, [field]: value }
+  const startIndex = cascadeColumns.value.findIndex(column => column.field === field)
+  if (startIndex >= 0) {
+    for (let idx = startIndex + 1; idx < cascadeColumns.value.length; idx++) {
+      const childField = cascadeColumns.value[idx].field
+      if (childField && updatedSelections[childField] !== undefined) {
+        delete updatedSelections[childField]
+      }
+    }
+  }
+  selectedCascadeValues.value = updatedSelections
+  ensureCascadeSelections()
+  const config = chartConfig.value || props.config
+  if (config) {
+    loadChartData(config)
+  }
+}
 
 // 常用图表预设，统一处理 dataset → ECharts option 的映射
 const presetResolvers = {
@@ -494,17 +690,18 @@ const presetResolvers = {
         type: 'pie',
         radius: '55%',
         startAngle: 180,
+        hoverOffset: 1,
         data: dataset.map(item => ({ name: item.label, value: item.value })),
         itemStyle: {
           borderColor: '#fff',
-          borderWidth: 2
+          borderWidth: 1.5
         },
         emphasis: {
           scale: true,
-          scaleSize: 6,
+          scaleSize: 1,
           itemStyle: {
-            shadowBlur: 16,
-            shadowColor: 'rgba(0, 0, 0, 0.25)'
+            shadowBlur: 12,
+            shadowColor: 'rgba(0, 0, 0, 0.22)'
           },
           label: {
             show: true,
@@ -666,6 +863,7 @@ const fetchConfigAndData = async () => {
 const loadChartData = async (config) => {
   if (!config) return
   ensureListSelection()
+  ensureCascadeSelections()
   ensureFilterSelection()
 
   try {
@@ -978,6 +1176,103 @@ onBeforeUnmount(() => {
   flex-direction: column;
 }
 
+.chart-cascade-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 4px;
+  width: 100%;
+}
+
+.cascade-panel-label {
+  font-size: 14px;
+  color: #4A5875;
+  font-weight: 600;
+}
+
+.cascade-columns {
+  display: flex;
+  gap: 16px;
+  width: 100%;
+  flex-wrap: wrap;
+  overflow-x: auto;
+  padding-bottom: 4px;
+}
+
+.cascade-column {
+  flex: 1 1 180px;
+  min-width: 180px;
+  border-right: 1px solid #ECF0F7;
+  padding-right: 12px;
+}
+
+.cascade-column:last-child {
+  border-right: none;
+  padding-right: 0;
+}
+
+.cascade-column.is-disabled {
+  opacity: 0.6;
+}
+
+.cascade-column-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 13px;
+  color: #5C6C8C;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.column-subtitle {
+  font-size: 12px;
+  color: #9AA7C5;
+  font-weight: 400;
+}
+
+.cascade-option-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cascade-option {
+  width: 100%;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  padding: 8px 10px;
+  border-radius: 8px;
+  font-size: 13px;
+  color: #4A5875;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cascade-option .option-label {
+  flex: 1;
+}
+
+.cascade-option .option-badge {
+  font-size: 12px;
+  color: #9AA7C5;
+}
+
+.cascade-option.is-active {
+  background: rgba(31, 91, 255, 0.08);
+  color: #1F5BFF;
+  font-weight: 600;
+}
+
+.cascade-option:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 .chart-toolbar {
   display: flex;
   align-items: center;