Scoreboard/web/src/admin/components/system/FontUploadField.vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import type { DisplayFont } from '@/shared'
import MxIcon from '../MxIcon.vue'
import ConfirmDialog from '../ConfirmDialog.vue'
import { useToastStore } from '../../stores/toast'
import { describeError, fontsApi } from './systemApi'

/**
 * 字体库字段：上传按钮 + 已上传字体列表（带删除）。
 *
 * 上传走 POST /api/fonts，文件落在服务端的 `<赛事项目>/uploads/fonts/` 下，
 * 随赛事包一起导出；下拉里选中的字体 id 由父组件写进 display.fontTitle / fontBody。
 * 删除交给服务端兜底：仍被大屏引用的字体会被 409 拒绝，这里直接把原因显示出来。
 */

/** 与服务端一致的单文件上限；本地先挡一道，省掉一次白跑的上传。 */
const MAX_FONT_BYTES = 20 * 1024 * 1024
const EXTENSIONS = ['.ttf', '.otf', '.woff', '.woff2']

const props = withDefaults(
  defineProps<{
    fonts: DisplayFont[]
    disabled?: boolean
    hint?: string
  }>(),
  { disabled: false, hint: '' },
)

const emit = defineEmits<{ uploaded: [font: DisplayFont]; removed: [name: string] }>()

const toast = useToastStore()
const fileInput = ref<HTMLInputElement | null>(null)
const uploading = ref(false)
const removing = ref(false)
const target = ref<DisplayFont | null>(null)

/** 内置字体随前端分发，不能删；列表里只列上传的那部分。 */
const customFonts = computed(() => props.fonts.filter((font) => !font.builtin))

function choose(): void {
  if (props.disabled || uploading.value) return
  fileInput.value?.click()
}

async function onPick(event: Event): Promise<void> {
  const input = event.target as HTMLInputElement
  const file = input.files?.[0] ?? null
  // 不清空 value 时连续选同一个文件不会再触发 change。
  input.value = ''
  if (file === null) return

  const lower = file.name.toLowerCase()
  if (!EXTENSIONS.some((ext) => lower.endsWith(ext))) {
    toast.error('字体格式不支持', '只支持 ttf / otf / woff / woff2 四种格式')
    return
  }
  if (file.size > MAX_FONT_BYTES) {
    toast.error('字体过大', `单个字体不能超过 ${MAX_FONT_BYTES / 1024 / 1024} MiB`)
    return
  }

  uploading.value = true
  try {
    const font = await fontsApi.upload(file)
    toast.success('字体已上传', `${font.label} · 已存入赛事包的 uploads/fonts/`)
    emit('uploaded', font)
  } catch (caught) {
    toast.error('字体上传失败', describeError(caught))
  } finally {
    uploading.value = false
  }
}

async function remove(): Promise<void> {
  const font = target.value
  if (font === null) return
  // 服务端只认文件名，id 前缀要去掉。
  const name = font.id.replace(/^custom:/, '')
  removing.value = true
  try {
    await fontsApi.remove(name)
    toast.success('字体已删除', name)
    target.value = null
    emit('removed', name)
  } catch (caught) {
    toast.error('字体删除失败', describeError(caught))
    target.value = null
  } finally {
    removing.value = false
  }
}
</script>

<template>
  <div class="font-field">
    <div class="font-row">
      <button class="mx-btn mx-btn-secondary" type="button" :disabled="disabled || uploading" @click="choose">
        <MxIcon name="push" :size="15" /> {{ uploading ? '上传中…' : '上传字体' }}
      </button>
      <span class="font-note">支持 ttf / otf / woff / woff2，单个不超过 20 MiB，文件名重复会被拒绝。</span>
    </div>

    <input ref="fileInput" class="file-input" type="file" accept=".ttf,.otf,.woff,.woff2" @change="onPick" />

    <ul v-if="customFonts.length > 0" class="font-list">
      <li v-for="font in customFonts" :key="font.id" class="font-item">
        <span class="font-name">{{ font.label }}</span>
        <code class="font-url mono">{{ font.url }}</code>
        <button class="mx-btn mx-btn-ghost mx-btn-sm" type="button" :disabled="disabled" @click="target = font">
          删除
        </button>
      </li>
    </ul>
    <span v-else class="font-note">还没有上传字体：先用系统自带的四款字体，或点上面的按钮上传。</span>

    <span v-if="hint !== ''" class="font-note">{{ hint }}</span>

    <ConfirmDialog
      :open="target !== null"
      tone="warning"
      title="删除该字体？"
      :message="`删除后 ${target?.label ?? ''} 会从赛事包里移除。若它正被大屏的标题/正文字体使用，服务端会拒绝删除，请先在「赛事信息」里改掉再用。`"
      confirm-text="删除字体"
      :pending="removing"
      @confirm="remove"
      @cancel="target = null"
    />
  </div>
</template>

<style scoped>
.font-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.font-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.file-input {
  display: none;
}
.font-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  border-radius: var(--mx-r-xs);
  background: var(--mx-s3);
}
.font-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.font-name {
  color: var(--mx-t2);
  word-break: break-all;
}
.font-url {
  flex: 1;
  min-width: 0;
  color: var(--mx-t3);
  word-break: break-all;
}
.font-note {
  font-size: 12px;
  color: var(--mx-t3);
  line-height: 1.6;
  word-break: break-all;
}
</style>