fix: reorganize social status dialog layout and enhance status display

This commit is contained in:
pa
2025-12-15 10:34:03 +09:00
committed by Natsumi
parent 1dbd1bae58
commit 7e647cd1eb

View File

@@ -6,22 +6,14 @@
append-to-body append-to-body
width="400px"> width="400px">
<div v-loading="socialStatusDialog.loading"> <div v-loading="socialStatusDialog.loading">
<el-collapse style="border: 0"> <el-select v-model="socialStatusDialog.status" style="margin-top: 10px">
<el-collapse-item> <template #prefix>
<template #title> <i v-if="socialStatusDialog.status === 'join me'" class="x-user-status joinme"></i>
<span style="font-size: 16px">{{ t('dialog.social_status.history') }}</span> <i v-else-if="socialStatusDialog.status === 'active'" class="x-user-status online"></i>
</template> <i v-else-if="socialStatusDialog.status === 'ask me'" class="x-user-status askme"></i>
<DataTable <i v-else-if="socialStatusDialog.status === 'busy'" class="x-user-status busy"></i>
v-bind="socialStatusHistoryTable" <i v-else-if="socialStatusDialog.status === 'offline'" class="x-user-status offline"></i>
style="cursor: pointer" </template>
@row-click="setSocialStatusFromHistory">
<el-table-column :label="t('table.social_status.no')" prop="no" width="50"></el-table-column>
<el-table-column :label="t('table.social_status.status')" prop="status"></el-table-column>
</DataTable>
</el-collapse-item>
</el-collapse>
<el-select v-model="socialStatusDialog.status" style="display: block; margin-top: 10px">
<el-option :label="t('dialog.user.status.join_me')" value="join me"> <el-option :label="t('dialog.user.status.join_me')" value="join me">
<i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }} <i class="x-user-status joinme"></i> {{ t('dialog.user.status.join_me') }}
</el-option> </el-option>
@@ -45,7 +37,21 @@
maxlength="32" maxlength="32"
show-word-limit show-word-limit
clearable clearable
style="display: block; margin-top: 10px"></el-input> style="margin-top: 10px"></el-input>
<el-collapse style="border: 0">
<el-collapse-item>
<template #title>
<span class="text-sm">{{ t('dialog.social_status.history') }}</span>
</template>
<DataTable
v-bind="socialStatusHistoryTable"
style="cursor: pointer"
@row-click="setSocialStatusFromHistory">
<el-table-column :label="t('table.social_status.no')" prop="no" width="50"></el-table-column>
<el-table-column :label="t('table.social_status.status')" prop="status"></el-table-column>
</DataTable>
</el-collapse-item>
</el-collapse>
</div> </div>
<template #footer> <template #footer>
@@ -110,3 +116,12 @@
}); });
} }
</script> </script>
<style scoped>
:deep(.el-collapse-item__header) {
border-bottom: none;
}
:deep(.el-collapse-item__wrap) {
border-bottom: none;
}
</style>