feat: 优化订阅列表紧凑样式并新增隐藏官网按钮设置

Author: xream

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.21.0",
+  "version": "2.22.0",
   "private": true,
   "scripts": {
     "dev": "vite --host",

src/assets/styles/global.scss

@@ -119,28 +119,29 @@ img {
   border-radius: 8px;
   overflow: auto;
   padding-bottom: 24px;
-  
+
   // PC/平板端响应式最大宽度限制
   @media screen and (min-width: 600px) {
     max-width: 500px;
     width: 500px;
   }
-  
+
   @media screen and (min-width: 768px) {
     max-width: 600px;
     width: 600px;
   }
-  
+
   @media screen and (min-width: 1024px) {
     max-width: 700px;
     width: 700px;
   }
-  
+
   @media screen and (min-width: 1200px) {
     max-width: 800px;
     width: 800px;
   }
 }
+
 .nut-button {
   margin-right: 10px;
 }
@@ -155,6 +156,7 @@ img {
   font-weight: bold;
   line-height: 2;
 }
+
 // .nut-icon-order:before {
 //   content: "\e697";
 // }
@@ -169,26 +171,33 @@ img {
   content: "\e688";
   cursor: pointer;
 }
+
 .nut-icon-tips:before {
   content: "\e671";
   cursor: pointer;
 }
+
 .nut-icon-category:before {
   font-size: 20px;
   content: "\e662";
 }
+
 .nut-icon-issue:before {
   content: '\e6b1';
 }
+
 .nut-icon-ask:before {
   content: '\e670';
 }
+
 .nut-icon-setting:before {
   content: '\e681';
 }
+
 .nut-icon-left:before {
   content: '\e6c9';
 }
+
 .nut-icon-rect-left:before {
   content: '\e6c9';
 }
@@ -197,10 +206,12 @@ img {
   content: '\e6cb';
   color: #666;
 }
+
 .nut-icon-rect-right:before {
   content: '\e6cb'; // \2003 占位符
   // color: var(--lowest-text-color); // 更多设置
 }
+
 .nut-icon-rect-down:before {
   content: "\e6cc";
 }
@@ -212,33 +223,43 @@ img {
 .nut-icon-triangle-up:before {
   content: "\eb6e";
 }
+
 .nut-icon-arrow-right2:before {
   content: '\e6a9';
 }
+
 .nut-icon-arrow-right:before {
   content: '\e6a3';
 }
+
 .nut-icon-link:before {
   content: '\e67c'; // link
 }
+
 .nut-icon-refresh2:before {
   content: '\e682'; // sync
 }
+
 .nut-icon-refresh:before {
   content: '\e690';
 }
+
 .nut-icon-close-little:before {
   content: '\e6aa';
 }
+
 .nut-icon-close:before {
   content: '\e674';
 }
+
 .nut-icon-mask-close:before {
   content: '\e6cd';
 }
+
 .nut-icon-circle-close:before {
   content: '\e699';
 }
+
 .nut-icon-checked:before {
   content: '\e601';
 }
@@ -292,6 +313,7 @@ img {
     height: $icon-height;
     object-fit: contain;
   }
+
   &-loading,
   &-loading1 {
     display: inline-block;
@@ -307,6 +329,7 @@ img {
     animation-iteration-count: infinite;
     animation-direction: alternate;
   }
+
   &-am-jump {
     -webkit-animation-name: nutJumpOne;
     -webkit-animation-duration: var(--animate-duration);
@@ -340,6 +363,7 @@ img {
       animation-direction: normal;
     }
   }
+
   &-am-blink {
     -webkit-animation-name: nutBlink;
     -webkit-animation-duration: var(--animate-duration);
@@ -351,6 +375,7 @@ img {
     animation-timing-function: linear;
     animation-delay: var(--animate-delay);
   }
+
   &-am-breathe {
     -webkit-animation-name: nutBreathe;
     -webkit-animation-duration: var(--animate-duration);
@@ -362,6 +387,7 @@ img {
     animation-timing-function: ease-in-out;
     animation-delay: var(--animate-delay);
   }
+
   &-am-flash {
     -webkit-animation-name: nutFlash;
     -webkit-animation-duration: var(--animate-duration);
@@ -373,6 +399,7 @@ img {
     animation-timing-function: ease-in-out;
     animation-delay: var(--animate-delay);
   }
+
   &-am-bounce {
     -webkit-animation-name: nutBounce;
     -webkit-animation-duration: var(--animate-duration);

src/components/ArchiveListItem.vue

@@ -445,15 +445,15 @@ const nonSimpleSecondLine = computed(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 8px;
+  gap: 2px;
 }
 
 .sub-item-title {
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 3px;
   white-space: nowrap;
   overflow: hidden;
   color: var(--primary-text-color);
@@ -463,7 +463,13 @@ const nonSimpleSecondLine = computed(() => {
   .tag {
     display: inline-flex;
     flex: 0 0 auto;
-    margin: 0 2px;
+    margin: 0 1px;
+
+    :deep(.nut-tag) {
+      padding: 2px 3px;
+      font-size: 11px;
+      line-height: 1.2;
+    }
   }
 }
 
@@ -484,7 +490,7 @@ const nonSimpleSecondLine = computed(() => {
   .refresh-sub-flow {
     background-color: transparent;
     border: none;
-    padding: 0 8px;
+    padding: 0 6px;
     cursor: pointer;
     display: inline-flex;
     justify-content: center;

src/components/ArtifactsListItem.vue

@@ -667,7 +667,7 @@ watch(isSyncOpen, async () => {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      gap: 8px;
+      gap: 2px;
 
       .sub-item-title {
         display: -webkit-box;
@@ -680,9 +680,15 @@ watch(isSyncOpen, async () => {
         color: var(--primary-text-color);
 
         .tag {
-          margin-left: 4px;
           display: inline-flex;
+          margin: 0 1px;
           vertical-align: middle;
+
+          :deep(.nut-tag) {
+            padding: 2px 3px;
+            font-size: 11px;
+            line-height: 1.2;
+          }
         }
       }
 
@@ -821,7 +827,7 @@ watch(isSyncOpen, async () => {
 
       .sub-item-detail {
         .second-line-wrapper {
-          gap: 8px;
+          gap: 2px;
         }
 
         p {

src/components/FileListItem.vue

@@ -687,14 +687,14 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        gap: 8px;
+        gap: 2px;
 
         .sub-item-title {
           flex: 1 1 auto;
           min-width: 0;
           display: flex;
           align-items: center;
-          gap: 4px;
+          gap: 3px;
           white-space: nowrap;
           overflow: hidden;
           font-size: 16px;
@@ -710,15 +710,21 @@
         .tag {
           display: inline-flex;
           flex: 0 0 auto;
-          margin: 0 2px;
+          margin: 0 1px;
+
+          :deep(.nut-tag) {
+            padding: 2px 3px;
+            font-size: 11px;
+            line-height: 1.2;
+          }
         }
         .compare-sub-link,
         .public-link-action,
         .copy-sub-link,
         .refresh-sub-flow {
           background-color: transparent;
           border: none;
-          padding: 0 8px;
+          padding: 0 6px;
           cursor: pointer;
           display: inline-flex;
           justify-content: center;
@@ -811,7 +817,7 @@
         .public-link-action,
         .copy-sub-link,
         .refresh-sub-flow {
-          padding: 0 8px;
+          padding: 0 6px;
         }
 
         .sub-item-detail {

src/components/ShareListItem.vue

@@ -469,14 +469,14 @@ const onClickPreviews = () => {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      gap: 8px;
+      gap: 2px;
 
       .sub-item-title {
         flex: 1 1 auto;
         min-width: 0;
         display: flex;
         align-items: center;
-        gap: 4px;
+        gap: 3px;
         white-space: nowrap;
         overflow: hidden;
         font-size: 16px;
@@ -493,7 +493,13 @@ const onClickPreviews = () => {
       .tag {
         display: inline-flex;
         flex: 0 0 auto;
-        margin: 0 2px;
+        margin: 0 1px;
+
+        :deep(.nut-tag) {
+          padding: 2px 3px;
+          font-size: 11px;
+          line-height: 1.2;
+        }
       }
 
       .link-item-actions {
@@ -508,7 +514,7 @@ const onClickPreviews = () => {
         .refresh-sub-flow {
         background-color: transparent;
         border: none;
-        padding: 0 8px;
+        padding: 0 6px;
         cursor: pointer;
         display: inline-flex;
         justify-content: center;