vg-print-vue2 1.0.519 → 1.0.522

package/dist/style.css

@@ -136,6 +136,12 @@
   /* hover 强制背景色 可重写 */
   background-color: rgba(0, 0, 0, 0.5) !important;
 }
+/* 图片本体位于 resize-panel 下方；通用 hover 蒙层会把图片压暗到像消失。
+   图片选中/悬停时只显示边框和控制点，不给控制层铺灰色背景。 */
+.hiprint-printElement-image:not(.editing):hover .resize-panel,
+.hiprint-printElement-image .resize-panel.selected {
+  background-color: transparent !important;
+}
 .hiprint-printElement:hover .resize-panel .resizebtn {
   display: none;
 }
@@ -1100,7 +1106,8 @@ font-weight: normal;*/
 
 /* 预览弹层打开时隐藏编辑控制层，避免遮挡预览内容。 */
 body.vg-preview-open .hiprint-printElement.design .resize-panel,
-body.vg-preview-open .hiprint-printElement.design .hiprint-printElement-table-handle {
+body.vg-preview-open .hiprint-printElement.design .hiprint-printElement-table-handle,
+body.vg-preview-open .hiprint-printElement.design .hiprint-printElement-container-handle {
   visibility: hidden !important;
   pointer-events: none !important;
 }
@@ -1110,6 +1117,29 @@ body.vg-preview-open #hiprint-printTemplate {
 body.vg-preview-open .hiprint-printElement.design .hiprint-printElement-content {
   border-color: transparent !important;
 }
+.hiprint-printElement-container-handle {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 10002;
+  display: none;
+  width: 14px;
+  height: 14px;
+  box-sizing: border-box;
+  border: 1px solid #fff;
+  border-radius: 2px;
+  background: #1890ff;
+  cursor: move;
+  transform: translate(-35%, -35%);
+}
+.hiprint-printElement.design.hiprint-printElement-rect:hover > .hiprint-printElement-container-handle,
+.hiprint-printElement.design.hiprint-printElement-rect:has(> .resize-panel.selected) > .hiprint-printElement-container-handle,
+.hiprint-printElement.design.vg-container-design > .hiprint-printElement-container-handle:hover {
+  display: block;
+}
+.hiprint-printElement.design.hiprint-printElement-rect > .hiprint-printElement-container-handle:hover {
+  background: #096dd9;
+}
 .hiprint-printElement-table .hiprint-printElement-table-handle {
   display: none;
 }
@@ -1168,6 +1198,15 @@ body.vg-preview-open .hiprint-printElement.design .hiprint-printElement-content
   box-sizing: border-box !important;
 }
 
+/* Runtime static grids must use the natural row/table height. Fixed design row
+   heights are minimums; wrapped text expands a row and pushes later content down. */
+.hiprint-printPaper .hiprint-printElement-staticGridTable .hiprint-static-grid-table {
+  height: auto !important;
+}
+.hiprint-printPaper .hiprint-printElement-staticGridTable .hiprint-static-grid-table td {
+  overflow: visible;
+}
+
 .hiprint-printElement-staticGridTable .hiprint-static-grid-table {
   width: 100%;
   height: 100%;
@@ -2616,7 +2655,7 @@ to { transform: rotate(360deg);
 }
 }
 
