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

4
const defaultRoutes = [
5
  { name: "默认线路", value: "default", domain: "默认线路的地址" },
6
  { name: "Cloudflare", value: "cloudflare", domain: "Cloudflare线路地址" },
7
  { name: "Edgeone", value: "edgeone", domain: "Edgeone线路地址" },
8
  { name: "Netlify", value: "netlify", domain: "Netlify线路地址" },
9
  { name: "Aliyun", value: "aliyun", domain: "Aliyun线路地址" },
10
  { name: "Fastly", value: "fastly", domain: "Fastly线路地址" },
11
];
12

13
const routes = defaultRoutes;
14
const MAX_VISIBLE = 4;
15
const COLLAPSED_HEIGHT = "7.5rem";
16
const isCollapsed = routes.length >= 10;
17

18
interface Props {
19
  class?: string;
20
  style?: string;
21
}
22
const className = Astro.props.class;
23
const style = Astro.props.style;
24
---
25

26
<WidgetLayout
27
  name="线路切换"
28
  id="routes"
29
  isCollapsed={isCollapsed}
30
  collapsedHeight={COLLAPSED_HEIGHT}
31
  class={className}
32
  style={style}
33
>
34
  <div class="flex flex-col gap-4">
35
    {routes.slice(0, MAX_VISIBLE).map(r => (
36
      <button
37
        class="route-btn w-full flex items-center justify-between btn-regular h-10 px-4 rounded-lg text-left"
38
        data-value={r.value}
39
        data-domain={r.domain}
40
        aria-label={`切换到 ${r.name}`}
41
      >
42
        <span class="flex-1 text-sm">{r.name}</span>
43
        <div class="flex items-center gap-2 flex-shrink-0">
44
          <span class="delay-text text-xs text-gray-400 w-10 text-right">--</span>
45
          <span class="delay-indicator w-4 h-4 rounded-full border-2 border-gray-400 flex items-center justify-center flex-shrink-0">
46
            <span class="delay-dot w-2 h-2 rounded-full bg-gray-300"></span>
47
          </span>
48
        </div>
49
      </button>
50
    ))}
51

52
    {routes.length > MAX_VISIBLE && (
53
      <div id="extra-routes" class="flex flex-col gap-4 hidden">
54
        {routes.slice(MAX_VISIBLE).map(r => (
55
          <button
56
            class="route-btn w-full flex items-center justify-between btn-regular h-10 px-4 rounded-lg text-left"
57
            data-value={r.value}
58
            data-domain={r.domain}
59
            aria-label={`切换到 ${r.name}`}
60
          >
61
            <span class="flex-1 text-sm">{r.name}</span>
62
            <div class="flex items-center gap-2 flex-shrink-0">
63
              <span class="delay-text text-xs text-gray-400 w-10 text-right">--</span>
64
              <span class="delay-indicator w-4 h-4 rounded-full border-2 border-gray-400 flex items-center justify-center flex-shrink-0">
65
                <span class="delay-dot w-2 h-2 rounded-full bg-gray-300"></span>
66
              </span>
67
            </div>
68
          </button>
69
        ))}
70
      </div>
71
    )}
72

73
    {routes.length > MAX_VISIBLE && (
74
      <button id="toggle-routes" class="btn-regular h-8 text-sm px-3 rounded-lg w-full text-center text-gray-400 hover:text-gray-600 transition">
75
        展开更多 ▼
76
      </button>
77
    )}
78
  </div>
79
  <div class="text-xs text-gray-400 mt-2 text-center">这里填写你想在下面显示的小字哦</div>
80
</WidgetLayout>
81

