Merge branch 'refs/heads/test'

wushuo894 · Sep 7, 2024 · 639baf4 · 639baf4
2 parents 8b49008 + f64bf13
commit 639baf4
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 22 deletions.
diff --git a/UPDATE.md b/UPDATE.md
@@ -1 +1,3 @@
-修正填充文本
+增加按钮图标
+
+优化移动端布局
diff --git a/pom.xml b/pom.xml
@@ -6,7 +6,7 @@
 
     <groupId>ani.rss</groupId>
     <artifactId>ani-rss</artifactId>
-    <version>1.0.79</version>
+    <version>1.0.80</version>
 
     <properties>
         <maven.compiler.source>11</maven.compiler.source>

diff --git a/ui/package.json b/ui/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "crypto-js": "^4.2.0",
     "element-plus": "^2.8.1",
     "vue": "^3.4.38"

diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -18,17 +18,45 @@
           </el-option>
         </el-select>
       </div>
-      <el-button @click="add?.showAdd">添加</el-button>
-      <el-button @click="config?.showConfig">设置</el-button>
-      <el-button @click="logs?.showLogs">日志</el-button>
+      <el-button type="primary" @click="add?.showAdd">
+        <el-icon :class="elIconClass()">
+          <Plus/>
+        </el-icon>
+        <template v-if="itemsPerRow > 1">
+          添加
+        </template>
+      </el-button>
+      <el-tooltip content="设置">
+        <el-button @click="config?.showConfig">
+          <el-icon :class="elIconClass()">
+            <Setting/>
+          </el-icon>
+          <template v-if="itemsPerRow > 1">
+            设置
+          </template>
+        </el-button>
+      </el-tooltip>
+      <el-tooltip content="日志">
+        <el-button @click="logs?.showLogs">
+          <el-icon :class="elIconClass()">
+            <Tickets/>
+          </el-icon>
+          <template v-if="itemsPerRow > 1">
+            日志
+          </template>
+        </el-button>
+      </el-tooltip>
     </div>
   </div>
   <div style="margin: 0 10px;min-height: 500px" v-loading="loading">
     <div class="grid-container">
       <div v-for="(item,index) in searchList().slice((currentPage-1)*pageSize,(currentPage-1)*pageSize+pageSize)">
         <el-card shadow="never">
-          <div style="display: flex;width: 100%;">
-            <img :src="'/api/file?filename='+item['cover']" height="130" width="92" :alt="item.title" style="border-radius: 4px;">
+          <div style="display: flex;width: 100%;align-items: center;">
+            <div style="height: 100%;">
+              <img :src="'/api/file?filename='+item['cover']" height="130" width="92" :alt="item.title"
+                   style="border-radius: 4px;">
+            </div>
             <div style="flex-grow: 1;position: relative;">
               <div style="margin-left: 10px;">
                 <div style="
@@ -57,9 +85,10 @@
                 <div style="
                         width: 180px;
                         display: grid;
-                        grid-gap: 5px;
-                        grid-template-columns: repeat(3, 1fr);
-                        ">
+                        grid-gap: 4px;
+                        "
+                     :class="itemsPerRow > 1 ? 'gtc3' : 'gtc2'"
+                >
                   <el-tag>
                     第 {{ item.season }} 季
                   </el-tag>
@@ -69,11 +98,15 @@
                   <el-tag type="success" v-else>
                     未启用
                   </el-tag>
-                  <el-tag type="info">
-                    {{ item['subgroup'] }}
+                  <el-tag type="info" v-if="itemsPerRow > 1">
+                      {{ item['subgroup'] }}
+                  </el-tag>
+                  <el-tag type="info" v-else>
+                    {{ item['subgroup'].substr(0,6) }}
                   </el-tag>
                   <el-tag type="warning" v-if="item['currentEpisodeNumber']">
-                    {{ item['currentEpisodeNumber'] }} / {{ item['totalEpisodeNumber'] ? item['totalEpisodeNumber'] : '*' }}
+                    {{ item['currentEpisodeNumber'] }} /
+                    {{ item['totalEpisodeNumber'] ? item['totalEpisodeNumber'] : '*' }}
                   </el-tag>
                   <el-tag type="danger" v-if="item.ova">
                     ova
