feat: 移动端布局重做(顶栏两行、安全区、月历紧凑、表单单列)

This commit is contained in:
root
2026-10-16 14:06:08 +08:00
parent e721c356af
commit 8c9f2f0c8b
10 changed files with 66 additions and 24 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,2 +1,2 @@
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./web-DemcfbD8.js","./index-B9GSzgPK.js","./index-egFbJdki.css"])))=>i.map(i=>d[i]); const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./web-C1N1mu_I.js","./index-CocrpELo.js","./index-vDZJrZrZ.css"])))=>i.map(i=>d[i]);
import{r as s,_ as i}from"./index-B9GSzgPK.js";var t;(function(e){e.Documents="DOCUMENTS",e.Data="DATA",e.Library="LIBRARY",e.Cache="CACHE",e.External="EXTERNAL",e.ExternalStorage="EXTERNAL_STORAGE"})(t||(t={}));var a;(function(e){e.UTF8="utf8",e.ASCII="ascii",e.UTF16="utf16"})(a||(a={}));const E=s("Filesystem",{web:()=>i(()=>import("./web-DemcfbD8.js"),__vite__mapDeps([0,1,2]),import.meta.url).then(e=>new e.FilesystemWeb)});export{t as Directory,a as Encoding,E as Filesystem}; import{r as s,_ as i}from"./index-CocrpELo.js";var t;(function(e){e.Documents="DOCUMENTS",e.Data="DATA",e.Library="LIBRARY",e.Cache="CACHE",e.External="EXTERNAL",e.ExternalStorage="EXTERNAL_STORAGE"})(t||(t={}));var a;(function(e){e.UTF8="utf8",e.ASCII="ascii",e.UTF16="utf16"})(a||(a={}));const E=s("Filesystem",{web:()=>i(()=>import("./web-C1N1mu_I.js"),__vite__mapDeps([0,1,2]),import.meta.url).then(e=>new e.FilesystemWeb)});export{t as Directory,a as Encoding,E as Filesystem};
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -8,8 +8,8 @@
<link rel="icon" href="./icons/icon.svg" type="image/svg+xml" /> <link rel="icon" href="./icons/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="./icons/icon-192.png" /> <link rel="apple-touch-icon" href="./icons/icon-192.png" />
<title>实习工作日志</title> <title>实习工作日志</title>
<script type="module" crossorigin src="./assets/index-B9GSzgPK.js"></script> <script type="module" crossorigin src="./assets/index-CocrpELo.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-egFbJdki.css"> <link rel="stylesheet" crossorigin href="./assets/index-vDZJrZrZ.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
+38 -15
View File
@@ -236,16 +236,18 @@ onMounted(async () => {
</div> </div>
</div> </div>
<span class="flex1"></span> <span class="flex1"></span>
<button v-if="weekTip" class="week-tip" @click="nav('report')"> <div class="topbar-actions">
<span class="dot" style="background: var(--warn)"></span> <button v-if="weekTip" class="week-tip" @click="nav('report')">
填写本周周记 <span class="dot" style="background: var(--warn)"></span>
</button> 填写本周周记
<span class="user-chip num">{{ session?.username }}</span> </button>
<button class="btn btn-sm" @click="doLogout">退出</button> <span class="user-chip num">{{ session?.username }}</span>
<button class="btn btn-primary btn-sm" :disabled="clockDone" @click="doClock"> <button class="btn btn-sm" @click="doLogout">退出</button>
<Icon :name="clockDone ? 'check-circle' : 'clock'" :size="14" /> <button class="btn btn-primary btn-sm" :disabled="clockDone" @click="doClock">
<span class="num">{{ clockLabel }}</span> <Icon :name="clockDone ? 'check-circle' : 'clock'" :size="14" />
</button> <span class="num">{{ clockLabel }}</span>
</button>
</div>
</header> </header>
<main class="content"> <main class="content">
<div class="content-inner"> <div class="content-inner">
@@ -269,7 +271,7 @@ onMounted(async () => {
</template> </template>
<style scoped> <style scoped>
.app { display: flex; height: 100vh; overflow: hidden; } .app { display: flex; height: 100vh; height: 100dvh; overflow: hidden; }
.side { .side {
width: 56px; width: 56px;
@@ -328,6 +330,8 @@ onMounted(async () => {
} }
.title { font-size: 14px; font-weight: 600; } .title { font-size: 14px; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.gsearch { position: relative; width: 300px; max-width: 38vw; } .gsearch { position: relative; width: 300px; max-width: 38vw; }
.gs-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); } .gs-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.gs-input { height: 30px; padding-left: 30px; } .gs-input { height: 30px; padding-left: 30px; }
@@ -415,18 +419,37 @@ onMounted(async () => {
.toast-enter-active, .toast-leave-active { transition: all 0.15s ease; } .toast-enter-active, .toast-leave-active { transition: all 0.15s ease; }
@media (max-width: 720px) { @media (max-width: 720px) {
.app { flex-direction: column; } .app { flex-direction: column; height: 100dvh; }
.side { .side {
order: 2; order: 2;
width: 100%; width: 100%;
height: 56px; height: calc(54px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: space-around;
border-right: none; border-right: none;
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
padding-top: 0; padding-top: 0;
} }
.main { order: 1; height: calc(100vh - 56px); } .main { order: 1; flex: 1; min-height: 0; }
.nav-btn { width: 44px; height: 42px; }
.nav-btn::after { display: none; } .nav-btn::after { display: none; }
.topbar {
flex-wrap: wrap;
height: auto;
min-height: 52px;
padding: 8px 12px;
row-gap: 8px;
}
.topbar > .flex1 { display: none; }
.gsearch { order: 10; width: 100%; max-width: 100%; }
.gs-input { height: 34px; }
.gs-panel { top: 100%; }
.topbar-actions { margin-left: auto; }
.user-chip { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-inner { padding: 12px; }
.toast-wrap { top: 8px; right: 12px; left: 12px; align-items: flex-end; }
} }
</style> </style>
+7
View File
@@ -206,4 +206,11 @@ watch(focusDate, d => {
.drawer-enter-active, .drawer-leave-active { transition: opacity 0.15s ease; } .drawer-enter-active, .drawer-leave-active { transition: opacity 0.15s ease; }
.drawer-enter-from, .drawer-leave-to { opacity: 0; } .drawer-enter-from, .drawer-leave-to { opacity: 0; }
@media (max-width: 720px) {
.cal-cell { min-height: 60px; padding: 4px 5px; }
.cal-title { min-width: 76px; font-size: 13px; }
.cal-marks { gap: 3px; margin-top: 4px; height: 12px; }
.drawer { width: 100%; }
}
</style> </style>
+6
View File
@@ -403,4 +403,10 @@ async function confirmDelete() {
.ops { display: flex; gap: 4px; flex-wrap: wrap; } .ops { display: flex; gap: 4px; flex-wrap: wrap; }
.empty { text-align: center; padding: 24px 0; } .empty { text-align: center; padding: 24px 0; }
.vault-note { margin-top: 10px; font-size: 12px; text-align: right; } .vault-note { margin-top: 10px; font-size: 12px; text-align: right; }
@media (max-width: 560px) {
.form-grid { grid-template-columns: 1fr; }
.field.span2 { grid-column: auto; }
.ledger-toolbar .w-filter { flex: 1; min-width: 0; width: auto; }
}
</style> </style>
+6
View File
@@ -41,4 +41,10 @@ function onDateInput(e: Event) {
.date-title { font-size: 14px; font-weight: 600; min-width: 170px; text-align: center; } .date-title { font-size: 14px; font-weight: 600; min-width: 170px; text-align: center; }
.date-title.is-today { color: var(--accent); } .date-title.is-today { color: var(--accent); }
.w-date { width: 150px; } .w-date { width: 150px; }
@media (max-width: 720px) {
.detail-toolbar { gap: 8px; }
.date-title { min-width: 0; flex: 1; text-align: left; }
.w-date { flex: 1; min-width: 120px; width: auto; }
}
</style> </style>