105 lines
2.1 KiB
Vue
105 lines
2.1 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* 全屏表单页布局：说明文案 + 表单插槽 + 底栏提交
|
||
* 用于新建/编辑，替代底部抽屉主路径
|
||
* 根节点是 wd-config-provider（wot 官方深色方案），承担整页主题作用域
|
||
*/
|
||
import { useThemeShell } from '@/composables/useThemeShell'
|
||
|
||
withDefaults(
|
||
defineProps<{
|
||
tip?: string
|
||
submitText?: string
|
||
loading?: boolean
|
||
}>(),
|
||
{
|
||
tip: '',
|
||
submitText: '保存',
|
||
loading: false,
|
||
},
|
||
)
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'submit'): void
|
||
}>()
|
||
|
||
const { wotTheme } = useThemeShell()
|
||
</script>
|
||
|
||
<template>
|
||
<wd-config-provider :theme="wotTheme">
|
||
<view class="page-form">
|
||
<text v-if="tip" class="page-form__tip">{{ tip }}</text>
|
||
<view class="page-form__card">
|
||
<slot />
|
||
</view>
|
||
<view class="bar-space" />
|
||
<view class="bar">
|
||
<view
|
||
class="bar__btn"
|
||
:class="{ 'is-disabled': loading }"
|
||
@tap="!loading && emit('submit')"
|
||
>
|
||
{{ loading ? '保存中…' : submitText }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</wd-config-provider>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.page-form {
|
||
min-height: 100vh;
|
||
padding: 24rpx 28rpx 0;
|
||
box-sizing: border-box;
|
||
background: $nl-color-bg-page;
|
||
}
|
||
|
||
.page-form__tip {
|
||
display: block;
|
||
margin: 0 8rpx 20rpx;
|
||
font-size: 24rpx;
|
||
color: $nl-color-text-muted;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.page-form__card {
|
||
background: $nl-color-bg-card;
|
||
border-radius: 28rpx;
|
||
padding: 8rpx 28rpx;
|
||
box-shadow: 0 8rpx 28rpx rgba(15, 23, 42, 0.04);
|
||
}
|
||
|
||
.bar-space {
|
||
height: calc(128rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.bar {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 20;
|
||
padding: 16rpx 28rpx calc(16rpx + env(safe-area-inset-bottom));
|
||
/* 走卡片底色变量，深色模式自动切换 */
|
||
background: $nl-color-bg-card;
|
||
border-top: 1rpx solid $nl-color-divider;
|
||
}
|
||
|
||
.bar__btn {
|
||
height: 88rpx;
|
||
border-radius: 999rpx;
|
||
background: $nl-color-primary;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.bar__btn.is-disabled {
|
||
opacity: 0.65;
|
||
}
|
||
</style>
|