feat(contact-import): 新增通讯录导入表单页面并优化列表页样式

refactor(contact-import): 重构API接口类型定义和数据结构

style(contact-import): 调整列表页和表单页的样式布局

fix(contact-import): 修复列表页数据加载和搜索功能的问题

Cunkebao/src/pages/mobile/workspace/contact-import/form/api.ts

@@ -0,0 +1,95 @@
+import request from "@/api/request";
+import {
+  ContactImportTask,
+  CreateContactImportTaskData,
+  UpdateContactImportTaskData,
+  ContactImportRecord,
+  PaginatedResponse,
+  ImportStats,
+} from "./data";
+
+// 获取通讯录导入任务列表
+export function fetchContactImportTasks(
+  params = { type: 6, page: 1, limit: 10 },
+) {
+  return request("/v1/workbench/list", params, "GET");
+}
+
+// 获取单个任务详情
+export function fetchContactImportTaskDetail(id: number) {
+  return request("/v1/workbench/detail", { id }, "GET");
+}
+
+// 创建通讯录导入任务
+export function createContactImportTask(
+  data: CreateContactImportTaskData,
+): Promise<any> {
+  return request("/v1/workbench/create", { ...data, type: 6 }, "POST");
+}
+
+// 更新通讯录导入任务
+export function updateContactImportTask(
+  data: UpdateContactImportTaskData,
+): Promise<any> {
+  return request("/v1/workbench/update", { ...data, type: 6 }, "POST");
+}
+
+// 删除通讯录导入任务
+export function deleteContactImportTask(id: number): Promise<any> {
+  return request("/v1/workbench/delete", { id }, "DELETE");
+}
+
+// 切换任务状态
+export function toggleContactImportTask(data: {
+  id: number;
+  status: number;
+}): Promise<any> {
+  return request("/v1/workbench/update-status", { ...data }, "POST");
+}
+
+// 复制通讯录导入任务
+export function copyContactImportTask(id: number): Promise<any> {
+  return request("/v1/workbench/copy", { id }, "POST");
+}
+
+// 获取导入记录
+export function fetchImportRecords(
+  workbenchId: number,
+  page: number = 1,
+  limit: number = 20,
+  keyword?: string,
+): Promise<PaginatedResponse<ContactImportRecord>> {
+  return request(
+    "/v1/workbench/import-records",
+    {
+      workbenchId,
+      page,
+      limit,
+      keyword,
+    },
+    "GET",
+  );
+}
+
+// 获取统计数据
+export function fetchImportStats(): Promise<ImportStats> {
+  return request("/v1/workbench/import-stats", {}, "GET");
+}
+
+// 获取设备组列表
+export function fetchDeviceGroups(): Promise<any[]> {
+  return request("/v1/device/groups", {}, "GET");
+}
+
+// 手动触发导入
+export function triggerImport(taskId: number): Promise<any> {
+  return request("/v1/workbench/trigger-import", { taskId }, "POST");
+}
+
+// 批量操作任务
+export function batchOperateTasks(data: {
+  taskIds: number[];
+  operation: "start" | "stop" | "delete";
+}): Promise<any> {
+  return request("/v1/workbench/batch-operate", data, "POST");
+}

Cunkebao/src/pages/mobile/workspace/contact-import/form/data.ts

@@ -0,0 +1,38 @@
+// 分配接口类型
+export interface Allocation {
+  /** 主键ID */
+  id?: number;
+  /** 任务名称 */
+  name: string;
+  //是否启用0关闭，1启用
+  status: number;
+  //任务类型，固定为6
+  type: number;
+  /** 工作台ID */
+  workbenchId: number;
+
+  /** 设备id */
+  deviceGroups: number[];
+
+  /** 流量池 */
+  pools?: JSON | null;
+
+  /** 分配数量 */
+  num?: number | null;
+
+  /** 是否清除现有联系人，默认0 */
+  clearContact?: number;
+
+  /** 备注类型 0不备注 1年月日 2月日 3自定义，默认0 */
+  remarkType: number;
+
+  /** 备注 */
+  remark?: string | null;
+
+  /** 开始时间 */
+  startTime?: string | null;
+
+  /** 结束时间 */
+  endTime?: string | null;
+  [key: string]: any;
+}

Cunkebao/src/pages/mobile/workspace/contact-import/form/index.module.scss

