diff --git a/src/components/ProjectList.vue b/src/components/ProjectList.vue index ada5604..2fce800 100644 --- a/src/components/ProjectList.vue +++ b/src/components/ProjectList.vue @@ -304,17 +304,16 @@ const onAfterLeave = (el: Element): void => { /* 主内容区域:占用剩余空间并防止内容溢出 */ .main-content { flex: 1; - min-height: 0; /* 关键:确保 flex 布局下内容不会溢出 */ + min-height: 0; } /* 工具栏:固定高度,顶部边框和阴影效果 */ .toolbar { height: 40px; - border-top: 1px solid #e8e8e8; background-color: #fff; - box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05); + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1); position: relative; - z-index: 1; /* 确保阴影显示在内容之上 */ + z-index: 1; } /* 工具栏内容:水平布局,两端对齐 */ @@ -328,10 +327,10 @@ const onAfterLeave = (el: Element): void => { /* 总数显示:次要文本样式 */ .total-count { font-size: 13px; - color: #666; + color: rgba(0, 0, 0, 0.6); } -/* 弹性间隔:用��推开左右两侧的内容 */ +/* 弹性间隔:用于推开左右两侧的内容 */ .toolbar-spacer { flex: 1; } @@ -345,16 +344,16 @@ const onAfterLeave = (el: Element): void => { align-items: center; justify-content: center; cursor: pointer; - color: #666; + color: rgba(0, 0, 0, 0.54); border-radius: 6px; - transition: all 0.2s ease; + transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } /* 菜单触发器悬停和激活状态 */ .menu-trigger:hover, .menu-trigger.active { - background-color: #f5f5f5; - color: #1a1a1a; + background-color: rgba(0, 0, 0, 0.04); + color: rgba(0, 0, 0, 0.87); } /* 弹出菜单:浮动面板样式 */ @@ -363,22 +362,21 @@ const onAfterLeave = (el: Element): void => { bottom: 100%; right: 0; margin-bottom: 23px; - background: rgba(255, 255, 255, 0.95); + background: #ffffff; border-radius: 12px; - box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), - 0 2px 8px rgba(0, 0, 0, 0.04); + box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), + 0 8px 10px 1px rgba(0, 0, 0, 0.14), + 0 3px 14px 2px rgba(0, 0, 0, 0.12); min-width: 260px; padding: 8px 0; z-index: 1000; - border: 1px solid rgba(0, 0, 0, 0.08); - backdrop-filter: blur(12px); /* 背景模糊效果 */ - transform-origin: top right; /* 动画原点 */ + transform-origin: top right; } /* 菜单动画相关样式 */ .menu-enter-active, .menu-leave-active { - transition: all 0.2s ease-out; + transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .menu-enter-from, @@ -396,7 +394,7 @@ const onAfterLeave = (el: Element): void => { /* 菜单分割线 */ .menu-divider { height: 1px; - background-color: rgba(0, 0, 0, 0.06); + background-color: rgba(0, 0, 0, 0.12); margin: 6px 0; } @@ -405,20 +403,20 @@ const onAfterLeave = (el: Element): void => { padding: 10px 16px; margin: 0 4px; font-size: 13px; - color: #333; + color: rgba(0, 0, 0, 0.87); cursor: pointer; - transition: all 0.2s ease; + transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 8px; display: flex; align-items: center; - font-weight: 500; + font-weight: 400; } /* 菜单项悬停和选中状态 */ .menu-item:hover, .menu-item-selected { - background-color: rgba(79, 70, 229, 0.06); - color: #4f46e5; + background-color: rgba(98, 0, 238, 0.08); + color: rgb(98, 0, 238); } /* 选中项信息区域 */ @@ -431,15 +429,15 @@ const onAfterLeave = (el: Element): void => { /* 选中项名称 */ .selected-item-name { font-size: 14px; - font-weight: 600; - color: #1a1a1a; + font-weight: 500; + color: rgba(0, 0, 0, 0.87); margin-bottom: 8px; } /* 选中项路径 */ .selected-item-path { font-size: 12px; - color: #666; + color: rgba(0, 0, 0, 0.6); word-break: break-all; line-height: 1.5; } @@ -450,13 +448,13 @@ const onAfterLeave = (el: Element): void => { top: 50%; left: 50%; transform: translate(-50%, -50%); - background: rgba(0, 0, 0, 0.8); + background: #323232; color: white; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 1000; - pointer-events: none; /* 防止干扰鼠标事件 */ + pointer-events: none; max-width: 80%; text-align: center; } @@ -464,12 +462,12 @@ const onAfterLeave = (el: Element): void => { /* Toast 动画相关样式 */ .toast-enter-active, .toast-leave-active { - transition: all 0.3s ease; + transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .toast-enter-from, .toast-leave-to { opacity: 0; - transform: translate(-50%, -40%); /* 添加垂直位移效果 */ + transform: translate(-50%, calc(-50% - 20px)); } \ No newline at end of file diff --git a/src/components/VirtualList.vue b/src/components/VirtualList.vue index 81e9ffd..e138b47 100644 --- a/src/components/VirtualList.vue +++ b/src/components/VirtualList.vue @@ -426,7 +426,7 @@ onBeforeUnmount(() => { overflow-y: auto; border: 1px solid #ccc; position: relative; - background-color: #f4f4f4; + background-color: #fafafa; width: 100%; height: 100%; } @@ -450,14 +450,16 @@ onBeforeUnmount(() => { padding: 8px 16px; display: flex; align-items: center; - transition: background-color 0.2s ease, opacity 0.2s ease; + transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; background-color: white; + border-radius: 4px; + margin: 0 4px; } /* 选中状态样式 */ .list-item.selected { - background-color: rgba(64, 169, 255, 0.15); + background-color: rgba(98, 0, 238, 0.08); } /* 列表项布局容器 */ @@ -476,6 +478,7 @@ onBeforeUnmount(() => { display: flex; align-items: center; justify-content: center; + color: rgba(0, 0, 0, 0.54); } /* 内容区域布局 */ @@ -498,8 +501,8 @@ onBeforeUnmount(() => { /* 项目名称样式 */ .item-name { font-size: 14px; - color: #1a1a1a; - font-weight: 500; + color: rgba(0, 0, 0, 0.87); + font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -516,7 +519,7 @@ onBeforeUnmount(() => { /* 路径文本样式 */ .item-path { font-size: 12px; - color: #666; + color: rgba(0, 0, 0, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -534,18 +537,20 @@ onBeforeUnmount(() => { /* 单个标签样式 */ .item-tag { - font-size: 11px; + font-size: 10px; padding: 2px 6px; - border-radius: 4px; - font-weight: 500; + border-radius: 12px; + font-weight: 400; white-space: nowrap; flex-shrink: 0; + letter-spacing: 0.4px; + text-transform: uppercase; } /* 列表冻结状态样式 */ .list-frozen { - pointer-events: none; /* 禁用鼠标事件 */ - opacity: 0.7; /* 降低透明度 */ - user-select: none; /* 禁用文本选择 */ + pointer-events: none; + opacity: 0.38; + user-select: none; } \ No newline at end of file