@keyblade/pro-components 1.5.1 → 1.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/pro-layout/index.js +1 -1
- package/es/pro-layout/pro-layout.vue.js +79 -74
- package/es/pro-menu/interface.d.ts +6 -0
- package/es/pro-menu/pro-menu.vue.js +56 -53
- package/es/style.css +1 -1
- package/package.json +1 -1
package/es/pro-layout/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import { ProReuseTabs as f } from "../pro-reuse-tabs/index.js";
|
|
|
7
7
|
import { IconMenuFold as c, IconMenuUnfold as l } from "@arco-design/web-vue/es/icon";
|
|
8
8
|
const y = Object.assign(e, {
|
|
9
9
|
install: (o) => {
|
|
10
|
-
o.use(r), o.use(t), o.use(u), o.use(s), o.use(m), o.use(
|
|
10
|
+
o.use(r), o.use(t), o.use(u), o.use(s), o.use(m), o.use(i), o.use(f), o.use(n), o.use(c), o.use(l), o.component("KbProLayout", e);
|
|
11
11
|
}
|
|
12
12
|
}), x = y;
|
|
13
13
|
export {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as U, useCssVars as X, toRefs as Y, useSlots as Z, provide as S, ref as ee, watch as w, resolveComponent as o, openBlock as a, createBlock as
|
|
1
|
+
import { defineComponent as U, useCssVars as X, toRefs as Y, useSlots as Z, provide as S, ref as ee, watch as w, resolveComponent as o, openBlock as a, createBlock as c, normalizeClass as t, withCtx as s, createVNode as r, createElementVNode as p, unref as n, renderSlot as m, createElementBlock as y, Fragment as b, createTextVNode as g, toDisplayString as v, createCommentVNode as u } from "vue";
|
|
2
2
|
import { useHooks as te } from "./hooks.js";
|
|
3
3
|
const le = ["src"], oe = ["src"], e = "keyblade-pro-layout", ae = 48, re = /* @__PURE__ */ U({
|
|
4
4
|
__name: "pro-layout",
|
|
@@ -76,18 +76,18 @@ const le = ["src"], oe = ["src"], e = "keyblade-pro-layout", ae = 48, re = /* @_
|
|
|
76
76
|
},
|
|
77
77
|
emits: {
|
|
78
78
|
/** 收缩事件 */
|
|
79
|
-
collapse: (
|
|
79
|
+
collapse: (l) => !0,
|
|
80
80
|
/** keepAlive改变事件 */
|
|
81
|
-
keepAliveIncludeChange: (
|
|
81
|
+
keepAliveIncludeChange: (l) => !0
|
|
82
82
|
},
|
|
83
|
-
setup(
|
|
84
|
-
const f =
|
|
85
|
-
X((
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
"
|
|
83
|
+
setup(l, { emit: $ }) {
|
|
84
|
+
const f = l;
|
|
85
|
+
X((i) => ({
|
|
86
|
+
"72cbe0ed": V,
|
|
87
|
+
af7d7fc0: D,
|
|
88
|
+
"744d8aa5": K
|
|
89
89
|
}));
|
|
90
|
-
const { menuItems: C } = Y(f),
|
|
90
|
+
const { menuItems: C } = Y(f), h = Z(), {
|
|
91
91
|
menuSelectedKeys: N,
|
|
92
92
|
breadcrumbItems: P,
|
|
93
93
|
tabs: T,
|
|
@@ -99,96 +99,101 @@ const le = ["src"], oe = ["src"], e = "keyblade-pro-layout", ae = 48, re = /* @_
|
|
|
99
99
|
hideTabs: f.hideTabs
|
|
100
100
|
});
|
|
101
101
|
S("ProBreadcrumbItems", P), S("ProKeepAliveInclude", _);
|
|
102
|
-
const V = `${f.headerHeight}px`, D = `${f.siderWidth}px`, K = `${ae}px`, d = ee(f.siderCollapsed), x = (
|
|
103
|
-
d.value =
|
|
102
|
+
const V = `${f.headerHeight}px`, D = `${f.siderWidth}px`, K = `${ae}px`, d = ee(f.siderCollapsed), x = (i) => {
|
|
103
|
+
d.value = i, $("collapse", i);
|
|
104
104
|
};
|
|
105
105
|
return w(() => f.siderCollapsed, () => {
|
|
106
106
|
d.value = f.siderCollapsed;
|
|
107
107
|
}, { immediate: !0 }), w(_, () => {
|
|
108
108
|
$("keepAliveIncludeChange", _.value);
|
|
109
|
-
}, { immediate: !0 }), (
|
|
109
|
+
}, { immediate: !0 }), (i, I) => {
|
|
110
110
|
const q = o("a-typography-title"), B = o("a-space"), F = o("a-layout-header"), M = o("kb-pro-menu"), z = o("icon-menu-unfold"), E = o("icon-menu-fold"), R = o("a-button"), j = o("a-layout-sider"), G = o("kb-pro-reuse-tabs"), J = o("a-affix"), L = o("kb-pro-keep-alive-router-view"), O = o("a-layout-content"), Q = o("a-layout-footer"), k = o("a-layout");
|
|
111
|
-
return a(),
|
|
112
|
-
class:
|
|
111
|
+
return a(), c(k, {
|
|
112
|
+
class: t([e, `${e}-${l.layout}`])
|
|
113
113
|
}, {
|
|
114
114
|
default: s(() => [
|
|
115
|
-
|
|
116
|
-
class:
|
|
115
|
+
r(F, {
|
|
116
|
+
class: t([`${e}-header`, { [`${e}-header-collapsed`]: d.value }])
|
|
117
117
|
}, {
|
|
118
118
|
default: s(() => [
|
|
119
119
|
p("div", {
|
|
120
|
-
class:
|
|
120
|
+
class: t(`${e}-header-left`)
|
|
121
121
|
}, [
|
|
122
|
-
n(
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
122
|
+
n(h)["header-left"] ? m(i.$slots, "header-left", { key: 0 }) : (a(), y(b, { key: 1 }, [
|
|
123
|
+
l.layout !== "side" ? (a(), y("div", {
|
|
124
|
+
key: 0,
|
|
125
|
+
class: t(`${e}-header-left-logo`)
|
|
126
|
+
}, [
|
|
127
|
+
r(B, null, {
|
|
128
|
+
default: s(() => [
|
|
129
|
+
p("img", {
|
|
130
|
+
class: t(`${e}-header-left-logo-img`),
|
|
131
|
+
alt: "logo",
|
|
132
|
+
src: l.logo
|
|
133
|
+
}, null, 10, le),
|
|
134
|
+
d.value ? u("", !0) : (a(), c(q, {
|
|
135
|
+
key: 0,
|
|
136
|
+
class: t(`${e}-header-left-logo-title`),
|
|
137
|
+
heading: 5
|
|
138
|
+
}, {
|
|
139
|
+
default: s(() => [
|
|
140
|
+
g(v(l.title), 1)
|
|
141
|
+
]),
|
|
142
|
+
_: 1
|
|
143
|
+
}, 8, ["class"]))
|
|
144
|
+
]),
|
|
145
|
+
_: 1
|
|
146
|
+
})
|
|
147
|
+
], 2)) : u("", !0)
|
|
143
148
|
], 64))
|
|
144
149
|
], 2),
|
|
145
150
|
p("div", {
|
|
146
|
-
class:
|
|
151
|
+
class: t(`${e}-header-center`)
|
|
147
152
|
}, [
|
|
148
|
-
n(
|
|
153
|
+
n(h)["header-center"] ? m(i.$slots, "header-center", { key: 0 }) : u("", !0)
|
|
149
154
|
], 2),
|
|
150
155
|
p("div", {
|
|
151
|
-
class:
|
|
156
|
+
class: t(`${e}-header-right`)
|
|
152
157
|
}, [
|
|
153
|
-
m(
|
|
158
|
+
m(i.$slots, "header-right")
|
|
154
159
|
], 2)
|
|
155
160
|
]),
|
|
156
161
|
_: 3
|
|
157
162
|
}, 8, ["class"]),
|
|
158
|
-
|
|
163
|
+
r(k, null, {
|
|
159
164
|
default: s(() => [
|
|
160
|
-
|
|
161
|
-
class:
|
|
162
|
-
width:
|
|
165
|
+
r(j, {
|
|
166
|
+
class: t([`${e}-sider`, { [`${e}-sider-collapsed`]: d.value }]),
|
|
167
|
+
width: l.siderWidth,
|
|
163
168
|
collapsible: !0,
|
|
164
|
-
breakpoint:
|
|
169
|
+
breakpoint: l.siderBreakpoint,
|
|
165
170
|
collapsed: d.value,
|
|
166
171
|
"hide-trigger": !0,
|
|
167
172
|
onCollapse: x
|
|
168
173
|
}, {
|
|
169
174
|
default: s(() => [
|
|
170
175
|
p("div", {
|
|
171
|
-
class:
|
|
176
|
+
class: t(`${e}-sider-content`)
|
|
172
177
|
}, [
|
|
173
|
-
n(
|
|
174
|
-
|
|
178
|
+
n(h)["sider-top"] ? m(i.$slots, "sider-top", { key: 0 }) : (a(), y(b, { key: 1 }, [
|
|
179
|
+
l.layout === "side" ? (a(), y("div", {
|
|
175
180
|
key: 0,
|
|
176
|
-
class:
|
|
181
|
+
class: t(`${e}-sider-content-logo`)
|
|
177
182
|
}, [
|
|
178
|
-
|
|
183
|
+
r(B, null, {
|
|
179
184
|
default: s(() => [
|
|
180
185
|
p("img", {
|
|
181
|
-
class:
|
|
186
|
+
class: t(`${e}-sider-content-logo-img`),
|
|
182
187
|
alt: "logo",
|
|
183
|
-
src:
|
|
188
|
+
src: l.logo
|
|
184
189
|
}, null, 10, oe),
|
|
185
|
-
d.value ? u("", !0) : (a(),
|
|
190
|
+
d.value ? u("", !0) : (a(), c(q, {
|
|
186
191
|
key: 0,
|
|
187
|
-
class:
|
|
192
|
+
class: t(`${e}-sider-content-logo-title`),
|
|
188
193
|
heading: 5
|
|
189
194
|
}, {
|
|
190
195
|
default: s(() => [
|
|
191
|
-
g(v(
|
|
196
|
+
g(v(l.title), 1)
|
|
192
197
|
]),
|
|
193
198
|
_: 1
|
|
194
199
|
}, 8, ["class"]))
|
|
@@ -197,37 +202,37 @@ const le = ["src"], oe = ["src"], e = "keyblade-pro-layout", ae = 48, re = /* @_
|
|
|
197
202
|
})
|
|
198
203
|
], 2)) : u("", !0)
|
|
199
204
|
], 64)),
|
|
200
|
-
|
|
205
|
+
r(M, {
|
|
201
206
|
collapsed: d.value,
|
|
202
207
|
"selected-keys": n(N),
|
|
203
208
|
items: n(C),
|
|
204
209
|
onMenuItemClick: n(W)
|
|
205
210
|
}, null, 8, ["collapsed", "selected-keys", "items", "onMenuItemClick"])
|
|
206
211
|
], 2),
|
|
207
|
-
|
|
212
|
+
r(R, {
|
|
213
|
+
class: t(`${e}-sider-collapse-btn`),
|
|
208
214
|
size: "mini",
|
|
209
|
-
class: l(`${e}-sider-collapsed-icon`),
|
|
210
215
|
onClick: I[0] || (I[0] = (se) => x(!d.value))
|
|
211
216
|
}, {
|
|
212
217
|
icon: s(() => [
|
|
213
|
-
d.value ? (a(),
|
|
218
|
+
d.value ? (a(), c(z, { key: 0 })) : (a(), c(E, { key: 1 }))
|
|
214
219
|
]),
|
|
215
220
|
_: 1
|
|
216
221
|
}, 8, ["class"])
|
|
217
222
|
]),
|
|
218
223
|
_: 3
|
|
219
224
|
}, 8, ["class", "width", "breakpoint", "collapsed"]),
|
|
220
|
-
|
|
221
|
-
class:
|
|
225
|
+
r(k, {
|
|
226
|
+
class: t([`${e}-body`, { [`${e}-body-collapsed`]: d.value }])
|
|
222
227
|
}, {
|
|
223
228
|
default: s(() => [
|
|
224
|
-
|
|
229
|
+
l.hideTabs ? u("", !0) : (a(), c(J, {
|
|
225
230
|
key: 0,
|
|
226
|
-
class:
|
|
227
|
-
offsetTop:
|
|
231
|
+
class: t(`${e}-body-affix`),
|
|
232
|
+
offsetTop: l.headerHeight
|
|
228
233
|
}, {
|
|
229
234
|
default: s(() => [
|
|
230
|
-
n(T).length > 0 ? (a(),
|
|
235
|
+
n(T).length > 0 ? (a(), c(G, {
|
|
231
236
|
key: 0,
|
|
232
237
|
tabs: n(T),
|
|
233
238
|
onTabClick: n(A),
|
|
@@ -236,19 +241,19 @@ const le = ["src"], oe = ["src"], e = "keyblade-pro-layout", ae = 48, re = /* @_
|
|
|
236
241
|
]),
|
|
237
242
|
_: 1
|
|
238
243
|
}, 8, ["class", "offsetTop"])),
|
|
239
|
-
|
|
244
|
+
r(O, null, {
|
|
240
245
|
default: s(() => [
|
|
241
|
-
|
|
246
|
+
r(L)
|
|
242
247
|
]),
|
|
243
248
|
_: 1
|
|
244
249
|
}),
|
|
245
|
-
|
|
246
|
-
n(
|
|
250
|
+
l.hideFooter ? u("", !0) : (a(), y(b, { key: 1 }, [
|
|
251
|
+
n(h).footer !== void 0 ? m(i.$slots, "footer", { key: 0 }) : (a(), c(Q, {
|
|
247
252
|
key: 1,
|
|
248
|
-
class:
|
|
253
|
+
class: t(`${e}-body-footer`)
|
|
249
254
|
}, {
|
|
250
255
|
default: s(() => [
|
|
251
|
-
g(v(
|
|
256
|
+
g(v(l.footerTitle), 1)
|
|
252
257
|
]),
|
|
253
258
|
_: 1
|
|
254
259
|
}, 8, ["class"]))
|
|
@@ -13,6 +13,12 @@ export interface IProMenuItem {
|
|
|
13
13
|
* 方式二、url: 绝对路径或相对路径
|
|
14
14
|
* */
|
|
15
15
|
icon?: string;
|
|
16
|
+
/**
|
|
17
|
+
* 选中菜单图标
|
|
18
|
+
* 方式一、arco design icon: 'icon-apps'，这样需要在主项目中，手动使用 app.use(IconXXX) 进行注册，否则按需加载不能识别动态组件
|
|
19
|
+
* 方式二、url: 绝对路径或相对路径
|
|
20
|
+
* */
|
|
21
|
+
selectedIcon?: string;
|
|
16
22
|
/** 如果设置为 true，右侧菜单不显示 */
|
|
17
23
|
hideInMenu?: boolean;
|
|
18
24
|
/** 如果设置为 true，右侧菜单不显示下面子菜单 */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { createReusableTemplate as
|
|
3
|
-
import { useRouter as
|
|
4
|
-
const
|
|
1
|
+
import { defineComponent as W, computed as b, resolveComponent as k, openBlock as l, createBlock as c, normalizeClass as f, withCtx as a, createVNode as $, unref as _, createSlots as I, createTextVNode as N, toDisplayString as T, createElementBlock as s, Fragment as v, renderList as q, createCommentVNode as r, resolveDynamicComponent as B } from "vue";
|
|
2
|
+
import { createReusableTemplate as A } from "@vueuse/core";
|
|
3
|
+
import { useRouter as z } from "vue-router";
|
|
4
|
+
const E = ["src"], F = ["src"], L = "keyblade-pro-menu", w = "keyblade-pro-menu-item", J = /* @__PURE__ */ W({
|
|
5
5
|
__name: "pro-menu",
|
|
6
6
|
props: {
|
|
7
7
|
mode: {
|
|
@@ -23,97 +23,100 @@ const A = ["src"], K = ["src"], z = "keyblade-pro-menu", T = "keyblade-pro-menu-
|
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
25
|
emits: {
|
|
26
|
-
"menu-item-click": (
|
|
26
|
+
"menu-item-click": (u) => !0
|
|
27
27
|
},
|
|
28
|
-
setup(
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
return
|
|
32
|
-
}),
|
|
28
|
+
setup(u, { emit: D }) {
|
|
29
|
+
const p = u, y = z(), [K, C] = A(), t = b(() => (n) => {
|
|
30
|
+
var o;
|
|
31
|
+
return (o = p == null ? void 0 : p.selectedKeys) != null && o.includes(n.name) && n != null && n.selectedIcon ? n == null ? void 0 : n.selectedIcon : n == null ? void 0 : n.icon;
|
|
32
|
+
}), d = b(() => (n) => {
|
|
33
|
+
const o = n == null ? void 0 : n.icon;
|
|
34
|
+
return o != null && o.startsWith("icon") ? "icon" : "url";
|
|
35
|
+
}), M = (n) => {
|
|
33
36
|
if (n != null && n.path) {
|
|
34
37
|
if (n.path.startsWith("http") || n.path.startsWith("https")) {
|
|
35
38
|
window.open(n.path);
|
|
36
39
|
return;
|
|
37
40
|
}
|
|
38
|
-
|
|
41
|
+
y == null || y.push({ path: n.path }), D("menu-item-click", n.name);
|
|
39
42
|
}
|
|
40
43
|
};
|
|
41
|
-
return (n,
|
|
42
|
-
const
|
|
43
|
-
return
|
|
44
|
-
mode:
|
|
45
|
-
class:
|
|
46
|
-
collapsed:
|
|
47
|
-
"selected-keys":
|
|
44
|
+
return (n, o) => {
|
|
45
|
+
const R = k("a-sub-menu"), S = k("a-menu-item"), V = k("a-menu");
|
|
46
|
+
return l(), c(V, {
|
|
47
|
+
mode: u.mode,
|
|
48
|
+
class: f(L),
|
|
49
|
+
collapsed: u.collapsed,
|
|
50
|
+
"selected-keys": u.selectedKeys,
|
|
48
51
|
"auto-open-selected": ""
|
|
49
52
|
}, {
|
|
50
|
-
default:
|
|
51
|
-
|
|
52
|
-
default:
|
|
53
|
-
var
|
|
53
|
+
default: a(() => [
|
|
54
|
+
$(_(K), null, {
|
|
55
|
+
default: a(({ item: e }) => {
|
|
56
|
+
var g, x;
|
|
54
57
|
return [
|
|
55
|
-
e != null && e.children && ((
|
|
58
|
+
e != null && e.children && ((g = e == null ? void 0 : e.children) == null ? void 0 : g.length) > 0 ? (l(), c(R, {
|
|
56
59
|
key: e.name
|
|
57
|
-
},
|
|
58
|
-
title:
|
|
59
|
-
|
|
60
|
+
}, I({
|
|
61
|
+
title: a(() => [
|
|
62
|
+
N(T(e.title), 1)
|
|
60
63
|
]),
|
|
61
|
-
default:
|
|
62
|
-
e != null && e.hideChildrenInMenu ?
|
|
63
|
-
key:
|
|
64
|
-
item:
|
|
64
|
+
default: a(() => [
|
|
65
|
+
e != null && e.hideChildrenInMenu ? r("", !0) : (l(!0), s(v, { key: 0 }, q((e == null ? void 0 : e.children) || [], (h) => (l(), c(_(C), {
|
|
66
|
+
key: h.name,
|
|
67
|
+
item: h
|
|
65
68
|
}, null, 8, ["item"]))), 128))
|
|
66
69
|
]),
|
|
67
70
|
_: 2
|
|
68
71
|
}, [
|
|
69
72
|
e != null && e.icon ? {
|
|
70
73
|
name: "icon",
|
|
71
|
-
fn:
|
|
72
|
-
|
|
73
|
-
|
|
74
|
+
fn: a(() => [
|
|
75
|
+
d.value(e) === "icon" ? (l(), c(B(t.value(e)), { key: 0 })) : r("", !0),
|
|
76
|
+
d.value(e) === "url" ? (l(), s("img", {
|
|
74
77
|
key: 1,
|
|
75
|
-
class:
|
|
76
|
-
src: e
|
|
78
|
+
class: f(`${w}-img`),
|
|
79
|
+
src: t.value(e),
|
|
77
80
|
alt: ""
|
|
78
|
-
}, null, 10,
|
|
81
|
+
}, null, 10, E)) : r("", !0)
|
|
79
82
|
]),
|
|
80
83
|
key: "0"
|
|
81
84
|
} : void 0
|
|
82
|
-
]), 1024)) :
|
|
83
|
-
!(e != null && e.children) || ((
|
|
85
|
+
]), 1024)) : r("", !0),
|
|
86
|
+
!(e != null && e.children) || ((x = e == null ? void 0 : e.children) == null ? void 0 : x.length) === 0 ? (l(), c(S, {
|
|
84
87
|
key: e.name,
|
|
85
|
-
onClick: (
|
|
86
|
-
},
|
|
87
|
-
default:
|
|
88
|
-
|
|
88
|
+
onClick: (h) => M(e)
|
|
89
|
+
}, I({
|
|
90
|
+
default: a(() => [
|
|
91
|
+
N(" " + T(e.title), 1)
|
|
89
92
|
]),
|
|
90
93
|
_: 2
|
|
91
94
|
}, [
|
|
92
95
|
e != null && e.icon ? {
|
|
93
96
|
name: "icon",
|
|
94
|
-
fn:
|
|
95
|
-
|
|
96
|
-
|
|
97
|
+
fn: a(() => [
|
|
98
|
+
d.value(e) === "icon" ? (l(), c(B(t.value(e)), { key: 0 })) : r("", !0),
|
|
99
|
+
d.value(e) === "url" ? (l(), s("img", {
|
|
97
100
|
key: 1,
|
|
98
|
-
class:
|
|
99
|
-
src: e
|
|
101
|
+
class: f(`${w}-img`),
|
|
102
|
+
src: t.value(e),
|
|
100
103
|
alt: ""
|
|
101
|
-
}, null, 10,
|
|
104
|
+
}, null, 10, F)) : r("", !0)
|
|
102
105
|
]),
|
|
103
106
|
key: "0"
|
|
104
107
|
} : void 0
|
|
105
|
-
]), 1032, ["onClick"])) :
|
|
108
|
+
]), 1032, ["onClick"])) : r("", !0)
|
|
106
109
|
];
|
|
107
110
|
}),
|
|
108
111
|
_: 1
|
|
109
112
|
}),
|
|
110
|
-
(
|
|
113
|
+
(l(!0), s(v, null, q(u.items, (e) => (l(), s(v, {
|
|
111
114
|
key: e.name
|
|
112
115
|
}, [
|
|
113
|
-
e && !e.hideInMenu ? (
|
|
116
|
+
e && !e.hideInMenu ? (l(), c(_(C), {
|
|
114
117
|
key: 0,
|
|
115
118
|
item: e
|
|
116
|
-
}, null, 8, ["item"])) :
|
|
119
|
+
}, null, 8, ["item"])) : r("", !0)
|
|
117
120
|
], 64))), 128))
|
|
118
121
|
]),
|
|
119
122
|
_: 1
|
|
@@ -122,5 +125,5 @@ const A = ["src"], K = ["src"], z = "keyblade-pro-menu", T = "keyblade-pro-menu-
|
|
|
122
125
|
}
|
|
123
126
|
});
|
|
124
127
|
export {
|
|
125
|
-
|
|
128
|
+
J as default
|
|
126
129
|
};
|
package/es/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.keyblade-pro-layout
|
|
1
|
+
.keyblade-pro-layout{width:100%;height:100%}.keyblade-pro-layout .keyblade-pro-layout-header{position:fixed;top:0;left:0;width:100%;height:var(--72cbe0ed);z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 20px;background-color:var(--color-bg-2);border-bottom:1px solid var(--color-border);transition:all .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-header-left{cursor:pointer;display:flex;align-items:center}.keyblade-pro-layout .keyblade-pro-layout-header-left-logo-img{width:28px;height:28px}.keyblade-pro-layout .keyblade-pro-layout-header-left-logo-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout .keyblade-pro-layout-header-center{flex:1}.keyblade-pro-layout .keyblade-pro-layout-sider{padding-top:var(--72cbe0ed);position:fixed;top:0;left:0;z-index:99;height:100%;transition:all .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-sider-content{position:relative;height:100%;overflow:auto}.keyblade-pro-layout .keyblade-pro-layout-sider-collapse-btn.arco-btn{position:absolute;right:12px;bottom:12px}.keyblade-pro-layout .keyblade-pro-layout-body{padding-top:var(--72cbe0ed);padding-left:var(--af7d7fc0);min-height:100vh;overflow-y:hidden;background-color:var(--color-fill-2);transition:padding .2s cubic-bezier(.34,.69,.1,1)}.keyblade-pro-layout .keyblade-pro-layout-body-affix .arco-affix{z-index:98}.keyblade-pro-layout .keyblade-pro-layout-body-footer{display:flex;align-items:center;justify-content:center;height:40px;color:var(--color-text-2);text-align:center}.keyblade-pro-layout .keyblade-pro-layout-body-collapsed{padding-left:var(--744d8aa5)}.keyblade-pro-layout-side .keyblade-pro-layout-header{z-index:98;left:var(--af7d7fc0);width:calc(100% - var(--af7d7fc0))}.keyblade-pro-layout-side .keyblade-pro-layout-header-collapsed{left:var(--744d8aa5);width:calc(100% - var(--744d8aa5))}.keyblade-pro-layout-side .keyblade-pro-layout-sider{padding-top:0}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo{position:relative;display:flex;align-items:center;padding:16px;cursor:pointer;transition:padding .3s cubic-bezier(.645,.045,.355,1)}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo-img{width:28px;height:28px}.keyblade-pro-layout-side .keyblade-pro-layout-sider-content-logo-title.arco-typography{margin:0;font-size:18px}.keyblade-pro-layout-side .keyblade-pro-layout-sider-collapsed .keyblade-pro-layout-sider-content-logo{padding:16px 10px}.keyblade-pro-page-header{background:var(--color-bg-2);padding:16px 32px}.keyblade-pro-page-header .keyblade-pro-page-header-section-breadcrumb .arco-breadcrumb-item:first-child{padding-left:0}.keyblade-pro-page-header .keyblade-pro-page-header-title.arco-typography{padding-top:4px;margin-top:0}.keyblade-pro-page-container .keyblade-pro-page-container-content{padding:20px}.keyblade-pro-reuse-tabs{position:relative;background-color:var(--color-bg-2);padding:4px 20px}.keyblade-pro-menu .keyblade-pro-menu-item-img{width:14px;height:auto}
|