seeder-st2110-components 1.5.10 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seeder-st2110-components",
-  "version": "1.5.10",
+  "version": "1.6.1",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/styles/index.less

@@ -176,10 +176,6 @@
   }
 }
 
-.flex {
-  display: flex;
-}
-
 .block {
   display: block;
 }
@@ -189,6 +185,71 @@
   margin-right: auto;
 }
 
+.common-header {
+  padding: 0 16px;
+  height: 50px;
+  background-color: #1F1F1F;
+  color: rgba(255, 255, 255, 0.85);
+  .header-controls {
+    display: flex;
+    gap: 12px;
+  }
+  .control-icon {
+    width: 32px;
+    padding-inline: 6px;
+    padding-block: 2px;
+  }
+}
+
+.usage-container {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  color: rgba(255, 255, 255, 0.65);
+  
+  .usage-item-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 90px; /* 固定宽度 */
+    min-width: 90px; /* 防止压缩 */
+    max-width: 90px; /* 防止扩展 */
+    position: relative;
+    padding: 0 8px;
+    flex-shrink: 0; /* 禁止收缩 */
+  }
+
+  /* 使用伪元素分隔线 */
+  .usage-item-wrapper:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1px;
+    height: 16px;
+    background: rgba(253, 253, 253, 0.42);
+  }
+
+  .usage-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    width: 100%;
+    justify-content: center;
+  }
+
+  .usage-value {
+    display: inline-block;
+    min-width: 2.5rem; /* 40px */
+    text-align: right;
+    font-family: inherit;
+    font-variant-numeric: inherit;
+    letter-spacing: 0.5px; /* 字母间距，使数字更清晰 */
+  }
+}
+
 .text-xl {
   font-size: 1.25rem; /* 20px */
   line-height: 1.75rem; /* 28px */
@@ -208,18 +269,30 @@
   color: rgb(163 163 163);
 }
 
-.inline-block {
-  display: inline-block;
-}
-
-.w-10 {
-  width: 2.5rem; /* 40px */
-}
-
-.text-center {
-  text-align: center;
-}
-
 .hidden {
   display: none;
+}
+
+.draggable-number-input {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 4px 11px;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 14px;
+  line-height: 1.5714285714285714;
+  list-style: none;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  min-width: 0;
+  border-radius: 3px;
+  transition: all 0.2s;
+  background: #141414;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #424242;
+  &:focus-visible {
+    outline: none !important;
+  }
 }