wip: data dashboard component

+<script lang="ts" setup>
+import '@simonwep/pickr/dist/themes/monolith.min.css'
+import ColorPicker from '@simonwep/pickr'
+import type { PropType } from 'vue'
+import { computed, onMounted, onUnmounted, ref, unref } from 'vue'
+
+type Format = Exclude<keyof ColorPicker.HSVaColor, 'clone'>
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: '#377dff',
+  },
+  format: {
+    type: String as PropType<ColorPicker.Representation>,
+    default: 'HEXA' as ColorPicker.Representation,
+  },
+  config: {
+    type: Object as PropType<ColorPicker.Options>,
+  },
+})
+
+const emit = defineEmits(['update:value'])
+
+const prefixCls = 'thingskit'
+
+const colorPickerCls = 'color-picker'
+
+const picker = ref<Nullable<ColorPicker>>(null)
+
+const getFormat = computed<Format>(() => {
+  return `to${props.format}`
+})
+
+const getColor = () => {
+  const value = unref(picker)?.getColor()
+  return value && value[unref(getFormat)]().toString()
+}
+
+const onInit = () => {
+  unref(picker)?.setColor(props.value)
+}
+
+const onSave = () => {
+  const value = getColor()
+  emit('update:value', value)
+  unref(picker)?.hide()
+}
+
+const getOption = computed<ColorPicker.Options>(() => {
+  const { config = {} } = props
+  return {
+    theme: 'monolith',
+    components: {
+      // Main components
+      preview: true,
+      opacity: true,
+      hue: true,
+
+      // Input / output Options
+      interaction: {
+        hex: true,
+        rgba: true,
+        input: true,
+        clear: true,
+        save: true,
+      },
+    },
+    i18n: {
+      'ui:dialog': 'color picker dialog',
+      'btn:toggle': 'toggle color picker dialog',
+      'btn:swatch': 'color swatch',
+      'btn:last-color': '使用以前的颜色',
+      'btn:save': '保存',
+      'btn:cancel': '取消',
+      'btn:clear': '清除',
+
+      // 用于 aria-labels 的字符串
+      'aria:btn:save': 'save and close',
+      'aria:btn:cancel': 'cancel and close',
+      'aria:btn:clear': 'clear and close',
+      'aria:input': '颜色输入字段',
+      'aria:palette': '颜色选择区域',
+      'aria:hue': '色调选择滑块',
+      'aria:opacity': '选择滑块',
+    },
+    ...config,
+
+    el: `.${prefixCls}-${colorPickerCls}`,
+  }
+})
+
+onMounted(() => {
+  picker.value = ColorPicker.create(unref(getOption))
+  unref(picker)?.on('init', onInit)
+  unref(picker)?.on('save', onSave)
+})
+
+onUnmounted(() => {
+  unref(picker)?.off('init', onInit)
+  unref(picker)?.off('save', onSave)
+
+  unref(picker)?.destroyAndRemove()
+})
+</script>
+
+<template>
+  <div :class="`${prefixCls}-${colorPickerCls}`" />
+</template>

+<script lang="ts" setup>
+import icon from '../assets/command.svg'
+
+const props = defineProps<{
+  value?: boolean
+}>()
+
+const emit = defineEmits(['update:value', 'change'])
+
+const handleChange = (event: Event) => {
+  const _value = (event.target as HTMLInputElement).checked
+  emit('update:value', _value)
+  emit('change', _value)
+}
+</script>
+
+<template>
+  <div class="command-send-button">
+    123
+    <a href="javascript:;">
+      <img :src="icon" alt="">
+    </a>
+  </div>
+</template>
+
+<style scoped lang="less">
+.command-send-button {
+  width: 80px;
+  height: 60px;
+  position: relative;
+
+  a {
+    position: absolute;
+    box-sizing: border-box;
+    cursor: pointer;
+    text-decoration: none;
+    color: #fff;
+    background: #f2385a;
+    top: 0;
+    padding: 0 16px;
+    height: 60px;
+    width: 80px;
+    overflow: hidden;
+    font-size: 20px;
+    line-height: 60px;
+    border-radius: 10px;
+    box-shadow: 0 15px 0 0 #f02046, 0 0 20px 0 #bbb;
+    transition: all 0.2s;
+  }
+
+}
+</style>

