fix: improve MySQL user display

[ssongliu]

No description provided.

[Copilot]

Pull request overview

Improves the MySQL user/authorization UI in the frontend by making user identities clearer (username@host), improving overflow handling for sensitive/long strings (passwords), and reducing visual clutter when a user is bound to many databases.

Changes:

• Display MySQL users as username@host in both the user drawer and authorization dialog.
• Replace raw password rendering with a Tooltip-based overflow display to avoid layout issues with long passwords.
• Compress the “bound databases” display to show the first DB plus a +N popover for the remainder; add a viewOnly mode to the bind dialog to hide management actions.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
frontend/src/views/database/mysql/user/index.vue	Updates user list presentation (username@host), improves password overflow display, and introduces a compact/popup database binding list with new styling.
frontend/src/views/database/mysql/bind/index.vue	Updates authorized user display (username@host), improves password overflow display, and adds a viewOnly mode to hide management controls.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (2)

frontend/src/views/database/mysql/user/index.vue:90

• Using a fixed :width="120" for overrides its built-in width estimation (based on visible buttons) and will likely force the action buttons to wrap/truncate. Prefer minWidth so the component can still size itself to fit the operations while keeping a minimum constraint.

            <fu-table-operations
                :width="120"
                :buttons="userButtons"
                :label="$t('commons.table.operate')"
                fixed="right"
                fix
            />

frontend/src/views/database/mysql/user/index.vue:68

• Same potential key-collision issue here: concatenating username + host + item without separators can produce duplicate keys. Use a delimiter-based key.

                                <el-tooltip
                                    v-for="item in userDatabases(row)"
                                    :key="row.username + row.host + item"
                                    :content="item"

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (2)

frontend/src/views/database/mysql/user/index.vue:52

• This :key is built by concatenating multiple dynamic values without a separator between host and item, which can produce collisions (different tuples yielding the same string) and break Vue's list diffing. Use a template literal with an explicit delimiter between segments.

                            :key="row.username + '@' + row.host + item"

frontend/src/views/database/mysql/user/index.vue:67

• Same key-collision risk as above: concatenating host and item without a delimiter can produce duplicate keys. Use an explicit delimiter (e.g., host:item).

                                    :key="row.username + '@' + row.host + item"