diff --git a/src/api/admin/kpi.ts b/src/api/admin/kpi.ts
new file mode 100644
index 0000000..58edea6
--- /dev/null
+++ b/src/api/admin/kpi.ts
@@ -0,0 +1,109 @@
+import request from '@/utils/http'
+
+export class kpiService {
+  // 月度-业绩 列表
+  static getmonthlylist(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/targets/monthly/list',
+      params
+    })
+  }
+  // 月度-业绩 添加
+  static addmonthly(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/targets/monthly/store',
+      params
+    })
+  }
+  // 月度-业绩 删除
+  static deletemonthly(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/targets/monthly/destroy',
+      params
+    })
+  }
+  // 月度-业绩 修改
+  static updatemonthly(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/targets/monthly/update',
+      params
+    })
+  }
+  // 月度-业绩 详情
+  static detailmonthly(params: any) {
+    return request.get<any>({
+      url: '/admin/targets/monthly/show',
+      params
+    })
+  }
+  //年度-业绩 列表
+  static getyearlylist(params: Api.Common.PaginatingParams) {
+    return request.get<Api.Common.CommonListData>({
+      url: '/admin/targets/annual/list',
+      params
+    })
+  }
+  // 年度-业绩 添加
+  static addyearly(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/targets/annual/store',
+      params
+    })
+  }
+  // 年度-业绩 删除
+  static deleteyearly(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/targets/annual/destroy',
+      params
+    })
+  }
+  // 年度-业绩 详情
+  static detailyearly(params: any) {
+    return request.get<any>({
+      url: '/admin/targets/annual/show',
+      params
+    })
+  }
+  // 年度-业绩 修改
+  static updateyearly(params: any) {
+    return request.post<Api.Common.AddResponse>({
+      url: '/admin/targets/annual/update',
+      params
+    })
+  }
+  //年度-公司目标完成率
+  static statisticstotal(params: any) {
+    return request.get<any>({
+      url: '/admin/targets/statistics/total',
+      params
+    })
+  }
+  //年度-个人销售数量排名
+  static statisticsranking(params: any) {
+    return request.get<any>({
+      url: '/admin/targets/statistics/ranking',
+      params
+    })
+  }
+  //年度-业务KPI分月完成数量表
+  static statisticsmonthly(params: any) {
+    return request.get<any>({
+      url: '/admin/targets/statistics/user/month',
+      params
+    })
+  }
+  //年度-个人年度目标完成度（百分比）
+  static statisticspercentage(params: any) {
+    return request.get<any>({
+      url: '/admin/targets/statistics/user/progressh',
+      params
+    })
+  }
+  //年度-个人累积完成数量（辆）
+  static statisticscumulative(params: any) {
+    return request.get<any>({
+      url: '/admin/targets/statistics/user/achieved',
+      params
+    })
+  }
+}
diff --git a/src/views/admin/kpi/kpi_annual.vue b/src/views/admin/kpi/kpi_annual.vue
new file mode 100644
index 0000000..c8cfa54
--- /dev/null
+++ b/src/views/admin/kpi/kpi_annual.vue
@@ -0,0 +1,345 @@
+<template>
+  <div class="color-page">
+    <div class="color-toolbar boxshadow">
+      <div class="color-search-group">
+        <el-form-item label="关键字:" label-width="70px">
+          <el-input
+            style="min-width: 120px"
+            v-model="keyword"
+            placeholder="请输入关键字"
+            clearable
+            @keyup.enter="getannualList"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getannualList" v-ripple>搜索</el-button>
+        </el-form-item>
+      </div>
+    </div>
+    <div class="boxshadow">
+      <ElRow>
+        <div style="width: 12px"></div>
+        <ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
+          <ElButton
+            @click="showDialog('add')"
+            v-ripple
+            v-if="hasAuth('kpi_annual@add')"
+            type="primary"
+          >
+            新增
+          </ElButton>
+        </ElCol>
+      </ElRow>
+      <ArtTable
+        ref="tableRef"
+        row-key="id"
+        :loading="loading"
+        :data="tableData"
+        :currentPage="pagination.currentPage"
+        :pageSize="pagination.pageSize"
+        :total="pagination.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <template #default>
+          <ElTableColumn label="公司" prop="corp_id">
+            <template #default="scope">
+              <p> {{ scope.row.corp_name ? scope.row.corp_name : '' }}</p>
+            </template>
+          </ElTableColumn>
+          <ElTableColumn label="年份" prop="year" />
+          <ElTableColumn label="业务员" prop="user_name" />
+          <ElTableColumn label="年度目标数" prop="annual_target" />
+          <ElTableColumn label="创建时间" prop="created_at" />
+          <ElTableColumn fixed="right" label="操作" width="120">
+            <template #default="scope">
+              <ElRow>
+                <el-button
+                  link
+                  @click="showDialog('edit', scope.row)"
+                  v-if="hasAuth('kpi_annual@update')"
+                  >编辑</el-button
+                >
+                <el-button
+                  type="danger"
+                  link
+                  @click="deleteColor(scope.row)"
+                  v-if="hasAuth('kpi_annual@destroy')"
+                >
+                  删除
+                </el-button>
+              </ElRow>
+            </template>
+          </ElTableColumn>
+        </template>
+      </ArtTable>
+    </div>
+
+    <!-- 新增/编辑对话框 -->
+    <ElDialog
+      v-model="dialogVisible"
+      :title="dialogType === 'add' ? '新增' : '编辑'"
+      align-center
+      width="600px"
+    >
+      <ElForm ref="formRef" :model="form" :rules="rules" label-width="100px" class="form">
+        <ElFormItem label="公司" prop="corp_id">
+          <ElSelect v-model="form.corp_id" placeholder="请选择公司">
+            <ElOption
+              v-for="item in companyList"
+              :key="item.id"
+              :value="item.id"
+              :label="item.name"
+            ></ElOption>
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem label="年份" prop="year">
+          <ElInputNumber v-model="form.year" :min="1970" :max="2999" style="width: 100%" />
+        </ElFormItem>
+        <ElFormItem label="业务员" prop="user_id">
+          <ElSelect v-model="form.user_id" filterable placeholder="请选择业务员">
+            <el-option
+              v-for="item in companyUserList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem label="年度目标数" prop="annual_target">
+          <ElInputNumber v-model="form.annual_target" :min="0" :max="999" style="width: 100%" />
+        </ElFormItem>
+      </ElForm>
+      <template #footer>
+        <div class="dialog-footer">
+          <ElButton @click="dialogVisible = false">取消</ElButton>
+          <ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
+        </div>
+      </template>
+    </ElDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import { kpiService } from '@/api/admin/kpi'
+  import { useAuth } from '@/composables/useAuth'
+  import { UserService } from '@/api/usersApi'
+  import { manageService } from '@/api/adminApi'
+
+  const { hasAuth } = useAuth()
+  defineOptions({ name: 'AdminKpiAnnual' })
+
+  // 响应式数据
+  const loading = ref(false)
+  const dialogVisible = ref(false)
+  const dialogType = ref('add')
+  const formRef = ref<FormInstance>()
+  const keyword = ref<string>('')
+  // 获取公司列表
+  const companyList = ref<any>()
+  const getCompanyList = async () => {
+    const response = await UserService.getCompanyList()
+    companyList.value = response || []
+  }
+  const companyUserList = ref<any>()
+  // 获取用户列表
+  const getCompanyUserList = async () => {
+    const response = await manageService.presetusers()
+    companyUserList.value = response || []
+  }
+  // 表单数据
+  const form = reactive<any>({
+    id: '',
+    corp_id: '',
+    year: '',
+    user_id: '',
+    annual_target: 0
+  })
+
+  // 表单验证规则
+  const rules = reactive<FormRules>({
+    corp_id: [{ required: true, message: '请选择公司', trigger: 'blur' }],
+    year: [{ required: true, message: '请输入年份', trigger: 'blur' }],
+    user_id: [{ required: true, message: '请选择业务员', trigger: 'blur' }],
+    annual_target: [{ required: true, message: '请输入年度目标数', trigger: 'blur' }]
+  })
+
+  // 分页数据
+  const pagination = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 0
+  })
+
+  // 表格数据
+  const tableData = ref<any[]>([])
+  const tableRef = ref()
+
+  // 生命周期
+  onMounted(() => {
+    getannualList()
+  })
+
+  // 监听搜索条件变化
+  watch([keyword], () => {
+    pagination.currentPage = 1
+    getannualList()
+  })
+
+  // 获取颜色列表
+  const getannualList = async () => {
+    loading.value = true
+    try {
+      const { currentPage, pageSize } = pagination
+      const params = {
+        current: currentPage,
+        size: pageSize,
+        keyword: keyword.value
+      }
+
+      const { records, current, size, total } = await kpiService.getyearlylist(params)
+      tableData.value = records || []
+      Object.assign(pagination, { currentPage: current, pageSize: size, total })
+    } catch (error) {
+      console.error('获取颜色列表失败:', error)
+      ElMessage.error('获取颜色列表失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 处理分页变化
+  const handleSizeChange = (newPageSize: number) => {
+    pagination.pageSize = newPageSize
+    getannualList()
+  }
+
+  const handleCurrentChange = (newCurrentPage: number) => {
+    pagination.currentPage = newCurrentPage
+    getannualList()
+  }
+
+  // 显示对话框
+  const showDialog = (type: string, row?: any) => {
+    getCompanyList()
+    getCompanyUserList()
+    dialogVisible.value = true
+    dialogType.value = type
+    if (type === 'edit' && row) {
+      // 编辑模式
+      Object.assign(form, {
+        id: row.id,
+        corp_id: row.corp_id,
+        year: row.year,
+        user_id: row.user_id,
+        annual_target: row.annual_target
+      })
+    } else {
+      // 新增模式
+      Object.assign(form, {
+        id: '',
+        corp_id: '',
+        year: '',
+        user_id: '',
+        annual_target: 0
+      })
+    }
+  }
+
+  // 删除年度目标
+  const deleteColor = (row: any) => {
+    ElMessageBox.confirm('确定删除该年度目标吗？', '删除确认', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'error'
+    }).then(async () => {
+      try {
+        const { message } = await kpiService.deleteyearly({ id: row.id })
+        ElMessage.success(message)
+        getannualList()
+      } catch (error) {
+        console.error('删除失败:', error)
+        ElMessage.error('删除失败')
+      }
+    })
+  }
+
+  // 提交表单
+  const handleSubmit = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    await formEl.validate(async (valid) => {
+      if (!valid) return
+      try {
+        if (dialogType.value === 'add') {
+          // 新增
+          const { message } = await kpiService.addyearly({
+            corp_id: form.corp_id,
+            year: form.year,
+            user_id: form.user_id,
+            annual_target: form.annual_target
+          })
+          ElMessage.success(message)
+        } else {
+          // 编辑
+          const { message } = await kpiService.updateyearly({
+            id: form.id,
+            corp_id: form.corp_id,
+            year: form.year,
+            user_id: form.user_id,
+            annual_target: form.annual_target
+          })
+          ElMessage.success(message)
+        }
+        dialogVisible.value = false
+        getannualList()
+      } catch (error) {
+        console.error('操作失败:', error)
+        ElMessage.error('操作失败')
+      }
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  :deep(.el-table__empty-block) {
+    height: 100% !important;
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .color-page {
+    background: var(--art-main-bg-color);
+    min-height: 100vh;
+  }
+
+  .color-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 20px 20px;
+    background: var(--art-main-bg-color);
+  }
+
+  .color-search-group {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+
+  .form {
+    padding: 20px 0;
+  }
+
+  .dialog-footer {
+    text-align: right;
+  }
+
+  .el-col2 {
+    margin-bottom: 16px;
+  }
+</style>
diff --git a/src/views/admin/kpi/kpi_monthly.vue b/src/views/admin/kpi/kpi_monthly.vue
new file mode 100644
index 0000000..0637921
--- /dev/null
+++ b/src/views/admin/kpi/kpi_monthly.vue
@@ -0,0 +1,331 @@
+<template>
+  <div class="color-page">
+    <div class="color-toolbar boxshadow">
+      <div class="color-search-group">
+        <el-form-item label="关键字:" label-width="70px">
+          <el-input
+            style="min-width: 120px"
+            v-model="keyword"
+            placeholder="请输入关键字"
+            clearable
+            @keyup.enter="getMonthlyList"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getMonthlyList" v-ripple>搜索</el-button>
+        </el-form-item>
+      </div>
+    </div>
+    <div class="boxshadow">
+      <ElRow>
+        <div style="width: 12px"></div>
+        <ElCol :xs="24" :sm="12" :lg="6" class="el-col2">
+          <ElButton
+            @click="showDialog('add')"
+            v-ripple
+            v-if="hasAuth('kpi_monthly@add')"
+            type="primary"
+          >
+            新增
+          </ElButton>
+        </ElCol>
+      </ElRow>
+      <ArtTable
+        ref="tableRef"
+        row-key="id"
+        :loading="loading"
+        :data="tableData"
+        :currentPage="pagination.currentPage"
+        :pageSize="pagination.pageSize"
+        :total="pagination.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      >
+        <template #default>
+          <ElTableColumn label="用户" prop="user_name" min-width="120" />
+          <ElTableColumn label="年份" prop="year" min-width="120" />
+          <ElTableColumn label="月份" prop="month" min-width="120" />
+          <ElTableColumn label="本月销售数" prop="achieved" min-width="140" />
+          <ElTableColumn fixed="right" label="操作" width="120">
+            <template #default="scope">
+              <ElRow>
+                <el-button
+                  link
+                  @click="showDialog('edit', scope.row)"
+                  v-if="hasAuth('kpi_monthly@update')"
+                  >编辑</el-button
+                >
+                <el-button
+                  type="danger"
+                  link
+                  @click="deleteMonthly(scope.row)"
+                  v-if="hasAuth('kpi_monthly@destroy')"
+                >
+                  删除
+                </el-button>
+              </ElRow>
+            </template>
+          </ElTableColumn>
+        </template>
+      </ArtTable>
+    </div>
+
+    <!-- 新增/编辑对话框 -->
+    <ElDialog
+      v-model="dialogVisible"
+      :title="dialogType === 'add' ? '新增月度-业绩' : '编辑月度-业绩'"
+      align-center
+      width="600px"
+    >
+      <ElForm ref="formRef" :model="form" :rules="rules" label-width="100px" class="form">
+        <ElFormItem label="用户ID" prop="user_id">
+          <ElSelect v-model="form.user_id" filterable placeholder="请选择用户">
+            <ElOption
+              v-for="item in companyUserList"
+              :key="item.id"
+              :value="item.id"
+              :label="item.name"
+            />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem label="年份" prop="year">
+          <ElInputNumber v-model="form.year" :min="1970" :max="2999" style="width: 100%" />
+        </ElFormItem>
+        <ElFormItem label="月份" prop="month">
+          <ElInputNumber v-model="form.month" :min="1" :max="12" style="width: 100%" />
+        </ElFormItem>
+        <ElFormItem label="本月销售数" prop="achieved">
+          <ElInputNumber v-model="form.achieved" :min="0" :max="999999" style="width: 100%" />
+        </ElFormItem>
+        <!-- 预留字段：目标数，不显示，仅占位保存 -->
+        <input type="hidden" v-model="form.target" />
+      </ElForm>
+      <template #footer>
+        <div class="dialog-footer">
+          <ElButton @click="dialogVisible = false">取消</ElButton>
+          <ElButton type="primary" @click="handleSubmit(formRef)">提交</ElButton>
+        </div>
+      </template>
+    </ElDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ElMessage, ElMessageBox } from 'element-plus'
+  import type { FormInstance, FormRules } from 'element-plus'
+  import { kpiService } from '@/api/admin/kpi'
+  import { useAuth } from '@/composables/useAuth'
+  import { manageService } from '@/api/adminApi'
+
+  const { hasAuth } = useAuth()
+  defineOptions({ name: 'AdminKpiMonthly' })
+
+  // 响应式数据
+  const loading = ref(false)
+  const dialogVisible = ref(false)
+  const dialogType = ref('add')
+  const formRef = ref<FormInstance>()
+  const keyword = ref<string>('')
+  const companyUserList = ref<any>()
+  // 获取用户列表
+  const getCompanyUserList = async () => {
+    const response = await manageService.presetusers()
+    companyUserList.value = response || []
+  }
+
+  // 表单数据
+  const form = reactive<any>({
+    id: '',
+    user_id: '',
+    year: new Date().getFullYear(),
+    month: new Date().getMonth() + 1,
+    achieved: 0,
+    target: undefined
+  })
+
+  // 表单验证规则
+  const rules = reactive<FormRules>({
+    user_id: [{ required: true, message: '请输入用户ID', trigger: 'blur' }],
+    year: [{ required: true, message: '请输入年份', trigger: 'change' }],
+    month: [{ required: true, message: '请输入月份', trigger: 'change' }],
+    achieved: [{ required: true, message: '请输入本月销售数', trigger: 'change' }]
+  })
+
+  // 分页数据
+  const pagination = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 0
+  })
+
+  // 表格数据
+  const tableData = ref<any[]>([])
+  const tableRef = ref()
+
+  // 生命周期
+  onMounted(() => {
+    getMonthlyList()
+  })
+
+  // 监听搜索条件变化
+  watch([keyword], () => {
+    pagination.currentPage = 1
+    getMonthlyList()
+  })
+
+  // 获取月度业绩列表
+  const getMonthlyList = async () => {
+    loading.value = true
+    try {
+      const { currentPage, pageSize } = pagination
+      const params = {
+        current: currentPage,
+        size: pageSize,
+        keyword: keyword.value
+      }
+
+      const { records, current, size, total } = await kpiService.getmonthlylist(params)
+      tableData.value = records || []
+      Object.assign(pagination, { currentPage: current, pageSize: size, total })
+    } catch (error) {
+      console.error('获取列表失败:', error)
+      ElMessage.error('获取列表失败')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  // 处理分页变化
+  const handleSizeChange = (newPageSize: number) => {
+    pagination.pageSize = newPageSize
+    getMonthlyList()
+  }
+
+  const handleCurrentChange = (newCurrentPage: number) => {
+    pagination.currentPage = newCurrentPage
+    getMonthlyList()
+  }
+
+  // 显示对话框
+  const showDialog = (type: string, row?: any) => {
+    getCompanyUserList()
+    dialogVisible.value = true
+    dialogType.value = type
+    if (type === 'edit' && row) {
+      // 编辑模式
+      Object.assign(form, {
+        id: row.id,
+        user_id: row.user_id,
+        year: row.year,
+        month: row.month,
+        achieved: row.achieved,
+        target: row.target
+      })
+    } else {
+      // 新增模式
+      Object.assign(form, {
+        id: '',
+        user_id: '',
+        year: new Date().getFullYear(),
+        month: new Date().getMonth() + 1,
+        achieved: 0,
+        target: undefined
+      })
+    }
+  }
+
+  // 删除月度业绩
+  const deleteMonthly = (row: any) => {
+    ElMessageBox.confirm('确定删除该记录吗？', '删除确认', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'error'
+    }).then(async () => {
+      try {
+        const { message } = await kpiService.deletemonthly({ id: row.id })
+        ElMessage.success(message)
+        getMonthlyList()
+      } catch (error) {
+        console.error('删除失败:', error)
+        ElMessage.error('删除失败')
+      }
+    })
+  }
+
+  // 提交表单
+  const handleSubmit = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    await formEl.validate(async (valid) => {
+      if (!valid) return
+      try {
+        if (dialogType.value === 'add') {
+          // 新增
+          const { message } = await kpiService.addmonthly({
+            user_id: form.user_id,
+            year: form.year,
+            month: form.month,
+            achieved: form.achieved
+          })
+          ElMessage.success(message)
+        } else {
+          // 编辑
+          const { message } = await kpiService.updatemonthly({
+            id: form.id,
+            user_id: form.user_id,
+            year: form.year,
+            month: form.month,
+            achieved: form.achieved
+          })
+          ElMessage.success(message)
+        }
+        dialogVisible.value = false
+        getMonthlyList()
+      } catch (error) {
+        console.error('操作失败:', error)
+        ElMessage.error('操作失败')
+      }
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  :deep(.el-table__empty-block) {
+    height: 100% !important;
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .color-page {
+    background: var(--art-main-bg-color);
+    min-height: 100vh;
+  }
+
+  .color-toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding: 20px 20px;
+    background: var(--art-main-bg-color);
+  }
+
+  .color-search-group {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+  }
+
+  .form {
+    padding: 20px 0;
+  }
+
+  .dialog-footer {
+    text-align: right;
+  }
+
+  .el-col2 {
+    margin-bottom: 16px;
+  }
+</style>
diff --git a/src/views/admin/kpi/kpi_statistics.vue b/src/views/admin/kpi/kpi_statistics.vue
new file mode 100644
index 0000000..1a907d8
--- /dev/null
+++ b/src/views/admin/kpi/kpi_statistics.vue
@@ -0,0 +1,1103 @@
+<template>
+  <div class="kpi-statistics-page">
+    <!-- 年度统计概览 -->
+    <div class="stats-overview-section">
+      <div class="overview-header">
+        <h2>年度KPI概览</h2>
+        <div class="header-actions">
+          <el-select
+            v-model="selectedYear"
+            size="small"
+            style="min-width: 120px"
+            placeholder="选择年份"
+          >
+            <el-option v-for="year in yearOptions" :key="year" :label="year + '年'" :value="year" />
+          </el-select>
+        </div>
+      </div>
+      <div class="stats-cards">
+        <!-- 年度总目标 -->
+        <div class="stat-card target">
+          <div class="card-icon">
+            <el-icon><Star /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="card-title">年度总目标</div>
+            <div class="main-value">{{ annualTarget }}</div>
+            <div class="main-unit">辆</div>
+          </div>
+        </div>
+
+        <!-- 已完成数量 -->
+        <div class="stat-card completed">
+          <div class="card-icon">
+            <el-icon><Check /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="card-title">已完成数量</div>
+            <div class="main-value">{{ completedTarget }}</div>
+            <div class="main-unit">辆</div>
+          </div>
+        </div>
+
+        <!-- 完成进度 -->
+        <div class="stat-card progress">
+          <div class="card-icon">
+            <el-icon><TrendCharts /></el-icon>
+          </div>
+          <div class="card-content">
+            <div class="card-title">完成进度</div>
+            <div class="main-value">{{ completionRate }}</div>
+            <div class="main-unit">完成度</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主要内容区域 -->
+    <div class="main-content">
+      <!-- 第一行：排行榜（左） + 完成度（右） -->
+      <div class="leaderboard-section mc-leaderboard">
+        <div class="leaderboard">
+          <div class="leaderboard-header">
+            <div class="header-content">
+              <h3>排行榜</h3>
+              <!-- <div class="header-subtitle">Top 10 销售精英</div> -->
+            </div>
+            <!-- <div class="header-decoration">
+              <el-select
+                v-model="selectedYear"
+                size="small"
+                style="min-width: 120px"
+                placeholder="选择年份"
+              >
+                <el-option
+                  v-for="year in yearOptions"
+                  :key="year"
+                  :label="year + '年'"
+                  :value="year"
+                />
+              </el-select>
+            </div> -->
+          </div>
+          <div class="leaderboard-content">
+            <el-empty v-if="isLeaderboardEmpty" description="暂无数据" />
+            <div
+              v-else
+              v-for="(item, index) in leaderboardData"
+              :key="index"
+              class="leaderboard-item"
+              :class="{ 'top-three': index < 3 }"
+            >
+              <div class="rank-badge">
+                <div v-if="index === 0" class="medal gold">
+                  <el-icon><Trophy /></el-icon>
+                </div>
+                <div v-else-if="index === 1" class="medal silver">
+                  <el-icon><Trophy /></el-icon>
+                </div>
+                <div v-else-if="index === 2" class="medal bronze">
+                  <el-icon><Trophy /></el-icon>
+                </div>
+                <div v-else class="rank-number">{{ index + 1 }}</div>
+              </div>
+
+              <div class="progress-container">
+                <div class="user-info">
+                  <div class="name">{{ item.name }}</div>
+                  <div class="score-value">{{ item.score.toLocaleString() }} 辆</div>
+                </div>
+                <div class="progress-bar-wrapper">
+                  <div class="progress-bar">
+                    <div
+                      class="progress-fill"
+                      :style="{
+                        width: `${maxScore > 0 ? (item.score / maxScore) * 100 : 0}%`,
+                        '--progress-color': getProgressColor(index)
+                      }"
+                    ></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="chart-card mc-completion">
+        <div class="chart-header">
+          <div class="chart-title">
+            <h3>个人年度目标完成度</h3>
+            <div class="chart-subtitle">完成率统计 (百分比)</div>
+          </div>
+          <!-- <div class="header-actions">
+            <el-select
+              v-model="selectedYear"
+              size="small"
+              style="min-width: 120px"
+              placeholder="选择年份"
+            >
+              <el-option
+                v-for="year in yearOptions"
+                :key="year"
+                :label="year + '年'"
+                :value="year"
+              />
+            </el-select>
+          </div> -->
+        </div>
+        <div ref="completionChartRef" class="chart-container"></div>
+      </div>
+
+      <!-- 第二行：分月完成（独占一行） -->
+      <div class="chart-card mc-monthly">
+        <div class="chart-header">
+          <div class="chart-title">
+            <h3>业务KPI分月完成数量表</h3>
+            <div class="chart-subtitle">各销售人员月度业绩统计</div>
+          </div>
+          <!-- <div class="header-actions">
+            <el-select
+              v-model="selectedYear"
+              size="small"
+              style="min-width: 120px"
+              placeholder="选择年份"
+            >
+              <el-option
+                v-for="year in yearOptions"
+                :key="year"
+                :label="year + '年'"
+                :value="year"
+              />
+            </el-select>
+          </div> -->
+        </div>
+        <div ref="monthlyChartRef" class="chart-container"></div>
+      </div>
+
+      <!-- 第三行：累积完成（独占一行） -->
+      <div class="chart-card mc-accumulated">
+        <div class="chart-header">
+          <div class="chart-title">
+            <h3>累积完成数量</h3>
+            <div class="chart-subtitle">个人年度累积完成情况 (辆)</div>
+          </div>
+          <!-- <div class="header-actions">
+            <el-select
+              v-model="selectedYear"
+              size="small"
+              style="min-width: 120px"
+              placeholder="选择年份"
+            >
+              <el-option
+                v-for="year in yearOptions"
+                :key="year"
+                :label="year + '年'"
+                :value="year"
+              />
+            </el-select>
+          </div> -->
+        </div>
+        <div ref="accumulatedChartRef" class="chart-container"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, ref, onMounted, computed, watch } from 'vue'
+  import { Trophy, Star, Check, TrendCharts } from '@element-plus/icons-vue'
+  import { useChart } from '@/composables/useChart'
+  import type { EChartsOption } from 'echarts'
+  import { kpiService } from '@/api/admin/kpi'
+
+  export default defineComponent({
+    name: 'KpiStatistics',
+    components: {
+      Trophy,
+      Star,
+      Check,
+      TrendCharts
+    },
+    setup() {
+      const {
+        chartRef: monthlyChartRef,
+        initChart: initMonthlyChart,
+        getAxisLineStyle,
+        getAxisLabelStyle,
+        getSplitLineStyle
+      } = useChart()
+
+      const { chartRef: completionChartRef, initChart: initCompletionChart } = useChart()
+
+      const { chartRef: accumulatedChartRef, initChart: initAccumulatedChart } = useChart()
+
+      const currentYear = new Date().getFullYear()
+      const yearOptions = Array.from({ length: 3 }, (_, i) => currentYear - i)
+      const selectedYear = ref(currentYear)
+
+      const leaderboardData = ref<{ name: string; score: number }[]>([])
+      const maxScore = computed(() => {
+        const scores = leaderboardData.value.map((d) => d.score)
+        return scores.length ? Math.max(...scores) : 0
+      })
+      const isLeaderboardEmpty = computed(() => {
+        return leaderboardData.value.length === 0 || maxScore.value === 0
+      })
+      const annualTarget = ref(0)
+      const completedTarget = ref(0)
+
+      const completionRate = ref(0)
+
+      // 获取进度条颜色
+      const getProgressColor = (index: number) => {
+        const colors = [
+          '#ffd700', // 金色 - 第1名
+          '#c0c0c0', // 银色 - 第2名
+          '#cd7f32', // 铜色 - 第3名
+          '#667eea', // 蓝色 - 其他
+          '#4ecdc4', // 青色
+          '#f093fb', // 粉色
+          '#ff6b6b', // 红色
+          '#a8e6cf', // 绿色
+          '#ffd93d', // 黄色
+          '#6c5ce7' // 紫色
+        ]
+        return colors[index] || colors[3]
+      }
+
+      // 月度完成数据
+      const months = ref<string[]>([])
+      const personnel = ref<string[]>([])
+      const monthlyData = ref<number[][]>([])
+
+      const monthColors = [
+        '#5470c6',
+        '#91cc75',
+        '#fac858',
+        '#ee6666',
+        '#73c0de',
+        '#3ba272',
+        '#fc8452',
+        '#9a60b4',
+        '#ea7ccc',
+        '#ff9f7f'
+      ]
+
+      const monthlyChartOptions = (): EChartsOption => {
+        const series = months.value.map((month, monthIndex) => ({
+          name: month,
+          type: 'bar' as const,
+          data: monthlyData.value.map((personData) => personData[monthIndex] ?? 0),
+          itemStyle: {
+            color: monthColors[monthIndex % monthColors.length]
+          }
+        }))
+
+        return {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          legend: {
+            data: months.value,
+            top: 10,
+            textStyle: {
+              fontSize: 12
+            }
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            top: '15%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            data: personnel.value,
+            axisLabel: {
+              ...getAxisLabelStyle(true),
+              rotate: 45,
+              fontSize: 11
+            },
+            axisLine: getAxisLineStyle(true),
+            axisTick: {
+              show: false
+            }
+          },
+          yAxis: {
+            type: 'value',
+            name: '数量',
+            nameTextStyle: {
+              color: '#666',
+              fontSize: 12
+            },
+            axisLabel: getAxisLabelStyle(true),
+            axisLine: getAxisLineStyle(true),
+            splitLine: getSplitLineStyle(true)
+          },
+          series
+        }
+      }
+
+      // 个人完成度数据
+      const completionData = ref<{ name: string; rate: number }[]>([])
+
+      const completionChartOptions = (): EChartsOption => {
+        return {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            },
+            formatter: (params: any) => {
+              const data = params[0]
+              return `${data.name}: ${data.value}%`
+            }
+          },
+          grid: {
+            left: '5%',
+            right: '4%',
+            bottom: '4%',
+            top: '8%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            data: completionData.value.map((item) => item.name),
+            axisLabel: {
+              ...getAxisLabelStyle(true),
+              rotate: 45,
+              fontSize: 11
+            },
+            axisLine: getAxisLineStyle(true),
+            axisTick: {
+              show: false
+            }
+          },
+          yAxis: {
+            type: 'value',
+            name: '完成度(%)',
+            nameTextStyle: {
+              color: '#666',
+              fontSize: 12
+            },
+            min: 0,
+            max: 80,
+            interval: 20,
+            axisLabel: {
+              ...getAxisLabelStyle(true),
+              formatter: '{value}%'
+            },
+            axisLine: getAxisLineStyle(true),
+            splitLine: getSplitLineStyle(true)
+          },
+          series: [
+            {
+              name: '完成度',
+              type: 'bar',
+              data: completionData.value.map((item) => item.rate),
+              itemStyle: {
+                color: '#5470c6',
+                borderRadius: [4, 4, 0, 0]
+              },
+              barWidth: '60%',
+              label: {
+                show: true,
+                position: 'top',
+                formatter: '{c}%',
+                fontSize: 11,
+                color: '#333'
+              }
+            }
+          ]
+        }
+      }
+
+      // 累积完成数据
+      const accumulatedData = ref<{ name: string; completed: number; total: number }[]>([])
+
+      const accumulatedChartOptions = (): EChartsOption => {
+        return {
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            },
+            formatter: (params: any) => {
+              const completed = params.find((p: any) => p.seriesName === '个人年度累积完成数量')
+              const total = params.find((p: any) => p.seriesName === '年度总任务 (辆)')
+              return `${completed.name}<br/>${completed.seriesName}: ${completed.value}<br/>${total.seriesName}: ${total.value}`
+            }
+          },
+          legend: {
+            data: ['个人年度累积完成数量', '年度总任务 (辆)'],
+            top: 10,
+            textStyle: {
+              fontSize: 12
+            }
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            top: '15%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            data: accumulatedData.value.map((item) => item.name),
+            axisLabel: {
+              ...getAxisLabelStyle(true),
+              rotate: 45,
+              fontSize: 11
+            },
+            axisLine: getAxisLineStyle(true),
+            axisTick: {
+              show: false
+            }
+          },
+          yAxis: {
+            type: 'value',
+            name: '数量 (辆)',
+            nameTextStyle: {
+              color: '#666',
+              fontSize: 12
+            },
+            min: 0,
+            max: 1500,
+            interval: 500,
+            axisLabel: getAxisLabelStyle(true),
+            axisLine: getAxisLineStyle(true),
+            splitLine: getSplitLineStyle(true)
+          },
+          series: [
+            {
+              name: '个人年度累积完成数量',
+              type: 'bar',
+              data: accumulatedData.value.map((item) => item.completed),
+              itemStyle: {
+                color: '#5470c6',
+                borderRadius: [4, 4, 0, 0]
+              },
+              barWidth: '30%',
+              label: {
+                show: true,
+                position: 'top',
+                formatter: '{c}',
+                fontSize: 10,
+                color: '#333'
+              }
+            },
+            {
+              name: '年度总任务 (辆)',
+              type: 'bar',
+              data: accumulatedData.value.map((item) => item.total),
+              itemStyle: {
+                color: '#ee6666',
+                borderRadius: [4, 4, 0, 0]
+              },
+              barWidth: '30%',
+              label: {
+                show: true,
+                position: 'top',
+                formatter: '{c}',
+                fontSize: 10,
+                color: '#333'
+              }
+            }
+          ]
+        }
+      }
+
+      onMounted(async () => {
+        setTimeout(async () => {
+          if (monthlyChartRef.value) initMonthlyChart(monthlyChartOptions())
+          if (completionChartRef.value) initCompletionChart(completionChartOptions())
+          if (accumulatedChartRef.value) initAccumulatedChart(accumulatedChartOptions())
+          await refreshAllData()
+        }, 300)
+      })
+
+      const refreshAllData = async () => {
+        // 并发请求数据
+        const [totalRes, rankRes, cumulativeRes, percentRes, monthlyRes] = await Promise.all([
+          kpiService.statisticstotal({ year: selectedYear.value }),
+          kpiService.statisticsranking({ year: selectedYear.value }),
+          kpiService.statisticscumulative({ year: selectedYear.value }),
+          kpiService.statisticspercentage({ year: selectedYear.value }),
+          kpiService.statisticsmonthly({ year: selectedYear.value })
+        ])
+        // 顶部卡片
+        annualTarget.value = totalRes[0]?.annual_target ?? 0
+        completedTarget.value = totalRes[0]?.achieved ?? 0
+        completionRate.value = totalRes[0]?.progress ?? 0
+
+        // 排行榜
+        leaderboardData.value = (rankRes ?? []).map((r: any) => ({
+          name: r.user_name,
+          score: Number(r.achieved ?? 0)
+        }))
+
+        // 个人完成度
+        completionData.value = (percentRes ?? []).map((p: any) => ({
+          name: p.user_name,
+          rate: Number(p.progressh ?? 0)
+        }))
+
+        // 累积完成
+        accumulatedData.value = (cumulativeRes ?? []).map((c: any) => ({
+          name: c.user_name,
+          completed: Number(c.achieved ?? 0),
+          total: Number(c.annual_target ?? 0)
+        }))
+
+        // 分月完成（兼容两种返回：
+        // 1) { months, personnel, matrix }
+        // 2) [{ user_name, month: number[12] }, ...]
+        const rawMonthly = Array.isArray(monthlyRes) ? monthlyRes : monthlyRes?.data
+        if (Array.isArray(rawMonthly)) {
+          // 新格式：数组
+          months.value = Array.from({ length: 12 }, (_, i) => `${i + 1}月`)
+          personnel.value = rawMonthly.map((r: any) => r.user_name)
+          monthlyData.value = rawMonthly.map((r: any) => {
+            const arr = (r.month ?? []).map((n: any) => Number(n ?? 0))
+            // 规范为 12 位
+            const twelve = arr.slice(0, 12)
+            if (twelve.length < 12) {
+              return twelve.concat(Array(12 - twelve.length).fill(0))
+            }
+            return twelve
+          })
+        } else {
+          // 旧格式：对象
+          const m = monthlyRes?.data ?? {}
+          months.value = m.months ?? []
+          personnel.value = m.personnel ?? []
+          monthlyData.value = m.matrix ?? []
+        }
+
+        // 更新图表
+        if (completionChartRef.value) {
+          initCompletionChart(completionChartOptions())
+        }
+        if (accumulatedChartRef.value) {
+          initAccumulatedChart(accumulatedChartOptions())
+        }
+        if (monthlyChartRef.value) {
+          initMonthlyChart(monthlyChartOptions())
+        }
+      }
+
+      watch(selectedYear, () => {
+        refreshAllData()
+      })
+
+      return {
+        selectedYear,
+        yearOptions,
+        leaderboardData,
+        isLeaderboardEmpty,
+        maxScore,
+        annualTarget,
+        completedTarget,
+        completionRate,
+        getProgressColor,
+        monthlyChartRef,
+        completionChartRef,
+        accumulatedChartRef
+      }
+    }
+  })
+</script>
+
+<style lang="scss" scoped>
+  .kpi-statistics-page {
+    padding: 10px;
+    background: #fff;
+    min-height: 100vh;
+    .stats-overview-section {
+      background: white;
+      border-radius: 16px;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+      overflow: hidden;
+      margin-bottom: 32px;
+      backdrop-filter: blur(10px);
+      .overview-header {
+        padding: 20px 32px 20px;
+        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+        color: #333;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 1px;
+          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+        }
+
+        h2 {
+          margin: 0 0 8px;
+          font-size: 24px;
+          font-weight: 700;
+          color: #333;
+          letter-spacing: -0.3px;
+        }
+
+        .header-actions {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+        }
+
+        .overview-subtitle {
+          font-size: 15px;
+          color: #333;
+          font-weight: 400;
+          margin: 0;
+        }
+      }
+
+      .stats-cards {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 24px;
+        background: white;
+        padding: 32px;
+
+        @media (max-width: 1024px) {
+          grid-template-columns: repeat(2, 1fr);
+          gap: 20px;
+        }
+
+        @media (max-width: 768px) {
+          grid-template-columns: 1fr;
+          gap: 16px;
+          padding: 24px;
+        }
+      }
+
+      .stat-card {
+        background: white;
+        border-radius: 12px;
+        padding: 24px;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+        border: 1px solid #f0f0f0;
+        display: flex;
+        align-items: flex-start;
+        position: relative;
+        transition: all 0.3s ease;
+        min-height: 120px;
+
+        &:hover {
+          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+          transform: translateY(-2px);
+        }
+
+        .card-icon {
+          width: 60px;
+          height: 60px;
+          border-radius: 12px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin-right: 16px;
+          flex-shrink: 0;
+
+          .el-icon {
+            font-size: 24px;
+            color: white;
+          }
+        }
+
+        .card-content {
+          flex: 1;
+          min-width: 0;
+
+          .card-title {
+            font-size: 14px;
+            color: #666;
+            font-weight: 500;
+            margin-bottom: 8px;
+            line-height: 1.4;
+          }
+
+          .main-value {
+            font-size: 32px;
+            font-weight: 700;
+            color: #333;
+            line-height: 1.2;
+            margin-bottom: 4px;
+          }
+
+          .main-unit {
+            font-size: 14px;
+            color: #999;
+            font-weight: 400;
+            margin-bottom: 8px;
+          }
+
+          .progress-text {
+            font-size: 14px;
+            font-weight: 600;
+            padding: 4px 8px;
+            border-radius: 4px;
+            display: inline-block;
+          }
+        }
+
+        &.target {
+          .card-icon {
+            background: linear-gradient(135deg, #667eea, #5d87ff);
+          }
+          .main-value {
+            color: #667eea;
+          }
+        }
+
+        &.completed {
+          .card-icon {
+            background: linear-gradient(135deg, #4ecdc4, #44a08d);
+          }
+          .main-value {
+            color: #4ecdc4;
+          }
+          .progress-text {
+            color: #27ae60;
+            background: rgba(39, 174, 96, 0.1);
+          }
+        }
+
+        &.progress {
+          .card-icon {
+            background: linear-gradient(135deg, #f093fb, #f5576c);
+          }
+          .main-value {
+            color: #f5576c;
+          }
+          .progress-text {
+            color: #27ae60;
+            background: rgba(39, 174, 96, 0.1);
+          }
+        }
+      }
+    }
+
+    // 主要内容区域
+    .main-content {
+      display: grid;
+      grid-template-columns: calc(30% - 24px) 70%; /* 左：排行榜（30%-24px），右：完成度（70%） */
+      grid-auto-rows: minmax(100px, auto);
+      gap: 24px;
+      margin-bottom: 24px;
+
+      @media (max-width: 1200px) {
+        grid-template-columns: 1fr;
+        gap: 24px;
+        .mc-leaderboard {
+          grid-column: 1 / -1;
+        }
+        .mc-completion {
+          grid-column: 1 / -1;
+        }
+      }
+
+      /* 通用图表卡片 */
+      .chart-card {
+        background: white;
+        border-radius: 16px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+        overflow: hidden;
+        backdrop-filter: blur(10px);
+
+        .chart-header {
+          padding: 20px 20px 12px;
+          background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+          border-bottom: 1px solid #e2e8f0;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .chart-title {
+            h3 {
+              margin: 0 0 4px;
+              font-size: 16px;
+              font-weight: 700;
+              color: #1e293b;
+              letter-spacing: -0.2px;
+            }
+
+            .chart-subtitle {
+              font-size: 13px;
+              color: #64748b;
+              margin: 0;
+              font-weight: 500;
+            }
+          }
+
+          .header-actions {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+          }
+        }
+
+        .chart-container {
+          height: 500px;
+          padding: 20px;
+        }
+      }
+
+      /* 排行榜（左列） */
+      .mc-leaderboard {
+        grid-column: 1 / 2;
+      }
+
+      /* 完成度（右列） */
+      .mc-completion {
+        grid-column: 2 / 3;
+      }
+
+      /* 分月完成（独占一行） */
+      .mc-monthly {
+        grid-column: 1 / -1;
+        .chart-container {
+          height: 500px;
+        }
+      }
+
+      /* 累积完成（独占一行） */
+      .mc-accumulated {
+        grid-column: 1 / -1;
+      }
+
+      /* 排行榜样式 */
+      .leaderboard-section {
+        .leaderboard {
+          background: #ffffff;
+          border: 1px solid #e5e7eb;
+          border-radius: 16px;
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+          overflow: hidden;
+          backdrop-filter: blur(10px);
+          height: fit-content;
+          position: relative;
+
+          &::before {
+            display: none;
+          }
+
+          .leaderboard-header {
+            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 20px 15px 20px;
+            position: relative;
+            z-index: 1;
+
+            .header-content {
+              h3 {
+                margin: 0 0 6px;
+                font-size: 20px;
+                font-weight: 700;
+                color: #1f2937;
+                letter-spacing: -0.3px;
+              }
+
+              .header-subtitle {
+                font-size: 14px;
+                color: #64748b;
+                font-weight: 500;
+              }
+            }
+
+            .header-decoration {
+              color: #94a3b8;
+              font-size: 32px;
+            }
+          }
+
+          .leaderboard-content {
+            padding: 0 0 28px;
+            position: relative;
+            z-index: 1;
+            height: 513px;
+            overflow: auto;
+          }
+
+          .leaderboard-item {
+            display: flex;
+            align-items: center;
+            padding: 10px 28px;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+            transition: all 0.3s ease;
+            position: relative;
+            gap: 16px;
+
+            &:last-child {
+              border-bottom: none;
+            }
+
+            &:hover {
+              background: #f8fafc;
+              border-radius: 12px;
+              transform: translateY(-2px);
+              box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+            }
+
+            // &.top-three {
+            //   background: #f1f5f9;
+            //   border-radius: 16px;
+            //   margin: 0 0 12px 0;
+            //   backdrop-filter: blur(10px);
+            //   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+
+            //   &:hover {
+            //     background: #e2e8f0;
+            //     transform: translateY(-3px);
+            //     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+            //   }
+            // }
+
+            .rank-badge {
+              width: 40px;
+              height: 40px;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              flex-shrink: 0;
+
+              .medal {
+                font-size: 24px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                &.gold {
+                  color: #ffd700;
+                  filter: drop-shadow(0 2px 6px rgba(255, 215, 0, 0.4));
+                }
+
+                &.silver {
+                  color: #c0c0c0;
+                  filter: drop-shadow(0 2px 6px rgba(192, 192, 192, 0.4));
+                }
+
+                &.bronze {
+                  color: #cd7f32;
+                  filter: drop-shadow(0 2px 6px rgba(205, 127, 50, 0.4));
+                }
+              }
+
+              .rank-number {
+                font-size: 16px;
+                font-weight: 700;
+                color: #1f2937;
+                background: #f1f5f9;
+                width: 40px;
+                height: 40px;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                border: 2px solid #e5e7eb;
+              }
+            }
+
+            .progress-container {
+              flex: 1;
+              display: flex;
+              flex-direction: column;
+              gap: 8px;
+              min-width: 0;
+
+              .user-info {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+
+                .name {
+                  font-size: 16px;
+                  color: #111827;
+                  font-weight: 600;
+                  white-space: nowrap;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  flex: 1;
+                }
+                .score-value {
+                  font-size: 14px;
+                  font-weight: 700;
+                  color: #111827;
+                  background: #f3f4f6;
+                  padding: 2px 8px;
+                  border-radius: 16px;
+                  white-space: nowrap;
+                }
+              }
+
+              .progress-bar-wrapper {
+                display: flex;
+                align-items: center;
+                gap: 12px;
+
+                .progress-bar {
+                  flex: 1;
+                  height: 8px;
+                  background: #e5e7eb;
+                  border-radius: 4px;
+                  overflow: hidden;
+                  position: relative;
+
+                  .progress-fill {
+                    height: 100%;
+                    background: var(--progress-color);
+                    border-radius: 4px;
+                    transition: width 0.8s ease;
+                    position: relative;
+                    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+
+                    &::after {
+                      content: '';
+                      position: absolute;
+                      top: 0;
+                      left: 0;
+                      right: 0;
+                      bottom: 0;
+                      background: linear-gradient(
+                        90deg,
+                        transparent,
+                        rgba(255, 255, 255, 0.5),
+                        transparent
+                      );
+                      animation: shimmer 2s infinite;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @keyframes shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+</style>