Add workshop sorting tabs and cache results

Author: ChiYuKe

.vitepress/theme/components/WorkshopList.vue

@@ -4,6 +4,7 @@ import { ref, onMounted } from 'vue'
 const mods = ref([])
 const loading = ref(true)
 const errorMessage = ref('')
+const activeSort = ref('trend')
 
 const APP_ID = 457140
 const PAGE_SIZE = 12
@@ -12,6 +13,28 @@ const WORKSHOP_API_BASE = (
   import.meta.env.VITE_WORKSHOP_API_BASE || DEFAULT_WORKSHOP_API_BASE
 ).replace(/\/$/, '')
 const STEAM_WORKSHOP_HOME = `https://steamcommunity.com/app/${APP_ID}/workshop/`
+const SORT_OPTIONS = [
+  {
+    value: 'trend',
+    label: '最热门',
+    description: '过去 3 个月内评价最高'
+  },
+  {
+    value: 'totaluniquesubscribers',
+    label: '最多人订阅',
+    description: '订阅人数最多'
+  },
+  {
+    value: 'lastupdated',
+    label: '最新更新',
+    description: '最近更新的模组'
+  },
+  {
+    value: 'mostrecent',
+    label: '最新',
+    description: '最新发布的模组'
+  }
+]
 
 function normalizeSteamImage(url) {
   if (!url) return 'https://placehold.co/400x240/1b1f29/d9dee7?text=Steam+Workshop'
@@ -81,15 +104,13 @@ function mapWorkshopFile(file) {
   }
 }
 
