root/geo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin-web): prevent source link overflow in article drawer
Frontend CI / Frontend (push) Has been cancelled
Details
Backend CI / Backend (push) Has been cancelled
Details

Browse Source 
将来源链接外层改成 grid wrapper 并固定图标 flex-shrink，
避免长 URL 把图标挤出布局或超过描述列宽。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
liangxu
2026-05-01 10:22:05 +08:00
parent 764abf32ae
commit 0f4310c345
1 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin-web/src/components/ArticleDetailDrawer.vue
+28 -16
View File
@@ -301,21 +301,23 @@ async function copyPublishLink(record: PublishRecord): Promise<void> {
:label="t('article.meta.sourceArticle')"
:span="2"
>
<a
class="article-drawer__source-link"
:href="sourceArticleURL"
target="_blank"
rel="noopener noreferrer"
:title="sourceArticleURL"
>
<LinkOutlined />
<span class="article-drawer__source-copy">
<span v-if="sourceArticleTitle" class="article-drawer__source-title">
{{ sourceArticleTitle }}
<div class="article-drawer__source-wrapper">
<a
class="article-drawer__source-link"
:href="sourceArticleURL"
target="_blank"
rel="noopener noreferrer"
:title="sourceArticleURL"
>
<LinkOutlined class="article-drawer__source-icon" />
<span class="article-drawer__source-copy">
<span v-if="sourceArticleTitle" class="article-drawer__source-title">
{{ sourceArticleTitle }}
</span>
<span class="article-drawer__source-url">{{ sourceArticleURL }}</span>
</span>
<span class="article-drawer__source-url">{{ sourceArticleURL }}</span>
</span>
</a>
</a>
</div>
</a-descriptions-item>
</a-descriptions>
</section>
@@ -459,14 +461,24 @@ async function copyPublishLink(record: PublishRecord): Promise<void> {
margin-top: 24px;
}
.article-drawer__source-wrapper {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
}
.article-drawer__source-link {
display: inline-flex;
max-width: 100%;
display: flex;
width: 100%;
align-items: center;
gap: 6px;
color: #1677ff;
}
.article-drawer__source-icon {
flex-shrink: 0;
}
.article-drawer__source-copy {
display: flex;
min-width: 0;