+<script lang="ts" setup>
+  import type { ECharts, EChartsOption } from 'echarts';
+  import type { PropType } from 'vue';
+  import { nextTick, onMounted, onUnmounted, ref, unref } from 'vue';
+  import { init } from 'echarts';
+
+  interface DataSource {
+    id: string | number;
+  }
+
+  const props = defineProps({
+    dataSource: {
+      type: Object as PropType<DataSource>,
+      required: true,
+    },
+    chartOption: {
+      type: Object as PropType<EChartsOption>,
+      // required: true,
+    },
+    add: {
+      type: Function,
+      required: true,
+    },
+  });
+
+  const getControlsWidgetId = () => `widget-chart-${props.dataSource.id}`;
+
+  const chartRef = ref<Nullable<ECharts>>(null);
+
+  function initChart() {
+    const chartDom = document.getElementById(getControlsWidgetId())!;
+    chartRef.value = init(chartDom);
+    const option: EChartsOption = props.chartOption || {
+      tooltip: {
+        trigger: 'item',
+        // confine: true,
+        extraCssText: 'position: fixed;',
+        position: (point, params, dom, rect, size) => {
+          const parentEl = (dom as HTMLDivElement).parentElement!;
+
+          const { top = 0, left = 0 } = parentEl.getBoundingClientRect()!;
+          return [left, top];
+        },
+      },
+      series: [
+        {
+          name: 'Access From',
+          type: 'pie',
+          radius: '50%',
+          data: [
+            { value: 1048, name: 'Search Engine' },
+            { value: 735, name: 'Direct' },
+            { value: 580, name: 'Email' },
+            { value: 484, name: 'Union Ads' },
+            { value: 300, name: 'Video Ads' },
+          ],
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+          },
+        },
+      ],
+    };
+
+    nextTick(() => {
+      option && unref(chartRef)?.setOption(option);
+    });
+  }
+
+  function update() {
+    unref(chartRef)?.resize();
+  }
+
+  onMounted(() => {
+    initChart();
+    props.add(props.dataSource.id, update);
+  });
+
+  onUnmounted(() => {
+    unref(chartRef)?.clear();
+  });
+
+  defineExpose({ update });
+</script>
+
+<template>
+  <div :id="getControlsWidgetId()" class="widget-charts"></div>
+</template>
+
+<style scoped>
+  .widget-charts {
+    min-width: 10px;
+    min-height: 10px;
+    width: 100%;
+    height: 100%;
+  }
+
+  .widget-charts > div {
+    width: 100%;
+    height: 100%;
+  }
+</style>

+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    msg: String,
+  },
+  setup(props) {
+
+  },
+})
+</script>
+
+<template>
+  <div>{{ msg }}</div>
+</template>

