cx-chat 0.0.1

package/src/views/page-system/user/index.tsx

@@ -0,0 +1,439 @@
+import { useAuth } from '@/contexts/AuthContext'
+import { ENUM_DATA } from '@/meta'
+import { deleteUserAPI, disableUserAPI, enableUserAPI, getUserPageAPI, resetUserPassAPI } from '@api/system/user'
+import ConfirmDialog from '@components/common/modal/confirm-dialog'
+import ListPageView, { createListPageConfig } from '@components/table-view'
+import { CxButton, CxModal, CxTag } from '@cx-ui'
+import { message } from 'antd'
+import { KeyRound, ShieldUser } from 'lucide-react'
+import { useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { UserRoleColumn } from './components/user-role-column'
+import AssignRolesModal from './modal/assign-roles-modal'
+import DetailModal from './modal/detail-modal'
+import SubmitModal from './modal/submit-modal'
+
+/** 判断列表行是否为当前登录用户（兼容 id 为字符串或数字）。 */
+function isRowCurrentUser(record: any, me: { id?: string | number } | null | undefined): boolean {
+  if (!me?.id || !record) return false
+  const rid = record.id ?? record._id ?? record.userId
+  if (rid === undefined || rid === null) return false
+  return String(rid) === String(me.id)
+}
+
+/** 获取用户头像地址：优先取 avatar.address，其次取 avatar 字符串/常见字段。 */
+function getUserAvatarUrl(record: any): string {
+  const avatar = record?.avatar
+  if (!avatar) return ''
+  if (typeof avatar === 'string') return avatar
+  if (typeof avatar === 'object') {
+    return (
+      String(
+        avatar?.address ??
+          avatar?.url ??
+          avatar?.fullName ??
+          record?.avatarUrl ??
+          record?.avatar_url ??
+          ''
+      ) || ''
+    )
+  }
+  return ''
+}
+
+const useListPageConfig = createListPageConfig({
+  tableAPI: getUserPageAPI,
+  deleteAPI: deleteUserAPI,
+  pageInfo: {
+    title: 'system.user.title',
+    subTitle: 'system.user.subtitle',
+  },
+  // product-manage/index.tsx 中的 searchFields
+  searchFields: [
+    {
+      prop: 'keyword',
+      label: 'system.user.search.keyword_label',
+      placeholder: 'system.user.search.keyword_placeholder',
+    },
+    {
+      prop: 'status',
+      label: 'common.status',
+      type: 'select',
+      placeholder: 'common.status',
+      width: '100px',
+      options: ENUM_DATA.activeStatus.option,
+    },
+    {
+      prop: 'startDate',
+      label: 'system.user.search.date_range_label',
+      placeholder: [
+        'system.user.search.date_range_placeholder_start',
+        'system.user.search.date_range_placeholder_end',
+      ],
+      type: 'dateRange',
+      rangeStartProp: 'startTime',
+      rangeEndProp: 'endTime',
+      format: 'YYYY-MM-DD',
+      width: '50px',
+    },
+  ],
+  table: {
+    showSelection: true,
+    operationWidth: 100,
+  },
+  submitAction: {
+    permission: 'user:add',
+    submitType: 'modal', // 新增/编辑：基于当前路由跳转 /submit /submit?id=xx
+    labelKey: 'system.user.actions.create_user',
+  },
+  detailAction: {
+    detailType: 'modal', // 详情：基于当前路由跳转 /detail?id=xx
+    labelKey: 'system.user.modal_user.detail_title',
+    permission: 'user:detail',
+  },
+  deleteConfirm: {
+    title: 'system.user.actions.delete_user',
+    content: 'system.user.actions.delete_user_confirm',
+    contentFields: 'email',
+    okText: 'system.user.actions.delete_action',
+    cancelText: 'system.user.actions.delete_cancel',
+  },
+})
+
+function IndexView() {
+  const { t } = useTranslation()
+  const { user: currentUser, hasPermission } = useAuth()
+  const canEnableUser = hasPermission('user:enable')
+  const canDisableUser = hasPermission('user:disable')
+  const canResetPassword = hasPermission('user:edit-pwd')
+  const canBindRoles = hasPermission('user:bind-roles')
+  const canEditUser = hasPermission('user:edit')
+  const canDeleteUser = hasPermission('user:delete')
+  const assignRolesModalRef = useRef<any>(null)
+  const [confirmDialogOpen, setConfirmDialogOpen] = useState(false)
+  const [pendingStatusRecord, setPendingStatusRecord] = useState<any>(null)
+  const [resetPwdConfirmOpen, setResetPwdConfirmOpen] = useState(false)
+  const [pendingResetPwdRecord, setPendingResetPwdRecord] = useState<any>(null)
+  const [resetPwdResultOpen, setResetPwdResultOpen] = useState(false)
+  const [resetPwdValue, setResetPwdValue] = useState('')
+  const pageConfig = useListPageConfig()
+
+  const handleToggleStatusClick = (data: any) => {
+    if (isRowCurrentUser(data, currentUser)) {
+      message.warning(t('system.user.actions.cannot_operate_self'))
+      return
+    }
+    setPendingStatusRecord(data)
+    setConfirmDialogOpen(true)
+  }
+
+  const handleCancel = () => {
+    setConfirmDialogOpen(false)
+    setPendingStatusRecord(null)
+  }
+
+  /** 点击重置密码：先打开确认框。 */
+  const handleResetPwdClick = (record: any) => {
+    setPendingResetPwdRecord(record)
+    setResetPwdConfirmOpen(true)
+  }
+
+  /** 取消重置密码：关闭确认框并清空待操作记录。 */
+  const handleResetPwdCancel = () => {
+    setResetPwdConfirmOpen(false)
+    setPendingResetPwdRecord(null)
+  }
+
+  /** 确认重置密码：调用接口并用 ConfirmDialog 展示新密码。 */
+  const handleResetPwdConfirm = async () => {
+    if (!pendingResetPwdRecord) return
+    const userId = pendingResetPwdRecord?.id
+    if (!userId) {
+      message.error(t('system.user.messages.user_id_missing'))
+      handleResetPwdCancel()
+      return
+    }
+    try {
+      const res: any = await resetUserPassAPI(userId)
+      const pwd =
+        res?.data?.password ??
+        res?.data?.newPassword ??
+        res?.password ??
+        res?.newPassword ??
+        (typeof res?.data === 'string' ? res.data : '') ??
+        ''
+      setResetPwdValue(pwd ? String(pwd) : '')
+      setResetPwdResultOpen(true)
+      message.success(t('system.user.messages.reset_password_success'))
+      handleResetPwdCancel()
+    } catch (e) {
+      console.error('reset password failed:', e)
+      message.error(t('system.user.messages.reset_password_failed'))
+      handleResetPwdCancel()
+    }
+  }
+
+  const handleConfirm = async () => {
+    if (!pendingStatusRecord) return
+    if (isRowCurrentUser(pendingStatusRecord, currentUser)) {
+      message.warning(t('system.user.actions.cannot_operate_self'))
+      handleCancel()
+      return
+    }
+    const userId = pendingStatusRecord?.id
+    if (!userId) {
+      message.error(t('system.user.messages.user_id_missing_for_status'))
+      handleCancel()
+      return
+    }
+    try {
+      if (Number(pendingStatusRecord?.status) === 1) {
+        await disableUserAPI(userId)
+      } else {
+        await enableUserAPI(userId)
+      }
+      message.success(t('system.user.messages.status_update_success'))
+      pageConfig.fetchTableData?.()
+      handleCancel()
+    } catch (error) {
+      console.error('toggle user status failed:', error)
+      message.error(t('system.user.messages.status_update_failed'))
+    }
+  }
+
+  const handleAssignRolesSubmit = async (payload: any) => {
+    console.log('assign roles selected payload:', payload)
+    pageConfig.fetchTableData?.()
+  }
+
+  const columns = useMemo(
+    () => [
+      {
+        title: 'system.user.table_columns_title.user', // 用户
+        key: 'name',
+        render: (_: string, data: any) => (
+          <div className="flex items-center gap-3 leading-5">
+            <div className="w-9 h-9 rounded-full overflow-hidden bg-gray-100 dark:bg-gray-800 flex items-center justify-center shrink-0">
+              {getUserAvatarUrl(data) ? (
+                <img
+                  src={getUserAvatarUrl(data)}
+                  alt="avatar"
+                  className="w-full h-full object-cover"
+                  onError={(e) => {
+                    ;(e.currentTarget as HTMLImageElement).style.display = 'none'
+                  }}
+                />
+              ) : (
+                <span className="text-xs text-gray-500 dark:text-gray-400">
+                  {(data?.name || data?.email || '?').slice(0, 1).toUpperCase()}
+                </span>
+              )}
+            </div>
+            <div>
+              <p className="text-[14px] text-sm font-medium text-gray-900 dark:text-gray-100">
+                {data?.name || '-'}
+              </p>
+              <p className="text-[14px] text-[#6b7280]">
+                {data?.email || '-'}
+              </p>
+            </div>
+          </div>
+        ),
+      },
+      
+      {
+        title: 'system.user.table_columns_title.role', // 角色
+        key: 'roleNames',
+        render: (value: any, data: any) => (
+          <UserRoleColumn roleNames={value} record={data} />
+        ),
+      },
+      {
+        title: 'system.user.table_columns_title.phone',
+        key: 'phone'
+      },
+      {
+        title: 'common.status',
+        key: 'status',
+        render: (status: unknown) => {
+          return (
+            <div className="flex">
+              <CxTag.Enabled value={status} enumKey="activeStatus" />
+            </div>
+          )
+        },
+      },
+      {
+        title: 'system.user.table_columns_title.created_at',
+        key: 'createTime',
+      },
+      {
+        title: 'common.actions',
+        key: 'action',
+        render: (_: any, data: any) => {
+          const isActive = Number(data?.status) === 1
+          const isSelf = isRowCurrentUser(data, currentUser)
+          if (isSelf) {
+            return (
+              <span className="text-xs text-gray-400 italic">
+                {t('system.role.protected_role')}
+              </span>
+            )
+          }
+          return (
+            <div className="flex gap-2">
+              {Number(data?.status) === 1 && canDisableUser ? (
+                <CxButton.IconDisable
+                  title={t('common.disabled')}
+                  onClick={() => handleToggleStatusClick(data)}
+                />
+              ) : null}
+              {Number(data?.status) !== 1 && canEnableUser ? (
+                <CxButton.IconEnable
+                  title={t('common.enabled')}
+                  onClick={() => handleToggleStatusClick(data)}
+                />
+              ) : null}
+              {!isActive && canResetPassword && (
+                <CxButton.Icon
+                  type="primary"
+                  icon={<KeyRound size={18} />}
+                  title={t('system.user.actions.reset_password')}
+                  onClick={() => handleResetPwdClick(data)}
+                />
+              )}
+              {!isActive && canBindRoles && (
+                <CxButton.Icon
+                  type="primary"
+                  icon={<ShieldUser size={18} />}
+                  title={t('system.user.actions.assign_roles')}
+                  onClick={() => assignRolesModalRef.current?.open(data)}
+                />
+              )}
+              {!isActive && canEditUser && (
+                <CxButton.IconEdit
+                  title={t('system.user.actions.edit_user')}
+                  onClick={() =>
+                    pageConfig.onEdit?.({
+                      type: 'edit',
+                      data,
+                      config: pageConfig.submitAction,
+                    })
+                  }
+                />
+              )}
+              {!isActive && canDeleteUser && (
+                <CxButton.IconDelete
+                  title={t('system.user.actions.delete_user')}
+                  onClick={() => pageConfig.onDelete?.(data)}
+                />
+              )}
+            </div>
+          )
+        },
+      },
+    ],
+    [
+      t,
+      currentUser,
+      pageConfig,
+      canEnableUser,
+      canDisableUser,
+      canResetPassword,
+      canBindRoles,
+      canEditUser,
+      canDeleteUser,
+    ],
+  )
+
+  return (
+    <>
+      <ListPageView
+        columns={columns}
+        pageConfig={pageConfig}
+        submitModalComponent={SubmitModal as any}
+        detailModalComponent={DetailModal as any}
+      />
+      {/* 分配角色 */}
+      <AssignRolesModal ref={assignRolesModalRef} onOk={handleAssignRolesSubmit} />
+      {/* 确认对话框 */}
+      <ConfirmDialog
+        cancelText={t('common.cancel')}
+        confirmText={t('common.confirm')}
+        danger
+        isOpen={confirmDialogOpen}
+        message={
+          Number(pendingStatusRecord?.status) === 1
+            ? t('system.user.actions.disable_user_confirm')
+            : t('system.user.actions.enable_user_confirm')
+        }
+        title={t('system.user.dialog.confirm_title')}
+        onClose={handleCancel}
+        onConfirm={handleConfirm}
+      />
+
+      {/* 重置密码确认框（交互与删除一致） */}
+      <ConfirmDialog
+        cancelText={t('common.cancel')}
+        confirmText={t('common.confirm')}
+        danger
+        isOpen={resetPwdConfirmOpen}
+        message={t('system.user.actions.reset_password_confirm', {
+          email: pendingResetPwdRecord?.email ?? '',
+        })}
+        title={t('system.user.actions.reset_password')}
+        onClose={handleResetPwdCancel}
+        onConfirm={handleResetPwdConfirm}
+      />
+
+      {/* 重置密码结果确认框：展示接口返回的新密码 */}
+      <CxModal
+        title={t('system.user.actions.reset_password_result_title')}
+        isOpen={resetPwdResultOpen}
+        onClose={() => {
+          setResetPwdResultOpen(false)
+          setResetPwdValue('')
+        }}
+        actions={[
+          <CxButton
+            key="close"
+            type="primary"
+            onClick={() => {
+              setResetPwdResultOpen(false)
+              setResetPwdValue('')
+            }}
+          >
+            {t('common.close')}
+          </CxButton>,
+        ]}
+        modalConfig={{ width: 560 }}
+      >
+        <div className="space-y-4">
+          <div className="text-sm text-gray-600 dark:text-gray-300 whitespace-pre-line">
+            {t('system.user.actions.reset_password_result_tip')}
+          </div>
+          <div className="flex items-center justify-between gap-3 p-3 rounded-lg bg-gray-50 dark:bg-gray-900/40 border border-gray-200 dark:border-gray-700 font-mono text-sm break-all">
+            <div className="flex-1 min-w-0">{resetPwdValue || '-'}</div>
+            {resetPwdValue ? (
+              <CxButton
+                type="link"
+                onClick={async () => {
+                  try {
+                    await navigator.clipboard.writeText(resetPwdValue)
+                    message.success(t('system.user.messages.copy_success'))
+                  } catch (e) {
+                    message.error(t('system.user.messages.copy_failed'))
+                  }
+                }}
+              >
+                {t('system.user.actions.copy_password')}
+              </CxButton>
+            ) : null}
+          </div>
+        </div>
+      </CxModal>
+    </>
+  )
+}
+
+export default IndexView