// 【重要】必须使用 const Component 作为组件变量名
// ONEOS-web 示例项目 - CRM 供应商管理 (完美复刻 Arco Design Pro 查询表格)

const Component = function () {
	var useState = React.useState;

	var antd = window.antd;
	var Table = antd.Table;
	var Button = antd.Button;
	var Card = antd.Card;
	var Space = antd.Space;
	var Input = antd.Input;
	var Select = antd.Select;
	var DatePicker = antd.DatePicker;
	var Form = antd.Form;
	var Row = antd.Row;
	var Col = antd.Col;
	var Divider = antd.Divider;
	var Breadcrumb = antd.Breadcrumb;
	var Menu = antd.Menu;
	var Layout = antd.Layout;
	var message = antd.message;
	var Typography = antd.Typography;
	var Avatar = antd.Avatar;
	var Badge = antd.Badge;

	var Header = Layout.Header;
	var Content = Layout.Content;
	var Sider = Layout.Sider;
	var Title = Typography.Title;

	var _currentMenu = useState('crm-supplier');
	var currentMenu = _currentMenu[0];
	var setCurrentMenu = _currentMenu[1];

	var handleMenuClick = function (e) {
		setCurrentMenu(e.key);
		if (e.key === 'contract-list') {
			message.info('跳转至 合同列表');
			window.location.hash = '合同列表';
		} else if (e.key === 'erp-order') {
			message.info('跳转至 ERP 订单管理');
			window.location.hash = '订单管理';
		} else if (e.key === 'asset-overview') {
			message.info('跳转至 资产概览');
			window.location.hash = '资产概览';
		} else if (e.key === 'crm-list') {
			message.info('跳转至 客户列表');
			window.location.hash = '客户列表';
		}
	};

	// 自定义 SVG 图标（高保真还原 Arco 风格）
	var SearchIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 4 }, React.createElement('path', { d: 'M33.072 33.071c6.248-6.248 6.248-16.379 0-22.627-6.249-6.249-16.38-6.249-22.628 0-6.248 6.248-6.248 16.379 0 22.627 6.248 6.248 16.38 6.248 22.628 0Zm0 0 8.485 8.485' })); };
	var ResetIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 4 }, React.createElement('path', { d: 'M38.837 18C36.463 12.136 30.715 8 24 8 15.163 8 8 15.163 8 24s7.163 16 16 16c7.455 0 13.72-5.1 15.496-12M40 8v10H30' })); };
	var PlusIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 4 }, React.createElement('path', { d: 'M5 24h38M24 5v38' })); };
	var DownloadIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 4 }, React.createElement('path', { d: 'm33.072 22.071-9.07 9.071-9.072-9.07M24 5v26m16 4v6H8v-6' })); };
	var SettingIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 16, height: 16, fill: 'none', stroke: 'currentColor', strokeWidth: 4 }, React.createElement('path', { d: 'M18.797 6.732A1 1 0 0 1 19.76 6h8.48a1 1 0 0 1 .964.732l1.285 4.628a1 1 0 0 0 1.213.7l4.651-1.2a1 1 0 0 1 1.116.468l4.24 7.344a1 1 0 0 1-.153 1.2L38.193 23.3a1 1 0 0 0 0 1.402l3.364 3.427a1 1 0 0 1 .153 1.2l-4.24 7.344a1 1 0 0 1-1.116.468l-4.65-1.2a1 1 0 0 0-1.214.7l-1.285 4.628a1 1 0 0 1-.964.732h-8.48a1 1 0 0 1-.963-.732L17.51 36.64a1 1 0 0 0-1.213-.7l-4.65 1.2a1 1 0 0 1-1.116-.468l-4.24-7.344a1 1 0 0 1 .153-1.2L9.809 24.7a1 1 0 0 0 0-1.402l-3.364-3.427a1 1 0 0 1-.153-1.2l4.24-7.344a1 1 0 0 1 1.116-.468l4.65 1.2a1 1 0 0 0 1.213-.7l1.286-4.628Z' }), React.createElement('path', { d: 'M30 24a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z' })); };
	var NoticeIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 18, height: 18, fill: 'none', stroke: 'currentColor', strokeWidth: 4 }, React.createElement('path', { d: 'M39 34h3v4H6v-4h3V20.218a15 15 0 0 1 30 0V34ZM24 44a6 6 0 0 1-6-6h12a6 6 0 0 1-6 6Z' })); };
	var ListIcon = function() { return React.createElement('svg', { viewBox: '0 0 48 48', width: 14, height: 14, fill: 'none', stroke: 'currentColor', strokeWidth: 4, strokeLinecap: 'butt', strokeLinejoin: 'miter' }, React.createElement('path', { d: 'M17 12H42' }), React.createElement('path', { d: 'M17 24H42' }), React.createElement('path', { d: 'M17 36H42' }), React.createElement('path', { d: 'M8 12H9' }), React.createElement('path', { d: 'M8 24H9' }), React.createElement('path', { d: 'M8 36H9' })); };

	var columns = [
		{ title: '供应商名称', dataIndex: 'name', key: 'name', width: 220 },
		{ title: '类型', dataIndex: 'type', key: 'type', width: 140 },
		{ title: '所属城市', dataIndex: 'city', key: 'city', width: 140 },
		{ title: '业务负责部门', dataIndex: 'department', key: 'department', width: 140 },
		{ title: '业务负责人员', dataIndex: 'manager', key: 'manager', width: 140 },
		{ title: '状态', dataIndex: 'status', key: 'status', width: 100, render: function(text) {
			var isOnline = text === '正常';
			return React.createElement(Space, { size: 6 },
				React.createElement('span', { style: { display: 'inline-block', width: 6, height: 6, borderRadius: '50%', backgroundColor: isOnline ? '#00b42a' : '#f53f3f' } }),
				React.createElement('span', null, text)
			);
		} },
		{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 180 },
		{
			title: '操作',
			key: 'action',
			fixed: 'right',
			width: 100,
			render: function (_, record) {
				return React.createElement(Button, { type: 'link', style: { padding: 0 }, onClick: function() { message.info('查看详情: ' + record.name); } }, '查看');
			}
		}
	];

	var data = [
		{ key: '1', name: '阿里云计算有限公司', type: '其他', city: '浙江-杭州', department: '技术部', manager: '张三', status: '正常', createTime: '2023-01-10 10:00:00' },
		{ key: '2', name: '腾讯云计算（北京）有限责任公司', type: '其他', city: '北京', department: '技术部', manager: '李四', status: '正常', createTime: '2023-02-15 11:30:00' },
		{ key: '3', name: '中国平安财产保险股份有限公司', type: '保险公司', city: '广东-深圳', department: '法务部', manager: '王五', status: '正常', createTime: '2023-03-20 14:15:00' },
		{ key: '4', name: '一汽大众汽车有限公司', type: '整车企业', city: '吉林-长春', department: '采购部', manager: '赵六', status: '停用', createTime: '2023-04-18 09:45:00' },
		{ key: '5', name: '宁德时代新能源科技股份有限公司', type: '备件供应商', city: '福建-宁德', department: '采购部', manager: '孙七', status: '正常', createTime: '2023-05-12 16:20:00' }
	];

	var menuItems = [
		{ 
			key: 'contract', 
			label: '合同管理', 
			icon: React.createElement('span', { className: 'anticon' }, '📄'),
			children: [
				{ key: 'contract-list', label: '合同列表' }
			]
		},
		{ 
			key: 'crm', 
			label: 'CRM 管理', 
			icon: React.createElement('span', { className: 'anticon' }, '👥'),
			children: [
				{ key: 'crm-list', label: '客户管理' },
				{ key: 'crm-supplier', label: '供应商管理' },
				{ key: 'crm-analysis', label: 'CRM 分析' }
			]
		},
		{ 
			key: 'erp', 
			label: 'ERP 订单管理', 
			icon: React.createElement('span', { className: 'anticon' }, '📦'),
			children: [
				{ key: 'erp-order', label: '订单管理' }
			]
		},
		{ 
			key: 'asset', 
			label: '资产管理', 
			icon: React.createElement('span', { className: 'anticon' }, '🚗'),
			children: [
				{ key: 'asset-overview', label: '资产概览' }
			]
		}
	];

	var formItemLayout = {
		labelAlign: 'left',
		colon: false,
		labelCol: { flex: '0 0 86px' },
		wrapperCol: { flex: '1 1 0' }
	};

	return React.createElement(Layout, { className: 'arco-theme-overrides', style: { minHeight: '100vh', background: '#fff', fontFamily: 'Inter, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif' } },
		// 内联 CSS 以实现最高保真度的 Arco UI
		React.createElement('style', null, `
			.arco-theme-overrides .ant-btn { border-radius: 4px; box-shadow: none; font-size: 14px; }
			.arco-theme-overrides .ant-btn-primary { background-color: #165dff; border-color: #165dff; }
			.arco-theme-overrides .ant-btn-primary:hover { background-color: #4080ff; border-color: #4080ff; }
			.arco-theme-overrides .ant-btn-default { background-color: #f2f3f5; border-color: transparent; color: #4e5969; }
			.arco-theme-overrides .ant-btn-default:hover { background-color: #e5e6eb; border-color: transparent; color: #4e5969; }
			.arco-theme-overrides .ant-btn-link { color: #165dff; }
			.arco-theme-overrides .ant-btn-link:hover { background-color: transparent; color: #4080ff; }
			.arco-theme-overrides .ant-menu-light .ant-menu-item-selected { background-color: #f2f9fe; color: #165dff; }
			.arco-theme-overrides .ant-menu-light .ant-menu-item-selected::after { border-right-color: #165dff; }
			.arco-theme-overrides .ant-table-thead > tr > th { background-color: #f2f3f5; color: #1d2129; font-weight: 500; padding: 13px 16px; border-bottom: 1px solid #e5e6eb; border-top: none; }
			.arco-theme-overrides .ant-table-thead > tr > th::before { display: none !important; }
			.arco-theme-overrides .ant-table-tbody > tr > td { border-bottom: 1px solid #e5e6eb; padding: 13px 16px; color: #4e5969; }
			.arco-theme-overrides .ant-table-wrapper { border: none; }
			.arco-theme-overrides .ant-table { border: none; }
			.arco-theme-overrides .ant-table-container { border: none; }
			.arco-theme-overrides .ant-table-pagination.ant-pagination { margin: 16px 0 0 0; }
			.arco-theme-overrides .ant-card { border: none; border-radius: 4px; }
			/* 筛选组件(Input/Select/DatePicker)的默认、Hover、Focus样式复刻 */
			.arco-theme-overrides .ant-input, .arco-theme-overrides .ant-select-selector, .arco-theme-overrides .ant-picker { border-radius: 2px; border: 1px solid #e5e6eb; background-color: #fff; transition: all 0.1s cubic-bezier(0, 0, 1, 1); }
			.arco-theme-overrides .ant-input:hover, .arco-theme-overrides .ant-select:not(.ant-select-disabled):hover .ant-select-selector, .arco-theme-overrides .ant-picker:hover { background-color: #fff; border-color: #165dff; }
			.arco-theme-overrides .ant-input:focus, .arco-theme-overrides .ant-input-focused, .arco-theme-overrides .ant-select-focused .ant-select-selector, .arco-theme-overrides .ant-picker-focused { background-color: #fff; border: 1px solid #165dff !important; box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2) !important; outline: 0; }
			.arco-theme-overrides .ant-input-affix-wrapper:focus, .arco-theme-overrides .ant-input-affix-wrapper-focused { background-color: #fff; border-color: #165dff !important; box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2) !important; }
			
			/* 日期选择器展开面板(Dropdown/Panel)的样式复刻 */
			.arco-theme-overrides .ant-picker-dropdown .ant-picker-panel-container { border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); border: 1px solid #e5e6eb; background: #fff; }
			.arco-theme-overrides .ant-picker-dropdown .ant-picker-header { border-bottom: 1px solid #e5e6eb; color: #1d2129; padding: 0 8px; }
			.arco-theme-overrides .ant-picker-dropdown .ant-picker-content th { color: #86909c; font-weight: 400; font-size: 14px; }
			.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner { background: #165dff; color: #fff; border-radius: 2px; }
			.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner, 
			.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner { background: #165dff; color: #fff; border-radius: 2px; }
			.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-in-range::before { background: #e8f3ff; }
			.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before { border: 1px solid transparent; border-radius: 2px; position: relative; }
			.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background-color: #165dff; }
			.arco-theme-overrides .ant-picker-cell-in-view.ant-picker-cell-today.ant-picker-cell-selected .ant-picker-cell-inner::after { background-color: #fff; }
			.arco-theme-overrides .ant-picker-dropdown .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end) .ant-picker-cell-inner { background: #f2f3f5; border-radius: 2px; }
			.arco-theme-overrides .ant-picker-cell-inner { border-radius: 2px; font-size: 14px; color: #4e5969; width: 24px; height: 24px; line-height: 24px; }
			.arco-theme-overrides .ant-breadcrumb { color: #86909c; font-size: 14px; }
			.arco-theme-overrides .ant-breadcrumb a { color: #4e5969; }
			.arco-theme-overrides .ant-breadcrumb a:hover { color: #165dff; background-color: transparent; }
			.arco-theme-overrides .ant-form-item-label { padding: 0 16px 0 0 !important; line-height: 32px; height: 32px; display: flex; align-items: center; }
			.arco-theme-overrides .ant-form-item-control { display: flex; align-items: center; line-height: 32px; min-height: 32px; }
			.arco-theme-overrides .ant-form-item-control-input { min-height: 32px; width: 100%; display: flex; align-items: center; }
			.arco-theme-overrides .ant-form-item-control-input-content { display: flex; align-items: center; width: 100%; height: 100%; }
			.arco-theme-overrides .ant-select { width: 100%; height: 32px; }
			.arco-theme-overrides .ant-select-selector { height: 32px !important; min-height: 32px !important; display: flex; align-items: center; width: 100%; padding: 0 12px; }
			.arco-theme-overrides .ant-select-multiple .ant-select-selector { padding: 0 4px; align-items: center; }
			.arco-theme-overrides .ant-select-selection-item { line-height: 30px !important; margin-top: 0 !important; margin-bottom: 0 !important; }
			.arco-theme-overrides .ant-select-selection-overflow { align-items: center; }
			.arco-theme-overrides .ant-input { height: 32px; padding: 4px 12px; }
			.arco-theme-overrides .ant-picker { height: 32px !important; min-height: 32px !important; display: flex; align-items: center; padding: 4px 12px; width: 100%; }
			.arco-theme-overrides .ant-form-item-label > label { color: #4e5969; }
			.arco-theme-overrides .ant-form-item-label > label::after { display: none !important; content: "" !important; margin: 0 !important; }
			
			/* 多选标签及下拉菜单 Checkbox 样式复刻 (模拟 Arco) */
			.arco-theme-overrides .ant-select-multiple .ant-select-selection-item { background: #f2f3f5; border: none; border-radius: 2px; }
			.arco-theme-overrides .ant-select-multiple.ant-select-show-arrow .ant-select-selection-item { padding-inline-end: 24px; }
			.arco-theme-overrides .ant-select-multiple .ant-select-item-option { padding-left: 36px; position: relative; }
			.arco-theme-overrides .ant-select-multiple .ant-select-item-option::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border: 1px solid #e5e6eb; border-radius: 2px; transition: all 0.1s; background: #fff; box-sizing: border-box; }
			.arco-theme-overrides .ant-select-multiple .ant-select-item-option-selected::before { background-color: #165dff; border-color: #165dff; }
			.arco-theme-overrides .ant-select-multiple .ant-select-item-option-selected::after { content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-70%) rotate(45deg); width: 4px; height: 8px; border: 2px solid #fff; border-top: 0; border-left: 0; box-sizing: content-box; z-index: 1; }
			.arco-theme-overrides .ant-select-multiple .ant-select-item-option-state { display: none; }
		`),
		// 顶部 Header
		React.createElement(Header, { 
			style: { 
				background: '#fff', 
				padding: '0 20px', 
				display: 'flex', 
				justifyContent: 'space-between', 
				alignItems: 'center', 
				borderBottom: '1px solid #e5e6eb', 
				height: 60,
				position: 'fixed',
				top: 0,
				left: 0,
				right: 0,
				zIndex: 100
			} 
		},
			// 左侧 Logo
			React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 12 } },
				React.createElement('div', { style: { width: 32, height: 32, background: '#165dff', borderRadius: 4, display: 'flex', justifyContent: 'center', alignItems: 'center', color: '#fff', fontWeight: 'bold' } }, 'A'),
				React.createElement('div', { style: { fontSize: '20px', fontWeight: '600', color: '#1d2129', letterSpacing: '0.5px' } }, 'Arco Pro')
			),
			// 右侧工具栏
			React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 20 } },
				React.createElement(Input.Search, { placeholder: '搜索功能', style: { width: 220, borderRadius: 16 } }),
				React.createElement(Badge, { dot: true, offset: [-2, 4] },
					React.createElement('span', { style: { color: '#4e5969', cursor: 'pointer', display: 'flex' }, title: '消息通知' }, React.createElement(NoticeIcon, null))
				),
				React.createElement('span', { style: { color: '#4e5969', cursor: 'pointer', display: 'flex' }, title: '设置' }, React.createElement(SettingIcon, null)),
				React.createElement(Avatar, { size: 32, src: 'https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp', style: { cursor: 'pointer' } })
			)
		),
		// 下方主体内容
		React.createElement(Layout, { style: { paddingTop: 60, background: '#fff' } },
			// 左侧菜单 Sider
			React.createElement(Sider, {
				width: 220,
				style: {
					background: '#fff',
					borderRight: '1px solid #e5e6eb',
					position: 'fixed',
					top: 60,
					left: 0,
					height: 'calc(100vh - 60px)',
					overflowY: 'auto',
					zIndex: 99
				}
			},
				React.createElement(Menu, {
					mode: 'inline',
					selectedKeys: [currentMenu],
					defaultOpenKeys: ['crm'],
					items: menuItems,
					onClick: handleMenuClick,
					style: { borderRight: 'none', padding: '8px', background: '#fff' }
				})
			),
			// 右侧内容 Content
			React.createElement(Content, { style: { marginLeft: 220, padding: '16px 20px 0 20px', minHeight: 'calc(100vh - 60px)', display: 'flex', flexDirection: 'column', background: '#fff' } },
				React.createElement('div', { style: { padding: '16px 20px 0 20px', marginBottom: 0 } },
					React.createElement(Breadcrumb, { 
						separator: React.createElement('span', { style: { color: '#c9cdd4' } }, '/'),
						items: [
							{ title: React.createElement(ListIcon, { style: { display: 'inline-flex', alignItems: 'center', fontSize: 14, transform: 'translate(-2px, 1px)' } }) }, 
							{ title: '列表页' }, 
							{ title: React.createElement('span', { style: { color: '#1d2129' } }, '供应商管理') }
						] 
					}),
					React.createElement(Title, { level: 4, style: { marginTop: 16, marginBottom: 20, fontWeight: 700, color: '#1d2129', fontSize: 16 } }, '供应商管理')
				),
				React.createElement('div', { style: { padding: '0', display: 'flex', flexDirection: 'column', flex: 1, background: 'transparent' } },
					// 搜索表单区域
					React.createElement('div', { style: { padding: '0 20px 0 20px', marginBottom: 0, background: '#fff' } },
						React.createElement(Row, { style: { flexWrap: 'nowrap' } },
							React.createElement(Col, { flex: 1, style: { minWidth: 0, paddingRight: 40 } },
								React.createElement(Form, Object.assign({ layout: 'horizontal' }, formItemLayout),
									React.createElement(Row, { gutter: 24, style: { rowGap: 0 } },
										React.createElement(Col, { span: 8 },
											React.createElement(Form.Item, { label: '供应商名称', style: { marginBottom: 16, height: 32 } },
												React.createElement(Input, { placeholder: '请输入供应商名称' })
											)
										),
										React.createElement(Col, { span: 8 },
											React.createElement(Form.Item, { label: '类型', style: { marginBottom: 16, height: 32 } },
												React.createElement(Select, { 
													mode: 'multiple',
													allowClear: true,
													maxTagCount: 'responsive',
													placeholder: '请选择类型',
													options: [
														{ label: '整车企业', value: '整车企业' },
														{ label: '车辆外租企业', value: '车辆外租企业' },
														{ label: '加氢站', value: '加氢站' },
														{ label: '充电站', value: '充电站' },
														{ label: '维修站', value: '维修站' },
														{ label: '备件供应商', value: '备件供应商' },
														{ label: '保险公司', value: '保险公司' },
														{ label: '救援车队', value: '救援车队' },
														{ label: '其他', value: '其他' }
													] 
												})
											)
										),
										React.createElement(Col, { span: 8 },
											React.createElement(Form.Item, { label: '所属城市', style: { marginBottom: 16, height: 32 } },
												React.createElement(Input, { placeholder: '请输入所属城市' })
											)
										),
										React.createElement(Col, { span: 8 },
											React.createElement(Form.Item, { label: '业务部门', style: { marginBottom: 16, height: 32 } },
												React.createElement(Input, { placeholder: '请输入部门名称' })
											)
										),
										React.createElement(Col, { span: 8 },
											React.createElement(Form.Item, { label: '业务人员', style: { marginBottom: 16, height: 32 } },
												React.createElement(Input, { placeholder: '请输入人员姓名' })
											)
										),
										React.createElement(Col, { span: 8 },
											React.createElement(Form.Item, { label: '状态', style: { marginBottom: 16, height: 32 } },
												React.createElement(Select, { 
													placeholder: '全部', 
													options: [
														{ label: '全部', value: '' },
														{ label: '正常', value: 'normal' },
														{ label: '停用', value: 'disabled' }
													] 
												})
											)
										)
									)
								)
							),
							React.createElement(Divider, { style: { height: 72, borderLeftColor: 'rgb(229, 230, 235)', borderLeftStyle: 'dashed', marginLeft: 20, marginRight: 20 }, type: 'vertical' }),
							React.createElement(Col, { flex: '86px', style: { textAlign: 'right' } },
								React.createElement(Space, { direction: 'vertical', size: 12 },
									React.createElement(Button, { type: 'primary', icon: React.createElement(SearchIcon, null), style: { display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'center' } }, '查询'),
									React.createElement(Button, { icon: React.createElement(ResetIcon, null), style: { display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'center' } }, '重置')
								)
							)
						)
					),
					// 底部表格区
					React.createElement('div', { style: { padding: '20px 20px 0 20px', display: 'flex', flexDirection: 'column', flex: 1, background: '#fff' } },
						// 工具栏区域
						React.createElement(Row, { justify: 'space-between', align: 'middle', style: { marginBottom: 16 } },
							React.createElement(Col, null,
								React.createElement(Space, { size: 12 },
									React.createElement(Button, { type: 'primary', icon: React.createElement(PlusIcon, null), style: { display: 'flex', alignItems: 'center', gap: 6 }, onClick: function() { window.location.hash = '新建供应商'; } }, '新建'),
									React.createElement(Button, null, '批量导入')
								)
							),
							React.createElement(Col, null,
								React.createElement(Space, { size: 16 },
									React.createElement(Button, { style: { padding: '4px 10px', height: 32, display: 'flex', alignItems: 'center', gap: 6, color: '#4e5969' }, title: '下载' }, React.createElement(DownloadIcon, null), React.createElement('span', null, '下载'))
								)
							)
						),
						// 表格区域
						React.createElement('div', { style: { flex: 1, minHeight: 0 } },
							React.createElement(Table, { 
								rowSelection: { type: 'checkbox', columnWidth: 48 },
								columns: columns, 
								dataSource: data, 
								pagination: { pageSize: 10, showTotal: function(total) { return '共 ' + total + ' 条'; } },
								scroll: { x: 1000 }
							})
						)
					)
				)
			)
		)
	);
};

if (typeof module !== 'undefined' && module.exports) module.exports = Component;