feat: improve UI and functionality across team raid and snapshot components

Author: Kaviilee

src/assets/css/team/dkp/dkp_list.less

@@ -17,7 +17,7 @@
     --el-table-header-bg-color: @team-surface-muted;
     --el-table-row-hover-bg-color: #fafbff;
 
-    th.el-table__cell {
+    :deep(th.el-table__cell) {
         height: 44px;
         padding: 0;
         background: @team-surface-muted;
@@ -27,9 +27,24 @@
         text-align: left;
     }
 
-    td.el-table__cell {
+    :deep(td.el-table__cell) {
         height: 58px;
         padding: 6px 0;
+        vertical-align: middle;
+    }
+
+    :deep(th.el-table__cell > .cell),
+    :deep(td.el-table__cell > .cell) {
+        display: flex;
+        align-items: center;
+    }
+
+    :deep(th.el-table__cell > .cell) {
+        min-height: 44px;
+    }
+
+    :deep(td.el-table__cell > .cell) {
+        min-height: 46px;
     }
 
     .u-character-logo {

src/assets/css/team/dkp/dkp_logs.less

@@ -102,12 +102,23 @@
         td.el-table__cell {
             height: 58px;
             padding: 6px 0;
+            vertical-align: middle;
         }
 
         .cell {
+            display: flex;
+            align-items: center;
             line-height: 28px;
         }
 
+        th.el-table__cell > .cell {
+            min-height: 44px;
+        }
+
+        td.el-table__cell > .cell {
+            min-height: 46px;
+        }
+
         .u-character-logo {
             width: 28px;
             height: 28px;

src/assets/css/team/raid/form_dialog.less

@@ -109,12 +109,8 @@
         margin-bottom: @team-space-2;
         gap: @team-space-2;
 
-        h4,
-        span {
-            margin: 0;
-        }
-
         h4 {
+            margin: 0;
             display: inline-flex;
             align-items: center;
             color: @team-text-primary;
@@ -130,11 +126,6 @@
                 background: @team-primary;
             }
         }
-
-        span {
-            color: @team-text-muted;
-            font-size: 11px;
-        }
     }
 }
 

src/assets/css/team/raid/manage_raid.less

@@ -3,6 +3,10 @@
 .v-raid-list {
     min-width: 0;
 
+    .u-create-button i {
+        margin-right: 5px;
+    }
+
     .m-raid-embedded-header {
         display: flex;
         align-items: flex-start;
@@ -237,6 +241,13 @@
         .u-edit {
             border-color: fade(@team-primary, 28%);
             color: @team-primary;
+
+            &:hover,
+            &:focus {
+                border-color: @team-primary;
+                background: @team-primary;
+                color: #fff;
+            }
         }
 
         .u-more {

src/assets/css/team/snapshot/body.less

@@ -62,6 +62,16 @@
     .u-col {
         min-width: 0;
         min-height: @row-height;
+        border-right: 1px solid fade(@team-primary, 14%);
+        border-bottom: 1px solid fade(@team-primary, 12%);
+
+        &:nth-child(5n) {
+            border-bottom: 0;
+        }
+
+        &:nth-child(n + 21) {
+            border-right: 0;
+        }
     }
 
     .u-item {
@@ -72,8 +82,6 @@
         min-width: 0;
         align-items: center;
         padding: 0 @team-space-3;
-        border-right: 1px solid fade(@team-primary, 14%);
-        border-bottom: 1px solid fade(@team-primary, 12%);
         background: @team-surface;
         cursor: pointer;
         gap: @team-space-2;
@@ -115,9 +123,20 @@
 
         .u-item {
             height: 48px;
+            border-radius: 0;
+        }
+
+        .u-col {
             border-right: 1px solid fade(@team-primary, 14%);
             border-bottom: 1px solid fade(@team-primary, 12%);
-            border-radius: 0;
+
+            &:nth-child(5n) {
+                border-bottom: 1px solid fade(@team-primary, 12%);
+            }
+
+            &:nth-child(n + 21) {
+                border-right: 1px solid fade(@team-primary, 14%);
+            }
         }
     }
 }

src/components/team/raid/RaidFormDialog.vue

@@ -22,7 +22,6 @@
                 <section class="m-raid-form-section">
                     <header>
                         <h4>{{ $t("team.raid.form.basic") }}</h4>
-                        <span>{{ $t(isEdit ? "team.raid.form.editHint" : "team.raid.form.createHint") }}</span>
                     </header>
                     <div class="m-raid-form-grid">
                         <el-form-item :label="$t('team.raid.form.team')" prop="team_id">
@@ -126,7 +125,6 @@
                 <section class="m-raid-form-section">
                     <header>
                         <h4>{{ $t("team.raid.form.signup") }}</h4>
-                        <span>{{ $t("team.raid.form.signupHint") }}</span>
                     </header>
                     <el-form-item :label="$t('team.raid.form.condition')" prop="auth" class="u-auth-options">
                         <el-radio-group v-model.number="form.auth">
@@ -164,7 +162,6 @@
                 <section class="m-raid-form-section">
                     <header>
                         <h4>{{ $t("team.raid.form.notes") }}</h4>
-                        <span>{{ $t("team.raid.form.notesHint") }}</span>
                     </header>
                     <el-form-item prop="desc" class="u-desc-field">
                         <el-input

src/components/team/snapshot/EditSnapshotDialog.vue

@@ -32,18 +32,25 @@
                         <h3>{{ $t("team.snapshotEdit.participants") }}</h3>
                         <p>{{ $t("team.snapshotEdit.participantHint") }}</p>
                     </div>
-                    <span>{{ $t("team.snapshotEdit.people", { count: list.length }) }}</span>
+                    <span>{{ $t("team.snapshotEdit.people", { count: memberCount }) }}</span>
                 </div>
                 <div class="m-snapshot-edit__group-head" :aria-label="$t('team.snapshotEdit.groupAria')">
                     <span v-for="group in 5" :key="group">{{ $t("team.snapshotEdit.group", { group }) }}</span>
                 </div>
-                <VueDraggable v-model="list" class="m-snapshot-edit__member-list">
-                    <div v-for="(item, index) in list" :key="dragKey(item, 'snapshot-dialog-role')" class="u-member">
-                        <img :src="showMountIcon(item[3])" alt="" />
-                        <span>{{ item[0] }}</span>
-                        <button type="button" :aria-label="$t('team.snapshotEdit.remove')" @click.stop="delRole(index)">
-                            <i class="el-icon-close"></i>
-                        </button>
+                <VueDraggable v-model="list" class="m-snapshot-edit__member-list" :animation="150">
+                    <div
+                        v-for="(item, index) in list"
+                        :key="dragKey(item, 'snapshot-dialog-role')"
+                        class="u-member"
+                        :class="{ 'is-empty': !item[0] }"
+                    >
+                        <template v-if="item[0]">
+                            <img :src="showMountIcon(item[3])" alt="" />
+                            <span>{{ item[0] }}</span>
+                            <button type="button" :aria-label="$t('team.snapshotEdit.remove')" @click.stop="delRole(index)">
+                                <i class="el-icon-close"></i>
+                            </button>
+                        </template>
                     </div>
                 </VueDraggable>
                 <div class="m-snapshot-edit__role-adder">
@@ -118,6 +125,14 @@ import { ensureDragKey } from "@/utils/draggable";
 import { showMountIcon } from "@/utils/filters";
 import xfmap from "@jx3box/jx3box-data/data/xf/xf.json";
 
+const SNAPSHOT_SLOT_COUNT = 25;
+const createEmptySlot = () => ["", 0, 0, ""];
+const fillSnapshotSlots = (members = []) => {
+    const slots = members.slice(0, SNAPSHOT_SLOT_COUNT);
+    while (slots.length < SNAPSHOT_SLOT_COUNT) slots.push(createEmptySlot());
+    return slots;
+};
+
 export default {
     name: "EditSnapshotDialog",
     components: {
@@ -147,7 +162,7 @@ export default {
             },
             selectedTeamId: "",
             teams: [],
-            list: [],
+            list: fillSnapshotSlots(),
             roleForm: {
                 name: "",
                 xf: "",
@@ -184,6 +199,9 @@ export default {
         teammate() {
             return this.list.map((item) => item.join(",")).join(";");
         },
+        memberCount() {
+            return this.list.filter((item) => item[0]).length;
+        },
         xflist() {
             return Object.values(xfmap).filter((item) => item.id !== 0);
         },
@@ -211,6 +229,7 @@ export default {
                 const targetId = Number(this.targetTeamId);
                 const targetTeam = this.teams.find((item) => Number(item.ID) === targetId);
                 this.selectedTeamId = targetTeam ? targetId : this.teams[0]?.ID || "";
+                this.list = fillSnapshotSlots();
             } finally {
                 if (requestId === this.loadRequestId) this.loading = false;
             }
@@ -231,21 +250,24 @@ export default {
                 };
                 this.selectedTeamId = data.team_id;
                 this.teams = teamsRes.data.data.list || [];
-                this.list = (data.teammate || "")
+                const members = (data.teammate || "")
                     .split(";")
                     .filter(Boolean)
                     .map((item) => item.split(","));
+                this.list = fillSnapshotSlots(members);
             } finally {
                 if (requestId === this.loadRequestId) this.loading = false;
             }
         },
         delRole(index) {
-            this.list.splice(index, 1);
+            this.list.splice(index, 1, createEmptySlot());
         },
         addMember() {
             this.$refs.roleForm.validate((valid) => {
                 if (!valid) return;
-                this.list.push([this.roleForm.name, 0, 0, this.roleForm.xf]);
+                const emptyIndex = this.list.findIndex((item) => !item[0]);
+                if (emptyIndex === -1) return;
+                this.list.splice(emptyIndex, 1, [this.roleForm.name, 0, 0, this.roleForm.xf]);
                 this.$refs.roleForm.resetFields();
             });
         },
@@ -283,7 +305,7 @@ export default {
             this.form = { title: "", desc: "" };
             this.selectedTeamId = "";
             this.teams = [];
-            this.list = [];
+            this.list = fillSnapshotSlots();
             this.roleForm = { name: "", xf: "" };
         },
     },

src/components/team/snapshot/snapshotBody.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="m-snapshot-body" v-if="data && data.length">
-        <div class="u-col" v-for="item in data" :key="item.name">
-            <div class="u-item" @click="onCopy(item.name)">
+        <div class="u-col" v-for="(item, index) in data" :key="`${item.name}-${index}`">
+            <div v-if="item.name" class="u-item" @click="onCopy(item.name)">
                 <img class="u-icon" :src="showMountIcon(item.mount)" />
                 <span class="u-name">{{ item.name }}</span>
             </div>

src/components/team/snapshot/snapshotChart.vue

@@ -175,6 +175,7 @@ export default {
 
                     teammate.forEach((mate) => {
                         const [name, , , mount] = mate.split(",");
+                        if (!name) return;
                         // 统计心法次数
                         if (!pieData[mount]) {
                             pieData[mount] = 1;

src/components/team/snapshot/snapshotDetail.vue

@@ -27,7 +27,7 @@
                         <div class="u-record-meta">
                             <span><Clock />{{ showTime(item.created_at) }}</span>
                             <span><User />{{ uploaderName(item) }}</span>
-                            <span><UserFilled />{{ $t("team.snapshotEdit.people", { count: formatTeammate(item.teammate).length }) }}</span>
+                            <span><UserFilled />{{ $t("team.snapshotEdit.people", { count: formatTeammate(item.teammate).filter((member) => member.name).length }) }}</span>
                         </div>
                     </div>
                     <el-button class="u-view-team" plain icon="Camera" @click="openRoster(item)">{{ $t("team.snapshotEdit.viewRoster") }}</el-button>