diff --git a/components.d.ts b/components.d.ts
index cd3fcc8..975d1ef 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -16,6 +16,8 @@ declare module 'vue' {
     ACol: typeof import('ant-design-vue/es')['Col']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
+    ADescriptions: typeof import('ant-design-vue/es')['Descriptions']
+    ADescriptionsItem: typeof import('ant-design-vue/es')['DescriptionsItem']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
     ADropdown: typeof import('ant-design-vue/es')['Dropdown']
@@ -30,18 +32,25 @@ declare module 'vue' {
     ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
     ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
     ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
+    AList: typeof import('ant-design-vue/es')['List']
+    AListItem: typeof import('ant-design-vue/es')['ListItem']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    APageHeader: typeof import('ant-design-vue/es')['PageHeader']
     APopconfirm: typeof import('ant-design-vue/es')['Popconfirm']
+    ARadio: typeof import('ant-design-vue/es')['Radio']
+    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
+    ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
     ASpace: typeof import('ant-design-vue/es')['Space']
     ASpin: typeof import('ant-design-vue/es')['Spin']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ATable: typeof import('ant-design-vue/es')['Table']
     ATag: typeof import('ant-design-vue/es')['Tag']
+    ATextarea: typeof import('ant-design-vue/es')['Textarea']
     AUpload: typeof import('ant-design-vue/es')['Upload']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/api/myAxios.ts b/src/api/myAxios.ts
index 922e590..6b02d0e 100644
--- a/src/api/myAxios.ts
+++ b/src/api/myAxios.ts
@@ -6,14 +6,14 @@ import router from "../router";
 
 const myAxios = axios.create({
     withCredentials: true,
-   // baseURL:'http://localhost:9091'
+     baseURL:'http://localhost:9091'
     //baseURL:'http://localhost:9092'
    // baseURL:'http://1.94.237.210:3457'
     //baseURL:'http://1.94.237.210:8088'
     //baseURL:'http://27.30.77.229:9091/'
     //baseURL:'http://27.30.77.229:9092/'
-    // baseURL:'http://160.202.242.36:9092/'
-    baseURL:'http://160.202.242.36:9092/'
+     //baseURL:'http://160.202.242.36:9091/'
+  // baseURL:'http://160.202.242.36:9092/'
 
 
 });
diff --git a/src/layout/manage/ManageSidebar.vue b/src/layout/manage/ManageSidebar.vue
index d76a574..e187639 100644
--- a/src/layout/manage/ManageSidebar.vue
+++ b/src/layout/manage/ManageSidebar.vue
@@ -9,10 +9,18 @@
       <PieChartOutlined />
       <span>首页</span>
     </a-menu-item>
-    <a-menu-item key="/userList">
-      <UserOutlined />
-      <span>用户列表</span>
-    </a-menu-item>
+    <a-sub-menu>
+      <template #title>
+            <span>
+               <CommentOutlined />
+              <span>用户管理</span>
+            </span>
+      </template>
+      <a-menu-item key="/adminList">管理员列表</a-menu-item>
+      <a-menu-item key="staffList">员工列表</a-menu-item>
+      <a-menu-item key="supervisorList">主管列表</a-menu-item>
+      <a-menu-item key="userList">普通用户列表</a-menu-item>
+    </a-sub-menu>
     <a-sub-menu>
       <template #title>
             <span>
@@ -58,6 +66,10 @@
       <CommentOutlined />
       <span>业绩管理</span>
     </a-menu-item>
+    <a-menu-item key="/employeeApplication">
+      <CommentOutlined />
+      <span>员工申请管理</span>
+    </a-menu-item>
   </a-menu>
 
 </template>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index f3b328d..d356ec4 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -32,9 +32,24 @@ export const routes = [
                 name: '工作详情',
                 component: () => import("../view/work/workDetail.vue"),
             },
+            {
+                path: '/adminList',
+                name: '管理员列表',
+                component: () => import("../view/userList/adminList.vue"),
+            },
+            {
+                path: '/staffList',
+                name: '员工列表',
+                component: () => import("../view/userList/staffList.vue"),
+            },
+            {
+                path: '/supervisorList',
+                name: '主管列表',
+                component: () => import("../view/userList/supervisorList.vue"),
+            },
             {
                 path: '/userList',
-                name: '用户列表',
+                name: '普通用户列表',
                 component: () => import("../view/userList/userList.vue"),
             },
             {
@@ -137,6 +152,16 @@ export const routes = [
                 name:'订单明细详情',
                 component: ()=> import("../view/performance/customerDetail.vue")
             },
+            {
+                path:'/employeeApplication',
+                name:'员工申请管理',
+                component: ()=> import("../view/employeeApplication/employeeApplication.vue")
+            },
+            {
+                path:'/employeeDetail',
+                name:'员工申请详情',
+                component: ()=> import("../view/employeeApplication/employeeDetail.vue")
+            },
         ]
     },
 ]
\ No newline at end of file
diff --git a/src/view/Index.vue b/src/view/Index.vue
index 808d299..b9504be 100644
--- a/src/view/Index.vue
+++ b/src/view/Index.vue
@@ -1,3 +1,206 @@
+<script setup>
+import { ref, onMounted } from "vue";
+import myAxios from "../api/myAxios.ts";
+
+// 定义仪表盘数据结构
+const dashboardData = ref({
+  totalAmount: 0,
+  netAmount: 0,
+  promoCount: 0,
+  superCount: 0,
+  empCount: 0,
+  orderCount: 0,
+  toRelease: 0, // 修复字段名：接口返回的是 toRelease
+  toSettle: 0,
+  settled: 0,
+  refunded: 0,
+  todayOrderCount: 0,
+  todayOrderAmount: 0,
+  todayRefundCount: 0,
+  todayRefundAmount: 0, // 添加接口返回的字段
+  todayPromotionCount: 0,
+  monthOrderCount: 0,
+  monthOrderAmount: 0,
+  monthRefundCount: 0,
+  monthRefundAmount: 0, // 添加接口返回的字段
+  monthPromotionCount: 0
+});
+
+// 格式化金额显示
+const formatCurrency = (amount) => {
+  return `¥${parseFloat(amount).toLocaleString(undefined, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })}`;
+};
+
+// 获取仪表盘数据
+const fetchDashboardData = async () => {
+  const storedToken = localStorage.getItem('token');
+  try {
+    const response = await myAxios.post(
+        "/perform/query/dashboard",
+        {}, // 空请求体
+        {headers: {Authorization: storedToken}}
+    );
+
+    if (response.code === 1) {
+      // 确保所有字段正确映射
+      dashboardData.value = {
+        ...dashboardData.value, // 保留初始结构
+        ...response.data        // 覆盖为接口返回的数据
+      };
+      console.log("仪表盘数据加载成功:", dashboardData.value);
+    } else {
+      console.error("获取仪表盘数据失败:", response.message);
+    }
+  } catch (error) {
+    console.error("请求仪表盘数据失败:", error);
+  }
+};
+
+// 组件挂载时获取数据
+onMounted(() => {
+  fetchDashboardData();
+});
+</script>
+
 <template>
