为 Firefly添加 Umami 访问统计卡片

1
---
2
import WidgetLayout from "../common/WidgetLayout.astro";
3

4
interface Props {
5
  class?: string;
6
  style?: string;
7
}
8
const { class: className, style } = Astro.props;
9
---
10

11
<WidgetLayout name="统计" class:list={["umami-stats-container", className, "cursor-pointer transition-opacity active:scale-95"]} {style}>
12
    <a target="_blank" rel="noopener noreferrer" class="block umami-link">
13
        <div class="text-center py-2">
14
            <div class="text-3xl font-bold text-neutral-900 dark:text-neutral-100 umami-total-pageviews">-</div>
15
            <div class="text-sm text-neutral-500 dark:text-neutral-400">总浏览量</div>
16
        </div>
17
        <div class="grid grid-cols-2 divide-x divide-neutral-200 dark:divide-neutral-700 text-center pt-2">
18
            <div class="px-2">
19
                <div class="text-xl font-bold text-neutral-900 dark:text-neutral-100 umami-total-visits">-</div>
20
                <div class="text-sm text-neutral-500 dark:text-neutral-400">访问数</div>
21
            </div>
22
            <div class="px-2">
23
                <div class="text-xl font-bold text-neutral-900 dark:text-neutral-100 umami-total-visitors">-</div>
24
                <div class="text-sm text-neutral-500 dark:text-neutral-400">游客数</div>
25
            </div>
26
        </div>
27
    </a>
28
</WidgetLayout>
29

30
<script>
31
const UMAMI_CONFIG = {
32
    shareUrl: '你的方享链接',
33
};
34

35
let __UMAMI_INTERNAL = {
36
    baseUrl: '',
37
    websiteId: '',
38
    shareToken: '',
39
    shareId: '',
40
    isReady: false
41
};
42

43
const FALLBACK_STATS = {
44
    pageviews: 1000,
45
    visits: 1000,
46
    visitors: 1000,
47
};
48

49
async function initUmamiConfig() {
50
    try {
51
        const sharePath = UMAMI_CONFIG.shareUrl.split('/share/')[1];
52
        if (!sharePath) throw new Error('Invalid Umami Share URL');
53

54
        // 自动识别是官方云服务还是自建域名
55
        let apiBase = '';
56
        if (UMAMI_CONFIG.shareUrl.includes('cloud.umami.is') || UMAMI_CONFIG.shareUrl.includes('analytics.umami.is')) {
57
            const region = UMAMI_CONFIG.shareUrl.includes('/analytics/eu/') ? 'eu' : 'us';
58
            apiBase = `https://cloud.umami.is/analytics/${region}/api`;
59
        } else {
60
            // 自建域名动态提取基础 API 路径
61
            const urlObj = new URL(UMAMI_CONFIG.shareUrl);
62
            apiBase = `${urlObj.origin}/api`;
63
        }
64

65
        const res = await fetch(`${apiBase}/share/${sharePath}`);
66
        if (!res.ok) throw new Error(`Failed to fetch share config: ${res.status}`);
67
        const data = await res.json();
68

69
        __UMAMI_INTERNAL = {
70
            baseUrl: apiBase,
71
            websiteId: data.websiteId,
72
            shareToken: data.token,
73
            shareId: data.shareId,
74
            isReady: true
75
        };
76

77
        // 更新页面上所有统计组件的跳转链接
78
        const links = document.querySelectorAll('.umami-link');
79
        links.forEach(link => link.setAttribute('href', UMAMI_CONFIG.shareUrl));
80

81
    } catch (e) {
82
        console.error('Umami Config Init Failed:', e);
83
    }
84
}
85

86
function formatNumber(num: number): string {
87
    if (num >= 1000000) {
88
        return (num / 1000000).toFixed(1) + 'M';
89
    } else if (num >= 1000) {
90
        return (num / 1000).toFixed(1) + 'K';
91
    }
92
    return Math.round(num).toString();
93
}
94

