From cd1b45eb2411e018b767b1b2b11e0020c50f232a Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Mon, 3 Aug 2026 01:27:46 +0800
Subject: [PATCH] add telephone link

---
 src/components/CustomerProfileCard.vue        |  3 +-
 src/components/CustomerSelector.vue           |  4 +-
 src/components/TelephoneLink.vue              | 44 +++++++++++++++++
 src/pages/customer/QuickSignInPage.vue        |  4 --
 src/pages/management/CustomerDetail.vue       |  8 ++-
 src/pages/management/CustomerEdit.vue         |  2 +-
 src/pages/management/CustomerList.vue         |  2 +-
 src/pages/management/ManagementDataCharts.vue | 49 ++++++++++---------
 src/pages/management/ManagementProfile.vue    | 10 +++-
 src/pages/management/UserDetail.vue           |  6 ++-
 src/pages/management/UserEdit.vue             |  2 +-
 src/pages/tabs/ManagementTab.vue              |  5 +-
 src/utils/telephone.ts                        | 25 ++++++++++
 13 files changed, 128 insertions(+), 36 deletions(-)
 create mode 100644 src/components/TelephoneLink.vue
 create mode 100644 src/utils/telephone.ts

diff --git a/src/components/CustomerProfileCard.vue b/src/components/CustomerProfileCard.vue
index ec729fd..e46782b 100644
--- a/src/components/CustomerProfileCard.vue
+++ b/src/components/CustomerProfileCard.vue
@@ -12,7 +12,7 @@
 				</div>
 				<span class="gray" v-text="customerCode" />
 			</div>
-			<span class="telephone gray" v-text="customerTelephone" />
+			<telephone-link class="telephone gray" :value="customerTelephone" />
 		</div>
 		<t-image-viewer
 			v-model:visible="photoViewerVisible"
@@ -105,6 +105,7 @@ function openPhotoViewer(): void {
 		}
 
 		.telephone {
+			display: inline-block;
 			font-size: .875rem;
 		}
 	}
diff --git a/src/components/CustomerSelector.vue b/src/components/CustomerSelector.vue
index e95466b..ee05ae2 100644
--- a/src/components/CustomerSelector.vue
+++ b/src/components/CustomerSelector.vue
@@ -16,7 +16,6 @@
 					<t-cell
 						v-for="(item, index) in customerOptions"
 						:key="item.id || item.code || index"
-						:description="item.telephone || '未填写电话'"
 						:note="item.code"
 						hover
 						@click="selectCustomer(item)"
@@ -27,6 +26,9 @@
 								<gender-icon :value="item.gender" />
 							</div>
 						</template>
+						<template #description>
+							<telephone-link :value="item.telephone" placeholder="未填写电话" />
+						</template>
 						<template #leftIcon>
 							<t-image v-if="getCustomerPhotoURL(item)" :src="getCustomerPhotoURL(item)" :alt="item.name" fit="cover" class="avatar" />
 							<div v-else class="avatar fallback" v-text="(item.name || item.code || '客').slice(0, 1)" />
diff --git a/src/components/TelephoneLink.vue b/src/components/TelephoneLink.vue
new file mode 100644
index 0000000..817f021
--- /dev/null
+++ b/src/components/TelephoneLink.vue
@@ -0,0 +1,44 @@
+<template>
+	<component
+		:is="href ? 'a' : 'span'"
+		v-if="displayText"
+		:href="href || undefined"
+		class="telephone-link"
+		:class="{ clickable: !!href }"
+		@click.stop
+	>
+		<span v-text="displayText" />
+	</component>
+</template>
+
+<script setup lang="ts">
+import { buildTelephoneURL, canDialTelephone } from "@/utils/telephone";
+
+defineOptions({
+	name: "TelephoneLink"
+});
+
+const props = withDefaults(defineProps<{
+	placeholder?: string;
+	value?: string;
+}>(), {
+	placeholder: ""
+});
+
+const textValue = computed(() => props.value?.trim() || "");
+const displayText = computed(() => textValue.value || props.placeholder);
+const href = computed(() => canDialTelephone(textValue.value) ? buildTelephoneURL(textValue.value) : "");
+</script>
+
+<style scoped lang="less">
+.telephone-link {
+	color: inherit;
+	word-break: break-all;
+	text-decoration: none;
+
+	&.clickable {
+		text-decoration: underline;
+		text-underline-offset: .16rem;
+	}
+}
+</style>
diff --git a/src/pages/customer/QuickSignInPage.vue b/src/pages/customer/QuickSignInPage.vue
index 7c38886..ca6e8cd 100644
--- a/src/pages/customer/QuickSignInPage.vue
+++ b/src/pages/customer/QuickSignInPage.vue
@@ -13,10 +13,6 @@
 			@decode="handleDecodedText"
 			@status-change="handleScanStatusChange"
 		/>