+<script lang="ts" setup>
+const props = defineProps<{
+  value?: boolean
+}>()
+
+const emit = defineEmits(['update:value', 'change'])
+
+const handleChange = (event: Event) => {
+  const _value = (event.target as HTMLInputElement).checked
+  emit('update:value', _value)
+  emit('change', _value)
+}
+</script>
+
+<template>
+  <label class="indicator-light-switch">
+    <input :value="props.value" :checked="props.value" type="checkbox" @change="handleChange">
+    <div class="panel" />
+  </label>
+</template>
+
+<style scoped lang="less">
+.indicator-light-switch {
+  input[type='checkbox'] {
+    display: none;
+  }
+  .panel {
+    position: relative;
+    width: 60px;
+    height: 60px;
+    cursor: pointer;
+    border-radius: 50%;
+    background: linear-gradient(#dedede, #fdfdfd);
+    box-shadow: 0 3px 5px rgb(0 0 0 / 25%), inset 0 1px 0 hsl(0deg 0% 100% / 30%), inset 0 -5px 5px hsl(0deg 0% 39% / 10%), inset 0 5px 5px hsl(0deg 0% 100% / 30%);
+  }
+
+  .panel::after,
+  .panel::before {
+    content: '';
+    position: absolute;
+    width: 20%;
+    height: 20%;
+    border-radius: 50%;
+    left: 40%;
+    top: 40%;
+  }
+
+  input:checked ~ .panel::after {
+    display: none;
+  }
+
+  input:not(:checked) ~ .panel::before {
+    display: none;
+  }
+
+  input:not(:checked) ~ .panel {
+    background: linear-gradient(#EAEAEA, #eaeaea);
+  }
+
+  .panel::after {
+    background-color: #ddd;
+    background: radial-gradient(40% 35%, #ccc, #969696 60%);
+    box-shadow: inset 0 2px 1px rgb(0 0 0 / 15%), 0 2px 5px hsl(0deg 0% 78% / 10%);
+  }
+
+  .panel::before {
+    background-color: #25d025;
+    box-shadow: inset 0 3px 5px 1px rgb(0 0 0 / 10%), 0 1px 0 hsl(0deg 0% 100% / 40%), 0 0 10px 2px rgb(0 210 0 / 50%);
+  }
+}
+</style>

+<script lang="ts" setup>
+import on from '../assets/light-bulb-on.svg'
+import off from '../assets/light-bulb-off.svg'
+
+const props = defineProps<{
+  value?: boolean
+}>()
+
+const emit = defineEmits(['update:value', 'change'])
+
+const handleChange = (event: Event) => {
+  const _value = (event.target as HTMLInputElement).checked
+  emit('update:value', _value)
+  emit('change', _value)
+}
+</script>
+
+<template>
+  <label class="light-bulb-switch">
+    <input :value="props.value" :checked="props.value" type="checkbox" @change="handleChange">
+    <div class="light-bulb__on">
+      <img :src="on" alt="开">
+    </div>
+    <div class="light-bulb__off">
+      <img :src="off" alt="关">
+    </div>
+  </label>
+</template>
+
+<style scoped lang="less">
+.light-bulb-switch {
+  input[type='checkbox'] {
+    display: none;
+  }
+
+  input:checked ~ .light-bulb__off {
+    display: none;
+  }
+
+  input:not(:checked) ~ .light-bulb__on {
+    display: none;
+  }
+
+  .light-bulb__on > img,
+  .light-bulb__off > img {
+    width: 48px;
+    height: 48px;
+    cursor: pointer;
+  }
+}
+</style>

+<script lang="ts" setup>
+const props = defineProps<{
+  value?: boolean
+}>()
+
+const emit = defineEmits(['update:value', 'change'])
+
+const handleChange = (event: Event) => {
+  const _value = (event.target as HTMLInputElement).checked
+  emit('update:value', _value)
+  emit('change', _value)
+}
+</script>
+
+<template>
+  <label class="rocker-switch">
+    <input :value="props.value" type="checkbox" :checked="props.value" @change="handleChange">
+    <span class="switch-left">ON</span>
+    <span class="switch-right">OFF</span>
+  </label>
+</template>
+
+<style scoped lang="less">
+.rocker-switch {
+  display: flex;
+  width: 72px;
+  font-size: 14px;
+  color: #fff;
+  font-weight: 700;
+  letter-spacing: 1px;
+  border: 0.5em solid #eee;
+  background-color: #999;
+  user-select: none;
+
+  input[type='checkbox'] {
+    display: none;
+  }
+
+  input:checked + .switch-left + .switch-right {
+    transform: rotate(-15deg) skew(-15deg) translate(-1px, -5px);
+  }
+  input:checked + .switch-left + .switch-right::before {
+    background-color: #ccc;
+    content: '';
+    position: absolute;
+    width: 3px;
+    height: 30px;
+    transform: skewY(75deg) skewX(4deg) rotate(5deg) translateX(1px);
+    top: 1.5px;
+    right: -1.5px;
+  }
+
+  input + .switch-left {
+    transform: rotate(15deg) skew(17deg) translate(1px, -5px);
+  }
+
+  input:checked + .switch-left {
+    background-color: #0084d0;
+    transform: none;
+  }
+
+  input:not(:checked) + .switch-left  {
+    background-color: #ccc;
+  }
+
+  input:not(:checked) + .switch-left + .switch-right {
+    background-color: #bd5757;
+    color: #fff;
+  }
+
+  input + .switch-left::before {
+    background-color: #ccc;
+    content: '';
+    position: absolute;
+    width: 3px;
+    height: 30px;
+    background-color: #ccc;
+    transform: skewY(-75deg) skewX(-4deg) rotate(-5deg) translateX(-1.5px);
+    top: -1.5px;
+    left: -1.5px;
+  }
+
+  .switch-left {
+    width: 36px;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+    cursor: pointer;
+  }
+
+  .switch-right {
+    color: #888;
+    width: 36px;
+    height: 30px;
+    text-align: center;
+    line-height: 30px;
+    background-color: #ddd;
+    cursor: pointer;
+  }
+}
+</style>

+<script lang="ts" setup>
+const props = defineProps<{
+  value?: boolean
+}>()
+
+const emit = defineEmits(['update:value', 'change'])
+
+const handleChange = (event: Event) => {
+  const _value = (event.target as HTMLInputElement).checked
+  emit('update:value', _value)
+  emit('change', _value)
+}
+</script>
+
+<template>
+  <label class="sliding-switch">
+    <input :value="props.value" type="checkbox" :checked="props.value" @change="handleChange">
+    <span class="slider" />
+    <span class="on">ON</span>
+    <span class="off">OFF</span>
+  </label>
+</template>
+
+<style scoped lang="less">
+.sliding-switch {
+  position: relative;
+  display: block;
+  font-weight: 700;
+  line-height: 40px;
+  width: 80px;
+  height: 40px;
+  font-size: 14px;
+  cursor: pointer;
+  user-select: none;
+
+  input[type='checkbox'] {
+    display: none;
+  }
+
+  .slider {
+    width: 80px;
+    height: 40px;
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px solid #ecf0f3;
+    border-radius: 20px;
+    box-shadow: -2px -2px 8px #fff, -2px -2px 12px hsl(0deg 0% 100% / 50%), inset -2px -2px 8px #fff, inset -2px -2px 12px hsl(0deg 0% 100% / 50%), inset 2px 2px 4px hsl(0deg 0% 100% / 10%),
+      inset 2px 2px 8px rgb(0 0 0 / 30%), 2px 2px 8px rgb(0 0 0 / 30%);
+    background-color: #ecf0f3;
+    z-index: -1;
+  }
+
+  .slider::after {
+    position: absolute;
+    cursor: pointer;
+    display: block;
+    content: '';
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    top: 6px;
+    left: 6px;
+    background-color: #ecf0f3;
+    box-shadow: -2px -2px 8px #fff, -2px -2px 12px hsl(0deg 0% 100% / 50%), inset 2px 2px 4px hsl(0deg 0% 100% / 10%), 2px 2px 8px rgb(0 0 0 / 30%);
+    z-index: 999;
+    transition: 0.5s;
+  }
+
+  input:checked ~ .off {
+    opacity: 0;
+  }
+
+  input:checked ~ .slider::after {
+    transform: translateX(35px);
+  }
+  input:not(:checked) ~ .on {
+    opacity: 0;
+    transform: translateX(0px);
+  }
+
+  .on,
+  .off {
+    display: inline-block;
+    margin-left: 3px;
+    width: 34px;
+    text-align: center;
+    transition: 0.2s;
+  }
+
+  .on {
+    color: #039be5;
+  }
+  .off {
+    color: #999;
+  }
+}
+</style>

+<script lang="ts" setup>
+const props = defineProps<{
+  value?: boolean
+}>()
+
+const emit = defineEmits(['update:value', 'change'])
+
+const handleChange = (event: Event) => {
+  const _value = (event.target as HTMLInputElement).checked
+  emit('update:value', _value)
+  emit('change', _value)
+}
+</script>
+
+<template>
+  <div class="toggle-switch">
+    <label class="switch">
+      <input :value="props.value" type="checkbox" :checked="props.value" @change="handleChange">
+      <div class="button">
+        <div class="light" />
+        <div class="dots" />
+        <div class="characters" />
+        <div class="shine" />
+        <div class="shadow" />
+      </div>
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.toggle-switch {
+  flex: 1 1 auto;
+  max-width: 75px;
+  height: 97.5px;
+  display: flex;
+}
+
+.switch {
+  background-color: black;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
+  border-radius: 5px;
+  padding: 10px;
+  perspective: 700px;
+}
+
+.switch input {
+  display: none;
+}
+
+.switch input:checked + .button {
+  transform: translateZ(20px) rotateX(25deg);
+  box-shadow: 0 -5px 10px #ff1818;
+}
+
+.switch input:checked + .button .light {
+  animation: flicker 0.2s infinite 0.3s;
+}
+
+.switch input:checked + .button .shine {
+  opacity: 1;
+}
+
+.switch input:checked + .button .shadow {
+  opacity: 0;
+}
+
+.switch .button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
+  transform-origin: center center -20px;
+  transform: translateZ(20px) rotateX(-25deg);
+  transform-style: preserve-3d;
+  background-color: #9b0621;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  cursor: pointer;
+  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
+  background-repeat: no-repeat;
+}
+
+.switch .button::before {
+  content: '';
+  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 30px;
+  transform-origin: top;
+  transform: rotateX(-90deg);
+  position: absolute;
+  top: 0;
+}
+
+.switch .button::after {
+  content: '';
+  background-image: linear-gradient(#650000, #320000);
+  width: 100%;
+  height: 30px;
+  transform-origin: top;
+  transform: translateY(30px) rotateX(-90deg);
+  position: absolute;
+  bottom: 0;
+  box-shadow: 0 30px 8px 0px black, 0 60px 20px 0px rgb(0 0 0 / 50%);
+}
+
+.switch .light {
+  opacity: 0;
+  animation: light-off 1s;
+  position: absolute;
+  width: 80%;
+  height: 80%;
+  background-image: radial-gradient(#ffc97e, transparent 40%), radial-gradient(circle, #ff1818 50%, transparent 80%);
+}
+
+.switch .dots {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
+  background-size: 10px 10px;
+}
+
+.switch .characters {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
+  background-repeat: no-repeat;
+}
+
+.switch .shine {
+  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
+  opacity: 0.3;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
+  background-repeat: no-repeat;
+}
+
+.switch .shadow {
+  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
+  opacity: 1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
+  background-repeat: no-repeat;
+}
+
+@keyframes flicker {
+  0% {
+    opacity: 1;
+  }
+
+  80% {
+    opacity: 0.8;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes light-off {
+  0% {
+    opacity: 1;
+  }
+
+  80% {
+    opacity: 0;
+  }
+}
+</style>

+<script lang="ts" setup>
+  import { MoreOutlined, LineChartOutlined } from '@ant-design/icons-vue';
+  import { DropMenu } from '/@/components/Dropdown';
+  import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
+  import { Tooltip } from 'ant-design-vue';
+  import Icon from '/@/components/Icon/src/Icon.vue';
+  enum MoreEvent {
+    EDIT = 'edit',
+    COPY = 'copy',
+    DELETE = 'delete',
+  }
+
+  const dropMenuList: DropMenu[] = [
+    {
+      text: '编辑组件',
+      event: MoreEvent.EDIT,
+      icon: 'ant-design:edit-outlined',
+    },
+    {
+      text: '复制组件',
+      event: MoreEvent.COPY,
+      icon: 'ant-design:copy-outlined',
+    },
+    {
+      text: '删除组件',
+      event: MoreEvent.DELETE,
+      icon: 'ant-design:delete-outlined',
+    },
+  ];
+
+  const handleMenuEvent = (event: DropMenu) => {
+    console.log(event);
+  };
+</script>
+
+<template>
+  <div class="flex justify-between">
+    <div class="flex flex-auto">
+      <div v-for="item in 3" class="flex mx-2" :key="item">
+        <div class="flex items-center">
+          <Tooltip>
+            <Icon icon="ant-design:edit-outlined" />
+          </Tooltip>
+          <span class="truncate max-w-25">设备名称{{ item }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="flex items-center wx-9">
+      <Tooltip title="趋势">
+        <LineChartOutlined class="cursor-pointer mx-2" />
+      </Tooltip>
+      <Dropdown :drop-menu-list="dropMenuList" :trigger="['click']" @menu-event="handleMenuEvent">
+        <Tooltip title="更多">
+          <MoreOutlined class="transform rotate-90 cursor-pointer" />
+        </Tooltip>
+      </Dropdown>
+    </div>
+  </div>
+</template>

+<script lang="ts" setup>
+  import { onMounted } from 'vue';
+  import { useUpdateCenter } from '../../hook/useUpdateCenter';
+  import type { DataSource, WidgetWrapperRegister } from './type';
+
+  const props = defineProps<{
+    dataSource: DataSource[];
+    register?: WidgetWrapperRegister;
+  }>();
+
+  const { update, add, remove } = useUpdateCenter();
+
+  onMounted(() => {
+    props.register && props.register(props.dataSource);
+  });
+
+  defineExpose({ update });
+</script>
+
+<template>
+  <section class="widget">
+    <slot name="header"></slot>
+
+    <div class="widget-content">
+      <div
+        v-for="item in props.dataSource"
+        :key="item.id"
+        :style="{ width: `${item.width}%`, height: `${item.height}%` }"
+        class="widget-item"
+      >
+        <div class="widget-box">
+          <div class="widget-controls-container">
+            <slot
+              name="controls"
+              :record="item"
+              :add="add"
+              :remove="remove"
+              :update="update"
+            ></slot>
+          </div>
+          <div class="widget-value">
+            <slot name="value" :record="item"></slot>
+          </div>
+          <div class="widget-label">
+            <slot name="label" :record="item"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot name="footer"></slot>
+  </section>
+</template>
+
+<style scoped>
+  .widget {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+  }
+  .widget-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    height: 100%;
+  }
+
+  .widget-box .widget-charts {
+    display: flex;
+  }
+
+  .widget-item {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .widget-box {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .widget-controls-container {
+    flex: 1 1 auto;
+    width: 100%;
+    height: calc(100% - 20px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .widget-controls-container > div {
+    width: 100%;
+    height: 100%;
+    background-color: red;
+  }
+
+  .widget-value {
+    font-size: 14px;
+    position: absolute;
+    width: 100%;
+    top: 0;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .widget-label {
+    font-size: 14px;
+    line-height: 1.2;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>

+export interface DataSource {
+  id: number | string
+  width: number
+  height: number
+
+  [key: string]: any
+}
+
+export type WidgetWrapperRegister = (dataSource: DataSource[]) => any

 <script lang="ts" setup>
-  import { PageWrapper } from '/@/components/Page';
-  import { Button } from 'ant-design-vue';
+  import { Button, PageHeader } from 'ant-design-vue';
+  import { GridItem, GridLayout, Layout } from 'vue3-grid-layout';
+  import { nextTick, ref } from 'vue';
+  import BaseDashboard from '../cpns/Dashboard/BaseDashboard.vue';
+  import WidgetWrapper from '../cpns/WidgetWrapper/WidgetWrapper.vue';
+  import BaseWidgetHeader from '../cpns/WidgetHeader/BaseWidgetHeader.vue';
   const handleBack = () => {};
+
+  interface ChartAttr {
+    id: string | number;
+    width: number;
+    height: number;
+  }
+
+  interface ChartSetting extends Layout {
+    chart: ChartAttr[];
+  }
+
+  const widgetEl = new Map<string, Fn>();
+
+  const id = '296Charts';
+  // GridItem.
+  const layout = ref<ChartSetting[]>([
+    {
+      x: 0,
+      y: 0,
+      w: 6,
+      h: 6,
+      i: id,
+      static: false,
+      chart: [
+        { id: 'a', width: 100, height: 100 },
+        { id: 'b', width: 100, height: 100 },
+        { id: 'c', width: 100, height: 100 },
+        { id: 'd', width: 100, height: 100 },
+        { id: 'e', width: 100, height: 100 },
+        { id: 'f', width: 100, height: 100 },
+        { id: 'g', width: 100, height: 100 },
+        { id: 'h', width: 100, height: 100 },
+        { id: 'i', width: 100, height: 100 },
+      ],
+    },
+    {
+      x: 0,
+      y: 0,
+      w: 6,
+      h: 6,
+      i: 'sdasdf',
+      static: false,
+      chart: [
+        { id: 'j', width: 100, height: 100 },
+        { id: 'k', width: 100, height: 100 },
+        { id: 'l', width: 100, height: 100 },
+        { id: 'm', width: 100, height: 100 },
+        { id: 'n', width: 100, height: 100 },
+        { id: 'o', width: 100, height: 100 },
+        { id: 'p', width: 100, height: 100 },
+        { id: 'q', width: 100, height: 100 },
+        { id: 'r', width: 100, height: 100 },
+      ],
+    },
+  ]);
+  const draggable = ref(true);
+  const resizable = ref(true);
+
+  const GirdLayoutColNum = 24;
+
+  const GridLayoutMargin = 10;
+
+  function updateSize(i: string, newH: number, newW: number, newHPx: number, newWPx: number) {
+    newWPx = Number(newWPx);
+    newHPx = Number(newHPx);
+
+    const data = layout.value.find((item) => item.i === i)!;
+    const border = 2;
+    const length = data.chart.length || 0;
+
+    const row = Math.floor(Math.pow(length, 0.5));
+    const col = Math.floor(length / row);
+    let width = Math.floor(100 / col);
+    let height = Math.floor(100 / row);
+
+    const WHRatio = newWPx / newHPx;
+    const HWRatio = newHPx / newWPx;
+
+    if (WHRatio > 1.6) {
+      width = Math.floor(100 / length);
+      height = 100;
+    }
+
+    if (HWRatio > 1.6) {
+      height = Math.floor(100 / length);
+      width = 100;
+    }
+
+    data.chart = data?.chart.map((item) => {
+      return {
+        ...item,
+        width,
+        height,
+      };
+    });
+    nextTick(() => {
+      const updateFn = widgetEl.get(i);
+      if (updateFn) updateFn();
+    });
+  }
+
+  const itemResized = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => {
+    updateSize(i, newH, newW, newHPx, newWPx);
+  };
+
+  const itemContainerResized = (
+    i: string,
+    newH: number,
+    newW: number,
+    newHPx: number,
+    newWPx: number
+  ) => {
+    updateSize(i, newH, newW, newHPx, newWPx);
+  };
+
+  const updateCharts = (i: string) => {
+    nextTick(() => {
+      const updateFn = widgetEl.get(i);
+      if (updateFn) updateFn();
+    });
+  };
+
+  const setComponentRef = (el: Element, record: ChartSetting) => {
+    if (widgetEl.has(record.i)) widgetEl.delete(record.i);
+    if (el && (el as unknown as { update: Fn }).update)
+      widgetEl.set(record.i, (el as unknown as { update: Fn }).update);
+  };
 </script>
 
 <template>
-  <PageWrapper title="水电表看板" @back="handleBack" content="已创建组件: 3个">
+  <!-- <PageWrapper title="水电表看板" @back="handleBack" content="已创建组件: 3个">
     <template #extra>
       <Button type="primary">创建组件</Button>
     </template>
-    <section class="bg-light-50 h-full w-full"> </section>
-  </PageWrapper>
+
+  </PageWrapper> -->
+  <section class="bg-light-50 flex flex-col overflow-hidden h-full w-full">
+    <PageHeader title="水电表看板" @back="handleBack">
+      <template #extra>
+        <Button type="primary">创建组件</Button>
+      </template>
+      <div>已创建组件: 3个</div>
+    </PageHeader>
+    <section class="flex-1">
+      <GridLayout
+        v-model:layout="layout"
+        :col-num="GirdLayoutColNum"
+        :row-height="30"
+        :margin="[GridLayoutMargin, GridLayoutMargin]"
+        :is-draggable="draggable"
+        :is-resizable="resizable"
+        :vertical-compact="true"
+        :use-css-transforms="true"
+        style="width: 100%"
+      >
+        <GridItem
+          v-for="item in layout"
+          :key="item.i"
+          :static="item.static"
+          :x="item.x"
+          :y="item.y"
+          :w="item.w"
+          :h="item.h"
+          :i="item.i"
+          style="display: flex; flex-wrap: wrap"
+          class="grid-item-layout"
+          @resized="itemResized"
+          @resize="itemResized"
+          @moved="updateCharts"
+          @container-resized="itemContainerResized"
+        >
+          <WidgetWrapper
+            :key="item.i"
+            :ref="(el) => setComponentRef(el, item)"
+            :data-source="item.chart"
+          >
+            <template #header>
+              <!-- <div>header</div> -->
+              <BaseWidgetHeader />
+            </template>
+            <template #controls="{ record, add }">
+              <!-- <ToggleSwitch /> -->
+              <!-- <SlidingSwitch @change="handleChange" /> -->
+              <!-- <LightBulbSwitch @change="handleChange" /> -->
+              <!-- <div :id="getControlsWidgetId(record.id)" class="widget-charts" /> -->
+              <BaseDashboard :data-source="record" :add="add" />
+            </template>
+            <template #value="{ record }">
+              <span>{{ record.id }}</span>
+            </template>
+            <template #label="{ record }">
+              <span>{{ record.id }}</span>
+            </template>
+          </WidgetWrapper>
+        </GridItem>
+      </GridLayout>
+    </section>
+  </section>
 </template>
+
+<style>
+  .vue-grid-item:not(.vue-grid-placeholder) {
+    background: #fcfcfc;
+    border: 1px solid black;
+  }
+  .vue-grid-item .resizing {
+    opacity: 0.9;
+  }
+  .vue-grid-item .static {
+    background: #cce;
+  }
+  .vue-grid-item .text {
+    font-size: 24px;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    height: 100%;
+    width: 100%;
+  }
+  .vue-grid-item .no-drag {
+    height: 100%;
+    width: 100%;
+  }
+  .vue-grid-item .minMax {
+    font-size: 12px;
+  }
+  .vue-grid-item .add {
+    cursor: pointer;
+  }
+  .vue-draggable-handle {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    top: 0;
+    left: 0;
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
+      no-repeat;
+    background-position: bottom right;
+    padding: 0 8px 8px 0;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+
+  .container {
+    display: grid;
+    grid-template-columns: 3;
+    grid-row: 3;
+  }
+
+  .grid-item-layout {
+    overflow: hidden;
+    border: 1px solid #eee !important;
+    background-color: #fcfcfc !important;
+  }
+</style>

+export function useUpdateCenter() {
+  const eventCenter = new Map<string, Fn>();
+
+  const update = () => {
+    eventCenter.forEach((method) => {
+      method();
+    });
+  };
+
+  const add = (key: string, method: Fn) => {
+    if (eventCenter.has(key)) {
+      window.console.log(`Update Center Has Exist This Update Method(${key})`);
+      return;
+    }
+    eventCenter.set(key, method);
+  };
+
+  const remove = (key: string) => {
+    if (eventCenter.has(key)) eventCenter.delete(key);
+  };
+
+  return { update, add, remove };
+}

 <script lang="ts" setup>
-  import { List, Card, Statistic, Dropdown, Menu } from 'ant-design-vue';
+  import { List, Card, Statistic } from 'ant-design-vue';
   import { ref, unref } from 'vue';
   import { PageWrapper } from '/@/components/Page';
   import {
@@ -10,9 +10,9 @@
   } 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;
+  import { useRouter } from 'vue-router';
+  import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
+  import { DropMenu } from '/@/components/Dropdown';
 
   const router = useRouter();
   const { createMessage } = useMessage();
@@ -46,6 +46,25 @@
     clipboardRef.value = '123';
     unref(clipboardRef) && createMessage.success('复制成功');
   };
+  enum MoreEvent {
+    EDIT = 'edit',
+    DELETE = 'DELETE',
+  }
+
+  const dropMenuList: DropMenu[] = [
+    {
+      text: '编辑',
+      event: MoreEvent.EDIT,
+      icon: 'ant-design:edit-outlined',
+    },
+    {
+      text: '删除',
+      event: MoreEvent.DELETE,
+      icon: 'ant-design:delete-outlined',
+    },
+  ];
+
+  const handleMenuEvent = (evetn: DropMenu) => {};
 
   const handleEdit = () => {
     router.push('/data/board/detail');
@@ -66,19 +85,11 @@
         <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>
+              <Dropdown
+                :trigger="['click']"
+                @menu-event="handleMenuEvent"
+                :drop-menu-list="dropMenuList"
+              >
                 <MoreOutlined class="rotate-90 transform cursor-pointer" />
               </Dropdown>
             </template>

+/**
+ * @descriptin Api docs https://jbaysolutions.github.io/vue-grid-layout/zh/guide/properties.html#griditem
+ */
+declare module 'vue3-grid-layout' {
+  import type { CSSProperties } from 'vue';
+
+  interface Layout {
+    i: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    static?: boolean;
+  }
+
+  interface BreakPoints {
+    lg?: number;
+    md?: number;
+    sm?: number;
+    xs?: number;
+    xxs?: number;
+  }
+
+  interface GridLayoutProps {
+    layout: Layout[];
+
+    responsiveLayouts?: any;
+
+    /**
+     * @description Define Col Number, Need A Integer Number
+     * @type number
+     * @default 12
+     */
+    colNum?: number;
+
+    /**
+     * @description Define Row Height
+     * @type number
+     * @default 150
+     */
+    rowHeight?: number;
+
+    /**
+     * @description Define Max Rows
+     * @type number
+     * @default infinity
+     */
+    maxRows?: number;
+
+    /**
+     * @description Define Marign Distance In Grid Layout
+     * @type [number, number]
+     * @default [10, 10]
+     */
+    margin?: [number, number];
+
+    /**
+     * @description Define Element Can Draggable In Grid Layout
+     * @type boolean
+     * @default true
+     */
+    isDraggable?: boolean;
+
+    /**
+     * @description Define Element Can Resizeable In Grid Layout
+     * @type boolean
+     * @default true
+     */
+    isResizable?: boolean;
+
+    /**
+     * @description Define Element Can Mirrored In Grid Layout
+     * @type boolean
+     * @default false
+     */
+    isMirrored?: boolean;
+
+    /**
+     * @descripion Define Element Can Auto Size In Grid Layout
+     * @type boolean
+     * @default true
+     */
+    autoSize?: boolean;
+
+    /**
+     * @description Define Element Can Compact On Vertical Direction
+     * @type boolean
+     * @default false
+     */
+    verticalCompact?: boolean;
+
+    /**
+     * @description Define Element Prevent Collision
+     * @type {boolean}
+     * @default false
+     */
+    preventCollision?: boolean;
+
+    /**
+     * @description Define Element Use Css Transforms
+     * @type {boolean}
+     * @default true
+     */
+    useCssTransforms?: boolean;
+
+    /**
+     * @description Define Whether Is Responsive Layout
+     * @type {boolean}
+     * @default false
+     */
+    responsive?: boolean;
+
+    /**
+     * @description Setting Screen Break Points
+     * @type {BreakPoints}
+     * @default lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0
+     */
+    breakPoints?: BreakPoints;
+
+    /**
+     * @description Setting Column Break Points
+     * @type {BreakPoints}
+     * @default  lg: 12, md: 10, sm: 6, xs: 4, xxs: 2
+     */
+    cols?: BreakPoints;
+
+    /**
+     * @descritpion Use Dynamic Cursor Style
+     * @type {boolean}
+     * @default false
+     * @deprecated
+     */
+    useStyleCursor?: boolean;
+
+    [key: string]: any;
+  }
+
+  interface GridItemProps extends Layout {
+    /**
+     * @description Min Width
+     * @type {number}
+     * @default 1
+     */
+    minW?: number;
+
+    /**
+     * @description Min Height
+     * @type {number}
+     * @default 1
+     */
+    minH?: number;
+
+    /**
+     * @description Max Width
+     * @type {number}
+     * @default 1
+     */
+    maxW?: number;
+
+    /**
+     * @description Min Height
+     * @type {number}
+     * @default 1
+     */
+    maxH?: number;
+
+    /**
+     * @description Flag Grid Element Can Draggable
+     * @type {boolean | null}
+     * @default null
+     */
+    isDraggable?: boolean;
+
+    /**
+     * @descrition Flag Grid Element Can Resizeable
+     * @type {boolean | null}
+     * @default null
+     */
+    isResizeable?: boolean;
+
+    /**
+     * @description Flag Grid Element Is Static , Can't Draggable Resizeable Move
+     * @type {boolean}
+     * @default false
+     */
+    static?: boolean;
+
+    /**
+     * @description Flag What Are The Element Can't Draggable, Usage Css Picker
+     * @type {string}
+     * @default 'a button'
+     */
+    dragIgnoreFrom?: string;
+
+    /**
+     * @description Flag What Are The Element Allow Draggable, Usage Css Picker
+     * @type {string}
+     * @default null
+     */
+    dragAllowFrom?: string;
+
+    /**
+     * @description Flag What Are The Element Can't Trigger Resize, Usage Css Picker
+     * @type {string}
+     * @deafult 'a button'
+     */
+    resizeIgnoreFrom?: string;
+
+    style?: CSSProperties;
+
+    onLayoutCreate?: (newLayout: Layout[]) => void;
+
+    [key: string]: any;
+  }
+  type GirdLayoutEvent =
+    | 'layoutCreate'
+    | 'layoutBeforeMount'
+    | 'layoutMounted'
+    | 'layoutReady'
+    | 'layoutUpdate'
+    | 'breakpointChanged';
+
+  interface LayoutBaseParams {
+    newLayout: Layout[];
+  }
+
+  interface GridLayoutEmit {
+    layoutCreate: LayoutBaseParams;
+    layoutBeforeMount: LayoutBeforeMountParams;
+    layoutMounted: LayoutMountedParams;
+    layoutReady: layoutUpdateParams;
+    layoutUpdate: layoutUpdateParams;
+    breakpointChanged: breakpointChangedParams;
+  }
+
+  /**
+   * @description Grid Item Event Name
+   */
+  type GridItemEvent = 'move' | 'moved' | 'resize' | 'resized' | 'containerResized';
+
+  interface MoveParams {
+    i: number;
+    newX?: number;
+    newY?: number;
+  }
+
+  interface ResizeParams {
+    i: number;
+    newH: number;
+    newW: number;
+    newHPx: number;
+    newWPx: number;
+  }
+
+  interface GridItemEmit {
+    move: MoveParams;
+    moved: MoveParams;
+    resize: ResizeParams;
+    resized: ResizeParams;
+    containerResized: MoveParams;
+  }
+
+  // const GridLayout: DefineComponent<GridLayoutProps, void, unknown>
+  // const GridItem: DefineComponent<GridItemProps, void, unknown>
+
+  const GridLayout: {
+    new (): {
+      $props: GridLayoutProps;
+      $emit: <T extends GirdLayoutEvent>(event: T, ...args: GridLayoutEmit[T]) => void;
+    };
+  };
+
+  const GridItem: {
+    new (): {
+      $props: GridItemProps;
+      $emit: <T extends GridItemEvent>(event: T, ...args: GridItemEmit[T]) => void;
+    };
+  };
+
+  export { GridLayout, GridItem, BreakPoints, Layout, LayoutBaseParams, ResizeParams };
+}