diff --git a/src/App.vue b/src/App.vue
index ff5e167..40ff505 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,6 @@
 	})
 	onMounted(() => {
 		observer.observe(viewRef.value)
-		console.log('onMounted')
 	})
 	onBeforeUnmount(() => {
 		observer.disconnect()
diff --git a/src/utils/tools.ts b/src/utils/tools.ts
index 738e4b2..e55814a 100644
--- a/src/utils/tools.ts
+++ b/src/utils/tools.ts
@@ -197,15 +197,17 @@ export function CountDown(time: number) {
 /**
  * 字节转换为可读格式
  * @param {number} bytes - 字节数
- * @param {number} decimals - 保留小数位数，默认2位
+ * @param {number} options - 选项对象
+ * @param {number} options.decimals - 保留小数位数，默认2位
+ * @param {boolean} options.unitBig - 是否使用大写单位，默认false
  * @returns {string} 格式化后的字符串
  */
-export function FormatBytes(bytes, decimals = 2) {
-	if (bytes === 0) return '0 B';
+export function FormatBytes(bytes, options: { decimals?: number, unitBig?: boolean } = {}) {
 	if (!bytes || isNaN(bytes)) return '0 B';
+	const { decimals = 2, unitBig = false } = options;
 	const k = 1024;
-	const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+	const sizes = unitBig ? ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] : ['b', 'kb', 'mb', 'gb', 'tb', 'pb', 'eb', 'zb', 'yb'];
 	const i = Math.floor(Math.log(bytes) / Math.log(k));
 	const value = bytes / Math.pow(k, i);
 	return `${Number(value.toFixed(decimals))} ${sizes[i]}`;
-}
+}
\ No newline at end of file
diff --git a/src/views/shoppingCart/index.vue b/src/views/shoppingCart/index.vue
index 9056171..25ce45f 100644
--- a/src/views/shoppingCart/index.vue
+++ b/src/views/shoppingCart/index.vue
@@ -2,8 +2,9 @@
 	<div class="shopping-cart">
 		<div class="content">
 			<sc-list @selected-change="(v) => (selectedList = v)" />
-			<!-- <sc-list is-mini is-view title="Order Summary" /> -->
 			<order-summary :list="selectedList" />
+			<!-- <sc-list is-mini style="height: 70rem" /> -->
+			<!-- <sc-list is-mini is-view title="Order Summary" style="height: 70rem" /> -->
 		</div>
 		<my-footer />
 	</div>
diff --git a/src/views/shoppingCart/sc-item.vue b/src/views/shoppingCart/sc-item.vue
new file mode 100644
index 0000000..d96d4cd
--- /dev/null
+++ b/src/views/shoppingCart/sc-item.vue
@@ -0,0 +1,164 @@
+<template>
+	<div class="sc-item">
+		<slot name="checkbox" />
+		<img :src="info.url" />
+		<div class="content">
+			<div class="title">{{ info.title }}</div>
+			<div class="brand">
+				<span class="icon"><svg-icon name="order-shop" size="24" /></span>
+				<span class="text">{{ info.brand }}</span>
+			</div>
+			<div class="tags" v-if="showTags">
+				<span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
+			</div>
+			<div class="size" v-if="showSize">
+				<div class="icon"><svg-icon name="order-file" size="18" /></div>
+				<div class="text">
+					<span>{{ FormatBytes(info.fileSize) }}</span>
+					<span v-if="showSizeDate"
+						>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{
+							FormatDate(info.date, 'SM D, YYYY, h:mm A')
+						}}</span
+					>
+				</div>
+			</div>
+		</div>
+		<div class="right">
+			<div class="amount">${{ info.amount }}<span> HKD</span></div>
+			<div class="remove" v-if="showRemove" @click="onRemove">
+				<span class="icon"><svg-icon name="order-delete" size="18" /></span>
+				<span class="text">Remove</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, onMounted } from 'vue'
+	import { FormatBytes, FormatDate } from '@/utils/tools'
+	const emit = defineEmits(['remove'])
+	const props = defineProps({
+		showTags: { type: Boolean, default: true },
+		showSize: { type: Boolean, default: true },
+		showSizeDate: { type: Boolean, default: true },
+		showRemove: { type: Boolean, default: true },
+		info: { type: Object, default: () => {} }
+	})
+	const onRemove = () => {
+		emit('remove', props.info.id)
+	}
+</script>
+
+<style lang="less" scoped>
+	.sc-item {
+		border-bottom: 0.1rem solid #c4c4c4;
+		padding: var(--sc-item-padding, 2.4rem 0);
+		display: flex;
+		align-items: center;
+		> img {
+			width: var(--sc-item-img-width, 14.8rem);
+			height: var(--sc-item-img-height, 18.8rem);
+			object-fit: contain;
+			background-color: #f6f6f6;
+		}
+		> .content {
+			flex: 1;
+			margin: var(--sc-item-content-margin, 0 4rem);
+			align-self: var(--sc-item-content-align-self, auto);
+			> * {
+				margin-bottom: var(--sc-item-margin-bottom, 1.6rem);
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+			> .title {
+				font-family: KaiseiOpti-Bold;
+				font-size: var(--sc-item-title-font-size, 2.4rem);
+				color: #232323;
+			}
+			> .brand {
+				display: flex;
+				align-items: center;
+				> .icon {
+					width: 2.4rem;
+					height: 2.4rem;
+					margin-right: 1rem;
+				}
+				> .text {
+					font-size: var(--sc-item-brand-font-size, 1.6rem);
+					text-decoration: underline;
+					color: #232323;
+				}
+			}
+			> .tags {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 0.8rem;
+				> .tag {
+					min-width: var(--sc-item-tag-min-width, 8.8rem);
+					height: var(--sc-item-tag-height, 2.4rem);
+					line-height: var(--sc-item-tag-height, 2.4rem);
+					border-radius: var(--sc-item-tag-radius, 2.4rem);
+					font-size: var(--sc-item-tag-font-size, 1.4rem);
+					padding: var(--sc-item-tag-padding, 0 1rem);
+					text-align: center;
+					color: #8f8f8f;
+					background-color: #eee;
+				}
+			}
+			> .size {
+				display: flex;
+				align-items: center;
+				> .icon {
+					width: 2.4rem;
+					height: 2.4rem;
+					margin-right: 1rem;
+					color: #808080;
+				}
+
+				> .text {
+					font-family: KaiseiOpti-Regular;
+					font-size: 1.4rem;
+					color: #808080;
+				}
+			}
+		}
+		> .right {
+			align-self: var(--sc-item-right-align-self, end);
+			display: var(--sc-item-right-display, '');
+			flex-direction: var(--sc-item-right-flex-direction, '');
+			justify-content: var(--sc-item-right-justify-content, '');
+			align-items: var(--sc-item-right-align-items, '');
+			height: var(--sc-item-right-height, auto);
+			margin-top: var(--sc-item-right-margin-top, 0);
+			> .amount {
+				font-family: KaiseiOpti-Bold;
+				font-size: var(--sc-item-amount-font-size, 2.2rem);
+				color: #232323;
+				> span {
+					font-size: var(--sc-item-currency-font-size, 1.4rem);
+					color: #585858;
+					vertical-align: bottom;
+				}
+			}
+			> .remove {
+				margin-top: var(--sc-item-remove-margin-top, 9rem);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				user-select: none;
+				cursor: pointer;
+				> .icon {
+					width: 2rem;
+					height: 2rem;
+					margin-right: 0.4rem;
+				}
+				> .text {
+					font-family: KaiseiOpti-Regular;
+					font-size: 1.4rem;
+					color: #808080;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/shoppingCart/sc-list-null.vue b/src/views/shoppingCart/sc-list-null.vue
new file mode 100644
index 0000000..fde1efd
--- /dev/null
+++ b/src/views/shoppingCart/sc-list-null.vue
@@ -0,0 +1,55 @@
+<template>
+	<div class="sc-list-null">
+		<img src="@/assets/images/shopping-cart-null.png" alt="" />
+		<div class="title">Your Cart is empty</div>
+		<div class="tip">Discover new fashion assets and add them to your cart.</div>
+		<button custom v-show="showButton" @click="handleExploreClick">EXPLORE DIGITAL ITEMS</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, onMounted } from 'vue'
+	const props = defineProps({
+		showButton: { type: Boolean, default: true }
+	})
+	const handleExploreClick = () => {
+		console.log('探索')
+	}
+</script>
+
+<style lang="less" scoped>
+	.sc-list-null {
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		text-align: center;
+		> img {
+			width: 14rem;
+			height: auto;
+			margin-bottom: 2.4rem;
+		}
+		> .title {
+			font-family: KaiseiOpti-Bold;
+			font-size: 1.6rem;
+			color: #979797;
+			margin-bottom: 0.8rem;
+		}
+		> .tip {
+			width: 50%;
+			font-family: KaiseiOpti-Regular;
+			font-size: 1.4rem;
+			color: #979797;
+		}
+		> button {
+			min-width: 30rem;
+			height: 4.4rem;
+			border: 0.1rem solid #c4c4c4;
+			font-family: KaiseiOpti-Medium;
+			font-size: 1.6rem;
+			color: #979797;
+			margin-top: 4.2rem;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/shoppingCart/sc-list.vue b/src/views/shoppingCart/sc-list.vue
index c7909b8..c5c8332 100644
--- a/src/views/shoppingCart/sc-list.vue
+++ b/src/views/shoppingCart/sc-list.vue
@@ -37,53 +37,30 @@
 			</div>
 		</div>
 		<div class="list">
-			<div class="list-null" v-show="list.length === 0">
-				<img src="@/assets/images/shopping-cart-null.png" alt="" />
-				<div class="title">Your Cart is empty</div>
-				<div class="tip">Discover new fashion assets and add them to your cart.</div>
-				<button custom v-if="!isMini" @click="handleExploreClick">EXPLORE DIGITAL ITEMS</button>
-			</div>
-			<div class="item" v-for="v in list" :key="v.id">
-				<el-checkbox v-model="v.checked" v-if="!isMini" @change="handleSelectedChange" />
-				<img :src="v.url" />
-				<div class="content">
-					<div class="title">{{ v.title }}</div>
-					<div class="brand">
-						<span class="icon"><svg-icon name="order-shop" size="24" /></span>
-						<span class="text">{{ v.brand }}</span>
-					</div>
-					<div class="tags" v-if="!isMini || isView">
-						<span v-for="tag in v.tags" :key="tag" class="tag">{{ tag }}</span>
-					</div>
-					<div class="size" v-if="!isView">
-						<div class="icon"><svg-icon name="order-file" size="18" /></div>
-						<div class="text">
-							<span>{{ FormatBytes(v.fileSize) }}</span>
-							<span v-if="!isMini"
-								>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{
-									FormatDate(v.date, 'SM D, YYYY, h:mm A')
-								}}</span
-							>
-						</div>
-					</div>
-				</div>
-				<div class="right">
-					<div class="amount">${{ v.amount }}<span> HKD</span></div>
-					<div class="remove" v-if="!isView">
-						<span class="icon"><svg-icon name="order-delete" size="18" /></span>
-						<span class="text">Remove</span>
-					</div>
-				</div>
-			</div>
+			<sc-list-null v-show="list.length === 0" :show-button="!isMini" />
+			<sc-item
+				v-for="v in list"
+				:key="v.id"
+				:info="v"
+				:show-tags="!isMini || isView"
+				:show-size="!isMini"
+				:show-size-date="!isMini"
+				:show-remove="!isView"
+				@remove="handleRemoveClick"
+			>
+				<template #checkbox>
+					<el-checkbox v-model="v.checked" v-if="!isMini" @change="handleSelectedChange" />
+				</template>
+			</sc-item>
 		</div>
 		<div class="footer" v-if="isMini">
-			<div class="total size" v-show="list.length > 0">
+			<div class="total size" v-show="isView">
 				<span class="label">Total File Size</span>
 				<span class="value"
 					>{{ allTotalSize.size }}<span>&nbsp;{{ allTotalSize.unit }}</span></span
 				>
 			</div>
-			<div class="total" v-show="list.length > 0">
+			<div class="total" v-show="list.length > 0 || isView">
 				<span class="label">Total</span>
 				<span class="value">${{ allAmount }}<span> HKD</span></span>
 			</div>
@@ -97,6 +74,8 @@
 <script setup lang="ts">
 	import { computed, ref, onMounted } from 'vue'
 	import { FormatBytes, FormatDate } from '@/utils/tools'
+	import scItem from './sc-item.vue'
+	import scListNull from './sc-list-null.vue'
 	const emit = defineEmits(['close', 'selected-change'])
 	const props = defineProps({
 		title: { type: String, default: '' },
@@ -105,7 +84,7 @@
 	})
 	const allTotalSize = computed(() => {
 		const total = list.value.reduce((pre, cur) => pre + cur.fileSize, 0)
-		const str = FormatBytes(total)
+		const str = FormatBytes(total, { unitBig: true })
 		return {
 			size: str.split(' ')[0],
 			unit: str.split(' ')[1]
@@ -202,6 +181,10 @@
 	onMounted(() => {
 		handleSelectedChange()
 	})
+	const handleRemoveClick = (id: number) => {
+		list.value = list.value.filter((v) => v.id !== id)
+		handleSelectedChange()
+	}
 	const handleExploreClick = () => {
 		console.log('探索')
 	}
@@ -216,62 +199,45 @@
 			overflow: hidden;
 			--sc-list-title-font-size: 2rem;
 			--sc-list-title-padding-bottom: 3rem;
-			--sc-list-list-item-padding: 2rem 0;
-			--sc-list-list-item-img-width: 10.4rem;
-			--sc-list-list-item-img-height: 13.2rem;
-			--sc-list-list-item-content-margin: 0 2rem;
-			--sc-list-list-item-margin-bottom: 0.8rem;
-			--sc-list-list-item-title-font-size: 1.6rem;
-			--sc-list-list-item-brand-font-size: 1.4rem;
-			--sc-list-list-item-amount-font-size: 1.8rem;
-			--sc-list-list-item-currency-font-size: 1.6rem;
+			--sc-item-padding: 2rem 0;
+			--sc-item-img-width: 10.4rem;
+			--sc-item-img-height: 13.2rem;
+			--sc-item-content-margin: 0 2rem;
+			--sc-item-margin-bottom: 0.8rem;
+			--sc-item-title-font-size: 1.6rem;
+			--sc-item-brand-font-size: 1.4rem;
+			--sc-item-amount-font-size: 1.8rem;
+			--sc-item-currency-font-size: 1.6rem;
+			--sc-item-currency-font-size: 1.6rem;
+			--sc-item-content-align-self: baseline;
+			--sc-item-right-display: flex;
+			--sc-item-right-flex-direction: column;
+			--sc-item-right-justify-content: space-between;
+			--sc-item-right-align-items: flex-end;
+			--sc-item-right-height: var(--sc-item-img-height);
 			> .list {
 				flex: 1;
 				min-height: 30rem;
 				overflow-y: auto;
-				> .item {
-					> .content {
-						align-self: baseline;
-					}
-					> .right {
-						display: flex;
-						flex-direction: column;
-						justify-content: space-between;
-						align-items: flex-end;
-						height: var(--sc-list-list-item-img-height);
-					}
-				}
 			}
 		}
 		&.mini.view {
 			--sc-list-title-padding-bottom: 2.4rem;
-			--sc-list-list-item-img-width: 9.6rem;
-			--sc-list-list-item-img-height: 12.2rem;
-			--sc-list-list-item-padding: 1.6rem;
-			--sc-list-list-item-margin-bottom: 0.8rem;
-			--sc-list-list-item-title-font-size: 2rem;
+			--sc-item-img-width: 9.6rem;
+			--sc-item-img-height: 12.2rem;
+			--sc-item-padding: 1.6rem;
+			--sc-item-margin-bottom: 0.8rem;
+			--sc-item-title-font-size: 2rem;
+			--sc-item-right-margin-top: 1.2rem;
+			--sc-item-content-margin: 1.2rem 2rem 0;
+			--sc-item-tag-min-width: 0;
+			--sc-item-tag-height: 2rem;
+			--sc-item-tag-radius: 2rem;
+			--sc-item-tag-font-size: 1.2rem;
+			--sc-item-tag-padding: 0 0.8rem;
 			> .header {
 				border: none;
 			}
-			> .list {
-				> .item {
-					> .content {
-						margin-top: 1.2rem;
-						> .tags {
-							> .tag {
-								min-width: 0;
-								height: 2rem;
-								line-height: 2rem;
-								font-size: 1.2rem;
-								padding: 0 0.8rem;
-							}
-						}
-					}
-					> .right {
-						margin-top: 1.2rem;
-					}
-				}
-			}
 			> .footer {
 				margin-top: 4.1rem;
 				> .total {
@@ -316,7 +282,7 @@
 				}
 			}
 			> .list {
-				> .list-null {
+				> .sc-list-null {
 					margin-top: 10rem;
 				}
 			}
@@ -370,145 +336,6 @@
 			}
 		}
 		> .list {
-			// height: 1000px;
-			> .list-null {
-				height: 100%;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				flex-direction: column;
-				text-align: center;
-				> img {
-					width: 14rem;
-					height: auto;
-					margin-bottom: 2.4rem;
-				}
-				> .title {
-					font-family: KaiseiOpti-Bold;
-					font-size: 1.6rem;
-					color: #979797;
-					margin-bottom: 0.8rem;
-				}
-				> .tip {
-					width: 50%;
-					font-family: KaiseiOpti-Regular;
-					font-size: 1.4rem;
-					color: #979797;
-				}
-				> button {
-					min-width: 30rem;
-					height: 4.4rem;
-					border: 0.1rem solid #c4c4c4;
-					font-family: KaiseiOpti-Medium;
-					font-size: 1.6rem;
-					color: #979797;
-					margin-top: 4.2rem;
-				}
-			}
-			> .item {
-				border-bottom: 0.1rem solid #c4c4c4;
-				padding: var(--sc-list-list-item-padding, 2.4rem 0);
-				display: flex;
-				align-items: center;
-				> img {
-					width: var(--sc-list-list-item-img-width, 14.8rem);
-					height: var(--sc-list-list-item-img-height, 18.8rem);
-					object-fit: contain;
-					background-color: #f6f6f6;
-				}
-				> .content {
-					flex: 1;
-					margin: var(--sc-list-list-item-content-margin, 0 4rem);
-					> * {
-						margin-bottom: var(--sc-list-list-item-margin-bottom, 1.6rem);
-						&:last-child {
-							margin-bottom: 0;
-						}
-					}
-					> .title {
-						font-family: KaiseiOpti-Bold;
-						font-size: var(--sc-list-list-item-title-font-size, 2.4rem);
-						color: #232323;
-					}
-					> .brand {
-						display: flex;
-						align-items: center;
-						> .icon {
-							width: 2.4rem;
-							height: 2.4rem;
-							margin-right: 1rem;
-						}
-						> .text {
-							font-size: var(--sc-list-list-item-brand-font-size, 1.6rem);
-							text-decoration: underline;
-							color: #232323;
-						}
-					}
-					> .tags {
-						display: flex;
-						flex-wrap: wrap;
-						gap: 0.8rem;
-						> .tag {
-							min-width: 8.8rem;
-							height: 2.4rem;
-							line-height: 2.4rem;
-							border-radius: 2.4rem;
-							font-size: 1.4rem;
-							padding: 0 1rem;
-							text-align: center;
-							color: #8f8f8f;
-							background-color: #eee;
-						}
-					}
-					> .size {
-						display: flex;
-						align-items: center;
-						> .icon {
-							width: 2.4rem;
-							height: 2.4rem;
-							margin-right: 1rem;
-							color: #808080;
-						}
-
-						> .text {
-							font-family: KaiseiOpti-Regular;
-							font-size: 1.4rem;
-							color: #808080;
-						}
-					}
-				}
-				> .right {
-					align-self: end;
-					> .amount {
-						font-family: KaiseiOpti-Bold;
-						font-size: var(--sc-list-list-item-amount-font-size, 2.2rem);
-						color: #232323;
-						> span {
-							font-size: var(--sc-list-list-item-currency-font-size, 1.4rem);
-							color: #585858;
-							vertical-align: bottom;
-						}
-					}
-					> .remove {
-						margin-top: var(--sc-list-list-item-remove-margin-top, 9rem);
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						user-select: none;
-						cursor: pointer;
-						> .icon {
-							width: 2rem;
-							height: 2rem;
-							margin-right: 0.4rem;
-						}
-						> .text {
-							font-family: KaiseiOpti-Regular;
-							font-size: 1.4rem;
-							color: #808080;
-						}
-					}
-				}
-			}
 		}
 		> .footer {
 			margin-top: 3rem;