fgm
/
cankao-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(richedit): 优化页面布局和样式，修复独家标签宽度问题 

- 移除独家标签的固定宽度设置，使其自适应内容
- 重构表单组件布局，改善代码可读性和维护性
- 调整表格样式，确保内容对齐和显示效果
This commit is contained in:
zzp 2025-11-29 16:01:53 +08:00
parent 9480e8c4d0
commit 6997145f8c
2 changed files with 213 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

285
src/views/pages/richedit/all.vue
View File

@ -7,8 +7,13 @@
<div class="colHeader-right"> <div class="colHeader-right">
<el-space :size="12" class="colHeader-right-1"> <el-space :size="12" class="colHeader-right-1">
<span>标题检索：</span> <span>标题检索：</span>
<el-input v-model="form.keyword" placeholder="输入标题/内容关键字进行搜索（以空格隔开）" class="input-with-select" <el-input
@keyup.enter="handleSearch" style="width: 500px"> v-model="form.keyword"
placeholder="输入标题/内容关键字进行搜索（以空格隔开）"
class="input-with-select"
@keyup.enter="handleSearch"
style="width: 500px"
>
<template #append> <template #append>
<el-button icon="Search" @click="handleSearch" /> <el-button icon="Search" @click="handleSearch" />
</template> </template>
@ -16,15 +21,32 @@
<div> <div>
<span>行业分类：</span> <span>行业分类：</span>
<el-tree-select v-model="form.industry" :data="industryList" multiple <el-tree-select
:render-after-expand="false" filterable show-checkbox style="width: 240px" v-model="form.industry"
@check="handleCheckChange" @clear="handleSearch" node-key="id" collapse-tags :data="industryList"
collapse-tags-tooltip clearable :props="defaultProps"> multiple
:render-after-expand="false"
filterable
show-checkbox
style="width: 240px"
@check="handleCheckChange"
@clear="handleSearch"
node-key="id"
collapse-tags
collapse-tags-tooltip
clearable
:props="defaultProps"
>
</el-tree-select> </el-tree-select>
</div> </div>
<el-input v-model="form.tag" placeholder="匹配多个概念标签(以空格隔开)" class="input-with-select" <el-input
@keyup.enter="handleSearch" style="width: 280px"> v-model="form.tag"
placeholder="匹配多个概念标签(以空格隔开)"
class="input-with-select"
@keyup.enter="handleSearch"
style="width: 280px"
>
<template #append> <template #append>
<el-button icon="Search" @click="handleSearch" /> <el-button icon="Search" @click="handleSearch" />
</template> </template>
@ -33,31 +55,69 @@
<div class="colHeader-right-2" style="gap: 10px"> <div class="colHeader-right-2" style="gap: 10px">
<span>信号规则：</span> <span>信号规则：</span>
<el-select v-model="form.includeRuleIds" clearable placeholder="含任一信号规则" multiple size="large" <el-select
style="width: 180px" filterable @change="signalChange($event, 1)"> v-model="form.includeRuleIds"
<el-option v-for="item in signalRulesList" :key="item.id" :value="item.id" clearable
:disabled="form.excludeRuleIds?.includes(item.id)" :label="item.ruleName"></el-option> placeholder="含任一信号规则"
multiple
size="large"
style="width: 180px"
filterable
@change="signalChange($event, 1)"
>
<el-option
v-for="item in signalRulesList"
:key="item.id"
:value="item.id"
:disabled="form.excludeRuleIds?.includes(item.id)"
:label="item.ruleName"
></el-option>
</el-select> </el-select>
<el-select v-model="form.excludeRuleIds" clearable placeholder="不含任一信号规则" multiple size="large" <el-select
style="width: 180px" filterable @change="signalChange($event, 2)"> v-model="form.excludeRuleIds"
<el-option v-for="item in signalRulesList" :key="item.id" :value="item.id" clearable
:disabled="form.includeRuleIds?.includes(item.id)" :label="item.ruleName"></el-option> placeholder="不含任一信号规则"
multiple
size="large"
style="width: 180px"
filterable
@change="signalChange($event, 2)"
>
<el-option
v-for="item in signalRulesList"
:key="item.id"
:value="item.id"
:disabled="form.includeRuleIds?.includes(item.id)"
:label="item.ruleName"
></el-option>
</el-select> </el-select>
<span>报道时间：</span> <span>报道时间：</span>
<div> <div>
<el-date-picker v-model="daterange" type="daterange" range-separator="-" <el-date-picker
value-format="YYYY-MM-DD" start-placeholder="选择报道时间" end-placeholder="选择报道时间" v-model="daterange"
@change="handleSearch" /> type="daterange"
range-separator="-"
value-format="YYYY-MM-DD"
start-placeholder="选择报道时间"
end-placeholder="选择报道时间"
@change="handleSearch"
/>
</div> </div>
<div style="display: flex; flex-wrap: nowrap; align-items: center"> <div style="display: flex; flex-wrap: nowrap; align-items: center">
<span>评分范围：</span> <span>评分范围：</span>
<el-input type="number" v-model="form.minScore" style="width: 80px" placeholder="最低" <el-input
:min="0" :max="100" @keyup.enter="handleSearch" /> type="number"
v-model="form.minScore"
style="width: 80px"
placeholder="最低"
:min="0"
:max="100"
@keyup.enter="handleSearch"
/>
<i style="color: #ccc"> - </i> <i style="color: #ccc"> - </i>
<el-input type="number" v-model="form.maxScore" style="width: 140px" placeholder="最高" <el-input type="number" v-model="form.maxScore" style="width: 140px" placeholder="最高" :min="0" :max="100" @keyup.enter="handleSearch">
:min="0" :max="100" @keyup.enter="handleSearch">
<template #append> <template #append>
<el-button icon="Search" @click="handleSearch" /> <el-button icon="Search" @click="handleSearch" />
</template> </template>
@ -67,27 +127,60 @@
<div class="colHeader-right-2" style="gap: 10px"> <div class="colHeader-right-2" style="gap: 10px">
<span>媒体来源：</span> <span>媒体来源：</span>
<el-select-v2 v-model="form.mediaId" :options="tagSourceList" clearable placeholder="媒体来源" <el-select-v2
size="large" style="width: 180px" filterable @change="handleSearch" /> v-model="form.mediaId"
:options="tagSourceList"
clearable
placeholder="媒体来源"
size="large"
style="width: 180px"
filterable
@change="handleSearch"
/>
<span>企业检索：</span> <span>企业检索：</span>
<el-select class="search-input" popper-class="option-box" v-model="form.companyName" clearable <el-select
filterable remote reserve-keyword remote-show-suffix default-first-option class="search-input"
:suffix-icon="Search" placeholder="输入企业名称/企业简称/证券编码进行搜索" :loading="loading" popper-class="option-box"
:remote-method="getCompany" @change="getData" style="width: 180px"> v-model="form.companyName"
<el-option v-for="item in companyList" :key="item.companyName" :label="item.companyName" clearable
:value="item.companyName"> </el-option> filterable
remote
reserve-keyword
remote-show-suffix
default-first-option
:suffix-icon="Search"
placeholder="输入企业名称/企业简称/证券编码进行搜索"
:loading="loading"
:remote-method="getCompany"
@change="getData"
style="width: 180px"
>
<el-option v-for="item in companyList" :key="item.companyName" :label="item.companyName" :value="item.companyName"> </el-option>
</el-select> </el-select>
<span>独家资讯：</span> <span>独家资讯：</span>
<el-select v-model="form.exclusive" clearable placeholder="是否独家搜索" size="large" <el-select
style="width: 180px" filterable @change="handleSearch"> v-model="form.exclusive"
clearable
placeholder="是否独家搜索"
size="large"
style="width: 180px"
filterable
@change="handleSearch"
>
<el-option :value="1" label="是"></el-option> <el-option :value="1" label="是"></el-option>
<el-option :value="0" label="否"></el-option> <el-option :value="0" label="否"></el-option>
</el-select> </el-select>
<span>删除状态：</span> <span>删除状态：</span>
<el-select clearable v-model="form.deleted" size="large" style="width: 150px; margin-left: 10px" <el-select
placeholder="筛选删除状态" @change="handleSearch"> clearable
v-model="form.deleted"
size="large"
style="width: 150px; margin-left: 10px"
placeholder="筛选删除状态"
@change="handleSearch"
>
<el-option :value="1" label="已删除资讯"></el-option> <el-option :value="1" label="已删除资讯"></el-option>
<el-option :value="0" label="未删除资讯"></el-option> <el-option :value="0" label="未删除资讯"></el-option>
</el-select> </el-select>
@ -98,16 +191,32 @@
</div> </div>
</div> </div>
<tableComponents ref="tableRef" :tableData="tableData" style="margin-top: 20px" @sortChange="sortChange" <tableComponents
:tableLoading="tableLoading" @currentChange="currentChange" @sizeChange="sizeChange"> ref="tableRef"
:tableData="tableData"
style="margin-top: 20px"
@sortChange="sortChange"
:tableLoading="tableLoading"
@currentChange="currentChange"
@sizeChange="sizeChange"
>
<el-table-column prop="title" label="标题" align="left" width="380"> <el-table-column prop="title" label="标题" align="left" width="380">
<template v-slot="scope"> <template v-slot="scope">
<div style="display: flex; flex-direction: column; gap: 5px; padding: 10px 0"> <div style="margin-right: 15px" v-if="scope.row.clusterNews">{{ scope.row.clusterNews ? scope.row.clusterNews.length : 0 }}</div>
<div>
<span style="color: red; font-weight: bold; margin-right: 3px" <div
v-if="scope.row.exclusive == 1">[独家]</span> style="display: flex; flex-direction: column; justify-content: flex-start; align-items: start; gap: 5px; padding: 10px 0; margin-top: 8px"
<span class="cursor-pointer" @click="goDetail(1, scope.row, true)" >
v-html="scope.row.title"></span> <div
v-if="scope.row.isChild && scope.row.clusterIndex == 0"
style="font-size: 14px; font-weight: bold; margin-left: -20px; margin-bottom: 30px"
>
聚类资讯（{{ scope.row.childLength }}条）
</div>
<div style="display: inline-block">
<span style="color: red; font-weight: bold; margin-right: 3px" v-if="scope.row.exclusive == 1">[独家]</span>
<span class="cursor-pointer" @click="goDetail(1, scope.row, true)" v-html="scope.row.title"></span>
</div> </div>
<div class="labels"> <div class="labels">
@ -129,12 +238,10 @@
</div> </div>
</div> --> </div> -->
<div style="background-color: #eee6cd" class="label_item" <div style="background-color: #eee6cd" class="label_item" v-if="scope.row.conceptLabels && scope.row.conceptLabels.length > 0">
v-if="scope.row.conceptLabels && scope.row.conceptLabels.length > 0">
{{ scope.row.conceptLabels[0] }} {{ scope.row.conceptLabels[0] }}
</div> </div>
<div style="background-color: #cfdcf3" class="label_item" <div style="background-color: #cfdcf3" class="label_item" v-if="scope.row.industryLabels && scope.row.industryLabels.length > 0">
v-if="scope.row.industryLabels && scope.row.industryLabels.length > 0">
{{ scope.row.industryLabels[0] }} {{ scope.row.industryLabels[0] }}
</div> </div>
</div> </div>
@ -183,8 +290,7 @@
<template v-slot="scope"> <template v-slot="scope">
<!-- 新闻状态 0-草稿 1-未发布 2-已发布 --> <!-- 新闻状态 0-草稿 1-未发布 2-已发布 -->
<div class="r_point" :style="{ color: '#000' }"> <div class="r_point" :style="{ color: '#000' }">
<div class="point" :style="{ backgroundColor: scope.row.status == 2 ? '#52C41A' : '#D9D9D9' }"> <div class="point" :style="{ backgroundColor: scope.row.status == 2 ? '#52C41A' : '#D9D9D9' }"></div>
</div>
<text v-if="scope.row.status == 0" style="color: rgba(0, 0, 0, 0.65)">草稿</text> <text v-if="scope.row.status == 0" style="color: rgba(0, 0, 0, 0.65)">草稿</text>
<text v-if="scope.row.status == 1" style="color: rgba(0, 0, 0, 0.65)">未发布</text> <text v-if="scope.row.status == 1" style="color: rgba(0, 0, 0, 0.65)">未发布</text>
<text v-if="scope.row.status == 2" style="color: rgba(0, 0, 0, 0.65)">已发布</text> <text v-if="scope.row.status == 2" style="color: rgba(0, 0, 0, 0.65)">已发布</text>
@ -228,8 +334,7 @@
<el-table-column prop="score" label="资讯评分" sortable="custom" align="center" width="100"> <el-table-column prop="score" label="资讯评分" sortable="custom" align="center" width="100">
<template v-slot="scope"> <template v-slot="scope">
<div @click="getScoreDetail(scope.row.id)" <div @click="getScoreDetail(scope.row.id)" :class="[{ 'score-active': isAdmin && curScore === scope.row.id }, { 'score-hover': isAdmin }]">
:class="[{ 'score-active': isAdmin && curScore === scope.row.id }, { 'score-hover': isAdmin }]">
{{ scope.row.score }} {{ scope.row.score }}
</div> </div>
</template> </template>
@ -238,16 +343,14 @@
<el-table-column prop="updateTime" label="状态变动时间" sortable="custom" align="center"> <el-table-column prop="updateTime" label="状态变动时间" sortable="custom" align="center">
<template v-slot="scope"> <template v-slot="scope">
<div> <div>
<div>{{ formatTime(scope.row.updateTime) == formatTime(scope.row.createTime) ? <div>{{ formatTime(scope.row.updateTime) == formatTime(scope.row.createTime) ? scope.row.publishTime : scope.row.updateTime }}</div>
scope.row.publishTime : scope.row.updateTime }}</div>
</div> </div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" width="250" fixed="right"> <el-table-column label="操作" align="center" width="100" fixed="right">
<template v-slot="scope"> <template v-slot="scope">
<div class="option"> <div class="option">
<el-button type="text" :disabled="scope.row.status != 2" class="copyBtn" <el-button type="text" :disabled="scope.row.status != 2" class="copyBtn" @click="copyUrl(scope.row)">复制</el-button>
@click="copyUrl(scope.row)">复制</el-button>
<!-- <!--
<el-button v-if="scope.row.deleted" type="text" style="margin-left: 10px" <el-button v-if="scope.row.deleted" type="text" style="margin-left: 10px"
@click="doRecoverFn(scope.row)"> @click="doRecoverFn(scope.row)">
@ -283,9 +386,16 @@
</tableComponents> </tableComponents>
<keep-alive> <keep-alive>
<DetailDrawer v-model="drawer" :data="newsData" :readOnly="readOnly" :type="newstype" <DetailDrawer
@handleEditStatus="handleEditStatus" @doNewsPublishFn="doNewsPublishFn" @doDeleteNewsFn="doDeleteNewsFn" v-model="drawer"
@getData="getData" /> :data="newsData"
:readOnly="readOnly"
:type="newstype"
@handleEditStatus="handleEditStatus"
@doNewsPublishFn="doNewsPublishFn"
@doDeleteNewsFn="doDeleteNewsFn"
@getData="getData"
/>
</keep-alive> </keep-alive>
<el-dialog v-model="isScoreShow" title="资讯评分详情" width="680" center> <el-dialog v-model="isScoreShow" title="资讯评分详情" width="680" center>
@ -296,8 +406,9 @@
<el-row>[{{ scoreDetail.industryLabel.join(',') }}]</el-row> <el-row>[{{ scoreDetail.industryLabel.join(',') }}]</el-row>
<el-row justify="space-between"> <el-row justify="space-between">
<el-col :span="12">置信度：[{{ scoreDetail.industryConfidence.join(',') }}]</el-col> <el-col :span="12">置信度：[{{ scoreDetail.industryConfidence.join(',') }}]</el-col>
<el-col :span="12" style="text-align: right">分类评分：<span style="color: #36a4f8">[{{ <el-col :span="12" style="text-align: right"
scoreDetail.industryScore.join(',') }}]</span></el-col> >分类评分：<span style="color: #36a4f8">[{{ scoreDetail.industryScore.join(',') }}]</span></el-col
>
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row>
@ -307,8 +418,9 @@
<el-row>[{{ scoreDetail.conceptLabel.join(',') }}]</el-row> <el-row>[{{ scoreDetail.conceptLabel.join(',') }}]</el-row>
<el-row justify="space-between"> <el-row justify="space-between">
<el-col :span="12">置信度：[{{ scoreDetail.conceptConfidence.join(',') }}]</el-col> <el-col :span="12">置信度：[{{ scoreDetail.conceptConfidence.join(',') }}]</el-col>
<el-col :span="12" style="text-align: right">概念评分：<span style="color: #36a4f8">[{{ <el-col :span="12" style="text-align: right"
scoreDetail.conceptScore.join(',') }}]</span></el-col> >概念评分：<span style="color: #36a4f8">[{{ scoreDetail.conceptScore.join(',') }}]</span></el-col
>
</el-row> </el-row>
</el-col> </el-col>
</el-row> </el-row>
@ -318,20 +430,21 @@
</el-row> </el-row>
<el-row class="score-detail-row"> <el-row class="score-detail-row">
<el-col :span="12">媒体影响力</el-col> <el-col :span="12">媒体影响力</el-col>
<el-col :span="12" style="text-align: right">评分：<span style="color: #36a4f8">{{ <el-col :span="12" style="text-align: right"
scoreDetail.sourceImpact >评分：<span style="color: #36a4f8">{{ scoreDetail.sourceImpact }}</span></el-col
}}</span></el-col> >
</el-row> </el-row>
<el-row class="score-detail-row"> <el-row class="score-detail-row">
<el-col :span="12">中国股市相关性</el-col> <el-col :span="12">中国股市相关性</el-col>
<el-col :span="12" style="text-align: right">置信度：<span style="color: #36a4f8">{{ <el-col :span="12" style="text-align: right"
scoreDetail.chinaFactor >置信度：<span style="color: #36a4f8">{{ scoreDetail.chinaFactor }}</span></el-col
}}</span></el-col> >
</el-row> </el-row>
<el-row class="score-detail-row"> <el-row class="score-detail-row">
<el-col :span="12">资讯质量</el-col> <el-col :span="12">资讯质量</el-col>
<el-col :span="12" style="text-align: right">评分：<span style="color: #36a4f8">{{ <el-col :span="12" style="text-align: right"
scoreDetail.publicOpinionScore }}</span></el-col> >评分：<span style="color: #36a4f8">{{ scoreDetail.publicOpinionScore }}</span></el-col
>
</el-row> </el-row>
<el-row class="score-detail-row rule"> <el-row class="score-detail-row rule">
<el-col :span="24">*计算规则</el-col> <el-col :span="24">*计算规则</el-col>
@ -339,9 +452,7 @@
</el-row> </el-row>
<el-row class="score-detail-row" justify="space-between"> <el-row class="score-detail-row" justify="space-between">
<el-col :span="12">资讯评分</el-col> <el-col :span="12">资讯评分</el-col>
<el-col :span="12" style="color: #36a4f8; text-align: right; font-weight: 700">{{ <el-col :span="12" style="color: #36a4f8; text-align: right; font-weight: 700">{{ scoreDetail.newsScore }}</el-col>
scoreDetail.newsScore
}}</el-col>
</el-row> </el-row>
</div> </div>
<template #footer> <template #footer>
@ -497,20 +608,12 @@ async function getData() {
}); });
item.title = highlightTitle(item.title, form.value.keyword); item.title = highlightTitle(item.title, form.value.keyword);
// item.companys = [ if (item.clusterNews && item.clusterNews?.length > 0) {
// "英伟达", item.clusterNews.forEach((clusterItem, clusterIndex) => {
// "微软", clusterItem.childLength = item.clusterNews?.length || 0;
// ] clusterItem.clusterIndex = clusterIndex;
});
// item.labels = [ }
// "新科技-人工智能",
// "新科技-人工智能",
// ]
// item.signalNames = [
// "信号规则1",
// "信号规则2",
// ]
}); });
} }
} catch (error) { } catch (error) {
@ -905,6 +1008,7 @@ onMounted(async () => {
text-align: center; text-align: center;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100%;
:deep(.el-button--large) { :deep(.el-button--large) {
padding: 0; padding: 0;
@ -1031,4 +1135,9 @@ onMounted(async () => {
gap: 5px; gap: 5px;
} }
} }
:deep(.el-table td.el-table__cell div) {
display: flex;
align-items: center;
}
</style> </style>

2
src/views/pages/richedit/index.vue
View File

@ -344,7 +344,7 @@
聚类资讯（{{ scope.row.childLength }}条） 聚类资讯（{{ scope.row.childLength }}条）
</div> </div>
<div style="display: inline-block"> <div style="display: inline-block">
<span style="color: red; font-weight: bold; margin-right: 3px; width: 60px" v-if="scope.row.exclusive == 1">[独家]</span> <span style="color: red; font-weight: bold; margin-right: 3px" v-if="scope.row.exclusive == 1">[独家]</span>
<span class="cursor-pointer" @click="goDetail(1, scope.row, true)" v-html="scope.row.title"></span> <span class="cursor-pointer" @click="goDetail(1, scope.row, true)" v-html="scope.row.title"></span>
</div> </div>