```plaintextfeat(workbench): 实现rate页面的初始布局和功能

包括余额展示和接口列表的展示。页面使用Element UI的卡片和表格组件，通过调用API获取用户余额和接口列表数据。在创建页面时自动获取数据以显示。布局通过flexbox实现，分为左右两部分。
```

src/views/workbench/rate/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <div>
+  <div class="container">
+    <div class="card left-card">
+      <el-card style="margin-top: 50px;">
+
+      </el-card>
+    </div>
+    <div class="card right-card">
+      <el-card style="margin-top: 50px;">
+        <h3>账户余额</h3>
+        <h1>￥:{{ userBalanceData.userBalance || '加载中...' }}</h1>
+      </el-card>
+    </div>
+  </div>
+    <el-card style="margin-top: 50px;">
+      <h3>接口列表</h3>
+      <el-divider></el-divider>
+      <el-table  :data="tableData">
+        <el-table-column>
+          <template slot-scope="scope">
+            <span style="margin-left: 10px">{{ scope.row.connectorName }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {userBalance} from "@/api/system/user";
+import {getInfo} from '@/api/login'
+import {findConnectorList} from "@/api/port/port";
+export default {
+  name: 'Cards',
+  data() {
+    return {
+      tableData:[],
+      userBalanceData: {
+        userBalance: '加载中...',
+      },
+    }
+  },
+  created() {
+    this.fetchUserBalance();
+    this.findConnectorList();
+  },
+  methods: {
+    findConnectorList(){
+      findConnectorList(this.form).then((res)=>{
+        this.tableData=res.data;
+      })
+    },
+     async fetchUserBalance() {
+       try {
+         const userId = localStorage.getItem('userId');
+         console.log(userId)// 登录后把userId存到了localStorage
+         if (!userId) {
+           this.userBalanceData = { userBalance: '未登录' };
+           return;
+         }
+         const response = await userBalance(userId);
+         if (response.data ) {
+           console.log(response.data)
+           this.userBalanceData.userBalance = response.data;
+         } else {
+           this.userBalanceData.userBalance = { userBalance: '获取失败' };
+         }
+       } catch (error) {
+         this.userBalanceData = { userBalance: '获取失败' };
+         console.error('Error fetching user balance:', error);
+       }
+     },
+ }
+};
+</script>
+
+<style scoped>
+.container {
+  display: flex;
+}
+
+.card {
+  width: 50%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.left-card {
+  background-color: #f1f1f1;
+}
+
+.right-card {
+  background-color: #e1e1e1;
+}
+</style>