feat: update layout

2025-10-14 11:21:29 +00:00 · 2021-12-22 19:21:10 +08:00
parent d98280c427
commit aa196251f6
9 changed files with 390 additions and 237 deletions
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -16,13 +16,28 @@
 */
 import Icon from "./Icon.vue";
 import TimePicker from "./TimePicker.vue";
-import type { App } from "vue";
+import type { App, Plugin } from "vue";
+import VueGridLayout from "vue-grid-layout";

-const components: { [key: string]: any } = { Icon, TimePicker };
+const components: { [key: string]: any } = {
+  Icon,
+  TimePicker,
+  VueGridLayout,
+};
 const componentsName: string[] = Object.keys(components);
-
+const withInstall = <T>(component: T, alias?: string) => {
+  const comp = component as any;
+  comp.install = (app: App) => {
+    app.component(comp.name || comp.displayName, component);
+    if (alias) {
+      app.config.globalProperties[alias] = component;
+    }
+  };
+  return component as T & Plugin;
+};
 export default {
  install: (vue: App): void => {
+    vue.use(components["VueGridLayout"]);
    componentsName.forEach((i) => {
      vue.component(i, components[i]);
    });
--- a/src/type.d.ts
+++ b/src/type.d.ts
@@ -1,114 +0,0 @@
-/**
- * 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.
- */
-import type {
-  ComponentRenderProxy,
-  VNode,
-  VNodeChild,
-  ComponentPublicInstance,
-  FunctionalComponent,
-  PropType as VuePropType,
-} from "vue";
-
-declare module "three";
-declare module "three-orbit-controls";
-declare module "element-plus";
-declare global {
-  const __APP_INFO__: {
-    pkg: {
-      name: string;
-      version: string;
-      dependencies: Recordable<string>;
-      devDependencies: Recordable<string>;
-    };
-    lastBuildTime: string;
-  };
-
-  // vue
-  declare type PropType<T> = VuePropType<T>;
-  declare type VueNode = VNodeChild | JSX.Element;
-
-  export type Writable<T> = {
-    -readonly [P in keyof T]: T[P];
-  };
-
-  declare type Nullable<T> = T | null;
-  declare type NonNullable<T> = T extends null | undefined ? never : T;
-  declare type Recordable<T = any> = Record<string, T>;
-  declare type ReadonlyRecordable<T = any> = {
-    readonly [key: string]: T;
-  };
-  declare type Indexable<T = any> = {
-    [key: string]: T;
-  };
-  declare type DeepPartial<T> = {
-    [P in keyof T]?: DeepPartial<T[P]>;
-  };
-  declare type TimeoutHandle = ReturnType<typeof setTimeout>;
-  declare type IntervalHandle = ReturnType<typeof setInterval>;
-
-  declare interface ChangeEvent extends Event {
-    target: HTMLInputElement;
-  }
-
-  declare interface WheelEvent {
-    path?: EventTarget[];
-  }
-  interface ImportMetaEnv extends ViteEnv {
-    __: unknown;
-  }
-
-  declare interface ViteEnv {
-    VITE_PORT: number;
-    VITE_USE_MOCK: boolean;
-    VITE_USE_PWA: boolean;
-    VITE_PUBLIC_PATH: string;
-    VITE_PROXY: [string, string][];
-    VITE_GLOB_APP_TITLE: string;
-    VITE_GLOB_APP_SHORT_NAME: string;
-    VITE_USE_CDN: boolean;
-    VITE_DROP_CONSOLE: boolean;
-    VITE_BUILD_COMPRESS: "gzip" | "brotli" | "none";
-    VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
-    VITE_LEGACY: boolean;
-    VITE_USE_IMAGEMIN: boolean;
-    VITE_GENERATE_UI: string;
-  }
-
-  declare function parseInt(s: string | number, radix?: number): number;
-
-  declare function parseFloat(string: string | number): number;
-
-  namespace JSX {
-    type Element = VNode;
-    type ElementClass = ComponentRenderProxy;
-    interface ElementAttributesProperty {
-      $props: any;
-    }
-    interface IntrinsicElements {
-      [elem: string]: any;
-    }
-    interface IntrinsicAttributes {
-      [elem: string]: any;
-    }
-  }
-}
-
-declare module "vue" {
-  export type JSXComponent<Props = any> =
-    | { new (): ComponentPublicInstance<Props> }
-    | FunctionalComponent<Props>;
-}
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -38,7 +38,7 @@ declare global {
  };

  // vue
-  declare type PropType<T> = VuePropType<T>;
+  export declare type PropType<T> = VuePropType<T>;
  declare type VueNode = VNodeChild | JSX.Element;

  export type Writable<T> = {
--- a/src/types/vue-grid-layout.d.ts
+++ b/src/types/vue-grid-layout.d.ts
@@ -14,8 +14,18 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-declare module "vue-drag-resize" {
+declare module "vue-grid-layout" {
  import Vue from "vue";

-  export class VueDragResize extends Vue {}
+  export class GridLayout extends Vue {}
+
+  export class GridItem extends Vue {}
+
+  export interface GridItemData {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    i: string;
+  }
 }
--- a/src/views/dashboard/Edit.vue
+++ b/src/views/dashboard/Edit.vue
@@ -20,73 +20,27 @@ limitations under the License. -->
  </div>
  <div class="flex-h ds-main">
    <div class="ds-layout">
-      <VueDragResize
-        :isActive="item.static"
-        :w="item.w"
-        :h="item.h"
-        :x="item.x"
-        :y="item.y"
-        @resizing="resize"
-        @dragging="resize"
-        v-for="item in layout"
-        :key="item.i"
-      >
-        <h3>Hello World {{ item.i }}</h3>
-      </VueDragResize>
+      <GridLayout />
    </div>
    <div class="ds-config">Configurations</div>
  </div>
 </template>
-<script lang="ts">
+<script lang="ts" setup>
 import { toRefs, defineComponent, reactive, ref } from "vue";
 import { ElButton } from "element-plus";
-import VueDragResize from "vue-drag-resize";
-
-export interface GridItemData {
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-  i: number;
-  static: boolean;
-}
-
-export default defineComponent({
-  name: "dashboardEdit",
-  components: {
-    ElButton,
-    VueDragResize,
-  },
-  setup() {
-    const layout = ref<GridItemData[]>([
-      { x: 300, y: 100, w: 200, h: 200, i: 0, static: true },
-      { x: 500, y: 100, w: 200, h: 200, i: 1, static: true },
-      { x: 700, y: 100, w: 200, h: 200, i: 2, static: true },
-      { x: 900, y: 100, w: 200, h: 200, i: 3, static: true },
-    ]);
-
-    function resize(newRect: {
-      width: number;
-      height: number;
-      top: number;
-      left: number;
-    }) {
-      console.log(newRect);
-    }
-    return { resize, layout };
-  },
-});
+import GridLayout from "./widget/GridLayout.vue";
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {
  text-align: right;
  padding: 5px 10px;
  background: rgb(240, 242, 245);
-  // border-bottom: 1px solid rgb(240, 242, 245);
+  border-bottom: 1px solid #ccc;
 }

 .ds-main {
-  background: rgb(240, 242, 245);
+  background: #f7f9fa;
+  // background: #eee;
 }

 .ds-layout {
@@ -113,63 +67,4 @@ export default defineComponent({
  margin: 5px;
  text-align: center;
 }
-
-.vue-grid-layout {
-  background: #eee;
-}
-
-.vue-grid-item:not(.vue-grid-placeholder) {
-  background: #ccc;
-  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;
-}
 </style>
--- a/src/views/dashboard/widget/GridItem.vue
+++ b/src/views/dashboard/widget/GridItem.vue
@@ -0,0 +1,60 @@
+<!-- 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>
+  <VueDragResize
+    :isActive="item.static"
+    :w="item.w"
+    :h="item.h"
+    :x="item.x"
+    :y="item.y"
+    @resizing="resize"
+    @dragging="resize"
+  >
+    <h3>Hello World {{ item.i }}</h3>
+  </VueDragResize>
+</template>
+<script lang="ts" setup>
+import { defineProps, defineEmits } from "vue";
+import type { PropType } from "vue";
+import VueDragResize from "vue-drag-resize";
+interface GridItemData {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  i: number;
+  static: boolean;
+}
+const props = defineProps({
+  item: { type: Object as PropType<GridItemData> },
+});
+const emit = defineEmits(["move"]);
+
+function resize(newRect: {
+  width: number;
+  height: number;
+  top: number;
+  left: number;
+}) {
+  const m = {
+    ...props.item,
+    x: newRect.left,
+    y: newRect.top,
+    w: newRect.width,
+    h: newRect.height,
+  };
+  emit("move", m);
+}
+</script>
--- a/src/views/dashboard/widget/GridLayout.vue
+++ b/src/views/dashboard/widget/GridLayout.vue
@@ -0,0 +1,132 @@
+<!-- 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="layout"
+    :col-num="12"
+    :row-height="30"
+    :is-draggable="true"
+    :is-resizable="true"
+    :is-mirrored="false"
+    :vertical-compact="true"
+    :margin="[10, 10]"
+    :use-css-transforms="true"
+  >
+    <grid-item
+      v-for="item in layout"
+      :x="item.x"
+      :y="item.y"
+      :w="item.w"
+      :h="item.h"
+      :i="item.i"
+      :key="item.i"
+    >
+      {{ item.i }}
+    </grid-item>
+  </grid-layout>
+</template>
+<script lang="ts" setup>
+import { ref } from "vue";
+export interface GridItemData {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  i: number;
+  static: boolean;
+}
+const layout = [
+  { x: 0, y: 0, w: 2, h: 2, i: "0" },
+  { x: 2, y: 0, w: 2, h: 4, i: "1" },
+  { x: 4, y: 0, w: 2, h: 5, i: "2" },
+  { x: 6, y: 0, w: 2, h: 3, i: "3" },
+  { x: 8, y: 0, w: 2, h: 3, i: "4" },
+  { x: 10, y: 0, w: 2, h: 3, i: "5" },
+  { x: 0, y: 5, w: 2, h: 5, i: "6" },
+  { x: 2, y: 5, w: 2, h: 5, i: "7" },
+  { x: 4, y: 5, w: 2, h: 5, i: "8" },
+  { x: 6, y: 3, w: 2, h: 4, i: "9" },
+  { x: 8, y: 4, w: 2, h: 4, i: "10" },
+  { x: 10, y: 4, w: 2, h: 4, i: "11" },
+  { x: 0, y: 10, w: 2, h: 5, i: "12" },
+  { x: 2, y: 10, w: 2, h: 5, i: "13" },
+  { x: 4, y: 8, w: 2, h: 4, i: "14" },
+  { x: 6, y: 8, w: 2, h: 4, i: "15" },
+  { x: 8, y: 10, w: 2, h: 5, i: "16" },
+  { x: 10, y: 4, w: 2, h: 2, i: "17" },
+  { x: 0, y: 9, w: 2, h: 3, i: "18" },
+  { x: 2, y: 6, w: 2, h: 2, i: "19" },
+];
+</script>
+<style lang="scss" scoped>
+.vue-grid-layout {
+  background: #f7f9fa;
+}
+
+.vue-grid-item:not(.vue-grid-placeholder) {
+  background: #ccc;
+  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;
+}
+</style>