Skip to content

Commit 154e069

Browse files
author
yqz
committed
feat：优化前端UI
1 parent 29b9d69 commit 154e069

4 files changed

Lines changed: 701 additions & 350 deletions

File tree

‎vue/src/assets/blog.css‎

Lines changed: 0 additions & 252 deletions
Original file line numberDiff line numberDiff line change
@@ -1396,258 +1396,6 @@ body {
13961396
}
13971397
}
13981398

1399-
/* ---- media folder tree (附件管理) ---- */
1400-
1401-
.media-tree-sidebar {
1402-
display: flex;
1403-
flex-direction: column;
1404-
height: 100%;
1405-
min-height: 0;
1406-
}
1407-
1408-
.media-tree-head {
1409-
display: flex;
1410-
align-items: center;
1411-
justify-content: space-between;
1412-
padding: 16px 14px 8px;
1413-
}
1414-
1415-
.media-tree-title {
1416-
font-size: 12px;
1417-
font-weight: 700;
1418-
text-transform: uppercase;
1419-
letter-spacing: 0.5px;
1420-
color: var(--console-muted, var(--muted));
1421-
}
1422-
1423-
.media-tree-add-btn {
1424-
border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
1425-
background: transparent;
1426-
color: var(--console-muted, var(--muted));
1427-
cursor: pointer;
1428-
width: 24px;
1429-
height: 24px;
1430-
border-radius: 4px;
1431-
font-size: 16px;
1432-
line-height: 1;
1433-
display: flex;
1434-
align-items: center;
1435-
justify-content: center;
1436-
padding: 0;
1437-
}
1438-
1439-
.media-tree-add-btn:hover {
1440-
border-color: var(--primary, #2563eb);
1441-
color: var(--primary, #2563eb);
1442-
}
1443-
1444-
.media-tree-body {
1445-
flex: 1 1 auto;
1446-
min-height: 0;
1447-
overflow: auto;
1448-
padding: 4px 8px 12px;
1449-
display: flex;
1450-
flex-direction: column;
1451-
gap: 2px;
1452-
}
1453-
1454-
.media-tree-hint {
1455-
padding: 16px 10px;
1456-
font-size: 13px;
1457-
color: var(--console-muted, var(--muted));
1458-
}
1459-
1460-
.media-tree-root-btn {
1461-
display: flex;
1462-
align-items: center;
1463-
gap: 8px;
1464-
width: 100%;
1465-
border: none;
1466-
background: transparent;
1467-
color: var(--text);
1468-
cursor: pointer;
1469-
padding: 9px 12px;
1470-
border-radius: 6px;
1471-
font-size: 13px;
1472-
font-weight: 600;
1473-
text-align: left;
1474-
}
1475-
1476-
.media-tree-root-btn:hover {
1477-
background: rgba(74, 163, 255, 0.08);
1478-
}
1479-
1480-
.media-tree-root-btn.active {
1481-
background: var(--primary, #2563eb);
1482-
color: #fff;
1483-
}
1484-
1485-
.media-tree-root-btn.active .media-tree-group-count {
1486-
color: rgba(255, 255, 255, 0.7);
1487-
}
1488-
1489-
.media-tree-group {
1490-
display: flex;
1491-
flex-direction: column;
1492-
}
1493-
1494-
.media-tree-group-head {
1495-
display: flex;
1496-
align-items: center;
1497-
gap: 6px;
1498-
width: 100%;
1499-
border: none;
1500-
background: transparent;
1501-
color: var(--text);
1502-
cursor: pointer;
1503-
padding: 8px 10px;
1504-
border-radius: 6px;
1505-
font-size: 13px;
1506-
font-weight: 500;
1507-
line-height: 1.45;
1508-
text-align: left;
1509-
transition: background 0.12s;
1510-
}
1511-
1512-
.media-tree-group-head:hover {
1513-
background: rgba(74, 163, 255, 0.08);
1514-
}
1515-
1516-
.media-tree-group-head.active {
1517-
background: var(--primary, #2563eb);
1518-
color: #fff;
1519-
}
1520-
1521-
.media-tree-group-head.active .media-tree-group-count,
1522-
.media-tree-group-head.active .media-tree-chev {
1523-
color: rgba(255, 255, 255, 0.7);
1524-
}
1525-
1526-
.media-tree-chev {
1527-
flex: 0 0 auto;
1528-
width: 14px;
1529-
font-size: 11px;
1530-
color: var(--muted);
1531-
line-height: 1;
1532-
text-align: center;
1533-
}
1534-
1535-
.media-tree-chev--empty {
1536-
visibility: hidden;
1537-
}
1538-
1539-
.media-tree-group-label {
1540-
flex: 1 1 auto;
1541-
min-width: 0;
1542-
overflow: hidden;
1543-
white-space: nowrap;
1544-
text-overflow: ellipsis;
1545-
}
1546-
1547-
.media-tree-group-count {
1548-
flex: 0 0 auto;
1549-
font-size: 10px;
1550-
color: var(--console-muted, var(--muted));
1551-
min-width: 18px;
1552-
text-align: center;
1553-
}
1554-
1555-
.media-tree-group-body {
1556-
display: flex;
1557-
flex-direction: column;
1558-
padding-left: 14px;
1559-
}
1560-
1561-
.media-tree-group-body .media-tree-group-body {
1562-
padding-left: 12px;
1563-
}
1564-
1565-
.media-tree-edit-row {
1566-
padding: 6px 10px;
1567-
}
1568-
1569-
.media-tree-edit-input {
1570-
width: 100%;
1571-
padding: 6px 8px;
1572-
font-size: 13px;
1573-
border: 1px solid var(--primary, #2563eb);
1574-
border-radius: 4px;
1575-
outline: none;
1576-
}
1577-
1578-
.media-tree-footer {
1579-
padding: 12px 10px;
1580-
border-top: 1px solid var(--border, rgba(15, 23, 42, 0.08));
1581-
}
1582-
1583-
.media-tree-upload-btn {
1584-
width: 100%;
1585-
padding: 10px 14px;
1586-
border: 1px solid var(--border, rgba(15, 23, 42, 0.12));
1587-
border-radius: 8px;
1588-
background: var(--card, #ffffff);
1589-
color: var(--text);
1590-
font-size: 13px;
1591-
font-weight: 500;
1592-
cursor: pointer;
1593-
font-family: inherit;
1594-
}
1595-
1596-
.media-tree-upload-btn:hover:not(:disabled) {
1597-
border-color: var(--primary, #2563eb);
1598-
color: var(--primary, #2563eb);
1599-
}
1600-
1601-
.media-tree-upload-btn:disabled {
1602-
opacity: 0.6;
1603-
cursor: not-allowed;
1604-
}
1605-
1606-
/* context menu */
1607-
.media-tree-context-overlay {
1608-
position: fixed;
1609-
inset: 0;
1610-
z-index: 250;
1611-
}
1612-
1613-
.media-tree-context-menu {
1614-
position: absolute;
1615-
background: var(--card, #ffffff);
1616-
border: 1px solid var(--border, rgba(15, 23, 42, 0.1));
1617-
border-radius: 8px;
1618-
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
1619-
padding: 4px;
1620-
min-width: 140px;
1621-
display: flex;
1622-
flex-direction: column;
1623-
}
1624-
1625-
.media-tree-context-menu button {
1626-
display: block;
1627-
width: 100%;
1628-
border: none;
1629-
background: transparent;
1630-
color: var(--text);
1631-
cursor: pointer;
1632-
padding: 8px 12px;
1633-
border-radius: 4px;
1634-
font-size: 13px;
1635-
text-align: left;
1636-
font-family: inherit;
1637-
}
1638-
1639-
.media-tree-context-menu button:hover {
1640-
background: rgba(74, 163, 255, 0.08);
1641-
}
1642-
1643-
.media-tree-context-menu button.danger {
1644-
color: #dc2626;
1645-
}
1646-
1647-
.media-tree-context-menu button.danger:hover {
1648-
background: rgba(220, 38, 38, 0.08);
1649-
}
1650-
16511399
/* 文章详情：正文保持居中阅读列，右侧大纲悬浮在空白区 */
16521400
.article-detail-page .article-detail-wrap {
16531401
max-width: 720px;

‎vue/src/components/MediaTreeBranch.vue‎

Lines changed: 96 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
aria-hidden="true"
1515
@click.stop="$emit('toggle', folder.key)"
1616
>{{ isExpanded ? '▾' : '▸' }}</span>
17-
<span v-else class="media-tree-chev media-tree-chev--empty" aria-hidden="true"></span>
17+
<svg v-else class="media-tree-chev media-tree-chev--empty" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
18+
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
19+
</svg>
1820
<span class="media-tree-group-label">{{ folder.label }}</span>
1921
<span class="media-tree-group-count">{{ folder.fileCount }}</span>
2022
</button>
@@ -51,3 +53,96 @@ const isExpanded = computed(() => {
5153
return props.expandedMap[props.folder.key] !== false
5254
})
5355
</script>
56+
57+
<style scoped>
58+
/* ---- Group ---- */
59+
.media-tree-group {
60+
display: flex;
61+
flex-direction: column;
62+
}
63+
64+
/* ---- Group head ---- */
65+
.media-tree-group-head {
66+
display: flex;
67+
align-items: center;
68+
gap: 6px;
69+
width: 100%;
70+
border: none;
71+
background: transparent;
72+
color: var(--console-text);
73+
cursor: pointer;
74+
padding: 8px 10px;
75+
border-radius: 8px;
76+
font-size: 13px;
77+
font-weight: 500;
78+
line-height: 1.45;
79+
text-align: left;
80+
font-family: inherit;
81+
transition: background 0.12s ease, color 0.12s ease;
82+
}
83+
84+
.media-tree-group-head:hover {
85+
background: rgba(13, 148, 136, 0.06);
86+
}
87+
88+
.media-tree-group-head.active {
89+
background: var(--console-accent);
90+
color: #fff;
91+
}
92+
93+
.media-tree-group-head.active .media-tree-group-count,
94+
.media-tree-group-head.active .media-tree-chev {
95+
color: rgba(255, 255, 255, 0.7);
96+
}
97+
98+
/* ---- Chevron ---- */
99+
.media-tree-chev {
100+
flex: 0 0 auto;
101+
width: 14px;
102+
font-size: 11px;
103+
color: var(--console-muted);
104+
line-height: 1;
105+
text-align: center;
106+
}
107+
108+
.media-tree-chev--empty {
109+
color: var(--console-muted);
110+
opacity: 0.4;
111+
}
112+
113+
/* ---- Label & Count ---- */
114+
.media-tree-group-label {
115+
flex: 1 1 auto;
116+
min-width: 0;
117+
overflow: hidden;
118+
white-space: nowrap;
119+
text-overflow: ellipsis;
120+
}
121+
122+
.media-tree-group-count {
123+
flex: 0 0 auto;
124+
font-size: 10px;
125+
font-weight: 600;
126+
color: var(--console-muted);
127+
min-width: 18px;
128+
text-align: center;
129+
padding: 1px 5px;
130+
border-radius: 4px;
131+
background: rgba(0, 0, 0, 0.04);
132+
}
133+
134+
[data-theme='dark'] .media-tree-group-count {
135+
background: rgba(255, 255, 255, 0.06);
136+
}
137+
138+
/* ---- Group body (children) ---- */
139+
.media-tree-group-body {
140+
display: flex;
141+
flex-direction: column;
142+
padding-left: 16px;
143+
}
144+
145+
.media-tree-group-body .media-tree-group-body {
146+
padding-left: 14px;
147+
}
148+
</style>

0 commit comments

Comments
 (0)