fix: 移动端样式

This commit is contained in:
ChenZhaoYu 2023-03-08 08:38:16 +08:00
parent 5fe1e20e4a
commit 451a456f58
2 changed files with 32 additions and 28 deletions

View File

@ -151,38 +151,41 @@ function handleImportButtonClick(): void {
<div class="flex items-center space-x-4">
<span class="flex-shrink-0 w-[100px]">{{ $t('setting.chatHistory') }}</span>
<NButton @click="exportData">
<template #icon>
<SvgIcon icon="ri:download-2-fill" />
</template>
{{ $t('common.export') }}
</NButton>
<div class="flex flex-wrap items-center gap-4">
<NButton size="small" @click="exportData">
<template #icon>
<SvgIcon icon="ri:download-2-fill" />
</template>
{{ $t('common.export') }}
</NButton>
<input id="fileInput" type="file" style="display:none" @change="importData">
<NButton @click="handleImportButtonClick">
<template #icon>
<SvgIcon icon="ri:upload-2-fill" />
</template>
{{ $t('common.import') }}
</NButton>
<input id="fileInput" type="file" style="display:none" @change="importData">
<NButton size="small" @click="handleImportButtonClick">
<template #icon>
<SvgIcon icon="ri:upload-2-fill" />
</template>
{{ $t('common.import') }}
</NButton>
<NPopconfirm placement="bottom" @positive-click="clearData">
<template #trigger>
<NButton>
<template #icon>
<SvgIcon icon="ri:close-circle-line" />
</template>
{{ $t('common.clear') }}
</NButton>
</template>
{{ $t('chat.clearHistoryConfirm') }}
</NPopconfirm>
<NPopconfirm placement="bottom" @positive-click="clearData">
<template #trigger>
<NButton size="small">
<template #icon>
<SvgIcon icon="ri:close-circle-line" />
</template>
{{ $t('common.clear') }}
</NButton>
</template>
{{ $t('chat.clearHistoryConfirm') }}
</NPopconfirm>
</div>
</div>
<div class="flex items-center space-x-4">
<span class="flex-shrink-0 w-[100px]">{{ $t('setting.theme') }}</span>
<div class="flex items-center space-x-4">
<div class="flex flex-wrap items-center gap-4">
<template v-for="item of themeOptions" :key="item.key">
<NButton
size="small"
:type="item.key === theme ? 'primary' : undefined"
@click="appStore.setTheme(item.key)"
>
@ -195,9 +198,10 @@ function handleImportButtonClick(): void {
</div>
<div class="flex items-center space-x-4">
<span class="flex-shrink-0 w-[100px]">{{ $t('setting.language') }}</span>
<div class="flex items-center space-x-4">
<div class="flex flex-wrap items-center gap-4">
<template v-for="item of languageOptions" :key="item.key">
<NButton
size="small"
:type="item.key === language ? 'primary' : undefined"
@click="appStore.setLanguage(item.key)"
>
@ -208,7 +212,7 @@ function handleImportButtonClick(): void {
</div>
<div class="flex items-center space-x-4">
<span class="flex-shrink-0 w-[100px]">{{ $t('setting.resetUserInfo') }}</span>
<NButton @click="handleReset">
<NButton size="small" @click="handleReset">
{{ $t('common.reset') }}
</NButton>
</div>

View File

@ -31,7 +31,7 @@ const show = computed({
<template>
<NModal v-model:show="show" :auto-focus="false">
<NCard role="dialog" aria-modal="true" :bordered="false" style="width: 100%; max-width: 640px">
<NCard role="dialog" aria-modal="true" :bordered="false" style="width: 95%; max-width: 640px">
<NTabs v-model:value="active" type="line" animated>
<NTabPane name="General" tab="General">
<template #tab>