feat(文章编辑): 添加文章简介输入框并优化样式
- 在文章编辑页面新增简介输入区域 - 移除home.vue中多余的webkit-line-clamp属性 - 统一代码格式和间距
This commit is contained in:
@@ -14,7 +14,7 @@
|
|||||||
</span>
|
</span>
|
||||||
<span class="meta-item status-item">
|
<span class="meta-item status-item">
|
||||||
<i class="el-icon-document"></i>
|
<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 v-for="item in statusoptions" :key="item.value" :label="item.label" :value="item.value">
|
||||||
</el-option>
|
</el-option>
|
||||||
</el-select>
|
</el-select>
|
||||||
@@ -30,11 +30,21 @@
|
|||||||
</el-cascader>
|
</el-cascader>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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>
|
||||||
<div class="editor-container">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -42,9 +52,9 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { reactive, ref } from 'vue';
|
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 '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 type { Article } from '@/types/index.ts';
|
||||||
import { ElMessage } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
||||||
import { useGlobalStore } from '@/store/globalStore'
|
import { useGlobalStore } from '@/store/globalStore'
|
||||||
@@ -376,6 +386,11 @@ const handleSave = (markdown) => {
|
|||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/* 文章简介区域 */
|
||||||
|
.article-summary-section {
|
||||||
|
margin-top: 30px;
|
||||||
|
padding: 0 30px 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
/* 响应式设计 - 手机 */
|
/* 响应式设计 - 手机 */
|
||||||
@media (max-width: 480px) {
|
@media (max-width: 480px) {
|
||||||
@@ -404,7 +419,6 @@ const handleSave = (markdown) => {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 深色模式支持 */
|
/* 深色模式支持 */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
.article-save-container {
|
.article-save-container {
|
||||||
|
|||||||
@@ -376,7 +376,6 @@ watch(
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 3;
|
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
|
|||||||
Reference in New Issue
Block a user