chore: 优化信息面板风格

packages/editor/src/components/layout/components/Border.vue

@@ -1,17 +1,5 @@
 <template>
   <div v-if="store.current.style">
-    <el-row :gutter="10">
-      <el-col :span="10">边框颜色:</el-col>
-      <el-col :span="14">
-        <ColorPicker v-model="store.current.style.borderColor" />
-      </el-col>
-    </el-row>
-    <el-row :gutter="10">
-      <el-col :span="10">边框宽度:</el-col>
-      <el-col :span="14">
-        <InputNumber v-model="store.current.style.borderWidth" />
-      </el-col>
-    </el-row>
     <el-row :gutter="10">
       <el-col :span="10">边框风格:</el-col>
       <el-col :span="14">
@@ -26,14 +14,27 @@
       </el-col>
     </el-row>
 
+    <el-row :gutter="10">
+      <el-col :span="10">边框颜色:</el-col>
+      <el-col :span="14">
+        <ColorPicker v-model="store.current.style.borderColor" />
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="10">
+      <el-col :span="10">边框宽度:</el-col>
+      <el-col :span="14">
+        <InputNumber v-model="store.current.style.borderWidth" />
+      </el-col>
+    </el-row>
     <el-row :gutter="10">
       <el-col :span="10">边框半径:</el-col>
       <el-col :span="14">
         <InputNumber v-model="store.current.style.borderRadius" />
       </el-col>
     </el-row>
+
   </div>
-
 </template>
 
 <script setup lang='ts'>
@@ -42,20 +43,20 @@ import InputNumber from './InputNumber.vue'
 import ColorPicker from './ColorPicker.vue'
 import { useEditorStore } from '@es-drager/editor/src/store'
 const store = useEditorStore()
-
 const borderStyleList = [
   { label: '实线', value: 'solid' },
   { label: '虚线', value: 'dashed' },
   { label: '点线', value: 'dotted' }
 ]
 const borderStyle = computed({
-  get: () => store.current.style!.borderStyle || 'solid',
+  get: () => {
+    if (!store.current.style!.borderStyle) {
+      store.current.style!.borderStyle = 'solid'
+    }
+    return store.current.style!.borderStyle || 'solid'
+  },
   set: (val) => {
     store.current.style!.borderStyle = val
   }
 })
 </script>
-
-<style lang='scss' scoped>
-
-</style>

packages/editor/src/components/layout/components/ColorPicker.vue

@@ -1,8 +1,12 @@
 <template>
-  <el-color-picker show-alpha :predefine="predefineColors" />
+  <el-color-picker :popper-class="popperClassName" show-alpha :predefine="predefineColors" />
 </template>
 
 <script setup lang='ts'>
