cfc/cfc-web/src/views/admin/ArticleEdit.vue

<template>
  <div class="article-edit admin-page">
    <el-card>
      <PageHeader slot="header" :title="readonly && articleStatus !== 'rejected' ? '文章详情' : (isEdit ? '编辑文章' : '新建文章')">
        
        <div class="admin-page-actions">
          <el-button @click="$router.push('/article-manage')">返回列表</el-button>
          <template v-if="!readonly">
            <el-button type="primary" @click="handleSave(false)" :loading="saving">{{ articleStatus === 'published' ? '保存修改' : '保存草稿' }}</el-button>
            <el-button type="success" @click="handleSubmitReview" :loading="reviewLoading" v-if="isEdit && articleStatus === 'draft' && !articleWasPublished">提交审核</el-button>
            <el-button type="success" @click="handleSave(true)" :loading="publishing" v-if="!isEdit || articleStatus === 'draft'">直接发布</el-button>
          </template>
          <template v-if="articleStatus === 'rejected' || articleStatus === 'withdrawn'">
            <el-button type="primary" @click="handleReDraft" :loading="reDraftLoading">保存到草稿箱重新编辑</el-button>
          </template>
          <template v-if="readonly && articleStatus !== 'rejected'">
            <el-button type="default" @click="handleCopyAsNew" :loading="saving">复制并新建</el-button>
          </template>
        </div>
      
</PageHeader>

      <!-- 状态横幅 -->
      <el-alert
        v-if="statusLabel"
        :title="statusLabel"
        :type="statusType"
        :description="statusDescription"
        show-icon
        :closable="false"
        style="margin-bottom: 16px;"
      />

      <div class="article-edit-form-wrap">
      <el-form :model="form" label-width="120px" v-loading="loading">
        <el-form-item label="标题">
          <el-input v-model="form.title" placeholder="请输入文章标题" maxlength="200" show-word-limit :disabled="readonly" />
        </el-form-item>

        <el-form-item label="分类">
          <el-select v-model="form.categoryId" placeholder="选择分类" class="form-select" :disabled="readonly">
            <el-option v-for="cat in categories" :key="cat.id" :label="cat.name" :value="cat.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="内容类型">
          <el-select v-model="form.contentType" placeholder="选择类型" class="form-select form-select--short" :disabled="readonly">
            <el-option label="文章" value="article" />
            <el-option label="知识点" value="knowledge" />
            <el-option label="课程" value="course" />
            <el-option label="贴士" value="tip" />
          </el-select>
          <span class="form-hint">标识内容属于哪类知识</span>
        </el-form-item>

        <el-form-item label="难度等级">
          <el-rate v-model="form.difficultyLevel" :max="5" :disabled="readonly" show-text :texts="['入门', '简单', '中等', '较难', '深入']" style="margin-top: 6px;" />
        </el-form-item>

        <el-form-item label="知识标签">
          <el-select v-model="form.tagIds" multiple placeholder="选择知识标签" class="form-select form-select--wide" :disabled="readonly" clearable>
            <el-option v-for="tag in tagOptions" :key="tag.id" :label="tag.name" :value="tag.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="摘要">
          <el-input v-model="form.summary" type="textarea" :rows="3" placeholder="请输入文章摘要" maxlength="500" show-word-limit :disabled="readonly" />
        </el-form-item>

        <el-form-item label="封面图">
          <template v-if="!readonly">
            <el-upload
              :action="uploadActionUrl"
              :headers="uploadHeaders"
              :on-success="handleUploadSuccess"
              :on-error="handleUploadError"
              :before-upload="beforeUpload"
              :show-file-list="false"
              accept="image/jpeg,image/png,image/gif,image/webp"
            >
              <img v-if="form.coverImage" :src="form.coverImage" class="cover-preview" />
              <el-button v-else type="primary" plain>+ 上传封面</el-button>
            </el-upload>
            <el-button v-if="form.coverImage" size="mini" type="text" style="margin-left: 10px;" @click="form.coverImage = ''">清除</el-button>
          </template>
          <img v-else-if="form.coverImage" :src="form.coverImage" class="cover-preview" />
          <span v-else class="text-muted">无封面图</span>
        </el-form-item>

        <el-form-item label="内容">
          <div class="rich-editor" :class="{ 'is-disabled': readonly }">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorInstance"
              :defaultConfig="toolbarConfig"
              :mode="editorMode"
            />
            <Editor
              :defaultConfig="editorConfig"
              :mode="editorMode"
              v-model="form.content"
              @onCreated="handleEditorCreated"
              :disabled="readonly"
              style="height: 400px; overflow-y: hidden;"
            />
          </div>
        </el-form-item>

        <el-form-item label="标签">
          <el-input v-model="form.tags" placeholder="逗号分隔，如: 育儿,亲子,心理" :disabled="readonly" />
        </el-form-item>

        <el-row :gutter="20" class="form-row">
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="作者">
              <el-input v-model="form.author" placeholder="文章作者" :disabled="readonly" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12">
            <el-form-item label="阅读时间(分)">
              <el-input-number v-model="form.readTime" :min="1" :max="999" :disabled="readonly" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="五维权重">
          <dimension-weight-picker v-model="form.dimensionWeights" :show-presets="true" :readonly="readonly" />
        </el-form-item>

        <el-form-item label="浏览权限">
          <el-radio-group v-model="form.visibility" :disabled="readonly">
            <el-radio label="public">公开</el-radio>
            <el-radio label="login">登录可见</el-radio>
            <el-radio label="private">私密</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="推荐排序">
          <el-input-number v-model="form.sortOrder" :min="0" :max="9999" :disabled="readonly" controls-position="right" />
          <span class="form-hint">越小越靠前，仅精选文章生效（列表上移/下移会自动调整）</span>
        </el-form-item>
      </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import DimensionWeightPicker from '@/components/DimensionWeightPicker.vue'
