From eeb15f9aa28dec4986770c7f105a8cf913180c10 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 17 Jun 2021 11:46:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BC=96=E8=BE=91=E4=BB=AA=E8=A1=A8?=
 =?UTF-8?q?=E7=9B=98=20=E8=BE=85=E5=8A=A9=E6=A0=8F=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/AttrListExtend.vue      | 128 ++++++++++++++++++
 frontend/src/views/panel/edit/index.vue       |   8 +-
 2 files changed, 133 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/canvas/components/AttrListExtend.vue

diff --git a/frontend/src/components/canvas/components/AttrListExtend.vue b/frontend/src/components/canvas/components/AttrListExtend.vue
new file mode 100644
index 0000000000..37edce3419
--- /dev/null
+++ b/frontend/src/components/canvas/components/AttrListExtend.vue
@@ -0,0 +1,128 @@
+<!-- TODO: 这个页面后续将用 JSX 重构 -->
+<template>
+  <div class="attr-list">
+    <el-form label-width="80px">
+      <el-form-item v-for="(key, index) in styleKeys.filter(item => item != 'rotate')" :key="index" :label="map[key]+':'">
+        <el-color-picker v-if="key == 'borderColor'" v-model="curComponent.style[key]" />
+        <el-color-picker v-else-if="key == 'color'" v-model="curComponent.style[key]" />
+        <el-color-picker v-else-if="key == 'backgroundColor'" v-model="curComponent.style[key]" />
+        <el-select v-else-if="selectKey.includes(key)" v-model="curComponent.style[key]">
+          <template v-if="key == 'textAlign'">
+            <el-option
+              v-for="item in textAlignOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </template>
+          <template v-else-if="key == 'borderStyle'">
+            <el-option
+              v-for="item in borderStyleOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </template>
+          <template v-else>
+            <el-option
+              v-for="item in verticalAlignOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </template>
+        </el-select>
+        <el-input v-else v-model="curComponent.style[key]" type="number" />
+      </el-form-item>
+      <el-form-item v-if="curComponent && !excludes.includes(curComponent.component)" :label="$t('panel.content')">
+        <el-input v-model="curComponent.propValue" type="textarea" />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      excludes: ['Picture', 'Group', 'user-view'], // 这些组件不显示内容
+      textAlignOptions: [
+        {
+          label: this.$t('panel.text_align_left'),
+          value: 'left'
+        },
+        {
+          label: this.$t('panel.text_align_center'),
+          value: 'center'
+        },
+        {
+          label: this.$t('panel.text_align_right'),
+          value: 'right'
+        }
+      ],
+      borderStyleOptions: [
+        {
+          label: this.$t('panel.border_style_solid'),
+          value: 'solid'
+        },
+        {
+          label: this.$t('panel.border_style_dashed'),
+          value: 'dashed'
+        }
+      ],
+      verticalAlignOptions: [
+        {
+          label: this.$t('panel.vertical_align_top'),
+          value: 'top'
+        },
+        {
+          label: this.$t('panel.vertical_align_middle'),
+          value: 'middle'
+        },
+        {
+          label: this.$t('panel.vertical_align_bottom'),
+          value: 'bottom'
+        }
+      ],
+      selectKey: ['textAlign', 'borderStyle', 'verticalAlign'],
+      map: {
+        left: this.$t('panel.left'),
+        top: this.$t('panel.top'),
+        height: this.$t('panel.height'),
+        width: this.$t('panel.width'),
+        color: this.$t('panel.color'),
+        backgroundColor: this.$t('panel.backgroundColor'),
+        borderStyle: this.$t('panel.borderStyle'),
+        borderWidth: this.$t('panel.borderWidth'),
+        borderColor: this.$t('panel.borderColor'),
+        borderRadius: this.$t('panel.borderRadius'),
+        fontSize: this.$t('panel.fontSize'),
+        fontWeight: this.$t('panel.fontWeight'),
+        lineHeight: this.$t('panel.lineHeight'),
+        letterSpacing: this.$t('panel.letterSpacing'),
+        textAlign: this.$t('panel.textAlign'),
+        opacity: this.$t('panel.opacity'),
+        verticalAlign: this.$t('panel.verticalAlign')
+      }
+    }
+  },
+  computed: {
+    styleKeys() {
+      // console.log(this.$store.state.curComponent.style)
+      return this.$store.state.curComponent ? Object.keys(this.$store.state.curComponent.style) : []
+    },
+    curComponent() {
+      return this.$store.state.curComponent
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .attr-list {
+    overflow: auto;
+    padding: 5px;
+    padding-top: 0;
+    height: 100%;
+  }
+</style>
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 9f4cb6853e..5ded3ed5eb 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -105,7 +105,7 @@
         </div>
       </de-main-container>
       <de-aside-container v-if="aidedButtonActive" :class="aidedButtonActive ? 'show' : 'hidden'" class="style-aside">
-        <AttrList v-if="curComponent" />
+        <AttrListExtend v-if="curComponent" />
         <p v-else class="placeholder">{{ $t('panel.select_component') }}</p>
       </de-aside-container>
 
@@ -162,6 +162,7 @@ import { findOne } from '@/api/panel/panel'
 import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen'
 import Preview from '@/components/canvas/components/Editor/Preview'
 import AttrList from '@/components/canvas/components/AttrList'
+import AttrListExtend from '@/components/canvas/components/AttrListExtend'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import AssistComponent from '@/views/panel/AssistComponent'
 
@@ -187,6 +188,7 @@ export default {
     PreviewFullScreen,
     Preview,
     AttrList,
+    AttrListExtend,
     AssistComponent
   },
   data() {
@@ -586,8 +588,8 @@ export default {
   background-color: #ffffff!important;
 }
 .style-aside{
-  width: 200px;
-  max-width:200px!important;
+  width: 250px;
+  max-width:250px!important;
   border: 1px solid #E6E6E6;
   padding: 10px;
   transition: all 0.3s;