timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update QuickSignInPage.vue style

Browse Source
This commit is contained in:
Timi
2026-08-30 00:54:52 +08:00
parent 4487de9ec2
commit 320dab542a
7 changed files with 350 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/global.less → src/assets/styles/global.less
+4
View File
@@ -45,6 +45,10 @@ html.theme-dark body {
margin: 0 1rem;
}
.content-margin {
margin: 0 1rem;
}
.t-input--password {
letter-spacing: 0;
}
src/styles/tdesign-custom.css → src/assets/styles/tdesign-custom.css
View File
src/components/EventSelector.vue
+20 -11
View File
@@ -7,12 +7,12 @@
:key="item.id || item.name"
type="button"
class="item bg-white"
:class="{selected: isSelected(item.id)}"
:class="{selected: isSelected(item)}"
:title="item.name"
:disabled="props.disabled || !item.id"
:aria-pressed="isSelected(item.id)"
:disabled="props.disabled || !normalizeEventId(item)"
:aria-pressed="isSelected(item)"
v-entrance-transition="index * 30"
@click="toggleEvent(item.id)"
@click="toggleEvent(item)"
>
<span
class="swatch"
@@ -20,7 +20,7 @@
aria-hidden="true"
/>
<span class="clip-text" v-text="item.name" />
<span v-if="isSelected(item.id)" class="mark" aria-hidden="true" />
<span v-if="isSelected(item)" class="mark" aria-hidden="true" />
</button>
</div>
<div v-else class="empty-block">暂无可用登记事件</div>
@@ -46,20 +46,29 @@ const props = withDefaults(defineProps<Props>(), {
const modelValue = defineModel<string[]>({ required: true });
const defaultColor = "#2f88ff";
const isSelected = (eventId?: string) => Boolean(eventId && modelValue.value.includes(eventId));
function normalizeEventId(item: EventItem): string {
if (item.id === undefined || item.id === null) {
return "";
}
return String(item.id);
}
const toggleEvent = (eventId?: string) => {
function isSelected(item: EventItem): boolean {
const eventId = normalizeEventId(item);
return Boolean(eventId && modelValue.value.includes(eventId));
}
function toggleEvent(item: EventItem): void {
const eventId = normalizeEventId(item);
if (props.disabled || !eventId) {
return;
}
if (isSelected(eventId)) {
if (modelValue.value.includes(eventId)) {
modelValue.value = modelValue.value.filter(id => id !== eventId);
return;
}
modelValue.value = [...modelValue.value, eventId];
};
}
</script>
<style scoped lang="less">
src/main.ts
+2 -2
View File
@@ -8,8 +8,8 @@ import "tdesign-mobile-vue/es/style/index.css";
import "timi-web/style.css";
import "timi-tdesign-mobile/style.css";
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import "@/styles/tdesign-custom.css";
import "@/styles/global.less";
import "@/assets/styles/tdesign-custom.css";
import "@/assets/styles/global.less";
import TimiWebUI from "timi-web";
import { configureUserStore, Network, useUserStore, VCan, VRole } from "timi-web-api";
import type { ApiResponse } from "timi-web-api";
src/pages/home/QuickSignInPage.vue
+212 -182
View File
@@ -1,10 +1,20 @@
<template>
<div v-can="permissionCodes.eventRecord.create" class="quick-sign-in-page">
<button class="registration-event-select" type="button" @click="eventSelectorVisible = true">
<span class="required-label">登记事件</span>
<strong v-text="selectedEventName" />
<t-icon name="chevron-right" />
</button>
<space class="content-margin" direction="vertical" v-entrance-transition>
<div class="event-panel">
<event-selector
v-if="!isEventLoading && !eventLoadFailed"
:model-value="selectedEventIdList"
:event-list="eventList"
required-mark
@update:model-value="handleEventSelectionChange"
/>
<div v-else-if="isEventLoading" class="empty-block">正在加载登记事件</div>
<div v-else class="event-load-error">
<span>登记事件加载失败</span>
<t-button size="small" theme="primary" variant="text" @click="loadActions">重试</t-button>
</div>
</div>
<code-scanner
visible
:session-key="scannerSessionKey"
@@ -13,22 +23,51 @@
@decode="handleDecodedText"
@status-change="handleScanStatusChange"
/>
</space>
<t-button
class="cell-button"
theme="primary"
:disabled="!canSubmitRegister"
:loading="submitting"
v-entrance-transition="70"
@click="doSubmit"
>登记</t-button>
<customer-profile-card
v-if="matchedCustomer"
class="content-margin"
:customer="matchedCustomer"
/>
<div v-if="showNumberValueInput" class="number-value-panel">
<div class="number-value-title" v-text="`${selectedEvent?.name || '事件'}数值`" />
<t-form
v-if="selectedNumberEventList.length"
class="input-form"
label-align="left"
label-width="8rem"
>
<t-form-item
v-for="item in selectedNumberEventList"
:key="item.id"
:label="`${item.name || '未命名事件'}数值`"
:required-mark="item.requireValue === true"
>
<t-input
v-model.trim="numberValueText"
v-model.trim="numberValueTextMap[item.id || '']"
type="number"
align="right"
borderless
:placeholder="numberValuePlaceholder"
:placeholder="getNumberValuePlaceholder(item)"
/>
</div>
<div v-if="showSourceValueInput" class="source-value-panel">
<div class="source-value-title" v-text="sourceValueAction === 'CONSUME' ? '消耗积分' : '发放积分'" />
</t-form-item>
</t-form>
<t-form
v-if="showSourceValueInput"
class="input-form"
label-align="left"
label-width="6rem"
>
<t-form-item label="积分动作" content-align="right">
<span class="form-text" v-text="sourceValueAction === 'CONSUME' ? '消耗积分' : '发放积分'" />
</t-form-item>
<t-form-item label="积分数量" required-mark>
<t-input
v-model.trim="pointValueText"
type="number"
@@ -36,7 +75,8 @@
borderless
:placeholder="sourceValuePlaceholder"
/>
</div>
</t-form-item>
</t-form>
<t-cell-group
v-if="recentRecordList.length"
title="最近登记记录"
@@ -63,29 +103,7 @@
</template>
</t-cell>
</t-cell-group>
<t-button
class="submit"
theme="primary"
:disabled="!canSubmitRegister"
:loading="submitting"
@click="doSubmit"
>登记</t-button>
</div>
<t-popup v-model="eventSelectorVisible" placement="bottom">
<div class="registration-event-panel">
<div class="title">登记事件</div>
<t-cell-group v-if="eventList.length" theme="card">
<t-cell
v-for="item in eventList"
:key="item.id"
:title="item.name"
:note="item.id === selectedEventId ? '当前使用' : ''"
@click="selectEvent(item.id)"
/>
</t-cell-group>
<div v-else class="empty-block">暂无可用登记事件</div>
</div>
</t-popup>
</template>
<script setup lang="ts">
@@ -106,6 +124,8 @@ import { getEventRecordPhotoURL } from "@/utils/eventRecord";
import { Storage, Time } from "timi-web";
import { useUserStore } from "timi-web-api";
import { loadSourceValueConfig, type SourceValueConfig } from "@/utils/point";
import EventSelector from "@/components/EventSelector.vue";
import { Space } from "timi-tdesign-mobile";
defineOptions({
name: "QuickSignInPage"
@@ -118,33 +138,74 @@ const settingStore = useSettingStore();
// ---------- 登记事件 ----------
const EventItemStorageKey = "quick-scan-event-id";
const eventSelectorVisible = ref(false);
const selectedEventId = ref("");
const selectedEventIdList = ref<string[]>([]);
const eventList = ref<EventItem[]>([]);
const selectedEvent = computed(() => eventList.value.find(item => item.id === selectedEventId.value));
const selectedEventName = computed(() => eventList.value.find(item => item.id === selectedEventId.value)?.name || "请选择登记事件");
const isEventLoading = ref(false);
const eventLoadFailed = ref(false);
const selectedEventList = computed(() => selectedEventIdList.value
.map(eventId => eventList.value.find(item => normalizeEventId(item) === eventId))
.filter((item): item is EventItem => !!item));
const selectedNumberEventList = computed(() => selectedEventList.value.filter(item => item.valueType === "NUMBER"));
let sourceValueRequestNo = 0;
function normalizeEventId(item?: EventItem): string {
if (!item || item.id === undefined || item.id === null) {
return "";
}
return String(item.id);
}
async function loadActions(): Promise<void> {
if (isEventLoading.value) {
return;
}
isEventLoading.value = true;
eventLoadFailed.value = false;
try {
eventList.value = await EventAPI.listValid();
const storedEventId = Storage.getString(EventItemStorageKey);
const storedAction = eventList.value.find(item => item.id === storedEventId);
selectedEventId.value = storedAction?.id || eventList.value[0]?.id || "";
if (selectedEventId.value) {
Storage.setString(EventItemStorageKey, selectedEventId);
selectedEventIdList.value = buildInitialSelectedEventIdList();
syncStoredEventId();
} catch (error) {
console.warn("登记事件加载失败", error);
eventLoadFailed.value = true;
eventList.value = [];
selectedEventIdList.value = [];
sourceValueConfig.value = undefined;
Message.error("登记事件加载失败");
} finally {
isEventLoading.value = false;
}
await loadSourceValueRule();
}
async function selectEvent(eventId?: string): Promise<void> {
if (!eventId) {
return;
function buildInitialSelectedEventIdList(): string[] {
const selectedIdList = normalizeSelectedEventIdList(selectedEventIdList.value);
if (selectedIdList.length) {
return selectedIdList;
}
selectedEventId.value = eventId;
numberValueText.value = "";
Storage.setString(EventItemStorageKey, selectedEventId);
eventSelectorVisible.value = false;
const storedEventId = Storage.getString(EventItemStorageKey);
const storedAction = eventList.value.find(item => normalizeEventId(item) === storedEventId);
const defaultEventId = normalizeEventId(storedAction || eventList.value[0]);
return defaultEventId ? [defaultEventId] : [];
}
function normalizeSelectedEventIdList(eventIdList: string[]): string[] {
const validEventIdSet = new Set(eventList.value.map(normalizeEventId).filter(Boolean));
return [...new Set(eventIdList.map(String))].filter(eventId => validEventIdSet.has(eventId));
}
async function handleEventSelectionChange(eventIdList: string[]): Promise<void> {
selectedEventIdList.value = normalizeSelectedEventIdList(eventIdList);
syncStoredEventId();
await loadSourceValueRule();
Message.success("登记事件已切换");
}
function syncStoredEventId(): void {
const firstEventId = selectedEventIdList.value[0];
if (firstEventId) {
Storage.setString(EventItemStorageKey, firstEventId);
}
}
onMounted(loadActions);
@@ -207,12 +268,10 @@ async function toRecordDetail(id: string): Promise<void> {
const submitting = ref(false);
const pointValueText = ref("");
const numberValueText = ref("");
const numberValueTextMap = reactive<Record<string, string>>({});
const sourceValueConfig = ref<SourceValueConfig>();
const sourceValueAction = ref<PointAction>("EARN");
const canSubmitRegister = computed(() => !!matchedCustomer.value && !!selectedEventId.value);
const showNumberValueInput = computed(() => selectedEvent.value?.valueType === "NUMBER");
const numberValuePlaceholder = computed(() => selectedEvent.value ? getEventNumberValuePlaceholder(selectedEvent.value) : "请输入事件数值");
const canSubmitRegister = computed(() => !!matchedCustomer.value && !!selectedEventIdList.value.length);
const showSourceValueInput = computed(() => (
userStore.hasPermissions(permissionCodes.point.sourceValue)
&& !!sourceValueConfig.value
@@ -223,14 +282,22 @@ const sourceValuePlaceholder = computed(() => {
});
async function loadSourceValueRule(): Promise<void> {
if (!selectedEventId.value || !userStore.hasPermissions(permissionCodes.point.sourceValue)) {
const requestNo = ++sourceValueRequestNo;
if (!selectedEventIdList.value.length || !userStore.hasPermissions(permissionCodes.point.sourceValue)) {
sourceValueConfig.value = undefined;
return;
}
try {
sourceValueConfig.value = await loadSourceValueConfig([selectedEventId.value]);
const config = await loadSourceValueConfig(selectedEventIdList.value);
if (requestNo !== sourceValueRequestNo) {
return;
}
sourceValueConfig.value = config;
sourceValueAction.value = sourceValueConfig.value?.action || "EARN";
} catch {
if (requestNo !== sourceValueRequestNo) {
return;
}
sourceValueConfig.value = undefined;
}
}
@@ -240,8 +307,44 @@ function resolveSourceValue(): number | undefined {
return Number.isSafeInteger(value) && 0 < value ? sourceValueAction.value === "CONSUME" ? -value : value : undefined;
}
function resolveNumberValue(): number | undefined {
return selectedEvent.value ? resolveEventNumberValue(selectedEvent.value, numberValueText.value) : undefined;
function getNumberValuePlaceholder(event: EventItem): string {
return getEventNumberValuePlaceholder(event);
}
function resolveNumberValue(eventId: string): number | undefined {
const valueText = numberValueTextMap[eventId] || "";
if (!valueText.trim()) {
return undefined;
}
const event = eventList.value.find(item => normalizeEventId(item) === eventId);
return event ? resolveEventNumberValue(event, valueText) : undefined;
}
function validateNumberValueList(): boolean {
for (const eventId of selectedEventIdList.value) {
const event = eventList.value.find(item => item.id === eventId);
if (!event) {
continue;
}
const valueText = numberValueTextMap[eventId] || "";
if (event.valueType !== "NUMBER") {
if (valueText.trim()) {
Message.warning(`${event.name || "当前事件"}不能提交数值`);
return false;
}
continue;
}
const numberValue = resolveNumberValue(eventId);
if (valueText.trim() && numberValue === undefined) {
Message.warning(`${event.name || "当前事件"}数值格式不正确，请检查单位和小数位`);
return false;
}
if (event.requireValue && numberValue === undefined) {
Message.warning(`请填写${event.name || "当前事件"}数值`);
return false;
}
}
return true;
}
async function doSubmit(): Promise<void> {
@@ -249,16 +352,14 @@ async function doSubmit(): Promise<void> {
if (!customer) {
return;
}
if (!selectedEventIdList.value.length) {
Message.warning("请至少选择一个登记事件");
return;
}
if (!validateNumberValueList()) {
return;
}
const pointValue = resolveSourceValue();
const numberValue = resolveNumberValue();
if (showNumberValueInput.value && numberValueText.value.trim() && numberValue === undefined) {
Message.warning("事件数值格式不正确，请检查单位和小数位");
return;
}
if (selectedEvent.value?.requireValue && numberValue === undefined) {
Message.warning("请填写事件数值");
return;
}
const range = sourceValueConfig.value?.range;
if (showSourceValueInput.value && (!pointValue || !range || Math.abs(pointValue) < range[0] || range[1] < Math.abs(pointValue))) {
Message.warning(`积分数量必须是 ${range?.[0] || 1}-${range?.[1] || 0} 的正整数`);
@@ -266,18 +367,22 @@ async function doSubmit(): Promise<void> {
}
submitting.value = true;
try {
for (const eventId of selectedEventIdList.value) {
await EventRecordAPI.create({
eventId,
customerId: customer.id,
eventId: selectedEventId.value,
pointValue: showSourceValueInput.value ? pointValue : undefined,
numberValue,
numberValue: resolveNumberValue(eventId),
remark: "客户快速扫码登记"
});
}
scanStatus.value = `登记成功：${customer.name || customer.code || scanCode.value}。`;
scanCode.value = "";
matchedCustomer.value = undefined;
pointValueText.value = "";
numberValueText.value = "";
for (const eventId of Object.keys(numberValueTextMap)) {
delete numberValueTextMap[eventId];
}
recentRecordList.value = [];
latestDecodedText = "";
scannerSessionKey.value += 1;
@@ -286,74 +391,54 @@ async function doSubmit(): Promise<void> {
submitting.value = false;
}
}
</script>
<style scoped lang="less">
.quick-sign-in-page {
gap: 1rem;
padding: calc(var(--app-nav-height) + 1rem) 1rem 6rem 1rem;
padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
display: flex;
flex-direction: column;
.panel,
.bottom-bar {
left: 1rem;
right: 1rem;
}
.panel {
padding: 1rem;
background: rgba(255, 255, 255, .94);
border-radius: 1.4rem;
box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .08);
}
.registration-event-select {
gap: .5rem;
border: 0;
padding: .875rem 1rem;
display: grid;
min-width: 0;
text-align: left;
background: rgba(255, 255, 255, .94);
box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .08);
align-items: center;
border-radius: .875rem;
grid-template-columns: auto minmax(0, 1fr) auto;
span {
color: #52607a;
font-size: .8125rem;
}
strong {
color: #0f172a;
overflow: hidden;
font-size: 1rem;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.number-value-panel,
.source-value-panel {
.event-panel {
padding: .75rem 1rem;
background: rgba(255, 255, 255, .94);
box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .08);
border-radius: .875rem;
.number-value-title,
.source-value-title {
font-weight: 700;
}
.t-input {
margin-top: .5rem;
border: 1px solid var(--td-component-border);
border-radius: .75rem;
.input-form {
padding: .5rem 0;
background: rgba(255, 255, 255, .94);
box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .08);
border-radius: .875rem;
.form-text {
color: #0f172a;
display: block;
text-align: right;
}
}
.empty-block,
.event-load-error {
color: #52607a;
min-height: 4rem;
align-items: center;
justify-content: center;
}
.empty-block {
display: flex;
}
.event-load-error {
gap: .5rem;
display: grid;
text-align: center;
}
.code-box {
padding: .875rem;
background: #f7faff;
@@ -384,13 +469,6 @@ async function doSubmit(): Promise<void> {
}
}
.submit {
left: 1rem;
right: 1rem;
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
position: fixed;
}
.record-photo {
width: 3.5rem;
height: 3.5rem;
@@ -398,55 +476,19 @@ async function doSubmit(): Promise<void> {
}
}
.registration-event-panel {
gap: .875rem;
padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0)) 0;
display: flex;
background: #f5f5f8;
border-radius: 1rem 1rem 0 0;
flex-direction: column;
.title {
margin: 0;
color: #0f172a;
font-size: 1rem;
text-align: center;
font-weight: 700;
}
.empty-block {
color: #52607a;
padding: 1rem;
text-align: center;
}
}
:global(html.theme-dark) {
.quick-sign-in-page {
.panel,
.bottom-bar {
.bottom-bar,
.event-panel,
.input-form {
background: rgba(15, 23, 42, .88);
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
}
.registration-event-select {
background: rgba(15, 23, 42, .88);
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
span {
color: #94a3b8;
}
strong {
.input-form .form-text {
color: #e2e8f0;
}
}
.number-value-panel,
.source-value-panel {
background: rgba(15, 23, 42, .88);
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
}
.code-box {
background: rgba(30, 41, 59, .9);
@@ -457,17 +499,5 @@ async function doSubmit(): Promise<void> {
color: #94a3b8;
}
}
.registration-event-panel {
background: #10161f;
.title {
color: #e2e8f0;
}
.empty-block {
color: #94a3b8;
}
}
}
</style>
src/utils/eventValue.ts
+2 -2
View File
@@ -19,9 +19,9 @@ export function getEventValueUnitText(valueUnit?: EventItem["valueUnit"]): strin
*/
export function getEventNumberValuePlaceholder(event: EventItem): string {
if (event.valueUnit === "CENT") {
return event.requireValue ? "请输入金额（元），最多两位小数" : "请输入金额（元），可留空，最多两位小数";
return event.requireValue ? "金额（元），最多两位小数" : "金额（元），可留空，最多两位小数";
}
return event.requireValue ? "请输入次数，必须是大于等于 0 的整数" : "请输入次数，可留空，必须是大于等于 0 的整数";
return event.requireValue ? "次数，必须是大于等于 0 的整数" : "次数，可留空，必须是大于等于 0 的整数";
}
/**
src/utils/point.ts
+83 -21
View File
@@ -35,37 +35,99 @@ export async function loadSourceValueConfig(eventIdList: string[]): Promise<Sour
status: "ACTIVE"
}
})));
const ruleList = resultList
.flatMap(result => result.list || [])
.filter(isSourceValueRule);
const ruleList = resultList.flatMap(result => result.list || []);
if (!ruleList.length) {
return undefined;
}
const rangeList = ruleList
.map(rule => ({ min: rule.conditionJson?.min, max: rule.conditionJson?.max }))
.filter((range): range is { min: number; max: number } => (
range.min !== undefined
&& range.max !== undefined
&& Number.isSafeInteger(range.min)
&& Number.isSafeInteger(range.max)
&& range.min !== 0
&& range.max !== 0
&& (range.min < 0) === (range.max < 0)
));
if (rangeList.length !== ruleList.length) {
.map(resolvePointValueRuleConfig)
.filter((range): range is SourceValueConfig => !!range);
const action = rangeList[0]?.action;
if (!action) {
return undefined;
}
const action = rangeList[0].min < 0 ? "CONSUME" : "EARN";
if (rangeList.some(range => (range.min < 0 ? "CONSUME" : "EARN") !== action)) {
if (rangeList.some(range => range.action !== action)) {
return undefined;
}
const min = Math.max(...rangeList.map(range => action === "CONSUME" ? Math.abs(range.max) : range.min), 1);
const max = Math.min(...rangeList.map(range => action === "CONSUME" ? Math.abs(range.min) : range.max));
const min = Math.max(...rangeList.map(range => range.range[0]), 1);
const max = Math.min(...rangeList.map(range => range.range[1]));
return min <= max ? { range: [min, max], action } : undefined;
}
function isSourceValueRule(rule: PointRule): boolean {
return rule.status === "ACTIVE" && rule.triggerType === "SOURCE_VALUE" && rule.pointMode === "SOURCE_VALUE";
/**
* 解析积分规则动作。
*
* 固定积分优先按 pointValue 正负判定；登记时自定义积分按 conditionJson.min 正负判定。
*
* @param rule 积分规则
* @returns 积分动作；缺少有效积分值时返回 undefined
*/
export function resolvePointRuleAction(rule: PointRule): PointAction | undefined {
if (rule.pointValue !== undefined && rule.pointValue !== null && rule.pointValue !== 0) {
return rule.pointValue < 0 ? "CONSUME" : "EARN";
}
const min = rule.conditionJson?.min;
if (min === undefined || min === 0) {
return undefined;
}
return min < 0 ? "CONSUME" : "EARN";
}
function resolvePointValueRuleConfig(rule: PointRule): SourceValueConfig | undefined {
if (rule.status !== "ACTIVE") {
return undefined;
}
if (rule.pointMode === "FIXED") {
return resolveFixedPointValueRuleConfig(rule);
}
if (rule.triggerType === "SOURCE_VALUE" && rule.pointMode === "SOURCE_VALUE") {
return resolveSourceValueRuleConfig(rule);
}
return undefined;
}
function resolveFixedPointValueRuleConfig(rule: PointRule): SourceValueConfig | undefined {
const action = resolvePointRuleAction(rule);
const pointValue = rule.pointValue;
if (
action === undefined
|| pointValue === undefined
|| pointValue === null
|| !Number.isSafeInteger(pointValue)
|| pointValue === 0
) {
return undefined;
}
const value = Math.abs(pointValue);
return {
action,
range: [value, value]
};
}
function resolveSourceValueRuleConfig(rule: PointRule): SourceValueConfig | undefined {
const min = rule.conditionJson?.min;
const max = rule.conditionJson?.max;
const action = resolvePointRuleAction(rule);
if (
min === undefined
|| max === undefined
|| action === undefined
|| !Number.isSafeInteger(min)
|| !Number.isSafeInteger(max)
|| min === 0
|| max === 0
|| (action === "CONSUME") !== (min < 0)
|| (action === "CONSUME") !== (max < 0)
) {
return undefined;
}
const boundaryList = [Math.abs(min), Math.abs(max)];
return {
action,
range: [Math.min(...boundaryList), Math.max(...boundaryList)]
};
}