feat: 修改动态dependency

src/renderer/src/lvgl-widgets/button-matrix/index.ts

@@ -226,8 +226,8 @@ export default {
             : [
                 {
                   label: '内边距',
-                  field: 'shadow',
-                  valueType: 'shadow'
+                  field: 'padding',
+                  valueType: 'padding'
                 },
                 {
                   label: '间距',

src/renderer/src/views/designer/config/PropertyConfig.vue

@@ -412,6 +412,215 @@
                       :key="dependency.field"
                       :label="dependency.label"
                     >
+                      <!-- 背景颜色 -->
+                      <template v-if="dependency.field === 'background'">
+                        <template
+                          v-if="
+                            data.style?.[styleIndex]?.[dependency.field]?.hasOwnProperty('color')
+                          "
+                        >
+                          <div class="flex [flex-direction:column] flex-1">
+                            <div class="flex flex-1">
+                              <el-color-picker
+                                v-model="data.style[styleIndex][dependency.field].color"
+                                :show-alpha="true"
+                                :predefine="predefineColors"
+                              />
+                              <div class="ml-10px">
+                                {{ data.style[styleIndex][dependency.field].color }}
+                              </div>
+                            </div>
+
+                            <template
+                              v-if="
+                                data.style?.[styleIndex]?.[dependency.field]?.hasOwnProperty(
+                                  'image'
+                                )
+                              "
+                            >
+                              <div class="flex flex-1 mt-10px">
+                                <div class="w-32px h-32px bg-#cccc mr-10px"></div>
+                                <el-color-picker
+                                  v-model="data.style[styleIndex][dependency.field].image.color"
+                                  :show-alpha="true"
+                                  :predefine="predefineColors"
+                                />
+                                <div class="ml-10px">
+                                  {{ data.style[styleIndex][dependency.field].image.color }}
+                                </div>
+                              </div>
+                            </template>
+                          </div>
+                        </template>
+                      </template>
+
+                      <!-- 字体 -->
+                      <div v-if="dependency.field === 'text'" class="w-full">
+                        <div class="flex flex-1 gap-10px mb-10px">
+                          <el-color-picker
+                            v-model="data.style[styleIndex][dependency.field].color"
+                            :show-alpha="true"
+                            :predefine="predefineColors"
+                          />
+                          <el-input-number
+                            v-model="data.style[styleIndex][dependency.field].size"
+                            :min="0"
+                            placeholder="字体大小"
+                            class="flex-1"
+                          />
+                        </div>
+                        <div class="flex flex-1 gap-10px mb-10px">
+                          <el-select
+                            v-model="data.style[styleIndex][dependency.field].weight"
+                            placeholder="字体加粗"
+                          >
+                            <el-option
+                              v-for="weight in textWeight"
+                              :key="weight.value"
+                              :label="weight.label"
+                              :value="weight.value"
+                            />
+                          </el-select>
+                          <el-select
+                            v-model="data.style[styleIndex][dependency.field].family"
+                          ></el-select>
+                        </div>
+                        <el-select
+                          v-model="data.style[styleIndex][dependency.field].align"
+                          placeholder="对齐方式"
+                        >
+                          <el-option
+                            v-for="align in textAlign"
+                            :key="align.value"
+                            :label="align.label"
+                            :value="align.value"
+                          />
+                        </el-select>
+                      </div>
+
+                      <!-- 边框 -->
+                      <div v-if="dependency.field === 'border'" class="w-full">
+                        <div class="flex flex-1 gap-10px mb-10px">
+                          <el-input-number
+                            v-model="data.style[styleIndex][dependency.field].width"
+                            placeholder="边框大小"
+                            class="flex-1"
+                            :min="0"
+                          />
+                          <el-color-picker
+                            v-model="data.style[styleIndex][dependency.field].color"
+                            :show-alpha="true"
+                            :predefine="predefineColors"
+                          />
+                        </div>
+                        <div class="flex flex-1 gap-10px">
+                          <el-select
+                            v-model="data.style[styleIndex][dependency.field].side"
+                            multiple
+                            collapse-tags
+                            class="flex-1"
+                          >
+                            <el-option
+                              v-for="sides in borderSides"
+                              :key="sides.value"
+                              :label="sides.label"
+                              :value="sides.value"
+                            />
+                          </el-select>
+                          <el-input-number
+                            v-model="data.style[styleIndex][dependency.field].radius"
+                            placeholder="圆角大小"
+                            class="flex-1"
+                            :min="0"
+                          />
+                        </div>
+                      </div>
+                      <!-- 阴影 -->
+                      <div v-if="dependency.field === 'shadow'" class="w-full">
+                        <el-color-picker
+                          v-model="data.style[styleIndex][dependency.field].color"
+                          :show-alpha="true"
+                          :predefine="predefineColors"
+                          class="mb-10px"
+                        />
+                        <div class="flex flex-1 gap-10px mb-10px">
+                          <el-input-number
+                            v-model="data.style[styleIndex][dependency.field].x"
+                            placeholder="水平偏移"
+                            class="flex-1"
+                            :min="0"
+                          />
+                          <el-input-number
+                            v-model="data.style[styleIndex][dependency.field].y"
+                            placeholder="垂直偏移"
+                            class="flex-1"
+                            :min="0"
+                          />
+                        </div>
+                        <div class="flex flex-1 gap-10px">
+                          <el-input-number
+                            v-model="data.style[styleIndex][dependency.field].width"
+                            placeholder="模糊半径"
+                            class="flex-1"
+                            :min="0"
+                          />
+
+                          <el-input-number
+                            v-model="data.style[styleIndex][dependency.field].spread"
+                            placeholder="阴影扩展半径"
+                            class="flex-1"
+                            :min="0"
+                          />
+                        </div>
+                      </div>
+                      <!-- 内边距 -->
+                      <div v-if="dependency.field === 'padding'" class="w-full">
+                        <div class="flex flex-1 gap-10px mb-10px">
+                          <el-input-number
+                            v-model="data.style[styleIndex][dependency.field].top"
+                            placeholder="内部上边距"
+                            class="flex-1"
+                            :min="0"
+                          />
+                          <el-input-number
+                            v-model="data.style[styleIndex][dependency.field].right"
+                            placeholder="内部右边距"
+                            class="flex-1"
+                            :min="0"
+                          />
+                        </div>
+                        <div class="flex flex-1 gap-10px">
+                          <el-input-number
+                            v-model="data.style[styleIndex][dependency.field].bottom"
+                            placeholder="内部下边距"
+                            class="flex-1"
+                            :min="0"
+                          />
+
+                          <el-input-number
+                            v-model="data.style[styleIndex][dependency.field].left"
+                            placeholder="内部左边距"
+                            class="flex-1"
+                            :min="0"
+                          />
+                        </div>
+                      </div>
+                      <!-- 间距 -->
+                      <div v-if="dependency.field === 'gap'" class="w-full flex flex-1 gap-10px">
+                        <el-input-number
+                          v-model="data.style[styleIndex][dependency.field].row"
+                          placeholder="横向"
+                          class="flex-1"
+                          :min="0"
+                        />
+
+                        <el-input-number
+                          v-model="data.style[styleIndex][dependency.field].column"
+                          placeholder="纵向"
+                          class="flex-1"
+                          :min="0"
+                        />
+                      </div>
                     </el-form-item>
                   </template>
                 </template>