82
<script>
83
  (function() {
84
    var hostnameMap = {
85
      'blog.thelittlequtegdh.top': 'default',
86
      'cloudflare.thelittlequtegdh.top': 'cloudflare',
87
      'edgeone.thelittlequtegdh.top': 'edgeone',
88
      'netlify.thelittlequtegdh.top': 'netlify',
89
      'aliyun.thelittlequtegdh.top': 'aliyun',
90
      'fastly.thelittlequtegdh.top': 'fastly',
91
    };
92
    var cacheKey = 'delayCache';
93
    var expireTime = 5000;
94
    var testCount = 3;
95
    var singleTimeout = 3000;
96

97
    function initRoutes() {
98
      var currentHost = window.location.hostname;
99
      var currentRoute = hostnameMap[currentHost] || 'default';
100
      localStorage.setItem('selectedRoute', currentRoute);
101

102
      var buttons = document.querySelectorAll('.route-btn');
103
      var dotElements = document.querySelectorAll('.delay-dot');
104
      var textElements = document.querySelectorAll('.delay-text');
105
      var domainMap = {};
106
      buttons.forEach(function(btn, idx) {
107
        var domain = btn.dataset.domain;
108
        domainMap[domain] = { btn: btn, dot: dotElements[idx], text: textElements[idx] };
109
      });
110

111
      function singleTest(domain) {
112
        var url = 'https://' + domain + '/?t=' + Date.now() + '&r=' + Math.random();
113
        var controller = new AbortController();
114
        var timeout = setTimeout(function() { controller.abort(); }, singleTimeout);
115
        var start = performance.now();
116
        return fetch(url, { method: 'GET', mode: 'no-cors', signal: controller.signal })
117
          .then(function() {
118
            clearTimeout(timeout);
119
            return performance.now() - start;
120
          })
121
          .catch(function() {
122
            clearTimeout(timeout);
123
            return null;
124
          });
125
      }
126

127
      function testDelay(domain) {
128
        var tasks = [];
129
        for (var i = 0; i < testCount; i++) {
130
          tasks.push(singleTest(domain));
131
        }
132
        return Promise.all(tasks).then(function(results) {
133
          var valid = results.filter(function(t) { return t !== null; });
134
          if (valid.length === 0) return Infinity;
135
          valid.sort(function(a, b) { return a - b; });
136
          if (valid.length >= 3) valid = valid.slice(1, -1);
137
          var sum = valid.reduce(function(s, v) { return s + v; }, 0);
138
          return Math.round(sum / valid.length);
139
        });
140
      }
141

142
      function getColor(delay) {
143
        if (delay <= 50) return 'bg-green-700 border-green-700';
144
        if (delay <= 100) return 'bg-green-500 border-green-500';
145
        if (delay <= 200) return 'bg-green-300 border-green-300';
146
        if (delay <= 250) return 'bg-yellow-400 border-yellow-400';
147
        if (delay <= 300) return 'bg-orange-400 border-orange-400';
148
        return 'bg-red-600 border-red-600';
149
      }
150

151
      function updateDot(dot, text, delay) {
152
        var color;
153
        var display;
154
        if (delay === Infinity || delay === undefined || delay === null) {
155
          color = 'bg-red-600 border-red-600';
156
          display = 'TimeOut';
157
        } else {
158
          color = getColor(delay);
159
          display = delay + 'ms';
160
        }
161
        dot.className = 'w-2 h-2 rounded-full ' + color + ' delay-dot';
162
        text.textContent = display;
163
      }
164

165
      var cacheStr = localStorage.getItem(cacheKey);
166
      var cache = cacheStr ? JSON.parse(cacheStr) : {};
167
      var now = Date.now();
168

169
      function refreshAllDelays() {
170
        var now = Date.now();
171
        var domains = Object.keys(domainMap);
172
        var promises = domains.map(function(domain) {
173
          return testDelay(domain).then(function(delay) {
174
            var entry = domainMap[domain];
175
            updateDot(entry.dot, entry.text, delay);
176
            cache[domain] = { delay: delay, time: now };
177
          }).catch(function() {});
178
        });
179
        Promise.allSettled(promises).then(function() {
180
          localStorage.setItem(cacheKey, JSON.stringify(cache));
181
        });
182
      }
183

184
      var domains = Object.keys(domainMap);
185
      var pending = domains.length;
186
      domains.forEach(function(domain) {
187
        var cached = cache[domain];
188
        var entry = domainMap[domain];
189
        if (cached && (now - cached.time) < expireTime) {
190
          updateDot(entry.dot, entry.text, cached.delay);
191
          pending--;
192
        } else {
193
          testDelay(domain).then(function(delay) {
194
            updateDot(entry.dot, entry.text, delay);
195
            cache[domain] = { delay: delay, time: now };
196
            pending--;
197
            if (pending === 0) {
198
              localStorage.setItem(cacheKey, JSON.stringify(cache));
199
            }
200
          }).catch(function() {
201
            pending--;
202
          });
203
        }
204
      });
205

206
      if (window._delayTimer) clearInterval(window._delayTimer);
207
      window._delayTimer = setInterval(refreshAllDelays, expireTime);
208

209
      // 折叠/展开按钮（使用 onclick 直接赋值，确保覆盖之前的绑定）
210
      var toggleBtn = document.getElementById('toggle-routes');
211
      var extraDiv = document.getElementById('extra-routes');
212
      if (toggleBtn && extraDiv) {
213
        toggleBtn.onclick = function() {
214
          var isHidden = extraDiv.classList.contains('hidden');
215
          if (isHidden) {
216
            extraDiv.classList.remove('hidden');
217
            toggleBtn.textContent = '收起更多 ▲';
218
          } else {
219
            extraDiv.classList.add('hidden');
220
            toggleBtn.textContent = '展开更多 ▼';
221
          }
222
        };
223
      }
224

225
      // 线路按钮点击跳转（使用 onclick 直接赋值）
226
      buttons.forEach(function(btn) {
227
        if (btn.dataset.value === currentRoute) {
228
          btn.classList.add('active');
229
        } else {
230
          btn.classList.remove('active');
231
        }
232
        btn.onclick = function() {
233
          var domain = this.dataset.domain;
234
          var value = this.dataset.value;
235
          localStorage.setItem('selectedRoute', value);
236
          window.location.href = 'https://' + domain;
237
        };
238
      });
239
    }
240

241
    if (document.readyState === 'loading') {
242
      document.addEventListener('DOMContentLoaded', initRoutes);
243
    } else {
244
      initRoutes();
245
    }
246

247
    if (window.swup && window.swup.hooks) {
248
      window.swup.hooks.on('page:view', initRoutes);
249
    }
250
  })();