import {
  adminArticleCreate,
  adminArticleUpdate,
  adminArticlePublish,
  adminArticleCategoriesList,
  adminArticleDetail,
  adminArticleSubmitReview,
  adminArticleReDraft
} from '@/api/article.js'
import { saveDimensionWeights, getDimensionWeights } from '@/api/dimension-weight.js'
import { getTagList } from '@/api/dimension.js'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor, SlateTransforms, SlatePath } from '@wangeditor/editor'
import '@wangeditor/editor/dist/css/style.css'

export default {
  name: 'ArticleEdit',
  components: { DimensionWeightPicker, Editor, Toolbar },
  data() {
    return {
      isEdit: false,
      loading: false,
      saving: false,
      publishing: false,
      reviewLoading: false,
      reDraftLoading: false,
      readonly: false,
      articleWasPublished: false,
      articleStatus: '',
      rejectReason: '',
      categories: [],
      tagOptions: [],
      editorConfig: null,
      toolbarConfig: {},
      editorMode: 'default',
      editorInstance: null,
      form: {
        id: null,
        categoryId: '',
        title: '',
        summary: '',
        coverImage: '',
        content: '',
        tags: '',
        contentType: 'article',
        difficultyLevel: 0,
        tagIds: [],
        author: '',
        readTime: 3,
        sortOrder: 0,
        relatedDimensions: [],
        dimensionWeights: [],
        visibility: 'public',
        visibleTo: []
      }
    }
  },
  computed: {
    statusLabel() {
      const map = { draft: '当前状态：草稿箱', pending: '当前状态：待审核（等待管理员审核）', rejected: '当前状态：已驳回', published: '当前状态：发布中', withdrawn: '当前状态：已撤回' }
      return map[this.articleStatus] || ''
    },
    statusType() {
      const map = { draft: 'info', pending: 'warning', rejected: 'error', published: 'success', withdrawn: 'info' }
      return map[this.articleStatus] || 'info'
    },
    statusDescription() {
      if (this.articleStatus === 'rejected' && this.rejectReason) return '原因：' + this.rejectReason
      return ''
    },
    uploadActionUrl() {
      const baseURL = process.env.VUE_APP_BASE_API || ''
      return baseURL + '/api/admin/articles/upload/image'
    },
    uploadHeaders() {
      const token = localStorage.getItem('token')
      return token ? { Authorization: 'Bearer ' + token } : {}
    }
  },
  created() {
    this.initEditorConfig()
    this.loadCategories()
    this.loadTagOptions()
    const id = this.$route.query.id
    const copyId = this.$route.query.copyId
    this.readonly = this.$route.query.readonly === '1'

    if (copyId) {
      this.isEdit = false
      this.loadForCopy(copyId)
    } else if (id) {
      this.isEdit = true
      this.loadDetail(id)
    }
  },
  beforeRouteLeave(to, from, next) {
    this.destroyEditor()
    next()
  },
  beforeDestroy() {
    this.destroyEditor()
  },
  methods: {
      initEditorConfig() {
        const baseURL = process.env.VUE_APP_BASE_API || ''
        const token = localStorage.getItem('token')
        this.editorConfig = {
          autoFocus: false,
          hoverbarKeys: {
            video: {
              menuKeys: []
            }
          },
          MENU_CONF: {
            uploadImage: {
              server: baseURL + '/api/admin/articles/upload/image',
              headers: token ? { Authorization: 'Bearer ' + token } : {},
              maxNumberOfFiles: 1,
              maxFileSize: 5 * 1024 * 1024,
              fieldName: 'file',
              customAlert: (msg, type) => {
                this.$message && this.$message({ message: msg, type: type || 'error' })
              },
onError: (file, err, res) => {
              const msg = (file && file.name || '图片') + ' 上传失败，图片不能超过 5MB'
              this.$message && this.$message({ message: msg, type: 'error' })
            },
              customInsert(res, insertFn) {
                if (res.code === 200) {
                  const url = res.data && res.data.url ? res.data.url : res.data
                  insertFn(baseURL + url)
                }
              }
            },
            uploadVideo: {
              server: baseURL + '/api/admin/articles/upload/video',
              headers: token ? { Authorization: 'Bearer ' + token } : {},
              maxNumberOfFiles: 1,
              maxFileSize: 50 * 1024 * 1024,
              fieldName: 'file',
              timeout: 5 * 60 * 1000,
              allowedFileTypes: ['video/*'],
              customAlert: (msg, type) => {
                this.$message && this.$message({ message: msg, type: type || 'error' })
              },
              onError: (file, err, res) => {
                const msg = (file && file.name || '视频') + ' 上传失败，视频不能超过 50MB'
                this.$message && this.$message({ message: msg, type: 'error' })
              },
              customInsert(res, insertFn) {
                if (res.code === 200) {
                  const url = res.data && res.data.url ? res.data.url : res.data
                  if (!url) return
                  if (url.indexOf('http://') === 0 || url.indexOf('https://') === 0) {
                    insertFn(url)
                  } else {
                    insertFn(baseURL + url)
                  }
                }
              }
            }
          }
        }
      },
    destroyEditor() {
      this.unbindVideoFullscreen()
      const editor = this.editorInstance
      this.editorInstance = null
      if (!editor) return
      try {
        if (typeof editor.blur === 'function') editor.blur()
      } catch (e) {}
      try {
        if (typeof editor.destroy === 'function') editor.destroy()
      } catch (e) {}
    },
    handleEditorCreated(editor) {
      // Vue 2 必须 seal，否则会把 editor 做成响应式，内部 WeakMap 取不到实例
      this.editorInstance = Object.seal(editor)
      this.bindVideoInteractions(editor)
    },
    bindVideoInteractions(editor) {
      const root = (editor && editor.getEditableContainer && editor.getEditableContainer())
        || (this.$el && this.$el.querySelector('.w-e-text-container'))
      if (!root || this._videoFsBound) return
      this._videoFsBound = true
      this._videoEditorRoot = root
      this._onVideoDblClick = (e) => {
        const video = this.findEventVideo(e)
        if (!video) return
        e.preventDefault()
        this.enterVideoFullscreen(video)
      }
      this._onVideoFsClick = (e) => {
        if (this._justDraggedVideo) {
          this._justDraggedVideo = false
          return
        }
        const box = this.findVideoBox(e.target)
        if (!box) return
        const rect = box.getBoundingClientRect()
        const x = e.clientX - rect.left
        const y = e.clientY - rect.top
        if (x < rect.width - 36 || y > 36) return
        const video = box.querySelector('video')
        if (!video) return
        e.preventDefault()
        e.stopPropagation()
        this.enterVideoFullscreen(video)
      }
      this._onVideoMouseDown = (e) => {
        this.onVideoDragMouseDown(editor, e)
      }
      this._onVideoMouseMove = (e) => {
        this.onVideoDragMouseMove(editor, e)
      }
      this._onVideoMouseUp = (e) => {
        this.onVideoDragMouseUp(editor, e)
      }
      root.addEventListener('dblclick', this._onVideoDblClick)
      root.addEventListener('click', this._onVideoFsClick, true)
      root.addEventListener('mousedown', this._onVideoMouseDown, true)
      document.addEventListener('mousemove', this._onVideoMouseMove)
      document.addEventListener('mouseup', this._onVideoMouseUp)
    },
    findVideoBox(el) {
      if (!el || !el.closest) return null
      return el.closest('.w-e-textarea-video-container') || el.closest('[data-w-e-type="video"]')
    },
    findEventVideo(e) {
      const t = e && e.target
      if (!t) return null
      if (t.tagName === 'VIDEO') return t
      return t.closest ? t.closest('video') : null
    },
    isVideoDragIgnorePoint(box, clientX, clientY) {
      const rect = box.getBoundingClientRect()
      const x = clientX - rect.left
      const y = clientY - rect.top
      if (x >= rect.width - 36 && y <= 36) return true
      if (y > rect.height - 44) return true
      return false
    },
    onVideoDragMouseDown(editor, e) {
      if (this.readonly || (editor && editor.isDisabled && editor.isDisabled())) return
      if (e.button !== 0) return
      const box = this.findVideoBox(e.target)
      if (!box) return
      if (this.isVideoDragIgnorePoint(box, e.clientX, e.clientY)) return
      this._videoDragState = {
        startX: e.clientX,
        startY: e.clientY,
        box: box,
        dragging: false
      }
    },
    onVideoDragMouseMove(editor, e) {
      if (!this.editorInstance || !editor) return
      const state = this._videoDragState
      if (!state) return
      const dx = e.clientX - state.startX
      const dy = e.clientY - state.startY
      if (!state.dragging && (dx * dx + dy * dy) < 36) return
      if (!state.dragging) {
        state.dragging = true
        state.box.classList.add('is-video-dragging')
        const wrap = this.$el && this.$el.querySelector('.rich-editor')
        if (wrap) wrap.classList.add('is-dragging-video')
      }
      e.preventDefault()
      this.updateVideoDropIndicator(editor, e)
    },
    onVideoDragMouseUp(editor, e) {
      if (!this.editorInstance || !editor) {
        this._videoDragState = null
        return
      }
      const state = this._videoDragState
      this._videoDragState = null
      const wrap = this.$el && this.$el.querySelector('.rich-editor')
      if (wrap) wrap.classList.remove('is-dragging-video')
      this.clearVideoDropIndicator()
      if (!state) return
      if (state.box) state.box.classList.remove('is-video-dragging')
      if (!state.dragging) return
      this._justDraggedVideo = true
      this.moveVideoToEvent(editor, state.box, e)
    },
    updateVideoDropIndicator(editor, e) {
      const root = this.getVideoScrollRoot()
      if (!root) return
      const info = this.getVideoDropInfo(editor, e)
      if (!info) {
        this.clearVideoDropIndicator()
        return
      }
      let line = this._videoDropLine
      if (!line) {
        line = document.createElement('div')
        line.className = 'article-video-drop-line'
        root.appendChild(line)
        this._videoDropLine = line
      } else if (line.parentNode !== root) {
        root.appendChild(line)
      }
      const rootRect = root.getBoundingClientRect()
      line.style.top = (info.y - rootRect.top + root.scrollTop) + 'px'
      line.style.display = 'block'
    },
    getVideoScrollRoot() {
      const root = this._videoEditorRoot
      if (!root) return null
      return root.querySelector('.w-e-scroll') || root
    },
    clearVideoDropIndicator() {
      if (this._videoDropLine) {
        this._videoDropLine.style.display = 'none'
      }
    },
    getVideoDropInfo(editor, e) {
      if (!editor) return null
      const root = this.getVideoScrollRoot()
      if (!root) return null
      const rootRect = root.getBoundingClientRect()
      if (e.clientY < rootRect.top || e.clientY > rootRect.bottom) return null
      let path = null
      let targetDom = null
      try {
        const range = DomEditor.findEventRange(editor, e)
        if (range && range.anchor && range.anchor.path) {
          path = range.anchor.path
        }
      } catch (err) {}
      if (!path) {
        const hit = document.elementFromPoint(e.clientX, e.clientY)
        let cur = hit
        while (cur && cur !== root) {
          try {
            const node = DomEditor.toSlateNode(editor, cur)
            if (node && node.type) {
              path = DomEditor.findPath(editor, node)
              targetDom = cur
              break
            }
          } catch (err) {}
          cur = cur.parentNode
        }
      }
      if (!path || !path.length) {
        const last = editor.children && editor.children.length ? editor.children[editor.children.length - 1] : null
        if (!last) return { toPath: [0], y: rootRect.top + 8 }
        try {
          targetDom = editor.toDOMNode(last)
        } catch (err) {
          return { toPath: [editor.children.length], y: rootRect.bottom - 8 }
        }
        const rect = targetDom.getBoundingClientRect()
        return { toPath: [editor.children.length], y: rect.bottom }
      }
      const topIndex = path[0]
      const block = editor.children[topIndex]
      if (!targetDom && block && editor.toDOMNode) {
        try {
          targetDom = editor.toDOMNode(block)
        } catch (err) {}
      }
      if (!targetDom) return { toPath: [topIndex], y: e.clientY }
      const rect = targetDom.getBoundingClientRect()
      const insertAfter = e.clientY > rect.top + rect.height / 2
      return {
        toPath: [insertAfter ? topIndex + 1 : topIndex],
        y: insertAfter ? rect.bottom : rect.top
      }
    },
    moveVideoToEvent(editor, box, e) {
      if (!editor || !box) return
      let videoNode = null
      try {
        videoNode = DomEditor.toSlateNode(editor, box)
      } catch (err) {
        return
      }
      if (!videoNode || videoNode.type !== 'video') return
      let fromPath = null
      try {
        fromPath = DomEditor.findPath(editor, videoNode)
      } catch (err) {
        return
      }
      const info = this.getVideoDropInfo(editor, e)
      if (!info || !info.toPath) return
      let toPath = info.toPath.slice()
      const max = editor.children ? editor.children.length : 0
      if (toPath[0] > max) toPath[0] = max
      if (SlatePath.equals(fromPath, toPath)) return
      if (fromPath.length === 1 && toPath.length === 1 && toPath[0] === fromPath[0] + 1) return
      try {
        SlateTransforms.moveNodes(editor, { at: fromPath, to: toPath })
      } catch (err) {
        console.error('移动视频失败', err)
      }
    },
    enterVideoFullscreen(video) {
      if (!video) return
      const req = video.requestFullscreen || video.webkitRequestFullscreen || video.msRequestFullscreen
      if (req) req.call(video)
    },
    unbindVideoFullscreen() {
      const root = this._videoEditorRoot
        || (this.$el && this.$el.querySelector('.w-e-text-container'))
      if (root && this._onVideoDblClick) root.removeEventListener('dblclick', this._onVideoDblClick)
      if (root && this._onVideoFsClick) root.removeEventListener('click', this._onVideoFsClick, true)
      if (root && this._onVideoMouseDown) root.removeEventListener('mousedown', this._onVideoMouseDown, true)
      if (this._onVideoMouseMove) document.removeEventListener('mousemove', this._onVideoMouseMove)
      if (this._onVideoMouseUp) document.removeEventListener('mouseup', this._onVideoMouseUp)
      this.clearVideoDropIndicator()
      if (this._videoDropLine && this._videoDropLine.parentNode) {
        this._videoDropLine.parentNode.removeChild(this._videoDropLine)
      }
      this._videoDropLine = null
      this._videoEditorRoot = null
      this._videoDragState = null
      this._videoFsBound = false
    },
    async loadCategories() {
      try {
        const res = await adminArticleCategoriesList()
        if (res.data) {
          this.categories = res.data
        }
      } catch (e) {
        console.error('加载分类失败', e)
      }
    },
    async loadTagOptions() {
      try {
        const res = await getTagList()
        if (res.data) {
          this.tagOptions = res.data
        }
      } catch (e) {
        console.error('加载标签失败', e)
      }
    },
    async loadDetail(id) {
      this.loading = true
      try {
        const res = await adminArticleDetail({ id })
        if (res.data) {
          const d = res.data
          this.articleStatus = d.status || ''
          this.rejectReason = d.auditReason || ''
          this.articleWasPublished = !!(d.publishedAt || d.status === 'published')
          if (d.auditStatus === 'pending') {
            this.readonly = true
          } else if (d.status === 'rejected') {
            this.readonly = true
          } else if (d.status === 'withdrawn') {
            this.readonly = true
          } else {
            this.readonly = this.$route.query.readonly === '1'
          }
          this.form = {
            id: d.id,
            categoryId: d.categoryId,
            title: d.title || '',
            summary: d.summary || '',
            coverImage: d.coverImage || '',
            content: d.content || '',
            tags: d.tags || '',
            contentType: d.contentType || 'article',
            difficultyLevel: d.difficultyLevel || 0,
            tagIds: d.tagIds || [],
            author: d.author || '',
            readTime: d.readTime || 3,
            sortOrder: d.sortOrder || 0,
            relatedDimensions: d.relatedDimensions || [],
            dimensionWeights: [],
            visibility: d.visibility || 'public',
            visibleTo: d.visibleTo || []
          }
          try {
            const dwRes = await getDimensionWeights('article', d.id)
            if (dwRes.data) {
              this.form.dimensionWeights = dwRes.data
            }
          } catch (e) {
          }
        }
      } catch (e) {
        this.$message.error('加载文章详情失败')
      } finally {
        this.loading = false
      }
    },
    async loadForCopy(id) {
      this.loading = true
      try {
        const res = await adminArticleDetail({ id })
        if (res.data) {
          const d = res.data
          this.form = {
            id: null,
            categoryId: d.categoryId,
            title: (d.title || '') + '（副本）',
            summary: d.summary || '',
            coverImage: d.coverImage || '',
            content: d.content || '',
            tags: d.tags || '',
            contentType: d.contentType || 'article',
            difficultyLevel: d.difficultyLevel || 0,
            tagIds: [],
            author: d.author || '',
            readTime: d.readTime || 3,
            sortOrder: 0,
            relatedDimensions: d.relatedDimensions || [],
            dimensionWeights: [],
            visibility: d.visibility || 'public',
            visibleTo: d.visibleTo || []
          }
          try {
            const dwRes = await getDimensionWeights('article', d.id)
            if (dwRes.data && dwRes.data.length) {
              await saveDimensionWeights('article', null, dwRes.data)
              this.form.dimensionWeights = dwRes.data
            }
          } catch (e) {
          }
        }
      } catch (e) {
        this.$message.error('加载文章失败')
      } finally {
        this.loading = false
      }
    },
    beforeUpload(file) {
      const isImage = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/webp'
      if (!isImage) {
        this.$message.error('只能上传 JPG/PNG/GIF/WebP 格式图片')
        return false
      }
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('图片大小不能超过 5MB')
        return false
      }
      return true
    },
    handleUploadSuccess(res) {
      if (res.code === 200 && res.data) {
        this.form.coverImage = res.data.url || res.data
        this.$message.success('封面上传成功')
      } else {
        this.$message.error(res.message || '封面上传失败')
      }
    },
    handleUploadError() {
      this.$message.error('封面上传失败，请重试')
    },
    buildSubmitData() {
      return {
        id: this.form.id,
        categoryId: this.form.categoryId,
        title: this.form.title,
        summary: this.form.summary,
        coverImage: this.form.coverImage,
        content: this.form.content,
        tags: this.form.tags,
        contentType: this.form.contentType,
        difficultyLevel: this.form.difficultyLevel || 0,
        tagIds: this.form.tagIds,
        author: this.form.author,
        readTime: this.form.readTime,
        sortOrder: this.form.sortOrder,
        relatedDimensions: this.form.relatedDimensions,
        visibility: this.form.visibility,
        visibleTo: this.form.visibleTo
      }
    },
    async handleSave(publishNow) {
      if (publishNow) {
        this.publishing = true
      } else {
        this.saving = true
      }
      try {
        const data = this.buildSubmitData()
        let articleId = this.form.id
        if (this.isEdit) {
          await adminArticleUpdate(data)
          if (publishNow) {
            await adminArticlePublish({ id: this.form.id, status: 'published' })
          }
        } else {
          if (publishNow) {
            data.status = 'published'
          }
          const res = await adminArticleCreate(data)
          if (res.data && res.data.id) {
            articleId = res.data.id
            this.form.id = articleId
            this.isEdit = true
          }
        }
        if (articleId && this.form.dimensionWeights && this.form.dimensionWeights.length) {
          try {
            await saveDimensionWeights('article', articleId, this.form.dimensionWeights)
          } catch (e) {
            console.error('保存维度权重失败', e)
          }
        }
        this.$message.success(publishNow ? '文章已发布' : (this.articleStatus === 'published' ? '修改已保存' : '草稿已保存'))
        this.destroyEditor()
        this.$router.push('/article-manage')
      } catch (e) {
        this.$message.error(e.message || '保存失败')
      } finally {
        this.saving = false
        this.publishing = false
      }
    },
    async handleSubmitReview() {
      this.reviewLoading = true
      try {
        await this.handleSave(false)
        if (this.form.id) {
          await adminArticleSubmitReview({ id: this.form.id })
          this.$message.success('已提交审核')
          this.$router.push('/article-manage')
        }
      } catch (e) {
        this.$message.error(e.message || '提交审核失败')
      } finally {
        this.reviewLoading = false
      }
    },
    async handleReDraft() {
      this.reDraftLoading = true
      try {
        await adminArticleReDraft({ id: this.form.id })
        this.$message.success('已保存到草稿箱')
        this.articleStatus = 'draft'
        this.readonly = false
      } catch (e) {
        this.$message.error(e.message || '操作失败')
      } finally {
        this.reDraftLoading = false
      }
    },
    handleCopyAsNew() {
      const data = this.buildSubmitData()
      delete data.id
      data.title = (data.title || '').replace('（副本）', '') + '（副本）'
      data.status = 'draft'
      this.saving = true
      adminArticleCreate(data).then(res => {
        if (res.data && res.data.id) {
          this.$message.success('已复制为草稿')
          this.$router.push('/article-edit?id=' + res.data.id)
        } else {
          this.$message.error('复制失败')
        }
      }).catch(e => {
        this.$message.error(e.message || '复制失败')
      }).finally(() => {
        this.saving = false
      })
    }
  }
}
</script>

