mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-01 18:43:40 +00:00
feat: add Grid Layout
This commit is contained in:
Qiuxia Fan
parent
2aa8204434
commit
d8ff29fac5
175
package-lock.json
generated
175
package-lock.json
generated
@ -1321,6 +1321,132 @@
|
||||
"@hapi/hoek": "^8.3.0"
|
||||
}
|
||||
},
|
||||
"@interactjs/actions": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/actions/-/actions-1.10.11.tgz",
|
||||
"integrity": "sha512-P39zeefr4hkmKx+5nZ+mrH1s0l2YJ3gIHrthXmE81n6MlMa42m0WtHcTms4C5JTTNBP2EEDY+KGgGxSnmJKvUw==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/auto-scroll": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/auto-scroll/-/auto-scroll-1.10.11.tgz",
|
||||
"integrity": "sha512-feHNjhi0EMNLV2nQcEgjYPz2mI54aeSW2RiaoNtFLyBvtXKp0b4DmluwDv6DvuXmUpDwD5g/Hk1gGM2rgl7iqQ==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/auto-start": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/auto-start/-/auto-start-1.10.11.tgz",
|
||||
"integrity": "sha512-cIg5CcalCPtC6AiGq6j/0hKUtL2MweEpvw12FuB19sz2Q9Dye0J4GliHKhOYvtumNinnvfVAZ4FZMqZEuX7YZA==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/core": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/core/-/core-1.10.11.tgz",
|
||||
"integrity": "sha512-aJ50ccVeszpJt7wPH7Yfqm7f1aG1SA94qd90P0NaESh5/QUXn4CESO6igobo4DFHQ5z+1Rfdl8aphP4JxlH4gw=="
|
||||
},
|
||||
"@interactjs/dev-tools": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/dev-tools/-/dev-tools-1.10.11.tgz",
|
||||
"integrity": "sha512-BP2FNfMbF7zLuOAUGMkDhCo1e1B0fnqyb9ih/Y8yAIJuoLrZxP/9htbsS1vZOIVZ4UgtrId4cYOwfcAZBMQtmw==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/inertia": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/inertia/-/inertia-1.10.11.tgz",
|
||||
"integrity": "sha512-h+sknCzRqBSyHy4ctPNsq56mxkAMMdwHWD6en7rDEw899gdGKYaXVDVdv1jMfiwNRw0eRFBNoCiol8r3a/a3Jw==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11",
|
||||
"@interactjs/offset": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/interact": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/interact/-/interact-1.10.11.tgz",
|
||||
"integrity": "sha512-0iZJ9l547JuBA/lKxK4ARGYVmMqRSsAdA8gXL1zWe51qEIQq8PyWmMipoi8JbDaL7exC2THKwkXu5uq5ndT+iA==",
|
||||
"requires": {
|
||||
"@interactjs/core": "1.10.11",
|
||||
"@interactjs/types": "1.10.11",
|
||||
"@interactjs/utils": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/interactjs": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/interactjs/-/interactjs-1.10.11.tgz",
|
||||
"integrity": "sha512-cGOxf6rp3Y8/sk88LhIT0XDn4gCiCzAnUG5Kkj9SAqiUO6BK/9+Wbp1IBkNaPgl/8uG8gNHh/dXBrlBBNcqJAg==",
|
||||
"requires": {
|
||||
"@interactjs/actions": "1.10.11",
|
||||
"@interactjs/auto-scroll": "1.10.11",
|
||||
"@interactjs/auto-start": "1.10.11",
|
||||
"@interactjs/core": "1.10.11",
|
||||
"@interactjs/dev-tools": "1.10.11",
|
||||
"@interactjs/inertia": "1.10.11",
|
||||
"@interactjs/interact": "1.10.11",
|
||||
"@interactjs/modifiers": "1.10.11",
|
||||
"@interactjs/offset": "1.10.11",
|
||||
"@interactjs/pointer-events": "1.10.11",
|
||||
"@interactjs/reflow": "1.10.11",
|
||||
"@interactjs/utils": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/modifiers": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/modifiers/-/modifiers-1.10.11.tgz",
|
||||
"integrity": "sha512-ltqX1RSqeAIikixlQBlyEUdclT5+rbfIGi3sIdLLYaIZQnltYkWqL9MHKx/w5b+hV+Mc0p5MLUFWJbTdkSCZ9g==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11",
|
||||
"@interactjs/snappers": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/offset": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/offset/-/offset-1.10.11.tgz",
|
||||
"integrity": "sha512-mBT7eIfy5ivofECiv+VwtEwwIMLV54fT9ujSMWJPduxdSYIHepUWgEf/3zjJknFh6jQc7pqz9dtjvVvyzRCLlQ==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/pointer-events": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/pointer-events/-/pointer-events-1.10.11.tgz",
|
||||
"integrity": "sha512-yBT8JJVMZ+MgBay5l1WAHnL8ch/mZsRfaFahti+QFYeQyRloDtsWmEMDSYI/Onyy9+hS3gN/ge77ArGciZZ0Ow==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/reflow": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/reflow/-/reflow-1.10.11.tgz",
|
||||
"integrity": "sha512-NSCtcCkjImOYSbxzzv2kFqR9t49J8KlhEr9UoePc7GyLbNXsiv3WQ3n0ehZd7CgZXQDiVXnP2UnmIOv5Zd4HQg==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/snappers": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/snappers/-/snappers-1.10.11.tgz",
|
||||
"integrity": "sha512-yYtOMUZ7aFUZ1IYheq9Tj5hZ4J1r5dnaXhLF44WsI/awQ5L0DjZf07GPWof0B+7rZHEVudxyQNbPfFmb+1K94Q==",
|
||||
"requires": {
|
||||
"@interactjs/interact": "1.10.11"
|
||||
}
|
||||
},
|
||||
"@interactjs/types": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/types/-/types-1.10.11.tgz",
|
||||
"integrity": "sha512-YRsVFWjL8Gkkvlx3qnjeaxW4fnibSJ9791g8BA7Pv5ANByI64WmtR1vU7A2rXcrOn8XvyCEfY0ss1s8NhZP+MA=="
|
||||
},
|
||||
"@interactjs/utils": {
|
||||
"version": "1.10.11",
|
||||
"resolved": "https://registry.npmjs.org/@interactjs/utils/-/utils-1.10.11.tgz",
|
||||
"integrity": "sha512-410ZoxKF+r1roeSelL+WHXfdryUMg5iykC1XwQ3l6XqNw43IMACzyvTH6k6Pwxj7w7x42nce0Qdn1GQ3Y8xyCw=="
|
||||
},
|
||||
"@intervolga/optimize-cssnano-plugin": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz",
|
||||
@ -4898,6 +5024,11 @@
|
||||
"integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
|
||||
"dev": true
|
||||
},
|
||||
"batch-processor": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
|
||||
"integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
|
||||
},
|
||||
"bcrypt-pbkdf": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
|
||||
@ -7594,6 +7725,14 @@
|
||||
"normalize-wheel-es": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"element-resize-detector": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
|
||||
"integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
|
||||
"requires": {
|
||||
"batch-processor": "1.0.0"
|
||||
}
|
||||
},
|
||||
"elliptic": {
|
||||
"version": "6.5.4",
|
||||
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
|
||||
@ -18649,6 +18788,27 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-grid-layout": {
|
||||
"version": "3.0.0-beta1",
|
||||
"resolved": "https://registry.npmjs.org/vue-grid-layout/-/vue-grid-layout-3.0.0-beta1.tgz",
|
||||
"integrity": "sha512-MsW0yfYNtnAO/uDhfZvkP6effxSJxvhAFbIL37x6Rn3vW9xf0WHVefKaSbQMLpSq3mXnR6ut0pg2Cd5lqIIZzg==",
|
||||
"requires": {
|
||||
"@interactjs/actions": "^1.10.2",
|
||||
"@interactjs/auto-start": "^1.10.2",
|
||||
"@interactjs/dev-tools": "^1.10.2",
|
||||
"@interactjs/interactjs": "^1.10.2",
|
||||
"@interactjs/modifiers": "^1.10.2",
|
||||
"element-resize-detector": "^1.2.1",
|
||||
"mitt": "^2.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"mitt": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
|
||||
"integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-hot-reload-api": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
|
||||
@ -18741,6 +18901,21 @@
|
||||
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
|
||||
"dev": true
|
||||
},
|
||||
"vue-types": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-types/-/vue-types-4.1.1.tgz",
|
||||
"integrity": "sha512-Jq2GZ/w6rExJbLA/h7nHBFLciu+YNekgox0DB64wN1snZ4IIJMq+qnqp1/vE4fc7vEjZcP5KGhLzkkSjIHLRzw==",
|
||||
"requires": {
|
||||
"is-plain-object": "5.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"is-plain-object": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
|
||||
"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"vuex": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
|
||||
|
||||
@ -16,8 +16,10 @@
|
||||
"three": "^0.131.3",
|
||||
"three-orbit-controls": "^82.1.0",
|
||||
"vue": "^3.0.0",
|
||||
"vue-grid-layout": "^3.0.0-beta1",
|
||||
"vue-i18n": "^9.1.9",
|
||||
"vue-router": "^4.0.0-0",
|
||||
"vue-types": "^4.1.1",
|
||||
"vuex": "^4.0.0-0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
114
src/types/global.d.ts
vendored
Normal file
114
src/types/global.d.ts
vendored
Normal file
@ -0,0 +1,114 @@
|
||||
/**
|
||||
* 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>;
|
||||
}
|
||||
31
src/types/vue-grid-item.d.ts
vendored
Normal file
31
src/types/vue-grid-item.d.ts
vendored
Normal file
@ -0,0 +1,31 @@
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
declare module "vue-grid-layout" {
|
||||
import Vue from "vue";
|
||||
|
||||
export class GridLayout extends Vue {}
|
||||
|
||||
export class GridItem extends Vue {}
|
||||
|
||||
export interface GridItemData {
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h: number;
|
||||
i: string;
|
||||
}
|
||||
}
|
||||
@ -19,16 +19,74 @@ limitations under the License. -->
|
||||
<el-button size="mini" type="primary">Apply</el-button>
|
||||
</div>
|
||||
<div class="flex-h ds-main">
|
||||
<div class="ds-layout flex-h">
|
||||
<div class="panel">item</div>
|
||||
<div class="panel">item</div>
|
||||
<div class="panel">item</div>
|
||||
<div class="ds-layout">
|
||||
<grid-layout
|
||||
v-model="layout"
|
||||
:col-num="12"
|
||||
:row-height="30"
|
||||
:is-draggable="draggable"
|
||||
:is-resizable="resizable"
|
||||
:vertical-compact="true"
|
||||
:use-css-transforms="true"
|
||||
>
|
||||
<grid-item
|
||||
v-for="item in layout"
|
||||
:static="item.static"
|
||||
:x="item.x"
|
||||
:y="item.y"
|
||||
:w="item.w"
|
||||
:h="item.h"
|
||||
:i="item.i"
|
||||
:key="item.i"
|
||||
>
|
||||
<span class="text">{{ itemTitle(item) }}</span>
|
||||
</grid-item>
|
||||
</grid-layout>
|
||||
</div>
|
||||
<div class="ds-config">config</div>
|
||||
<div class="ds-config">Configurations</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import { ElButton } from "element-plus";
|
||||
import { GridLayout, GridItem, GridItemData } from "vue-grid-layout";
|
||||
interface CustomData extends GridItemData {
|
||||
label?: string;
|
||||
static: boolean;
|
||||
}
|
||||
const layout = reactive<CustomData[]>([
|
||||
{ x: 0, y: 0, w: 2, h: 2, i: "0", static: false },
|
||||
{ x: 2, y: 0, w: 2, h: 4, i: "1", static: true },
|
||||
{ x: 4, y: 0, w: 2, h: 5, i: "2", static: false },
|
||||
{ x: 6, y: 0, w: 2, h: 3, i: "3", static: false },
|
||||
{ x: 8, y: 0, w: 2, h: 3, i: "4", static: false },
|
||||
{ x: 10, y: 0, w: 2, h: 3, i: "5", static: false },
|
||||
{ x: 0, y: 5, w: 2, h: 5, i: "6", static: false },
|
||||
{ x: 2, y: 5, w: 2, h: 5, i: "7", static: false },
|
||||
{ x: 4, y: 5, w: 2, h: 5, i: "8", static: false },
|
||||
{ x: 6, y: 3, w: 2, h: 4, i: "9", static: true },
|
||||
{ x: 8, y: 4, w: 2, h: 4, i: "10", static: false },
|
||||
{ x: 10, y: 4, w: 2, h: 4, i: "11", static: false },
|
||||
{ x: 0, y: 10, w: 2, h: 5, i: "12", static: false },
|
||||
{ x: 2, y: 10, w: 2, h: 5, i: "13", static: false },
|
||||
{ x: 4, y: 8, w: 2, h: 4, i: "14", static: false },
|
||||
{ x: 6, y: 8, w: 2, h: 4, i: "15", static: false },
|
||||
{ x: 8, y: 10, w: 2, h: 5, i: "16", static: false },
|
||||
{ x: 10, y: 4, w: 2, h: 2, i: "17", static: false },
|
||||
{ x: 0, y: 9, w: 2, h: 3, i: "18", static: false },
|
||||
{ x: 2, y: 6, w: 2, h: 2, i: "19", static: false },
|
||||
]);
|
||||
console.log(layout);
|
||||
const draggable = ref(true);
|
||||
const resizable = ref(true);
|
||||
const index = ref(0);
|
||||
function itemTitle(item: any) {
|
||||
let result = item.i;
|
||||
if (item.static) {
|
||||
result += " - Static";
|
||||
}
|
||||
return result;
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-tool {
|
||||
@ -52,6 +110,8 @@ import { ElButton } from "element-plus";
|
||||
width: 360px;
|
||||
margin: 5px 0;
|
||||
background-color: #fff;
|
||||
box-shadow: 5px 5px 5px #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.panel {
|
||||
width: 300px;
|
||||
@ -60,4 +120,54 @@ import { ElButton } from "element-plus";
|
||||
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>
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
"webpack-env",
|
||||
"jest"
|
||||
],
|
||||
"typeRoots": ["./node_modules/@types/", "./types"],
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user