牌位版面設計

web/admin/item/css/floating.css

@@ -0,0 +1,6 @@
+.floating-box{
+    position:fixed;
+    width:260px;
+    z-index:9999;
+    max-height:calc(100vh-100px);
+}

web/admin/item/css/styles.css

@@ -0,0 +1,61 @@
+/* You can add global styles to this file, and also import other style files */
+
+/*@import "bootstrap/scss/bootstrap";
+@import "bootstrap-icons/font/bootstrap-icons";*/
+
+// 3. 自定義全域樣式 (讓 Sidebar 滿版)
+html, body {
+  height: 100%;
+  // 修正捲軸在 Dark mode 的顏色
+  &[data-bs-theme="dark"] {
+    color-scheme: dark;
+  }
+}
+
+// Sidebar 固定寬度設定 (可依需求調整)
+.sidebar {
+  width: 250px;
+  min-height: 100vh;
+  transition: all 0.3s;
+
+  @include media-breakpoint-down(md) {
+    width: 100%; // 手機版變成全寬或隱藏
+    min-height: auto;
+  }
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow-y: auto; // 內容區域獨立捲動
+}
+
+input[type="checkbox"]{
+
+  /* 1. Remove native styles */
+  -webkit-appearance: none;
+  appearance: none;
+
+  width: 25px !important;
+  height: 25px !important;
+
+  border: 2px solid #555; /* Your custom border */
+  border-radius: 4px;      /* Optional: rounded corners */
+  outline: none;
+  cursor: pointer;
+
+  /* Layout for the checkmark */
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 8px;
+  vertical-align: middle;
+  background-color: white;
+  transition: all 0.2s ease;
+}
+
+$toast-max-width: 500px;
+$toast-font-size: 1.5rem;
+

web/admin/item/css/tablet-design.css

