zhangzhen/uni-pda
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加字体大小设置

Browse Source
This commit is contained in:
zhangzhen
2026-07-03 11:45:16 +08:00
parent 451dd2330b
commit c3bd7960d0
28 changed files with 894 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/home/home.vue
+8 -8
View File
@@ -115,20 +115,20 @@ export default {
border-radius: 0 0 20px 20px;
}
.home-hospital {
font-size: 17px;
font-size: $font-size-lg;
font-weight: 700;
display: flex;
align-items: center;
gap: 6px;
}
.home-welcome {
font-size: 12px;
font-size: $font-size-xs;
opacity: 0.85;
margin-top: 4px;
}
.quick-section { padding: 16px 16px 8px; }
.section-title {
font-size: 14px;
font-size: $font-size-md;
font-weight: 600;
color: $text-primary;
margin-bottom: 12px;
@@ -158,7 +158,7 @@ export default {
justify-content: center;
}
.quick-item text {
font-size: 13px;
font-size: $font-size-base;
color: $text-primary;
font-weight: 500;
text-align: center;
@@ -182,12 +182,12 @@ export default {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-size: $font-size-lg;
background: #f0f0f0;
flex-shrink: 0;
}
.recent-info { flex: 1; }
.recent-info .name { font-size: 13px; color: $text-primary; font-weight: 500; }
.recent-info .detail { font-size: 11px; color: $text-placeholder; margin-top: 2px; }
.recent-time { font-size: 10px; color: #bbbbbb; }
.recent-info .name { font-size: $font-size-base; color: $text-primary; font-weight: 500; }
.recent-info .detail { font-size: $font-size-xs; color: $text-placeholder; margin-top: 2px; }
.recent-time { font-size: calc(10 * var(--font-scale) * 1px); color: #bbbbbb; }
</style>
pages/index/index.vue
+9 -9
View File
@@ -124,23 +124,23 @@ export default {
}
</script>
<style scoped>
<style lang="scss" scoped>
.page { padding: 20rpx; background: #f5f5f5; min-height: 100vh; }
.user-bar { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 30rpx; border-radius: 12rpx; margin-bottom: 20rpx; }
.user-left { display: flex; align-items: center; gap: 16rpx; }
.username { font-size: 32rpx; font-weight: bold; color: #333; }
.role-tag { font-size: 22rpx; padding: 4rpx 12rpx; border-radius: 4rpx; background: #007aff; color: #fff; }
.username { font-size: $font-size-lg; font-weight: bold; color: #333; }
.role-tag { font-size: $font-size-xs; padding: 4rpx 12rpx; border-radius: 4rpx; background: #007aff; color: #fff; }
.role-tag.admin { background: #f0ad4e; }
.mode-tag { font-size: 22rpx; padding: 4rpx 12rpx; border-radius: 4rpx; background: #4cd964; color: #fff; }
.mode-tag { font-size: $font-size-xs; padding: 4rpx 12rpx; border-radius: 4rpx; background: #4cd964; color: #fff; }
.mode-tag.offline { background: #ff9900; }
.btn-scan { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; margin-bottom: 20rpx; height: 100rpx; line-height: 100rpx; font-size: 32rpx; border-radius: 12rpx; }
.btn-scan { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; margin-bottom: 20rpx; height: 100rpx; line-height: 100rpx; font-size: $font-size-lg; border-radius: 12rpx; }
.grid-item-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30rpx 0; }
.grid-text { font-size: 32rpx; font-weight: bold; color: #333; margin-top: 16rpx; }
.grid-desc { font-size: 26rpx; color: #999; }
.info-bar { display: flex; justify-content: space-between; padding: 20rpx; font-size: 24rpx; color: #999; }
.grid-text { font-size: $font-size-lg; font-weight: bold; color: #333; margin-top: 16rpx; }
.grid-desc { font-size: $font-size-base; color: #999; }
.info-bar { display: flex; justify-content: space-between; padding: 20rpx; font-size: $font-size-sm; color: #999; }
.btn-logout { margin-top: 20rpx; color: #666; font-size: 28rpx; background: #fff; height: 90rpx; line-height: 90rpx; }
.btn-logout { margin-top: 20rpx; color: #666; font-size: $font-size-md; background: #fff; height: 90rpx; line-height: 90rpx; }
</style>
pages/inout/in.vue
+4 -4
View File
@@ -434,7 +434,7 @@ export default {
// 单位文本
.unit-text {
font-size: 14px;
font-size: $font-size-md;
color: #666;
margin-left: 8px;
}
@@ -443,7 +443,7 @@ export default {
.hazard-tag {
padding: 4rpx 16rpx;
border-radius: 4rpx;
font-size: 12px;
font-size: $font-size-xs;
color: #fff;
}
@@ -455,7 +455,7 @@ export default {
.btn-sm {
padding: 0 12px;
font-size: 13px;
font-size: $font-size-base;
height: 32px;
line-height: 32px;
}
@@ -476,7 +476,7 @@ export default {
}
.scan-status-text {
font-size: 13px;
font-size: $font-size-base;
color: #007AFF;
}
pages/inout/out.vue
+3 -3
View File
@@ -368,7 +368,7 @@ export default {
// 单位文本
.unit-text {
font-size: 14px;
font-size: $font-size-md;
color: #666;
margin-left: 8px;
}
@@ -380,14 +380,14 @@ export default {
// 提示文本
.hint-text {
font-size: 12px;
font-size: $font-size-xs;
color: #999;
margin-top: 4px;
}
.btn-sm {
padding: 0 12px;
font-size: 13px;
font-size: $font-size-base;
height: 32px;
line-height: 32px;
}
pages/ledger/ledger-in.vue
+16 -2
View File
@@ -18,8 +18,8 @@
<view class="data-card-row"><text>入库时间</text><text class="val">{{ item.time }}</text></view>
</view>
</view>
<view style="padding: 8px 16px;">
<button class="btn btn-outline" style="width:100%;height:36px;font-size:12px;" @click="handleReset">重置筛选</button>
<view class="filter-reset-area">
<button class="btn btn-outline filter-reset-btn" @click="handleReset">重置筛选</button>
</view>
</scroll-view>
</view>
@@ -50,3 +50,17 @@ export default {
}
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.filter-reset-area {
padding: 8px 16px;
}
.filter-reset-btn {
width: 100%;
height: 36px;
font-size: $font-size-sm;
}
</style>
pages/login/login.vue
+6 -6
View File
@@ -137,14 +137,14 @@ export default {
.login-title {
color: #ffffff;
font-size: 22px;
font-size: $font-size-xl;
font-weight: 700;
margin-bottom: 6px;
}
.login-subtitle {
color: rgba(255, 255, 255, 0.8);
font-size: 13px;
font-size: $font-size-base;
margin-bottom: 32px;
}
@@ -164,7 +164,7 @@ export default {
border-radius: 10px;
padding: 0 16px;
color: #ffffff;
font-size: 15px;
font-size: $font-size-md;
}
.login-input::placeholder {
@@ -178,7 +178,7 @@ export default {
color: #1890ff;
border: none;
border-radius: 10px;
font-size: 16px;
font-size: $font-size-lg;
font-weight: 700;
line-height: 48px;
}
@@ -188,14 +188,14 @@ export default {
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
font-size: $font-size-xs;
margin-top: 12px;
}
.login-version {
padding-top: 24px;
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
font-size: $font-size-xs;
text-align: center;
}
</style>
pages/settings/device.vue
+6 -2
View File
@@ -42,8 +42,7 @@
</view>
<view class="info-row">
<text class="label">说明</text>
<text class="value" style="font-size:12px;color:#999;">
{{ scanMode === 'uniapp' ? '使用默认摄像头扫码' : scanMode === 'idata' ? '仅支持 iData 设备内置扫码' : '通用 Android PDA 设备' }}
<text class="value value-desc">{{ scanMode === 'uniapp' ? '使用默认摄像头扫码' : scanMode === 'idata' ? '仅支持 iData 设备内置扫码' : '通用 Android PDA 设备' }}
</text>
</view>
</view>
@@ -300,4 +299,9 @@ export default {
gap: $spacing-sm;
margin-top: $spacing-base;
}
.value-desc {
font-size: $font-size-xs;
color: #999;
}
</style>
pages/settings/index.vue
+27 -4
View File
@@ -98,7 +98,22 @@
</view>
</view>
<!-- 分组4：高级设置 -->
<!-- 分组4：其他设置 -->
<view class="settings-group">
<view class="settings-item" @click="navigateTo('/pages/settings/other-settings')">
<view class="s-icon" style="background:#f9f0ff;">
<uni-icons type="font" size="20" color="#722ed1"></uni-icons>
</view>
<view class="s-text">
<text class="s-title">其他设置</text>
<text class="s-desc">字体大小、显示设置</text>
</view>
<text class="s-extra">{{ currentFontLabel }}</text>
<uni-icons type="right" size="14" color="#cccccc"></uni-icons>
</view>
</view>
<!-- 分组5：高级设置 -->
<view class="settings-group">
<view class="settings-item" @click="navigateTo('/pages/settings/env-config')">
<view class="s-icon" style="background:#fff7e6;">
@@ -112,7 +127,7 @@
</view>
</view>
<!-- 分组5：退出登录 -->
<!-- 分组6：退出登录 -->
<view class="settings-group">
<view class="settings-item" @click="handleLogout">
<view class="s-icon" style="background:#fff1f0;">
@@ -136,15 +151,22 @@
</template>
<script>
import { mapGetters } from 'vuex'
import { mapGetters, mapGetters as mapFontGetters } from 'vuex'
import { api } from '@/api'
export default {
computed: {
// 检查设备是否已配置（从 Vuex store 获取）
...mapGetters('print', ['hasSavedConfig']),
...mapGetters('user', ['enterpriseName', 'enterpriseInfo']),
// 从 Vuex 读取字体标签
...mapFontGetters('font', ['fontScaleLabel']),
deviceConfigured() {
return this.hasSavedConfig
},
// 显示字体标签
currentFontLabel() {
return this.fontScaleLabel || '默认'
}
},
data() {
@@ -164,6 +186,7 @@ export default {
const enterpriseInfo = await this.$store.dispatch('user/getEnterpriseInfo')
this.hospitalName = enterpriseInfo.fullEnterpriseName
},
navigateTo(path) { uni.navigateTo({ url: path }) },
handleLogout() {
uni.showModal({
@@ -277,7 +300,7 @@ export default {
.s-arrow {
color: #cccccc;
font-size: 14px;
font-size: $font-size-md;
}
.version-info {
pages/settings/other-settings.vue
+297
View File
@@ -0,0 +1,297 @@
<template>
<view class="page-container">
<scroll-view class="page-body" scroll-y>
<view class="settings-section">
<!-- 字体大小调整 -->
<view class="setting-card">
<view class="card-header">
<uni-icons type="font" size="20" color="#722ed1"></uni-icons>
<text class="card-title">字体大小</text>
</view>
<view class="font-preview">
<text class="preview-text" :style="{ fontSize: previewFontSize + 'px' }">预览文字大小</text>
</view>
<view class="slider-section">
<view class="slider-labels">
<text class="label-small">小</text>
<text class="label-current">{{ currentFontLabel }}</text>
<text class="label-large">大</text>
</view>
<slider
class="font-slider"
:value="sliderValue"
:min="0"
:max="3"
:step="1"
:activeColor="sliderColor"
:backgroundColor="'#e8e8e8'"
block-size="24"
@change="onSliderChange"
@changing="onSliderChanging"
show-value
/>
<view class="slider-values">
<text class="value-text">100%</text>
<text class="value-text">125%</text>
<text class="value-text">150%</text>
<text class="value-text">200%</text>
</view>
</view>
<view class="font-actions">
<button class="btn-reset" @click="resetToDefault">恢复默认</button>
</view>
</view>
<!-- 提示信息 -->
<view class="tip-card">
<uni-icons type="info" size="16" color="#fa8c16"></uni-icons>
<text class="tip-text">调整后会立即生效，所有页面的文字大小都会同步变化</text>
</view>
</view>
</scroll-view>
</view>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
data() {
return {
// 字体大小选项
fontSizeOptions: [
{ label: '默认', value: 1.0, desc: '标准字体', sliderIndex: 0 },
{ label: '大', value: 1.25, desc: '放大 25%', sliderIndex: 1 },
{ label: '较大', value: 1.5, desc: '放大 50%', sliderIndex: 2 },
{ label: '最大', value: 2.0, desc: '放大 100%', sliderIndex: 3 }
],
previewFontSize: 16
}
},
computed: {
// 从 Vuex 读取字体状态
...mapState('font', ['fontScale']),
...mapGetters('font', ['fontScaleLabel']),
// 当前滑块值
sliderValue: {
get() {
const option = this.fontSizeOptions.find(opt => opt.value === this.fontScale)
return option ? option.sliderIndex : 0
},
set(value) {
// 滑块值改变时应用到 Vuex
this.applyFontSetting(value)
}
},
// 当前字体标签
currentFontLabel() {
return this.fontScaleLabel
},
// 滑块颜色
sliderColor() {
const colors = ['#52c41a', '#1890ff', '#fa8c16', '#f5222d']
return colors[this.sliderValue] || '#1890ff'
}
},
onLoad() {
// 初始化时应用当前字体设置到预览
this.updatePreview()
},
methods: {
/**
* 滑块值改变（拖动结束）
*/
onSliderChange(e) {
const index = e.detail.value
this.applyFontSetting(index)
},
/**
* 滑块值改变（拖动中）
*/
onSliderChanging(e) {
const index = e.detail.value
const option = this.fontSizeOptions[index]
if (option) {
// 拖动中只更新预览，不实际应用
this.previewFontSize = 16 * option.value
}
},
/**
* 应用字体设置到 Vuex
*/
applyFontSetting(sliderIndex) {
const option = this.fontSizeOptions[sliderIndex]
if (!option) return
// 通过 Vuex action 设置字体
this.$store.dispatch('font/setFontScale', {
scale: option.value,
label: option.label
})
// 提示用户
uni.showToast({
title: `已设置为${option.label}`,
icon: 'success',
duration: 1500
})
this.updatePreview()
},
/**
* 更新预览字体大小
*/
updatePreview() {
// 基准字体大小 16px，根据缩放比例计算预览大小
this.previewFontSize = 16 * this.fontScale
},
/**
* 恢复默认设置
*/
resetToDefault() {
uni.showModal({
title: '提示',
content: '确定要恢复默认字体大小吗？',
success: (res) => {
if (res.confirm) {
// 通过 Vuex action 重置字体
this.$store.dispatch('font/resetFontScale')
uni.showToast({
title: '已恢复默认',
icon: 'success'
})
this.updatePreview()
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
.settings-section {
padding: $spacing-md;
}
.setting-card {
background: #ffffff;
border-radius: $border-radius-md;
padding: $spacing-lg;
margin-bottom: $spacing-base;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.card-header {
display: flex;
align-items: center;
gap: $spacing-sm;
margin-bottom: $spacing-lg;
.card-title {
font-size: $font-size-md;
color: $text-primary;
font-weight: 600;
}
}
.font-preview {
background: #f9f9f9;
border-radius: $border-radius-sm;
padding: $spacing-lg;
text-align: center;
margin-bottom: $spacing-lg;
.preview-text {
color: $text-primary;
font-weight: 500;
}
}
.slider-section {
margin-bottom: $spacing-lg;
.slider-labels {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: $spacing-sm;
.label-small,
.label-large {
font-size: $font-size-sm;
color: $text-placeholder;
}
.label-current {
font-size: $font-size-md;
color: $primary-color;
font-weight: 600;
}
}
.font-slider {
margin: $spacing-sm 0;
}
.slider-values {
display: flex;
justify-content: space-between;
padding: 0 $spacing-xs;
.value-text {
font-size: $font-size-xs;
color: $text-placeholder;
}
}
}
.font-actions {
display: flex;
justify-content: center;
.btn-reset {
background: #fff;
color: $text-secondary;
border: 1px solid $border-light;
border-radius: $border-radius-sm;
padding: $spacing-sm $spacing-lg;
font-size: $font-size-sm;
line-height: 1.5;
&::after {
border: none;
}
}
}
.tip-card {
background: #fff7e6;
border-radius: $border-radius-sm;
padding: $spacing-md;
display: flex;
align-items: flex-start;
gap: $spacing-sm;
.tip-text {
font-size: $font-size-sm;
color: #d48806;
line-height: 1.6;
flex: 1;
}
}
</style>
pages/settings/waste-list.vue
+3 -3
View File
@@ -46,7 +46,7 @@ export default {
border-bottom: 1px solid #f0f0f0;
.page-title {
font-size: 18px;
font-size: $font-size-lg;
font-weight: 600;
color: #333333;
}
@@ -66,12 +66,12 @@ export default {
justify-content: space-between;
.item-name {
font-size: 15px;
font-size: $font-size-md;
color: #333333;
}
.item-code {
font-size: 14px;
font-size: $font-size-base;
color: #999999;
margin-left: auto;
}
pages/testpages/bleconfig.vue
+4 -2
View File
@@ -157,14 +157,16 @@ export default {
};
</script>
<style>
<style lang="scss">
@import '@/styles/variables.scss';
.device-item, .service-item, .char-item {
padding: 10px;
border-bottom: 1px solid #ddd;
margin: 5px 0;
}
.mac {
font-size: 12px;
font-size: $font-size-sm;
color: gray;
margin-left: 10px;
}
pages/testpages/font-test.vue
+164
View File
@@ -0,0 +1,164 @@
<template>
<view class="page-container">
<view class="test-section">
<view class="test-title">字体缩放测试页面</view>
<view class="test-info">
<text class="info-item">当前缩放比例: {{ scale }}</text>
<text class="info-item">根字体大小: {{ rootFontSize }}</text>
</view>
<view class="test-group">
<view class="group-title">使用 class 的字体大小</view>
<view class="test-item">
<text class="text-xs">超小字体 (xs: 10px)</text>
</view>
<view class="test-item">
<text class="text-sm">小字体 (sm: 11px)</text>
</view>
<view class="test-item">
<text class="text-base">基础字体 (base: 13px)</text>
</view>
<view class="test-item">
<text class="text-md">中等字体 (md: 14px)</text>
</view>
<view class="test-item">
<text class="text-lg">大字体 (lg: 16px)</text>
</view>
<view class="test-item">
<text class="text-xl">超大字体 (xl: 20px)</text>
</view>
<view class="test-item">
<text class="text-xxl">特大字体 (xxl: 24px)</text>
</view>
</view>
<view class="test-group">
<view class="group-title">对比测试（固定 px vs rem）</view>
<view class="test-item">
<text class="fixed-size">固定大小 (14px，不应缩放)</text>
</view>
<view class="test-item">
<text class="rem-size">rem 大小 (0.875rem，应该缩放)</text>
</view>
</view>
<view class="test-actions">
<button class="btn btn-primary" @click="goToSettings">去设置页面调整字体</button>
<button class="btn btn-outline" @click="refreshTest">刷新测试</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
scale: 1.0,
rootFontSize: '16px'
}
},
onShow() {
this.refreshTest()
},
methods: {
refreshTest() {
// 从 Vuex 读取当前缩放比例
this.scale = this.$store.state.font.fontScale || 1.0
// 读取根字体大小
try {
if (typeof document !== 'undefined' && document.documentElement) {
this.rootFontSize = getComputedStyle(document.documentElement).fontSize
}
} catch (e) {
this.rootFontSize = '无法获取'
}
},
goToSettings() {
uni.navigateTo({
url: '/pages/settings/index'
})
}
}
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.page-container {
padding: $spacing-md;
}
.test-section {
background: $bg-card;
border-radius: $border-radius-md;
padding: $spacing-md;
}
.test-title {
font-size: $font-size-xl;
font-weight: 600;
color: $text-primary;
margin-bottom: $spacing-md;
text-align: center;
}
.test-info {
background: $bg-primary;
padding: $spacing-sm;
border-radius: $border-radius-sm;
margin-bottom: $spacing-md;
.info-item {
display: block;
font-size: $font-size-sm;
color: $text-secondary;
margin-bottom: $spacing-xs;
}
}
.test-group {
margin-bottom: $spacing-lg;
.group-title {
font-size: $font-size-md;
font-weight: 600;
color: $text-primary;
margin-bottom: $spacing-sm;
padding-bottom: $spacing-xs;
border-bottom: 1px solid $border-color;
}
}
.test-item {
padding: $spacing-sm;
margin-bottom: $spacing-sm;
background: #f9f9f9;
border-radius: $border-radius-sm;
border-left: 3px solid $primary-color;
}
/* 字体大小 class */
.text-xs { font-size: $font-size-xs; }
.text-sm { font-size: $font-size-sm; }
.text-base { font-size: $font-size-base; }
.text-md { font-size: $font-size-md; }
.text-lg { font-size: $font-size-lg; }
.text-xl { font-size: $font-size-xl; }
.text-xxl { font-size: $font-size-xxl; }
/* 对比测试 */
.fixed-size { font-size: 14px; }
.rem-size { font-size: 0.875rem; }
.test-actions {
margin-top: $spacing-lg;
.btn {
margin-bottom: $spacing-sm;
}
}
</style>
pages/waste/adjust.vue
+1 -1
View File
@@ -271,7 +271,7 @@ export default {
}
.type-modal-close {
font-size: 18px;
font-size: $font-size-lg;
color: $text-placeholder;
padding: 4px;
}
pages/waste/manifest.vue
+2 -2
View File
@@ -327,7 +327,7 @@ export default {
align-items: center;
}
.data-card-toggle {
font-size: 12px;
font-size: $font-size-xs;
color: #999;
font-weight: 400;
}
@@ -338,7 +338,7 @@ export default {
.data-card-tag {
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-size: $font-size-xs;
&.orange {
background-color: #fff7e6;
color: #fa8c16;
pages/waste/reprint.vue
+7 -7
View File
@@ -184,14 +184,14 @@ export default {
color: #ffffff;
text-align: center;
padding: 8px 12px;
font-size: 14px;
font-size: $font-size-md;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
}
.label-toggle {
font-size: 12px;
font-size: $font-size-xs;
font-weight: 400;
opacity: 0.9;
}
@@ -211,24 +211,24 @@ export default {
}
.label-section-title {
padding: 10px 0 6px;
font-size: 12px;
font-size: $font-size-xs;
font-weight: 600;
color: $primary-color;
border-bottom: 1px solid $border-light;
margin-bottom: 4px;
&:first-child { padding-top: 0; }
}
.label-key { color: $text-secondary; font-size: 13px; }
.label-val { color: $text-primary; font-size: 13px; font-weight: 500; }
.label-key { color: $text-secondary; font-size: $font-size-base; }
.label-val { color: $text-primary; font-size: $font-size-base; font-weight: 500; }
.label-code {
font-size: 11px !important;
font-size: $font-size-xs !important;
word-break: break-all;
text-align: right;
max-width: 60%;
}
.label-reprint {
text-align: center;
font-size: 20px;
font-size: $font-size-xl;
font-weight: 700;
color: $danger-color;
margin-top: 8px;
pages/weigh/generate.vue
+2 -2
View File
@@ -438,7 +438,7 @@ export default {
.btn-sm {
padding: 0 12px;
font-size: 13px;
font-size: $font-size-base;
height: 32px;
line-height: 32px;
}
@@ -457,7 +457,7 @@ export default {
text {
margin-left: 4px;
font-size: 14px;
font-size: $font-size-md;
color: #333;
}
}