From c1865e3f1925d2dd36da75dac60678119bbe97b7 Mon Sep 17 00:00:00 2001
From: zlwu <704541015@qq.com>
Date: Sat, 5 Jul 2025 18:15:40 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E7=95=8C=E9=9D=A2?=
=?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=92=8C=E6=96=B0=E5=A2=9E=E5=9B=BE=E6=A0=87?=
=?UTF-8?q?=E8=B5=84=E6=BA=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- 优化弹窗header内边距样式，统一间距规范
- 简化标签页视图样式，移除多余背景色设置
- 新增多个SVG图标资源：
* 全屏/退出全屏相关图标
* 消息和搜索图标
* 提升界面图标的多样性和完整性
主要改动：
- web/src/assets/styles/index.scss - 添加弹窗header样式
- web/src/layout/components/TagsView/index.vue - 简化标签页样式
- web/src/assets/icons/svg/ - 新增6个SVG图标文件
目标：统一界面风格，提升用户体验
---
web/src/assets/icons/svg/exit-fullscreen1.svg | 1 +
web/src/assets/icons/svg/fullscreen copy.svg | 1 +
web/src/assets/icons/svg/fullscreen1.svg | 1 +
web/src/assets/icons/svg/fullscreen2.svg | 1 +
web/src/assets/icons/svg/message1.svg | 1 +
web/src/assets/icons/svg/search-1.svg | 1 +
web/src/assets/styles/index.scss | 9 +++++++
web/src/layout/components/TagsView/index.vue | 26 +++++++++----------
8 files changed, 28 insertions(+), 13 deletions(-)
create mode 100644 web/src/assets/icons/svg/exit-fullscreen1.svg
create mode 100644 web/src/assets/icons/svg/fullscreen copy.svg
create mode 100644 web/src/assets/icons/svg/fullscreen1.svg
create mode 100644 web/src/assets/icons/svg/fullscreen2.svg
create mode 100644 web/src/assets/icons/svg/message1.svg
create mode 100644 web/src/assets/icons/svg/search-1.svg
diff --git a/web/src/assets/icons/svg/exit-fullscreen1.svg b/web/src/assets/icons/svg/exit-fullscreen1.svg
new file mode 100644
index 00000000..485c128b
--- /dev/null
+++ b/web/src/assets/icons/svg/exit-fullscreen1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/web/src/assets/icons/svg/fullscreen copy.svg b/web/src/assets/icons/svg/fullscreen copy.svg
new file mode 100644
index 00000000..c573e08c
--- /dev/null
+++ b/web/src/assets/icons/svg/fullscreen copy.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/web/src/assets/icons/svg/fullscreen1.svg b/web/src/assets/icons/svg/fullscreen1.svg
new file mode 100644
index 00000000..0e86b6fa
--- /dev/null
+++ b/web/src/assets/icons/svg/fullscreen1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/web/src/assets/icons/svg/fullscreen2.svg b/web/src/assets/icons/svg/fullscreen2.svg
new file mode 100644
index 00000000..0665abf0
--- /dev/null
+++ b/web/src/assets/icons/svg/fullscreen2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/web/src/assets/icons/svg/message1.svg b/web/src/assets/icons/svg/message1.svg
new file mode 100644
index 00000000..14ca8172
--- /dev/null
+++ b/web/src/assets/icons/svg/message1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/web/src/assets/icons/svg/search-1.svg b/web/src/assets/icons/svg/search-1.svg
new file mode 100644
index 00000000..84233dda
--- /dev/null
+++ b/web/src/assets/icons/svg/search-1.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/web/src/assets/styles/index.scss b/web/src/assets/styles/index.scss
index 1566d903..22be3d39 100644
--- a/web/src/assets/styles/index.scss
+++ b/web/src/assets/styles/index.scss
@@ -220,3 +220,12 @@ aside {
margin-bottom: 10px;
}
}
+
+.el-overlay .el-overlay-dialog .el-dialog .el-dialog__header{
+ padding: 10px 10px !important;
+}
+
+
+
+
+
diff --git a/web/src/layout/components/TagsView/index.vue b/web/src/layout/components/TagsView/index.vue
index 2e674932..b86d4de5 100644
--- a/web/src/layout/components/TagsView/index.vue
+++ b/web/src/layout/components/TagsView/index.vue
@@ -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;
}
}