🌈 style: 修复部分样式显示错误

imsyy · Dec 15, 2023 · ee9bbf0 · ee9bbf0
1 parent 693dc65
commit ee9bbf0
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 57 deletions.
diff --git a/src/components/Global/Menu.vue b/src/components/Global/Menu.vue
@@ -148,20 +148,6 @@ const menuOptions = computed(() => [
     key: "record",
     icon: renderIcon("record"),
   },
-  {
-    label: () =>
-      h(
-        RouterLink,
-        {
-          to: {
-            name: "videos",
-          },
-        },
-        () => ["视频"],
-      ),
-    key: "videos",
-    icon: renderIcon("video"),
-  },
   {
     key: "divider-1",
     type: "divider",

diff --git a/src/components/Global/Provider.vue b/src/components/Global/Provider.vue
@@ -87,20 +87,27 @@ const changeThemeColor = (val, isCover = false) => {
     themeOverrides.value = {
       common:
         isCover && Object.keys(val)?.length
-          ? {
-              primaryColor,
-              primaryColorHover,
-              primaryColorPressed,
-              primaryColorSuppl,
-              textColor1: `rgba(${mainColorData.bg}, 0.9)`,
-              textColor2: `rgba(${mainColorData.bg}, 0.82)`,
-              textColor3: `rgba(${mainColorData.bg}, 0.52)`,
-              bodyColor: `rgb(${val.dark.mainBg})`,
-              cardColor: `rgb(${coverAutobgCover})`,
-              tagColor: `rgb(${coverAutobgCover})`,
-              modalColor: `rgb(${coverAutobgCover})`,
-              popoverColor: `rgb(${coverAutobgCover})`,
-            }
+          ? themeType.value === "dark"
+            ? {
+                primaryColor,
+                primaryColorHover,
+                primaryColorPressed,
+                primaryColorSuppl,
+                textColor1: `rgba(${mainColorData.bg}, 0.9)`,
+                textColor2: `rgba(${mainColorData.bg}, 0.82)`,
+                textColor3: `rgba(${mainColorData.bg}, 0.52)`,
+                bodyColor: `rgb(${val.dark.mainBg})`,
+                cardColor: `rgb(${coverAutobgCover})`,
+                tagColor: `rgb(${coverAutobgCover})`,
+                modalColor: `rgb(${coverAutobgCover})`,
+                popoverColor: `rgb(${coverAutobgCover})`,
+              }
+            : {
+                primaryColor,
+                primaryColorHover,
+                primaryColorPressed,
+                primaryColorSuppl,
+              }
           : mainColorData,
       Icon: { color: isCover ? primaryColor : null },
     };

diff --git a/src/components/List/SongList.vue b/src/components/List/SongList.vue
@@ -139,6 +139,25 @@
           </n-text>
           <n-text v-else class="album">未知专辑</n-text>
         </template>
+        <!-- 操作 -->
+        <div class="action">
+          <!-- 喜欢歌曲 -->
+          <n-icon
+            :depth="dataStore.getSongIsLike(item?.id) ? 0 : 3"
+            class="favorite"
+            size="20"
+            @click.stop="
+              dataStore.changeLikeList(item?.id, !dataStore.getSongIsLike(item?.id), item?.path)
+            "
+            @dblclick.stop
+          >
+            <SvgIcon
+              :icon="
+                dataStore.getSongIsLike(item?.id) ? 'favorite-rounded' : 'favorite-outline-rounded'
+              "
+            />
+          </n-icon>
+        </div>
         <!-- 时长 -->
         <n-text v-if="item.duration" class="duration" depth="3">{{ item.duration }}</n-text>
         <n-text v-else class="duration"> -- </n-text>
@@ -483,6 +502,23 @@ onBeforeUnmount(() => {
         color: var(--main-color);
       }
     }
+    .action {
+      width: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+      .favorite {
+        padding-top: 1px;
+        transition: transform 0.3s;
+        cursor: pointer;
+        &:hover {
+          transform: scale(1.15);
+        }
+        &:active {
+          transform: scale(1);
+        }
+      }
+    }
     .duration {
       width: 40px;
       text-align: center;

diff --git a/src/router/routes.js b/src/router/routes.js
@@ -80,31 +80,14 @@ const routes = [
       },
     ],
   },
-  // 视频
-  {
-    path: "/videos",
-    name: "videos",
-    meta: {
-      title: "视频",
-    },
-    component: () => import("@/views/Videos/index.vue"),
-    redirect: "/videos/list",
-    children: [
-      {
-        path: "list",
-        name: "video-list",
-        component: () => import("@/views/Videos/list.vue"),
-      },
-    ],
-  },
   // 视频播放
   {
     path: "/videos-player",
     name: "videos-player",
     meta: {
       title: "视频播放器",
     },
-    component: () => import("@/views/Videos/player.vue"),
+    component: () => import("@/views/player.vue"),
   },
   // 评论
   {

diff --git a/src/views/Discover/artists.vue b/src/views/Discover/artists.vue
@@ -8,8 +8,7 @@
           v-for="item in artistInitials"
           :key="item"
           :bordered="false"
-          :type="item.key == artistInitialChoose ? 'primary' : 'default'"
-          class="tag"
+          :class="['tag', { choose: item.key == artistInitialChoose }]"
           round
           @click="artistInitialChange(item.key)"
         >
@@ -21,10 +20,12 @@
         <n-tag
           v-for="(item, index) in artistTypeNames"
           :key="item"
-          :class="['tag', item.length > 2 ? 'hidden' : 'show']"
+          :class="[
+            'tag',
+            item.length > 2 ? 'hidden' : 'show',
+            { choose: index == artistTypeNamesChoose },
+          ]"
           :bordered="false"
-          :type="index == artistTypeNamesChoose ? 'primary' : 'default'"
-          class="tag"
           round
           @click="artistTypeChange(index)"
         >
@@ -199,6 +200,10 @@ onMounted(() => {
       &:active {
         transform: scale(0.95);
       }
+      &.choose {
+        background-color: var(--main-second-color);
+        color: var(--main-color);
+      }
     }
     .category {
       margin-top: 18px;

diff --git a/src/views/Videos/index.vue b/src/views/Videos/index.vue
diff --git a/src/views/Videos/list.vue b/src/views/Videos/list.vue
diff --git a/src/views/Videos/player.vue → src/views/player.vue b/src/views/Videos/player.vue → src/views/player.vue