diff --git a/apps/web-antd/src/views/order/list/components/OrderDetailDrawer.vue b/apps/web-antd/src/views/order/list/components/OrderDetailDrawer.vue index 9ff1143..2661da9 100644 --- a/apps/web-antd/src/views/order/list/components/OrderDetailDrawer.vue +++ b/apps/web-antd/src/views/order/list/components/OrderDetailDrawer.vue @@ -1,7 +1,7 @@ - emit('update:selectedStoreId', value)" - > - - - emit('update:startDate', String(value ?? '')) - " - /> - ~ - emit('update:endDate', String(value ?? ''))" - /> + + handleStoreChange(value)" + /> - emit('update:status', String(value ?? 'all')) - " - /> + handleStartDateChange(value)" + /> + ~ + handleEndDateChange(value)" + /> - emit('update:channel', String(value ?? 'all')) - " - /> + handleStatusChange(value)" + /> - emit('update:paymentMethod', String(value ?? 'all')) - " - /> + handleChannelChange(value)" + /> - emit('update:keyword', String(value ?? ''))" - @press-enter="emit('search')" - /> + handlePaymentChange(value)" + /> - 重置 - 查询 - - 导出 - - - - + handleKeywordChange(value)" + @press-enter="emit('search')" + > + + + + + + + + + + + 导出 + + + diff --git a/apps/web-antd/src/views/order/list/components/OrderTableCard.vue b/apps/web-antd/src/views/order/list/components/OrderTableCard.vue index 4dc50fc..6109226 100644 --- a/apps/web-antd/src/views/order/list/components/OrderTableCard.vue +++ b/apps/web-antd/src/views/order/list/components/OrderTableCard.vue @@ -49,6 +49,8 @@ const columns: TableProps['columns'] = [ title: '订单号', dataIndex: 'orderNo', width: 170, + customRender: ({ text }) => + h('span', { class: 'oa-order-no' }, String(text ?? '--')), }, { title: '下单时间', @@ -73,12 +75,15 @@ const columns: TableProps['columns'] = [ title: '商品', dataIndex: 'itemsSummary', ellipsis: true, + customRender: ({ text }) => + h('span', { class: 'oa-items' }, String(text ?? '--')), }, { title: '金额', dataIndex: 'amount', width: 120, - customRender: ({ text }) => formatCurrency(Number(text || 0)), + customRender: ({ text }) => + h('span', { class: 'oa-amount' }, formatCurrency(Number(text || 0))), }, { title: '状态', @@ -98,6 +103,7 @@ const columns: TableProps['columns'] = [ Button, { type: 'link', + class: 'oa-detail-action', onClick: () => emit('detail', String(record.orderNo ?? '')), }, () => '详情', @@ -125,7 +131,7 @@ function resolveRowClassName(record: OrderAllListItemDto) { current: props.pagination.page, pageSize: props.pagination.pageSize, total: props.pagination.total, - showSizeChanger: true, + showSizeChanger: false, showTotal: (total: number) => `共 ${total} 条`, }" :row-class-name="resolveRowClassName" diff --git a/apps/web-antd/src/views/order/list/index.vue b/apps/web-antd/src/views/order/list/index.vue index 579e477..96422ad 100644 --- a/apps/web-antd/src/views/order/list/index.vue +++ b/apps/web-antd/src/views/order/list/index.vue @@ -12,7 +12,6 @@ const { filters, handleExport, handlePageChange, - handleReset, handleSearch, isDetailLoading, isDrawerOpen, @@ -53,7 +52,6 @@ const { @update:payment-method="setPaymentMethod" @update:keyword="setKeyword" @search="handleSearch" - @reset="handleReset" @export="handleExport" /> diff --git a/apps/web-antd/src/views/order/list/styles/drawer.less b/apps/web-antd/src/views/order/list/styles/drawer.less index 54633a1..99f91e3 100644 --- a/apps/web-antd/src/views/order/list/styles/drawer.less +++ b/apps/web-antd/src/views/order/list/styles/drawer.less @@ -1,9 +1,27 @@ +.page-order-all { + .ant-drawer { + .ant-drawer-header { + padding: 14px 18px; + border-bottom: 1px solid #f0f0f0; + } + + .ant-drawer-body { + padding: 16px 20px; + } + + .ant-drawer-footer { + padding: 12px 20px; + border-top: 1px solid #f0f0f0; + } + } +} + .oa-section { - margin-bottom: 20px; + margin-bottom: 22px; .oa-section-title { padding-left: 10px; - margin-bottom: 12px; + margin-bottom: 14px; font-size: 14px; font-weight: 600; color: rgb(0 0 0 / 88%); @@ -26,6 +44,10 @@ } } +.oa-order-no { + font-family: ui-monospace, sfmono-regular, menlo, consolas, monospace; +} + .oa-detail-table { width: 100%; font-size: 13px; @@ -60,7 +82,7 @@ display: flex; flex-direction: column; gap: 6px; - margin-top: 12px; + padding: 12px 10px 0; font-size: 13px; > div { @@ -79,37 +101,62 @@ font-weight: 600; color: rgb(0 0 0 / 88%); border-top: 1px solid #f0f0f0; + + span:last-child { + font-size: 15px; + color: #1677ff; + } } } .oa-timeline { - padding-left: 4px; + position: relative; + padding-left: 22px; .oa-timeline-item { position: relative; display: flex; gap: 8px; align-items: center; - padding: 0 0 12px 16px; + padding-bottom: 18px; + font-size: 13px; - .dot { + &::before { position: absolute; top: 5px; - left: 0; - width: 8px; - height: 8px; + left: -22px; + width: 10px; + height: 10px; + content: ''; background: #1677ff; + border: 2px solid #d6e4ff; border-radius: 50%; } + &::after { + position: absolute; + top: 17px; + left: -18px; + width: 2px; + height: calc(100% - 12px); + content: ''; + background: #e8e8e8; + } + + &:last-child { + padding-bottom: 0; + + &::after { + display: none; + } + } + .text { - font-size: 13px; font-weight: 500; color: rgb(0 0 0 / 88%); } .time { - font-size: 13px; color: rgb(0 0 0 / 45%); } } diff --git a/apps/web-antd/src/views/order/list/styles/layout.less b/apps/web-antd/src/views/order/list/styles/layout.less index 5c8e6d7..f11f3ec 100644 --- a/apps/web-antd/src/views/order/list/styles/layout.less +++ b/apps/web-antd/src/views/order/list/styles/layout.less @@ -1,31 +1,76 @@ -.oa-filter-actions { +.oa-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; + padding: 16px 20px; + background: #fff; + border: 1px solid #f0f0f0; + border-radius: 10px; + box-shadow: 0 2px 8px rgb(15 23 42 / 6%); + + .oa-store-select { + width: 200px; + } .oa-date-input { width: 145px; } - .oa-date-sep { - font-size: 13px; - color: rgb(0 0 0 / 45%); + .oa-status-select { + width: 120px; } - .oa-select { + .oa-channel-select { + width: 110px; + } + + .oa-payment-select { width: 120px; } .oa-search { width: 200px; } + + .oa-toolbar-right { + margin-left: auto; + } + + .oa-date-sep { + font-size: 13px; + line-height: 32px; + color: rgb(0 0 0 / 45%); + } + + .oa-search-icon { + width: 14px; + height: 14px; + color: rgb(0 0 0 / 45%); + } + + .oa-export-btn { + display: inline-flex; + gap: 4px; + align-items: center; + } + + .ant-select-selector, + .ant-input, + .ant-input-affix-wrapper { + height: 32px; + font-size: 13px; + } + + .ant-input-affix-wrapper .ant-input { + height: 100%; + } } .oa-stats { display: flex; gap: 24px; - padding: 0 4px; + padding: 12px 0 4px; font-size: 13px; color: rgb(0 0 0 / 65%); diff --git a/apps/web-antd/src/views/order/list/styles/responsive.less b/apps/web-antd/src/views/order/list/styles/responsive.less index b9895c0..a203aa2 100644 --- a/apps/web-antd/src/views/order/list/styles/responsive.less +++ b/apps/web-antd/src/views/order/list/styles/responsive.less @@ -6,13 +6,28 @@ } @media (max-width: 768px) { - .oa-filter-actions { + .oa-toolbar { + padding: 14px 12px; + + .oa-store-select, .oa-date-input, - .oa-select, + .oa-status-select, + .oa-channel-select, + .oa-payment-select, .oa-search { width: 100%; } + .oa-toolbar-right { + width: 100%; + margin-left: 0; + } + + .oa-export-btn { + width: 100%; + justify-content: center; + } + .oa-date-sep { display: none; } diff --git a/apps/web-antd/src/views/order/list/styles/table.less b/apps/web-antd/src/views/order/list/styles/table.less index 7d72172..284079c 100644 --- a/apps/web-antd/src/views/order/list/styles/table.less +++ b/apps/web-antd/src/views/order/list/styles/table.less @@ -1,17 +1,47 @@ .oa-table-card { - padding: 6px 8px; background: #fff; border: 1px solid #f0f0f0; border-radius: 10px; + overflow: hidden; .ant-table-wrapper { .ant-table-thead > tr > th { white-space: nowrap; + font-size: 13px; } + + .ant-table-tbody > tr > td { + vertical-align: middle; + } + } + + .ant-pagination { + margin: 14px 16px; } } -.oa-row-dim { +.oa-order-no { + font-family: ui-monospace, sfmono-regular, menlo, consolas, monospace; +} + +.oa-items { + display: inline-block; + max-width: 180px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.oa-amount { + font-weight: 600; + white-space: nowrap; +} + +.oa-detail-action { + padding-inline: 0; +} + +.oa-row-dim td { opacity: 0.55; } diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 6835fbe..2d8217f 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -38,6 +38,7 @@ catalog: '@intlify/unplugin-vue-i18n': ^6.0.8 '@jspm/generator': ^2.9.0 '@manypkg/get-packages': ^3.1.0 + '@microsoft/signalr': ^8.0.7 '@nolebase/vitepress-plugin-git-changelog': ^2.18.2 '@playwright/test': ^1.58.0 '@pnpm/workspace.read-manifest': ^1000.2.10