95
function setStats(values: { pageviews: number; visits: number; visitors: number }) {
96
    // 抓取页面上所有的统计组件实例
97
    const pageviewsElements = document.querySelectorAll('.umami-total-pageviews');
98
    const visitsElements = document.querySelectorAll('.umami-total-visits');
99
    const visitorsElements = document.querySelectorAll('.umami-total-visitors');
100

101
    const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
102
    const animHandles = new Map<HTMLElement, number>();
103

104
    const animateStat = (el: HTMLElement | null, to: number, duration = 2000) => {
105
        if (!el) return;
106

107
        const prev = animHandles.get(el);
108
        if (prev) cancelAnimationFrame(prev);
109

110
        const from = 0;
111
        const startTime = performance.now();
112

113
        const tick = (now: number) => {
114
            const elapsed = now - startTime;
115
            const progress = Math.min(1, elapsed / duration);
116
            const easedProgress = easeOutCubic(progress);
117

118
            const current = from + (to - from) * easedProgress;
119
            el.textContent = formatNumber(current);
120

121
            if (progress < 1) {
122
                animHandles.set(el, requestAnimationFrame(tick));
123
            }
124
        };
125
        animHandles.set(el, requestAnimationFrame(tick));
126
    };
127

128
    // 群发更新所有节点的数字
129
    pageviewsElements.forEach(el => animateStat(el as HTMLElement, values.pageviews));
130
    visitsElements.forEach(el => animateStat(el as HTMLElement, values.visits));
131
    visitorsElements.forEach(el => animateStat(el as HTMLElement, values.visitors));
132
}
133

134
async function fetchUmamiStats() {
135
    if (!__UMAMI_INTERNAL.isReady) {
136
        await initUmamiConfig();
137
    }
138

139
    if (!__UMAMI_INTERNAL.isReady) {
140
        setStats(FALLBACK_STATS);
141
        return;
142
    }
143

144
    try {
145
        const endAt = Date.now();
146
        const startAt = 0;
147
        const url = `${__UMAMI_INTERNAL.baseUrl}/websites/${__UMAMI_INTERNAL.websiteId}/stats?startAt=${startAt}&endAt=${endAt}&unit=hour&timezone=Asia%2FShanghai`;
148

149
        const response = await fetch(url, {
150
            headers: {
151
                'x-umami-share-context': '1',
152
                'x-umami-share-token': __UMAMI_INTERNAL.shareToken
153
            }
154
        });
155

156
        if (!response.ok) throw new Error(`HTTP ${response.status}`);
157
        const data = await response.json();
158
        const getValue = (field: any) => (typeof field === 'object' ? field?.value : field) || 0;
159

160
        setStats({
161
            pageviews: getValue(data.pageviews),
162
            visits: getValue(data.visits),
163
            visitors: getValue(data.visitors),
164
        });
165

166
    } catch (error) {
167
        console.error('Umami Fetch Failed:', error);
168
        setStats(FALLBACK_STATS);
169
    }
170
}
171

172
let __umamiStatsStarted = false;
173
function startUmamiStats() {
174
    if (__umamiStatsStarted) return;
175
    __umamiStatsStarted = true;
176
    fetchUmamiStats();
177
}
178

179
function initUmamiStatsVisibility() {
180
    const containers = document.querySelectorAll('.umami-stats-container');
181
    const io = new IntersectionObserver((entries) => {
182
        let isAnyVisible = false;
183
        entries.forEach(entry => {
184
            if (entry.isIntersecting) isAnyVisible = true;
185
        });
186

187
        if (isAnyVisible) {
188
            startUmamiStats();
189
            io.disconnect();
190
        }
191
    }, { threshold: 0.1 });
192

193
    containers.forEach(container => io.observe(container));
194
}
195

196
initUmamiStatsVisibility();
197

198
if (window.swup) {
199
    window.swup.hooks.on('page:view', () => {
200
        __umamiStatsStarted = false;
201
        initUmamiStatsVisibility();
202
    });
203
}
204
</script>

1
---
2
import type { MarkdownHeading } from "astro";
3
import Advertisement from "@/components/widget/Advertisement.astro";
4
import Announcement from "@/components/widget/Announcement.astro";
5
import Calendar from "@/components/widget/Calendar.astro";
6
import Categories from "@/components/widget/Categories.astro";
7
import Music from "@/components/widget/Music.astro";
8
import Profile from "@/components/widget/Profile.astro";
9
import SidebarTOC from "@/components/widget/SidebarTOC.astro";
10
import SiteStats from "@/components/widget/SiteStats.astro";
11
import Tags from "@/components/widget/Tags.astro";
12
import { sidebarLayoutConfig } from "@/config";
13
import type {
14
  MobileBottomComponentConfig,
15
  WidgetComponentConfig,
16
  WidgetComponentType,
17
} from "@/types/config";
18
import UmamiStats from "../widget/UmamiStats.astro";
19

20
interface Props {
21
  class?: string;
22
  headings?: MarkdownHeading[];
23
  side?: "left" | "right" | "bottom";
24
}
25

