add telephone link

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;
 		}
 	}

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)" />

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>