feat(文章编辑): 添加文章简介输入框并优化样式

- 在文章编辑页面新增简介输入区域
- 移除home.vue中多余的webkit-line-clamp属性
- 统一代码格式和间距

src/views/articlesave.vue

@@ -14,7 +14,7 @@
           </span>
           <span class="meta-item status-item">
             <i class="el-icon-document"></i>
-            <el-select v-model="Articleform.status"   placeholder="请选择状态" class="meta-select">
+            <el-select v-model="Articleform.status" placeholder="请选择状态" class="meta-select">
               <el-option v-for="item in statusoptions" :key="item.value" :label="item.label" :value="item.value">
               </el-option>
             </el-select>
@@ -30,11 +30,21 @@
             </el-cascader>
           </span>
         </div>
+        <div class="article-summary-section">
+          <!-- 文章简介 -->
+          <span class="meta-item summary-item">
+            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入简介"
+              v-model="Articleform.content">
+            </el-input>
+          </span>
+
+        </div>
       </div>
       <div class="editor-container">
         <!-- 编辑区域 -->
-        <MdEditor v-model="Articleform.markdownscontent"  class="markdown-editor"   @on-save="handleSave"  noImgZoomIn  noKatex />
-         <!-- 预览 -->
+        <MdEditor v-model="Articleform.markdownscontent" class="markdown-editor" @on-save="handleSave" noImgZoomIn
+          noKatex />
+        <!-- 预览 -->
       </div>
     </div>
   </div>
@@ -42,9 +52,9 @@
 
 <script setup lang="ts">
 import { reactive, ref } from 'vue';
-import { MdEditor  } from 'md-editor-v3';
+import { MdEditor } from 'md-editor-v3';
 import 'md-editor-v3/lib/style.css';
-import {  categoryService, categoryAttributeService, articleService } from '@/services';
+import { categoryService, categoryAttributeService, articleService } from '@/services';
 import type { Article } from '@/types/index.ts';
 import { ElMessage } from 'element-plus';
 import { useGlobalStore } from '@/store/globalStore'
@@ -128,7 +138,7 @@ const loadCategories = async () => {
         })
       );
       categorieoptions.value = optionsData;
-      
+
       // 如果是编辑模式且有attributeid，设置级联选择器的默认值
       if (Articleform.value.articleid !== 0 && Articleform.value.attributeid !== 0) {
         // 查找属性所属的分类
@@ -141,7 +151,7 @@ const loadCategories = async () => {
           }
         }
       }
-      
+
       console.log('分类选项:', optionsData);
       console.log('选中的值:', selectedValues.value);
     }
@@ -165,13 +175,13 @@ loadCategories();
 
 const handleSave = (markdown) => {
   Articleform.value.markdownscontent = markdown;
-  
+
   // 验证必填字段
   if (!Articleform.value.title || !Articleform.value.attributeid) {
     ElMessage.warning('请填写必填字段：标题和分类属性');
     return;
   }
-  
+
   // 构建请求数据
   const articleData = {
     articleid: Articleform.value.articleid,
@@ -183,12 +193,12 @@ const handleSave = (markdown) => {
     likes: 0,
     markdownscontent: Articleform.value.markdownscontent
   };
-  
+
   console.log('发送文章数据:', articleData);
   console.log('当前认证token是否存在:', !!localStorage.getItem('token'));
-  
+
   // 根据articleid决定调用创建还是更新接口
-  const savePromise = Articleform.value.articleid === 0 
+  const savePromise = Articleform.value.articleid === 0
     ? articleService.createArticle(articleData)
     : articleService.updateArticle(Articleform.value.articleid, articleData);
   savePromise
@@ -213,7 +223,7 @@ const handleSave = (markdown) => {
           };
           selectedValues.value = [];
         }
-        
+
         // 返回列表页
         router.push('/home');
       } else {
@@ -226,9 +236,9 @@ const handleSave = (markdown) => {
       if (err.response) {
         console.error('错误状态码:', err.response.status);
         console.error('错误响应数据:', err.response.data);
-        
+
         const operationType = Articleform.value.articleid === 0 ? '创建' : '更新';
-        
+
         if (err.response.status === 401) {
           ElMessage.error('未授权访问，请先登录');
         } else if (err.response.status === 403) {
@@ -353,85 +363,89 @@ const handleSave = (markdown) => {
     margin: 0 15px;
     border-radius: 10px;
   }
-  
+
   .article-main-title {
     font-size: 2rem;
     line-height: 1.4;
   }
-  
+
   .article-meta-info {
     flex-direction: column;
     align-items: center;
     gap: 15px;
   }
-  
+
   .meta-item {
     justify-content: center;
     width: 100%;
   }
-  
+
   .meta-select,
   .meta-cascader {
     width: 100%;
     max-width: 300px;
   }
 }
+/* 文章简介区域 */
+.article-summary-section {
+  margin-top: 30px;
+  padding: 0 30px 0 30px;
+}
 
 /* 响应式设计 - 手机 */
 @media (max-width: 480px) {
   .article-save-container {
     padding: 15px 0;
   }
-  
+
   .article-content-wrapper {
     padding: 20px 15px;
     margin: 0 10px;
     border-radius: 8px;
   }
-  
+
   .article-main-title {
     font-size: 1.75rem;
     line-height: 1.5;
   }
-  
+
   .article-meta-info {
     font-size: 0.9rem;
     gap: 12px;
   }
-  
+
   .meta-select,
   .meta-cascader {
     max-width: 100%;
   }
 }
-
 /* 深色模式支持 */
 @media (prefers-color-scheme: dark) {
   .article-save-container {
     background-color: #1a1a1a;
   }
-  
+
   .article-content-wrapper {
     background-color: #2d2d2d;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   }
-  
+
   .article-header-section {
     border-bottom-color: #444;
   }
-  
+
   .article-main-title {
     color: #f0f0f0;
   }
-  
+
   .article-main-title::placeholder {
     color: #666;
   }
-  
+
   .article-meta-info {
     color: #bbb;
   }
-  
+
   .meta-item:hover {
     color: #4a9eff;
   }

src/views/home.vue

@@ -376,7 +376,6 @@ watch(
   margin: 0;
   font-size: 0.95rem;
   display: -webkit-box;
-  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;