LiLongLong
3 weeks ago
31 changed files with 1256 additions and 151 deletions
-
75package-lock.json
-
1package.json
-
2src/assets/styles/element.scss
-
2src/assets/styles/variable.scss
-
5src/components/common/BTButton/index.vue
-
2src/components/common/CascadingSelectModal/index.vue
-
601src/components/common/DatePicker/index.vue
-
150src/components/common/DigitalKeyboard/index.vue
-
250src/components/common/SoftKeyboard/index.vue
-
56src/components/formula/FormulaConfig.vue
-
19src/components/formula/FormulaTable.vue
-
2src/components/home/HomeFormula.vue
-
3src/components/home/HomeLogLevel.vue
-
62src/components/home/HomeSetting.vue
-
6src/components/home/config.vue
-
2src/components/seal/DashboardChart.vue
-
1src/components/setting/Device.vue
-
4src/components/setting/History.vue
-
21src/components/setting/SystemDate.vue
-
2src/components/setting/User.vue
-
15src/lang/en.ts
-
18src/lang/index.ts
-
15src/lang/zh.ts
-
42src/layouts/default.vue
-
2src/libs/pinyinDict.json
-
2src/libs/utils.ts
-
19src/main.ts
-
6src/views/audit/index.vue
-
11src/views/formula/index.vue
-
4src/views/home/index.vue
-
7src/views/seal/index.vue
@ -0,0 +1,601 @@ |
|||
<script lang="ts" setup> |
|||
import { computed, defineEmits, defineProps, onMounted, onUnmounted, ref, watch } from 'vue' |
|||
|
|||
const props = defineProps({ |
|||
modelValue: { |
|||
type: [String, Date, null], |
|||
default: null, |
|||
}, |
|||
minDate: { |
|||
type: [String, Date], |
|||
default: null, |
|||
}, |
|||
maxDate: { |
|||
type: [String, Date], |
|||
default: null, |
|||
}, |
|||
format: { |
|||
type: String, |
|||
default: 'YYYY-MM-DD HH:mm:ss', |
|||
}, |
|||
}) |
|||
|
|||
const emits = defineEmits(['update:modelValue', 'change']) |
|||
const dateText = ref() |
|||
const hoursOptions = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23]) |
|||
// 初始化日期时间 |
|||
const selectedDate = ref<Date | null>(null) |
|||
const currentYear = ref(0) |
|||
const currentMonth = ref(0) |
|||
const today = new Date() |
|||
const weekdays = ['日', '一', '二', '三', '四', '五', '六'] |
|||
const isDropdownVisible = ref(false) |
|||
const selectedHour = ref('00') |
|||
const selectedMinute = ref('00') |
|||
const selectedSecond = ref('00') |
|||
|
|||
// 格式化显示值 |
|||
const displayValue = () => { |
|||
console.log('-----------------') |
|||
if (!selectedDate.value) { |
|||
return '' |
|||
} |
|||
console.log('---selectedDate--', selectedDate.value) |
|||
const year = selectedDate.value.getFullYear() |
|||
const month = (selectedDate.value.getMonth() + 1).toString().padStart(2, '0') |
|||
const date = selectedDate.value.getDate().toString().padStart(2, '0') |
|||
const hour = selectedDate.value.getHours().toString().padStart(2, '0') |
|||
const minute = selectedDate.value.getMinutes().toString().padStart(2, '0') |
|||
const second = selectedDate.value.getSeconds().toString().padStart(2, '0') |
|||
|
|||
dateText.value = `${year}-${month}-${date} ${hour}:${minute}:${second}` |
|||
} |
|||
|
|||
watch(selectedDate, (newVal) => { |
|||
if (newVal) { |
|||
const year = newVal.getFullYear() |
|||
const month = (newVal.getMonth() + 1).toString().padStart(2, '0') |
|||
const date = newVal.getDate().toString().padStart(2, '0') |
|||
const hour = newVal.getHours().toString().padStart(2, '0') |
|||
const minute = newVal.getMinutes().toString().padStart(2, '0') |
|||
const second = newVal.getSeconds().toString().padStart(2, '0') |
|||
dateText.value = `${year}-${month}-${date} ${hour}:${minute}:${second}` |
|||
} |
|||
}) |
|||
|
|||
// 计算当前月份的天数及上个月和下个月的部分天数 |
|||
const daysInMonth: any = computed(() => { |
|||
const days: Record<string, any>[] = [] |
|||
|
|||
// 获取当前月份第一天是星期几 |
|||
const firstDay = new Date(currentYear.value, currentMonth.value, 1).getDay() |
|||
|
|||
// 获取上个月的最后几天 |
|||
const prevMonthLastDay = new Date(currentYear.value, currentMonth.value, 0).getDate() |
|||
for (let i = firstDay; i > 0; i--) { |
|||
const date = new Date(currentYear.value, currentMonth.value - 1, prevMonthLastDay - i + 1) |
|||
days.push({ date, month: currentMonth.value - 1 }) |
|||
} |
|||
|
|||
// 获取当前月份的所有天数 |
|||
const currentMonthDays = new Date(currentYear.value, currentMonth.value + 1, 0).getDate() |
|||
for (let i = 1; i <= currentMonthDays; i++) { |
|||
const date = new Date(currentYear.value, currentMonth.value, i) |
|||
days.push({ date, month: currentMonth.value }) |
|||
} |
|||
|
|||
// 获取下个月的前几天 |
|||
const remainingDays = 42 - days.length // 6行7列共42个格子 |
|||
for (let i = 1; i <= remainingDays; i++) { |
|||
const date = new Date(currentYear.value, currentMonth.value + 1, i) |
|||
days.push({ date, month: currentMonth.value + 1 }) |
|||
} |
|||
|
|||
return days |
|||
}) |
|||
|
|||
// 初始化 |
|||
onMounted(() => { |
|||
const initialDate = new Date() |
|||
selectedDate.value = initialDate |
|||
currentYear.value = initialDate.getFullYear() |
|||
currentMonth.value = initialDate.getMonth() |
|||
selectedHour.value = initialDate.getHours().toString().padStart(2, '0') |
|||
selectedMinute.value = initialDate.getMinutes().toString().padStart(2, '0') |
|||
selectedSecond.value = initialDate.getSeconds().toString().padStart(2, '0') |
|||
}) |
|||
|
|||
// 监听props变化 |
|||
watch(() => props.modelValue, (newVal) => { |
|||
if (newVal) { |
|||
const date = new Date(newVal) |
|||
if (!Number.isNaN(date.getTime())) { |
|||
selectedDate.value = date |
|||
currentYear.value = date.getFullYear() |
|||
currentMonth.value = date.getMonth() |
|||
selectedHour.value = date.getHours().toString().padStart(2, '0') |
|||
selectedMinute.value = date.getMinutes().toString().padStart(2, '0') |
|||
selectedSecond.value = date.getSeconds().toString().padStart(2, '0') |
|||
} |
|||
} |
|||
else { |
|||
selectedDate.value = null |
|||
} |
|||
}) |
|||
|
|||
// 日期操作 |
|||
const prevMonth = () => { |
|||
if (currentMonth.value === 0) { |
|||
currentMonth.value = 11 |
|||
currentYear.value-- |
|||
} |
|||
else { |
|||
currentMonth.value-- |
|||
} |
|||
} |
|||
|
|||
const nextMonth = () => { |
|||
if (currentMonth.value === 11) { |
|||
currentMonth.value = 0 |
|||
currentYear.value++ |
|||
} |
|||
else { |
|||
currentMonth.value++ |
|||
} |
|||
} |
|||
|
|||
const prevYear = () => { |
|||
currentYear.value-- |
|||
} |
|||
|
|||
const nextYear = () => { |
|||
currentYear.value++ |
|||
} |
|||
|
|||
// 日期选择 |
|||
const selectDate = (date: Date) => { |
|||
if (!isDateInRange(date)) { |
|||
return |
|||
} |
|||
|
|||
if (!selectedDate.value) { |
|||
selectedDate.value = new Date(date) |
|||
} |
|||
else { |
|||
// 保留原来的时分秒 |
|||
selectedDate.value.setFullYear(date.getFullYear()) |
|||
selectedDate.value.setMonth(date.getMonth()) |
|||
selectedDate.value.setDate(date.getDate()) |
|||
} |
|||
displayValue() |
|||
} |
|||
|
|||
// 时间更新 |
|||
const updateTime = () => { |
|||
console.log('selectedDate.value--', selectedDate.value, selectedHour.value) |
|||
if (selectedDate.value) { |
|||
selectedDate.value.setHours(Number(selectedHour.value)) |
|||
selectedDate.value.setMinutes(Number(selectedMinute.value)) |
|||
selectedDate.value.setSeconds(Number(selectedSecond.value)) |
|||
} |
|||
displayValue() |
|||
} |
|||
|
|||
// 确认选择 |
|||
const confirmSelection = () => { |
|||
console.log('selectedDate.value---', selectedDate.value) |
|||
if (selectedDate.value) { |
|||
const dateValue = formatDate(selectedDate.value, props.format) |
|||
emits('update:modelValue', dateValue) |
|||
emits('change', dateValue) |
|||
} |
|||
isDropdownVisible.value = false |
|||
} |
|||
|
|||
// 日期格式化工具函数 |
|||
const formatDate = (date: Date, format: string): string => { |
|||
if (!date) { |
|||
return '' |
|||
} |
|||
|
|||
const year = date.getFullYear() |
|||
const month = date.getMonth() + 1 |
|||
const day = date.getDate() |
|||
const hour = date.getHours() |
|||
const minute = date.getMinutes() |
|||
const second = date.getSeconds() |
|||
console.log('---year--', year) |
|||
console.log('---month--', month) |
|||
return format |
|||
.replace('YYYY', year.toString()) |
|||
.replace('MM', month.toString().padStart(2, '0')) |
|||
.replace('DD', day.toString().padStart(2, '0')) |
|||
.replace('HH', hour.toString().padStart(2, '0')) |
|||
.replace('mm', minute.toString().padStart(2, '0')) |
|||
.replace('ss', second.toString().padStart(2, '0')) |
|||
} |
|||
|
|||
// 取消选择 |
|||
const cancelSelection = () => { |
|||
// 恢复之前的值 |
|||
// if (props.modelValue) { |
|||
// const date = new Date(props.modelValue) |
|||
// if (!isNaN(date.getTime())) { |
|||
// selectedDate.value = date |
|||
// selectedHour.value = date.getHours().toString().padStart(2, '0') |
|||
// selectedMinute.value = date.getMinutes().toString().padStart(2, '0') |
|||
// selectedSecond.value = date.getSeconds().toString().padStart(2, '0') |
|||
// } |
|||
// } else { |
|||
// selectedDate.value = null |
|||
// } |
|||
isDropdownVisible.value = false |
|||
} |
|||
|
|||
// 切换下拉框显示 |
|||
const toggleDropdown = (event?: MouseEvent) => { |
|||
if (event) { |
|||
event.stopPropagation() |
|||
} |
|||
isDropdownVisible.value = !isDropdownVisible.value |
|||
} |
|||
|
|||
// 工具函数 |
|||
const isSameDay = (date1: Date, date2: Date | null) => { |
|||
if (!date2) { |
|||
return false |
|||
} |
|||
return ( |
|||
date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate() |
|||
) |
|||
} |
|||
|
|||
const isDateInRange = (date: Date) => { |
|||
const min = props.minDate ? new Date(props.minDate) : null |
|||
const max = props.maxDate ? new Date(props.maxDate) : null |
|||
|
|||
if (min && date < min) { |
|||
return false |
|||
} |
|||
if (max && date > max) { |
|||
return false |
|||
} |
|||
return true |
|||
} |
|||
|
|||
// 点击外部关闭下拉框 |
|||
const closeDropdownOnClickOutside = (event: MouseEvent) => { |
|||
if (!isDropdownVisible.value) { |
|||
return |
|||
} |
|||
|
|||
const target = event.target as HTMLElement |
|||
const container = document.querySelector('.date-time-picker') |
|||
|
|||
if (container && !container.contains(target)) { |
|||
isDropdownVisible.value = false |
|||
} |
|||
} |
|||
|
|||
// 添加和移除事件监听 |
|||
onMounted(() => { |
|||
document.addEventListener('click', closeDropdownOnClickOutside) |
|||
}) |
|||
|
|||
onUnmounted(() => { |
|||
document.removeEventListener('click', closeDropdownOnClickOutside) |
|||
}) |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="date-time-picker"> |
|||
<div class="input-group"> |
|||
<input |
|||
type="text" |
|||
v-model="dateText" |
|||
@click="toggleDropdown" |
|||
readonly |
|||
placeholder="请选择日期时间" |
|||
class="form-input" |
|||
> |
|||
<span class="input-icon" @click="toggleDropdown"> |
|||
<i class="fa fa-calendar"></i> |
|||
</span> |
|||
</div> |
|||
<transition name="fade"> |
|||
<div v-show="isDropdownVisible" class="dropdown-container"> |
|||
<div class="calendar-header"> |
|||
<button @click="prevYear" class="nav-btn"> |
|||
<el-icon><DArrowLeft /></el-icon> |
|||
</button> |
|||
<button @click="prevMonth" class="nav-btn"> |
|||
<el-icon><ArrowLeft /></el-icon> |
|||
</button> |
|||
<span class="current-date"> |
|||
{{ currentYear }}年 {{ currentMonth + 1 }}月 |
|||
</span> |
|||
<button @click="nextMonth" class="nav-btn"> |
|||
<el-icon><ArrowRight /></el-icon> |
|||
</button> |
|||
<button @click="nextYear" class="nav-btn"> |
|||
<el-icon><DArrowRight /></el-icon> |
|||
</button> |
|||
</div> |
|||
<div class="weekdays"> |
|||
<div v-for="day in weekdays" :key="day" class="weekday"> |
|||
{{ day }} |
|||
</div> |
|||
</div> |
|||
<div class="days"> |
|||
<div |
|||
v-for="(day, index) in daysInMonth" |
|||
:key="index" |
|||
class="day" |
|||
:class="{ |
|||
'other-month': day.month !== currentMonth, |
|||
'selected': isSameDay(day.date, selectedDate), |
|||
'today': isSameDay(day.date, today), |
|||
'disabled': !isDateInRange(day.date), |
|||
}" |
|||
@click="selectDate(day.date)" |
|||
> |
|||
{{ day.date.getDate() }} |
|||
</div> |
|||
</div> |
|||
<div class="time-selector"> |
|||
<div class="time-label">时间:</div> |
|||
<el-select v-model="selectedHour" @change="updateTime" class="time-select" > |
|||
<el-option v-for="i in hoursOptions" :key="i" :value="i.toString().padStart(2, '0')" style="font-size: 20px;line-height: 2px;height: 5rem;display: flex; align-items: center;"> |
|||
{{ i.toString().padStart(2, '0') }} |
|||
</el-option> |
|||
</el-select> |
|||
<span class="time-separator">:</span> |
|||
<el-select v-model="selectedMinute" @change="updateTime" class="time-select"> |
|||
<el-option v-for="i in 60" :key="i" :value="i.toString().padStart(2, '0')" style="font-size: 20px;line-height: 2px;height: 5rem;display: flex; align-items: center;"> |
|||
{{ i.toString().padStart(2, '0') }} |
|||
</el-option> |
|||
</el-select> |
|||
<span class="time-separator">:</span> |
|||
<el-select v-model="selectedSecond" @change="updateTime" class="time-select"> |
|||
<el-option v-for="i in 60" :key="i" :value="i.toString().padStart(2, '0')" style="font-size: 20px;line-height: 2px;height: 5rem;display: flex; align-items: center;"> |
|||
{{ i.toString().padStart(2, '0') }} |
|||
</el-option> |
|||
</el-select> |
|||
</div> |
|||
<div class="calendar-footer"> |
|||
<button @click="confirmSelection" class="confirm-btn">确定</button> |
|||
<button @click="cancelSelection" class="cancel-btn">取消</button> |
|||
</div> |
|||
</div> |
|||
</transition> |
|||
</div> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
$fontSize: 1.5rem; |
|||
:deep(body) { |
|||
--el-font-size-base: 20px; |
|||
} |
|||
.date-time-picker { |
|||
position: relative; |
|||
width: 340px; |
|||
} |
|||
|
|||
.input-group { |
|||
display: flex; |
|||
position: relative; |
|||
} |
|||
|
|||
.form-input { |
|||
flex: 1; |
|||
padding: 10px 14px; |
|||
border: 1px solid #e2e8f0; |
|||
border-radius: 4px; |
|||
font-size: $fontSize; |
|||
outline: none; |
|||
transition: border-color 0.2s; |
|||
} |
|||
|
|||
.form-input:focus { |
|||
border-color: #4f46e5; |
|||
} |
|||
|
|||
.input-icon { |
|||
position: absolute; |
|||
right: 12px; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
color: #94a3b8; |
|||
cursor: pointer; |
|||
font-size: $fontSize; |
|||
} |
|||
|
|||
.dropdown-container { |
|||
position: absolute; |
|||
top: calc(100% + 4px); |
|||
right: 0; |
|||
width: 28rem; |
|||
background-color: white; |
|||
border: 1px solid #e2e8f0; |
|||
border-radius: 4px; |
|||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|||
z-index: 100; |
|||
padding: 12px; |
|||
} |
|||
|
|||
.calendar-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.nav-btn { |
|||
background: none; |
|||
border: none; |
|||
cursor: pointer; |
|||
color: #64748b; |
|||
font-size: $fontSize; |
|||
padding: 6px; |
|||
border-radius: 4px; |
|||
transition: background-color 0.2s; |
|||
} |
|||
|
|||
.nav-btn:hover { |
|||
background-color: #f1f5f9; |
|||
} |
|||
|
|||
.current-date { |
|||
font-weight: 500; |
|||
color: #334155; |
|||
font-size: $fontSize; |
|||
} |
|||
|
|||
.weekdays { |
|||
display: grid; |
|||
grid-template-columns: repeat(7, 1fr); |
|||
margin-bottom: 6px; |
|||
} |
|||
|
|||
.weekday { |
|||
text-align: center; |
|||
font-size: $fontSize; |
|||
color: #64748b; |
|||
padding: 6px; |
|||
} |
|||
|
|||
.days { |
|||
display: grid; |
|||
grid-template-columns: repeat(7, 1fr); |
|||
gap: 3px; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.day { |
|||
text-align: center; |
|||
padding: 8px; |
|||
border-radius: 4px; |
|||
font-size: $fontSize; |
|||
cursor: pointer; |
|||
transition: background-color 0.2s; |
|||
} |
|||
|
|||
.day:hover:not(.disabled) { |
|||
background-color: #e0f2fe; |
|||
} |
|||
|
|||
.day.other-month { |
|||
color: #94a3b8; |
|||
} |
|||
|
|||
.day.selected { |
|||
background-color: #3b82f6; |
|||
color: white; |
|||
} |
|||
|
|||
.day.today:not(.selected) { |
|||
font-weight: 500; |
|||
color: #3b82f6; |
|||
} |
|||
|
|||
.day.disabled { |
|||
color: #cbd5e1; |
|||
cursor: not-allowed; |
|||
} |
|||
|
|||
.time-selector { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 12px; |
|||
.time-select { |
|||
padding: 4px 8px; |
|||
border-radius: 4px; |
|||
font-size: 20px; |
|||
outline: none; |
|||
background-color: white; |
|||
margin-right: 4px; |
|||
/* 最大高度限制，溢出滚动 */ |
|||
max-height: 3rem; |
|||
width: 6rem; |
|||
border: none; |
|||
} |
|||
} |
|||
|
|||
select option { |
|||
max-height: 3rem; |
|||
border: 1px solid red; |
|||
} |
|||
|
|||
.time-label { |
|||
margin-right: 12px; |
|||
font-size: $fontSize; |
|||
color: #334155; |
|||
} |
|||
|
|||
.select-option{ |
|||
max-height: 3rem; |
|||
} |
|||
|
|||
select { |
|||
padding: 6px 10px; |
|||
border: 1px solid #e2e8f0; |
|||
border-radius: 4px; |
|||
font-size: $fontSize; |
|||
outline: none; |
|||
background-color: white; |
|||
margin-right: 6px; |
|||
width: 60px; |
|||
} |
|||
|
|||
.time-separator { |
|||
margin: 0 3px; |
|||
font-size: $fontSize; |
|||
color: #334155; |
|||
} |
|||
|
|||
.calendar-footer { |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
gap: 10px; |
|||
} |
|||
|
|||
.confirm-btn, .cancel-btn { |
|||
padding: 8px 16px; |
|||
border: none; |
|||
border-radius: 4px; |
|||
font-size: $fontSize; |
|||
cursor: pointer; |
|||
transition: background-color 0.2s; |
|||
} |
|||
|
|||
.confirm-btn { |
|||
background-color: #3b82f6; |
|||
color: white; |
|||
} |
|||
|
|||
.confirm-btn:hover { |
|||
background-color: #2563eb; |
|||
} |
|||
|
|||
.cancel-btn { |
|||
background-color: #f1f5f9; |
|||
color: #334155; |
|||
} |
|||
|
|||
.cancel-btn:hover { |
|||
background-color: #e2e8f0; |
|||
} |
|||
|
|||
.fade-enter-active, .fade-leave-active { |
|||
transition: opacity 0.2s; |
|||
} |
|||
|
|||
.fade-enter-from, .fade-leave-to { |
|||
opacity: 0; |
|||
} |
|||
// 修改选择框本身的宽高 |
|||
:deep(.el-select__wrapper){ |
|||
height: 3rem; |
|||
font-size: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,150 @@ |
|||
<script lang="ts" setup> |
|||
import type { Ref } from 'vue' |
|||
import { onMounted, ref } from 'vue' |
|||
|
|||
// 定义组件状态 |
|||
const inputValue = ref('')// 输入框内容 |
|||
const keyboardRef = ref() as Ref<HTMLDivElement> // 软键盘容器 DOM |
|||
|
|||
// 拖动相关状态 |
|||
const isDragging = ref(false)// 是否正在拖动 |
|||
const startX = ref(0)// 触摸起始 X |
|||
const startY = ref(0)// 触摸起始 Y |
|||
const x = ref(0)// 容器偏移 X |
|||
const y = ref(0)// 容器偏移 Y |
|||
|
|||
// 数字键盘按键配置 |
|||
const keyboardKeys = ref(['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '删除']) |
|||
|
|||
// 触摸开始：记录初始位置 |
|||
const handleTouchStart = (e: TouchEvent) => { |
|||
isDragging.value = true |
|||
const touch = e.touches[0] |
|||
startX.value = touch.clientX - x.value |
|||
startY.value = touch.clientY - y.value |
|||
} |
|||
|
|||
// 触摸移动：计算偏移量 |
|||
const handleTouchMove = (e: TouchEvent) => { |
|||
if (isDragging.value) { |
|||
const touch = e.touches[0] |
|||
x.value = touch.clientX - startX.value |
|||
y.value = touch.clientY - startY.value |
|||
} |
|||
} |
|||
|
|||
// 触摸结束：停止拖动 |
|||
const handleTouchEnd = () => { |
|||
isDragging.value = false |
|||
} |
|||
|
|||
// 按键点击事件 |
|||
const handleKeyClick = (key: string) => { |
|||
if (key === '删除') { |
|||
// 删除逻辑：移除最后一位 |
|||
inputValue.value = inputValue.value.slice(0, -1) |
|||
} |
|||
else { |
|||
// 数字/小数点输入逻辑 |
|||
inputValue.value += key |
|||
} |
|||
} |
|||
|
|||
// 初始化：让软键盘居中（可选） |
|||
onMounted(() => { |
|||
const { width, height } = keyboardRef.value.getBoundingClientRect() |
|||
x.value = (document.documentElement.clientWidth - width) / 2 |
|||
y.value = (document.documentElement.clientHeight - height) / 2 |
|||
}) |
|||
</script> |
|||
|
|||
<template> |
|||
<!-- 软键盘容器：支持拖动、点击穿透（若需） --> |
|||
<div |
|||
ref="keyboardRef" |
|||
class="keyboard-container" |
|||
@touchstart="handleTouchStart" |
|||
@touchmove="handleTouchMove" |
|||
@touchend="handleTouchEnd" |
|||
:style="{ |
|||
transform: `translate(${x}px, ${y}px)`, |
|||
transition: isDragging ? 'none' : 'transform 0.3s ease', |
|||
}" |
|||
> |
|||
<!-- 输入显示框 --> |
|||
<div class="input-box"> |
|||
<input |
|||
v-model="inputValue" |
|||
type="text" |
|||
placeholder="点击输入" |
|||
class="input-field" |
|||
@click.stop |
|||
/> |
|||
</div> |
|||
|
|||
<!-- 数字按键区域 --> |
|||
<div class="keys"> |
|||
<div |
|||
v-for="(key, index) in keyboardKeys" |
|||
:key="index" |
|||
class="key" |
|||
@click="handleKeyClick(key)" |
|||
> |
|||
{{ key }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
.keyboard-container { |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
max-width: 500px; /* 限制最大宽度 */ |
|||
background: #fff; |
|||
border-radius: 16px 16px 0 0; |
|||
box-shadow: 0 -4px 12px rgba(0,0,0,0.1); |
|||
overflow: hidden; |
|||
z-index: 9999; |
|||
/* 让拖动更顺滑 */ |
|||
will-change: transform; |
|||
touch-action: none; /* 禁止浏览器默认触摸行为（如滚动） */ |
|||
} |
|||
|
|||
.input-box { |
|||
padding: 16px; |
|||
background: #f5f5f5; |
|||
} |
|||
|
|||
.input-field { |
|||
width: 100%; |
|||
padding: 12px; |
|||
text-align: right; |
|||
font-size: 18px; |
|||
border: 1px solid #ddd; |
|||
border-radius: 8px; |
|||
background: #fff; |
|||
} |
|||
|
|||
.keys { |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 1fr); |
|||
} |
|||
|
|||
.key { |
|||
height: 60px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 20px; |
|||
border: 1px solid #eee; |
|||
background: #fff; |
|||
touch-action: manipulation; /* 加速点击响应 */ |
|||
} |
|||
|
|||
.key:active { |
|||
background: #f8f8f8; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,15 @@ |
|||
// src/lang/en.ts
|
|||
export default { |
|||
message: { |
|||
welcome: 'Welcome to Vue 3 + TypeScript Internationalization Demo', |
|||
switch: 'Switch Language', |
|||
greeting: 'Hello!', |
|||
content: 'This is a demonstration of implementing internationalization in Vue3 + TypeScript.', |
|||
features: 'Features', |
|||
feature1: 'Language switching between Chinese and English', |
|||
feature2: 'Automatically save user language preferences', |
|||
feature3: 'Supports dynamic language switching without page refresh', |
|||
footer: '© 2025 Vue3 Internationalization Demo', |
|||
disinfectant: 'Disinfectant', |
|||
}, |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
// src/lang/index.ts
|
|||
import en from './en' |
|||
import zh from './zh' |
|||
|
|||
// 定义语言类型
|
|||
export type LocaleType = 'zh' | 'en' |
|||
|
|||
// 定义语言包类型
|
|||
export type MessageSchema = typeof en |
|||
|
|||
// 导出语言包
|
|||
export const messages = { |
|||
en, |
|||
zh, |
|||
} |
|||
|
|||
// 导出默认语言
|
|||
export const defaultLocale: LocaleType = 'zh' |
|||
@ -0,0 +1,15 @@ |
|||
// src/lang/zh.ts
|
|||
export default { |
|||
message: { |
|||
welcome: '欢迎来到 Vue 3 + TypeScript 国际化演示', |
|||
switch: '切换语言', |
|||
greeting: '你好！', |
|||
content: '这是一个在 Vue3 + TypeScript 中实现国际化的演示。', |
|||
features: '功能特点', |
|||
feature1: '中英文语言切换', |
|||
feature2: '自动保存用户语言偏好', |
|||
feature3: '支持动态切换语言无需刷新页面', |
|||
footer: '© 2025 Vue3 国际化演示', |
|||
disinfectant: '消毒液', |
|||
}, |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue