diff --git a/resources/assets/js/pages/manage/components/CommonDialogModal.vue b/resources/assets/js/pages/manage/components/CommonDialogModal.vue
new file mode 100644
index 000000000..0f57e0eb0
--- /dev/null
+++ b/resources/assets/js/pages/manage/components/CommonDialogModal.vue
@@ -0,0 +1,131 @@
+<template>
+    <Modal v-model="visibleProxy" :title="$L('共同群组') + ' (' + $L('(*)个', totalCount) + ')'" :footer-hide="true" width="500">
+        <div class="common-dialog-content">
+            <div v-if="loading > 0 && list.length === 0" class="loading-wrapper">
+                <Loading/>
+            </div>
+            <div v-else-if="list.length === 0" class="empty-wrapper">
+                <div class="empty-content">
+                    <Icon type="ios-people-outline" size="48"/>
+                    <p>{{$L('暂无共同群组')}}</p>
+                </div>
+            </div>
+            <div v-else class="dialog-list">
+                <div
+                    v-for="dialog in list"
+                    :key="dialog.id"
+                    class="dialog-item"
+                    @click="onEnterDialog(dialog)">
+                    <div class="dialog-avatar">
+                        <EAvatar v-if="dialog.avatar" :src="dialog.avatar" :size="42"></EAvatar>
+                        <i v-else-if="dialog.group_type=='department'" class="taskfont icon-avatar department">&#xe75c;</i>
+                        <i v-else-if="dialog.group_type=='project'" class="taskfont icon-avatar project">&#xe6f9;</i>
+                        <i v-else-if="dialog.group_type=='task'" class="taskfont icon-avatar task">&#xe6f4;</i>
+                        <i v-else-if="dialog.group_type=='okr'" class="taskfont icon-avatar task">&#xe6f4;</i>
+                        <Icon v-else class="icon-avatar" type="ios-people" />
+                    </div>
+                    <div class="dialog-info">
+                        <div class="dialog-name" v-html="transformEmojiToHtml(dialog.name)"></div>
+                        <div class="dialog-meta">
+                            <span class="member-count">{{$L('(*)人', dialog.people || 0)}}</span>
+                            <span v-if="dialog.last_at" class="last-time">{{$A.timeFormat(dialog.last_at)}}</span>
+                        </div>
+                    </div>
+                    <Icon class="enter-icon" type="ios-arrow-forward" />
+                </div>
+                <div v-if="hasMore" class="load-more-wrapper">
+                    <Button type="primary" @click="loadList(true)" :loading="loading > 0">{{$L('加载更多')}}</Button>
+                </div>
+            </div>
+        </div>
+    </Modal>
+</template>
+
+<script>
+import transformEmojiToHtml from "../../../utils/emoji";
+
+export default {
+    name: 'CommonDialogModal',
+
+    props: {
+        value: { // v-model
+            type: Boolean,
+            default: false,
+        },
+        targetUserId: {
+            type: [Number, String],
+            required: true,
+        },
+        totalCount: {
+            type: [Number, String],
+            default: 0,
+        },
+    },
+
+    data() {
+        return {
+            list: [],
+            page: 1,
+            hasMore: false,
+            loading: 0,
+        }
+    },
+
+    computed: {
+        visibleProxy: {
+            get() { return this.value; },
+            set(v) { this.$emit('input', v); }
+        }
+    },
+
+    watch: {
+        visibleProxy(val) {
+            if (val && this.list.length === 0) {
+                this.loadList(false);
+            }
+        },
+        targetUserId() {
+            // reset when user changes
+            this.list = [];
+            this.page = 1;
+            this.hasMore = false;
+        }
+    },
+
+    methods: {
+        transformEmojiToHtml,
+
+        loadList(loadMore = false) {
+            if (!this.targetUserId) return;
+            this.loading++;
+            const page = loadMore ? this.page + 1 : 1;
+            this.$store.dispatch('call', {
+                url: 'dialog/common/list',
+                data: {
+                    target_userid: this.targetUserId,
+                    page
+                }
+            }).then(({data}) => {
+                const newList = loadMore ? [...this.list, ...data.data] : data.data;
+                this.list = Array.isArray(newList) ? newList : [];
+                this.page = data.current_page || page;
+                this.hasMore = !!data.next_page_url;
+            }).catch(({msg}) => {
+                $A.modalError(msg || this.$L('加载失败'));
+            }).finally(() => {
+                this.loading--;
+            });
+        },
+
+        onEnterDialog(dialog) {
+            this.$emit('open-chat', dialog);
+        }
+    }
+}
+</script>
+
+<style scoped>
+/* 组件自身不引入额外样式，复用全局样式类名 */
+</style>
+
+
diff --git a/resources/assets/js/pages/manage/components/UserDetail.vue b/resources/assets/js/pages/manage/components/UserDetail.vue
index 179932dcc..524de7d17 100755
--- a/resources/assets/js/pages/manage/components/UserDetail.vue
+++ b/resources/assets/js/pages/manage/components/UserDetail.vue
@@ -5,149 +5,162 @@
         :fullscreen="isFullscreen"
         :mask-closable="false"
         :footer-hide="true"
