feat:用户信息界面以及话单管理界面

src/service/api/user.ts

@@ -13,9 +13,9 @@ export function doDeleteUser(userId: number | string) {
   return request({ url: `/system/user/${userId}`, method: 'delete' });
 }
 
-export function doGetUserList(params?: Api.SystemManage.UserSearchParams) {
+export function doGetUserList(params?: { userName?: string; email?: string }) {
-  return request<Api.SystemManage.UserList>({
+  return request<Api.Common.PaginatingQueryRecord<Api.Auth.User>>({
-    url: '/system/user/list',
+    url: '/system/user/listUser',
     method: 'get',
     params
   });

src/typings/components.d.ts

@@ -38,6 +38,7 @@ declare module 'vue' {
     AppProvider: typeof import('./../components/common/app-provider.vue')['default']
     ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
+    ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
     ARow: typeof import('ant-design-vue/es')['Row']
     ASegmented: typeof import('ant-design-vue/es')['Segmented']
     ASelect: typeof import('ant-design-vue/es')['Select']

src/views/user-center/cdr/index.vue

@@ -0,0 +1,196 @@
+<script setup lang="tsx">
+import { useTable } from '@/hooks/common/table';
+import { SimpleScrollbar } from '~/packages/materials/src';
+import CdrSearch from './modules/cdr-search.vue';
+import { computed, shallowRef } from 'vue';
+import { useElementSize } from '@vueuse/core';
+
+// 定义话单信息接口
+interface CdrInfo {
+  id: number;
+  callId: string;
+  callerNumber: string;
+  startTime: string;
+  endTime: string;
+  duration: number;
+  recordingUrl?: string;
+}
+
+// 搜索模型
+type SearchModel = {
+  pageNum: number;
+  pageSize: number;
+  callId?: string;
+  callerNumber?: string;
+  startTime?: string;
+  endTime?: string;
+};
+
+// 模拟话单数据
+const mockCdrs: CdrInfo[] = [
+  {
+    id: 1,
+    callId: 'CALL2024031501',
+    callerNumber: '13800138000',
+    startTime: '2024-03-15 10:00:00',
+    endTime: '2024-03-15 10:05:30',
+    duration: 330,
+
+    recordingUrl: 'https://example.com/recording/1.wav'
+  },
+  {
+    id: 2,
+    callId: 'CALL2024031502',
+    callerNumber: '13800138001',
+    startTime: '2024-03-15 11:00:00',
+    endTime: '2024-03-15 11:00:15',
+    duration: 15,
+
+  }
+];
+
+
+
+
+// 格式化通话时长
+const formatDuration = (seconds: number) => {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const remainingSeconds = seconds % 60;
+
+  const parts = [];
+  if (hours > 0) parts.push(`${hours}时`);
+  if (minutes > 0) parts.push(`${minutes}分`);
+  parts.push(`${remainingSeconds}秒`);
+
+  return parts.join('');
+};
+
+const doGetCdrInfo = async (params: SearchModel) => {
+  await new Promise(resolve => setTimeout(resolve, 500));
+
+  let filteredCdrs = [...mockCdrs];
+
+  // 根据搜索条件过滤
+  if (params.callId) {
+    filteredCdrs = filteredCdrs.filter(cdr =>
+      cdr.callId.toLowerCase().includes(params.callId!.toLowerCase())
+    );
+  }
+  if (params.callerNumber) {
+    filteredCdrs = filteredCdrs.filter(cdr =>
+      cdr.callerNumber.includes(params.callerNumber!)
+    );
+  }
+
+
+  const startIndex = (params.pageNum - 1) * params.pageSize;
+  const endIndex = startIndex + params.pageSize;
+  const paginatedCdrs = filteredCdrs.slice(startIndex, endIndex);
+
+  return {
+    data: {
+      rows: paginatedCdrs,
+      total: filteredCdrs.length
+    },
+    error: null
+  };
+};
+
+const wrapperEl = shallowRef<HTMLElement | null>(null);
+const { height: wrapperElHeight } = useElementSize(wrapperEl);
+
+const scrollConfig = computed(() => ({
+  y: wrapperElHeight.value - 72,
+  x: 1200
+}));
+
+const { columns, columnChecks, data, loading, getData, mobilePagination, searchParams, resetSearchParams } = useTable({
+  apiFn: doGetCdrInfo,
+  immediate: true,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 10
+  } as SearchModel,
+  rowKey: 'id',
+  columns: (): AntDesign.TableColumn<AntDesign.TableDataWithIndex<CdrInfo>>[] => [
+    {
+      key: 'callId',
+      dataIndex: 'callId',
+      title: '话单ID',
+      align: 'center',
+      width: 150
+    },
+    {
+      key: 'callerNumber',
+      dataIndex: 'callerNumber',
+      title: '主叫号码',
+      align: 'center',
+      width: 120
+    },
+    {
+      key: 'startTime',
+      dataIndex: 'startTime',
+      title: '开始时间',
+      align: 'center',
+      width: 180
+    },
+    {
+      key: 'endTime',
+      dataIndex: 'endTime',
+      title: '结束时间',
+      align: 'center',
+      width: 180
+    },
+    {
+      key: 'duration',
+      dataIndex: 'duration',
+      title: '连接时长',
+      align: 'center',
+      width: 120,
+      customRender: ({ record }: { record: CdrInfo }) => formatDuration(record.duration)
+    },
+  ]
+});
+</script>
+
+<template>
+  <SimpleScrollbar>
+    <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+      <CdrSearch
+        v-model:model="searchParams"
+        @reset="resetSearchParams"
+        @search="getData"
+      />
+      <ACard
+        title="话单记录"
+        :bordered="false"
+        :body-style="{ flex: 1, overflow: 'hidden' }"
+        class="flex-col-stretch sm:flex-1-hidden card-wrapper"
+      >
+        <template #extra>
+          <TableHeaderOperation
+            v-model:columns="columnChecks"
+            :loading="loading"
+            :show-delete="false"
+            :show-add="false"
+            @refresh="getData"
+          />
+        </template>
+        <ATable
+          ref="wrapperEl"
+          :columns="columns"
+          :data-source="data"
+          :loading="loading"
+          row-key="id"
+          size="small"
+          :pagination="mobilePagination"
+          :scroll="scrollConfig"
+          class="h-full"
+        />
+      </ACard>
+    </div>
+  </SimpleScrollbar>
+</template>
+
+<style scoped></style>

src/views/user-center/cdr/modules/cdr-search.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { Form } from 'ant-design-vue';
+import type { FormInstance } from 'ant-design-vue';
+import dayjs, { Dayjs } from 'dayjs';
+
+// 修改类型定义以匹配 ARangePicker 的期望类型
+type TimeRangeValue = [Dayjs, Dayjs] | [string, string] | undefined;
+
+interface SearchModel {
+  pageNum: number;
+  pageSize: number;
+  callId?: string;
+  callerNumber?: string;
+  startTime?: string;
+  endTime?: string;
+}
+
+// 修改 props 定义
+const props = withDefaults(defineProps<{
+  model: SearchModel;
+}>(), {
+  model: () => ({
+    pageNum: 1,
+    pageSize: 10,
+    callId: '',
+    callerNumber: '',
+    startTime: '',
+    endTime: ''
+  })
+});
+
+const emit = defineEmits<{
+  'update:model': [value: SearchModel];
+  'search': [];
+  'reset': [];
+}>();
+
+const formRef = ref<FormInstance>();
+const { resetFields } = Form.useForm(props.model);
+
+const formModel = computed({
+  get: () => props.model,
+  set: (val: SearchModel) => emit('update:model', val)
+});
+
+// 修改 timeRange 的实现
+const timeRange = computed({
+  get() {
+    const { startTime, endTime } = formModel.value;
+    if (!startTime || !endTime) return undefined;
+    return [dayjs(startTime), dayjs(endTime)] as [Dayjs, Dayjs];
+  },
+  set(val: TimeRangeValue) {
+    emit('update:model', {
+      ...formModel.value,
+      startTime: val ? (typeof val[0] === 'string' ? val[0] : val[0].format('YYYY-MM-DD HH:mm:ss')) : '',
+      endTime: val ? (typeof val[1] === 'string' ? val[1] : val[1].format('YYYY-MM-DD HH:mm:ss')) : ''
+    });
+  }
+});
+
+function handleReset() {
+  resetFields();
+  emit('reset');
+}
+
+function handleSearch() {
+  emit('search');
+}
+</script>
+
+<template>
+  <ACard :bordered="false" class="search-card">
+    <AForm
+      ref="formRef"
+      :model="formModel"
+      layout="inline"
+      class="flex flex-wrap gap-16px items-center"
+    >
+      <AFormItem label="话单ID" name="callId">
+        <AInput
+          v-model:value="formModel.callId"
+          placeholder="请输入话单ID"
+          allow-clear
+        />
+      </AFormItem>
+      <AFormItem label="主叫号码" name="callerNumber">
+        <AInput
+          v-model:value="formModel.callerNumber"
+          placeholder="请输入主叫号码"
+          allow-clear
+        />
+      </AFormItem>
+      <AFormItem label="连接时长">
+        <ARangePicker
+          v-model:value="timeRange"
+          show-time
+          format="YYYY-MM-DD HH:mm:ss"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          :style="{
+            width: '200px',
+            // 可以添加其他样式
+            // maxWidth: '100%',
+            // minWidth: '300px'
+          }"
+        />
+      </AFormItem>
+      <AFormItem class="flex-1 justify-end">
+        <ASpace>
+          <AButton @click="handleReset">重置</AButton>
+          <AButton type="primary" @click="handleSearch">查询</AButton>
+        </ASpace>
+      </AFormItem>
+    </AForm>
+  </ACard>
+</template>
+
+<style scoped>
+.search-card {
+  :deep(.ant-card-body) {
+    padding: 16px;
+  }
+}
+</style>

src/views/user-center/user/index.vue

@@ -0,0 +1,222 @@
+<script setup lang="tsx">
+import { Tag } from 'ant-design-vue';
+import { useTable } from '@/hooks/common/table';
+import { SimpleScrollbar } from '~/packages/materials/src';
+import UserSearch from './modules/user-search.vue';
+import { computed, shallowRef } from 'vue';
+import { useElementSize } from '@vueuse/core';
+import { doGetUserList } from '@/service/api/user';
+import type { UserInfo, SearchModel } from '@/views/user-center/user/type';
+
+// 修改API函数实现
+const doGetUserInfo: AntDesign.TableApiFn<UserInfo, SearchModel> = async (params: SearchModel) => {
+  try {
+    console.log('Search params received in API function:', params);
+
+    // 直接使用传入的 params
+    const apiParams = {
+      userName: params.username,
+      email: params.email,
+      pageNum: params.pageNum,
+      pageSize: params.pageSize
+    };
+
+    console.log('Sending to API:', apiParams);
+
+    const { data, error } = await doGetUserList(apiParams);
+    console.log('Response:', data, error);
+
+    if (error) {
+      return {
+        data: {
+          rows: [],
+          total: 0
+        },
+        error: null
+      };
+    }
+
+    return {
+      data: {
+        rows: data.rows.map(user => ({
+          userId: user.userId,
+          username: user.userName,
+          fullname: user.nickName,
+          sex: user.sex === '1' ? 'M' : 'F',
+          birthdate: user.createTime?.split(' ')[0] || '-',
+          age: 0,
+          email: user.email,
+          phonenumber: user.phonenumber,
+          isKYC: user.status === '0'
+        })),
+        total: data.total
+      },
+      error: null
+    };
+  } catch (err) {
+    return {
+      data: {
+        rows: [],
+        total: 0
+      },
+      error: null
+    };
+  }
+};
+
+const wrapperEl = shallowRef<HTMLElement | null>(null);
+const { height: wrapperElHeight } = useElementSize(wrapperEl);
+
+const scrollConfig = computed(() => {
+  return {
+    y: wrapperElHeight.value - 72,
+    x: 1000
+  };
+});
+
+const { columns, columnChecks, data, loading, getData, mobilePagination, searchParams, updateSearchParams, resetSearchParams } = useTable<AntDesign.TableApiFn<UserInfo, SearchModel>>({
+  apiFn: doGetUserInfo,
+  immediate: true,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 10,
+    username: undefined,
+    email: undefined
+  } as SearchModel,
+  rowKey: 'userId',
+  columns: (): AntDesign.TableColumn<AntDesign.TableDataWithIndex<UserInfo>>[] => [
+    {
+      key: 'username',
+      dataIndex: 'username',
+      title: '用户名',
+      align: 'center'
+    },
+    {
+      key: 'fullname',
+      dataIndex: 'fullname',
+      title: '姓名',
+      align: 'center'
+    },
+    {
+      key: 'sex',
+      dataIndex: 'sex',
+      title: '性别',
+      align: 'center',
+      width: 80,
+      customRender: ({ record }: { record: UserInfo }) => {
+        const sexMap = {
+          'M': '男',
+          'F': '女'
+        };
+        return sexMap[record.sex] || '-';
+      }
+    },
+    {
+      key: 'birthdate',
+      dataIndex: 'birthdate',
+      title: '出生日期',
+      align: 'center'
+    },
+    {
+      key: 'age',
+      dataIndex: 'age',
+      title: '年龄',
+      align: 'center',
+      width: 80
+    },
+    {
+      key: 'email',
+      dataIndex: 'email',
+      title: '邮箱',
+      align: 'center'
+    },
+    {
+      key: 'phonenumber',
+      dataIndex: 'phonenumber',
+      title: '手机号',
+      align: 'center'
+    },
+    {
+      key: 'isKYC',
+      dataIndex: 'isKYC',
+      title: 'KYC验证',
+      align: 'center',
+      customRender: ({ record }: { record: UserInfo }) => {
+        const KYC_STATUS = {
+          verified: '已验证',
+          unverified: '未验证'
+        } as const;
+        return (
+          <Tag color={record.isKYC ? 'success' : 'warning'}>
+            {record.isKYC ? KYC_STATUS.verified : KYC_STATUS.unverified}
+          </Tag>
+        );
+      }
+    }
+  ]
+});
+
+// 处理搜索
+const handleSearch = () => {
+  // 使用 updateSearchParams 更新搜索参数
+  updateSearchParams({
+    ...searchParams,
+    pageNum: 1 // 搜索时重置页码
+  });
+  getData();
+};
+
+// 处理重置
+const handleReset = () => {
+  const defaultParams: SearchModel = {
+    pageNum: 1,
+    pageSize: 10,
+    username: undefined,
+    email: undefined
+  };
+  // 使用 updateSearchParams 更新参数
+  updateSearchParams(defaultParams);
+  resetSearchParams();
+};
+</script>
+
+<template>
+  <SimpleScrollbar>
+    <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+      <UserSearch
+        v-model:model="searchParams"
+        @reset="handleReset"
+        @search="handleSearch"
+      />
+      <ACard
+        title="个人信息"
+        :bordered="false"
+        :body-style="{ flex: 1, overflow: 'hidden' }"
+        class="flex-col-stretch sm:flex-1-hidden card-wrapper"
+      >
+        <template #extra>
+          <TableHeaderOperation
+            v-model:columns="columnChecks"
+            :loading="loading"
+            :show-delete="false"
+            :show-add="false"
+            @refresh="getData"
+          />
+        </template>
+        <ATable
+          ref="wrapperEl"
+          :columns="columns"
+          :data-source="data"
+          :loading="loading"
+          row-key="userId"
+          size="small"
+          :pagination="mobilePagination"
+          :scroll="scrollConfig"
+          class="h-full"
+        />
+      </ACard>
+    </div>
+  </SimpleScrollbar>
+</template>
+
+<style scoped></style>

src/views/user-center/user/modules/user-search.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import type { FormInstance } from 'ant-design-vue';
+import type { SearchModel } from '@/views/user-center/user/type';
+
+const props = defineProps<{
+  model: SearchModel;
+}>();
+
+const emit = defineEmits<{
+  'update:model': [value: SearchModel];
+  'reset': [];
+  'search': [];
+}>();
+
+const formRef = ref<FormInstance>();
+const localSearchParams = ref<SearchModel>({
+  pageNum: props.model.pageNum,
+  pageSize: props.model.pageSize,
+  username: props.model.username,
+  email: props.model.email
+});
+
+// 修改计算属性的实现
+const formModel = computed({
+  get: () => ({
+    username: props.model.username,
+    email: props.model.email
+  }),
+  set: (val: Partial<SearchModel>) => {
+    emit('update:model', {
+      ...props.model,
+      ...val
+    });
+  }
+});
+
+const handleReset = () => {
+  formRef.value?.resetFields();
+  localSearchParams.value = {
+    pageNum: 1,
+    pageSize: 10,
+    username: undefined,
+    email: undefined
+  };
+  emit('update:model', localSearchParams.value);
+  emit('reset');
+};
+
+const handleSearch = () => {
+  // 确保搜索时更新所有参数
+  const updatedParams: SearchModel = {
+    ...props.model,
+    pageNum: 1,
+    pageSize: 10,
+    username: formModel.value.username,
+    email: formModel.value.email
+  };
+
+  console.log('Search triggered with params:', updatedParams);
+
+  // 直接更新父组件的参数
+  emit('update:model', updatedParams);
+  // 触发搜索
+  emit('search');
+};
+</script>
+
+<template>
+  <ACard :bordered="false">
+    <AForm
+      ref="formRef"
+      :model="formModel"
+      layout="inline"
+      class="flex flex-wrap gap-16px items-center"
+    >
+      <AFormItem label="用户名" name="username">
+        <AInput
+          v-model:value="formModel.username"
+          placeholder="请输入用户名"
+          allow-clear
+        />
+      </AFormItem>
+      <AFormItem label="邮箱" name="email">
+        <AInput
+          v-model:value="formModel.email"
+          placeholder="请输入邮箱"
+          allow-clear
+        />
+      </AFormItem>
+      <AFormItem class="flex-1 justify-end mb-0">
+        <ASpace>
+          <AButton @click="handleReset">重置</AButton>
+          <AButton type="primary" @click="handleSearch">搜索</AButton>
+        </ASpace>
+      </AFormItem>
+    </AForm>
+  </ACard>
+</template>

src/views/user-center/user/type.ts

@@ -0,0 +1,18 @@
+export interface UserInfo {
+  userId: number;
+  username: string;
+  fullname: string;
+  sex: 'M' | 'F';
+  birthdate: string;
+  age: number;
+  email: string;
+  phonenumber: string;
+  isKYC: boolean;
+}
+
+export type SearchModel = {
+  pageNum: number;
+  pageSize: number;
+  username?: string;
+  email?: string;
+};