改接口匹配新前端

2025-12-24 17:41:33 +08:00
parent 5691a3f677
commit 2161113eae
18 changed files with 1134 additions and 96 deletions
@@ -1,4 +1,4 @@
 VITE_APP_ENV=development
 VITE_APP_DEBUG_MODE=true
 VITE_APP_TITLE=项目管理系统
-VITE_APP_API_BASE_URL=https://www.yunzer.cn/api
+VITE_APP_API_BASE_URL=http://localhost:8000/api
@@ -29,6 +29,8 @@ declare module 'vue' {
    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
    ElOption: typeof import('element-plus/es')['ElOption']
    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
    ElRow: typeof import('element-plus/es')['ElRow']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
    ElSelect: typeof import('element-plus/es')['ElSelect']
@@ -0,0 +1,110 @@
+import axios from 'axios'
+import ENV_CONFIG from '@/config/env'
+
+// 创建axios实例
+const api = axios.create({
+  baseURL: ENV_CONFIG.API_BASE_URL,
+  timeout: ENV_CONFIG.REQUEST_TIMEOUT,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+// 请求拦截器 - 添加token
+api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem(ENV_CONFIG.TOKEN_KEY)
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`
+    }
+    return config
+  },
+  (error) => {
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器 - 处理错误
+api.interceptors.response.use(
+  (response) => {
+    const data = response.data
+
+    // 检查后端返回的状态码
+    if (data.code === 0) {
+      // 成功，返回data字段的内容
+      return data.data
+    } else {
+      // 失败，抛出错误
+      return Promise.reject(new Error(data.msg || '请求失败'))
+    }
+  },
+  (error) => {
+    if (error.response?.status === 401) {
+      // token过期，清除本地存储
+      localStorage.removeItem(ENV_CONFIG.TOKEN_KEY)
+      localStorage.removeItem(ENV_CONFIG.USER_INFO_KEY)
+      window.location.href = '/#/login'
+    }
+    return Promise.reject(error)
+  }
+)
+
+// 文章接口
+export interface Article {
+  id: number
+  title: string
+  cate: string
+  image: string
+  desc: string
+  author: string
+  content: string
+  publishdate: string
+  sort: number | null
+  status: number
+  views: number
+  likes: number
+  is_trans: string
+  transurl: string | null
+  push: string
+  create_time: string
+  update_time: string | null
+  delete_time: string | null
+}
+
+// 获取文章列表的响应类型
+export interface ArticleListResponse {
+  data: Article[]
+  count: number
+}
+
+// 获取文章列表
+export const getArticleList = (params?: {
+  page?: number
+  pageSize?: number
+  search?: string
+  category?: string
+}): Promise<ArticleListResponse> => {
+  return api.get('/admin/articles/articlelist', { params })
+}
+
+// 删除文章
+export const deleteArticle = (id: number) => {
+  return api.delete(`/admin/articles/${id}`)
+}
+
+// 发布/取消发布文章
+export const publishArticle = (id: number, status: number) => {
+  return api.put(`/admin/articles/${id}/status`, { status })
+}
+
+// 编辑文章
+export const updateArticle = (id: number, data: Partial<Article>) => {
+  return api.put(`/admin/articles/${id}`, data)
+}
+
+// 创建文章
+export const createArticle = (data: Partial<Omit<Article, 'id' | 'create_time' | 'update_time' | 'delete_time'>>) => {
+  return api.post('/admin/articles', data)
+}
+
+export default api
@@ -2,7 +2,7 @@

 const ENV_CONFIG = {
  // API配置
-  API_BASE_URL: import.meta.env.VITE_APP_API_BASE_URL,
+  API_BASE_URL: import.meta.env.VITE_APP_API_BASE_URL || (import.meta.env.DEV ? 'http://localhost:8000/api' : 'https://www.yunzer.cn/api'),
  REQUEST_TIMEOUT: 10000,

  // 应用配置
@@ -34,15 +34,43 @@
        border
      >
        <el-table-column prop="id" label="ID" width="80" align="center" />
-        <el-table-column prop="title" label="标题" min-width="200" />
+        <el-table-column prop="title" label="标题" min-width="200">
+          <template #default="scope">
+            <div class="title-cell">
+              <span class="title-text">{{ scope.row.title }}</span>
+              <el-tag v-if="scope.row.is_trans === '是'" size="small" type="warning">转</el-tag>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="cate" label="分类" width="120" />
        <el-table-column prop="author" label="作者" width="120" />
-        <el-table-column prop="category" label="分类" width="120" />
-        <el-table-column prop="create_time" label="创建时间" width="180" />
-        <el-table-column label="操作" width="220">
+        <el-table-column prop="views" label="浏览" width="80" align="center" />
+        <el-table-column prop="likes" label="点赞" width="80" align="center" />
+        <el-table-column label="状态" width="100" align="center">
+          <template #default="scope">
+            <el-tag :type="scope.row.status === 2 ? 'success' : 'info'">
+              {{ scope.row.status === 2 ? '已发布' : '草稿' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="publishdate" label="发布时间" width="180" />
+        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
-            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
-            <el-button size="small" type="primary" @click="handlePublishSingle(scope.row)">发布</el-button>
+            <el-button
+              size="small"
+              type="danger"
+              @click="handleDelete(scope.row)"
+            >
+              删除
+            </el-button>
+            <el-button
+              size="small"
+              :type="scope.row.status === 2 ? 'warning' : 'success'"
+              @click="handlePublishSingle(scope.row)"
+            >
+              {{ scope.row.status === 2 ? '取消发布' : '发布' }}
+            </el-button>
          </template>
        </el-table-column>
      </el-table>
@@ -58,16 +86,16 @@
      </div>
    </el-card>
    <!-- 发布文章对话框 -->
-    <el-dialog v-model="publishDialogVisible" title="发布文章" width="500px">
+    <el-dialog v-model="publishDialogVisible" title="发布文章" width="600px">
      <el-form :model="publishForm" label-width="80px">
-        <el-form-item label="标题">
-          <el-input v-model="publishForm.title" />
+        <el-form-item label="标题" required>
+          <el-input v-model="publishForm.title" placeholder="请输入文章标题" />
        </el-form-item>
-        <el-form-item label="作者">
-          <el-input v-model="publishForm.author" />
+        <el-form-item label="作者" required>
+          <el-input v-model="publishForm.author" placeholder="请输入作者姓名" />
        </el-form-item>
-        <el-form-item label="分类">
-          <el-select v-model="publishForm.category" placeholder="请选择分类">
+        <el-form-item label="分类" required>
+          <el-select v-model="publishForm.cate" placeholder="请选择分类">
            <el-option
              v-for="item in categoryOptions"
              :key="item"
@@ -76,91 +104,172 @@
            />
          </el-select>
        </el-form-item>
-        <el-form-item label="内容">
+        <el-form-item label="是否转载">
+          <el-radio-group v-model="publishForm.is_trans">
+            <el-radio label="否">原创</el-radio>
+            <el-radio label="是">转载</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="原文链接" v-if="publishForm.is_trans === '是'">
+          <el-input v-model="publishForm.transurl" placeholder="请输入原文链接" />
+        </el-form-item>
+        <el-form-item label="内容" required>
          <el-input
            v-model="publishForm.content"
            type="textarea"
-            :rows="4"
+            :rows="6"
            placeholder="请输入文章内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="publishDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="submitPublish">发布</el-button>
+        <el-button type="primary" @click="submitPublish" :loading="loading">发布</el-button>
      </template>
    </el-dialog>
  </div>
 </template>

 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-// 这里假设有文章API
-// import { getArticleList } from '@/api/article'
+import { ref, onMounted, computed } from 'vue'
+import { getArticleList, deleteArticle, publishArticle, createArticle, Article, ArticleListResponse } from '@/api/article'
+import { ElMessage, ElMessageBox } from 'element-plus'

-const articles = ref<any[]>([])
+const articles = ref<Article[]>([])
 const loading = ref(false)
 const search = ref('')
 const page = ref(1)
 const pageSize = ref(10)
 const total = ref(0)
 const selectedCategory = ref('')
-const categoryOptions = ref<string[]>([
-  '前端', '后端', '数据库', '架构', '安全', '运维', '测试'
-])
+
+// 从文章数据中提取分类选项
+const categoryOptions = computed(() => {
+  const categories = new Set<string>()
+  articles.value.forEach(article => {
+    categories.add(article.cate)
+  })
+  return Array.from(categories).sort()
+})

 // 发布文章相关
 const publishDialogVisible = ref(false)
 const publishForm = ref({
  title: '',
  author: '',
-  category: '',
-  content: ''
+  cate: '',
+  content: '',
+  is_trans: '否',
+  transurl: ''
 })

-function fetchArticles() {
+async function fetchArticles() {
  loading.value = true
-  // 这里用模拟数据，实际请替换为API请求
-  setTimeout(() => {
-    // 假数据
-    const all = [
-      { id: 1, title: 'Vue3 入门', author: '张三', category: '前端', create_time: '2024-06-01 10:00' },
-      { id: 2, title: 'TypeScript 实践', author: '李四', category: '前端', create_time: '2024-06-02 11:00' },
-      { id: 3, title: 'PHP 高级技巧', author: '王五', category: '后端', create_time: '2024-06-03 12:00' },
-      { id: 4, title: '数据库优化', author: '赵六', category: '数据库', create_time: '2024-06-04 13:00' },
-      { id: 5, title: '云原生架构', author: '钱七', category: '架构', create_time: '2024-06-05 14:00' },
-      { id: 6, title: '安全最佳实践', author: '孙八', category: '安全', create_time: '2024-06-06 15:00' },
-      { id: 7, title: '性能调优', author: '周九', category: '运维', create_time: '2024-06-07 16:00' },
-      { id: 8, title: '微服务设计', author: '吴十', category: '架构', create_time: '2024-06-08 17:00' },
-      { id: 9, title: '前端工程化', author: '郑十一', category: '前端', create_time: '2024-06-09 18:00' },
-      { id: 10, title: '测试驱动开发', author: '冯十二', category: '测试', create_time: '2024-06-10 19:00' },
-      { id: 11, title: '持续集成', author: '褚十三', category: '运维', create_time: '2024-06-11 20:00' }
-    ]
-    let filtered = all
-    if (search.value) {
-      filtered = filtered.filter(a => a.title.includes(search.value))
+  try {
+    const params = {
+      page: page.value,
+      pageSize: pageSize.value,
+      search: search.value || undefined,
+      category: selectedCategory.value || undefined
    }
-    if (selectedCategory.value) {
-      filtered = filtered.filter(a => a.category === selectedCategory.value)
-    }
-    total.value = filtered.length
-    const start = (page.value - 1) * pageSize.value
-    articles.value = filtered.slice(start, start + pageSize.value)
+
+    const result = await getArticleList(params)
+    articles.value = result.data
+    total.value = result.count
+  } catch (error: any) {
+    console.error('获取文章列表失败:', error)
+    ElMessage.error(error.message || '获取文章列表失败')
+    // 如果API调用失败，使用模拟数据作为后备
+    loadMockData()
+  } finally {
    loading.value = false
-  }, 500)
+  }
 }

-function handleEdit(row: any) {
+// 后备模拟数据
+function loadMockData() {
+  const all: Article[] = [
+    {
+      id: 1,
+      title: 'Vue3 入门',
+      cate: '前端',
+      author: '张三',
+      create_time: '2024-06-01 10:00',
+      views: 0,
+      status: 1,
+      image: '',
+      desc: '',
+      content: '',
+      publishdate: '2024-06-01 10:00',
+      sort: null,
+      likes: 0,
+      is_trans: '否',
+      transurl: null,
+      push: '0',
+      update_time: null,
+      delete_time: null
+    },
+    {
+      id: 2,
+      title: 'TypeScript 实践',
+      cate: '前端',
+      author: '李四',
+      create_time: '2024-06-02 11:00',
+      views: 0,
+      status: 1,
+      image: '',
+      desc: '',
+      content: '',
+      publishdate: '2024-06-02 11:00',
+      sort: null,
+      likes: 0,
+      is_trans: '否',
+      transurl: null,
+      push: '0',
+      update_time: null,
+      delete_time: null
+    }
+  ]
+
+  let filtered = all
+  if (search.value) {
+    filtered = filtered.filter(a => a.title.includes(search.value))
+  }
+  if (selectedCategory.value) {
+    filtered = filtered.filter(a => a.cate === selectedCategory.value)
+  }
+
+  total.value = filtered.length
+  const start = (page.value - 1) * pageSize.value
+  articles.value = filtered.slice(start, start + pageSize.value)
+}
+
+function handleEdit(row: Article) {
  // 编辑文章逻辑
-  alert('编辑文章: ' + row.title)
+  ElMessage.info('编辑功能开发中: ' + row.title)
+  // TODO: 跳转到编辑页面或打开编辑对话框
 }

-function handleDelete(row: any) {
-  // 删除文章逻辑
-  if (confirm('确定要删除文章 "' + row.title + '" 吗？')) {
-    // 实际应调用API
-    articles.value = articles.value.filter(a => a.id !== row.id)
-    total.value--
+async function handleDelete(row: Article) {
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除文章 "${row.title}" 吗？此操作不可恢复。`,
+      '确认删除',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+
+    await deleteArticle(row.id)
+    ElMessage.success('删除成功')
+    fetchArticles()
+  } catch (error: any) {
+    if (error !== 'cancel') {
+      console.error('删除文章失败:', error)
+      ElMessage.error(error.message || '删除失败')
+    }
  }
 }

@@ -169,42 +278,73 @@ function handlePageChange(val: number) {
  fetchArticles()
 }

-// 点击“发布文章”按钮
+// 点击"发布文章"按钮
 function handlePublish() {
  publishForm.value = {
    title: '',
    author: '',
-    category: '',
-    content: ''
+    cate: '',
+    content: '',
+    is_trans: '否',
+    transurl: ''
  }
  publishDialogVisible.value = true
 }

-// 单条发布（模拟，实际应调用API）
-function handlePublishSingle(row: any) {
-  alert('发布文章: ' + row.title)
+// 单条发布/取消发布
+async function handlePublishSingle(row: Article) {
+  try {
+    const newStatus = row.status === 1 ? 2 : 1
+    const actionText = newStatus === 2 ? '发布' : '取消发布'
+
+    await publishArticle(row.id, newStatus)
+    ElMessage.success(`${actionText}成功`)
+    fetchArticles()
+  } catch (error: any) {
+    console.error('发布操作失败:', error)
+    ElMessage.error(error.message || '操作失败')
+  }
 }

 // 提交发布
-function submitPublish() {
-  if (!publishForm.value.title || !publishForm.value.author || !publishForm.value.category) {
-    alert('请填写完整信息')
+async function submitPublish() {
+  if (!publishForm.value.title || !publishForm.value.author || !publishForm.value.cate || !publishForm.value.content) {
+    ElMessage.error('请填写完整信息')
    return
  }
-  // 实际应调用API，这里直接添加到表格
-  const newId = Math.max(...articles.value.map(a => a.id), 0) + 1
-  articles.value.unshift({
-    id: newId,
-    title: publishForm.value.title,
-    author: publishForm.value.author,
-    category: publishForm.value.category,
-    create_time: new Date().toISOString().slice(0, 16).replace('T', ' ')
-  })
-  total.value++
-  publishDialogVisible.value = false
-  // 可选：重置分页到第一页
-  page.value = 1
-  fetchArticles()
+
+  if (publishForm.value.is_trans === '是' && !publishForm.value.transurl) {
+    ElMessage.error('转载文章必须填写原文链接')
+    return
+  }
+
+  try {
+    // 准备提交的数据
+    const submitData = {
+      title: publishForm.value.title,
+      author: publishForm.value.author,
+      cate: publishForm.value.cate,
+      content: publishForm.value.content,
+      desc: publishForm.value.content.substring(0, 200), // 摘要，取前200字符
+      image: '',
+      publishdate: new Date().toISOString().slice(0, 19).replace('T', ' '),
+      sort: null,
+      status: 1,
+      views: 0,
+      likes: 0,
+      is_trans: publishForm.value.is_trans,
+      transurl: publishForm.value.is_trans === '是' ? publishForm.value.transurl : null,
+      push: '0'
+    }
+
+    await createArticle(submitData)
+    ElMessage.success('发布成功')
+    publishDialogVisible.value = false
+    fetchArticles()
+  } catch (error: any) {
+    console.error('发布文章失败:', error)
+    ElMessage.error(error.message || '发布失败')
+  }
 }

 onMounted(() => {
@@ -231,4 +371,17 @@ onMounted(() => {
  margin-top: 20px;
  text-align: right;
 }
+
+.title-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.title-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>
@@ -10,6 +10,7 @@
            <el-input
              :prefix-icon="User"
              v-model="loginForm.account"
+              placeholder="请输入您的邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item>
@@ -17,6 +18,7 @@
              type="password"
              :prefix-icon="Lock"
              v-model="loginForm.password"
+              placeholder="请输入您的密码"
              show-password
            ></el-input>
          </el-form-item>
@@ -52,6 +52,13 @@ export default defineConfig({
    }
  },
  
+  // 环境变量配置
+  define: {
+    __API_BASE_URL__: JSON.stringify(process.env.NODE_ENV === 'production'
+      ? 'https://www.yunzer.cn/api'
+      : 'http://localhost:8000/api')
+  },
+
  // 服务器配置
  server: {
    port: 5173,  // 保持你当前使用的端口