Skip to content

C
company_app
提交 e666a99a 作者: 施汉文
操作

refactor: 优化多个页面UI样式与举报弹窗功能

上级 5629faa0
正在显示 包含 163 行增加 和 24 行删除
.trae/rules/git-commit-message.md 0 → 100644
---
alwaysApply: true
scene: git_message
---
在此处编写规则，自定义 AI 生成提交信息的风格。
必须简洁明了，一眼能看出完成或修改或优化的内容，不要写详细描述，不要超过两行。
\ No newline at end of file
src/components/textEditor.vue
......@@ -2,6 +2,7 @@
<!-- 简单版的图文编辑器 可以上传 截图上传图片 能实现简单的图文编辑功能 -->
<div class="textEditor">
<div
v-if="showViewImage"
class="rowFlex columnCenter textEditorTitle"
@click.stop="watchImage"
>
......@@ -34,7 +35,9 @@
title="查看大图"
append-to-body
center
top="80%"
width="600px"
top="0"
custom-class="watchImageDialog"
:visible.sync="showScoleImage"
>
<div class="showScoleImageContent columnFlex allCenter" v-html="remark"></div>
......@@ -46,7 +49,24 @@
import { base64toFile } from '@/utils/index'
export default {
name: 'textEditor',
props: ['remark', 'contenteditable', 'domid'], // remark 原来的图文内容 contenteditable 是否可编辑 domid 编辑器的 DomId resultReamrk 方法吐出最后的编辑好的内容
props: {
remark: {
type: String,
default: ''
},
contenteditable: {
type: Boolean,
default: false
},
domid: {
type: String,
default: ''
},
showViewImage: {
type: Boolean,
default: true
}
}, // remark 原来的图文内容 contenteditable 是否可编辑 domid 编辑器的 DomId resultReamrk 方法吐出最后的编辑好的内容
data() {
return {
srcList: [],
......@@ -59,7 +79,9 @@
mounted() {
this.$nextTick(() => {
this.chatMessage = document.getElementById(`${this.domid}`)
this.remark && this.remark.length > 0 && this.contenteditable ? this.chatMessage.innerHTML = this.remark : ''
if (this.remark && this.remark.length > 0 && this.contenteditable && this.chatMessage) {
this.chatMessage.innerHTML = this.remark
}
})
},
methods: {
......@@ -71,9 +93,17 @@
},
async watchImage() {
if (this.remark.trim().length > 0) {
if (!this.chatMessage) {
this.chatMessage = document.getElementById(`${this.domid}`)
}
if (this.chatMessage) {
this.chatMessage.innerHTML = this.remark
}
this.srcList = []
const imgList = this.chatMessage.querySelectorAll('img')
// 使用临时 div 来解析图片，而不依赖 DOM 元素
const tempDiv = document.createElement('div')
tempDiv.innerHTML = this.remark
const imgList = tempDiv.querySelectorAll('img')
if (imgList && imgList.length > 0) {
for (let index = 0; index < imgList.length; index++) {
this.srcList.push(imgList[index].src)
......@@ -171,6 +201,18 @@
margin-top:10px;
margin-right: 10px;
}
.watchImageDialog {
position: absolute;
top: 50%;
left: 50%;
margin: 0 !important;
transform: translate(-50%, -50%);
max-width: 90vw;
}
.watchImageDialog .el-dialog__body {
max-height: 70vh;
overflow-y: auto;
}
.showScoleImageContent{
width: 100%;
overflow: auto;
......@@ -178,7 +220,7 @@
}
.showScoleImageContent img{
max-width: 80%;
max-width: 100%;
margin-bottom: 20px;
}
</style>
src/views/ViolationRecord.vue
<template>
<div class="violationRecord">
<el-form v-loading="loading" class="violationRecordContent" label-width="90px">
<div class="flex justify-end">
<el-button type="primary" size="small" @click="reportPopupShow = true">举报</el-button>
</div>
<div v-if="violationList.length > 0">
<div v-for="(item, index) in violationList" :key="index" class="contentItem">
<el-form-item label="违规时间:">
......@@ -206,7 +208,7 @@ export default {
.violationRecordContent {
width: 100%;
padding: 20px;
padding: 0 20px;
height: auto;
}
......
src/views/popup/reportPopup/index.vue
......@@ -129,12 +129,21 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="详情" prop="remark" class="detail-form-item">
<el-form-item prop="remark" class="detail-form-item">
<div slot="label" class="detail-label">
<span>详情</span>
<span class="view-image-btn" @mousedown.stop.prevent="handleViewImage">
<i class="el-icon-view"></i>
<span>查看大图</span>
</span>
</div>
<textEditor
ref="textEditorRef"
:remark.sync="reportForm.remark"
domid="report_content"
class="report-editor"
:contenteditable="true"
:show-view-image="false"
@resultReamrk="resultReamrk"
/>
</el-form-item>
......@@ -579,6 +588,15 @@
resultReamrk(text) {
// console.log(text, '最后编辑器的内容')
},
handleViewImage() {
console.log('handleViewImage clicked')
console.log('textEditorRef:', this.$refs.textEditorRef)
if (this.$refs.textEditorRef && this.$refs.textEditorRef.watchImage) {
this.$refs.textEditorRef.watchImage()
} else {
console.log('textEditorRef or watchImage not found')
}
},
/**
* 根据 eco_user_list 同步提交字段 eco_user（全部姓名用顿号拼接）
*/
......@@ -1007,9 +1025,39 @@
}
}
.detail-form-item {
position: relative;
}
::v-deep .detail-form-item {
.el-form-item__label {
padding-bottom: 8px;
width: 100%;
}
}
.detail-label {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
gap: 12px;
}
.view-image-btn {
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
color: #00bf8a;
font-family: PingFang SC, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 22px;
user-select: none;
.el-icon-view {
font-size: 14px;
}
}
......
src/views/roleInfo.vue
......@@ -68,30 +68,69 @@ export default {
height: 100%;
.el-tabs__header {
margin: 0;
padding: 0 15px;
margin: 0px 15px 10px 15px !important;
padding: 2px !important;
background: #F5F6F7 !important;
border-radius: 4px !important;
box-sizing: border-box !important;
height: auto !important;
overflow: visible !important;
border: none !important;
}
.el-tabs__nav-wrap {
overflow: visible !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
&::after {
display: none !important;
}
}
.el-tabs__nav {
width: 100% !important;
display: flex !important;
border: none !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
gap: 2px !important;
}
.el-tabs__item {
height: 40px;
line-height: 40px;
font-size: 16px;
color: #333333;
flex: 1 !important;
height: 22px !important;
line-height: 22px !important;
padding: 0 !important;
margin: 0 !important;
font-family: 'PingFang SC', sans-serif !important;
font-size: 13px !important;
font-weight: 400 !important;
color: #6D7176 !important;
text-align: center !important;
border-radius: 2px !important;
border: none !important;
transition: all 0.2s !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: unset !important;
&.is-active {
color: #3491fa;
}
background: #FFFFFF !important;
color: #131920 !important;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05) !important;
}
.el-tabs__active-bar {
background-color: #3491fa;
height: 3px;
border-radius: 1.5px;
&:first-child,
&:last-child {
margin: 0 !important;
}
}
.el-tabs__nav-wrap::after {
height: 1px;
background-color: #e4e7ed;
.el-tabs__active-bar {
display: none !important;
}
.el-tab-pane {
......@@ -100,8 +139,8 @@ export default {
}
.el-tabs__content {
height: calc(100% - 40px);
padding: 0 5px 5px;
height: calc(100% - 46px);
padding: 0;
}
}
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论