Init Repo

2026-02-28 03:22:04 +08:00
commit de59b57ee7
883 changed files with 156857 additions and 0 deletions
@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Asset Selection Test</title>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <style>
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      padding: 20px;
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 20px;
+    }
+    th, td {
+      border: 1px solid #ddd;
+      padding: 12px;
+      text-align: left;
+    }
+    th {
+      background-color: #f5f5f5;
+    }
+    tr:hover {
+      background-color: #f9f9f9;
+    }
+    tr.selected {
+      background-color: #e3f2fd;
+    }
+    .checkbox {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+    }
+    .info {
+      margin-top: 20px;
+      padding: 15px;
+      background-color: #f0f0f0;
+      border-radius: 4px;
+    }
+    button {
+      padding: 8px 16px;
+      margin-right: 10px;
+      cursor: pointer;
+      border: 1px solid #ddd;
+      background: white;
+      border-radius: 4px;
+    }
+    button:hover {
+      background-color: #f5f5f5;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <h1>Asset Selection Test</h1>
+    <p>Testing checkbox selection with array-based v-model</p>
+
+    <div>
+      <button @click="selectAll">Select All</button>
+      <button @click="deselectAll">Deselect All</button>
+      <button @click="selectFirst3">Select First 3</button>
+    </div>
+
+    <table>
+      <thead>
+        <tr>
+          <th style="width: 50px;">
+            <input 
+              type="checkbox" 
+              class="checkbox"
+              :checked="isAllSelected"
+              @change="toggleSelectAll"
+            />
+          </th>
+          <th>ID</th>
+          <th>Name</th>
+          <th>Category</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr 
+          v-for="asset in assets" 
+          :key="asset.id"
+          :class="{ selected: selectedAssets[asset.id] }"
+        >
+          <td>
+            <input 
+              type="checkbox" 
+              class="checkbox"
+              :checked="selectedAssets[asset.id]"
+              @change="toggleAssetSelection(asset.id, $event.target.checked)"
+            />
+          </td>
+          <td>{{ asset.id }}</td>
+          <td>{{ asset.name }}</td>
+          <td>{{ asset.category }}</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <div class="info">
+      <h3>Selection Info</h3>
+      <p><strong>Selected Count:</strong> {{ getSelectedCount }} / {{ assets.length }}</p>
+      <p><strong>Selected IDs:</strong> {{ getSelectedIds().join(', ') || 'None' }}</p>
+      <p><strong>All Selected:</strong> {{ isAllSelected ? 'Yes' : 'No' }}</p>
+    </div>
+  </div>
+
+  <script>
+    const { createApp, ref, computed } = Vue;
+
+    createApp({
+      setup() {
+        const assets = ref([
+          { id: 1, name: 'Character_Hero', category: 'Characters' },
+          { id: 2, name: 'Prop_Sword', category: 'Props' },
+          { id: 3, name: 'Set_Castle', category: 'Sets' },
+          { id: 4, name: 'Vehicle_Car', category: 'Vehicles' },
+          { id: 5, name: 'Character_Villain', category: 'Characters' },
+          { id: 6, name: 'Prop_Shield', category: 'Props' },
+        ]);
+
+        // Using object with boolean values instead of array
+        const selectedAssets = ref({});
+
+        const isAllSelected = computed(() => {
+          return assets.value.length > 0 && 
+                 assets.value.every(a => selectedAssets.value[a.id]);
+        });
+
+        const getSelectedIds = () => {
+          return Object.keys(selectedAssets.value)
+            .filter(id => selectedAssets.value[id])
+            .map(id => Number(id));
+        };
+
+        const getSelectedCount = computed(() => {
+          return getSelectedIds().length;
+        });
+
+        const toggleSelectAll = (event) => {
+          const checked = event.target.checked;
+          assets.value.forEach(asset => {
+            selectedAssets.value[asset.id] = checked;
+          });
+        };
+
+        const toggleAssetSelection = (assetId, checked) => {
+          selectedAssets.value[assetId] = checked;
+        };
+
+        const selectAll = () => {
+          assets.value.forEach(asset => {
+            selectedAssets.value[asset.id] = true;
+          });
+        };
+
+        const deselectAll = () => {
+          selectedAssets.value = {};
+        };
+
+        const selectFirst3 = () => {
+          selectedAssets.value = {};
+          assets.value.slice(0, 3).forEach(asset => {
+            selectedAssets.value[asset.id] = true;
+          });
+        };
+
+        return {
+          assets,
+          selectedAssets,
+          isAllSelected,
+          getSelectedIds,
+          getSelectedCount,
+          toggleSelectAll,
+          toggleAssetSelection,
+          selectAll,
+          deselectAll,
+          selectFirst3
+        };
+      }
+    }).mount('#app');
+  </script>
+</body>
+</html>