wip: data board

+<script lang="ts" setup>
+  import { PageWrapper } from '/@/components/Page';
+  import { Button } from 'ant-design-vue';
+  const handleBack = () => {};
+</script>
+
+<template>
+  <PageWrapper title="水电表看板" @back="handleBack" content="已创建组件: 3个">
+    <template #extra>
+      <Button type="primary">创建组件</Button>
+    </template>
+    <section class="bg-light-50 h-full w-full"> </section>
+  </PageWrapper>
+</template>

+<script lang="ts" setup>
+  import { List, Card, Statistic, Dropdown, Menu } from 'ant-design-vue';
+  import { ref, unref } from 'vue';
+  import { PageWrapper } from '/@/components/Page';
+  import {
+    MoreOutlined,
+    ShareAltOutlined,
+    EditOutlined,
+    DeleteOutlined,
+  } from '@ant-design/icons-vue';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useRoute, useRouter } from 'vue-router';
+  const ListItem = List.Item;
+  const MenuItem = Menu.Item;
+
+  const router = useRouter();
+  const { createMessage } = useMessage();
+
+  const data = ref([{ title: 1 }, { title: 2 }, { title: 3 }]);
+  //分页相关
+  const page = ref(1);
+  const pageSize = ref(36);
+  const total = ref(0);
+  const paginationProp = ref({
+    showSizeChanger: false,
+    showQuickJumper: true,
+    pageSize,
+    current: page,
+    total,
+    showTotal: (total) => `总 ${total} 条`,
+    onChange: pageChange,
+    onShowSizeChange: pageSizeChange,
+  });
+
+  function pageChange(p, pz) {
+    page.value = p;
+    pageSize.value = pz;
+  }
+  function pageSizeChange(_current, size) {
+    pageSize.value = size;
+  }
+
+  const { clipboardRef } = useCopyToClipboard();
+  const handleCopyShareUrl = () => {
+    clipboardRef.value = '123';
+    unref(clipboardRef) && createMessage.success('复制成功');
+  };
+
+  const handleEdit = () => {
+    router.push('/data/board/detail');
+  };
+
+  const handleRemove = () => {};
+</script>
+
+<template>
+  <PageWrapper>
+    <template #header> 自定义看板 </template>
+    <List
+      :pagination="paginationProp"
+      :data-source="data"
+      :grid="{ gutter: 5, column: 4, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 3 }"
+    >
+      <template #renderItem="{ item }">
+        <ListItem>
+          <Card class="data-card cursor-pointer">
+            <template #extra>
+              <Dropdown>
+                <template #overlay>
+                  <Menu>
+                    <MenuItem key="edit" @click="handleEdit">
+                      <EditOutlined />
+                      <span>编辑</span>
+                    </MenuItem>
+                    <MenuItem key="remove" @click="handleRemove">
+                      <DeleteOutlined />
+                      <span>删除</span>
+                    </MenuItem>
+                  </Menu>
+                </template>
+                <MoreOutlined class="rotate-90 transform cursor-pointer" />
+              </Dropdown>
+            </template>
+            <!-- <template #cover>title</template> -->
+            <section>
+              <div class="flex justify-between items-center">
+                <div>设备看板名</div>
+                <div class="flex content-center">
+                  <Statistic value="12">
+                    <template #suffix>
+                      <span class="text-sm">个组件</span>
+                    </template>
+                  </Statistic>
+                </div>
+              </div>
+              <div class="flex justify-between mt-4">
+                <div>
+                  <span>看板类型</span>
+                  <span>
+                    <ShareAltOutlined @click="handleCopyShareUrl" />
+                  </span>
+                </div>
+                <div>2021-02-11 12:00:00</div>
+              </div>
+            </section>
+          </Card>
+        </ListItem>
+      </template>
+    </List>
+  </PageWrapper>
+</template>
+
+<style scoped>
+  .data-card:deep(.ant-card-head) {
+    padding: 0;
+    height: 40px;
+    min-height: 40px;
+  }
+  .data-card:deep(.ant-card-extra) {
+    padding: 8px;
+  }
+</style>