+import { onMounted } from 'vue'
+import { useId } from '../../../utils'
+
+const popperClassName = useId() + '-picker'
 const predefineColors = [
   '#ff4500',
   '#ff8c00',
@@ -19,5 +23,13 @@ const predefineColors = [
   'hsla(209, 100%, 56%, 0.73)',
   '#c7158577',
 ]
+
+onMounted(() => {
+  const popper = document.querySelector(`.${popperClassName}`)
+  if (popper) {
+    // 阻止popper点击事件冒泡
+    popper.addEventListener('click', (e) => e.stopPropagation())
+  }
+})
 </script>
 

packages/editor/src/components/layout/components/InputNumber.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="es-input-number">
+  <div class="es-input-number" :class="{ 'has-prefix': prefix || $slots.prefix }">
     <div class="es-input-number-prefix">
       <slot name="prefix">
         <template v-if="prefix">{{ prefix }}:</template>
@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang='ts'>
-const props = defineProps({
+defineProps({
   prefix: {
     type: String
   }
@@ -22,11 +22,15 @@ const props = defineProps({
   position: relative;
   :deep(.el-input-number) {
     width: 100%;
+  }
+}
+.has-prefix {
+  :deep(.el-input-number) {
     .el-input__inner {
       padding-left: 20px;
     }
   }
-  &-prefix {
+  .es-input-number-prefix {
     display: flex;
     align-items: center;
     left: 0;

packages/editor/src/components/layout/components/Shadow.vue

@@ -0,0 +1,66 @@
+
+
+<template>
+  <div v-if="store.current.style">
+    <el-row :gutter="10">
+      <el-col :span="10">开启阴影:</el-col>
+      <el-col :span="14">
+        <div style="display: flex; justify-content: flex-end;"><el-switch v-model="shadow" /></div>
+      </el-col>
+    </el-row>
+
+    <template v-if="shadow">
+      <el-row :gutter="10">
+        <el-col :span="10">水平阴影:</el-col>
+        <el-col :span="14">
+          <el-slider v-model="shadowX" :step="1" :min="-10" :max="10" size="small" @change="onChange" />
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="10">
+        <el-col :span="10">垂直阴影:</el-col>
+        <el-col :span="14">
+          <el-slider v-model="shadowY" :step="1" :min="-10" :max="10" size="small" @change="onChange" />
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="10">
+        <el-col :span="10">模糊距离:</el-col>
+        <el-col :span="14">
+          <el-slider v-model="shadowBlur" :step="1" :min="1" :max="20" size="small" @change="onChange" />
+        </el-col>
+      </el-row>
+      <el-row :gutter="10">
+        <el-col :span="10">阴影颜色:</el-col>
+        <el-col :span="14">
+          <ColorPicker v-model="shadowColor" @change="onChange" />
+        </el-col>
+      </el-row>
+    </template>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, computed, watch } from 'vue'
+import ColorPicker from './ColorPicker.vue'
+import { useEditorStore } from '@es-drager/editor/src/store'
+const store = useEditorStore()
+const shadow = ref(false)
+const shadowX = ref(3)
+const shadowY = ref(3)
+const shadowBlur = ref(1)
+const shadowColor = ref('#808080')
+const boxShadow = computed(() => `${shadowX.value}px ${shadowY.value}px ${shadowBlur.value}px ${shadowColor.value}`)
+function onChange() {
+  store.current.style!.boxShadow = boxShadow.value
+}
+
+watch(shadow, (val) => {
+  if (val) {
+    store.current.style!.boxShadow = boxShadow.value
+  } else {
+    store.current.style!.boxShadow = undefined
+  }
+})
+</script>
+

packages/editor/src/components/layout/info/ElementStyle.vue

@@ -22,7 +22,7 @@
 
       <el-row :gutter="10">
         <el-col :span="10">透明度:</el-col>
-        <el-col :span="14" style="padding: 0 15px;width: 100%;">
+        <el-col :span="14">
           <el-slider
             :modelValue="1"
             :step="0.01"
@@ -33,16 +33,16 @@
           />
         </el-col>
       </el-row>
+
       <el-divider />
+      <TextStyle />
 
+      <el-divider />
       <Border />
 
+      <el-divider />
+      <Shadow />
     </template>
-
-    <el-divider />
-
-    <div style="margin-bottom: 10px;">文本: </div>
-    <TextStyle />
   </el-form>
 </template>
 
@@ -52,6 +52,7 @@ import TextStyle from './TextStyle.vue'
 import { useEditorStore } from '@es-drager/editor/src/store'
 import Background from '../components/Background.vue'
 import Border from '../components/Border.vue'
+import Shadow from '../components/Shadow.vue'
 
 const store = useEditorStore()
 const itemList = ref<CSSProperties[]>([
@@ -121,9 +122,29 @@ function onChange(key: string, value: any) {
   .el-checkbox-group, .el-checkbox-button__inner {
     width: 100%;
   }
-  .el-color-picker.el-tooltip__trigger,
+  .el-color-picker.el-tooltip__trigger {
+    width: 100%;
+  }
   .el-color-picker__trigger {
+    justify-content: flex-start;
     width: 100%;
+    &:after {
+      content: '';
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      background: url('../../../assets/images/color.svg') no-repeat;
+      background-size: contain;
+      margin-left: 4px;
+    }
+    .el-color-picker__color {
+      width: calc(100% - 10px);
+    }
+  }
+
+  .el-slider {
+    padding-right: 10px;
+    --el-slider-button-size: 13px;
   }
 }
 </style>

packages/editor/src/components/layout/info/Info.vue

@@ -57,6 +57,8 @@ watch(() => store.current.selected, () => {
 }
 .es-info-style {
   padding: 10px;
+  height: calc(100% - 40px);
+  overflow-y: auto;
 }
 .es-info-tabs {
   display: flex;