feat: 添加订单大厅看板 UI(四列看板 + 声音提醒 + 桌面通知)
All checks were successful
Build and Deploy TenantUI / build-and-deploy (push) Successful in 56s

This commit is contained in:
2026-02-27 13:18:54 +08:00
parent 42bf54a52c
commit 23e696719b
21 changed files with 1298 additions and 0 deletions

View File

@@ -0,0 +1,75 @@
<!-- 文件职责订单大厅工具栏门店选择 + 渠道筛选 + 声音开关 + 连接状态 -->
<script setup lang="ts">
import type { BoardChannelFilter } from '../types';
import { CHANNEL_OPTIONS } from '../composables/order-board-page/constants';
const {
channel = 'all',
isConnected = false,
isSoundEnabled = true,
storeId = '',
} = defineProps<{
channel: BoardChannelFilter;
isConnected: boolean;
isSoundEnabled: boolean;
storeId: string;
}>();
const emit = defineEmits<{
'update:channel': [value: BoardChannelFilter];
'update:isSoundEnabled': [value: boolean];
'update:storeId': [value: string];
}>();
</script>
<template>
<div class="ob-toolbar">
<!-- 1. 门店 ID 输入 -->
<div class="ob-toolbar__store">
<span class="ob-toolbar__label">门店ID:</span>
<a-input
:value="storeId"
placeholder="输入门店 ID"
style="width: 200px"
@change="(e: any) => emit('update:storeId', e.target.value)"
/>
</div>
<!-- 2. 渠道筛选 -->
<div class="ob-toolbar__channel">
<a-radio-group
:value="channel"
button-style="solid"
size="small"
@change="(e: any) => emit('update:channel', e.target.value)"
>
<a-radio-button
v-for="opt in CHANNEL_OPTIONS"
:key="opt.value"
:value="opt.value"
>
{{ opt.label }}
</a-radio-button>
</a-radio-group>
</div>
<!-- 3. 声音开关 + 连接状态 -->
<div class="ob-toolbar__right">
<a-switch
:checked="isSoundEnabled"
checked-children="声音开"
un-checked-children="声音关"
@change="(val: boolean) => emit('update:isSoundEnabled', val)"
/>
<span
class="ob-toolbar__status"
:class="[
isConnected ? 'ob-toolbar__status--on' : 'ob-toolbar__status--off',
]"
>
{{ isConnected ? '已连接' : '未连接' }}
</span>
</div>
</div>
</template>