clarity-theme 0.1.0

package/app/components/content/VideoEmbed.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+	/** 视频类型，数字过长时需通过双引号传入字符串 */
+	type?: 'raw' | 'bilibili' | 'bilibili-nano' | 'youtube' | 'douyin' | 'douyin-wide' | 'tiktok'
+	id: string
+	autoplay?: boolean
+	/** 视频宽高比，如 `16 / 9` `1.6` */
+	ratio?: string | number
+	/** 仅 type 为 `raw` 时可用 */
+	poster?: string
+	/** 视频宽度 */
+	width?: string
+	/** 视频高度 */
+	height?: string
+	/** CSS Zoom 比例 */
+	zoom?: number
+}>(), {
+	type: 'raw',
+	height: '80vh',
+})
+
+const ratio = computed(() => {
+	if (props.ratio) {
+		return props.ratio
+	}
+	switch (props.type) {
+		case 'raw':
+			return undefined
+		case 'douyin':
+			return '27 / 56'
+		case 'douyin-wide':
+			return '1198 / 731'
+		default:
+			return '16 / 9'
+	}
+})
+
+const src = computed(() => {
+	switch (props.type) {
+		case 'bilibili':
+			return `https://player.bilibili.com/player.html?bvid=${props.id}&autoplay=${props.autoplay}`
+		case 'bilibili-nano':
+			return `https://www.bilibili.com/blackboard/newplayer.html?bvid=${props.id}&autoplay=${props.autoplay}`
+		case 'youtube':
+			return `https://www.youtube.com/embed/${props.id}?rel=0&disablekb=1&playsinline=1&autoplay=${props.autoplay}`
+		case 'douyin':
+			return `https://open.douyin.com/player/video?vid=${props.id}`
+		case 'douyin-wide':
+			return `https://open.douyin.com/player/video?vid=${props.id}`
+		case 'tiktok':
+			return `https://www.tiktok.com/embed/v3/${props.id}`
+		default:
+			return props.id
+	}
+})
+
+const videoPlayer = useTemplateRef('video-player')
+
+// 抖音会预检测宽度是否小于 730px，再返回竖屏或横屏模式
+// douyin-wide 需要阻塞加载，等进入视口后通过 zoom: 0.1 触发横屏模式
+// 已优化为 loading="lazy"
+const zoom = ref<number>()
+const zoomFactorForFixed = {
+	'douyin': 0.0031,
+	'douyin-wide': 0.00134,
+}
+
+function useZoomHelper(resizeType: keyof typeof zoomFactorForFixed) {
+	useResizeObserver(videoPlayer, ([entry]) => {
+		if (!entry)
+			return
+		const { width } = entry.contentRect
+		const zoomFactor = zoomFactorForFixed[resizeType]
+		zoom.value = width * zoomFactor
+	})
+}
+
+onMounted(() => {
+	if (props.type in zoomFactorForFixed)
+		useZoomHelper(props.type as keyof typeof zoomFactorForFixed)
+})
+</script>
+
+<template>
+<div
+	ref="video-player"
+	class="video"
+	:style="{
+		aspectRatio: ratio,
+		maxWidth: width,
+		maxHeight: height,
+	}"
+>
+	<video
+		v-if="type === 'raw'"
+		:poster
+		:src
+		controls
+	/>
+	<iframe
+		v-else
+		:src
+		:style="{ zoom }"
+		scrolling="no"
+		loading="lazy"
+		allow="accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture"
+	/>
+</div>
+</template>
+
+<style lang="scss" scoped>
+.video {
+	contain: paint;
+	border-radius: 0.8rem;
+	box-shadow: var(--box-shadow-2);
+
+	article & {
+		margin: 2rem auto;
+	}
+}
+
+iframe, video {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+</style>

package/app/components/partial/Button.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { UtilLink } from '#components'
+
+export interface ButtonProps {
+	variant?: 'button' | 'text'
+	icon?: string
+	text?: string
+	to?: string
+	desc?: string
+	primary?: boolean
+}
+
+withDefaults(defineProps<ButtonProps>(), {
+	variant: 'button',
+})
+</script>
+
+<template>
+<component
+	:is="to ? UtilLink : 'button'"
+	:to
+	class="z-button"
+	:class="[variant, { primary }]"
+>
+	<div class="button-main">
+		<Icon v-if="icon" :name="icon" />
+		<slot>{{ text }}</slot>
+	</div>
+	<div v-if="desc" class="button-desc">
+		{{ desc }}
+	</div>
+</component>
+</template>
+
+<style lang="scss" scoped>
+.z-button {
+	display: inline-block;
+	transition: color 0.1s, background-color 0.2s;
+
+	&.button {
+		padding: 0.4em 0.6em;
+		border: 1px solid var(--c-bg-soft);
+		border-radius: 0.5em;
+		box-shadow: var(--box-shadow-1);
+		background-color: var(--ld-bg-card);
+		line-height: 1.2;
+		vertical-align: middle;
+		cursor: pointer;
+
+		&.primary {
+			background-color: var(--c-primary);
+			color: var(--c-bg);
+		}
+
+		&:hover {
+			box-shadow: var(--box-shadow-2);
+			background-color: var(--c-bg-2);
+			color: var(--c-text);
+		}
+
+		&:active {
+			background-color: var(--ld-shadow);
+		}
+
+		&:disabled {
+			background-color: var(--c-bg-1);
+		}
+	}
+
+	&.text {
+		&:hover {
+			color: var(--c-primary);
+		}
+	}
+
+	&:disabled {
+		color: var(--c-text-3);
+		cursor: not-allowed;
+	}
+
+	& + .button {
+		margin-inline-start: 0.8em;
+	}
+}
+
+.button-main {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.2em;
+}
+
+.button-desc {
+	font-size: 0.75em;
+	text-align: center;
+	color: var(--c-text-2);
+}
+</style>

package/app/components/partial/DlGroup.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { VNodeChild } from 'vue'
+
+interface DlItem {
+	label: string
+	value: MaybeRefOrGetter<VNodeChild>
+	tip?: MaybeRefOrGetter<string>
+}
+
+withDefaults(defineProps<{
+	items: DlItem[]
+	size?: 'small' | 'medium' | 'large'
+}>(), {
+	size: 'medium',
+})
+</script>
+
+<template>
+<dl class="dl-group" :class="size">
+	<div v-for="{ label, value, tip } in items" :key="label">
+		<dt>{{ label }}</dt>
+		<dd :title="toValue(tip)">
+			<!-- 支持 string, Ref<String>, VNode, () => VNode -->
+			<component :is="() => toValue(value)" />
+		</dd>
+	</div>
+</dl>
+</template>
+
+<style lang="scss" scoped>
+.dl-group {
+	> div {
+		padding: 0.2em 0;
+
+		> dt {
+			font-size: 0.9em;
+			color: var(--c-text-2);
+		}
+	}
+}
+
+.dl-group.small {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5em 1em;
+	text-align: center;
+
+	> div {
+		flex: 1;
+		white-space: nowrap;
+	}
+}
+
+.dl-group.medium {
+	display: grid;
+	grid-template-columns: auto auto;
+	gap: 0.4em 8%;
+	padding: 0.2em 0;
+
+	> div {
+		display: contents;
+
+		> dt {
+			font-size: inherit;
+			text-align: end;
+		}
+	}
+}
+</style>

package/app/components/partial/Dropdown.vue

@@ -0,0 +1,54 @@
+<!-- https://vue-tippy.netlify.app/props/ -->
+<!-- 如果要点击触发，请使用 trigger="focusin" 并添加 tabindex="0" -->
+
+<template>
+<Tooltip
+	class="dropdown"
+	interactive
+	placement="bottom"
+	:arrow="false"
+	:hide-on-click="false"
+	:offset="[0, 0]"
+>
+	<slot />
+	<template #content="{ hide }">
+		<slot name="content" :hide />
+	</template>
+</Tooltip>
+</template>
+
+<style lang="scss" scoped>
+// https://vue-tippy.netlify.app/props#appendto
+// Tooltip 位于组件根部时，interactive tippy 会插入到父组件
+:deep() ~ [data-tippy-root] > .tippy-box {
+	padding: 0.3em;
+	font-size: inherit;
+
+	&[data-placement="top"] {
+		--c-fill: var(--c-bg-1);
+	}
+}
+
+:deep() ~ [data-tippy-root] .tippy-content {
+	display: grid;
+
+	button {
+		padding: 0.3em 0.5em;
+		border-radius: 0.3em;
+		text-align: start;
+		color: var(--c-text-1);
+		transition: color 0.1s, background-color 0.2s;
+		cursor: pointer;
+
+		&:hover {
+			background-color: var(--c-bg-soft);
+			color: var(--c-text-1);
+		}
+
+		&.active {
+			background-color: var(--c-primary-soft);
+			color: var(--c-primary);
+		}
+	}
+}
+</style>

package/app/components/partial/Error.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { BundledLanguage } from 'shiki'
+
+withDefaults(defineProps<{
+	icon?: string
+	title?: string
+	message?: string
+	code?: string
+	language?: BundledLanguage
+}>(), {
+	icon: 'line-md:cloud-alt-print-twotone-loop',
+	language: 'log',
+})
+</script>
+
+<template>
+<div class="error proper-height">
+	<div />
+	<Icon class="error-icon" :name="icon" />
+	<div class="error-title" v-html="title" />
+
+	<div class="operation">
+		<slot name="operation" />
+	</div>
+
+	<ProsePre
+		v-if="code"
+		:filename="message"
+		:language
+		:code
+		meta="wrap"
+	/>
+
+	<slot />
+</div>
+</template>
+
+<style lang="scss" scoped>
+.error {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 2rem;
+
+	> .error-icon {
+		font-size: 5rem;
+		color: var(--c-text-3);
+	}
+
+	> .error-title {
+		font-size: 1.5rem;
+		word-break: break-all;
+		color: var(--c-text-3);
+
+		> :deep(pre) {
+			font-size: 1rem;
+			white-space: pre-wrap;
+		}
+	}
+
+	> .z-codeblock {
+		max-width: 100%;
+
+		:deep(.shiki) {
+			background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+		}
+	}
+}
+</style>

package/app/components/partial/Expand.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+defineProps<{
+	name?: string
+	inPlace?: boolean
+}>()
+
+const expand = defineModel<boolean>()
+</script>
+
+<template>
+<div class="z-expand">
+	<Transition name="collapse">
+		<div v-show="expand" class="expand-content">
+			<slot />
+		</div>
+	</Transition>
+
+	<button class="toggle-btn" :class="{ 'in-place': inPlace }" @click="expand = !expand">
+		<Icon class="toggle-icon" :class="{ expand }" name="tabler:chevrons-down" />
+		<span>{{ `${expand ? '收起' : '展开'}${name}` }}</span>
+	</button>
+</div>
+</template>
+
+<style lang="scss" scoped>
+.z-expand {
+	display: flex;
+	flex-direction: column;
+}
+
+.toggle-btn {
+	display: block;
+	width: fit-content;
+	margin: 0 auto;
+	padding: 0.3em;
+	font-size: 0.9em;
+	color: var(--c-text-2);
+
+	&.in-place {
+		order: -1;
+	}
+}
+
+.toggle-icon {
+	transition: transform 0.2s;
+
+	&.expand {
+		transform: scaleY(-1);
+	}
+}
+</style>

package/app/components/partial/IconNavList.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { NavItem } from '../../types/nav'
+
+defineProps<{
+	list: NavItem[]
+}>()
+</script>
+
+<template>
+<menu>
+	<UtilLink
+		v-for="{ text, icon, url } in list"
+		:key="text"
+		v-tip="text"
+		:to="url"
+		:aria-label="text"
+	>
+		<Icon :name="icon" />
+	</UtilLink>
+</menu>
+</template>
+
+<style lang="scss" scoped>
+menu {
+	display: flex;
+	justify-content: center;
+
+	a {
+		padding: 0.5em;
+		border-radius: 2em;
+		transition: background-color 0.2s;
+
+		&:hover {
+			background-color: var(--c-bg-soft);
+		}
+
+		.iconify {
+			display: block;
+		}
+	}
+}
+</style>

package/app/components/partial/Pagination.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+const props = defineProps<{
+	totalPages: number
+	expandPages?: number
+	sticky?: boolean
+	avoid?: boolean
+}>()
+
+const page = defineModel<number>({ required: true })
+const pageArr = computed(() => getPaginationIndicator(page.value, props.totalPages, props.expandPages ?? 2))
+
+const paginationEl = useTemplateRef('pagination')
+const anchorEl = useTemplateRef('pagination-anchor')
+const expand = useElementVisibility(anchorEl)
+
+if (props.avoid) {
+	useAvoidTarget(paginationEl, toRef(props, 'avoid'))
+}
+</script>
+
+<template>
+<nav
+	ref="pagination"
+	class="pagination"
+	:class="{ sticky, expand }"
+	:aria-label="`第${page}页，共${totalPages}页`"
+	:style="{ '--collapsed-width': `${pageArr.length * 2 + 6}em` }"
+>
+	<ZButton
+		:disabled="page <= 1"
+		class="pagination-button rtl-flip"
+		icon="tabler:arrow-left"
+		aria-label="上一页"
+		@click="page--"
+	/>
+	<template v-for="i in pageArr" :key="i">
+		<button
+			v-if="Number.isFinite(i)"
+			class="pagination-num"
+			:class="{ active: i === page }"
+			:aria-label="`第${i}页`"
+			@click="page = i"
+			v-text="i"
+		/>
+		<!-- TODO: 点击后自主选择目标页面 -->
+		<button v-else disabled class="pagination-num">
+			…
+		</button>
+	</template>
+	<ZButton
+		:disabled="page >= totalPages"
+		class="pagination-button rtl-flip"
+		icon="tabler:arrow-right"
+		aria-label="下一页"
+		@click="page++"
+	/>
+</nav>
+<div ref="pagination-anchor" />
+</template>
+
+<style lang="scss" scoped>
+.pagination {
+	display: flex;
+	max-width: calc(100vw);
+	margin: 1rem auto;
+	border: 1px solid var(--c-border);
+	border-radius: 0.5rem;
+	box-shadow: var(--box-shadow-1);
+	background-color: var(--ld-bg-card);
+	transition: max-width 0.2s var(--max-bezier-to-full);
+	font-variant-numeric: tabular-nums;
+
+	&.sticky {
+		position: sticky;
+		bottom: min(2em, 5%);
+
+		&:not(.expand) {
+			max-width: var(--collapsed-width);
+			transition-timing-function: var(--max-bezier-to-collapse);
+		}
+	}
+
+	> .pagination-button {
+		border: none;
+		border-radius: 0;
+		box-shadow: none;
+
+		&:first-child {
+			margin-inline-end: auto;
+			border-radius: 0.5rem 0 0 0.5rem;
+		}
+
+		&:last-child {
+			margin-inline-start: auto;
+			border-radius: 0 0.5rem 0.5rem 0;
+		}
+	}
+
+	> .pagination-num {
+		width: 3em;
+		transition: background-color 0.2s;
+
+		&:hover { background-color: var(--c-border); }
+
+		&:disabled { pointer-events: none; }
+
+		&.active {
+			background-color: var(--c-primary-soft);
+			color: var(--c-primary);
+		}
+	}
+}
+</style>

package/app/components/partial/RadioGroup.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts" generic="T">
+interface RadioItem {
+	label?: string
+	value: T
+}
+
+defineProps<{
+	items: RadioItem[]
+}>()
+
+const modelValue = defineModel<T>()
+</script>
+
+<template>
+<div class="z-radio-group">
+	<button
+		v-for="{ label, value }, i in items"
+		:key="i"
+		type="button"
+		class="radio-item"
+		:class="{ active: value === modelValue }"
+		@click="modelValue = value"
+	>
+		{{ label || value }}
+	</button>
+</div>
+</template>
+
+<style lang="scss" scoped>
+.z-radio-group {
+	display: flex;
+	margin: 1em 0;
+}
+
+.radio-item {
+	flex-grow: 1;
+	position: relative;
+	padding: 0.2em;
+	border: 1px solid transparent;
+	background-color: var(--c-bg-2);
+	transition: all 0.2s;
+
+	&:first-child {
+		border-start-start-radius: 0.5em;
+		border-end-start-radius: 0.5em;
+	}
+
+	&:last-child {
+		border-start-end-radius: 0.5em;
+		border-end-end-radius: 0.5em;
+	}
+
+	&:hover {
+		background-color: var(--c-bg-1);
+		color: var(--c-primary);
+	}
+
+	&:focus {
+		z-index: 1;
+	}
+
+	&.active {
+		border-color: var(--c-primary);
+		background-color: var(--ld-bg-card);
+		color: var(--c-primary);
+	}
+
+	&:not(.active) + &:not(.active)::before {
+		content: "";
+		position: absolute;
+		inset-inline-start: -1px;
+		top: 25%;
+		bottom: 25%;
+		border-inline-start: 1px solid var(--c-bg-soft);
+	}
+}
+</style>