msumshk/TakeoutSaaS.TenantUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复批量工具抽屉布局问题
All checks were successful
Build and Deploy TenantUI / build-and-deploy (push) Successful in 51s
Details

Browse Source 
- 修复导入导出面板按钮重叠，改为纵向排列
- 移除抽屉关闭按钮(×)
- 调价面板步骤2拆分为两行布局，输入框独立一行
This commit is contained in:
MSuMshk
2026-02-26 17:07:18 +08:00
parent 5abd5b2abe
commit f2c50f69d1
4 changed files with 164 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/views/product/batch/components/BatchImportExportPanel.vue
View File

@@ -85,7 +85,7 @@ function setExportCategoryIds(value: unknown) {
<article class="pbt-sub-card"> <article class="pbt-sub-card">
<h4>导出商品</h4> <h4>导出商品</h4>
<div class="pbt-step" style="margin-bottom: 12px"> <div class="pbt-step">
<div class="pbt-pills"> <div class="pbt-pills">
<button <button
type="button" type="button"

5
apps/web-antd/src/views/product/batch/components/BatchPriceAdjustPanel.vue
View File

@@ -143,6 +143,7 @@ function setAmount(value: null | number | string) {
<div class="pbt-step"> <div class="pbt-step">
<div class="pbt-step-label"><span class="num">2</span> 调价方式</div> <div class="pbt-step-label"><span class="num">2</span> 调价方式</div>
<!-- 1. 方向与类型选择 -->
<div class="pbt-adjust-row"> <div class="pbt-adjust-row">
<div class="pbt-pills"> <div class="pbt-pills">
<button <button
@@ -168,11 +169,15 @@ function setAmount(value: null | number | string) {
{{ item.label }} {{ item.label }}
</button> </button>
</div> </div>
</div>
<!-- 2. 数值输入与预览 -->
<div class="pbt-adjust-input">
<InputNumber <InputNumber
:value="props.amount" :value="props.amount"
:min="0" :min="0"
:step="0.1" :step="0.1"
class="pbt-number" class="pbt-number"
:addon-after="props.amountType === 'percent' ? '%' : '¥'"
@update:value="setAmount" @update:value="setAmount"
/> />
<Button :loading="props.previewLoading" @click="emit('preview')"> <Button :loading="props.previewLoading" @click="emit('preview')">

1
apps/web-antd/src/views/product/batch/index.vue
View File

@@ -188,6 +188,7 @@ const activeToolTitle = computed(() => {
:title="activeToolTitle" :title="activeToolTitle"
:open="Boolean(activeTool)" :open="Boolean(activeTool)"
:width="920" :width="920"
:closable="false"
@close="closeTool" @close="closeTool"
> >
<BatchPriceAdjustPanel <BatchPriceAdjustPanel

215
apps/web-antd/src/views/product/batch/styles/panel.less
View File

@@ -1,17 +1,26 @@
.pbt-drawer .ant-drawer-header { /* 批量工具抽屉样式 —— 与项目其他抽屉保持一致的设计语言。 */
padding: 14px 20px; .pbt-drawer {
border-bottom: 1px solid #f0f0f0; .ant-drawer-content-wrapper {
} box-shadow:
0 8px 24px rgb(0 0 0 / 8%),
0 2px 6px rgb(0 0 0 / 4%);
}
.pbt-drawer .ant-drawer-title { .ant-drawer-header {
font-size: 15px; min-height: 56px;
font-weight: 600; padding: 0 24px;
color: #1a1a2e; border-bottom: 1px solid #f0f0f0;
} }
.pbt-drawer .ant-drawer-body { .ant-drawer-title {
padding: 16px 20px 20px; font-size: 16px;
background: #f8fafc; font-weight: 600;
color: #1f2937;
}
.ant-drawer-body {
padding: 20px 24px;
}
} }
.page-product-batch, .page-product-batch,
@@ -39,9 +48,9 @@
.pbt-panel-hd h3 { .pbt-panel-hd h3 {
margin: 0; margin: 0;
font-size: 15px; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #1a1a2e; color: #1f2937;
} }
.pbt-close { .pbt-close {
@@ -52,26 +61,45 @@
cursor: pointer; cursor: pointer;
background: none; background: none;
border: none; border: none;
border-radius: 8px; border-radius: 6px;
} }
.pbt-close:hover { .pbt-close:hover {
color: #111827; color: #111827;
background: #f3f4f6; background: #f5f5f5;
} }
/* ---- 步骤区块 ---- */
.pbt-step { .pbt-step {
padding: 16px;
margin-bottom: 16px; margin-bottom: 16px;
background: #fafbfc;
border: 1px solid #f0f0f0;
border-radius: 10px;
} }
.pbt-step-label { .pbt-step-label {
position: relative;
display: flex; display: flex;
gap: 8px; gap: 8px;
align-items: center; align-items: center;
margin-bottom: 8px; padding-left: 12px;
font-size: 13px; margin-bottom: 12px;
font-weight: 500; font-size: 14px;
color: #4b5563; font-weight: 600;
line-height: 1;
color: #1f2937;
}
.pbt-step-label::before {
position: absolute;
top: -1px;
bottom: -1px;
left: 0;
width: 3px;
content: '';
background: linear-gradient(180deg, #4da3ff 0%, #1677ff 100%);
border-radius: 4px;
} }
.pbt-step-label .num { .pbt-step-label .num {
@@ -81,58 +109,82 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
font-size: 11px; font-size: 11px;
color: #fff; font-weight: 700;
background: #1677ff; color: #1677ff;
background: #eff6ff;
border-radius: 50%; border-radius: 50%;
} }
/* ---- 胶囊按钮 ---- */
.pbt-pills { .pbt-pills {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 8px;
margin-bottom: 8px; margin-bottom: 10px;
} }
.pbt-pill { .pbt-pill {
min-width: 80px;
height: 34px; height: 34px;
padding: 0 14px; padding: 0 16px;
font-size: 13px; font-size: 13px;
color: #4b5563; color: #6b7280;
cursor: pointer; cursor: pointer;
background: #fff; background: #fff;
border: 1px solid #d1d5db; border: 1px solid #e5e7eb;
border-radius: 8px; border-radius: 999px;
transition: var(--pbt-transition); transition:
color 0.2s ease,
border-color 0.2s ease,
background-color 0.2s ease;
} }
.pbt-pill:hover { .pbt-pill:hover {
color: #1677ff; color: #1677ff;
border-color: #1677ff; border-color: #91caff;
} }
.pbt-pill.active { .pbt-pill.active {
color: #fff; color: #1677ff;
background: #1677ff; background: #eff6ff;
border-color: #1677ff; border-color: #1677ff;
} }
/* ---- 调价行 ---- */
.pbt-adjust-row { .pbt-adjust-row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 16px;
align-items: center; align-items: center;
.pbt-pills {
margin-bottom: 0;
}
}
.pbt-adjust-input {
display: flex;
gap: 12px;
align-items: center;
margin-top: 12px;
} }
.pbt-number { .pbt-number {
width: 130px; width: 160px;
} }
.pbt-select-wide { .pbt-select-wide {
width: min(680px, 100%); width: min(100%, 640px);
} }
.pbt-select-narrow { .pbt-select-narrow {
width: min(280px, 100%); width: min(100%, 280px);
}
/* ---- 预览表格 ---- */
.pbt-table {
border: 1px solid #f0f0f0;
border-radius: 8px;
} }
.pbt-table .up { .pbt-table .up {
@@ -145,67 +197,114 @@
color: #22c55e; color: #22c55e;
} }
/* ---- 信息提示条 ---- */
.pbt-info { .pbt-info {
padding: 8px 12px;
margin: 8px 0 16px;
font-size: 13px;
color: #1f2937;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 8px;
}
.pbt-actions {
display: flex; display: flex;
gap: 8px; gap: 8px;
align-items: center; align-items: center;
padding-top: 12px; padding: 10px 14px;
border-top: 1px solid #f3f4f6; margin: 8px 0 16px;
font-size: 13px;
color: #15803d;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 10px;
} }
/* ---- 底部操作栏 ---- */
.pbt-actions {
display: flex;
gap: 12px;
align-items: center;
padding-top: 16px;
margin-top: 4px;
border-top: 1px solid #f0f0f0;
}
.pbt-actions .ant-btn {
min-width: 96px;
height: 40px;
padding: 0 24px;
font-size: 15px;
border-radius: 10px;
}
/* ---- 导入导出子卡片 ---- */
.pbt-sub-cards { .pbt-sub-cards {
display: grid; display: flex;
grid-template-columns: repeat(2, minmax(0, 1fr)); flex-direction: column;
gap: 16px; gap: 16px;
} }
.pbt-sub-card { .pbt-sub-card {
padding: 16px; display: flex;
border: 1px solid #f0f0f0; flex-direction: column;
gap: 12px;
padding: 20px;
background: #fafbfc;
border: 1px solid #e5e7eb;
border-radius: 10px; border-radius: 10px;
transition: border-color 0.2s ease;
}
.pbt-sub-card:hover {
border-color: #d1d5db;
} }
.pbt-sub-card h4 { .pbt-sub-card h4 {
margin: 0 0 12px; position: relative;
padding-left: 12px;
margin: 0;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #1a1a2e; line-height: 1;
color: #1f2937;
} }
.pbt-sub-card h4::before {
position: absolute;
top: -1px;
bottom: -1px;
left: 0;
width: 3px;
content: '';
background-color: #1677ff;
border-radius: 2px;
}
/* ---- 上传区域 ---- */
.pbt-upload-icon { .pbt-upload-icon {
margin: 0; margin: 0;
font-size: 22px; font-size: 20px;
font-weight: 700;
color: #1677ff;
} }
.pbt-upload-title { .pbt-upload-title {
margin: 2px 0; margin: 4px 0 0;
font-size: 13px; font-size: 13px;
color: #4b5563; color: #4b5563;
} }
.pbt-upload-tip { .pbt-upload-tip {
margin: 0; margin: 2px 0 0;
font-size: 12px; font-size: 12px;
color: #9ca3af; color: #9ca3af;
} }
.pbt-upload-file { .pbt-upload-file {
margin-top: 10px;
font-size: 12px; font-size: 12px;
color: #4b5563; color: #4b5563;
} }
.pbt-upload-actions { .pbt-upload-actions {
margin-top: 10px; display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.pbt-upload-actions .ant-btn {
border-radius: 8px;
} }
} }