-.preview-header[data-v-38046dd1] {
+.preview-header[data-v-0a268504] {
   position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto max-content;
@@ -2625,22 +2664,22 @@ to { transform: rotate(360deg);
   padding-top: 10px;
   padding-bottom: 10px;
 }
-.preview-header .left-tools[data-v-38046dd1],
-.preview-header .right-tools[data-v-38046dd1] {
+.preview-header .left-tools[data-v-0a268504],
+.preview-header .right-tools[data-v-0a268504] {
   display: flex;
   align-items: center;
   gap: 6px;
   min-width: 0;
   min-height: 28px;
 }
-.preview-header .left-tools[data-v-38046dd1] {
+.preview-header .left-tools[data-v-0a268504] {
   grid-column: 1;
   grid-row: 1;
   justify-self: start;
   flex: 1 1 auto;
   flex-wrap: nowrap;
 }
-.preview-page-switcher[data-v-38046dd1] {
+.preview-page-switcher[data-v-0a268504] {
   grid-column: 2;
   grid-row: 1;
   position: static;
@@ -2653,14 +2692,14 @@ to { transform: rotate(360deg);
   color: #334155;
   white-space: nowrap;
 }
-.preview-page-info[data-v-38046dd1] {
+.preview-page-info[data-v-0a268504] {
   min-width: 82px;
   color: #334155;
   font-size: 13px;
   line-height: 28px;
   text-align: center;
 }
-.preview-page-btn[data-v-38046dd1] {
+.preview-page-btn[data-v-0a268504] {
   width: 26px;
   height: 28px;
   display: inline-flex;
@@ -2674,19 +2713,19 @@ to { transform: rotate(360deg);
   cursor: pointer;
   transition: background-color 0.15s ease, color 0.15s ease;
 }
-.preview-page-btn i[data-v-38046dd1] {
+.preview-page-btn i[data-v-0a268504] {
   font-size: 16px;
   line-height: 1;
 }
-.preview-page-btn[data-v-38046dd1]:hover:not(:disabled) {
+.preview-page-btn[data-v-0a268504]:hover:not(:disabled) {
   background: #eef2f7;
   color: #1e293b;
 }
-.preview-page-btn[data-v-38046dd1]:disabled {
+.preview-page-btn[data-v-0a268504]:disabled {
   color: #cbd5e1;
   cursor: not-allowed;
 }
-.preview-header .right-tools[data-v-38046dd1] {
+.preview-header .right-tools[data-v-0a268504] {
   grid-column: 3;
   grid-row: 1;
   flex: 0 1 auto;
@@ -2694,12 +2733,12 @@ to { transform: rotate(360deg);
   margin-left: auto;
   justify-content: flex-end;
 }
-.preview-header .label[data-v-38046dd1] {
+.preview-header .label[data-v-0a268504] {
   color: var(--vg-muted-text, #64748b);
   font-size: 12px;
   line-height: 1;
 }
-.preview-header .preview-title[data-v-38046dd1] {
+.preview-header .preview-title[data-v-0a268504] {
   min-width: 0;
   color: #1f2937;
   font-size: 14px;
@@ -2708,19 +2747,19 @@ to { transform: rotate(360deg);
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.preview-header .sep[data-v-38046dd1] { color: var(--vg-muted-text, #909399);
+.preview-header .sep[data-v-0a268504] { color: var(--vg-muted-text, #909399);
 }
-.preview-print-count[data-v-38046dd1] {
+.preview-print-count[data-v-0a268504] {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   white-space: nowrap;
 }
-.preview-print-count-label[data-v-38046dd1] {
+.preview-print-count-label[data-v-0a268504] {
   color: var(--vg-muted-text, #64748b);
   font-size: 12px;
 }
-.preview-print-count-control[data-v-38046dd1] {
+.preview-print-count-control[data-v-0a268504] {
   display: inline-flex;
   align-items: center;
   height: 26px;
@@ -2729,7 +2768,7 @@ to { transform: rotate(360deg);
   border-radius: 6px;
   background: #ffffff;
 }
-.preview-print-count-btn[data-v-38046dd1] {
+.preview-print-count-btn[data-v-0a268504] {
   width: 30px;
   height: 100%;
   padding: 0;
@@ -2740,11 +2779,11 @@ to { transform: rotate(360deg);
   line-height: 1;
   cursor: pointer;
 }
-.preview-print-count-btn[data-v-38046dd1]:hover:not(:disabled) { background: #eef2f7; color: #334155;
+.preview-print-count-btn[data-v-0a268504]:hover:not(:disabled) { background: #eef2f7; color: #334155;
 }
-.preview-print-count-btn[data-v-38046dd1]:disabled { color: #cbd5e1; cursor: not-allowed;
+.preview-print-count-btn[data-v-0a268504]:disabled { color: #cbd5e1; cursor: not-allowed;
 }
-.preview-print-count-input[data-v-38046dd1] {
+.preview-print-count-input[data-v-0a268504] {
   width: 44px;
   height: 100%;
   padding: 0 4px;
@@ -2758,20 +2797,20 @@ to { transform: rotate(360deg);
   outline: none;
   appearance: textfield;
 }
-.preview-print-count-input[data-v-38046dd1]::-webkit-outer-spin-button,
-.preview-print-count-input[data-v-38046dd1]::-webkit-inner-spin-button { margin: 0; appearance: none;
+.preview-print-count-input[data-v-0a268504]::-webkit-outer-spin-button,
+.preview-print-count-input[data-v-0a268504]::-webkit-inner-spin-button { margin: 0; appearance: none;
 }
-.preview-print-count-input[data-v-38046dd1]:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed;
+.preview-print-count-input[data-v-0a268504]:disabled { background: #f8fafc; color: #94a3b8; cursor: not-allowed;
 }
-.preview-header .vg-select[data-v-38046dd1],
-.preview-header .vg-input[data-v-38046dd1] {
+.preview-header .vg-select[data-v-0a268504],
+.preview-header .vg-input[data-v-0a268504] {
   height: 28px;
   min-height: 28px;
 }
-.preview-header .vg-input-number[data-v-38046dd1] {
+.preview-header .vg-input-number[data-v-0a268504] {
   width: 64px;
 }
-.preview-header .preview-action-btn[data-v-38046dd1] {
+.preview-header .preview-action-btn[data-v-0a268504] {
   height: 28px;
   padding: 0 8px;
   display: inline-flex;
@@ -2785,15 +2824,15 @@ to { transform: rotate(360deg);
   font-size: 12px;
   white-space: nowrap;
 }
-.preview-header .preview-action-btn[data-v-38046dd1]:hover:not(:disabled) {
+.preview-header .preview-action-btn[data-v-0a268504]:hover:not(:disabled) {
   border-color: #dbe3ef;
   background: #f8fafc;
 }
-.preview-header .preview-action-btn[data-v-38046dd1]:disabled {
+.preview-header .preview-action-btn[data-v-0a268504]:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.preview-close-btn[data-v-38046dd1] {
+.preview-close-btn[data-v-0a268504] {
   width: 20px;
   height: 20px;
   display: inline-flex;
@@ -2808,27 +2847,27 @@ to { transform: rotate(360deg);
   font-size: 14px;
   line-height: 1;
 }
-.preview-close-btn[data-v-38046dd1]:hover {
+.preview-close-btn[data-v-0a268504]:hover {
   border-color: #dbe3ef;
   background: #f8fafc;
   color: #334155;
 }
 @media (max-width: 960px) {
-.preview-header[data-v-38046dd1] {
+.preview-header[data-v-0a268504] {
     display: flex;
     align-items: flex-start;
     flex-wrap: wrap;
 }
-.preview-header .left-tools[data-v-38046dd1],
-  .preview-header .right-tools[data-v-38046dd1] {
+.preview-header .left-tools[data-v-0a268504],
+  .preview-header .right-tools[data-v-0a268504] {
     flex-wrap: wrap;
 }
-.preview-header .right-tools[data-v-38046dd1] {
+.preview-header .right-tools[data-v-0a268504] {
     width: 100%;
     margin-left: 0;
     justify-content: flex-start;
 }
-.preview-page-switcher[data-v-38046dd1] {
+.preview-page-switcher[data-v-0a268504] {
     position: static;
     order: 3;
     flex: 1 1 100%;
@@ -2836,19 +2875,19 @@ to { transform: rotate(360deg);
     transform: none;
 }
 }
-.preview-wrap[data-v-38046dd1] {
+.preview-wrap[data-v-0a268504] {
   position: relative;
   flex: 1 1 auto;
   overflow: hidden;
   background: #f2f3f5;
   height: 75vh;
 }
-.preview-scroll[data-v-38046dd1] {
+.preview-scroll[data-v-0a268504] {
   position: absolute;
   inset: 0;
   overflow: auto;
 }
-.preview-zoom-tools[data-v-38046dd1] {
+.preview-zoom-tools[data-v-0a268504] {
   position: absolute;
   right: 24px;
   bottom: 24px;
@@ -2862,8 +2901,8 @@ to { transform: rotate(360deg);
   background: rgba(255, 255, 255, 0.96);
   box-shadow: 0 3px 12px rgba(15, 23, 42, 0.12);
 }
-.preview-zoom-btn[data-v-38046dd1],
-.preview-zoom-value[data-v-38046dd1] {
+.preview-zoom-btn[data-v-0a268504],
+.preview-zoom-value[data-v-0a268504] {
   height: 28px;
   border: 0;
   border-radius: 5px;
@@ -2871,29 +2910,29 @@ to { transform: rotate(360deg);
   color: #475569;
   cursor: pointer;
 }
-.preview-zoom-btn[data-v-38046dd1] {
+.preview-zoom-btn[data-v-0a268504] {
   width: 28px;
   padding: 0;
   font-size: 19px;
   line-height: 28px;
 }
-.preview-zoom-value[data-v-38046dd1] {
+.preview-zoom-value[data-v-0a268504] {
   min-width: 58px;
   padding: 0 6px;
   font-size: 13px;
   line-height: 28px;
   text-align: center;
 }
-.preview-zoom-btn[data-v-38046dd1]:hover:not(:disabled),
-.preview-zoom-value[data-v-38046dd1]:hover {
+.preview-zoom-btn[data-v-0a268504]:hover:not(:disabled),
+.preview-zoom-value[data-v-0a268504]:hover {
   background: #f1f5f9;
   color: #1e293b;
 }
-.preview-zoom-btn[data-v-38046dd1]:disabled {
+.preview-zoom-btn[data-v-0a268504]:disabled {
   color: #cbd5e1;
   cursor: not-allowed;
 }
-.preview-container[data-v-38046dd1] {
+.preview-container[data-v-0a268504] {
   padding: 20px;
   padding-bottom: 40px;
   min-height: 100%;
@@ -2904,16 +2943,16 @@ to { transform: rotate(360deg);
   flex-direction: column;
   align-items: center;
 }
-[data-v-38046dd1] .preview-dialog .el-dialog__body{
+[data-v-0a268504] .preview-dialog .el-dialog__body{
   padding-bottom: 20px;
 }
 /* Use deep for dynamic content inserted by hiprint */
-[data-v-38046dd1] .preview-wrap .hiprint-printPaper,[data-v-38046dd1] .preview-wrap .printPaper {
+[data-v-0a268504] .preview-wrap .hiprint-printPaper,[data-v-0a268504] .preview-wrap .printPaper {
   background: #fff;
   box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
   margin: 0 auto 12px;
 }
-[data-v-38046dd1] .preview-wrap .vg-preview-page {
+[data-v-0a268504] .preview-wrap .vg-preview-page {
   zoom: var(--vg-preview-page-zoom, 1);
 }
 
@@ -2994,47 +3033,47 @@ to { transform: rotate(360deg);
 }
 
 /* Resize Handles */
-.resize-handle[data-v-f1c0bffd] {
+.resize-handle[data-v-63d9b211] {
   position: absolute;
   z-index: 122;
   background-color: transparent;
   transition: all 0.2s;
 }
-.resize-handle[data-v-f1c0bffd]:hover {
+.resize-handle[data-v-63d9b211]:hover {
   background-color: var(--vg-accent, #580df8);
 }
-.resize-left[data-v-f1c0bffd] {
+.resize-left[data-v-63d9b211] {
   top: 0; bottom: 0; left: 0; width: 1px; cursor: w-resize;
 }
-.resize-left[data-v-f1c0bffd]:hover {
+.resize-left[data-v-63d9b211]:hover {
   width: 2px;
 }
-.resize-right[data-v-f1c0bffd] {
+.resize-right[data-v-63d9b211] {
   top: 0; bottom: 0; right: 0; width: 1px; cursor: e-resize;
 }
-.resize-right[data-v-f1c0bffd]:hover {
+.resize-right[data-v-63d9b211]:hover {
   width: 2px;
 }
-.resize-bottom[data-v-f1c0bffd] {
+.resize-bottom[data-v-63d9b211] {
   bottom: 0; left: 0; right: 0; height: 1px; cursor: s-resize;
 }
-.resize-bottom[data-v-f1c0bffd]:hover {
+.resize-bottom[data-v-63d9b211]:hover {
   height: 2px;
 }
-.hip-struct-actions[data-v-f1c0bffd]{
+.hip-struct-actions[data-v-63d9b211]{
   display: flex;
   align-items: center;
   gap: 0;
 }
-.hip-struct-btn[data-v-f1c0bffd]{
+.hip-struct-btn[data-v-63d9b211]{
   background: transparent;
   border: none;
   color: var(--vg-header-text, #fff);
   cursor: pointer;
   padding: 0;
 }
-.hip-struct-actions .hip-struct-btn[data-v-f1c0bffd],
-.hip-struct-actions .hip-struct-close[data-v-f1c0bffd] {
+.hip-struct-actions .hip-struct-btn[data-v-63d9b211],
+.hip-struct-actions .hip-struct-close[data-v-63d9b211] {
   width: 24px;
   height: 20px;
   display: inline-flex;
@@ -3047,11 +3086,11 @@ to { transform: rotate(360deg);
   color: var(--vg-header-text, #fff);
   cursor: pointer;
 }
-.hip-struct-actions .hip-struct-btn[data-v-f1c0bffd]:hover,
-.hip-struct-actions .hip-struct-close[data-v-f1c0bffd]:hover {
+.hip-struct-actions .hip-struct-btn[data-v-63d9b211]:hover,
+.hip-struct-actions .hip-struct-close[data-v-63d9b211]:hover {
   background: rgba(255,255,255,0.12);
 }
-.hip-structure-list[data-v-f1c0bffd] {
+.hip-structure-list[data-v-63d9b211] {
   position: fixed;
   /* width: 280px; 由 panelStyle 控制 */
   /* max-height: 50vh; */ /* 允许 resizing 控制高度 */
@@ -3063,7 +3102,7 @@ to { transform: rotate(360deg);
   flex-direction: column;
   z-index: 120;
 }
-.hip-struct-header[data-v-f1c0bffd] {
+.hip-struct-header[data-v-63d9b211] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -3074,7 +3113,7 @@ to { transform: rotate(360deg);
   font-size: 13px;
   cursor: move;
 }
-.hip-struct-close[data-v-f1c0bffd] {
+.hip-struct-close[data-v-63d9b211] {
   border: none;
   background: transparent;
   cursor: pointer;
@@ -3082,24 +3121,26 @@ to { transform: rotate(360deg);
   line-height: 14px;
   color: var(--vg-header-text, #fff);
 }
-.hip-struct-body[data-v-f1c0bffd] { padding: 8px; overflow: auto;
+.hip-struct-body[data-v-63d9b211] { padding: 8px; overflow: auto;
+}
+.hip-struct-body ul[data-v-63d9b211] { list-style: none; padding: 0; margin: 0;
 }
-.hip-struct-body ul[data-v-f1c0bffd] { list-style: none; padding: 0; margin: 0;
+.hip-struct-body li[data-v-63d9b211] { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; border-radius: 4px;
 }
-.hip-struct-body li[data-v-f1c0bffd] { display: flex; align-items: center; justify-content: space-between; padding: 0 8px; border-radius: 4px;
+.hip-struct-body li[data-v-63d9b211]:hover { background: var(--vg-accent-soft, #e9edf2);}
+.hip-struct-item[data-v-63d9b211] { flex: 1; cursor: pointer;height: 32px;line-height: 32px; white-space: nowrap; text-overflow: ellipsis;overflow: hidden;
 }
-.hip-struct-body li[data-v-f1c0bffd]:hover { background: var(--vg-accent-soft, #e9edf2);}
-.hip-struct-item[data-v-f1c0bffd] { flex: 1; cursor: pointer;height: 32px;line-height: 32px; white-space: nowrap; text-overflow: ellipsis;overflow: hidden;
+.hip-struct-title[data-v-63d9b211] { font-size: 12px;
 }
-.hip-struct-title[data-v-f1c0bffd] { font-size: 12px;
+.hip-struct-child-mark[data-v-63d9b211] { color: #9aa2ad; margin-right: 4px;
 }
-.hip-struct-del[data-v-f1c0bffd] { border: none; background: #f56c6c; color: #fff; border-radius: 4px; padding: 4px 8px; cursor: pointer;
+.hip-struct-del[data-v-63d9b211] { border: none; background: #f56c6c; color: #fff; border-radius: 4px; padding: 4px 8px; cursor: pointer;
 }
-.hip-struct-empty[data-v-f1c0bffd] { color: var(--vg-muted-text, #909399); text-align: center; padding: 10px;
+.hip-struct-empty[data-v-63d9b211] { color: var(--vg-muted-text, #909399); text-align: center; padding: 10px;
 }
 
 /* Mobile Mode */
-.hip-structure-list.is-mobile[data-v-f1c0bffd] {
+.hip-structure-list.is-mobile[data-v-63d9b211] {
   position: static !important;
   width: 100% !important;
   max-height: none !important;
@@ -3108,7 +3149,7 @@ to { transform: rotate(360deg);
   border-radius: 0 !important;
   background: transparent !important;
 }
-.hip-structure-list.is-mobile .hip-struct-header[data-v-f1c0bffd] {
+.hip-structure-list.is-mobile .hip-struct-header[data-v-63d9b211] {
   display: none !important;
 }
 
@@ -4694,7 +4735,7 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
 }
 
 /* CodeMirror 弹窗编辑器 */
-.code-editor-dialog[data-v-634a8768] {
+.code-editor-dialog[data-v-10b7bf91] {
   width: 70vw;
   max-width: 1000px;
   display: flex;
@@ -4702,62 +4743,62 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   height: 85vh;
   max-height: 85vh;
 }
-.code-editor-dialog .vg-dialog-body[data-v-634a8768] {
+.code-editor-dialog .vg-dialog-body[data-v-10b7bf91] {
   flex: 1;
   min-height: 0;
   overflow: hidden;
   display: flex;
   flex-direction: column;
 }
-.code-editor-container[data-v-634a8768] {
+.code-editor-container[data-v-10b7bf91] {
   flex: 1;
   height: 100%;
   min-height: 0;
   border: 1px solid #eee;
   border-radius: 4px;
 }
-.code-editor-container[data-v-634a8768] .prism-editor-wrapper {
+.code-editor-container[data-v-10b7bf91] .prism-editor-wrapper {
   height: 100%;
   overflow: auto;
 }
 
 /* 优化弹窗内容内边距，让编辑器更贴近可视高度 */
-[data-v-634a8768] .el-dialog__body {
+[data-v-10b7bf91] .el-dialog__body {
   padding-top: 6px;
   padding-bottom: 6px;
 }
 
-[data-v-634a8768] .hiprint-printElement-image-content img {
+[data-v-10b7bf91] .hiprint-printElement-image-content img {
   content: url("~@/assets/logo.png");
 }
-.card-design[data-v-634a8768] {
+.card-design[data-v-10b7bf91] {
   position: relative;
   overflow: auto;
   height: 100%;
   padding: 14px;
   min-height: 0;
 }
-.vg-designer-root[data-v-634a8768]{
+.vg-designer-root[data-v-10b7bf91]{
   position: relative;
   width: 100%;
   height: 100%;
   min-height: 0;
 }
-.hinnn-layout-sider[data-v-634a8768]{
+.hinnn-layout-sider[data-v-10b7bf91]{
   overflow: auto;
   height: 90vh;
   font-size: 12px;
 }
-.prop-floating .hinnn-layout-sider[data-v-634a8768]{
+.prop-floating .hinnn-layout-sider[data-v-10b7bf91]{
   height: auto;
   max-height: none;
 }
-.params_setting_container[data-v-634a8768] .el-card__body {
+.params_setting_container[data-v-10b7bf91] .el-card__body {
   padding: 1px !important;
 }
-.toolbar-group[data-v-634a8768] { margin:0 4px;
+.toolbar-group[data-v-10b7bf91] { margin:0 4px;
 }
-.design-context-menu[data-v-634a8768]{
+.design-context-menu[data-v-10b7bf91]{
   position: fixed;
   z-index: 3000;
   min-width: 180px;
@@ -4769,7 +4810,7 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   font-size: 12px;
   color: var(--vg-text, #303133);
 }
-.ctx-item[data-v-634a8768]{
+.ctx-item[data-v-10b7bf91]{
   display: flex;
   align-items: center;
   gap: 8px;
@@ -4777,16 +4818,16 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   cursor: pointer;
   white-space: nowrap;
 }
-.ctx-item[data-v-634a8768]:hover{
+.ctx-item[data-v-10b7bf91]:hover{
   background: var(--vg-menu-hover-bg, #f5f7fa);
 }
-.ctx-item.danger[data-v-634a8768]{
+.ctx-item.danger[data-v-10b7bf91]{
   color: #f56c6c;
 }
-.ctx-item-submenu[data-v-634a8768]{
+.ctx-item-submenu[data-v-10b7bf91]{
   position: relative;
 }
-.ctx-submenu-trigger-icon[data-v-634a8768]{
+.ctx-submenu-trigger-icon[data-v-10b7bf91]{
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -4795,12 +4836,12 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   font-weight: 600;
   letter-spacing: 1px;
 }
-.ctx-submenu-arrow[data-v-634a8768]{
+.ctx-submenu-arrow[data-v-10b7bf91]{
   margin-left: auto;
   font-size: 14px;
   color: #909399;
 }
-.ctx-submenu[data-v-634a8768]{
+.ctx-submenu[data-v-10b7bf91]{
   display: none;
   position: absolute;
   bottom: -4px;
@@ -4813,55 +4854,55 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   box-shadow: 0 8px 24px rgba(0,0,0,0.15);
   color: var(--vg-text, #303133);
 }
-.ctx-item-submenu:hover > .ctx-submenu[data-v-634a8768]{
+.ctx-item-submenu:hover > .ctx-submenu[data-v-10b7bf91]{
   display: block;
 }
-.ctx-sub-item[data-v-634a8768]{
+.ctx-sub-item[data-v-10b7bf91]{
   padding: 8px 12px;
   cursor: pointer;
   white-space: nowrap;
 }
-.ctx-sub-item[data-v-634a8768]:hover{
+.ctx-sub-item[data-v-10b7bf91]:hover{
   background: var(--vg-menu-hover-bg, #f5f7fa);
 }
-.ctx-sub-sep[data-v-634a8768]{
+.ctx-sub-sep[data-v-10b7bf91]{
   height: 1px;
   background: var(--vg-border, rgba(0,0,0,0.08));
   margin: 4px 0;
 }
-.ctx-sep[data-v-634a8768]{
+.ctx-sep[data-v-10b7bf91]{
   height: 1px;
   background: var(--vg-border, rgba(0,0,0,0.08));
   margin: 4px 0;
 }
-.new-template-dialog[data-v-634a8768]{
+.new-template-dialog[data-v-10b7bf91]{
   width: min(420px, calc(100vw - 32px));
 }
-.new-template-hint[data-v-634a8768]{
+.new-template-hint[data-v-10b7bf91]{
   margin-bottom: 14px;
   color: var(--vg-muted-text, #909399);
   font-size: 12px;
 }
-.panel-name-label[data-v-634a8768]{
+.panel-name-label[data-v-10b7bf91]{
   display: block;
   margin-bottom: 6px;
   font-size: 13px;
   font-weight: 600;
 }
-.panel-name-label.second-field[data-v-634a8768]{ margin-top: 12px;
+.panel-name-label.second-field[data-v-10b7bf91]{ margin-top: 12px;
 }
-.required-mark[data-v-634a8768]{ color: #f56c6c;
+.required-mark[data-v-10b7bf91]{ color: #f56c6c;
 }
-.panel-name-input[data-v-634a8768]{
+.panel-name-input[data-v-10b7bf91]{
   width: 100%;
   box-sizing: border-box;
 }
-.panel-name-error[data-v-634a8768]{
+.panel-name-error[data-v-10b7bf91]{
   margin-top: 6px;
   color: #f56c6c;
   font-size: 12px;
 }
-.designer-footer[data-v-634a8768]{
+.designer-footer[data-v-10b7bf91]{
   position: absolute;
   left: 0;
   right: 0;
@@ -4876,14 +4917,14 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   font-size: 12px;
   color: var(--vg-footer-text, #606266);
 }
-.designer-footer-inner[data-v-634a8768]{
+.designer-footer-inner[data-v-10b7bf91]{
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.designer-footer-client[data-v-634a8768]{
+.designer-footer-client[data-v-10b7bf91]{
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
@@ -4892,47 +4933,47 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   padding-left: 12px;
   white-space: nowrap;
 }
-.designer-footer-client-status[data-v-634a8768]{
+.designer-footer-client-status[data-v-10b7bf91]{
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #f56c6c;
 }
-.designer-footer-client-status.is-connected[data-v-634a8768]{ background: #49c28a;
+.designer-footer-client-status.is-connected[data-v-10b7bf91]{ background: #49c28a;
 }
-.designer-footer-client-version[data-v-634a8768]{
+.designer-footer-client-version[data-v-10b7bf91]{
   margin-left: 6px;
   padding-left: 10px;
   border-left: 1px solid var(--vg-border, rgba(0,0,0,0.12));
 }
 
 /* 主体布局：左侧固定组件库 + 中间设计区 */
-.main-layout-row[data-v-634a8768] {
+.main-layout-row[data-v-10b7bf91] {
   display: flex;
   align-items: stretch;
   flex-wrap: nowrap;
   box-sizing: border-box;
 }
-.left-sider[data-v-634a8768] {
+.left-sider[data-v-10b7bf91] {
   flex: 0 0 200px !important;
   max-width: 200px !important;
   width: 200px !important;
   height: 100%;
   min-height: 0;
 }
-.left-sider-card[data-v-634a8768] {
+.left-sider-card[data-v-10b7bf91] {
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-.left-sider[data-v-634a8768] .el-card__body {
+.left-sider[data-v-10b7bf91] .el-card__body {
   padding: 0 !important;
   height: 100%;
   min-height: 0;
   display: flex;
   flex-direction: column;
 }
-.left-sider-tabs[data-v-634a8768] {
+.left-sider-tabs[data-v-10b7bf91] {
   flex: 1 1 auto;
   min-height: 0;
   display: flex;
@@ -4940,38 +4981,38 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   overflow: hidden;
   background: var(--vg-panel-bg, #f7f8fc);
 }
-.vg-tabs-nav[data-v-634a8768] {
+.vg-tabs-nav[data-v-10b7bf91] {
   flex: 0 0 auto;
 }
-.left-sider-pane[data-v-634a8768] {
+.left-sider-pane[data-v-10b7bf91] {
   flex: 1 1 auto;
   min-height: 0;
   display: flex;
   overflow: hidden;
   background: #fff;
 }
-.left-sider[data-v-634a8768] .el-tabs__header {
+.left-sider[data-v-10b7bf91] .el-tabs__header {
   margin: 0;
 }
-.left-sider[data-v-634a8768] .el-tabs__nav-wrap {
+.left-sider[data-v-10b7bf91] .el-tabs__nav-wrap {
   padding: 0 6px;
 }
-.left-sider[data-v-634a8768] .el-tabs__item {
+.left-sider[data-v-10b7bf91] .el-tabs__item {
   font-size: 13px;
 }
-.left-sider[data-v-634a8768] .el-tabs__item.is-active {
+.left-sider[data-v-10b7bf91] .el-tabs__item.is-active {
   color: var(--vg-accent, #580df8);
 }
-.left-sider[data-v-634a8768] .el-tabs__item:hover {
+.left-sider[data-v-10b7bf91] .el-tabs__item:hover {
   color: var(--vg-accent, #580df8);
 }
-.left-sider[data-v-634a8768] .el-tabs__active-bar {
+.left-sider[data-v-10b7bf91] .el-tabs__active-bar {
   background-color: var(--vg-accent, #580df8);
 }
-.left-sider[data-v-634a8768] .el-tabs__nav-wrap::after {
+.left-sider[data-v-10b7bf91] .el-tabs__nav-wrap::after {
   background-color: var(--vg-border, rgba(0,0,0,0.08));
 }
-.left-sider-header[data-v-634a8768] {
+.left-sider-header[data-v-10b7bf91] {
   padding: 2px;
   background-color: var(--vg-header-bg, #580df8);
   color: var(--vg-header-text, #fff);
@@ -4980,7 +5021,7 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   display: flex;
   align-items: center;
 }
-.template-panel[data-v-634a8768] {
+.template-panel[data-v-10b7bf91] {
   flex: 1 1 auto;
   min-height: 0;
   display: flex;
@@ -4989,17 +5030,17 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   padding: 8px 6px 10px;
   /*background: var(--vg-panel-bg, #f7f8fc);*/
 }
-.template-toolbar[data-v-634a8768] {
+.template-toolbar[data-v-10b7bf91] {
   display: flex;
   align-items: center;
   gap: 2px;
   padding: 4px 0 10px;
 }
-.template-toolbar .el-button[data-v-634a8768] {
+.template-toolbar .el-button[data-v-10b7bf91] {
   padding: 6px;
   min-width: 32px;
 }
-.template-list[data-v-634a8768] {
+.template-list[data-v-10b7bf91] {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
@@ -5010,7 +5051,7 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   padding-right: 2px;
   padding-bottom: 10px;
 }
-.template-item[data-v-634a8768] {
+.template-item[data-v-10b7bf91] {
   border-radius: 999px;
   background-color: var(--vg-menu-hover-bg, #f5f7fa);
   border: 1px solid transparent;
@@ -5022,29 +5063,29 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   color: var(--vg-muted-text, #606266);
   transition: all 0.2s;
 }
-.template-item[data-v-634a8768]:hover {
+.template-item[data-v-10b7bf91]:hover {
   background-color: var(--vg-accent-soft, #eef1f6);
 }
-.template-item.is-active[data-v-634a8768] {
+.template-item.is-active[data-v-10b7bf91] {
   background: linear-gradient(90deg, var(--vg-accent-soft, #f0ebff) 0%, var(--vg-surface-bg, #ffffff) 60%);
   border-color: var(--vg-accent, #580df8);
   color: var(--vg-text, #303133);
   font-weight: 600;
   box-shadow: 0 0 0 1px var(--vg-accent-soft, rgba(88, 13, 248, 0.12));
 }
-.template-name[data-v-634a8768] {
+.template-name[data-v-10b7bf91] {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.template-actions[data-v-634a8768] {
+.template-actions[data-v-10b7bf91] {
   display: flex;
   align-items: center;
   gap: 6px;
   margin-left: 8px;
 }
-.template-icon-btn[data-v-634a8768] {
+.template-icon-btn[data-v-10b7bf91] {
   width: 22px;
   height: 22px;
   display: inline-flex;
@@ -5057,34 +5098,34 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   padding: 0;
   color: #c0c4cc;
 }
-.template-icon-btn i[data-v-634a8768] {
+.template-icon-btn i[data-v-10b7bf91] {
   font-size: 14px;
   line-height: 1;
 }
-.template-icon-btn[data-v-634a8768]:hover {
+.template-icon-btn[data-v-10b7bf91]:hover {
   background: rgba(0, 0, 0, 0.04);
 }
-.template-item.is-active .template-icon-btn.check[data-v-634a8768] {
+.template-item.is-active .template-icon-btn.check[data-v-10b7bf91] {
   color: var(--vg-accent, #580df8);
   border-color: var(--vg-accent, #580df8);
 }
-.template-icon-btn.danger[data-v-634a8768] {
+.template-icon-btn.danger[data-v-10b7bf91] {
   color: #f56c6c;
 }
-.template-icon-btn.danger[data-v-634a8768]:hover {
+.template-icon-btn.danger[data-v-10b7bf91]:hover {
   border-color: rgba(245, 108, 108, 0.65);
   background: rgba(245, 108, 108, 0.08);
 }
-.template-check[data-v-634a8768] {
+.template-check[data-v-10b7bf91] {
   margin-left: 6px;
   font-size: 14px;
   color: #c0c4cc;
   cursor: pointer;
 }
-.template-item.is-active .template-check[data-v-634a8768] {
+.template-item.is-active .template-check[data-v-10b7bf91] {
   color: var(--vg-accent, #580df8);
 }
-.hiprintEpContainer[data-v-634a8768] {
+.hiprintEpContainer[data-v-10b7bf91] {
   padding: 10px;
   overflow-y: auto;
   flex: 1;
@@ -5092,11 +5133,11 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   box-sizing: border-box;
   padding-bottom: 18px;
 }
-[data-v-634a8768] .hiprintEpContainer .hiprint-printElement-type {
+[data-v-10b7bf91] .hiprintEpContainer .hiprint-printElement-type {
   height: auto !important;
   min-height: 100%;
 }
-.center-design[data-v-634a8768] {
+.center-design[data-v-10b7bf91] {
   flex: 1 1 auto;
   min-width: 600px; /* 保证中间区域不被过度压缩 */
   height: 100%;
@@ -5106,7 +5147,7 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
 }
 
 /* 右侧属性设置悬浮样式 */
-.prop-floating[data-v-634a8768] {
+.prop-floating[data-v-10b7bf91] {
   position: fixed;
   top: 76px;
   right: auto;
@@ -5122,34 +5163,34 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   flex-direction: column;
 }
 /* Resize Handles */
-.resize-handle[data-v-634a8768] {
+.resize-handle[data-v-10b7bf91] {
   position: absolute;
   z-index: 122;
   background-color: transparent;
   transition: all 0.2s;
 }
-.resize-handle[data-v-634a8768]:hover {
+.resize-handle[data-v-10b7bf91]:hover {
   background-color: var(--vg-accent, #580df8);
 }
-.resize-left[data-v-634a8768] {
+.resize-left[data-v-10b7bf91] {
   top: 0; bottom: 0; left: 0; width: 1px; cursor: w-resize;
 }
-.resize-left[data-v-634a8768]:hover {
+.resize-left[data-v-10b7bf91]:hover {
   width: 2px;
 }
-.resize-right[data-v-634a8768] {
+.resize-right[data-v-10b7bf91] {
   top: 0; bottom: 0; right: 0; width: 1px; cursor: e-resize;
 }
-.resize-right[data-v-634a8768]:hover {
+.resize-right[data-v-10b7bf91]:hover {
   width: 2px;
 }
-.resize-bottom[data-v-634a8768] {
+.resize-bottom[data-v-10b7bf91] {
   bottom: 0; left: 0; right: 0; height: 1px; cursor: s-resize;
 }
-.resize-bottom[data-v-634a8768]:hover {
+.resize-bottom[data-v-10b7bf91]:hover {
   height: 2px;
 }
-.pagination-floating[data-v-634a8768] {
+.pagination-floating[data-v-10b7bf91] {
   position: absolute;
   top: 16px;
   left: 16px;
@@ -5163,7 +5204,7 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   overflow: hidden;
   color: var(--vg-text, #303133);
 }
-.prop-header[data-v-634a8768] {
+.prop-header[data-v-10b7bf91] {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -5173,14 +5214,14 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   color: var(--vg-header-text, #fff);
   border-bottom: 1px solid rgba(0,0,0,0.06);
 }
-.prop-header .title[data-v-634a8768] {
+.prop-header .title[data-v-10b7bf91] {
   font-size: 13px;
   font-weight: 600;
 }
-.prop-header .header-actions[data-v-634a8768] {
+.prop-header .header-actions[data-v-10b7bf91] {
   display: flex;
 }
-.prop-header .icon-btn[data-v-634a8768] {
+.prop-header .icon-btn[data-v-10b7bf91] {
   width: 24px;
   height: 20px;
   display: inline-flex;
@@ -5193,16 +5234,16 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   color: var(--vg-header-text, #fff);
   cursor: pointer;
 }
-.prop-header .icon-btn[data-v-634a8768]:hover {
+.prop-header .icon-btn[data-v-10b7bf91]:hover {
   background: rgba(255,255,255,0.12);
 }
-.prop-header .collapse-btn .iconfont[data-v-634a8768] {
+.prop-header .collapse-btn .iconfont[data-v-10b7bf91] {
   transition: transform 0.24s ease;
 }
-.prop-header .collapse-btn.is-collapsed .iconfont[data-v-634a8768] {
+.prop-header .collapse-btn.is-collapsed .iconfont[data-v-10b7bf91] {
   transform: rotate(180deg);
 }
-.prop-body[data-v-634a8768] {
+.prop-body[data-v-10b7bf91] {
   overflow: auto;
   flex: 1 1 auto;
   min-height: 0;
@@ -5214,11 +5255,11 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   transform-origin: top center;
   transition: max-height 0.26s ease, opacity 0.2s ease, transform 0.26s ease;
 }
-#PrintElementOptionSetting[data-v-634a8768] {
+#PrintElementOptionSetting[data-v-10b7bf91] {
   padding-bottom: 24px;
 }
-.prop-floating.is-collapsed .prop-body[data-v-634a8768],
-.prop-body.is-collapsed[data-v-634a8768] {
+.prop-floating.is-collapsed .prop-body[data-v-10b7bf91],
+.prop-body.is-collapsed[data-v-10b7bf91] {
   flex: 0 0 auto;
   min-height: 0;
   max-height: 0;
@@ -5227,38 +5268,38 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   overflow: hidden;
   pointer-events: none;
 }
-.prop-floating[data-v-634a8768] {
+.prop-floating[data-v-10b7bf91] {
   transition: box-shadow 0.26s ease;
 }
-.prop-floating.is-collapsed[data-v-634a8768] {
+.prop-floating.is-collapsed[data-v-10b7bf91] {
   height: auto !important;
   min-height: 0;
   box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 }
-.prop-floating.is-collapsed .prop-header[data-v-634a8768] {
+.prop-floating.is-collapsed .prop-header[data-v-10b7bf91] {
   border-bottom-color: transparent;
   transition: border-color 0.2s ease;
 }
-.hiprint-printPagination[data-v-634a8768] .hiprint-pagination{
+.hiprint-printPagination[data-v-10b7bf91] .hiprint-pagination{
   padding: 4px 0 0 4px;
   margin: 0;
   display: flex;
 }
-.pagination-floating[data-v-634a8768] .hiprint-pagination > li {
+.pagination-floating[data-v-10b7bf91] .hiprint-pagination > li {
   color: var(--vg-text, #303133);
   background: var(--vg-menu-bg, #fff);
 }
-.pagination-floating[data-v-634a8768] .hiprint-pagination > li > span {
+.pagination-floating[data-v-10b7bf91] .hiprint-pagination > li > span {
   color: var(--vg-text, #303133);
   white-space: nowrap;
 }
-.pagination-floating[data-v-634a8768] .hiprint-pagination > li > a {
+.pagination-floating[data-v-10b7bf91] .hiprint-pagination > li > a {
   color: var(--vg-muted-text, #909399);
 }
 /* 隐藏状态不显示触发器，改由工具栏控制 */
 
 /* Left Sider Toggle Button */
-.left-sider-toggle[data-v-634a8768] {
+.left-sider-toggle[data-v-10b7bf91] {
   position: absolute;
   top: 50%;
   left: 199px;
@@ -5276,27 +5317,27 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   transform: translateY(-50%);
   transition: left 0.3s;
 }
-.left-sider-toggle.collapsed[data-v-634a8768] {
+.left-sider-toggle.collapsed[data-v-10b7bf91] {
   left: 0;
 }
-.main-layout-row.is-mobile .left-sider[data-v-634a8768] {
+.main-layout-row.is-mobile .left-sider[data-v-10b7bf91] {
   display: none;
 }
-.main-layout-row.is-mobile .center-design[data-v-634a8768] {
+.main-layout-row.is-mobile .center-design[data-v-10b7bf91] {
   width: 100%;
   min-width: 0;
   flex: 0 0 100%;
   max-width: 100%;
 }
-.main-layout-row.left-collapsed .left-sider[data-v-634a8768] {
+.main-layout-row.left-collapsed .left-sider[data-v-10b7bf91] {
   display: none;
 }
-.main-layout-row.left-collapsed .center-design[data-v-634a8768] {
+.main-layout-row.left-collapsed .center-design[data-v-10b7bf91] {
   width: 100%;
   flex: 0 0 100%;
   max-width: 100%;
 }
-.mobile-bottom-sheet[data-v-634a8768] {
+.mobile-bottom-sheet[data-v-10b7bf91] {
   position: fixed;
   bottom: 0;
   left: 0;
@@ -5313,20 +5354,20 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   transition: transform 0.3s;
   border-radius: 12px 12px 0 0;
 }
-.mobile-bottom-sheet .prop-body[data-v-634a8768] {
+.mobile-bottom-sheet .prop-body[data-v-10b7bf91] {
   flex: 1;
   overflow-y: auto;
   padding: 0;
   height: calc(100% - 40px);
 }
-.mobile-bottom-sheet .mobile-sheet-tabs[data-v-634a8768] {
+.mobile-bottom-sheet .mobile-sheet-tabs[data-v-10b7bf91] {
   display: flex;
   height: 40px;
   background: #f5f7fa;
   border-bottom: 1px solid #e4e7ed;
   border-radius: 12px 12px 0 0;
 }
-.mobile-bottom-sheet .mobile-sheet-tabs .tab-item[data-v-634a8768] {
+.mobile-bottom-sheet .mobile-sheet-tabs .tab-item[data-v-10b7bf91] {
   flex: 1;
   display: flex;
   align-items: center;
@@ -5335,17 +5376,17 @@ li.disabled[data-v-82d33c90] { color: var(--vg-muted-text, #bbb);
   font-size: 14px;
   color: #606266;
 }
-.mobile-bottom-sheet .mobile-sheet-tabs .tab-item.active[data-v-634a8768] {
+.mobile-bottom-sheet .mobile-sheet-tabs .tab-item.active[data-v-10b7bf91] {
   color: #409eff;
   background: #fff;
   font-weight: bold;
   border-bottom: 2px solid #409eff;
 }
-.mobile-bottom-sheet .mobile-sheet-tabs .tab-item.close-btn[data-v-634a8768] {
+.mobile-bottom-sheet .mobile-sheet-tabs .tab-item.close-btn[data-v-10b7bf91] {
   flex: 0 0 40px;
   color: #909399;
 }
-.mobile-bottom-sheet .mobile-tab-content[data-v-634a8768] {
+.mobile-bottom-sheet .mobile-tab-content[data-v-10b7bf91] {
   height: 100%;
   overflow-y: auto;
   padding: 10px;