布局适配
This commit is contained in:
@@ -548,13 +548,14 @@ export default function XinTable<T extends Record<string, any> = any>(props: Xin
|
|||||||
<Space>{ ...actionBarRender() }</Space>
|
<Space>{ ...actionBarRender() }</Space>
|
||||||
<Space size={1}>{...toolBarRender()}</Space>
|
<Space size={1}>{...toolBarRender()}</Space>
|
||||||
</Flex>
|
</Flex>
|
||||||
{/* 表格 */}
|
{/* 表格(默认横向滚动:窄屏/平板下表格内部滚动而非撑宽整页) */}
|
||||||
<Table
|
<Table
|
||||||
loading={loading}
|
loading={loading}
|
||||||
dataSource={dataSource}
|
dataSource={dataSource}
|
||||||
size={density}
|
size={density}
|
||||||
bordered={bordered}
|
bordered={bordered}
|
||||||
{...props}
|
{...props}
|
||||||
|
scroll={props.scroll ?? { x: 'max-content' }}
|
||||||
columns={tableColumns}
|
columns={tableColumns}
|
||||||
rowKey={rowKey}
|
rowKey={rowKey}
|
||||||
onChange={handleTableChange}
|
onChange={handleTableChange}
|
||||||
|
|||||||
@@ -64,7 +64,9 @@ const LayoutContent: React.FC = () => {
|
|||||||
{ layout === "columns" ? <ColumnsMenu/> : <MenuRender />}
|
{ layout === "columns" ? <ColumnsMenu/> : <MenuRender />}
|
||||||
</Sider>
|
</Sider>
|
||||||
)}
|
)}
|
||||||
<Layout>
|
{/* min-w-0:flex 子项默认 min-width:auto 会被宽表格撑破,
|
||||||
|
归零后内容区宽度收敛到视口,表格自身的横向滚动才生效 */}
|
||||||
|
<Layout className="min-w-0">
|
||||||
<Content style={{padding: themeConfig.bodyPadding}}>
|
<Content style={{padding: themeConfig.bodyPadding}}>
|
||||||
<Outlet/>
|
<Outlet/>
|
||||||
</Content>
|
</Content>
|
||||||
|
|||||||
@@ -429,6 +429,7 @@ const Index: React.FC = () => {
|
|||||||
rowKey={"product_id"}
|
rowKey={"product_id"}
|
||||||
dataSource={dashboard.top_products}
|
dataSource={dashboard.top_products}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
|
scroll={{ x: 'max-content' }}
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
title: t("dashboard.analysis.rank"),
|
title: t("dashboard.analysis.rank"),
|
||||||
@@ -472,6 +473,7 @@ const Index: React.FC = () => {
|
|||||||
rowKey={"store_id"}
|
rowKey={"store_id"}
|
||||||
dataSource={dashboard.top_stores}
|
dataSource={dashboard.top_stores}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
|
scroll={{ x: 'max-content' }}
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
title: t("dashboard.analysis.rank"),
|
title: t("dashboard.analysis.rank"),
|
||||||
@@ -558,6 +560,7 @@ const Index: React.FC = () => {
|
|||||||
rowKey={"id"}
|
rowKey={"id"}
|
||||||
dataSource={dashboard.latest_orders}
|
dataSource={dashboard.latest_orders}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
|
scroll={{ x: 'max-content' }}
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{
|
||||||
title: t("dashboard.analysis.orderNo"),
|
title: t("dashboard.analysis.orderNo"),
|
||||||
|
|||||||
@@ -217,6 +217,7 @@ const Layout = () => {
|
|||||||
columns={productColumns}
|
columns={productColumns}
|
||||||
dataSource={productData}
|
dataSource={productData}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
|
scroll={{ x: 'max-content' }}
|
||||||
summary={() => (
|
summary={() => (
|
||||||
<Table.Summary>
|
<Table.Summary>
|
||||||
<Table.Summary.Row>
|
<Table.Summary.Row>
|
||||||
|
|||||||
@@ -1061,6 +1061,7 @@ const PurchaseOrderPage: React.FC = () => {
|
|||||||
columns={storeColumns}
|
columns={storeColumns}
|
||||||
dataSource={storeSummary.items}
|
dataSource={storeSummary.items}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
|
scroll={{ x: 'max-content' }}
|
||||||
summary={renderStoreTotal}
|
summary={renderStoreTotal}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
@@ -1111,6 +1112,7 @@ const PurchaseOrderPage: React.FC = () => {
|
|||||||
columns={supplierColumns}
|
columns={supplierColumns}
|
||||||
dataSource={supplierItems}
|
dataSource={supplierItems}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
|
scroll={{ x: 'max-content' }}
|
||||||
summary={renderSupplierTotal}
|
summary={renderSupplierTotal}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
@@ -1130,6 +1132,7 @@ const PurchaseOrderPage: React.FC = () => {
|
|||||||
columns={billColumns}
|
columns={billColumns}
|
||||||
dataSource={detail.bills}
|
dataSource={detail.bills}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
|
scroll={{ x: 'max-content' }}
|
||||||
summary={renderBillSummary}
|
summary={renderBillSummary}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
|
|||||||
@@ -418,6 +418,7 @@ const BillPage: React.FC = () => {
|
|||||||
columns={itemColumns}
|
columns={itemColumns}
|
||||||
dataSource={detail.items}
|
dataSource={detail.items}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
|
scroll={{ x: 'max-content' }}
|
||||||
summary={renderItemSummary}
|
summary={renderItemSummary}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -431,6 +432,7 @@ const BillPage: React.FC = () => {
|
|||||||
columns={orderColumns}
|
columns={orderColumns}
|
||||||
dataSource={detail.orders}
|
dataSource={detail.orders}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
|
scroll={{ x: 'max-content' }}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
|
|||||||
@@ -342,6 +342,7 @@ const PaymentPage: React.FC = () => {
|
|||||||
columns={billColumns}
|
columns={billColumns}
|
||||||
dataSource={detail.bills}
|
dataSource={detail.bills}
|
||||||
pagination={false}
|
pagination={false}
|
||||||
|
scroll={{ x: 'max-content' }}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
|
|||||||
Reference in New Issue
Block a user