style: 优化界面样式和新增图标资源

- 优化弹窗header内边距样式,统一间距规范
- 简化标签页视图样式,移除多余背景色设置
- 新增多个SVG图标资源:
  * 全屏/退出全屏相关图标
  * 消息和搜索图标
  * 提升界面图标的多样性和完整性

主要改动:
- web/src/assets/styles/index.scss - 添加弹窗header样式
- web/src/layout/components/TagsView/index.vue - 简化标签页样式
- web/src/assets/icons/svg/ - 新增6个SVG图标文件

目标:统一界面风格,提升用户体验
This commit is contained in:
zlwu committed 2025-07-05 18:15:40 +08:00
1 parent 09b3bd5061
commit c1865e3f19
8 files changed
+28 -13

No files matched your search

@@ -0,0 +1 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M49.217 41.329l-.136-35.24c-.06-2.715-2.302-4.345-5.022-4.405h-3.65c-2.712-.06-4.866 2.303-4.806 5.016l.152 19.164-24.151-23.79a6.698 6.698 0 0 0-9.499 0 6.76 6.76 0 0 0 0 9.526l23.93 23.713-18.345.074c-2.712-.069-5.228 1.813-5.64 5.02v3.462c.069 2.721 2.31 4.97 5.022 5.03l35.028-.207c.052.005.087.025.133.025l2.457.054a4.626 4.626 0 0 0 3.436-1.38c.88-.874 1.205-2.096 1.169-3.462l-.262-2.465c0-.048.182-.081.182-.136h.002zm52.523 51.212l18.32-.073c2.713.06 5.224-1.609 5.64-4.815v-3.462c-.068-2.722-2.317-4.97-5.021-5.04l-34.58.21c-.053 0-.086-.021-.138-.021l-2.451-.06a4.64 4.64 0 0 0-3.445 1.381c-.885.868-1.201 2.094-1.174 3.46l.27 2.46c.005.06-.177.095-.177.141l.141 34.697c.069 2.713 2.31 4.338 5.022 4.397l3.45.006c2.705.062 4.867-2.31 4.8-5.026l-.153-18.752 24.151 23.946a6.69 6.69 0 0 0 9.494 0 6.747 6.747 0 0 0 0-9.523L101.74 92.54v.001zM48.125 80.662a4.636 4.636 0 0 0-3.437-1.382l-2.457.06c-.05 0-.082.022-.137.022l-35.025-.21c-2.712.07-4.957 2.318-5.022 5.04v3.462c.409 3.206 2.925 4.874 5.633 4.814l18.554.06-24.132 23.928c-2.62 2.626-2.62 6.89 0 9.524a6.694 6.694 0 0 0 9.496 0l24.155-23.79-.155 18.866c-.06 2.722 2.094 5.093 4.801 5.025h3.65c2.72-.069 4.962-1.685 5.022-4.406l.141-34.956c0-.05-.182-.082-.182-.136l.262-2.46c.03-1.366-.286-2.592-1.166-3.46h-.001zM80.08 47.397a4.62 4.62 0 0 0 3.443 1.374l2.45-.054c.055 0 .088-.02.143-.028l35.08.21c2.712-.062 4.953-2.312 5.021-5.033l.009-3.463c-.417-3.211-2.937-5.084-5.64-5.025l-18.615-.073 23.917-23.715c2.63-2.623 2.63-6.879.008-9.513a6.691 6.691 0 0 0-9.494 0L92.251 26.016l.155-19.312c.065-2.713-2.097-5.085-4.802-5.025h-3.45c-2.713.069-4.954 1.693-5.022 4.406l-.139 35.247c0 .054.18.088.18.136l-.267 2.465c-.028 1.366.288 2.588 1.174 3.463v.001z"/></svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1751707315617" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12497" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M674.414 394.644l253.292-252.418-0.868 143.044c-0.348 11.864 9.244 22.327 21.106 21.979h15.177c11.864-0.349 21.804-7.326 21.979-19.364l0.699-212.995c0-0.175 0.348-11.338 0.348-11.338 0.175-5.929-1.222-11.338-5.060-15.177-3.838-3.838-9.067-6.279-15.177-6.106l-10.816 0.175c-0.174 0-0.344 0-0.52 0.175l-211.252-0.875c-11.864 0.349-21.804 10.122-21.979 22.156v15.177c1.747 14.129 12.907 22.329 24.77 21.979l139.205 0.349-252.593 251.549c-11.514 11.514-11.514 30.177 0 41.689 11.514 11.688 30.18 11.688 41.693 0h-0.004zM355.18 632.585l-253.465 251.551 0.873-142.352c0.349-11.859-9.248-22.323-21.11-21.979h-16.046c-11.864 0.349-21.804 7.327-21.979 19.365l-0.699 213.17c0 0.175-0.348 11.338-0.348 11.338-0.175 5.936 1.222 11.338 5.055 15.177 3.838 3.838 9.073 6.279 15.177 6.106l10.815-0.175c0.175 0 0.349 0 0.525-0.175l212.125 0.874c11.859-0.349 21.804-10.117 21.979-22.156v-15.176c-1.746-14.129-12.91-22.329-24.775-21.979l-139.206-0.349 252.419-251.543c11.514-11.514 11.514-30.181 0-41.693-11.334-11.688-29.824-11.688-41.34 0.001v0zM985.799 952.339l-0.524-213.17c-0.349-11.865-10.122-19.016-21.98-19.365h-15.176c-11.865-0.344-21.283 10.122-21.111 21.979l0.874 143.049-253.466-252.247c-11.514-11.514-30.18-11.514-41.693 0-11.509 11.513-11.509 30.18 0 41.693l252.422 251.542-139.205 0.349c-11.864-0.349-22.852 8.024-24.774 21.979v15.177c0.348 11.864 10.122 21.804 21.979 22.156l211.253-0.874c0.174 0 0.348 0.175 0.524 0.175l10.816 0.175c5.928 0.174 11.338-2.093 15.176-6.106 3.838-3.838 5.232-9.243 5.056-15.177 0 0-0.175-11.164-0.175-11.338h0.005zM144.282 101.407l139.205-0.349c11.859 0.349 22.848-8.024 24.77-21.979v-15.179c-0.349-11.864-10.117-21.804-21.979-22.156l-212.296 0.874c-0.175 0-0.349-0.175-0.525-0.175l-10.814-0.175c-5.936-0.174-11.338 2.093-15.177 6.106-3.838 3.838-5.237 9.243-5.055 15.177 0 0 0.348 11.164 0.348 11.338l0.52 213.17c0.175 11.86 10.122 19.016 21.979 19.36h16.051c11.864 0.348 21.282-10.117 21.105-21.979l-0.698-142.346 253.296 251.725c11.508 11.514 30.176 11.514 41.688 0 11.514-11.514 11.514-30.18 0-41.693l-252.419-251.716zM144.282 101.407z" fill="#272636" p-id="12498"></path></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