@@ -0,0 +1,238 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  --canvas-bg: #f8f9fa;
+  --canvas-grid: #dee2e6;
+  --paper-bg: #fffbf0;
+  --paper-shadow: rgba(0,0,0,0.1);
+  --selection-color: #0d6efd;
+}
+
+:host-context([data-bs-theme="dark"]) {
+  --canvas-bg: #0f1114;
+  --canvas-grid: #2b3035;
+  --paper-shadow: rgba(0,0,0,0.8);
+  /* 紙張保持米黃，因為它是實物模擬 */
+}
+
+
+.designer-root {
+  /* 防止瀏覽器預設捲動影響畫布 */
+  overflow: hidden;
+}
+
+.canvas-area {
+    background-color: var(--canvas-bg);
+    background-image: linear-gradient(45deg, var(--canvas-grid) 25%, transparent 25%), linear-gradient(-45deg, var(--canvas-grid) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--canvas-grid) 75%), linear-gradient(-45deg, transparent 75%, var(--canvas-grid) 75%);
+    background-size: 20px 20px;
+    transition: background-color 0.3s;
+    min-height: 100vw;
+   
+}
+
+.tablet-paper {
+  background-color: var(--paper-bg);
+  box-shadow: 0 10px 30px var(--paper-shadow);
+  transition: all 0.3s;
+  overflow: hidden;
+  /* 確保在列印時被視為一個分頁單元 */
+  page-break-inside: avoid;
+}
+
+.tablet-element {
+  cursor: move;
+  padding: 4px;
+  color: black !important; /* 強制墨水為黑色 */
+  border: 1px solid transparent;
+  transition: writing-mode 0.3s, transform 0.2s;
+}
+.tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); }
+
+
+/* 直書模式核心 */
+.vertical-text {
+  writing-mode: vertical-rl;
+  text-orientation: mixed; /* 這是關鍵：中文直立，英文轉90度 */
+  white-space: pre-wrap;
+}
+
+/* 縱中橫 (讓直書中的數字變成橫向) */
+.tate-chu-yoko {
+  text-combine-upright: all; /* 擠在一起 */
+  /* 或者使用 digits 4 (但在某些瀏覽器支援度不一，all 比較保險) */
+  display: inline-block;
+  letter-spacing: 0; /* 數字之間不要有間距 */
+}
+
+/* 名單金字塔佈局容器 */
+.roster-container {
+  width: 100%; height: 100%;
+  writing-mode: vertical-rl; /* 直書 */
+  display: flex;
+  //flex-direction: column; /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
+  flex-direction: row;     /* 上下分層 (Top / Bottom) */
+  align-items: center;    /* 左右置中對齊 */
+  justify-content: center;
+  gap: 20px;               /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
+}
+
+.roster-row {
+  display: flex;
+  flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
+  justify-content: center;
+  gap: 8px; /* 名字之間的間距 */
+  margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
+}
+
+.name-group {
+  display: flex;
+  flex-direction: column;  /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
+  justify-content: center;
+  align-items: center;
+  /* gap 由 HTML 動態綁定 */
+}
+
+.roster-name {
+  text-orientation: upright;
+  font-weight: bold;
+  white-space: nowrap;
+  line-height: 1.2;
+  font-family: 'Kaiti', serif;
+  /* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
+/*  width: fit-content;*/
+}
+
+
+/* 選取框 */
+.selection-border {
+  position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px;
+  border: 2px solid var(--selection-color); pointer-events: none; z-index: 100;
+}
+
+.resize-handle {
+  position: absolute; width: 10px; height: 10px; background: white;
+  border: 2px solid var(--selection-color); border-radius: 50%;
+}
+.top-left { top: -6px; left: -6px; } .top-right { top: -6px; right: -6px; }
+.bottom-left { bottom: -6px; left: -6px; } .bottom-right { bottom: -6px; right: -6px; }
+
+.x-small { font-size: 0.7rem; } .ls-1 { letter-spacing: 1px; }
+.bg-gradient-primary { background: linear-gradient(135deg, #0d6efd 0%, #0043a8 100%); }
+.bg-gradient-dark { background: linear-gradient(135deg, #212529 0%, #000000 100%); }
+
+.page-info-badge {
+  background: rgba(255,255,255,0.9); padding: 5px 15px; border-radius: 20px; font-weight: bold; color: #333;
+}
+
+/* Print Mode */
+@media print {
+  app-floating-widget, .canvas-area, .page-info-badge { display: none !important; }
+  :host { display: block; background: white; }
+
+  .tablet-paper {
+    position: relative !important;
+    margin: 0;
+    page-break-after: always; /* 強制分頁 */
+    box-shadow: none !important; background: transparent !important;
+    width: 100% !important; height: 100% !important;
+    -webkit-print-color-adjust: exact; print-color-adjust: exact;
+  }
+  .tablet-paper:last-child { page-break-after: auto; }
+
+  .paper-size-label, .selection-border { display: none; }
+
+  /* 確保背景圖列印 */
+  img.bg-image-layer {
+    -webkit-print-color-adjust: exact; print-color-adjust: exact;
+    display: block !important;
+  }
+}
+
+.resizable-box {
+  width: 300px;
+  height: 200px;
+  border: 1px solid #ccc;
+
+  /* 關鍵屬性 */
+  resize: both; /* 允許水平和垂直調整 (或是 horizontal, vertical) */
+  overflow: auto; /* 必須設定 overflow (非 visible) resize 才會生效 */
+
+  /* 選用：限制最小最大尺寸 */
+  min-width: 100px;
+  min-height: 100px;
+}
+
+
+.combined-vertical-mode {
+  writing-mode: vertical-rl; /* 設定為直排 */
+  font-family: "KaiTi", "BiauKai", serif;
+  font-size: 48px;
+  font-weight: bold;
+  letter-spacing: 0.1em;
+  /* 為了讓排版置中好看，可以加這行 */
+  align-items: center;
+}
+
+.combined {
+  /* --- 關鍵修改 --- */
+
+  /* 1. 取消原本的擠壓設定 */
+  text-combine-upright: none;
+
+  /* 2. 將這三個字改回「橫向排版」 */
+  writing-mode: horizontal-tb;
+
+  /* 3. 讓它變成一個區塊，這樣字體才會撐開空間，不會擠在一起 */
+  display: inline-block;
+
+  /* 4. (選用) 調整它跟下方直書文字的對齊方式 */
+  vertical-align: middle;
+
+  /* 5. (選用) 如果希望字與字之間稍微寬鬆一點 */
+  letter-spacing: 0.05em;
+}
+
+.combined-small {
+  font-size: 32px !important;
+}
+
+.auto-wrap-text {
+  /* 1. 設定為直書模式 */
+  writing-mode: vertical-rl;
+  text-orientation: upright; /* 讓文字直立 */
+
+  /* 2. 關鍵：限制最大高度 */
+  /* 設定為 8em 代表大約 8 個字的高度，超過就會自動換行 */
+  max-height: 8em;
+
+  /* 3. 關鍵：允許換行 */
+  white-space: normal; /* 或 pre-wrap */
+
+  /* 4. 調整換行的方向與對齊 (選用) */
+  display: inline-block; /* 讓容器隨內容撐開 */
+  word-break: break-all; /* 確保長單字或連續文字也能強制切斷換行 */
+}
+
+.ancestor-wrapper {
+    /* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
+    writing-mode: horizontal-tb;
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* 水平置中 */
+    justify-content: center;
+    width: fit-content;
+}
+
+.main-name {
+    line-height: 1.2;
+    /* 保持大字 */
+}
+
+.sub-text {
+    font-size: 0.6em; /* 縮小字體 */
+    line-height: 1.2;
+    margin-top: 4px; /* 與上方林張的間距 */
+    white-space: nowrap; /* 避免自動換行 */
+    writing-mode:vertical-rl
+}