forked from bot/app
📝 [docs]: 新增在线展示
This commit is contained in:
parent
837447b6e4
commit
94cab8b743
@ -1,10 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import DefaultTheme from "vitepress/theme";
|
||||
import {ref, onMounted, onUnmounted} from "vue";
|
||||
import {statsApi, GithubStats} from "./scripts/statsApi";
|
||||
import {statsApi, GithubStats, RepoUrl, StarMapUrl} from "./scripts/statsApi";
|
||||
import {getTextRef, updateRef} from "./scripts/i18n";
|
||||
|
||||
|
||||
const {Layout} = DefaultTheme;
|
||||
|
||||
let githubStats: GithubStats | null = null;
|
||||
@ -13,32 +12,50 @@ const dataSections = {
|
||||
total: {
|
||||
name: 'total',
|
||||
color: '#00a6ff',
|
||||
value: ref(0),
|
||||
value: ref(2005),
|
||||
link: StarMapUrl
|
||||
},
|
||||
online: {
|
||||
name: 'online',
|
||||
color: '#00ff00',
|
||||
value: ref(0),
|
||||
value: ref(1145),
|
||||
link: StarMapUrl
|
||||
},
|
||||
stars: {
|
||||
name: 'stars',
|
||||
color: '#ffcc00',
|
||||
value: ref(0),
|
||||
value: ref(1234),
|
||||
link: `${RepoUrl}/stargazers`
|
||||
},
|
||||
forks: {
|
||||
name: 'forks',
|
||||
color: '#ff6600',
|
||||
value: ref(0),
|
||||
value: ref(9420),
|
||||
link: `${RepoUrl}/forks`
|
||||
},
|
||||
issues: {
|
||||
name: 'issues',
|
||||
color: '#ff0000',
|
||||
value: ref(0),
|
||||
value: ref(1145),
|
||||
link: `${RepoUrl}/issues`
|
||||
},
|
||||
prs: {
|
||||
name: 'prs',
|
||||
color: '#ff00ff',
|
||||
value: ref(0),
|
||||
value: ref(6543),
|
||||
link: `${RepoUrl}/pulls`
|
||||
},
|
||||
plugins: {
|
||||
name: 'plugins',
|
||||
color: '#ff003e',
|
||||
value: ref(1763),
|
||||
link: './store/plugin'
|
||||
},
|
||||
resources: {
|
||||
name: 'resources',
|
||||
color: '#ff00ff',
|
||||
value: ref(6789),
|
||||
link: './store/resource'
|
||||
},
|
||||
}
|
||||
|
||||
@ -48,10 +65,15 @@ async function updateData() {
|
||||
[
|
||||
dataSections.online.value.value,
|
||||
dataSections.total.value.value,
|
||||
dataSections.plugins.value.value,
|
||||
dataSections.resources.value.value,
|
||||
githubStats,
|
||||
|
||||
] = await Promise.all([
|
||||
statsApi.getOnline(),
|
||||
statsApi.getTotal(),
|
||||
statsApi.getPluginNum(),
|
||||
statsApi.getResourceNum(),
|
||||
statsApi.getGithubStats(),
|
||||
]);
|
||||
dataSections.stars.value.value = githubStats?.stars || 0;
|
||||
@ -77,11 +99,13 @@ onMounted(() => {
|
||||
<div class="stats-bar">
|
||||
<div class="stats-info">
|
||||
<div v-for="section in Object.values(dataSections)" :key="section.name" class="section">
|
||||
<div class="section-tab">
|
||||
<span class="dot" :style="{backgroundColor: section.color}"></span>
|
||||
<span class="text">{{ getTextRef(section.name) }}</span>
|
||||
</div>
|
||||
<div class="number">{{ section.value.value }}</div>
|
||||
<a :href="section.link" target="_blank">
|
||||
<div class="section-tab">
|
||||
<span class="dot" :style="{backgroundColor: section.color}"></span>
|
||||
<span class="text">{{ getTextRef(section.name) }}</span>
|
||||
</div>
|
||||
<div class="number">{{ section.value.value }}</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="starmap">
|
||||
@ -89,7 +113,6 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
</Layout>
|
||||
</template>
|
||||
@ -109,7 +132,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
margin: 30px;
|
||||
margin: 10px;
|
||||
border-radius: var(--border-radius-2);
|
||||
background-color: var(--vp-c-gray-1);
|
||||
flex-direction: column; /* 默认纵向布局 */
|
||||
@ -117,16 +140,35 @@ onMounted(() => {
|
||||
|
||||
.stats-info {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 15px;
|
||||
margin: 20px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative; /* 使伪元素相对于父元素定位 */
|
||||
border-radius: var(--border-radius-2);
|
||||
}
|
||||
|
||||
.section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border: 0 solid transparent; /* 初始边框为透明 */
|
||||
transition: border 0.1s ease-in-out; /* 添加过渡效果 */
|
||||
border-radius: var(--border-radius-2);
|
||||
pointer-events: none; /* 确保伪元素不会阻挡点击事件 */
|
||||
}
|
||||
|
||||
.section:hover::before {
|
||||
border: 1px solid #00a6ff; /* 悬停时添加边框 */
|
||||
border-radius: var(--border-radius-2);
|
||||
}
|
||||
|
||||
.section-tab {
|
||||
@ -176,10 +218,12 @@ onMounted(() => {
|
||||
/* PC模式下的样式 */
|
||||
.stats-bar {
|
||||
flex-direction: row;
|
||||
margin: 30px;
|
||||
}
|
||||
|
||||
.stats-info {
|
||||
width: 40%;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.starmap {
|
||||
|
||||
@ -11,6 +11,9 @@ const i18nData = {
|
||||
forks: 'Forks',
|
||||
issues: 'Issues',
|
||||
prs: 'Pull Requests',
|
||||
size: 'Size',
|
||||
plugins: 'Plugins',
|
||||
resources: 'Resources',
|
||||
},
|
||||
zh: {
|
||||
online: '在线',
|
||||
@ -19,8 +22,11 @@ const i18nData = {
|
||||
fetching: '获取中',
|
||||
stars: '星星',
|
||||
forks: '叉子',
|
||||
issues: '议题',
|
||||
issues: '开启议题',
|
||||
prs: '合并请求',
|
||||
size: '大小',
|
||||
plugins: '插件',
|
||||
resources: '主题资源',
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
|
||||
// URL
|
||||
const OWNER = "LiteyukiStudio"
|
||||
const REPO = "LiteyukiBot"
|
||||
export const OWNER = "LiteyukiStudio"
|
||||
export const REPO = "LiteyukiBot"
|
||||
const githubAPIUrl = "https://api.github.com"
|
||||
const onlineFetchUrl = "https://api.liteyuki.icu/online";
|
||||
const totalFetchUrl = "https://api.liteyuki.icu/count";
|
||||
|
||||
export const RepoUrl = `https://github.com/${OWNER}/${REPO}`
|
||||
export const StarMapUrl = "https://starmap.liteyuki.icu"
|
||||
|
||||
type GithubStats = {
|
||||
stars: number;
|
||||
@ -13,6 +15,7 @@ type GithubStats = {
|
||||
watchers: number;
|
||||
issues?: number;
|
||||
prs?: number;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
// 异步接口
|
||||
@ -20,12 +23,13 @@ interface StatsApi {
|
||||
getTotal: () => Promise<number>;
|
||||
getOnline: () => Promise<number>;
|
||||
getGithubStats: () => Promise<GithubStats>;
|
||||
getPluginNum: () => Promise<number>;
|
||||
getResourceNum: () => Promise<number>;
|
||||
}
|
||||
|
||||
|
||||
export type { GithubStats };
|
||||
|
||||
|
||||
// 实现接口
|
||||
export const statsApi: StatsApi = {
|
||||
getTotal: async () => {
|
||||
@ -56,6 +60,7 @@ export const statsApi: StatsApi = {
|
||||
watchers: data.watchers_count,
|
||||
issues: data.open_issues_count,
|
||||
prs: data.open_issues_count,
|
||||
size: data.size,
|
||||
};
|
||||
} catch (e) {
|
||||
return {
|
||||
@ -64,7 +69,26 @@ export const statsApi: StatsApi = {
|
||||
watchers: -1,
|
||||
issues: -1,
|
||||
prs: -1,
|
||||
size: -1,
|
||||
};
|
||||
}
|
||||
},
|
||||
getPluginNum: async () => {
|
||||
try {
|
||||
const res = await fetch('./plugins.json');
|
||||
const data = await res.json();
|
||||
return data.length;
|
||||
} catch (e) {
|
||||
return -1;
|
||||
}
|
||||
},
|
||||
getResourceNum: async () => {
|
||||
try {
|
||||
const res = await fetch('./resources.json');
|
||||
const data = await res.json();
|
||||
return data.length;
|
||||
} catch (e) {
|
||||
return -1;
|
||||
}
|
||||
}
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user