From 34d40ad77f86bd2b7483c0c7a3273ec3770b2bab Mon Sep 17 00:00:00 2001
From: mayiming <1627832236@qq.com>
Date: Mon, 3 Nov 2025 11:30:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=A4=9A=E4=BD=99vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/resource/ResourceView.vue       | 498 ------------------
 1 file changed, 498 deletions(-)
 delete mode 100644 management/src/views/resource/ResourceView.vue

diff --git a/management/src/views/resource/ResourceView.vue b/management/src/views/resource/ResourceView.vue
deleted file mode 100644
index 8eb4bf9e..00000000
--- a/management/src/views/resource/ResourceView.vue
+++ /dev/null
@@ -1,498 +0,0 @@
-<template>
-  <el-config-provider :locale="zhCn">
-    <div class="p-6 bg-white rounded-lg shadow-md min-h-screen pb-24" v-loading="loading">
-
-      <div class="flex justify-between items-center mb-6">
-        <span class="text-2xl font-bold text-gray-700">资源案例管理列表</span>
-      </div>
-
-      <el-table :data="tableData" style="width: 100%" row-key="id" max-height="82vh">
-        <el-table-column prop="id" label="ID" width="80" sortable fixed></el-table-column>
-        <el-table-column label="封面" width="180">
-          <template #default="scope">
-            <el-image style="width: 120px; height: 70px; border-radius: 6px;" :src="scope.row.cover" :preview-src-list="[scope.row.cover]" fit="cover" :preview-teleported="true" hide-on-click-modal>
-              <template #error>
-                <div class="flex items-center justify-center w-full h-full bg-gray-100 text-gray-500">加载失败</div>
-              </template>
-            </el-image>
-          </template>
-        </el-table-column>
-        <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip>
-          <template #default="scope">
-            <span class="font-semibold">{{ scope.row.title }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="文章内容" min-width="300">
-          <template #default="scope">
-            <div class="content-preview" :title="stripHtml(scope.row.content)">
-              {{ stripHtml(scope.row.content).length > 100 ? `${stripHtml(scope.row.content).slice(0, 100)}...` : stripHtml(scope.row.content) }}
-            </div>
-            <el-button size="mini" type="text" class="mt-1 text-blue-600" @click="handleViewContent(scope.row)">查看详情</el-button>
-          </template>
-        </el-table-column>
-        <el-table-column prop="topic" label="主题" width="120"></el-table-column>
-        <el-table-column prop="excerpt" label="摘要" min-width="250" show-overflow-tooltip></el-table-column>
-        <el-table-column prop="create_at" label="创建时间" width="180" sortable></el-table-column>
-        <el-table-column prop="update_at" label="更新时间" width="180" sortable></el-table-column>
-        <el-table-column label="操作" width="200" fixed="right">
-          <template #default="scope">
-            <div class="action-buttons">
-              <el-button size="small" type="primary" :icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
-              <el-button size="small" type="danger" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <el-dialog v-model="contentDialogVisible" title="文章内容详情" :width="`800px`" :before-close="handleCloseDialog">
-        <h3 class="text-xl font-bold text-gray-800 mb-4">标题： {{ currentArticle.title }}</h3>
-        <div class="content-full text-gray-700 leading-relaxed whitespace-pre-wrap" v-html="currentArticle.content || '当前文章暂无内容'">
-        </div>
-      </el-dialog>
-    </div>
-
-    <div class="fixed bottom-0 right-0 w-full p-4 bg-white shadow-[0_-2px_5px_rgba(0,0,0,0.05)] flex justify-end z-10 border-t border-gray-200">
-      <el-pagination class="custom-pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total" v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
-    </div>
-
-    <el-drawer v-model="drawerVisible" title="编辑文章" direction="rtl" size="60%" :before-close="handleDrawerClose" destroy-on-close>
-      <div class="publish-form-container">
-        <div class="form-group title-group">
-          <label class="form-label">文章标题</label>
-          <el-input v-model="form.title" placeholder="请输入文章标题" clearable :disabled="isSubmitting" />
-        </div>
-
-        <div class="form-group cover-group">
-          <label class="form-label">文章封面</label>
-          <el-upload action="http://localhost:8080/api/upload/cover" name="image" :show-file-list="false" :on-success="handleCoverSuccess" :before-upload="beforeCoverUpload" :on-error="handleCoverError" :disabled="isSubmitting">
-            <img v-if="form.cover" :src="form.cover" class="cover-preview" alt="封面"/>
-            <el-icon v-else class="cover-uploader-icon"><Plus /></el-icon>
-          </el-upload>
-        </div>
-
-        <div class="form-group excerpt-group">
-          <label class="form-label">文章摘要</label>
-          <el-input
-              v-model="form.excerpt"
-              type="textarea"
-              :rows="4"
-              placeholder="请输入文章摘要（可选，若不填则自动从正文截取）"
-              clearable
-              :disabled="isSubmitting"
-          />
-        </div>
-
-        <div class="form-group content-group">
-          <label class="form-label">文章内容</label>
-          <div ref="editorRef" class="quill-editor"></div>
-        </div>
-      </div>
-
-      <template #footer>
-        <div style="flex: auto">
-          <el-button @click="handleDrawerClose">取消</el-button>
-          <el-button type="primary" @click="submitArticle" :loading="isSubmitting">
-            更新文章
-          </el-button>
-        </div>
-      </template>
-    </el-drawer>
-
-  </el-config-provider>
-</template>
-
-<script lang="ts" setup>
-import { ref, onMounted, watch, nextTick } from 'vue';
-import { ElMessage, ElMessageBox, ElDialog, ElConfigProvider, ElDrawer, ElInput, ElUpload } from 'element-plus';
-import { Edit, Delete, Plus } from '@element-plus/icons-vue';
-import Quill from 'quill';
-import 'quill/dist/quill.snow.css';
-import type { UploadProps } from 'element-plus';
-
-// --- 类型定义 ---
-interface Article {
-  id: number;
-  title: string;
-  content: string;
-  cover: string;
-  create_at: string;
-  update_at: string;
-  is_delete: number;
-  topic: string;
-  excerpt: string;
-}
-
-interface ListArticleReq {
-  page: number;
-  size: number;
-  topic: string;
-}
-
-// --- API 基地址 ---
-const API_BASE_URL = 'http://localhost:8080/api';
-
-// =================================================================
-//                      列表页相关状态与逻辑
-// =================================================================
-const loading = ref(true);
-const tableData = ref<Article[]>([]);
-const currentPage = ref(1);
-const pageSize = ref(10);
-const total = ref(0);
-const contentDialogVisible = ref(false);
-const currentArticle = ref<Article>({ id: 0, title: '', content: '', cover: '', create_at: '', update_at: '', is_delete: 0, topic: '', excerpt: '' });
-
-// --- HTML清理函数 ---
-const stripHtml = (html: string) => {
-  if (!html) return '';
-  const tempDiv = document.createElement('div');
-  tempDiv.innerHTML = html;
-  return tempDiv.textContent || tempDiv.innerText || '';
-};
-
-const fetchData = async () => {
-  loading.value = true;
-  try {
-    const reqData: ListArticleReq = { page: currentPage.value, size: pageSize.value,topic:"案例资源" };
-    const response = await fetch(`${API_BASE_URL}/articles/getarticle`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(reqData)
-    });
-    if (!response.ok) throw new Error(`请求失败！状态码：${response.status}`);
-    const data = await response.json();
-    tableData.value = data.Article_list || [];
-    total.value = data.total || 0;
-  } catch (error) {
-    console.error('[ERROR] 获取文章列表失败：', error);
-    ElMessage.error('获取文章列表失败，请检查接口或网络！');
-  } finally {
-    loading.value = false;
-  }
-};
-
-onMounted(fetchData);
-
-const handleViewContent = (row: Article) => {
-  currentArticle.value = { ...row };
-  contentDialogVisible.value = true;
-};
-
-const handleCloseDialog = () => {
-  contentDialogVisible.value = false;
-};
-
-// --- 🔥 新增：删除功能 ---
-const handleDelete = (row: Article) => {
-  ElMessageBox.confirm(`确定要删除文章《${row.title}》吗？此操作无法撤销！`, '警告', {
-    confirmButtonText: '确定删除',
-    cancelButtonText: '取消',
-    type: 'warning',
-  })
-      .then(async () => {
-        try {
-          const response = await fetch(`${API_BASE_URL}/articles/${row.id}`, {
-            method: 'DELETE',
-          });
-          if (!response.ok) {
-            // 如果后端返回错误信息，尝试解析并显示
-            const errData = await response.json().catch(() => null);
-            throw new Error(errData?.message || '删除失败');
-          }
-          ElMessage.success('删除成功！');
-          // 刷新列表数据
-          fetchData();
-        } catch (error) {
-          console.error('[ERROR] 删除文章失败：', error);
-          ElMessage.error(`删除文章失败: ${(error as Error).message}`);
-        }
-      })
-      .catch(() => {
-        ElMessage.info('已取消删除');
-      });
-};
-
-const handleSizeChange = (val: number) => {
-  pageSize.value = val;
-  currentPage.value = 1;
-  fetchData();
-};
-
-const handleCurrentChange = (val: number) => {
-  currentPage.value = val;
-  fetchData();
-};
-
-// =================================================================
-//                      抽屉编辑相关状态与逻辑
-// =================================================================
-const drawerVisible = ref(false);
-const isSubmitting = ref(false);
-
-const defaultFormState = () => ({
-  id: null as number | null,
-  title: '',
-  topic: 'news',
-  cover: '',
-  content: '',
-  excerpt: '',
-});
-const form = ref(defaultFormState());
-
-// --- 富文本编辑器 ---
-const editorRef = ref<HTMLDivElement | null>(null);
-let quillInstance: Quill | null = null;
-
-const initQuillEditor = () => {
-  if (editorRef.value && !quillInstance) {
-    quillInstance = new Quill(editorRef.value, {
-      theme: 'snow',
-      modules: {
-        toolbar: {
-          container: [['bold', 'italic', 'underline'], ['link', 'image']],
-          handlers: {
-            image: handleEditorImageUpload,
-          }
-        }
-      },
-      placeholder: '请开始创作你的文章...'
-    });
-
-    quillInstance.on('text-change', (delta, _, source) => {
-      if (source === 'user') {
-        const pastedBase64 = getPastedBase64Image(delta);
-        if (pastedBase64) {
-          const selection = quillInstance?.getSelection();
-          if (!selection) return;
-
-          const imageIndex = selection.index;
-          quillInstance?.deleteText(imageIndex, 1);
-          const blob = base64ToBlob(pastedBase64);
-
-          if (blob) {
-            const file = new File([blob], `pasted-image-${Date.now()}.png`, { type: blob.type });
-            uploadEditorImage(file, imageIndex);
-          }
-        }
-      }
-    });
-  }
-};
-
-watch(drawerVisible, (visible) => {
-  if (visible) {
-    nextTick(() => {
-      initQuillEditor();
-      if (quillInstance) {
-        quillInstance.root.innerHTML = form.value.content;
-      }
-    });
-  } else {
-    quillInstance = null;
-  }
-});
-
-// --- 编辑器图片上传相关函数 ---
-function handleEditorImageUpload() {
-  const fileInput = document.createElement('input');
-  fileInput.type = 'file';
-  fileInput.accept = 'image/*';
-
-  fileInput.onchange = () => {
-    const file = fileInput.files?.[0];
-    if (!file) return;
-
-    const selection = quillInstance?.getSelection();
-    const insertIndex = selection ? selection.index : quillInstance?.getLength() || 0;
-    uploadEditorImage(file, insertIndex);
-    fileInput.value = '';
-  };
-
-  fileInput.click();
-}
-
-async function uploadEditorImage(file: File, insertIndex: number) {
-  if (!quillInstance) return;
-
-  quillInstance.insertText(insertIndex, '[图片上传中...]', { color: '#999', italic: true });
-
-  try {
-    const formData = new FormData();
-    formData.append('image', file);
-
-    const response = await fetch(`${API_BASE_URL}/upload/image`, {
-      method: 'POST',
-      body: formData,
-    });
-
-    if (!response.ok) throw new Error(`HTTP状态码：${response.status}`);
-    const result = await response.json();
-    const imageUrl = result.data?.url;
-
-    if (!imageUrl) throw new Error('未从响应中获取到图片地址');
-
-    quillInstance.deleteText(insertIndex, '[图片上传中...]'.length);
-    quillInstance.insertEmbed(insertIndex, 'image', imageUrl);
-    quillInstance.setSelection(insertIndex + 1);
-
-  } catch (err) {
-    const errMsg = err instanceof Error ? err.message : '未知错误';
-    quillInstance.deleteText(insertIndex, '[图片上传中...]'.length);
-    quillInstance.insertText(insertIndex, `[图片上传失败：${errMsg}]`, { color: '#f56c6c', italic: true });
-    ElMessage.error(`编辑器图片上传失败：${errMsg}`);
-  }
-}
-
-function getPastedBase64Image(delta: any): string | null {
-  if (!delta?.ops) return null;
-  for (const op of delta.ops) {
-    if (
-        op.insert &&
-        typeof op.insert === 'object' &&
-        op.insert.image &&
-        op.insert.image.startsWith('data:image')
-    ) {
-      return op.insert.image;
-    }
-  }
-  return null;
-}
-
-function base64ToBlob(base64: string): Blob | null {
-  try {
-    const [prefix, data] = base64.split(',');
-    if (!prefix || !data) throw new Error('base64格式错误');
-
-    const mimeMatch = prefix.match(/data:(.*?);/);
-    if (!mimeMatch) throw new Error('无法解析图片类型');
-    const mime = mimeMatch[1];
-
-    const binaryData = atob(data);
-    const bytes = new Uint8Array(binaryData.length);
-    for (let i = 0; i < binaryData.length; i++) {
-      bytes[i] = binaryData.charCodeAt(i);
-    }
-
-    return new Blob([bytes], { type: mime });
-  } catch (error) {
-    console.error('base64转Blob失败：', error);
-    ElMessage.error('解析粘贴的图片失败！');
-    return null;
-  }
-}
-
-// --- 操作处理 ---
-const handleEdit = (row: Article) => {
-  form.value = {
-    id: row.id,
-    title: row.title,
-    topic: row.topic,
-    cover: row.cover,
-    excerpt: row.excerpt,
-    content: row.content,
-  };
-  drawerVisible.value = true;
-};
-
-const handleDrawerClose = () => {
-  drawerVisible.value = false;
-};
-
-const submitArticle = async () => {
-  if (!form.value.title) {
-    ElMessage.warning('请输入文章标题');
-    return;
-  }
-  if (!form.value.id) {
-    ElMessage.error('文章ID丢失，无法更新！');
-    return;
-  }
-
-  isSubmitting.value = true;
-  const contentHTML = quillInstance?.root.innerHTML || '';
-  const excerpt = form.value.excerpt.trim() || quillInstance?.getText().trim().slice(0, 150) || '';
-
-  const submitData = {
-    title: form.value.title,
-    cover: form.value.cover,
-    excerpt: excerpt,
-    content: contentHTML,
-    topic: form.value.topic,
-  };
-  console.log("修改文章信息：",JSON.stringify(submitData));
-
-  try {
-    const url = `${API_BASE_URL}/articles/${Number(form.value.id)}`;
-    const method = 'PUT';
-
-    const response = await fetch(url, {
-      method: method,
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(submitData),
-    });
-
-    if (!response.ok) throw new Error('提交失败');
-
-    ElMessage.success('文章更新成功！');
-    drawerVisible.value = false;
-    fetchData();
-
-  } catch (error) {
-    const err = error as Error;
-    ElMessage.error(`更新失败: ${err.message}`);
-  } finally {
-    isSubmitting.value = false;
-  }
-};
-
-// --- 封面上传处理 ---
-const handleCoverSuccess: UploadProps['onSuccess'] = (response) => {
-  const ossUrl = response.data?.url;
-  if (ossUrl) {
-    form.value.cover = ossUrl;
-    ElMessage.success('封面上传成功');
-  } else {
-    ElMessage.error('封面上传失败');
-  }
-};
-
-const beforeCoverUpload: UploadProps['beforeUpload'] = (rawFile) => {
-  const isLt5M = rawFile.size / 1024 / 1024 < 5;
-  if (!isLt5M) {
-    ElMessage.error('图片大小不能超过 5MB!');
-  }
-  return isLt5M;
-};
-
-const handleCoverError = () => {
-  ElMessage.error('封面上传失败');
-};
-
-</script>
-
-<style scoped>
-/* 表格样式 */
-.el-table .el-table__cell { vertical-align: middle; }
-.el-table__header-wrapper th { background-color: #fafafa !important; font-weight: 600; color: #333; }
-.action-buttons .el-button { margin-right: 8px; }
-.content-preview { color: #666; line-height: 1.5; word-break: break-all; }
-.content-full { min-height: 300px; padding: 20px; background-color: #f9fafb; border-radius: 8px; }
-.el-dialog__title { font-size: 18px !important; font-weight: 600 !important; }
-
-/* 分页器样式 */
-.custom-pagination { justify-content: flex-end !important; }
-.custom-pagination .el-pagination__total,
-.custom-pagination .el-pagination__sizes,
-.custom-pagination .el-pagination__jump { margin-right: 16px !important; }
-.custom-pagination .el-pagination__jump .el-input { width: 60px !important; }
-
-/* 抽屉内表单样式 */
-.publish-form-container { padding: 0 20px; }
-.form-group { margin-bottom: 24px; }
-.form-label { display: block; margin-bottom: 8px; color: #333; font-size: 14px; font-weight: 600; }
-.quill-editor { height: 350px; border-radius: 4px; border: 1px solid #dcdfe6; }
-.cover-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; }
-.cover-uploader .el-upload:hover { border-color: #409EFF; }
-.cover-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; text-align: center; }
-.cover-preview { width: 178px; height: 178px; display: block; object-fit: cover; }
-</style>