!1 调整部分列表样式

* fix: 还原过渡动画
* style: 调整部分列表样式

mayfly_go_web/src/views/ops/db/DbList.vue

@@ -1,34 +1,8 @@
 <template>
     <div class="db-list">
-        <div class="toolbar">
-            <el-row>
-                <el-col>
-                    <el-form class="search-form" label-position="right" :inline="true" label-width="60px" size="small">
-                        <el-form-item prop="project" label="项目">
-                            <el-select v-model="query.projectId" placeholder="请选择项目" filterable clearable>
-                                <el-option v-for="item in projects" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id">
-                                </el-option>
-                            </el-select>
-                        </el-form-item>
-
-                        <el-form-item label="数据库">
-                            <el-input v-model="query.database" auto-complete="off" clearable></el-input>
-                        </el-form-item>
-                        <el-button v-waves type="primary" icon="el-icon-search" size="mini" @click="search()">查询</el-button>
-                    </el-form>
-                </el-col>
-            </el-row>
-
-            <el-row class="mt5">
-                <el-col>
+        <el-card>
             <el-button v-auth="permissions.saveDb" type="primary" icon="el-icon-plus" size="mini" @click="editDb(true)">添加</el-button>
-                    <el-button
-                        v-auth="permissions.saveDb"
-                        :disabled="chooseId == null"
-                        @click="editDb(false)"
-                        type="primary"
-                        icon="el-icon-edit"
-                        size="mini"
+            <el-button v-auth="permissions.saveDb" :disabled="chooseId == null" @click="editDb(false)" type="primary" icon="el-icon-edit" size="mini"
                 >编辑</el-button
             >
             <el-button
@@ -40,10 +14,21 @@
                 size="mini"
                 >删除</el-button
             >
-                </el-col>
-            </el-row>
+            <div style="float: right">
+                <el-form class="search-form" label-position="right" :inline="true" label-width="60px" size="small">
+                    <el-form-item prop="project">
+                        <el-select v-model="query.projectId" placeholder="请选择项目" filterable clearable>
+                            <el-option v-for="item in projects" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
+                        </el-select>
+                    </el-form-item>
+
+                    <el-form-item>
+                        <el-input v-model="query.database" placeholder="请输入数据库" auto-complete="off" clearable></el-input>
+                    </el-form-item>
+                    <el-button v-waves type="primary" icon="el-icon-search" size="mini" @click="search()">查询</el-button>
+                </el-form>
             </div>
-        <el-table :data="datas" border ref="table" @current-change="choose" show-overflow-tooltip>
+            <el-table :data="datas" ref="table" @current-change="choose" show-overflow-tooltip>
                 <el-table-column label="选择" width="50px">
                     <template #default="scope">
                         <el-radio v-model="chooseId" :label="scope.row.id">
@@ -76,15 +61,17 @@
                     </template>
                 </el-table-column>
             </el-table>
+            <el-row style="margin-top: 20px" type="flex" justify="end">
                 <el-pagination
+                    style="text-align: right"
                     @current-change="handlePageChange"
-            style="text-align: center"
-            background
-            layout="prev, pager, next, total, jumper"
                     :total="total"
+                    layout="prev, pager, next, total, jumper"
                     v-model:current-page="query.pageNum"
                     :page-size="query.pageSize"
-        />
+                ></el-pagination>
+            </el-row>
+        </el-card>
 
         <el-dialog
             width="75%"

mayfly_go_web/src/views/ops/machine/MachineList.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <div class="toolbar">
-            <div style="float: left">
+        <el-card>
+            <div>
                 <el-button v-auth="'machine:add'" type="primary" icon="el-icon-plus" size="mini" @click="openFormDialog(false)" plain>添加</el-button>
                 <el-button
                     v-auth="'machine:update'"
@@ -32,27 +32,25 @@
                     plain
                     >文件</el-button
                 >
-            </div>
-
                 <div style="float: right">
