feat: 调整界面
This commit is contained in:
ChenZhaoYu
parent
af76b89fd4
commit
0a9f9b618b
|
|
@ -257,7 +257,6 @@ const createColumns = (): DataTableColumns<DataProps> => {
|
|||
{
|
||||
title: t('store.title'),
|
||||
key: 'renderKey',
|
||||
width: 160,
|
||||
},
|
||||
{
|
||||
title: t('store.description'),
|
||||
|
|
@ -296,6 +295,7 @@ const createColumns = (): DataTableColumns<DataProps> => {
|
|||
},
|
||||
]
|
||||
}
|
||||
|
||||
const columns = createColumns()
|
||||
|
||||
watch(
|
||||
|
|
@ -321,152 +321,143 @@ const dataSource = computed(() => {
|
|||
<template>
|
||||
<NMessageProvider>
|
||||
<NModal v-model:show="show" style="width: 90%; max-width: 900px;" preset="card">
|
||||
<NCard>
|
||||
<div class="space-y-4">
|
||||
<NTabs type="segment">
|
||||
<NTabPane name="local" :tab="$t('store.local')">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center justify-end space-x-4">
|
||||
<NButton
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="changeShowModal('add')"
|
||||
>
|
||||
{{ $t('common.add') }}
|
||||
</NButton>
|
||||
<NButton
|
||||
size="small"
|
||||
@click="changeShowModal('local_import')"
|
||||
>
|
||||
{{ $t('common.import') }}
|
||||
</NButton>
|
||||
<NButton
|
||||
size="small"
|
||||
:loading="exportLoading"
|
||||
@click="exportPromptTemplate()"
|
||||
>
|
||||
{{ $t('common.export') }}
|
||||
</NButton>
|
||||
<NPopconfirm @positive-click="clearPromptTemplate">
|
||||
<template #trigger>
|
||||
<NButton size="small">
|
||||
{{ $t('common.clear') }}
|
||||
</NButton>
|
||||
</template>
|
||||
{{ $t('store.clearStoreConfirm') }}
|
||||
</NPopconfirm>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<NInput v-model:value="searchValue" />
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<NDataTable
|
||||
:max-height="400"
|
||||
:columns="columns"
|
||||
:data="dataSource"
|
||||
:pagination="pagination"
|
||||
:bordered="false"
|
||||
/>
|
||||
</NTabPane>
|
||||
<NTabPane name="download" :tab="$t('store.online')">
|
||||
<p class="mb-4">
|
||||
{{ $t('store.onlineImportWarning') }}
|
||||
</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<NInput v-model:value="downloadURL" placeholder="" />
|
||||
<div class="space-y-4">
|
||||
<NTabs type="segment">
|
||||
<NTabPane name="local" :tab="$t('store.local')">
|
||||
<div
|
||||
class="flex items-center justify-between"
|
||||
:class="isMobile ? 'flex-col gap-2' : 'flex-row'"
|
||||
>
|
||||
<div class="flex items-center justify-end space-x-4">
|
||||
<NButton
|
||||
strong
|
||||
secondary
|
||||
:disabled="downloadDisabled"
|
||||
:loading="importLoading"
|
||||
@click="downloadPromptTemplate()"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="changeShowModal('add')"
|
||||
>
|
||||
{{ $t('common.download') }}
|
||||
{{ $t('common.add') }}
|
||||
</NButton>
|
||||
</div>
|
||||
<NDivider />
|
||||
<NLayoutContent
|
||||
style="height: 360px"
|
||||
content-style="background: none;"
|
||||
:native-scrollbar="false"
|
||||
>
|
||||
<NCard
|
||||
v-for="info in promptRecommendList"
|
||||
:key="info.key" :title="info.key"
|
||||
style="margin: 5px;"
|
||||
embedded
|
||||
:bordered="true"
|
||||
<NButton
|
||||
size="small"
|
||||
@click="changeShowModal('local_import')"
|
||||
>
|
||||
<p
|
||||
class="overflow-hidden text-ellipsis whitespace-nowrap"
|
||||
:title="info.desc"
|
||||
>
|
||||
{{ info.desc }}
|
||||
</p>
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-end space-x-4">
|
||||
<NButton text>
|
||||
<a
|
||||
:href="info.url"
|
||||
target="_blank"
|
||||
>
|
||||
<SvgIcon class="text-xl" icon="ri:link" />
|
||||
</a>
|
||||
</NButton>
|
||||
<NButton text @click="setDownloadURL(info.downloadUrl) ">
|
||||
<SvgIcon class="text-xl" icon="ri:add-fill" />
|
||||
</NButton>
|
||||
</div>
|
||||
{{ $t('common.import') }}
|
||||
</NButton>
|
||||
<NButton
|
||||
size="small"
|
||||
:loading="exportLoading"
|
||||
@click="exportPromptTemplate()"
|
||||
>
|
||||
{{ $t('common.export') }}
|
||||
</NButton>
|
||||
<NPopconfirm @positive-click="clearPromptTemplate">
|
||||
<template #trigger>
|
||||
<NButton size="small">
|
||||
{{ $t('common.clear') }}
|
||||
</NButton>
|
||||
</template>
|
||||
</NCard>
|
||||
</NLayoutContent>
|
||||
</NTabPane>
|
||||
</NTabs>
|
||||
</div>
|
||||
</NCard>
|
||||
{{ $t('store.clearStoreConfirm') }}
|
||||
</NPopconfirm>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<NInput v-model:value="searchValue" style="width: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<NDataTable
|
||||
:max-height="400"
|
||||
:columns="columns"
|
||||
:data="dataSource"
|
||||
:pagination="pagination"
|
||||
:bordered="false"
|
||||
/>
|
||||
</NTabPane>
|
||||
<NTabPane name="download" :tab="$t('store.online')">
|
||||
<p class="mb-4">
|
||||
{{ $t('store.onlineImportWarning') }}
|
||||
</p>
|
||||
<div class="flex items-center gap-4">
|
||||
<NInput v-model:value="downloadURL" placeholder="" />
|
||||
<NButton
|
||||
strong
|
||||
secondary
|
||||
:disabled="downloadDisabled"
|
||||
:loading="importLoading"
|
||||
@click="downloadPromptTemplate()"
|
||||
>
|
||||
{{ $t('common.download') }}
|
||||
</NButton>
|
||||
</div>
|
||||
<NDivider />
|
||||
<NLayoutContent
|
||||
style="height: 360px"
|
||||
content-style="background: none;"
|
||||
:native-scrollbar="false"
|
||||
>
|
||||
<NCard
|
||||
v-for="info in promptRecommendList"
|
||||
:key="info.key" :title="info.key"
|
||||
style="margin: 5px;"
|
||||
embedded
|
||||
:bordered="true"
|
||||
>
|
||||
<p
|
||||
class="overflow-hidden text-ellipsis whitespace-nowrap"
|
||||
:title="info.desc"
|
||||
>
|
||||
{{ info.desc }}
|
||||
</p>
|
||||
<template #footer>
|
||||
<div class="flex items-center justify-end space-x-4">
|
||||
<NButton text>
|
||||
<a
|
||||
:href="info.url"
|
||||
target="_blank"
|
||||
>
|
||||
<SvgIcon class="text-xl" icon="ri:link" />
|
||||
</a>
|
||||
</NButton>
|
||||
<NButton text @click="setDownloadURL(info.downloadUrl) ">
|
||||
<SvgIcon class="text-xl" icon="ri:add-fill" />
|
||||
</NButton>
|
||||
</div>
|
||||
</template>
|
||||
</NCard>
|
||||
</NLayoutContent>
|
||||
</NTabPane>
|
||||
</NTabs>
|
||||
</div>
|
||||
</NModal>
|
||||
<NModal v-model:show="showModal">
|
||||
<NCard
|
||||
style="width: 600px"
|
||||
:bordered="false"
|
||||
size="huge"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<NSpace v-if="modalMode === 'add' || modalMode === 'modify'" vertical>
|
||||
{{ t('store.title') }}
|
||||
<NInput v-model:value="tempPromptKey" />
|
||||
{{ t('store.description') }}
|
||||
<NInput v-model:value="tempPromptValue" type="textarea" />
|
||||
<NButton
|
||||
strong
|
||||
secondary
|
||||
:style="{ width: '100%' }"
|
||||
:disabled="inputStatus"
|
||||
@click="() => { modalMode === 'add' ? addPromptTemplate() : modifyPromptTemplate() }"
|
||||
>
|
||||
{{ t('common.confirm') }}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
<NSpace v-if="modalMode === 'local_import'" vertical>
|
||||
<NInput
|
||||
v-model:value="tempPromptValue"
|
||||
:placeholder="t('store.importPlaceholder')"
|
||||
:autosize="{ minRows: 3, maxRows: 15 }"
|
||||
type="textarea"
|
||||
/>
|
||||
<NButton
|
||||
strong
|
||||
secondary
|
||||
:style="{ width: '100%' }"
|
||||
:disabled="inputStatus"
|
||||
@click="() => { importPromptTemplate() }"
|
||||
>
|
||||
{{ t('common.import') }}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</NCard>
|
||||
<NModal v-model:show="showModal" style="width: 90%; max-width: 600px;" preset="card">
|
||||
<NSpace v-if="modalMode === 'add' || modalMode === 'modify'" vertical>
|
||||
{{ t('store.title') }}
|
||||
<NInput v-model:value="tempPromptKey" />
|
||||
{{ t('store.description') }}
|
||||
<NInput v-model:value="tempPromptValue" type="textarea" />
|
||||
<NButton
|
||||
block
|
||||
type="primary"
|
||||
:disabled="inputStatus"
|
||||
@click="() => { modalMode === 'add' ? addPromptTemplate() : modifyPromptTemplate() }"
|
||||
>
|
||||
{{ t('common.confirm') }}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
<NSpace v-if="modalMode === 'local_import'" vertical>
|
||||
<NInput
|
||||
v-model:value="tempPromptValue"
|
||||
:placeholder="t('store.importPlaceholder')"
|
||||
:autosize="{ minRows: 3, maxRows: 15 }"
|
||||
type="textarea"
|
||||
/>
|
||||
<NButton
|
||||
block
|
||||
type="primary"
|
||||
:disabled="inputStatus"
|
||||
@click="() => { importPromptTemplate() }"
|
||||
>
|
||||
{{ t('common.import') }}
|
||||
</NButton>
|
||||
</NSpace>
|
||||
</NModal>
|
||||
</NMessageProvider>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,8 @@ export default {
|
|||
clearSuccess: '清除成功',
|
||||
yes: '是',
|
||||
no: '否',
|
||||
confirm: '確定',
|
||||
download: '下載',
|
||||
noData: '暫無資料',
|
||||
wrong: '好像出錯了，請稍後再試。',
|
||||
success: '操作成功',
|
||||
|
|
@ -43,6 +45,7 @@ export default {
|
|||
deleteMessage: '刪除訊息',
|
||||
deleteMessageConfirm: '是否刪除此訊息?',
|
||||
deleteHistoryConfirm: '確定刪除此紀錄?',
|
||||
clearHistoryConfirm: '確定清除紀錄?',
|
||||
},
|
||||
setting: {
|
||||
setting: '設定',
|
||||
|
|
|
|||
Loading…
Reference in New Issue