feat: 新增 GitHub 仓库列表

- 更换播放器为 @worstone/vue-aplayer #158
This commit is contained in:
imsyy 2024-01-02 18:11:48 +08:00
parent e2290042f7
commit f016348b97
No known key found for this signature in database
GPG Key ID: 5D959EAB73CA095D
7 changed files with 1278 additions and 1188 deletions

View File

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

View File

@ -4,7 +4,7 @@
"github": "https://github.com/imsyy/home", "github": "https://github.com/imsyy/home",
"home": "https://imsyy.top", "home": "https://imsyy.top",
"private": true, "private": true,
"version": "4.1.3", "version": "4.1.4",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite --host", "dev": "vite --host",
@ -16,28 +16,28 @@
"dependencies": { "dependencies": {
"@worstone/vue-aplayer": "^1.0.4", "@worstone/vue-aplayer": "^1.0.4",
"aplayer": "^1.10.1", "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": { "devDependencies": {
"@icon-park/vue-next": "^1.4.2", "@icon-park/vue-next": "^1.4.2",
"@vicons/fa": "^0.12.0", "@vicons/fa": "^0.12.0",
"@vicons/utils": "^0.1.4", "@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-compression": "^0.5.1",
"vite-plugin-pwa": "^0.14.1" "vite-plugin-pwa": "^0.14.7"
} }
} }

File diff suppressed because it is too large Load Diff

View File

@ -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>

View File

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

View File

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

View File

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