-                <el-select size="mini" v-model="params.projectId" placeholder="请选择项目" @clear="search" filterable clearable>
+                    <el-select size="small" v-model="params.projectId" placeholder="请选择项目" @clear="search" filterable clearable>
                         <el-option v-for="item in projects" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
                     </el-select>
                     <el-input
                         class="ml5"
-                    placeholder="ip"
-                    size="mini"
-                    style="width: 140px"
+                        placeholder="请输入ip"
+                        size="small"
+                        style="width: 300px"
                         v-model="params.ip"
                         @clear="search"
                         plain
                         clearable
                     ></el-input>
-                <el-button class="ml5" @click="search" type="success" icon="el-icon-search" size="mini"></el-button>
+                    <el-button class="ml5" @click="search" type="success" icon="el-icon-search" size="small"></el-button>
                 </div>
             </div>
 
-        <el-table :data="data.list" border stripe style="width: 100%" @current-change="choose">
+            <el-table :data="data.list" stripe style="width: 100%" @current-change="choose">
                 <el-table-column label="选择" width="55px">
                     <template #default="scope">
                         <el-radio v-model="currentId" :label="scope.row.id">
@@ -93,15 +91,16 @@
                     </template>
                 </el-table-column>
             </el-table>
-
+            <el-row style="margin-top: 20px" type="flex" justify="end">
                 <el-pagination
-            style="text-align: center"
-            background
-            layout="prev, pager, next, total, jumper"
+                    style="text-align: right"
                     :total="data.total"
+                    layout="prev, pager, next, total, jumper"
                     v-model:current-page="params.pageNum"
                     :page-size="params.pageSize"
-        />
+                ></el-pagination>
+            </el-row>
+        </el-card>
 
         <machine-edit
             :title="machineEditDialog.title"

mayfly_go_web/src/views/ops/project/ProjectList.vue

@@ -1,7 +1,10 @@
 <template>
     <div class="project-list">
-        <div class="toolbar">
-            <el-button @click="showAddProjectDialog" v-auth="permissions.saveProject" type="primary" icon="el-icon-plus" size="mini">添加</el-button>
+        <el-card>
+            <div>
+                <el-button @click="showAddProjectDialog" v-auth="permissions.saveProject" type="primary" icon="el-icon-plus" size="mini"
+                    >添加</el-button
+                >
                 <el-button
                     @click="showAddProjectDialog(chooseData)"
                     v-auth="permissions.saveProject"
@@ -15,7 +18,9 @@
                     >成员管理</el-button
                 >
 
-            <el-button @click="showEnv(chooseData)" :disabled="chooseId == null" type="info" icon="el-icon-setting" size="mini">环境管理</el-button>
+                <el-button @click="showEnv(chooseData)" :disabled="chooseId == null" type="info" icon="el-icon-setting" size="mini"
+                    >环境管理</el-button
+                >
 
                 <el-button
                     v-auth="permissions.delProject"
@@ -32,15 +37,15 @@
                         class="mr2"
                         placeholder="请输入项目名！"
                         size="small"
-                    style="width: 140px"
+                        style="width: 300px"
                         v-model="query.name"
                         @clear="search"
                         clearable
                     ></el-input>
-                <el-button @click="search" type="success" icon="el-icon-search" size="mini"></el-button>
+                    <el-button @click="search" type="success" icon="el-icon-search" size="small"></el-button>
                 </div>
             </div>
-        <el-table :data="projects" @current-change="choose" border ref="table" style="width: 100%">
+            <el-table :data="projects" @current-change="choose" ref="table" style="width: 100%">
                 <el-table-column label="选择" width="50px">
                     <template #default="scope">
                         <el-radio v-model="chooseId" :label="scope.row.id">
@@ -64,15 +69,17 @@
                 </template>
             </el-table-column> -->
             </el-table>
+            <el-row style="margin-top: 20px" type="flex" justify="end">
                 <el-pagination
