feat: 增加json联动

src/pages/card/components/card-21-json-panel.vue

@@ -40,7 +40,9 @@ const props = defineProps<IProps>()
 const emits = defineEmits(['change', 'close', 'save'])
 
 const handleChange = () => {
-  emits('change', props.jsonData.value)
+  console.log('cacheJson.value', cacheJson.value)
+
+  emits('change', cacheJson.value)
 }
 
 watch(

src/pages/card/components/config-button.vue

@@ -19,11 +19,11 @@
         :key="row + color.key"
         class="circle-btn"
         :class="{
-          active: slide_knob['score' + row] === color.value
+          active: slide_knobComputed!['score' + row] === color.value
         }"
         :style="{
           background: color.hex,
-          opacity: hovered[row - 1] === idx || slide_knob['score' + row] === color.value ? 1 : 0.18
+          opacity: hovered[row - 1] === idx || slide_knobComputed!['score' + row] === color.value ? 1 : 0.18
         }"
         @mouseenter="hovered[row - 1] = idx"
         @mouseleave="hovered[row - 1] = null"
@@ -40,7 +40,7 @@
 
 <script lang="ts" setup>
 import { message } from 'ant-design-vue'
-import { reactive, ref, watch } from 'vue'
+import { reactive, ref, watch, computed } from 'vue'
 import { CardController } from '@/controller'
 
 interface IProps {
@@ -49,6 +49,8 @@ interface IProps {
 
 const props = defineProps<IProps>()
 
+const slide_knobComputed = computed(() => props.config.slide_knob)
+
 const colors = [
   { value: 'P', hex: '#a259ec', key: '000004' }, // 紫
   { value: 'R', hex: '#ff4d4f', key: '000030' }, // 红
@@ -71,121 +73,48 @@ const slide_knob = reactive({
   score6: ''
 })
 
+const colorMap = {
+  P: 'purple',
+  R: 'red',
+  G: 'green',
+  Y: 'yellow',
+  T: 'tangerine',
+  B: 'blue'
+}
+
 // 当前表单的验证状态 为true的时候 父组件校验通过
 const isValid = ref(false)
 
 const hovered = ref<(number | null)[]>([null, null, null, null, null, null])
 
-watch(
-  () => props.config.slide_knob,
-  () => {
-    Object.keys(props.config.slide_knob).forEach(key => {
-      if (key.startsWith('score')) {
-        slide_knob[key] = props.config.slide_knob[key]
-      }
-    })
-    console.log('props.config:', props.config.slide_knob)
-  },
-  {
-    deep: true,
-    immediate: true
-  }
-)
-
 function selectColor (row: number, value: string) {
   const currentKey = 'score' + row
+  const colorKey = colorMap[value]
   // 如果当前排已选中该颜色，则取消选择
-  if (slide_knob[currentKey] === value) {
-    slide_knob[currentKey] = ''
+  if (slide_knobComputed.value![currentKey] === value) {
+    slide_knobComputed.value![currentKey] = ''
+
+    slide_knobComputed.value![colorKey][row - 1].key = ''
     return
   }
   // 检查其它排是否已选中该颜色
-  const selectedValues = Object.entries(slide_knob)
+  const selectedValues = Object.entries(slide_knobComputed.value!)
     .filter(([key]) => key !== currentKey)
     .map(([, v]) => v)
   if (selectedValues.includes(value)) {
     message.error('不能重复选择')
     return
   }
-  slide_knob[currentKey] = value
-}
-
-function generateButtonJson () {
-  // 颜色与 slide_knob 的映射
-  const colorMap = {
-    P: 'purple',
-    R: 'red',
-    G: 'green',
-    Y: 'yellow',
-    T: 'tangerine',
-    B: 'blue'
-  }
+  props.config!.slide_knob![currentKey] = value
 
-  // 检查每种颜色是否被选择
-  const selectedValues = Object.values(slide_knob)
-  const unselectedColors = Object.keys(colorMap).filter(value => !selectedValues.includes(value))
-  if (unselectedColors.length > 0) {
-    const colorNames = unselectedColors.map(value => {
-      const colorObj = colors.find(c => c.value === value)
-      return colorObj ? colorObj.value : value
-    })
-    isValid.value = false
-    message.error(`请为所有颜色选择一排，缺少：${colorNames.join('、')}`)
-    return null
-  }
-  isValid.value = true
-  // 初始化结果对象
-  const result: Record<string, any> = {
-    score1: slide_knob.score1,
-    score2: slide_knob.score2,
-    score3: slide_knob.score3,
-    score4: slide_knob.score4,
-    score5: slide_knob.score5,
-    score6: slide_knob.score6,
-    purple: [],
-    red: [],
-    green: [],
-    yellow: [],
-    tangerine: [],
-    blue: []
-  }
+  // 对slide_knob下对应的颜色数组的值来进行更改
+  const key = [0, 0, 0, 0, 0, 0]
 
-  // 生成每种颜色的数组
-  Object.entries(colorMap).forEach(([value, colorKey]) => {
-    for (let row = 1; row <= 6; row++) {
-      // 判断当前排是否选中该颜色
-      const selected = slide_knob['score' + row] === value
-      // 找到当前颜色的key
-      const colorObj = colors.find(c => c.value === value)
-
-      if (selected) {
-        //
-        // new Array(6 - row)
-        const key = [0, 0, 0, 0, 0, 0]
-        key.splice(row - 1, 1, CardController.slideKnobMap.get(colorKey)!.number)
-        result[colorKey].push({
-          music_name: 'hnyx.mp3',
-          is_break: 1,
-          key: key.reverse().join('')
-        })
-      } else {
-        result[colorKey].push({
-          music_name: 'hnyx.mp3',
-          is_break: 1,
-          key: ''
-        })
-      }
-    }
-  })
-
-  return {
-    result,
-    verify: true
-  }
+  key[6 - row] = CardController.slideKnobMap.get(colorKey)!.number
+  slide_knobComputed.value![colorKey][row - 1].key = key.join('')
 }
 
 defineExpose({
-  generateButtonJson,
   isValid
 })
 </script>

src/pages/card/components/config-card.vue

@@ -9,15 +9,13 @@
 
       <div class="config-card" >
         <a-form
-            :model="dynamicValidateForm"
             name="basic"
             :label-col="{ span: 6 }"
             :wrapper-col="{ span: 16 }"
             autocomplete="off"
-            ref="formDom"
           >
             <template
-              v-for="(item, index) in dynamicValidateForm.default"
+              v-for="(item, index) in touchKeyComputed"
               :key="item.music_name"
             >
               <a-card
@@ -31,7 +29,7 @@
                   <a-form-item
                     label="音频名称"
                     :name="['default', index, 'music_name']"
-                    :rules="[{ required: true, message: '请选择音频' }]"
+                    :rules="[{ required: false, message: '请选择音频' }]"
                   >
                     <SelectAudioNew
                       v-model="item.music_name"
@@ -49,7 +47,7 @@
             </template>
         </a-form>
         <a-empty
-          v-if="isEmptyComputed"
+          v-if="touchKeyComputed.length === 0"
           description="暂无推钮配置，点击左侧卡片矩形区域配置推钮"
         />
       </div>
@@ -73,63 +71,7 @@ const collapseKeys = ref({
   touch: '1'
 })
 
-const dynamicValidateForm = reactive<{default: API.CardJson['touch_key']}>({
-  default: []
-})
-
-const formDom = ref()
-
-const touchKeyIdsComputed = computed(() => props.config.touch_key.filter(item => item.selected).map(x => x.id) || [])
-
-watch(
-  () => touchKeyIdsComputed.value,
-  (newIds, oldIds = []) => {
-    const newIdsSet = new Set(newIds)
-    const oldIdsSet = new Set(oldIds)
-
-    // 找出需要删除和新增的ID
-    const delIds = oldIds.filter(oldId => !newIdsSet.has(oldId))
-    const addIds = newIds.filter(newId => !oldIdsSet.has(newId))
-
-    // 1. 处理删除操作（隐藏不存在的ID对应的表单项
-    if (delIds.length > 0) {
-      const idSet = new Set(delIds)
-      dynamicValidateForm.default.forEach(item => {
-        if (idSet.has(item.id)) {
-          item.selected = false
-        }
-      })
-    }
-
-    // 2. 处理新增操作（添加新ID对应的表单项）
-    if (addIds.length > 0) {
-      dynamicValidateForm.default.forEach(item => {
-        if (addIds.includes(item.id)) {
-          item.selected = true
-        }
-      })
-    }
-  },
-  { immediate: true, deep: true }
-)
-
-const isEmptyComputed = ref(true)
-
-const initConfigJson = () => {
-  dynamicValidateForm.default = props.config.touch_key
-  isEmptyComputed.value = dynamicValidateForm.default.findIndex(item => item.selected) === -1
-}
-
-watch(
-  () => props.config.touch_key,
-  () => {
-    initConfigJson()
-  },
-  {
-    deep: true,
-    immediate: true
-  }
-)
+const touchKeyComputed = computed(() => props.config.touch_key.filter(item => item.selected) || [])
 
 const onDelete = (item: API.CardJson['touch_key'][0]) => {
   item.selected = false
@@ -140,7 +82,7 @@ const generateConfigfCardJson = () => {
   return new Promise((resolve, reject) => {
     resolve({
       status: 200,
-      data: dynamicValidateForm.default,
+      data: [],
       verify: true
     })
   })

src/pages/card/index.vue

@@ -166,6 +166,7 @@
     :open="openState.jsonPanelOpen"
     :jsonData="jsonData"
     @close="openState.jsonPanelOpen = false"
+    @change="changeJsonData"
   />
 </template>
 <script lang='ts'  setup >
@@ -251,6 +252,19 @@ const handleStepSelected = (buttonKey: string) => {
   highlightedButtonKey.value = buttonKey
 }
 
+const changeJsonData = (jsonData: API.CardJson | API.CardJson21) => {
+  if (cardType.value === 5) {
+    const _jsonData = jsonData as API.CardJson
+    cardJson.header = _jsonData.header
+    cardJson.touch_key = _jsonData.touch_key
+    cardJson.slide_knob = _jsonData.slide_knob
+  } else {
+    const _jsonData = jsonData as API.CardJson21
+    cardJson21.header = _jsonData.header
+    cardJson21.game_list = _jsonData.game_list
+  }
+}
+
 const onClose = () => openState.configCardOpen = false
 
 const handleVerify = (verifyKey: 'buttonIsValid' | 'cardIsValid', value: boolean) => {
@@ -280,15 +294,17 @@ const onSave = async (cardJsonDefault: API.CardJsonDefault | null = null) => {
     header: header
   })
   hide()
+  getCardJsonById()
 }
 
 const saveConfigCard = async () => {
-  const { result: buttonResult, verify: buttonVerify } = configButtonDom.value.generateButtonJson()
-  const { data: configCardJson, verify } = await cardConfigDom.value.generateConfigfCardJson()
-  cardJson.touch_key = configCardJson
-  cardJson.slide_knob = buttonResult
-  isValids.cardIsValid = verify
-  buttonVerify && verify && onSave()
+  onSave()
+  // const { result: buttonResult, verify: buttonVerify } = configButtonDom.value.generateButtonJson()
+  // const { data: configCardJson, verify } = await cardConfigDom.value.generateConfigfCardJson()
+  // cardJson.touch_key = configCardJson
+  // cardJson.slide_knob = buttonResult
+  // isValids.cardIsValid = verify
+  // buttonVerify && verify && onSave()
 }
 
 const saveDefaultConfig = async () => {