feat(colorPicker): 标题栏颜色配置

app/web/page/editor/component/DynamicForm/component/ColorSelector/index.vue

 <template>
-  <div class="color-selector">
-    <Input class="color-selector-input" v-model="color" placeholder="请输入" @input="change"></Input>
-    <ColorPicker placement="bottom-end" v-model="color" alpha @on-active-change="change($event)" @on-change="change($event)" />
+  <div>
+    <div class="color-selector-gradient" v-if="gradient" :class="{ active: showToColor }">
+      <div class="color-selector">
+        <Input class="color-selector-input" v-model="color" placeholder="请输入" @input="change"></Input>
+        <ColorPicker placement="bottom-end" v-model="color" :alpha="alpha" @on-active-change="change($event)" @on-change="change($event)" />
+      </div>
+      <div class="color-selector-switch" @click="showToColor = !showToColor">
+          <Icon type="ios-arrow-forward" />
+      </div>
+      <div class="color-selector" v-if="showToColor">
+        <Input class="color-selector-input" v-model="toColor" placeholder="请输入" @input="change"></Input>
+        <ColorPicker placement="bottom-end" v-model="toColor" :alpha="alpha" @on-active-change="change($event, 'to')" @on-change="change($event, 'to')" />
+      </div>
+    </div>
+    <div class="color-selector" v-else>
+      <Input class="color-selector-input" v-model="color" placeholder="请输入" @input="change"></Input>
+      <ColorPicker placement="bottom-end" v-model="color" :alpha="alpha" @on-active-change="change($event)" @on-change="change($event)" />
+    </div>
   </div>
 </template>
 <script>
   export default {
     props: {
-      value: String,
+      value: {
+        type: [String, Array],
+        default: ''
+      },
+      gradient: Boolean,
+      alpha: {
+        type: Boolean,
+        default: true
+      }
     },
     data() {
       return {
+        showToColor: false,
         color: this.value || '',
+        toColor: '',
       }
     },
-    created() {
-      console.log(this.color);
-    },
     watch: {
       value(val) {
-        this.color = val;
+        if (Array.isArray(val)) {
+          this.color = val[0];
+          this.toColor = val[1];
+        } else {
+          this.color = val;
+        }
+      },
+      showToColor(val) {
+        if (val && this.toColor) {
+          this.$emit('input', [this.color, this.toColor]);
+        } else {
+          this.$emit('input', this.color);
+        }
       }
     },
     methods: {
-      change(val) {
-        console.log('color', val);
-        this.$emit('input', val);
+      change(val, type) {
+        if (type === 'to') {
+          this.$emit('input', [this.color, this.toColor]);
+        } else {
+          this.$emit('input', val);
+        }
       }
     }
   }
@@ -35,7 +72,57 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-
+    &-gradient {
+      position: relative;
+      .color-selector {
+        padding-left: 28px;
+      }
+      &.active {
+        .color-selector-switch {
+          position: relative;
+          top: 0;
+          &::before {
+            display: block;
+          }
+          .ivu-icon {
+            transform: rotate(90deg);
+            position: relative;
+          }
+        }
+      }
+    }
+    &-switch {
+      position: absolute;
+      top: 5px;
+      left: 0;
+      .ivu-icon {
+        position: absolute;
+        z-index: 2;
+        font-size: 16px;
+        width: 20px;
+        height: 20px;
+        line-height: 21px;
+        text-align: center;
+        margin-right: 5px;
+        cursor: pointer;
+        background-color: #f5f5f5;
+      }
+      &::before {
+        position: absolute;
+        z-index: 1;
+        display: none;
+        content: ' ';
+        top: 0;
+        bottom: 0;
+        left: 10px;
+        margin: auto;
+        height: 65px;
+        width: 16px;
+        border-color: #e8e8e8;
+        border-width: 1px 0 1px 1px;
+        border-style: solid;
+      }
+    }
     &-input {
       width: 100px !important;
       flex-basis: 100px !important;

app/web/page/editor/component/DynamicPageForm/index.ts

@@ -10,7 +10,7 @@ import Number from '../DynamicForm/component/Number/index.vue';
 import FormList from '../DynamicForm/component/FormList/index.vue';
 import { resizeDiv, getStyle } from '@/service/utils.service';
 
-@Component({ components: { Upload, ColorSelector, BaseSelect, Textarea, Number, FormList }, name: 'DynamicForm' })
+@Component({ components: { Upload, ColorSelector, BaseSelect, Textarea, Number, FormList }, name: 'DynamicPageForm' })
 export default class DynamicPageForm extends Mixins(ContextMenuMixin) {
   @Getter('pageData') pageData;
 
@@ -31,6 +31,15 @@ export default class DynamicPageForm extends Mixins(ContextMenuMixin) {
   ];
 
   propsSchame: object[] = [
+    {
+      key: 'titleBgColor',
+      name: '标题栏  背景色',
+      type: 'ColorSelector',
+      props: {
+        gradient: true,
+        alpha: false
+      }
+    },
     {
       key: 'showPageBottomTip',
       name: '底部提示',

app/web/page/editor/component/DynamicPageForm/index.vue

@@ -5,7 +5,7 @@
       <h3>基础属性</h3>
       <template v-for="(item, index) in propsSchame">
         <FormItem class="Df-component-formitem" :label="item.name" >
-          <component :is="item.type" :options="item.options"  v-model="propsForm[item.key]"  :formControl="item.formControl" />
+          <component :is="item.type" :options="item.options" v-bind="item.props" v-model="propsForm[item.key]"  :formControl="item.formControl" />
         </FormItem>
       </template>
     </Form>
@@ -13,7 +13,7 @@
       <h3>基础样式</h3>
       <template v-for="(item, index) in commonStyleSchame">
         <FormItem class="Df-component-formitem" :label="item.name" >
-          <component :is="item.type" :options="item.options"  v-model="commonStyleForm[item.key]" />
+          <component :is="item.type" :options="item.options" v-bind="item.props" v-model="commonStyleForm[item.key]" />
         </FormItem>
       </template>
     </Form>

app/web/page/store/modules/editor/state.ts

@@ -79,9 +79,10 @@ export const defaultState = {
     page: {
       commonStyle: {
         backgroundColor: '#f7f8fa',
-        backgroundImage: ''
+        backgroundImage: '',
       },
       props: {
+        titleBgColor: '#fff',
         showPageBottomTip: true,
         pageBottomTxt: '没有更多啦～',
         pageBottomColor: '#fff',

bin/apollo.js

@@ -8,7 +8,7 @@ const apollo = require('@qg/apollo-nodejs');
 const npm = require("npm");
 npm.load(() => {
   apollo.load({
-    appId: 'quantum-block-h5',
+    appId: 'quantum-blocks',
     configPath: path.resolve(__dirname, '../config'),
   }).then(() => {
     const { api, qiniu } = require(path.resolve('./config/apollo.json'));

bin/server.js

@@ -7,7 +7,7 @@ const apollo = require('@qg/apollo-nodejs');
 const npm = require("npm");
 npm.load(() => {
   apollo.load({
-    appId: 'quantum-block-h5',
+    appId: 'quantum-blocks',
     configPath: path.resolve(__dirname, '../config'),
   }).then(() => {
     const { api, qiniu } = require(path.resolve('./config/apollo.json'));