@@ -85,12 +118,19 @@
               </div>
               <div
                   style="display: flex;align-items: flex-end;justify-content:flex-end; flex-direction: column;position: absolute;right: 0;bottom: 0;">
-                <el-button @click="edit?.showEdit(item)">编辑
+                <el-button text @click="edit?.showEdit(item)" bg>
+                  <el-icon>
+                    <EditIcon/>
+                  </el-icon>
                 </el-button>
                 <div style="height: 5px;"></div>
                 <el-popconfirm title="你确定要删除吗?" @confirm="delAni(item)">
                   <template #reference>
-                    <el-button :loading="item['deleteLoading']">删除</el-button>
+                    <el-button type="danger" text :loading="item['deleteLoading']" bg>
+                      <el-icon>
+                        <Delete/>
+                      </el-icon>
+                    </el-button>
                   </template>
                 </el-popconfirm>
               </div>
@@ -100,7 +140,8 @@
       </div>
     </div>
   </div>
-  <div style="margin: 10px;" id="page">
+  <div style="height: 8px;"></div>
+  <div style="margin: 0 10px;" id="page">
     <div style="margin-bottom: 10px;">
       <el-pagination background layout="prev, pager, next"
                      :total="searchList().length"
@@ -120,19 +161,27 @@
       <div style="margin-left: 5px;">
         <el-popconfirm title="你确定要退出吗?" @confirm="logout">
           <template #reference>
-            <el-button>退出登录</el-button>
+            <el-button type="danger">
+              <el-icon :class="elIconClass()">
+                <SwitchButton/>
+              </el-icon>
+              <template v-if="itemsPerRow > 1">
+                退出登录
+              </template>
+            </el-button>
           </template>
         </el-popconfirm>
 
       </div>
     </div>
   </div>
-  <div style="height: 20px;"></div>
+  <div style="height: 10px;"></div>
 </template>
 
 <script setup>
 import {onMounted, ref} from "vue";
 import {ElMessage} from 'element-plus'
+import {Edit as EditIcon, Plus, SwitchButton} from "@element-plus/icons-vue"
 import Config from "./Config.vue";
 import Edit from "./Edit.vue";
 import Add from "./Add.vue";
@@ -220,6 +269,8 @@ const getList = () => {
 
 getList()
 
+const itemsPerRow = ref(1)
+
 onMounted(() => {
   let size = window.localStorage.getItem('pageSize')
   if (size) {
@@ -232,9 +283,9 @@ onMounted(() => {
       return
     }
     const windowWidth = window.innerWidth;
-    const itemsPerRow = Math.max(1, Math.floor(windowWidth / 400));
-    gridContainer.style.gridTemplateColumns = `repeat(${itemsPerRow}, 1fr)`;
-    if (itemsPerRow === 1) {
+    itemsPerRow.value = Math.max(1, Math.floor(windowWidth / 400));
+    gridContainer.style.gridTemplateColumns = `repeat(${itemsPerRow.value}, 1fr)`;
+    if (itemsPerRow.value === 1) {
       pagerCount.value = 4
     }
   }
@@ -248,6 +299,20 @@ let logout = () => {
   location.reload()
 }
 
+let elIconClass = ()=>{
+  return itemsPerRow.value > 1 ? 'el-icon--left' : '';
+}
+
 </script>
 
+<style>
+.gtc3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.gtc2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+</style>
+
 
diff --git a/ui/src/Mikan.vue b/ui/src/Mikan.vue
@@ -48,7 +48,12 @@
                               <el-text class="mx-1" size="small">{{ group.updateDay }}</el-text>
                             </div>
                             <div style="display: flex;align-items: center;margin-right: 15px;">
-                              <el-button @click.stop="add(group['rss'])">添加</el-button>
+                              <el-button type="primary" plain @click.stop="add(group['rss'])">
+                                <el-icon>
+                                  <Plus/>
+                                </el-icon>
+                                添加
+                              </el-button>
                             </div>
                           </div>
                         </template>

diff --git a/ui/src/main.js b/ui/src/main.js
@@ -3,8 +3,13 @@ import 'element-plus/dist/index.css'
 import './style.css'
 import Login from './Login.vue'
 import ElementPlus from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 
 const app = createApp(Login)
 app.use(ElementPlus)
+// 引入图标
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+}
 app.mount('#app')