feat: 增强编辑器链接对话框并统一图片插入选择器
链接支持网址/文字与站内搜索，新标签由全站设置控制；文章与评论共用已上传图片选择器。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -10956,8 +10956,270 @@ button.profile-stat:hover strong {
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
|
||||
.article-link-dialog {
|
||||
width: min(520px, 92vw);
|
||||
max-width: min(520px, 92vw);
|
||||
max-height: min(85vh, 720px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.article-link-dialog__section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 4px 0 16px;
|
||||
}
|
||||
.article-link-dialog__section + .article-link-dialog__section {
|
||||
border-top: 1px solid var(--j13-border-light);
|
||||
padding-top: 16px;
|
||||
}
|
||||
.article-link-dialog__section-title {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
.article-link-dialog__field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
.article-link-dialog__field label {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
.article-link-dialog__hits {
|
||||
position: relative;
|
||||
border: 1px solid var(--j13-border);
|
||||
border-radius: 10px;
|
||||
background: var(--j13-bg-block-muted, var(--color-fill-3));
|
||||
overflow: hidden;
|
||||
}
|
||||
.article-link-dialog__hits-hint {
|
||||
margin: 0;
|
||||
padding: 10px 12px 6px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
.article-link-dialog__hit-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 0 6px;
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.article-link-dialog__hit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 9px 12px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-1);
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.article-link-dialog__hit:hover {
|
||||
background: var(--j13-bg-surface, #fff);
|
||||
}
|
||||
.article-link-dialog__hit.is-selected {
|
||||
background: var(--j13-green-bg);
|
||||
}
|
||||
.article-link-dialog__hit-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.article-link-dialog__hit-kind {
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
color: var(--color-text-3);
|
||||
padding: 2px 7px;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--j13-border) 55%, transparent);
|
||||
}
|
||||
.article-link-dialog__hits-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 88px;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
.article-link-dialog__hits-loading {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 12px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
.article-link-dialog__spin {
|
||||
animation: article-link-dialog-spin 0.8s linear infinite;
|
||||
}
|
||||
@keyframes article-link-dialog-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.article-link-dialog__footer {
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.article-link-dialog__remove {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.article-image-picker {
|
||||
width: min(520px, 92vw);
|
||||
max-width: min(520px, 92vw);
|
||||
}
|
||||
.article-image-picker__tabs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 4px;
|
||||
margin: 4px 0 12px;
|
||||
padding: 4px;
|
||||
border: 1px solid var(--j13-border);
|
||||
border-radius: 10px;
|
||||
background: var(--j13-bg-block-muted, var(--color-fill-3));
|
||||
}
|
||||
.article-image-picker__tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
min-height: 36px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--color-text-2);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
|
||||
}
|
||||
.article-image-picker__tab:hover:not(:disabled) {
|
||||
background: var(--j13-bg-surface, #fff);
|
||||
border-color: color-mix(in srgb, var(--j13-green) 22%, var(--j13-border));
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
.article-image-picker__tab.is-active {
|
||||
background: var(--j13-bg-surface, #fff);
|
||||
border-color: color-mix(in srgb, var(--j13-green) 40%, transparent);
|
||||
color: var(--j13-green-hover, var(--j13-green));
|
||||
font-weight: 600;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px color-mix(in srgb, var(--j13-green) 18%, transparent);
|
||||
}
|
||||
.article-image-picker__tab:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.article-image-picker__panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-height: 160px;
|
||||
}
|
||||
.article-image-picker__drop {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 180px;
|
||||
padding: 24px 16px;
|
||||
border: 1.5px dashed var(--j13-border);
|
||||
border-radius: 10px;
|
||||
background: var(--j13-bg-block-muted, var(--color-fill-3));
|
||||
color: var(--color-text-2);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
}
|
||||
.article-image-picker__drop p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
.article-image-picker__drop span {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
.article-image-picker__drop.is-dragover {
|
||||
border-color: var(--j13-green);
|
||||
background: var(--j13-green-bg);
|
||||
}
|
||||
.article-image-picker__drop.is-busy {
|
||||
cursor: wait;
|
||||
pointer-events: none;
|
||||
}
|
||||
.article-image-picker__hint {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-3);
|
||||
}
|
||||
.article-image-picker__footer {
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.article-image-picker__selected-count {
|
||||
margin-right: auto;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
.article-image-picker__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
max-height: 280px;
|
||||
overflow-y: auto;
|
||||
padding: 2px;
|
||||
}
|
||||
.article-image-picker__thumb {
|
||||
aspect-ratio: 1;
|
||||
padding: 0;
|
||||
border: 2px solid var(--j13-border);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: var(--j13-bg-block-muted, var(--color-fill-3));
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.article-image-picker__thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
.article-image-picker__thumb.is-selected {
|
||||
border-color: var(--j13-green);
|
||||
box-shadow: 0 0 0 1px var(--j13-green);
|
||||
}
|
||||
.article-image-picker__empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
min-height: 140px;
|
||||
color: var(--color-text-3);
|
||||
font-size: 13px;
|
||||
}
|
||||
.article-image-picker__more {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.article-image-picker__spin {
|
||||
animation: article-image-picker-spin 0.8s linear infinite;
|
||||
}
|
||||
@keyframes article-image-picker-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 代码块插入弹窗 */
|
||||
|
||||
Reference in New Issue
Block a user