diff --git a/manager/src/views/page-decoration/wap/controls/ColorField.vue b/manager/src/views/page-decoration/wap/controls/ColorField.vue
new file mode 100644
index 000000000..3b6bcd8a9
--- /dev/null
+++ b/manager/src/views/page-decoration/wap/controls/ColorField.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="ctrl-row">
+    <div class="ctrl-label">{{ label }}</div>
+    <div class="ctrl-body">
+      <el-color-picker
+        :model-value="modelValue"
+        @update:model-value="onInput"
+      />
+      <el-input
+        :model-value="modelValue"
+        class="ctrl-color-input"
+        placeholder="#FFFFFF"
+        @update:model-value="onInput"
+      />
+      <el-button link type="primary" @click="onReset">重置</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ColorField",
+  props: {
+    modelValue: { type: String, default: "" },
+    defaultValue: { type: String, default: "" },
+    label: { type: String, default: "" },
+  },
+  emits: ["update:modelValue"],
+  methods: {
+    onInput(val) {
+      this.$emit("update:modelValue", val);
+    },
+    onReset() {
+      this.$emit("update:modelValue", this.defaultValue);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./field-common.scss";
+</style>
diff --git a/manager/src/views/page-decoration/wap/controls/SegmentField.vue b/manager/src/views/page-decoration/wap/controls/SegmentField.vue
new file mode 100644
index 000000000..b9e526563
--- /dev/null
+++ b/manager/src/views/page-decoration/wap/controls/SegmentField.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="ctrl-row">
+    <div class="ctrl-label">{{ label }}</div>
+    <div class="ctrl-body">
+      <el-radio-group
+        :model-value="modelValue"
+        @update:model-value="onInput"
+      >
+        <el-radio-button
+          v-for="opt in options"
+          :key="opt.value"
+          :value="opt.value"
+          >{{ opt.label }}</el-radio-button
+        >
+      </el-radio-group>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SegmentField",
+  props: {
+    modelValue: { type: String, default: "" },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    label: { type: String, default: "" },
+  },
+  emits: ["update:modelValue"],
+  methods: {
+    onInput(val) {
+      this.$emit("update:modelValue", val);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./field-common.scss";
+</style>
diff --git a/manager/src/views/page-decoration/wap/controls/SliderField.vue b/manager/src/views/page-decoration/wap/controls/SliderField.vue
new file mode 100644
index 000000000..0ee688600
--- /dev/null
+++ b/manager/src/views/page-decoration/wap/controls/SliderField.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="ctrl-row">
+    <div class="ctrl-label">{{ label }}</div>
+    <div class="ctrl-body">
+      <el-slider
+        class="ctrl-slider"
+        :model-value="modelValue"
+        :min="min"
+        :max="max"
+        @update:model-value="onInput"
+      />
+      <el-input-number
+        class="ctrl-number"
+        :model-value="modelValue"
+        :min="min"
+        :max="max"
+        size="small"
+        @update:model-value="onInput"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SliderField",
+  props: {
+    modelValue: { type: Number, default: 0 },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    label: { type: String, default: "" },
+  },
+  emits: ["update:modelValue"],
+  methods: {
+    onInput(val) {
+      this.$emit("update:modelValue", val);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./field-common.scss";
+
+.ctrl-body {
+  flex-wrap: nowrap;
+}
+
+.ctrl-slider {
+  flex: 1;
+  min-width: 0;
+}
+
+.ctrl-number {
+  width: 110px;
+  flex-shrink: 0;
+}
+</style>
diff --git a/manager/src/views/page-decoration/wap/controls/field-common.scss b/manager/src/views/page-decoration/wap/controls/field-common.scss
new file mode 100644
index 000000000..953be6693
--- /dev/null
+++ b/manager/src/views/page-decoration/wap/controls/field-common.scss
@@ -0,0 +1,27 @@
+.ctrl-row {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 16px;
+  gap: 12px;
+}
+
+.ctrl-label {
+  width: 72px;
+  flex-shrink: 0;
+  line-height: 32px;
+  color: #606266;
+  font-size: 13px;
+}
+
+.ctrl-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.ctrl-color-input {
+  width: 110px;
+}