minitest2.0 0.0.0

package/src/views/article-edit/index.vue

@@ -0,0 +1,600 @@
+<script setup lang="ts">
+import {
+  createArticle,
+  extractTextFromHtml,
+  getArticleDetail,
+  updateArticle,
+} from '@/api/announcement'
+import { showAppToast } from '@/utils/toast'
+
+defineOptions({ name: 'ArticleEditPage' })
+
+const route = useRoute()
+const router = useRouter()
+
+const editorRef = ref<HTMLElement>()
+const savedRange = ref<Range | null>(null)
+const title = ref('')
+const contentHtml = ref('')
+const detailLoading = ref(false)
+const saving = ref(false)
+const showLinkPopup = ref(false)
+const showCodePopup = ref(false)
+const linkForm = reactive({
+  text: '',
+  url: '',
+})
+const codeForm = reactive({
+  language: 'javascript',
+  code: '',
+})
+
+const articleId = computed(() => String(route.params.id || ''))
+const isEditing = computed(() => Boolean(articleId.value))
+const pageTitle = computed(() => (isEditing.value ? '编辑公告' : '发布公告'))
+
+onMounted(async () => {
+  if (!isEditing.value) {
+    setEditorHtml('')
+    return
+  }
+
+  detailLoading.value = true
+
+  try {
+    const article = await getArticleDetail(articleId.value)
+    title.value = article.title
+    setEditorHtml(article.content)
+  } catch (error) {
+    console.error('[公告] 编辑详情加载失败', error)
+    showAppToast('公告加载失败')
+    router.replace('/articles')
+  } finally {
+    detailLoading.value = false
+  }
+})
+
+function setEditorHtml(value: string) {
+  contentHtml.value = value
+  nextTick(() => {
+    if (editorRef.value) {
+      editorRef.value.innerHTML = value
+    }
+  })
+}
+
+function syncEditor() {
+  contentHtml.value = editorRef.value?.innerHTML || ''
+}
+
+function rememberSelection() {
+  const selection = window.getSelection()
+
+  if (!selection || !selection.rangeCount || !editorRef.value) {
+    return
+  }
+
+  const anchorNode = selection.anchorNode
+
+  if (anchorNode && editorRef.value.contains(anchorNode)) {
+    savedRange.value = selection.getRangeAt(0).cloneRange()
+  }
+}
+
+function restoreSelection() {
+  if (!savedRange.value) {
+    return
+  }
+
+  const selection = window.getSelection()
+
+  if (!selection) {
+    return
+  }
+
+  selection.removeAllRanges()
+  selection.addRange(savedRange.value)
+}
+
+function focusEditor() {
+  editorRef.value?.focus()
+  restoreSelection()
+}
+
+function runCommand(command: string, value?: string) {
+  focusEditor()
+  document.execCommand(command, false, value)
+  syncEditor()
+  rememberSelection()
+}
+
+function setBlock(tag: 'P' | 'H2' | 'H3' | 'BLOCKQUOTE') {
+  runCommand('formatBlock', tag)
+}
+
+function clearFormat() {
+  runCommand('removeFormat')
+  setBlock('P')
+}
+
+function openLinkPopup() {
+  rememberSelection()
+  linkForm.text = savedRange.value?.toString().trim() || ''
+  linkForm.url = ''
+  showLinkPopup.value = true
+}
+
+function insertLink() {
+  const url = normalizeUrl(linkForm.url)
+
+  if (!url) {
+    showAppToast('请输入链接地址')
+    return
+  }
+
+  const text = linkForm.text.trim() || url
+  focusEditor()
+  document.execCommand(
+    'insertHTML',
+    false,
+    `<a href="${escapeAttribute(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(text)}</a>`,
+  )
+  syncEditor()
+  rememberSelection()
+  showLinkPopup.value = false
+}
+
+function openCodePopup() {
+  rememberSelection()
+  codeForm.language = 'javascript'
+  codeForm.code = ''
+  showCodePopup.value = true
+}
+
+function insertCodeBlock() {
+  const code = codeForm.code.trimEnd()
+
+  if (!code.trim()) {
+    showAppToast('请输入代码内容')
+    return
+  }
+
+  const language = normalizeCodeLanguage(codeForm.language)
+  const languageClass = language ? `language-${language}` : 'language-plaintext'
+  const languageAttr = language || 'plaintext'
+
+  focusEditor()
+  document.execCommand(
+    'insertHTML',
+    false,
+    `<pre><code class="${languageClass}" data-language="${escapeAttribute(languageAttr)}">${escapeHtml(code)}</code></pre><p><br></p>`,
+  )
+  syncEditor()
+  rememberSelection()
+  showCodePopup.value = false
+}
+
+function handleCancel() {
+  if (isEditing.value) {
+    router.replace(`/articles/${articleId.value}`)
+    return
+  }
+
+  router.replace('/articles')
+}
+
+async function handleSave() {
+  syncEditor()
+
+  const text = extractTextFromHtml(contentHtml.value)
+
+  if (!title.value.trim()) {
+    showAppToast('请输入公告标题')
+    return
+  }
+
+  if (!text) {
+    showAppToast('请输入公告正文')
+    return
+  }
+
+  saving.value = true
+
+  const payload = {
+    title: title.value,
+    content: contentHtml.value,
+  }
+
+  try {
+    const article = isEditing.value
+      ? await updateArticle(articleId.value, payload)
+      : await createArticle(payload)
+
+    showAppToast(isEditing.value ? '已保存' : '已发布')
+    router.replace(article.id ? `/articles/${article.id}` : '/articles')
+  } catch (error) {
+    console.error('[公告] 保存失败', error)
+  } finally {
+    saving.value = false
+  }
+}
+
+function normalizeUrl(value: string) {
+  const url = value.trim()
+
+  if (!url) {
+    return ''
+  }
+
+  if (/^(https?:\/\/|mailto:|tel:|#)/i.test(url)) {
+    return url
+  }
+
+  return `https://${url}`
+}
+
+function escapeHtml(value: string) {
+  const div = document.createElement('div')
+  div.textContent = value
+
+  return div.innerHTML
+}
+
+function escapeAttribute(value: string) {
+  return escapeHtml(value).replace(/"/g, '&quot;')
+}
+
+function normalizeCodeLanguage(value: string) {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9_-]/g, '')
+    .slice(0, 24)
+}
+</script>
+
+<template>
+  <main class="article-edit-page">
+    <section class="form-panel">
+      <van-field
+        v-model="title"
+        label="标题"
+        placeholder="请输入公告标题"
+        clearable
+        maxlength="40"
+        show-word-limit
+      />
+    </section>
+
+    <section v-if="detailLoading" class="state-section">
+      <van-loading vertical>加载中...</van-loading>
+    </section>
+
+    <section v-else class="editor-panel">
+      <div class="editor-title">
+        <h2>正文</h2>
+        <span>富文本编辑</span>
+      </div>
+
+      <div class="editor-toolbar" aria-label="富文本工具栏">
+        <button type="button" title="正文" @click="setBlock('P')">P</button>
+        <button type="button" title="二级标题" @click="setBlock('H2')">H2</button>
+        <button type="button" title="三级标题" @click="setBlock('H3')">H3</button>
+        <button type="button" title="加粗" @click="runCommand('bold')"><strong>B</strong></button>
+        <button type="button" title="斜体" @click="runCommand('italic')"><em>I</em></button>
+        <button type="button" title="下划线" @click="runCommand('underline')"><u>U</u></button>
+        <button type="button" title="引用" @click="setBlock('BLOCKQUOTE')">
+          <span aria-hidden="true">“</span>
+        </button>
+        <button type="button" title="无序列表" @click="runCommand('insertUnorderedList')">
+          <van-icon name="orders-o" />
+        </button>
+        <button type="button" title="有序列表" @click="runCommand('insertOrderedList')">1.</button>
+        <button type="button" title="插入链接" @click="openLinkPopup">
+          <van-icon name="link-o" />
+        </button>
+        <button type="button" title="插入代码块" @click="openCodePopup">
+          <van-icon name="font-o" />
+        </button>
+        <button type="button" title="清除格式" @click="clearFormat">
+          <van-icon name="close" />
+        </button>
+      </div>
+
+      <div
+        ref="editorRef"
+        class="rich-editor"
+        contenteditable="true"
+        data-placeholder="请输入公告正文"
+        @input="syncEditor"
+        @mouseup="rememberSelection"
+        @keyup="rememberSelection"
+        @blur="rememberSelection"
+      ></div>
+    </section>
+
+    <footer class="edit-actions">
+      <van-button block plain type="default" @click="handleCancel">取消</van-button>
+      <van-button
+        block
+        type="danger"
+        :loading="saving"
+        :disabled="detailLoading"
+        @click="handleSave"
+      >
+        {{ isEditing ? '保存公告' : '发布公告' }}
+      </van-button>
+    </footer>
+
+    <van-popup v-model:show="showLinkPopup" round position="bottom">
+      <div class="link-popup">
+        <header>
+          <h2>插入链接</h2>
+          <button type="button" aria-label="关闭" @click="showLinkPopup = false">
+            <van-icon name="cross" />
+          </button>
+        </header>
+        <van-cell-group inset>
+          <van-field v-model="linkForm.text" label="文字" placeholder="链接显示文字" />
+          <van-field v-model="linkForm.url" label="链接" placeholder="https://example.com" />
+        </van-cell-group>
+        <div class="link-actions">
+          <van-button block plain @click="showLinkPopup = false">取消</van-button>
+          <van-button block type="danger" @click="insertLink">插入</van-button>
+        </div>
+      </div>
+    </van-popup>
+
+    <van-popup v-model:show="showCodePopup" round position="bottom">
+      <div class="code-popup">
+        <header>
+          <h2>插入代码块</h2>
+          <button type="button" aria-label="关闭" @click="showCodePopup = false">
+            <van-icon name="cross" />
+          </button>
+        </header>
+        <van-cell-group inset>
+          <van-field v-model="codeForm.language" label="语言" placeholder="javascript" />
+          <van-field
+            v-model="codeForm.code"
+            class="code-field"
+            label="代码"
+            type="textarea"
+            rows="8"
+            autosize
+            placeholder="请输入代码"
+          />
+        </van-cell-group>
+        <div class="code-actions">
+          <van-button block plain @click="showCodePopup = false">取消</van-button>
+          <van-button block type="danger" @click="insertCodeBlock">插入</van-button>
+        </div>
+      </div>
+    </van-popup>
+  </main>
+</template>
+
+<style scoped>
+.article-edit-page {
+  width: 100%;
+  max-width: 750px;
+  min-height: var(--app-page-min-height, 100vh);
+  margin: 0 auto;
+  padding: 0 11px 24px;
+  color: #171b20;
+  background: #f7f8fa;
+  box-sizing: border-box;
+}
+
+.form-panel,
+.editor-panel {
+  overflow: hidden;
+  border: 1px solid #edf0f4;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 5px 16px rgba(23, 27, 32, 0.04);
+}
+
+.form-panel {
+  margin-top: 12px;
+}
+
+.form-panel :deep(.van-cell) {
+  --van-cell-vertical-padding: 14px;
+  --van-field-label-width: 44px;
+}
+
+.editor-panel {
+  margin-top: 12px;
+  padding: 14px;
+}
+
+.state-section {
+  display: flex;
+  justify-content: center;
+  padding: 110px 0;
+}
+
+.editor-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.editor-title h2 {
+  margin: 0;
+  color: #171b20;
+  font-size: 16px;
+  font-weight: 750;
+  line-height: 1.2;
+}
+
+.editor-title span {
+  color: #8a929f;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.editor-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 7px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f1f3;
+}
+
+.editor-toolbar button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid #e8ebf0;
+  border-radius: 6px;
+  color: #252a31;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  background: #fbfcfd;
+  cursor: pointer;
+}
+
+.editor-toolbar button:active {
+  color: #f22f3d;
+  border-color: #ffd1d6;
+  background: #fff4f5;
+}
+
+.rich-editor {
+  height: clamp(300px, 52vh, 430px);
+  max-height: clamp(300px, 52vh, 430px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: 14px 2px 18px 0;
+  color: #252a31;
+  font-size: 16px;
+  line-height: 1.75;
+  outline: none;
+  word-break: break-word;
+  box-sizing: border-box;
+}
+
+.rich-editor:empty::before {
+  content: attr(data-placeholder);
+  color: #b6bdc8;
+}
+
+.rich-editor :deep(h2),
+.rich-editor :deep(h3),
+.rich-editor :deep(p),
+.rich-editor :deep(blockquote),
+.rich-editor :deep(ul),
+.rich-editor :deep(ol) {
+  margin: 0 0 12px;
+}
+
+.rich-editor :deep(h2) {
+  font-size: 20px;
+  line-height: 1.4;
+}
+
+.rich-editor :deep(h3) {
+  font-size: 18px;
+  line-height: 1.4;
+}
+
+.rich-editor :deep(blockquote) {
+  padding: 10px 12px;
+  border-left: 4px solid #d8dde6;
+  border-radius: 6px;
+  color: #596273;
+  background: #f6f7f9;
+}
+
+.rich-editor :deep(pre) {
+  overflow-x: auto;
+  margin: 0 0 12px;
+  padding: 12px;
+  border: 1px solid #e4e8ef;
+  border-radius: 7px;
+  background: #101820;
+}
+
+.rich-editor :deep(code) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+  font-size: 13px;
+}
+
+.rich-editor :deep(pre code) {
+  display: block;
+  color: #eef3f7;
+  line-height: 1.62;
+  white-space: pre;
+}
+
+.edit-actions {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 10px;
+  margin-top: 16px;
+}
+
+.edit-actions :deep(.van-button) {
+  height: 42px;
+  font-weight: 600;
+}
+
+.link-popup,
+.code-popup {
+  padding: 18px 0 max(18px, env(safe-area-inset-bottom));
+  background: #ffffff;
+}
+
+.link-popup header,
+.code-popup header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px 14px;
+}
+
+.link-popup h2,
+.code-popup h2 {
+  margin: 0;
+  color: #171b20;
+  font-size: 18px;
+  font-weight: 750;
+  line-height: 1.2;
+}
+
+.link-popup header button,
+.code-popup header button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 0;
+  border-radius: 50%;
+  color: #6b7280;
+  font-size: 18px;
+  background: #f5f6f8;
+}
+
+.link-actions,
+.code-actions {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 10px;
+  padding: 16px 16px 0;
+}
+
+.code-field :deep(textarea) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+  font-size: 13px;
+  line-height: 1.55;
+}
+</style>