style:优化 大数额显示不全

src/components/workspace/CashManagement.vue

@@ -74,6 +74,22 @@ const cashData = ref({
 
 const markets = ref()
 
+// 定义默认市场
+const defaultMarkets = [
+  {name: '新加坡', value: 0},
+  {name: '马来西亚', value: 0},
+  {name: '香港', value: 0},
+  {name: '加拿大', value: 0},
+  {name: '泰国', value: 0},
+  {name: '越南HCM', value: 0},
+  {name: '韩国', value: 0},
+  {name: '未知', value: 0},
+  // { name: '其他', value: 0 },
+  {name: '市场部', value: 0},
+  // { name: '深圳运营', value: 0 },
+  // { name: '研发部', value: 0 },
+]
+
 const workDataUpdateTime = ref('')
 const totalIncome = ref(0)
 
@@ -108,9 +124,14 @@ const fetchCashData = async () => {
     }, 0);
     // 格式化数据
     if (marksFlag.value) {
-      markets.value = res.map(item => ({
-        name: item.market,
-        value: item.totalSGD ? Number(item.totalSGD) : 0
+      // 生成接口数据映射表
+      const resMap = new Map(
+          res.map(item => [item.market, Number(item.totalSGD) || 0])
+      )
+      // 合并：优先用接口数据，否则默认 0
+      markets.value = defaultMarkets.map(m => ({
+        name: m.name,
+        value: resMap.get(m.name) ?? 0
       }))
     } else {
       // 1. 定义币种中英文对照表
@@ -141,7 +162,6 @@ const fetchCashData = async () => {
     }
 
 
-
     // 更新数据
     cashData.value.markets = markets.value
     console.log("cashData", cashData.value.markets)
@@ -273,7 +293,7 @@ onMounted(() => {
 
 .market-data {
   display: flex;
-  width: 180px;
+  width: 230px;
   flex-direction: column;
   align-items: flex-start;
   gap: 20px;
@@ -282,29 +302,32 @@ onMounted(() => {
 }
 
 .market-item {
-  margin: 10px 0;
   display: flex;
   justify-content: space-between;
   width: 100%;
   font-family: "PingFang SC";
   font-size: 16px;
   color: #040a2d;
-  line-height: 1.5;
+  white-space: nowrap; /* 禁止换行 */
+  overflow: hidden; /* 隐藏溢出内容 */
+  text-overflow: ellipsis; /* 溢出显示省略号 */
+  margin-bottom: 8px; /* 增加项间距，提升可读性 */
 }
 
 .market-name {
-  text-align: left; /* 左边文本左对齐 */
-
+  flex: 0 0 auto; /* 名称部分自适应宽度 */
+  margin-right: 16px; /* 与金额保持距离 */
 }
 
 .market-value {
-  text-align: right; /* 右边数字右对齐 */
-
+  flex: 1; /* 金额部分占剩余宽度 */
+  text-align: right;
 }
 
 .chart {
   flex: 1;
   height: 300px;
+  width: auto;
   margin-top: 10px;
 }