From af73b52d9054d667ebad38178badb9fd9d6e40cf Mon Sep 17 00:00:00 2001
From: lhj <403133128@qq.com>
Date: Wed, 9 Oct 2024 00:54:27 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96=E5=B1=9E=E6=80=A7=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PropertyEditor.vue | 61 ++++++++++++++++++++++++++-----
 1 file changed, 52 insertions(+), 9 deletions(-)

diff --git a/src/components/PropertyEditor.vue b/src/components/PropertyEditor.vue
index ca23f5f..b755b2a 100644
--- a/src/components/PropertyEditor.vue
+++ b/src/components/PropertyEditor.vue
@@ -1,21 +1,64 @@
 <template>
-  <div>
-    <a-radio-group type="button">
-      <a-radio value="Beijing">Beijing</a-radio>
-      <a-radio value="Shanghai">Shanghai</a-radio>
-      <a-radio value="Guangzhou">Guangzhou</a-radio>
-      <a-radio value="Shenzhen">Shenzhen</a-radio>
-    </a-radio-group>
+  <div style="background-color: #ffffff;padding-left: 16px;padding-right: 16px;">
+
+    <!-- 属性选择器 -->
+    <div style="display: flex;justify-content: center;padding-top: 8px;width: 100%">
+      <a-radio-group size="large" type="button" v-model="selectedOption"
+        style="width: 100%;justify-content: center;text-align: center">
+        <a-radio style="width: 100%;" value="property" default-checked>属性</a-radio>
+        <a-radio style="width: 100%;" value="style">样式</a-radio>
+        <a-radio style="width: 100%;" value="interaction">交互</a-radio>
+      </a-radio-group>
+    </div>
+
+    <!-- tabpannel -->
+    <div style="margin-top: 16px;">
+      <!-- 属性面板 -->
+      <div>
+        <a-input-search placeholder="Please enter something" />
+        <a-space direction="vertical" fill style="margin-top: 8px;">
+          <div style="display: flex;justify-content: space-between;vertical-align: middle;">
+            <span>组件ID</span>
+            <a-input style="width: 150px;" />
+          </div>
+          <div style="display: flex;justify-content: space-between;vertical-align: middle;">
+            <span>是否可见</span>
+            <a-switch />
+          </div>
+          <a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
+            <a-collapse-item header="基本配置" key="1">
+            </a-collapse-item>
+          </a-collapse>
+          <a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
+            <a-collapse-item header="循环" key="1">
+            </a-collapse-item>
+          </a-collapse>
+          <a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
+            <a-collapse-item header="插槽" key="1">
+            </a-collapse-item>
+          </a-collapse>
+          <a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
+            <a-collapse-item header="HTML属性" key="1">
+            </a-collapse-item>
+          </a-collapse>
+          <a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
+            <a-collapse-item header="高级属性" key="1">
+            </a-collapse-item>
+          </a-collapse>
+        </a-space>
+      </div>
+    </div>
+
   </div>
 </template>
 
 <script setup lang="ts">
-import { defineProps, computed } from 'vue';
+import { defineProps, computed, ref } from 'vue';
 
 const props = defineProps({
   scheme: Object
 });
 
-
+const selectedOption = ref('property')
 const scheme = computed(() => props.scheme || '');
 </script>
\ No newline at end of file