+1
View File
@@ -0,0 +1 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M38.47 52L52 38.462l-23.648-23.67L43.209 0H.035L0 43.137l14.757-14.865L38.47 52zm74.773 47.726L89.526 76 76 89.536l23.648 23.672L84.795 128h43.174L128 84.863l-14.757 14.863zM89.538 52l23.668-23.648L128 43.207V.038L84.866 0 99.73 14.76 76 38.472 89.538 52zM38.46 76L14.792 99.651 0 84.794v43.173l43.137.033-14.865-14.757L52 89.53 38.46 76z"/></svg>

After

Width:  |  Height:  |  Size: 421 B

+1
View File
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1751707196535" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12335" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z" fill="#444444" p-id="12336"></path></svg>

After

Width:  |  Height:  |  Size: 838 B

+1
View File
@@ -0,0 +1 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M0 20.967v59.59c0 11.59 8.537 20.966 19.075 20.966h28.613l1 26.477L76.8 101.523h32.125c10.538 0 19.075-9.377 19.075-20.966v-59.59C128 9.377 119.463 0 108.925 0h-89.85C8.538 0 0 9.377 0 20.967zm82.325 33.1c0-5.524 4.013-9.935 9.037-9.935 5.026 0 9.038 4.41 9.038 9.934 0 5.524-4.025 9.934-9.038 9.934-5.024 0-9.037-4.41-9.037-9.934zm-27.613 0c0-5.524 4.013-9.935 9.038-9.935s9.037 4.41 9.037 9.934c0 5.524-4.025 9.934-9.037 9.934-5.025 0-9.038-4.41-9.038-9.934zm-27.1 0c0-5.524 4.013-9.935 9.038-9.935s9.038 4.41 9.038 9.934c0 5.524-4.026 9.934-9.05 9.934-5.013 0-9.025-4.41-9.025-9.934z"/></svg>

After

Width:  |  Height:  |  Size: 669 B

