Browse Source

🎈 perf: 优化若干内容

Pchen. 1 week ago
parent
commit
ff5eca9f60

+ 1 - 1
src/components/skeleton/StoreGridSkeleton.vue

@@ -46,7 +46,7 @@ const gridStyle = computed(() => ({
     align-items: center;
     justify-content: center;
     min-height: 120px;
-    background: fade(@store-accent, 8%);
+    background: @store-cover-bg;
     border-bottom: 1px solid @store-card-border;
   }
 

+ 15 - 1
src/components/skeleton/StoreStackSkeleton.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="store-stack-skeleton">
     <div v-for="n in count" :key="n" class="store-stack-skeleton__item">
-      <a-skeleton-shape size="small" />
+      <div class="store-stack-skeleton__icon">
+        <a-skeleton-shape size="small" />
+      </div>
       <div class="store-stack-skeleton__content">
         <a-skeleton-line :widths="headerWidths" :rows="1" />
         <a-skeleton-line :widths="['100%', '70%']" :rows="2" />
@@ -44,6 +46,18 @@ defineProps({
     border-radius: @store-radius;
   }
 
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 72px;
+    height: 72px;
+    background: @store-cover-bg;
+    border-radius: @store-radius-sm;
+    border: 1px solid @store-card-border;
+  }
+
   &__content {
     flex: 1 1 200px;
     min-width: 0;

+ 40 - 2
src/pages/admin/lepaoProxy/index.vue

@@ -17,7 +17,7 @@
       <a-row :gutter="16" style="margin-top: 16px">
         <a-col :span="24">
           <a-card title="当前状态" :bordered="false" class="panel">
-            <a-descriptions :column="2" bordered size="small">
+            <a-descriptions :column="isMobile ? 1 : 2" bordered size="small">
               <a-descriptions-item label="extractKey">
                 <a-tag :color="status?.extract_key_configured ? 'green' : 'orangered'">
                   {{ status?.extract_key_configured ? '已配置' : '未配置' }}
@@ -138,13 +138,16 @@
             </a-button>
           </a-space>
         </template>
+        <div class="table-wrap">
         <a-table
           v-model:selected-keys="selectedLogKeys"
           row-key="id"
+          class="table"
           :row-selection="{ type: 'checkbox', showCheckedAll: true }"
           :data="logData"
           :loading="logLoading"
           :bordered="false"
+          :scroll="{ x: TABLE_SCROLL_X }"
           :pagination="{
             showPageSize: true,
             showJumper: true,
@@ -191,6 +194,7 @@
             </a-table-column>
           </template>
         </a-table>
+        </div>
       </a-card>
       </template>
     </a-skeleton>
@@ -209,7 +213,10 @@ import {
   getAdminLepaoProxyResources
 } from '@/api/lepao'
 
-const { tableFixed } = useResponsiveTable()
+const { isMobile, tableFixed } = useResponsiveTable()
+
+/** 列宽合计(含勾选列与摘要列最小宽度),保证小屏可横向滚动 */
+const TABLE_SCROLL_X = 1200
 
 const pageLoading = ref(false)
 const logLoading = ref(false)
@@ -531,4 +538,35 @@ onMounted(async () => {
   font-size: 12px;
 }
 
+.table-wrap {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.table {
+  min-width: 100%;
+}
+
+@media (max-width: 768px) {
+  .lepao-proxy-page {
+    padding: 12px 12px 24px;
+  }
+
+  .log-card :deep(.arco-card-header) {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .log-card :deep(.arco-card-header-extra) {
+    width: 100%;
+    margin-left: 0 !important;
+  }
+
+  .log-card :deep(.arco-card-header-extra .arco-space) {
+    flex-wrap: wrap;
+    width: 100%;
+  }
+}
+
 </style>

+ 1 - 1
src/pages/doc/index.vue

@@ -167,7 +167,7 @@ onMounted(loadCategories)
     align-items: center;
     justify-content: center;
     min-height: 120px;
-    background: fade(@store-accent, 8%);
+    background: @store-cover-bg;
     border-bottom: 1px solid @store-card-border;
   }
 

+ 9 - 1
src/pages/download/index.vue

@@ -118,9 +118,17 @@ onMounted(loadItems)
   }
 
   &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 72px;
+    height: 72px;
     font-size: 2rem;
     line-height: 1;
-    flex-shrink: 0;
+    background: @store-cover-bg;
+    border-radius: @store-radius-sm;
+    border: 1px solid @store-card-border;
   }
 
   &__content {

+ 1 - 1
src/pages/store/goodsDetail/index.vue

@@ -300,7 +300,7 @@ getGoodsDetail()
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #e8f5ec, #d4f0dc);
+  background: @store-cover-bg;
   border-radius: @store-radius-sm;
   margin-bottom: 20px;
 }

+ 1 - 1
src/pages/store/goodsList/index.vue

@@ -173,7 +173,7 @@ GetNotice()
   &__visual {
     position: relative;
     height: 140px;
-    background: linear-gradient(135deg, #e8f5ec 0%, #d4f0dc 100%);
+    background: @store-cover-bg;
     display: flex;
     align-items: center;
     justify-content: center;

+ 4 - 0
src/styles/auth-marketing.less

@@ -151,6 +151,10 @@ a.auth-topbar__brand {
     pointer-events: auto;
   }
 
+  :deep(.arco-input-append) {
+    padding: 0px
+  }
+
   :deep(.arco-input-wrapper) {
     pointer-events: auto;
     background: @store-card-bg;

+ 1 - 0
src/styles/store-theme.less

@@ -12,6 +12,7 @@
 @store-shadow: 0 4px 24px rgba(27, 48, 34, 0.06);
 @store-shadow-hover: 0 12px 40px rgba(27, 48, 34, 0.12);
 @store-price: #e85d04;
+@store-cover-bg: linear-gradient(135deg, #e8f5ec 0%, #d4f0dc 100%);
 // 内容区宽度:相对父级 100%,窄栏用 rem 上限(非固定 px)
 @store-content-narrow: min(100%, 42rem);
 @store-page-padding-x: clamp(12px, 2.5vw, 40px);