vscode插件i18n-automatically扫描前后tsx的对比图
217 lines
import i18n from '@/i18n';
import React, { useState, useEffect, useCallback } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
// 用户角色枚举
// 用户角色枚举
enum UserRole {
enum UserRole {
ADMIN = '管理员',
ADMIN = i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-1'),
USER = '普通用户',
USER = i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-2'),
GUEST = '访客',
GUEST = i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-3'),
}
}
// 用户接口
// 用户接口
interface User {
interface User {
id: number;
id: number;
name: string;
name: string;
email: string;
email: string;
roleTest: '管理员' | '普通用户' | '访客';
roleTest: '管理员' | '普通用户' | '访客';
role: UserRole;
role: UserRole;
description?: string; // 可选的用户描述
description?: string; // 可选的用户描述
}
}
// 组件属性接口
// 组件属性接口
interface Props {
interface Props {
initialUsers: User[];
initialUsers: User[];
companyName: string; // 新增：公司名称属性
companyName: string; // 新增：公司名称属性
}
}
// 错误信息对象
// 错误信息对象
const ERROR_MESSAGES = {
const ERROR_MESSAGES = {
EMPTY_FIELDS: '请填写所有必填字段',
EMPTY_FIELDS: i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-7'),
INVALID_EMAIL: '请输入有效的电子邮箱地址',
INVALID_EMAIL: i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-8'),
USER_EXISTS: '该用户已存在',
USER_EXISTS: i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-9'),
};
};
// 用户管理组件
// 用户管理组件
const UserManagement: React.FC<Props> = ({ initialUsers, companyName }) => {
const UserManagement: React.FC<Props> = ({ initialUsers, companyName }) => {
const [users, setUsers] = useState<User[]>(initialUsers);
const [users, setUsers] = useState<User[]>(initialUsers);
const [newUser, setNewUser] = useState<Omit<User, 'id'>>({
const [newUser, setNewUser] = useState<Omit<User, 'id'>>({
name: '',
name: '',
email: '',
email: '',
role: UserRole.GUEST,
role: UserRole.GUEST,
description: '这是一个新用户', // 默认描述
description: i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-10'), // 默认描述
});
});
const [error, setError] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [successMessage, setSuccessMessage] = useState<string | null>(null);
const [successMessage, setSuccessMessage] = useState<string | null>(null);
// 设置页面标题
// 设置页面标题
useEffect(() => {
useEffect(() => {
document.title = `${companyName} - 用户管理系统`;
document.title = `${companyName}${i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-11')}`;
}, [companyName]);
}, [companyName]);
// 添加用户
// 添加用户
const addUser = useCallback(() => {
const addUser = useCallback(() => {
if (!newUser.name || !newUser.email) {
if (!newUser.name || !newUser.email) {
setError(ERROR_MESSAGES.EMPTY_FIELDS);
setError(ERROR_MESSAGES.EMPTY_FIELDS);
return;
return;
}
}
if (!validateEmail(newUser.email)) {
if (!validateEmail(newUser.email)) {
setError(ERROR_MESSAGES.INVALID_EMAIL);
setError(ERROR_MESSAGES.INVALID_EMAIL);
return;
return;
}
}
if (users.some((user) => user.email === newUser.email)) {
if (users.some((user) => user.email === newUser.email)) {
setError(ERROR_MESSAGES.USER_EXISTS);
setError(ERROR_MESSAGES.USER_EXISTS);
return;
return;
}
}
setUsers((prevUsers) => [
setUsers((prevUsers) => [
...prevUsers,
...prevUsers,
{ ...newUser, id: prevUsers.length + 1 },
{ ...newUser, id: prevUsers.length + 1 },
]);
]);
setNewUser({
setNewUser({
name: '',
name: '',
email: '',
email: '',
role: UserRole.GUEST,
role: UserRole.GUEST,
description: '这是一个新用户',
description: i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-12'),
});
});
setError(null);
setError(null);
setSuccessMessage(`用户 "${newUser.name}" 已成功添加`);
setSuccessMessage(
`${i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-13')}${newUser.name}${i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-14')}`,
);
// 3秒后清除成功消息
// 3秒后清除成功消息
setTimeout(() => setSuccessMessage(null), 3000);
setTimeout(() => setSuccessMessage(null), 3000);
}, [newUser, users]);
}, [newUser, users]);
// 删除用户
// 删除用户
const deleteUser = useCallback((id: number) => {
const deleteUser = useCallback((id: number) => {
setUsers((prevUsers) => {
setUsers((prevUsers) => {
const updatedUsers = prevUsers.filter((user) => user.id !== id);
const updatedUsers = prevUsers.filter((user) => user.id !== id);
if (updatedUsers.length < prevUsers.length) {
if (updatedUsers.length < prevUsers.length) {
setSuccessMessage(`用户已成功删除`);
setSuccessMessage(
`${i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-15')}`,
);
setTimeout(() => setSuccessMessage(null), 3000);
setTimeout(() => setSuccessMessage(null), 3000);
}
}
return updatedUsers;
return updatedUsers;
});
});
}, []);
}, []);
// 验证邮箱
// 验证邮箱
const validateEmail = (email: string): boolean => {
const validateEmail = (email: string): boolean => {
const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return re.test(email);
return re.test(email);
};
};
// 获取用户角色的中文描述
// 获取用户角色的中文描述
const getRoleDescription = (role: UserRole): string => {
const getRoleDescription = (role: UserRole): string => {
switch (role) {
switch (role) {
case UserRole.ADMIN:
case UserRole.ADMIN:
return '具有所有权限';
return i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-16');
case UserRole.USER:
case UserRole.USER:
return '具有基本操作权限';
return i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-17');
case UserRole.GUEST:
case UserRole.GUEST:
return '仅具有查看权限';
return i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-18');
default:
default:
return '未知角色';
return i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-19');
}
}
};
};
// 渲染用户列表
// 渲染用户列表
const renderUserList = () => {
const renderUserList = () => {
if (users.length === 0) {
if (users.length === 0) {
return <p className="no-data">暂无用户数据</p>;
return (
<p className="no-data">
{i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-20')}
</p>
);
}
}
return (
return (
<table>
<table>
<thead>
<thead>
<tr>
<tr>
<th>ID</th>
<th>ID</th>
<th>姓名</th>
<th>{i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-21')}</th>
<th>电子邮箱</th>
<th>{i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-22')}</th>
<th>角色</th>
<th>{i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-23')}</th>
<th>描述</th>
<th>{i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-24')}</th>
<th>操作</th>
<th>{i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-25')}</th>
</tr>
</tr>
</thead>
</thead>
<tbody>
<tbody>
{users.map((user) => (
{users.map((user) => (
<tr key={user.id}>
<tr key={user.id}>
<td>{user.id}</td>
<td>{user.id}</td>
<td>{user.name}</td>
<td>{user.name}</td>
<td>{user.email}</td>
<td>{user.email}</td>
<td>{user.role}</td>
<td>{user.role}</td>
<td>{user.description || getRoleDescription(user.role)}</td>
<td>{user.description || getRoleDescription(user.role)}</td>
<td>
<td>
<button onClick={() => deleteUser(user.id)}>删除</button>
<button onClick={() => deleteUser(user.id)}>
{i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-26')}
</button>
</td>
</td>
</tr>
</tr>
))}
))}
</tbody>
</tbody>
</table>
</table>
);
);
};
};
return (
return (
<div className="user-management">
<div className="user-management">
<h1>{`${companyName} 用户管理`}</h1>
<h1>{`${companyName}${i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-27')}`}</h1>
<div className="user-form">
<div className="user-form">
<input
<input
type="text"
type="text"
placeholder="姓名"
placeholder={i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-28')}
value={newUser.name}
value={newUser.name}
onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
/>
/>
<input
<input
type="email"
type="email"
placeholder="电子邮箱"
placeholder={i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-29')}
value={newUser.email}
value={newUser.email}
onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
/>
/>
<select
<select
value={newUser.role}
value={newUser.role}
onChange={(e) =>
onChange={(e) =>
setNewUser({ ...newUser, role: e.target.value as UserRole })
setNewUser({ ...newUser, role: e.target.value as UserRole })
}
}
>
>
<option value={UserRole.GUEST}>访客</option>
<option value={UserRole.GUEST}>
<option value={UserRole.USER}>普通用户</option>
{i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-30')}
<option value={UserRole.ADMIN}>管理员</option>
</option>
<option value={UserRole.USER}>
{i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-31')}
</option>
<option value={UserRole.ADMIN}>
{i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-32')}
</option>
</select>
</select>
<input
<input
type="text"
type="text"
placeholder="用户描述（选填）"
placeholder={i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-33')}
value={newUser.description}
value={newUser.description}
onChange={(e) =>
onChange={(e) =>
setNewUser({ ...newUser, description: e.target.value })
setNewUser({ ...newUser, description: e.target.value })
}
}
/>
/>
<button onClick={addUser}>添加用户</button>
<button onClick={addUser}>
{i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-34')}
</button>
</div>
</div>
{error && <p className="error">{error}</p>}
{error && <p className="error">{error}</p>}
{successMessage && <p className="success">{successMessage}</p>}
{successMessage && <p className="success">{successMessage}</p>}
{renderUserList()}
{renderUserList()}
<footer>
<footer>
<p>总用户数: {users.length}</p>
<p>
<p>{`© ${new Date().getFullYear()} ${companyName}用户管理系统. 保留所有权利.`}</p>
{i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-35')}
{users.length}
</p>
<p>{`© ${new Date().getFullYear()} ${companyName}${i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-36')}`}</p>
</footer>
</footer>
</div>
</div>
);
);
};
};
// 默认属性
// 默认属性
UserManagement.defaultProps = {
UserManagement.defaultProps = {
companyName: '未知公司',
companyName: i18n.t('demoTest-test-tsx-before-1929975eba0a6e4a0-37'),
};
};
export default UserManagement;
export default UserManagement;
// 注释示例
// 注释示例
/*
/*
* 这是一个用户管理组件，用于管理系统中的用户。
* 这是一个用户管理组件，用于管理系统中的用户。
* 它支持添加、删除和显示用户信息。
* 它支持添加、删除和显示用户信息。
*
*
* 待办事项:
* 待办事项:
* 1. 添加用户编辑功能
* 1. 添加用户编辑功能
* 2. 实现用户搜索
* 2. 实现用户搜索
* 3. 添加用户权限管理
* 3. 添加用户权限管理
* 4. 优化性能，考虑使用虚拟滚动来处理大量用户数据
* 4. 优化性能，考虑使用虚拟滚动来处理大量用户数据
*/
*/