前端样式修复

ArkMowers · Dec 22, 2023 · 1c66687 · 1c66687
1 parent 30d33df
commit 1c66687
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 7 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@vicons/carbon": "^0.12.0",
     "@vicons/fa": "^0.12.0",
+    "@vicons/fluent": "^0.12.0",
     "@vicons/ionicons4": "^0.12.0",
     "@vicons/ionicons5": "^0.12.0",
     "@vicons/material": "^0.12.0",

diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -43,7 +43,7 @@
             </n-layout-content>
             <n-layout-footer v-if="mobile">
               <n-tabs type="line" justify-content="space-evenly" size="small">
-                <n-tab name="日志" @click="$router.push('/log')">
+                <n-tab name="日志" @click="$router.push('/')">
                   <div style="display: flex; flex-direction: column; align-items: center">
                     <n-icon size="20" style="margin-bottom: -1px" :component="BookOutline" />
                     日志
@@ -104,7 +104,7 @@
                     帮助
                   </div>
                 </n-tab>
-                <n-tab name="资源" @click="$router.push('/')">
+                <n-tab name="资源" @click="$router.push('/readme')">
                   <div style="display: flex; flex-direction: column; align-items: center">
                     <n-icon size="20" style="margin-bottom: -1px" :component="Bag" />
                     资源
@@ -411,7 +411,7 @@ td {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
   width: calc(100% - 24px);
   height: calc(100% - 24px);
 }

diff --git a/ui/src/pages/Log.vue b/ui/src/pages/Log.vue
@@ -50,6 +50,10 @@ function refresh() {
 import PlayIcon from '@vicons/ionicons5/Play'
 import StopIcon from '@vicons/ionicons5/Stop'
 import ReloadIcon from '@vicons/ionicons5/Reload'
+import CollapseIcon from '@vicons/fluent/PanelTopContract20Regular'
+import ExpandIcon from '@vicons/fluent/PanelTopExpand20Regular'
+
+const show_task_table = ref(true)
 </script>
 
 <template>
@@ -61,7 +65,7 @@ import ReloadIcon from '@vicons/ionicons5/Reload'
           <th>任务</th>
         </tr>
       </thead>
-      <tbody>
+      <tbody v-show="show_task_table">
         <template v-for="task in task_list">
           <tr>
             <td :rowspan="task.task.length">{{ task.time }}</td>
@@ -105,25 +109,43 @@ import ReloadIcon from '@vicons/ionicons5/Reload'
         <span class="scroll-label">自动滚动</span>
       </div>
     </div>
+    <n-button
+      class="toggle-table-collapse-btn"
+      size="small"
+      @click="show_task_table = !show_task_table"
+      :focusable="false"
+    >
+      <template #icon>
+        <n-icon>
+          <collapse-icon v-if="show_task_table" />
+          <expand-icon v-else />
+        </n-icon>
+      </template>
+    </n-button>
   </div>
 </template>
 
 <style scoped lang="scss">
 .log {
-  flex-grow: 1;
   overflow: hidden;
+  flex: 1;
 }
 
 .task-table {
   max-width: 600px;
 
   th {
     padding: 2px 16px;
+
+    &:first-child {
+      box-sizing: border-box;
+      width: 74px;
+    }
   }
 
   td {
     height: 24px;
-    padding: 0 16px;
+    padding: 2px 8px;
   }
 }
 
@@ -142,6 +164,12 @@ import ReloadIcon from '@vicons/ionicons5/Reload'
 .expand {
   flex-grow: 1;
 }
+
+.toggle-table-collapse-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
 </style>
 
 <style>

diff --git a/ui/src/pages/readme.vue b/ui/src/pages/readme.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="home-container" style="width: auto; align-content: center">
+  <div class="home-container readme">
     <!-- <h2>更新日志</h2> -->
     <h1 id="资源合集">资源合集</h1>
     <div>
@@ -154,3 +154,10 @@
     </div>
   </div>
 </template>
+
+<style scoped>
+.readme {
+  word-break: break-all;
+  max-width: 800px;
+}
+</style>