From 70375c04a72cc0a8f170bce6b5723b5ef07fdc0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=93=B2=E9=93=9C?=
 <9490856+zhangzhetong@user.noreply.gitee.com>
Date: Sun, 21 Sep 2025 12:30:25 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=AD=A6=E7=94=9F=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .cursor/rules/tanstack-query-guide.md         |  405 ++++
 src/pages/student/list.vue                    |  420 ++--
 src/service/index.ts                          |    4 +-
 ...juzidianleixing.ts => shujuzidileixing.ts} |    0
 ...{shujuzidianxiang.ts => shujuzidixiang.ts} |    0
 wot-design-ui-components.md                   | 1844 +++++++++++++++++
 6 files changed, 2550 insertions(+), 123 deletions(-)
 create mode 100644 .cursor/rules/tanstack-query-guide.md
 rename src/service/{shujuzidianleixing.ts => shujuzidileixing.ts} (100%)
 rename src/service/{shujuzidianxiang.ts => shujuzidixiang.ts} (100%)
 create mode 100644 wot-design-ui-components.md

diff --git a/.cursor/rules/tanstack-query-guide.md b/.cursor/rules/tanstack-query-guide.md
new file mode 100644
index 0000000..756928a
--- /dev/null
+++ b/.cursor/rules/tanstack-query-guide.md
@@ -0,0 +1,405 @@
+# TanStack Query 使用指南
+
+## 📋 概述
+
+TanStack Query (原名 React Query) 是一个强大的数据获取和状态管理库，为 Vue 3 项目提供：
+
+- 🚀 **智能缓存**: 自动缓存和去重请求
+- 🔄 **后台更新**: 自动在后台重新获取数据
+- ⚡ **实时同步**: 窗口聚焦时自动刷新
+- 📱 **离线支持**: 网络恢复时自动重试
+- 🎯 **响应式**: 与 Vue 3 Composition API 完美集成
+
+## 🚀 快速开始
+
+### 1. 基础配置
+
+项目已配置好 TanStack Query，在 `main.ts` 中：
+
+```typescript
+import { VueQueryPlugin } from '@tanstack/vue-query'
+
+app.use(VueQueryPlugin)
+```
+
+### 2. 基础用法
+
+```vue
+<template>
+  <div v-if="isLoading">加载中...</div>
+  <div v-else-if="error">发生错误: {{ error.message }}</div>
+  <div v-else>
+    <div v-for="item in data" :key="item.id">
+      {{ item.name }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useQuery } from '@tanstack/vue-query'
+import { apiService } from '@/api'
+
+const { isLoading, error, data } = useQuery({
+  queryKey: ['users'],
+  queryFn: () => apiService.getUserList()
+})
+</script>
+```
+
+## 📚 核心 API
+
+### useQuery - 数据获取
+
+用于获取数据的基础 hook：
+
+```typescript
+const {
+  data,           // 查询结果
+  isLoading,      // 首次加载状态
+  isFetching,     // 获取状态（包括后台刷新）
+  error,          // 错误信息
+  refetch,        // 手动重新获取
+  remove          // 移除查询缓存
+} = useQuery({
+  queryKey: ['queryKey'],
+  queryFn: fetchFunction,
+  enabled: true,  // 是否启用查询
+  staleTime: 30000, // 数据过期时间（30秒）
+  gcTime: 300000    // 缓存垃圾回收时间（5分钟）
+})
+```
+
+### useMutation - 数据修改
+
+用于创建、更新、删除操作：
+
+```typescript
+const {
+  mutate,         // 执行变更
+  mutateAsync,    // 异步执行变更
+  isLoading,      // 变更加载状态
+  error,          // 变更错误
+  isSuccess       // 变更成功状态
+} = useMutation({
+  mutationFn: (data) => apiService.createUser(data),
+  onSuccess: (data) => {
+    // 成功回调
+    queryClient.invalidateQueries(['users'])
+  },
+  onError: (error) => {
+    // 重要： ElMessage 已经在httpClient 封装过了，如果不需要对异常进行特殊处理，你完全不需要 onError
+  }
+})
+```
+
+### useQueryClient - 查询客户端
+
+用于手动管理缓存：
+
+```typescript
+import { useQueryClient } from '@tanstack/vue-query'
+
+const queryClient = useQueryClient()
+
+// 手动设置查询数据
+queryClient.setQueryData(['user', userId], userData)
+
+// 使特定查询失效
+queryClient.invalidateQueries({ queryKey: ['users'] })
+
+// 移除查询
+queryClient.removeQueries(['user', userId])
+
+// 获取查询数据
+const userData = queryClient.getQueryData(['user', userId])
+```
+
+## 🎯 实际应用场景
+
+### 1. 列表页面数据获取
+
+列表不需要使用这个，使用封装好的 useTable 即可
+
+### 2. 详情页面数据获取
+
+```vue
+<template>
+  <div v-if="isLoading">
+    <ElSkeleton />
+  </div>
+  <div v-else-if="error">
+    <ElResult icon="error" title="加载失败" :sub-title="error.message">
+      <template #extra>
+        <ElButton @click="refetch">重试</ElButton>
+      </template>
+    </ElResult>
+  </div>
+  <div v-else>
+    <h1>{{ data?.name }}</h1>
+    <p>{{ data?.description }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useQuery } from '@tanstack/vue-query'
+import { userApi } from '@/api'
+
+interface Props {
+  userId: number
+}
+
+const props = defineProps<Props>()
+
+const { isLoading, error, data, refetch } = useQuery({
+  queryKey: computed(() => ['user', props.userId]),
+  queryFn: () => userApi.getUserDetail(props.userId),
+  enabled: computed(() => !!props.userId)
+})
+</script>
+```
+
+### 3. 表单提交和数据更新
+
+```vue
+<template>
+  <ElForm @submit="handleSubmit">
+    <ElFormItem label="姓名">
+      <ElInput v-model="form.name" />
+    </ElFormItem>
+    <ElFormItem>
+      <ElButton 
+        type="primary" 
+        @click="handleSubmit"
+        :loading="isLoading"
+      >
+        {{ isLoading ? '保存中...' : '保存' }}
+      </ElButton>
+    </ElFormItem>
+  </ElForm>
+</template>
+
+<script setup lang="ts">
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
+import { userApi } from '@/api'
+
+const queryClient = useQueryClient()
+
+const form = reactive({
+  name: '',
+  email: ''
+})
+
+const { mutate: createUser, isLoading } = useMutation({
+  mutationFn: (userData) => userApi.createUser(userData),
+  onSuccess: (newUser) => {
+    ElMessage.success('创建成功')
+    
+    // 方法1: 使列表查询失效，重新获取
+    queryClient.invalidateQueries(['users'])
+    
+    // 方法2: 手动更新缓存（性能更好）
+    queryClient.setQueryData(['users'], (oldData) => {
+      return {
+        ...oldData,
+        list: [newUser, ...oldData.list]
+      }
+    })
+    
+    // 清空表单
+    Object.assign(form, { name: '', email: '' })
+  },
+  // 不用 onError，因为 ElMessage 已经在httpClient 封装过了
+})
+
+const handleSubmit = () => {
+  createUser(form)
+}
+</script>
+```
+
+### 4. 依赖查询
+
+```vue
+<script setup lang="ts">
+import { useQuery } from '@tanstack/vue-query'
+
+const props = defineProps<{
+  userId: number
+}>()
+
+const otherRefVariable = ref(null)
+
+// 用户列表查询
+const { data: users } = useQuery({
+  queryKey: ['users'],
+  queryFn: () => userApi.getUserList()
+})
+
+// 用户详情查询（依赖于选中的用户ID）
+// 如果是 props 的变量，需要 computed 包裹
+const { data: userDetail, isLoading: isLoadingDetail } = useQuery({
+  queryKey: computed(() => ['user', props.userId]),
+  queryFn: () => userApi.getUserDetail(props.userId),
+  enabled: computed(() => !!props.userId)
+})
+
+// 用户权限查询（依赖于 otherRefVariable）
+// 如果依赖的变量是 ref 且不需要进行计算，则不需要 computed 包裹
+const { data: userPermissions } = useQuery({
+  queryKey: ['userPermissions', otherRefVariable],
+  queryFn: () => userApi.getUserPermissions(otherRefVariable.value),
+  enabled: computed(() => !!userDetail.value)
+})
+</script>
+```
+
+### 5. 无限滚动加载
+
+```vue
+<template>
+  <div class="infinite-list">
+    <div v-for="item in flatData" :key="item.id">
+      {{ item.name }}
+    </div>
+    
+    <div v-if="isFetchingNextPage" class="loading">
+      加载更多...
+    </div>
+    
+    <ElButton 
+      v-if="hasNextPage" 
+      @click="fetchNextPage"
+      :loading="isFetchingNextPage"
+    >
+      加载更多
+    </ElButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useInfiniteQuery } from '@tanstack/vue-query'
+import { userApi } from '@/api'
+
+const {
+  data,
+  fetchNextPage,
+  hasNextPage,
+  isFetchingNextPage
+} = useInfiniteQuery({
+  queryKey: ['users', 'infinite'],
+  queryFn: ({ pageParam = 1 }) => userApi.getUserList({
+    current: pageParam,
+    size: 20
+  }),
+  getNextPageParam: (lastPage, pages) => {
+    // 判断是否还有下一页
+    if (lastPage.current < lastPage.pages) {
+      return lastPage.current + 1
+    }
+    return undefined
+  }
+})
+
+// 展平数据
+const flatData = computed(() => {
+  return data.value?.pages.flatMap(page => page.list) || []
+})
+</script>
+```
+
+## 🔧 高级功能
+
+### 3. 条件查询
+
+```typescript
+const searchQuery = ref('')
+const shouldSearch = computed(() => searchQuery.value.length >= 2)
+
+const { data: searchResults } = useQuery({
+  queryKey: computed(() => ['search', searchQuery.value]),
+  queryFn: () => searchApi.search(searchQuery.value),
+  enabled: shouldSearch,
+  staleTime: 30000 // 搜索结果缓存30秒
+})
+```
+
+## ⚙️ 配置选项
+
+### 常用配置项
+
+```typescript
+useQuery({
+  queryKey: ['key'],
+  queryFn: fetchFunction,
+  
+  // 缓存配置
+  staleTime: 30000,        // 数据新鲜时间
+  gcTime: 300000,          // 垃圾回收时间
+  
+  // 重试配置
+  retry: 3,                // 重试次数
+  retryDelay: 1000,        // 重试延迟
+  
+  // 刷新配置
+  refetchOnMount: true,    // 组件挂载时刷新
+  refetchOnWindowFocus: false, // 窗口聚焦时刷新
+  refetchOnReconnect: true,    // 网络重连时刷新
+  
+  // 条件配置
+  enabled: true,           // 是否启用查询
+  
+  // 占位数据
+  placeholderData: [],     // 占位数据
+  keepPreviousData: true   // 保留之前的数据
+})
+```
+
+## 📋 最佳实践
+
+### 3. 性能优化
+
+```typescript
+// 使用 keepPreviousData 避免加载闪烁
+const { data } = useQuery({
+  queryKey: computed(() => ['users', pagination.value]),
+  queryFn: () => userApi.getUserList(pagination.value),
+  keepPreviousData: true
+})
+```
+
+## 🐛 常见问题
+
+### Q: 数据没有自动更新？
+
+A: 检查查询键是否正确设置为响应式：
+
+```typescript
+// ❌ 错误：查询键不是响应式的
+useQuery({
+  queryKey: ['users', searchQuery.value], // 不会响应变化
+  queryFn: () => api.search(searchQuery.value)
+})
+
+// ✅ 正确：使用 computed 让查询键响应式
+useQuery({
+  queryKey: computed(() => ['users', searchQuery.value]),
+  queryFn: () => api.search(searchQuery.value)
+})
+```
+
+### Q: 如何清除特定查询的缓存？
+
+A: 使用 queryClient 的相关方法：
+
+```typescript
+const queryClient = useQueryClient()
+
+// 使查询失效（会重新获取）
+queryClient.invalidateQueries({ queryKey: ['users'] })
+
+// 移除查询（从缓存中删除）
+queryClient.removeQueries({ queryKey: ['users'] })
+
+// 重置查询（重置为初始状态）
+queryClient.resetQueries({ queryKey: ['users'] })
+```
\ No newline at end of file
diff --git a/src/pages/student/list.vue b/src/pages/student/list.vue
index e34765e..c48b23c 100644
--- a/src/pages/student/list.vue
+++ b/src/pages/student/list.vue
@@ -1,161 +1,339 @@
 <script setup lang="ts">