-		<div class="code-box">
-			<span class="required-label">扫出编码</span>
-			<strong v-text="scanCode || '未识别'" />
-		</div>
 		<customer-profile-card
 			v-if="matchedCustomer"
 			:customer="matchedCustomer"
diff --git a/src/pages/management/CustomerDetail.vue b/src/pages/management/CustomerDetail.vue
index d3f643d..80e27f0 100644
--- a/src/pages/management/CustomerDetail.vue
+++ b/src/pages/management/CustomerDetail.vue
@@ -27,10 +27,12 @@
 		<t-cell-group v-if="inviter" :title="`被 ${inviter.name} 邀请`" class="invite" theme="card">
 			<t-cell
 				:title="inviter.name"
-				:description="inviter.telephone || '未填写电话'"
 				arrow
 				@click="goCustomerDetail(inviter)"
 			>
+				<template #description>
+					<telephone-link :value="inviter.telephone" placeholder="未填写电话" />
+				</template>
 				<template #leftIcon>
 					<t-image
 						v-if="getCustomerPhotoURL(inviter)"
@@ -67,7 +69,6 @@
 					:key="item.id || item.code"
 				>
 					<t-cell
-						:description="item.telephone || '未填写电话'"
 						arrow
 						hover
 						@click="goCustomerDetail(item)"
@@ -77,6 +78,9 @@
 								<span v-text="item.name || item.code" />
 							</div>
 						</template>
+						<template #description>
+							<telephone-link :value="item.telephone" placeholder="未填写电话" />
+						</template>
 						<template #leftIcon>
 							<t-image
 								v-if="getCustomerPhotoURL(item)"
diff --git a/src/pages/management/CustomerEdit.vue b/src/pages/management/CustomerEdit.vue
index 3238d92..3344ab5 100644
--- a/src/pages/management/CustomerEdit.vue
+++ b/src/pages/management/CustomerEdit.vue
@@ -60,7 +60,7 @@
 				</t-radio-group>
 			</t-form-item>
 			<t-form-item label="手机号">
-				<t-input v-model.trim="formModel.telephone" placeholder="手机号" borderless />
+				<t-input v-model.trim="formModel.telephone" type="tel" placeholder="手机号" borderless />
 			</t-form-item>
 			<t-form-item label="介绍人">
 				<div class="referrer">
diff --git a/src/pages/management/CustomerList.vue b/src/pages/management/CustomerList.vue
index e6b12b1..a0414bf 100644
--- a/src/pages/management/CustomerList.vue
+++ b/src/pages/management/CustomerList.vue
@@ -34,7 +34,7 @@
 						<div class="gray">
 							<template v-if="item.telephone">
 								<t-icon name="call" />
-								<span class="word-space" v-text="item.telephone" />
+								<telephone-link class="word-space" :value="item.telephone" />
 							</template>
 						</div>
 						<t-tag
