From 98749f73549cbbb1eb1db0916f3f2073e006384e Mon Sep 17 00:00:00 2001
From: zs <zhousong@weben-smart.com>
Date: 周三, 30 4月 2025 19:47:32 +0800
Subject: [PATCH] 托盘管理
---
HIAWms/web/src/components/vue3-context-menu/ContextMenu.scss | 518 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 518 insertions(+), 0 deletions(-)
diff --git a/HIAWms/web/src/components/vue3-context-menu/ContextMenu.scss b/HIAWms/web/src/components/vue3-context-menu/ContextMenu.scss
new file mode 100644
index 0000000..83e6727
--- /dev/null
+++ b/HIAWms/web/src/components/vue3-context-menu/ContextMenu.scss
@@ -0,0 +1,518 @@
+//CSS Vars
+:root {
+ //Backgroud
+ --mx-menu-backgroud: #fff;
+ --mx-menu-hover-backgroud: #f1f1f1;
+ --mx-menu-active-backgroud: #dfdfdf;
+ --mx-menu-open-backgroud: #f1f1f1;
+ --mx-menu-open-hover-backgroud: #f1f1f1;
+ --mx-menu-divider: #f0f0f0;
+
+ //Text
+ --mx-menu-text: #2e2e2e;
+ --mx-menu-hover-text: #2e2e2e;
+ --mx-menu-active-text: #2e2e2e;
+ --mx-menu-open-text: #2e2e2e;
+ --mx-menu-open-hover-text: #2e2e2e;
+ --mx-menu-disabled-text: #c9c8c8;
+
+ --mx-menu-icon-size: 16px;
+
+ //Shadow
+ --mx-menu-shadow-color: rgba(0, 0, 0, 0.1);
+ --mx-menu-backgroud-radius: 10px;
+
+ //Shortcut badge
+ --mx-menu-shortcut-backgroud: #ebebeb;
+ --mx-menu-shortcut-backgroud-hover:#ebebeb;
+ --mx-menu-shortcut-backgroud-active:#ebebeb;
+ --mx-menu-shortcut-backgroud-open:#ebebeb;
+ --mx-menu-shortcut-backgroud-disabled:#fdfdfd;
+ --mx-menu-shortcut-text: #424242;
+ --mx-menu-shortcut-text-hover: #424242;
+ --mx-menu-shortcut-text-active: #424242;
+ --mx-menu-shortcut-text-open: #424242;
+ --mx-menu-shortcut-text-disabled: #a5a5a5;
+
+ //Focus border color
+ --mx-menu-focus-color: #0085f1;
+
+ //Icon placeholder width
+ --mx-menu-placeholder-width: 24px;
+}
+
+//Base hosts
+.mx-context-menu {
+ pointer-events: all;
+ display: inline-block;
+ overflow: visible;
+ position: absolute;
+ background-color: var(--mx-menu-backgroud);
+ border-radius: var(--mx-menu-backgroud-radius);
+ padding: 12px 0;
+ box-shadow: 0px 10px 40px 10px var(--mx-menu-shadow-color);
+ opacity: 1;
+ transition: opacity 0.2s ease-in-out;
+}
+.mx-context-menu-items {
+ position: relative;
+ overflow: visible;
+}
+.mx-context-menu-scroll {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 1px;
+ pointer-events: none;
+}
+
+//Up down button
+.mx-context-menu-updown {
+ pointer-events: all;
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: 15px;
+ border-radius: 10px;
+ background-color: var(--mx-menu-backgroud);
+ user-select: none;
+ cursor: pointer;
+
+ &.placeholder {
+ position: relative;
+ cursor: default;
+ }
+
+ &.disabled {
+ color: var(--mx-menu-disabled-text);
+ cursor: default;
+
+ .mx-right-arrow {
+ fill: var(--mx-menu-disabled-text);
+ }
+ }
+
+ &:hover:not(.disabled) {
+ background-color: var(--mx-menu-hover-backgroud);
+ }
+ &:active {
+ background-color: var(--mx-menu-active-backgroud);
+ }
+
+ &.up {
+ top: 0px;
+
+ .mx-right-arrow {
+ transform: translateX(-50%) rotate(270deg);
+ }
+ }
+ &.down {
+ bottom: -1px;
+
+ .mx-right-arrow {
+ transform: translateX(-50%) rotate(90deg);
+ }
+ }
+
+ .mx-right-arrow {
+ display: inline-block;
+ position: absolute;
+ height: 12px;
+ left: 50%;
+ top: 0px;
+ padding: 0;
+ }
+}
+
+//Item
+.mx-context-menu-item {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+ padding: 6px 15px;
+ user-select: none;
+ overflow: visible;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ color: var(--mx-menu-text);
+
+ .mx-right-arrow, .mx-checked-mark {
+ fill: var(--mx-menu-text);
+ }
+ //Mouse hover
+ &:hover {
+ background-color: var(--mx-menu-hover-backgroud);
+ color: var(--mx-menu-hover-text);
+
+ .mx-right-arrow, .mx-checked-mark {
+ fill: var(--mx-menu-hover-text);
+ }
+ .mx-shortcut {
+ background-color: var(--mx-menu-shortcut-backgroud-hover);
+ color: var(--mx-menu-shortcut-text-hover);
+ }
+ }
+ //Mouse press
+ &:active {
+ background-color: var(--mx-menu-active-backgroud);
+ color: var(--mx-menu-active-text);
+
+ .mx-right-arrow, .mx-checked-mark {
+ fill: var(--mx-menu-active-text);
+ }
+ .mx-shortcut {
+ background-color: var(--mx-menu-shortcut-backgroud-active);
+ color: var(--mx-menu-shortcut-text-active);
+ }
+ }
+ //With submenu open state
+ &.open {
+ background-color: var(--mx-menu-open-backgroud);
+ color: var(--mx-menu-open-text);
+
+ &:hover {
+ background-color: var(--mx-menu-open-hover-backgroud);
+ color: var(--mx-menu-open-hover-text);
+ }
+
+ .mx-right-arrow, .mx-checked-mark {
+ fill: var(--mx-menu-open-text);
+ }
+
+ .mx-shortcut {
+ background-color: var(--mx-menu-shortcut-backgroud-open);
+ color: var(--mx-menu-shortcut-text-open);
+ }
+ }
+ //Focus by keyboard
+ &.keyboard-focus {
+ background-color: var(--mx-menu-active-backgroud);
+ outline: 2px solid var(--mx-menu-focus-color);
+ }
+ //disabled
+ &.disabled {
+ color: var(--mx-menu-disabled-text);
+
+ cursor: not-allowed;
+
+ &:hover, &:active {
+ background-color: transparent;
+ }
+
+ .mx-right-arrow, .mx-checked-mark {
+ fill: var(--mx-menu-disabled-text);
+ }
+ .mx-shortcut {
+ background-color: var(--mx-menu-shortcut-backgroud-disabled);
+ color: var(--mx-menu-shortcut-text-second);
+ }
+ }
+
+ .mx-item-row {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ max-width: 100%;
+ }
+ .mx-icon-placeholder {
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ height: auto;
+ overflow: hidden;
+
+ &.preserve-width {
+ width: var(--mx-menu-placeholder-width);
+ }
+ }
+
+ .icon {
+ display: inline-block;
+ font-size: var(--mx-menu-icon-size);
+
+ &.svg {
+ width: var(--mx-menu-icon-size);
+ height: var(--mx-menu-icon-size);
+ }
+ }
+ .label {
+ font-size: 14px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ padding-right: 16px;
+ }
+}
+.mx-context-menu-item-wrapper {
+ position: relative;
+}
+
+//Sperator
+.mx-context-menu-item-sperator {
+ display: block;
+ padding: 5px 0;
+ background-color: var(--mx-menu-backgroud);
+
+ &:after {
+ display: block;
+ content: '';
+ background-color: var(--mx-menu-divider);
+ height: 1px;
+ }
+}
+
+//Right arrow
+.mx-right-arrow {
+ width: 14px;
+ height: 14px;
+}
+//Check mark
+.mx-checked-mark {
+ width: var(--mx-menu-icon-size);
+ height: var(--mx-menu-icon-size);
+}
+
+//Shortcut
+.mx-shortcut {
+ position: relative;
+ justify-self: flex-end;
+ font-size: 11.5px;
+ padding: 2px 4px;
+
+ background-color: var(--mx-menu-shortcut-backgroud);
+ color: var(--mx-menu-shortcut-text);
+}
+
+//Dark theme
+//===================================================
+.mx-menu-bar.dark,
+.mx-context-menu.dark {
+ //CSS Vars
+ //Backgroud
+ --mx-menu-backgroud: #303031;
+ --mx-menu-hover-backgroud: #636363;
+ --mx-menu-active-backgroud: #555555;
+ --mx-menu-open-backgroud: #636363;
+ --mx-menu-open-hover-backgroud: #636363;
+ --mx-menu-divider: #464646;
+
+ //Text
+ --mx-menu-text: #ffffff;
+ --mx-menu-hover-text: #ffffff;
+ --mx-menu-active-text: #ffffff;
+ --mx-menu-open-text: #ffffff;
+ --mx-menu-open-hover-text: #ffffff;
+ --mx-menu-disabled-text: #9c9c9c;
+
+ //Shadow
+ --mx-menu-shadow-color: rgba(51, 51, 51, 0.2);
+
+ //Shortcut badge
+ --mx-menu-shortcut-backgroud: #505050;
+ --mx-menu-shortcut-backgroud-hover:#505050;
+ --mx-menu-shortcut-backgroud-active:#505050;
+ --mx-menu-shortcut-backgroud-open:#505050;
+ --mx-menu-shortcut-backgroud-disabled:#444444;
+ --mx-menu-shortcut-text: #f1f1f1;
+ --mx-menu-shortcut-text-hover: #ffffff;
+ --mx-menu-shortcut-text-active: #ffffff;
+ --mx-menu-shortcut-text-open: #ffffff;
+ --mx-menu-shortcut-text-disabled: #9d9d9d;
+}
+
+//Flat theme
+//===================================================
+.mx-menu-bar.flat,
+.mx-context-menu.flat {
+ border-radius: 0;
+ padding: 7px 0;
+ box-shadow: 0px 1px 2px 1px var(--mx-menu-shadow-color);
+
+ .mx-context-menu-item {
+ padding: 3px 12px;
+ }
+}
+
+//win10 theme
+//===================================================
+.mx-menu-bar.win10,
+.mx-context-menu.win10 {
+ & {
+ --mx-menu-backgroud: #eeeeee;
+ --mx-menu-hover-backgroud: #d8d8d8;
+ --mx-menu-active-backgroud: #dfdfdf;
+ --mx-menu-open-backgroud: #f1f1f1;
+ --mx-menu-open-hover-backgroud: #d8d8d8;
+ --mx-menu-divider: #aaaaaa;
+ --mx-menu-border-color: #b1b1b1;
+
+ --mx-menu-shortcut-backgroud: transparent;
+ --mx-menu-shortcut-backgroud-hover: transparent;
+ --mx-menu-shortcut-backgroud-active: transparent;
+ --mx-menu-shortcut-backgroud-open: transparent;
+ --mx-menu-shortcut-backgroud-disabled:transparent;
+ --mx-menu-shortcut-text: #272727;
+ --mx-menu-shortcut-text-hover: #272727;
+ --mx-menu-shortcut-text-active: #272727;
+ --mx-menu-shortcut-text-open: #272727;
+ --mx-menu-shortcut-text-disabled: #6b6b6b;
+
+ .mx-context-menu-item {
+ padding: 2px 4px;
+ margin: 0 4px;
+ }
+ .mx-context-menu-item-sperator {
+ margin: 0 4px;
+ }
+ }
+ &.dark {
+ --mx-menu-backgroud: #303031;
+ --mx-menu-hover-backgroud: #636363;
+ --mx-menu-active-backgroud: #555555;
+ --mx-menu-open-backgroud: #636363;
+ --mx-menu-open-hover-backgroud: #636363;
+ --mx-menu-divider: #808080;
+ --mx-menu-border-color: #656565;
+
+ --mx-menu-shortcut-backgroud: #505050;
+ --mx-menu-shortcut-backgroud-hover:#505050;
+ --mx-menu-shortcut-backgroud-active:#505050;
+ --mx-menu-shortcut-backgroud-open:#505050;
+ --mx-menu-shortcut-backgroud-disabled:#444444;
+ --mx-menu-shortcut-text: #f1f1f1;
+ --mx-menu-shortcut-text-hover: #ffffff;
+ --mx-menu-shortcut-text-active: #ffffff;
+ --mx-menu-shortcut-text-open: #ffffff;
+ --mx-menu-shortcut-text-disabled: #9d9d9d;
+
+ padding: 8px 0;
+
+ .mx-context-menu-item {
+ padding: 6px 12px;
+ margin: 0;
+ }
+ .mx-context-menu-item-sperator {
+ margin: 0 7px;
+ }
+ }
+
+ border-radius: 0;
+ padding: 8px 0;
+ border: 1px solid var(--mx-menu-border-color);
+ box-shadow: 2px 2px 1px 0 var(--mx-menu-shadow-color);
+
+}
+
+//Mac theme
+//===================================================
+.mx-menu-bar.mac,
+.mx-context-menu.mac {
+
+ & {
+
+ //Backgroud
+ --mx-menu-backgroud: #ececec;
+ --mx-menu-hover-backgroud: #0165e1;
+ --mx-menu-active-backgroud: #0165e1;
+ --mx-menu-open-backgroud: #858585;
+ --mx-menu-open-hover-backgroud: #0165e1;
+ --mx-menu-divider: #d2d2d2;
+
+ //Text
+ --mx-menu-text: #232323;
+ --mx-menu-hover-text: #fff;
+ --mx-menu-active-text: #fff;
+ --mx-menu-open-text: #fff;
+ --mx-menu-open-hover-text: #fff;
+ --mx-menu-disabled-text: #bbbbbb;
+
+ //Shadow
+ --mx-menu-shadow-color: rgba(0, 0, 0, 0.1);
+ --mx-menu-backgroud-radius: 10px;
+
+ //Shortcut badge
+ --mx-menu-shortcut-backgroud: transparent;
+ --mx-menu-shortcut-backgroud-hover:transparent;
+ --mx-menu-shortcut-backgroud-active:transparent;
+ --mx-menu-shortcut-backgroud-open:transparent;
+ --mx-menu-shortcut-backgroud-disabled:transparent;
+ --mx-menu-shortcut-text: #424242;
+ --mx-menu-shortcut-text-hover: #fff;
+ --mx-menu-shortcut-text-active: #fff;
+ --mx-menu-shortcut-text-open: #fff;
+ --mx-menu-shortcut-text-disabled: #a5a5a5;
+
+ //Focus border color
+ --mx-menu-focus-color: transparent;
+ --mx-menu-border-color: #bbbbbb;
+ }
+ &.dark {
+ //Backgroud
+ --mx-menu-backgroud: #333333;
+ --mx-menu-hover-backgroud: #0153d2;
+ --mx-menu-active-backgroud: #0153d2;
+ --mx-menu-open-hover-backgroud: #0153d2;
+ --mx-menu-open-backgroud: #414346;
+ --mx-menu-divider: #575757;
+
+ //Text
+ --mx-menu-text: #dcdcdc;
+ --mx-menu-hover-text: #fff;
+ --mx-menu-active-text: #fff;
+ --mx-menu-open-text: #fff;
+ --mx-menu-open-hover-text: #fff;
+ --mx-menu-disabled-text: #6a6a6a;
+
+ //Shadow
+ --mx-menu-shadow-color: rgba(0, 0, 0, 0.1);
+ --mx-menu-backgroud-radius: 10px;
+
+ //Shortcut badge
+ --mx-menu-shortcut-backgroud: transparent;
+ --mx-menu-shortcut-backgroud-hover:transparent;
+ --mx-menu-shortcut-backgroud-active:transparent;
+ --mx-menu-shortcut-backgroud-open:transparent;
+ --mx-menu-shortcut-backgroud-disabled:transparent;
+ --mx-menu-shortcut-text: #dadada;
+ --mx-menu-shortcut-text-hover: #fff;
+ --mx-menu-shortcut-text-active: #fff;
+ --mx-menu-shortcut-text-open: #fff;
+ --mx-menu-shortcut-text-disabled: #6a6a6a;
+
+ //Focus border color
+ --mx-menu-focus-color: transparent;
+ --mx-menu-border-color: #222;
+ }
+
+ padding: 8px 0;
+ box-shadow: 0px 5px 7px 1px var(--mx-menu-shadow-color);
+ border: 1px solid var(--mx-menu-border-color);
+
+ .mx-context-menu-item {
+ border-radius: 5px;
+ margin: 0 6px;
+ padding: 3px 6px;
+
+ //Focus by keyboard
+ &.keyboard-focus {
+ background-color: var(--mx-menu-active-backgroud);
+ color: var(--mx-menu-active-text);
+ outline: none;
+
+ .mx-right-arrow, .mx-checked-mark {
+ fill: var(--mx-menu-active-text);
+ }
+ .mx-shortcut {
+ background-color: var(--mx-menu-shortcut-backgroud-active);
+ color: var(--mx-menu-shortcut-text-active);
+ }
+ }
+ }
+ .mx-context-menu-item-sperator {
+ margin: 0 12px;
+ }
+}
\ No newline at end of file
--
Gitblit v1.9.3