+                    style="text-align: right"
                     @current-change="handlePageChange"
-            style="text-align: center"
-            background
-            layout="prev, pager, next, total, jumper"
                     :total="total"
+                    layout="prev, pager, next, total, jumper"
                     v-model:current-page="query.pageNum"
                     :page-size="query.pageSize"
-        />
+                ></el-pagination>
+            </el-row>
+        </el-card>
 
         <el-dialog width="400px" title="项目编辑" :before-close="cancelAddProject" v-model="addProjectDialog.visible">
             <el-form :model="addProjectDialog.form" size="small" label-width="70px">

mayfly_go_web/src/views/ops/redis/DataOperation.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="toolbar">
+        <el-card>
             <div style="float: left">
                 <el-row type="flex" justify="space-between">
                     <el-col :span="24">
@@ -41,8 +41,7 @@
                 <!-- <el-button @click="scan()" icon="el-icon-refresh" size="small" plain>刷新</el-button> -->
                 <span>keys: {{ dbsize }}</span>
             </div>
-        </div>
-        <el-table v-loading="loading" :data="keys" border stripe :highlight-current-row="true" style="cursor: pointer">
+            <el-table v-loading="loading" :data="keys" stripe :highlight-current-row="true" style="cursor: pointer">
                 <el-table-column show-overflow-tooltip prop="key" label="key"></el-table-column>
                 <el-table-column prop="type" label="type" width="80"> </el-table-column>
                 <el-table-column prop="ttl" label="ttl(过期时间)" width="120">
@@ -57,6 +56,8 @@
                     </template>
                 </el-table-column>
             </el-table>
+        </el-card>
+
         <div style="text-align: center; margin-top: 10px"></div>
 
         <value-dialog v-model:visible="valueDialog.visible" :keyValue="valueDialog.value" />

mayfly_go_web/src/views/ops/redis/RedisList.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="toolbar">
+        <el-card>
             <el-button type="primary" icon="el-icon-plus" size="mini" @click="editRedis(true)" plain>添加</el-button>
             <el-button type="primary" icon="el-icon-edit" :disabled="currentId == null" size="mini" @click="editRedis(false)" plain>编辑</el-button>
             <el-button type="danger" icon="el-icon-delete" :disabled="currentId == null" size="mini" @click="deleteRedis" plain>删除</el-button>
@@ -12,10 +12,9 @@
                 <el-select v-model="query.projectId" placeholder="请选择项目" filterable clearable size="small">
                     <el-option v-for="item in projects" :key="item.id" :label="`${item.name} [${item.remark}]`" :value="item.id"> </el-option>
                 </el-select>
-                <el-button class="ml5" @click="search" type="success" icon="el-icon-search" size="mini"></el-button>
+                <el-button class="ml5" @click="search" type="success" icon="el-icon-search" size="small"></el-button>
             </div>
-        </div>
-        <el-table :data="redisTable" stripe style="width: 100%" @current-change="choose">
+            <el-table :data="redisTable" style="width: 100%" @current-change="choose">
                 <el-table-column label="选择" width="50px">
                     <template #default="scope">
                         <el-radio v-model="currentId" :label="scope.row.id">
@@ -39,15 +38,17 @@
                     </template>
                 </el-table-column>
             </el-table>
+            <el-row style="margin-top: 20px" type="flex" justify="end">
                 <el-pagination
+                    style="text-align: right"
                     @current-change="handlePageChange"
-            style="text-align: center"
-            background
-            layout="prev, pager, next, total, jumper"
                     :total="total"
+                    layout="prev, pager, next, total, jumper"
                     v-model:current-page="query.pageNum"
                     :page-size="query.pageSize"
-        />
+                ></el-pagination>
+            </el-row>
+        </el-card>
 
         <info v-model:visible="infoDialog.visible" :title="infoDialog.title" :info="infoDialog.info"></info>
 

