feat(web): 增加角色列表和充值流水功能

- 在 HomeView 中添加角色列表和充值流水两个表格
- 实现角色列表数据的获取和搜索功能
- 添加充值流水数据的获取功能
- 引入 dayjs 库对时间进行格式化
- 优化表单选择框，使用 el-select-v2 组件

web/src/views/HomeView.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { ref, onMounted } from 'vue'
 import axios from 'axios'
+import itemList from "@/assets/items.json"
+import dayjs from 'dayjs'
+
 
 // 第一个卡片：表单数据
 const form = ref({
@@ -8,7 +11,7 @@ const form = ref({
   item: '',
   recharge: ''
 })
-const items = ref(['物品1', '物品2', '物品3'])
+const items = ref(itemList)
 const recharges = ref(['充值1', '充值2', '充值3'])
 
 // 第二个卡片：角色表格数据
@@ -16,10 +19,14 @@ const roleList = ref([])
 const roleSearch = ref('')
 const fetchRoleList = async () => {
   try {
-    const response = await axios.get('/api/role', {
+    const response = await axios.get('/api/roles', {
       params: { search: roleSearch.value }
     })
-    roleList.value = response.data
+    roleList.value = response.data.map(e => {
+      e.lastLoginTime = dayjs(e.lastLoginTime).format("YYYY-MM-DD HH:mm:ss")
+      e.createTime = dayjs(e.createTime).format("YYYY-MM-DD HH:mm:ss")
+      return { ...e }
+    })
   } catch (error) {
     console.error('获取角色列表失败:', error)
   }
@@ -30,7 +37,7 @@ const rechargeList = ref([])
 const rechargeSearch = ref('')
 const fetchRechargeList = async () => {
   try {
-    const response = await axios.get('/api/recharge', {
+    const response = await axios.get('/api/recharges', {
       params: { search: rechargeSearch.value }
     })
     rechargeList.value = response.data
@@ -70,15 +77,15 @@ const submitForm = () => {
           </el-col>
           <el-col :span="8">
             <el-form-item label="物品道具">
-              <el-select v-model="form.item" placeholder="请选择物品">
-                <el-option v-for="item in items" :key="item" :label="item" :value="item"></el-option>
-              </el-select>
+              <el-select-v2 v-model="form.item" placeholder="请选择物品" :options="items"
+                :props="{ label: 'name', value: 'resId' }" filterable />
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="充值">
               <el-select v-model="form.recharge" placeholder="请选择充值">
-                <el-option v-for="recharge in recharges" :key="recharge" :label="recharge" :value="recharge"></el-option>
+                <el-option v-for="recharge in recharges" :key="recharge" :label="recharge"
+                  :value="recharge"></el-option>
               </el-select>
             </el-form-item>
           </el-col>
@@ -91,13 +98,20 @@ const submitForm = () => {
       <template #header>
         <div class="card-header">
           <span>角色列表</span>
-          <el-input style="width: 240px;" v-model="roleSearch" placeholder="请输入角色名称或ID" @input="fetchRoleList"></el-input>
+          <el-input style="width: 240px;" v-model="roleSearch" placeholder="请输入角色名称或ID" @change="fetchRoleList" clearable />
         </div>
       </template>
-      <el-table :data="roleList" style="width: 100%" border>
-        <el-table-column prop="id" label="ID" width="180"></el-table-column>
-        <el-table-column prop="name" label="角色名称" width="180"></el-table-column>
-        <el-table-column prop="level" label="等级"></el-table-column>
+      <el-table :data="roleList" style="width: 100%" border height="400">
+        <el-table-column prop="id" label="ID"></el-table-column>
+        <el-table-column prop="name" label="角色名称"></el-table-column>
+        <el-table-column prop="lv" label="等级"></el-table-column>
+        <el-table-column prop="lastLoginTime" label="上次登录" width="220" />
+        <el-table-column prop="createTime" label="创建时间" width="220" />
+        <el-table-column label="是否禁用">
+          <template v-slot="{ row }">
+            <el-switch v-model="row.ban" disabled />
+          </template>
+        </el-table-column>
       </el-table>
     </el-card>
 
@@ -106,7 +120,8 @@ const submitForm = () => {
       <template #header>
         <div class="card-header">
           <span>充值流水</span>
-          <el-input style="width: 240px;" v-model="rechargeSearch" placeholder="请输入角色名称或流水单号" @input="fetchRechargeList"></el-input>
+          <el-input style="width: 240px;" v-model="rechargeSearch" placeholder="请输入角色名称或流水单号"
+            @input="fetchRechargeList"></el-input>
         </div>
       </template>
       <el-table :data="rechargeList" style="width: 100%" border>
@@ -127,9 +142,11 @@ const submitForm = () => {
   gap: 20px;
   padding: 20px;
 }
+
 .card-item {
   width: 100%;
 }
+
 .card-header {
   display: flex;
   justify-content: space-between;