优化后台文章页的标签表现

2026-09-04 17:21:45 +08:00
parent 533f31e868
commit 7f5bb974fa
6 changed files with 473 additions and 14 deletions
@@ -1129,3 +1129,144 @@ a.stat-card:hover {
    margin: 0;
 }

+/* ==================== 文章标签选择器 ==================== */
+.tag-select {
+    position: relative;
+}
+
+/* 外观与普通输入框一致，内部容纳标签胶囊与输入框 */
+.tag-select-box {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    min-height: 38px;
+    padding: 4px 8px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    background: #fff;
+    cursor: text;
+}
+
+.tag-select-box:focus-within {
+    border-color: #1890ff;
+}
+
+.tag-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.tag-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    max-width: 200px;
+    padding: 2px 4px 2px 10px;
+    border: 1px solid #91caff;
+    border-radius: 12px;
+    background: #e6f4ff;
+    color: #0958d9;
+    font-size: 13px;
+    line-height: 20px;
+}
+
+.tag-chip-name {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+/* 标签右上角删除按钮 */
+.tag-chip-remove {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: #0958d9;
+    font-size: 14px;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.tag-chip-remove:hover {
+    background: #0958d9;
+    color: #fff;
+}
+
+/* 输入框：覆盖 .form-group input 的默认样式，融入胶囊容器 */
+.tag-select-box .tag-input {
+    flex: 1 1 140px;
+    min-width: 140px;
+    width: auto;
+    padding: 4px 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    font-size: 14px;
+}
+
+.tag-select-box .tag-input:focus {
+    outline: none;
+    border: none;
+}
+
+/* 候选下拉列表 */
+.tag-suggest {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 0;
+    right: 0;
+    z-index: 100;
+    max-height: 240px;
+    overflow-y: auto;
+    padding: 4px 0;
+    border: 1px solid #e5e5e5;
+    border-radius: 6px;
+    background: #fff;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+}
+
+.tag-suggest-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 6px 12px;
+    color: #333;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.tag-suggest-item.active {
+    background: #f0f7ff;
+}
+
+.tag-suggest-name {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.tag-suggest-count {
+    flex-shrink: 0;
+    color: #999;
+    font-size: 12px;
+}
+
+/* 输入内容不存在时，作为新建标签的候选 */
+.tag-suggest-new .tag-suggest-name {
+    color: #1890ff;
+}
+
+.tag-hint {
+    display: block;
+    margin-top: 6px;
+    color: #999;
+    font-size: 12px;
+}
+