-async function queryWorkshopFiles() {
+async function queryWorkshopFiles(sort = activeSort.value) {
   if (WORKSHOP_API_BASE) {
     const params = new URLSearchParams({
       appid: String(APP_ID),
       page: '1',
       limit: String(PAGE_SIZE),
-      sort: 'trend',
-      refresh: '1',
-      t: String(Math.floor(Date.now() / (5 * 60 * 1000)))
+      sort
     })
 
     const res = await fetchWithTimeout(`${WORKSHOP_API_BASE}/workshop?${params}`)
@@ -103,7 +124,11 @@ async function queryWorkshopFiles() {
     appid: APP_ID,
     page: 1,
     numperpage: PAGE_SIZE,
-    query_type: 3,
+    query_type: sort === 'mostrecent' || sort === 'lastupdated'
+      ? 4
+      : sort === 'totaluniquesubscribers'
+        ? 0
+        : 3,
     return_metadata: true,
     return_vote_data: true,
     return_previews: true
@@ -122,9 +147,12 @@ async function queryWorkshopFiles() {
   return files.map(mapWorkshopFile).filter(mod => mod.link && mod.link !== '#')
 }
 
-onMounted(async () => {
+async function loadWorkshopMods(sort = activeSort.value) {
+  loading.value = true
+  errorMessage.value = ''
+
   try {
-    mods.value = await queryWorkshopFiles()
+    mods.value = await queryWorkshopFiles(sort)
     if (!mods.value.length) {
       errorMessage.value = 'Steam 暂时没有返回创意工坊条目。'
     }
@@ -134,11 +162,37 @@ onMounted(async () => {
   } finally {
     loading.value = false
   }
+}
+
+function selectSort(sort) {
+  if (sort === activeSort.value && mods.value.length) return
+  activeSort.value = sort
+  loadWorkshopMods(sort)
+}
+
+onMounted(() => {
+  loadWorkshopMods()
 })
 </script>
 
 <template>
   <div class="workshop-container">
+    <div class="workshop-sort" aria-label="创意工坊分类">
+      <button
+        v-for="option in SORT_OPTIONS"
+        :key="option.value"
+        type="button"
+        class="workshop-sort__button"
+        :class="{ 'workshop-sort__button--active': activeSort === option.value }"
+        :aria-pressed="activeSort === option.value"
+        :disabled="loading && activeSort === option.value"
+        @click="selectSort(option.value)"
+      >
+        <span class="workshop-sort__label">{{ option.label }}</span>
+        <span class="workshop-sort__description">{{ option.description }}</span>
+      </button>
+    </div>
+
     <div v-if="loading" class="state-box">
       正在连接 Steam 创意工坊...
     </div>
@@ -187,6 +241,71 @@ onMounted(async () => {
   max-width: 920px;
 }
 
+.workshop-sort {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 22px;
+  margin: 0 0 22px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.workshop-sort__button {
+  position: relative;
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+  padding: 0 0 12px;
+  color: var(--vp-c-text-2);
+  text-align: left;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+
+.workshop-sort__button::after {
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  background: var(--vp-c-brand-1);
+  border-radius: 999px;
+  content: '';
+  opacity: 0;
+  transform: scaleX(0.7);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.workshop-sort__button:hover,
+.workshop-sort__button--active {
+  color: var(--vp-c-text-1);
+}
+
+.workshop-sort__button--active::after {
+  opacity: 1;
+  transform: scaleX(1);
+}
+
+.workshop-sort__button:disabled {
+  cursor: wait;
+}
+
+.workshop-sort__label {
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
+.workshop-sort__description {
+  min-height: 1.3em;
+  color: var(--vp-c-text-2);
+  font-size: 0.82rem;
+  line-height: 1.3;
+  white-space: nowrap;
+}
+
 .state-box {
   text-align: center;
   padding: 2rem;
@@ -219,6 +338,17 @@ onMounted(async () => {
 }
 
 @media (max-width: 600px) {
+  .workshop-sort {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px 16px;
+  }
+
+  .workshop-sort__label,
+  .workshop-sort__description {
+    white-space: normal;
+  }
+
   .mod-grid {
     grid-template-columns: 1fr;
   }

workers/steam-workshop-worker.js

@@ -2,6 +2,7 @@ const DEFAULT_APP_ID = 457140
 const DEFAULT_LIMIT = 6
 const MAX_LIMIT = 20
 const CACHE_VERSION = 'v2'
+const WORKSHOP_CACHE_TTL = 3600
 const STEAM_COMMUNITY_ORIGIN = 'https://steamcommunity.com'
 const STEAM_API_ORIGIN = 'https://api.steampowered.com'
 
@@ -92,7 +93,7 @@ async function handleWorkshop(url, env, ctx) {
   }
 
   const response = json(body, 200, {
-    'Cache-Control': items.length ? 'public, max-age=900' : 'no-store'
+    'Cache-Control': items.length ? `public, max-age=${WORKSHOP_CACHE_TTL}` : 'no-store'
   })
 
   if (items.length) {
@@ -366,7 +367,7 @@ async function postFormJson(url, body) {
     },
     body,
     cf: {
-      cacheTtl: 900,
+      cacheTtl: WORKSHOP_CACHE_TTL,
       cacheEverything: true
     }
   })
@@ -388,19 +389,19 @@ function steamRequestInit(accept) {
       'Accept-Language': 'zh-CN,zh;q=0.9,en;q=0.8'
     },
     cf: {
-      cacheTtl: 900,
+      cacheTtl: WORKSHOP_CACHE_TTL,
       cacheEverything: true
     }
   }
 }
 
 function normalizeSort(sort) {
-  const allowed = new Set(['trend', 'popular', 'mostrecent', 'totaluniquesubscribers', 'totaluniquevisitor'])
+  const allowed = new Set(['trend', 'popular', 'mostrecent', 'lastupdated', 'totaluniquesubscribers', 'totaluniquevisitor'])
   return allowed.has(sort) ? sort : 'trend'
 }
 
 function queryTypeForSort(sort) {
-  if (sort === 'mostrecent') return 4
+  if (sort === 'mostrecent' || sort === 'lastupdated') return 4
   if (sort === 'totaluniquesubscribers' || sort === 'popular') return 0
   return 3
 }