-  测试页面
-</template>
\ No newline at end of file
+  <div class="dashboard">
+    <div class="title">业务仪表盘总览</div>
+    <div class="card-container">
+      <!-- 订单统计 -->
+      <div class="card orange-border">
+        <h2>订单统计</h2>
+        <ul>
+          <li><span>订单总金额</span><strong>{{ formatCurrency(dashboardData.totalAmount) }}</strong></li>
+          <li><span>订单净成交</span><strong>{{ formatCurrency(dashboardData.netAmount) }}</strong></li>
+          <li><span>下单数量</span><strong>{{ dashboardData.orderCount }}</strong></li>
+          <li><span>待释放</span><strong>{{ formatCurrency(dashboardData.toRelease) }}</strong></li>
+          <li><span>可结算</span><strong>{{ formatCurrency(dashboardData.toSettle) }}</strong></li>
+          <li><span>已结算</span><strong>{{ formatCurrency(dashboardData.settled) }}</strong></li>
+          <li><span>已回退</span><strong>{{ formatCurrency(dashboardData.refunded) }}</strong></li>
+        </ul>
+      </div>
+      <!-- 用户与员工统计 -->
+      <div class="card light-teal-border">
+        <h2>用户与员工统计</h2>
+        <ul>
+          <li><span>主管数量</span><strong>{{ dashboardData.superCount }}</strong></li>
+          <li><span>员工数量</span><strong>{{ dashboardData.empCount }}</strong></li>
+          <li><span>客户数量</span><strong>{{ dashboardData.promoCount }}</strong></li>
+        </ul>
+      </div>
+      <!-- 今日统计 -->
+      <div class="card light-orange-border">
+        <h2>今日统计</h2>
+        <ul>
+          <li><span>今日下单数量</span><strong>{{ dashboardData.todayOrderCount }}</strong></li>
+          <li><span>今日订单总金额</span><strong>{{ formatCurrency(dashboardData.todayOrderAmount) }}</strong></li>
+          <li><span>今日退款数量</span><strong>{{ dashboardData.todayRefundCount }}</strong></li>
+          <li><span>今日退款金额</span><strong>{{ formatCurrency(dashboardData.todayRefundAmount) }}</strong></li>
+          <li><span>今日推广数量</span><strong>{{ dashboardData.todayPromotionCount }}</strong></li>
+        </ul>
+      </div>
+      <!-- 本月统计 -->
+      <div class="card light-purple-border">
+        <h2>本月统计</h2>
+        <ul>
+          <li><span>本月下单数量</span><strong>{{ dashboardData.monthOrderCount }}</strong></li>
+          <li><span>本月订单总金额</span><strong>{{ formatCurrency(dashboardData.monthOrderAmount) }}</strong></li>
+          <li><span>本月退款数量</span><strong>{{ dashboardData.monthRefundCount }}</strong></li>
+          <li><span>本月退款金额</span><strong>{{ formatCurrency(dashboardData.monthRefundAmount) }}</strong></li>
+          <li><span>本月推广数量</span><strong>{{ dashboardData.monthPromotionCount }}</strong></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.title {
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+/* 优化背景颜色与配色 */
+.dashboard {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  text-align: center;
+  background-color: #f9f7f2; /* 更温馨的背景颜色 */
+  padding: 20px;
+  color: #333;
+}
+
+.card-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.card {
+  width: calc(50% - 20px);
+  margin: 10px;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
+  padding: 25px;
+  text-align: left;
+  transition: transform 0.3s ease-in-out;
+}
+
+.card:hover {
+  transform: translateY(-10px);
+}
+
+.card h2 {
+  font-size: 1.5em;
+  color: #ff7043; /* 橙色主题 */
+  margin-bottom: 15px;
+}
+
+.card ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+.card ul li {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px 0;
+  border-bottom: 1px solid #e0e0e0;
+  padding-bottom: 5px;
+}
+
+.card ul li:last-child {
+  border-bottom: none;
+}
+
+.orange-border {
+  border-left: 6px solid #ff7043; /* 橙色边框 */
+}
+
+.light-teal-border {
+  border-left: 6px solid #00bfa5; /* 清新的青绿色 */
+}
+
+.light-orange-border {
+  border-left: 6px solid #ffb74d; /* 浅橙色边框 */
+}
+
+.light-purple-border {
+  border-left: 6px solid #8e24aa; /* 浅紫色 */
+}
+
+.card span {
+  color: #555555;
+  font-size: 1em;
+}
+
+.card strong {
+  color: #ff7043;
+  font-size: 1.2em;
+  font-weight: bold;
+}
+</style>
diff --git a/src/view/course/addCourse.vue b/src/view/course/addCourse.vue
index e5c8d81..92ce035 100644
--- a/src/view/course/addCourse.vue
+++ b/src/view/course/addCourse.vue
@@ -64,9 +64,9 @@
                   required
               >
                 <option value="">请选择课程类型</option>
-                <option value="考公考研">考公考研</option>
-                <option value="自媒体">自媒体</option>
-                <option value="财经">财经</option>
+                <option value="考公">考公</option>
+                <option value="考编">考编</option>
+                <option value="考证">考证</option>
               </select>
               <div class="select-arrow">▼</div>
             </div>
diff --git a/src/view/course/courseDetail.vue b/src/view/course/courseDetail.vue
index 095423a..6d27c40 100644
--- a/src/view/course/courseDetail.vue
+++ b/src/view/course/courseDetail.vue
@@ -362,9 +362,9 @@ const handlePriceInput = (value: number, field: keyof CourseDetail) => {
             <a-col :span="12">
               <a-form-item label="课程类型">
                 <a-select v-model:value="editData.type" placeholder="请选择课程类型">
-                  <a-select-option value="自媒体">自媒体</a-select-option>
-                  <a-select-option value="财经">财经</a-select-option>
-                  <a-select-option value="考公考研">考公考研</a-select-option>
+                  <a-select-option value="考公">考公</a-select-option>
+                  <a-select-option value="考编">考编</a-select-option>
+                  <a-select-option value="考证">考证</a-select-option>
                 </a-select>
               </a-form-item>
             </a-col>
@@ -738,7 +738,7 @@ const handlePriceInput = (value: number, field: keyof CourseDetail) => {
   border-radius: 0.75rem;
   overflow: hidden;
   transition: all 0.3s ease;
-  min-height: 320px;
+  max-height: 500px;
   flex-grow: 1;
   padding: 10px;
   background: white;
diff --git a/src/view/course/courseManagement.vue b/src/view/course/courseManagement.vue
index b6757ba..a9c8445 100644
--- a/src/view/course/courseManagement.vue
+++ b/src/view/course/courseManagement.vue
@@ -5,7 +5,7 @@
       <a-space>
         <a-form-item label="课程名称">
           <a-input-search
-              style="width: 200px"
+              style="width: 300px"
               placeholder="请输入课程名称"
               enter-button
               @search="handleCourseSearch"
@@ -22,9 +22,9 @@
               @change="handleCourseSearch"
           >
             <a-select-option value="">全部</a-select-option>
-            <a-select-option value="考公考研">考公考研</a-select-option>
-            <a-select-option value="自媒体">自媒体</a-select-option>
-            <a-select-option value="财经">财经</a-select-option>
+            <a-select-option value="考公">考公</a-select-option>
+            <a-select-option value="考编">考编</a-select-option>
+            <a-select-option value="考证">考证</a-select-option>
           </a-select>
         </a-form-item>
 
@@ -110,13 +110,6 @@
           >
             详情
           </a-button>
-<!--          <a-button-->
-<!--              size="small"-->
-<!--              type="link"-->
-<!--              @click="chapterDetails(record.id)"-->
-<!--          >-->
-<!--            章节-->
-<!--          </a-button>-->
         </a-space>
       </template>
     </template>
@@ -146,7 +139,8 @@ const searchParams = ref({
   sortOrder: "ascend",
   name: "",
   type: "",
-  isShelves: ""
+  isShelves: "",
+  fuzzy: true
 });
 
 // 行选择配置
@@ -259,17 +253,11 @@ const toggleShelves = async (record: Course) => {
   });
 };
 
-// 课程名称搜索方法
 const handleCourseSearch = async () => {
-  // 添加空值校验
-  if (!searchCourseName.value.trim()) {
-    message.warning('课程名称不能为空');
-    return;
-  }
-
   searchParams.value.name = searchCourseName.value;
   searchParams.value.type = searchCourseType.value;
   searchParams.value.isShelves = searchIsShelves.value;
+  searchParams.value.fuzzy = true;
   searchParams.value.current = 1; // 重置到第一页
   await getCourseList();
 };
@@ -448,7 +436,8 @@ const reset = () => {
     sortOrder: "ascend",
     name: "",
     type: "",
-    isShelves: ""
+    isShelves: "",
+    fuzzy: true
   };
 
   getCourseList();
diff --git a/src/view/employeeApplication/employeeApplication.vue b/src/view/employeeApplication/employeeApplication.vue
new file mode 100644
index 0000000..4e8e4a0
--- /dev/null
+++ b/src/view/employeeApplication/employeeApplication.vue
@@ -0,0 +1,433 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted, h } from "vue";
+import { useRouter } from "vue-router";
+import { message } from "ant-design-vue";
+import type { TableProps } from 'ant-design-vue';
+import myAxios from "../../api/myAxios.ts";
+
+const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    key: 'id',
+    width: 80,
+    fixed: 'left',
+    align: 'center',
+    sorter: true
+  },
+  {
+    title: '申请人姓名',
+    dataIndex: 'name',
+    key: 'name',
+    width: 120,
+    fixed: 'left',
+    align: 'center',
+    sorter: true
+  },
+  {
+    title: '手机号',
+    dataIndex: 'phone',
+    key: 'phone',
+    width: 140,
+    align: 'center'
+  },
+  {
+    title: '简历',
+    dataIndex: 'resume',
+    key: 'resume',
+    width: 150,
+    align: 'center',
+    customRender: ({ text }: { text: string }) => {
+      return text
+          ? h('a', {
+            onClick: () => handleViewResume(text),
+            style: { cursor: 'pointer', color: '#1890ff' }
+          }, '查看简历')
+          : '-';
+    }
+  },
+  {
+    title: '审核状态',
+    dataIndex: 'reviewStatus',
+    key: 'reviewStatus',
+    width: 120,
+    align: 'center',
+    filters: [
+      { text: '已通过', value: '已通过' },
+      { text: '待审核', value: '待审核' },
+      { text: '已拒绝', value: '已拒绝' },
+    ],
+    filterMultiple: false,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    key: 'createTime',
+    width: 180,
+    align: 'center',
+    sorter: true
+  },
+  {
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    width: 200, // 增加宽度以容纳更多按钮
+    align: 'center'
+  }
+];
+
+// 定义晋升申请数据结构
+interface AdvancementApply {
+  id: number;
+  name: string;
+  phone: string;
+  resume: string;
+  credential: string;
+  reviewStatus: string;
+  createTime: string;
+}
+
+const tableData = ref<AdvancementApply[]>([]);
+const loading = ref(false);
+const searchName = ref("");
+const searchPhone = ref("");
+const searchStatus = ref<string | undefined>(undefined);
+
+// 分页参数
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  pageSizeOptions: ['10', '20', '50'],
+  showTotal: (total: number) => `共 ${total} 条`,
+});
+
+// 排序参数
+const sortParams = reactive({
+  sortField: 'id',
+  sortOrder: '' // 'ascend' or 'descend'
+});
+
+// 获取晋升申请数据
+const fetchAdvancementData = async () => {
+  loading.value = true;
+  const storedToken = localStorage.getItem('token');
+
+  try {
+    // 构建请求参数
+    const params = {
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+      sortField: sortParams.sortField,
+      sortOrder: sortParams.sortOrder,
+      name: searchName.value.trim(),
+      phone: searchPhone.value.trim(),
+      reviewStatus: searchStatus.value
+    };
+
+    // 调用真实API接口
+    const response:any = await myAxios.post('/advancementApply/page', params, {
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': storedToken
+      }
+    });
+
+    if (response.code === 1) {
+      tableData.value = response.data.records;
+      pagination.total = response.data.total;
+      pagination.current = response.data.current;
+    } else {
+      message.error(response.message || '获取数据失败');
+      tableData.value = [];
+      pagination.total = 0;
+    }
+
+  } catch (error) {
+    message.error('请求失败，请稍后重试');
+    console.error('获取晋升申请数据失败:', error);
+    tableData.value = [];
+    pagination.total = 0;
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 查看简历
+const handleViewResume = (resumeCode: string) => {
+  // 这里实现查看简历的逻辑
+  // 例如：打开一个新窗口，显示简历
+  // window.open(`/api/resume/view?code=${resumeCode}`, '_blank');
+
+  // 或者调用API获取简历内容
+  // fetchResumeContent(resumeCode);
+
+  // 暂时使用消息提示
+  message.info(`查看简历：${resumeCode}`);
+};
+
+
+// 处理表格变化事件（分页、排序、筛选）
+const handleTableChange: TableProps['onChange'] = (pag, filters, sorter) => {
+  // 更新分页参数
+  pagination.current = pag.current!;
+  pagination.pageSize = pag.pageSize!;
+
+  // 更新排序参数
+  if (Array.isArray(sorter)) {
+    // 多列排序情况（这里只处理单列排序）
+    if (sorter.length > 0) {
+      sortParams.sortField = sorter[0].field as string;
+      sortParams.sortOrder = sorter[0].order!;
+    } else {
+      sortParams.sortField = 'id';
+      sortParams.sortOrder = '';
+    }
+  } else {
+    // 单列排序情况
+    if (sorter && sorter.column) {
+      sortParams.sortField = sorter.field as string;
+      sortParams.sortOrder = sorter.order!;
+    } else {
+      sortParams.sortField = 'id';
+      sortParams.sortOrder = '';
+    }
+  }
+
+  // 更新筛选参数
+  if (filters.reviewStatus) {
+    searchStatus.value = filters.reviewStatus[0] as string;
+  } else {
+    searchStatus.value = undefined;
+  }
+
+  // 重新获取数据
+  fetchAdvancementData();
+};
+
+// 搜索功能
+const handleSearch = () => {
+  pagination.current = 1; // 重置到第一页
+  fetchAdvancementData();
+};
+
+// 重置搜索
+const reset = () => {
+  searchName.value = "";
+  searchPhone.value = "";
+  searchStatus.value = undefined;
+  pagination.current = 1;
+  fetchAdvancementData();
+};
+
+const router = useRouter();
+
+// 查看详情
+const viewDetail = (record: AdvancementApply) => {
+  // 跳转到晋升申请详情页面
+  router.push({
+    path: '/employeeDetail',
+    query: {
+      id: record.id
+    }
+  });
+};
+
+// 返回上一页
+const goBack = () => {
+  router.push('/performanceManagement');
+};
+
+// 初始化加载数据
+onMounted(() => {
+  fetchAdvancementData();
+});
+
+</script>
+
+<template>
+  <!-- 搜索框 -->
+  <div class="search-box">
+    <a-form layout="inline">
+      <a-space>
+        <a-form-item label="申请人姓名">
+          <a-input-search
+              style="width: 300px"
+              placeholder="请输入姓名"
+              class="custom-search"
+              enter-button
+              v-model:value="searchName"
+              @pressEnter="handleSearch"
+              @search="handleSearch"
+          />
+        </a-form-item>
+        <a-form-item label="手机号">
+          <a-input-search
+              style="width: 300px"
+              placeholder="请输入手机号"
+              v-model:value="searchPhone"
+              @pressEnter="handleSearch"
+              @search="handleSearch"
+          enter-button
+          class="custom-search"
+          />
+        </a-form-item>
+        <a-button @click="reset">重置</a-button>
+        <a-button class="custom-button" @click="goBack">返回</a-button>
+      </a-space>
+    </a-form>
+  </div>
+
+  <!-- 数据表格 -->
+  <a-table
+      :columns="columns"
+      :data-source="tableData"
+      :scroll="{ x: 1600 }"
+      :loading="loading"
+      :pagination="pagination"
+      @change="handleTableChange"
+      bordered
+      rowKey="id"
+      size="middle"
+  >
+    <template #bodyCell="{ column, record }">
+      <!-- 操作列 -->
+      <template v-if="column.key === 'action'">
+        <a-space>
+          <a-button size="small" @click="viewDetail(record)">查看详情</a-button>
+
+        </a-space>
+      </template>
+    </template>
+  </a-table>
+
+</template>
+
+<style scoped>
+.search-box {
+  margin-bottom: 20px;
+  padding: 16px;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  display: flex;
+  align-items: center;
+}
+
+:deep(.ant-table-thead) > tr > th {
+  background-color: #f0f5ff !important;
+  font-weight: 600;
+}
+
+:deep(.ant-table-row:hover) {
+  background-color: #fafafa !important;
+}
+
+.search-box .ant-form-item {
+  margin-bottom: 0;
+  margin-right: 16px;
+}
+
+.search-box .ant-space {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.custom-button {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  color: #fff;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.custom-button:hover,
+.custom-button:focus {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  color: #fff;
+  opacity: 0.9;
+}
+
+.custom-search :deep(.ant-input-search-button) {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  color: #fff;
+}
+
+.custom-search :deep(.ant-input-search-button:hover),
+.custom-search :deep(.ant-input-search-button:focus) {
+  background-color: #fa8c16;
+  border-color: #fa8c16;
+}
+
+.custom-search :deep(.ant-input) {
+  border-right-color: #ffa940;
+}
+
+/* 审核人选择弹窗样式 */
+.supervisor-list {
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 10px;
+}
+
+.radio-group {
+  width: 100%;
+}
+
+.supervisor-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 0;
+  width: 100%;
+}
+
+.supervisor-info {
+  display: flex;
+  flex-direction: column;
+  margin-left: 12px;
+}
+
+.supervisor-id {
+  font-size: 12px;
+  color: #666;
+}
+
+.supervisor-name {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+:deep(.ant-list-item) {
+  padding: 8px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+:deep(.ant-list-item:last-child) {
+  border-bottom: none;
+}
+
+:deep(.ant-radio-wrapper) {
+  width: 100%;
+  align-items: flex-start;
+}
+
+/* 操作按钮样式 */
+.action-btn {
+  margin: 0 4px;
+  font-size: 14px;
+}
+
+.action-btn.primary {
+  color: #1890ff;
+}
+
+.action-btn.danger {
+  color: #ff4d4f;
+}
+</style>
\ No newline at end of file
diff --git a/src/view/employeeApplication/employeeDetail.vue b/src/view/employeeApplication/employeeDetail.vue
new file mode 100644
index 0000000..00915a8
--- /dev/null
+++ b/src/view/employeeApplication/employeeDetail.vue
@@ -0,0 +1,659 @@
+<template>
+  <div class="detail-container">
+    <a-page-header
+        title="晋升申请详情"
+        @back="goBack"
+        class="page-header"
+    />
+
+    <a-card v-if="advancement" class="detail-card">
+      <a-skeleton active :loading="loading" />
+
+      <div v-if="!loading" class="detail-content">
+        <!-- 基本信息 -->
+        <div class="section">
+          <h3 class="section-title">基本信息</h3>
+          <a-descriptions bordered :column="1" class="custom-descriptions">
+            <a-descriptions-item label="申请ID">
+              <div class="info-value">{{ advancement.id }}</div>
+            </a-descriptions-item>
+            <a-descriptions-item label="申请人姓名">
+              <div class="info-value">{{ advancement.name }}</div>
+            </a-descriptions-item>
+            <a-descriptions-item label="手机号">
+              <div class="info-value">{{ advancement.phone }}</div>
+            </a-descriptions-item>
+            <a-descriptions-item label="创建时间">
+              <div class="info-value">{{ advancement.createTime }}</div>
+            </a-descriptions-item>
+          </a-descriptions>
+        </div>
+
+        <!-- 审核信息 -->
+        <div class="section">
+          <h3 class="section-title">审核信息</h3>
+          <a-descriptions bordered :column="1" class="custom-descriptions">
+            <a-descriptions-item label="审核状态">
+              <a-tag :color="getStatusColor(advancement.reviewStatus)" class="status-tag">
+                {{ advancement.reviewStatus }}
+              </a-tag>
+            </a-descriptions-item>
+            <a-descriptions-item label="拒绝理由" v-if="advancement.rejectReason">
+              <div class="info-value">{{ advancement.rejectReason }}</div>
+            </a-descriptions-item>
+          </a-descriptions>
+        </div>
+
+        <!-- 附件信息 -->
+        <div class="section">
+          <h3 class="section-title">附件信息</h3>
+          <a-descriptions bordered :column="1" class="custom-descriptions">
+            <a-descriptions-item label="简历">
+              <a :href="getResumeUrl(advancement.resume)" target="_blank" class="resume-link">
+                <span v-if="advancement.resume">
+                  <file-pdf-outlined /> 查看简历
+                </span>
+                <span v-else>-</span>
+              </a>
+            </a-descriptions-item>
+            <a-descriptions-item label="查询凭证">
+              <div class="info-value">{{ advancement.credential || '-' }}</div>
+            </a-descriptions-item>
+          </a-descriptions>
+        </div>
+
+        <!-- 操作按钮 -->
+        <div class="action-buttons" v-if="advancement.reviewStatus === '待审核'">
+          <a-button type="primary" @click="review(advancement)" class="review-btn">
+            <audit-outlined /> 审核
+          </a-button>
+          <a-button type="danger" @click="showRejectModal(advancement)" class="reject-btn">
+            <close-circle-outlined /> 驳回
+          </a-button>
+        </div>
+      </div>
+    </a-card>
+
+    <a-empty v-if="!loading && !advancement" description="未找到晋升申请信息" />
+
+    <!-- 审核人选择弹窗 -->
+    <a-modal
+        v-model:visible="reviewModalVisible"
+        :title="reviewModalTitle"
+        width="600px"
+        :confirm-loading="loadingSupervisors"
+        @ok="submitReview"
+        @cancel="reviewModalVisible = false"
+        :ok-text="'审核'"
+        :cancel-text="'取消'"
+    >
+      <a-spin :spinning="loadingSupervisors">
+        <a-empty v-if="supervisorList.length === 0" description="暂无审核人信息" />
+
+        <div v-else class="supervisor-list">
+          <h4 class="select-title">请选择审核主管：</h4>
+          <a-radio-group v-model:value="selectedSupervisorId" class="radio-group">
+            <a-list :data-source="supervisorList" :bordered="false">
+              <template #renderItem="{ item }">
+                <a-list-item>
+                  <a-radio :value="item.id" class="supervisor-radio">
+                    <div class="supervisor-item">
+                      <div class="supervisor-info">
+                        <div class="supervisor-name">{{ item.nickName || '-' }}</div>
+                        <div class="supervisor-id">ID: {{ item.id }}</div>
+                      </div>
+                    </div>
+                  </a-radio>
+                </a-list-item>
+              </template>
+            </a-list>
+          </a-radio-group>
+        </div>
+      </a-spin>
+    </a-modal>
+
+    <!-- 驳回申请弹窗 -->
+    <a-modal
+        v-model:visible="rejectModalVisible"
+        title="驳回申请"
+        width="500px"
+        :confirm-loading="rejectLoading"
+        @ok="submitReject"
+        @cancel="rejectModalVisible = false"
+        :ok-text="'确认驳回'"
+        :cancel-text="'取消'"
+        okType="danger"
+    >
+      <a-alert type="warning" show-icon class="reject-alert">
+        <template #message>
+          <span>您确定要驳回此申请吗？</span>
+        </template>
+        <template #description>
+          <p class="reject-warning">驳回后申请人将收到通知，此操作不可撤销。</p>
+        </template>
+      </a-alert>
+
+      <div class="reject-form">
+        <a-form layout="vertical">
+          <a-form-item label="驳回原因" required>
+            <a-textarea
+                v-model:value="rejectReason"
+                placeholder="请输入详细的驳回原因..."
+                :rows="4"
+                :maxlength="200"
+                show-count
+                class="reject-reason"
+            />
+          </a-form-item>
+        </a-form>
+      </div>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { message } from 'ant-design-vue';
+import myAxios from '../../api/myAxios.ts';
+import {
+  FilePdfOutlined,
+  AuditOutlined,
+  CloseCircleOutlined
+} from '@ant-design/icons-vue';
+
+// 定义晋升申请详情接口
+interface AdvancementDetail {
+  id: number;
+  name: string;
+  phone: string;
+  resume: string;
+  credential: string;
+  reviewStatus: string;
+  rejectReason?: string;
+  createTime: string;
+}
+
+interface Supervisor {
+  id: number;
+  nickName: string;
+  userAvatar?: string;
+}
+
+const route = useRoute();
+const router = useRouter();
+const advancement = ref<AdvancementDetail | null>(null);
+const loading = ref(true);
+
+// 获取晋升申请详情
+const fetchAdvancementDetail = async () => {
+  try {
+    loading.value = true;
+    const id = route.query.id;
+    const storedToken = localStorage.getItem('token');
+
+    if (!id) {
+      message.error('缺少申请ID参数');
+      return;
+    }
+
+    const response = await myAxios.post(
+        '/advancementApply/queryById',
+        { id: Number(id) },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': storedToken
+          }
+        }
+    ) as { code: number; data: AdvancementDetail; message: string };
+
+    if (response.code === 1 && response.data) {
+      advancement.value = response.data;
+    } else {
+      message.error(response.message || '获取申请详情失败');
+    }
+  } catch (error) {
+    console.error('获取晋升申请详情失败:', error);
+    message.error('获取申请详情失败，请稍后重试');
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 获取简历URL
+const getResumeUrl = (resumeCode: string) => {
+  return resumeCode ? `/resume/view?code=${resumeCode}` : '#';
+};
+
+// 根据状态获取标签颜色
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case '已通过': return 'green';
+    case '待审核': return 'blue';
+    case '已拒绝': return 'red';
+    case '已撤回': return 'orange';
+    default: return 'default';
+  }
+};
+
+// 返回上一页
+const goBack = () => {
+  router.push('/employeeApplication');
+};
+
+onMounted(() => {
+  fetchAdvancementDetail();
+});
+
+// 审核弹窗相关变量
+const reviewModalVisible = ref(false);
+const reviewModalTitle = ref("选择审核主管");
+const supervisorList = ref<Supervisor[]>([]);
+const loadingSupervisors = ref(false);
+const selectedSupervisorId = ref<number | null>(null);
+const currentApplyId = ref<number | null>(null); // 当前选中的晋升申请ID
+
+// 查看审核人信息
+const review = async (record: AdvancementDetail) => {
+  try {
+    loadingSupervisors.value = true;
+    const storedToken = localStorage.getItem('token');
+    currentApplyId.value = record.id; // 保存当前申请ID
+
+    // 调用审核人查询接口
+    const response = await myAxios.post(
+        '/advancementApply/query/supervisor',
+        { applyId: record.id },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': storedToken
+          }
+        }
+    ) as { code: number; data: Supervisor[]; message: string };
+
+    if (response.code === 1 && response.data) {
+      supervisorList.value = response.data;
+      selectedSupervisorId.value = null; // 重置选择
+      reviewModalVisible.value = true;
+    } else {
+      message.error(response.message || '获取审核人信息失败');
+    }
+  } catch (error) {
+    console.error('获取审核人信息失败:', error);
+    message.error('获取审核人信息失败，请稍后重试');
+  } finally {
+    loadingSupervisors.value = false;
+  }
+};
+
+// 提交审核
+const submitReview = async () => {
+  if (!selectedSupervisorId.value) {
+    message.warning('请选择主管');
+    return;
+  }
+
+  if (!currentApplyId.value) {
+    message.error('未找到申请记录');
+    return;
+  }
+
+  try {
+    const storedToken = localStorage.getItem('token');
+    loadingSupervisors.value = true;
+
+    // 调用审核接口
+    const response = await myAxios.post(
+        '/advancementApply/approve',
+        {
+          applyId: currentApplyId.value,
+          userId: selectedSupervisorId.value
+        },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': storedToken
+          }
+        }
+    ) as { code: number; message: string };
+
+    if (response.code === 1) {
+      message.success('审核成功');
+      reviewModalVisible.value = false;
+      // 刷新页面数据
+      fetchAdvancementDetail();
+    } else {
+      message.error(response.message || '审核失败');
+    }
+  } catch (error) {
+    console.error('审核提交失败:', error);
+    message.error('审核提交失败，请稍后重试');
+  } finally {
+    loadingSupervisors.value = false;
+  }
+};
+
+// 驳回相关状态
+const rejectModalVisible = ref(false);
+const rejectLoading = ref(false);
+const rejectReason = ref('');
+
+// 显示驳回弹窗
+const showRejectModal = (record: AdvancementDetail) => {
+  currentApplyId.value = record.id;
+  rejectReason.value = '';
+  rejectModalVisible.value = true;
+};
+
+// 提交驳回
+const submitReject = async () => {
+  if (!rejectReason.value.trim()) {
+    message.warning('请填写驳回原因');
+    return;
+  }
+
+  try {
+    rejectLoading.value = true;
+    const storedToken = localStorage.getItem('token');
+
+    const response = await myAxios.post(
+        '/advancementApply/reject',
+        {
+          applyId: currentApplyId.value,
+          rejectReason: rejectReason.value
+        },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': storedToken
+          }
+        }
+    ) as { code: number; message: string };
+
+    if (response.code === 1) {
+      message.success('申请已驳回');
+      rejectModalVisible.value = false;
+      // 刷新页面数据
+      fetchAdvancementDetail();
+    } else {
+      message.error(response.message || '驳回申请失败');
+    }
+  } catch (error) {
+    console.error('驳回申请失败:', error);
+    message.error('驳回申请失败，请稍后重试');
+  } finally {
+    rejectLoading.value = false;
+  }
+};
+</script>
+
+
+<style scoped>
+.detail-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: 100vh;
+  max-width: 1200px;
+  margin: 0 auto;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.page-header {
+  background-color: #fff;
+  margin-bottom: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+  padding: 16px 24px;
+}
+
+.page-header :deep(.ant-page-header-heading-title) {
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+.detail-card {
+  border-radius: 10px;
+  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
+  padding: 24px;
+  background: #fff;
+  border: 1px solid #eaeef2;
+}
+
+.detail-content {
+  padding: 0 10px;
+}
+
+.section {
+  margin-bottom: 30px;
+  padding: 20px;
+  background: #f9fbfd;
+  border-radius: 8px;
+  border: 1px solid #e8f4ff;
+  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.05);
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: #1890ff;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e8f4ff;
+  position: relative;
+}
+
+.section-title::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 80px;
+  height: 2px;
+  background: #1890ff;
+}
+
+.custom-descriptions :deep(.ant-descriptions-item-label) {
+  font-weight: 600;
+  background-color: #f0f8ff !important;
+  width: 140px;
+  color: #2c3e50;
+  font-size: 15px;
+}
+
+.custom-descriptions :deep(.ant-descriptions-item-content) {
+  padding: 14px 16px;
+  background: #fff;
+  font-size: 15px;
+}
+
+.info-value {
+  font-size: 15px;
+  color: #333;
+}
+
+.status-tag {
+  font-weight: 600;
+  padding: 5px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.resume-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+  color: #1890ff;
+  padding: 6px 12px;
+  border-radius: 6px;
+  transition: all 0.3s;
+  background: #f0f8ff;
+  border: 1px solid #d9e7ff;
+}
+
+.resume-link:hover {
+  color: #40a9ff;
+  background-color: #e6f7ff;
+  border-color: #91d5ff;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(24, 144, 255, 0.1);
+}
+
+.action-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 1px solid #f0f0f0;
+}
+
+.review-btn, .reject-btn {
+  height: 42px;
+  font-size: 16px;
+  font-weight: 500;
+  padding: 0 30px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 140px;
+  justify-content: center;
+  border-radius: 6px;
+  transition: all 0.3s;
+}
+
+.review-btn {
+  background: linear-gradient(135deg, #1890ff, #096dd9);
+  border: none;
+  box-shadow: 0 4px 10px rgba(24, 144, 255, 0.3);
+}
+
+.review-btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 14px rgba(24, 144, 255, 0.4);
+}
+
+.reject-btn {
+  background: linear-gradient(135deg, #ff4d4f, #cf1322);
+  border: none;
+  box-shadow: 0 4px 10px rgba(255, 77, 79, 0.3);
+}
+
+.reject-btn:hover {
+  background: linear-gradient(135deg, #ff7875, #ff4d4f);
+  transform: translateY(-3px);
+  box-shadow: 0 6px 14px rgba(255, 77, 79, 0.4);
+}
+
+.supervisor-list {
+  max-height: 400px;
+  overflow-y: auto;
+  padding: 15px;
+  background: #f9f9f9;
+  border-radius: 8px;
+  border: 1px solid #eee;
+}
+
+.select-title {
+  margin-bottom: 15px;
+  font-weight: 500;
+  color: #333;
+  font-size: 16px;
+}
+
+.radio-group {
+  width: 100%;
+}
+
+.supervisor-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  width: 100%;
+  gap: 15px;
+}
+
+.supervisor-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.supervisor-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.supervisor-id {
+  font-size: 14px;
+  color: #666;
+}
+
+:deep(.ant-list-item) {
+  padding: 8px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+:deep(.ant-list-item:last-child) {
+  border-bottom: none;
+}
+
+:deep(.supervisor-radio .ant-radio) {
+  top: 0;
+}
+
+:deep(.supervisor-radio .ant-radio-wrapper) {
+  align-items: flex-start;
+  width: 100%;
+}
+
+:deep(.ant-modal-body) {
+  padding: 24px;
+}
+
+/* 驳回弹窗样式 */
+.reject-alert {
+  margin-bottom: 20px;
+  border-radius: 8px;
+  border: 1px solid #fffbe6;
+}
+
+.reject-warning {
+  margin-top: 8px;
+  color: #d48806;
+  font-weight: 500;
+}
+
+.reject-form {
+  padding: 10px;
+}
+
+.reject-reason {
+  border-radius: 8px;
+  resize: vertical;
+  padding: 12px;
+  border: 1px solid #d9d9d9;
+  transition: all 0.3s;
+}
+
+.reject-reason:focus {
+  border-color: #40a9ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+
+/* 空状态样式 */
+:deep(.ant-empty) {
+  margin: 40px 0;
+}
+
+:deep(.ant-empty-image) {
+  height: 120px;
+}
+
+:deep(.ant-empty-description) {
+  font-size: 16px;
+  color: #666;
+}
+</style>
\ No newline at end of file
diff --git a/src/view/performance/customerDetail.vue b/src/view/performance/customerDetail.vue
index 9def2ab..b0e5c68 100644
--- a/src/view/performance/customerDetail.vue
+++ b/src/view/performance/customerDetail.vue
@@ -1,106 +1,135 @@
 <script setup lang="ts">
-// 这里可以定义一些响应式数据或者方法，但是由于是静态页面，这里暂时不需要
+import router from "../../router";
+// 静态页面无需逻辑
+const goBack = () => {
+  router.push('/customerOrder');
+};
 </script>
 
 <template>
-  <div class="order-details">
+  <div class="order-details-container">
     <!-- 订单状态 -->
-    <div class="order-status card">
-      <span class="status-label">订单状态</span>
-      <span class="status-value status-refunded">已退款</span>
+    <div class="card order-status-card">
+      <h3 class="card-title">订单状态</h3>
+      <span class="status-tag status-refunded">已退款</span>
+      <a-button class="custom-button" @click="goBack">返回</a-button>
     </div>
 
     <!-- 商品信息 -->
-    <div class="product-info card">
-      <img src="https://via.placeholder.com/100" alt="商品图片" class="product-image"/>
-      <div class="product-text">
-        <p class="product-title">陈正康考研英语核心2000词汇(考研英语核心2000词汇)</p>
+    <div class="card product-info-card">
+      <img src="https://via.placeholder.com/120" alt="商品图片" class="product-image"/>
+      <div class="product-content">
+        <h4 class="product-title">陈正康考研英语核心2000词汇(考研英语核心2000词汇)</h4>
         <p class="product-subtitle">23考研·训练营</p>
       </div>
       <span class="product-price">¥9.9</span>
     </div>
 
     <!-- 订单信息 -->
-    <div class="order-info card">
-      <p>订单编号：202506190848352695125648642</p>
-      <p>下单时间：2025-06-19 08:48:35</p>
-      <p>退款时间：2025-07-02 11:00:00</p>
+    <div class="card order-info-card">
+      <h3 class="card-title">订单信息</h3>
+      <ul class="info-list">
+        <li><strong>订单编号：</strong>202506190848352695125648642</li>
+        <li><strong>下单时间：</strong>2025-06-19 08:48:35</li>
+        <li><strong>退款时间：</strong>2025-07-02 11:00:00</li>
+      </ul>
     </div>
 
     <!-- 价格明细 -->
-    <div class="price-details card">
-      <div class="price-row"><span>课程价格</span><span>¥19.9</span></div>
-      <div class="price-row"><span>折扣优惠</span><span>-¥10</span></div>
-      <div class="price-row"><span>订单金额</span><span>¥9.9</span></div>
-      <div class="price-row refund"><span>退款金额</span><span>¥9.9</span></div>
+    <div class="card price-details-card">
+      <h3 class="card-title">价格明细</h3>
+      <ul class="price-list">
+        <li class="price-item"><span>课程价格</span><span>¥19.9</span></li>
+        <li class="price-item"><span>折扣优惠</span><span>-¥10</span></li>
+        <li class="price-item total"><span>订单金额</span><span>¥9.9</span></li>
+        <li class="price-item refund"><span>退款金额</span><span>¥9.9</span></li>
+      </ul>
     </div>
   </div>
 </template>
 
 <style scoped>
-.order-details {
+.order-details-container {
   width: 100%;
-  max-width: 600px;
-  margin: 30px auto;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  margin: 4rem auto;
+  padding: 0 1.5rem;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  color: #2c2c2c;
+  background: linear-gradient(to bottom right, #f4f6f8, #eef1f5);
 }
 
 .card {
-  background: linear-gradient(to right bottom, #f9f9f9, #ffffff);
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  padding: 20px;
-  margin-bottom: 20px;
-  transition: all 0.3s ease-in-out;
+  background: white;
+  border-radius: 18px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
+  padding: 28px;
+  margin-bottom: 24px;
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
 }
 .card:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+  transform: translateY(-4px);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
 }
 
-/* 订单状态 */
-.order-status {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: bold;
-}
-.status-label {
+/* 卡片标题 */
+.card-title {
+  font-size: 16px;
+  font-weight: 600;
   color: #333;
+  margin-bottom: 18px;
+  display: flex;
+  align-items: center;
 }
-.status-value {
-  font-weight: bold;
-  padding: 5px 10px;
-  border-radius: 6px;
+.card-title::before {
+  content: '';
+  width: 4px;
+  height: 16px;
+  background: linear-gradient(to bottom, #4a90e2, #54b4ef);
+  margin-right: 10px;
+  border-radius: 2px;
+}
+
+/* 状态标签 */
+.status-tag {
+  display: inline-block;
+  padding: 6px 14px;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 10px;
+  color: white;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 .status-refunded {
-  color: #fff;
   background-color: #e57373;
+  margin-right: 10px;
 }
 
-/* 商品信息 */
-.product-info {
+/* 商品信息卡片 */
+.product-info-card {
   display: flex;
   align-items: center;
+  gap: 20px;
 }
 .product-image {
   width: 100px;
   height: 100px;
   object-fit: cover;
-  border-radius: 8px;
-  margin-right: 15px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 }
-.product-text {
+.product-content {
   flex: 1;
 }
 .product-title {
   font-size: 16px;
   font-weight: 600;
-  color: #333;
-  margin-bottom: 5px;
+  color: #222;
+  margin-bottom: 6px;
 }
 .product-subtitle {
-  font-size: 14px;
+  font-size: 13px;
   color: #777;
 }
 .product-price {
@@ -109,25 +138,75 @@
   color: #d32f2f;
 }
 
-/* 订单信息 */
-.order-info p {
-  margin: 6px 0;
+/* 订单信息列表 */
+.info-list {
+  list-style: none;
+  padding-left: 0;
+  margin-top: 12px;
+}
+.info-list li {
   font-size: 14px;
   color: #555;
+  margin-bottom: 10px;
 }
 
 /* 价格明细 */
-.price-details {
-  line-height: 1.8;
+.price-list {
+  list-style: none;
+  padding-left: 0;
+  margin-top: 12px;
 }
-.price-row {
+.price-item {
   display: flex;
   justify-content: space-between;
+  padding: 10px 0;
+  border-bottom: 1px solid #eee;
   font-size: 14px;
   color: #444;
+  transition: color 0.2s ease;
 }
-.price-row.refund span {
+.price-item:last-child {
+  border-bottom: none;
+}
+.price-item:hover {
+  color: #222;
+}
+.price-item.total {
+  font-weight: bold;
+  color: #222;
+}
+.price-item.refund span {
   color: #d32f2f;
   font-weight: bold;
 }
+
+.custom-button {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  color: #fff;
+}
+
+.custom-button:hover,
+.custom-button:focus {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  color: #fff;
+  opacity: 0.9;
+}
+
+.custom-search :deep(.ant-input-search-button) {
+  background-color: #ffa940;
+  border-color: #ffa940;
+}
+
+.custom-search :deep(.ant-input-search-button:hover),
+.custom-search :deep(.ant-input-search-button:focus) {
+  background-color: #fa8c16;
+  border-color: #fa8c16;
+}
+
+
+.custom-search :deep(.ant-input) {
+  border-right-color: #ffa940;
+}
 </style>
\ No newline at end of file
diff --git a/src/view/performance/customerOrder.vue b/src/view/performance/customerOrder.vue
index 369c84d..879a1e4 100644
--- a/src/view/performance/customerOrder.vue
+++ b/src/view/performance/customerOrder.vue
@@ -14,6 +14,9 @@
           />
         </a-form-item>
         <a-button class="custom-button"  @click="reset">重置搜索</a-button>
+        <a-button class="custom-button" @click="goBack">返回</a-button>
+
+
       </a-space>
     </a-form>
   </div>
@@ -50,7 +53,7 @@
         <a-space :size="8">
           <a-button
               size="small"
-              @click="customerDetail(record.id)"
+              @click="customerDetail"
           >
             详情
           </a-button>
@@ -290,6 +293,10 @@ onMounted(() => {
 const customerDetail =()=>{
   router.push('/customerDetail')
 }
+
+const goBack = () => {
+  router.push('/employeePerformaince');
+};
 </script>
 
 <style scoped>
@@ -344,4 +351,22 @@ const customerDetail =()=>{
 :deep(.ant-table-row:hover) {
   background-color: #fafafa !important;
 }
+.custom-button {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  color: #fff;
+}
+
+.custom-button:hover,
+.custom-button:focus {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  color: #fff;
+  opacity: 0.9;
+}
+
+.custom-search :deep(.ant-input-search-button) {
+  background-color: #ffa940;
+  border-color: #ffa940;
+}
 </style>
\ No newline at end of file
diff --git a/src/view/performance/employeePerformaince.vue b/src/view/performance/employeePerformaince.vue
index 7c2fb2e..88df3de 100644
--- a/src/view/performance/employeePerformaince.vue
+++ b/src/view/performance/employeePerformaince.vue
@@ -1,43 +1,87 @@
 <script setup lang="ts">
-import {ref, onMounted} from "vue";
-import {useRoute, useRouter} from "vue-router";
+import {ref, onMounted, reactive} from "vue";
+import {useRouter, useRoute} from "vue-router";
 import {message} from "ant-design-vue";
+import myAxios from "../../api/myAxios.ts";
+const visible = ref(false); // 控制弹窗显示
+const newRate = ref("");   // 新比例值
+const updating = ref(false); // 更新状态
+// 获取路由参数
+const route = useRoute();
+const router = useRouter();
+const managerId = ref(route.query.managerId as string || "");
 
-// 修改列定义为主管业绩相关字段
+// 定义员工绩效数据结构
+interface EmployeePerformance {
+  id: number;
+  nickName: string;
+  phoneNumber: string;
+  promoCount: number;
+  orderCount: number;
+  totalAmount: number;
+  netAmount: number;
+  tokenLess: number;       // 待释放
+  toString: number;        // 可结算
+  refunded: number;        // 已回退
+  userId: number;
+}
+
+// 修改列定义以匹配接口返回的字段
 const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    key: 'id',
+    width: 100,
+    fixed: 'left',
+    align: 'center'
+  },
+  {
+    title: 'userId',
+    dataIndex: 'userId',
+    key: 'userId',
+    width: 100,
+    fixed: 'left',
+    align: 'center'
+  },
   {
     title: '员工姓名',
-    dataIndex: 'name',
-    key: 'name',
+    dataIndex: 'nickName',
+    key: 'nickName',
     width: 100,
     fixed: 'left',
     align: 'center'
   },
   {
     title: '手机号',
-    dataIndex: 'phone',
-    key: 'phone',
+    dataIndex: 'phoneNumber',
+    key: 'phoneNumber',
     width: 120,
     align: 'center'
-  },
-  {
-    title: '员工数',
-    dataIndex: 'staffCount',
-    key: 'staffCount',
-    width: 80,
+  },{
+    title: '订单总金额',
+    dataIndex: 'totalAmount',
+    key: 'totalAmount',
+    width: 90,
+    align: 'center'
+  },{
+    title: '净成交',
+    dataIndex: 'netAmount',
+    key: 'netAmount',
+    width: 100,
     align: 'center'
   },
   {
     title: '推广数',
-    dataIndex: 'promotionCount',
-    key: 'promotionCount',
+    dataIndex: 'promoCount',
+    key: 'promoCount',
     width: 80,
     align: 'center'
   },
   {
-    title: '比例',
-    dataIndex: 'ratio',
-    key: 'ratio',
+    title: '客户数量',
+    dataIndex: 'empCount',
+    key: 'empCount',
     width: 80,
     align: 'center'
   },
@@ -48,45 +92,31 @@ const columns = [
     width: 80,
     align: 'center'
   },
-  {
-    title: '总订单',
-    dataIndex: 'totalOrders',
-    key: 'totalOrders',
-    width: 90,
-    align: 'center'
-  },
-  {
-    title: '退款',
-    dataIndex: 'refund',
-    key: 'refund',
-    width: 80,
-    align: 'center'
-  },
-  {
-    title: '净成交',
-    dataIndex: 'netAmount',
-    key: 'netAmount',
-    width: 100,
-    align: 'center'
-  },
   {
     title: '待释放',
-    dataIndex: 'pendingRelease',
-    key: 'pendingRelease',
+    dataIndex: 'toRelease',
+    key: 'toRelease',
     width: 90,
     align: 'center'
   },
   {
     title: '可结算',
-    dataIndex: 'settleable',
-    key: 'settleable',
+    dataIndex: 'toSettle',
+    key: 'toSettle',
+    width: 90,
+    align: 'center'
+  },
+  {
+    title: '已结算',
+    dataIndex: 'settled',
+    key: 'settled',
     width: 90,
     align: 'center'
   },
   {
     title: '已回退',
-    dataIndex: 'returned',
-    key: 'returned',
+    dataIndex: 'refunded',
+    key: 'refunded',
     width: 90,
     align: 'center'
   },
@@ -99,115 +129,243 @@ const columns = [
   }
 ];
 
-// 定义主管业绩数据结构
-interface ManagerPerformance {
-  id: number;
-  name: string;
-  phone: string;
-  staffCount: number;
-  promotionCount: number;
-  ratio: string;
-  orderCount: number;
-  totalOrders: number;
-  refund: number;
-  netAmount: number;
-  pendingRelease: number;
-  settleable: number;
-  returned: number;
-}
-
-const tableData = ref<ManagerPerformance[]>([]);
+const tableData = ref<EmployeePerformance[]>([]);
 const loading = ref(false);
 const searchName = ref("");
 const searchPhone = ref("");
 
-// 生成模拟数据
-const generateMockData = () => {
-  const mockData: ManagerPerformance[] = [];
-  const names = ['张员工', '李员工', '王员工', '赵员工', '钱员工', '孙员工', '周员工', '吴员工'];
-  const phones = ['13800138000', '13900139000', '13700137000', '13600136000', '13500135000', '13400134000', '13300133000', '13200132000'];
+// 分页配置
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showQuickJumper: true,
+  showTotal: (total: number) => `共 ${total} 条记录`,
+  pageSizeOptions: ['10', '20', '30', '50'],
+});
 
-  for (let i = 0; i < 15; i++) {
-    const nameIndex = i % names.length;
-    const phoneIndex = i % phones.length;
-
-    mockData.push({
-      id: i + 1,
-      name: names[nameIndex],
-      phone: phones[phoneIndex],
-      staffCount: Math.floor(Math.random() * 20) + 5,
-      promotionCount: Math.floor(Math.random() * 100) + 50,
-      ratio: `${Math.floor(Math.random() * 20) + 10}%`,
-      orderCount: Math.floor(Math.random() * 500) + 100,
-      totalOrders: Math.floor(Math.random() * 1000) + 500,
-      refund: Math.floor(Math.random() * 50) + 10,
-      netAmount: Math.floor(Math.random() * 50000) + 10000,
-      pendingRelease: Math.floor(Math.random() * 10000) + 5000,
-      settleable: Math.floor(Math.random() * 30000) + 10000,
-      returned: Math.floor(Math.random() * 5000) + 1000
-    });
-  }
-
-  return mockData;
-};
-
-const originalTableData = ref<ManagerPerformance[]>([]);
-
-// 搜索功能
-const handleSearch = () => {
-  if (!searchName.value.trim() && !searchPhone.value.trim()) {
-    tableData.value = [...originalTableData.value];
+// 获取员工业绩数据
+const fetchEmployeePerformance = async () => {
+  if (!managerId.value) {
+    message.error("缺少主管ID参数");
     return;
   }
 
-  const filtered = originalTableData.value.filter(item => {
-    const nameMatch = searchName.value ? item.name.includes(searchName.value) : true;
-    const phoneMatch = searchPhone.value ? item.phone.includes(searchPhone.value) : true;
-    return nameMatch && phoneMatch;
-  });
+  loading.value = true;
+  const storedToken = localStorage.getItem('token');
 
-  if (filtered.length === 0) {
-    message.warning("未找到匹配员工业绩数据");
-    tableData.value = [];
-  } else {
-    tableData.value = filtered;
+  try {
+    const params = {
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+      nickName: searchName.value,
+      phoneNumber: searchPhone.value,
+      supervisorUserId: managerId.value, // 使用路由传递的managerId
+      sortField: "",
+      sortOrder: "",
+    };
+
+    const response: any = await myAxios.post(
+        "/perform/staff/page",
+        params,
+        { headers: { Authorization: storedToken } }
+    );
+    console.log(response)
+    if (response.code === 1) {
+      tableData.value = response.data.records;
+      pagination.total = response.data.total || 0;
+    } else {
+      message.error(response.message || "获取数据失败");
+    }
+  } catch (error) {
+    console.error("获取员工业绩数据失败:", error);
+    message.error("获取数据失败，请重试");
+  } finally {
+    loading.value = false;
   }
 };
 
+// 处理分页变化
+const handlePaginationChange = (pag: { current: number; pageSize: number }) => {
+  pagination.current = pag.current;
+  pagination.pageSize = pag.pageSize;
+  fetchEmployeePerformance();
+};
+
+// 搜索功能
+const handleSearch = () => {
+  pagination.current = 1;
+  fetchEmployeePerformance();
+};
+
 // 重置搜索
 const reset = () => {
   searchName.value = "";
   searchPhone.value = "";
-  tableData.value = [...originalTableData.value];
+  pagination.current = 1;
+  fetchEmployeePerformance();
 };
 
-const router = useRouter();
-
-// 查看员工绩效明细 - 添加跳转功能
-const viewStaffPerformance = (record: ManagerPerformance) => {
-  // 跳转到员工绩效页面，并传递主管ID作为参数
+// 查看客户订单明细
+const viewCustomerOrders = (record: EmployeePerformance) => {
   router.push({
     path: '/customerOrder',
     query: {
-      managerId: record.id,
-      managerName: record.name
+      employeeId: record.userId,
+      employeeName: record.nickName
     }
   });
 };
 
+// 返回上一页
+const goBack = () => {
+  router.push('/performanceManagement');
+};
+const proportionRate = ref(''); // 默认值
+// 获取抽成比例
+const fetchProportionRate = async () => {
+  const storedToken = localStorage.getItem('token');
+  try {
+    const response: any = await myAxios.post(
+        "/perform/query/level/rate",
+        { level: "second" }, // 按照接口要求发送level参数
+        { headers: { Authorization: storedToken } }
+    );
+
+    if (response.code === 1) {
+      proportionRate.value = response.data;
+    } else {
+      message.error(response.message || "获取抽成比例失败");
+    }
+  } catch (error) {
+    console.error("获取抽成比例失败:", error);
+    message.error("获取抽成比例失败，请重试");
+  }
+};
+
+// 打开修改比例弹窗
+const openRateModal = () => {
+  newRate.value = proportionRate.value.toString();
+  visible.value = true;
+};
+
+// 更新比例
+const updateProportionRate = async () => {
+  // 验证输入
+  if (!newRate.value) {
+    message.warning("请输入抽成比例");
+    return;
+  }
+
+  const rateValue = parseFloat(newRate.value);
+  if (isNaN(rateValue)) {
+    message.warning("请输入有效的数字");
+    return;
+  }
+
+  if (rateValue < 0 || rateValue > 1) {
+    message.warning("比例值应在0到1之间");
+    return;
+  }
+
+  updating.value = true;
+  const storedToken = localStorage.getItem('token');
+
+  try {
+    const response: any = await myAxios.post(
+        "/perform/update/rate",
+        {
+          level: "second",
+          rate: parseFloat(rateValue.toFixed(2)) // 确保转换为数字类型
+        },
+        { headers: { Authorization: storedToken } }
+    );
+
+    if (response.code === 1) {
+      message.success("抽成比例更新成功");
+      // 修复语法错误：移除命名参数
+      proportionRate.value = parseFloat(rateValue.toFixed(2)).toString();
+      visible.value = false;
+    } else {
+      message.error(response.message || "更新抽成比例失败");
+    }
+  } catch (error) {
+    console.error("更新抽成比例失败:", error);
+    message.error("更新抽成比例失败，请重试");
+  } finally {
+    updating.value = false;
+  }
+};
+
 onMounted(() => {
-  loading.value = true;
-  // 模拟数据加载延迟
-  setTimeout(() => {
-    const mockData = generateMockData();
-    tableData.value = mockData;
-    originalTableData.value = mockData;
-    loading.value = false;
-  }, 800);
+  // 确保有managerId参数
+  if (!managerId.value) {
+    message.warning("未获取到主管ID");
+    goBack();
+    return;
+  }
+
+  fetchEmployeePerformance();
+  fetchProportionRate();
 });
 
-const goBack = () => {
-  router.push('/project');
+
+const filterNameInput = (e: Event) => {
+  const input = e.target as HTMLInputElement;
+  let value = input.value;
+
+  // 使用正则表达式过滤非中文字符
+  // value = value.replace(/[^\u4e00-\u9fa5]/g, '');
+  value = value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '');
+  // 更新输入框值
+  input.value = value;
+  searchName.value = value;
+};
+const filterPhoneInput = (e: Event) => {
+  const input = e.target as HTMLInputElement;
+  let value = input.value;
+
+  // 1. 移除非数字字符
+  value = value.replace(/\D/g, '');
+
+  // 2. 限制最多11位数字
+  if (value.length > 11) {
+    value = value.slice(0, 11);
+  }
+
+  // 更新输入框值
+  input.value = value;
+  searchPhone.value = value;
+};
+
+const filterRateInput = (e: Event) => {
+  const input = e.target as HTMLInputElement;
+  let value = input.value;
+
+  // 1. 移除非数字和非小数点的字符（但允许小数点）
+  value = value.replace(/[^\d.]/g, '');
+
+  // 2. 确保只有一个小数点
+  const decimalParts = value.split('.');
+  if (decimalParts.length > 2) {
+    // 如果有多个小数点，只保留第一个和第二个之间的内容
+    value = decimalParts[0] + '.' + decimalParts.slice(1).join('');
+  }
+
+  // 3. 限制小数点后最多两位数字
+  if (decimalParts.length > 1) {
+    value = decimalParts[0] + '.' + decimalParts[1].slice(0, 2);
+  }
+
+  // 4. 如果以小数点开头，在前面添加0
+  if (value.startsWith('.')) {
+    value = '0' + value;
+  }
+
+  // 5. 更新输入框值
+  input.value = value;
+  newRate.value = value;
 };
 </script>
 
@@ -217,52 +375,78 @@ const goBack = () => {
     <a-form layout="inline">
       <a-space>
         <a-form-item label="员工姓名">
-          <a-input-search
-              style="width: 300px"
+          <a-input
+              style="width: 200px"
               placeholder="请输入员工姓名"
-              class="custom-search"
-              enter-button
               v-model:value="searchName"
-              @pressEnter="handleSearch"
+              @click="handleSearch"
+              @input="filterNameInput"
+              class="custom-search"
           />
         </a-form-item>
         <a-form-item label="手机号">
-          <a-input-search
-              style="width: 300px"
+          <a-input
+              style="width: 200px"
               placeholder="请输入手机号"
               v-model:value="searchPhone"
-              @pressEnter="handleSearch"
-              enter-button
               class="custom-search"
+              @input="filterPhoneInput"
           />
         </a-form-item>
+        <a-button class="custom-button" @click="handleSearch" style="margin-right: 10px">搜索</a-button>
         <a-button @click="reset">重置</a-button>
-        <a-button class="custom-button" @click="goBack">返回</a-button>
+        <a-button @click="goBack" style="margin-left: 10px" class="custom-button">返回</a-button>
+        抽成占比<a-tag color="orange">{{ proportionRate }}</a-tag>
+        <a-button  @click="openRateModal" style="margin-left: 10px" class="custom-button">修改比例</a-button>
       </a-space>
     </a-form>
   </div>
+  <!-- 添加修改比例弹窗 -->
+  <a-modal
+      v-model:visible="visible"
+      title="修改抽成比例"
+      @ok="updateProportionRate"
+      :confirm-loading="updating"
+      :mask-closable="false"
+  >
+    <a-form layout="vertical">
+      <a-form-item label="新比例值（0-1之间）">
+        <a-input
+            v-model:value="newRate"
+            placeholder="请输入比例值（如0.35）"
+            @keyup.enter="updateProportionRate"
+            @input="filterRateInput"
+
+        />
+        <div style="margin-top: 8px; color: #999">
+          提示：比例值应为0到1之间的小数（如0.35表示35%），保留两位小数
+        </div>
+      </a-form-item>
+    </a-form>
+  </a-modal>
 
   <!-- 数据表格 -->
   <a-table
       :columns="columns"
       :data-source="tableData"
-      :scroll="{ x: 1500 }"
+      :scroll="{ x: 1600, y: 550 }"
       :loading="loading"
+      :pagination="pagination"
+      @change="handlePaginationChange"
       bordered
       rowKey="id"
-      size="middle"
   >
     <template #bodyCell="{ column, record }">
       <!-- 金额格式化 -->
-      <template v-if="['netAmount', 'pendingRelease', 'settleable', 'returned','refund'].includes(column.dataIndex)">
-        ¥{{ record[column.dataIndex as keyof ManagerPerformance].toLocaleString() }}
+      <template v-if="['totalAmount', 'netAmount', 'tokenLess', 'toString', 'refunded','toSettle','settled'].includes(column.dataIndex)">
+        ¥{{ (record[column.dataIndex as keyof EmployeePerformance] || 0).toLocaleString() }}
       </template>
 
-      <!-- 操作列 - 添加点击事件 -->
+      <!-- 操作列 -->
       <template v-if="column.key === 'action'">
         <a-button
             size="small"
-            @click="viewStaffPerformance(record)"
+            @click="viewCustomerOrders(record)"
         >
           客户订单明细
         </a-button>
@@ -278,6 +462,8 @@ const goBack = () => {
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  display: flex;
+  align-items: center;
 }
 
 :deep(.ant-table-thead) > tr > th {
@@ -289,12 +475,14 @@ const goBack = () => {
   background-color: #fafafa !important;
 }
 
-.search-box .ant-form-item {
+.search-box {
   margin-bottom: 0;
+  margin-right: 16px;
 }
 
-.search-box .ant-space {
-  width: 100%;
+.search-box {
+  display: flex;
+  align-items: center;
 }
 
 .custom-button {
@@ -307,7 +495,7 @@ const goBack = () => {
 .custom-button:focus {
   background-color: #ffa940;
   border-color: #ffa940;
-  color: #fff;
+  color:#fff;
   opacity: 0.9;
 }
 
@@ -322,8 +510,11 @@ const goBack = () => {
   border-color: #fa8c16;
 }
 
-
 .custom-search :deep(.ant-input) {
   border-right-color: #ffa940;
 }
+.custom-search :deep(.ant-input-search-button) {
+  background-color: #ffa940;
+  border-color: #ffa940;
+}
 </style>
\ No newline at end of file
diff --git a/src/view/performance/performanceManagement.vue b/src/view/performance/performanceManagement.vue
index fc464b8..f1a274c 100644
--- a/src/view/performance/performanceManagement.vue
+++ b/src/view/performance/performanceManagement.vue
@@ -1,43 +1,68 @@
 <script setup lang="ts">
-import {ref, onMounted} from "vue";
-import {useRoute, useRouter} from "vue-router";
-import {message} from "ant-design-vue";
-
-// 修改列定义为主管业绩相关字段
+import {ref, onMounted, reactive} from "vue";
+import {useRouter} from "vue-router";
+import {message, Modal} from "ant-design-vue";
+import myAxios from "../../api/myAxios.ts";
+const visible = ref(false); // 控制弹窗显示
+const newRate = ref("");   // 新比例值
+const updating = ref(false); // 更新状态
+// 修改列定义以匹配接口返回的字段
 const columns = [
+  {
+    title: 'id',
+    dataIndex: 'id',
+    key: 'id',
+    width: 100,
+    fixed: 'left',
+    align: 'center'
+  },
+  {
+    title: '主管ID',
+    dataIndex: 'userId',
+    key: 'userId',
+    width: 100,
+    fixed: 'left',
+    align: 'center'
+  },
   {
     title: '主管姓名',
-    dataIndex: 'name',
-    key: 'name',
+    dataIndex: 'nickName',
+    key: 'nickName',
     width: 100,
     fixed: 'left',
     align: 'center'
   },
   {
     title: '手机号',
-    dataIndex: 'phone',
-    key: 'phone',
+    dataIndex: 'phoneNumber',
+    key: 'phoneNumber',
     width: 120,
     align: 'center'
   },
   {
-    title: '员工数',
-    dataIndex: 'staffCount',
-    key: 'staffCount',
-    width: 80,
+    title: '订单总金额',
+    dataIndex: 'totalAmount',
+    key: 'totalAmount',
+    width: 90,
     align: 'center'
   },
   {
+    title: '净成交',
+    dataIndex: 'netAmount',
+    key: 'netAmount',
+    width: 100,
+    align: 'center'
+  }, {
     title: '推广数',
-    dataIndex: 'promotionCount',
-    key: 'promotionCount',
+    dataIndex: 'promoCount',
+    key: 'promoCount',
     width: 80,
     align: 'center'
   },
   {
-    title: '比例',
-    dataIndex: 'ratio',
-    key: 'ratio',
+    title: '员工数',
+    dataIndex: 'empCount',
+    key: 'empCount',
     width: 80,
     align: 'center'
   },
@@ -48,45 +73,33 @@ const columns = [
     width: 80,
     align: 'center'
   },
-  {
-    title: '总订单',
-    dataIndex: 'totalOrders',
-    key: 'totalOrders',
-    width: 90,
-    align: 'center'
-  },
-  {
-    title: '退款',
-    dataIndex: 'refund',
-    key: 'refund',
-    width: 80,
-    align: 'center'
-  },
-  {
-    title: '净成交',
-    dataIndex: 'netAmount',
-    key: 'netAmount',
-    width: 100,
-    align: 'center'
-  },
+
+
   {
     title: '待释放',
-    dataIndex: 'pendingRelease',
-    key: 'pendingRelease',
+    dataIndex: 'toRelease',
+    key: 'toRelease',
     width: 90,
     align: 'center'
   },
   {
     title: '可结算',
-    dataIndex: 'settleable',
-    key: 'settleable',
+    dataIndex: 'toSettle',
+    key: 'toSettle',
+    width: 90,
+    align: 'center'
+  },
+  {
+    title: '已结算',
+    dataIndex: 'settled',
+    key: 'settled',
     width: 90,
     align: 'center'
   },
   {
     title: '已回退',
-    dataIndex: 'returned',
-    key: 'returned',
+    dataIndex: 'refunded',
+    key: 'refunded',
     width: 90,
     align: 'center'
   },
@@ -99,21 +112,20 @@ const columns = [
   }
 ];
 
-// 定义主管业绩数据结构
+// 定义主管业绩数据结构以匹配接口
 interface ManagerPerformance {
   id: number;
-  name: string;
-  phone: string;
-  staffCount: number;
-  promotionCount: number;
-  ratio: string;
+  nickName: string;
+  phoneNumber: string;
+  empCount: number;
+  promoCount: number;
   orderCount: number;
-  totalOrders: number;
-  refund: number;
+  totalAmount: number;
   netAmount: number;
-  pendingRelease: number;
-  settleable: number;
-  returned: number;
+  toRelease: number;
+  toSettle: number;
+  refunded: number;
+  userId: number;
 }
 
 const tableData = ref<ManagerPerformance[]>([]);
@@ -121,93 +133,272 @@ const loading = ref(false);
 const searchName = ref("");
 const searchPhone = ref("");
 
-// 生成模拟数据
-const generateMockData = () => {
-  const mockData: ManagerPerformance[] = [];
-  const names = ['张主管', '李经理', '王总监', '赵主任', '钱组长', '孙课长', '周经理', '吴主管'];
-  const phones = ['13800138000', '13900139000', '13700137000', '13600136000', '13500135000', '13400134000', '13300133000', '13200132000'];
+// 分页配置
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showQuickJumper: true,
+  showTotal: (total: number) => `共 ${total} 条记录`,
+  pageSizeOptions: ['10', '20', '30', '50'],
+});
 
-  for (let i = 0; i < 15; i++) {
-    const nameIndex = i % names.length;
-    const phoneIndex = i % phones.length;
+// 获取主管业绩数据
+const fetchManagerPerformance = async () => {
+  loading.value = true;
+  const storedToken = localStorage.getItem('token');
+  try {
+    const params = {
+      current: pagination.current,
+      pageSize: pagination.pageSize,
+      nickName: searchName.value,
+      phoneNumber: searchPhone.value,
+      // 移除不必要的参数
+      sortField: "id",
+      sortOrder: "",
+      startDate: "",
+      endDate: ""
+    };
 
-    mockData.push({
-      id: i + 1,
-      name: names[nameIndex],
-      phone: phones[phoneIndex],
-      staffCount: Math.floor(Math.random() * 20) + 5,
-      promotionCount: Math.floor(Math.random() * 100) + 50,
-      ratio: `${Math.floor(Math.random() * 20) + 10}%`,
-      orderCount: Math.floor(Math.random() * 500) + 100,
-      totalOrders: Math.floor(Math.random() * 1000) + 500,
-      refund: Math.floor(Math.random() * 50) + 10,
-      netAmount: Math.floor(Math.random() * 50000) + 10000,
-      pendingRelease: Math.floor(Math.random() * 10000) + 5000,
-      settleable: Math.floor(Math.random() * 30000) + 10000,
-      returned: Math.floor(Math.random() * 5000) + 1000
-    });
+    // 修正请求格式：直接发送params作为请求体
+    const response: any = await myAxios.post(
+        "/perform/supervisor/page",
+        params, // 直接发送params对象作为请求体
+        { headers: { Authorization: storedToken } }
+    );
+
+    if (response.code === 1) {
+      tableData.value = response.data.records;
+      pagination.total = response.data.total || 0;
+    } else {
+      message.error(response.message || "获取数据失败");
+    }
+  } catch (error) {
+    console.error("获取主管业绩数据失败:", error);
+    message.error("获取数据失败，请重试");
+  } finally {
+    loading.value = false;
   }
-
-  return mockData;
 };
 
-const originalTableData = ref<ManagerPerformance[]>([]);
+// 处理分页变化
+const handlePaginationChange = (pag: { current: number; pageSize: number }) => {
+  pagination.current = pag.current;
+  pagination.pageSize = pag.pageSize;
+  fetchManagerPerformance();
+};
+
 
-// 搜索功能
 const handleSearch = () => {
-  if (!searchName.value.trim() && !searchPhone.value.trim()) {
-    tableData.value = [...originalTableData.value];
-    return;
+  // 验证手机号：如果输入了手机号但不是11位
+  if (searchPhone.value && searchPhone.value.length !== 11) {
+    message.warning("请输入11位手机号码");
+    return; // 不执行搜索
   }
 
-  const filtered = originalTableData.value.filter(item => {
-    const nameMatch = searchName.value ? item.name.includes(searchName.value) : true;
-    const phoneMatch = searchPhone.value ? item.phone.includes(searchPhone.value) : true;
-    return nameMatch && phoneMatch;
-  });
-
-  if (filtered.length === 0) {
-    message.warning("未找到匹配的主管业绩数据");
-    tableData.value = [];
-  } else {
-    tableData.value = filtered;
-  }
+  pagination.current = 1; // 重置到第一页
+  fetchManagerPerformance();
 };
 
 // 重置搜索
 const reset = () => {
   searchName.value = "";
   searchPhone.value = "";
-  tableData.value = [...originalTableData.value];
+  pagination.current = 1;
+  fetchManagerPerformance();
 };
 
 const router = useRouter();
 
-// 查看员工绩效明细 - 添加跳转功能
+// 查看员工绩效明细
 const viewStaffPerformance = (record: ManagerPerformance) => {
-  // 跳转到员工绩效页面，并传递主管ID作为参数
   router.push({
     path: '/employeePerformaince',
     query: {
-      managerId: record.id,
-      managerName: record.name
+      managerId: record.userId
     }
   });
 };
+const proportionRate = ref(''); // 默认值
+// 获取抽成比例
+const fetchProportionRate = async () => {
+  const storedToken = localStorage.getItem('token');
+  try {
+    const response: any = await myAxios.post(
+        "/perform/query/level/rate",
+        { level: "first" }, // 按照接口要求发送level参数
+        { headers: { Authorization: storedToken } }
+    );
 
+    if (response.code === 1) {
+      proportionRate.value = response.data;
+    } else {
+      message.error(response.message || "获取抽成比例失败");
+    }
+  } catch (error) {
+    console.error("获取抽成比例失败:", error);
+    message.error("获取抽成比例失败，请重试");
+  }
+};
+// 打开修改比例弹窗
+const openRateModal = () => {
+  newRate.value = proportionRate.value.toString();
+  visible.value = true;
+};
+
+// 更新比例
+const updateProportionRate = async () => {
+  // 验证输入
+  if (!newRate.value) {
+    message.warning("请输入抽成比例");
+    return;
+  }
+
+  const rateValue = parseFloat(newRate.value);
+  if (isNaN(rateValue)) {
+    message.warning("请输入有效的数字");
+    return;
+  }
+
+  if (rateValue < 0 || rateValue > 1) {
+    message.warning("比例值应在0到1之间");
+    return;
+  }
+
+  updating.value = true;
+  const storedToken = localStorage.getItem('token');
+
+  try {
+    const response: any = await myAxios.post(
+        "/perform/update/rate",
+        {
+          level: "first",
+          rate: rateValue.toFixed(2) // 保留一位小数
+        },
+        { headers: { Authorization: storedToken } }
+    );
+
+    if (response.code === 1) {
+      message.success("抽成比例更新成功");
+      proportionRate.value = rateValue.toFixed(2);
+      visible.value = false;
+    } else {
+      message.error(response.message || "更新抽成比例失败");
+    }
+  } catch (error) {
+    console.error("更新抽成比例失败:", error);
+    message.error("更新抽成比例失败，请重试");
+  } finally {
+    updating.value = false;
+  }
+};
 onMounted(() => {
-  loading.value = true;
-  // 模拟数据加载延迟
-  setTimeout(() => {
-    const mockData = generateMockData();
-    tableData.value = mockData;
-    originalTableData.value = mockData;
-    loading.value = false;
-  }, 800);
+  fetchManagerPerformance();
+  fetchProportionRate(); // 调用获取抽成比例
 });
 
-const goBack = () => {
-  router.push('/project');
+const filterNameInput = (e: Event) => {
+  const input = e.target as HTMLInputElement;
+  let value = input.value;
+
+  // 使用正则表达式过滤非中文字符
+  // value = value.replace(/[^\u4e00-\u9fa5]/g, '');
+  value = value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '');
+  // 更新输入框值
+  input.value = value;
+  searchName.value = value;
+};
+const filterPhoneInput = (e: Event) => {
+  const input = e.target as HTMLInputElement;
+  let value = input.value;
+
+  // 1. 移除非数字字符
+  value = value.replace(/\D/g, '');
+
+  // 2. 限制最多11位数字
+  if (value.length > 11) {
+    value = value.slice(0, 11);
+  }
+
+  // 更新输入框值
+  input.value = value;
+  searchPhone.value = value;
+};
+
+const filterRateInput = (e: Event) => {
+  const input = e.target as HTMLInputElement;
+  let value = input.value;
+
+  // 1. 移除非数字和非小数点的字符（但允许小数点）
+  value = value.replace(/[^\d.]/g, '');
+
+  // 2. 确保只有一个小数点
+  const decimalParts = value.split('.');
+  if (decimalParts.length > 2) {
+    // 如果有多个小数点，只保留第一个和第二个之间的内容
+    value = decimalParts[0] + '.' + decimalParts.slice(1).join('');
+  }
+
+  // 3. 限制小数点后最多两位数字
+  if (decimalParts.length > 1) {
+    value = decimalParts[0] + '.' + decimalParts[1].slice(0, 2);
+  }
+
+  // 4. 如果以小数点开头，在前面添加0
+  if (value.startsWith('.')) {
+    value = '0' + value;
+  }
+
+  // 5. 更新输入框值
+  input.value = value;
+  newRate.value = value;
+};
+
+
+const settlement = async () => {
+  const storedToken = localStorage.getItem('token');
+
+  // 添加确认提示
+  const confirmSettlement = () => {
+    return new Promise((resolve) => {
+      Modal.confirm({
+        title: '确定要执行一键结算吗？',
+        content: '此操作会将所有可结算的金额全部加到已结算上，请谨慎操作',
+        onOk() { resolve(true); },
+        onCancel() { resolve(false); }
+      });
+    });
+  };
+
+  const proceed = await confirmSettlement();
+  if (!proceed) return;
+
+  try {
+    loading.value = true;
+    const response: any = await myAxios.post(
+        "/perform/unite/settle",
+        {}, // 空请求体
+        { headers: { Authorization: storedToken } }
+    );
+
+    if (response.code === 1) {
+      message.success("结算成功，页面即将刷新");
+
+      // 1.5秒后刷新页面数据
+      setTimeout(() => {
+        fetchManagerPerformance(); // 刷新主管业绩数据
+        fetchProportionRate();    // 刷新抽成比例
+      }, 1500);
+    } else {
+      message.error(response.message || "结算失败");
+    }
+  } catch (error) {
+    console.error("结算请求失败:", error);
+    message.error("结算失败，请重试");
+  } finally {
+    loading.value = false;
+  }
 };
 </script>
 
@@ -217,48 +408,73 @@ const goBack = () => {
     <a-form layout="inline">
       <a-space>
         <a-form-item label="主管姓名">
-          <a-input-search
-              style="width: 300px"
+          <a-input
+              style="width: 300px;"
               placeholder="请输入主管姓名"
-              class="custom-search"
-              enter-button
               v-model:value="searchName"
-              @pressEnter="handleSearch"
+              @click="handleSearch"
+              @input="filterNameInput"
+              class="custom-search"
           />
         </a-form-item>
         <a-form-item label="手机号">
-          <a-input-search
-              style="width: 300px"
+          <a-input
+              style="width: 200px"
               placeholder="请输入手机号"
               v-model:value="searchPhone"
-              @pressEnter="handleSearch"
-              enter-button
               class="custom-search"
+              @input="filterPhoneInput"
           />
         </a-form-item>
+        <a-button @click="handleSearch" style="margin-right: 10px" class="custom-button">搜索</a-button>
         <a-button @click="reset">重置</a-button>
-        <a-button class="custom-button" @click="goBack">返回</a-button>
+        抽成占比<a-tag color="orange">{{ proportionRate }}</a-tag>
+        <a-button @click="openRateModal" style="margin-left: 10px" class="custom-button">修改比例</a-button>
+        <a-button @click="settlement" style="margin-left: 10px" class="custom-button">一键结算</a-button>
       </a-space>
     </a-form>
   </div>
+  <!-- 修改比例弹窗 -->
+  <a-modal
+      v-model:visible="visible"
+      title="修改抽成比例"
+      @ok="updateProportionRate"
+      :confirm-loading="updating"
+      :mask-closable="false"
+  >
+    <a-form layout="vertical">
+      <a-form-item label="新比例值（0-1之间）">
+        <a-input
+            v-model:value="newRate"
+            placeholder="请输入比例值（如0.35）"
+            @keyup.enter="updateProportionRate"
+            @input="filterRateInput"
 
+        />
+        <div style="margin-top: 8px; color: #999">
+          提示：比例值应为0到1之间的小数（如0.35表示35%），保留两位小数
+        </div>
+      </a-form-item>
+    </a-form>
+  </a-modal>
   <!-- 数据表格 -->
   <a-table
       :columns="columns"
       :data-source="tableData"
-      :scroll="{ x: 1500 }"
+      :scroll="{ x: 1600, y: 550 }"
       :loading="loading"
+      :pagination="pagination"
+      @change="handlePaginationChange"
       bordered
       rowKey="id"
-      size="middle"
   >
     <template #bodyCell="{ column, record }">
       <!-- 金额格式化 -->
-      <template v-if="['netAmount', 'pendingRelease', 'settleable', 'returned','refund'].includes(column.dataIndex)">
-        ¥{{ record[column.dataIndex as keyof ManagerPerformance].toLocaleString() }}
+      <template v-if="['totalAmount', 'netAmount', 'toRelease', 'tosettle', 'refunded','settled','toSettle'].includes(column.dataIndex)">
+        ¥{{ (record[column.dataIndex as keyof ManagerPerformance] || 0).toLocaleString() }}
       </template>
 
-      <!-- 操作列 - 添加点击事件 -->
+      <!-- 操作列 -->
       <template v-if="column.key === 'action'">
         <a-button
             size="small"
@@ -270,8 +486,8 @@ const goBack = () => {
     </template>
   </a-table>
 </template>
-
 <style scoped>
+/* 样式保持不变 */
 .search-box {
   margin-bottom: 20px;
   padding: 16px;
@@ -307,7 +523,7 @@ const goBack = () => {
 .custom-button:focus {
   background-color: #ffa940;
   border-color: #ffa940;
-  color: #fff;
+  color:#fff;
   opacity: 0.9;
 }
 
@@ -322,8 +538,12 @@ const goBack = () => {
   border-color: #fa8c16;
 }
 
-
 .custom-search :deep(.ant-input) {
   border-right-color: #ffa940;
 }
+.custom-search :deep(.ant-input-search-button) {
+  background-color: #ffa940;
+  border-color: #ffa940;
+}
+
 </style>
\ No newline at end of file
diff --git a/src/view/userList/adminList.vue b/src/view/userList/adminList.vue
new file mode 100644
index 0000000..2bfb56c
--- /dev/null
+++ b/src/view/userList/adminList.vue
@@ -0,0 +1,1462 @@
+<template>
+  <!-- 搜索框 -->
+  <div class="search-box">
+    <div class="search-container">
+      <a-form layout="inline">
+        <a-space>
+
+          <a-form-item label="手机号">
+            <a-input-search
+                style="width: 300px;"
+                placeholder="请输入手机号"
+                enter-button
+                @search="handlePhoneSearch"
+                v-model:value="searchPhone"
+                type="text"
+                class="custom-search"
+                :maxlength="11"
+                @input="handleSearchPhoneInput"
+                @keydown="handleKeyDown"
+            />
+          </a-form-item>
+
+          <a-button class="custom-button" @click="showModal">新增管理员</a-button>
+          <!--新增用户-->
+          <a-modal
+              v-model:open="openUser"
+              title="新增管理员"
+              @ok="handleOk"
+              :footer="null"
+          >
+            <a-form
+                ref="formRef"
+                :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }"
+                @submit="handleSubmit"
+                :rules="formRules"
+            >
+              <a-form-item label="昵称" name="nickName">
+                <a-input
+                    v-model:value="formData.nickName"
+                    :maxlength="6"
+                    @input="handleNicknameInput"
+                    autocomplete="off"
+                />
+                <template #help>
+    <span v-if="formData.nickName.length > 0" class="tip">
+      {{ formData.nickName.length }}/6
+      <span v-if="formData.nickName.length > 6" class="error-tip">（超过最大长度）</span>
+    </span>
+                </template>
+              </a-form-item>
+
+              <a-form-item label="头像" name="userAvatar" required>
+                <a-upload
+                    name="file"
+                    list-type="picture-card"
+                    class="avatar-uploader"
+                    :show-upload-list="false"
+                    :before-upload="beforeUpload"
+                    :custom-request="handleUpload"
+                >
+                  <img v-if="formData.userAvatar" :src="previewImage" alt="avatar" style="width: 100%"/>
+                  <div v-else>
+                    <loading-outlined v-if="uploadLoading"></loading-outlined>
+                    <plus-outlined v-else></plus-outlined>
+                    <div class="ant-upload-text">上传头像</div>
+                  </div>
+                </a-upload>
+              </a-form-item>
+
+              <a-form-item label="手机号" name="phoneNumber">
+                <a-input
+                    v-model:value="formData.phoneNumber"
+                    :maxlength="11"
+                    @input="handlePhoneInput"
+                    autocomplete="off"
+                />
+                <template #help>
+    <span v-if="formData.phoneNumber.length > 0" class="tip">
+      {{ formData.phoneNumber.length }}/11
+      <span v-if="formData.phoneNumber.length > 11" class="error-tip">（超过最大长度）</span>
+    </span>
+                </template>
+              </a-form-item>
+
+              <!-- 修改账户表单项 -->
+              <a-form-item label="账号" name="userAccount">
+                <a-input
+                    v-model:value="formData.userAccount"
+                    :maxlength="11"
+                    @input="handleAccountInput"
+                    autocomplete="off"
+                />
+                <template #help>
+    <span v-if="formData.userAccount.length > 0" class="tip">
+      {{ formData.userAccount.length }}/11
+      <span v-if="!/^[A-Za-z0-9]+$/.test(formData.userAccount)" class="error-tip">（包含非法字符）</span>
+    </span>
+                </template>
+              </a-form-item>
+
+              <a-form-item label="密码" name="userPassword">
+                <a-input
+                    v-model:value="formData.userPassword"
+                    type="password"
+                    :maxlength="10"
+                    @input="handlePasswordInput"
+                    autocomplete="off"
+                />
+                <template #help>
+                  <div v-if="formData.userPassword.length > 0">
+                    <span class="tip">{{ formData.userPassword.length }}/10</span>
+                    <div class="password-strength">
+                      <span :class="{ 'strength-ok': hasLower }">小写字母</span>
+                      <span :class="{ 'strength-ok': hasUpper }">大写字母</span>
+                      <span :class="{ 'strength-ok': hasNumber }">数字</span>
+                    </div>
+                  </div>
+                  <!-- 新增错误提示 -->
+                  <span v-if="formData.userPassword.length > 0 && !passwordMeetsRequirements" class="error-tip">
+        请输入包含数字、字母小写、字母大写的组合
+      </span>
+                </template>
+              </a-form-item>
+
+              <a-form-item :wrapper-col="{ span: 16, offset: 5 }">
+                <a-button type="primary" html-type="submit">提交</a-button>
+              </a-form-item>
+            </a-form>
+          </a-modal>
+          <a-button
+              type="primary"
+              danger
+              :disabled="selectedRowKeys.length === 0"
+              @click="batchDelete"
+          >
+            批量删除({{ selectedRowKeys.length }})
+          </a-button>
+          <a-button class="custom-button" @click="reset">重置搜索</a-button>
+        </a-space>
+      </a-form>
+    </div>
+  </div>
+  <!--  数据-->
+  <a-table
+      :columns="columns"
+      :data-source="tableData"
+      :scroll="{ x: 1400, y: 550 }"
+      :loading="loading"
+      :row-selection="rowSelection"
+      :pagination="pagination"
+      bordered
+      rowKey="id"
+      @change="handleTableChange"
+  >
+    <template #bodyCell="{ column, record }">
+
+      <template v-if="column.key === 'userAvatar'">
+        <a-avatar :src="downLoadImage + record.userAvatar" />
+      </template>
+
+      <template v-if="column.key === 'operation'">
+        <a-space :size="16">
+          <a class="action-btn" @click="showDrawer(record)">详情</a>
+          <a-divider type="vertical" v-if="store.loginUser.userRole === 'boss' && record.userRole === 'admin'"/>
+          <a class="action-btn" type="link"
+             @click="confirmDeleteUser(record.id)"
+             v-if="store.loginUser.userRole === 'boss' && record.userRole === 'admin'">
+            删除
+          </a>
+        </a-space>
+      </template>
+    </template>
+  </a-table>
+
+  <!--  抽屉-->
+  <a-drawer
+      v-model:open="open"
+      title="用户详细信息"
+      placement="right"
+      width="600"
+  >
+    <div v-if="selectedUser" class="user-detail">
+      <div class="header">
+        <a-avatar :size="128" :src="downLoadImage+selectedUser.userAvatar" class="avatar" />
+        <a-button
+            v-if="store.loginUser.userRole === 'boss' && selectedUser?.userRole === 'admin'"
+            @click="toggleEditMode"
+            class="custom-button"
+        >
+          {{ isEditMode ? '取消编辑' : '编辑信息' }}
+        </a-button>
+      </div>
+
+      <a-form
+          v-if="isEditMode"
+          :model="editForm"
+          :rules="editFormRules"
+          ref="editFormRef"
+          :label-col="{ span: 6 }"
+          :wrapper-col="{ span: 16 }"
+      >
+        <!-- 可编辑表单 -->
+        <a-form-item label="昵称" name="nickName">
+          <a-input
+              v-model:value="editForm.nickName"
+              :maxlength="6"
+              @input="handleEditNicknameInput"
+              @keypress="handleMaxLength(6)"
+          >
+            <template #suffix>
+              <span v-if="editForm.nickName.length > 0" class="input-tip">
+                {{ editForm.nickName.length }}/6
+                <span v-if="editForm.nickName.length > 6" class="error-tip">（超过最大长度）</span>
+              </span>
+            </template>
+          </a-input>
+        </a-form-item>
+
+        <a-form-item label="头像" name="userAvatar" required>
+          <a-upload
+              name="file"
+              list-type="picture-card"
+              class="avatar-uploader"
+              :show-upload-list="false"
+              :before-upload="beforeUpload"
+              :custom-request="handleEditUpload"
+          >
+            <img v-if="editForm.userAvatar" :src="editPreviewImage" alt="avatar" style="width: 100%"/>
+            <div v-else>
+              <loading-outlined v-if="editUploadLoading"></loading-outlined>
+              <plus-outlined v-else></plus-outlined>
+              <div class="ant-upload-text">上传头像</div>
+            </div>
+          </a-upload>
+        </a-form-item>
+
+
+        <a-form-item label="手机号" name="phoneNumber">
+          <a-input
+              v-model:value="editForm.phoneNumber"
+              :maxlength="11"
+              @input="handleEditPhoneInput"
+          >
+            <template #suffix>
+              <span v-if="editForm.phoneNumber.length > 0" class="input-tip">
+                {{ editForm.phoneNumber.length }}/11
+                <span v-if="editForm.phoneNumber.length > 11" class="error-tip">（超过最大长度）</span>
+              </span>
+            </template>
+          </a-input>
+        </a-form-item>
+        <a-form-item label="账户">
+          <a-input v-model:value="editForm.userAccount" disabled />
+        </a-form-item>
+        <a-form-item label="密码" name="userPassword" required>
+          <a-input
+              v-model:value="editForm.userPassword"
+              type="password"
+              :maxlength="10"
+              @input="handleEditPasswordInput"
+              @keypress="handleMaxLength(10)"
+          >
+            <template #suffix>
+              <span v-if="editForm.userPassword.length > 0" class="input-tip">
+                {{ editForm.userPassword.length }}/10
+                <div class="password-strength">
+                  <span :class="{ 'strength-ok': editHasLower }">小写字母</span>
+                  <span :class="{ 'strength-ok': editHasUpper }">大写字母</span>
+                  <span :class="{ 'strength-ok': editHasNumber }">数字</span>
+                </div>
+              </span>
+            </template>
+          </a-input>
+        </a-form-item>
+        <a-form-item label="身份">
+          <a-select v-model:value="editForm.userRole" disabled>
+            <a-select-option value="user">普通用户</a-select-option>
+            <a-select-option value="admin">管理员</a-select-option>
+            <a-select-option value="boss">老板</a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item :wrapper-col="{ offset: 6 }">
+          <a-button class="custom-button" @click="handleSave">保存修改</a-button>
+        </a-form-item>
+      </a-form>
+
+      <div v-else class="view-mode">
+        <!-- 基本信息卡片 -->
+        <a-card title="基本信息" class="info-card">
+          <div class="info-item">
+            <user-outlined class="info-icon" />
+            <div class="info-content">
+              <span class="info-label">用户ID</span>
+              <span class="info-value">{{ selectedUser.id }}</span>
+            </div>
+          </div>
+
+          <div class="info-item">
+            <idcard-outlined class="info-icon" />
+            <div class="info-content">
+              <span class="info-label">账户信息</span>
+              <div class="account-detail">
+                <span>{{ selectedUser.userAccount }}</span>
+                <a-tag class="role-tag">
+                  {{ editForm.userRole}}
+                </a-tag>
+              </div>
+            </div>
+          </div>
+
+          <div class="info-item">
+            <smile-outlined class="info-icon" />
+            <div class="info-content">
+              <span class="info-label">昵称</span>
+              <span class="info-value highlight">{{ selectedUser.nickName }}</span>
+            </div>
+          </div>
+        </a-card>
+
+        <!-- 联系信息卡片 -->
+        <a-card title="联系信息" class="info-card">
+          <div class="info-item">
+            <phone-outlined class="info-icon" />
+            <div class="info-content">
+              <span class="info-label">手机号码</span>
+              <span class="info-value">{{ selectedUser.phoneNumber || '未绑定' }}</span>
+            </div>
+          </div>
+        </a-card>
+
+
+      </div>
+
+    </div>
+  </a-drawer>
+
+
+
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref,computed } from "vue";
+import myAxios from "../../api/myAxios.ts";
+import { message, Modal  } from "ant-design-vue";
+import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
+import type { UploadProps } from 'ant-design-vue';
+import {userStore} from "../../store/userStore.ts";
+import {downLoadImage} from '../../api/ImageUrl.ts'
+const store = userStore()
+import {
+  UserOutlined,
+  IdcardOutlined,
+  SmileOutlined,
+  PhoneOutlined,
+} from '@ant-design/icons-vue';
+const uploadLoading = ref(false);
+const previewImage = ref('');
+// 上传前校验
+const beforeUpload: UploadProps['beforeUpload'] = file => {
+  const isImage = file.type.startsWith('image/');
+  if (!isImage) {
+    message.error('只能上传图片文件!');
+    return false;
+  }
+  const isLt5M = file.size / 1024 / 1024 < 5;
+  if (!isLt5M) {
+    message.error('图片大小不能超过5MB!');
+    return false;
+  }
+  return true;
+};
+
+
+
+// 自定义上传处理
+const handleUpload = async ({ file }: { file: File }) => {
+  const form = new FormData();
+  form.append('file', file);
+
+  try {
+    uploadLoading.value = true;
+    const storedToken = localStorage.getItem('token');
+
+
+    const res:any = await myAxios.post('/file/upload?biz=avatar', form, {
+      headers: {
+        Authorization: storedToken,
+
+      }
+    });
+    console.log(res)
+
+    if (res.code === 1) {
+      formData.value.userAvatar = res.data;
+      previewImage.value = URL.createObjectURL(file);
+      message.success('上传成功');
+    } else {
+      message.error(res.message || '上传失败');
+    }
+  } catch (error:any) {
+    console.error('上传失败详情:', error);
+    message.error(`上传失败：${error.response?.data?.error || error.message}`);
+  } finally {
+    uploadLoading.value = false;
+  }
+};
+
+
+const handleEditNicknameInput = (e: any) => {
+
+  const trimmedValue = e.target.value.trim().slice(0, 6);
+  editForm.value.nickName = trimmedValue;
+
+  editFormRef.value?.validateField('nickName');
+};
+
+const handleEditPhoneInput = (e: any) => {
+
+  const numericValue = e.target.value.replace(/\D/g, '').slice(0, 11);
+  editForm.value.phoneNumber = numericValue;
+
+  editFormRef.value?.validateField('phoneNumber');
+};
+
+const handleEditPasswordInput = (e: any) => {
+
+  editForm.value.userPassword = e.target.value.slice(0, 10);
+};
+
+
+const handleMaxLength = (max: number) => (e: KeyboardEvent) => {
+  if (e.target instanceof HTMLInputElement && e.target.value.length >= max) {
+    e.preventDefault();
+  }
+};
+
+
+const formRules = {
+  nickName: [
+    {
+      required: true,
+      message: '请输入昵称',
+      trigger: ['input', 'blur']
+    },
+    {
+      min: 1,
+      max: 6,
+      message: '昵称长度需为1-6位',
+      trigger: ['input', 'blur']
+    }
+  ],
+  phoneNumber: [
+    {
+      required: true,
+      message: '请输入手机号',
+      trigger: ['input', 'blur']
+    },
+    {
+      pattern: /^1[3-9]\d{9}$/,
+      message: '必须是有效的11位手机号',
+      trigger: ['input', 'blur']
+    }
+  ],
+  userAccount: [
+    {
+      required: true,
+      message: '请输入账户',
+      trigger: ['input', 'blur']
+    },
+    {
+      min: 6,
+      max: 11,
+      message: '长度需为6-11位',
+      trigger: ['input', 'blur']
+    },
+    {
+      pattern: /^[A-Za-z0-9]+$/,
+      message: '不能包含中文或特殊字符',
+      trigger: ['input', 'blur']
+    }
+  ],
+  userPassword: [
+    {
+      required: true,
+      message: '请输入密码',
+      trigger: ['input', 'blur']
+    },
+    {
+      min: 6,
+      max: 10,
+      message: '长度需为6-10位',
+      trigger: ['input', 'blur']
+    },
+    {
+      validator: (_: any, value: string) => {
+        if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
+          return Promise.reject('请输入包含数字、字母小写、字母大写的组合');
+        }
+        return Promise.resolve();
+      },
+      trigger: ['input', 'blur']
+    }
+  ]
+}
+
+const handleSearchPhoneInput = (e: any) => {
+  let value = e.target.value;
+
+  // 只允许输入数字，并截取前11位
+  const newValue = value.replace(/[^0-9]/g, '').slice(0, 11);
+
+  if (newValue !== value) {
+    searchPhone.value = newValue;
+  }
+};
+
+// 新增 onKeyDown 事件处理函数
+const handleKeyDown = (e: KeyboardEvent) => {
+
+  const allowedKeys = [
+    'Backspace',
+    'Delete',
+    'ArrowLeft',
+    'ArrowRight',
+    'Tab',
+  ];
+
+
+  if (!/[0-9]/.test(e.key) && !allowedKeys.includes(e.key)) {
+    e.preventDefault();
+  }
+};
+
+
+const formData = ref({
+  nickName: '',
+  userAvatar: '',
+  phoneNumber: '',
+  userAccount: '',
+  userPassword: ''
+});
+
+// 手机号实时校验（输入时显示长度提示）
+const handlePhoneInput = (e: any) => {
+  // 实时过滤非数字字符并限制长度
+  formData.value.phoneNumber = e.target.value
+      .replace(/\D/g, '')
+      .slice(0, 11);
+}
+
+const handleAccountInput = (e: any) => {
+  // 过滤特殊字符并限制长度
+  formData.value.userAccount = e.target.value
+      .replace(/[^A-Za-z0-9]/g, '')
+      .slice(0, 11);
+}
+const handleNicknameInput = (e: any) => {
+  formData.value.nickName = e.target.value.slice(0, 6);
+}
+const passwordMeetsRequirements = computed(() => {
+  const password = formData.value.userPassword;
+  return /(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password);
+});
+
+// 实时密码强度计算（保持原有）
+const hasLower = computed(() => /[a-z]/.test(formData.value.userPassword))
+const hasUpper = computed(() => /[A-Z]/.test(formData.value.userPassword))
+const hasNumber = computed(() => /\d/.test(formData.value.userPassword))
+
+// 密码输入处理
+const handlePasswordInput = (e: any) => {
+  formData.value.userPassword = e.target.value.slice(0, 10);
+}
+const loading = ref(false);
+
+const searchParams = ref({
+  current: 1,
+  pageSize: 10,
+  sortField: "id",
+  sortOrder: "ascend",
+  userRole:"admin",
+  phoneNumber:null
+});
+//用户表
+const columns = [
+  {
+    title: '用户ID',
+    dataIndex: 'id',
+    width: 50,
+    key: 'id',
+    fixed: 'left',
+    align: 'center',
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
+  },
+
+  {
+    title: '头像',
+    dataIndex: 'userAvatar',
+    key: 'userAvatar',
+    width: 50,
+    fixed: 'left',
+    align: 'center'
+  },
+  {
+    title: '账号',
+    dataIndex: 'userAccount',
+    width: 90,
+    key: 'userAccount',
+    fixed: 'left',
+    align: 'center'
+  },
+  {
+    title: '用户昵称',
+    dataIndex: 'nickName',
+    width: 70,
+    key: 'nickName',
+    align: 'center'
+  },
+  {
+    title: '身份',
+    dataIndex: 'userRole',
+    key: 'userRole',
+    width: 50,
+    align: 'center'
+  },
+  {
+    title: '手机号',
+    dataIndex: 'phoneNumber',
+    key: 'phoneNumber',
+    width: 80,
+    align: 'center',
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
+  },
+  {
+    title: '操作',
+    key: 'operation',
+    fixed: 'right',
+    width: 90,
+    align: 'center'
+  }
+];
+// 分页配置
+const pagination = ref({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showQuickJumper: true,
+  showTotal: (total: number) => `共 ${total} 条`,
+  pageSizeOptions: ['10', '20', '50', '100']
+});
+//编辑用户表单
+
+const editFormRules = {
+  nickName: [
+    {
+      required: true,
+      message: '请输入昵称',
+      trigger: ['input', 'blur']
+    },
+    {
+      min: 1,
+      max: 6,
+      message: '昵称长度需为1-6位',
+      trigger: ['input', 'blur']
+    }
+  ],
+  phoneNumber: [
+    {
+      required: true,
+      message: '请输入手机号',
+      trigger: ['input', 'blur']
+    },
+    {
+      pattern: /^1[3-9]\d{9}$/,
+      message: '必须是有效的11位手机号',
+      trigger: ['input', 'blur']
+    }
+  ],
+  userPassword: [
+    {
+      min: 6,
+      max: 10,
+      message: '长度需为6-10位',
+      trigger: ['input', 'blur']
+    },
+    {
+      validator: (_: any, value: string) => {
+        if (value && !/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
+          return Promise.reject('必须包含大小写字母和数字');
+        }
+        return Promise.resolve();
+      },
+      trigger: ['input', 'blur']
+    }
+  ]
+};
+
+// 编辑表单的密码强度计算
+const editHasLower = computed(() => /[a-z]/.test(editForm.value.userPassword))
+const editHasUpper = computed(() => /[A-Z]/.test(editForm.value.userPassword))
+const editHasNumber = computed(() => /\d/.test(editForm.value.userPassword))
+
+const editFormRef = ref();
+
+// 修改后的分页处理函数
+const handleTableChange = (pag: any, _: any, sorter: any) => {
+
+  let sortField = "id";
+  let sortOrder = "ascend";
+
+  if (sorter.field) {
+    sortField = sorter.field;
+    sortOrder = sorter.order;
+  }
+
+  searchParams.value = {
+    ...searchParams.value,
+    current: pag.current,
+    pageSize: pag.pageSize,
+    sortField: sortField,
+    sortOrder: sortOrder
+  };
+
+  pagination.value.current = pag.current;
+  pagination.value.pageSize = pag.pageSize;
+
+  getUserList();
+};
+
+
+
+const getUserList = async () => {
+  loading.value = true;
+  try {
+    const storedToken = localStorage.getItem('token');
+    if (!storedToken) throw new Error('未找到登录信息');
+
+    const res: any = await myAxios.post("/userInfo/page",
+        {...searchParams.value },
+        { headers: { Authorization: storedToken } }
+    );
+    console.log(res)
+    if (res.code === 1 && res.data) {
+      tableData.value = res.data.records.map((item: any) => {
+        if (item.parentUserId === -1) {
+          item.parentUserId = '无';
+        }
+        return {
+          ...item,
+          superUserList: item.superHostList? item.superHostList.join(', ') : '无'
+        };
+      });
+
+      pagination.value.total = res.data.total;
+      pagination.value.current = res.data.current;
+      pagination.value.pageSize = res.data.size;
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(getUserList);
+
+// ID查询方法
+interface User {
+  id: number;
+  nickName: string;
+  userAvatar: string;
+  phoneNumber: string;
+  userAccount: string;
+  userPassword: string;
+  invitationCode: string;
+  userRole:string;
+  parentUserId:number
+}
+
+const tableData = ref<User[]>([]);
+
+const searchPhone = ref("");
+
+
+const handlePhoneSearch = async () => {
+  if (!searchPhone.value) {
+    message.warning('请输入手机号');
+    return;
+  }
+
+  // 验证手机号格式
+  if (!/^1[3-9]\d{9}$/.test(searchPhone.value)) {
+    message.warning('请输入有效的11位手机号');
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const storedToken = localStorage.getItem('token');
+    if (!storedToken) throw new Error('未找到登录信息');
+
+
+    const res: { code: number; data: any; message: any } = await myAxios.post(
+        "/userInfo/page",
+        {
+          current: 1,
+          pageSize: 10,
+          phoneNumber: searchPhone.value
+        },
+        { headers: { Authorization: storedToken } }
+    );
+
+    if (res.code === 1 && res.data) {
+      tableData.value = res.data.records.map((item: any) => {
+        if (item.parentUserId === -1) {
+          item.parentUserId = '无';
+        }
+        return {
+          ...item,
+          superUserList: item.superHostList? item.superHostList.join(', ') : '无'
+        };
+      });
+      // 更新分页信息
+      pagination.value.total = res.data.total;
+      pagination.value.current = res.data.current;
+      pagination.value.pageSize = res.data.size;
+    } else {
+      message.error(res.message || '查询失败');
+    }
+  } catch (error) {
+    console.error('查询失败:', error);
+    message.error('查询操作失败，请检查网络');
+  } finally {
+    loading.value = false;
+  }
+};
+
+
+const reset = () => {
+  searchPhone.value = "";
+  searchParams.value = {
+    current: 1,
+    pageSize: 10,
+    sortField: "id",
+    sortOrder: "ascend",
+    userRole: "admin",
+    phoneNumber: null
+  };
+  getUserList();
+};
+
+
+
+// 删除用户
+const selectedRowKeys = ref<number[]>([]);
+
+// 配置行选择器
+const rowSelection = {
+  onChange: (selectedKeys: number[]) => {
+    selectedRowKeys.value = selectedKeys;
+  },
+  selectedRowKeys: selectedRowKeys,
+
+  getCheckboxProps: (record: User) => ({
+    disabled: record.userRole !== 'admin',
+    name: record.id.toString(),
+  }),
+};
+
+const confirmDeleteUser = (id: number) => {
+  Modal.confirm({
+    title: '确认删除用户',
+    content: '您确定要删除这个用户吗？此操作不可恢复！',
+    okText: '确认删除',
+    okType: 'danger',
+    cancelText: '取消',
+    onOk() {
+      return deleteUser(id);
+    },
+    onCancel() {
+      console.log('用户取消删除');
+    },
+  });
+};
+
+
+const batchDelete = async () => {
+  if (selectedRowKeys.value.length === 0) {
+    message.warning('请先选择要删除的用户');
+    return;
+  }
+
+  Modal.confirm({
+    title: '确认批量删除',
+    content: `您确定要删除选中的 ${selectedRowKeys.value.length} 个用户吗？此操作不可恢复！`,
+    okText: '确认删除',
+    okType: 'danger',
+    cancelText: '取消',
+    async onOk() {
+      try {
+        const storedToken = localStorage.getItem('token');
+        if (!storedToken) throw new Error('未找到登录信息');
+
+        const res:any = await myAxios.post(
+            '/userInfo/delBatch',
+            { ids: selectedRowKeys.value },
+            {
+              headers: {
+                Authorization: storedToken,
+                'AfterScript': 'required-script'
+              }
+            }
+        );
+
+        if (res.code === 1) {
+          message.success(`成功删除${selectedRowKeys.value.length}条数据`);
+          selectedRowKeys.value = [];
+          await getUserList();
+        } else {
+          message.error(res.message || '删除失败');
+        }
+      } catch (error) {
+        console.error('批量删除失败:', error);
+        message.error('删除操作失败，请检查网络');
+      }
+    },
+    onCancel() {
+      console.log('用户取消批量删除');
+    },
+  });
+};
+
+
+const deleteUser = async (id: number) => {
+  try {
+    const storedToken = localStorage.getItem('token');
+    const res:any = await myAxios.post(
+        "/userInfo/delete",
+        { id },
+        {
+          headers: {
+            Authorization: storedToken,
+            'AfterScript': 'required-script'
+          }
+        }
+    );
+
+    if (res.code === 1) {
+      message.success('删除成功');
+      await getUserList();
+    } else {
+      message.error(res.message || '删除失败');
+    }
+  } catch (error) {
+    console.error('删除失败:', error);
+    message.error('删除操作失败');
+  }
+};
+
+
+
+// 操作用户
+const open = ref<boolean>(false);
+
+const selectedUser = ref<any>(null);
+
+const isEditMode = ref(false);
+const editForm = ref({
+  id: 0,
+  nickName: '',
+  userAvatar: '',
+  phoneNumber: '',
+  userAccount: '',
+  userPassword: '',
+  invitationCode: '',
+  userRole: '',
+  parentUserId: 0,
+  SuperUserList: ''
+});
+
+
+const editUploadLoading = ref(false);
+const editPreviewImage = ref('');
+
+
+const handleEditUpload = async ({ file }: { file: File }) => {
+  const form = new FormData();
+  form.append('file', file);
+
+  try {
+    editUploadLoading.value = true;
+    const storedToken = localStorage.getItem('token');
+
+    const res: any = await myAxios.post('/file/upload?biz=avatar', form, {
+      headers: {
+        Authorization: storedToken,
+      }
+    });
+
+    if (res.code === 1) {
+      editForm.value.userAvatar = res.data;
+      editPreviewImage.value = URL.createObjectURL(file);
+      message.success('头像更新成功');
+    } else {
+      message.error(res.message || '头像上传失败');
+    }
+  } catch (error: any) {
+    console.error('编辑头像上传失败:', error);
+    message.error(`上传失败：${error.response?.data?.error || error.message}`);
+  } finally {
+    editUploadLoading.value = false;
+  }
+};
+const showDrawer = (record: any) => {
+  selectedUser.value = record;
+  editForm.value = {
+    id: record.id,
+    nickName: record.nickName,
+    userAvatar: record.userAvatar||'',
+    phoneNumber: record.phoneNumber,
+    userAccount: record.userAccount,
+    userPassword: record.userPassword,
+    invitationCode: record.invitationCode,
+    userRole: record.userRole,
+    parentUserId: record.parentUserId,
+    SuperUserList: Array.isArray(record.superHostList)
+        ? record.superHostList.join(',')
+        : record.SuperUserList || ''
+  };
+  open.value = true;
+  isEditMode.value = false;
+};
+
+const toggleEditMode = () => {
+  isEditMode.value = !isEditMode.value;
+};
+
+const handleSave = async () => {
+  try {
+
+    if (editForm.value.userPassword) {
+      const password = editForm.value.userPassword;
+
+
+      const hasNumber = /\d/.test(password);
+      const hasUpperCase = /[A-Z]/.test(password);
+      const hasLowerCase = /[a-z]/.test(password);
+
+      if (!(hasNumber && hasUpperCase && hasLowerCase)) {
+        message.error('密码必须包含数字、大写字母和小写字母');
+        return;
+      }
+    }
+
+    const storedToken = localStorage.getItem('token');
+    if (!storedToken) throw new Error('未找到登录信息');
+
+
+    const processValue = (value: any) => {
+      if (value === "" || value === "无") return null;
+      return value;
+    };
+
+
+    const processNumber = (value: any) => {
+      const num = Number(value);
+      return isNaN(num) ? null : num;
+    };
+
+
+    const payload = {
+      id: editForm.value.id,
+      nickName: processValue(editForm.value.nickName),
+      userAvatar: processValue(editForm.value.userAvatar),
+      phoneNumber: processValue(editForm.value.phoneNumber),
+      userAccount: editForm.value.userAccount,  // 保持禁用状态的值
+      userPassword: editForm.value.userPassword || undefined,  // 密码为空时不修改
+      invitationCode: processValue(editForm.value.invitationCode),
+      userRole: editForm.value.userRole || 'user',
+      parentUserId: processNumber(editForm.value.parentUserId),
+      SuperUserList: editForm.value.SuperUserList
+          ? editForm.value.SuperUserList.split(',')
+              .map(item => processNumber(item.trim()))
+              .filter(num => num !== null)
+          : []
+    };
+
+
+    const cleanPayload = Object.fromEntries(
+        Object.entries(payload).filter(([_, v]) => v !== undefined)
+    );
+
+    console.log("最终请求体:", JSON.stringify(cleanPayload, null, 2));
+
+    const res:any = await myAxios.post('/userInfo/update', cleanPayload, {
+      headers: {
+        Authorization: storedToken,
+        'Content-Type': 'application/json'
+      }
+    });
+    console.log(res)
+    if (res.code === 1) {
+      message.success('更新成功');
+      await getUserList();
+      const updatedUser = tableData.value.find(item => item.id === editForm.value.id);
+      if (updatedUser) {
+        selectedUser.value = { ...updatedUser };
+      }
+      isEditMode.value = false;
+    } else {
+      message.error(res.message || '更新失败');
+    }
+  } catch (error:any) {
+    console.error('更新失败:', error);
+    message.error(error.response?.data?.message || '更新失败，请检查网络');
+  }
+};
+
+
+
+const openUser = ref<boolean>(false);
+const formRef = ref();
+
+
+
+const showModal = () => {
+  openUser.value = true;
+  formData.value = {
+    nickName: '',
+    userAvatar: '',
+    phoneNumber: '',
+    userAccount: '',
+    userPassword: ''
+  };
+
+  previewImage.value = '';
+};
+
+const handleOk = (e: MouseEvent) => {
+  console.log('点击确认:', e);
+  openUser.value = false;
+};
+
+const extractErrorMessage = (errorMessage: string): string => {
+
+  const pipeIndex = errorMessage.indexOf('|');
+
+  if (pipeIndex !== -1) {
+    return errorMessage.substring(pipeIndex + 1).trim();
+  }
+  return errorMessage;
+};
+
+const handleSubmit = async () => {
+  try {
+    const password = formData.value.userPassword;
+    if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password)) {
+      message.error('请输入包含数字、字母小写、字母大写的组合');
+      return;
+    }
+
+    // 原有手机号校验
+    if (!/^1[3-9]\d{9}$/.test(formData.value.phoneNumber)) {
+      message.error('请输入有效的11位手机号');
+      return;
+    }
+
+    const storedToken = localStorage.getItem('token');
+    if (!storedToken) throw new Error('未找到登录信息');
+
+    const res: any = await myAxios.post('/userInfo/add', formData.value, {
+      headers: {
+        Authorization: storedToken,
+        'Content-Type': 'application/json'
+      }
+    });
+
+    if (res.code === 1) {
+      message.success('新增成功');
+      openUser.value = false;
+      formRef.value?.resetFields();
+      getUserList();
+    } else {
+
+      const errorMsg = extractErrorMessage(res.message);
+      message.error(`${errorMsg}`);
+    }
+  } catch (error: any) {
+
+    let errorMsg = error.response?.message || error.message;
+    errorMsg = extractErrorMessage(errorMsg);
+    message.error(`${errorMsg}`);
+  }
+};
+
+
+</script>
+
+<style scoped>
+.action-btn {
+  padding: 0 8px;
+}
+
+:deep(.ant-divider-vertical) {
+  border-color: rgba(0, 0, 0, 0.15);
+  height: 1.2em;
+  margin: 0 4px;
+}
+
+.user-detail {
+  padding: 20px;
+}
+
+.avatar {
+  display: block;
+  margin: 0 auto 20px;
+}
+
+:deep(.ant-descriptions-item-label) {
+  font-weight: 600;
+  width: 120px;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.avatar {
+  margin-bottom: 20px;
+}
+.custom-button {
+  width: 120px;
+}
+.view-mode {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.info-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+  margin-bottom: 16px;
+}
+
+.info-card :deep(.ant-card-head) {
+  background: #fafafa;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.info-icon {
+  font-size: 18px;
+  color: #1890ff;
+  margin-right: 16px;
+  width: 24px;
+  text-align: center;
+}
+
+.info-content {
+  flex: 1;
+}
+
+.info-label {
+  display: block;
+  color: #666;
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.info-value {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.highlight {
+  color: #1890ff;
+}
+
+
+
+.role-tag {
+  margin-left: 8px;
+  font-size: 12px;
+}
+
+
+:root {
+  --role-user: #87d068;
+  --role-admin: #f50;
+  --role-boss: #722ed1;
+}
+
+.role-tag[color="user"] {
+  background: var(--role-user);
+  color: white;
+}
+
+.role-tag[color="admin"] {
+  background: var(--role-admin);
+  color: white;
+}
+
+.role-tag[color="boss"] {
+  background: var(--role-boss);
+  color: white;
+}
+
+.search-box {
+  margin-bottom: 10px;
+}
+.error-tip {
+  color: #ff4d4f;
+  font-size: 12px;
+  margin-left: 8px;
+}
+
+.tip {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+}
+
+.password-strength {
+  margin-top: 4px;
+  display: flex;
+  gap: 8px;
+}
+
+.password-strength span {
+  color: #999;
+  font-size: 12px;
+  position: relative;
+  padding-left: 18px;
+}
+
+.password-strength span::before {
+  content: '';
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #eee;
+  position: absolute;
+  left: 0;
+  top: 2px;
+}
+
+.strength-ok {
+  color: #52c41a;
+}
+
+.strength-ok::before {
+  background: #52c41a !important;
+}
+
+.avatar-uploader :deep(.ant-upload) {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.ant-upload-text {
+  margin-top: 8px;
+}
+
+.input-tip {
+  font-size: 0.875rem;
+  color: #666;
+}
+
+.error-tip {
+  color: #f5222d;
+  margin-left: 4px;
+}
+
+.password-strength {
+  margin-top: 4px;
+  font-size: 0.875rem;
+}
+
+.strength-ok {
+  color: #52c41a;
+}
+
+.avatar-uploader {
+  width: 100%;
+  max-width: 200px;
+  margin: 0 auto;
+}
+
+.avatar-uploader .ant-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .ant-upload:hover {
+  border-color: #40a9ff;
+}
+
+.avatar-uploader img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+
+.custom-button {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  color: #fff;
+}
+
+.custom-button:hover,
+.custom-button:focus {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  color: #fff;
+}
+
+.custom-button[disabled] {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  opacity: 0.6;
+  color: #fff;
+}
+
+.custom-search :deep(.ant-input-search-button) {
+  background-color: #ffa940;
+  border-color: #ffa940;
+}
+
+.custom-search :deep(.ant-input-search-button:hover),
+.custom-search :deep(.ant-input-search-button:focus) {
+  background-color: #fa8c16;
+  border-color: #fa8c16;
+}
+
+
+.custom-search :deep(.ant-input) {
+  border-right-color: #ffa940;
+}
+
+:deep(.ant-checkbox-wrapper-disabled) {
+  display: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/view/userList/staffList.vue b/src/view/userList/staffList.vue
new file mode 100644
index 0000000..d504d04
--- /dev/null
+++ b/src/view/userList/staffList.vue
@@ -0,0 +1,746 @@
+<template>
+  <!-- 搜索框 -->
+  <div class="search-box">
+    <div class="search-container">
+      <a-form layout="inline">
+        <a-space>
+
+          <a-form-item label="手机号">
+            <a-input-search
+                style="width: 300px;"
+                placeholder="请输入手机号"
+                enter-button
+                @search="handlePhoneSearch"
+                v-model:value="searchPhone"
+                type="text"
+                class="custom-search"
+                :maxlength="11"
+                @input="handleSearchPhoneInput"
+                @keydown="handleKeyDown"
+            />
+          </a-form-item>
+
+          <a-button class="custom-button" @click="reset">重置搜索</a-button>
+        </a-space>
+      </a-form>
+    </div>
+  </div>
+  <!--  数据-->
+  <a-table
+      :columns="columns"
+      :data-source="tableData"
+      :scroll="{ x: 1400, y: 550 }"
+      :loading="loading"
+      :pagination="pagination"
+      bordered
+      rowKey="id"
+      @change="handleTableChange"
+  >
+    <template #bodyCell="{ column, record }">
+
+      <template v-if="column.key === 'userAvatar'">
+        <a-avatar :src="downLoadImage + record.userAvatar" />
+      </template>
+
+      <template v-if="column.key === 'operation'">
+        <a-space :size="16">
+          <a class="action-btn" @click="showDrawer(record)">详情</a>
+        </a-space>
+      </template>
+    </template>
+  </a-table>
+
+  <!--  抽屉-->
+  <a-drawer
+      v-model:open="open"
+      title="用户详细信息"
+      placement="right"
+      width="600"
+  >
+    <div v-if="selectedUser" class="user-detail">
+      <div class="header">
+        <a-avatar :size="128" :src="downLoadImage+selectedUser.userAvatar" class="avatar" />
+      </div>
+
+      <a-form
+          v-if="isEditMode"
+          :model="editForm"
+          :rules="editFormRules"
+          ref="editFormRef"
+          :label-col="{ span: 6 }"
+          :wrapper-col="{ span: 16 }"
+      >
+        <!-- 可编辑表单 -->
+        <a-form-item label="昵称" name="nickName">
+
+        </a-form-item>
+
+        <a-form-item label="头像" name="userAvatar">
+
+        </a-form-item>
+        <a-form-item label="账号" name="userAccount">
+
+        </a-form-item>
+
+        <a-form-item label="手机号" name="phoneNumber">
+
+        </a-form-item>
+
+      </a-form>
+
+      <div v-else class="view-mode">
+        <!-- 基本信息卡片 -->
+        <a-card title="基本信息" class="info-card">
+          <div class="info-item">
+            <user-outlined class="info-icon" />
+            <div class="info-content">
+              <span class="info-label">用户ID</span>
+              <span class="info-value">{{ selectedUser.id }}</span>
+            </div>
+          </div>
+
+          <div class="info-item">
+            <idcard-outlined class="info-icon" />
+            <div class="info-content">
+              <span class="info-label">账户信息</span>
+              <div class="account-detail">
+                <span>{{ selectedUser.userAccount }}</span>
+                <a-tag class="role-tag">
+                  {{ editForm.userRole}}
+                </a-tag>
+              </div>
+            </div>
+          </div>
+
+          <div class="info-item">
+            <smile-outlined class="info-icon" />
+            <div class="info-content">
+              <span class="info-label">昵称</span>
+              <span class="info-value highlight">{{ selectedUser.nickName }}</span>
+            </div>
+          </div>
+        </a-card>
+
+        <!-- 联系信息卡片 -->
+        <a-card title="联系信息" class="info-card">
+          <div class="info-item">
+            <phone-outlined class="info-icon" />
+            <div class="info-content">
+              <span class="info-label">手机号码</span>
+              <span class="info-value">{{ selectedUser.phoneNumber || '未绑定' }}</span>
+            </div>
+          </div>
+        </a-card>
+
+
+      </div>
+
+    </div>
+  </a-drawer>
+
+
+
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref} from "vue";
+import myAxios from "../../api/myAxios.ts";
+import { message } from "ant-design-vue";
+
+import {downLoadImage} from '../../api/ImageUrl.ts'
+
+import {
+  UserOutlined,
+  IdcardOutlined,
+  SmileOutlined,
+  PhoneOutlined,
+} from '@ant-design/icons-vue';
+
+
+
+const handleSearchPhoneInput = (e: any) => {
+  let value = e.target.value;
+
+  // 只允许输入数字，并截取前11位
+  const newValue = value.replace(/[^0-9]/g, '').slice(0, 11);
+
+  if (newValue !== value) {
+    searchPhone.value = newValue;
+  }
+};
+
+// 新增 onKeyDown 事件处理函数
+const handleKeyDown = (e: KeyboardEvent) => {
+
+  const allowedKeys = [
+    'Backspace',
+    'Delete',
+    'ArrowLeft',
+    'ArrowRight',
+    'Tab',
+  ];
+
+
+  if (!/[0-9]/.test(e.key) && !allowedKeys.includes(e.key)) {
+    e.preventDefault();
+  }
+};
+
+
+
+const loading = ref(false);
+
+const searchParams = ref({
+  current: 1,
+  pageSize: 10,
+  sortField: "id",
+  sortOrder: "ascend",
+  userRole:"staff",
+  phoneNumber:null
+});
+//用户表
+const columns = [
+  {
+    title: '用户ID',
+    dataIndex: 'id',
+    width: 50,
+    key: 'id',
+    fixed: 'left',
+    align: 'center',
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
+  },
+
+  {
+    title: '头像',
+    dataIndex: 'userAvatar',
+    key: 'userAvatar',
+    width: 50,
+    fixed: 'left',
+    align: 'center'
+  },
+  {
+    title: '账号',
+    dataIndex: 'userAccount',
+    width: 90,
+    key: 'userAccount',
+    fixed: 'left',
+    align: 'center'
+  },
+  {
+    title: '用户昵称',
+    dataIndex: 'nickName',
+    width: 70,
+    key: 'nickName',
+    align: 'center'
+  },
+  {
+    title: '身份',
+    dataIndex: 'userRole',
+    key: 'userRole',
+    width: 50,
+    align: 'center'
+  },
+  {
+    title: '手机号',
+    dataIndex: 'phoneNumber',
+    key: 'phoneNumber',
+    width: 80,
+    align: 'center',
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
+  },
+  // {
+  //   title: '邀请码',
+  //   dataIndex: 'invitationCode',
+  //   key: 'invitationCode',
+  //   width: 70,
+  //   align: 'center',
+  //   sorter: true,
+  //   sortDirections: ['ascend', 'descend']
+  // },
+  // {
+  //   title: '上级ID',
+  //   dataIndex: 'parentUserId',
+  //   key: 'parentUserId',
+  //   width: 40,
+  //   align: 'center',
+  //   sorter: true,
+  //   sortDirections: ['ascend', 'descend']
+  // },
+  {
+    title: '操作',
+    key: 'operation',
+    fixed: 'right',
+    width: 90,
+    align: 'center'
+  }
+];
+// 分页配置
+const pagination = ref({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showQuickJumper: true,
+  showTotal: (total: number) => `共 ${total} 条`,
+  pageSizeOptions: ['10', '20', '50', '100']
+});
+//编辑用户表单
+
+const editFormRules = {
+  nickName: [
+    {
+      required: true,
+      message: '请输入昵称',
+      trigger: ['input', 'blur']
+    },
+    {
+      min: 1,
+      max: 6,
+      message: '昵称长度需为1-6位',
+      trigger: ['input', 'blur']
+    }
+  ],
+  phoneNumber: [
+    {
+      required: true,
+      message: '请输入手机号',
+      trigger: ['input', 'blur']
+    },
+    {
+      pattern: /^1[3-9]\d{9}$/,
+      message: '必须是有效的11位手机号',
+      trigger: ['input', 'blur']
+    }
+  ],
+  userPassword: [
+    {
+      min: 6,
+      max: 10,
+      message: '长度需为6-10位',
+      trigger: ['input', 'blur']
+    },
+    {
+      validator: (_: any, value: string) => {
+        if (value && !/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
+          return Promise.reject('必须包含大小写字母和数字');
+        }
+        return Promise.resolve();
+      },
+      trigger: ['input', 'blur']
+    }
+  ]
+};
+
+
+
+const editFormRef = ref();
+
+// 修改后的分页处理函数
+const handleTableChange = (pag: any, _: any, sorter: any) => {
+
+  let sortField = "id";
+  let sortOrder = "ascend";
+
+  if (sorter.field) {
+    sortField = sorter.field;
+    sortOrder = sorter.order;
+  }
+
+  searchParams.value = {
+    ...searchParams.value,
+    current: pag.current,
+    pageSize: pag.pageSize,
+    sortField: sortField,
+    sortOrder: sortOrder
+  };
+
+  pagination.value.current = pag.current;
+  pagination.value.pageSize = pag.pageSize;
+
+  getUserList();
+};
+
+
+
+const getUserList = async () => {
+  loading.value = true;
+  try {
+    const storedToken = localStorage.getItem('token');
+    if (!storedToken) throw new Error('未找到登录信息');
+
+    const res: any = await myAxios.post("/userInfo/page",
+        {...searchParams.value },
+        { headers: { Authorization: storedToken } }
+    );
+    console.log(res)
+    if (res.code === 1 && res.data) {
+      tableData.value = res.data.records.map((item: any) => {
+        if (item.parentUserId === -1) {
+          item.parentUserId = '无';
+        }
+        return {
+          ...item,
+          superUserList: item.superHostList? item.superHostList.join(', ') : '无'
+        };
+      });
+
+      pagination.value.total = res.data.total;
+      pagination.value.current = res.data.current;
+      pagination.value.pageSize = res.data.size;
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(getUserList);
+
+// ID查询方法
+interface User {
+  id: number;
+  nickName: string;
+  userAvatar: string;
+  phoneNumber: string;
+  userAccount: string;
+  userPassword: string;
+  invitationCode: string;
+  userRole:string;
+  parentUserId:number
+}
+
+const tableData = ref<User[]>([]);
+
+const searchPhone = ref("");
+
+
+const handlePhoneSearch = async () => {
+  if (!searchPhone.value) {
+    message.warning('请输入手机号');
+    return;
+  }
+
+  // 验证手机号格式
+  if (!/^1[3-9]\d{9}$/.test(searchPhone.value)) {
+    message.warning('请输入有效的11位手机号');
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const storedToken = localStorage.getItem('token');
+    if (!storedToken) throw new Error('未找到登录信息');
+
+
+    const res: { code: number; data: any; message: any } = await myAxios.post(
+        "/userInfo/page",
+        {
+          current: 1,
+          pageSize: 10,
+          userRole:'staff',
+          phoneNumber: searchPhone.value
+        },
+        { headers: { Authorization: storedToken } }
+    );
+
+    if (res.code === 1 && res.data) {
+      tableData.value = res.data.records.map((item: any) => {
+        if (item.parentUserId === -1) {
+          item.parentUserId = '无';
+        }
+        return {
+          ...item,
+          superUserList: item.superHostList? item.superHostList.join(', ') : '无'
+        };
+      });
+      // 更新分页信息
+      pagination.value.total = res.data.total;
+      pagination.value.current = res.data.current;
+      pagination.value.pageSize = res.data.size;
+    } else {
+      message.error(res.message || '查询失败');
+    }
+  } catch (error) {
+    console.error('查询失败:', error);
+    message.error('查询操作失败，请检查网络');
+  } finally {
+    loading.value = false;
+  }
+};
+
+
+const reset = () => {
+  searchPhone.value = "";
+  searchParams.value = {
+    current: 1,
+    pageSize: 10,
+    sortField: "id",
+    sortOrder: "ascend",
+    userRole: "staff",
+    phoneNumber: null
+  };
+  getUserList();
+};
+
+
+
+// 操作用户
+const open = ref<boolean>(false);
+
+const selectedUser = ref<any>(null);
+
+const isEditMode = ref(false);
+const editForm = ref({
+  id: 0,
+  nickName: '',
+  userAvatar: '',
+  phoneNumber: '',
+  userAccount: '',
+  userPassword: '',
+  invitationCode: '',
+  userRole: '',
+  parentUserId: 0,
+  SuperUserList: ''
+});
+
+
+
+const showDrawer = (record: any) => {
+  selectedUser.value = record;
+  editForm.value = {
+    id: record.id,
+    nickName: record.nickName,
+    userAvatar: record.userAvatar||'',
+    phoneNumber: record.phoneNumber,
+    userAccount: record.userAccount,
+    userPassword: record.userPassword,
+    invitationCode: record.invitationCode,
+    userRole: record.userRole,
+    parentUserId: record.parentUserId,
+    SuperUserList: Array.isArray(record.superHostList)
+        ? record.superHostList.join(',')
+        : record.SuperUserList || ''
+  };
+  open.value = true;
+  isEditMode.value = false;
+};
+
+
+
+</script>
+
+<style scoped>
+.action-btn {
+  padding: 0 8px;
+}
+
+:deep(.ant-divider-vertical) {
+  border-color: rgba(0, 0, 0, 0.15);
+  height: 1.2em;
+  margin: 0 4px;
+}
+
+.user-detail {
+  padding: 20px;
+}
+
+.avatar {
+  display: block;
+  margin: 0 auto 20px;
+}
+
+:deep(.ant-descriptions-item-label) {
+  font-weight: 600;
+  width: 120px;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.avatar {
+  margin-bottom: 20px;
+}
+.custom-button {
+  width: 120px;
+}
+.view-mode {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.info-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+  margin-bottom: 16px;
+}
+
+.info-card :deep(.ant-card-head) {
+  background: #fafafa;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.info-icon {
+  font-size: 18px;
+  color: #1890ff;
+  margin-right: 16px;
+  width: 24px;
+  text-align: center;
+}
+
+.info-content {
+  flex: 1;
+}
+
+.info-label {
+  display: block;
+  color: #666;
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.info-value {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.highlight {
+  color: #1890ff;
+}
+
+
+
+.role-tag {
+  margin-left: 8px;
+  font-size: 12px;
+}
+
+
+:root {
+  --role-user: #87d068;
+  --role-admin: #f50;
+  --role-boss: #722ed1;
+}
+
+.role-tag[color="user"] {
+  background: var(--role-user);
+  color: white;
+}
+
+.role-tag[color="admin"] {
+  background: var(--role-admin);
+  color: white;
+}
+
+.role-tag[color="boss"] {
+  background: var(--role-boss);
+  color: white;
+}
+
+.search-box {
+  margin-bottom: 10px;
+}
+
+
+.password-strength span {
+  color: #999;
+  font-size: 12px;
+  position: relative;
+  padding-left: 18px;
+}
+
+.password-strength span::before {
+  content: '';
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #eee;
+  position: absolute;
+  left: 0;
+  top: 2px;
+}
+
+
+.avatar-uploader :deep(.ant-upload) {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+
+.avatar-uploader .ant-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .ant-upload:hover {
+  border-color: #40a9ff;
+}
+
+.avatar-uploader img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+
+.custom-button {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  color: #fff;
+}
+
+.custom-button:hover,
+.custom-button:focus {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  color: #fff;
+}
+
+.custom-button[disabled] {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  opacity: 0.6;
+  color: #fff;
+}
+
+.custom-search :deep(.ant-input-search-button) {
+  background-color: #ffa940;
+  border-color: #ffa940;
+}
+
+.custom-search :deep(.ant-input-search-button:hover),
+.custom-search :deep(.ant-input-search-button:focus) {
+  background-color: #fa8c16;
+  border-color: #fa8c16;
+}
+
+
+.custom-search :deep(.ant-input) {
+  border-right-color: #ffa940;
+}
+
+:deep(.ant-checkbox-wrapper-disabled) {
+  display: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/view/userList/supervisorList.vue b/src/view/userList/supervisorList.vue
new file mode 100644
index 0000000..2a104ae
--- /dev/null
+++ b/src/view/userList/supervisorList.vue
@@ -0,0 +1,807 @@
+<template>
+  <!-- 搜索框 -->
+  <div class="search-box">
+    <div class="search-container">
+      <a-form layout="inline">
+        <a-space>
+
+          <a-form-item label="手机号">
+            <a-input-search
+                style="width: 300px;"
+                placeholder="请输入手机号"
+                enter-button
+                @search="handlePhoneSearch"
+                v-model:value="searchPhone"
+                type="text"
+                class="custom-search"
+                :maxlength="11"
+                @input="handleSearchPhoneInput"
+                @keydown="handleKeyDown"
+            />
+          </a-form-item>
+
+          <a-button class="custom-button" @click="reset">重置搜索</a-button>
+        </a-space>
+      </a-form>
+    </div>
+  </div>
+  <!--  数据-->
+  <a-table
+      :columns="columns"
+      :data-source="tableData"
+      :scroll="{ x: 1400, y: 550 }"
+      :loading="loading"
+      :pagination="pagination"
+      bordered
+      rowKey="id"
+      @change="handleTableChange"
+  >
+    <template #bodyCell="{ column, record }">
+
+      <template v-if="column.key === 'userAvatar'">
+        <a-avatar :src="downLoadImage + record.userAvatar" />
+      </template>
+
+      <template v-if="column.key === 'operation'">
+        <a-space :size="16">
+          <a class="action-btn" @click="showDrawer(record)">详情</a>
+
+        </a-space>
+      </template>
+    </template>
+  </a-table>
+
+  <!--  抽屉-->
+  <a-drawer
+      v-model:open="open"
+      title="用户详细信息"
+      placement="right"
+      width="600"
+  >
+    <div v-if="selectedUser" class="user-detail">
+      <div class="header">
+        <a-avatar :size="128" :src="downLoadImage+selectedUser.userAvatar" class="avatar" />
+      </div>
+
+      <a-form
+          v-if="isEditMode"
+          :model="editForm"
+          :rules="editFormRules"
+          ref="editFormRef"
+          :label-col="{ span: 6 }"
+          :wrapper-col="{ span: 16 }"
+      >
+        <!-- 可编辑表单 -->
+        <a-form-item label="昵称" name="nickName">
+
+        </a-form-item>
+
+        <a-form-item label="头像" name="userAvatar" required>
+
+        </a-form-item>
+
+
+        <a-form-item label="手机号" name="phoneNumber">
+
+        </a-form-item>
+        <a-form-item label="账户" name="userAccount">
+
+        </a-form-item>
+        <a-form-item label="密码" name="userPassword" required>
+
+        </a-form-item>
+        <a-form-item label="身份">
+
+        </a-form-item>
+        <a-form-item :wrapper-col="{ offset: 6 }">
+
+        </a-form-item>
+      </a-form>
+
+      <div v-else class="view-mode">
+        <!-- 基本信息卡片 -->
+        <a-card title="基本信息" class="info-card">
+          <div class="info-item">
+            <user-outlined class="info-icon" />
+            <div class="info-content">
+              <span class="info-label">用户ID</span>
+              <span class="info-value">{{ selectedUser.id }}</span>
+            </div>
+          </div>
+
+          <div class="info-item">
+            <idcard-outlined class="info-icon" />
+            <div class="info-content">
+              <span class="info-label">账户信息</span>
+              <div class="account-detail">
+                <span>{{ selectedUser.userAccount }}</span>
+                <a-tag class="role-tag">
+                  {{ editForm.userRole}}
+                </a-tag>
+              </div>
+            </div>
+          </div>
+
+          <div class="info-item">
+            <smile-outlined class="info-icon" />
+            <div class="info-content">
+              <span class="info-label">昵称</span>
+              <span class="info-value highlight">{{ selectedUser.nickName }}</span>
+            </div>
+          </div>
+        </a-card>
+
+        <!-- 联系信息卡片 -->
+        <a-card title="联系信息" class="info-card">
+          <div class="info-item">
+            <phone-outlined class="info-icon" />
+            <div class="info-content">
+              <span class="info-label">手机号码</span>
+              <span class="info-value">{{ selectedUser.phoneNumber || '未绑定' }}</span>
+            </div>
+          </div>
+        </a-card>
+
+
+      </div>
+
+    </div>
+  </a-drawer>
+
+
+
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref} from "vue";
+import myAxios from "../../api/myAxios.ts";
+import { message } from "ant-design-vue";
+import {downLoadImage} from '../../api/ImageUrl.ts'
+
+import {
+  UserOutlined,
+  IdcardOutlined,
+  SmileOutlined,
+  PhoneOutlined,
+} from '@ant-design/icons-vue';
+
+
+
+const handleSearchPhoneInput = (e: any) => {
+  let value = e.target.value;
+
+  // 只允许输入数字，并截取前11位
+  const newValue = value.replace(/[^0-9]/g, '').slice(0, 11);
+
+  if (newValue !== value) {
+    searchPhone.value = newValue;
+  }
+};
+
+// 新增 onKeyDown 事件处理函数
+const handleKeyDown = (e: KeyboardEvent) => {
+
+  const allowedKeys = [
+    'Backspace',
+    'Delete',
+    'ArrowLeft',
+    'ArrowRight',
+    'Tab',
+  ];
+
+
+  if (!/[0-9]/.test(e.key) && !allowedKeys.includes(e.key)) {
+    e.preventDefault();
+  }
+};
+
+
+
+
+const loading = ref(false);
+
+const searchParams = ref({
+  current: 1,
+  pageSize: 10,
+  sortField: "id",
+  sortOrder: "ascend",
+  userRole:"supervisor",
+  phoneNumber:null
+});
+//用户表
+const columns = [
+  {
+    title: '用户ID',
+    dataIndex: 'id',
+    width: 50,
+    key: 'id',
+    fixed: 'left',
+    align: 'center',
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
+  },
+
+  {
+    title: '头像',
+    dataIndex: 'userAvatar',
+    key: 'userAvatar',
+    width: 50,
+    fixed: 'left',
+    align: 'center'
+  },
+  {
+    title: '账号',
+    dataIndex: 'userAccount',
+    width: 90,
+    key: 'userAccount',
+    fixed: 'left',
+    align: 'center'
+  },
+  {
+    title: '用户昵称',
+    dataIndex: 'nickName',
+    width: 70,
+    key: 'nickName',
+    align: 'center'
+  },
+  {
+    title: '身份',
+    dataIndex: 'userRole',
+    key: 'userRole',
+    width: 50,
+    align: 'center'
+  },
+  {
+    title: '手机号',
+    dataIndex: 'phoneNumber',
+    key: 'phoneNumber',
+    width: 80,
+    align: 'center',
+    sorter: true,
+    sortDirections: ['ascend', 'descend']
+  },
+  // {
+  //   title: '邀请码',
+  //   dataIndex: 'invitationCode',
+  //   key: 'invitationCode',
+  //   width: 70,
+  //   align: 'center',
+  //   sorter: true,
+  //   sortDirections: ['ascend', 'descend']
+  // },
+  // {
+  //   title: '上级ID',
+  //   dataIndex: 'parentUserId',
+  //   key: 'parentUserId',
+  //   width: 40,
+  //   align: 'center',
+  //   sorter: true,
+  //   sortDirections: ['ascend', 'descend']
+  // },
+  {
+    title: '操作',
+    key: 'operation',
+    fixed: 'right',
+    width: 90,
+    align: 'center'
+  }
+];
+// 分页配置
+const pagination = ref({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showSizeChanger: true,
+  showQuickJumper: true,
+  showTotal: (total: number) => `共 ${total} 条`,
+  pageSizeOptions: ['10', '20', '50', '100']
+});
+//编辑用户表单
+
+const editFormRules = {
+  nickName: [
+    {
+      required: true,
+      message: '请输入昵称',
+      trigger: ['input', 'blur']
+    },
+    {
+      min: 1,
+      max: 6,
+      message: '昵称长度需为1-6位',
+      trigger: ['input', 'blur']
+    }
+  ],
+  phoneNumber: [
+    {
+      required: true,
+      message: '请输入手机号',
+      trigger: ['input', 'blur']
+    },
+    {
+      pattern: /^1[3-9]\d{9}$/,
+      message: '必须是有效的11位手机号',
+      trigger: ['input', 'blur']
+    }
+  ],
+  userPassword: [
+    {
+      min: 6,
+      max: 10,
+      message: '长度需为6-10位',
+      trigger: ['input', 'blur']
+    },
+    {
+      validator: (_: any, value: string) => {
+        if (value && !/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
+          return Promise.reject('必须包含大小写字母和数字');
+        }
+        return Promise.resolve();
+      },
+      trigger: ['input', 'blur']
+    }
+  ]
+};
+
+
+const editFormRef = ref();
+
+// 修改后的分页处理函数
+const handleTableChange = (pag: any, _: any, sorter: any) => {
+
+  let sortField = "id";
+  let sortOrder = "ascend";
+
+  if (sorter.field) {
+    sortField = sorter.field;
+    sortOrder = sorter.order;
+  }
+
+  searchParams.value = {
+    ...searchParams.value,
+    current: pag.current,
+    pageSize: pag.pageSize,
+    sortField: sortField,
+    sortOrder: sortOrder
+  };
+
+  pagination.value.current = pag.current;
+  pagination.value.pageSize = pag.pageSize;
+
+  getUserList();
+};
+
+
+
+const getUserList = async () => {
+  loading.value = true;
+  try {
+    const storedToken = localStorage.getItem('token');
+    if (!storedToken) throw new Error('未找到登录信息');
+
+    const res: any = await myAxios.post("/userInfo/page",
+        {...searchParams.value },
+        { headers: { Authorization: storedToken } }
+    );
+    console.log(res)
+    if (res.code === 1 && res.data) {
+      tableData.value = res.data.records.map((item: any) => {
+        if (item.parentUserId === -1) {
+          item.parentUserId = '无';
+        }
+        return {
+          ...item,
+          superUserList: item.superHostList? item.superHostList.join(', ') : '无'
+        };
+      });
+
+      pagination.value.total = res.data.total;
+      pagination.value.current = res.data.current;
+      pagination.value.pageSize = res.data.size;
+    }
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(getUserList);
+
+// ID查询方法
+interface User {
+  id: number;
+  nickName: string;
+  userAvatar: string;
+  phoneNumber: string;
+  userAccount: string;
+  userPassword: string;
+  invitationCode: string;
+  userRole:string;
+  parentUserId:number
+}
+
+const tableData = ref<User[]>([]);
+
+const searchPhone = ref("");
+
+
+const handlePhoneSearch = async () => {
+  if (!searchPhone.value) {
+    message.warning('请输入手机号');
+    return;
+  }
+
+  // 验证手机号格式
+  if (!/^1[3-9]\d{9}$/.test(searchPhone.value)) {
+    message.warning('请输入有效的11位手机号');
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const storedToken = localStorage.getItem('token');
+    if (!storedToken) throw new Error('未找到登录信息');
+
+
+    const res: { code: number; data: any; message: any } = await myAxios.post(
+        "/userInfo/page",
+        {
+          current: 1,
+          pageSize: 10,
+          userRole:'supervisor',
+          phoneNumber: searchPhone.value
+        },
+        { headers: { Authorization: storedToken } }
+    );
+
+    if (res.code === 1 && res.data) {
+      tableData.value = res.data.records.map((item: any) => {
+        if (item.parentUserId === -1) {
+          item.parentUserId = '无';
+        }
+        return {
+          ...item,
+          superUserList: item.superHostList? item.superHostList.join(', ') : '无'
+        };
+      });
+      // 更新分页信息
+      pagination.value.total = res.data.total;
+      pagination.value.current = res.data.current;
+      pagination.value.pageSize = res.data.size;
+    } else {
+      message.error(res.message || '查询失败');
+    }
+  } catch (error) {
+    console.error('查询失败:', error);
+    message.error('查询操作失败，请检查网络');
+  } finally {
+    loading.value = false;
+  }
+};
+
+
+const reset = () => {
+  searchPhone.value = "";
+  searchParams.value = {
+    current: 1,
+    pageSize: 10,
+    sortField: "id",
+    sortOrder: "ascend",
+    userRole: "supervisor",
+    phoneNumber: null
+  };
+  getUserList();
+};
+
+
+
+
+// 操作用户
+const open = ref<boolean>(false);
+
+const selectedUser = ref<any>(null);
+
+const isEditMode = ref(false);
+const editForm = ref({
+  id: 0,
+  nickName: '',
+  userAvatar: '',
+  phoneNumber: '',
+  userAccount: '',
+  userPassword: '',
+  invitationCode: '',
+  userRole: '',
+  parentUserId: 0,
+  SuperUserList: ''
+});
+
+
+const showDrawer = (record: any) => {
+  selectedUser.value = record;
+  editForm.value = {
+    id: record.id,
+    nickName: record.nickName,
+    userAvatar: record.userAvatar||'',
+    phoneNumber: record.phoneNumber,
+    userAccount: record.userAccount,
+    userPassword: record.userPassword,
+    invitationCode: record.invitationCode,
+    userRole: record.userRole,
+    parentUserId: record.parentUserId,
+    SuperUserList: Array.isArray(record.superHostList)
+        ? record.superHostList.join(',')
+        : record.SuperUserList || ''
+  };
+  open.value = true;
+  isEditMode.value = false;
+};
+
+
+
+
+
+
+</script>
+
+<style scoped>
+.action-btn {
+  padding: 0 8px;
+}
+
+:deep(.ant-divider-vertical) {
+  border-color: rgba(0, 0, 0, 0.15);
+  height: 1.2em;
+  margin: 0 4px;
+}
+
+.user-detail {
+  padding: 20px;
+}
+
+.avatar {
+  display: block;
+  margin: 0 auto 20px;
+}
+
+:deep(.ant-descriptions-item-label) {
+  font-weight: 600;
+  width: 120px;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.avatar {
+  margin-bottom: 20px;
+}
+.custom-button {
+  width: 120px;
+}
+.view-mode {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.info-card {
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+  margin-bottom: 16px;
+}
+
+.info-card :deep(.ant-card-head) {
+  background: #fafafa;
+  border-bottom: 1px solid #e8e8e8;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.info-icon {
+  font-size: 18px;
+  color: #1890ff;
+  margin-right: 16px;
+  width: 24px;
+  text-align: center;
+}
+
+.info-content {
+  flex: 1;
+}
+
+.info-label {
+  display: block;
+  color: #666;
+  font-size: 12px;
+  margin-bottom: 4px;
+}
+
+.info-value {
+  font-size: 14px;
+  color: #333;
+  font-weight: 500;
+}
+
+.highlight {
+  color: #1890ff;
+}
+
+
+
+.role-tag {
+  margin-left: 8px;
+  font-size: 12px;
+}
+
+
+:root {
+  --role-user: #87d068;
+  --role-admin: #f50;
+  --role-boss: #722ed1;
+}
+
+.role-tag[color="user"] {
+  background: var(--role-user);
+  color: white;
+}
+
+.role-tag[color="admin"] {
+  background: var(--role-admin);
+  color: white;
+}
+
+.role-tag[color="boss"] {
+  background: var(--role-boss);
+  color: white;
+}
+
+.search-box {
+  margin-bottom: 10px;
+}
+.error-tip {
+  color: #ff4d4f;
+  font-size: 12px;
+  margin-left: 8px;
+}
+
+.tip {
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 12px;
+}
+
+.password-strength {
+  margin-top: 4px;
+  display: flex;
+  gap: 8px;
+}
+
+.password-strength span {
+  color: #999;
+  font-size: 12px;
+  position: relative;
+  padding-left: 18px;
+}
+
+.password-strength span::before {
+  content: '';
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #eee;
+  position: absolute;
+  left: 0;
+  top: 2px;
+}
+
+.strength-ok {
+  color: #52c41a;
+}
+
+.strength-ok::before {
+  background: #52c41a !important;
+}
+
+.avatar-uploader :deep(.ant-upload) {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.ant-upload-text {
+  margin-top: 8px;
+}
+
+.input-tip {
+  font-size: 0.875rem;
+  color: #666;
+}
+
+.error-tip {
+  color: #f5222d;
+  margin-left: 4px;
+}
+
+.password-strength {
+  margin-top: 4px;
+  font-size: 0.875rem;
+}
+
+.strength-ok {
+  color: #52c41a;
+}
+
+.avatar-uploader {
+  width: 100%;
+  max-width: 200px;
+  margin: 0 auto;
+}
+
+.avatar-uploader .ant-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .ant-upload:hover {
+  border-color: #40a9ff;
+}
+
+.avatar-uploader img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+
+.custom-button {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  color: #fff;
+}
+
+.custom-button:hover,
+.custom-button:focus {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  color: #fff;
+}
+
+.custom-button[disabled] {
+  background-color: #ffa940;
+  border-color: #ffa940;
+  opacity: 0.6;
+  color: #fff;
+}
+
+.custom-search :deep(.ant-input-search-button) {
+  background-color: #ffa940;
+  border-color: #ffa940;
+}
+
+.custom-search :deep(.ant-input-search-button:hover),
+.custom-search :deep(.ant-input-search-button:focus) {
+  background-color: #fa8c16;
+  border-color: #fa8c16;
+}
+
+
+.custom-search :deep(.ant-input) {
+  border-right-color: #ffa940;
+}
+
+:deep(.ant-checkbox-wrapper-disabled) {
+  display: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/view/userList/userList.vue b/src/view/userList/userList.vue
index 9fc8d2f..6481398 100644
--- a/src/view/userList/userList.vue
+++ b/src/view/userList/userList.vue
@@ -20,121 +20,6 @@
             />
           </a-form-item>
 
-          <a-button class="custom-button" @click="showModal">新增管理员</a-button>
-          <!--新增用户-->
-          <a-modal
-              v-model:open="openUser"
-              title="新增管理员"
-              @ok="handleOk"
-              :footer="null"
-          >
-            <a-form
-                ref="formRef"
-                :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }"
-                @submit="handleSubmit"
-                :rules="formRules"
-            >
-              <a-form-item label="昵称" name="nickName">
-                <a-input
-                    v-model:value="formData.nickName"
-                    :maxlength="6"
-                    @input="handleNicknameInput"
-                    autocomplete="off"
-                />
-                <template #help>
-    <span v-if="formData.nickName.length > 0" class="tip">
-      {{ formData.nickName.length }}/6
-      <span v-if="formData.nickName.length > 6" class="error-tip">（超过最大长度）</span>
-    </span>
-                </template>
-              </a-form-item>
-
-              <a-form-item label="头像" name="userAvatar" required>
-                <a-upload
-                    name="file"
-                    list-type="picture-card"
-                    class="avatar-uploader"
-                    :show-upload-list="false"
-                    :before-upload="beforeUpload"
-                    :custom-request="handleUpload"
-                >
-                  <img v-if="formData.userAvatar" :src="previewImage" alt="avatar" style="width: 100%"/>
-                  <div v-else>
-                    <loading-outlined v-if="uploadLoading"></loading-outlined>
-                    <plus-outlined v-else></plus-outlined>
-                    <div class="ant-upload-text">上传头像</div>
-                  </div>
-                </a-upload>
-              </a-form-item>
-
-              <a-form-item label="手机号" name="phoneNumber">
-                <a-input
-                    v-model:value="formData.phoneNumber"
-                    :maxlength="11"
-                    @input="handlePhoneInput"
-                    autocomplete="off"
-                />
-                <template #help>
-    <span v-if="formData.phoneNumber.length > 0" class="tip">
-      {{ formData.phoneNumber.length }}/11
-      <span v-if="formData.phoneNumber.length > 11" class="error-tip">（超过最大长度）</span>
-    </span>
-                </template>
-              </a-form-item>
-
-              <!-- 修改账户表单项 -->
-              <a-form-item label="账号" name="userAccount">
-                <a-input
-                    v-model:value="formData.userAccount"
-                    :maxlength="11"
-                    @input="handleAccountInput"
-                    autocomplete="off"
-                />
-                <template #help>
-    <span v-if="formData.userAccount.length > 0" class="tip">
-      {{ formData.userAccount.length }}/11
-      <span v-if="!/^[A-Za-z0-9]+$/.test(formData.userAccount)" class="error-tip">（包含非法字符）</span>
-    </span>
-                </template>
-              </a-form-item>
-
-              <a-form-item label="密码" name="userPassword">
-                <a-input
-                    v-model:value="formData.userPassword"
-                    type="password"
-                    :maxlength="10"
-                    @input="handlePasswordInput"
-                    autocomplete="off"
-                />
-                <template #help>
-                  <div v-if="formData.userPassword.length > 0">
-                    <span class="tip">{{ formData.userPassword.length }}/10</span>
-                    <div class="password-strength">
-                      <span :class="{ 'strength-ok': hasLower }">小写字母</span>
-                      <span :class="{ 'strength-ok': hasUpper }">大写字母</span>
-                      <span :class="{ 'strength-ok': hasNumber }">数字</span>
-                    </div>
-                  </div>
-                  <!-- 新增错误提示 -->
-                  <span v-if="formData.userPassword.length > 0 && !passwordMeetsRequirements" class="error-tip">
-        请输入包含数字、字母小写、字母大写的组合
-      </span>
-                </template>
-              </a-form-item>
-
-              <a-form-item :wrapper-col="{ span: 16, offset: 5 }">
-                <a-button type="primary" html-type="submit">提交</a-button>
-              </a-form-item>
-            </a-form>
-          </a-modal>
-          <a-button
-              type="primary"
-              danger
-              :disabled="selectedRowKeys.length === 0"
-              @click="batchDelete"
-          >
-            批量删除({{ selectedRowKeys.length }})
-          </a-button>
           <a-button class="custom-button" @click="reset">重置搜索</a-button>
         </a-space>
       </a-form>
@@ -146,7 +31,6 @@
       :data-source="tableData"
       :scroll="{ x: 1400, y: 550 }"
       :loading="loading"
-      :row-selection="rowSelection"
       :pagination="pagination"
       bordered
       rowKey="id"
@@ -161,12 +45,6 @@
       <template v-if="column.key === 'operation'">
         <a-space :size="16">
           <a class="action-btn" @click="showDrawer(record)">详情</a>
-          <a-divider type="vertical" v-if="store.loginUser.userRole === 'boss' && record.userRole === 'admin'"/>
-          <a class="action-btn" type="link"
-             @click="confirmDeleteUser(record.id)"
-             v-if="store.loginUser.userRole === 'boss' && record.userRole === 'admin'">
-            删除
-          </a>
         </a-space>
       </template>
     </template>
@@ -182,106 +60,38 @@
     <div v-if="selectedUser" class="user-detail">
       <div class="header">
         <a-avatar :size="128" :src="downLoadImage+selectedUser.userAvatar" class="avatar" />
-        <a-button
-            v-if="store.loginUser.userRole === 'boss' && selectedUser?.userRole === 'admin'"
-            @click="toggleEditMode"
-            class="custom-button"
-        >
-          {{ isEditMode ? '取消编辑' : '编辑信息' }}
-        </a-button>
       </div>
 
       <a-form
           v-if="isEditMode"
           :model="editForm"
-          :rules="editFormRules"
           ref="editFormRef"
           :label-col="{ span: 6 }"
           :wrapper-col="{ span: 16 }"
       >
         <!-- 可编辑表单 -->
+        <a-form-item label="账户" name="userAccount">
+
+        </a-form-item>
         <a-form-item label="昵称" name="nickName">
-          <a-input
-              v-model:value="editForm.nickName"
-              :maxlength="6"
-              @input="handleEditNicknameInput"
-              @keypress="handleMaxLength(6)"
-          >
-            <template #suffix>
-              <span v-if="editForm.nickName.length > 0" class="input-tip">
-                {{ editForm.nickName.length }}/6
-                <span v-if="editForm.nickName.length > 6" class="error-tip">（超过最大长度）</span>
-              </span>
-            </template>
-          </a-input>
+
         </a-form-item>
 
         <a-form-item label="头像" name="userAvatar" required>
-          <a-upload
-              name="file"
-              list-type="picture-card"
-              class="avatar-uploader"
-              :show-upload-list="false"
-              :before-upload="beforeUpload"
-              :custom-request="handleEditUpload"
-          >
-            <img v-if="editForm.userAvatar" :src="editPreviewImage" alt="avatar" style="width: 100%"/>
-            <div v-else>
-              <loading-outlined v-if="editUploadLoading"></loading-outlined>
-              <plus-outlined v-else></plus-outlined>
-              <div class="ant-upload-text">上传头像</div>
-            </div>
-          </a-upload>
+
         </a-form-item>
 
 
         <a-form-item label="手机号" name="phoneNumber">
-          <a-input
-              v-model:value="editForm.phoneNumber"
-              :maxlength="11"
-              @input="handleEditPhoneInput"
-          >
-            <template #suffix>
-              <span v-if="editForm.phoneNumber.length > 0" class="input-tip">
-                {{ editForm.phoneNumber.length }}/11
-                <span v-if="editForm.phoneNumber.length > 11" class="error-tip">（超过最大长度）</span>
-              </span>
-            </template>
-          </a-input>
+
         </a-form-item>
         <a-form-item label="账户">
-          <a-input v-model:value="editForm.userAccount" disabled />
+
         </a-form-item>
         <a-form-item label="密码" name="userPassword" required>
-          <a-input
-              v-model:value="editForm.userPassword"
-              type="password"
-              :maxlength="10"
-              @input="handleEditPasswordInput"
-              @keypress="handleMaxLength(10)"
-          >
-            <template #suffix>
-              <span v-if="editForm.userPassword.length > 0" class="input-tip">
-                {{ editForm.userPassword.length }}/10
-                <div class="password-strength">
-                  <span :class="{ 'strength-ok': editHasLower }">小写字母</span>
-                  <span :class="{ 'strength-ok': editHasUpper }">大写字母</span>
-                  <span :class="{ 'strength-ok': editHasNumber }">数字</span>
-                </div>
-              </span>
-            </template>
-          </a-input>
-        </a-form-item>
-        <a-form-item label="身份">
-          <a-select v-model:value="editForm.userRole" disabled>
-            <a-select-option value="user">普通用户</a-select-option>
-            <a-select-option value="admin">管理员</a-select-option>
-            <a-select-option value="boss">老板</a-select-option>
-          </a-select>
-        </a-form-item>
-        <a-form-item :wrapper-col="{ offset: 6 }">
-          <a-button class="custom-button" @click="handleSave">保存修改</a-button>
+
         </a-form-item>
+
       </a-form>
 
       <div v-else class="view-mode">
@@ -323,7 +133,6 @@
             <phone-outlined class="info-icon" />
             <div class="info-content">
               <span class="info-label">手机号码</span>
-              <span class="info-value">{{ selectedUser.phoneNumber || '未绑定' }}</span>
             </div>
           </div>
         </a-card>
@@ -339,170 +148,21 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref,computed } from "vue";
+import { onMounted, ref } from "vue";
 import myAxios from "../../api/myAxios.ts";
-import { message, Modal  } from "ant-design-vue";
-import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
-import type { UploadProps } from 'ant-design-vue';
-import {userStore} from "../../store/userStore.ts";
+import { message } from "ant-design-vue";
+
 import {downLoadImage} from '../../api/ImageUrl.ts'
-const store = userStore()
+
 import {
   UserOutlined,
   IdcardOutlined,
   SmileOutlined,
   PhoneOutlined,
 } from '@ant-design/icons-vue';
-const uploadLoading = ref(false);
-const previewImage = ref('');
-// 上传前校验
-const beforeUpload: UploadProps['beforeUpload'] = file => {
-  const isImage = file.type.startsWith('image/');
-  if (!isImage) {
-    message.error('只能上传图片文件!');
-    return false;
-  }
-  const isLt5M = file.size / 1024 / 1024 < 5;
-  if (!isLt5M) {
-    message.error('图片大小不能超过5MB!');
-    return false;
-  }
-  return true;
-};
 
 
 
-// 自定义上传处理
-const handleUpload = async ({ file }: { file: File }) => {
-  const form = new FormData();
-  form.append('file', file);
-
-  try {
-    uploadLoading.value = true;
-    const storedToken = localStorage.getItem('token');
-
-
-    const res:any = await myAxios.post('/file/upload?biz=avatar', form, {
-      headers: {
-        Authorization: storedToken,
-
-      }
-    });
-    console.log(res)
-
-    if (res.code === 1) {
-      formData.value.userAvatar = res.data;
-      previewImage.value = URL.createObjectURL(file);
-      message.success('上传成功');
-    } else {
-      message.error(res.message || '上传失败');
-    }
-  } catch (error:any) {
-    console.error('上传失败详情:', error);
-    message.error(`上传失败：${error.response?.data?.error || error.message}`);
-  } finally {
-    uploadLoading.value = false;
-  }
-};
-
-
-const handleEditNicknameInput = (e: any) => {
-
-  const trimmedValue = e.target.value.trim().slice(0, 6);
-  editForm.value.nickName = trimmedValue;
-
-  editFormRef.value?.validateField('nickName');
-};
-
-const handleEditPhoneInput = (e: any) => {
-
-  const numericValue = e.target.value.replace(/\D/g, '').slice(0, 11);
-  editForm.value.phoneNumber = numericValue;
-
-  editFormRef.value?.validateField('phoneNumber');
-};
-
-const handleEditPasswordInput = (e: any) => {
-
-  editForm.value.userPassword = e.target.value.slice(0, 10);
-};
-
-
-const handleMaxLength = (max: number) => (e: KeyboardEvent) => {
-  if (e.target instanceof HTMLInputElement && e.target.value.length >= max) {
-    e.preventDefault();
-  }
-};
-
-
-const formRules = {
-  nickName: [
-    {
-      required: true,
-      message: '请输入昵称',
-      trigger: ['input', 'blur']
-    },
-    {
-      min: 1,
-      max: 6,
-      message: '昵称长度需为1-6位',
-      trigger: ['input', 'blur']
-    }
-  ],
-  phoneNumber: [
-    {
-      required: true,
-      message: '请输入手机号',
-      trigger: ['input', 'blur']
-    },
-    {
-      pattern: /^1[3-9]\d{9}$/,
-      message: '必须是有效的11位手机号',
-      trigger: ['input', 'blur']
-    }
-  ],
-  userAccount: [
-    {
-      required: true,
-      message: '请输入账户',
-      trigger: ['input', 'blur']
-    },
-    {
-      min: 6,
-      max: 11,
-      message: '长度需为6-11位',
-      trigger: ['input', 'blur']
-    },
-    {
-      pattern: /^[A-Za-z0-9]+$/,
-      message: '不能包含中文或特殊字符',
-      trigger: ['input', 'blur']
-    }
-  ],
-  userPassword: [
-    {
-      required: true,
-      message: '请输入密码',
-      trigger: ['input', 'blur']
-    },
-    {
-      min: 6,
-      max: 10,
-      message: '长度需为6-10位',
-      trigger: ['input', 'blur']
-    },
-    {
-      validator: (_: any, value: string) => {
-        if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
-          return Promise.reject('请输入包含数字、字母小写、字母大写的组合');
-        }
-        return Promise.resolve();
-      },
-      trigger: ['input', 'blur']
-    }
-  ]
-}
-
 const handleSearchPhoneInput = (e: any) => {
   let value = e.target.value;
 
@@ -532,45 +192,8 @@ const handleKeyDown = (e: KeyboardEvent) => {
 };
 
 
-const formData = ref({
-  nickName: '',
-  userAvatar: '',
-  phoneNumber: '',
-  userAccount: '',
-  userPassword: ''
-});
 
-// 手机号实时校验（输入时显示长度提示）
-const handlePhoneInput = (e: any) => {
-  // 实时过滤非数字字符并限制长度
-  formData.value.phoneNumber = e.target.value
-      .replace(/\D/g, '')
-      .slice(0, 11);
-}
 
-const handleAccountInput = (e: any) => {
-  // 过滤特殊字符并限制长度
-  formData.value.userAccount = e.target.value
-      .replace(/[^A-Za-z0-9]/g, '')
-      .slice(0, 11);
-}
-const handleNicknameInput = (e: any) => {
-  formData.value.nickName = e.target.value.slice(0, 6);
-}
-const passwordMeetsRequirements = computed(() => {
-  const password = formData.value.userPassword;
-  return /(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password);
-});
-
-// 实时密码强度计算（保持原有）
-const hasLower = computed(() => /[a-z]/.test(formData.value.userPassword))
-const hasUpper = computed(() => /[A-Z]/.test(formData.value.userPassword))
-const hasNumber = computed(() => /\d/.test(formData.value.userPassword))
-
-// 密码输入处理
-const handlePasswordInput = (e: any) => {
-  formData.value.userPassword = e.target.value.slice(0, 10);
-}
 const loading = ref(false);
 
 const searchParams = ref({
@@ -578,7 +201,7 @@ const searchParams = ref({
   pageSize: 10,
   sortField: "id",
   sortOrder: "ascend",
-  userRole:null,
+  userRole:"user",
   phoneNumber:null
 });
 //用户表
@@ -669,85 +292,10 @@ const pagination = ref({
   showTotal: (total: number) => `共 ${total} 条`,
   pageSizeOptions: ['10', '20', '50', '100']
 });
-//编辑用户表单
 
-const editFormRules = {
-  nickName: [
-    {
-      required: true,
-      message: '请输入昵称',
-      trigger: ['input', 'blur']
-    },
-    {
-      min: 1,
-      max: 6,
-      message: '昵称长度需为1-6位',
-      trigger: ['input', 'blur']
-    }
-  ],
-  phoneNumber: [
-    {
-      required: true,
-      message: '请输入手机号',
-      trigger: ['input', 'blur']
-    },
-    {
-      pattern: /^1[3-9]\d{9}$/,
-      message: '必须是有效的11位手机号',
-      trigger: ['input', 'blur']
-    }
-  ],
-  userPassword: [
-    {
-      min: 6,
-      max: 10,
-      message: '长度需为6-10位',
-      trigger: ['input', 'blur']
-    },
-    {
-      validator: (_: any, value: string) => {
-        if (value && !/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(value)) {
-          return Promise.reject('必须包含大小写字母和数字');
-        }
-        return Promise.resolve();
-      },
-      trigger: ['input', 'blur']
-    }
-  ]
-};
-
-// 编辑表单的密码强度计算
-const editHasLower = computed(() => /[a-z]/.test(editForm.value.userPassword))
-const editHasUpper = computed(() => /[A-Z]/.test(editForm.value.userPassword))
-const editHasNumber = computed(() => /\d/.test(editForm.value.userPassword))
 
 const editFormRef = ref();
 
-// 修改后的分页处理函数
-const handleTableChange = (pag: any, _: any, sorter: any) => {
-
-  let sortField = "id";
-  let sortOrder = "ascend";
-
-  if (sorter.field) {
-    sortField = sorter.field;
-    sortOrder = sorter.order;
-  }
-
-  searchParams.value = {
-    ...searchParams.value,
-    current: pag.current,
-    pageSize: pag.pageSize,
-    sortField: sortField,
-    sortOrder: sortOrder
-  };
-
-  pagination.value.current = pag.current;
-  pagination.value.pageSize = pag.pageSize;
-
-  getUserList();
-};
-
 
 
 const getUserList = async () => {
@@ -824,6 +372,7 @@ const handlePhoneSearch = async () => {
         {
           current: 1,
           pageSize: 10,
+          userRole:'user',
           phoneNumber: searchPhone.value
         },
         { headers: { Authorization: storedToken } }
@@ -862,7 +411,7 @@ const reset = () => {
     pageSize: 10,
     sortField: "id",
     sortOrder: "ascend",
-    userRole: null,
+    userRole: "user",
     phoneNumber: null
   };
   getUserList();
@@ -870,118 +419,11 @@ const reset = () => {
 
 
 
-// 删除用户
-const selectedRowKeys = ref<number[]>([]);
-
-// 配置行选择器
-const rowSelection = {
-  onChange: (selectedKeys: number[]) => {
-    selectedRowKeys.value = selectedKeys;
-  },
-  selectedRowKeys: selectedRowKeys,
-
-  getCheckboxProps: (record: User) => ({
-    disabled: record.userRole !== 'admin',
-    name: record.id.toString(),
-  }),
-};
-
-const confirmDeleteUser = (id: number) => {
-  Modal.confirm({
-    title: '确认删除用户',
-    content: '您确定要删除这个用户吗？此操作不可恢复！',
-    okText: '确认删除',
-    okType: 'danger',
-    cancelText: '取消',
-    onOk() {
-      return deleteUser(id);
-    },
-    onCancel() {
-      console.log('用户取消删除');
-    },
-  });
-};
-
-
-const batchDelete = async () => {
-  if (selectedRowKeys.value.length === 0) {
-    message.warning('请先选择要删除的用户');
-    return;
-  }
-
-  Modal.confirm({
-    title: '确认批量删除',
-    content: `您确定要删除选中的 ${selectedRowKeys.value.length} 个用户吗？此操作不可恢复！`,
-    okText: '确认删除',
-    okType: 'danger',
-    cancelText: '取消',
-    async onOk() {
-      try {
-        const storedToken = localStorage.getItem('token');
-        if (!storedToken) throw new Error('未找到登录信息');
-
-        const res:any = await myAxios.post(
-            '/userInfo/delBatch',
-            { ids: selectedRowKeys.value },
-            {
-              headers: {
-                Authorization: storedToken,
-                'AfterScript': 'required-script'
-              }
-            }
-        );
-
-        if (res.code === 1) {
-          message.success(`成功删除${selectedRowKeys.value.length}条数据`);
-          selectedRowKeys.value = [];
-          await getUserList();
-        } else {
-          message.error(res.message || '删除失败');
-        }
-      } catch (error) {
-        console.error('批量删除失败:', error);
-        message.error('删除操作失败，请检查网络');
-      }
-    },
-    onCancel() {
-      console.log('用户取消批量删除');
-    },
-  });
-};
-
-
-const deleteUser = async (id: number) => {
-  try {
-    const storedToken = localStorage.getItem('token');
-    const res:any = await myAxios.post(
-        "/userInfo/delete",
-        { id },
-        {
-          headers: {
-            Authorization: storedToken,
-            'AfterScript': 'required-script'
-          }
-        }
-    );
-
-    if (res.code === 1) {
-      message.success('删除成功');
-      await getUserList();
-    } else {
-      message.error(res.message || '删除失败');
-    }
-  } catch (error) {
-    console.error('删除失败:', error);
-    message.error('删除操作失败');
-  }
-};
-
-
 
 // 操作用户
 const open = ref<boolean>(false);
 
-const selectedUser = ref<any>(null);
+const selectedUser = ref<any>();
 
 const isEditMode = ref(false);
 const editForm = ref({
@@ -998,38 +440,7 @@ const editForm = ref({
 });
 
 
-const editUploadLoading = ref(false);
-const editPreviewImage = ref('');
 
-
-const handleEditUpload = async ({ file }: { file: File }) => {
-  const form = new FormData();
-  form.append('file', file);
-
-  try {
-    editUploadLoading.value = true;
-    const storedToken = localStorage.getItem('token');
-
-    const res: any = await myAxios.post('/file/upload?biz=avatar', form, {
-      headers: {
-        Authorization: storedToken,
-      }
-    });
-
-    if (res.code === 1) {
-      editForm.value.userAvatar = res.data;
-      editPreviewImage.value = URL.createObjectURL(file);
-      message.success('头像更新成功');
-    } else {
-      message.error(res.message || '头像上传失败');
-    }
-  } catch (error: any) {
-    console.error('编辑头像上传失败:', error);
-    message.error(`上传失败：${error.response?.data?.error || error.message}`);
-  } finally {
-    editUploadLoading.value = false;
-  }
-};
 const showDrawer = (record: any) => {
   selectedUser.value = record;
   editForm.value = {
@@ -1050,167 +461,30 @@ const showDrawer = (record: any) => {
   isEditMode.value = false;
 };
 
-const toggleEditMode = () => {
-  isEditMode.value = !isEditMode.value;
-};
+const handleTableChange = (pag: any, _: any, sorter: any) => {
 
-const handleSave = async () => {
-  try {
+  let sortField = "id";
+  let sortOrder = "ascend";
 
-    if (editForm.value.userPassword) {
-      const password = editForm.value.userPassword;
-
-
-      const hasNumber = /\d/.test(password);
-      const hasUpperCase = /[A-Z]/.test(password);
-      const hasLowerCase = /[a-z]/.test(password);
-
-      if (!(hasNumber && hasUpperCase && hasLowerCase)) {
-        message.error('密码必须包含数字、大写字母和小写字母');
-        return;
-      }
-    }
-
-    const storedToken = localStorage.getItem('token');
-    if (!storedToken) throw new Error('未找到登录信息');
-
-
-    const processValue = (value: any) => {
-      if (value === "" || value === "无") return null;
-      return value;
-    };
-
-
-    const processNumber = (value: any) => {
-      const num = Number(value);
-      return isNaN(num) ? null : num;
-    };
-
-
-    const payload = {
-      id: editForm.value.id,
-      nickName: processValue(editForm.value.nickName),
-      userAvatar: processValue(editForm.value.userAvatar),
-      phoneNumber: processValue(editForm.value.phoneNumber),
-      userAccount: editForm.value.userAccount,  // 保持禁用状态的值
-      userPassword: editForm.value.userPassword || undefined,  // 密码为空时不修改
-      invitationCode: processValue(editForm.value.invitationCode),
-      userRole: editForm.value.userRole || 'user',
-      parentUserId: processNumber(editForm.value.parentUserId),
-      SuperUserList: editForm.value.SuperUserList
-          ? editForm.value.SuperUserList.split(',')
-              .map(item => processNumber(item.trim()))
-              .filter(num => num !== null)
-          : []
-    };
-
-
-    const cleanPayload = Object.fromEntries(
-        Object.entries(payload).filter(([_, v]) => v !== undefined)
-    );
-
-    console.log("最终请求体:", JSON.stringify(cleanPayload, null, 2));
-
-    const res:any = await myAxios.post('/userInfo/update', cleanPayload, {
-      headers: {
-        Authorization: storedToken,
-        'Content-Type': 'application/json'
-      }
-    });
-    console.log(res)
-    if (res.code === 1) {
-      message.success('更新成功');
-      await getUserList();
-      const updatedUser = tableData.value.find(item => item.id === editForm.value.id);
-      if (updatedUser) {
-        selectedUser.value = { ...updatedUser };
-      }
-      isEditMode.value = false;
-    } else {
-      message.error(res.message || '更新失败');
-    }
-  } catch (error:any) {
-    console.error('更新失败:', error);
-    message.error(error.response?.data?.message || '更新失败，请检查网络');
+  if (sorter.field) {
+    sortField = sorter.field;
+    sortOrder = sorter.order;
   }
-};
 
-
-
-const openUser = ref<boolean>(false);
-const formRef = ref();
-
-
-
-const showModal = () => {
-  openUser.value = true;
-  formData.value = {
-    nickName: '',
-    userAvatar: '',
-    phoneNumber: '',
-    userAccount: '',
-    userPassword: ''
+  searchParams.value = {
+    ...searchParams.value,
+    current: pag.current,
+    pageSize: pag.pageSize,
+    sortField: sortField,
+    sortOrder: sortOrder
   };
 
-  previewImage.value = '';
+  pagination.value.current = pag.current;
+  pagination.value.pageSize = pag.pageSize;
+
+  getUserList();
 };
 
-const handleOk = (e: MouseEvent) => {
-  console.log('点击确认:', e);
-  openUser.value = false;
-};
-
-const extractErrorMessage = (errorMessage: string): string => {
-
-  const pipeIndex = errorMessage.indexOf('|');
-
-  if (pipeIndex !== -1) {
-    return errorMessage.substring(pipeIndex + 1).trim();
-  }
-  return errorMessage;
-};
-
-const handleSubmit = async () => {
-  try {
-    const password = formData.value.userPassword;
-    if (!/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password)) {
-      message.error('请输入包含数字、字母小写、字母大写的组合');
-      return;
-    }
-
-    // 原有手机号校验
-    if (!/^1[3-9]\d{9}$/.test(formData.value.phoneNumber)) {
-      message.error('请输入有效的11位手机号');
-      return;
-    }
-
-    const storedToken = localStorage.getItem('token');
-    if (!storedToken) throw new Error('未找到登录信息');
-
-    const res: any = await myAxios.post('/userInfo/add', formData.value, {
-      headers: {
-        Authorization: storedToken,
-        'Content-Type': 'application/json'
-      }
-    });
-
-    if (res.code === 1) {
-      message.success('新增成功');
-      openUser.value = false;
-      formRef.value?.resetFields();
-      getUserList();
-    } else {
-
-      const errorMsg = extractErrorMessage(res.message);
-      message.error(`${errorMsg}`);
-    }
-  } catch (error: any) {
-
-    let errorMsg = error.response?.message || error.message;
-    errorMsg = extractErrorMessage(errorMsg);
-    message.error(`${errorMsg}`);
-  }
-};
 
 
 </script>
@@ -1342,22 +616,8 @@ const handleSubmit = async () => {
 .search-box {
   margin-bottom: 10px;
 }
-.error-tip {
-  color: #ff4d4f;
-  font-size: 12px;
-  margin-left: 8px;
-}
 
-.tip {
-  color: rgba(0, 0, 0, 0.45);
-  font-size: 12px;
-}
 
-.password-strength {
-  margin-top: 4px;
-  display: flex;
-  gap: 8px;
-}
 
 .password-strength span {
   color: #999;
@@ -1377,59 +637,16 @@ const handleSubmit = async () => {
   top: 2px;
 }
 
-.strength-ok {
-  color: #52c41a;
-}
-
-.strength-ok::before {
-  background: #52c41a !important;
-}
 
 .avatar-uploader :deep(.ant-upload) {
   width: 100%;
   height: 100%;
   overflow: hidden;
 }
-.ant-upload-text {
-  margin-top: 8px;
-}
 
-.input-tip {
-  font-size: 0.875rem;
-  color: #666;
-}
 
-.error-tip {
-  color: #f5222d;
-  margin-left: 4px;
-}
 
-.password-strength {
-  margin-top: 4px;
-  font-size: 0.875rem;
-}
 
-.strength-ok {
-  color: #52c41a;
-}
-
-.avatar-uploader {
-  width: 100%;
-  max-width: 200px;
-  margin: 0 auto;
-}
-
-.avatar-uploader .ant-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-
-.avatar-uploader .ant-upload:hover {
-  border-color: #40a9ff;
-}
 
 .avatar-uploader img {
   width: 100%;