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')" :label="t('article.meta.sourceArticle')"
:span="2" :span="2"
> >
<a <div class="article-drawer__source-wrapper">
class="article-drawer__source-link" <a
:href="sourceArticleURL" class="article-drawer__source-link"
target="_blank" :href="sourceArticleURL"
rel="noopener noreferrer" target="_blank"
:title="sourceArticleURL" rel="noopener noreferrer"
> :title="sourceArticleURL"
<LinkOutlined /> >
<span class="article-drawer__source-copy"> <LinkOutlined class="article-drawer__source-icon" />
<span v-if="sourceArticleTitle" class="article-drawer__source-title"> <span class="article-drawer__source-copy">
{{ sourceArticleTitle }} <span v-if="sourceArticleTitle" class="article-drawer__source-title">
{{ sourceArticleTitle }}
</span>
<span class="article-drawer__source-url">{{ sourceArticleURL }}</span>
</span> </span>
<span class="article-drawer__source-url">{{ sourceArticleURL }}</span> </a>
</span> </div>
</a>
</a-descriptions-item> </a-descriptions-item>
</a-descriptions> </a-descriptions>
</section> </section>
@@ -459,14 +461,24 @@ async function copyPublishLink(record: PublishRecord): Promise<void> {
margin-top: 24px; margin-top: 24px;
} }
.article-drawer__source-wrapper {
display: grid;
grid-template-columns: minmax(0, 1fr);
width: 100%;
}
.article-drawer__source-link { .article-drawer__source-link {
display: inline-flex; display: flex;
max-width: 100%; width: 100%;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
color: #1677ff; color: #1677ff;
} }
.article-drawer__source-icon {
flex-shrink: 0;
}
.article-drawer__source-copy { .article-drawer__source-copy {
display: flex; display: flex;
min-width: 0; min-width: 0;