mayfly_go_web/src/views/system/account/AccountList.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="role-list">
-        <div class="toolbar">
+        <el-card>
             <el-button v-auth="'account:add'" type="primary" icon="el-icon-plus" size="mini" @click="editAccount(true)">添加</el-button>
             <el-button
                 v-auth="'account:update'"
@@ -22,15 +22,14 @@
                     class="mr2"
                     placeholder="请输入账号名"
                     size="small"
-                    style="width: 140px"
+                    style="width: 300px"
                     v-model="query.username"
                     @clear="search()"
                     clearable
                 ></el-input>
-                <el-button @click="search()" type="success" icon="el-icon-search" size="mini"></el-button>
+                <el-button @click="search()" type="success" icon="el-icon-search" size="small"></el-button>
             </div>
-        </div>
-        <el-table :data="datas" border ref="table" @current-change="choose" show-overflow-tooltip>
+            <el-table :data="datas" ref="table" @current-change="choose" show-overflow-tooltip>
                 <el-table-column label="选择" width="50px">
                     <template #default="scope">
                         <el-radio v-model="chooseId" :label="scope.row.id">
@@ -98,15 +97,17 @@
                     </template>
                 </el-table-column>
             </el-table>
+            <el-row style="margin-top: 20px" type="flex" justify="end">
                 <el-pagination
+                    style="text-align: right"
                     @current-change="handlePageChange"
-            style="text-align: center"
-            background
-            layout="prev, pager, next, total, jumper"
                     :total="total"
+                    layout="prev, pager, next, total, jumper"
                     v-model:current-page="query.pageNum"
                     :page-size="query.pageSize"
-        />
+                ></el-pagination>
+            </el-row>
+        </el-card>
 
         <el-dialog width="500px" :title="showRoleDialog.title" v-model="showRoleDialog.visible">
             <el-table border :data="showRoleDialog.accountRoles">

mayfly_go_web/src/views/system/role/RoleList.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="role-list">
-        <div class="toolbar">
+        <el-card>
             <el-button v-auth="'role:add'" type="primary" icon="el-icon-plus" size="mini" @click="editRole(false)">添加</el-button>
             <el-button
                 v-auth="'role:update'"
@@ -31,11 +31,18 @@
             >
 
             <div style="float: right">
-                <el-input placeholder="请输入角色名称！" size="small" style="width: 140px" v-model="query.name" @clear="search" clearable></el-input>
-                <el-button @click="search" type="success" icon="el-icon-search" size="mini"></el-button>
+                <el-input
+                    placeholder="请输入角色名称！"
+                    class="mr2"
+                    size="small"
+                    style="width: 300px"
+                    v-model="query.name"
+                    @clear="search"
+                    clearable
+                ></el-input>
+                <el-button @click="search" type="success" icon="el-icon-search" size="small"></el-button>
             </div>
-        </div>
-        <el-table :data="roles" @current-change="choose" border ref="table" style="width: 100%">
+            <el-table :data="roles" @current-change="choose" ref="table" style="width: 100%">
                 <el-table-column label="选择" width="50px">
                     <template #default="scope">
                         <el-radio v-model="chooseId" :label="scope.row.id">
@@ -62,15 +69,17 @@
                     </template>
                 </el-table-column>
             </el-table>
+            <el-row style="margin-top: 20px" type="flex" justify="end">
                 <el-pagination
+                    style="text-align: right"
                     @current-change="handlePageChange"
-            style="text-align: center"
-            background
-            layout="prev, pager, next, total, jumper"
                     :total="total"
+                    layout="prev, pager, next, total, jumper"
                     v-model:current-page="query.pageNum"
                     :page-size="query.pageSize"
-        />
+                ></el-pagination>
+            </el-row>
+        </el-card>
 
         <role-edit :title="roleEdit.title" v-model:visible="roleEdit.visible" :data="roleEdit.role" @val-change="roleEditChange" />
         <resource-edit