-        width="600">
+        width="420"
+    >
         <div class="user-detail-body">
-            <UserAvatar
-                :userid="userData.userid"
-                :size="120"
-                :show-state-dot="false"
-                @on-click="onOpenAvatar"/>
-            <ul class="user-select-auto">
-                <li class="user-name">
-                    <h1>{{userData.nickname}}</h1>
-                    <em v-if="userData.delete_at" class="deleted no-dark-content">{{$L('已删除')}}</em>
-                    <em v-else-if="userData.disable_at" class="disabled no-dark-content">{{$L('已离职')}}</em>
-                </li>
-                <li v-if="userData.userid != userId && commonDialog.total !== null">
-                    <span>{{$L('共同群聊')}}: </span>
-                    <a href="javascript:void(0)" @click="commonDialogShow=true">{{ $L('(*)个', commonDialog.total) }}</a>
-                </li>
-                <template v-if="!userData.bot">
-                    <li>
-                        <span>{{$L('部门')}}: </span>
-                        {{userData.department_name || '-'}}
-                    </li>
-                    <li>
-                        <span>{{$L('职位/职称')}}: </span>
-                        {{userData.profession || '-'}}
-                    </li>
-                    <li>
-                        <span>{{$L('生日')}}: </span>
-                        {{userData.birthday ? ($A.newDateString(userData.birthday, 'YYYY-MM-DD') || userData.birthday) : '-'}}
-                    </li>
-                    <li>
-                        <span>{{$L('地址')}}: </span>
-                        {{userData.address || '-'}}
-                    </li>
-                    <li>
-                        <span>{{$L('个人简介')}}: </span>
-                        {{userData.introduction || '-'}}
-                    </li>
-                    <li class="user-tags-line">
-                        <span>{{$L('个性标签')}}: </span>
-                        <div class="tags-content" @click="onOpenTagsModal">
-                            <div v-if="displayTags.length" class="tags-list">
-                                <Tag
-                                    v-for="tag in displayTags"
-                                    :key="tag.id"
-                                    :color="tag.recognized ? 'primary' : 'default'"
-                                    class="tag-pill">{{tag.name}}</Tag>
-                            </div>
-                            <span v-else class="tags-empty">{{$L('暂无个性标签')}}</span>
-                            <div class="tags-extra">
-                                <span v-if="personalTagTotal > displayTags.length" class="tags-total">{{$L('共(*)个', personalTagTotal)}}</span>
-                                <Button type="text" size="small" class="manage-button" @click.stop="onOpenTagsModal">{{$L('管理')}}</Button>
-                            </div>
+            <div class="profile-header">
+                <div class="cover-photo"></div>
+                <div class="profile-avatar">
+                    <UserAvatar
+                        :userid="userData.userid"
+                        :size="80"
+                        :show-state-dot="false"
+                        @on-click="onOpenAvatar"
+                    />
+                </div>
+            </div>
+            <div class="profile-content">
+                <div class="user-info-top">
+                    <span class="username"
+                        >@{{ userData.profession || "管理员" }}</span
+                    >
+                    <h1 class="fullname">
+                        {{ userData.nickname}}
+                    </h1>
+                    <div class="meta">
+                        <!-- <span>{{userData.address || 'Bandung'}}</span> -->
+                        <span @click="commonDialogShow = true"
+                            class="common-dialog"
+                            >{{ $L("共同群组") }}:
+                            {{ $L("(*)个", commonDialog.total) }}</span
+                        >
+                        <span class="separator">|</span>
+                        <span
+                            >{{ $L("最后在线") }}:
+                            {{
+                                $A.newDateString(
+                                    userData.line_at,
+                                    "YYYY-MM-DD HH:mm"
+                                ) || "-"
+                            }}</span
+                        >
+                    </div>
+                </div>
+
+                <div class="profile-actions">
+                    <Button
+                        icon="md-chatbubbles"
+                        @click="onOpenDialog"
+                        >{{ $L("开始聊天") }}</Button
+                    >
+                    <Button
+                        icon="md-people"
+                        @click="onCreateGroup"
+                        >{{ $L("创建群组") }}</Button
+                    >
+                </div>
+
+                <div class="profile-bio">
+                    <p>{{ userData.introduction }}</p>
+                </div>
+
+                <div class="profile-information">
+                    <h2>{{ $L("个人信息") }}</h2>
+                    <ul>
+                        <li>
+                            <Icon type="ios-person-outline" />
+                            <span class="label">{{ $L("部门") }}</span>
+                            <span class="value">{{
+                                userData.department_name || "-"
+                            }}</span>
+                        </li>
+                        <li>
+                            <Icon type="ios-mail-outline" />
+                            <span class="label">{{ $L("邮箱") }}</span>
+                            <span class="value">{{
+                                userData.email || "-"
+                            }}</span>
+                        </li>
+                        <li>
+                            <Icon type="ios-call-outline" />
+                            <span class="label">{{ $L("电话") }}</span>
+                            <span class="value">{{ userData.tel || "-" }}</span>
+                        </li>
+                        <li>
+                            <Icon type="ios-calendar-outline" />
+                            <span class="label">{{ $L("生日") }}</span>
+                            <span class="value">{{
+                                userData.birthday || "-"
+                            }}</span>
+                        </li>
+                    </ul>
+
+                    <div class="profile-tags" @click.capture="onOpenTagsModal">
+                        <div v-if="displayTags.length" class="tags-list">
+                            <Button
+                                type="dashed"
+                                class="manage-tags-btn icon"
+                                @click.stop="onOpenTagsModal"
+                            >
+                                <Icon type="ios-settings-outline" /> 管理
+                            </Button>
+                            <Button
+                                v-for="tag in displayTags"
+                                :key="tag.id"
+                                :type="tag.recognized ? 'primary' : 'default'"
+                            >
+                                {{ tag.name }}
+                            </Button>
                         </div>
