🌈 style: 更新样式优化

.github/workflows/docker.yml

@@ -41,6 +41,9 @@ jobs:
         with:
           context: .
           file: ./Dockerfile
+          platforms: |
+            linux/amd64
+            linux/arm64
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

package.json

@@ -57,6 +57,7 @@
     "electron-updater": "^6.3.4",
     "file-saver": "^2.0.5",
     "font-list": "^1.5.1",
+    "github-markdown-css": "^5.7.0",
     "howler": "^2.2.4",
     "js-cookie": "^3.0.5",
     "jss": "^10.10.0",

pnpm-lock.yaml

@@ -80,6 +80,9 @@ importers:
       font-list:
         specifier: ^1.5.1
         version: 1.5.1
+      github-markdown-css:
+        specifier: ^5.7.0
+        version: 5.7.0
       howler:
         specifier: ^2.2.4
         version: 2.2.4
@@ -2076,6 +2079,10 @@ packages:
   getpass@0.1.7:
     resolution: {integrity: sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==}
 
+  github-markdown-css@5.7.0:
+    resolution: {integrity: sha512-GoYhaqELL4YUjz4tZ00PQ4JzFQkMfrBVuEeRB8W74HoikHWNiaGqSgynpwJEc+xom5uf04qoD/tUSS6ziZltaQ==}
+    engines: {node: '>=10'}
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -5996,6 +6003,8 @@ snapshots:
     dependencies:
       assert-plus: 1.0.0
 
+  github-markdown-css@5.7.0: {}
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3

src/components/Modal/UpdateApp.vue

@@ -9,8 +9,8 @@
         {{ data?.version || "v0.0.0" }}
       </n-tag>
     </n-flex>
-    <div v-if="data?.releaseNotes" class="changelog" v-html="data.releaseNotes" />
-    <div v-else class="changelog">暂无更新日志</div>
+    <div v-if="data?.releaseNotes" class="markdown-body" v-html="data.releaseNotes" />
+    <div v-else class="markdown-body">暂无更新日志</div>
     <n-flex class="menu" justify="end">
       <n-button strong secondary @click="emit('close')"> 取消 </n-button>
       <n-button type="warning" strong secondary @click="goDownload"> 前往下载 </n-button>
@@ -25,9 +25,7 @@
 import type { UpdateInfoType } from "@/types/main";
 import packageJson from "@/../package.json";
 
-defineProps<{
-  data: UpdateInfoType;
-}>();
+defineProps<{ data: UpdateInfoType }>();
 
 const emit = defineEmits<{ close: [] }>();
 
@@ -76,15 +74,6 @@ const goDownload = () => {
       font-size: 13px;
     }
   }
-  .changelog {
-    margin-top: 12px;
-    padding: 20px;
-    background-color: var(--n-border-color);
-    border-radius: 8px;
-    :deep(ul) {
-      margin: 1rem 0 0 1rem;
-    }
-  }
   .menu {
     margin-top: 20px;
   }

src/components/Search/SearchDefault.vue

@@ -20,7 +20,7 @@
               round
               @click="emit('toSearch', item)"
             >
-              {{ item }}
+              {{ item.length > 10 ? item.slice(0, 10) + "..." : item }}
             </n-tag>
           </n-flex>
         </div>

src/components/Setting/AboutSetting.vue

@@ -19,9 +19,12 @@
             <n-tag :bordered="false" size="small" type="primary">
               {{ newVersion?.version || "v0.0.0" }}
             </n-tag>
+            <n-tag v-if="newVersion?.prerelease" class="test" size="small" type="warning">
+              测试版
+            </n-tag>
             <n-text :depth="3" class="time">{{ newVersion?.time }}</n-text>
           </n-flex>
-          <div class="changelog" v-html="newVersion?.changelog" />
+          <div class="markdown-body" v-html="newVersion?.changelog" />
         </n-card>
       </n-collapse-transition>
     </div>
@@ -42,7 +45,7 @@
                 </n-tag>
                 <n-text :depth="3" class="time">{{ item?.time }}</n-text>
               </n-flex>
-              <div class="changelog" v-html="item?.changelog" />
+              <div class="markdown-body" v-html="item?.changelog" />
             </n-card>
           </n-collapse-item>
         </n-collapse>
@@ -135,6 +138,7 @@ onMounted(getUpdateData);
   .version {
     padding-left: 4px;
     .n-tag {
+      pointer-events: none;
       border-radius: 6px;
     }
     .time {
@@ -142,15 +146,6 @@ onMounted(getUpdateData);
       font-size: 13px;
     }
   }
-  .changelog {
-    margin-top: 12px;
-    padding: 20px;
-    background-color: var(--n-border-color);
-    border-radius: 8px;
-    :deep(ul) {
-      margin: 1rem 0 0 1rem;
-    }
-  }
 }
 .link {
   .link-item {

src/main.ts

@@ -15,6 +15,7 @@ import initIpc from "@/utils/initIpc";
 // 全局样式
 import "@/style/main.scss";
 import "@/style/animate.scss";
+import "github-markdown-css/github-markdown.css";
 
 // 初始化 ipc
 initIpc();

src/style/main.scss

@@ -237,3 +237,13 @@ body {
   background-color: var(--primary-hex);
   color: var(--background-hex);
 }
+
+// markdown
+.markdown-body {
+  --bgColor-default: var(--background-hex) !important;
+  --bgColor-muted: var(--background-hex) !important;
+  --fgColor-default: var(--n-text-color) !important;
+  margin-top: 12px !important;
+  padding: 20px;
+  border-radius: 8px;
+}

src/types/main.d.ts

@@ -212,6 +212,7 @@ export type UpdateLogType = {
   changelog: string;
   time: number;
   url: string;
+  prerelease: boolean;
   force?: boolean;
 };
 
@@ -232,4 +233,5 @@ interface UpdateInfoType {
   releaseDate: string;
   releaseName: string;
   releaseNotes: string;
+  prerelease: boolean;
 }

src/utils/helper.ts

@@ -251,6 +251,7 @@ export const getUpdateLog = async (): Promise<UpdateLogType[]> => {
       changelog: await marked(v.body),
       time: convertToLocalTime(v.published_at),
       url: v.html_url,
+      prerelease: v.prerelease,
     })),
   );
   return updateLogs;

src/utils/initIpc.ts

@@ -38,10 +38,7 @@ const initIpc = () => {
       window.$message.success("当前已是最新版本");
     });
     // 有更新
-    window.electron.ipcRenderer.on("update-available", (_, info) => {
-      console.log(info);
-      openUpdateApp(info);
-    });
+    window.electron.ipcRenderer.on("update-available", (_, info) => openUpdateApp(info));
     // 更新错误
     window.electron.ipcRenderer.on("update-error", (_, error) => {
       console.error("Error updating:", error);

src/views/Home/HomeOnline.vue

@@ -8,6 +8,7 @@
           <SongListCard
             :data="musicStore.dailySongsData.list"
             :title="dailySongsTitle"
+            :height="90"
             description="根据你的音乐口味 · 每日更新"
             size="small"
             @click="router.push({ name: 'daily-songs' })"
@@ -15,6 +16,7 @@
           <!-- 我喜欢的音乐 -->
           <SongListCard
             :data="dataStore.likeSongsList.data"
+            :height="90"
             title="我喜欢的音乐"
             description="发现你独特的音乐品味"
             size="small"