feat: 完善采购申请流程 - 添加审批、执行、列表筛选排序功能

backup_20260327/company-finance-system/frontend/src/pages/LayoutShowcase.tsx

@@ -0,0 +1,438 @@
+import React, { useState } from 'react';
+import { 
+  Card, Typography, Button, Space, Tag, Table, List, Avatar, 
+  Row, Col, Divider, Tabs, Progress, Badge, Rate, Timeline,
+  Statistic, Switch, Alert, Empty
+} from 'antd';
+import { 
+  UserOutlined, StarOutlined, LikeOutlined, MessageOutlined,
+  EyeOutlined, HeartOutlined, ShoppingCartOutlined,
+  CalendarOutlined, ClockCircleOutlined, CheckCircleOutlined
+} from '@ant-design/icons';
+
+const { Title, Paragraph, Text } = Typography;
+const { TabPane } = Tabs;
+
+/**
+ * 布局样式预览页面
+ * 展示各种常见UI布局类型及其适用场景
+ */
+
+const LayoutShowcase: React.FC = () => {
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+
+  // 模拟数据
+  const listData = [
+    { id: 1, title: '项目A - 博纳斯线路改造', status: 'active', progress: 75, manager: '张三' },
+    { id: 2, title: '项目B - 变压器安装工程', status: 'pending', progress: 0, manager: '李四' },
+    { id: 3, title: '项目C - 电缆敷设施工', status: 'completed', progress: 100, manager: '王五' },
+  ];
+
+  const tableColumns = [
+    { title: '项目名称', dataIndex: 'title', key: 'title' },
+    { title: '负责人', dataIndex: 'manager', key: 'manager' },
+    { title: '进度', dataIndex: 'progress', key: 'progress', render: (v: number) => `${v}%` },
+    { 
+      title: '状态', 
+      dataIndex: 'status', 
+      key: 'status',
+      render: (v: string) => {
+        const colors: Record<string, string> = { active: 'processing', pending: 'default', completed: 'success' };
+        const texts: Record<string, string> = { active: '进行中', pending: '待开始', completed: '已完成' };
+        return <Tag color={colors[v]}>{texts[v]}</Tag>;
+      }
+    },
+  ];
+
+  // ============ 布局类型1: 卡片列表 ============
+  const CardListDemo = () => (
+    <div>
+      <Alert 
+        message="卡片列表布局" 
+        description="适用于：项目列表、任务列表、产品展示。特点：信息层次清晰、视觉分隔明确、适合移动端"
+        type="info"
+        showIcon
+        style={{ marginBottom: 16 }}
+      />
+      
+      {listData.map(item => (
+        <Card 
+          key={item.id}
+          style={{ marginBottom: 16, borderRadius: 12 }}
+          hoverable
+        >
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+            <div style={{ flex: 1 }}>
+              <Text strong style={{ fontSize: 16 }}>{item.title}</Text>
+              <br />
+              <Text type="secondary">负责人: {item.manager}</Text>
+            </div>
+            <Tag color={item.status === 'active' ? 'processing' : item.status === 'completed' ? 'success' : 'default'}>
+              {item.status === 'active' ? '进行中' : item.status === 'completed' ? '已完成' : '待开始'}
+            </Tag>
+          </div>
+          <Divider style={{ margin: '12px 0' }} />
+          <Progress percent={item.progress} showInfo={false} />
+          <div style={{ marginTop: 8, display: 'flex', gap: 8 }}>
+            <Button size="small" type="primary">查看详情</Button>
+            <Button size="small">编辑</Button>
+          </div>
+        </Card>
+      ))}
+    </div>
+  );
+
+  // ============ 布局类型2: 表格布局 ============
+  const TableDemo = () => (
+    <div>
+      <Alert 
+        message="表格布局" 
+        description="适用于：数据管理、批量操作、对比分析。特点：信息密集、支持排序筛选、适合桌面端大量数据"
+        type="info"
+        showIcon
+        style={{ marginBottom: 16 }}
+      />
+      
+      <Table 
+        dataSource={listData} 
+        columns={tableColumns}
+        rowKey="id"
+        pagination={false}
+      />
+    </div>
+  );
+
+  // ============ 布局类型3: 网格卡片 ============
+  const GridCardDemo = () => (
+    <div>
+      <Alert 
+        message="网格卡片布局" 
+        description="适用于：仪表板、快捷入口、统计展示。特点：空间利用率高、视觉均衡、适合展示统计信息"
+        type="info"
+        showIcon
+        style={{ marginBottom: 16 }}
+      />
+      
+      <Row gutter={[16, 16]}>
+        <Col xs={24} sm={12} md={8} lg={6}>
+          <Card hoverable style={{ borderRadius: 12, textAlign: 'center' }}>
+            <Statistic title="进行中项目" value={12} suffix="个" />
+            <Progress percent={60} showInfo={false} style={{ marginTop: 8 }} />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} md={8} lg={6}>
+          <Card hoverable style={{ borderRadius: 12, textAlign: 'center' }}>
+            <Statistic title="待处理任务" value={5} suffix="项" valueStyle={{ color: '#cf1322' }} />
+            <Progress percent={25} showInfo={false} strokeColor="#cf1322" style={{ marginTop: 8 }} />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} md={8} lg={6}>
+          <Card hoverable style={{ borderRadius: 12, textAlign: 'center' }}>
+            <Statistic title="本月完成" value={28} suffix="个" valueStyle={{ color: '#3f8600' }} />
+            <Progress percent={85} showInfo={false} strokeColor="#3f8600" style={{ marginTop: 8 }} />
+          </Card>
+        </Col>
+        <Col xs={24} sm={12} md={8} lg={6}>
+          <Card hoverable style={{ borderRadius: 12, textAlign: 'center' }}>
+            <Statistic title="团队成员" value={8} suffix="人" />
+            <Progress percent={100} showInfo={false} style={{ marginTop: 8 }} />
+          </Card>
+        </Col>
+      </Row>
+    </div>
+  );
+
+  // ============ 布局类型4: 时间线布局 ============
+  const TimelineDemo = () => (
+    <div>
+      <Alert 
+        message="时间线布局" 
+        description="适用于：审批流程、施工进度、操作日志。特点：顺序清晰、时间节点明确、适合流程展示"
+        type="info"
+        showIcon
+        style={{ marginBottom: 16 }}
+      />
+      
+      <Timeline
+        items={[
+          {
+            color: 'green',
+            children: (
+              <>
+                <Text strong>项目启动</Text>
+                <br />
+                <Text type="secondary">2026-03-01 - 确定项目范围和团队</Text>
+              </>
+            ),
+          },
+          {
+            color: 'blue',
+            children: (
+              <>
+                <Text strong>施工准备</Text>
+                <br />
+                <Text type="secondary">2026-03-05 - 材料采购、人员调配</Text>
+              </>
+            ),
+          },
+          {
+            color: 'blue',
+            children: (
+              <>
+                <Text strong>施工进行中</Text>
+                <br />
+                <Text type="secondary">2026-03-10 - 开始现场施工</Text>
+              </>
+            ),
+          },
+          {
+            color: 'gray',
+            children: (
+              <>
+                <Text strong>竣工验收</Text>
+                <br />
+                <Text type="secondary">预计 2026-04-01</Text>
+              </>
+            ),
+          },
+        ]}
+      />
+    </div>
+  );
+
+  // ============ 布局类型5: 瀑布流/Feed布局 ============
+  const FeedDemo = () => (
+    <div>
+      <Alert 
+        message="Feed流布局" 
+        description="适用于：动态消息、施工日志、社交媒体风格。特点：沉浸式阅读、时间倒序、适合移动端滑动"
+        type="info"
+        showIcon
+        style={{ marginBottom: 16 }}
+      />
+      
+      <List
+        itemLayout="vertical"
+        dataSource={[
+          {
+            title: '今日施工进展',
+            description: '完成了3号杆塔的基础浇筑工作，混凝土养护中。',
+            author: '张三',
+            date: '今天 14:30',
+            avatar: '👨‍🔧',
+          },
+          {
+            title: '材料到货通知',
+            description: '电缆材料已到货，存放在仓库A区，请施工组负责人安排领取。',
+            author: '李四',
+            date: '今天 10:15',
+            avatar: '📦',
+          },
+          {
+            title: '安全检查完成',
+            description: '本周安全检查已完成，未发现重大隐患。',
+            author: '王五',
+            date: '昨天 16:00',
+            avatar: '✅',
+          },
+        ]}
+        renderItem={(item: any) => (
+          <List.Item>
+            <Card style={{ width: '100%', marginBottom: 12, borderRadius: 12 }}>
+              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
+                <div style={{ fontSize: 32 }}>{item.avatar}</div>
+                <div style={{ flex: 1 }}>
+                  <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <Text strong>{item.author}</Text>
+                    <Text type="secondary" style={{ fontSize: 12 }}>{item.date}</Text>
+                  </div>
+                  <Text strong style={{ fontSize: 15, display: 'block', marginTop: 4 }}>{item.title}</Text>
+                  <Text type="secondary">{item.description}</Text>
+                  <div style={{ marginTop: 12, display: 'flex', gap: 16 }}>
+                    <Space>
+                      <LikeOutlined /> 赞
+                    </Space>
+                    <Space>
+                      <MessageOutlined /> 评论
+                    </Space>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </List.Item>
+        )}
+      />
+    </div>
+  );
+
+  // ============ 布局类型6: 详情页布局 ============
+  const DetailDemo = () => (
+    <div>
+      <Alert 
+        message="详情页布局" 
+        description="适用于：项目详情、订单详情、用户档案。特点：信息分组明确、主次分明、适合深度阅读"
+        type="info"
+        showIcon
+        style={{ marginBottom: 16 }}
+      />
+      
+      <Card style={{ borderRadius: 12 }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+          <Title level={4} style={{ margin: 0 }}>项目详情</Title>
+          <Tag color="processing">进行中</Tag>
+        </div>
+        
+        <Row gutter={[24, 16]}>
+          <Col xs={24} sm={12} md={8}>
+            <Text type="secondary">项目名称</Text>
+            <br />
+            <Text strong>博纳斯线路改造工程</Text>
+          </Col>
+          <Col xs={24} sm={12} md={8}>
+            <Text type="secondary">客户</Text>
+            <br />
+            <Text strong>博纳斯稀土开采公司</Text>
+          </Col>
+          <Col xs={24} sm={12} md={8}>
+            <Text type="secondary">项目经理</Text>
+            <br />
+            <Text strong>罗仕林</Text>
+          </Col>
+          <Col xs={24} sm={12} md={8}>
+            <Text type="secondary">合同金额</Text>
+            <br />
+            <Text strong>¥1,250,000</Text>
+          </Col>
+          <Col xs={24} sm={12} md={8}>
+            <Text type="secondary">开工日期</Text>
+            <br />
+            <Text strong>2026-03-01</Text>
+          </Col>
+          <Col xs={24} sm={12} md={8}>
+            <Text type="secondary">预计完工</Text>
+            <br />
+            <Text strong>2026-05-30</Text>
+          </Col>
+        </Row>
+        
+        <Divider />
+        
+        <Text type="secondary">项目描述</Text>
+        <Paragraph>
+          本项目包括7公里22kV高压线路改造，以及1250kVA变压器安装工程。
+          施工地点位于老挝博纳斯矿区，需考虑当地气候条件。
+        </Paragraph>
+        
+        <Divider />
+        
+        <div style={{ marginBottom: 8 }}>
+          <Text type="secondary">施工进度</Text>
+        </div>
+        <Progress percent={65} status="active" />
+      </Card>
+    </div>
+  );
+
+  // ============ 布局对比总结 ============
+  const ComparisonTable = () => (
+    <Card title="布局类型对比" style={{ marginTop: 24, borderRadius: 12 }}>
+      <Table 
+        dataSource={[
+          {
+            key: '1',
+            layout: '卡片列表',
+            bestFor: '项目/任务列表',
+            mobile: '⭐⭐⭐⭐⭐',
+            desktop: '⭐⭐⭐⭐',
+            dataDensity: '中',
+          },
+          {
+            key: '2',
+            layout: '表格',
+            bestFor: '数据管理/分析',
+            mobile: '⭐⭐',
+            desktop: '⭐⭐⭐⭐⭐',
+            dataDensity: '高',
+          },
+          {
+            key: '3',
+            layout: '网格卡片',
+            bestFor: '仪表板/统计',
+            mobile: '⭐⭐⭐⭐',
+            desktop: '⭐⭐⭐⭐⭐',
+            dataDensity: '中',
+          },
+          {
+            key: '4',
+            layout: '时间线',
+            bestFor: '流程/进度',
+            mobile: '⭐⭐⭐⭐',
+            desktop: '⭐⭐⭐',
+            dataDensity: '低',
+          },
+          {
+            key: '5',
+            layout: 'Feed流',
+            bestFor: '动态/日志',
+            mobile: '⭐⭐⭐⭐⭐',
+            desktop: '⭐⭐⭐',
+            dataDensity: '低',
+          },
+          {
+            key: '6',
+            layout: '详情页',
+            bestFor: '深度信息',
+            mobile: '⭐⭐⭐',
+            desktop: '⭐⭐⭐⭐⭐',
+            dataDensity: '中',
+          },
+        ]}
+        columns={[
+          { title: '布局类型', dataIndex: 'layout', key: 'layout' },
+          { title: '适用场景', dataIndex: 'bestFor', key: 'bestFor' },
+          { title: '移动端', dataIndex: 'mobile', key: 'mobile' },
+          { title: '桌面端', dataIndex: 'desktop', key: 'desktop' },
+          { title: '数据密度', dataIndex: 'dataDensity', key: 'dataDensity' },
+        ]}
+        pagination={false}
+        size="small"
+      />
+    </Card>
+  );
+
+  return (
+    <div style={{ padding: isMobile ? 12 : 24, maxWidth: 1200, margin: '0 auto' }}>
+      <Title level={2}>布局样式预览</Title>
+      <Paragraph type="secondary">
+        此页面展示各种常见UI布局类型，帮助开发者选择合适的布局方式
+      </Paragraph>
+      
+      <Divider />
+      
+      <Tabs defaultActiveKey="1" tabPosition="top">
+        <TabPane tab="📋 卡片列表" key="1">
+          <CardListDemo />
+        </TabPane>
+        <TabPane tab="📊 表格布局" key="2">
+          <TableDemo />
+        </TabPane>
+        <TabPane tab="🔲 网格卡片" key="3">
+          <GridCardDemo />
+        </TabPane>
+        <TabPane tab="⏱️ 时间线" key="4">
+          <TimelineDemo />
+        </TabPane>
+        <TabPane tab="📝 Feed流" key="5">
+          <FeedDemo />
+        </TabPane>
+        <TabPane tab="📄 详情页" key="6">
+          <DetailDemo />
+        </TabPane>
+      </Tabs>
+      
+      <ComparisonTable />
+    </div>
+  );
+};
+
+export default LayoutShowcase;