docs: document visual cues for section page selection

Add guidance for choosing SectionFormPage and SectionQueryPage based on visible UI patterns in prototypes or screenshots. Document required visual feature descriptions for new page/section components and expand section component usage notes with query page guidance.docs: document visual cues for section page selection Add guidance for choosing SectionFormPage and SectionQueryPage based on visible UI patterns in prototypes or screenshots. Document required visual feature descriptions for new page/section components and expand section component usage notes with query page guidance.
2026-05-20 17:41:19 +08:00
parent 8af82f5900
commit ea1aec67dc
4 changed files with 202 additions and 0 deletions
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  backLabel?: string
+  error?: string
+  loading?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  backLabel: '返回',
+})
+
+const emit = defineEmits<{
+  search: []
+  back: []
+}>()
+</script>
+
+<template>
+  <v-container fluid class="pt-2 px-1">
+    <v-card>
+      <v-card-title class="text-title-large bg-primary">{{ title }}</v-card-title>
+      <v-card-text class="pa-4">
+        <v-alert v-if="error" class="mb-4" type="error" variant="tonal">{{ error }}</v-alert>
+        <v-row density="compact" align="center">
+          <slot name="filters" />
+          <v-col cols="12" md="auto" class="d-md-flex justify-md-end pr-md-2">
+            <v-btn color="primary" :loading="loading" @click="emit('search')">查詢</v-btn>
+          </v-col>
+        </v-row>
+      </v-card-text>
+    </v-card>
+
+    <v-card v-if="$slots.results">
+      <v-card-text>
+        <slot name="results" />
+      </v-card-text>
+    </v-card>
+
+    <slot name="sections" />
+
+    <v-row class="pa-4">
+      <v-btn variant="tonal" @click="emit('back')">{{ backLabel }}</v-btn>
+    </v-row>
+  </v-container>
+</template>