26
// 侧边栏位置常量
27
const SIDEBAR_SIDE = {
28
  LEFT: "left",
29
  RIGHT: "right",
30
  BOTTOM: "bottom",
31
} as const;
32

33
// 组件位置常量
34
const COMPONENT_POSITION = {
35
  TOP: "top",
36
  STICKY: "sticky",
37
} as const;
38

39
// 动画延迟配置
40
const ANIMATION_DELAY_UNIT = 50; // ms
41

42
// 组件映射表
43
const componentMap = {
44
  profile: Profile,
45
  announcement: Announcement,
46
  categories: Categories,
47
  tags: Tags,
48
  sidebarToc: SidebarTOC,
49
  advertisement: Advertisement,
50
  stats: SiteStats,
51
  calendar: Calendar,
52
  music: Music,
53
} satisfies Record<WidgetComponentType, typeof Profile>;
54

55
// 获取侧边栏位置
56
const side = (Astro.props.side ||
57
  SIDEBAR_SIDE.LEFT) as (typeof SIDEBAR_SIDE)[keyof typeof SIDEBAR_SIDE];
58
const className = Astro.props.class;
59

60
// 根据 side 属性获取对应的组件列表
61
const getComponents = (): (
62
  | WidgetComponentConfig
63
  | MobileBottomComponentConfig
64
)[] => {
65
  if (side === SIDEBAR_SIDE.LEFT) {
66
    return sidebarLayoutConfig.leftComponents;
67
  }
68
  if (side === SIDEBAR_SIDE.RIGHT) {
69
    return sidebarLayoutConfig.rightComponents;
70
  }
71
  if (side === SIDEBAR_SIDE.BOTTOM) {
72
    return sidebarLayoutConfig.mobileBottomComponents;
73
  }
74
  return [];
75
};
76

77
// 过滤并排序组件
78
const filterAndSortComponents = (
79
  components: (WidgetComponentConfig | MobileBottomComponentConfig)[],
80
) => {
81
  return components.filter((comp) => comp.enable);
82
};
83

84
// 分离 top 和 sticky 位置的组件
85
const getComponentsByPosition = (
86
  components: (WidgetComponentConfig | MobileBottomComponentConfig)[],
87
) => {
88
  const topComponents = components.filter(
89
    (c) => "position" in c && c.position === COMPONENT_POSITION.TOP,
90
  ) as WidgetComponentConfig[];
91
  const stickyComponents = components.filter(
92
    (c) => "position" in c && c.position === COMPONENT_POSITION.STICKY,
93
  ) as WidgetComponentConfig[];
94
  return { topComponents, stickyComponents };
95
};
96

97
// 获取动画延迟
98
const getAnimationDelay = (index: number): string => {
99
  return `${index * ANIMATION_DELAY_UNIT}ms`;
100
};
101

102
// 判断当前页面是否为文章页面
103
const isPostPage = Astro.url.pathname.includes("/posts/");
104

105
// 判断组件在当前页面首屏是否可见
106
const isComponentInitiallyVisible = (
107
  config: WidgetComponentConfig | MobileBottomComponentConfig,
108
): boolean => {
109
  if (
110
    "showOnPostPage" in config &&
111
    config.showOnPostPage === false &&
112
    isPostPage
113
  ) {
114
    return false;
115
  }
116
  if (
117
    "showOnNonPostPage" in config &&
118
    config.showOnNonPostPage === false &&
119
    !isPostPage
120
  ) {
121
    return false;
122
  }
123
  return true;
124
};
125

126
// 动态构建组件 props
127
const getComponentProps = (
128
  config: WidgetComponentConfig | MobileBottomComponentConfig,
129
  index: number,
130
): Record<string, unknown> => {
131
  const baseProps: Record<string, unknown> = {
132
    class: "onload-animation",
133
    style: `animation-delay: ${getAnimationDelay(index)}`,
134
  };
135

136
  if ("showOnPostPage" in config && config.showOnPostPage === false) {
137
    baseProps.class = `${baseProps.class} widget-hide-on-post`;
138
    if (isPostPage) {
139
      baseProps.class = `${baseProps.class} hidden`;
140
    }
141
  }
142
  if ("showOnNonPostPage" in config && config.showOnNonPostPage === false) {
143
    baseProps.class = `${baseProps.class} widget-hide-on-non-post`;
144
    if (!isPostPage) {
145
      baseProps.class = `${baseProps.class} hidden`;
146
    }
147
  }
148

149
  if (config.type === "sidebarToc") {
150
    return { ...baseProps, headings: Astro.props.headings || [] };
151
  }
152

153
  if (
154
    config.type === "advertisement" &&
155
    "configId" in config &&
156
    config.configId
157
  ) {
158
    return { ...baseProps, configId: config.configId };
159
  }
160

161
  return baseProps;
162
};
163

