xt-element-ui 2.1.5 → 2.1.7

package/src/components/xt-list/index.vue

@@ -1,886 +1,886 @@
-<template>
-  <div class="xt-list" :class="{ 'xt-list--loading': loading }">
-    <!-- 标题栏 -->
-    <div class="xt-list__header" v-if="title || filterable || sortable || $slots.toolbar">
-      <span class="xt-list__title" v-if="title">{{ title }}</span>
-      <div class="xt-list__toolbar">
-        <!-- 搜索 -->
-        <div class="xt-list__search" v-if="filterable">
-          <el-input
-            v-model="searchText"
-            :placeholder="filterPlaceholder"
-            size="small"
-            clearable
-            prefix-icon="el-icon-search"
-            @input="handleSearch"
-          />
-        </div>
-        <!-- 排序 -->
-        <el-button
-          v-if="sortable && sortBy"
-          size="small"
-          icon="el-icon-sort"
-          :type="currentSortOrder ? 'primary' : 'default'"
-          plain
-          @click="handleSortToggle"
-        >
-          {{ sortLabel }}
-        </el-button>
-        <slot name="toolbar"></slot>
-      </div>
-    </div>
-
-    <!-- 主体区域 -->
-    <div
-      ref="scrollContainer"
-      class="xt-list__body"
-      :style="bodyStyle"
-      @scroll="onScroll"
-    >
-      <!-- 虚拟滚动 phantom -->
-      <div
-        v-if="virtualScroll"
-        class="xt-list__phantom"
-        :style="{ height: totalHeight + 'px' }"
-      >
-        <div :style="{ paddingTop: offsetY + 'px' }">
-          <template v-if="groupedData.length">
-            <template v-for="(group, gIdx) in visibleGroups">
-              <div :key="group._key" class="xt-list__group">
-                <!-- 分组标题 -->
-                <div
-                  class="xt-list__group-title"
-                  @click="toggleGroup(group._key)"
-                >
-                  <span class="xt-list__group-arrow" :class="{ 'is-expanded': group._expanded }">
-                    <i class="el-icon-arrow-right"></i>
-                  </span>
-                  <slot name="group-title" :group="group" :items="group._items" :expanded="group._expanded">
-                    <span class="xt-list__group-label">{{ getGroupLabel(group) }}</span>
-                    <span class="xt-list__group-count">({{ group._items.length }})</span>
-                  </slot>
-                </div>
-
-                <!-- 分组卡片 -->
-                <div v-if="group._expanded" :class="['xt-list__cards', 'xt-list__cols-' + columns]">
-                  <div
-                    v-for="(item, idx) in getVisibleItems(group)"
-                    :key="item._id || idx"
-                    class="xt-list__item"
-                    @click="handleItemClick(item, group._key)"
-                  >
-                    <el-card :shadow="shadow" :body-style="cardBodyStyle">
-                      <slot
-                        :item="item"
-                        :index="getItemIndex(item, group)"
-                        :group="group"
-                      >
-                        <!-- 图片区域 -->
-                        <div v-if="getImage(item)" class="xt-list__image">
-                          <img :src="getImage(item)" :alt="getConfigValue(cardConfig.title, item)" />
-                        </div>
-                        <!-- 标签 -->
-                        <div v-if="getTag(item)" class="xt-list__tag">
-                          <el-tag size="small" :type="getTagType(item)">{{ getTag(item) }}</el-tag>
-                        </div>
-                        <!-- 标题 -->
-                        <div class="xt-list__card-title" v-if="getConfigValue(cardConfig.title, item)">
-                          {{ getConfigValue(cardConfig.title, item) }}
-                        </div>
-                        <!-- 副标题 -->
-                        <div class="xt-list__card-subtitle" v-if="getConfigValue(cardConfig.subtitle, item)">
-                          {{ getConfigValue(cardConfig.subtitle, item) }}
-                        </div>
-                        <!-- 内容 -->
-                        <div class="xt-list__card-content" v-if="getConfigValue(cardConfig.content, item)">
-                          {{ getConfigValue(cardConfig.content, item) }}
-                        </div>
-                        <!-- 底部 -->
-                        <div class="xt-list__card-footer" v-if="getConfigValue(cardConfig.footer, item)">
-                          <slot name="card-footer" :item="item" :index="getItemIndex(item, group)">
-                            {{ getConfigValue(cardConfig.footer, item) }}
-                          </slot>
-                        </div>
-                      </slot>
-                    </el-card>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </template>
-          <div
-            v-else-if="!loading"
-            class="xt-list__empty"
-          >
-            <slot name="empty">
-              <span>{{ emptyText }}</span>
-            </slot>
-          </div>
-        </div>
-      </div>
-
-      <!-- 非虚拟滚动模式 -->
-      <template v-else-if="groupedData.length">
-        <template v-for="group in groupedData">
-          <div :key="group._key" class="xt-list__group">
-            <div
-              class="xt-list__group-title"
-              @click="toggleGroup(group._key)"
-            >
-              <span class="xt-list__group-arrow" :class="{ 'is-expanded': group._expanded }">
-                <i class="el-icon-arrow-right"></i>
-              </span>
-              <slot name="group-title" :group="group" :items="group._items" :expanded="group._expanded">
-                <span class="xt-list__group-label">{{ getGroupLabel(group) }}</span>
-                <span class="xt-list__group-count">({{ group._items.length }})</span>
-              </slot>
-            </div>
-            <div v-if="group._expanded" :class="['xt-list__cards', 'xt-list__cols-' + columns]">
-              <div
-                v-for="(item, idx) in group._items"
-                :key="item._id || idx"
-                class="xt-list__item"
-                @click="handleItemClick(item, group._key)"
-              >
-                <el-card :shadow="shadow" :body-style="cardBodyStyle">
-                  <slot :item="item" :index="idx" :group="group">
-                    <div v-if="getImage(item)" class="xt-list__image">
-                      <img :src="getImage(item)" :alt="getConfigValue(cardConfig.title, item)" />
-                    </div>
-                    <div v-if="getTag(item)" class="xt-list__tag">
-                      <el-tag size="small" :type="getTagType(item)">{{ getTag(item) }}</el-tag>
-                    </div>
-                    <div class="xt-list__card-title" v-if="getConfigValue(cardConfig.title, item)">
-                      {{ getConfigValue(cardConfig.title, item) }}
-                    </div>
-                    <div class="xt-list__card-subtitle" v-if="getConfigValue(cardConfig.subtitle, item)">
-                      {{ getConfigValue(cardConfig.subtitle, item) }}
-                    </div>
-                    <div class="xt-list__card-content" v-if="getConfigValue(cardConfig.content, item)">
-                      {{ getConfigValue(cardConfig.content, item) }}
-                    </div>
-                    <div class="xt-list__card-footer" v-if="getConfigValue(cardConfig.footer, item)">
-                      <slot name="card-footer" :item="item" :index="idx">
-                        {{ getConfigValue(cardConfig.footer, item) }}
-                      </slot>
-                    </div>
-                  </slot>
-                </el-card>
-              </div>
-            </div>
-          </div>
-        </template>
-      </template>
-
-      <div v-else-if="!loading" class="xt-list__empty">
-        <slot name="empty">
-          <span>{{ emptyText }}</span>
-        </slot>
-      </div>
-
-      <!-- 加载更多 -->
-      <div v-if="loadMore && hasMore && !loading" class="xt-list__loadmore">
-        <el-button type="text" :loading="loadMoreLoading" @click="handleLoadMore">
-          {{ loadMoreText }}
-        </el-button>
-      </div>
-    </div>
-
-    <!-- 加载状态 -->
-    <div v-if="loading" class="xt-list__loading">
-      <slot name="loading">
-        <i class="el-icon-loading"></i>
-        <span>加载中...</span>
-      </slot>
-    </div>
-
-    <!-- 分页 -->
-    <div class="xt-list__footer" v-if="showPagination">
-      <el-pagination
-        background
-        small
-        :current-page="pagination.pageNum"
-        :page-size="pagination.pageSize"
-        :total="total"
-        :page-sizes="pagination.pageSizes || [10, 20, 50]"
-        layout="total, prev, pager, next"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-const CARD_ITEM_HEIGHT = 160
-const GROUP_HEADER_HEIGHT = 44
-
-export default {
-  name: 'XtList',
-
-  props: {
-    data: { type: Array, default: () => [] },
-    // 分组配置
-    groupBy: { type: String, default: '' },
-    groupLabel: { type: [String, Function], default: '' },
-    // 卡片配置
-    cardConfig: {
-      type: Object,
-      default: () => ({
-        title: 'title',
-        subtitle: '',
-        content: '',
-        image: '',
-        tag: '',
-        tagType: '',
-        footer: ''
-      })
-    },
-    // 显示配置
-    title: { type: String, default: '' },
-    columns: { type: Number, default: 1 },
-    shadow: { type: String, default: 'hover' },
-    cardBodyStyle: { type: Object, default: () => ({}) },
-    // 虚拟滚动
-    virtualScroll: { type: Boolean, default: false },
-    itemHeight: { type: Number, default: CARD_ITEM_HEIGHT },
-    bufferSize: { type: Number, default: 3 },
-    height: { type: [Number, String], default: null },
-    maxHeight: { type: [Number, String], default: null },
-    // 分组折叠
-    expandAll: { type: Boolean, default: true },
-    accordion: { type: Boolean, default: false },
-    // 分页
-    pagination: { type: Object, default: null },
-    total: { type: Number, default: 0 },
-    // 加载更多
-    loadMore: { type: Boolean, default: false },
-    hasMore: { type: Boolean, default: false },
-    loadMoreText: { type: String, default: '加载更多' },
-    loadMoreLoading: { type: Boolean, default: false },
-    // 状态
-    loading: { type: Boolean, default: false },
-    emptyText: { type: String, default: '暂无数据' },
-    // 搜索筛选
-    filterable: { type: Boolean, default: false },
-    filterPlaceholder: { type: String, default: '请输入搜索内容' },
-    filterMethod: { type: Function, default: null },
-    // 排序
-    sortable: { type: Boolean, default: false },
-    sortBy: { type: String, default: '' },
-    sortOrder: { type: String, default: '' },
-    sortMethod: { type: Function, default: null }
-  },
-
-  data() {
-    return {
-      groupExpandState: {},
-      scrollTop: 0,
-      containerHeight: 0,
-      resizeObserver: null,
-      rafId: null,
-      searchText: '',
-      currentSortOrder: this.sortOrder || ''
-    }
-  },
-
-  computed: {
-    showPagination() {
-      return this.pagination && this.total > 0
-    },
-    sortLabel() {
-      if (!this.currentSortOrder) return '排序'
-      return this.currentSortOrder === 'ascending' ? '升序' : '降序'
-    },
-    bodyStyle() {
-      const style = {}
-      if (this.height) {
-        style.height = typeof this.height === 'number' ? this.height + 'px' : this.height
-      }
-      if (this.maxHeight) {
-        style.maxHeight = typeof this.maxHeight === 'number' ? this.maxHeight + 'px' : this.maxHeight
-      }
-      if (this.virtualScroll) {
-        style.overflowY = 'auto'
-        style.overflowX = 'hidden'
-      }
-      return style
-    },
-
-    // 筛选后的数据
-    filteredData() {
-      if (!this.filterable || !this.searchText) return this.data
-      return this.data.filter(item => {
-        if (typeof this.filterMethod === 'function') {
-          return this.filterMethod(item, this.searchText)
-        }
-        return Object.values(item).some(val => {
-          if (val == null) return false
-          return String(val).toLowerCase().includes(this.searchText.toLowerCase())
-        })
-      })
-    },
-
-    // 排序后的数据
-    sortedData() {
-      if (!this.sortable || !this.sortBy || !this.currentSortOrder) return this.filteredData
-      const order = this.currentSortOrder === 'ascending' ? 1 : -1
-      const sortFn = typeof this.sortMethod === 'function'
-        ? this.sortMethod
-        : (a, b) => {
-          const va = a[this.sortBy]
-          const vb = b[this.sortBy]
-          if (va == null && vb == null) return 0
-          if (va == null) return -1
-          if (vb == null) return 1
-          if (typeof va === 'number' && typeof vb === 'number') return va - vb
-          return String(va).localeCompare(String(vb), undefined, { numeric: true })
-        }
-      return [...this.filteredData].sort((a, b) => sortFn(a, b) * order)
-    },
-
-    // 分组后的数据
-    groupedData() {
-      const source = this.sortedData
-      if (!source || !source.length) return []
-
-      if (!this.groupBy) {
-        return [{
-          _key: '_default',
-          _items: source.map((item, idx) => ({ ...item, _id: item._id || `item_${idx}` })),
-          _expanded: true
-        }]
-      }
-
-      const groups = {}
-      source.forEach((item, idx) => {
-        const value = item[this.groupBy]
-        const key = value != null ? String(value) : '_undefined'
-        if (!groups[key]) {
-          groups[key] = {
-            _key: key,
-            _value: value,
-            _items: []
-          }
-        }
-        groups[key]._items.push({ ...item, _id: item._id || `item_${idx}` })
-      })
-
-      const result = Object.keys(groups).sort().map(key => {
-        const g = groups[key]
-        g._expanded = this.groupExpandState[key] !== undefined ? this.groupExpandState[key] : this.expandAll
-        return g
-      })
-
-      return result
-    },
-
-    // 虚拟滚动：总高度
-    totalHeight() {
-      if (!this.virtualScroll) return 0
-      let height = 0
-      this.groupedData.forEach(group => {
-        height += GROUP_HEADER_HEIGHT
-        if (group._expanded) {
-          const rows = Math.ceil(group._items.length / this.columns)
-          height += rows * this.itemHeight
-        }
-      })
-      return height
-    },
-
-    // 虚拟滚动：可见分组
-    visibleGroups() {
-      if (!this.virtualScroll) return this.groupedData
-
-      const start = Math.max(0, this.scrollTop - this.bufferSize * this.itemHeight)
-      const end = start + this.containerHeight + this.bufferSize * this.itemHeight * 2
-      const visible = []
-      let currentTop = 0
-
-      this.groupedData.forEach(group => {
-        const groupHeight = GROUP_HEADER_HEIGHT +
-          (group._expanded ? Math.ceil(group._items.length / this.columns) * this.itemHeight : 0)
-        const groupEnd = currentTop + groupHeight
-
-        if (groupEnd >= start && currentTop <= end) {
-          visible.push(group)
-        }
-        currentTop = groupEnd
-      })
-
-      return visible
-    },
-
-    // 虚拟滚动：偏移量
-    offsetY() {
-      if (!this.virtualScroll) return 0
-      let offset = 0
-      const start = Math.max(0, this.scrollTop - this.bufferSize * this.itemHeight)
-
-      for (let i = 0; i < this.groupedData.length; i++) {
-        const group = this.groupedData[i]
-        const h = GROUP_HEADER_HEIGHT +
-          (group._expanded ? Math.ceil(group._items.length / this.columns) * this.itemHeight : 0)
-        if (offset + h <= start) {
-          offset += h
-        } else {
-          break
-        }
-      }
-      return offset
-    }
-  },
-
-  watch: {
-    data: {
-      handler() {
-        this.$nextTick(() => {
-          this.updateContainerHeight()
-        })
-      }
-    },
-    expandAll(val) {
-      const state = {}
-      this.groupedData.forEach(g => { state[g._key] = val })
-      this.groupExpandState = state
-    }
-  },
-
-  mounted() {
-    this.$nextTick(() => {
-      this.updateContainerHeight()
-      this.bindResizeObserver()
-    })
-  },
-
-  beforeDestroy() {
-    this.unbindResizeObserver()
-    if (this.rafId && typeof cancelAnimationFrame !== 'undefined') {
-      cancelAnimationFrame(this.rafId)
-      this.rafId = null
-    }
-  },
-
-  methods: {
-    // ========== 分组展开/折叠 ==========
-    toggleGroup(key) {
-      const newState = { ...this.groupExpandState }
-      const current = newState[key] !== undefined ? newState[key] : this.expandAll
-
-      if (this.accordion && !current) {
-        Object.keys(newState).forEach(k => { newState[k] = false })
-      }
-      newState[key] = !current
-      this.groupExpandState = newState
-
-      this.$nextTick(() => {
-        this.updateContainerHeight()
-        this.$emit('group-toggle', { key, expanded: newState[key] })
-      })
-    },
-
-    getGroupLabel(group) {
-      if (this.groupLabel === '') return group._value
-      if (typeof this.groupLabel === 'function') return this.groupLabel(group)
-      if (typeof this.groupLabel === 'string' && group._items[0]) {
-        return group._items[0][this.groupLabel] || group._value
-      }
-      return group._value
-    },
-
-    // ========== 卡片配置解析 ==========
-    getConfigValue(config, item) {
-      if (!config) return ''
-      if (typeof config === 'function') return config(item)
-      if (typeof config === 'string') return item[config] || ''
-      return ''
-    },
-
-    getImage(item) {
-      return this.getConfigValue(this.cardConfig.image, item)
-    },
-
-    getTag(item) {
-      return this.getConfigValue(this.cardConfig.tag, item)
-    },
-
-    getTagType(item) {
-      if (this.cardConfig.tagType) {
-        if (typeof this.cardConfig.tagType === 'function') return this.cardConfig.tagType(item)
-        return this.cardConfig.tagType
-      }
-      return ''
-    },
-
-    // ========== 虚拟滚动 ==========
-    getVisibleItems(group) {
-      if (!this.virtualScroll) return group._items
-
-      const bufferPx = this.bufferSize * this.itemHeight
-      const start = Math.max(0, this.scrollTop - bufferPx)
-      const end = start + this.containerHeight + bufferPx * 2
-
-      let currentTop = 0
-      let groupStart = 0
-      for (let i = 0; i < this.groupedData.length; i++) {
-        const g = this.groupedData[i]
-        if (g._key === group._key) {
-          groupStart = currentTop + GROUP_HEADER_HEIGHT
-          break
-        }
-        currentTop += GROUP_HEADER_HEIGHT +
-          (g._expanded ? Math.ceil(g._items.length / this.columns) * this.itemHeight : 0)
-      }
-
-      const groupEnd = groupStart + Math.ceil(group._items.length / this.columns) * this.itemHeight
-
-      if (groupEnd <= start || groupStart >= end) return []
-
-      const visibleStart = Math.max(0, Math.floor((start - groupStart) / this.itemHeight) * this.columns)
-      const visibleEnd = Math.min(group._items.length, Math.ceil((end - groupStart) / this.itemHeight) * this.columns + bufferPx)
-
-      return group._items.slice(Math.max(0, visibleStart), visibleEnd)
-    },
-
-    getItemIndex(item, group) {
-      return group._items.indexOf(item)
-    },
-
-    onScroll() {
-      if (!this.virtualScroll) return
-      this.scrollTop = this.$refs.scrollContainer.scrollTop
-      if (this.rafId) return
-      if (typeof requestAnimationFrame === 'undefined') return
-      this.rafId = requestAnimationFrame(() => {
-        this.$forceUpdate()
-        this.rafId = null
-      })
-    },
-
-    updateContainerHeight() {
-      if (this.$refs.scrollContainer) {
-        this.containerHeight = this.$refs.scrollContainer.clientHeight
-      }
-    },
-
-    bindResizeObserver() {
-      if (typeof ResizeObserver === 'undefined') return
-      const container = this.$refs.scrollContainer
-      if (!container) return
-      this.resizeObserver = new ResizeObserver(() => {
-        this.updateContainerHeight()
-      })
-      this.resizeObserver.observe(container)
-    },
-
-    unbindResizeObserver() {
-      if (this.resizeObserver) {
-        this.resizeObserver.disconnect()
-        this.resizeObserver = null
-      }
-    },
-
-    // ========== 事件处理 ==========
-    handleSearch() {
-      this.$emit('search', this.searchText)
-    },
-
-    handleSortToggle() {
-      const orders = ['', 'ascending', 'descending']
-      const idx = orders.indexOf(this.currentSortOrder)
-      this.currentSortOrder = orders[(idx + 1) % 3]
-      this.$emit('sort-change', { prop: this.sortBy, order: this.currentSortOrder })
-    },
-
-    handleItemClick(item, groupKey) {
-      this.$emit('click-item', { item, groupKey })
-    },
-
-    handleLoadMore() {
-      this.$emit('load-more')
-    },
-
-    handleSizeChange(size) {
-      this.$emit('size-change', size)
-    },
-
-    handleCurrentChange(page) {
-      this.$emit('page-change', page)
-    },
-
-    // ========== 对外暴露方法 ==========
-    scrollToTop() {
-      if (this.$refs.scrollContainer) {
-        this.$refs.scrollContainer.scrollTo({ top: 0, behavior: 'smooth' })
-      }
-    },
-
-    expandGroup(key) {
-      const newState = { ...this.groupExpandState }
-      newState[key] = true
-      this.groupExpandState = newState
-    },
-
-    collapseGroup(key) {
-      const newState = { ...this.groupExpandState }
-      newState[key] = false
-      this.groupExpandState = newState
-    },
-
-    collapseAll() {
-      const newState = {}
-      this.groupedData.forEach(g => { newState[g._key] = false })
-      this.groupExpandState = newState
-    },
-
-    expandAllGroups() {
-      this.groupExpandState = {}
-    }
-  }
-}
-</script>
-
-<style scoped>
-.xt-list {
-  width: 100%;
-  position: relative;
-}
-
-/* 标题栏 */
-.xt-list__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 0;
-  margin-bottom: 8px;
-}
-.xt-list__title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #303133;
-  position: relative;
-  padding-left: 12px;
-}
-.xt-list__title::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 16px;
-  background: #409eff;
-  border-radius: 2px;
-}
-.xt-list__toolbar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-/* 搜索栏 */
-.xt-list__search {
-  width: 180px;
-  flex-shrink: 0;
-}
-
-/* 主体区域 */
-.xt-list__body {
-  position: relative;
-}
-
-/* 虚拟滚动 phantom */
-.xt-list__phantom {
-  position: relative;
-  box-sizing: border-box;
-}
-
-/* 分组 */
-.xt-list__group {
-  margin-bottom: 12px;
-}
-
-/* 分组标题 */
-.xt-list__group-title {
-  display: flex;
-  align-items: center;
-  padding: 10px 12px;
-  background: #f5f7fa;
-  border-radius: 6px;
-  cursor: pointer;
-  user-select: none;
-  transition: background 0.2s;
-  margin-bottom: 8px;
-}
-.xt-list__group-title:hover {
-  background: #ebeef5;
-}
-.xt-list__group-title:active {
-  background: #e4e7ed;
-}
-.xt-list__group-arrow {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  margin-right: 8px;
-  transition: transform 0.3s;
-  color: #909399;
-}
-.xt-list__group-arrow.is-expanded {
-  transform: rotate(90deg);
-}
-.xt-list__group-label {
-  font-size: 14px;
-  font-weight: 600;
-  color: #303133;
-}
-.xt-list__group-count {
-  font-size: 12px;
-  color: #909399;
-  margin-left: 6px;
-}
-
-/* 卡片网格 */
-.xt-list__cards {
-  display: grid;
-  gap: 12px;
-}
-.xt-list__cols-1 {
-  grid-template-columns: 1fr;
-}
-.xt-list__cols-2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-.xt-list__cols-3 {
-  grid-template-columns: repeat(3, 1fr);
-}
-
-/* 卡片项 */
-.xt-list__item {
-  cursor: pointer;
-  transition: transform 0.2s;
-}
-.xt-list__item:active {
-  transform: scale(0.98);
-}
-
-/* 卡片内部 */
-.xt-list__image {
-  width: 100%;
-  margin: -20px -20px 12px;
-  border-radius: 4px 4px 0 0;
-  overflow: hidden;
-}
-.xt-list__image img {
-  width: 100%;
-  display: block;
-  object-fit: cover;
-}
-.xt-list__tag {
-  margin-bottom: 8px;
-}
-.xt-list__card-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: #303133;
-  margin-bottom: 6px;
-  line-height: 1.4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-.xt-list__card-subtitle {
-  font-size: 13px;
-  color: #909399;
-  margin-bottom: 8px;
-  line-height: 1.3;
-}
-.xt-list__card-content {
-  font-size: 14px;
-  color: #606266;
-  line-height: 1.6;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-}
-.xt-list__card-footer {
-  margin-top: 12px;
-  padding-top: 10px;
-  border-top: 1px solid #ebeef5;
-  font-size: 13px;
-  color: #909399;
-}
-
-/* 空状态 */
-.xt-list__empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 48px 0;
-  color: #909399;
-  font-size: 14px;
-}
-
-/* 加载状态 */
-.xt-list__loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 48px 0;
-  color: #909399;
-  font-size: 14px;
-}
-.xt-list__loading .el-icon-loading {
-  font-size: 20px;
-  animation: rotating 2s linear infinite;
-}
-@keyframes rotating {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-/* 加载更多 */
-.xt-list__loadmore {
-  display: flex;
-  justify-content: center;
-  padding: 16px 0;
-}
-
-/* 分页 */
-.xt-list__footer {
-  display: flex;
-  justify-content: center;
-  padding: 16px 0;
-}
-
-/* 滚动条 */
-.xt-list__body::-webkit-scrollbar {
-  width: 6px;
-}
-.xt-list__body::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 3px;
-}
-.xt-list__body::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-/* 移动端适配 */
-@media (max-width: 768px) {
-  .xt-list__cols-2,
-  .xt-list__cols-3 {
-    grid-template-columns: 1fr;
-  }
-  .xt-list__group-title {
-    padding: 10px 8px;
-  }
-}
+<template>
+  <div class="xt-list" :class="{ 'xt-list--loading': loading }">
+    <!-- 标题栏 -->
+    <div class="xt-list__header" v-if="title || filterable || sortable || $slots.toolbar">
+      <span class="xt-list__title" v-if="title">{{ title }}</span>
+      <div class="xt-list__toolbar">
+        <!-- 搜索 -->
+        <div class="xt-list__search" v-if="filterable">
+          <el-input
+            v-model="searchText"
+            :placeholder="filterPlaceholder"
+            size="small"
+            clearable
+            prefix-icon="el-icon-search"
+            @input="handleSearch"
+          />
+        </div>
+        <!-- 排序 -->
+        <el-button
+          v-if="sortable && sortBy"
+          size="small"
+          icon="el-icon-sort"
+          :type="currentSortOrder ? 'primary' : 'default'"
+          plain
+          @click="handleSortToggle"
+        >
+          {{ sortLabel }}
+        </el-button>
+        <slot name="toolbar"></slot>
+      </div>
+    </div>
+
+    <!-- 主体区域 -->
+    <div
+      ref="scrollContainer"
+      class="xt-list__body"
+      :style="bodyStyle"
+      @scroll="onScroll"
+    >
+      <!-- 虚拟滚动 phantom -->
+      <div
+        v-if="virtualScroll"
+        class="xt-list__phantom"
+        :style="{ height: totalHeight + 'px' }"
+      >
+        <div :style="{ paddingTop: offsetY + 'px' }">
+          <template v-if="groupedData.length">
+            <template v-for="(group, gIdx) in visibleGroups">
+              <div :key="group._key" class="xt-list__group">
+                <!-- 分组标题 -->
+                <div
+                  class="xt-list__group-title"
+                  @click="toggleGroup(group._key)"
+                >
+                  <span class="xt-list__group-arrow" :class="{ 'is-expanded': group._expanded }">
+                    <i class="el-icon-arrow-right"></i>
+                  </span>
+                  <slot name="group-title" :group="group" :items="group._items" :expanded="group._expanded">
+                    <span class="xt-list__group-label">{{ getGroupLabel(group) }}</span>
+                    <span class="xt-list__group-count">({{ group._items.length }})</span>
+                  </slot>
+                </div>
+
+                <!-- 分组卡片 -->
+                <div v-if="group._expanded" :class="['xt-list__cards', 'xt-list__cols-' + columns]">
+                  <div
+                    v-for="(item, idx) in getVisibleItems(group)"
+                    :key="item._id || idx"
+                    class="xt-list__item"
+                    @click="handleItemClick(item, group._key)"
+                  >
+                    <el-card :shadow="shadow" :body-style="cardBodyStyle">
+                      <slot
+                        :item="item"
+                        :index="getItemIndex(item, group)"
+                        :group="group"
+                      >
+                        <!-- 图片区域 -->
+                        <div v-if="getImage(item)" class="xt-list__image">
+                          <img :src="getImage(item)" :alt="getConfigValue(cardConfig.title, item)" />
+                        </div>
+                        <!-- 标签 -->
+                        <div v-if="getTag(item)" class="xt-list__tag">
+                          <el-tag size="small" :type="getTagType(item)">{{ getTag(item) }}</el-tag>
+                        </div>
+                        <!-- 标题 -->
+                        <div class="xt-list__card-title" v-if="getConfigValue(cardConfig.title, item)">
+                          {{ getConfigValue(cardConfig.title, item) }}
+                        </div>
+                        <!-- 副标题 -->
+                        <div class="xt-list__card-subtitle" v-if="getConfigValue(cardConfig.subtitle, item)">
+                          {{ getConfigValue(cardConfig.subtitle, item) }}
+                        </div>
+                        <!-- 内容 -->
+                        <div class="xt-list__card-content" v-if="getConfigValue(cardConfig.content, item)">
+                          {{ getConfigValue(cardConfig.content, item) }}
+                        </div>
+                        <!-- 底部 -->
+                        <div class="xt-list__card-footer" v-if="getConfigValue(cardConfig.footer, item)">
+                          <slot name="card-footer" :item="item" :index="getItemIndex(item, group)">
+                            {{ getConfigValue(cardConfig.footer, item) }}
+                          </slot>
+                        </div>
+                      </slot>
+                    </el-card>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </template>
+          <div
+            v-else-if="!loading"
+            class="xt-list__empty"
+          >
+            <slot name="empty">
+              <span>{{ emptyText }}</span>
+            </slot>
+          </div>
+        </div>
+      </div>
+
+      <!-- 非虚拟滚动模式 -->
+      <template v-else-if="groupedData.length">
+        <template v-for="group in groupedData">
+          <div :key="group._key" class="xt-list__group">
+            <div
+              class="xt-list__group-title"
+              @click="toggleGroup(group._key)"
+            >
+              <span class="xt-list__group-arrow" :class="{ 'is-expanded': group._expanded }">
+                <i class="el-icon-arrow-right"></i>
+              </span>
+              <slot name="group-title" :group="group" :items="group._items" :expanded="group._expanded">
+                <span class="xt-list__group-label">{{ getGroupLabel(group) }}</span>
+                <span class="xt-list__group-count">({{ group._items.length }})</span>
+              </slot>
+            </div>
+            <div v-if="group._expanded" :class="['xt-list__cards', 'xt-list__cols-' + columns]">
+              <div
+                v-for="(item, idx) in group._items"
+                :key="item._id || idx"
+                class="xt-list__item"
+                @click="handleItemClick(item, group._key)"
+              >
+                <el-card :shadow="shadow" :body-style="cardBodyStyle">
+                  <slot :item="item" :index="idx" :group="group">
+                    <div v-if="getImage(item)" class="xt-list__image">
+                      <img :src="getImage(item)" :alt="getConfigValue(cardConfig.title, item)" />
+                    </div>
+                    <div v-if="getTag(item)" class="xt-list__tag">
+                      <el-tag size="small" :type="getTagType(item)">{{ getTag(item) }}</el-tag>
+                    </div>
+                    <div class="xt-list__card-title" v-if="getConfigValue(cardConfig.title, item)">
+                      {{ getConfigValue(cardConfig.title, item) }}
+                    </div>
+                    <div class="xt-list__card-subtitle" v-if="getConfigValue(cardConfig.subtitle, item)">
+                      {{ getConfigValue(cardConfig.subtitle, item) }}
+                    </div>
+                    <div class="xt-list__card-content" v-if="getConfigValue(cardConfig.content, item)">
+                      {{ getConfigValue(cardConfig.content, item) }}
+                    </div>
+                    <div class="xt-list__card-footer" v-if="getConfigValue(cardConfig.footer, item)">
+                      <slot name="card-footer" :item="item" :index="idx">
+                        {{ getConfigValue(cardConfig.footer, item) }}
+                      </slot>
+                    </div>
+                  </slot>
+                </el-card>
+              </div>
+            </div>
+          </div>
+        </template>
+      </template>
+
+      <div v-else-if="!loading" class="xt-list__empty">
+        <slot name="empty">
+          <span>{{ emptyText }}</span>
+        </slot>
+      </div>
+
+      <!-- 加载更多 -->
+      <div v-if="loadMore && hasMore && !loading" class="xt-list__loadmore">
+        <el-button type="text" :loading="loadMoreLoading" @click="handleLoadMore">
+          {{ loadMoreText }}
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 加载状态 -->
+    <div v-if="loading" class="xt-list__loading">
+      <slot name="loading">
+        <i class="el-icon-loading"></i>
+        <span>加载中...</span>
+      </slot>
+    </div>
+
+    <!-- 分页 -->
+    <div class="xt-list__footer" v-if="showPagination">
+      <el-pagination
+        background
+        small
+        :current-page="pagination.pageNum"
+        :page-size="pagination.pageSize"
+        :total="total"
+        :page-sizes="pagination.pageSizes || [10, 20, 50]"
+        layout="total, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+const CARD_ITEM_HEIGHT = 160
+const GROUP_HEADER_HEIGHT = 44
+
+export default {
+  name: 'XtList',
+
+  props: {
+    data: { type: Array, default: () => [] },
+    // 分组配置
+    groupBy: { type: String, default: '' },
+    groupLabel: { type: [String, Function], default: '' },
+    // 卡片配置
+    cardConfig: {
+      type: Object,
+      default: () => ({
+        title: 'title',
+        subtitle: '',
+        content: '',
+        image: '',
+        tag: '',
+        tagType: '',
+        footer: ''
+      })
+    },
+    // 显示配置
+    title: { type: String, default: '' },
+    columns: { type: Number, default: 1 },
+    shadow: { type: String, default: 'hover' },
+    cardBodyStyle: { type: Object, default: () => ({}) },
+    // 虚拟滚动
+    virtualScroll: { type: Boolean, default: false },
+    itemHeight: { type: Number, default: CARD_ITEM_HEIGHT },
+    bufferSize: { type: Number, default: 3 },
+    height: { type: [Number, String], default: null },
+    maxHeight: { type: [Number, String], default: null },
+    // 分组折叠
+    expandAll: { type: Boolean, default: true },
+    accordion: { type: Boolean, default: false },
+    // 分页
+    pagination: { type: Object, default: null },
+    total: { type: Number, default: 0 },
+    // 加载更多
+    loadMore: { type: Boolean, default: false },
+    hasMore: { type: Boolean, default: false },
+    loadMoreText: { type: String, default: '加载更多' },
+    loadMoreLoading: { type: Boolean, default: false },
+    // 状态
+    loading: { type: Boolean, default: false },
+    emptyText: { type: String, default: '暂无数据' },
+    // 搜索筛选
+    filterable: { type: Boolean, default: false },
+    filterPlaceholder: { type: String, default: '请输入搜索内容' },
+    filterMethod: { type: Function, default: null },
+    // 排序
+    sortable: { type: Boolean, default: false },
+    sortBy: { type: String, default: '' },
+    sortOrder: { type: String, default: '' },
+    sortMethod: { type: Function, default: null }
+  },
+
+  data() {
+    return {
+      groupExpandState: {},
+      scrollTop: 0,
+      containerHeight: 0,
+      resizeObserver: null,
+      rafId: null,
+      searchText: '',
+      currentSortOrder: this.sortOrder || ''
+    }
+  },
+
+  computed: {
+    showPagination() {
+      return this.pagination && this.total > 0
+    },
+    sortLabel() {
+      if (!this.currentSortOrder) return '排序'
+      return this.currentSortOrder === 'ascending' ? '升序' : '降序'
+    },
+    bodyStyle() {
+      const style = {}
+      if (this.height) {
+        style.height = typeof this.height === 'number' ? this.height + 'px' : this.height
+      }
+      if (this.maxHeight) {
+        style.maxHeight = typeof this.maxHeight === 'number' ? this.maxHeight + 'px' : this.maxHeight
+      }
+      if (this.virtualScroll) {
+        style.overflowY = 'auto'
+        style.overflowX = 'hidden'
+      }
+      return style
+    },
+
+    // 筛选后的数据
+    filteredData() {
+      if (!this.filterable || !this.searchText) return this.data
+      return this.data.filter(item => {
+        if (typeof this.filterMethod === 'function') {
+          return this.filterMethod(item, this.searchText)
+        }
+        return Object.values(item).some(val => {
+          if (val == null) return false
+          return String(val).toLowerCase().includes(this.searchText.toLowerCase())
+        })
+      })
+    },
+
+    // 排序后的数据
+    sortedData() {
+      if (!this.sortable || !this.sortBy || !this.currentSortOrder) return this.filteredData
+      const order = this.currentSortOrder === 'ascending' ? 1 : -1
+      const sortFn = typeof this.sortMethod === 'function'
+        ? this.sortMethod
+        : (a, b) => {
+          const va = a[this.sortBy]
+          const vb = b[this.sortBy]
+          if (va == null && vb == null) return 0
+          if (va == null) return -1
+          if (vb == null) return 1
+          if (typeof va === 'number' && typeof vb === 'number') return va - vb
+          return String(va).localeCompare(String(vb), undefined, { numeric: true })
+        }
+      return [...this.filteredData].sort((a, b) => sortFn(a, b) * order)
+    },
+
+    // 分组后的数据
+    groupedData() {
+      const source = this.sortedData
+      if (!source || !source.length) return []
+
+      if (!this.groupBy) {
+        return [{
+          _key: '_default',
+          _items: source.map((item, idx) => ({ ...item, _id: item._id || `item_${idx}` })),
+          _expanded: true
+        }]
+      }
+
+      const groups = {}
+      source.forEach((item, idx) => {
+        const value = item[this.groupBy]
+        const key = value != null ? String(value) : '_undefined'
+        if (!groups[key]) {
+          groups[key] = {
+            _key: key,
+            _value: value,
+            _items: []
+          }
+        }
+        groups[key]._items.push({ ...item, _id: item._id || `item_${idx}` })
+      })
+
+      const result = Object.keys(groups).sort().map(key => {
+        const g = groups[key]
+        g._expanded = this.groupExpandState[key] !== undefined ? this.groupExpandState[key] : this.expandAll
+        return g
+      })
+
+      return result
+    },
+
+    // 虚拟滚动：总高度
+    totalHeight() {
+      if (!this.virtualScroll) return 0
+      let height = 0
+      this.groupedData.forEach(group => {
+        height += GROUP_HEADER_HEIGHT
+        if (group._expanded) {
+          const rows = Math.ceil(group._items.length / this.columns)
+          height += rows * this.itemHeight
+        }
+      })
+      return height
+    },
+
+    // 虚拟滚动：可见分组
+    visibleGroups() {
+      if (!this.virtualScroll) return this.groupedData
+
+      const start = Math.max(0, this.scrollTop - this.bufferSize * this.itemHeight)
+      const end = start + this.containerHeight + this.bufferSize * this.itemHeight * 2
+      const visible = []
+      let currentTop = 0
+
+      this.groupedData.forEach(group => {
+        const groupHeight = GROUP_HEADER_HEIGHT +
+          (group._expanded ? Math.ceil(group._items.length / this.columns) * this.itemHeight : 0)
+        const groupEnd = currentTop + groupHeight
+
+        if (groupEnd >= start && currentTop <= end) {
+          visible.push(group)
+        }
+        currentTop = groupEnd
+      })
+
+      return visible
+    },
+
+    // 虚拟滚动：偏移量
+    offsetY() {
+      if (!this.virtualScroll) return 0
+      let offset = 0
+      const start = Math.max(0, this.scrollTop - this.bufferSize * this.itemHeight)
+
+      for (let i = 0; i < this.groupedData.length; i++) {
+        const group = this.groupedData[i]
+        const h = GROUP_HEADER_HEIGHT +
+          (group._expanded ? Math.ceil(group._items.length / this.columns) * this.itemHeight : 0)
+        if (offset + h <= start) {
+          offset += h
+        } else {
+          break
+        }
+      }
+      return offset
+    }
+  },
+
+  watch: {
+    data: {
+      handler() {
+        this.$nextTick(() => {
+          this.updateContainerHeight()
+        })
+      }
+    },
+    expandAll(val) {
+      const state = {}
+      this.groupedData.forEach(g => { state[g._key] = val })
+      this.groupExpandState = state
+    }
+  },
+
+  mounted() {
+    this.$nextTick(() => {
+      this.updateContainerHeight()
+      this.bindResizeObserver()
+    })
+  },
+
+  beforeDestroy() {
+    this.unbindResizeObserver()
+    if (this.rafId && typeof cancelAnimationFrame !== 'undefined') {
+      cancelAnimationFrame(this.rafId)
+      this.rafId = null
+    }
+  },
+
+  methods: {
+    // ========== 分组展开/折叠 ==========
+    toggleGroup(key) {
+      const newState = { ...this.groupExpandState }
+      const current = newState[key] !== undefined ? newState[key] : this.expandAll
+
+      if (this.accordion && !current) {
+        Object.keys(newState).forEach(k => { newState[k] = false })
+      }
+      newState[key] = !current
+      this.groupExpandState = newState
+
+      this.$nextTick(() => {
+        this.updateContainerHeight()
+        this.$emit('group-toggle', { key, expanded: newState[key] })
+      })
+    },
+
+    getGroupLabel(group) {
+      if (this.groupLabel === '') return group._value
+      if (typeof this.groupLabel === 'function') return this.groupLabel(group)
+      if (typeof this.groupLabel === 'string' && group._items[0]) {
+        return group._items[0][this.groupLabel] || group._value
+      }
+      return group._value
+    },
+
+    // ========== 卡片配置解析 ==========
+    getConfigValue(config, item) {
+      if (!config) return ''
+      if (typeof config === 'function') return config(item)
+      if (typeof config === 'string') return item[config] || ''
+      return ''
+    },
+
+    getImage(item) {
+      return this.getConfigValue(this.cardConfig.image, item)
+    },
+
+    getTag(item) {
+      return this.getConfigValue(this.cardConfig.tag, item)
+    },
+
+    getTagType(item) {
+      if (this.cardConfig.tagType) {
+        if (typeof this.cardConfig.tagType === 'function') return this.cardConfig.tagType(item)
+        return this.cardConfig.tagType
+      }
+      return ''
+    },
+
+    // ========== 虚拟滚动 ==========
+    getVisibleItems(group) {
+      if (!this.virtualScroll) return group._items
+
+      const bufferPx = this.bufferSize * this.itemHeight
+      const start = Math.max(0, this.scrollTop - bufferPx)
+      const end = start + this.containerHeight + bufferPx * 2
+
+      let currentTop = 0
+      let groupStart = 0
+      for (let i = 0; i < this.groupedData.length; i++) {
+        const g = this.groupedData[i]
+        if (g._key === group._key) {
+          groupStart = currentTop + GROUP_HEADER_HEIGHT
+          break
+        }
+        currentTop += GROUP_HEADER_HEIGHT +
+          (g._expanded ? Math.ceil(g._items.length / this.columns) * this.itemHeight : 0)
+      }
+
+      const groupEnd = groupStart + Math.ceil(group._items.length / this.columns) * this.itemHeight
+
+      if (groupEnd <= start || groupStart >= end) return []
+
+      const visibleStart = Math.max(0, Math.floor((start - groupStart) / this.itemHeight) * this.columns)
+      const visibleEnd = Math.min(group._items.length, Math.ceil((end - groupStart) / this.itemHeight) * this.columns + bufferPx)
+
+      return group._items.slice(Math.max(0, visibleStart), visibleEnd)
+    },
+
+    getItemIndex(item, group) {
+      return group._items.indexOf(item)
+    },
+
+    onScroll() {
+      if (!this.virtualScroll) return
+      this.scrollTop = this.$refs.scrollContainer.scrollTop
+      if (this.rafId) return
+      if (typeof requestAnimationFrame === 'undefined') return
+      this.rafId = requestAnimationFrame(() => {
+        this.$forceUpdate()
+        this.rafId = null
+      })
+    },
+
+    updateContainerHeight() {
+      if (this.$refs.scrollContainer) {
+        this.containerHeight = this.$refs.scrollContainer.clientHeight
+      }
+    },
+
+    bindResizeObserver() {
+      if (typeof ResizeObserver === 'undefined') return
+      const container = this.$refs.scrollContainer
+      if (!container) return
+      this.resizeObserver = new ResizeObserver(() => {
+        this.updateContainerHeight()
+      })
+      this.resizeObserver.observe(container)
+    },
+
+    unbindResizeObserver() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect()
+        this.resizeObserver = null
+      }
+    },
+
+    // ========== 事件处理 ==========
+    handleSearch() {
+      this.$emit('search', this.searchText)
+    },
+
+    handleSortToggle() {
+      const orders = ['', 'ascending', 'descending']
+      const idx = orders.indexOf(this.currentSortOrder)
+      this.currentSortOrder = orders[(idx + 1) % 3]
+      this.$emit('sort-change', { prop: this.sortBy, order: this.currentSortOrder })
+    },
+
+    handleItemClick(item, groupKey) {
+      this.$emit('click-item', { item, groupKey })
+    },
+
+    handleLoadMore() {
+      this.$emit('load-more')
+    },
+
+    handleSizeChange(size) {
+      this.$emit('size-change', size)
+    },
+
+    handleCurrentChange(page) {
+      this.$emit('page-change', page)
+    },
+
+    // ========== 对外暴露方法 ==========
+    scrollToTop() {
+      if (this.$refs.scrollContainer) {
+        this.$refs.scrollContainer.scrollTo({ top: 0, behavior: 'smooth' })
+      }
+    },
+
+    expandGroup(key) {
+      const newState = { ...this.groupExpandState }
+      newState[key] = true
+      this.groupExpandState = newState
+    },
+
+    collapseGroup(key) {
+      const newState = { ...this.groupExpandState }
+      newState[key] = false
+      this.groupExpandState = newState
+    },
+
+    collapseAll() {
+      const newState = {}
+      this.groupedData.forEach(g => { newState[g._key] = false })
+      this.groupExpandState = newState
+    },
+
+    expandAllGroups() {
+      this.groupExpandState = {}
+    }
+  }
+}
+</script>
+
+<style scoped>
+.xt-list {
+  width: 100%;
+  position: relative;
+}
+
+/* 标题栏 */
+.xt-list__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+  margin-bottom: 8px;
+}
+.xt-list__title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  position: relative;
+  padding-left: 12px;
+}
+.xt-list__title::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 16px;
+  background: #409eff;
+  border-radius: 2px;
+}
+.xt-list__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 搜索栏 */
+.xt-list__search {
+  width: 180px;
+  flex-shrink: 0;
+}
+
+/* 主体区域 */
+.xt-list__body {
+  position: relative;
+}
+
+/* 虚拟滚动 phantom */
+.xt-list__phantom {
+  position: relative;
+  box-sizing: border-box;
+}
+
+/* 分组 */
+.xt-list__group {
+  margin-bottom: 12px;
+}
+
+/* 分组标题 */
+.xt-list__group-title {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  background: #f5f7fa;
+  border-radius: 6px;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.2s;
+  margin-bottom: 8px;
+}
+.xt-list__group-title:hover {
+  background: #ebeef5;
+}
+.xt-list__group-title:active {
+  background: #e4e7ed;
+}
+.xt-list__group-arrow {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  transition: transform 0.3s;
+  color: #909399;
+}
+.xt-list__group-arrow.is-expanded {
+  transform: rotate(90deg);
+}
+.xt-list__group-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #303133;
+}
+.xt-list__group-count {
+  font-size: 12px;
+  color: #909399;
+  margin-left: 6px;
+}
+
+/* 卡片网格 */
+.xt-list__cards {
+  display: grid;
+  gap: 12px;
+}
+.xt-list__cols-1 {
+  grid-template-columns: 1fr;
+}
+.xt-list__cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+.xt-list__cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* 卡片项 */
+.xt-list__item {
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+.xt-list__item:active {
+  transform: scale(0.98);
+}
+
+/* 卡片内部 */
+.xt-list__image {
+  width: 100%;
+  margin: -20px -20px 12px;
+  border-radius: 4px 4px 0 0;
+  overflow: hidden;
+}
+.xt-list__image img {
+  width: 100%;
+  display: block;
+  object-fit: cover;
+}
+.xt-list__tag {
+  margin-bottom: 8px;
+}
+.xt-list__card-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: #303133;
+  margin-bottom: 6px;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.xt-list__card-subtitle {
+  font-size: 13px;
+  color: #909399;
+  margin-bottom: 8px;
+  line-height: 1.3;
+}
+.xt-list__card-content {
+  font-size: 14px;
+  color: #606266;
+  line-height: 1.6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.xt-list__card-footer {
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid #ebeef5;
+  font-size: 13px;
+  color: #909399;
+}
+
+/* 空状态 */
+.xt-list__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 0;
+  color: #909399;
+  font-size: 14px;
+}
+
+/* 加载状态 */
+.xt-list__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 48px 0;
+  color: #909399;
+  font-size: 14px;
+}
+.xt-list__loading .el-icon-loading {
+  font-size: 20px;
+  animation: rotating 2s linear infinite;
+}
+@keyframes rotating {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* 加载更多 */
+.xt-list__loadmore {
+  display: flex;
+  justify-content: center;
+  padding: 16px 0;
+}
+
+/* 分页 */
+.xt-list__footer {
+  display: flex;
+  justify-content: center;
+  padding: 16px 0;
+}
+
+/* 滚动条 */
+.xt-list__body::-webkit-scrollbar {
+  width: 6px;
+}
+.xt-list__body::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+.xt-list__body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .xt-list__cols-2,
+  .xt-list__cols-3 {
+    grid-template-columns: 1fr;
+  }
+  .xt-list__group-title {
+    padding: 10px 8px;
+  }
+}
 </style>