✨ feat(App.vue): 添加条件渲染逻辑，添加额外描述

src/App.vue

@@ -1,8 +1,13 @@
 <template>
   <div>
-    从 M{{ selectIndex }}.0 开始，占用 {{ selectIndexWidth + 1 }} 个 Byte ( {{ selectIndexWidth + 1 }} * 8 = {{
-      (selectIndexWidth
-        + 1) * 8 }} 个 M 点) ，最大可以表示无符号数字 {{ getMaxNumber() }}
+    <div v-if="selectTrue">
+      从 M{{ selectIndex }}.0 开始，占用 {{ selectIndexWidth + 1 }} 个 Byte ( {{ selectIndexWidth + 1 }} * 8 = {{
+        (selectIndexWidth
+          + 1) * 8 }} 个 M 点) ，最大可以表示无符号数字 {{ getMaxNumber() }}
+    </div>
+    <div v-else>
+      这种情况下不允许定义，因为会导致 PLC 存储空间不足而无法存储数据
+    </div>
     <button @click="selectIndexWidth = 0">
       <span v-show="selectIndexWidth == 0">激活=></span>MB</button>
     <button @click="selectIndexWidth = 1">
@@ -27,6 +32,7 @@ const selectIndexWidth = ref(0)
 
 const min = computed(() => selectIndex.value)
 const max = computed(() => selectIndexWidth.value + selectIndex.value)
+const selectTrue = computed(() => Math.max(max.value, 30) !== max.value)
 
 function getClassName(i) {
   if (Math.max(max.value, 30) === max.value && Math.min(i, min.value) === min.value) return 'warn'