164
// 获取所有需要渲染的组件
165
const allComponents = getComponents();
166
const filteredComponents = filterAndSortComponents(allComponents);
167

168
const isMobileBottom = side === SIDEBAR_SIDE.BOTTOM;
169
const { topComponents, stickyComponents } = !isMobileBottom
170
  ? getComponentsByPosition(filteredComponents)
171
  : { topComponents: [], stickyComponents: [] };
172
const bottomComponents = isMobileBottom ? filteredComponents : [];
173
const hasInitiallyVisibleTopComponents = topComponents.some(
174
  isComponentInitiallyVisible,
175
);
176

177
// 为移动端准备分离的组件（为了实现 Profile 在上，统计在下）
178
let mobileProfileComp: MobileBottomComponentConfig | undefined;
179
let mobileOtherComponents: MobileBottomComponentConfig[] = [];
180

181
if (isMobileBottom) {
182
  mobileProfileComp = bottomComponents.find((comp) => comp.type === "profile");
183
  mobileOtherComponents = bottomComponents.filter(
184
    (comp) => comp.type !== "profile",
185
  );
186
}
187

188
// 决定是否渲染 sticky 容器（如果有 sticky 组件，或者当前是左侧边栏）
189
const hasStickyContent =
190
  stickyComponents.length > 0 || side === SIDEBAR_SIDE.LEFT;
191
---
192

193
{
194
  (topComponents.length > 0 || stickyComponents.length > 0 || bottomComponents.length > 0 || hasStickyContent) && (
195
    <div id={`${side}-sidebar`} class:list={[className, "flex flex-col w-full pt-0"]}>
196
      {/* Mobile bottom components - 移动端布局 */}
197
      {isMobileBottom ? (
198
        <div class="flex flex-col w-full gap-4">
199
          {/* 1. 先渲染个人信息 */}
200
          {mobileProfileComp && (() => {
201
            const Component = componentMap[mobileProfileComp.type];
202
            if (!Component) return null;
203
            const props = getComponentProps(mobileProfileComp, 0) as any;
204
            return <Component {...props} />;
205
          })()}
206

207
          {/* 2. 接着渲染统计组件（实现上下互换） */}
208
          <UmamiStats class="onload-animation" style="animation-delay: 50ms" />
209

210
          {/* 3. 最后渲染其他的常规组件 */}
211
          {mobileOtherComponents.map((comp, index) => {
212
            const Component = componentMap[comp.type];
213
            if (!Component) return null;
214
            const props = getComponentProps(comp, index + 2) as any;
215
            return <Component {...props} />;
216
          })}
217
        </div>
218
      ) : (
219
        <>
220
          {/* Top components */}
221
          {topComponents.length > 0 && (
222
            <div
223
              class:list={[
224
                "flex flex-col w-full gap-4",
225
                hasInitiallyVisibleTopComponents && "mb-4",
226
              ]}
227
            >
228
              {topComponents.map((comp, index) => {
229
                const Component = componentMap[comp.type];
230
                if (!Component) return null;
231
                const props = getComponentProps(comp, index) as any;
232
                return <Component {...props} />;
233
              })}
234
            </div>
235
          )}
236

237
          {/* Sticky components */}
238
          {hasStickyContent && !isMobileBottom && (
239
            <div
240
              id={`${side}-sidebar-sticky`}
241
              class:list={[
242
                "flex flex-col w-full mt-0 gap-4",
243
                "sticky",
244
                hasInitiallyVisibleTopComponents ? "top-4" : "top-0",
245
              ]}
246
            >
247
              {/* PC 端仅在左侧边栏渲染统计，避免两侧重复 */}
248
              {side === SIDEBAR_SIDE.LEFT && (
249
                <UmamiStats class="onload-animation" style="animation-delay: 200ms" />
250
              )}
251

252
              {stickyComponents.map((comp, index) => {
253
                const Component = componentMap[comp.type];
254
                if (!Component) return null;
255
                const props = getComponentProps(
256
                  comp,
257
                  topComponents.length + index
258
                ) as any;
259
                return <Component {...props} />;
260
              })}
261
            </div>
262
          )}
263
        </>
264
      )}
265
    </div>
266
  )
267
}