b6f21b309e
- 在frontend-config.md中补充组件源码目录说明 - 统一文档中组件路径的表示方式（@docs/widget → /docs/widget） - 从导航栏社交链接中移除GitHub图标 - 新增GitHubStar组件，在导航栏显示项目星标数 - 添加对应样式支持星标组件显示效果
76 lines
2.2 KiB
Vue
76 lines
2.2 KiB
Vue
<template>
|
|
<a
|
|
class="github-star-link"
|
|
href="https://github.com/anghunk/cwd"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
<span class="github-star-icon" aria-hidden="true">
|
|
<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
|
|
<path
|
|
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
<span class="github-star-text">
|
|
Star
|
|
<span v-if="stars !== null" class="github-star-count">{{ formattedStars }}</span>
|
|
</span>
|
|
</a>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref, computed } from 'vue';
|
|
|
|
const stars = ref(null);
|
|
|
|
const formattedStars = computed(() => {
|
|
if (stars.value == null) return '';
|
|
const value = stars.value;
|
|
if (value >= 1000) {
|
|
const base = value / 1000;
|
|
const fixed = base >= 10 ? base.toFixed(0) : base.toFixed(1);
|
|
return fixed + 'k';
|
|
}
|
|
return String(value);
|
|
});
|
|
|
|
async function fetchStars() {
|
|
try {
|
|
const cached = sessionStorage.getItem('cwd_github_stars');
|
|
if (cached) {
|
|
const parsed = JSON.parse(cached);
|
|
if (parsed && typeof parsed.count === 'number') {
|
|
stars.value = parsed.count;
|
|
return;
|
|
}
|
|
}
|
|
} catch (e) {
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('https://api.github.com/repos/anghunk/cwd');
|
|
if (!response.ok) {
|
|
return;
|
|
}
|
|
const data = await response.json();
|
|
if (data && typeof data.stargazers_count === 'number') {
|
|
stars.value = data.stargazers_count;
|
|
try {
|
|
sessionStorage.setItem(
|
|
'cwd_github_stars',
|
|
JSON.stringify({ count: data.stargazers_count })
|
|
);
|
|
} catch (e) {
|
|
}
|
|
}
|
|
} catch (e) {
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
fetchStars();
|
|
});
|
|
</script>
|
|
|