251
</script>
252

253
<style is:global>
254
  @keyframes pulse-dot {
255
    0% { transform: scale(1); opacity: 0.6; }
256
    50% { transform: scale(1.3); opacity: 1; }
257
    100% { transform: scale(1); opacity: 0.6; }
258
  }
259
  .delay-dot {
260
    animation: pulse-dot 2s ease-in-out infinite;
261
  }
262
  .route-btn.active {
263
    background-color: var(--primary);
264
    color: white;
265
  }
266
  .route-btn.active .delay-indicator {
267
    border-color: white;
268
  }
269
  .route-btn.active .delay-text {
270
    color: white !important;
271
  }
272
  .route-btn.active .delay-dot {
273
    border-color: white;
274
  }
275
  .delay-indicator {
276
    border: 2px solid #9ca3af;
277
  }
278
  #toggle-routes {
279
    user-select: none;
280
  }
281
</style>

1
---
2
import type { MarkdownHeading } from "astro";
3
import Categories from "./Categories.astro";
4
import Profile from "./Profile.astro";
5
import Tag from "./Tags.astro";
6
import Routes from "./Routes.astro";
7

8
interface Props {
9
  class?: string;
10
  headings?: MarkdownHeading[];
11
}
12

13
const className = Astro.props.class;
14
---
15
<div id="sidebar" class:list={[className, "w-full"]}>
16
    <div class="flex flex-col w-full gap-4 mb-4">
17
        <Profile />
18
    </div>
19
    <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
20
        <Categories class="onload-animation" style="animation-delay: 150ms" />
21
        <Routes class="onload-animation" style="animation-delay: 200ms" />
22
        <Tag class="onload-animation" style="animation-delay: 250ms" />
23
    </div>
24
</div>

1
import Routes from "./Routes.astro";
2
.......
3
<Routes class="onload-animation" style="animation-delay: 200ms" />

1
function getRouteUrl(value) {
2
  const map = {
3
    default: '默认线路网址',
4
    cloudflare: 'cf线路网址',
5
    edgeone: 'eo线路网址',
6
    netlify: 'netlify线路网址',
7
    aliyun: '阿里云线路网址',
8
    fastly: 'fastly线路网址',
9
  };
10
  return map[value] || '这里填写默认线路的网址';
11
}
12

13
function applyRoute(value) {
14
  window.location.href = getRouteUrl(value);
15
}
16

17
window.addEventListener('route-switch', (e) => {
18
  const { value } = e.detail;
19
  localStorage.setItem('selectedRoute', value);
20
  applyRoute(value);
21
});
22

23
window.getCurrentRoute = function() {
24
  return localStorage.getItem('selectedRoute') || null;
25
};
26
window.getCurrentRouteUrl = function() {
27
  const route = window.getCurrentRoute();
28
  return route ? getRouteUrl(route) : null;
29
};