lexgo/learner/src/views/ImportView.vue

<script setup lang="ts">
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { RouterLink, useRoute, useRouter } from 'vue-router'
import { ElButton, ElInput, ElOption, ElRadio, ElRadioGroup, ElSelect } from 'element-plus'
import { LANGUAGE_LABEL, TEXT_MAX_CODE_POINTS, textProblem, titleProblem, useLibraryStore, type SubmitTarget } from '../stores/library'
import { useSessionStore } from '../stores/session'

const session = useSessionStore()
const library = useLibraryStore()
const route = useRoute()
const router = useRouter()

const title = ref('')
const text = ref('')
const mode = ref<'new' | 'append'>('new')
const bookId = ref<number | undefined>(undefined)
const titleError = ref('')
const textError = ref('')
const bookError = ref('')

const length = computed(() => [...text.value].length)
const busy = computed(() => library.submitting)

function requestedBookId(): number | undefined {
  const raw = Array.isArray(route.query.book) ? route.query.book[0] : route.query.book
  if (typeof raw !== 'string' || !/^\d+$/.test(raw)) return undefined
  const value = Number(raw)
  return Number.isSafeInteger(value) && value > 0 ? value : undefined
}

onMounted(() => {
  // `?book=<id>` preselects "append to an existing book".
  const preselect = requestedBookId()
  if (preselect === undefined) return
  mode.value = 'append'
  bookId.value = preselect
})

watch(mode, value => {
  // The select can only list the caller's own books.
  if (value === 'append') void library.loadBooks()
})

watch(title, () => { titleError.value = '' })
watch(text, () => { textError.value = '' })

async function submit() {
  if (busy.value) return
  titleError.value = titleProblem(title.value)
  textError.value = textProblem(text.value)
  bookError.value = mode.value === 'append' && bookId.value === undefined ? '请选择要追加的书籍。' : ''
  if (titleError.value || textError.value || bookError.value) return
  const target: SubmitTarget = mode.value === 'append' && bookId.value !== undefined
    ? { mode: 'append', bookId: bookId.value }
    : { mode: 'new' }
  try {
    const createdBookId = await library.submit({ title: title.value, text: text.value, target })
    // A response that arrives after the user left this page must not navigate them back.
    if (disposed) return
    // The requestId was consumed by this submission, so the form starts clean.
    title.value = ''
    text.value = ''
    await router.replace(`/books/${createdBookId}`)
  } catch {
    // library.submitError already carries the server message for the template.
  }
}

// The form may still be awaiting its submit when the user navigates away.
let disposed = false
onUnmounted(() => {
  disposed = true
  library.submitError = ''
})
</script>

<template>
  <div v-if="session.user">
    <header class="site-header">
      <RouterLink to="/" class="brand">LexGo<span class="brand-dot">.</span></RouterLink>
      <nav aria-label="学习导航"><RouterLink to="/">我的书库</RouterLink></nav>
      <div class="account">
        <span class="account-name">{{ session.user.username }}</span>
      </div>
    </header>
    <main class="page">
      <p class="breadcrumb"><RouterLink to="/">我的书库</RouterLink><span aria-hidden="true">/</span><span>导入内容</span></p>
      <div class="page-title">
        <div>
          <h1>导入英文内容</h1>
          <p class="subtle">粘贴英文正文，提交后系统会自动切分并处理章节。</p>
        </div>
      </div>
      <form class="import-form" novalidate @submit.prevent="submit">
        <div class="field">
          <span class="field-label">语言</span>
          <p class="fixed-value">{{ LANGUAGE_LABEL }}</p>
        </div>
        <div class="field">
          <label for="title">标题</label>
          <ElInput id="title" v-model="title" type="text" maxlength="200" placeholder="例如：虚构样例第一章" :disabled="busy" />
          <p v-if="titleError" role="alert" class="field-error">{{ titleError }}</p>
        </div>
        <div class="field">
          <span class="field-label">导入到</span>
          <ElRadioGroup v-model="mode" :disabled="busy" aria-label="导入目标">
            <ElRadio value="new">新建书籍</ElRadio>
            <ElRadio value="append">追加到已有书籍</ElRadio>
          </ElRadioGroup>
        </div>
        <div v-if="mode === 'append'" class="field">
          <label for="book">选择书籍</label>
          <ElSelect id="book" v-model="bookId" placeholder="请选择要追加的书籍" :disabled="busy" class="book-select">
            <ElOption v-for="item in library.books" :key="item.id" :label="item.title" :value="item.id" />
          </ElSelect>
          <p v-if="library.booksError" role="alert" class="field-error">{{ library.booksError }}</p>
          <p v-if="bookError" role="alert" class="field-error">{{ bookError }}</p>
        </div>
        <div class="field">
          <label for="text">正文</label>
          <ElInput id="text" v-model="text" type="textarea" :rows="12" placeholder="在此粘贴英文正文…" :disabled="busy" />
          <p class="counter">{{ length }} / {{ TEXT_MAX_CODE_POINTS }} 字符</p>
          <p v-if="textError" role="alert" class="field-error">{{ textError }}</p>
        </div>
        <p v-if="library.submitError" role="alert" class="notice">{{ library.submitError }}</p>
        <div class="form-actions">
          <ElButton type="primary" native-type="submit" :loading="busy" :disabled="busy">开始处理</ElButton>
          <RouterLink to="/" class="subtle">返回书库</RouterLink>
        </div>
      </form>
    </main>
  </div>
</template>