feat(bigscreen): support editor

devlive-community · Nov 18, 2024 · 3d17865 · 3d17865
1 parent 17acd5f
commit 3d17865
Show file tree

Hide file tree

Showing 6 changed files with 375 additions and 141 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -5,11 +5,11 @@
     </slot>
 
     <!-- 中间编辑区域 -->
-    <BigScreenEditor ref="editorRef"
-                     :grid-size="20"
-                     :selected-id="selectedId"
-                     @select="handleSelect"
-                     @update:components="handleComponentsUpdate"/>
+    <BigScreenContent ref="editorRef"
+                      :grid-size="20"
+                      :selected-id="selectedId"
+                      @select="handleSelect"
+                      @update:components="handleComponentsUpdate"/>
 
     <!-- 右侧配置面板 -->
     <BigScreenConfigure :selected-component="selectedComponent" @update="handleConfigUpdate"/>
@@ -19,8 +19,8 @@
 <script setup>
 import { computed, ref } from 'vue'
 import BigScreenPanel from "@/ui/bigscreen/BigScreenPanel.vue";
-import BigScreenEditor from "@/ui/bigscreen/BigScreenEditor.vue";
 import BigScreenConfigure from "@/ui/bigscreen/BigScreenConfigure.vue";
+import BigScreenContent from "@/ui/bigscreen/BigScreenContent.vue";
 
 const panels = ref([
   {

diff --git a/src/ui/bigscreen/BigScreenConfigure.vue b/src/ui/bigscreen/BigScreenConfigure.vue
@@ -1,55 +1,48 @@
-# BigScreenConfigure.vue
 <template>
   <div class="w-64 bg-white border-l border-gray-200 p-4">
     <div class="text-lg font-medium mb-4">配置面板</div>
     <template v-if="selectedComponent">
       <div class="space-y-4">
         <!-- 位置配置 -->
+        <!-- Position configuration -->
         <div class="space-y-2">
           <div class="text-sm font-medium text-gray-600">位置</div>
           <div class="grid grid-cols-2 gap-2">
             <div>
               <div class="text-xs text-gray-500 mb-1">X 坐标</div>
-              <input
-                  type="number"
-                  v-model="componentConfig.x"
-                  @input="handleUpdate"
-                  class="w-full px-2 py-1 border border-gray-200 rounded text-sm focus:outline-none focus:border-blue-500"
-              >
+              <input type="number"
+                     class="w-full px-2 py-1 border border-gray-200 rounded text-sm focus:outline-none focus:border-blue-500"
+                     v-model="componentConfig.x"
+                     @input="handleUpdate">
             </div>
             <div>
               <div class="text-xs text-gray-500 mb-1">Y 坐标</div>
-              <input
-                  type="number"
-                  v-model="componentConfig.y"
-                  @input="handleUpdate"
-                  class="w-full px-2 py-1 border border-gray-200 rounded text-sm focus:outline-none focus:border-blue-500"
-              >
+              <input type="number"
+                     class="w-full px-2 py-1 border border-gray-200 rounded text-sm focus:outline-none focus:border-blue-500"
+                     v-model="componentConfig.y"
+                     @input="handleUpdate">
             </div>
           </div>
         </div>
 
         <!-- 大小配置 -->
+        <!-- Size configuration -->
         <div class="space-y-2">
           <div class="text-sm font-medium text-gray-600">大小</div>
           <div class="grid grid-cols-2 gap-2">
             <div>
               <div class="text-xs text-gray-500 mb-1">宽度</div>
-              <input
-                  type="number"
-                  v-model="componentConfig.width"
-                  @input="handleUpdate"
-                  class="w-full px-2 py-1 border border-gray-200 rounded text-sm focus:outline-none focus:border-blue-500"
-              >
+              <input type="number"
+                     class="w-full px-2 py-1 border border-gray-200 rounded text-sm focus:outline-none focus:border-blue-500"
+                     v-model="componentConfig.width"
+                     @input="handleUpdate">
             </div>
             <div>
               <div class="text-xs text-gray-500 mb-1">高度</div>
-              <input
-                  type="number"
-                  v-model="componentConfig.height"
-                  @input="handleUpdate"
-                  class="w-full px-2 py-1 border border-gray-200 rounded text-sm focus:outline-none focus:border-blue-500"
-              >
+              <input type="number"
+                     class="w-full px-2 py-1 border border-gray-200 rounded text-sm focus:outline-none focus:border-blue-500"
+                     v-model="componentConfig.height"
+                     @input="handleUpdate">
             </div>
           </div>
         </div>
@@ -74,6 +67,7 @@ const props = defineProps({
 const emit = defineEmits(['update'])
 
 // 组件配置
+// Component configuration
 const componentConfig = ref({
   x: 0,
   y: 0,
@@ -82,6 +76,7 @@ const componentConfig = ref({
 })
 
 // 监听选中组件变化
+// Watch selected component changes
 watch(() => props.selectedComponent, (newVal) => {
   if (newVal) {
     componentConfig.value = {
@@ -91,11 +86,14 @@ watch(() => props.selectedComponent, (newVal) => {
       height: newVal.height
     }
   }
-}, { deep: true })
+}, {deep: true})
 
 // 更新组件
+// Update component
 const handleUpdate = () => {
-  if (!props.selectedComponent) return
+  if (!props.selectedComponent) {
+    return
+  }
   emit('update', {
     ...props.selectedComponent,
     ...componentConfig.value