mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-10-14 11:21:29 +00:00
feat: add Grid Layout
This commit is contained in:
Qiuxia Fan
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>
|
||||
|
||||
Reference in New Issue
Block a user