光照 输入框

package.json

@@ -32,6 +32,7 @@
     "compressing": "^1.5.1",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.18",
+    "decimal.js": "^10.6.0",
     "echarts": "^6.0.0",
     "electron-store": "8.1.0",
     "electron-updater": "^6.3.9",

src/renderer/src/views/components/headers/components/weather/index.vue

@@ -79,21 +79,28 @@
             <div class="col">
               <span class="label">阴影柔和度</span>
               <el-input
-                class="input height"
+                class="input height custom-number-input with-arrows"
                 type="number"
                 step="0.1"
                 min="0"
                 max="1"
                 v-model="weatherData.darkness"
                 @change="changDarkness"
-              />
+              >
+                <template #suffix>
+                  <div class="custom-arrows">
+                    <div class="arrow-up" @click="incrementValue"></div>
+                    <div class="arrow-down" @click="decrementValue"></div>
+                  </div>
+                </template>
+              </el-input>
             </div>
           </div>
           <div class="row">
             <div class="col">
               <span class="label">倍数</span>
               <el-input
-                class="input height"
+                class="input height custom-number-input with-arrows arrows2"
                 type="number"
                 min="-9999999"
                 max="999999999"
@@ -102,6 +109,10 @@
                 size="small"
               >
                 <template #suffix>
+                  <div class="custom-arrows">
+                    <div class="arrow-up" @click="incrementValue2"></div>
+                    <div class="arrow-down" @click="decrementValue2"></div>
+                  </div>
                   <span>X</span>
                 </template>
               </el-input>
@@ -152,7 +163,8 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, onMounted, onBeforeUnmount } from 'vue'
+import { reactive, onMounted, onBeforeUnmount, watch } from 'vue'
+import { Decimal } from 'decimal.js'
 import { ElMessage } from 'element-plus'
 import TimeLine from './timeLIne'
 import { before } from 'node:test'
@@ -251,6 +263,41 @@ var weatherChange = () => {
     timeline.setSpeed(weatherData.speed)
   }
 }
+watch(
+  () => weatherData.darkness,
+  (newValue) => {
+    if (sunshine) {
+      sunshine.darkness = newValue
+    }
+  }
+)
+var incrementValue = () => {
+  if (weatherData.darkness < 1) {
+    const newDarkness = new Decimal(weatherData.darkness).add(0.1)
+    weatherData.darkness = Math.min(newDarkness, 1)
+  }
+}
+var decrementValue = () => {
+  if (weatherData.darkness > 0) {
+    const newDarkness = new Decimal(weatherData.darkness).sub(0.1)
+    weatherData.darkness = Math.max(newDarkness, 0)
+  }
+}
+
+watch(
+  () => weatherData.speed,
+  (newValue) => {
+    weatherData.currWeather = false
+    sunshine && (sunshine.speed = newValue)
+    timeline.setSpeed(newValue)
+  }
+)
+var incrementValue2 = () => {
+  weatherData.speed = new Decimal(weatherData.speed).add(1).toNumber()
+}
+var decrementValue2 = () => {
+  weatherData.speed = new Decimal(weatherData.speed).sub(1).toNumber()
+}
 var getCurrentTime = () => {
   const now = new Date()
   const hours = String(now.getHours()).padStart(2, '0')
@@ -313,6 +360,7 @@ var clickIcon = (item: any) => {
 }
 
 var changDarkness = () => {
+  console.log('changDarkness')
   sunshine && (sunshine.darkness = weatherData.darkness)
 }
 var changSpeed = () => {
@@ -597,13 +645,66 @@ var shadowChange = () => {
     }
   }
 }
-/* 隐藏Webkit内核浏览器中的上下箭头及白色背景 */
+
-.input ::v-deep(input::-webkit-outer-spin-button),
+input[type='number']::-webkit-outer-spin-button,
-.input ::v-deep(input::-webkit-inner-spin-button) {
+input[type='number']::-webkit-inner-spin-button {
-  -webkit-appearance: none !important;
+  -webkit-appearance: none;
-  appearance: none !important;
+}
-  margin: 0;
+
-  background: none; /* 移除白色背景 */
+/* Firefox */
-  display: none; /* 彻底隐藏元素 */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+.custom-number-input .el-input__inner {
+  line-height: 1px !important;
+}
+
+.custom-number-input.with-arrows {
+  position: relative;
+}
+
+.custom-number-input.with-arrows .custom-arrows {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  z-index: 1;
+}
+.custom-number-input.with-arrows.arrows2 .custom-arrows {
+  right: 17px;
+}
+
+.custom-number-input.with-arrows .arrow-up,
+.custom-number-input.with-arrows .arrow-down {
+  width: 0;
+  height: 0;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.custom-number-input.with-arrows .arrow-up {
+  border-bottom: 6px solid #909399;
+}
+
+.custom-number-input.with-arrows .arrow-down {
+  border-top: 6px solid #909399;
+}
+
+.custom-number-input.with-arrows .arrow-up:hover {
+  border-bottom-color: rgba(var(--color-base1), 1);
+}
+
+.custom-number-input.with-arrows .arrow-down:hover {
+  border-top-color: rgba(var(--color-base1), 1);
+}
+
+/* 确保输入框有足够空间显示自定义箭头 */
+.custom-number-input.with-arrows .el-input__inner {
+  padding-right: 30px;
 }
 </style>