feat: update layout

src/views/dashboard/panel/Layout.vue

@@ -0,0 +1,112 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <grid-layout
+    v-model:layout="dashboardStore.layout"
+    :col-num="12"
+    :row-height="30"
+    :is-draggable="true"
+    :is-resizable="true"
+    :is-mirrored="false"
+    :vertical-compact="true"
+    :use-css-transforms="true"
+    @layout-updated="layoutUpdatedEvent"
+  >
+    <grid-item
+      v-for="item in dashboardStore.layout"
+      :x="item.x"
+      :y="item.y"
+      :w="item.w"
+      :h="item.h"
+      :i="item.i"
+      :key="item.i"
+    >
+      <Widget :item="item" />
+    </grid-item>
+  </grid-layout>
+</template>
+<script lang="ts" setup>
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { GridItemData } from "@/types/dashboard";
+import Widget from "./Widget.vue";
+
+const dashboardStore = useDashboardStore();
+function layoutUpdatedEvent(newLayout: GridItemData) {
+  dashboardStore.setLayout(newLayout);
+}
+</script>
+<style lang="scss" scoped>
+.vue-grid-layout {
+  background: #f7f9fa;
+  flex-grow: 2;
+  overflow: auto;
+}
+
+.vue-grid-item:not(.vue-grid-placeholder) {
+  background: #fff;
+  box-shadow: 0px 1px 4px 0px #00000029;
+  border-radius: 5px;
+}
+
+.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;
+}
+</style>

src/views/dashboard/panel/Widget.vue

@@ -0,0 +1,27 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="header">title</div>
+  <div class="body">chart</div>
+</template>
+<script lang="ts" setup>
+import { defineProps } from "vue";
+import type { PropType } from "vue";
+import { GridItemData } from "@/types/dashboard";
+
+const props = defineProps({
+  item: { type: Object as PropType<GridItemData> },
+});
+</script>