@arronqzy/vue-view 0.1.25 → 0.1.26
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/package.json +7 -7
- package/src/panel/VueViewPanel.vue +135 -61
- package/src/panel/components/ElementsLayer.vue +1 -1
- package/src/panel/components/MaterialPreview.vue +28 -27
- package/src/panel/components/MaterialSidebar.vue +288 -225
- package/src/panel/components/MaterialSidebarTreeNode.vue +15 -10
- package/src/panel/components/MoveableLayer.vue +8 -0
- package/src/panel/components/PanelCanvas.vue +1 -0
- package/src/panel/components/PanelConfigSidebar.vue +23 -41
- package/src/panel/components/PanelRulers.vue +158 -40
- package/src/panel/components/SelectLayer.vue +2 -1
- package/src/panel/components/config/ConfigFieldGroup.vue +3 -3
- package/src/panel/components/config/ConfigSection.vue +5 -5
- package/src/panel/lib/panel-ruler-canvas.ts +8 -4
- package/src/tailwind.css +66 -5
package/src/tailwind.css
CHANGED
|
@@ -1,3 +1,67 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* 物料侧栏：容器查询写在源 CSS 里（JIT 的 @[Npx] 经常未进 dist）
|
|
3
|
+
* 窄：单列、卡片最多 112px；宽：auto-fill 换行，单卡约 88–104px
|
|
4
|
+
*/
|
|
5
|
+
.rv-material-sidebar {
|
|
6
|
+
container-type: inline-size;
|
|
7
|
+
container-name: rv-material;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.rv-material-grid {
|
|
11
|
+
display: grid;
|
|
12
|
+
grid-template-columns: minmax(0, 1fr);
|
|
13
|
+
justify-items: stretch;
|
|
14
|
+
gap: 0.375rem;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.rv-material-card {
|
|
18
|
+
width: 100%;
|
|
19
|
+
max-width: 112px;
|
|
20
|
+
justify-self: center;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@container rv-material (min-width: 200px) {
|
|
24
|
+
.rv-material-grid {
|
|
25
|
+
grid-template-columns: repeat(auto-fill, minmax(88px, 104px));
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.rv-material-card {
|
|
29
|
+
max-width: none;
|
|
30
|
+
justify-self: stretch;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/*
|
|
35
|
+
* 配置侧栏：窄时多列表单改单列，避免挤成一团
|
|
36
|
+
*/
|
|
37
|
+
.scope-config-sidebar {
|
|
38
|
+
container-type: inline-size;
|
|
39
|
+
container-name: rv-config;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@container rv-config (max-width: 260px) {
|
|
43
|
+
.scope-config-sidebar .grid {
|
|
44
|
+
grid-template-columns: minmax(0, 1fr) !important;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.scope-config-sidebar .grid > * {
|
|
48
|
+
min-width: 0;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/*
|
|
53
|
+
* 节点选中描边：用倒数抵消画布 scale，屏幕上始终约 2px（勿用 ring/border，会随缩放变粗）
|
|
54
|
+
*/
|
|
55
|
+
.rv-node-selected {
|
|
56
|
+
box-shadow: 0 0 0 calc(2px / var(--rv-canvas-scale, 1)) rgb(59 130 246 / 0.9);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Selecto 框选：渲染在 body，线宽保持屏幕 1px */
|
|
60
|
+
.selecto-selection {
|
|
61
|
+
border-width: 1px !important;
|
|
62
|
+
box-sizing: border-box !important;
|
|
63
|
+
}
|
|
64
|
+
|
|
1
65
|
/*
|
|
2
66
|
* Moveable 控制框：
|
|
3
67
|
* - 根节点必须高于画布元素 zIndex（节点默认 ≥1），否则多选组框线会被节点盖住，只剩锚点可见
|
|
@@ -37,14 +101,11 @@
|
|
|
37
101
|
background: transparent !important;
|
|
38
102
|
}
|
|
39
103
|
|
|
104
|
+
/* 锚点尺寸交给 Moveable 的 scale(zoom) 补偿，勿写死 px 覆盖，否则放大后会偏粗 */
|
|
40
105
|
.rv-moveable-layer .moveable-control {
|
|
41
|
-
width: 14px !important;
|
|
42
|
-
height: 14px !important;
|
|
43
|
-
margin-top: -7px !important;
|
|
44
|
-
margin-left: -7px !important;
|
|
45
106
|
border-radius: 50% !important;
|
|
46
107
|
box-sizing: border-box !important;
|
|
47
|
-
border:
|
|
108
|
+
border-color: #fff !important;
|
|
48
109
|
background: #1990ff !important;
|
|
49
110
|
background: var(--moveable-color) !important;
|
|
50
111
|
z-index: 10 !important;
|