diff --git a/open-isle-cli/src/components/BaseTimeline.vue b/open-isle-cli/src/components/BaseTimeline.vue index 847e55398..493420f2b 100644 --- a/open-isle-cli/src/components/BaseTimeline.vue +++ b/open-isle-cli/src/components/BaseTimeline.vue @@ -88,6 +88,7 @@ export default { .timeline-content { flex: 1; + width: calc(100% - 32px); } @media (max-width: 768px) { diff --git a/open-isle-cli/src/utils/markdown.js b/open-isle-cli/src/utils/markdown.js index 774b60d1f..c0cd7291d 100644 --- a/open-isle-cli/src/utils/markdown.js +++ b/open-isle-cli/src/utils/markdown.js @@ -16,3 +16,12 @@ export function stripMarkdown(text) { el.innerHTML = html return el.textContent || el.innerText || '' } + +export function stripMarkdownLength(text, length) { + const plain = stripMarkdown(text) + if (!length || plain.length <= length) { + return plain + } + // 截断并加省略号 + return plain.slice(0, length) + '...' +} \ No newline at end of file diff --git a/open-isle-cli/src/views/ProfileView.vue b/open-isle-cli/src/views/ProfileView.vue index 247aac850..f3d585ab8 100644 --- a/open-isle-cli/src/views/ProfileView.vue +++ b/open-isle-cli/src/views/ProfileView.vue @@ -94,7 +94,7 @@ 下对 - {{ item.comment.parentComment.content }} + {{ stripMarkdownLength(item.comment.parentComment.content, 200) }} 回复了 @@ -103,7 +103,7 @@ - {{ item.comment.content }} + {{ stripMarkdownLength(item.comment.content, 200) }}
{{ formatDate(item.comment.createdAt) }} @@ -178,7 +178,7 @@ 下评论了 - {{ item.comment.content }} + {{ stripMarkdownLength(item.comment.content, 200) }}
{{ formatDate(item.createdAt) }}
@@ -240,7 +240,7 @@ import { getToken, authState } from '../utils/auth' import BaseTimeline from '../components/BaseTimeline.vue' import UserList from '../components/UserList.vue' import BasePlaceholder from '../components/BasePlaceholder.vue' -import { stripMarkdown } from '../utils/markdown' +import { stripMarkdown, stripMarkdownLength } from '../utils/markdown' import TimeManager from '../utils/time' import { hatch } from 'ldrs' hatch.register() @@ -440,6 +440,7 @@ export default { followTab, formatDate, stripMarkdown, + stripMarkdownLength, loadTimeline, loadFollow, loadSummary, @@ -464,6 +465,7 @@ export default { background-color: var(--background-color); height: calc(100vh - var(--header-height)); overflow-y: auto; + overflow-x: hidden; } .profile-page-header { @@ -535,6 +537,8 @@ export default { gap: 20px; border-top: 1px solid var(--normal-border-color); border-bottom: 1px solid var(--normal-border-color); + scrollbar-width: none; + overflow-x: auto; } .profile-info-item { @@ -543,6 +547,7 @@ export default { gap: 5px; align-items: center; padding: 10px 0; + white-space: nowrap; } .profile-info-item-label { @@ -559,10 +564,13 @@ export default { flex-direction: row; padding: 0 20px; border-bottom: 1px solid var(--normal-border-color); -} + scrollbar-width: none; + overflow-x: auto; + } .profile-tabs-item { display: flex; + flex: 0 0 auto; flex-direction: row; gap: 10px; align-items: center; @@ -570,6 +578,7 @@ export default { padding: 10px 0; width: 200px; cursor: pointer; + white-space: nowrap; } .profile-tabs-item.selected { @@ -586,6 +595,7 @@ export default { .summary-title { font-size: 20px; + margin-bottom: 10px; font-weight: bold; } @@ -596,7 +606,9 @@ export default { .total-summary-content { display: flex; flex-direction: row; - gap: 20px; + flex-wrap: wrap; + row-gap: 0px; + column-gap: 20px; } .total-summary-item { @@ -604,7 +616,6 @@ export default { flex-direction: row; gap: 10px; align-items: center; - padding: 10px 0; } .total-summary-item-label { @@ -697,4 +708,33 @@ export default { .follow-list { padding-left: 20px; } + +@media (max-width: 768px) { + .profile-page { + width: 100vw; + } + + .profile-page-header-avatar-img { + width: 100px; + height: 100px; + } + + .profile-tabs-item { + width: 100px; + } + + .summary-divider { + flex-direction: column; + } + + .hot-reply, + .hot-topic, + .hot-tag { + width: 100%; + } + + .profile-timeline { + width: calc(100vw - 40px); + } +}