+1
View File
@@ -0,0 +1 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M124.884 109.812L94.256 79.166c-.357-.357-.757-.629-1.129-.914a50.366 50.366 0 0 0 8.186-27.59C101.327 22.689 78.656 0 50.67 0 22.685 0 0 22.688 0 50.663c0 27.989 22.685 50.663 50.656 50.663 10.186 0 19.643-3.03 27.6-8.201.286.385.557.771.9 1.114l30.628 30.632a10.633 10.633 0 0 0 7.543 3.129c2.728 0 5.457-1.043 7.543-3.115 4.171-4.157 4.171-10.915.014-15.073M50.671 85.338C31.557 85.338 16 69.78 16 50.663c0-19.102 15.557-34.661 34.67-34.661 19.115 0 34.657 15.559 34.657 34.675 0 19.102-15.557 34.661-34.656 34.661"/></svg>

After

Width:  |  Height:  |  Size: 600 B

+9
View File
@@ -220,3 +220,12 @@ aside {
margin-bottom: 10px;
}
}
.el-overlay .el-overlay-dialog .el-dialog .el-dialog__header{
padding: 10px 10px !important;
}
+13 -13
View File
@@ -72,7 +72,7 @@ const isActive = (r: RouteLocationNormalized): boolean => {
const activeStyle = (tag: RouteLocationNormalized) => {
if (!isActive(tag)) return {};
return {
'background-color': 'var(--tags-view-active-bg)'
'color': 'var(--tags-view-active-bg)'
// 'border-color': 'var(--tags-view-active-border-color)'
};
};
@@ -242,7 +242,7 @@ onMounted(() => {
.tags-view-container {
height: 52px;
width: 100%;
background: var(--art-bg-color);
// background: var(--art-bg-color);
// border-bottom: 1px solid var(--art-border-color);
padding: var(--space-sm) var(--space-lg);
box-shadow: var(--art-box-shadow-xs);
@@ -255,7 +255,7 @@ onMounted(() => {
cursor: pointer;
height: 32px;
line-height: 1;
background: var(--art-gray-100);
// background: var(--art-gray-100);
border: 1px solid var(--art-border-color);
color: var(--art-text-gray-700);
padding: 0 var(--space-sm);
@@ -274,7 +274,7 @@ onMounted(() => {
&:hover {
color: rgb(var(--art-primary));
background: rgba(var(--art-primary), 0.06);
// background: rgba(var(--art-primary), 0.06);
border-color: rgba(var(--art-primary), 0.2);
// transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(var(--art-primary), 0.15);
@@ -290,7 +290,7 @@ onMounted(() => {
&.active {
// background: linear-gradient(135deg, rgb(var(--art-primary)) 0%, rgba(var(--art-primary), 0.9) 100%);
background: rgba(var(--art-primary), 1);
// background: rgba(var(--art-primary), 1);
color: #ffffff;
// border-color: rgb(var(--art-primary));
box-shadow: 0 2px 8px rgba(var(--art-primary), 0.3);
@@ -358,7 +358,7 @@ onMounted(() => {
transition: all 0.2s;
&:hover {
background: rgba(var(--art-primary), 0.06);
// background: rgba(var(--art-primary), 0.06);
color: rgb(var(--art-primary));
}
@@ -378,17 +378,17 @@ html.dark {
.tags-view-container {
.tags-view-wrapper {
.tags-view-item {
background: var(--art-gray-200);
// background: var(--art-gray-200);
color: var(--art-text-gray-600);
// border-color: var(--art-border-color);
&:hover {
background: rgba(var(--art-primary), 0.1);
// background: rgba(var(--art-primary), 0.1);
// border-color: rgba(var(--art-primary), 0.3);
}
&.active {
background: linear-gradient(135deg, rgb(var(--art-primary)) 0%, rgba(var(--art-primary), 0.9) 100%);
// background: linear-gradient(135deg, rgb(var(--art-primary)) 0%, rgba(var(--art-primary), 0.9) 100%);
color: #ffffff;
// border-color: rgb(var(--art-primary));
}
@@ -396,12 +396,12 @@ html.dark {
}
.contextmenu {
background: var(--art-gray-200);
// background: var(--art-gray-200);
// border-color: var(--art-border-color);
color: var(--art-text-gray-600);
li:hover {
background: rgba(var(--art-primary), 0.15);
// background: rgba(var(--art-primary), 0.15);
color: rgb(var(--art-primary));
}
}
@@ -429,14 +429,14 @@ html.dark {
}
&:hover {
background-color: rgba(255, 255, 255, 0.2);
// background-color: rgba(255, 255, 255, 0.2);
opacity: 1;
transform: scale(1.1);
}
}
&.active .el-icon-close:hover {
background-color: rgba(255, 255, 255, 0.2);
// background-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
}