@@ -1,229 +1,146 @@
-.container {
+.basicSection {
-  padding: 12px;
+  background: none;
-  background-color: #f5f5f5;
+  border-radius: 0;
-  min-height: 100vh;
+  box-shadow: none;
+  padding: 24px 16px 0 16px;
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
 }
 
-.form {
+.formItem {
-  display: flex;
+  margin-bottom: 24px;
-  flex-direction: column;
-  gap: 16px;
 }
 
-.section {
+.formLabel {
-  background: #fff;
+  font-size: 15px;
+  color: #222;
+  font-weight: 500;
+  margin-bottom: 10px;
+  display: block;
+}
+
+.input {
+  height: 44px;
   border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  font-size: 15px;
-  
+  width: 100%;
-  :global(.adm-card-body) {
+}
-    padding: 16px;
+
+.select {
+  width: 100%;
+  height: 44px;
+
+  :global(.ant-select-selector) {
+    height: 44px !important;
+    border-radius: 8px !important;
+    font-size: 15px !important;
+  }
+
+  :global(.ant-select-selection-item) {
+    line-height: 42px !important;
   }
 }
 
-.sectionTitle {
+.timePicker {
-  font-size: 16px;
+  width: 100%;
-  font-weight: 600;
+  height: 44px;
-  color: #333;
-  margin-bottom: 16px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #f0f0f0;
-}
 
-.actions {
+  :global(.ant-picker) {
-  margin-top: 24px;
+    width: 100%;
-  padding: 16px;
+    height: 44px;
-  background: #fff;
+    border-radius: 8px;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-}
-
-// Form样式覆盖
-:global {
-  .adm-form-item {
-    margin-bottom: 20px;
-    
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-  
-  .adm-form-item-label {
-    font-size: 14px;
-    font-weight: 500;
-    color: #333;
-    margin-bottom: 8px;
-  }
-  
-  .adm-input {
-    border: 1px solid #d9d9d9;
-    border-radius: 6px;
-    padding: 10px 12px;
-    font-size: 14px;
-    
-    &:focus {
-      border-color: #1890ff;
-      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-    }
-    
-    &::placeholder {
-      color: #bfbfbf;
-    }
-  }
-  
-  .adm-selector {
-    .adm-selector-item {
-      border: 1px solid #d9d9d9;
-      border-radius: 6px;
-      margin: 4px;
-      padding: 8px 12px;
-      font-size: 14px;
-      
-      &.adm-selector-item-active {
-        border-color: #1890ff;
-        background-color: #e6f7ff;
-        color: #1890ff;
-      }
-    }
-  }
-  
-  .adm-stepper {
-    .adm-stepper-button {
-      border: 1px solid #d9d9d9;
-      border-radius: 4px;
-      width: 32px;
-      height: 32px;
-      
-      &:hover {
-        border-color: #1890ff;
-        color: #1890ff;
-      }
-    }
-    
-    .adm-stepper-input {
-      border: 1px solid #d9d9d9;
-      border-radius: 4px;
-      height: 32px;
-      margin: 0 4px;
-      text-align: center;
-      font-size: 14px;
-    }
-  }
-  
-  .adm-picker {
-    .adm-picker-view-column {
-      font-size: 14px;
-    }
-  }
-  
-  .adm-button {
-    border-radius: 6px;
-    font-size: 16px;
-    font-weight: 500;
-    
-    &.adm-button-primary {
-      background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
-      border: none;
-      
-      &:hover {
-        background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
-      }
-    }
-  }
-}
-
-// 表单验证错误样式
-:global(.adm-form-item-feedback-error) {
-  color: #ff4d4f;
-  font-size: 12px;
-  margin-top: 4px;
-}
-
-:global(.adm-form-item-has-error) {
-  .adm-input {
-    border-color: #ff4d4f;
-    
-    &:focus {
-      border-color: #ff4d4f;
-      box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2);
-    }
-  }
-  
-  .adm-selector-item {
-    border-color: #ff4d4f;
-  }
-  
-  .adm-stepper-button,
-  .adm-stepper-input {
-    border-color: #ff4d4f;
-  }
-}
-
-// 响应式设计
-@media (max-width: 480px) {
-  .container {
-    padding: 8px;
-  }
-  
-  .sectionTitle {
     font-size: 15px;
   }
-  
-  .actions {
-    margin-top: 16px;
-    padding: 12px;
-  }
-  
-  :global {
-    .adm-form-item-label {
-      font-size: 13px;
-    }
-    
-    .adm-input {
-      padding: 8px 10px;
-      font-size: 13px;
-    }
-    
-    .adm-selector-item {
-      padding: 6px 10px;
-      font-size: 13px;
-    }
-    
-    .adm-button {
-      font-size: 15px;
-    }
-  }
 }
 
-// 加载状态
+.counterRow {
-.loading {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.stepperContainer {
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+
+.stepperButton {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  font-size: 16px;
+  color: #188eee;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 40px;
+  cursor: pointer;
-  color: #666;
+  transition: border 0.2s;
-  font-size: 14px;
+
-  gap: 8px;
+  &:hover {
+    border: 1px solid #188eee;
+  }
 }
 
-// 提示信息
+.stepperInput {
-.tip {
+  width: 80px;
-  background: #f6ffed;
+  height: 40px;
-  border: 1px solid #b7eb8f;
+  border-radius: 0;
-  border-radius: 6px;
+  border: 1px solid #e5e7eb;
-  padding: 12px;
+  border-left: none;
-  margin-bottom: 16px;
+  border-right: none;
-  font-size: 13px;
+  text-align: center;
-  color: #52c41a;
+  font-size: 16px;
-  line-height: 1.5;
+  font-weight: 600;
+  color: #222;
+  padding: 0 8px;
 }
 
-.warning {
+.counterTip {
-  background: #fff7e6;
+  font-size: 12px;
-  border: 1px solid #ffd591;
+  color: #aaa;
-  border-radius: 6px;
+  margin-top: 4px;
-  padding: 12px;
+}
-  margin-bottom: 16px;
+
-  font-size: 13px;
+.buttonGroup {
-  color: #fa8c16;
+  display: flex;
-  line-height: 1.5;
+  gap: 12px;
-}
+  padding: 14px;
+  background: #fff;
+}
+
+.submitButton {
+  height: 44px;
+  border-radius: 8px;
+  font-size: 15px;
+  min-width: 120px;
+  flex: 1;
+}
+
+.resetButton {
+  height: 44px;
+  border-radius: 8px;
+  font-size: 15px;
+  min-width: 100px;
+}
+
+.deviceSelection {
+  width: 100%;
+
+  :global {
+    .ant-input {
+      border-radius: 8px;
+      border: 1px solid #e8e8e8;
+      padding: 12px 16px;
+      font-size: 14px;
+
+      &:focus {
+        border-color: #1890ff;
+        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+      }
+    }
+  }
+}

Cunkebao/src/pages/mobile/workspace/contact-import/form/index.tsx

@@ -1,140 +1,155 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import {
+import { PlusOutlined, MinusOutlined } from "@ant-design/icons";
-  Button,
+import { Button, Input, message, TimePicker, Select, Switch } from "antd";
-  Toast,
-  Form,
-  Input,
-  Selector,
-  Stepper,
-  DatePicker,
-  Card,
-  Space,
-} from "antd-mobile";
 import NavCommon from "@/components/NavCommon";
 import Layout from "@/components/Layout/Layout";
+import DeviceSelection from "@/components/DeviceSelection";
 import {
   createContactImportTask,
   updateContactImportTask,
   fetchContactImportTaskDetail,
-  fetchDeviceGroups,
+} from "./api";
-} from "../list/api";
+import { Allocation } from "./data";
-import {
+
-  CreateContactImportTaskData,
-  UpdateContactImportTaskData,
-  ContactImportTask,
-  DeviceGroup,
-} from "../list/data";
 import style from "./index.module.scss";
+import dayjs from "dayjs";
 
 const ContactImportForm: React.FC = () => {
   const navigate = useNavigate();
   const { id } = useParams<{ id?: string }>();
   const isEdit = !!id;
-  
+
-  const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
-  const [deviceGroups, setDeviceGroups] = useState<DeviceGroup[]>([]);
+  const [formData, setFormData] = useState({
-  const [taskData, setTaskData] = useState<ContactImportTask | null>(null);
+    name: "", // 任务名称
-  const [showStartTimePicker, setShowStartTimePicker] = useState(false);
+    status: 1, // 是否启用，默认启用
-  const [showEndTimePicker, setShowEndTimePicker] = useState(false);
+    type: 6, // 任务类型，固定为6
-  const [startTime, setStartTime] = useState<Date | null>(null);
+    workbenchId: 1, // 默认工作台ID
-  const [endTime, setEndTime] = useState<Date | null>(null);
+    deviceGroups: [] as number[],
+    pools: [] as any[],
+    num: 50,
+    clearContact: 0,
+    remarkType: 0,
+    remark: "",
+    startTime: null,
+    endTime: null,
+    // 保留原有字段用于UI显示
+    deviceGroupsOptions: [] as any[],
+  });
 
-  // 备注类型选项
+  // 处理设备选择
-  const remarkTypeOptions = [
+  const handleDeviceSelect = (selectedDevices: any[]) => {
-    { label: "公司名称", value: "公司名称" },
+    setFormData(prev => ({
-    { label: "职位", value: "职位" },
+      ...prev,
-    { label: "部门", value: "部门" },
+      deviceGroupsOptions: selectedDevices,
-    { label: "地区", value: "地区" },
+      deviceGroups: selectedDevices.map(device => device.id), // 提取设备ID存储到deviceGroups数组
-    { label: "行业", value: "行业" },
+    }));
-    { label: "来源", value: "来源" },
-    { label: "标签", value: "标签" },
-    { label: "自定义", value: "自定义" },
-  ];
-
-  // 获取设备组列表
-  const loadDeviceGroups = async () => {
-    try {
-      const data = await fetchDeviceGroups();
-      setDeviceGroups(data);
-    } catch (error) {
-      Toast.show({
-        content: "获取设备组失败",
-        icon: "fail",
-      });
-    }
   };
 
   // 获取任务详情（编辑模式）
   const loadTaskDetail = async () => {
     if (!id) return;
-    
+
     try {
-      const data = await fetchContactImportTaskDetail(id);
+      setLoading(true);
+      const data = await fetchContactImportTaskDetail(Number(id));
       if (data) {
-        setTaskData(data);
+        // 构造设备选择组件需要的数据格式
-        form.setFieldsValue({
+        // 如果后端返回的是设备ID数组，需要构造完整的设备对象用于显示
-          name: data.name,
+        const deviceGroupsOptions =
-          deviceGroups: data.deviceGroups,
+          data.deviceGroups?.map((deviceId: number) => ({
-          num: data.num,
+            id: deviceId,
-          clientId: data.clientId,
+            memo: `设备 ${deviceId}`,
-          remarkType: data.remarkType,
+            imei: ``,
-          remarkValue: data.remarkValue,
+            wechatId: ``,
-          startTime: data.startTime,
+            status: "online" as const,
-          endTime: data.endTime,
+          })) || [];
-          maxImportsPerDay: data.maxImportsPerDay,
+
-          importInterval: data.importInterval,
+        setFormData({
+          name: data.name || "",
+          status: data.status || 1,
+          type: data.type || 6,
+          workbenchId: data.workbenchId || 1,
+          deviceGroups: data.deviceGroups || [],
+          pools: data.pools ? JSON.parse(JSON.stringify(data.pools)) : [],
+          num: data.num || 50,
+          clearContact: data.clearContact || 0,
+          remarkType: data.remarkType || 0,
+          remark: data.remark || "",
+          startTime: data.startTime ? dayjs(data.startTime, "HH:mm:ss") : null,
+          endTime: data.endTime ? dayjs(data.endTime, "HH:mm:ss") : null,
+          deviceGroupsOptions,
         });
       }
     } catch (error) {
-      Toast.show({
+      console.error("Failed to load task detail:", error);
-        content: "获取任务详情失败",
+      message.error("获取任务详情失败");
-        icon: "fail",
-      });
       navigate("/workspace/contact-import/list");
+    } finally {
+      setLoading(false);
     }
   };
 
+  // 更新表单数据
+  const handleUpdateFormData = (data: Partial<typeof formData>) => {
+    setFormData(prev => ({ ...prev, ...data }));
+  };
+
   // 提交表单
   const handleSubmit = async () => {
-    try {
+    // 表单验证
-      const values = await form.validateFields();
+    if (!formData.name.trim()) {
-      setLoading(true);
+      message.error("请输入任务名称");
+      return;
+    }
 
-      const taskData: CreateContactImportTaskData | UpdateContactImportTaskData = {
+    if (formData.deviceGroups.length === 0) {
-        name: values.name,
+      message.error("请选择设备");
-        deviceGroups: values.deviceGroups,
+      return;
-        num: values.num,
+    }
-        clientId: values.clientId,
+
-        remarkType: values.remarkType,
+    if (!formData.num || formData.num <= 0) {
-        remarkValue: values.remarkValue,
+      message.error("请输入有效的分配数量");
-        startTime: values.startTime,
+      return;
-        endTime: values.endTime,
+    }
-        maxImportsPerDay: values.maxImportsPerDay,
+
-        importInterval: values.importInterval,
+    // 验证开始时间不得大于结束时间
+    if (formData.startTime && formData.endTime) {
+      if (formData.startTime.isAfter(formData.endTime)) {
+        message.error("开始时间不得大于结束时间");
+        return;
+      }
+    }
+
+    setLoading(true);
+    try {
+      const submitData: Partial<Allocation> = {
+        name: formData.name,
+        status: formData.status,
+        type: formData.type,
+        workbenchId: formData.workbenchId,
+        deviceGroups: formData.deviceGroups,
+        pools: JSON.parse(JSON.stringify(formData.pools)),
+        num: formData.num,
+        clearContact: formData.clearContact,
+        remarkType: formData.remarkType,
+        remark: formData.remark || null,
+        startTime: formData.startTime?.format("HH:mm:ss") || null,
+        endTime: formData.endTime?.format("HH:mm:ss") || null,
       };
 
       if (isEdit && id) {
-        await updateContactImportTask({ ...taskData, id });
+        await updateContactImportTask({ ...submitData, id: Number(id) });
-        Toast.show({
+        message.success("更新成功");
-          content: "更新成功",
-          icon: "success",
-        });
       } else {
-        await createContactImportTask(taskData);
+        await createContactImportTask(submitData);
-        Toast.show({
+        message.success("创建成功");
-          content: "创建成功",
-          icon: "success",
-        });
       }
 
       navigate("/workspace/contact-import/list");
     } catch (error) {
-      Toast.show({
+      message.error(isEdit ? "更新失败" : "创建失败");
-        content: isEdit ? "更新失败" : "创建失败",
-        icon: "fail",
-      });
     } finally {
       setLoading(false);
     }
@@ -142,11 +157,24 @@ const ContactImportForm: React.FC = () => {
 
   // 重置表单
   const handleReset = () => {
-    form.resetFields();
+    setFormData({
+      name: "",
+      status: 1,
+      type: 6,
+      workbenchId: 1,
+      deviceGroups: [],
+      pools: [],
+      num: 50,
+      clearContact: 0,
+      remarkType: 0,
+      remark: "",
+      startTime: null,
+      endTime: null,
+      deviceGroupsOptions: [],
+    });
   };
 
   useEffect(() => {
-    loadDeviceGroups();
     if (isEdit) {
       loadTaskDetail();
     }
@@ -154,200 +182,175 @@ const ContactImportForm: React.FC = () => {
 
   return (
     <Layout
-      header={
+      header={<NavCommon title={isEdit ? "编辑导入任务" : "新建导入任务"} />}
-        <NavCommon
+      footer={
-          left={
+        <div className={style.buttonGroup}>
-            <Button
+          <Button
-              fill="none"
+            type="primary"
-              size="small"
+            size="large"
-              onClick={() => navigate("/workspace/contact-import/list")}
+            loading={loading}
-            >
+            onClick={handleSubmit}
-              返回
+            className={style.submitButton}
-            </Button>
+          >
-          }
+            {isEdit ? "更新" : "创建"}
-          title={isEdit ? "编辑通讯录导入" : "新建通讯录导入"}
+          </Button>
-        />
+          <Button
+            size="large"
+            onClick={handleReset}
+            className={style.resetButton}
+          >
+            重置
+          </Button>
+        </div>
       }
     >
-      <div className={style.container}>
+      <div className={style.formBg}>
-        <Form
+        <div className={style.basicSection}>
-          form={form}
+          <div className={style.formItem}>
-          layout="vertical"
+            <div className={style.formLabel}>任务名称</div>
-          className={style.form}
+            <Input
-          initialValues={{
+              placeholder="请输入任务名称"
-            num: 50,
+              value={formData.name}
-            maxImportsPerDay: 100,
+              onChange={e => handleUpdateFormData({ name: e.target.value })}
-            importInterval: 30,
+              className={style.input}
-            startTime: "09:00",
-            endTime: "18:00",
-          }}
-        >
-          {/* 基本信息 */}
-          <Card className={style.section}>
-            <div className={style.sectionTitle}>基本信息</div>
-            
-            <Form.Item
-              name="name"
-              label="任务名称"
-              rules={[{ required: true, message: "请输入任务名称" }]}
-            >
-              <Input placeholder="请输入任务名称" />
-            </Form.Item>
-
-            <Form.Item
-              name="deviceGroups"
-              label="设备组"
-              rules={[{ required: true, message: "请选择设备组" }]}
-            >
-              <Selector
-                multiple
-                options={deviceGroups.map(group => ({
-                  label: `${group.name} (${group.deviceCount}台设备)`,
-                  value: group.id,
-                }))}
-                placeholder="请选择设备组"
-              />
-            </Form.Item>
-          </Card>
-
-          {/* 导入配置 */}
-          <Card className={style.section}>
-            <div className={style.sectionTitle}>导入配置</div>
-            
-            <Form.Item
-              name="num"
-              label="导入数量"
-              rules={[{ required: true, message: "请设置导入数量" }]}
-            >
-              <Stepper min={1} max={1000} />
-            </Form.Item>
-
-            <Form.Item
-              name="clientId"
-              label="客户端ID"
-              rules={[{ required: true, message: "请输入客户端ID" }]}
-            >
-              <Input placeholder="请输入客户端ID" />
-            </Form.Item>
-
-            <Form.Item
-              name="remarkType"
-              label="备注类型"
-              rules={[{ required: true, message: "请选择备注类型" }]}
-            >
-              <Selector
-                options={remarkTypeOptions}
-                placeholder="请选择备注类型"
-              />
-            </Form.Item>
-
-            <Form.Item
-              name="remarkValue"
-              label="备注内容"
-              rules={[{ required: true, message: "请输入备注内容" }]}
-            >
-              <Input placeholder="请输入备注内容" />
-            </Form.Item>
-          </Card>
-
-          {/* 时间配置 */}
-          <Card className={style.section}>
-            <div className={style.sectionTitle}>时间配置</div>
-            
-            <Form.Item
-              name="startTime"
-              label="开始时间"
-              rules={[{ required: true, message: "请选择开始时间" }]}
-            >
-              <Input
-                readOnly
-                value={startTime ? `${startTime.getHours().toString().padStart(2, '0')}:${startTime.getMinutes().toString().padStart(2, '0')}` : ""}
-                placeholder="请选择开始时间"
-                onClick={() => setShowStartTimePicker(true)}
-              />
-            </Form.Item>
-
-            <Form.Item
-              name="endTime"
-              label="结束时间"
-              rules={[{ required: true, message: "请选择结束时间" }]}
-            >
-              <Input
-                readOnly
-                value={endTime ? `${endTime.getHours().toString().padStart(2, '0')}:${endTime.getMinutes().toString().padStart(2, '0')}` : ""}
-                placeholder="请选择结束时间"
-                onClick={() => setShowEndTimePicker(true)}
-              />
-            </Form.Item>
-
-            <DatePicker
-              visible={showStartTimePicker}
-              title="选择开始时间"
-              precision="minute"
-              value={startTime}
-              onClose={() => setShowStartTimePicker(false)}
-              onConfirm={(val) => {
-                setStartTime(val);
-                form.setFieldValue('startTime', `${val.getHours().toString().padStart(2, '0')}:${val.getMinutes().toString().padStart(2, '0')}`);
-                setShowStartTimePicker(false);
-              }}
             />
-
+            <div className={style.counterTip}>为此导入任务设置一个名称</div>
-            <DatePicker
-              visible={showEndTimePicker}
-              title="选择结束时间"
-              precision="minute"
-              value={endTime}
-              onClose={() => setShowEndTimePicker(false)}
-              onConfirm={(val) => {
-                setEndTime(val);
-                form.setFieldValue('endTime', `${val.getHours().toString().padStart(2, '0')}:${val.getMinutes().toString().padStart(2, '0')}`);
-                setShowEndTimePicker(false);
-              }}
-            />
-
-            <Form.Item
-              name="maxImportsPerDay"
-              label="每日最大导入数"
-              rules={[{ required: true, message: "请设置每日最大导入数" }]}
-            >
-              <Stepper min={1} max={10000} />
-            </Form.Item>
-
-            <Form.Item
-              name="importInterval"
-              label="导入间隔（分钟）"
-              rules={[{ required: true, message: "请设置导入间隔" }]}
-            >
-              <Stepper min={1} max={1440} />
-            </Form.Item>
-          </Card>
-
-          {/* 操作按钮 */}
-          <div className={style.actions}>
-            <Space direction="vertical" style={{ width: "100%" }}>
-              <Button
-                color="primary"
-                size="large"
-                block
-                loading={loading}
-                onClick={handleSubmit}
-              >
-                {isEdit ? "更新任务" : "创建任务"}
-              </Button>
-              <Button
-                size="large"
-                block
-                onClick={handleReset}
-              >
-                重置
-              </Button>
-            </Space>
           </div>
-        </Form>
+
+          <div className={style.formItem}>
+            <div className={style.formLabel}>设备选择</div>
+            <DeviceSelection
+              selectedOptions={formData.deviceGroupsOptions}
+              onSelect={handleDeviceSelect}
+              placeholder="请选择设备"
+              className={style.deviceSelection}
+            />
+            <div className={style.counterTip}>选择要分配联系人的设备</div>
+          </div>
+
+          <div className={style.formItem}>
+            <div className={style.formLabel}>分配数量</div>
+            <div className={style.stepperContainer}>
+              <Button
+                icon={<MinusOutlined />}
+                onClick={() =>
+                  handleUpdateFormData({ num: Math.max(1, formData.num - 1) })
+                }
+                disabled={formData.num <= 1}
+                className={style.stepperButton}
+              />
+              <Input
+                value={formData.num}
+                onChange={e => {
+                  const value = parseInt(e.target.value) || 1;
+                  handleUpdateFormData({
+                    num: Math.min(1000, Math.max(1, value)),
+                  });
+                }}
+                className={style.stepperInput}
+              />
+              <Button
+                icon={<PlusOutlined />}
+                onClick={() =>
+                  handleUpdateFormData({
+                    num: Math.min(1000, formData.num + 1),
+                  })
+                }
+                disabled={formData.num >= 1000}
+                className={style.stepperButton}
+              />
+            </div>
+            <div className={style.counterTip}>要分配给设备的联系人数量</div>
+          </div>
+
+          <div className={style.formItem}>
+            <div className={style.formLabel}>清除现有联系人</div>
+            <Switch
+              checked={formData.clearContact === 1}
+              onChange={checked =>
+                handleUpdateFormData({ clearContact: checked ? 1 : 0 })
+              }
+            />
+            <div className={style.counterTip}>是否清除设备上现有的联系人</div>
+          </div>
+
+          <div className={style.formItem}>
+            <div className={style.formLabel}>备注类型</div>
+            <Select
+              placeholder="请选择备注类型"
+              value={formData.remarkType}
+              onChange={value => handleUpdateFormData({ remarkType: value })}
+              className={style.select}
+            >
+              <Select.Option value={0}>不备注</Select.Option>
+              <Select.Option value={1}>年月日</Select.Option>
+              <Select.Option value={2}>月日</Select.Option>
+              <Select.Option value={3}>自定义</Select.Option>
+            </Select>
+            <div className={style.counterTip}>选择联系人备注的格式</div>
+          </div>
+
+          {formData.remarkType === 3 && (
+            <div className={style.formItem}>
+              <div className={style.formLabel}>自定义备注</div>
+              <Input
+                placeholder="请输入备注内容"
+                value={formData.remark}
+                onChange={e => handleUpdateFormData({ remark: e.target.value })}
+                className={style.input}
+              />
+              <div className={style.counterTip}>输入自定义的备注内容</div>
+            </div>
+          )}
+
+          <div className={style.formItem}>
+            <div className={style.formLabel}>开始时间</div>
+            <TimePicker
+              value={formData.startTime}
+              onChange={time =>
+                handleUpdateFormData({
+                  startTime: time,
+                })
+              }
+              format="HH:mm"
+              placeholder="请选择开始时间"
+              className={style.timePicker}
+            />
+            <div className={style.counterTip}>设置每天开始导入的时间</div>
+          </div>
+
+          <div className={style.formItem}>
+            <div className={style.formLabel}>结束时间</div>
+            <TimePicker
+              value={formData.endTime}
+              onChange={time =>
+                handleUpdateFormData({
+                  endTime: time,
+                })
+              }
+              format="HH:mm"
+              placeholder="请选择结束时间"
+              className={style.timePicker}
+            />
+            <div className={style.counterTip}>设置每天结束导入的时间</div>
+          </div>
+
+          <div
+            className={style.formItem}
+            style={{ display: "flex", justifyContent: "space-between" }}
+          >
+            <span>是否启用</span>
+            <Switch
+              checked={formData.status === 1}
+              onChange={check =>
+                handleUpdateFormData({ status: check ? 1 : 0 })
+              }
+            />
+          </div>
+        </div>
       </div>
     </Layout>
   );
 };
 
-export default ContactImportForm;
+export default ContactImportForm;

Cunkebao/src/pages/mobile/workspace/contact-import/list/api.ts

@@ -11,22 +11,28 @@ import {
 // 获取通讯录导入任务列表
 export function fetchContactImportTasks(
   params = { type: 6, page: 1, limit: 10 },
-): Promise<{ code: number; msg: string; data: { list: ContactImportTask[] } }> {
+) {
   return request("/v1/workbench/list", params, "GET");
 }
 
 // 获取单个任务详情
-export function fetchContactImportTaskDetail(id: number): Promise<ContactImportTask | null> {
+export function fetchContactImportTaskDetail(
+  id: number,
+): Promise<ContactImportTask | null> {
   return request("/v1/workbench/detail", { id }, "GET");
 }
 
 // 创建通讯录导入任务
-export function createContactImportTask(data: CreateContactImportTaskData): Promise<any> {
+export function createContactImportTask(
+  data: CreateContactImportTaskData,
+): Promise<any> {
   return request("/v1/workbench/create", { ...data, type: 6 }, "POST");
 }
 
 // 更新通讯录导入任务
-export function updateContactImportTask(data: UpdateContactImportTaskData): Promise<any> {
+export function updateContactImportTask(
+  data: UpdateContactImportTaskData,
+): Promise<any> {
   return request("/v1/workbench/update", { ...data, type: 6 }, "POST");
 }
 
@@ -36,7 +42,10 @@ export function deleteContactImportTask(id: number): Promise<any> {
 }
 
 // 切换任务状态
-export function toggleContactImportTask(data: { id: number; status: number }): Promise<any> {
+export function toggleContactImportTask(data: {
+  id: number;
+  status: number;
+}): Promise<any> {
   return request("/v1/workbench/update-status", { ...data }, "POST");
 }
 
@@ -52,12 +61,16 @@ export function fetchImportRecords(
   limit: number = 20,
   keyword?: string,
 ): Promise<PaginatedResponse<ContactImportRecord>> {
-  return request("/v1/workbench/import-records", {
+  return request(
-    workbenchId,
+    "/v1/workbench/import-records",
-    page,
+    {
-    limit,
+      workbenchId,
-    keyword,
+      page,
-  }, "GET");
+      limit,
+      keyword,
+    },
+    "GET",
+  );
 }
 
 // 获取统计数据
@@ -81,4 +94,4 @@ export function batchOperateTasks(data: {
   operation: "start" | "stop" | "delete";
 }): Promise<any> {
   return request("/v1/workbench/batch-operate", data, "POST");
-}
+}

Cunkebao/src/pages/mobile/workspace/contact-import/list/data.ts

@@ -88,7 +88,8 @@ export interface CreateContactImportTaskData {
 }
 
 // 更新通讯录导入任务数据
-export interface UpdateContactImportTaskData extends CreateContactImportTaskData {
+export interface UpdateContactImportTaskData
+  extends CreateContactImportTaskData {
   id: number;
 }
 
@@ -127,4 +128,4 @@ export interface ImportStats {
   todayImports: number;
   totalImports: number;
   successRate: number;
-}
+}

Cunkebao/src/pages/mobile/workspace/contact-import/list/index.module.scss

@@ -1,7 +1,5 @@
 .container {
-  padding: 12px;
+  padding: 0 14px;
-  background-color: #f5f5f5;
-  min-height: 100vh;
 }
 
 .toolbar {
@@ -17,15 +15,15 @@
 
 .searchBox {
   flex: 1;
-  
+
   :global(.ant-input-affix-wrapper) {
     border-radius: 6px;
     border: 1px solid #d9d9d9;
-    
+
     &:hover {
       border-color: #40a9ff;
     }
-    
+
     &:focus-within {
       border-color: #1890ff;
       box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
@@ -36,7 +34,7 @@
 .actions {
   display: flex;
   gap: 8px;
-  
+
   :global(.adm-button) {
     border-radius: 6px;
   }
@@ -87,12 +85,12 @@
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   transition: all 0.2s ease;
-  
+
   &:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
-  
+
   :global(.adm-card-body) {
     padding: 16px;
   }
@@ -133,7 +131,7 @@
 .menuButton {
   padding: 4px 8px;
   color: #666;
-  
+
   &:hover {
     color: #1890ff;
     background-color: #f0f8ff;
@@ -162,14 +160,14 @@
   color: #333;
   cursor: pointer;
   transition: background-color 0.2s;
-  
+
   &:hover {
     background-color: #f5f5f5;
   }
-  
+
   &:last-child {
     color: #ff4d4f;
-    
+
     &:hover {
       background-color: #fff2f0;
     }
@@ -185,7 +183,7 @@
   align-items: center;
   margin-bottom: 8px;
   font-size: 14px;
-  
+
   &:last-child {
     margin-bottom: 0;
   }
@@ -209,7 +207,7 @@
   gap: 8px;
   padding-top: 12px;
   border-top: 1px solid #f0f0f0;
-  
+
   :global(.adm-button) {
     flex: 1;
     border-radius: 6px;
@@ -219,29 +217,25 @@
 
 // 响应式设计
 @media (max-width: 480px) {
-  .container {
-    padding: 8px;
-  }
-  
   .toolbar {
     flex-direction: column;
     align-items: stretch;
     gap: 8px;
   }
-  
+
   .actions {
     justify-content: space-between;
   }
-  
+
   .taskName {
     font-size: 15px;
   }
-  
+
   .taskDetail {
     font-size: 13px;
   }
-  
+
   .label {
     min-width: 60px;
   }
-}
+}

Cunkebao/src/pages/mobile/workspace/contact-import/list/index.tsx

@@ -97,7 +97,7 @@ const ContactImport: React.FC = () => {
     setLoading(true);
     try {
       const response = await fetchContactImportTasks();
-      const data = response.list || [];
+      const data = response?.list || [];
       setTasks(data);
       setFilteredTasks(data);
     } catch (error) {
@@ -117,10 +117,12 @@ const ContactImport: React.FC = () => {
       setFilteredTasks(tasks);
     } else {
       const filtered = tasks.filter(
-        (task) =>
+        task =>
           task.name.toLowerCase().includes(keyword.toLowerCase()) ||
-          (task.config?.remark || '').toLowerCase().includes(keyword.toLowerCase()) ||
+          (task.config?.remark || "")
-          task.creatorName.toLowerCase().includes(keyword.toLowerCase())
+            .toLowerCase()
+            .includes(keyword.toLowerCase()) ||
+          task.creatorName.toLowerCase().includes(keyword.toLowerCase()),
       );
       setFilteredTasks(filtered);
     }
@@ -212,51 +214,45 @@ const ContactImport: React.FC = () => {
   return (
     <Layout
       header={
-        <NavCommon
+        <>
-          left={
+          <NavCommon
-            <Button
+            backFn={() => navigate("/workspace")}
-              fill="none"
+            title="通讯录导入"
-              size="small"
+            right={
-              onClick={() => navigate("/workspace")}
+              <Button
-            >
+                size="small"
-              返回
+                color="primary"
-            </Button>
+                onClick={() => navigate("/workspace/contact-import/form")}
-          }
+              >
-          title="通讯录导入"
+                <PlusOutlined /> 新建
-        />
+              </Button>
-      }
+            }
-    >
+          />
-      <div className={style.container}>
+          {/* 搜索栏 */}
-        {/* 搜索和操作栏 */}
+          <div className="search-bar">
-        <div className={style.toolbar}>
+            <div className="search-input-wrapper">
-          <div className={style.searchBox}>
+              <Input
-            <Input
+                placeholder="搜索计划名称"
-              placeholder="搜索任务名称或备注类型"
+                value={searchKeyword}
-              prefix={<SearchOutlined />}
+                onChange={e => setSearchKeyword(e.target.value)}
-              value={searchKeyword}
+                prefix={<SearchOutlined />}
-              onChange={(e) => handleSearch(e.target.value)}
+                allowClear
-              allowClear
+                size="large"
-            />
+              />
-          </div>
+            </div>
-          <div className={style.actions}>
             <Button
               size="small"
-              fill="none"
+              onClick={() => handleSearch(searchKeyword)}
-              onClick={loadTasks}
               loading={loading}
+              className="refresh-btn"
             >
               <ReloadOutlined />
             </Button>
-            <Button
-              color="primary"
-              size="small"
-              onClick={() => navigate("/workspace/contact-import/form")}
-            >
-              <PlusOutlined /> 新建
-            </Button>
           </div>
-        </div>
+        </>
-
+      }
+    >
+      <div className={style.container}>
         {/* 任务列表 */}
         <div className={style.taskList}>
           {loading ? (
@@ -280,7 +276,7 @@ const ContactImport: React.FC = () => {
               )}
             </div>
           ) : (
-            filteredTasks.map((task) => (
+            filteredTasks.map(task => (
               <Card key={task.id} className={style.taskCard}>
                 <div className={style.cardHeader}>
                   <div className={style.taskInfo}>
@@ -302,11 +298,15 @@ const ContactImport: React.FC = () => {
                 <div className={style.cardContent}>
                   <div className={style.taskDetail}>
                     <span className={style.label}>备注类型:</span>
-                    <span className={style.value}>{task.config?.remarkType === 1 ? '自定义备注' : '其他'}</span>
+                    <span className={style.value}>
+                      {task.config?.remarkType === 1 ? "自定义备注" : "其他"}
+                    </span>
                   </div>
                   <div className={style.taskDetail}>
                     <span className={style.label}>设备数量:</span>
-                    <span className={style.value}>{task.config?.devices?.length || 0}</span>
+                    <span className={style.value}>
+                      {task.config?.devices?.length || 0}
+                    </span>
                   </div>
                   <div className={style.taskDetail}>
                     <span className={style.label}>导入数量:</span>