-                    </li>
-                    <li>
-                        <span>{{$L('最后在线')}}: </span>
-                        {{$A.newDateString(userData.line_at, 'YYYY-MM-DD HH:mm') || '-'}}
-                    </li>
-                    <li v-if="userData.delete_at">
-                        <strong><span>{{$L('删除时间')}}: </span>{{$A.newDateString(userData.delete_at, 'YYYY-MM-DD HH:mm')}}</strong>
-                    </li>
-                    <li v-else-if="userData.disable_at">
-                        <strong><span>{{$L('离职时间')}}: </span>{{$A.newDateString(userData.disable_at, 'YYYY-MM-DD HH:mm')}}</strong>
-                    </li>
-                </template>
-            </ul>
-            <div class="user-detail-actions">
-                <Button icon="md-chatbubbles" :disabled="!!userData.delete_at" @click="onOpenDialog">{{ $L('开始聊天') }}</Button>
-                <Button icon="md-people" :disabled="!!userData.delete_at" @click="onOpenCreateGroup">{{ $L('创建群组') }}</Button>
+                        <div v-else class="tags-empty">
+                            <Button
+                                type="dashed"
+                                size="small"
+                                icon="md-add"
+                                class="add-tag-btn"
+                                @click.stop="onOpenTagsModal"
+                                >{{ $L("添加标签") }}</Button
+                            >
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
-
-        <!-- 共同群组 -->
-        <Modal v-model="commonDialogShow" :title="$L('共同群组') + ' (' + $L('(*)个', commonDialog.total) + ')'" :footer-hide="true" width="500">
-            <div class="common-dialog-content">
-                <div v-if="commonDialogLoading > 0 && commonDialog.list.length === 0" class="loading-wrapper">
-                    <Loading/>
-                </div>
-                <div v-else-if="commonDialogList.length === 0" class="empty-wrapper">
-                    <div class="empty-content">
-                        <Icon type="ios-people-outline" size="48"/>
-                        <p>{{$L('暂无共同群组')}}</p>
-                    </div>
-                </div>
-                <div v-else class="dialog-list">
-                    <div
-                        v-for="dialog in commonDialogList"
-                        :key="dialog.id"
-                        class="dialog-item"
-                        @click="onOpenCommonDialogChat(dialog)">
-                        <div class="dialog-avatar">
-                            <EAvatar v-if="dialog.avatar" :src="dialog.avatar" :size="42"></EAvatar>
-                            <i v-else-if="dialog.group_type=='department'" class="taskfont icon-avatar department">&#xe75c;</i>
-                            <i v-else-if="dialog.group_type=='project'" class="taskfont icon-avatar project">&#xe6f9;</i>
-                            <i v-else-if="dialog.group_type=='task'" class="taskfont icon-avatar task">&#xe6f4;</i>
-                            <i v-else-if="dialog.group_type=='okr'" class="taskfont icon-avatar task">&#xe6f4;</i>
-                            <Icon v-else class="icon-avatar" type="ios-people" />
-                        </div>
-                        <div class="dialog-info">
-                            <div class="dialog-name" v-html="transformEmojiToHtml(dialog.name)"></div>
-                            <div class="dialog-meta">
-                                <span class="member-count">{{$L('(*)人', dialog.people || 0)}}</span>
-                                <span v-if="dialog.last_at" class="last-time">{{$A.timeFormat(dialog.last_at)}}</span>
-                            </div>
-                        </div>
-                        <Icon class="enter-icon" type="ios-arrow-forward" />
-                    </div>
-                    <div v-if="commonDialog.has_more" class="load-more-wrapper">
-                        <Button type="primary" @click="loadCommonDialogList(true)" :loading="commonDialogLoading > 0">{{$L('加载更多')}}</Button>
-                    </div>
-                </div>
-            </div>
-        </Modal>
         <UserTagsModal
             v-if="userData.userid"
             v-model="tagModalVisible"
             :userid="userData.userid"
