From a8fd4d1328c58ec25fa1df063e3e13c4f6f1a1c5 Mon Sep 17 00:00:00 2001
From: KishinZW <sc-1123@qq.com>
Date: Wed, 22 May 2024 18:12:24 +0800
Subject: [PATCH] device management panel (read only)

---
 components/ui/table/Table.vue        |  16 ++++
 components/ui/table/TableBody.vue    |  14 ++++
 components/ui/table/TableCaption.vue |  14 ++++
 components/ui/table/TableCell.vue    |  21 +++++
 components/ui/table/TableEmpty.vue   |  37 +++++++++
 components/ui/table/TableFooter.vue  |  14 ++++
 components/ui/table/TableHead.vue    |  14 ++++
 components/ui/table/TableHeader.vue  |  14 ++++
 components/ui/table/TableRow.vue     |  14 ++++
 components/ui/table/index.ts         |   8 ++
 pages/device.vue                     | 117 +++++++++++++++++++++++++++
 11 files changed, 283 insertions(+)
 create mode 100644 components/ui/table/Table.vue
 create mode 100644 components/ui/table/TableBody.vue
 create mode 100644 components/ui/table/TableCaption.vue
 create mode 100644 components/ui/table/TableCell.vue
 create mode 100644 components/ui/table/TableEmpty.vue
 create mode 100644 components/ui/table/TableFooter.vue
 create mode 100644 components/ui/table/TableHead.vue
 create mode 100644 components/ui/table/TableHeader.vue
 create mode 100644 components/ui/table/TableRow.vue
 create mode 100644 components/ui/table/index.ts
 create mode 100644 pages/device.vue

diff --git a/components/ui/table/Table.vue b/components/ui/table/Table.vue
new file mode 100644
index 0000000..a423891
--- /dev/null
+++ b/components/ui/table/Table.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div class="relative w-full overflow-auto">
+    <table :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/components/ui/table/TableBody.vue b/components/ui/table/TableBody.vue
new file mode 100644
index 0000000..ab7a937
--- /dev/null
+++ b/components/ui/table/TableBody.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+    <slot />
+  </tbody>
+</template>
diff --git a/components/ui/table/TableCaption.vue b/components/ui/table/TableCaption.vue
new file mode 100644
index 0000000..3904c56
--- /dev/null
+++ b/components/ui/table/TableCaption.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+    <slot />
+  </caption>
+</template>
diff --git a/components/ui/table/TableCell.vue b/components/ui/table/TableCell.vue
new file mode 100644
index 0000000..40c1f43
--- /dev/null
+++ b/components/ui/table/TableCell.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <td
+    :class="
+      cn(
+        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>
diff --git a/components/ui/table/TableEmpty.vue b/components/ui/table/TableEmpty.vue
new file mode 100644
index 0000000..43fe7e0
--- /dev/null
+++ b/components/ui/table/TableEmpty.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import TableRow from './TableRow.vue'
+import TableCell from './TableCell.vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
diff --git a/components/ui/table/TableFooter.vue b/components/ui/table/TableFooter.vue
new file mode 100644
index 0000000..693a438
--- /dev/null
+++ b/components/ui/table/TableFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
+    <slot />
+  </tfoot>
+</template>
diff --git a/components/ui/table/TableHead.vue b/components/ui/table/TableHead.vue
new file mode 100644
index 0000000..11fb101
--- /dev/null
+++ b/components/ui/table/TableHead.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)">
+    <slot />
+  </th>
+</template>
diff --git a/components/ui/table/TableHeader.vue b/components/ui/table/TableHeader.vue
new file mode 100644
index 0000000..220352f
--- /dev/null
+++ b/components/ui/table/TableHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <thead :class="cn('[&_tr]:border-b', props.class)">
+    <slot />
+  </thead>
+</template>
diff --git a/components/ui/table/TableRow.vue b/components/ui/table/TableRow.vue
new file mode 100644
index 0000000..5b9e874
--- /dev/null
+++ b/components/ui/table/TableRow.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)">
+    <slot />
+  </tr>
+</template>
diff --git a/components/ui/table/index.ts b/components/ui/table/index.ts
new file mode 100644
index 0000000..44582d3
--- /dev/null
+++ b/components/ui/table/index.ts
@@ -0,0 +1,8 @@
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableRow } from './TableRow.vue'
+export { default as TableCaption } from './TableCaption.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
diff --git a/pages/device.vue b/pages/device.vue
new file mode 100644
index 0000000..286e2a4
--- /dev/null
+++ b/pages/device.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+    <Card>
+      <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle class="text-sm font-medium">
+          Total Revenue
+        </CardTitle>
+        <DollarSign class="h-4 w-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent>
+        <div class="text-2xl font-bold">
+          $45,231.89
+        </div>
+        <p class="text-xs text-muted-foreground">
+          +20.1% from last month
+        </p>
+      </CardContent>
+    </Card>
+    <Card>
+      <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle class="text-sm font-medium">
+          Subscriptions
+        </CardTitle>
+        <Users class="h-4 w-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent>
+        <div class="text-2xl font-bold">
+          +2350
+        </div>
+        <p class="text-xs text-muted-foreground">
+          +180.1% from last month
+        </p>
+      </CardContent>
+    </Card>
+    <Card>
+      <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle class="text-sm font-medium">
+          Sales
+        </CardTitle>
+        <CreditCard class="h-4 w-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent>
+        <div class="text-2xl font-bold">
+          +12,234
+        </div>
+        <p class="text-xs text-muted-foreground">
+          +19% from last month
+        </p>
+      </CardContent>
+    </Card>
+    <Card>
+      <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle class="text-sm font-medium">
+          Active Now
+        </CardTitle>
+        <Activity class="h-4 w-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent>
+        <div class="text-2xl font-bold">
+          +573
+        </div>
+        <p class="text-xs text-muted-foreground">
+          +201 since last hour
+        </p>
+      </CardContent>
+    </Card>
+  </div>
+  <div class="grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3">
+    <Card class="xl:col-span-2">
+      <CardHeader class="flex flex-row items-center">
+        <div class="grid gap-2">
+          <CardTitle>所有设备</CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead class="w-[100px]">
+                设备id
+              </TableHead>
+              <TableHead>设备名称</TableHead>
+              <TableHead>创建时间</TableHead>
+              <TableHead class="text-right">
+                节目id
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow v-for="device in list" :key="device.id">
+              <TableCell class="font-medium">
+                {{ device.id }}
+              </TableCell>
+              <TableCell>{{ device.location }}</TableCell>
+              <TableCell>{{ device.createdAt.toLocaleDateString() }}</TableCell>
+              <TableCell class="text-right">
+                {{ device.programId }}
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Activity, ArrowUpRight, CreditCard, DollarSign, Users } from 'lucide-vue-next';
+
+const { $api } = useNuxtApp();
+
+const { data: list, suspense } = useQuery({
+  queryKey: ['device.list'],
+  queryFn: () => $api.device.list.query(),
+});
+await suspense();
+</script>