feat: 新增 GitHub 仓库列表

- 更换播放器为 @worstone/vue-aplayer #158

README.md

@@ -70,9 +70,9 @@ pnpm build
 > 安装及配置 Docker 将不在此处说明，请自行解决
 
 ```bash
-// 构建
+# 构建
 docker build -t home .
-// 运行
+# 运行
 docker run -p 12445:12445 -d home
 ```
 
@@ -227,9 +227,9 @@ if (type == 0) {
 
 * [小歪 API](https://api.aixiaowai.cn)
 * [搏天 API](https://api.btstu.cn/doc/sjbz.php)
+* [教书先生 API](https://api.oioweb.cn/doc/weather/GetWeather)
 * [高德开放平台](https://lbs.amap.com/)
 * [Hitokoto 一言](https://hitokoto.cn/)
-* [MetingAPI By 武恩赐](https://api.wuenci.com/meting/api/)
 
 ## Star History
 

package.json

@@ -4,7 +4,7 @@
   "github": "https://github.com/imsyy/home",
   "home": "https://imsyy.top",
   "private": true,
-  "version": "4.1.3",
+  "version": "4.1.4",
   "type": "module",
   "scripts": {
     "dev": "vite --host",
@@ -16,28 +16,28 @@
   "dependencies": {
     "@worstone/vue-aplayer": "^1.0.4",
     "aplayer": "^1.10.1",
-    "axios": "^1.1.3",
+    "axios": "^1.6.3",
-    "element-plus": "^2.2.18",
+    "element-plus": "^2.4.4",
-    "fetch-jsonp": "^1.2.3",
+    "fetch-jsonp": "^1.3.0",
-    "pinia": "^2.0.23",
+    "pinia": "^2.1.7",
-    "pinia-plugin-persistedstate": "^3.0.0",
+    "pinia-plugin-persistedstate": "^3.2.1",
-    "swiper": "^9.3.2",
+    "swiper": "^9.4.1",
-    "vue": "^3.3.4"
+    "vue": "^3.4.3"
   },
   "devDependencies": {
     "@icon-park/vue-next": "^1.4.2",
     "@vicons/fa": "^0.12.0",
     "@vicons/utils": "^0.1.4",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^4.6.2",
-    "eslint": "^8.48.0",
+    "eslint": "^8.56.0",
-    "eslint-plugin-vue": "^9.17.0",
+    "eslint-plugin-vue": "^9.19.2",
-    "prettier": "^3.0.2",
+    "prettier": "^3.1.1",
-    "sass": "^1.55.0",
+    "sass": "^1.69.6",
-    "terser": "^5.16.1",
+    "terser": "^5.26.0",
-    "unplugin-auto-import": "^0.11.2",
+    "unplugin-auto-import": "^0.11.5",
-    "unplugin-vue-components": "^0.22.8",
+    "unplugin-vue-components": "^0.22.12",
-    "vite": "^4.4.5",
+    "vite": "^4.5.1",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-pwa": "^0.14.1"
+    "vite-plugin-pwa": "^0.14.7"
   }
 }

src/components/GithubProject.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="github-project">
+    <div class="title">
+      <github-one theme="two-tone" size="24" :fill="['#efefef', '#00000020']" />
+      <span>Github</span>
+    </div>
+    <Swiper
+      :modules="[Pagination, Mousewheel]"
+      :slides-per-view="1"
+      :space-between="40"
+      :pagination="{
+        el: '.swiper-pagination',
+        clickable: true,
+        bulletElement: 'div',
+      }"
+      :mousewheel="true"
+    >
+      <SwiperSlide v-for="list in projectList" :key="list">
+        <el-row class="all-project" :gutter="20">
+          <el-col v-for="(item, index) in list" :span="12" :key="index">
+            <div class="project cards" @click="toGithub(item)">
+              <div class="name">
+                <bookmark theme="outline" size="22" fill="#efefef" />
+                <div class="name-text">
+                  <span class="author">{{ item.author }}</span>
+                  <span>{{ item.name }}</span>
+                </div>
+              </div>
+              <span class="desc">{{ item.desc }}</span>
+            </div>
+          </el-col>
+        </el-row>
+      </SwiperSlide>
+      <div class="swiper-pagination" />
+    </Swiper>
+  </div>
+</template>
+
+<script setup>
+import { GithubOne, Bookmark } from "@icon-park/vue-next";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Pagination, Mousewheel } from "swiper";
+
+// 仓库数据
+const projectData = [
+  {
+    name: "home",
+    author: "imsyy",
+    desc: "个人主页，我的个人主页，个人主页源码，主页模板，homepage",
+  },
+  {
+    name: "SPlayer",
+    author: "imsyy",
+    desc: "🎉 一个简约的音乐播放器，支持网易云音乐账号登录，逐字歌词，下载歌曲，展示评论区，音乐云盘及歌单管理，音乐频谱，移动端基础适配 | A minimalist music player",
+  },
+  {
+    name: "Snavigation",
+    author: "imsyy",
+    desc: "Snavigation 一个简约的起始页 | 支持自定义搜索引擎，自定义快捷方式，自定义壁纸以及数据备份",
+  },
+  {
+    name: "DailyHotApi",
+    author: "imsyy",
+    desc: "今日热榜 API，一个聚合热门数据的 API 接口，支持 Vercel 部署 | 前端页面：https://github.com/imsyy/DailyHot",
+  },
+  {
+    name: "site-status",
+    author: "imsyy",
+    desc: "📺 一个基于 UptimeRobot API 的在线状态面板 | 站点监测 | 状态检测 | An online status panel based on the UptimeRobot API | UptimeRobot, status, site",
+  },
+];
+
+// 计算网站链接
+const projectList = computed(() => {
+  const result = [];
+  for (let i = 0; i < projectData.length; i += 4) {
+    const subArr = projectData.slice(i, i + 4);
+    result.push(subArr);
+  }
+  return result;
+});
+
+// 跳转至 Github
+const toGithub = (data) => {
+  window.open(`https://github.com/${data.author}/${data.name}`);
+};
+</script>
+
+<style lang="scss" scoped>
+.github-project {
+  width: 100%;
+  margin-top: 20px;
+  .title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 0.2rem 0 1.5rem;
+    font-size: 1.1rem;
+    .i-icon {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 6px;
+    }
+  }
+  .swiper {
+    left: -10px;
+    width: calc(100% + 20px);
+    padding: 5px 10px 0;
+    z-index: 0;
+    .swiper-slide {
+      height: 100%;
+    }
+    .swiper-pagination {
+      position: static;
+      margin-top: -8px;
+      :deep(.swiper-pagination-bullet) {
+        background-color: #fff;
+        width: 18px;
+        height: 4px;
+        border-radius: 4px;
+        transition: opacity 0.3s;
+        &:hover {
+          opacity: 1;
+        }
+      }
+    }
+  }
+  .all-project {
+    width: calc(100% + 20px);
+    .project {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      margin-bottom: 20px;
+      padding: 12px;
+      height: 100px;
+      background-color: transparent;
+      .name {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 8px;
+        .i-icon {
+          display: flex;
+          margin-right: 6px;
+        }
+        .author {
+          opacity: 0.8;
+          &::after {
+            content: "/";
+            margin: 0 4px;
+          }
+        }
+      }
+      .desc {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        word-break: break-all;
+        font-size: 13px;
+        opacity: 0.8;
+        line-height: 20px;
+      }
+    }
+  }
+}
+</style>

src/components/Links.vue

@@ -48,8 +48,6 @@ import { mainStore } from "@/store";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { Pagination, Mousewheel } from "swiper";
 import siteLinks from "@/assets/siteLinks.json";
-import "swiper/scss";
-import "swiper/scss/pagination";
 
 const store = mainStore();
 

src/main.js

@@ -4,6 +4,9 @@ import App from "@/App.vue";
 // 引入 pinia
 import { createPinia } from "pinia";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+// swiper
+import "swiper/scss";
+import "swiper/scss/pagination";
 
 const app = createApp(App);
 const pinia = createPinia();

src/views/Box/index.vue

@@ -21,7 +21,9 @@
       />
     </transition>
     <div class="content">
+      <!-- 可在此处自定义任意内容 -->
       <TimeCapsule />
+      <GithubProject />
     </div>
   </div>
 </template>
@@ -30,6 +32,7 @@
 import { CloseOne, SettingTwo } from "@icon-park/vue-next";
 import { mainStore } from "@/store";
 import TimeCapsule from "@/components/TimeCapsule.vue";
+import GithubProject from "@/components/GithubProject.vue";
 
 const store = mainStore();
 const closeShow = ref(false);
@@ -40,6 +43,7 @@ const closeShow = ref(false);
   flex: 1 0 0%;
   margin-left: 0.75rem;
   height: 80%;
+  max-width: 50%;
   position: relative;
   animation: fade 0.5s;