+import type { StudentInfo } from '@/service/types'
+import { useQuery } from '@tanstack/vue-query'
+import { useDebounceFn, whenever } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
+import { teacherAnalysisExportStudentListUsingPost, teacherAnalysisStudentListUsingPost } from '@/service/laoshichengjifenxi'
+import { useHomeStore } from '@/store/home'
 
-interface Student {
-  id: string
-  name: string
-  studentId: string
-  className: string
-  status: string
-  avatar?: string
-}
-
+const homeStore = useHomeStore()
 const searchQuery = ref('')
-const students = ref<Student[]>([])
 
-// 模拟学生数据
-const mockStudents: Student[] = [
-  {
-    id: '1',
-    name: '张三',
-    studentId: '20230001',
-    className: '一年级1班',
-    status: '在校',
-  },
-  {
-    id: '2',
-    name: '李四',
-    studentId: '20230002',
-    className: '一年级1班',
-    status: '在校',
-  },
-  {
-    id: '3',
-    name: '王五',
-    studentId: '20230003',
-    className: '一年级1班',
-    status: '请假',
-  },
-  {
-    id: '4',
-    name: '赵六',
-    studentId: '20230004',
-    className: '一年级2班',
-    status: '在校',
-  },
-  {
-    id: '5',
-    name: '孙七',
-    studentId: '20230005',
-    className: '一年级2班',
-    status: '在校',
-  },
-]
-
-// 过滤后的学生列表
-const filteredStudents = computed(() => {
-  if (!searchQuery.value) {
-    return students.value
-  }
-
-  const query = searchQuery.value.toLowerCase()
-  return students.value.filter(student =>
-    student.name.toLowerCase().includes(query)
-    || student.studentId.toLowerCase().includes(query),
-  )
+// 检查是否可以加载学生数据
+const canLoadStudents = computed(() => {
+  return homeStore.selectedClassId && homeStore.selectedExamId && homeStore.selectedSubjectId && homeStore.selectedGradeKey
 })
 
-// 搜索处理
-function handleSearch() {
-  // 这里可以添加防抖逻辑
+// 防抖搜索关键词
+const debouncedSearchQuery = ref('')
+const updateDebouncedSearch = useDebounceFn((value: string) => {
+  debouncedSearchQuery.value = value
+}, 300)
+
+// 监听搜索关键词变化
+whenever(() => searchQuery.value, (newValue) => {
+  updateDebouncedSearch(newValue)
+})
+
+// 使用 TanStack Query 获取学生数据
+const {
+  data: studentsData,
+  isLoading: loading,
+  error,
+  refetch,
+} = useQuery({
+  queryKey: computed(() => [
+    'students',
+    homeStore.selectedClassId,
+    homeStore.selectedExamId,
+    homeStore.selectedSubjectId,
+    homeStore.selectedGradeKey,
+    debouncedSearchQuery.value,
+  ]),
+  queryFn: async () => {
+    const response = await teacherAnalysisStudentListUsingPost({
+      body: {
+        class_id: homeStore.selectedClassId!,
+        exam_subject_id: homeStore.selectedSubjectId!,
+        grade_id: homeStore.selectedGradeKey!,
+        keyword: debouncedSearchQuery.value || undefined,
+      },
+    })
+    const responseData = response as any
+    return responseData.data || { attentioned_students: [], other_students: [] }
+  },
+  enabled: computed(() => !!canLoadStudents.value),
+  staleTime: 30000, // 30秒内数据保持新鲜
+  gcTime: 300000, // 5分钟后清理缓存
+})
+
+// 计算学生列表
+const attentionedStudents = computed(() => studentsData.value?.attentioned_students || [])
+const otherStudents = computed(() => studentsData.value?.other_students || [])
+
+// 获取排名变化图标
+function getRankChangeIcon(diff?: number) {
+  if (!diff || diff === 0)
+    return ''
+  return diff > 0 ? 'i-fluent:arrow-up-20-filled' : 'i-fluent:arrow-down-20-filled'
+}
+
+// 获取排名变化颜色
+function getRankChangeColor(diff?: number) {
+  if (!diff || diff === 0)
+    return 'text-gray-400'
+  return diff > 0 ? 'text-red-500' : 'text-green-500'
 }
 
 // 跳转到学生详情
-function goToStudentDetail(student: Student) {
+function goToStudentDetail(student: StudentInfo) {
   uni.navigateTo({
-    url: `/pages/student/detail?id=${student.id}`,
+    url: `/pages/student/detail?id=${student.info_id}`,
   })
 }
 
-// 加载学生数据
-async function loadStudents() {
+// 切换收藏状态
+function toggleFavorite(student: StudentInfo) {
+  uni.showToast({
+    title: '功能开发中',
+    icon: 'none',
+  })
+}
+
+// 下载功能
+async function handleDownload() {
   try {
-    // 这里可以调用实际的API
-    students.value = mockStudents
+    await teacherAnalysisExportStudentListUsingPost({
+      body: {
+        class_id: homeStore.selectedClassId!,
+        exam_subject_id: homeStore.selectedSubjectId!,
+        grade_id: homeStore.selectedGradeKey!,
+      },
+    })
   }
   catch (error) {
-    console.error('加载学生数据失败:', error)
+    console.error('下载学生数据失败:', error)
     uni.showToast({
-      title: '加载失败',
+      title: '下载失败',
       icon: 'error',
     })
   }
 }
 
-onMounted(() => {
-  loadStudents()
+// 分享功能
+function handleShare() {
+  uni.showToast({
+    title: '分享功能开发中',
+    icon: 'none',
+  })
+}
+
+// 处理搜索输入
+function handleSearch() {
+  // 搜索逻辑已通过 whenever 和防抖处理
+}
+
+// 处理查询错误
+whenever(() => error.value, (err) => {
+  if (err) {
+    console.error('加载学生数据失败:', err)
+    uni.showToast({
+      title: '加载失败',
+      icon: 'error',
+    })
+  }
+})
+
+onMounted(async () => {
+  // 初始化选项数据
+  if (homeStore.examOptions.length === 0) {
+    await homeStore.fetchOptions()
+  }
 })
 </script>
 
 <template>
-  <view>
-    <!-- 头部 -->
-    <view class="border-b border-gray-100 bg-white px-4 py-3">
-      <text class="text-lg text-gray-800 font-semibold">学生名单</text>
+  <view class="min-h-screen bg-gray-50">
+    <!-- 标题栏 -->
+    <view class="relative flex items-center justify-between border-b border-gray-100 bg-white px-4 py-3">
+      <view class="flex-1 text-center">
+        <text class="text-lg text-gray-800 font-semibold">学生名单</text>
+      </view>
+      <view class="absolute right-4 flex items-center gap-3">
+        <wd-button
+          type="icon"
+          size="small"
+          @click="handleDownload"
+        >
+          <view class="i-fluent:arrow-download-20-regular text-lg" />
+        </wd-button>
+        <wd-button
+          type="icon"
+          size="small"
+          @click="handleShare"
+        >
+          <view class="i-fluent:share-20-regular text-lg" />
+        </wd-button>
+      </view>
     </view>
 
-    <!-- 搜索栏 -->
+    <!-- 选择器区域 -->
     <view class="border-b border-gray-100 bg-white px-4 py-3">
-      <view class="relative">
-        <input
-          v-model="searchQuery"
-          class="h-10 w-full rounded-full bg-gray-100 pl-10 pr-4 text-sm placeholder-gray-500"
-          placeholder="搜索学生姓名或学号"
-          @input="handleSearch"
-        >
-        <uni-icons
-          type="search"
-          size="18"
-          color="#9CA3AF"
-          class="absolute left-3 top-1/2 -translate-y-1/2"
+      <wd-drop-menu>
+        <!-- 班级选择 -->
+        <wd-drop-menu-item
+          v-model="homeStore.selectedClassId"
+          :options="homeStore.classOptions"
         />
+        <!-- 考试选择 -->
+        <wd-drop-menu-item
+          v-model="homeStore.selectedExamId"
+          :options="homeStore.examOptions"
+        />
+        <!-- 科目选择 -->
+        <wd-drop-menu-item
+          v-model="homeStore.selectedSubjectId"
+          :options="homeStore.subjectOptions"
+        />
+      </wd-drop-menu>
+    </view>
+
+    <!-- 搜索框 -->
+    <view class="border-b border-gray-100 bg-white px-4 py-3">
+      <wd-search
+        v-model="searchQuery"
+        placeholder="请输入学生姓名"
+        hide-cancel
+        @input="handleSearch"
+      />
+    </view>
+
+    <!-- 重点关注的学生 -->
+    <view v-if="attentionedStudents.length > 0" class="mt-4">
+      <view class="flex items-center px-4 py-2">
+        <view class="i-fluent:star-20-filled mr-2 text-yellow-500" />
+        <text class="text-sm text-gray-700 font-medium">重点关注的学生</text>
       </view>
+
+      <wd-cell-group border custom-class="mx-4 rounded-lg overflow-hidden">
+        <wd-cell
+          v-for="(student, index) in attentionedStudents"
+          :key="student.info_id"
+          :is-link="true"
+          @click="goToStudentDetail(student)"
+        >
+          <template #icon>
+            <view class="mr-3 h-8 w-8 flex items-center justify-center rounded-full bg-red-100">
+              <text class="text-sm text-red-600 font-semibold">{{ index + 1 }}</text>
+            </view>
+          </template>
+
+          <template #title>
+            <text class="text-base text-gray-800 font-medium">
+              {{ student.student_name }}
+            </text>
+          </template>
+
+          <template #value>
+            <view class="flex items-center gap-3">
+              <!-- 分数 -->
+              <text class="text-base text-gray-800 font-semibold">
+                {{ student.full_score || '--' }}分
+              </text>
+
+              <!-- 排名变化 -->
+              <view class="flex items-center">
+                <view
+                  v-if="getRankChangeIcon(student.class_diff_rank)"
+                  :class="[getRankChangeIcon(student.class_diff_rank), getRankChangeColor(student.class_diff_rank)]"
+                  class="mr-1 h-4 w-4"
+                />
+                <text :class="getRankChangeColor(student.class_diff_rank)" class="text-sm">
+                  {{ Math.abs(student.class_diff_rank || 0) }}名
+                </text>
+              </view>
+
+              <!-- 收藏按钮 -->
+              <wd-button
+                type="icon"
+                size="small"
+                @click.stop="toggleFavorite(student)"
+              >
+                <view class="i-fluent:star-20-filled text-yellow-500" />
+              </wd-button>
+            </view>
+          </template>
+        </wd-cell>
+      </wd-cell-group>
     </view>
 
     <!-- 学生列表 -->
-    <view class="flex-1 p-4">
-      <view
-        v-for="student in filteredStudents"
-        :key="student.id"
-        class="mb-3 flex items-center border border-gray-100 rounded-xl bg-white p-4 shadow-sm"
-        @tap="goToStudentDetail(student)"
-      >
-        <!-- 头像 -->
-        <view class="mr-3 h-12 w-12 flex items-center justify-center rounded-full bg-blue-100">
-          <text class="text-base text-blue-600 font-semibold">{{ student.name.slice(-2) }}</text>
-        </view>
-
-        <!-- 学生信息 -->
-        <view class="flex-1">
-          <view class="mb-1 flex items-center justify-between">
-            <text class="text-base text-gray-800 font-semibold">{{ student.name }}</text>
-            <text class="text-xs text-gray-500">{{ student.status }}</text>
-          </view>
-          <view class="flex items-center text-sm text-gray-600">
-            <text class="mr-4">学号：{{ student.studentId }}</text>
-            <text>班级：{{ student.className }}</text>
-          </view>
-        </view>
-
-        <!-- 右箭头 -->
-        <uni-icons type="right" size="16" color="#D1D5DB" />
+    <view v-if="otherStudents.length > 0" class="mt-4">
+      <view class="px-4 py-2">
+        <text class="text-sm text-gray-700 font-medium">学生列表</text>
       </view>
 
-      <!-- 空状态 -->
-      <view v-if="filteredStudents.length === 0" class="flex flex-col items-center justify-center py-20">
-        <uni-icons type="info" size="48" color="#D1D5DB" />
-        <text class="mt-2 text-gray-500">暂无学生数据</text>
-      </view>
+      <wd-cell-group border custom-class="mx-4 rounded-lg overflow-hidden">
+        <wd-cell
+          v-for="(student, index) in otherStudents"
+          :key="student.info_id"
+          :is-link="true"
+          @click="goToStudentDetail(student)"
+        >
+          <template #icon>
+            <view class="mr-3 h-8 w-8 flex items-center justify-center rounded-full bg-gray-100">
+              <text class="text-sm text-gray-600 font-semibold">
+                {{ (attentionedStudents.length + index + 1) }}
+              </text>
+            </view>
+          </template>
+
+          <template #title>
+            <text class="text-base text-gray-800 font-medium">
+              {{ student.student_name }}
+            </text>
+          </template>
+
+          <template #value>
+            <view class="flex items-center gap-3">
+              <!-- 分数 -->
+              <text class="text-base text-gray-800 font-semibold">
+                {{ student.full_score || '--' }}分
+              </text>
+
+              <!-- 排名变化 -->
+              <view class="flex items-center">
+                <view
+                  v-if="getRankChangeIcon(student.class_diff_rank)"
+                  :class="[getRankChangeIcon(student.class_diff_rank), getRankChangeColor(student.class_diff_rank)]"
+                  class="mr-1 h-4 w-4"
+                />
+                <text :class="getRankChangeColor(student.class_diff_rank)" class="text-sm">
+                  {{ Math.abs(student.class_diff_rank || 0) }}名
+                </text>
+              </view>
+
+              <!-- 收藏按钮 -->
+              <wd-button
+                type="icon"
+                size="small"
+                @click.stop="toggleFavorite(student)"
+              >
+                <view class="i-fluent:star-20-regular text-gray-400" />
+              </wd-button>
+            </view>
+          </template>
+        </wd-cell>
+      </wd-cell-group>
+    </view>
+
+    <!-- 空状态 -->
+    <wd-status-tip
+      v-if="!loading && !canLoadStudents"
+      image="search"
+      tip="请选择班级、考试和科目"
+    />
+
+    <wd-status-tip
+      v-else-if="!loading && canLoadStudents && attentionedStudents.length === 0 && otherStudents.length === 0"
+      image="search"
+      tip="暂无学生数据"
+    />
+
+    <!-- 加载状态 -->
+    <view v-if="loading" class="flex items-center justify-center py-20">
+      <wd-loading />
+      <text class="ml-2 text-gray-500">加载中...</text>
     </view>
   </view>
 </template>
diff --git a/src/service/index.ts b/src/service/index.ts
index 83863d1..0db788c 100644
--- a/src/service/index.ts
+++ b/src/service/index.ts
@@ -5,8 +5,8 @@ export * from './displayEnumLabel';
 
 export * from './renzheng';
 export * from './banjifenxi';
-export * from './shujuzidianxiang';
-export * from './shujuzidianleixing';
+export * from './shujuzidixiang';
+export * from './shujuzidileixing';
 export * from './kaoshitongji';
 export * from './wenjianguanli';
 export * from './wenjianqiepianguanli';
diff --git a/src/service/shujuzidianleixing.ts b/src/service/shujuzidileixing.ts
similarity index 100%
rename from src/service/shujuzidianleixing.ts
rename to src/service/shujuzidileixing.ts
diff --git a/src/service/shujuzidianxiang.ts b/src/service/shujuzidixiang.ts
similarity index 100%
rename from src/service/shujuzidianxiang.ts
rename to src/service/shujuzidixiang.ts
diff --git a/wot-design-ui-components.md b/wot-design-ui-components.md
new file mode 100644
index 0000000..51e522b
--- /dev/null
+++ b/wot-design-ui-components.md
@@ -0,0 +1,1844 @@
+# wot-design-ui 组件完整指南
+
+wot-design-ui 是一个专为移动端设计的 Vue 3 组件库，提供丰富的组件和强大的功能，支持微信小程序、支付宝小程序、H5 等多个平台。
+
+## 基础组件
+
+### wd-button
+按钮组件，用于触发操作，支持多种类型、尺寸和状态。
+
+**基础用法：**
+```html
+<!-- 基本按钮 -->
+<wd-button customClass="flex-grow">默认按钮</wd-button>
+<wd-button customClass="flex-grow" type="primary">主要按钮</wd-button>
+<wd-button customClass="flex-grow" type="success">成功按钮</wd-button>
+<wd-button customClass="flex-grow" type="warning">警告按钮</wd-button>
+<wd-button customClass="flex-grow" type="error">危险按钮</wd-button>
+
+<!-- 不同尺寸 -->
+<wd-button customClass="flex-grow" size="small">小号按钮</wd-button>
+<wd-button customClass="flex-grow" size="medium">中号按钮</wd-button>
+<wd-button customClass="flex-grow" size="large">大号按钮</wd-button>
+
+<!-- 特殊状态 -->
+<wd-button customClass="flex-grow" disabled>禁用按钮</wd-button>
+<wd-button customClass="flex-grow" loading>加载中</wd-button>
+<wd-button customClass="flex-grow" plain>幽灵按钮</wd-button>
+<wd-button customClass="flex-grow" block>块状按钮</wd-button>
+
+<!-- 图标按钮 -->
+<wd-button icon="search">搜索</wd-button>
+<wd-button type="icon" icon="picture"></wd-button>
+```
+
+### wd-icon
+
+不需要使用，所有需要图标的地方都可以这样
+<view class="i-fluent:access-time-20-filled size-20rpx" />
+
+### wd-cell
+单元格组件，列表中的单个展示项，可单独使用或与 cell-group 组合。
+
+**基础用法：**
+```html
+<!-- 单独使用 -->
+<wd-cell title="标题文字" value="内容" />
+
+<!-- 组合使用 -->
+<wd-cell-group border>
+  <wd-cell title="标题文字" value="内容" />
+  <wd-cell title="标题文字" label="描述信息" value="内容" />
+  <wd-cell title="标题文字" icon="setting" value="内容" is-link />
+  <wd-cell title="跳转页面" is-link to="/pages/detail/index" />
+</wd-cell-group>
+
+<!-- 自定义内容 -->
+<wd-cell title="开关">
+  <wd-switch v-model="switchValue" />
+</wd-cell>
+```
+
+### wd-cell-group
+单元格组，用于包装多个 cell 组件。
+
+**基础用法：**
+```html
+<wd-cell-group title="基础信息" border>
+  <wd-cell title="姓名" value="张三" />
+  <wd-cell title="手机号" value="13800138000" />
+</wd-cell-group>
+```
+
+### wd-tag
+标签组件，用于标记和分类。
+
+**基础用法：**
+```html
+<!-- 基本标签 -->
+<wd-tag>默认标签</wd-tag>
+<wd-tag type="primary">主要标签</wd-tag>
+<wd-tag type="success">成功标签</wd-tag>
+<wd-tag type="warning">警告标签</wd-tag>
+<wd-tag type="error">错误标签</wd-tag>
+
+<!-- 特殊样式 -->
+<wd-tag plain>朴素标签</wd-tag>
+<wd-tag round>圆角标签</wd-tag>
+<wd-tag closable @close="handleClose">可关闭</wd-tag>
+
+<!-- 自定义颜色 -->
+<wd-tag color="#7232dd">自定义颜色</wd-tag>
+```
+
+### wd-badge
+徽标组件，显示消息数量或状态点。
+
+**基础用法：**
+```html
+<!-- 数字徽标 -->
+<wd-badge :value="5">
+  <wd-button>按钮</wd-button>
+</wd-badge>
+
+<!-- 最大值限制 -->
+<wd-badge :value="100" :max="99">
+  <wd-button>按钮</wd-button>
+</wd-badge>
+
+<!-- 小红点 -->
+<wd-badge is-dot>
+  <wd-button>按钮</wd-button>
+</wd-badge>
+
+<!-- 独立使用 -->
+<wd-badge :value="10" />
+```
+
+### wd-card
+卡片容器，用于包装内容。
+
+**基础用法：**
+```html
+<wd-card header="卡片标题">
+  <view>卡片内容</view>
+  <template #footer>
+    <wd-button size="small">操作按钮</wd-button>
+  </template>
+</wd-card>
+```
+
+### wd-divider
+分割线组件，用于分隔内容。
+
+**基础用法：**
+```html
+<!-- 基本分割线 -->
+<wd-divider />
+
+<!-- 带文字的分割线 -->
+<wd-divider>分割文字</wd-divider>
+
+<!-- 不同位置的文字 -->
+<wd-divider content-position="left">左侧文字</wd-divider>
+<wd-divider content-position="right">右侧文字</wd-divider>
+
+<!-- 虚线分割线 -->
+<wd-divider dashed>虚线分割</wd-divider>
+```
+
+### wd-gap
+间距组件，提供空白间距。
+
+**基础用法：**
+```html
+<!-- 基本间距 -->
+<wd-gap />
+
+<!-- 自定义大小 -->
+<wd-gap size="20px" />
+<wd-gap size="40rpx" />
+
+<!-- 自定义背景色 -->
+<wd-gap size="30px" bg-color="#f5f5f5" />
+```
+
+## 布局组件
+
+### wd-layout
+布局容器，提供基础的页面布局。
+
+**基础用法：**
+```html
+<wd-layout>
+  <wd-header>头部</wd-header>
+  <wd-main>主体内容</wd-main>
+  <wd-footer>底部</wd-footer>
+</wd-layout>
+```
+
+### wd-grid
+网格布局，用于展示同类信息。
+
+**基础用法：**
+```html
+<wd-grid :column-num="3" border>
+  <wd-grid-item
+    v-for="item in 6"
+    :key="item"
+    icon="picture"
+    :text="`选项${item}`"
+    @click="handleClick"
+  />
+</wd-grid>
+
+<!-- 自定义内容 -->
+<wd-grid :column-num="2">
+  <wd-grid-item>
+    <wd-icon name="home" size="28px" />
+    <text>首页</text>
+  </wd-grid-item>
+</wd-grid>
+```
+
+### wd-row / wd-col
+栅格布局系统，基于24栅格。
+
+**基础用法：**
+```html
+<!-- 基础栅格 -->
+<wd-row>
+  <wd-col :span="12">col-12</wd-col>
+  <wd-col :span="12">col-12</wd-col>
+</wd-row>
+
+<!-- 分栏间隔 -->
+<wd-row :gutter="20">
+  <wd-col :span="6">col-6</wd-col>
+  <wd-col :span="6">col-6</wd-col>
+  <wd-col :span="6">col-6</wd-col>
+  <wd-col :span="6">col-6</wd-col>
+</wd-row>
+
+<!-- 偏移列 -->
+<wd-row>
+  <wd-col :span="6" :offset="6">偏移6列</wd-col>
+</wd-row>
+```
+
+### wd-sticky
+粘性定位组件，滚动时可以固定在顶部。
+
+**基础用法：**
+```html
+<!-- 基础粘性定位 -->
+<wd-sticky>
+  <wd-button type="primary">粘性元素</wd-button>
+</wd-sticky>
+
+<!-- 自定义粘性距离 -->
+<wd-sticky :offset-top="50">
+  <wd-navbar title="粘性导航" />
+</wd-sticky>
+```
+
+## 表单组件
+
+### wd-form
+表单容器，提供数据验证和收集功能。
+
+**基础用法：**
+```html
+<template>
+  <wd-form ref="form" :model="model" :rules="rules">
+    <wd-cell-group border>
+      <wd-input
+        label="用户名"
+        prop="username"
+        v-model="model.username"
+        placeholder="请输入用户名"
+      />
+      <wd-input
+        label="密码"
+        prop="password"
+        type="password"
+        v-model="model.password"
+        placeholder="请输入密码"
+      />
+      <wd-picker
+        label="城市"
+        prop="city"
+        :columns="cityOptions"
+        v-model="model.city"
+      />
+    </wd-cell-group>
+    <view class="footer">
+      <wd-button type="primary" @click="submit" block>提交</wd-button>
+    </view>
+  </wd-form>
+</template>
+
+<script setup>
+const form = ref()
+const model = reactive({
+  username: '',
+  password: '',
+  city: ''
+})
+
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名' }
+  ],
+  password: [
+    { required: true, message: '请输入密码' },
+    { pattern: /^.{6,}$/, message: '密码至少6位' }
+  ]
+}
+
+const submit = () => {
+  form.value.validate().then(({ valid }) => {
+    if (valid) {
+      console.log('验证通过', model)
+    }
+  })
+}
+</script>
+```
+
+### wd-input
+输入框组件，支持多种输入类型和验证。
+
+**基础用法：**
+```html
+<!-- 基础输入框 -->
+<wd-input v-model="value" placeholder="请输入内容" />
+
+<!-- 不同类型 -->
+<wd-input type="number" v-model="number" placeholder="数字输入" />
+<wd-input type="password" v-model="password" placeholder="密码输入" />
+<wd-input type="tel" v-model="phone" placeholder="手机号" />
+
+<!-- 带标签的输入框 -->
+<wd-input label="姓名" v-model="name" placeholder="请输入姓名" />
+
+<!-- 功能增强 -->
+<wd-input
+  v-model="text"
+  clearable
+  show-word-limit
+  :maxlength="20"
+  placeholder="可清空，显示字数"
+/>
+
+<!-- 前后图标 -->
+<wd-input
+  v-model="search"
+  prefix-icon="search"
+  suffix-icon="scan"
+  placeholder="搜索"
+/>
+
+<!-- 验证状态 -->
+<wd-input
+  v-model="error"
+  label="错误状态"
+  error
+  placeholder="错误输入"
+/>
+```
+
+### wd-textarea
+多行文本输入框。
+
+**基础用法：**
+```html
+<!-- 基础文本域 -->
+<wd-textarea v-model="content" placeholder="请输入内容" />
+
+<!-- 带标签和字数限制 -->
+<wd-textarea
+  label="备注"
+  v-model="remark"
+  :maxlength="200"
+  show-word-limit
+  placeholder="请输入备注信息"
+/>
+
+<!-- 自动调整高度 -->
+<wd-textarea
+  v-model="autoText"
+  autosize
+  placeholder="自动调整高度"
+/>
+
+<!-- 固定行数 -->
+<wd-textarea
+  v-model="fixedText"
+  :rows="4"
+  placeholder="固定4行"
+/>
+```
+
+### wd-picker
+选择器组件，支持单列和多列选择。
+
+**基础用法：**
+```html
+<template>
+  <!-- 单列选择 -->
+  <wd-picker
+    label="城市"
+    :columns="cities"
+    v-model="selectedCity"
+    @confirm="handleConfirm"
+  />
+
+  <!-- 多列选择 -->
+  <wd-picker
+    label="时间"
+    :columns="timeColumns"
+    v-model="selectedTime"
+  />
+
+  <!-- 多级联动 -->
+  <wd-picker
+    label="地区"
+    :columns="areaColumns"
+    :column-change="handleAreaChange"
+    v-model="selectedArea"
+  />
+
+  <!-- 自定义展示 -->
+  <wd-picker
+    :columns="options"
+    v-model="value"
+    :display-format="formatDisplay"
+  />
+</template>
+
+<script setup>
+const cities = ['北京', '上海', '广州', '深圳']
+const selectedCity = ref('北京')
+
+const timeColumns = [
+  ['上午', '下午'],
+  ['09:00', '10:00', '11:00', '14:00', '15:00']
+]
+const selectedTime = ref(['上午', '09:00'])
+
+const formatDisplay = (items) => {
+  return items.join(' - ')
+}
+</script>
+```
+
+### wd-datetime-picker
+日期时间选择器。
+
+**基础用法：**
+```html
+<!-- 日期选择 -->
+<wd-datetime-picker
+  label="日期"
+  type="date"
+  v-model="date"
+/>
+
+<!-- 时间选择 -->
+<wd-datetime-picker
+  label="时间"
+  type="time"
+  v-model="time"
+/>
+
+<!-- 日期时间选择 -->
+<wd-datetime-picker
+  label="日期时间"
+  type="datetime"
+  v-model="datetime"
+/>
+
+<!-- 年月选择 -->
+<wd-datetime-picker
+  label="年月"
+  type="year-month"
+  v-model="yearMonth"
+/>
+
+<!-- 自定义范围 -->
+<wd-datetime-picker
+  label="自定义范围"
+  type="date"
+  :min-date="new Date(2020, 0, 1)"
+  :max-date="new Date(2025, 11, 31)"
+  v-model="customDate"
+/>
+```
+
+### wd-calendar
+日历选择器，支持多种选择模式。
+
+**基础用法：**
+```html
+<!-- 单日期选择 -->
+<wd-calendar
+  label="日期"
+  v-model="singleDate"
+  @confirm="handleDateConfirm"
+/>
+
+<!-- 多日期选择 -->
+<wd-calendar
+  label="多选日期"
+  type="dates"
+  v-model="multipleDates"
+/>
+
+<!-- 日期范围选择 -->
+<wd-calendar
+  label="日期范围"
+  type="daterange"
+  v-model="dateRange"
+/>
+
+<!-- 周选择 -->
+<wd-calendar
+  label="周选择"
+  type="week"
+  v-model="week"
+/>
+
+<!-- 月选择 -->
+<wd-calendar
+  label="月选择"
+  type="month"
+  v-model="month"
+/>
+
+<!-- 快捷选择 -->
+<wd-calendar
+  label="快捷选择"
+  type="daterange"
+  :show-confirm="false"
+  v-model="quickDate"
+/>
+
+<!-- 自定义格式化 -->
+<wd-calendar
+  label="自定义格式"
+  v-model="formatDate"
+  :formatter="dateFormatter"
+  :display-format="displayFormatter"
+/>
+```
+
+### wd-col-picker
+多列选择器，支持级联选择。
+
+**基础用法：**
+```html
+<template>
+  <wd-col-picker
+    label="省市区"
+    :columns="areaData"
+    :column-change="handleAreaChange"
+    v-model="selectedArea"
+  />
+</template>
+
+<script setup>
+const areaData = ref([
+  [
+    { label: '北京市', value: '110000' },
+    { label: '广东省', value: '440000' }
+  ]
+])
+
+const handleAreaChange = ({ selectedItem, resolve, finish }) => {
+  // 根据选中项加载下级数据
+  if (selectedItem.value === '110000') {
+    resolve([
+      { label: '东城区', value: '110101' },
+      { label: '西城区', value: '110102' }
+    ])
+  } else {
+    finish() // 没有下级数据
+  }
+}
+</script>
+```
+
+### wd-select-picker
+单复选选择器。
+
+**基础用法：**
+```html
+<!-- 单选 -->
+<wd-select-picker
+  label="单选"
+  :columns="options"
+  v-model="singleValue"
+/>
+
+<!-- 多选 -->
+<wd-select-picker
+  label="多选"
+  type="checkbox"
+  :columns="options"
+  v-model="multipleValue"
+/>
+
+<!-- 分组选择 -->
+<wd-select-picker
+  label="分组选择"
+  :columns="groupOptions"
+  v-model="groupValue"
+/>
+```
+
+### wd-checkbox
+复选框组件。
+
+**基础用法：**
+```html
+<!-- 基础复选框 -->
+<wd-checkbox v-model="checked">同意协议</wd-checkbox>
+
+<!-- 复选框组 -->
+<wd-checkbox-group v-model="checkedList">
+  <wd-checkbox value="apple">苹果</wd-checkbox>
+  <wd-checkbox value="banana">香蕉</wd-checkbox>
+  <wd-checkbox value="orange">橙子</wd-checkbox>
+</wd-checkbox-group>
+
+<!-- 全选 -->
+<wd-checkbox
+  v-model="checkAll"
+  :indeterminate="indeterminate"
+  @change="handleCheckAllChange"
+>
+  全选
+</wd-checkbox>
+
+<!-- 禁用状态 -->
+<wd-checkbox disabled>禁用选项</wd-checkbox>
+
+<!-- 自定义形状 -->
+<wd-checkbox shape="button" v-model="buttonCheck">
+  按钮样式
+</wd-checkbox>
+```
+
+### wd-radio
+单选框组件。
+
+**基础用法：**
+```html
+<!-- 基础单选框 -->
+<wd-radio-group v-model="radioValue">
+  <wd-radio value="1">选项一</wd-radio>
+  <wd-radio value="2">选项二</wd-radio>
+  <wd-radio value="3">选项三</wd-radio>
+</wd-radio-group>
+
+<!-- 按钮样式 -->
+<wd-radio-group v-model="buttonValue" shape="button">
+  <wd-radio value="large">大</wd-radio>
+  <wd-radio value="medium">中</wd-radio>
+  <wd-radio value="small">小</wd-radio>
+</wd-radio-group>
+
+<!-- 禁用选项 -->
+<wd-radio-group v-model="disabledValue">
+  <wd-radio value="1">正常选项</wd-radio>
+  <wd-radio value="2" disabled>禁用选项</wd-radio>
+</wd-radio-group>
+
+<!-- 内联布局 -->
+<wd-radio-group v-model="inlineValue" inline>
+  <wd-radio value="1">选项1</wd-radio>
+  <wd-radio value="2">选项2</wd-radio>
+</wd-radio-group>
+```
+
+### wd-switch
+开关组件。
+
+**基础用法：**
+```html
+<!-- 基础开关 -->
+<wd-switch v-model="switchValue" />
+
+<!-- 自定义颜色 -->
+<wd-switch
+  v-model="colorSwitch"
+  active-color="#13ce66"
+  inactive-color="#ff4949"
+/>
+
+<!-- 自定义大小 -->
+<wd-switch v-model="sizeSwitch" size="24px" />
+
+<!-- 禁用状态 -->
+<wd-switch v-model="disabledSwitch" disabled />
+
+<!-- 异步控制 -->
+<wd-switch
+  v-model="asyncSwitch"
+  :before-change="beforeChange"
+/>
+
+<!-- 自定义文案 -->
+<wd-switch
+  v-model="textSwitch"
+  active-text="开启"
+  inactive-text="关闭"
+/>
+```
+
+### wd-slider
+滑块组件，用于在给定的范围内选择值。
+
+**基础用法：**
+```html
+<!-- 基础滑块 -->
+<wd-slider v-model="sliderValue" />
+
+<!-- 设置范围 -->
+<wd-slider
+  v-model="rangeValue"
+  :min="0"
+  :max="100"
+  :step="10"
+/>
+
+<!-- 显示刻度 -->
+<wd-slider
+  v-model="markValue"
+  :marks="marks"
+  show-marks
+/>
+
+<!-- 范围选择 -->
+<wd-slider
+  v-model="doubleValue"
+  range
+/>
+
+<!-- 垂直滑块 -->
+<wd-slider
+  v-model="verticalValue"
+  vertical
+  height="200px"
+/>
+
+<!-- 禁用状态 -->
+<wd-slider v-model="disabledSlider" disabled />
+```
+
+### wd-rate
+评分组件。
+
+**基础用法：**
+```html
+<!-- 基础评分 -->
+<wd-rate v-model="rateValue" />
+
+<!-- 自定义星星数量 -->
+<wd-rate v-model="customRate" :count="10" />
+
+<!-- 允许半星 -->
+<wd-rate v-model="halfRate" allow-half />
+
+<!-- 自定义颜色 -->
+<wd-rate
+  v-model="colorRate"
+  active-color="#ff9500"
+  void-color="#c7c7c7"
+/>
+
+<!-- 只读状态 -->
+<wd-rate v-model="readonlyRate" readonly />
+
+<!-- 自定义图标 -->
+<wd-rate
+  v-model="iconRate"
+  icon="heart"
+  void-icon="heart-outline"
+/>
+
+<!-- 显示分数 -->
+<wd-rate v-model="scoreRate" show-text />
+```
+
+### wd-input-number
+数字输入框，用于输入数字。
+
+**基础用法：**
+```html
+<!-- 基础数字输入 -->
+<wd-input-number v-model="numberValue" />
+
+<!-- 设置范围和步长 -->
+<wd-input-number
+  v-model="rangeNumber"
+  :min="1"
+  :max="10"
+  :step="0.1"
+/>
+
+<!-- 精度控制 -->
+<wd-input-number
+  v-model="precisionNumber"
+  :precision="2"
+  :step="0.1"
+/>
+
+<!-- 禁用状态 -->
+<wd-input-number v-model="disabledNumber" disabled />
+
+<!-- 自定义大小 -->
+<wd-input-number v-model="sizeNumber" size="large" />
+
+<!-- 严格步数 -->
+<wd-input-number
+  v-model="strictNumber"
+  :step="2"
+  step-strictly
+/>
+```
+
+### wd-upload
+
+文件上传组件，但不需要你使用它。我有更高级的封装，位于 src/components/FileUpload/FileUpload.vue
+
+你可以直接使用
+
+### wd-search
+搜索框组件。
+
+**基础用法：**
+```html
+<!-- 基础搜索框 -->
+<wd-search v-model="searchValue" placeholder="请输入搜索关键词" />
+
+<!-- 显示搜索按钮 -->
+<wd-search
+  v-model="searchText"
+  show-action
+  @search="handleSearch"
+  @cancel="handleCancel"
+/>
+
+<!-- 自定义样式 -->
+<wd-search
+  v-model="customSearch"
+  shape="round"
+  background="#f2f2f2"
+  @search="handleCustomSearch"
+/>
+
+<!-- 禁用状态 -->
+<wd-search v-model="disabledSearch" disabled />
+```
+
+## 反馈组件
+
+### wd-toast
+轻提示组件，用于消息通知、加载提示等。
+
+**基础用法：**
+```html
+<template>
+  <wd-toast />
+  <wd-button @click="showToast">显示提示</wd-button>
+  <wd-button @click="showSuccess">成功提示</wd-button>
+  <wd-button @click="showError">错误提示</wd-button>
+  <wd-button @click="showLoading">加载提示</wd-button>
+</template>
+
+<script setup>
+// 不需要导入 useToast
+const toast = useToast()
+
+const showToast = () => {
+  toast.show('这是一条提示信息')
+}
+
+const showSuccess = () => {
+  toast.success('操作成功')
+}
+
+const showError = () => {
+  toast.error('操作失败，请重试')
+}
+
+const showLoading = () => {
+  toast.loading('加载中...')
+  setTimeout(() => {
+    toast.close()
+  }, 3000)
+}
+
+// 自定义配置
+const showCustom = () => {
+  toast.show({
+    msg: '自定义提示',
+    duration: 5000,
+    position: 'top',
+    iconClass: 'star'
+  })
+}
+</script>
+```
+
+### wd-message-box
+消息弹框组件，用于确认操作、输入等场景。
+
+**基础用法：**
+```html
+<template>
+  <wd-message-box />
+  <wd-button @click="showAlert">警告框</wd-button>
+  <wd-button @click="showConfirm">确认框</wd-button>
+  <wd-button @click="showPrompt">输入框</wd-button>
+</template>
+
+<script setup>
+// 不需要导入 useMessage
+const messageBox = useMessage()
+
+const showAlert = () => {
+  messageBox.alert({
+    title: '提示',
+    msg: '这是一条警告信息'
+  })
+}
+
+const showConfirm = () => {
+  messageBox.confirm({
+    title: '确认',
+    msg: '确定要删除这条记录吗？'
+  }).then(() => {
+    console.log('用户确认')
+  }).catch(() => {
+    console.log('用户取消')
+  })
+}
+
+const showPrompt = () => {
+  messageBox.prompt({
+    title: '输入',
+    msg: '请输入您的姓名',
+    inputPlaceholder: '请输入姓名'
+  }).then(({ value }) => {
+    console.log('输入的值:', value)
+  })
+}
+</script>
+```
+
+### wd-notify
+通知栏组件，用于展示重要的全局消息。
+
+**基础用法：**
+```html
+<template>
+  <wd-notify />
+  <wd-button @click="showNotify">显示通知</wd-button>
+</template>
+
+<script setup>
+// 不需要导入 useNotify
+const notify = useNotify()
+
+const showNotify = () => {
+  notify.show({
+    type: 'primary',
+    message: '这是一条通知消息',
+    duration: 3000
+  })
+}
+
+// 不同类型的通知
+const showSuccess = () => {
+  notify.success('操作成功')
+}
+
+const showWarning = () => {
+  notify.warning('警告信息')
+}
+
+const showError = () => {
+  notify.error('错误信息')
+}
+</script>
+```
+
+### wd-popup
+弹出层组件，支持多种弹出位置和动画效果。
+
+**基础用法：**
+```html
+<template>
+  <!-- 中央弹出 -->
+  <wd-popup v-model="centerShow">
+    <view class="popup-content">
+      中央弹出内容
+    </view>
+  </wd-popup>
+
+  <!-- 底部弹出 -->
+  <wd-popup v-model="bottomShow" position="bottom">
+    <view class="popup-content">
+      底部弹出内容
+    </view>
+  </wd-popup>
+
+  <!-- 左侧弹出 -->
+  <wd-popup v-model="leftShow" position="left">
+    <view class="popup-content">
+      左侧弹出内容
+    </view>
+  </wd-popup>
+
+  <!-- 顶部弹出 -->
+  <wd-popup v-model="topShow" position="top">
+    <view class="popup-content">
+      顶部弹出内容
+    </view>
+  </wd-popup>
+
+  <!-- 右侧弹出 -->
+  <wd-popup v-model="rightShow" position="right">
+    <view class="popup-content">
+      右侧弹出内容
+    </view>
+  </wd-popup>
+
+  <!-- 圆角弹窗 -->
+  <wd-popup v-model="roundShow" round>
+    <view class="popup-content">
+      圆角弹窗
+    </view>
+  </wd-popup>
+
+  <!-- 可关闭弹窗 -->
+  <wd-popup v-model="closableShow" closable>
+    <view class="popup-content">
+      可关闭弹窗
+    </view>
+  </wd-popup>
+</template>
+
+<script setup>
+const centerShow = ref(false)
+const bottomShow = ref(false)
+const leftShow = ref(false)
+const topShow = ref(false)
+const rightShow = ref(false)
+const roundShow = ref(false)
+const closableShow = ref(false)
+</script>
+```
+
+### wd-action-sheet
+动作面板，从底部弹出的操作菜单。
+
+**基础用法：**
+```html
+<template>
+  <wd-action-sheet
+    v-model="show"
+    :actions="actions"
+    @select="handleSelect"
+    @cancel="handleCancel"
+  />
+
+  <!-- 带取消按钮 -->
+  <wd-action-sheet
+    v-model="cancelShow"
+    :actions="actions"
+    cancel-text="取消"
+    @select="handleSelect"
+  />
+
+  <!-- 自定义面板 -->
+  <wd-action-sheet
+    v-model="customShow"
+    :panels="panels"
+    @select="handlePanelSelect"
+  />
+</template>
+
+<script setup>
+const show = ref(false)
+const cancelShow = ref(false)
+const customShow = ref(false)
+
+const actions = [
+  { name: '选项一' },
+  { name: '选项二' },
+  { name: '选项三', color: '#ff4757' },
+  { name: '禁用选项', disabled: true }
+]
+
+const panels = [
+  {
+    iconUrl: 'https://example.com/icon1.png',
+    title: '微信'
+  },
+  {
+    iconUrl: 'https://example.com/icon2.png',
+    title: '微博'
+  }
+]
+
+const handleSelect = ({ item, index }) => {
+  console.log('选中:', item, index)
+}
+
+const handlePanelSelect = ({ item, index }) => {
+  console.log('面板选中:', item, index)
+}
+</script>
+```
+
+### wd-overlay
+遮罩层组件。
+
+**基础用法：**
+```html
+<template>
+  <wd-overlay v-model="overlayShow" @click="hideOverlay">
+    <view class="overlay-content" @click.stop>
+      点击遮罩关闭
+    </view>
+  </wd-overlay>
+</template>
+
+<script setup>
+const overlayShow = ref(false)
+
+const hideOverlay = () => {
+  overlayShow.value = false
+}
+</script>
+```
+
+### wd-status-tip
+缺省页组件，用于显示空状态、网络错误等。
+
+**基础用法：**
+```html
+<!-- 空数据 -->
+<wd-status-tip image="search" tip="暂无搜索结果" />
+
+<!-- 网络错误 -->
+<wd-status-tip image="network" tip="网络不给力">
+  <wd-button @click="retry">重新加载</wd-button>
+</wd-status-tip>
+
+<!-- 自定义图片 -->
+<wd-status-tip :image="customImage" tip="自定义状态">
+  <wd-button type="primary">操作按钮</wd-button>
+</wd-status-tip>
+```
+
+## 展示组件
+
+### wd-collapse
+折叠面板，可以折叠/展开的内容区域。
+
+**基础用法：**
+```html
+<template>
+  <wd-collapse v-model="activeNames">
+    <wd-collapse-item name="1" title="标题1">
+      <view>内容1</view>
+    </wd-collapse-item>
+    <wd-collapse-item name="2" title="标题2">
+      <view>内容2</view>
+    </wd-collapse-item>
+    <wd-collapse-item name="3" title="标题3" disabled>
+      <view>内容3</view>
+    </wd-collapse-item>
+  </wd-collapse>
+
+  <!-- 手风琴模式 -->
+  <wd-collapse v-model="accordionName" accordion>
+    <wd-collapse-item name="1" title="手风琴1">
+      <view>内容1</view>
+    </wd-collapse-item>
+    <wd-collapse-item name="2" title="手风琴2">
+      <view>内容2</view>
+    </wd-collapse-item>
+  </wd-collapse>
+
+  <!-- 自定义标题 -->
+  <wd-collapse v-model="customNames">
+    <wd-collapse-item name="1">
+      <template #title>
+        <view class="custom-title">
+          <wd-icon name="star" />
+          <text>自定义标题</text>
+        </view>
+      </template>
+      <view>自定义内容</view>
+    </wd-collapse-item>
+  </wd-collapse>
+</template>
+
+<script setup>
+const activeNames = ref(['1'])
+const accordionName = ref('1')
+const customNames = ref(['1'])
+</script>
+```
+
+### wd-notice-bar
+通知栏，用于循环播放展示一组消息通知。
+
+**基础用法：**
+```html
+<!-- 基础通知栏 -->
+<wd-notice-bar text="这是一条通知信息" />
+
+<!-- 滚动播放 -->
+<wd-notice-bar 
+  text="这是一条很长的通知信息，会自动滚动播放"
+  scrollable
+/>
+
+<!-- 可关闭 -->
+<wd-notice-bar 
+  text="这是一条可关闭的通知"
+  closeable
+  @close="handleClose"
+/>
+
+<!-- 带图标 -->
+<wd-notice-bar 
+  text="带图标的通知"
+  left-icon="volume"
+  @click="handleClick"
+/>
+
+<!-- 多行显示 -->
+<wd-notice-bar 
+  text="这是一条多行显示的通知信息，内容比较长，需要换行显示"
+  :wrapable="true"
+/>
+
+<!-- 不同类型 -->
+<wd-notice-bar text="普通通知" type="info" />
+<wd-notice-bar text="警告通知" type="warning" />
+<wd-notice-bar text="错误通知" type="error" />
+```
+
+### wd-steps
+步骤条，引导用户按照流程完成任务。
+
+**基础用法：**
+```html
+<template>
+  <!-- 基础步骤条 -->
+  <wd-steps :active="activeStep">
+    <wd-step title="步骤一" content="步骤一的描述信息" />
+    <wd-step title="步骤二" content="步骤二的描述信息" />
+    <wd-step title="步骤三" content="步骤三的描述信息" />
+    <wd-step title="步骤四" content="步骤四的描述信息" />
+  </wd-steps>
+
+  <!-- 垂直步骤条 -->
+  <wd-steps :active="verticalStep" direction="vertical">
+    <wd-step title="订单确认" content="2023-05-01 12:00" />
+    <wd-step title="支付完成" content="2023-05-01 12:05" />
+    <wd-step title="商品发货" content="2023-05-02 10:00" />
+    <wd-step title="确认收货" content="待完成" />
+  </wd-steps>
+
+  <!-- 带图标的步骤条 -->
+  <wd-steps :active="iconStep">
+    <wd-step title="购物车" icon="cart" />
+    <wd-step title="确认订单" icon="bag" />
+    <wd-step title="支付" icon="pay" />
+    <wd-step title="完成" icon="check" />
+  </wd-steps>
+
+  <!-- 错误状态 -->
+  <wd-steps :active="errorStep">
+    <wd-step title="步骤一" />
+    <wd-step title="步骤二" status="error" />
+    <wd-step title="步骤三" />
+  </wd-steps>
+</template>
+
+<script setup>
+const activeStep = ref(1)
+const verticalStep = ref(2)
+const iconStep = ref(2)
+const errorStep = ref(1)
+</script>
+```
+
+### wd-tabs
+标签页组件，用于在不同的内容区域之间进行切换。
+
+**基础用法：**
+```html
+<template>
+  <!-- 基础标签页 -->
+  <wd-tabs v-model="activeTab">
+    <wd-tab title="标签一">
+      <view class="tab-content">内容一</view>
+    </wd-tab>
+    <wd-tab title="标签二">
+      <view class="tab-content">内容二</view>
+    </wd-tab>
+    <wd-tab title="标签三">
+      <view class="tab-content">内容三</view>
+    </wd-tab>
+  </wd-tabs>
+
+  <!-- 粘性定位 -->
+  <wd-tabs v-model="stickyTab" sticky>
+    <wd-tab title="标签一">内容一</wd-tab>
+    <wd-tab title="标签二">内容二</wd-tab>
+  </wd-tabs>
+
+  <!-- 手势滑动 -->
+  <wd-tabs v-model="swipeTab" swipeable>
+    <wd-tab title="可滑动1">内容1</wd-tab>
+    <wd-tab title="可滑动2">内容2</wd-tab>
+  </wd-tabs>
+
+  <!-- 切换动画 -->
+  <wd-tabs v-model="animatedTab" animated>
+    <wd-tab title="动画1">内容1</wd-tab>
+    <wd-tab title="动画2">内容2</wd-tab>
+  </wd-tabs>
+
+  <!-- 禁用标签 -->
+  <wd-tabs v-model="disabledTab">
+    <wd-tab title="正常">正常内容</wd-tab>
+    <wd-tab title="禁用" disabled>禁用内容</wd-tab>
+  </wd-tabs>
+
+  <!-- 带徽标 -->
+  <wd-tabs v-model="badgeTab">
+    <wd-tab title="消息" :badge-props="{ value: 5 }">
+      消息内容
+    </wd-tab>
+    <wd-tab title="通知" :badge-props="{ isDot: true }">
+      通知内容
+    </wd-tab>
+  </wd-tabs>
+</template>
+
+<script setup>
+const activeTab = ref(0)
+const stickyTab = ref(0)
+const swipeTab = ref(0)
+const animatedTab = ref(0)
+const disabledTab = ref(0)
+const badgeTab = ref(0)
+</script>
+```
+
+### wd-swiper
+轮播图组件，用于展示一组图片或内容。
+
+**基础用法：**
+```html
+<template>
+  <!-- 基础轮播 -->
+  <wd-swiper>
+    <wd-swiper-item v-for="item in images" :key="item">
+      <image :src="item" mode="aspectFill" />
+    </wd-swiper-item>
+  </wd-swiper>
+
+  <!-- 自动播放 -->
+  <wd-swiper autoplay :interval="3000">
+    <wd-swiper-item v-for="item in images" :key="item">
+      <image :src="item" mode="aspectFill" />
+    </wd-swiper-item>
+  </wd-swiper>
+
+  <!-- 垂直滚动 -->
+  <wd-swiper direction="vertical" height="200px">
+    <wd-swiper-item v-for="item in images" :key="item">
+      <image :src="item" mode="aspectFill" />
+    </wd-swiper-item>
+  </wd-swiper>
+
+  <!-- 自定义指示器 -->
+  <wd-swiper
+    :indicator-dots="true"
+    indicator-color="rgba(0,0,0,0.3)"
+    indicator-active-color="#fff"
+  >
+    <wd-swiper-item v-for="item in images" :key="item">
+      <image :src="item" mode="aspectFill" />
+    </wd-swiper-item>
+  </wd-swiper>
+
+  <!-- 循环播放 -->
+  <wd-swiper circular>
+    <wd-swiper-item v-for="item in images" :key="item">
+      <image :src="item" mode="aspectFill" />
+    </wd-swiper-item>
+  </wd-swiper>
+</template>
+
+<script setup>
+const images = [
+  'https://example.com/image1.jpg',
+  'https://example.com/image2.jpg',
+  'https://example.com/image3.jpg'
+]
+</script>
+```
+
+### wd-img
+图片组件，增强版的 image 标签。
+
+**基础用法：**
+```html
+<!-- 基础图片 -->
+<wd-img src="https://example.com/image.jpg" />
+
+<!-- 设置宽高 -->
+<wd-img 
+  src="https://example.com/image.jpg"
+  width="200px"
+  height="200px"
+/>
+
+<!-- 填充模式 -->
+<wd-img 
+  src="https://example.com/image.jpg"
+  mode="aspectFill"
+  width="100%"
+  height="200px"
+/>
+
+<!-- 圆形图片 -->
+<wd-img 
+  src="https://example.com/avatar.jpg"
+  round
+  width="80px"
+  height="80px"
+/>
+
+<!-- 懒加载 -->
+<wd-img 
+  src="https://example.com/image.jpg"
+  lazy-load
+/>
+
+<!-- 加载中提示 -->
+<wd-img 
+  src="https://example.com/image.jpg"
+  loading-text="加载中..."
+/>
+
+<!-- 加载失败提示 -->
+<wd-img 
+  src="https://example.com/not-found.jpg"
+  error-text="加载失败"
+  @error="handleError"
+/>
+
+<!-- 预览功能 -->
+<wd-img 
+  src="https://example.com/image.jpg"
+  preview-src-list="[imageUrl1, imageUrl2]"
+  @preview="handlePreview"
+/>
+```
+
+### wd-progress
+进度条组件，用于展示操作的当前进度。
+
+**基础用法：**
+```html
+<!-- 基础进度条 -->
+<wd-progress :percentage="50" />
+
+<!-- 自定义颜色 -->
+<wd-progress :percentage="80" color="#ff4757" />
+
+<!-- 显示百分比 -->
+<wd-progress :percentage="60" show-text />
+
+<!-- 自定义文本 -->
+<wd-progress :percentage="40" show-text text="40%" />
+
+<!-- 不同状态 -->
+<wd-progress :percentage="100" status="success" />
+<wd-progress :percentage="50" status="exception" />
+
+<!-- 自定义高度 -->
+<wd-progress :percentage="70" :stroke-width="8" />
+
+<!-- 条纹动画 -->
+<wd-progress :percentage="60" striped active />
+```
+
+### wd-circle
+环形进度条。
+
+**基础用法：**
+```html
+<!-- 基础环形进度条 -->
+<wd-circle :percentage="75" />
+
+<!-- 自定义大小和颜色 -->
+<wd-circle 
+  :percentage="60"
+  :width="120"
+  color="#ff4757"
+/>
+
+<!-- 显示文本 -->
+<wd-circle :percentage="80" show-text />
+
+<!-- 自定义文本 -->
+<wd-circle :percentage="90">
+  <text>90%</text>
+</wd-circle>
+
+<!-- 渐变色 -->
+<wd-circle 
+  :percentage="70"
+  :color="{ '0%': '#108ee9', '100%': '#87d068' }"
+/>
+```
+
+### wd-table
+表格组件，用于展示行列数据。
+
+**基础用法：**
+```html
+<template>
+  <wd-table :data="tableData" :columns="columns" />
+</template>
+
+<script setup>
+const tableData = [
+  { name: '张三', age: 25, city: '北京' },
+  { name: '李四', age: 30, city: '上海' },
+  { name: '王五', age: 28, city: '广州' }
+]
+
+const columns = [
+  { prop: 'name', label: '姓名', width: 100 },
+  { prop: 'age', label: '年龄', width: 80 },
+  { prop: 'city', label: '城市', width: 100 }
+]
+</script>
+```
+
+### wd-pagination
+分页组件。
+
+**基础用法：**
+```html
+<!-- 基础分页 -->
+<wd-pagination 
+  :current="currentPage"
+  :total="100"
+  @change="handlePageChange"
+/>
+
+<!-- 显示总数 -->
+<wd-pagination 
+  :current="currentPage"
+  :total="100"
+  show-total
+/>
+
+<!-- 每页条数选择器 -->
+<wd-pagination 
+  :current="currentPage"
+  :total="100"
+  :page-size="pageSize"
+  show-size-changer
+  @change="handlePageChange"
+  @size-change="handleSizeChange"
+/>
+```
+
+## 导航组件
+
+下面的几个，如需了解详情，自己去查 doc/wot-design-ui/对应文件.md
+
+### wd-navbar
+导航栏组件，用于页面顶部导航。
+
+### wd-tabbar
+底部标签栏，用于在不同页面之间进行切换。
+
+### wd-sidebar
+侧边导航栏。
+
+### wd-index-bar
+索引栏，用于长列表的快速定位。
+
+### wd-backtop
+回到顶部组件。
+
+**基础用法：**
+```html
+<!-- 基础回到顶部 -->
+<wd-backtop />
+
+<!-- 自定义位置和样式 -->
+<wd-backtop 
+  :right="30"
+  :bottom="100"
+  :visibility-height="200"
+/>
+
+<!-- 自定义内容 -->
+<wd-backtop>
+  <view class="custom-backtop">
+    <wd-icon name="arrow-up" />
+    <text>顶部</text>
+  </view>
+</wd-backtop>
+```
+
+## 业务组件
+
+### wd-calendar-view
+日历视图组件，用于展示日历界面。
+
+### wd-count-down
+倒计时组件。
+
+**基础用法：**
+```html
+<!-- 基础倒计时 -->
+<wd-count-down :time="60000" />
+
+<!-- 自定义格式 -->
+<wd-count-down 
+  :time="3600000"
+  format="HH:mm:ss"
+/>
+
+<!-- 毫秒级渲染 -->
+<wd-count-down 
+  :time="10000"
+  format="ss:SSS"
+  millisecond
+/>
+
+<!-- 自定义样式 -->
+<wd-count-down :time="86400000">
+  <template #default="{ timeData }">
+    <span class="countdown-item">{{ timeData.days }}天</span>
+    <span class="countdown-item">{{ timeData.hours }}时</span>
+    <span class="countdown-item">{{ timeData.minutes }}分</span>
+    <span class="countdown-item">{{ timeData.seconds }}秒</span>
+  </template>
+</wd-count-down>
+
+<!-- 手动控制 -->
+<wd-count-down 
+  ref="countDown"
+  :time="60000"
+  :auto-start="false"
+  @finish="handleFinish"
+/>
+<wd-button @click="start">开始</wd-button>
+<wd-button @click="pause">暂停</wd-button>
+<wd-button @click="reset">重置</wd-button>
+```
+
+### wd-count-to
+数字动画组件，用于数字递增动画效果。
+
+### wd-drop-menu
+下拉菜单组件。
+
+**基础用法：**
+```html
+<template>
+  <wd-drop-menu>
+    <wd-drop-menu-item 
+      v-model="value1"
+      :options="options1"
+      title="排序"
+    />
+    <wd-drop-menu-item 
+      v-model="value2"
+      :options="options2"
+      title="筛选"
+    />
+  </wd-drop-menu>
+
+  <!-- 自定义内容 -->
+  <wd-drop-menu>
+    <wd-drop-menu-item title="自定义">
+      <wd-cell title="选项一" />
+      <wd-cell title="选项二" />
+      <wd-cell title="选项三" />
+    </wd-drop-menu-item>
+  </wd-drop-menu>
+
+  <!-- 禁用选项 -->
+  <wd-drop-menu>
+    <wd-drop-menu-item 
+      v-model="value3"
+      :options="options3"
+      title="正常"
+    />
+    <wd-drop-menu-item 
+      title="禁用"
+      disabled
+    />
+  </wd-drop-menu>
+</template>
+
+<script setup>
+const value1 = ref(0)
+const value2 = ref(0)
+const value3 = ref(0)
+
+const options1 = [
+  { text: '默认排序', value: 0 },
+  { text: '价格从低到高', value: 1 },
+  { text: '价格从高到低', value: 2 }
+]
+
+const options2 = [
+  { text: '全部', value: 0 },
+  { text: '新品', value: 1 },
+  { text: '热销', value: 2 }
+]
+
+const options3 = [
+  { text: '选项一', value: 0 },
+  { text: '选项二', value: 1 }
+]
+</script>
+```
+
+### wd-fab
+悬浮操作按钮。
+
+### wd-floating-panel
+浮动面板组件。
+
+### wd-img-cropper
+图片裁剪组件。
+
+### wd-swipe-action
+滑动操作组件，用于左滑显示操作按钮。
+
+**基础用法：**
+```html
+<!-- 基础滑动操作 -->
+<wd-swipe-action>
+  <template #content>
+    <wd-cell title="单元格内容" />
+  </template>
+  <template #right>
+    <wd-button type="error" @click="handleDelete">删除</wd-button>
+  </template>
+</wd-swipe-action>
+
+<!-- 多个操作按钮 -->
+<wd-swipe-action>
+  <template #content>
+    <wd-cell title="多操作" />
+  </template>
+  <template #right>
+    <wd-button @click="handleEdit">编辑</wd-button>
+    <wd-button type="warning" @click="handleShare">分享</wd-button>
+    <wd-button type="error" @click="handleDelete">删除</wd-button>
+  </template>
+</wd-swipe-action>
+
+<!-- 左右滑动 -->
+<wd-swipe-action>
+  <template #left>
+    <wd-button type="success">标记</wd-button>
+  </template>
+  <template #content>
+    <wd-cell title="左右滑动" />
+  </template>
+  <template #right>
+    <wd-button type="error">删除</wd-button>
+  </template>
+</wd-swipe-action>
+```
+
+### wd-sort-button
+排序按钮组件。
+
+**基础用法：**
+```html
+<!-- 基础排序按钮 -->
+<wd-sort-button 
+  v-model="sortOrder"
+  @change="handleSortChange"
+>
+  价格排序
+</wd-sort-button>
+
+<!-- 自定义排序状态 -->
+<wd-sort-button 
+  v-model="customSort"
+  :options="sortOptions"
+  @change="handleCustomSort"
+>
+  自定义排序
+</wd-sort-button>
+```
+
+### wd-text
+文本组件，用于文本展示和处理。
+
+**基础用法：**
+```html
+<!-- 基础文本 -->
+<wd-text>普通文本内容</wd-text>
+
+<!-- 不同类型 -->
+<wd-text type="primary">主要文本</wd-text>
+<wd-text type="success">成功文本</wd-text>
+<wd-text type="warning">警告文本</wd-text>
+<wd-text type="error">错误文本</wd-text>
+
+<!-- 不同大小 -->
+<wd-text size="small">小号文本</wd-text>
+<wd-text size="medium">中号文本</wd-text>
+<wd-text size="large">大号文本</wd-text>
+
+<!-- 文本省略 -->
+<wd-text 
+  :lines="2"
+  text="这是一段很长的文本内容，超出指定行数时会自动省略显示"
+/>
+
+<!-- 可折叠文本 -->
+<wd-text 
+  :lines="3"
+  expand-text="展开"
+  collapse-text="收起"
+  text="可折叠的长文本内容..."
+/>
+
+<!-- 选择器文本 -->
+<wd-text selectable>可选择的文本内容</wd-text>
+
+<!-- 文本装饰 -->
+<wd-text decoration="underline">下划线文本</wd-text>
+<wd-text decoration="line-through">删除线文本</wd-text>
+```