npmapps 1.1.3 → 1.1.5

package/app/wujie-vue2-child/src/components/EventCalendar/mockData.js

@@ -0,0 +1,349 @@
+/**
+ * EventCalendar 模拟数据
+ * ------------------------------------------------------------------
+ * 用 setTimeout 模拟后端异步接口，便于演示「骨架屏 -> 真实数据」的过程。
+ * 真实接入时把 fetchXxx 换成自己的 request 即可，组件本身不关心数据来源。
+ *
+ * 注意：这里的字段名是「默认字段名」，若后端字段不同，
+ *      不需要改数据，只需给组件传 field-names（见 ALT_* 相关导出）。
+ */
+
+/* -------------------------------------------------------------------------- */
+/*                                  基础素材                                   */
+/* -------------------------------------------------------------------------- */
+
+/** 学校名池（取自设计图） */
+const SCHOOLS = [
+  '香港中文大学（深圳）', '南方科技大学', '哈尔滨工业大学（深圳）',
+  '电子科技大学', '北京邮电大学', '厦门大学',
+  '四川大学', '中央财经大学', '东南大学',
+  '南京审计大学', '北京理工大学', '西南财经大学',
+  '中国人民大学', '南京大学', '武汉大学',
+  '华中科技大学', '复旦大学', '对外经济贸易大学', '北京师范大学',
+  '上海财经大学', '中南财经政法大学', '北京大学',
+  '华东师范大学', '清华大学', '西北工业大学', '南开大学',
+  '上海交通大学', '天津大学', '西安交通大学',
+  '浙江大学', '同济大学', '大连理工大学',
+  '中国科学技术大学', '吉林大学', '华南理工大学',
+  '中南大学', '山东大学', '重庆大学', '湖南大学', '兰州大学'
+]
+
+/** 条目类型（角标文案 + 类型标识，类型用于组件内 typeColors 配色） */
+const EVENT_TYPES = [
+  { badge: '宣讲', type: 'talk' },
+  { badge: '双选', type: 'fair' },
+  { badge: '直播', type: 'live' },
+  { badge: '笔试', type: 'exam' }
+]
+
+/**
+ * 线性同余伪随机数生成器
+ * ------------------------------------------------------------------
+ * 不用 Math.random 是为了让每次刷新拿到的模拟数据都一致，
+ * 这样调试样式 / 截图对比时不会因为数据抖动而困扰。
+ */
+function createRandom(seed) {
+  let s = seed >>> 0
+  return function random() {
+    s = (s * 1664525 + 1013904223) >>> 0
+    return s / 4294967296
+  }
+}
+
+function pad2(n) {
+  return n < 10 ? '0' + n : String(n)
+}
+
+/**
+ * 生成某个月的日期数据
+ * @param {String} monthKey  '2026-09'
+ * @param {Object} options
+ * @param {Number} options.seed        随机种子
+ * @param {Number} options.maxItems    单日最多条目数
+ * @param {Number} options.density     有数据的日期占比 0~1
+ * @param {Boolean} options.skipWeekend 周末是否基本不排期（贴近真实业务）
+ */
+function createMonthDays(monthKey, options = {}) {
+  const { seed = 20260907, maxItems = 6, density = 0.62, skipWeekend = true } = options
+  const random = createRandom(seed)
+
+  const [year, month] = monthKey.split('-').map(Number)
+  const daysInMonth = new Date(year, month, 0).getDate()
+
+  const days = []
+  let uid = 0
+
+  for (let day = 1; day <= daysInMonth; day++) {
+    const date = new Date(year, month - 1, day)
+    const isWeekend = date.getDay() === 0 || date.getDay() === 6
+
+    // 周末排期概率大幅降低
+    const hit = random() < (skipWeekend && isWeekend ? density * 0.12 : density)
+    if (!hit) continue
+
+    // 单日条目数 1 ~ maxItems，故意让少数几天超过 4 条以演示滚动条
+    const count = 1 + Math.floor(random() * maxItems)
+
+    const items = []
+    for (let i = 0; i < count; i++) {
+      const school = SCHOOLS[Math.floor(random() * SCHOOLS.length)]
+      const evt = EVENT_TYPES[Math.floor(random() * EVENT_TYPES.length)]
+      items.push({
+        id: `${monthKey}-${day}-${uid++}`,
+        label: school,
+        badge: evt.badge,
+        type: evt.type,
+        // 冗余字段：演示插槽里可以拿到完整原始对象
+        address: `${school}就业指导中心`,
+        startTime: `${pad2(9 + (i % 8))}:30`
+      })
+    }
+
+    days.push({
+      date: `${monthKey}-${pad2(day)}`,
+      items
+    })
+  }
+
+  return days
+}
+
+/** 统一的异步包装：delay 毫秒后 resolve，模拟网络请求 */
+function delayResolve(payload, delay) {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(payload), delay)
+  })
+}
+
+/* -------------------------------------------------------------------------- */
+/*                               默认字段名接口                                 */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * 拉取宣讲日历数据（默认字段名，组件开箱即用）
+ *
+ * @param {Object}  options
+ * @param {Array}   options.months  要生成的月份，默认 2026 年 9/10/11 月
+ * @param {Number}  options.delay   模拟网络耗时（ms），默认 1500
+ * @returns {Promise<Array>} [{ month, monthLabel, days: [{ date, items: [] }] }]
+ */
+export function fetchCalendarData(options = {}) {
+  const {
+    months = ['2026-09', '2026-10', '2026-11'],
+    delay = 1500,
+    maxItems = 6,
+    density = 0.62
+  } = options
+
+  const data = months.map((monthKey, index) => {
+    const [year, month] = monthKey.split('-').map(Number)
+    return {
+      month: monthKey,
+      monthLabel: `${year}年${month}月`,
+      days: createMonthDays(monthKey, {
+        seed: year * 100 + month + index * 7,
+        maxItems,
+        density
+      })
+    }
+  })
+
+  return delayResolve(data, delay)
+}
+
+/**
+ * 跨年数据：2025-12 / 2026-01 / 2026-02
+ * ------------------------------------------------------------------
+ * 专门用于验证需求里点名的边界情况：
+ *  - 1 月要往前补 2025 年 12 月的日期；
+ *  - 2 月只有 28 天（2026 非闰年），末尾要补 3 月；
+ *  - 12 月要往后补 2026 年 1 月。
+ */
+export function fetchCrossYearData(options = {}) {
+  const { delay = 1200 } = options
+  return fetchCalendarData({
+    months: ['2025-12', '2026-01', '2026-02'],
+    delay,
+    density: 0.55
+  })
+}
+
+/** 空数据（演示空状态） */
+export function fetchEmptyData(options = {}) {
+  const { delay = 900, months = ['2026-09'] } = options
+  const data = months.map((monthKey) => ({
+    month: monthKey,
+    monthLabel: monthKey,
+    days: []
+  }))
+  return delayResolve(data, delay)
+}
+
+/* -------------------------------------------------------------------------- */
+/*                          自定义字段名接口（演示 fieldNames）                  */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * 与后端字段不一致时的映射配置。
+ * 把这个对象传给组件的 field-names，组件就能读懂下面 fetchCalendarDataV2 的数据。
+ */
+export const ALT_FIELD_NAMES = {
+  month: 'ym',
+  monthLabel: 'ymText',
+  days: 'dateList',
+  date: 'dayStr',
+  items: 'activityList',
+  itemKey: 'activityId',
+  itemLabel: 'schoolName',
+  itemBadge: 'activityTypeName',
+  itemType: 'activityType',
+  itemDisabled: 'expired'
+}
+
+/**
+ * 「后端字段完全不同」的模拟接口。
+ * 数据结构故意与默认约定不一致：month -> ym、days -> dateList、label -> schoolName ...
+ */
+export function fetchCalendarDataV2(options = {}) {
+  const { months = ['2026-09', '2026-10'], delay = 1500 } = options
+
+  const data = months.map((monthKey, index) => {
+    const [year, month] = monthKey.split('-').map(Number)
+    const days = createMonthDays(monthKey, { seed: 999 + index * 31, maxItems: 5 })
+
+    return {
+      ym: monthKey,
+      ymText: `${month} 月场次`,
+      dateList: days.map((d) => ({
+        dayStr: d.date,
+        activityList: d.items.map((it) => ({
+          activityId: it.id,
+          schoolName: it.label,
+          activityTypeName: it.badge,
+          activityType: it.type,
+          expired: false,
+          rawAddress: it.address
+        }))
+      }))
+    }
+  })
+
+  return delayResolve(data, delay)
+}
+
+/* -------------------------------------------------------------------------- */
+/*                                 固定演示数据                                 */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * 一份写死的小数据，用于「基础用法」示例，
+ * 便于阅读文档时一眼看清数据结构。
+ */
+export const SIMPLE_DATA = [
+  {
+    month: '2026-09',
+    monthLabel: '2026年9月',
+    days: [
+      {
+        date: '2026-09-09',
+        items: [
+          { id: 'a1', label: '香港中文大学（深圳）', badge: '宣讲', type: 'talk' },
+          { id: 'a2', label: '南方科技大学', badge: '宣讲', type: 'talk' },
+          { id: 'a3', label: '哈尔滨工业大学（深圳）', badge: '宣讲', type: 'talk' }
+        ]
+      },
+      {
+        date: '2026-09-10',
+        items: [
+          { id: 'b1', label: '电子科技大学', badge: '宣讲', type: 'talk' },
+          { id: 'b2', label: '北京邮电大学', badge: '宣讲', type: 'talk' },
+          { id: 'b3', label: '厦门大学', badge: '宣讲', type: 'talk' }
+        ]
+      },
+      {
+        date: '2026-09-11',
+        items: [
+          { id: 'c1', label: '四川大学', badge: '宣讲', type: 'talk' },
+          { id: 'c2', label: '中央财经大学', badge: '宣讲', type: 'talk' },
+          { id: 'c3', label: '东南大学', badge: '宣讲', type: 'talk' }
+        ]
+      },
+      {
+        date: '2026-09-12',
+        items: [
+          { id: 'd1', label: '南京审计大学', badge: '双选', type: 'fair' },
+          { id: 'd2', label: '北京理工大学', badge: '宣讲', type: 'talk' },
+          { id: 'd3', label: '西南财经大学', badge: '宣讲', type: 'talk' }
+        ]
+      },
+      {
+        date: '2026-09-14',
+        items: [
+          { id: 'e1', label: '中央财经大学', badge: '双选', type: 'fair' },
+          { id: 'e2', label: '中国人民大学', badge: '宣讲', type: 'talk' },
+          { id: 'e3', label: '南京大学', badge: '宣讲', type: 'talk' },
+          { id: 'e4', label: '武汉大学', badge: '宣讲', type: 'talk' },
+          { id: 'e5', label: '山东大学', badge: '直播', type: 'live' },
+          { id: 'e6', label: '重庆大学', badge: '笔试', type: 'exam' }
+        ]
+      },
+      {
+        date: '2026-09-16',
+        items: [
+          { id: 'f1', label: '华中科技大学', badge: '宣讲', type: 'talk' },
+          { id: 'f2', label: '复旦大学', badge: '宣讲', type: 'talk' },
+          { id: 'f3', label: '对外经济贸易大学', badge: '宣讲', type: 'talk' },
+          { id: 'f4', label: '北京师范大学', badge: '宣讲', type: 'talk' }
+        ]
+      },
+      {
+        date: '2026-09-17',
+        items: [
+          { id: 'g1', label: '上海财经大学', badge: '宣讲', type: 'talk' },
+          { id: 'g2', label: '中南财经政法大学', badge: '宣讲', type: 'talk' },
+          { id: 'g3', label: '北京大学', badge: '宣讲', type: 'talk' }
+        ]
+      },
+      {
+        date: '2026-09-18',
+        items: [
+          { id: 'h1', label: '华东师范大学', badge: '宣讲', type: 'talk' },
+          { id: 'h2', label: '清华大学', badge: '宣讲', type: 'talk' },
+          { id: 'h3', label: '西北工业大学', badge: '宣讲', type: 'talk' },
+          { id: 'h4', label: '南开大学', badge: '宣讲', type: 'talk' }
+        ]
+      },
+      {
+        date: '2026-09-19',
+        items: [
+          { id: 'i1', label: '上海交通大学', badge: '宣讲', type: 'talk' },
+          { id: 'i2', label: '天津大学', badge: '宣讲', type: 'talk' },
+          { id: 'i3', label: '西安交通大学', badge: '宣讲', type: 'talk' }
+        ]
+      },
+      {
+        date: '2026-09-22',
+        items: [
+          { id: 'j1', label: '浙江大学', badge: '宣讲', type: 'talk' },
+          { id: 'j2', label: '同济大学', badge: '宣讲', type: 'talk' },
+          { id: 'j3', label: '大连理工大学', badge: '宣讲', type: 'talk' }
+        ]
+      },
+      {
+        date: '2026-09-23',
+        items: [
+          { id: 'k1', label: '中国科学技术大学', badge: '宣讲', type: 'talk' },
+          { id: 'k2', label: '吉林大学', badge: '宣讲', type: 'talk' },
+          { id: 'k3', label: '华南理工大学', badge: '宣讲', type: 'talk' }
+        ]
+      },
+      {
+        date: '2026-09-24',
+        items: [
+          { id: 'l1', label: '中南大学', badge: '双选', type: 'fair' },
+          { id: 'l2', label: '哈尔滨工业大学', badge: '宣讲', type: 'talk' }
+        ]
+      }
+    ]
+  }
+]

