feat: admin listelerinde açılır-kapanır öğe kartları

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/components/Admin/Field.vue

@@ -14,7 +14,7 @@
   <details
     v-else-if="kind === 'object'"
     class="border border-gray-200 rounded-xl bg-white"
-    :open="(depth ?? 0) < 1"
+    :open="(depth ?? 0) < 1 && field !== 'meta'"
   >
     <summary
       class="cursor-pointer select-none px-4 py-2.5 font-semibold text-sm text-[#3C393D] flex items-center gap-2"
@@ -43,18 +43,69 @@
       {{ displayLabel }}
       <span class="text-xs font-normal text-gray-400">({{ value.length }})</span>
     </p>
-    <div
+    <template v-for="(item, i) in value" :key="i">
-      v-for="(item, i) in value"
+      <!-- Nesne öğeler: açılır-kapanır kart -->
-      :key="i"
+      <details
-      class="relative border border-gray-200 rounded-xl bg-[#fafbfc]"
+        v-if="item !== null && typeof item === 'object'"
-    >
+        class="border border-gray-200 rounded-xl bg-[#fafbfc] group"
-      <div
-        class="flex items-center gap-1 px-3 py-1.5 border-b border-gray-100 text-xs text-gray-500"
       >
-        <span class="font-semibold truncate">{{ itemTitle(item, i) }}</span>
+        <summary
-        <span class="flex-1"></span>
+          class="flex items-center gap-1.5 px-3 py-2 text-xs text-gray-600 cursor-pointer select-none list-none"
+        >
+          <span
+            class="text-gray-400 transition-transform group-open:rotate-90 shrink-0"
+            >▶</span
+          >
+          <span class="font-semibold truncate text-[13px]">{{
+            itemTitle(item, i)
+          }}</span>
+          <span class="flex-1"></span>
+          <button
+            class="px-1.5 py-0.5 rounded hover:bg-gray-200 cursor-pointer disabled:opacity-30"
+            :disabled="i === 0"
+            title="Yukarı taşı"
+            @click.stop.prevent="move(i, -1)"
+          >
+            ▲
+          </button>
+          <button
+            class="px-1.5 py-0.5 rounded hover:bg-gray-200 cursor-pointer disabled:opacity-30"
+            :disabled="i === value.length - 1"
+            title="Aşağı taşı"
+            @click.stop.prevent="move(i, 1)"
+          >
+            ▼
+          </button>
+          <button
+            class="px-1.5 py-0.5 rounded text-red-500 hover:bg-red-50 cursor-pointer"
+            title="Sil"
+            @click.stop.prevent="removeAt(i)"
+          >
+            Sil
+          </button>
+        </summary>
+        <div class="p-3 border-t border-gray-100">
+          <AdminField
+            :parent="value"
+            :field="i"
+            :depth="(depth ?? 0) + 1"
+            bare
+          />
+        </div>
+      </details>
+
+      <!-- Basit (metin/sayı) öğeler: tek satır -->
+      <div v-else class="flex items-center gap-1.5">
+        <div class="flex-1 min-w-0">
+          <AdminField
+            :parent="value"
+            :field="i"
+            :depth="(depth ?? 0) + 1"
+            bare
+          />
+        </div>
         <button
-          class="px-1.5 py-0.5 rounded hover:bg-gray-200 cursor-pointer disabled:opacity-30"
+          class="px-1.5 py-0.5 rounded text-xs text-gray-400 hover:bg-gray-200 cursor-pointer disabled:opacity-30"
           :disabled="i === 0"
           title="Yukarı taşı"
           @click="move(i, -1)"
@@ -62,7 +113,7 @@
           ▲
         </button>
         <button
-          class="px-1.5 py-0.5 rounded hover:bg-gray-200 cursor-pointer disabled:opacity-30"
+          class="px-1.5 py-0.5 rounded text-xs text-gray-400 hover:bg-gray-200 cursor-pointer disabled:opacity-30"
           :disabled="i === value.length - 1"
           title="Aşağı taşı"
           @click="move(i, 1)"
@@ -70,22 +121,14 @@
           ▼
         </button>
         <button
-          class="px-1.5 py-0.5 rounded text-red-500 hover:bg-red-50 cursor-pointer"
+          class="px-1.5 py-0.5 rounded text-xs text-red-400 hover:bg-red-50 cursor-pointer"
           title="Sil"
           @click="removeAt(i)"
         >
           Sil
         </button>
       </div>
-      <div class="p-3">
+    </template>
-        <AdminField
-          :parent="value"
-          :field="i"
-          :depth="(depth ?? 0) + 1"
-          bare
-        />
-      </div>
-    </div>
     <button
       class="w-full border border-dashed border-gray-300 rounded-xl py-2 text-sm text-gray-500 hover:border-[#3FA0C7] hover:text-[#3FA0C7] cursor-pointer"
       @click="addItem"