优化多个组件的输入框,添加图标以提升用户体验,确保提示信息的一致性和可读性。

This commit is contained in:
jxxghp
2025-05-27 21:23:08 +08:00
parent 5711285a77
commit 1cfee25695
6 changed files with 71 additions and 13 deletions

View File

@@ -454,7 +454,6 @@ function onClose() {
:label="t('notification.name')"
:hint="t('notification.nameRequired')"
persistent-hint
active
prepend-inner-icon="mdi-label"
/>
</VCol>

View File

@@ -352,10 +352,13 @@ const dropdownItems = ref([
<!-- 重命名对话框 -->
<VDialog v-if="renameDialog" v-model="renameDialog" max-width="400">
<VCard>
<VDialogCloseBtn @click="renameDialog = false" />
<VCardItem>
<template #prepend>
<VIcon icon="mdi-pencil" class="me-2" />
</template>
<VCardTitle>{{ t('folder.renameFolder') }}</VCardTitle>
</VCardItem>
<VDialogCloseBtn @click="renameDialog = false" />
<VDivider />
<VCardText>
<VTextField
@@ -467,6 +470,7 @@ const dropdownItems = ref([
variant="outlined"
:hint="t('folder.customBackgroundImageHint')"
persistent-hint
prepend-inner-icon="mdi-image"
/>
</VCol>
</VRow>

View File

@@ -291,11 +291,14 @@ onMounted(() => {
<template>
<VDialog scrollable max-width="40rem" :fullscreen="!display.mdAndUp.value">
<VCard
:title="`${props.oper === 'add' ? t('dialog.userAddEdit.add') : t('dialog.userAddEdit.edit')}${
props.oper !== 'add' ? ` - ${userName}` : ''
}`"
>
<VCard>
<VCardItem :class="props.oper === 'add' ? 'py-3' : 'py-2'">
<template #prepend>
<VIcon icon="mdi-account" class="me-2" />
</template>
<VCardTitle>{{ props.oper === 'add' ? t('dialog.userAddEdit.add') : t('dialog.userAddEdit.edit') }}</VCardTitle>
<VCardSubtitle>{{ userName }}</VCardSubtitle>
</VCardItem>
<VDialogCloseBtn @click="emit('close')" />
<VDivider />
<VCardItem>
@@ -350,6 +353,7 @@ onMounted(() => {
density="comfortable"
:readonly="props.oper !== 'add'"
:label="t('dialog.userAddEdit.username')"
prepend-inner-icon="mdi-account"
/>
</VCol>
<VCol cols="12" md="6">
@@ -359,6 +363,7 @@ onMounted(() => {
clearable
:label="t('dialog.userAddEdit.email')"
type="email"
prepend-inner-icon="mdi-email"
/>
</VCol>
<VCol cols="12" md="6">
@@ -370,6 +375,7 @@ onMounted(() => {
clearable
:label="t('dialog.userAddEdit.password')"
autocomplete=""
prepend-inner-icon="mdi-lock"
@click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
/>
</VCol>
@@ -382,6 +388,7 @@ onMounted(() => {
:append-inner-icon="isConfirmPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
clearable
:label="t('dialog.userAddEdit.confirmPassword')"
prepend-inner-icon="mdi-lock-check"
@click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
/>
</VCol>
@@ -392,6 +399,7 @@ onMounted(() => {
clearable
:label="t('dialog.userAddEdit.nickname')"
placeholder="显示昵称,优先于用户名显示"
prepend-inner-icon="mdi-card-account-details"
/>
</VCol>
<VCol cols="12" md="6" v-if="canControl">
@@ -402,6 +410,7 @@ onMounted(() => {
item-value="value"
:label="t('dialog.userAddEdit.status')"
dense
prepend-inner-icon="mdi-toggle-switch"
/>
</VCol>
</VRow>
@@ -415,6 +424,7 @@ onMounted(() => {
density="comfortable"
clearable
:label="t('dialog.userAddEdit.wechat')"
prepend-inner-icon="mdi-wechat"
/>
</VCol>
<VCol cols="12" md="6">
@@ -423,6 +433,7 @@ onMounted(() => {
density="comfortable"
clearable
:label="t('dialog.userAddEdit.telegram')"
prepend-inner-icon="mdi-send"
/>
</VCol>
<VCol cols="12" md="6">
@@ -431,6 +442,7 @@ onMounted(() => {
density="comfortable"
clearable
:label="t('dialog.userAddEdit.slack')"
prepend-inner-icon="mdi-slack"
/>
</VCol>
<VCol cols="12" md="6">
@@ -439,6 +451,7 @@ onMounted(() => {
density="comfortable"
clearable
:label="t('dialog.userAddEdit.vocechat')"
prepend-inner-icon="mdi-chat"
/>
</VCol>
<VCol cols="12" md="6">
@@ -447,10 +460,17 @@ onMounted(() => {
density="comfortable"
clearable
:label="t('dialog.userAddEdit.synologyChat')"
prepend-inner-icon="mdi-message"
/>
</VCol>
<VCol cols="12" md="6">
<VTextField v-model="userForm.settings.douban_userid" density="comfortable" clearable label="豆瓣用户" />
<VTextField
v-model="userForm.settings.douban_userid"
density="comfortable"
clearable
label="豆瓣用户"
prepend-inner-icon="mdi-movie"
/>
</VCol>
</VRow>
</VForm>

View File

@@ -696,13 +696,24 @@ onMounted(() => {
</VCard>
<!-- 重命名弹窗 -->
<VDialog v-if="renamePopper" v-model="renamePopper" max-width="35rem">
<VCard :title="t('file.rename')">
<VCard>
<VCardItem>
<template #prepend>
<VIcon icon="mdi-pencil" class="me-2" />
</template>
<VCardTitle>{{ t('file.rename') }}</VCardTitle>
</VCardItem>
<VDialogCloseBtn @click="renamePopper = false" />
<VDivider />
<VCardText>
<VRow>
<VCol cols="12">
<VTextField v-model="newName" :label="t('file.newName')" :loading="renameLoading" />
<VTextField
v-model="newName"
:label="t('file.newName')"
:loading="renameLoading"
prepend-inner-icon="mdi-format-text"
/>
</VCol>
<VCol cols="12" v-if="currentItem && currentItem.type == 'dir'">
<VSwitch v-model="renameAll" :label="t('file.includeSubfolders')" />

View File

@@ -165,17 +165,24 @@ const sortIcon = computed(() => {
<IconBtn v-if="pathSegments.length > 0" @click="goUp">
<VIcon icon="mdi-arrow-up-bold-outline" />
</IconBtn>
<!-- 新建文件夹 -->
<VDialog v-model="newFolderPopper" max-width="35rem">
<template #activator="{ props }">
<IconBtn>
<VIcon v-bind="props" icon="mdi-folder-plus-outline" />
</IconBtn>
</template>
<VCard :title="t('file.newFolder')">
<VCard>
<VCardItem>
<template #prepend>
<VIcon icon="mdi-folder-plus-outline" class="me-2" />
</template>
<VCardTitle>{{ t('file.newFolder') }}</VCardTitle>
</VCardItem>
<VDialogCloseBtn @click="newFolderPopper = false" />
<VDivider />
<VCardText>
<VTextField v-model="newFolderName" :label="t('common.name')" />
<VTextField v-model="newFolderName" :label="t('common.name')" prepend-inner-icon="mdi-format-text" />
</VCardText>
<VCardActions>
<div class="flex-grow-1" />

View File

@@ -322,7 +322,13 @@ watch(
<VForm class="mt-6">
<VRow>
<VCol cols="12" md="6">
<VTextField v-model="currentUserName" density="comfortable" readonly :label="t('user.username')" />
<VTextField
v-model="currentUserName"
density="comfortable"
readonly
:label="t('user.username')"
prepend-inner-icon="mdi-account"
/>
</VCol>
<VCol cols="12" md="6">
<VTextField
@@ -331,6 +337,7 @@ watch(
clearable
:label="t('user.email')"
type="email"
prepend-inner-icon="mdi-email"
/>
</VCol>
<VCol cols="12" md="6">
@@ -342,6 +349,7 @@ watch(
clearable
:label="t('user.password')"
autocomplete=""
prepend-inner-icon="mdi-lock"
@click:append-inner="isNewPasswordVisible = !isNewPasswordVisible"
/>
</VCol>
@@ -354,6 +362,7 @@ watch(
:append-inner-icon="isConfirmPasswordVisible ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
clearable
:label="t('user.confirmPassword')"
prepend-inner-icon="mdi-lock-check"
@click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
/>
</VCol>
@@ -364,6 +373,7 @@ watch(
clearable
:label="t('profile.nickname')"
:placeholder="t('profile.nicknamePlaceholder')"
prepend-inner-icon="mdi-card-account-details"
/>
</VCol>
</VRow>
@@ -379,6 +389,7 @@ watch(
density="comfortable"
clearable
:label="t('profile.wechatUser')"
prepend-inner-icon="mdi-wechat"
/>
</VCol>
<VCol cols="12" md="6">
@@ -387,6 +398,7 @@ watch(
density="comfortable"
clearable
:label="t('profile.telegramUser')"
prepend-inner-icon="mdi-send"
/>
</VCol>
<VCol cols="12" md="6">
@@ -395,6 +407,7 @@ watch(
density="comfortable"
clearable
:label="t('profile.slackUser')"
prepend-inner-icon="mdi-slack"
/>
</VCol>
<VCol cols="12" md="6">
@@ -403,6 +416,7 @@ watch(
density="comfortable"
clearable
:label="t('profile.vocechatUser')"
prepend-inner-icon="mdi-chat"
/>
</VCol>
<VCol cols="12" md="6">
@@ -411,6 +425,7 @@ watch(
density="comfortable"
clearable
:label="t('profile.synologychatUser')"
prepend-inner-icon="mdi-message"
/>
</VCol>
<VCol cols="12" md="6">
@@ -419,6 +434,7 @@ watch(
density="comfortable"
clearable
:label="t('profile.doubanUser')"
prepend-inner-icon="mdi-movie"
/>
</VCol>
</VRow>
@@ -462,6 +478,7 @@ watch(
autocomplete=""
class="mb-8"
variant="outlined"
prepend-inner-icon="mdi-shield-key"
/>
<div class="d-flex justify-end flex-wrap gap-4">
<VBtn variant="outlined" color="secondary" @click="otpDialog = false"> {{ t('common.cancel') }} </VBtn>