package/app/wujie-vue2-child/src/components/EventCalendar/utils.js

@@ -0,0 +1,201 @@
+/**
+ * EventCalendar 工具函数集
+ * ------------------------------------------------------------------
+ * 说明：本文件不依赖任何第三方库（含 dayjs / moment / lodash），
+ *      仅使用原生 Date，保证组件文件夹可以整体拷贝到任意项目使用。
+ */
+
+/** 数字补零：7 -> '07' */
+export function pad2(n) {
+  return n < 10 ? '0' + n : String(n)
+}
+
+/**
+ * 默认字段映射表
+ * ------------------------------------------------------------------
+ * 后端返回的字段名往往与组件内部约定不一致，
+ * 使用者可通过 `field-names` prop 覆盖其中任意一项（支持 'a.b.c' 点路径）。
+ */
+export const DEFAULT_FIELD_NAMES = {
+  // —— 月份层（data 数组的每一项）——
+  month: 'month', // 月份标识，形如 '2026-09'
+  monthLabel: 'monthLabel', // 下拉框显示文案；缺省时自动生成「2026年9月」
+  days: 'days', // 该月的日期数组
+
+  // —— 日期层（days 数组的每一项）——
+  date: 'date', // 日期标识，形如 '2026-09-07'
+  items: 'items', // 当天的条目数组
+
+  // —— 条目层（items 数组的每一项）——
+  itemKey: 'id', // 条目唯一键（用于 v-for :key）
+  itemLabel: 'label', // 条目主文案，如「电子科技大学」
+  itemBadge: 'badge', // 条目右上角角标文案，如「宣讲」「双选」
+  itemType: 'type', // 条目类型，用于匹配 typeColors 配色
+  itemDisabled: 'disabled' // 条目是否禁用（禁用后不响应点击）
+}
+
+/**
+ * 按路径取值，支持 'a.b.c' 形式
+ * @param {Object} obj 源对象
+ * @param {String} path 字段路径
+ */
+export function getByPath(obj, path) {
+  if (obj == null || !path) return undefined
+  if (path.indexOf('.') === -1) return obj[path]
+  return path.split('.').reduce((acc, key) => (acc == null ? acc : acc[key]), obj)
+}
+
+/** 是否为合法 Date 对象 */
+function isValidDate(d) {
+  return d instanceof Date && !isNaN(d.getTime())
+}
+
+/**
+ * 把多种输入统一解析成 Date
+ * 支持：Date / '2026-09-07' / '2026/9/7' / 时间戳
+ */
+export function toDate(value) {
+  if (isValidDate(value)) return value
+  if (value == null || value === '') return null
+
+  if (typeof value === 'number') {
+    const d = new Date(value)
+    return isValidDate(d) ? d : null
+  }
+
+  const str = String(value).trim()
+  // 手动解析，规避 Safari / iOS 对 '2026-09-07' 的时区差异（会被当成 UTC）
+  const m = str.match(/^(\d{4})[-/](\d{1,2})(?:[-/](\d{1,2}))?/)
+  if (m) {
+    const d = new Date(Number(m[1]), Number(m[2]) - 1, m[3] ? Number(m[3]) : 1)
+    return isValidDate(d) ? d : null
+  }
+
+  const fallback = new Date(str)
+  return isValidDate(fallback) ? fallback : null
+}
+
+/** Date -> 'YYYY-MM-DD' */
+export function formatDateKey(date) {
+  const d = toDate(date)
+  if (!d) return ''
+  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`
+}
+
+/** Date -> 'YYYY-MM' */
+export function formatMonthKey(date) {
+  const d = toDate(date)
+  if (!d) return ''
+  return `${d.getFullYear()}-${pad2(d.getMonth() + 1)}`
+}
+
+/**
+ * 解析月份标识
+ * @param {String|Date} monthKey '2026-09' / '2026/9' / Date
+ * @returns {{ year: Number, month: Number }} month 为 1~12
+ */
+export function parseMonthKey(monthKey) {
+  const d = toDate(monthKey)
+  if (!d) {
+    const now = new Date()
+    return { year: now.getFullYear(), month: now.getMonth() + 1 }
+  }
+  return { year: d.getFullYear(), month: d.getMonth() + 1 }
+}
+
+/** 两个 Date 是否为同一天 */
+export function isSameDay(a, b) {
+  const d1 = toDate(a)
+  const d2 = toDate(b)
+  if (!d1 || !d2) return false
+  return (
+    d1.getFullYear() === d2.getFullYear() &&
+    d1.getMonth() === d2.getMonth() &&
+    d1.getDate() === d2.getDate()
+  )
+}
+
+/**
+ * 月份偏移，自动跨年
+ * @param {String} monthKey '2026-01'
+ * @param {Number} offset  -1 上个月 / 1 下个月
+ * @returns {String} '2025-12'
+ */
+export function shiftMonth(monthKey, offset) {
+  const { year, month } = parseMonthKey(monthKey)
+  // new Date 的月份允许越界（-1 / 12），会自动进位到上一年 / 下一年
+  return formatMonthKey(new Date(year, month - 1 + offset, 1))
+}
+
+/**
+ * 构建一个月的日历格子矩阵（核心逻辑）
+ * ------------------------------------------------------------------
+ * 需求要点：
+ *  1. 每个月天数不固定（28/29/30/31），且 1 号是星期几也不固定；
+ *  2. 需要用「上个月末尾几天」补齐第一行，用「下个月开头几天」补齐最后一行；
+ *  3. 跨年（1 月往前补 12 月、12 月往后补次年 1 月）必须正确。
+ *
+ * 实现方式：先算出本月 1 号相对「一周起始日」的偏移量 leading，
+ * 然后以 `new Date(year, month - 1, 1 - leading + i)` 递推生成所有格子。
+ * 原生 Date 对天数越界（负数或超出当月天数）会自动进位/借位，
+ * 因此跨月、跨年都会被自动处理，无需特判 1 月 / 12 月。
+ *
+ * @param {String} monthKey        '2026-02'
+ * @param {Number} firstDayOfWeek  一周起始日，0=周日（设计图）1=周一
+ * @param {Date}   today           今天（便于测试时注入）
+ * @returns {Array} 42 或 35 个格子（始终是 7 的整数倍）
+ */
+export function buildMonthMatrix(monthKey, firstDayOfWeek = 0, today = new Date()) {
+  const { year, month } = parseMonthKey(monthKey)
+
+  const firstDayOfMonth = new Date(year, month - 1, 1)
+  // new Date(y, m, 0) 表示「第 m 月的第 0 天」即上个月最后一天，用来取当月总天数
+  const daysInMonth = new Date(year, month, 0).getDate()
+
+  // 本月 1 号是星期几（0=周日），再换算成相对一周起始日的偏移
+  const leading = (firstDayOfMonth.getDay() - firstDayOfWeek + 7) % 7
+  // 向上取整到 7 的倍数，保证最后一行也被补满
+  const totalCells = Math.ceil((leading + daysInMonth) / 7) * 7
+
+  const cells = []
+  for (let i = 0; i < totalCells; i++) {
+    const date = new Date(year, month - 1, 1 - leading + i)
+    const cellMonth = date.getMonth() + 1
+    const isCurrentMonth = date.getFullYear() === year && cellMonth === month
+
+    cells.push({
+      date,
+      dateKey: formatDateKey(date),
+      monthKey: formatMonthKey(date),
+      year: date.getFullYear(),
+      month: cellMonth,
+      day: date.getDate(),
+      weekday: date.getDay(),
+      /** 是否属于当前渲染的月份（false 时置灰） */
+      isCurrentMonth,
+      /** 'prev' 上月补位 | 'current' 当月 | 'next' 下月补位 */
+      position: isCurrentMonth ? 'current' : i < leading ? 'prev' : 'next',
+      isToday: isSameDay(date, today),
+      isWeekend: date.getDay() === 0 || date.getDay() === 6,
+      /** 所在行索引，从 0 开始 */
+      rowIndex: Math.floor(i / 7),
+      colIndex: i % 7
+    })
+  }
+
+  return cells
+}
+
+/** 默认星期文案，下标即 Date.getDay() 的返回值 */
+export const DEFAULT_WEEK_LABELS = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+
+/** 默认日期文案格式化：{ month: 9, day: 7 } -> '9月7日' */
+export function defaultDayFormatter(cell) {
+  return `${cell.month}月${cell.day}日`
+}
+
+/** 默认月份下拉文案：'2026-09' -> '2026年9月' */
+export function defaultMonthFormatter(monthKey) {
+  const { year, month } = parseMonthKey(monthKey)
+  return `${year}年${month}月`
+}

package/app/wujie-vue2-child/src/components/FormulaEditor/FunctionSelector.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="selector-container">
+    <div class="header">函数</div>
+    <div class="tree-wrapper">
+      <el-tree
+        :data="treeData"
+        :props="defaultProps"
+        @node-click="handleNodeClick"
+        default-expand-all
+        highlight-current
+      >
+        <span
+          class="custom-tree-node"
+          slot-scope="{ node, data }"
+          :draggable="!onlyLeafClickable || node.isLeaf"
+          @dragstart="handleDragStart(node, data, $event)"
+        >
+          {{ node.label }}
+        </span>
+      </el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getFunctions } from "./api";
+
+export default {
+  name: "FunctionSelector",
+  props: {
+    onlyLeafClickable: {
+      type: Boolean,
+      default: true,
+    },
+    prefix: {
+      type: String,
+      default: "F_",
+    },
+  },
+  data() {
+    return {
+      treeData: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+    };
+  },
+  mounted() {
+    this.fetchData();
+  },
+  methods: {
+    async fetchData() {
+      this.treeData = await getFunctions();
+    },
+    handleNodeClick(data, node) {
+      if (this.onlyLeafClickable && !node.isLeaf) {
+        return;
+      }
+      this.$emit("select", { ...data, value: `${this.prefix}${data.name}()` });
+    },
+    handleDragStart(node, data, e) {
+      if (this.onlyLeafClickable && !node.isLeaf) {
+        e.preventDefault();
+        return;
+      }
+      const value = `${this.prefix}${data.name}()`;
+      e.dataTransfer.setData("text/plain", value);
+      e.dataTransfer.effectAllowed = "copy";
+      
+      // 设置自定义拖拽镜像
+      const div = document.createElement('div');
+      div.innerText = value;
+      div.style.position = 'absolute';
+      div.style.top = '-9999px';
+      div.style.padding = '5px 10px';
+      div.style.background = '#fff';
+      div.style.border = '1px solid #409eff';
+      div.style.borderRadius = '4px';
+      div.style.fontSize = '14px';
+      div.style.color = '#303133';
+      div.style.boxShadow = '0 2px 12px 0 rgba(0,0,0,0.1)';
+      div.style.zIndex = '9999';
+      document.body.appendChild(div);
+      
+      e.dataTransfer.setDragImage(div, 0, 0);
+      
+      setTimeout(() => {
+        document.body.removeChild(div);
+      }, 0);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+}
+.selector-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  padding: 10px;
+  background-color: #f5f7fa;
+  border-bottom: 1px solid #ebeef5;
+  font-weight: bold;
+  text-align: center;
+}
+
+.tree-wrapper {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px;
+}
+</style>