misp-ui-library-test 0.0.1

package/src/styles/reset.scss

@@ -0,0 +1,257 @@
+/* Reset and normalize styles */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+body {
+  margin: 0;
+  font-size: var(--ui-font-size-base, $--font-size-base);
+  font-weight: 400;
+  color: var(--ui-color-text-primary, $--color-text-primary);
+  background-color: var(--ui-background-color-base, $--background-color-base);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: var(--ui-font-weight-primary, $--font-weight-primary);
+  line-height: 1.2;
+  margin-top: 0;
+  margin-bottom: var(--ui-spacing-base, $--spacing-base);
+}
+
+h1 {
+  font-size: 2em;
+}
+
+h2 {
+  font-size: 1.5em;
+}
+
+h3 {
+  font-size: 1.17em;
+}
+
+h4 {
+  font-size: 1em;
+}
+
+h5 {
+  font-size: 0.83em;
+}
+
+h6 {
+  font-size: 0.67em;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+/* Links */
+a {
+  color: var(--ui-color-primary, $--color-primary);
+  text-decoration: none;
+  transition: color var(--ui-transition-duration, $--transition-duration) var(--ui-transition-timing, $--transition-timing);
+}
+
+a:hover,
+a:focus {
+  color: var(--ui-color-primary, $--color-primary);
+}
+
+a:visited {
+  color: var(--ui-color-primary, $--color-primary);
+}
+
+/* Forms */
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: var(--ui-spacing-small, $--spacing-small) var(--ui-spacing-base, $--spacing-base);
+  border: 1px solid var(--ui-border-color-base, $--border-color-base);
+  border-radius: var(--ui-border-radius-base, $--border-radius-base);
+  background-color: var(--ui-background-color-base, $--background-color-base);
+  color: var(--ui-color-text-regular, $--color-text-regular);
+  transition: border-color var(--ui-transition-duration, $--transition-duration) var(--ui-transition-timing, $--transition-timing);
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: var(--ui-color-primary, $--color-primary);
+}
+
+input:disabled,
+textarea:disabled,
+select:disabled {
+  background-color: var(--ui-background-color-light, $--background-color-light);
+  color: var(--ui-color-text-disabled, $--color-text-disabled);
+  cursor: not-allowed;
+}
+
+/* Buttons */
+button {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: var(--ui-spacing-small, $--spacing-small) var(--ui-spacing-base, $--spacing-base);
+  border: none;
+  border-radius: var(--ui-border-radius-base, $--border-radius-base);
+  background-color: var(--ui-background-color-base, $--background-color-base);
+  color: var(--ui-color-text-regular, $--color-text-regular);
+  cursor: pointer;
+  transition: all var(--ui-transition-duration, $--transition-duration) var(--ui-transition-timing, $--transition-timing);
+}
+
+button:hover {
+  background-color: var(--ui-background-color-light, $--background-color-light);
+}
+
+button:disabled {
+  background-color: var(--ui-background-color-light, $--background-color-light);
+  color: var(--ui-color-text-disabled, $--color-text-disabled);
+  cursor: not-allowed;
+}
+
+/* Tables */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  margin-bottom: 1em;
+}
+
+th,
+td {
+  padding: var(--ui-spacing-base, $--spacing-base);
+  text-align: left;
+  border-bottom: 1px solid var(--ui-border-color-base, $--border-color-base);
+}
+
+th {
+  font-weight: var(--ui-font-weight-primary, $--font-weight-primary);
+}
+
+/* Lists */
+ul,
+ol {
+  padding-left: 2em;
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+li {
+  margin-bottom: 0.5em;
+}
+
+/* Code */
+code {
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  font-size: 0.85em;
+  background-color: var(--ui-background-color-light, $--background-color-light);
+  padding: var(--ui-spacing-small, $--spacing-small) var(--ui-spacing-base, $--spacing-base);
+  border-radius: var(--ui-border-radius-small, $--border-radius-small);
+}
+
+pre {
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  background-color: var(--ui-background-color-light, $--background-color-light);
+  padding: var(--ui-spacing-base, $--spacing-base);
+  border-radius: var(--ui-border-radius-base, $--border-radius-base);
+  overflow-x: auto;
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0;
+}
+
+/* Images */
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Clearfix */
+.clearfix::after {
+  content: '';
+  display: table;
+  clear: both;
+}
+
+/* Text utilities */
+.text-primary {
+  color: var(--ui-color-primary, $--color-primary) !important;
+}
+
+.text-success {
+  color: var(--ui-color-success, $--color-success) !important;
+}
+
+.text-warning {
+  color: var(--ui-color-warning, $--color-warning) !important;
+}
+
+.text-danger {
+  color: var(--ui-color-danger, $--color-danger) !important;
+}
+
+.text-info {
+  color: var(--ui-color-info, $--color-info) !important;
+}
+
+.text-muted {
+  color: var(--ui-color-text-secondary, $--color-text-secondary) !important;
+}
+
+.text-left {
+  text-align: left !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-right {
+  text-align: right !important;
+}
+
+/* Responsive utilities */
+@media (max-width: 767px) {
+  .hidden-xs {
+    display: none !important;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 1023px) {
+  .hidden-sm {
+    display: none !important;
+  }
+}
+
+@media (min-width: 1024px) {
+  .hidden-md {
+    display: none !important;
+  }
+}

package/src/styles/themes/blue.scss

@@ -0,0 +1,75 @@
+// 蓝色主题配置
+$blue-theme: (
+  // 基础颜色
+  base-blue: #324157,
+  base-red: #C03639,
+  base-pink: #E65D6E,
+  base-green: #30B08F,
+  base-tiffany: #4AB7BD,
+  base-yellow: #FEC171,
+  base-panGreen: #30B08F,
+
+  // 主题色
+  primary-blue: #002A72,
+  primary-blue-light: #E8F4FF,
+  dark-blue: #001a4d,
+  light-blue: #79BBFF,
+  blue-bg: #e8f4ff,
+  md-blue: #4F9BE8,
+  extra-light-blue: #BEE6FF,
+
+  // 黑色系列
+  primary-black: #000000,
+  sd-black: #505363,
+  td-black: #909399,
+  fr-black: #A6AEBE,
+  dis-black: #D4D9E2,
+  light-bg: #F4F5F7,
+
+  // 红色系列
+  extra-light-red: #EEAAAA,
+  light-red: #EA6C6C,
+  red-danger: #E60000,
+  sd-red: #AD0000,
+  success-light: #E3F9E9,
+  danger-light: #FFE1DC,
+  warning-light: #FFF0D6,
+
+  // 黄色系列
+  yellow-light-extra: #FFF5B8,
+  yellow-light: #FFE26B,
+  yellow-warning: #E6A23C,
+  sd-yellow: #BE7200,
+
+  // 橙色系列
+  extra-light-orange: #FFD0B3,
+  light-orange: #FFB76D,
+  primary-orange: #FF8000,
+  sd-orange: #D16900,
+
+  // 绿色系列
+  extra-light-green: #AFE6CA,
+  light-green: #A4DB8A,
+  green-success: #71BE4C,
+  sd-green: #4B7A34,
+
+  // 青色系列
+  extra-light-aquamarine: #C2F9F0,
+  light-aquamarine: #91F0F0,
+  primary-aquamarine: #0CCAD8,
+  sd-aquamarine: #03AAB6,
+
+  // 紫色系列
+  extra-light-purple: #FAC7FF,
+  light-purple: #E56EC9,
+  primary-purple: #BB24B3,
+  sd-purple: #800080,
+
+  // 基础界面颜色
+  bg-color: #e8f4ff,
+  text-color: #2c3e50,
+  border-color: #b3d8ff,
+  hover-color: #d9ecff,
+  menu-text-color: #2c3e50,
+  menu-active-color: #002A72
+);

package/src/styles/themes/dark.scss

@@ -0,0 +1,98 @@
+// 深色主题配置
+$dark-theme: (
+  // 文本颜色
+  primary-text: #FFFFFF,
+  sd-text: #E8E8E8,
+  td-text: #9F9F9F,
+  fr-text: #606060,
+  disable-text: #646775,
+  click-text: #4188FF,
+  click-disable-text: #77AEE5,
+  white: #FFFFFF,
+
+  // 蓝色系列
+  primary-blue: #4188FF,
+  primary-blue-light: #1E2C60,
+  sd-blue: #A7DBFA,
+  md-blue: #4F9BE8,
+  fr-blue: #1D4993,
+  fifth-blue: #1E2C60,
+
+  // 背景色
+  base-bg: #191B29,
+  sd-bg: #000000,
+  md-bg: #242636,
+  fr-bg: #2C3040,
+  blue-bg: #112653,
+  blue-bg-2: #1E2C60,
+  tg-bg: #191B29,
+  popup-bg: #3E445250,
+  box-shadow-3: 0px 0px 6px 0px #00000072,
+
+  // 边框线
+  primary-line: #505363,
+
+  // 状态颜色
+  success: #A4DB8A,
+  success-light: #0B7046,
+  danger: #FB6E77,
+  danger-light: #90142A,
+  warning: #FBCC30,
+  warning-light: #83630C,
+
+  // 蓝色图表
+  blue-1: #D5EBFF,
+  blue-2: #B3D1FD,
+  blue-3: #87BBFA,
+  blue-4: #5DA3EA,
+  blue-5: #0F548D,
+  blue-6: #033175,
+
+  // 绿色图表
+  green-1: #B3E8D1,
+  green-2: #71D5AE,
+  green-3: #37BF8E,
+  green-4: #1D8A66,
+  green-5: #0B7046,
+  green-6: #004C23,
+
+  // 青色图表
+  aquamarine-1: #DEFFFA,
+  aquamarine-2: #BCF0E7,
+  aquamarine-3: #9CDFDF,
+  aquamarine-4: #5BB8BF,
+  aquamarine-5: #0A8089,
+  aquamarine-6: #0C5B64,
+
+  // 黄色图表
+  yellow-1: #FFF0D6,
+  yellow-2: #F9DEA7,
+  yellow-3: #EDC66B,
+  yellow-4: #D19E09,
+  yellow-5: #83630C,
+  yellow-6: #533D01,
+
+  // 橙色图表
+  orange-1: #FFD8AD,
+  orange-2: #FFB97D,
+  orange-3: #EB955B,
+  orange-4: #C8662B,
+  orange-5: #903C0B,
+  orange-6: #612100,
+
+  // 红色图表
+  red-1: #FFD6D8,
+  red-2: #FFB5B8,
+  red-3: #FF9195,
+  red-4: #E35661,
+  red-5: #90142A,
+  red-6: #500113,
+
+  // 紫色图表
+  purple-1: #FFDBFD,
+  purple-2: #E5A5DB,
+  purple-3: #F092D7,
+  purple-4: #F36FC6,
+  purple-5: #962772,
+  purple-6: #720450
+);

package/src/styles/themes/index.scss

@@ -0,0 +1,34 @@
+@import './variables.scss';
+
+// 全局主题样式
+// body {
+//   background-color: $sd-bg;
+//   color: $primary-text;
+//   transition: all 0.3s ease;
+// }
+
+// 下拉菜单主题
+.el-dropdown-menu {
+  background-color: $base-bg;
+  border-color: $primary-line;
+
+  .el-dropdown-menu__item {
+    color: $primary-text;
+
+    &:hover {
+      background-color: $blue-bg;
+    }
+
+    &.is-active {
+      color: $primary-blue;
+      background-color: $blue-bg;
+    }
+  }
+}
+
+// 通用悬停效果
+.hover-effect {
+  &:hover {
+    background-color: $blue-bg;
+  }
+}

package/src/styles/themes/light.scss

@@ -0,0 +1,98 @@
+// 浅色主题配置
+$light-theme: (
+  // 文本颜色
+  primary-text: #000000,
+  sd-text: #505363,
+  td-text: #909399,
+  fr-text: #A6AEBE,
+  disable-text: #D4D9E2,
+  click-text: #006EDC,
+  click-disable-text: #B3D5F7,
+  white: #FFFFFF,
+
+  // 蓝色系列
+  primary-blue: #006EDC,
+  primary-blue-light: #ECF5FF,
+  sd-blue: #002A72,
+  md-blue: #4F9BE8,
+  fr-blue: #79BBFF,
+  fifth-blue: #BEE6FF,
+
+  // 背景色
+  base-bg: #FFFFFF,
+  sd-bg: #ECEDF0,
+  md-bg: #FBFCFD,
+  fr-bg: #F4F5F7,
+  blue-bg: #F1F6FF,
+  blue-bg-2: #87BBFA,
+  tg-bg: #f4f4f5,
+  popup-bg: #00000050,
+  box-shadow-3: 1px 3px 6px 0px #00000016,
+
+  // 边框线
+  primary-line: #E4E7ED,
+
+  // 状态颜色
+  success: #2BA471,
+  success-light: #E3F9E9,
+  danger: #D54941,
+  danger-light: #FFE1DC,
+  warning: #F5BA18,
+  warning-light: #FFF0D6,
+
+  // 蓝色图表
+  blue-1: #194F9F,
+  blue-2: #1B73BB,
+  blue-3: #5DA3EA,
+  blue-4: #87BBFA,
+  blue-5: #B3D1FD,
+  blue-6: #D5EBFF,
+
+  // 绿色图表
+  green-1: #005334,
+  green-2: #006C45,
+  green-3: #2BA471,
+  green-4: #56C08D,
+  green-5: #AFE6CA,
+  green-6: #E3F9E9,
+
+  // 青色图表
+  aquamarine-1: #23737C,
+  aquamarine-2: #03AAB6,
+  aquamarine-3: #4EC4CD,
+  aquamarine-4: #9CDFDF,
+  aquamarine-5: #BCF0E7,
+  aquamarine-6: #DEFFFA,
+
+  // 黄色图表
+  yellow-1: #654900,
+  yellow-2: #99740F,
+  yellow-3: #D19E09,
+  yellow-4: #EDC66B,
+  yellow-5: #F9DEA7,
+  yellow-6: #FFF0D6,
+
+  // 橙色图表
+  orange-1: #5D2802,
+  orange-2: #994C0A,
+  orange-3: #C47738,
+  orange-4: #EAA87E,
+  orange-5: #F6D0B9,
+  orange-6: #FFE8DB,
+
+  // 红色图表
+  red-1: #5E0000,
+  red-2: #841616,
+  red-3: #BC3D37,
+  red-4: #EA6E64,
+  red-5: #F4B4AC,
+  red-6: #FFE1DC,
+
+  // 紫色图表
+  purple-1: #660058,
+  purple-2: #984280,
+  purple-3: #CB6B96,
+  purple-4: #E891BE,
+  purple-5: #F6AFD1,
+  purple-6: #FFDDEA
+);