🐞 fix: 托盘图标无法显示 #260

electron/main/tray.ts

@@ -36,11 +36,11 @@ export interface MainTray {
 
 // 托盘图标
 const trayIcon = (filename: string) => {
-  const rootPath = isDev
-    ? join(__dirname, "../../public/icons/tray")
-    : join(app.getAppPath(), "../../public/icons/tray");
-  return nativeImage.createFromPath(join(rootPath, filename));
-  // return nativeImage.createFromPath(join(__dirname, `../../public/icons/tray/${filename}`));
+  // const rootPath = isDev
+  //   ? join(__dirname, "../../public/icons/tray")
+  //   : join(app.getAppPath(), "../../public/icons/tray");
+  // return nativeImage.createFromPath(join(rootPath, filename));
+  return nativeImage.createFromPath(join(__dirname, `../../public/icons/tray/${filename}`));
 };
 
 // 托盘菜单

package.json

@@ -1,7 +1,7 @@
 {
   "name": "splayer",
   "productName": "SPlayer",
-  "version": "3.0.0-alpha.1",
+  "version": "3.0.0-alpha.2",
   "description": "A minimalist music player",
   "main": "./out/main/index.js",
   "author": "imsyy",

src/api/other.ts

@@ -5,7 +5,7 @@ export const updateLog = () => {
   return request({
     baseURL: "https://api.github.com",
     withCredentials: false,
-    url: "/repos/imsyy/SPlayer/releases/latest",
+    url: "/repos/imsyy/SPlayer/releases",
     params: { noCookie: true },
   });
 };

src/components/Setting/AboutSetting.vue

@@ -13,18 +13,41 @@
         <n-button type="primary" strong secondary @click="checkUpdate"> 检查更新 </n-button>
       </n-card>
       <n-collapse-transition :show="!!updateData">
-        <n-card class="set-item" id="update-data">
+        <n-card class="set-item update-data">
           <n-flex class="version">
             <n-text>最新版本</n-text>
             <n-tag :bordered="false" size="small" type="primary">
-              {{ updateData?.version || "v0.0.0" }}
+              {{ newVersion?.version || "v0.0.0" }}
             </n-tag>
-            <n-text :depth="3" class="time">{{ updateData?.time }}</n-text>
+            <n-text :depth="3" class="time">{{ newVersion?.time }}</n-text>
           </n-flex>
-          <div class="changelog" v-html="updateData?.changelog" />
+          <div class="changelog" v-html="newVersion?.changelog" />
         </n-card>
       </n-collapse-transition>
     </div>
+    <div class="set-list">
+      <n-h3 prefix="bar"> 历史版本 </n-h3>
+      <n-collapse-transition :show="oldVersion?.length > 0">
+        <n-collapse accordion>
+          <n-collapse-item
+            v-for="(item, index) in oldVersion"
+            :key="index"
+            :title="item.version"
+            :name="item.version"
+          >
+            <n-card class="set-item update-data">
+              <n-flex class="version" justify="space-between">
+                <n-tag :bordered="false" size="small" type="primary">
+                  {{ item?.version || "v0.0.0" }}
+                </n-tag>
+                <n-text :depth="3" class="time">{{ item?.time }}</n-text>
+              </n-flex>
+              <div class="changelog" v-html="item?.changelog" />
+            </n-card>
+          </n-collapse-item>
+        </n-collapse>
+      </n-collapse-transition>
+    </div>
     <div class="set-list">
       <n-h3 prefix="bar"> 社区与资讯 </n-h3>
       <n-flex class="link">
@@ -64,7 +87,16 @@ const communityData = [
 ];
 
 // 更新日志数据
-const updateData = ref<UpdateLogType | null>(null);
+const updateData = ref<UpdateLogType[] | null>(null);
+
+// 最新版本
+const newVersion = computed<UpdateLogType | undefined>(() => updateData.value?.[0]);
+
+// 历史版本
+const oldVersion = computed<UpdateLogType[]>(() => {
+  const oldData = updateData.value?.slice(1);
+  return oldData ? oldData : [];
+});
 
 // 检查更新
 const checkUpdate = debounce(() => {
@@ -95,10 +127,10 @@ onMounted(getUpdateData);
     border-radius: 6px;
   }
 }
-#update-data {
+.update-data {
   :deep(.n-card__content) {
-    flex-direction: column;
-    align-items: normal;
+    flex-direction: column !important;
+    align-items: normal !important;
   }
   .version {
     padding-left: 4px;

src/utils/helper.ts

@@ -4,6 +4,8 @@ import { h, VNode } from "vue";
 import { useClipboard } from "@vueuse/core";
 import { getCacheData } from "./cache";
 import { updateLog } from "@/api/other";
+import { isEmpty } from "lodash-es";
+import { convertToLocalTime } from "./time";
 import { marked } from "marked";
 import SvgIcon from "@/components/Global/SvgIcon.vue";
 
@@ -266,12 +268,16 @@ export const formatForGlobalShortcut = (shortcut: string): string => {
 };
 
 // 获取更新日志
-export const getUpdateLog = async (): Promise<UpdateLogType> => {
-  const result = await getCacheData(updateLog, { key: "updateLog", time: 60 });
-  return {
-    version: result.tag_name,
-    changelog: await marked(result.body),
-    time: result.published_at,
-    url: result.html_url,
-  };
+export const getUpdateLog = async (): Promise<UpdateLogType[]> => {
+  const result = await getCacheData(updateLog, { key: "updateLog", time: 10 });
+  if (!result || isEmpty(result)) return [];
+  const updateLogs = await Promise.all(
+    result.map(async (v: any) => ({
+      version: v.tag_name,
+      changelog: await marked(v.body),
+      time: convertToLocalTime(v.published_at),
+      url: v.html_url,
+    })),
+  );
+  return updateLogs;
 };

src/utils/time.ts

@@ -1,9 +1,11 @@
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";
 import relativeTime from "dayjs/plugin/relativeTime";
+import localizedFormat from "dayjs/plugin/localizedFormat";
 
 dayjs.extend(duration);
 dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
 
 // 秒转为时间
 export const secondsToTime = (seconds: number) => {
@@ -120,10 +122,19 @@ export const getGreeting = () => {
  * 是否为当天的6点之前
  * @param timestamp 当前时间戳
  */
-export const isBeforeSixAM  = (timestamp: number) => {
+export const isBeforeSixAM = (timestamp: number) => {
   // 当天的早上 6 点
-  const sixAM = dayjs().startOf('day').add(6, 'hour');
+  const sixAM = dayjs().startOf("day").add(6, "hour");
   // 判断输入时间是否在六点之前
   const inputTime = dayjs(timestamp);
   return inputTime.isBefore(sixAM);
 };
+
+/**
+ * 将 ISO 8601 格式的时间字符串转换为本地时间
+ * @param isoString - ISO 8601 格式的时间字符串
+ * @returns
+ */
+export const convertToLocalTime = (isoString: string): string => {
+  return dayjs(isoString).format("YYYY-MM-DD HH:mm:ss");
+};