feature: Degraded Operations Visibility

2026-06-23 23:18:31 +08:00
parent 940e27c0ac
commit 4399996448
81 changed files with 3949 additions and 323 deletions
@@ -0,0 +1,50 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  title: { type: String, required: true },
+  defaultOpen: { type: Boolean, default: false },
+  sectionId: { type: String, default: undefined },
+})
+
+const open = ref(props.defaultOpen)
+const panelId = props.sectionId ? `${props.sectionId}-panel` : undefined
+const headerId = props.sectionId ? `${props.sectionId}-header` : undefined
+
+function toggle() {
+  open.value = !open.value
+}
+</script>
+
+<template>
+  <section :aria-labelledby="headerId">
+    <button
+      :id="headerId"
+      type="button"
+      class="flex min-h-11 w-full items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 text-left text-sm font-semibold text-gray-900 transition hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
+      :aria-expanded="open"
+      :aria-controls="panelId"
+      @click="toggle"
+    >
+      <span>{{ title }}</span>
+      <svg
+        class="h-5 w-5 shrink-0 text-gray-500 transition-transform dark:text-gray-400"
+        :class="open ? 'rotate-180' : ''"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        aria-hidden="true"
+      >
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+      </svg>
+    </button>
+    <div
+      v-show="open"
+      :id="panelId"
+      :aria-labelledby="headerId"
+      class="mt-4 space-y-4"
+    >
+      <slot />
+    </div>
+  </section>
+</template>