1

electron-vue-template/src/renderer/components/zebra/ZebraDashboard.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { zebraApi, type ZebraOrder, type BanmaAccount } from '../../api/zebra'
 import AccountManager from '../common/AccountManager.vue'
 
@@ -49,7 +50,7 @@ function formatCny(v?: number) {
 
 async function loadShops() {
   try {
-    const resp = await zebraApi.getShops()
+    const resp = await zebraApi.getShops({ accountId: Number(accountId.value) || undefined })
     const list = (resp as any)?.data?.data?.list ?? (resp as any)?.list ?? []
     shopList.value = list
   } catch (e) {
@@ -99,6 +100,7 @@ async function fetchPageData(startDate: string, endDate: string) {
 
   try {
     const data = await zebraApi.getOrders({
+      accountId: Number(accountId.value) || undefined,
       startDate,
       endDate,
       page: fetchCurrentPage.value,
@@ -146,9 +148,9 @@ async function exportToExcel() {
   exportLoading.value = true
   try {
     const result = await zebraApi.exportAndSaveOrders({ orders: allOrderData.value })
-    alert(`Excel文件已保存到: ${result.filePath}`)
-  } catch (e) {
-    alert('导出Excel失败')
+    ElMessage({ message: `Excel文件已保存到: ${result.filePath}` as any, type: 'success' })
+  } catch (e: any) {
+    ElMessage({ message: e?.message || '导出Excel失败', type: 'error' })
   } finally {
     exportLoading.value = false
   }
@@ -190,28 +192,32 @@ function openManageAccount() {
 }
 
 async function submitAccount() {
-  if (!formUsername.value) { alert('请输入账号'); return }
+  if (!formUsername.value) { ElMessage({ message: '请输入账号', type: 'warning' }); return }
   const payload: BanmaAccount = {
     id: accountForm.value.id,
     name: accountForm.value.name || formUsername.value,
     username: formUsername.value,
+    password: formPassword.value || '',
     isDefault: accountForm.value.isDefault || 0,
     status: accountForm.value.status || 1,
   }
-  const { id } = await zebraApi.saveAccount(payload)
-  if (rememberPwd.value && formPassword.value) {
-    localStorage.setItem(`banma:pwd:${formUsername.value}`, formPassword.value)
-  } else {
-    localStorage.removeItem(`banma:pwd:${formUsername.value}`)
+  try {
+    const res = await zebraApi.saveAccount(payload)
+    const id = (res as any)?.data?.id || (res as any)?.id
+    if (!id) throw new Error((res as any)?.msg || '保存失败')
+    accountDialogVisible.value = false
+    await loadAccounts()
+    if (id) accountId.value = id
+  } catch (e: any) {
+    ElMessage({ message: e?.message || '账号或密码错误，无法获取Token', type: 'error' })
   }
-  accountDialogVisible.value = false
-  await loadAccounts()
-  if (id) accountId.value = id
 }
 
 async function removeCurrentAccount() {
   if (!isEditMode.value || !accountForm.value.id) return
-  if (!confirm('确认删除该账号？')) return
+  try {
+    await ElMessageBox.confirm('确认删除该账号？', '提示', { type: 'warning' })
+  } catch { return }
   await zebraApi.removeAccount(accountForm.value.id)
   accountDialogVisible.value = false
   await loadAccounts()
@@ -304,6 +310,16 @@ async function removeCurrentAccount() {
       <div class="content">
         <!-- 数据表格（无数据时也显示表头） -->
         <div class="table-section">
+          <div v-if="showProgress" class="progress-section">
+            <div class="progress-box">
+              <div class="progress-container">
+                <div class="progress-bar">
+                  <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
+                </div>
+                <div class="progress-text">{{ progressPercentage }}%</div>
+              </div>
+            </div>
+          </div>
           <div class="table-wrapper">
             <table class="table">
               <thead>
@@ -365,18 +381,14 @@ async function removeCurrentAccount() {
               <div>加载中...</div>
             </div>
             <div v-else class="empty-container">
-              <div class="empty-icon">📄</div>
+              <div class="empty-icon" style="font-size:48px;">📄</div>
               <div class="empty-text">暂无数据，请获取订单</div>
             </div>
           </div>
         </div>
 
-        <!-- 底部区域：进度条 + 分页器 -->
+        <!-- 底部区域：分页器 -->
         <div class="pagination-fixed">
-          <div v-if="showProgress" class="progress-bottom">
-            <div class="progress-bar"><div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div></div>
-            <div class="progress-text">{{ progressPercentage }}%</div>
-          </div>
           <el-pagination
             background
             :current-page="currentPage"
@@ -458,9 +470,10 @@ export default {
 .btn-blue { background: #1677FF; border-color: #1677FF; color: #fff; }
 .btn-blue:disabled { background: #a6c8ff; border-color: #a6c8ff; color: #fff; }
 .tip { color: #909399; font-size: 12px; margin-bottom: 8px; text-align: left; }
-.avatar { width: 18px; height: 18px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; }
+.avatar { width: 22px; height: 22px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; }
 .acct-text { vertical-align: middle; }
 .acct-row { display: grid; grid-template-columns: 8px 18px 1fr auto; align-items: center; gap: 6px; width: 100%; }
+.acct-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 12px; }
 .status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
 .status-dot.on { background: #22c55e; }
 .status-dot.off { background: #f87171; }
@@ -489,8 +502,8 @@ export default {
 .table td { padding: 10px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
 .table tbody tr:hover { background: #f9f9f9; }
 .truncate { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.image-container { display: flex; justify-content: center; align-items: center; width: 24px; height: 20px; margin: 0 auto; background: #f8f9fa; border-radius: 2px; }
-.thumb { width: 16px; height: 16px; object-fit: contain; border-radius: 2px; }
+.image-container { display: flex; justify-content: center; align-items: center; width: 28px; height: 24px; margin: 0 auto; background: #f8f9fa; border-radius: 2px; }
+.thumb { width: 22px; height: 22px; object-fit: contain; border-radius: 2px; }
 .price-tag { color: #e6a23c; font-weight: bold; }
 .fee-tag { color: #909399; font-weight: 500; }
 .table-loading { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 14px; color: #606266; }
@@ -499,10 +512,12 @@ export default {
 .pagination-fixed { position: sticky; bottom: 0; z-index: 2; padding: 8px 12px; background: #f9f9f9; border-radius: 4px; display: flex; justify-content: center; border-top: 1px solid #ebeef5; margin-top: 8px; }
 .tag { display: inline-block; padding: 0 6px; margin-left: 6px; font-size: 12px; background: #ecf5ff; color: #409EFF; border-radius: 3px; }
 .empty-abs { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
-.progress-bottom { display: flex; align-items: center; gap: 8px; margin-right: auto; }
-.progress-bottom .progress-bar { width: 100%; height: 6px; background: #e3eeff; border-radius: 999px; overflow: hidden; }
-.progress-bottom .progress-fill { height: 100%; background: #1677FF; border-radius: 999px; transition: width 0.3s ease; }
-.progress-bottom .progress-text { font-size: 13px; color: #1677FF; font-weight: 500; min-width: 44px; text-align: right; }
+.progress-section { margin: 0px 12px 0px 12px; }
+.progress-box { padding: 4px 0; }
+.progress-container { display: flex; align-items: center; gap: 8px; }
+.progress-bar { flex: 1; height: 6px; background: #e3eeff; border-radius: 999px; overflow: hidden; }
+.progress-fill { height: 100%; background: #1677FF; border-radius: 999px; transition: width 0.3s ease; }
+.progress-text { font-size: 13px; color: #1677FF; font-weight: 500; min-width: 44px; text-align: right; }
 </style>