rain/jiapuapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: unify project responsive layouts

Browse Source
This commit is contained in:
rain
2026-07-21 20:59:10 +08:00
parent a0d19f4aab
commit 5d99bae3f2
94 changed files with 2324 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AppButton.vue
+25 -1
View File
@@ -3,7 +3,11 @@
class="app-button"
:class="[
`app-button--${type}`,
{ 'app-button--block': block, 'app-button--disabled': disabled },
{
'app-button--block': block,
'app-button--compact': compact,
'app-button--disabled': disabled,
},
]"
:disabled="disabled"
:aria-label="label"
@@ -24,6 +28,7 @@ const props = defineProps({
label: { type: String, default: "" },
type: { type: String, default: "primary" },
block: { type: Boolean, default: false },
compact: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
});
const emit = defineEmits(["click"]);
@@ -40,6 +45,8 @@ const handleClick = (event) => {
</script>
<style scoped lang="scss">
@use "../styles/adaptive-frame-profiles.scss" as adaptive;
.app-button {
display: inline-grid;
width: 420rpx;
@@ -60,6 +67,23 @@ const handleClick = (event) => {
display: grid;
width: 100%;
}
.app-button--compact {
}
.app-button--compact.app-button--primary {
@include adaptive.adaptive-scroll-button(primary);
}
.app-button--compact.app-button--secondary {
@include adaptive.adaptive-scroll-button(secondary);
}
.app-button--compact .app-button__skin {
display: none;
}
.app-button--compact .app-button__label {
padding: 0;
font-size: 23rpx;
letter-spacing: 0;
white-space: nowrap;
}
.app-button__skin {
width: 100%;
height: 100%;
components/AppDialog.vue
+29 -11
View File
@@ -15,9 +15,11 @@
@keydown.esc.stop="cancel"
>
<scroll-view class="app-dialog__content" scroll-y>
<text v-if="eyebrow" class="app-dialog__eyebrow">{{ eyebrow }}</text>
<text class="app-dialog__title">{{ title }}</text>
<text v-if="message" class="app-dialog__message">{{ message }}</text>
<view class="app-dialog__copy">
<text v-if="eyebrow" class="app-dialog__eyebrow">{{ eyebrow }}</text>
<text class="app-dialog__title">{{ title }}</text>
<text v-if="message" class="app-dialog__message">{{ message }}</text>
</view>
<slot />
<view
class="app-dialog__actions"
@@ -27,9 +29,14 @@
v-if="showCancel"
type="secondary"
:label="cancelText"
:compact="compactActions && showCancel"
@click="cancel"
/>
<AppButton :label="confirmText" @click="$emit('confirm')" />
<AppButton
:label="confirmText"
:compact="compactActions && showCancel"
@click="$emit('confirm')"
/>
</view>
</scroll-view>
</view>
@@ -48,6 +55,7 @@ const props = defineProps({
confirmText: { type: String, default: "我知道了" },
cancelText: { type: String, default: "取消" },
showCancel: { type: Boolean, default: false },
compactActions: { type: Boolean, default: false },
closeOnMask: { type: Boolean, default: true },
});
const emit = defineEmits(["confirm", "cancel", "close"]);
@@ -75,6 +83,8 @@ const cancel = () => {
</script>
<style scoped lang="scss">
@use "../styles/adaptive-frame-profiles.scss" as adaptive;
.app-dialog-layer {
position: fixed;
z-index: 80;
@@ -89,22 +99,30 @@ const cancel = () => {
.app-dialog {
width: 650rpx;
max-width: 100%;
min-height: 520rpx;
background: url("/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png")
center / contain no-repeat;
@include adaptive.adaptive-auth-dialog;
}
.app-dialog__content {
z-index: 1;
display: flex;
min-height: 520rpx;
max-height: calc(100vh - 80rpx);
max-height: calc(var(--app-viewport-height, 100vh) - 160rpx);
flex-direction: column;
align-items: center;
box-sizing: border-box;
padding: 74rpx 66rpx 54rpx;
padding: 16rpx 20rpx 12rpx;
text-align: center;
overflow-y: auto;
}
.app-dialog__copy {
display: flex;
width: 100%;
flex-direction: column;
align-items: center;
}
.app-dialog__title,
.app-dialog__message {
display: block;
width: 100%;
}
.app-dialog__eyebrow {
color: #9f170f;
font-size: 22rpx;
@@ -131,7 +149,7 @@ const cancel = () => {
width: 100%;
grid-template-columns: 1fr 1fr;
gap: 16rpx;
margin-top: auto;
margin-top: 26rpx;
}
.app-dialog__actions--single {
display: flex;
components/AppTabbar.vue
+1 -1
View File
@@ -60,7 +60,7 @@ const switchTab = (item) => {
left: 0;
z-index: 20;
display: flex;
height: 112rpx;
min-height: 112rpx;
padding-bottom: env(safe-area-inset-bottom);
box-sizing: content-box;
border-top: 1rpx solid $gold-soft;
components/AppToast.vue
+3 -7
View File
@@ -18,6 +18,8 @@ defineProps({
</script>
<style scoped lang="scss">
@use "../styles/adaptive-frame-profiles.scss" as adaptive;
.app-toast {
position: fixed;
z-index: 100;
@@ -29,13 +31,7 @@ defineProps({
min-height: 82rpx;
align-items: center;
justify-content: center;
box-sizing: border-box;
border: 16rpx solid transparent;
border-width: 16rpx 74rpx;
border-image-source: url("/static/assets/foundation/transparent/a01-scroll-toast-v3.png");
border-image-slice: 58 280 fill;
border-image-width: 16rpx 74rpx;
border-image-repeat: stretch;
@include adaptive.adaptive-feedback-toast;
transform: translateX(-50%);
pointer-events: none;
}
components/ModulePage.vue
+9 -7
View File
@@ -249,6 +249,8 @@ onUnmounted(() => {
</script>
<style scoped lang="scss">
@use "../styles/adaptive-frame-profiles.scss" as adaptive;
.module-page {
display: flex;
min-height: 100vh;
@@ -267,18 +269,18 @@ onUnmounted(() => {
padding: 16rpx 26rpx 56rpx;
}
.module-lead {
display: flex;
min-height: 56rpx;
align-items: center;
justify-content: center;
margin: 0 12rpx 18rpx;
color: $ink-muted;
font-size: 23rpx;
text-align: center;
background: url("/static/assets/modules/genealogy/transparent/section-divider.png") center / 100% 100% no-repeat;
background: url("/static/assets/modules/genealogy/transparent/section-divider.png") center / 100% auto no-repeat;
}
.module-lead text {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
display: block;
}
.module-panel {
width: 100%;
@@ -304,7 +306,7 @@ onUnmounted(() => {
}
.form-row,
.settings-row {
background: var(--module-field-asset) center / 100% 100% no-repeat;
@include adaptive.adaptive-module-field;
}
.form-row > text {
color: $ink;
@@ -350,7 +352,7 @@ onUnmounted(() => {
.detail-card,
.timeline-row,
.status-card {
background: var(--module-content-asset) center / 100% 100% no-repeat;
@include adaptive.adaptive-module-content;
}
.list-card__copy {
padding: 34rpx 46rpx 28rpx;
components/tree/TreeMemberForm.vue
+5 -6
View File
@@ -107,7 +107,7 @@ const configs = {
action: "保存资料",
note: "隐私字段只向本人和有权限的家谱管理员展示。",
fields: [
{ key: "name", label: "姓名", placeholder: "汤文远" },
{ key: "name", label: "姓名", placeholder: "请输入首位成员姓名" },
{ key: "generation", label: "字辈", placeholder: "例如：文" },
{ key: "birthDate", label: "出生日期", placeholder: "1940年" },
{ key: "summary", label: "人物简介", placeholder: "简要记录生平" },
@@ -121,7 +121,7 @@ const configs = {
action: "保存关系",
note: "若形成重复父母、代际倒置等情况，页面会先提示冲突。",
fields: [
{ key: "source", label: "当前成员", placeholder: "汤文远" },
{ key: "source", label: "当前成员", placeholder: "请选择当前成员" },
{ key: "target", label: "关联成员", placeholder: "请选择家谱成员" },
{ key: "relation", label: "关系类型", placeholder: "父子、配偶等" },
{ key: "effectiveDate", label: "生效日期", placeholder: "选填" },
@@ -195,6 +195,7 @@ const showConflictHelp = () => {
</script>
<style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
.member-form-page {
display: flex;
min-height: 100vh;
@@ -205,14 +206,13 @@ const showConflictHelp = () => {
z-index: 3;
}
.member-form-panel {
@include adaptive.adaptive-tree-panel;
z-index: 2;
width: calc(100% - 32rpx);
min-height: min(640px, calc((100vw - 16px) * 1.48));
margin: 18rpx auto 0;
padding: 7.5% 8%;
box-sizing: border-box;
background: url("/static/assets/modules/tree/transparent/t01-state-panel.png")
center / 100% 100% no-repeat;
}
.member-form,
.member-form-result {
@@ -240,6 +240,7 @@ const showConflictHelp = () => {
line-height: 1.5;
}
.member-field {
@include adaptive.adaptive-tree-field;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
min-height: 78rpx;
@@ -248,8 +249,6 @@ const showConflictHelp = () => {
margin-top: 12rpx;
padding: 12rpx 22rpx;
box-sizing: border-box;
background: url("/static/assets/modules/tree/transparent/t07-search-input-frame.png")
center / 100% 100% no-repeat;
}
.member-field > text {
z-index: 1;