<style scoped>
.article-edit {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.article-edit > .el-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}
.article-edit > .el-card /deep/ .el-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 24px;
  width: 100%;
  box-sizing: border-box;
}
.article-edit /deep/ .el-form {
  width: 100%;
}
.article-edit /deep/ .admin-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.article-edit /deep/ .admin-page-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 32px;
}
.article-edit /deep/ .admin-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}
.cover-preview {
  width: 240px;
  max-height: 160px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  cursor: pointer;
}
.rich-editor {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.rich-editor /deep/ .w-e-toolbar {
  flex-wrap: wrap;
}
.rich-editor /deep/ .w-e-text-container {
  position: relative;
  height: 400px;
}
.rich-editor /deep/ .w-e-scroll {
  position: relative;
}
.rich-editor /deep/ .w-e-textarea-video-container,
.rich-editor /deep/ [data-w-e-type="video"] {
  position: relative;
  background-image: none !important;
  background-color: #111;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
  margin: 10px 0;
  padding: 0;
  max-width: 360px;
  width: 360px;
  overflow: hidden;
  line-height: 0;
  text-align: left;
  cursor: grab;
}
.rich-editor /deep/ .w-e-textarea-video-container.is-video-dragging,
.rich-editor /deep/ [data-w-e-type="video"].is-video-dragging {
  opacity: 0.45;
  cursor: grabbing;
}
.rich-editor.is-dragging-video {
  cursor: grabbing;
}
.rich-editor /deep/ .w-e-textarea-video-container video,
.rich-editor /deep/ [data-w-e-type="video"] video {
  display: block;
  width: 100%;
  max-height: 202px;
  height: auto;
  background: #000;
  object-fit: contain;
  cursor: grab;
}
.rich-editor /deep/ .article-video-drop-line {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 3px;
  background: #409eff;
  border-radius: 2px;
  pointer-events: none;
  z-index: 60;
  display: none;
}
.rich-editor /deep/ .w-e-textarea-video-container::after,
.rich-editor /deep/ [data-w-e-type="video"]::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 768px) {
  .rich-editor /deep/ .w-e-textarea-video-container,
  .rich-editor /deep/ [data-w-e-type="video"] {
    width: 100%;
    max-width: 100%;
  }
}

