support consume point

src/pages/point/PointRuleList.vue

@@ -34,7 +34,7 @@
 					@click="toEdit(item)"
 				>
 					<template #left-icon>
-						<div class="point">
+						<div class="point" :class="{ 'consume': item.pointValue && item.pointValue < 0 }">
 							<t-icon name="money" />
 							<span v-text="getPointText(item)" />
 						</div>
@@ -242,7 +242,10 @@ function getPointText(rule: PointRule): string {
 	if (rule.pointMode === "TIER") {
 		return "分档";
 	}
-	return rule.pointValue === undefined || rule.pointValue === null ? "?" : String(rule.pointValue);
+	if (rule.pointValue === undefined || rule.pointValue === null) {
+		return "?";
+	}
+	return `${0 < rule.pointValue ? "+" : "-"}${Math.abs(rule.pointValue)}`;
 }
 
 function getStatusText(status?: PointRuleStatus): string {
@@ -323,11 +326,15 @@ onMounted(async () => {
 			.item {
 
 				.point {
-					width: 3rem;
+					width: 4rem;
 					display: flex;
 					align-items: center;
 					flex-direction: column;
 					justify-content: space-between;
+
+					&.consume {
+						color: var(--td-error-color);
+					}
 				}
 
 				.title {