mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-02 06:04:01 +00:00
feat: update layout
This commit is contained in:
Qiuxia Fan
parent
d98280c427
commit
aa196251f6
165
package-lock.json
generated
165
package-lock.json
generated
@ -1321,6 +1321,132 @@
|
|||||||
"@hapi/hoek": "^8.3.0"
|
"@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": {
|
"@intervolga/optimize-cssnano-plugin": {
|
||||||
"version": "1.0.6",
|
"version": "1.0.6",
|
||||||
"resolved": "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz",
|
"resolved": "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz",
|
||||||
@ -4915,6 +5041,11 @@
|
|||||||
"integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
|
"integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
|
||||||
"dev": true
|
"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": {
|
"bcrypt-pbkdf": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
|
||||||
@ -7632,6 +7763,14 @@
|
|||||||
"normalize-wheel-es": "^1.1.0"
|
"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": {
|
"elliptic": {
|
||||||
"version": "6.5.4",
|
"version": "6.5.4",
|
||||||
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
|
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
|
||||||
@ -19577,11 +19716,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
|
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
|
||||||
"integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw=="
|
"integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw=="
|
||||||
},
|
},
|
||||||
"vue-drag-resize": {
|
|
||||||
"version": "2.0.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/vue-drag-resize/-/vue-drag-resize-2.0.3.tgz",
|
|
||||||
"integrity": "sha512-5q03tZ/LyvQsg1iHRcqs+wI2OKNbNIWl9+7V8rVL6MxJhZLCIYSSgbAUaDE38LhD6dFd5aJhdgNmES61AxjXuw=="
|
|
||||||
},
|
|
||||||
"vue-eslint-parser": {
|
"vue-eslint-parser": {
|
||||||
"version": "7.11.0",
|
"version": "7.11.0",
|
||||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
|
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
|
||||||
@ -19611,6 +19745,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": {
|
"vue-hot-reload-api": {
|
||||||
"version": "2.3.4",
|
"version": "2.3.4",
|
||||||
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
|
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
"three": "^0.131.3",
|
"three": "^0.131.3",
|
||||||
"three-orbit-controls": "^82.1.0",
|
"three-orbit-controls": "^82.1.0",
|
||||||
"vue": "^3.0.0",
|
"vue": "^3.0.0",
|
||||||
"vue-drag-resize": "^2.0.3",
|
"vue-grid-layout": "^3.0.0-beta1",
|
||||||
"vue-i18n": "^9.1.9",
|
"vue-i18n": "^9.1.9",
|
||||||
"vue-router": "^4.0.0-0",
|
"vue-router": "^4.0.0-0",
|
||||||
"vue-types": "^4.1.1",
|
"vue-types": "^4.1.1",
|
||||||
|
|||||||
@ -16,13 +16,28 @@
|
|||||||
*/
|
*/
|
||||||
import Icon from "./Icon.vue";
|
import Icon from "./Icon.vue";
|
||||||
import TimePicker from "./TimePicker.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 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 {
|
export default {
|
||||||
install: (vue: App): void => {
|
install: (vue: App): void => {
|
||||||
|
vue.use(components["VueGridLayout"]);
|
||||||
componentsName.forEach((i) => {
|
componentsName.forEach((i) => {
|
||||||
vue.component(i, components[i]);
|
vue.component(i, components[i]);
|
||||||
});
|
});
|
||||||
|
|||||||
114
src/type.d.ts
vendored
114
src/type.d.ts
vendored
@ -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>;
|
|
||||||
}
|
|
||||||
2
src/types/global.d.ts
vendored
2
src/types/global.d.ts
vendored
@ -38,7 +38,7 @@ declare global {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// vue
|
// vue
|
||||||
declare type PropType<T> = VuePropType<T>;
|
export declare type PropType<T> = VuePropType<T>;
|
||||||
declare type VueNode = VNodeChild | JSX.Element;
|
declare type VueNode = VNodeChild | JSX.Element;
|
||||||
|
|
||||||
export type Writable<T> = {
|
export type Writable<T> = {
|
||||||
|
|||||||
@ -14,8 +14,18 @@
|
|||||||
* See the License for the specific language governing permissions and
|
* See the License for the specific language governing permissions and
|
||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
declare module "vue-drag-resize" {
|
declare module "vue-grid-layout" {
|
||||||
import Vue from "vue";
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -20,73 +20,27 @@ limitations under the License. -->
|
|||||||
</div>
|
</div>
|
||||||
<div class="flex-h ds-main">
|
<div class="flex-h ds-main">
|
||||||
<div class="ds-layout">
|
<div class="ds-layout">
|
||||||
<VueDragResize
|
<GridLayout />
|
||||||
: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>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="ds-config">Configurations</div>
|
<div class="ds-config">Configurations</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts" setup>
|
||||||
import { toRefs, defineComponent, reactive, ref } from "vue";
|
import { toRefs, defineComponent, reactive, ref } from "vue";
|
||||||
import { ElButton } from "element-plus";
|
import { ElButton } from "element-plus";
|
||||||
import VueDragResize from "vue-drag-resize";
|
import GridLayout from "./widget/GridLayout.vue";
|
||||||
|
|
||||||
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 };
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.dashboard-tool {
|
.dashboard-tool {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
background: rgb(240, 242, 245);
|
background: rgb(240, 242, 245);
|
||||||
// border-bottom: 1px solid rgb(240, 242, 245);
|
border-bottom: 1px solid #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ds-main {
|
.ds-main {
|
||||||
background: rgb(240, 242, 245);
|
background: #f7f9fa;
|
||||||
|
// background: #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ds-layout {
|
.ds-layout {
|
||||||
@ -113,63 +67,4 @@ export default defineComponent({
|
|||||||
margin: 5px;
|
margin: 5px;
|
||||||
text-align: center;
|
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>
|
</style>
|
||||||
|
|||||||
@ -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>
|
||||||
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user