/* ========== 响应式表单 ========== */

/* 统一选择器宽度自适应 */
.form-select {
  width: 300px;
}
.form-select--short {
  width: 200px;
}
.form-select--wide {
  width: 400px;
}

.form-hint {
  color: #999;
  font-size: 12px;
  margin-left: 10px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .article-edit /deep/ .el-form-item {
    display: block !important;
  }
  .article-edit /deep/ .el-form-item__content {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .article-edit /deep/ .el-form-item__label {
    text-align: left !important;
    display: block !important;
    float: none !important;
  }

  .form-select,
  .form-select--short,
  .form-select--wide {
    width: 100% !important;
  }

  .form-row {
    display: block;
  }
  .form-row /deep/ .el-col {
    width: 100% !important;
  }

  .form-hint {
    display: block;
    margin-left: 0;
    margin-top: 4px;
    white-space: normal;
  }

  .cover-preview {
    width: 100%;
    max-width: 240px;
  }

  .article-edit /deep/ .admin-page-actions {
    margin-left: 0;
    width: 100%;
  }

  .article-edit /deep/ .el-rate {
    display: inline-flex;
    flex-wrap: wrap;
  }
}

/* 内滚动容器：利用 el-card__body flex column 让表单区域独立滚动 */
.article-edit-form-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  margin-right: -8px;
}
</style>