[fix]: Username supports non leading and trailing spaces

Author: zzyangh

packages/base/src/hooks/useMemberTips/index.tsx

@@ -35,6 +35,7 @@ const useMemberTips = () => {
           key={member.user_id}
           value={member.user_id ?? ''}
           label={member.user_name}
+          className="select-option-whitespace-pre"
         >
           {member.user_name}
         </Select.Option>
@@ -47,7 +48,9 @@ const useMemberTips = () => {
       label: (
         <Space>
           <CustomAvatar noTips size="small" name={member.user_name} />
-          <Typography.Text>{member.user_name}</Typography.Text>
+          <Typography.Text className="whitespace-pre">
+            {member.user_name}
+          </Typography.Text>
         </Space>
       ),
       value: member.user_id

packages/base/src/hooks/useUsername/index.tsx

@@ -32,7 +32,12 @@ const useUsername = () => {
   const generateUsernameSelectOption = React.useCallback(() => {
     return usernameList.map((user) => {
       return (
-        <Select.Option key={user.uid} value={user.uid ?? ''} label={user.name}>
+        <Select.Option
+          key={user.uid}
+          value={user.uid ?? ''}
+          label={user.name}
+          className="select-option-whitespace-pre"
+        >
           {user.name}
         </Select.Option>
       );

packages/base/src/locale/zh-CN/dmsUserCenter.ts

@@ -19,7 +19,7 @@ export default {
     },
     userForm: {
       username: '用户名',
-      usernameNoSpaces: '用户名不支持空格',
+      usernameNoSpaces: '用户名不支持首尾空格',
       needUpdatePassWord: '是否需要更新密码',
       passwordConfirm: '确认密码',
       passwordConfirmPlaceholder: '请保持两次密码输入一致',

packages/base/src/page/Account/index.tsx

@@ -47,7 +47,11 @@ const Account: React.FC = () => {
                 {t('dmsUserCenter.user.userForm.username')}
               </LabelContent>
             }
-            descNode={!!userInfo?.name ? userInfo?.name : '-'}
+            descNode={
+              <span className="whitespace-pre">
+                {!!userInfo?.name ? userInfo?.name : '-'}
+              </span>
+            }
             fieldVisible={false}
             needEditButton={false}
           />

packages/base/src/page/Member/List/column.tsx

@@ -15,6 +15,7 @@ export const MemberListColumns: ActiontechTableColumn<IListMember> = [
     dataIndex: 'user',
     title: t('common.username'),
     width: '10%',
+    className: 'whitespace-pre',
     render: (user) => {
       return user?.name ?? '-';
     }
@@ -116,7 +117,7 @@ export const MemberGroupListColumns: ActiontechTableColumn<IListMemberGroup> = [
         return null;
       }
       return (
-        <Typography.Text ellipsis={true}>
+        <Typography.Text ellipsis={true} className="whitespace-pre">
           {users.map((v) => v.name).join('、')}
         </Typography.Text>
       );

packages/base/src/page/Nav/SideMenu/UserMenu/components/UserNavigate.tsx

@@ -219,7 +219,7 @@ const UserNavigate: React.FC<Props> = ({
         placement: 'topRight'
       }}
       items={menus}
-      header={username}
+      header={<span className="whitespace-pre">{username}</span>}
     >
       <CustomAvatarStyleWrapper className="action-avatar">
         {username?.[0]?.toUpperCase()}

packages/base/src/page/UserCenter/Drawer/User/UserForm/index.tsx

@@ -1,5 +1,6 @@
 import { IUserFormProps } from './index.type';
 import { Form, Switch } from 'antd';
+import type { Rule } from 'antd/es/form';
 import { BasicInput, BasicSelect, EmptyBox } from '@actiontech/dms-kit';
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -14,6 +15,27 @@ const UserForm: React.FC<IUserFormProps> = (props) => {
     opPermissionOptions,
     updateOpPermissionList
   } = useOpPermission();
+
+  const getUsernameRules = (): Rule[] => {
+    const rules: Rule[] = [
+      {
+        required: true,
+        message: t('common.form.rule.require', {
+          name: t('dmsUserCenter.user.userForm.username')
+        })
+      }
+    ];
+
+    if (!props.isUpdate) {
+      rules.push({
+        pattern: /^\S(.*\S)?$/,
+        message: t('dmsUserCenter.user.userForm.usernameNoSpaces')
+      });
+    }
+
+    return rules;
+  };
+
   useEffect(() => {
     if (props.visible) {
       updateOpPermissionList(ListOpPermissionsFilterByTargetEnum.user);
@@ -25,18 +47,7 @@ const UserForm: React.FC<IUserFormProps> = (props) => {
         name="username"
         label={t('dmsUserCenter.user.userForm.username')}
         validateFirst={true}
-        rules={[
-          {
-            required: true,
-            message: t('common.form.rule.require', {
-              name: t('dmsUserCenter.user.userForm.username')
-            })
-          },
-          {
-            pattern: /^\S*$/,
-            message: t('dmsUserCenter.user.userForm.usernameNoSpaces')
-          }
-        ]}
+        rules={getUsernameRules()}
       >
         <BasicInput
           disabled={props.isUpdate}

packages/base/src/page/UserCenter/components/UserList/column.tsx

@@ -25,7 +25,8 @@ export const UserListColumns: () => ActiontechTableColumn = () => [
   },
   {
     dataIndex: 'name',
-    title: () => t('common.username')
+    title: () => t('common.username'),
+    className: 'whitespace-pre'
   },
   {
     dataIndex: 'email',

packages/dms-kit/docs/CHANGELOG.md

@@ -26,3 +26,10 @@ nav:
 - **Demo 示例规范化**
   - 添加必要的注释说明，特别是复杂配置和特殊处理
   - 代码保持简洁，移除冗余配置
+
+## 1.0.3
+
+- ConfigItem组件descNode类型由string改为React.ReactNode
+- CustomAvatar中Tooltip title改动，用于适配用户名的空格展示
+- CustomSelect样式变更，用于适配用户名的空格展示
+- BasicSelect样式变更，用于适配用户名的空格展示

packages/dms-kit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actiontech/dms-kit",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "DMS Kit - React UI Components Library",
   "main": "lib/index.js",
   "module": "es/index.js",