fix package name overflow

src/assets/styles/global.less

@@ -143,6 +143,15 @@ html.theme-dark body {
 	display: none;
 }
 
+.fix-cell-title-clip {
+
+	.t-cell__title {
+		flex: 1 1 0;
+		min-width: 0;
+		overflow: hidden;
+	}
+}
+
 .entrance-fade-up-enter-active {
 	transition: opacity .4s ease, transform .4s ease;
 	transition-delay: var(--entrance-delay, 0ms);

src/main.ts

@@ -10,6 +10,8 @@ import { VCan, VRole } from "timi-web-api/utils/directives/Access";
 import type { ApiResponse } from "timi-web-api";
 import { Message } from "@/utils/message";
 import vEntranceTransition from "@/directives/entranceTransition";
+import timiWebStyle from "../../timi-web/src/assets/style/timi-web.less?inline";
+import tdesignCustomStyle from "../../timi-tdesign-mobile/src/assets/style/tdesign-custom.less?inline";
 
 import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
 import "tdesign-mobile-vue/es/style/index.css";
@@ -20,6 +22,17 @@ import "@/assets/styles/global.less";
 
 export const pinia = createPinia();
 const apiBaseURL = import.meta.env.VITE_API_BASE_URL as string | undefined;
+const libraryOverrideStyleId = "library-override-style";
+
+function mountLibraryOverrideStyle(): void {
+	const oldStyle = document.getElementById(libraryOverrideStyleId);
+	oldStyle?.remove();
+
+	const style = document.createElement("style");
+	style.id = libraryOverrideStyleId;
+	style.textContent = `${timiWebStyle}\n${tdesignCustomStyle}`;
+	document.head.append(style);
+}
 
 if (apiBaseURL) {
 	Network.axios.defaults.baseURL = apiBaseURL;
@@ -69,6 +82,7 @@ async function bootstrap(): Promise<void> {
 	await import("tdesign-mobile-vue");
 	await import("../../timi-web/src/index");
 	await import("timi-tdesign-mobile");
+	mountLibraryOverrideStyle();
 	app.mount("#root");
 }
 

src/pages/package/PackagePurchase.vue

@@ -237,17 +237,24 @@
 			right-button-text=""
 			@left-button-click="configSelectorVisible = false"
 		>
-			<div class="config-selector">
+			<div class="config-selector fix-cell-title-clip empty-cell-title-margin">
 				<t-cell-group v-if="configList.length">
 					<t-cell
 						v-for="item in configList"
 						:key="item.id"
 						class="config-option"
-						:title="item.name || '未命名套餐'"
-						:note="formatPackageAmount(item.standardAmount)"
 						arrow
 						@click="selectConfig(item)"
 					>
+						<template #title>
+							<div class="title">
+								<div class="clip-text" v-text="item.name + '长名称长名称长名称长名称长名称' || '未命名套餐'" />
+								<div class="price keep-text">
+									<span class="label gray">标准价：</span>
+									<span class="red" v-text="formatPackageAmount(item.standardAmount)" />
+								</div>
+							</div>
+						</template>
 						<template #description>
 							<div class="products">
 								<t-tag
@@ -1005,18 +1012,30 @@ watch(config, value => {
 	}
 }
 
-:deep(.package-purchase-form .avatar .t-image__img) {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	border-radius: inherit;
-}
-
 .config-selector {
 	height: 100%;
 	overflow: auto;
 
 	.config-option {
+
+		.title {
+			gap: .5rem;
+			width: 100%;
+			min-width: 0;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.price {
+				flex: none;
+				display: flex;
+
+				.label {
+					font-size: .75rem;
+				}
+			}
+		}
+
 		.products {
 			gap: .35rem;
 			width: 100%;