feat(goods): 新增文章编辑功能并优化列表页面

- 新增文章编辑页面，支持添加和编辑文章
- 优化文章列表页面，增加详情对话框和删除功能
- 更新相关 API 接口，支持文章添加和编辑- 调整用户列表页面布局
- 移除底部边框样式

src/view/goods/article/index.vue

@@ -10,7 +10,7 @@
     </div>
     <div class="gva-table-box">
       <div class="gva-btn-list">
-        <el-button  type="primary" icon="plus" @click="openDialog()">新增</el-button>
+        <el-button  type="primary" icon="plus" @click="handleEdit()">新增</el-button>
       </div>
       <Content
         @changePage="changePage"
@@ -53,12 +53,38 @@
         </template>
       </Content>
     </div>
+    <!-- 在 template 的 Content 组件后添加 Dialog -->
+    <el-dialog
+      v-model="detailVisible"
+      title="文章详情"
+      width="60%"
+      destroy-on-close
+    >
+      <el-descriptions :column="2" border>
+        <el-descriptions-item label="封面图">
+          <el-image
+            style="width: 100px; height: 100px"
+            :src="detailData.coverImg"
+            :preview-src-list="[detailData.coverImg]"
+            fit="cover"
+          />
+        </el-descriptions-item>
+        <el-descriptions-item label="商品名称">{{ detailData.title || EMPTY_STR }}</el-descriptions-item>
+        <el-descriptions-item label="创建时间">{{ formatDate(detailData.CreatedAt) }}</el-descriptions-item>
+        <el-descriptions-item label="更新时间">{{ formatDate(detailData.UpdatedAt) }}</el-descriptions-item>
+        <el-descriptions-item label="商品描述" :span="2">
+          <div v-html="detailData.content"></div>
+        </el-descriptions-item>
+      </el-descriptions>
+    </el-dialog>
+
   </div>
 </template>
 <script setup>
+  import { ElMessage, ElMessageBox } from 'element-plus'
   import searchForm from '@/components/searchForm/index.vue'
   import Content from '@/components/content/index.vue'
-  import {list} from '@/api/goods/index.js'
+  import { del, list } from '@/api/goods/index.js'
   import { ref, onMounted } from 'vue'
   import {formatDate} from '@/utils/format'
   import { ARTICLE_SEARCH_CONFIG, ARTICLE_TABLE_CONFIG } from '@/config'
@@ -66,9 +92,12 @@
   import { useRouter, useRoute} from 'vue-router'
   const router = useRouter()
   const route = useRoute()
+  const EMPTY_STR = '- -'
+  // 在 script setup 中添加响应式数据
+  const detailVisible = ref(false)
+  const detailData = ref({})
 
-
-  const tableLoading = ref(true),  tableData = ref([{status:1}])
+  const tableLoading = ref(true),  tableData = ref([])
   const queryParams = ref({
     page: 1,
     pageSize: 10,
@@ -76,10 +105,6 @@
     startTime: '',
     endTime: ''
   }), total = ref(0)
-  // const EMPTY_STR = '- -'
-  const tag = (status) => {
-    return userStatus.find((item) => item.value === status+'') || { type: '', label: EMPTY_STR }
-  }
   const searchData = (data) => {
     if (data.times) {
       data.startTime = data.times[0]
@@ -100,6 +125,11 @@
   onMounted(() => {
     getList()
   })
+
+  function handleDetail(row) {
+    detailData.value = { ...row }
+    detailVisible.value = true
+  }
   async function getList() {
     const res = await list(queryParams.value)
     if(res.code === 0) {
@@ -107,21 +137,49 @@
       total.value = res.data.total
     }
   }
-
-  function handleDetail(row) {
-
-  }
   function handleEdit(row) {
-    console.log(row)
       router.push({
         name: 'edit',
         query: {
-          id: row.ID
+          id: row?row.ID:''
         }
       })
   }
-  function handleDelete(row) {
+  async function handleDelete(row) {
+    // 提醒
+    // this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+    //   confirmButtonText: '确定',
+    //   cancelButtonText: '取消',
+    //   type: 'warning'
+    // }).then(() => {
+    //   // 删除
+    //   del(row.ID)
+    // }).catch(() => {
+    //   this.$message({
+    //     type: 'info',
+    //     message: '已取消删除'
+    //   });
+    // });
+    try {
+      await ElMessageBox.confirm('此操作将永久删除该商品，是否继续？', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
 
+      const res = await del({
+        ids: [row.ID]
+      })
+      if (res.code === 0) {
+        ElMessage.success('删除成功')
+        getList() // 刷新列表
+      }
+    } catch (error) {
+      // 取消删除时不需要提示
+      if (error !== 'cancel') {
+        ElMessage.error(error.message || '删除失败')
+      }
+    }
   }
   function changePage(data) {
     queryParams.value.pageNum = data