From 09dc74e264b6262cbe41c9c8476e24705871d4a6 Mon Sep 17 00:00:00 2001
From: yxh <172933527@qq.com>
Date: 星期日, 08 十一月 2026 23:31:17 +0800
Subject: [PATCH] yxh
---
src/components/DoctorPageLayout/src/DoctorPageLayout.vue | 166 +++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 153 insertions(+), 13 deletions(-)
diff --git a/src/components/DoctorPageLayout/src/DoctorPageLayout.vue b/src/components/DoctorPageLayout/src/DoctorPageLayout.vue
index 51091de..f1f54c2 100644
--- a/src/components/DoctorPageLayout/src/DoctorPageLayout.vue
+++ b/src/components/DoctorPageLayout/src/DoctorPageLayout.vue
@@ -38,7 +38,7 @@
footer 搴曢儴鍔熻兘鎸夐挳锛堝彲閫夛紱鍥哄畾鍦ㄩ〉闈㈠簳閮級
-->
<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import BedSwitchSelect from '@/views/ecg/doctor/components/BedSwitchSelect.vue'
import { useRoomStore } from '@/store/modules/room'
@@ -47,6 +47,47 @@
/* ==================== 涓�/鍥磋锛堝彧璇绘ā寮忥級 ==================== */
const roomStore = useRoomStore()
+
+/* ==================== 鏄剧ず瀵嗗害锛堝垎杈ㄧ巼閫傞厤锛� ==================== */
+
+/**
+ * 銆愪负浠�涔堟槸"瀵嗗害"鑰屼笉鏄�"鏁翠綋缂╂斁"銆�
+ * 鏇捐�冭檻鐢� `document.body.style.zoom = 0.9` 鍋氭暣浣撶缉鏀撅紝**瀹炴祴涓嶅彲琛�**锛�
+ * 鈶� CSS zoom **涓嶄細鏀瑰彉濯掍綋鏌ヨ**锛坺oom:1.25 鏃� innerWidth 浠嶆槸 1342銆�
+ * `(min-width:1200px)` 浠嶅懡涓級鈬� 鏍呮牸涓嶄細闅忎箣闄嶇骇锛�"缂╁皬"鍙嶈�岃瀛楁鏇存尋锛�
+ * 鈶� CSS zoom 浼氳 Element Plus 鐨勪笅鎷�/寮圭獥瀹氫綅閿欎綅 鈥斺�� 瀹冧滑闈�
+ * getBoundingClientRect + translate 璁＄畻浣嶇疆锛宺ect 宸插惈缂╂斁鍊嶇巼锛�
+ * 鍐欏洖鐨� px 鍙堝湪缂╂斁鍧愭爣绯婚噷锛岀瓑浜庤鏀惧ぇ涓ゆ銆�
+ *
+ * 鎵�浠ユ敼涓�**鍙帇缂╅棿璺�**锛堢函 CSS锛岄浂瀹氫綅椋庨櫓锛夛細琛ㄥ崟琛岃窛銆佽〃鏍煎崟鍏冩牸鍐呰竟璺濄��
+ * 搴曟爮鍐呰竟璺濄�傜煯灞忚兘澶氭樉绀哄嚑琛岃褰曪紝瑙嗚涓婄瓑鏁堜簬"缂╂斁"锛屼絾涓嶇牬鍧忎换浣曞脊灞傘��
+ *
+ * 鐪熉锋暣浣撶缉鏀捐鐢�**娴忚鍣ㄨ嚜甯︾缉鏀�**锛圕trl + / Ctrl - / Ctrl 0锛夛細
+ * 鏍呮牸宸插仛鍝嶅簲寮忥紝娴忚鍣ㄧ缉鏀句細鏀瑰彉 innerWidth锛屼粠鑰岃嚜鍔ㄥ湪 4/2/1 鍒椾箣闂村垏鎹€��
+ */
+const DENSITY_KEY = 'ecg.doctor.density'
+type Density = 'normal' | 'compact'
+const density = ref<Density>('normal')
+const isCompact = computed(() => density.value === 'compact')
+
+const loadDensity = () => {
+ try {
+ const v = localStorage.getItem(DENSITY_KEY)
+ if (v === 'compact' || v === 'normal') density.value = v
+ } catch {
+ /* 闅愮妯″紡/绂佺敤瀛樺偍鏃跺拷鐣� */
+ }
+}
+// 璁颁綇閫夋嫨锛堢敤 watch 鑰屼笉鏄� el-select 鐨� @change锛氶伩鍏� EP 鍥炶皟鍙傛暟绫诲瀷涓庤仈鍚堢被鍨嬩笉鍖归厤锛�
+watch(density, (v) => {
+ try {
+ localStorage.setItem(DENSITY_KEY, v)
+ } catch {
+ /* 闅愮妯″紡/绂佺敤瀛樺偍鏃跺拷鐣� */
+ }
+})
+// 鍦� setup 闃舵灏辫鍙栵紝閬垮厤棣栧抚浠�"鏍囧噯"璺冲埌"绱у噾"鐨勯棯鍔�
+loadDensity()
/**
* 鏄惁鏄剧ず椤堕儴鎻愮ず鏉°��
@@ -94,11 +135,33 @@
}
)
-/** 榛樿瀹藉害锛坧x锛夛細鐢� asideWidth 瑙ｆ瀽鑰屾潵锛岀敤浣滃垵濮嬪�间笌"鍙屽嚮澶嶄綅"鍊� */
-const defaultAsidePx = (() => {
+/**
+ * 銆岄粯璁ゃ�嶅彸鏍忓搴︼紙px锛夛細**鎸夌獥鍙ｅ搴﹁嚜閫傚簲**銆�
+ *
+ * 鑳屾櫙锛氬師鏉ュ浐瀹� 400px銆傚尰鐢熺數鑴戝垎杈ㄧ巼宸紓澶э紙1920 / 1366 / 1024锛屼笖甯稿甫 125% 缂╂斁锛夛紝
+ * 绐勫睆涓婂彸鏍忓悆鎺� 400px 鍚庯紝宸︿晶鎮ｈ�呬俊鎭紙4 鍒楁爡鏍硷紝姣忓垪瑕� 100px 鏍囩锛夊彧鍓╁嚑鐧惧儚绱狅紝
+ * 瀛楁琚帇鎴愪竴鏉＄紳 鈥斺�� 鐜板満琛ㄧ幇涓�"閮ㄥ垎鍐呭鐪嬩笉鍒�"銆�
+ *
+ * 瑙勫垯锛歚min(閰嶇疆鍊�, 绐楀彛瀹� 脳 28%)`锛屼笖涓嶄綆浜� minAsideWidth銆�
+ * 1920 鈫� 400锛堜笌鍘熸潵涓�鑷达紝瀹藉睆鏃犲彉鍖栵級
+ * 1600 鈫� 400
+ * 1366 鈫� 382
+ * 1280 鈫� 358
+ * 1024 鈫� 287
+ */
+const calcDefaultAsidePx = () => {
const n = parseInt(props.asideWidth, 10)
- return Number.isFinite(n) && n > 0 ? n : 400
-})()
+ const base = Number.isFinite(n) && n > 0 ? n : 400
+ const vw = typeof window !== 'undefined' ? window.innerWidth : 1920
+ return Math.max(props.minAsideWidth, Math.min(base, Math.round(vw * 0.28)))
+}
+
+/**
+ * 鍖荤敓鏄惁**鎵嬪姩**璋冭繃瀹藉害锛堟嫋杩囧垎鐣岀嚎 / 鐢ㄩ敭鐩樿皟杩� / 鏈夎蹇嗗�硷級銆�
+ * 鎵嬪姩璋冭繃 鈫� 灏婇噸浠栫殑閫夋嫨锛岀獥鍙ｅ彉鍖栨椂鍙仛"澶圭揣"锛�
+ * 娌¤皟杩� 鈫� 璺熼殢绐楀彛鑷�傚簲锛堟崲鍒板皬灞忚嚜鍔ㄦ敹绐勶級銆�
+ */
+const asideUserSet = ref(false)
/**
* 銆愬叧閿�戜笉渚濊禆 CSS `height: 100%` 鐨勮В鏋愶紝鏀逛负**瀹炴祴鐖跺鍣ㄥ彲鐢ㄩ珮搴�**銆�
@@ -125,8 +188,8 @@
/** 涓讳綋琛屽鍣細鎷栧姩鏃剁敤瀹冪畻"鍙充晶鏍忔渶澶氳兘鏈夊瀹�" */
const bodyRef = ref<HTMLElement>()
-/** 鍙充晶鏍忓綋鍓嶅搴︼紙px锛� */
-const asidePx = ref<number>(defaultAsidePx)
+/** 鍙充晶鏍忓綋鍓嶅搴︼紙px锛夛細鍒濆鍊间篃璧拌嚜閫傚簲锛岀獎灞忎笉浼氫竴涓婃潵灏卞崰鎺� 400px */
+const asidePx = ref<number>(calcDefaultAsidePx())
/** 鏄惁姝ｅ湪鎷栧姩锛堢敤浜庢崲鍏夋爣銆佺閫変腑锛� */
const dragging = ref(false)
@@ -149,6 +212,7 @@
/** 璁颁綇鎷栧姩缁撴灉锛堥殣绉佹ā寮�/绂佺敤瀛樺偍鏃堕潤榛樺拷鐣ワ級 */
const saveAsidePx = () => {
+ asideUserSet.value = true
if (!props.storageKey) return
try {
localStorage.setItem(props.storageKey, String(asidePx.value))
@@ -162,15 +226,19 @@
if (!props.storageKey) return
try {
const v = parseInt(localStorage.getItem(props.storageKey) || '', 10)
- if (Number.isFinite(v) && v > 0) asidePx.value = clampAsidePx(v)
+ if (Number.isFinite(v) && v > 0) {
+ asidePx.value = clampAsidePx(v)
+ asideUserSet.value = true // 鏈夎蹇嗗�� = 鍖荤敓鎵嬪姩璋冭繃锛屽悗缁笉鍐嶈窡闅忕獥鍙ｈ嚜閫傚簲
+ }
} catch {
/* ignore */
}
}
-/** 鍙屽嚮鍒嗙晫绾匡細鎭㈠榛樿瀹藉害骞舵竻闄よ蹇� */
+/** 鍙屽嚮鍒嗙晫绾匡細鎭㈠榛樿瀹藉害锛堥噸鏂版寜褰撳墠绐楀彛鑷�傚簲锛夊苟娓呴櫎璁板繂 */
const resetAsideWidth = () => {
- asidePx.value = clampAsidePx(defaultAsidePx)
+ asideUserSet.value = false
+ asidePx.value = clampAsidePx(calcDefaultAsidePx())
if (props.storageKey) {
try {
localStorage.removeItem(props.storageKey)
@@ -244,7 +312,12 @@
// 瀹藉害鍙樺寲锛堝惈绐楀彛缂╂斁锛夋椂閲嶆柊澶逛竴娆″彸鏍忓搴︼紝
// 鍚﹀垯鎷栧鍚庢妸绐楀彛缂╁皬锛屽彸渚ф爮鍙兘鎶婂乏渚у唴瀹规尋娌°��
- asidePx.value = clampAsidePx(asidePx.value)
+ //
+ // 銆愬垎杈ㄧ巼鑷�傚簲銆戞病鎵嬪姩璋冭繃鐨勶紙棣栨浣跨敤 / 鍙屽嚮澶嶄綅杩囷級鈫� 璺熼殢绐楀彛閲嶆柊绠楅粯璁ゅ搴︼紝
+ // 杩欐牱鍚屼竴浣嶅尰鐢熸崲鍒板皬灞忕瑪璁版湰涓婅嚜鍔ㄦ敹绐勶紱鎵嬪姩璋冭繃鐨勫彧鍋氬す绱э紝灏婇噸浠栫殑閫夋嫨銆�
+ asidePx.value = asideUserSet.value
+ ? clampAsidePx(asidePx.value)
+ : clampAsidePx(calcDefaultAsidePx())
}
/** 鐢� rAF 鍚堝苟杩炵画瑙﹀彂锛岄伩鍏� ResizeObserver 寰幆鍛婅 */
@@ -280,7 +353,7 @@
<div
ref="rootRef"
class="doctor-page"
- :class="{ 'is-resizing': dragging }"
+ :class="{ 'is-resizing': dragging, 'is-compact': isCompact }"
:style="{ height: measuredHeight }"
>
<!--
@@ -292,7 +365,22 @@
<div class="doctor-page__header-left">
<slot name="header"></slot>
</div>
- <BedSwitchSelect :enabled="bedSwitchEnabled" :op-types="bedSwitchOpTypes" />
+ <div class="doctor-page__header-tools">
+ <!--
+ 銆愬垎杈ㄧ巼閫傞厤銆戞樉绀哄瘑搴︼細绱у噾妯″紡鍘嬬缉琛岄珮/鍐呰竟璺濓紝鐭睆锛�768 楂橈級
+ 鑳藉鏄剧ず鍑犺璁板綍銆傞�夋嫨璁板湪 localStorage锛屾崲椤典繚鎸併��
+ -->
+ <el-select
+ v-model="density"
+ size="small"
+ class="doctor-page__density"
+ title="鏄剧ず瀵嗗害锛氱揣鍑戞ā寮忛�傚悎灏忓睆骞�/宸叉斁澶х缉鏀剧殑鐢佃剳"
+ >
+ <el-option label="鏍囧噯鏄剧ず" value="normal" />
+ <el-option label="绱у噾鏄剧ず" value="compact" />
+ </el-select>
+ <BedSwitchSelect :enabled="bedSwitchEnabled" :op-types="bedSwitchOpTypes" />
+ </div>
</div>
<!-- 鍥磋妯″紡锛堝彧璇伙級/ 鏈�夊伐浣� 鎻愮ず鏉★細璁╁尰鐢熶竴鐪肩煡閬�"鐜板湪鍙兘鐪嬶紝涓嶈兘鎿嶄綔" -->
@@ -395,6 +483,18 @@
flex: 1;
min-width: 0;
overflow: hidden;
+}
+
+/* 鍙充笂瑙掑伐鍏峰尯锛氭樉绀哄瘑搴� + 宸ヤ綅鍒囨崲锛堥兘鍥哄畾闈犲彸锛屼笉鍙備笌鍘嬬缉锛� */
+.doctor-page__header-tools {
+ display: flex;
+ flex: none;
+ align-items: center;
+ gap: 8px;
+}
+
+.doctor-page__density {
+ width: 104px;
}
/* ==========================================================================
@@ -577,4 +677,44 @@
margin-left: 0;
}
}
+
+/* ==========================================================================
+ 銆愬垎杈ㄧ巼閫傞厤銆戠揣鍑戞樉绀烘ā寮�
+ --------------------------------------------------------------------------
+ 鍙帇缂┿�岄棿璺濄�嶏紝涓嶆敼瀛楀彿 鈥斺�� 榛樿锛堟爣鍑嗭級**瀹屽叏涓嶅彈褰卞搷**锛屾墍鏈夎鍒欓兘鎸傚湪
+ `.is-compact` 涓嬶紝鍒囧洖鏍囧噯鍗虫仮澶嶅師鏍枫��
+
+ 閽堝鐨勭幇鍦洪棶棰橈細768 楂樼殑绗旇鏈紙鍐嶅彔鍔� 125% 缂╂斁锛変笂锛屾偅鑰呬俊鎭� + 宸插畬鎴愯褰�
+ + 搴曢儴鎸夐挳鍔犺捣鏉ヨ秴杩囧彲鐢ㄩ珮搴︼紝璁板綍鍒楄〃鍙墿涓�涓よ銆傚帇缂╁悗鑳芥妸楂樺害杩樼粰鍐呭銆�
+ ========================================================================== */
+.doctor-page.is-compact {
+ /* 鎮ｈ�呬俊鎭� 18 椤圭敤鐨勬槸 EP 榛樿 18px 琛岃窛锛屾槸鏈�澶х殑楂樺害娴垂鐐� */
+ :deep(.el-form-item) {
+ margin-bottom: 4px;
+ }
+
+ /* 璁板綍琛ㄦ牸锛氬崟鍏冩牸涓婁笅鍐呰竟璺� 8px 鈫� 3px锛岃楂樻敹鍒� 18px */
+ :deep(.el-table .cell) {
+ padding: 0 8px;
+ line-height: 18px;
+ }
+
+ :deep(.el-table td.el-table__cell),
+ :deep(.el-table th.el-table__cell) {
+ padding: 3px 0;
+ }
+
+ .doctor-page__header {
+ height: 36px;
+ }
+
+ .doctor-page__readonly-tip {
+ padding: 2px 12px;
+ line-height: 18px;
+ }
+
+ .doctor-page__footer {
+ padding: 2px 0 2px 8px;
+ }
+}
</style>
--
Gitblit v1.9.3