widget.qw 1.0.83 → 1.0.85

package/src/components/subdepartment_selector.vue

@@ -1,481 +1,481 @@
-<template>
-    <div class="department-selector">
-        <van-field v-if="!isGone" :model-value="selectedDepartmentPath" readonly clickable :label="props.label"
-            :placeholder="props.placeholder" @click="onShow" :right-icon="isReadonly ? '' : 'arrow'"
-            :required="isRequired" :rules="props.rules" type="textarea" autosize="true" rows="1"/>
-
-        <van-popup v-model:show="showPicker" position="bottom" class="department-popup">
-            <div class="popup-container">
-                <div class="picker-header">
-                    <van-button v-if="currentLevel > 0" @click="goBack" icon="arrow-left" size="small"
-                        class="back-button" />
-                    <div class="current-path">{{ currentPath }}</div>
-                    <div class="action-buttons">
-                        <van-button size="small" @click="handleCancel" class="cancel-btn">
-                            取消
-                        </van-button>
-                        <van-button type="primary" size="small" @click="confirmSelection"
-                            :disabled="!tempSelectedDepartment" class="confirm-btn">
-                            确定
-                        </van-button>
-                    </div>
-                </div>
-
-                <van-field left-icon="search" v-model.trim="searchKeyword" clearable placeholder="请输入部门名称搜索"
-                    class="search-field" />
-                <div class="scroll-container">
-                    <van-cell-group>
-                        <van-cell v-for="(item, index) in filteredDepartments" :key="index" clickable
-                            @click="handleCellClick(item)">
-                            <template #title>
-                                <div class="cell-content">
-                                    <div class="circle-selector"
-                                        :class="{ 'selected': tempSelectedDepartment?.id === item.id }"
-                                        @click.stop="toggleSelection(item)">
-                                        <van-icon v-if="tempSelectedDepartment?.id === item.id" name="success" />
-                                    </div>
-                                    <span class="name">{{ item.fullPath || item.name }}</span>
-                                </div>
-                            </template>
-                            <template #right-icon>
-                                <van-icon v-if="item.subDepartments?.length" name="arrow" />
-                            </template>
-                        </van-cell>
-                    </van-cell-group>
-                </div>
-            </div>
-        </van-popup>
-    </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, watch } from 'vue'
-import util from '../util'
-
-const props = defineProps({
-    modelValue: [String, Number],
-    label: {
-        type: String,
-        default: '选择部门'
-    },
-    placeholder: {
-        type: String,
-        default: '请选择部门'
-    },
-    required: {
-        type: Boolean,
-        default: true
-    },
-    readonly: {
-        type: Boolean,
-        default: false
-    },
-    rules: {
-        type: Array,
-        default: () => []
-    },
-    auth: {
-        type: String,
-        default: ''
-    },
-    // 查询多少层组织机构
-    level: {
-        type: Number,
-        // 默认查所有
-        default: 999
-    },
-    // 二级部门取值范围字典id
-    // 取dictionary库.dict的配置id
-    deptRangeId: {
-        type: String,
-        default: ''
-    }
-})
-
-const emit = defineEmits(['update:modelValue', 'select'])
-const { isRequired, isGone, isDisabled, isReadonly } = util.props2auth(props)
-
-// 部门数据相关状态
-const departmentTree = ref([])
-const currentDepartments = ref([])
-const selectedDepartmentPath = ref('')
-const selectionPath = ref([])
-const showPicker = ref(false)
-const tempSelectedDepartment = ref(null)
-
-// 在脚本部分添加搜索相关逻辑（约第60行）
-// 添加搜索关键词响应式变量
-const searchKeyword = ref('')
-
-// 计算属性
-const currentPath = computed(() => {
-    return selectionPath.value
-        .filter(d => d.id !== '1') // 过滤一级部门
-        .map(d => d.name)
-        .join(' / ') || '请选择部门'
-})
-
-const currentLevel = computed(() => selectionPath.value.length)
-
-// 部门数据缓存
-const departmentCache = {
-    data: ref([]),
-    loading: ref(false),
-    error: ref(null)
-}
-
-// 修改过滤后的部门列表计算属性
-// 修改过滤逻辑（约第80行）
-// 修改搜索结果的路径生成逻辑（约第89行）
-const filteredDepartments = computed(() => {
-    if (!searchKeyword.value) return currentDepartments.value;
-
-    // 递归搜索整个部门树
-    const searchTree = (depts, keyword, path = []) => {
-        return depts.flatMap(dept => {
-            const currentPath = [...path, dept];
-            const matches = [];
-
-            if (dept.name.toLowerCase().includes(keyword.toLowerCase())) {
-                matches.push({
-                    ...dept,
-                    // 过滤掉一级部门（假设一级部门id为1）
-                    fullPath: currentPath
-                        .filter(d => d.id !== '1')
-                        .map(d => d.name)
-                        .join(' / ')
-                });
-            }
-
-            if (dept.subDepartments?.length) {
-                matches.push(...searchTree(dept.subDepartments, keyword, currentPath));
-            }
-
-            return matches;
-        });
-    };
-
-    return searchTree(departmentTree.value, searchKeyword.value);
-});
-
-const onShow = () => {
-    if (isDisabled.value)
-        return
-
-    showPicker.value = true
-}
-
-// 修改单元格点击处理
-const handleCellClick = (department) => {
-    // 如果是叶子节点直接选中
-    if (!department.subDepartments?.length) {
-        toggleSelection(department)
-        return
-    }
-
-    // 非叶子节点才展开层级
-    selectionPath.value.push(department)
-    currentDepartments.value = department.subDepartments
-    tempSelectedDepartment.value = null
-}
-
-// 监听搜索关键词变化
-watch(searchKeyword, (newVal) => {
-    if (newVal) {
-        // 可根据需要添加搜索建议逻辑
-    }
-})
-
-// 在工具函数部分新增以下方法
-const findDepartmentById = (departments, targetId) => {
-    for (const dept of departments) {
-        if (dept.id === targetId) return dept
-        if (dept.subDepartments?.length) {
-            const found = findDepartmentById(dept.subDepartments, targetId)
-            if (found) return found
-        }
-    }
-    return null
-}
-
-// 修改路径构建方法
-const buildDepartmentPath = (department) => {
-    const path = []
-    let current = department.parent
-    while (current) {
-        if (current.id !== '1') {  // 不插入一级部门
-            path.unshift(current.name)
-        }
-        current = current.parent
-    }
-    // 添加当前选中部门（最后一级）
-    path.push(department.name)
-    return path.join(' / ')
-}
-
-// 修改部门数据加载方法
-const loadDepartments = async () => {
-    try {
-        if (departmentCache.data.value.length > 0) return
-
-        departmentCache.loading.value = true
-        const response = await util.get_subdepartments({ level: props.level })
-        console.log('-------subdepartment---------', response)
-        if (response.code === 200) {
-            // 添加parent引用
-            const addParentRef = (depts, parent) => {
-                depts.forEach(d => {
-                    d.parent = parent
-                    if (d.subDepartments) addParentRef(d.subDepartments, d)
-                })
-            }
-
-            // 取配置的二级部门取值范围
-            let level2DeptIds = []
-            //只显示指定范围内的二级部门
-            if (props.deptRangeId) {
-                let res = await util.dictionary_dict({ id: props.deptRangeId })
-                if (res.data.parseValue && res.data.parseValue.length > 0) {
-                    level2DeptIds = res.data.parseValue
-                }
-            }
-
-            // 只保留指定二级部门列表
-            if (props.deptRangeId) {
-                if (level2DeptIds && level2DeptIds.length > 0) {
-                    response.data.subDepartments = response.data.subDepartments.filter(item => {
-                        return level2DeptIds.includes(item.id)
-                    })
-                }
-            }
-
-            departmentCache.data.value = [response.data]
-            addParentRef(departmentCache.data.value, null)
-            departmentTree.value = departmentCache.data.value
-            currentDepartments.value = response.data.subDepartments || []
-            // 存储到sessionStorage中
-            //   sessionStorage.setItem('departmentTree', JSON.stringify(departmentTree.value))
-            //   sessionStorage.setItem('currentDepartments', JSON.stringify(currentDepartments.value))
-        }
-    } catch (error) {
-        console.error('加载部门数据失败:', error)
-    } finally {
-        departmentCache.loading.value = false
-    }
-}
-
-// const handleCellClick = (department) => {
-//     if (department.subDepartments?.length) {
-//         selectionPath.value.push(department)
-//         currentDepartments.value = department.subDepartments
-//         tempSelectedDepartment.value = null
-//     } else {
-//         toggleSelection(department)
-//     }
-// }
-
-const toggleSelection = (department) => {
-    tempSelectedDepartment.value =
-        tempSelectedDepartment.value?.id === department.id
-            ? null
-            : department
-}
-
-const confirmSelection = () => {
-    if (!tempSelectedDepartment.value) return
-
-    const selectedPath = [...selectionPath.value, tempSelectedDepartment.value]
-    selectedDepartmentPath.value = selectedPath.map(d => d.name).join(' / ')
-    emit('update:modelValue', tempSelectedDepartment.value.id)
-    emit('select', tempSelectedDepartment.value)
-    showPicker.value = false
-    resetSelectionState()
-}
-
-const handleCancel = () => {
-    // emit('update:modelValue', null)
-    // selectedDepartmentPath.value = ''
-    showPicker.value = false
-    // resetSelectionState()
-}
-
-const resetSelectionState = () => {
-    selectionPath.value = []
-    currentDepartments.value = departmentTree.value[0]?.subDepartments || []
-    tempSelectedDepartment.value = null
-}
-
-const goBack = () => {
-    selectionPath.value.pop()
-    currentDepartments.value = selectionPath.value.length
-        ? selectionPath.value[selectionPath.value.length - 1].subDepartments
-        : departmentTree.value[0]?.subDepartments || []
-    tempSelectedDepartment.value = null
-}
-
-watch(showPicker, (newVal) => {
-    if (!newVal) {
-        resetSelectionState()
-    }
-})
-
-onMounted(async () => {
-    if (departmentCache.data.value.length === 0) {
-        await loadDepartments()
-    } else {
-        departmentTree.value = departmentCache.data.value
-        currentDepartments.value = departmentCache.data.value[0]?.subDepartments || []
-    }
-})
-
-// 修改后的watch监听（补充路径空值处理）
-watch(() => props.modelValue, async (newVal) => {
-    if (newVal) {
-        await loadDepartments()
-        const targetDept = findDepartmentById(departmentCache.data.value, newVal)
-        if (targetDept) {
-            // 当部门为一级时显示空路径
-            selectedDepartmentPath.value = targetDept.parent
-                ? buildDepartmentPath(targetDept)
-                : ''
-        }
-    }
-}, { immediate: true })
-
-// 方法定义
-// 在watch部分新增以下代码
-watch(() => props.modelValue, async (newVal) => {
-    if (newVal) {
-        await loadDepartments()
-        const targetDept = findDepartmentById(departmentCache.data.value, newVal)
-        if (targetDept) {
-            selectedDepartmentPath.value = buildDepartmentPath(targetDept)
-        }
-    }
-}, { immediate: true })
-</script>
-
-<style scoped>
-.department-popup {
-    width: 100%;
-    height: 60vh;
-    border-radius: 16px 16px 0 0;
-}
-
-.popup-container {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    height: 100%;
-}
-
-.picker-header {
-    display: flex;
-    align-items: center;
-    padding: 12px;
-    border-bottom: 1px solid #ebedf0;
-    gap: 8px;
-    background: #fff;
-    /* flex-shrink: 0; */
-    position: sticky;
-    top: 0;
-    z-index: 999;
-    height: 56px;
-    /* 固定头部高度 */
-    flex-shrink: 0;
-    /* 防止头部被压缩 */
-}
-
-.scroll-container {
-    flex: 1;
-    height: 0;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    /* height: calc(80vh - 170px); */
-    /* 计算方式：总高度(80vh) - 头部高度(56px) - 搜索框高度(52px) */
-    position: relative;
-    top: -1px;
-}
-
-.back-button {
-    margin-right: 8px;
-}
-
-.current-path {
-    flex: 1;
-    font-size: 14px;
-    color: #323233;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.action-buttons {
-    display: flex;
-    gap: 8px;
-    margin-left: auto;
-}
-
-/* .scroll-container {
-    flex: 1;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-} */
-
-.cell-content {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.circle-selector {
-    width: 20px;
-    height: 20px;
-    border: 1px solid #ebedf0;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s;
-    flex-shrink: 0;
-}
-
-.circle-selector.selected {
-    background-color: #1989fa;
-    border-color: #1989fa;
-}
-
-.circle-selector.selected .van-icon {
-    color: white;
-    font-size: 14px;
-}
-
-.van-cell__right-icon {
-    color: #969799;
-    font-size: 16px;
-    margin-left: 8px;
-}
-
-.name {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.cancel-btn {
-    color: #969799;
-}
-
-.search-field {
-    background: #fff;
-    padding: 10px 16px;
-    border-bottom: 1px solid #ebedf0;
-    position: sticky;
-    top: 0;
-    z-index: 999;
-    margin-bottom: 10px;
-    flex-shrink: 0;
-    /* 防止压缩 */
-}
-</style>
+<template>
+    <div class="department-selector">
+        <van-field v-if="!isGone" :model-value="selectedDepartmentPath" readonly clickable :label="props.label"
+            :placeholder="props.placeholder" @click="onShow" :right-icon="isReadonly ? '' : 'arrow'"
+            :required="isRequired" :rules="props.rules" type="textarea" autosize="true" rows="1"/>
+
+        <van-popup v-model:show="showPicker" position="bottom" class="department-popup">
+            <div class="popup-container">
+                <div class="picker-header">
+                    <van-button v-if="currentLevel > 0" @click="goBack" icon="arrow-left" size="small"
+                        class="back-button" />
+                    <div class="current-path">{{ currentPath }}</div>
+                    <div class="action-buttons">
+                        <van-button size="small" @click="handleCancel" class="cancel-btn">
+                            取消
+                        </van-button>
+                        <van-button type="primary" size="small" @click="confirmSelection"
+                            :disabled="!tempSelectedDepartment" class="confirm-btn">
+                            确定
+                        </van-button>
+                    </div>
+                </div>
+
+                <van-field left-icon="search" v-model.trim="searchKeyword" clearable placeholder="请输入部门名称搜索"
+                    class="search-field" />
+                <div class="scroll-container">
+                    <van-cell-group>
+                        <van-cell v-for="(item, index) in filteredDepartments" :key="index" clickable
+                            @click="handleCellClick(item)">
+                            <template #title>
+                                <div class="cell-content">
+                                    <div class="circle-selector"
+                                        :class="{ 'selected': tempSelectedDepartment?.id === item.id }"
+                                        @click.stop="toggleSelection(item)">
+                                        <van-icon v-if="tempSelectedDepartment?.id === item.id" name="success" />
+                                    </div>
+                                    <span class="name">{{ item.fullPath || item.name }}</span>
+                                </div>
+                            </template>
+                            <template #right-icon>
+                                <van-icon v-if="item.subDepartments?.length" name="arrow" />
+                            </template>
+                        </van-cell>
+                    </van-cell-group>
+                </div>
+            </div>
+        </van-popup>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+import util from '../util'
+
+const props = defineProps({
+    modelValue: [String, Number],
+    label: {
+        type: String,
+        default: '选择部门'
+    },
+    placeholder: {
+        type: String,
+        default: '请选择部门'
+    },
+    required: {
+        type: Boolean,
+        default: true
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    rules: {
+        type: Array,
+        default: () => []
+    },
+    auth: {
+        type: String,
+        default: ''
+    },
+    // 查询多少层组织机构
+    level: {
+        type: Number,
+        // 默认查所有
+        default: 999
+    },
+    // 二级部门取值范围字典id
+    // 取dictionary库.dict的配置id
+    deptRangeId: {
+        type: String,
+        default: ''
+    }
+})
+
+const emit = defineEmits(['update:modelValue', 'select'])
+const { isRequired, isGone, isDisabled, isReadonly } = util.props2auth(props)
+
+// 部门数据相关状态
+const departmentTree = ref([])
+const currentDepartments = ref([])
+const selectedDepartmentPath = ref('')
+const selectionPath = ref([])
+const showPicker = ref(false)
+const tempSelectedDepartment = ref(null)
+
+// 在脚本部分添加搜索相关逻辑（约第60行）
+// 添加搜索关键词响应式变量
+const searchKeyword = ref('')
+
+// 计算属性
+const currentPath = computed(() => {
+    return selectionPath.value
+        .filter(d => d.id !== '1') // 过滤一级部门
+        .map(d => d.name)
+        .join(' / ') || '请选择部门'
+})
+
+const currentLevel = computed(() => selectionPath.value.length)
+
+// 部门数据缓存
+const departmentCache = {
+    data: ref([]),
+    loading: ref(false),
+    error: ref(null)
+}
+
+// 修改过滤后的部门列表计算属性
+// 修改过滤逻辑（约第80行）
+// 修改搜索结果的路径生成逻辑（约第89行）
+const filteredDepartments = computed(() => {
+    if (!searchKeyword.value) return currentDepartments.value;
+
+    // 递归搜索整个部门树
+    const searchTree = (depts, keyword, path = []) => {
+        return depts.flatMap(dept => {
+            const currentPath = [...path, dept];
+            const matches = [];
+
+            if (dept.name.toLowerCase().includes(keyword.toLowerCase())) {
+                matches.push({
+                    ...dept,
+                    // 过滤掉一级部门（假设一级部门id为1）
+                    fullPath: currentPath
+                        .filter(d => d.id !== '1')
+                        .map(d => d.name)
+                        .join(' / ')
+                });
+            }
+
+            if (dept.subDepartments?.length) {
+                matches.push(...searchTree(dept.subDepartments, keyword, currentPath));
+            }
+
+            return matches;
+        });
+    };
+
+    return searchTree(departmentTree.value, searchKeyword.value);
+});
+
+const onShow = () => {
+    if (isDisabled.value)
+        return
+
+    showPicker.value = true
+}
+
+// 修改单元格点击处理
+const handleCellClick = (department) => {
+    // 如果是叶子节点直接选中
+    if (!department.subDepartments?.length) {
+        toggleSelection(department)
+        return
+    }
+
+    // 非叶子节点才展开层级
+    selectionPath.value.push(department)
+    currentDepartments.value = department.subDepartments
+    tempSelectedDepartment.value = null
+}
+
+// 监听搜索关键词变化
+watch(searchKeyword, (newVal) => {
+    if (newVal) {
+        // 可根据需要添加搜索建议逻辑
+    }
+})
+
+// 在工具函数部分新增以下方法
+const findDepartmentById = (departments, targetId) => {
+    for (const dept of departments) {
+        if (dept.id === targetId) return dept
+        if (dept.subDepartments?.length) {
+            const found = findDepartmentById(dept.subDepartments, targetId)
+            if (found) return found
+        }
+    }
+    return null
+}
+
+// 修改路径构建方法
+const buildDepartmentPath = (department) => {
+    const path = []
+    let current = department.parent
+    while (current) {
+        if (current.id !== '1') {  // 不插入一级部门
+            path.unshift(current.name)
+        }
+        current = current.parent
+    }
+    // 添加当前选中部门（最后一级）
+    path.push(department.name)
+    return path.join(' / ')
+}
+
+// 修改部门数据加载方法
+const loadDepartments = async () => {
+    try {
+        if (departmentCache.data.value.length > 0) return
+
+        departmentCache.loading.value = true
+        const response = await util.get_subdepartments({ level: props.level })
+        console.log('-------subdepartment---------', response)
+        if (response.code === 200) {
+            // 添加parent引用
+            const addParentRef = (depts, parent) => {
+                depts.forEach(d => {
+                    d.parent = parent
+                    if (d.subDepartments) addParentRef(d.subDepartments, d)
+                })
+            }
+
+            // 取配置的二级部门取值范围
+            let level2DeptIds = []
+            //只显示指定范围内的二级部门
+            if (props.deptRangeId) {
+                let res = await util.dictionary_dict({ id: props.deptRangeId })
+                if (res.data.parseValue && res.data.parseValue.length > 0) {
+                    level2DeptIds = res.data.parseValue
+                }
+            }
+
+            // 只保留指定二级部门列表
+            if (props.deptRangeId) {
+                if (level2DeptIds && level2DeptIds.length > 0) {
+                    response.data.subDepartments = response.data.subDepartments.filter(item => {
+                        return level2DeptIds.includes(item.id)
+                    })
+                }
+            }
+
+            departmentCache.data.value = [response.data]
+            addParentRef(departmentCache.data.value, null)
+            departmentTree.value = departmentCache.data.value
+            currentDepartments.value = response.data.subDepartments || []
+            // 存储到sessionStorage中
+            //   sessionStorage.setItem('departmentTree', JSON.stringify(departmentTree.value))
+            //   sessionStorage.setItem('currentDepartments', JSON.stringify(currentDepartments.value))
+        }
+    } catch (error) {
+        console.error('加载部门数据失败:', error)
+    } finally {
+        departmentCache.loading.value = false
+    }
+}
+
+// const handleCellClick = (department) => {
+//     if (department.subDepartments?.length) {
+//         selectionPath.value.push(department)
+//         currentDepartments.value = department.subDepartments
+//         tempSelectedDepartment.value = null
+//     } else {
+//         toggleSelection(department)
+//     }
+// }
+
+const toggleSelection = (department) => {
+    tempSelectedDepartment.value =
+        tempSelectedDepartment.value?.id === department.id
+            ? null
+            : department
+}
+
+const confirmSelection = () => {
+    if (!tempSelectedDepartment.value) return
+
+    const selectedPath = [...selectionPath.value, tempSelectedDepartment.value]
+    selectedDepartmentPath.value = selectedPath.map(d => d.name).join(' / ')
+    emit('update:modelValue', tempSelectedDepartment.value.id)
+    emit('select', tempSelectedDepartment.value)
+    showPicker.value = false
+    resetSelectionState()
+}
+
+const handleCancel = () => {
+    // emit('update:modelValue', null)
+    // selectedDepartmentPath.value = ''
+    showPicker.value = false
+    // resetSelectionState()
+}
+
+const resetSelectionState = () => {
+    selectionPath.value = []
+    currentDepartments.value = departmentTree.value[0]?.subDepartments || []
+    tempSelectedDepartment.value = null
+}
+
+const goBack = () => {
+    selectionPath.value.pop()
+    currentDepartments.value = selectionPath.value.length
+        ? selectionPath.value[selectionPath.value.length - 1].subDepartments
+        : departmentTree.value[0]?.subDepartments || []
+    tempSelectedDepartment.value = null
+}
+
+watch(showPicker, (newVal) => {
+    if (!newVal) {
+        resetSelectionState()
+    }
+})
+
+onMounted(async () => {
+    if (departmentCache.data.value.length === 0) {
+        await loadDepartments()
+    } else {
+        departmentTree.value = departmentCache.data.value
+        currentDepartments.value = departmentCache.data.value[0]?.subDepartments || []
+    }
+})
+
+// 修改后的watch监听（补充路径空值处理）
+watch(() => props.modelValue, async (newVal) => {
+    if (newVal) {
+        await loadDepartments()
+        const targetDept = findDepartmentById(departmentCache.data.value, newVal)
+        if (targetDept) {
+            // 当部门为一级时显示空路径
+            selectedDepartmentPath.value = targetDept.parent
+                ? buildDepartmentPath(targetDept)
+                : ''
+        }
+    }
+}, { immediate: true })
+
+// 方法定义
+// 在watch部分新增以下代码
+watch(() => props.modelValue, async (newVal) => {
+    if (newVal) {
+        await loadDepartments()
+        const targetDept = findDepartmentById(departmentCache.data.value, newVal)
+        if (targetDept) {
+            selectedDepartmentPath.value = buildDepartmentPath(targetDept)
+        }
+    }
+}, { immediate: true })
+</script>
+
+<style scoped>
+.department-popup {
+    width: 100%;
+    height: 60vh;
+    border-radius: 16px 16px 0 0;
+}
+
+.popup-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+}
+
+.picker-header {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+    border-bottom: 1px solid #ebedf0;
+    gap: 8px;
+    background: #fff;
+    /* flex-shrink: 0; */
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    height: 56px;
+    /* 固定头部高度 */
+    flex-shrink: 0;
+    /* 防止头部被压缩 */
+}
+
+.scroll-container {
+    flex: 1;
+    height: 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    /* height: calc(80vh - 170px); */
+    /* 计算方式：总高度(80vh) - 头部高度(56px) - 搜索框高度(52px) */
+    position: relative;
+    top: -1px;
+}
+
+.back-button {
+    margin-right: 8px;
+}
+
+.current-path {
+    flex: 1;
+    font-size: 14px;
+    color: #323233;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 8px;
+    margin-left: auto;
+}
+
+/* .scroll-container {
+    flex: 1;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+} */
+
+.cell-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.circle-selector {
+    width: 20px;
+    height: 20px;
+    border: 1px solid #ebedf0;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+    flex-shrink: 0;
+}
+
+.circle-selector.selected {
+    background-color: #1989fa;
+    border-color: #1989fa;
+}
+
+.circle-selector.selected .van-icon {
+    color: white;
+    font-size: 14px;
+}
+
+.van-cell__right-icon {
+    color: #969799;
+    font-size: 16px;
+    margin-left: 8px;
+}
+
+.name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.cancel-btn {
+    color: #969799;
+}
+
+.search-field {
+    background: #fff;
+    padding: 10px 16px;
+    border-bottom: 1px solid #ebedf0;
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    margin-bottom: 10px;
+    flex-shrink: 0;
+    /* 防止压缩 */
+}
+</style>