feat: 改进评论系统管理员识别与样式展示
- 后端评论接口增加 isAdmin 字段,不再依赖前端邮箱比对 - 管理后台评论列表支持 Markdown 渲染并添加相应样式 - 前端组件移除 adminEmail 依赖,改用 comment.isAdmin 字段 - 添加 CSS 样式兼容其他框架导入的表情元素 - 更新文档说明部署流程
This commit is contained in:
127
cwd-admin/src/assets/markdown.css
Normal file
127
cwd-admin/src/assets/markdown.css
Normal file
@@ -0,0 +1,127 @@
|
||||
.cell-content-text {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: var(--cwd-text, #24292f);
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.cell-content-text p {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.cell-content-text p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cell-content-text a {
|
||||
color: var(--cwd-primary, #0969da);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cell-content-text a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.cell-content-text h1,
|
||||
.cell-content-text h2,
|
||||
.cell-content-text h3,
|
||||
.cell-content-text h4,
|
||||
.cell-content-text h5,
|
||||
.cell-content-text h6 {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.cell-content-text h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.cell-content-text h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.cell-content-text h3 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.cell-content-text ul,
|
||||
.cell-content-text ol {
|
||||
padding-left: 1.7em;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.cell-content-text li+li {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.cell-content-text code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: 0.9em;
|
||||
background: var(--cwd-bg-secondary, #f6f8fa);
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cell-content-text pre {
|
||||
padding: 12px;
|
||||
margin: 12px 0;
|
||||
overflow-x: auto;
|
||||
background: var(--cwd-bg-secondary, #f6f8fa);
|
||||
border-radius: 6px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.cell-content-text pre code {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cell-content-text blockquote {
|
||||
margin: 8px 0;
|
||||
padding: 0 12px;
|
||||
border-left: 4px solid var(--cwd-border, #d0d7de);
|
||||
color: var(--cwd-text-secondary, #6e7781);
|
||||
}
|
||||
|
||||
.cell-content-text hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--cwd-border-light, #eaeef2);
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.cell-content-text table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.cell-content-text th,
|
||||
.cell-content-text td {
|
||||
border: 1px solid var(--cwd-border, #d0d7de);
|
||||
padding: 6px 12px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cell-content-text th {
|
||||
background: var(--cwd-bg-secondary, #f6f8fa);
|
||||
}
|
||||
|
||||
.cell-content-text img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 兼容其他框架导入的样式 */
|
||||
.cell-content-text .tk-owo-emotion {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
max-width: 40px;
|
||||
}
|
||||
@@ -58,7 +58,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-cell table-cell-content">
|
||||
<div class="cell-content-text">{{ item.contentText }}</div>
|
||||
<div class="cell-content-text" v-html="item.contentHtml"></div>
|
||||
</div>
|
||||
<div class="table-cell table-cell-path">
|
||||
<a
|
||||
@@ -81,9 +81,17 @@
|
||||
>
|
||||
置顶
|
||||
</span>
|
||||
<span class="cell-status cell-likes-number" v-if="item.likes !== 0"
|
||||
<span class="cell-status cell-likes-number" v-if="item.likes !== 0">
|
||||
<svg
|
||||
style="width: 13px"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
>
|
||||
<svg style="width:13px;" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><path d="M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13 1 7.59 6.41C7.22 6.78 7 7.3 7 7.83V19c0 1.1.9 2 2 2h8c.78 0 1.48-.45 1.82-1.11l3.02-7.05c.11-.23.16-.48.16-.74v-2z"></path></svg>
|
||||
<path
|
||||
d="M2 21h4V9H2v12zm20-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13 1 7.59 6.41C7.22 6.78 7 7.3 7 7.83V19c0 1.1.9 2 2 2h8c.78 0 1.48-.45 1.82-1.11l3.02-7.05c.11-.23.16-.48.16-.74v-2z"
|
||||
></path>
|
||||
</svg>
|
||||
{{
|
||||
typeof item.likes === "number" &&
|
||||
Number.isFinite(item.likes) &&
|
||||
@@ -257,6 +265,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import "../assets/markdown.css";
|
||||
import { onMounted, ref, computed, watch, inject } from "vue";
|
||||
import type { Ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
|
||||
Reference in New Issue
Block a user