diff --git a/src/pages/management/ManagementDataCharts.vue b/src/pages/management/ManagementDataCharts.vue
index 7153226..12130aa 100644
--- a/src/pages/management/ManagementDataCharts.vue
+++ b/src/pages/management/ManagementDataCharts.vue
@@ -339,6 +339,9 @@ function buildEventStructureOption(): EChartsOption {
 function buildGenderStatOption(): EChartsOption {
 	return {
 		...buildBaseOption(),
+		tooltip: {
+			trigger: "item"
+		},
 		xAxis: {
 			type: "category",
 			data: ["男", "女", "未知"],
@@ -349,30 +352,32 @@ function buildGenderStatOption(): EChartsOption {
 				color: "#52607a"
 			}
 		},
-		series: [{
-			name: "客户数量",
-			type: "bar",
-			data: [
-				{
-					value: getGenderCount("MALE"),
-					itemStyle: {
-						color: genderColorMap.MALE
-					}
+		series: [
+			{
+				name: "男",
+				type: "bar",
+				itemStyle: {
+					color: genderColorMap.MALE
 				},
-				{
-					value: getGenderCount("FEMALE"),
-					itemStyle: {
-						color: genderColorMap.FEMALE
-					}
+				data: [getGenderCount("MALE"), 0, 0]
+			},
+			{
+				name: "女",
+				type: "bar",
+				itemStyle: {
+					color: genderColorMap.FEMALE
 				},
-				{
-					value: getGenderCount("UNKNOWN"),
-					itemStyle: {
-						color: genderColorMap.UNKNOWN
-					}
-				}
-			]
-		}]
+				data: [0, getGenderCount("FEMALE"), 0]
+			},
+			{
+				name: "未知",
+				type: "bar",
+				itemStyle: {
+					color: genderColorMap.UNKNOWN
+				},
+				data: [0, 0, getGenderCount("UNKNOWN")]
+			}
+		]
 	};
 }
 
diff --git a/src/pages/management/ManagementProfile.vue b/src/pages/management/ManagementProfile.vue
index 6d36446..161f253 100644
--- a/src/pages/management/ManagementProfile.vue
+++ b/src/pages/management/ManagementProfile.vue
@@ -27,7 +27,10 @@
 				</t-radio-group>
 			</t-form-item>
 			<t-form-item label="手机号">
-				<t-input :model-value="formModel.mobile" readonly borderless />
+				<div class="mobile-value">
+					<telephone-link v-if="formModel.mobile" :value="formModel.mobile" />
+					<span v-else v-text="'未填写'" />
+				</div>
 			</t-form-item>
 		</t-form>
 		<input
@@ -259,6 +262,11 @@ onMounted(() => {
 		display: none;
 	}
 
+	.mobile-value {
+		color: var(--td-text-color-primary);
+		line-height: 1.5rem;
+	}
+
 	.save,
 	.logout {
 		left: 1rem;
diff --git a/src/pages/management/UserDetail.vue b/src/pages/management/UserDetail.vue
index 0bb6395..026d644 100644
--- a/src/pages/management/UserDetail.vue
+++ b/src/pages/management/UserDetail.vue
@@ -17,7 +17,11 @@
 		</t-cell-group>
 
 		<t-cell-group v-if="currentUser" theme="card">
-			<t-cell title="手机号" :description="currentUser.mobile || '未填写'" />
+			<t-cell title="手机号">
+				<template #description>
+					<telephone-link :value="currentUser.mobile" placeholder="未填写" />
+				</template>
+			</t-cell>
 			<t-cell title="上次登录时间" :description="currentUser.lastLoginAt || '暂无记录'" />
 		</t-cell-group>
 
diff --git a/src/pages/management/UserEdit.vue b/src/pages/management/UserEdit.vue
index 13e3443..583ddcb 100644
--- a/src/pages/management/UserEdit.vue
+++ b/src/pages/management/UserEdit.vue
@@ -5,7 +5,7 @@
 				<t-input v-model.trim="formModel.name" placeholder="姓名" borderless />
 			</t-form-item>
 			<t-form-item v-if="isCreateMode" label="手机号">
-				<t-input v-model.trim="formModel.mobile" placeholder="手机号" borderless />
+				<t-input v-model.trim="formModel.mobile" type="tel" placeholder="手机号" borderless />
 			</t-form-item>
 			<t-form-item v-if="isCreateMode" label="密码">
 				<t-input v-model.trim="formModel.password" type="password" placeholder="密码" borderless />
diff --git a/src/pages/tabs/ManagementTab.vue b/src/pages/tabs/ManagementTab.vue
index f6e123d..47c4951 100644
--- a/src/pages/tabs/ManagementTab.vue
+++ b/src/pages/tabs/ManagementTab.vue
@@ -3,11 +3,14 @@
 		<t-cell-group class="user-card" theme="card">
 			<t-cell
 				:title="currentUserName"
-				:description="currentUserDesc"
 				arrow
 				hover
 				@click="go('/management/profile')"
 			>
+				<template #description>
+					<telephone-link v-if="currentUser?.phoneNo" :value="currentUser.phoneNo" />
+					<span v-else v-text="currentUserDesc" />
+				</template>
 				<template #leftIcon>
 					<t-image
 						class="avatar"
diff --git a/src/utils/telephone.ts b/src/utils/telephone.ts
new file mode 100644
index 0000000..0427db1
--- /dev/null
+++ b/src/utils/telephone.ts
@@ -0,0 +1,25 @@
+export function normalizeTelephone(value?: string): string {
+	if (!value) {
+		return "";
+	}
+
+	const trimmedValue = value.trim();
+	if (!trimmedValue) {
+		return "";
+	}
+
+	const normalizedValue = trimmedValue.startsWith("+")
+		? `+${trimmedValue.slice(1).replace(/\D/g, "")}`
+		: trimmedValue.replace(/\D/g, "");
+	return normalizedValue === "+" ? "" : normalizedValue;
+}
+
+export function canDialTelephone(value?: string): boolean {
+	const normalizedValue = normalizeTelephone(value);
+	return 2 < normalizedValue.replace("+", "").length;
+}
+
+export function buildTelephoneURL(value?: string): string {
+	const normalizedValue = normalizeTelephone(value);
+	return normalizedValue ? `tel:${normalizedValue}` : "";
+}