@ruixinkeji/prism-ui 1.0.0

package/components/PrismCityPicker/PrismCityPicker.vue

@@ -0,0 +1,1008 @@
+<template>
+  <view class="prism-city-picker" :class="{ 'dark-mode': appStore.isDarkMode }">
+    <!-- 触发器 -->
+    <view class="picker-trigger" @click="openPicker">
+      <slot>
+        <view class="prism-select-box">
+          <text :class="{ 'placeholder': !displayValue, 'select-text': displayValue }">
+            {{ displayValue || placeholder }}
+          </text>
+          <text class="select-arrow fa fa-map-marker-alt"></text>
+        </view>
+      </slot>
+    </view>
+
+    <!-- 选择器弹窗 -->
+    <view class="picker-popup" v-if="showPicker" @click="closePicker">
+      <view class="picker-content" @click.stop>
+        <!-- 头部 -->
+        <view class="picker-header">
+          <view class="picker-cancel" @click="closePicker">取消</view>
+          <view class="picker-title">{{ title }}</view>
+          <view class="picker-confirm" @click="confirmSelect">确定</view>
+        </view>
+
+        <!-- 模式1: 滚轮选择（类似日期选择器） -->
+        <view class="picker-body" v-if="mode === 'picker'">
+          <picker-view
+            class="picker-view"
+            :value="pickerIndex"
+            @change="onPickerChange"
+            indicator-class="picker-indicator"
+            :indicator-style="indicatorStyle"
+            :style="{ height: pickerHeight }"
+          >
+            <!-- 省份列 -->
+            <picker-view-column>
+              <view
+                v-for="(item, idx) in provinceList"
+                :key="item.code"
+                class="picker-item"
+                :style="{
+                  height: itemHeight + 'px',
+                  lineHeight: itemHeight + 'px',
+                  color: idx === pickerIndex[0] ? 'var(--prism-primary-color, #3478F6)' : 'var(--prism-text-secondary, #86909C)',
+                  fontWeight: idx === pickerIndex[0] ? '600' : '400'
+                }"
+              >
+                {{ item.name }}
+              </view>
+            </picker-view-column>
+            <!-- 城市列 -->
+            <picker-view-column>
+              <view
+                v-for="(item, idx) in cityList"
+                :key="item.code"
+                class="picker-item"
+                :style="{
+                  height: itemHeight + 'px',
+                  lineHeight: itemHeight + 'px',
+                  color: idx === pickerIndex[1] ? 'var(--prism-primary-color, #3478F6)' : 'var(--prism-text-secondary, #86909C)',
+                  fontWeight: idx === pickerIndex[1] ? '600' : '400'
+                }"
+              >
+                {{ item.name }}
+              </view>
+            </picker-view-column>
+            <!-- 区县列 -->
+            <picker-view-column v-if="level >= 3">
+              <view
+                v-for="(item, idx) in districtList"
+                :key="item.code"
+                class="picker-item"
+                :style="{
+                  height: itemHeight + 'px',
+                  lineHeight: itemHeight + 'px',
+                  color: idx === pickerIndex[2] ? 'var(--prism-primary-color, #3478F6)' : 'var(--prism-text-secondary, #86909C)',
+                  fontWeight: idx === pickerIndex[2] ? '600' : '400'
+                }"
+              >
+                {{ item.name }}
+              </view>
+            </picker-view-column>
+          </picker-view>
+        </view>
+
+        <!-- 模式2: 多层级列表选择 -->
+        <view class="cascade-body" v-else-if="mode === 'cascade'">
+          <!-- 热门城市 -->
+          <view class="hot-cities" v-if="showHotCities && currentLevel === 0 && !tempSelected.length">
+            <view class="hot-cities-title">
+              <text class="fa fa-fire"></text>
+              <text>热门城市</text>
+            </view>
+            <view class="hot-cities-list">
+              <view
+                v-for="city in hotCities"
+                :key="city.code"
+                class="hot-city-item"
+                @click="selectHotCity(city)"
+              >
+                {{ city.name }}
+              </view>
+            </view>
+            <view class="hot-cities-divider">
+              <text>全部城市</text>
+            </view>
+          </view>
+
+          <!-- 已选择的面包屑 -->
+          <view class="cascade-breadcrumb" v-if="tempSelected.length">
+            <view
+              v-for="(item, index) in tempSelected"
+              :key="index"
+              class="breadcrumb-item"
+              @click="backToLevel(index)"
+            >
+              <text>{{ item.name }}</text>
+              <text class="fa fa-chevron-right" v-if="index < tempSelected.length - 1"></text>
+            </view>
+            <view class="breadcrumb-clear" @click="clearSelection">
+              <text class="fa fa-times"></text>
+            </view>
+          </view>
+
+          <!-- 当前层级列表 -->
+          <scroll-view
+            class="cascade-list"
+            scroll-y
+            :scroll-with-animation="true"
+            @touchmove.stop
+          >
+            <view
+              v-for="item in currentLevelList"
+              :key="item.code"
+              class="cascade-item"
+              :class="{ 'selected': isItemSelected(item) }"
+              hover-class="none"
+              @click="selectItem(item)"
+            >
+              <view class="item-content">
+                <text class="item-name">{{ item.name }}</text>
+                <text class="item-code" v-if="showCode">{{ item.code }}</text>
+              </view>
+              <text class="fa fa-chevron-right item-arrow" v-if="hasChildren(item)"></text>
+              <text class="fa fa-check item-check" v-else-if="isItemSelected(item)"></text>
+            </view>
+            <view class="cascade-empty" v-if="!currentLevelList.length">
+              <text class="fa fa-inbox"></text>
+              <text>暂无数据</text>
+            </view>
+          </scroll-view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import { useAppStore } from '@/store/app';
+import { rpx2px } from '@/utils/system';
+
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  // 选择模式：picker（滚轮）或 cascade（多层级列表）
+  mode: {
+    type: String,
+    default: 'picker',
+    validator: (val) => ['picker', 'cascade'].includes(val)
+  },
+  // 选择层级：2（省市）或 3（省市区）
+  level: {
+    type: Number,
+    default: 3,
+    validator: (val) => [2, 3].includes(val)
+  },
+  // 城市数据
+  data: {
+    type: Array,
+    default: () => []
+  },
+  placeholder: {
+    type: String,
+    default: '请选择城市'
+  },
+  title: {
+    type: String,
+    default: '选择城市'
+  },
+  // 是否显示编码
+  showCode: {
+    type: Boolean,
+    default: false
+  },
+  // 分隔符
+  separator: {
+    type: String,
+    default: '/'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示热门城市
+  showHotCities: {
+    type: Boolean,
+    default: false
+  },
+  // 热门城市列表
+  hotCities: {
+    type: Array,
+    default: () => [
+      { name: '北京', code: '110000' },
+      { name: '上海', code: '310000' },
+      { name: '广州', code: '440100' },
+      { name: '深圳', code: '440300' },
+      { name: '杭州', code: '330100' },
+      { name: '成都', code: '510100' },
+      { name: '武汉', code: '420100' },
+      { name: '南京', code: '320100' }
+    ]
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'change', 'confirm', 'cancel']);
+
+const appStore = useAppStore();
+const showPicker = ref(false);
+const pickerIndex = ref([0, 0, 0]);
+const tempSelected = ref([]);
+const currentLevel = ref(0);
+
+// picker 配置 - 使用 rpx2px 换算，避免精度问题
+const itemHeight = rpx2px(96);
+const pickerHeight = `${itemHeight * 5}px`;
+const indicatorStyle = `height: ${itemHeight}px`;
+
+// 使用内置数据或外部数据
+const regionData = computed(() => {
+  if (props.data && props.data.length) {
+    return props.data;
+  }
+  return defaultRegionData.value;
+});
+
+// 默认地区数据（示例数据，实际使用时应传入完整数据）
+const defaultRegionData = ref([
+  {
+    code: '110000',
+    name: '北京市',
+    children: [
+      {
+        code: '110100',
+        name: '北京市',
+        children: [
+          { code: '110101', name: '东城区' },
+          { code: '110102', name: '西城区' },
+          { code: '110105', name: '朝阳区' },
+          { code: '110106', name: '丰台区' },
+          { code: '110107', name: '石景山区' },
+          { code: '110108', name: '海淀区' },
+          { code: '110109', name: '门头沟区' },
+          { code: '110111', name: '房山区' },
+          { code: '110112', name: '通州区' },
+          { code: '110113', name: '顺义区' },
+          { code: '110114', name: '昌平区' },
+          { code: '110115', name: '大兴区' },
+          { code: '110116', name: '怀柔区' },
+          { code: '110117', name: '平谷区' },
+          { code: '110118', name: '密云区' },
+          { code: '110119', name: '延庆区' }
+        ]
+      }
+    ]
+  },
+  {
+    code: '120000',
+    name: '天津市',
+    children: [
+      {
+        code: '120100',
+        name: '天津市',
+        children: [
+          { code: '120101', name: '和平区' },
+          { code: '120102', name: '河东区' },
+          { code: '120103', name: '河西区' },
+          { code: '120104', name: '南开区' },
+          { code: '120105', name: '河北区' },
+          { code: '120106', name: '红桥区' },
+          { code: '120110', name: '东丽区' },
+          { code: '120111', name: '西青区' },
+          { code: '120112', name: '津南区' },
+          { code: '120113', name: '北辰区' },
+          { code: '120114', name: '武清区' },
+          { code: '120115', name: '宝坻区' },
+          { code: '120116', name: '滨海新区' },
+          { code: '120117', name: '宁河区' },
+          { code: '120118', name: '静海区' },
+          { code: '120119', name: '蓟州区' }
+        ]
+      }
+    ]
+  },
+  {
+    code: '310000',
+    name: '上海市',
+    children: [
+      {
+        code: '310100',
+        name: '上海市',
+        children: [
+          { code: '310101', name: '黄浦区' },
+          { code: '310104', name: '徐汇区' },
+          { code: '310105', name: '长宁区' },
+          { code: '310106', name: '静安区' },
+          { code: '310107', name: '普陀区' },
+          { code: '310109', name: '虹口区' },
+          { code: '310110', name: '杨浦区' },
+          { code: '310112', name: '闵行区' },
+          { code: '310113', name: '宝山区' },
+          { code: '310114', name: '嘉定区' },
+          { code: '310115', name: '浦东新区' },
+          { code: '310116', name: '金山区' },
+          { code: '310117', name: '松江区' },
+          { code: '310118', name: '青浦区' },
+          { code: '310120', name: '奉贤区' },
+          { code: '310151', name: '崇明区' }
+        ]
+      }
+    ]
+  },
+  {
+    code: '440000',
+    name: '广东省',
+    children: [
+      {
+        code: '440100',
+        name: '广州市',
+        children: [
+          { code: '440103', name: '荔湾区' },
+          { code: '440104', name: '越秀区' },
+          { code: '440105', name: '海珠区' },
+          { code: '440106', name: '天河区' },
+          { code: '440111', name: '白云区' },
+          { code: '440112', name: '黄埔区' },
+          { code: '440113', name: '番禺区' },
+          { code: '440114', name: '花都区' },
+          { code: '440115', name: '南沙区' },
+          { code: '440117', name: '从化区' },
+          { code: '440118', name: '增城区' }
+        ]
+      },
+      {
+        code: '440300',
+        name: '深圳市',
+        children: [
+          { code: '440303', name: '罗湖区' },
+          { code: '440304', name: '福田区' },
+          { code: '440305', name: '南山区' },
+          { code: '440306', name: '宝安区' },
+          { code: '440307', name: '龙岗区' },
+          { code: '440308', name: '盐田区' },
+          { code: '440309', name: '龙华区' },
+          { code: '440310', name: '坪山区' },
+          { code: '440311', name: '光明区' }
+        ]
+      },
+      {
+        code: '440400',
+        name: '珠海市',
+        children: [
+          { code: '440402', name: '香洲区' },
+          { code: '440403', name: '斗门区' },
+          { code: '440404', name: '金湾区' }
+        ]
+      }
+    ]
+  },
+  {
+    code: '330000',
+    name: '浙江省',
+    children: [
+      {
+        code: '330100',
+        name: '杭州市',
+        children: [
+          { code: '330102', name: '上城区' },
+          { code: '330105', name: '拱墅区' },
+          { code: '330106', name: '西湖区' },
+          { code: '330108', name: '滨江区' },
+          { code: '330109', name: '萧山区' },
+          { code: '330110', name: '余杭区' },
+          { code: '330111', name: '富阳区' },
+          { code: '330112', name: '临安区' },
+          { code: '330113', name: '临平区' },
+          { code: '330114', name: '钱塘区' }
+        ]
+      },
+      {
+        code: '330200',
+        name: '宁波市',
+        children: [
+          { code: '330203', name: '海曙区' },
+          { code: '330205', name: '江北区' },
+          { code: '330206', name: '北仑区' },
+          { code: '330211', name: '镇海区' },
+          { code: '330212', name: '鄞州区' },
+          { code: '330213', name: '奉化区' }
+        ]
+      }
+    ]
+  },
+  {
+    code: '320000',
+    name: '江苏省',
+    children: [
+      {
+        code: '320100',
+        name: '南京市',
+        children: [
+          { code: '320102', name: '玄武区' },
+          { code: '320104', name: '秦淮区' },
+          { code: '320105', name: '建邺区' },
+          { code: '320106', name: '鼓楼区' },
+          { code: '320111', name: '浦口区' },
+          { code: '320113', name: '栖霞区' },
+          { code: '320114', name: '雨花台区' },
+          { code: '320115', name: '江宁区' },
+          { code: '320116', name: '六合区' },
+          { code: '320117', name: '溧水区' },
+          { code: '320118', name: '高淳区' }
+        ]
+      },
+      {
+        code: '320500',
+        name: '苏州市',
+        children: [
+          { code: '320505', name: '虎丘区' },
+          { code: '320506', name: '吴中区' },
+          { code: '320507', name: '相城区' },
+          { code: '320508', name: '姑苏区' },
+          { code: '320509', name: '吴江区' }
+        ]
+      }
+    ]
+  }
+]);
+
+// 省份列表
+const provinceList = computed(() => regionData.value || []);
+
+// 城市列表
+const cityList = computed(() => {
+  const province = provinceList.value[pickerIndex.value[0]];
+  return province?.children || [];
+});
+
+// 区县列表
+const districtList = computed(() => {
+  const city = cityList.value[pickerIndex.value[1]];
+  return city?.children || [];
+});
+
+// 当前层级列表（cascade模式）
+const currentLevelList = computed(() => {
+  if (currentLevel.value === 0) {
+    return provinceList.value;
+  } else if (currentLevel.value === 1) {
+    return tempSelected.value[0]?.children || [];
+  } else if (currentLevel.value === 2) {
+    return tempSelected.value[1]?.children || [];
+  }
+  return [];
+});
+
+// 显示值
+const displayValue = computed(() => {
+  if (!props.modelValue || !props.modelValue.length) return '';
+  return props.modelValue.map(item => item.name || item).join(props.separator);
+});
+
+// 打开选择器
+function openPicker() {
+  if (props.disabled) return;
+
+  // 先初始化数据，再显示弹窗
+  if (props.mode === 'cascade') {
+    tempSelected.value = [...(props.modelValue || [])];
+    const selectedLen = tempSelected.value.length;
+    currentLevel.value = selectedLen >= props.level ? props.level - 1 : selectedLen;
+  } else {
+    initPickerIndex();
+  }
+  showPicker.value = true;
+}
+
+// 初始化picker索引
+function initPickerIndex() {
+  if (!props.modelValue || !props.modelValue.length) {
+    pickerIndex.value = [0, 0, 0];
+    return;
+  }
+
+  const [province, city, district] = props.modelValue;
+
+  // 查找省份索引
+  const provinceIdx = provinceList.value.findIndex(
+    p => p.code === province?.code || p.name === province?.name
+  );
+  pickerIndex.value[0] = provinceIdx >= 0 ? provinceIdx : 0;
+
+  // 查找城市索引
+  const cities = provinceList.value[pickerIndex.value[0]]?.children || [];
+  const cityIdx = cities.findIndex(
+    c => c.code === city?.code || c.name === city?.name
+  );
+  pickerIndex.value[1] = cityIdx >= 0 ? cityIdx : 0;
+
+  // 查找区县索引
+  if (props.level >= 3) {
+    const districts = cities[pickerIndex.value[1]]?.children || [];
+    const districtIdx = districts.findIndex(
+      d => d.code === district?.code || d.name === district?.name
+    );
+    pickerIndex.value[2] = districtIdx >= 0 ? districtIdx : 0;
+  }
+}
+
+// 关闭选择器
+function closePicker() {
+  showPicker.value = false;
+  emit('cancel');
+}
+
+// picker变化
+function onPickerChange(e) {
+  const values = e.detail.value;
+
+  // 如果省份变化，重置城市和区县索引
+  if (values[0] !== pickerIndex.value[0]) {
+    values[1] = 0;
+    values[2] = 0;
+  } else if (values[1] !== pickerIndex.value[1]) {
+    // 如果城市变化，重置区县索引
+    values[2] = 0;
+  }
+
+  pickerIndex.value = values;
+}
+
+// 选择热门城市
+function selectHotCity(city) {
+  const result = [{ code: city.code, name: city.name }];
+  emit('update:modelValue', result);
+  emit('change', result);
+  emit('confirm', result);
+  showPicker.value = false;
+}
+
+// 确认选择
+function confirmSelect() {
+  let result = [];
+
+  if (props.mode === 'picker') {
+    const province = provinceList.value[pickerIndex.value[0]];
+    const city = cityList.value[pickerIndex.value[1]];
+
+    if (province) {
+      result.push({ code: province.code, name: province.name });
+    }
+    if (city) {
+      result.push({ code: city.code, name: city.name });
+    }
+    if (props.level >= 3) {
+      const district = districtList.value[pickerIndex.value[2]];
+      if (district) {
+        result.push({ code: district.code, name: district.name });
+      }
+    }
+  } else {
+    result = [...tempSelected.value];
+  }
+
+  emit('update:modelValue', result);
+  emit('change', result);
+  emit('confirm', result);
+  showPicker.value = false;
+}
+
+// cascade模式 - 选择项目
+function selectItem(item) {
+  if (hasChildren(item) && currentLevel.value < props.level - 1) {
+    // 有子级且未到最后一级，进入下一级
+    tempSelected.value = tempSelected.value.slice(0, currentLevel.value);
+    tempSelected.value.push({ code: item.code, name: item.name, children: item.children });
+    currentLevel.value++;
+  } else {
+    // 最后一级，选中并自动确认
+    tempSelected.value = tempSelected.value.slice(0, currentLevel.value);
+    tempSelected.value.push({ code: item.code, name: item.name });
+    confirmSelect();
+  }
+}
+
+// 判断是否有子级
+function hasChildren(item) {
+  return item.children && item.children.length > 0;
+}
+
+// 判断是否选中
+function isItemSelected(item) {
+  const current = tempSelected.value[currentLevel.value];
+  return current && (current.code === item.code || current.name === item.name);
+}
+
+// 返回到某一级
+function backToLevel(index) {
+  currentLevel.value = index;
+  tempSelected.value = tempSelected.value.slice(0, index);
+}
+
+// 清除选择
+function clearSelection() {
+  tempSelected.value = [];
+  currentLevel.value = 0;
+}
+
+// 监听modelValue变化
+watch(() => props.modelValue, (val) => {
+  if (props.mode === 'cascade' && showPicker.value) {
+    tempSelected.value = [...(val || [])];
+  }
+}, { deep: true });
+</script>
+
+<style lang="scss">
+.prism-city-picker {
+  .picker-trigger {
+    cursor: pointer;
+  }
+
+  .picker-popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--prism-mask-bg, rgba(0, 0, 0, 0.5));
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    z-index: 9999;
+  }
+
+  .picker-content {
+    width: 100%;
+    background: var(--prism-bg-color-card, #FFFFFF);
+    border-radius: 24rpx 24rpx 0 0;
+    max-height: 70vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .picker-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 24rpx 32rpx;
+    border-bottom: 1rpx solid var(--prism-border-color-light, #E5E6EB);
+  }
+
+  .picker-cancel {
+    font-size: 30rpx;
+    color: var(--prism-text-secondary, #86909C);
+    padding: 8rpx 16rpx;
+  }
+
+  .picker-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: var(--prism-text-primary, #1D2129);
+  }
+
+  .picker-confirm {
+    font-size: 30rpx;
+    color: var(--prism-primary-color, #3478F6);
+    padding: 8rpx 16rpx;
+    font-weight: 500;
+  }
+
+  .picker-body {
+    // height 通过 JS 动态设置
+    padding-bottom: env(safe-area-inset-bottom);
+    box-sizing: content-box;
+    position: relative;
+  }
+
+  .picker-view {
+    // height 通过 JS 动态设置
+  }
+
+  .picker-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 32rpx;
+    // height 和 lineHeight 通过 JS 动态设置
+    font-weight: 500;
+  }
+
+  // picker指示器样式 - 隐藏原有背景
+  :deep(.picker-indicator) {
+    // height 通过 indicatorStyle 动态设置
+    background: transparent !important;
+    background-color: transparent !important;
+    border: none !important;
+    border-width: 0 !important;
+    border-style: none !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+    z-index: 0 !important;
+  }
+
+  // 整体激活项背景 - 横跨所有列的圆角气泡（浅色模式）- 暂时禁用
+  // .picker-body::before {
+  //   content: '';
+  //   position: absolute;
+  //   left: 16rpx;
+  //   right: 16rpx;
+  //   top: 50%;
+  //   transform: translateY(-50%);
+  //   height: 96rpx;
+  //   background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+  //   border-radius: 12rpx;
+  //   z-index: 0;
+  //   pointer-events: none;
+  // }
+
+  // 确保文字在背景色上方
+  .picker-item {
+    position: relative;
+    z-index: 2;
+  }
+
+  // 浅色模式遮罩层 - 放在最下层
+  :deep(.uni-picker-view-mask) {
+    z-index: 1 !important;
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)),
+                      linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) !important;
+  }
+
+  // 覆盖 uni-app 默认边框和背景
+  :deep(.uni-picker-view-indicator) {
+    background: transparent !important;
+    background-color: transparent !important;
+    border: none !important;
+    border-top: none !important;
+    border-bottom: none !important;
+    border-color: transparent !important;
+  }
+
+  // 多层级选择
+  .cascade-body {
+    display: flex;
+    flex-direction: column;
+    height: 500rpx;
+  }
+
+  // 热门城市
+  .hot-cities {
+    padding: 24rpx 32rpx;
+    background: var(--prism-bg-color-card, #FFFFFF);
+  }
+
+  .hot-cities-title {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    font-size: 26rpx;
+    color: var(--prism-text-secondary, #86909C);
+    margin-bottom: 20rpx;
+
+    .fa-fire {
+      color: #FF6B00;
+    }
+  }
+
+  .hot-cities-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16rpx;
+  }
+
+  .hot-city-item {
+    padding: 16rpx 28rpx;
+    background: var(--prism-bg-color-container, #F7F8FA);
+    border-radius: 8rpx;
+    font-size: 28rpx;
+    color: var(--prism-text-primary, #1D2129);
+
+    &:active {
+      background: var(--prism-primary-light, rgba(52, 120, 246, 0.08));
+      color: var(--prism-primary-color, #3478F6);
+    }
+  }
+
+  .hot-cities-divider {
+    display: flex;
+    align-items: center;
+    margin-top: 24rpx;
+    padding-top: 20rpx;
+    border-top: 1rpx solid var(--prism-border-color-light, #E5E6EB);
+    font-size: 26rpx;
+    color: var(--prism-text-secondary, #86909C);
+  }
+
+  .cascade-breadcrumb {
+    display: flex;
+    align-items: center;
+    padding: 20rpx 32rpx;
+    background: var(--prism-bg-color-container, #F7F8FA);
+    flex-wrap: wrap;
+    gap: 8rpx;
+  }
+
+  .breadcrumb-item {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+
+    text:first-child {
+      font-size: 28rpx;
+      color: var(--prism-primary-color, #3478F6);
+    }
+
+    .fa {
+      font-size: 20rpx;
+      color: var(--prism-text-placeholder, #C9CDD4);
+    }
+  }
+
+  .breadcrumb-clear {
+    margin-left: auto;
+    padding: 8rpx;
+
+    .fa {
+      font-size: 28rpx;
+      color: var(--prism-text-secondary, #86909C);
+    }
+  }
+
+  .cascade-list {
+    flex: 1;
+    height: 400rpx;
+  }
+
+  .cascade-item {
+    display: flex;
+    align-items: center;
+    padding: 28rpx 32rpx;
+    border-bottom: 1rpx solid var(--prism-border-color-light, #E5E6EB);
+
+    &.selected {
+      .item-name {
+        color: var(--prism-primary-color, #3478F6);
+        font-weight: 500;
+      }
+    }
+  }
+
+  .item-content {
+    flex: 1;
+  }
+
+  .item-name {
+    font-size: 30rpx;
+    color: var(--prism-text-primary, #1D2129);
+  }
+
+  .item-code {
+    font-size: 24rpx;
+    color: var(--prism-text-secondary, #86909C);
+    margin-top: 8rpx;
+  }
+
+  .item-arrow {
+    font-size: 24rpx;
+    color: var(--prism-text-placeholder, #C9CDD4);
+  }
+
+  .item-check {
+    font-size: 28rpx;
+    color: var(--prism-primary-color, #3478F6);
+  }
+
+  .cascade-empty {
+    padding: 80rpx 32rpx;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16rpx;
+
+    .fa {
+      font-size: 64rpx;
+      color: var(--prism-text-placeholder, #C9CDD4);
+    }
+
+    text:last-child {
+      font-size: 28rpx;
+      color: var(--prism-text-secondary, #86909C);
+    }
+  }
+}
+
+// 深色模式
+.dark-mode.prism-city-picker {
+  .picker-content {
+    background: var(--prism-bg-color-card, #1A1A1A);
+  }
+
+  // picker 滚轮模式
+  .picker-item {
+    color: var(--prism-text-primary, #E5E6EB);
+  }
+
+  .picker-body :deep(.picker-indicator),
+  :deep(.picker-indicator) {
+    background: transparent !important;
+    background-color: transparent !important;
+    border: none !important;
+    border-width: 0 !important;
+    border-style: none !important;
+    border-color: transparent !important;
+  }
+
+  // 整体激活项背景 - 横跨所有列的圆角气泡 - 暂时禁用
+  // .picker-body::before {
+  //   content: '';
+  //   position: absolute;
+  //   left: 16rpx;
+  //   right: 16rpx;
+  //   top: 50%;
+  //   transform: translateY(-50%);
+  //   height: 96rpx;
+  //   background: rgba(255, 255, 255, 0.08);
+  //   border-radius: 12rpx;
+  //   z-index: 0;
+  //   pointer-events: none;
+  // }
+
+  :deep(.uni-picker-view-indicator) {
+    background: transparent !important;
+    border: none !important;
+    border-width: 0 !important;
+    border-color: transparent !important;
+  }
+
+  :deep(.uni-picker-view-indicator)::before,
+  :deep(.uni-picker-view-indicator)::after {
+    display: none !important;
+    border: none !important;
+  }
+
+  :deep(picker-view-column)::before,
+  :deep(picker-view-column)::after {
+    display: none !important;
+  }
+
+  // 修复 picker-view 上下遮罩渐变色
+  :deep(.uni-picker-view-mask) {
+    background-image: linear-gradient(180deg, rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 0.6)),
+                      linear-gradient(0deg, rgba(26, 26, 26, 0.95), rgba(26, 26, 26, 0.6)) !important;
+  }
+
+  // cascade 列表模式
+  .hot-cities {
+    background: var(--prism-bg-color-card, #1A1A1A);
+  }
+
+  .hot-city-item {
+    background: var(--prism-bg-color-container, #2A2A2A);
+    color: var(--prism-text-primary, #E5E6EB);
+  }
+
+  .hot-cities-divider {
+    border-top-color: var(--prism-border-color-base, #3A3A3A);
+  }
+
+  .cascade-breadcrumb {
+    background: var(--prism-bg-color-container, #2A2A2A);
+  }
+
+  .cascade-item {
+    &:active {
+      background: var(--prism-bg-color-container, #2A2A2A);
+    }
+
+    &.selected {
+      .item-name {
+        color: var(--prism-primary-color, #3478F6);
+      }
+    }
+  }
+}
+</style>