Merge branch 'feature-nxdev' of https://gitea.nxsir.cn/code/IM into feature-nxdev

frontend/web/src/components/addMenu.vue

@@ -67,12 +67,12 @@ const vClickOutside = {
 </script>
 
 <style scoped>
+/* --- 以下是保持不动的原样部分 --- */
 .add-menu-container {
   position: relative;
   display: inline-block;
 }
 
-/* 加号按钮样式 */
 .add-btn {
   width: 32px;
   height: 32px;
@@ -87,14 +87,8 @@ const vClickOutside = {
 }
 
 .add-btn:hover {
-  background:  #cccbcb;
+  background: #cccbcb;
 }
-/*
-.add-btn.active {
-  background: #007aff;
-  color: white;
-}
-  */
 
 .plus-icon {
   font-size: 22px;
@@ -102,20 +96,15 @@ const vClickOutside = {
   font-weight: 300;
 }
 
-/* 弹出卡片容器 */
-.menu-card {
-  position: absolute;
-  top: 45px;
-  right: 0;
-  width: 100px;
-  background: white;
-  border-radius: 10px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  z-index: 100;
-  transform-origin: top right;
+.pop-enter-active, .pop-leave-active {
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.pop-enter-from, .pop-leave-to {
+  opacity: 0;
+  transform: scale(0.9) translateY(-10px);
 }
 
-/* 小三角 */
 .arrow {
   position: absolute;
   top: -6px;
@@ -127,54 +116,65 @@ const vClickOutside = {
   border-bottom: 6px solid white;
 }
 
-/* 列表样式 */
+/* --- 重点优化：仅限菜单列表部分 --- */
+
+.menu-card {
+  position: absolute;
+  top: 45px;
+  right: 0;
+  width: 120px; /* 稍微加宽，避免局促 */
+  background: white;
+  border-radius: 10px;
+  /* 优化：使用更柔和的复合阴影，提升高级感 */
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+  transform-origin: top right;
+  padding: 4px; /* 增加内边距，让列表项不贴边 */
+  border: 1px solid rgba(0, 0, 0, 0.05); /* 增加极细边框，防止白底背景重叠 */
+}
+
 .menu-list {
-  padding: 6px 0;
+  padding: 0; /* 清除默认，改由父级 padding 控制 */
+  display: flex;
+  flex-direction: column;
+  gap: 2px; /* 增加项与项之间的微小缝隙 */
 }
 
 .menu-item {
   display: flex;
   align-items: center;
-  padding: 5px 5px;
+  padding: 8px 10px; /* 增加点击区域和呼吸感 */
   cursor: pointer;
-  transition: background 0.2s;
-  color: #333;
+  border-radius: 6px; /* 每一行也给圆角，悬浮时更好看 */
+  transition: all 0.2s;
+  color: #4a4a4a;
+  justify-content: center;
 }
 
 .menu-item:hover {
-  background: #f5f5f5;
-}
-
-.menu-item:first-child:hover {
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
+  background: #c6c6c6; /* 换成淡淡的品牌色背景 */
 }
 
+/* 移除旧的、生硬的边角覆盖逻辑，改用上面统一的 border-radius */
+.menu-item:first-child:hover,
 .menu-item:last-child:hover {
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
 }
 
 .icon {
-  margin-right: 5px;
-  font-size: 12px;
+  margin-right: 8px; /* 增加图标与文字的距离 */
+  font-size: 14px; /* 稍微调大一点点 */
   display: flex;
   align-items: center;
-  /*width: 20px;*/
+  justify-content: center;
+  width: 16px;
 }
 
 .menu-item span {
-  font-size: 12px;
-  /*font-weight: 400;*/
-}
-
-/* 弹出动画 */
-.pop-enter-active, .pop-leave-active {
-  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.pop-enter-from, .pop-leave-to {
-  opacity: 0;
-  transform: scale(0.9) translateY(-10px);
+  font-size: 13px; /* 稍微增大字号，更容易阅读 */
+  font-weight: 500; /* 增加字重，更有质感 */
 }
 </style>