From a2a3a31df56c764328231fbd582f980bebdd0c27 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Fri, 28 Jan 2022 21:17:49 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=9B=BE?=
 =?UTF-8?q?=E5=B1=82=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ContentLayers/components/ListItem/index.ts  |  3 +++
 .../ContentLayers/components/ListItem/index.vue | 17 +++++++++++++++++
 src/views/chart/ContentLayers/index.vue         | 10 +++++++++-
 3 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 src/views/chart/ContentLayers/components/ListItem/index.ts
 create mode 100644 src/views/chart/ContentLayers/components/ListItem/index.vue

diff --git a/src/views/chart/ContentLayers/components/ListItem/index.ts b/src/views/chart/ContentLayers/components/ListItem/index.ts
new file mode 100644
index 00000000..9e177f8e
--- /dev/null
+++ b/src/views/chart/ContentLayers/components/ListItem/index.ts
@@ -0,0 +1,3 @@
+import ListItem from './index.vue'
+
+export { ListItem }
diff --git a/src/views/chart/ContentLayers/components/ListItem/index.vue b/src/views/chart/ContentLayers/components/ListItem/index.vue
new file mode 100644
index 00000000..ecf83486
--- /dev/null
+++ b/src/views/chart/ContentLayers/components/ListItem/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="go-content-layers-list-item">
+    <n-space>
+      <div>图片</div>
+      <b-text>
+        文字
+      </b-text>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+@include go(content-layers-list-items) {
+}
+</style>
diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue
index 248f8487..88ed37da 100644
--- a/src/views/chart/ContentLayers/index.vue
+++ b/src/views/chart/ContentLayers/index.vue
@@ -11,7 +11,9 @@
         <component :is="LayersIcon" />
       </n-icon>
     </template>
+
     <!-- 图层内容 -->
+    <ListItem v-for="item in chartEditStore.getComponentList" :key="item.id"/>
   </ContentBox>
 </template>
 
@@ -19,19 +21,25 @@
 import { ContentBox } from '../ContentBox/index'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { ListItem } from './components/ListItem/index'
 import { icon } from '@/plugins'
+
 const { LayersIcon } = icon.ionicons5
 const chartLayoutStore = useChartLayoutStore()
 
+const chartEditStore = useChartEditStoreStore()
+
 const backHandle = () => {
   chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYERS, false)
 }
 </script>
 
 <style lang="scss" scoped>
-$wight: 200px;
+$wight: 150px;
 @include go(content-layers) {
   width: $wight;
+  flex-shrink: 0;
   overflow: hidden;
   @extend .go-transition;
   &.scoped {