Features - User Management (Phase 4.1): - Database: Add user_modules table for fine-grained module permissions - Database: Add 4 user permissions (view/create/edit/delete) to role_permissions - Backend: UserService (780 lines) - CRUD with tenant isolation - Backend: UserController + UserRoutes (648 lines) - 13 API endpoints - Backend: Batch import users from Excel - Frontend: UserListPage (412 lines) - list/filter/search/pagination - Frontend: UserFormPage (341 lines) - create/edit with module config - Frontend: UserDetailPage (393 lines) - details/tenant/module management - Frontend: 3 modal components (592 lines) - import/assign/configure - API: GET/POST/PUT/DELETE /api/admin/users/* endpoints Architecture Upgrade - Module Permission System: - Backend: Add getUserModules() method in auth.service - Backend: Login API returns modules array in user object - Frontend: AuthContext adds hasModule() method - Frontend: Navigation filters modules based on user.modules - Frontend: RouteGuard checks requiredModule instead of requiredVersion - Frontend: Remove deprecated version-based permission system - UX: Only show accessible modules in navigation (clean UI) - UX: Smart redirect after login (avoid 403 for regular users) Fixes: - Fix UTF-8 encoding corruption in ~100 docs files - Fix pageSize type conversion in userService (String to Number) - Fix authUser undefined error in TopNavigation - Fix login redirect logic with role-based access check - Update Git commit guidelines v1.2 with UTF-8 safety rules Database Changes: - CREATE TABLE user_modules (user_id, tenant_id, module_code, is_enabled) - ADD UNIQUE CONSTRAINT (user_id, tenant_id, module_code) - INSERT 4 permissions + role assignments - UPDATE PUBLIC tenant with 8 module subscriptions Technical: - Backend: 5 new files (~2400 lines) - Frontend: 10 new files (~2500 lines) - Docs: 1 development record + 2 status updates + 1 guideline update - Total: ~4900 lines of code Status: User management 100% complete, module permission system operational
81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
/**
|
||
* AgentCard - 智能体卡片组件
|
||
*
|
||
* 100%还原原型图V11的卡片设计:
|
||
* - 背景色: #F6F9FF (蓝色系) / #F0FDFA (青色系-工具)
|
||
* - 边框: #E0E7FF / #CCFBF1
|
||
* - 圆角: 10px
|
||
* - 内边距: 14px
|
||
* - 最小高度: 145px
|
||
* - 序号水印
|
||
* - 悬停效果
|
||
*/
|
||
|
||
import React from 'react';
|
||
import * as LucideIcons from 'lucide-react';
|
||
import type { AgentConfig } from '../types';
|
||
import '../styles/agent-card.css';
|
||
|
||
interface AgentCardProps {
|
||
agent: AgentConfig;
|
||
onClick: (agent: AgentConfig) => void;
|
||
}
|
||
|
||
/**
|
||
* 动态获取 Lucide 图标
|
||
*/
|
||
const getIcon = (iconName: string): React.ComponentType<any> => {
|
||
// 转换为 PascalCase
|
||
const pascalCase = iconName
|
||
.split('-')
|
||
.map(word => word.charAt(0).toUpperCase() + word.slice(1))
|
||
.join('');
|
||
|
||
return (LucideIcons as any)[pascalCase] || LucideIcons.HelpCircle;
|
||
};
|
||
|
||
export const AgentCard: React.FC<AgentCardProps> = ({ agent, onClick }) => {
|
||
const Icon = getIcon(agent.icon);
|
||
const orderStr = String(agent.order).padStart(2, '0');
|
||
|
||
const handleClick = () => {
|
||
if (agent.isTool && agent.toolUrl) {
|
||
// 工具类:跳转外部链接
|
||
window.location.href = agent.toolUrl;
|
||
} else {
|
||
onClick(agent);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div
|
||
className={`agent-card theme-${agent.theme} ${agent.isTool ? 'tool-card' : ''}`}
|
||
onClick={handleClick}
|
||
>
|
||
{/* 工具类:右上角跳转图标 */}
|
||
{agent.isTool && (
|
||
<LucideIcons.ExternalLink className="link-icon" />
|
||
)}
|
||
|
||
{/* 头部:图标 + 标题 + 序号 */}
|
||
<div className="card-header">
|
||
<div className="card-header-left">
|
||
<div className="icon-box">
|
||
<Icon className="agent-icon" />
|
||
</div>
|
||
<h3 className="card-title">{agent.name}</h3>
|
||
</div>
|
||
<span className="num-watermark">{orderStr}</span>
|
||
</div>
|
||
|
||
{/* 描述文本 */}
|
||
<p className="desc-text">{agent.description}</p>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default AgentCard;
|
||
|
||
|
||
|