material design样式

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);
 }
 
-/* 弹性间隔：用<EFBFBD><EFBFBD>推开左右两侧的内容 */
+/* 弹性间隔：用于推开左右两侧的内容 */
 .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));
 }
 </style> 

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;
 }
 </style>