生产管理系统 - 页面上样式、刷新等内容的规范
This commit is contained in:
@@ -19,7 +19,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import {
|
||||
History,
|
||||
Search,
|
||||
Calendar,
|
||||
FileText,
|
||||
@@ -209,12 +208,6 @@ export default function AuditHistoryPage() {
|
||||
dispatch({ type: 'TOGGLE_DETAIL_DIALOG', payload: true });
|
||||
};
|
||||
|
||||
// 刷新数据
|
||||
const handleRefresh = () => {
|
||||
dispatch({ type: 'REFRESH_DATA' });
|
||||
dispatch({ type: 'SET_PAGINATION', payload: { page: 1 } });
|
||||
toast.success('数据已刷新');
|
||||
};
|
||||
|
||||
// 合并所有状态变化,统一处理数据加载
|
||||
useEffect(() => {
|
||||
@@ -270,39 +263,12 @@ export default function AuditHistoryPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Page Header */}
|
||||
<Card className="p-6 bg-gradient-to-r from-purple-50 dark:from-purple-950 to-pink-50 dark:to-pink-950 border-purple-200 dark:border-purple-800">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<History className="w-6 h-6 text-purple-600 dark:text-purple-400 flex-shrink-0 mt-1" />
|
||||
<div className="flex-1">
|
||||
<h2 className="mb-2">审核历史</h2>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
追溯查询全部企业的历史审核记录
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Badge variant="outline" className="bg-white dark:bg-gray-800 font-light">
|
||||
<Search className="w-3 h-3 mr-1" />
|
||||
智能查询
|
||||
</Badge>
|
||||
<Badge variant="outline" className="bg-white dark:bg-gray-800 font-light">
|
||||
<Calendar className="w-3 h-3 mr-1" />
|
||||
时间筛选
|
||||
</Badge>
|
||||
<Badge variant="outline" className="bg-white dark:bg-gray-800 font-light">
|
||||
<FileText className="w-3 h-3 mr-1" />
|
||||
详细记录
|
||||
</Badge>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-green-800 dark:text-green-400">审核历史</h2>
|
||||
<p className="text-muted-foreground">追溯查询全部企业的历史审核记录</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleRefresh} disabled={state.loading}>
|
||||
<RefreshCw className={`w-4 h-4 mr-1 ${state.loading ? 'animate-spin' : ''}`} />
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Filters */}
|
||||
<Card className="p-6 bg-card">
|
||||
|
||||
@@ -136,11 +136,6 @@ export default function EnterpriseManagement() {
|
||||
dispatch({ type: 'SET_PAGINATION', payload: { page } });
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
dispatch({ type: 'REFRESH_DATA' });
|
||||
loadEnterprises(true);
|
||||
toast.success('数据已刷新');
|
||||
};
|
||||
|
||||
const handleView = (enterprise: Enterprise) => {
|
||||
dispatch({ type: 'SET_SELECTED_ENTERPRISE', payload: enterprise });
|
||||
@@ -241,10 +236,6 @@ export default function EnterpriseManagement() {
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
新建企业
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={handleRefresh} disabled={state.loading}>
|
||||
<RefreshCw className={`w-4 h-4 mr-1 ${state.loading ? 'animate-spin' : ''}`} />
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -1,16 +1,12 @@
|
||||
/**
|
||||
* filekorolheader: 用户管理页面头部组件 - 页面标题和操作按钮
|
||||
* 功能:页面标题显示、刷新功能、统计数据展示
|
||||
* filekorolheader: 用户管理页面头部组件 - 页面标题显示
|
||||
* 功能:页面标题显示、统计数据展示
|
||||
* 路径:/central-config/tenant/user-management/components/UserManagementHeader
|
||||
* 规范:遵循crop-x/docs/开发项目规范.md,使用shadcn/ui组件,TypeScript类型安全
|
||||
*/
|
||||
|
||||
'use client';
|
||||
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Users, RefreshCw } from 'lucide-react';
|
||||
|
||||
interface UserManagementHeaderProps {
|
||||
stats: Array<{
|
||||
label: string;
|
||||
@@ -18,41 +14,15 @@ interface UserManagementHeaderProps {
|
||||
color: string;
|
||||
bg: string;
|
||||
}>;
|
||||
onRefresh: () => void;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
export function UserManagementHeader({ stats, onRefresh, loading }: UserManagementHeaderProps) {
|
||||
export function UserManagementHeader({ stats }: UserManagementHeaderProps) {
|
||||
return (
|
||||
<Card className="p-6 bg-gradient-to-r from-blue-50 dark:from-blue-950 to-indigo-50 dark:to-indigo-950 border-blue-200 dark:border-blue-800">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<Users className="w-6 h-6 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-1" />
|
||||
<div className="flex-1">
|
||||
<h2 className="mb-2">用户管理</h2>
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
平台所有用户账户的集中管理,支持搜索、筛选和详情查看
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<span className="inline-flex items-center text-sm bg-white dark:bg-gray-800 px-3 py-1 rounded-full">
|
||||
搜索功能
|
||||
</span>
|
||||
<span className="inline-flex items-center text-sm bg-white dark:bg-gray-800 px-3 py-1 rounded-full">
|
||||
状态筛选
|
||||
</span>
|
||||
<span className="inline-flex items-center text-sm bg-white dark:bg-gray-800 px-3 py-1 rounded-full">
|
||||
详情查看
|
||||
</span>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-green-800 dark:text-green-400">用户管理</h2>
|
||||
<p className="text-muted-foreground">平台所有用户账户的集中管理</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={onRefresh} disabled={loading}>
|
||||
<RefreshCw className={`w-4 h-4 mr-1 ${loading ? 'animate-spin' : ''}`} />
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -218,12 +218,6 @@ export default function TenantUserManagementPage() {
|
||||
toast.info('重置密码功能开发中...');
|
||||
};
|
||||
|
||||
// 刷新数据
|
||||
const handleRefresh = () => {
|
||||
dispatch({ type: 'REFRESH_DATA' });
|
||||
loadUsers(true);
|
||||
toast.success('数据已刷新');
|
||||
};
|
||||
|
||||
// 统计数据计算
|
||||
const stats = [
|
||||
@@ -266,7 +260,7 @@ export default function TenantUserManagementPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 页面标题和统计 */}
|
||||
<UserManagementHeader stats={stats} onRefresh={handleRefresh} loading={state.loading} />
|
||||
<UserManagementHeader stats={stats} />
|
||||
|
||||
{/* 统计卡片 */}
|
||||
<UserManagementStatsCards stats={stats} />
|
||||
|
||||
@@ -148,26 +148,6 @@ export function EmployeeFormDialog({
|
||||
disabled={editingEmployee && loadingDetail}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="idCard">身份证号</Label>
|
||||
<Input
|
||||
id="idCard"
|
||||
value={formData.idCard || ''}
|
||||
onChange={(e) => onFormDataChange({ ...formData, idCard: e.target.value })}
|
||||
placeholder="18位身份证号码"
|
||||
disabled={editingEmployee && loadingDetail}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="address">住址</Label>
|
||||
<Input
|
||||
id="address"
|
||||
value={formData.address || ''}
|
||||
onChange={(e) => onFormDataChange({ ...formData, address: e.target.value })}
|
||||
placeholder="详细住址"
|
||||
disabled={editingEmployee && loadingDetail}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -176,8 +176,6 @@ export default function EmployeeManagementPage() {
|
||||
status: 'active' as const,
|
||||
auditStatus: 'pending' as const,
|
||||
roleIds: [],
|
||||
idCard: '',
|
||||
address: '',
|
||||
username: '',
|
||||
name: '',
|
||||
phone: '',
|
||||
|
||||
@@ -82,7 +82,5 @@ export interface EmployeeFormData {
|
||||
enterpriseName?: string;
|
||||
status?: UserStatus;
|
||||
roleIds?: string[];
|
||||
idCard?: string;
|
||||
address?: string;
|
||||
auditStatus?: 'pending' | 'approved' | 'rejected';
|
||||
}
|
||||
Reference in New Issue
Block a user