优化后台帖子列表样式

mlogclub · Feb 26, 2024 · 65d9f12 · 65d9f12
1 parent f07298f
commit 65d9f12
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 21 deletions.
diff --git a/admin/src/assets/style/custom.less b/admin/src/assets/style/custom.less
@@ -1,5 +1,7 @@
 .container {
-    padding: 10px;
+    /* padding: 10px; */
+    margin: 10px;
+    background-color: var(--color-bg-1);
 
     .container-header {
         display: flex;
@@ -17,6 +19,21 @@
     .container-main {
         padding: 10px;
         overflow: auto;
-        background-color: var(--color-bg-1);
+
+         &::-webkit-scrollbar-track-piece {
+            background: var(--color-neutral-3);
+        }
+
+        &::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: var(--color-neutral-4);
+
+            /* border-radius: 20px; */
+        }
+
+        /* background-color: var(--color-bg-1); */
     }
 }
diff --git a/admin/src/auto-imports.d.ts b/admin/src/auto-imports.d.ts
@@ -39,7 +39,7 @@ declare global {
   const getUserInfo: typeof import('./api/user')['getUserInfo']
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
-  const index: typeof import('./store/modules/tab-bar/index')['default']
+  const index: typeof import('./store/modules/user/index')['default']
   const inject: typeof import('vue')['inject']
   const isAnyBlank: typeof import('./composables/index')['isAnyBlank']
   const isBlank: typeof import('./composables/index')['isBlank']
@@ -342,7 +342,7 @@ declare module 'vue' {
     readonly getUserInfo: UnwrapRef<typeof import('./api/user')['getUserInfo']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
-    readonly index: UnwrapRef<typeof import('./store/modules/tab-bar/index')['default']>
+    readonly index: UnwrapRef<typeof import('./store/modules/user/index')['default']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
     readonly isAnyBlank: UnwrapRef<typeof import('./composables/index')['isAnyBlank']>
     readonly isBlank: UnwrapRef<typeof import('./composables/index')['isBlank']>
@@ -638,7 +638,7 @@ declare module '@vue/runtime-core' {
     readonly getUserInfo: UnwrapRef<typeof import('./api/user')['getUserInfo']>
     readonly h: UnwrapRef<typeof import('vue')['h']>
     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
-    readonly index: UnwrapRef<typeof import('./store/modules/tab-bar/index')['default']>
+    readonly index: UnwrapRef<typeof import('./store/modules/user/index')['default']>
     readonly inject: UnwrapRef<typeof import('vue')['inject']>
     readonly isAnyBlank: UnwrapRef<typeof import('./composables/index')['isAnyBlank']>
     readonly isBlank: UnwrapRef<typeof import('./composables/index')['isBlank']>

diff --git a/admin/src/composables/index.ts b/admin/src/composables/index.ts
@@ -81,6 +81,8 @@ export function useTableHeight() {
     proxy.$el.getElementsByClassName('container-header')[0];
   const containerMainRef =
     proxy.$el.getElementsByClassName('container-main')[0];
+  const containerFooterRef =
+    proxy.$el.getElementsByClassName('container-footer')[0];
 
   if (!containerMainRef) {
     return;
@@ -94,6 +96,10 @@ export function useTableHeight() {
     if (containerHeaderRef) {
       height -= containerHeaderRef.clientHeight;
     }
+    if (containerFooterRef) {
+      height -= containerFooterRef.clientHeight;
+    }
+    // height -= 32;
     containerMainRef.style.height = `${Math.max(height, minHeight)}px`;
   }
 

diff --git a/admin/src/views/pages/topic/index.vue b/admin/src/views/pages/topic/index.vue
@@ -43,23 +43,24 @@
       </a-form>
     </div>
     <div class="container-main">
-      <div v-if="data && data.results">
+      <div v-if="data && data.results" class="topic-container">
         <topic-list :results="data.results" @change="list" />
-        <div style="margin-top: 10px; display: flex; justify-content: flex-end">
-          <a-pagination
-            :total="pagination.total"
-            :current="pagination.current"
-            :page-size="pagination.pageSize"
-            :show-total="pagination.showTotal"
-            :show-jumper="pagination.showJumper"
-            :show-page-size="pagination.showPageSize"
-            @change="onPageChange"
-            @page-size-change="onPageSizeChange"
-          />
-        </div>
       </div>
       <a-empty v-else />
     </div>
+    <div class="container-footer">
+      <a-pagination
+        style="margin: 10px"
+        :total="pagination.total"
+        :current="pagination.current"
+        :page-size="pagination.pageSize"
+        :show-total="pagination.showTotal"
+        :show-jumper="pagination.showJumper"
+        :show-page-size="pagination.showPageSize"
+        @change="onPageChange"
+        @page-size-change="onPageSizeChange"
+      />
+    </div>
   </div>
 </template>
 
@@ -93,6 +94,10 @@
     };
   });
 
+  onMounted(() => {
+    useTableHeight();
+  });
+
   const list = async () => {
     loading.value = true;
     try {
@@ -121,8 +126,9 @@
 </script>
 
 <style scoped lang="less">
-  .topic-list {
-    .topic-item {
-    }
+  .container-footer {
+    // padding: 10px;
+    display: flex;
+    justify-content: end;
   }
 </style>