Vue Scenarios

Search box (debounce + timeout + retry)

import { ref } from 'vue'
import { debounce, Http } from 'nex-lib'
const q = ref('')
const search = debounce(async (kw: string) => {
  const data = await Http.get('/api/search', {
    query: { q: kw },
    timeoutMs: 3000,
    retry: { times: 3, delay: 200 },
  })
  // 更新列表数据
}, 300)

Countdown (TTL + server time)

import { ref, onMounted, onUnmounted } from 'vue'
import { nextAt, nowSeconds, formatDuration, Http, StorageUtils } from 'nex-lib'
const remain = ref('00:00:00')
const cached = StorageUtils.getWithTTL('holiday_target')
const computedTarget = nextAt(3, 18)
const target = typeof cached === 'number' ? cached : computedTarget
StorageUtils.setWithTTL('holiday_target', target, 24*60*60*1000)
let timer: any
async function tick() {
  const now = await Http.get<{ now: number }>('/api/time', { timeoutMs: 3000, retry: 2 })
    .then(r => r.now).catch(() => nowSeconds())
  remain.value = formatDuration(Math.max(0, (target - now) * 1000))
}
onMounted(() => { timer = setInterval(tick, 1000) })
onUnmounted(() => { clearInterval(timer) })

UTM merge + same‑origin + copy

import { createWURL, StorageUtils, browserUtils } from 'nex-lib'
const w = createWURL(location.href)
const merged = w.replaceParams({ ...w.parseQueryParams(), utm_source: 'web', sku })
if (!w.isSameOrigin(merged)) throw new Error('unsafe')
StorageUtils.setWithTTL('utm', merged, 7*24*60*60*1000)
await browserUtils.copyToClipboard(merged)

Theme via CSS variables

import { ColorUtils } from 'nex-lib'
const brand = '#ffcc00'
document.documentElement.style.setProperty('--btn-bg', ColorUtils.darken(brand, .1))
document.documentElement.style.setProperty('--block-bg', ColorUtils.lighten(brand, .15))
document.documentElement.style.setProperty('--text', ColorUtils.contrastColor(ColorUtils.darken(brand, .1)))