-            @updated="onTagsUpdated"/>
+            @updated="onTagsUpdated"
+        />
+
+        <CommonDialogModal
+            v-model="commonDialogShow"
+            :target-user-id="userData.userid"
+            :total-count="commonDialog.total || 0"
+            @open-chat="onOpenCommonDialogChat"
+        />
     </ModalAlive>
 </template>
 
 <script>
 import emitter from "../../../store/events";
+import { mapState } from "vuex";
 import transformEmojiToHtml from "../../../utils/emoji";
-import {mapState} from "vuex";
 import UserTagsModal from "./UserTagsModal.vue";
+import CommonDialogModal from "./CommonDialogModal.vue";
 
 export default {
-    name: 'UserDetail',
+    name: "UserDetail",
 
-    components: {UserTagsModal},
+    components: { UserTagsModal, CommonDialogModal },
 
     data() {
         return {
             userData: {
-                userid: 0
+                userid: 0,
             },
-
             showModal: false,
-
             tagModalVisible: false,
-
             commonDialog: {
                 userid: null,
                 total: null,
@@ -157,105 +170,111 @@ export default {
             },
             commonDialogShow: false,
             commonDialogLoading: 0,
-        }
+        };
     },
 
     mounted() {
-        emitter.on('openUser', this.onShow);
+        emitter.on("openUser", this.onShow);
     },
 
     beforeDestroy() {
-        emitter.off('openUser', this.onShow);
+        emitter.off("openUser", this.onShow);
     },
 
     watch: {
-        ...mapState(['cacheUserBasic']),
+        ...mapState(["cacheUserBasic"]),
 
         commonDialogShow() {
             if (!this.commonDialogShow || this.commonDialog.list.length > 0) {
                 return;
             }
             this.loadCommonDialogList(false);
-        }
+        },
     },
 
     computed: {
-        isFullscreen({windowWidth}) {
-            return windowWidth < 576
+        isFullscreen({ windowWidth }) {
+            return windowWidth < 576;
+        },
+
+        displayTags() {
+            return Array.isArray(this.userData.personal_tags)
+                ? this.userData.personal_tags
+                : [];
+        },
+
+        personalTagTotal() {
+            if (typeof this.userData.personal_tags_total === "number") {
+                return this.userData.personal_tags_total;
+            }
+            return this.displayTags.length;
         },
 
         commonDialogList() {
             return this.commonDialog.list || [];
         },
-
-        displayTags() {
-            return Array.isArray(this.userData.personal_tags) ? this.userData.personal_tags : [];
-        },
-
-        personalTagTotal() {
-            if (typeof this.userData.personal_tags_total === 'number') {
-                return this.userData.personal_tags_total;
-            }
-            return this.displayTags.length;
-        }
     },
 
     methods: {
         transformEmojiToHtml,
-
         onShow(userid) {
             if (!/^\d+$/.test(userid)) {
-                return
+                return;
             }
-            this.$store.dispatch("showSpinner", 600)
-            this.$store.dispatch('getUserData', userid).then(user => {
-                this.userData = user;
-                this.ensureTagDefaults();
-                this.showModal = true;
-                this.loadCommonDialogCount()
-            }).finally(_ => {
-                this.$store.dispatch("hiddenSpinner")
-            });
+            this.$store.dispatch("showSpinner", 600);
+            this.$store
+                .dispatch("getUserData", userid)
+                .then((user) => {
+                    this.userData = user;
+                    this.ensureTagDefaults();
+                    this.showModal = true;
+                    this.loadCommonDialogCount();
+                })
+                .finally((_) => {
+                    this.$store.dispatch("hiddenSpinner");
+                });
         },
 
         onHide() {
-            this.commonDialogShow = false;
             this.showModal = false;
             this.tagModalVisible = false;
+            this.commonDialogShow = false;
         },
 
         onOpenAvatar() {
-            this.$store.dispatch("previewImage", this.userData.userimg)
+            this.$store.dispatch("previewImage", this.userData.userimg);
         },
 
         onOpenDialog() {
-            this.$store.dispatch("openDialogUserid", this.userData.userid).then(_ => {
-                this.onHide()
-            }).catch(({msg}) => {
-                $A.modalError(msg)
-            });
+            this.$store
+                .dispatch("openDialogUserid", this.userData.userid)
+                .then((_) => {
+                    this.onHide();
+                })
+                .catch(({ msg }) => {
+                    $A.modalError(msg);
+                });
         },
 
-        onOpenCreateGroup() {
-            const userids = [];
-            if (this.userId) {
-                userids.push(this.userId);
-            }
-            if (this.userData.userid && this.userData.userid !== this.userId) {
-                userids.push(this.userData.userid);
-            }
-            if (userids.length === 0 && this.userData.userid) {
+        onCreateGroup() {
+            const userids = [this.$store.state.userId];
+            if (this.userData.userid && this.$store.state.userId != this.userData.userid) {
                 userids.push(this.userData.userid);
             }
             emitter.emit('createGroup', userids);
+            this.onHide();
         },
 
         ensureTagDefaults() {
             if (!Array.isArray(this.userData.personal_tags)) {
-                this.$set(this.userData, 'personal_tags', []);
+                this.$set(this.userData, "personal_tags", []);
             }
-            if (typeof this.userData.personal_tags_total !== 'number') {
-                this.$set(this.userData, 'personal_tags_total', this.userData.personal_tags.length);
+            if (typeof this.userData.personal_tags_total !== "number") {
+                this.$set(
+                    this.userData,
+                    "personal_tags_total",
+                    this.userData.personal_tags.length
+                );
             }
         },
 
@@ -266,9 +285,19 @@ export default {
             this.tagModalVisible = true;
         },
 
-        onTagsUpdated({top, total}) {
-            this.$set(this.userData, 'personal_tags', Array.isArray(top) ? top : []);
-            this.$set(this.userData, 'personal_tags_total', typeof total === 'number' ? total : this.userData.personal_tags.length);
+        onTagsUpdated({ top, total }) {
+            this.$set(
+                this.userData,
+                "personal_tags",
+                Array.isArray(top) ? top : []
+            );
+            this.$set(
+                this.userData,
+                "personal_tags_total",
+                typeof total === "number"
+                    ? total
+                    : this.userData.personal_tags.length
+            );
         },
 
         loadCommonDialogCount() {
@@ -299,123 +328,90 @@ export default {
 
             const cacheMap = this.$store.state.dialogCommonCountCache || {};
             const cached = cacheMap[String(target_userid)];
-            if (cached && typeof cached.total !== 'undefined') {
+            if (cached && typeof cached.total !== "undefined") {
                 this.commonDialog = {
                     ...this.commonDialog,
                     total: cached.total,
                 };
             }
 
-            this.$store.dispatch('call', {
-                url: 'dialog/common/list',
-                data: {
-                    target_userid,
-                    only_count: 'yes'
-                }
-            }).then(({data}) => {
-                if (target_userid !== this.userData.userid) {
-                    return
-                }
-                const parsedTotal = Number(data.total);
-                const total = Number.isNaN(parsedTotal) ? 0 : parsedTotal;
-                this.commonDialog = {
-                    ...this.commonDialog,
-                    userid: target_userid,
-                    total,
-                    list: [],
-                    page: 1,
-                    has_more: false,
-                };
-                this.$store.commit('common/dialog/count/save', {
-                    userid: target_userid,
-                    total,
+            this.$store
+                .dispatch("call", {
+                    url: "dialog/common/list",
+                    data: {
+                        target_userid,
+                        only_count: "yes",
+                    },
+                })
+                .then(({ data }) => {
+                    if (target_userid !== this.userData.userid) {
+                        return;
+                    }
+                    const parsedTotal = Number(data.total);
+                    const total = Number.isNaN(parsedTotal) ? 0 : parsedTotal;
+                    this.commonDialog = {
+                        ...this.commonDialog,
+                        userid: target_userid,
+                        total,
+                        list: [],
+                        page: 1,
+                        has_more: false,
+                    };
+                    this.$store.commit("common/dialog/count/save", {
+                        userid: target_userid,
+                        total,
+                    });
                 });
-            });
         },
 
         loadCommonDialogList(loadMore = false) {
             this.commonDialogLoading++;
             const target_userid = this.userData.userid;
-            this.$store.dispatch('call', {
-                url: 'dialog/common/list',
-                data: {
-                    target_userid,
-                    page: loadMore ? this.commonDialog.page + 1 : 1
-                }
-            }).then(({data}) => {
-                if (target_userid !== this.userData.userid) {
-                    return;
-                }
-                this.commonDialog = {
-                    ...this.commonDialog,
-                    list: loadMore ? [...this.commonDialog.list, ...data.data] : data.data,
-                    total: data.total,
-                    page: data.current_page,
-                    has_more: !!data.next_page_url
-                }
-            }).catch(({msg}) => {
-                $A.modalError(msg || this.$L('加载失败'));
-            }).finally(() => {
-                this.commonDialogLoading--;
-            });
+            this.$store
+                .dispatch("call", {
+                    url: "dialog/common/list",
+                    data: {
+                        target_userid,
+                        page: loadMore ? this.commonDialog.page + 1 : 1,
+                    },
+                })
+                .then(({ data }) => {
+                    if (target_userid !== this.userData.userid) {
+                        return;
+                    }
+                    this.commonDialog = {
+                        ...this.commonDialog,
+                        list: loadMore
+                            ? [...this.commonDialog.list, ...data.data]
+                            : data.data,
+                        total: data.total,
+                        page: data.current_page,
+                        has_more: !!data.next_page_url,
+                    };
+                })
+                .catch(({ msg }) => {
+                    $A.modalError(msg || this.$L("加载失败"));
+                })
+                .finally(() => {
+                    this.commonDialogLoading--;
+                });
         },
 
         onOpenCommonDialogChat(dialog) {
-            this.$store.dispatch("openDialog", dialog.id).then(() => {
-                this.onHide();
-            }).catch(({msg}) => {
-                $A.modalError(msg);
-            });
+            this.$store
+                .dispatch("openDialog", dialog.id)
+                .then(() => {
+                    this.onHide();
+                })
+                .catch(({ msg }) => {
+                    $A.modalError(msg);
+                });
         },
-    }
+    },
 };
 </script>
 
 <style lang="scss" scoped>
-.user-tags-line {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-
-    span:first-child {
-        flex: 0 0 auto;
-    }
-
-    .tags-content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        gap: 6px;
-        cursor: pointer;
-    }
-
-    .tags-list {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 6px;
-
-        .tag-pill {
-            cursor: pointer;
-        }
-    }
-
-    .tags-empty {
-        color: #909399;
-    }
-
-    .tags-extra {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        .tags-total {
-            color: #909399;
-            font-size: 12px;
-        }
-
-        .manage-button {
-            padding: 0;
-        }
-    }
-}
+// The styles will be moved to the SCSS file as requested.
+// This scoped style block can be removed if not needed for specific overrides.
 </style>
diff --git a/resources/assets/js/pages/manage/components/UserTagsModal.vue b/resources/assets/js/pages/manage/components/UserTagsModal.vue
index 9b0ac968f..61da50424 100644
--- a/resources/assets/js/pages/manage/components/UserTagsModal.vue
+++ b/resources/assets/js/pages/manage/components/UserTagsModal.vue
@@ -43,7 +43,7 @@
                         :class="{'is-editing': editId === tag.id}">
                         <div class="tag-item-main">
                             <div class="tag-name" v-if="editId !== tag.id">
-                                <Tag :color="tag.recognized ? 'primary' : 'default'" class="tag-pill">{{tag.name}}</Tag>
+                                <Tag :color="tag.recognized ? '#84C56A' : 'default'" class="tag-pill">{{tag.name}}</Tag>
                             </div>
                             <div class="tag-name edit" v-else>
                                 <Input
diff --git a/resources/assets/js/pages/manage/setting/personal.vue b/resources/assets/js/pages/manage/setting/personal.vue
index 0a47bc4d4..4ddc1aab1 100644
--- a/resources/assets/js/pages/manage/setting/personal.vue
+++ b/resources/assets/js/pages/manage/setting/personal.vue
@@ -50,7 +50,7 @@
                         <Tag
                             v-for="tag in displayTags"
                             :key="tag.id"
-                            :color="tag.recognized ? 'primary' : 'default'"
+                            :color="tag.recognized ? '#84C56A' : 'default'"
                             class="tag-pill">{{tag.name}}</Tag>
                     </template>
                     <span v-else class="tags-empty">{{$L('暂无个性标签')}}</span>
diff --git a/resources/assets/sass/pages/components/user-detail.scss b/resources/assets/sass/pages/components/user-detail.scss
index ff2a47489..5b014fb94 100755
--- a/resources/assets/sass/pages/components/user-detail.scss
+++ b/resources/assets/sass/pages/components/user-detail.scss
@@ -1,89 +1,144 @@
 .common-user-detail-modal {
-    .ivu-modal {
-        max-width: 90%;
-
-        &.ivu-modal-fullscreen {
-            max-width: none;
-
-            .ivu-modal-content {
-                margin-top: calc(var(--status-bar-height) + 46px);
-                margin-bottom: 0;
-                border-top-left-radius: 18px !important;
-                border-top-right-radius: 18px !important;
-
-                .ivu-modal-body {
-                    .user-detail-body {
-                        padding-bottom: var(--navigation-bar-height);
-                    }
+    .ivu-modal-content {
+        border-radius: 16px !important;
+        margin-top: calc(var(--status-bar-height) + 46px) !important;
+    }
+    .ivu-modal-body {
+        padding: 0 !important;
+    }
+    .user-detail-body {
+        .profile-header {
+            position: relative;
+            height: 160px;
+            .cover-photo {
+                background: $primary-color;
+                height: 120px;
+                border-top-left-radius: 16px;
+                border-top-right-radius: 16px;
+            }
+            .profile-avatar {
+                position: absolute;
+                bottom: 0;
+                left: 50%;
+                transform: translateX(-50%);
+                border: 4px solid #fff;
+                border-radius: 50%;
+                .user-avatar {
+                    display: block;
                 }
             }
         }
+        .profile-content {
+            padding: 16px 24px 24px;
+            text-align: center;
 
-        .user-detail-actions {
-            display: flex;
-            gap: 10px;
-        }
-
-        .ivu-modal-content {
-            overflow: hidden;
-
-            .ivu-modal-body {
-                padding: 0 !important;
-                display: flex;
-                flex-direction: column;
-
-                .user-detail-body {
+            .user-info-top {
+                .username {
+                    color: $primary-desc-color;
+                    font-size: 14px;
+                }
+                .fullname {
+                    font-size: 20px;
+                    font-weight: bold;
+                    margin: 4px 0;
+                }
+                .meta {
                     display: flex;
-                    flex-direction: column;
+                    justify-content: center;
                     align-items: center;
-                    gap: 16px;
-                    padding: 84px 24px;
-
-                    .avatar-wrapper {
+                    color: #808695;
+                    font-size: 12px;
+                    .common-dialog {
                         cursor: pointer;
                     }
+                    .separator {
+                        margin: 0 8px;
+                    }
+                }
+            }
 
-                    > ul {
-                        width: 80%;
+            .profile-actions {
+                margin: 16px 0;
+                display: flex;
+                justify-content: center;
+                gap: 8px;
+            }
 
-                        > li {
-                            list-style: none;
-                            display: flex;
-                            justify-content: center;
-                            margin: 12px auto;
+            .profile-bio {
+                color: $primary-title-color;
+                line-height: 1.5;
+                margin: 16px 0;
+                padding: 0 50px;
+                font-size: 12px;
+            }
 
-                            &.user-name {
-                                align-items: center;
-                            }
+            .profile-information {
+                text-align: left;
+                background-color: #f8f8f9;
+                padding: 16px;
+                border-radius: 8px;
 
-                            > em {
-                                font-style: normal;
-                                &.disabled,
-                                &.deleted {
-                                    display: inline-block;
-                                    margin-left: 2px;
-                                    white-space: nowrap;
-                                    font-size: 12px;
-                                    height: 20px;
-                                    line-height: 20px;
-                                    padding: 0 6px;
-                                    border-radius: 3px;
-                                    transform: scale(0.9);
-                                    transform-origin: right center;
-                                    color: #ffffff;
-                                    background-color: #ED4014;
-                                }
-                            }
+                h2 {
+                    font-size: 16px;
+                    margin-bottom: 12px;
+                }
 
-                            > span {
-                                flex-shrink: 0;
-                                opacity: 0.8;
-                                padding-right: 4px;
-                            }
+                ul {
+                    list-style: none;
+                    padding: 0;
+                    margin: 0;
+
+                    li {
+                        display: flex;
+                        align-items: flex-start; // 避免多行内容导致垂直居中不齐
+                        padding: 8px 0;
+                        font-size: 14px;
+
+                        .ivu-icon {
+                            font-size: 20px;
+                            margin-right: 12px;
+                            color: $primary-desc-color;
+                        }
+
+                        .label {
+                            color: #808695;
+                            flex: 0 0 64px; 
+                            flex-shrink: 0;
+                            line-height: 22px;
+                            margin-right: 8px;
+                        }
+
+                        .value {
+                            color: $primary-title-color;
+                            font-weight: 500;
+                            flex: 1 1 auto; 
+                            min-width: 0;
+                            margin-left: 0;
+                            text-align: right;
+                            white-space: normal;
+                            word-break: break-word;
+                            overflow-wrap: break-word;
                         }
                     }
                 }
             }
+
+            .profile-tags {
+                margin-top: 12px;
+                padding-top: 12px;
+                border-top: 1px solid #80869550;
+                cursor: pointer;
+                .tags-list {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap: 8px;
+                    justify-content: center;
+                    position: relative;
+                }
+                .ivu-tag {
+                    margin: 0;
+                }
+            }
         }
     }
 }