perf: 优化移动端 prompt 商店样式 (#608)
* feat: 修改移动端 prompt 商店样式 * add: 修改移动端 prompt 商店样式 * perf: 清理代码 --------- Co-authored-by: ChenZhaoYu <790348264@qq.com>
This commit is contained in:
CornerSkyless
GitHub
parent
1411c45811
commit
951e9d8d39
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup lang='ts'>
|
<script setup lang='ts'>
|
||||||
import type { DataTableColumns } from 'naive-ui'
|
import type { DataTableColumns } from 'naive-ui'
|
||||||
import { computed, h, ref, watch } from 'vue'
|
import { computed, h, ref, watch } from 'vue'
|
||||||
import { NButton, NCard, NDataTable, NDivider, NInput, NLayoutContent, NMessageProvider, NModal, NPopconfirm, NSpace, NTabPane, NTabs, useMessage } from 'naive-ui'
|
import { NButton, NCard, NDataTable, NDivider, NInput, NLayoutContent, NList, NListItem, NModal, NPopconfirm, NSpace, NTabPane, NTabs, NThing, useMessage } from 'naive-ui'
|
||||||
import PromptRecommend from '../../../assets/recommend.json'
|
import PromptRecommend from '../../../assets/recommend.json'
|
||||||
import { SvgIcon } from '..'
|
import { SvgIcon } from '..'
|
||||||
import { usePromptStore } from '@/store'
|
import { usePromptStore } from '@/store'
|
||||||
|
|
@ -238,7 +238,7 @@ const downloadPromptTemplate = async () => {
|
||||||
|
|
||||||
// 移动端自适应相关
|
// 移动端自适应相关
|
||||||
const renderTemplate = () => {
|
const renderTemplate = () => {
|
||||||
const [keyLimit, valueLimit] = isMobile.value ? [6, 9] : [15, 50]
|
const [keyLimit, valueLimit] = isMobile.value ? [10, 30] : [15, 50]
|
||||||
|
|
||||||
return promptList.value.map((item: { key: string; value: string }) => {
|
return promptList.value.map((item: { key: string; value: string }) => {
|
||||||
return {
|
return {
|
||||||
|
|
@ -325,145 +325,159 @@ const dataSource = computed(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<NMessageProvider>
|
<NModal v-model:show="show" style="width: 90%; max-width: 900px;" preset="card">
|
||||||
<NModal v-model:show="show" style="width: 90%; max-width: 900px;" preset="card">
|
<div class="space-y-4">
|
||||||
<div class="space-y-4">
|
<NTabs type="segment">
|
||||||
<NTabs type="segment">
|
<NTabPane name="local" :tab="$t('store.local')">
|
||||||
<NTabPane name="local" :tab="$t('store.local')">
|
<div
|
||||||
<div
|
class="flex gap-3 mb-4"
|
||||||
class="flex gap-3"
|
:class="[isMobile ? 'flex-col' : 'flex-row justify-between']"
|
||||||
:class="[isMobile ? 'flex-col' : 'flex-row justify-between']"
|
>
|
||||||
>
|
<div class="flex items-center space-x-4">
|
||||||
<div class="flex items-center 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">
|
|
||||||
<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
|
<NButton
|
||||||
strong
|
type="primary"
|
||||||
secondary
|
size="small"
|
||||||
:disabled="downloadDisabled"
|
@click="changeShowModal('add')"
|
||||||
:loading="importLoading"
|
|
||||||
@click="downloadPromptTemplate()"
|
|
||||||
>
|
>
|
||||||
{{ $t('common.download') }}
|
{{ $t('common.add') }}
|
||||||
</NButton>
|
</NButton>
|
||||||
</div>
|
<NButton
|
||||||
<NDivider />
|
size="small"
|
||||||
<NLayoutContent
|
@click="changeShowModal('local_import')"
|
||||||
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
|
{{ $t('common.import') }}
|
||||||
class="overflow-hidden text-ellipsis whitespace-nowrap"
|
</NButton>
|
||||||
:title="info.desc"
|
<NButton
|
||||||
>
|
size="small"
|
||||||
{{ info.desc }}
|
:loading="exportLoading"
|
||||||
</p>
|
@click="exportPromptTemplate()"
|
||||||
<template #footer>
|
>
|
||||||
<div class="flex items-center justify-end space-x-4">
|
{{ $t('common.export') }}
|
||||||
<NButton text>
|
</NButton>
|
||||||
<a
|
<NPopconfirm @positive-click="clearPromptTemplate">
|
||||||
:href="info.url"
|
<template #trigger>
|
||||||
target="_blank"
|
<NButton size="small">
|
||||||
>
|
{{ $t('common.clear') }}
|
||||||
<SvgIcon class="text-xl" icon="ri:link" />
|
</NButton>
|
||||||
</a>
|
|
||||||
</NButton>
|
|
||||||
<NButton text @click="setDownloadURL(info.downloadUrl) ">
|
|
||||||
<SvgIcon class="text-xl" icon="ri:add-fill" />
|
|
||||||
</NButton>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</NCard>
|
{{ $t('store.clearStoreConfirm') }}
|
||||||
</NLayoutContent>
|
</NPopconfirm>
|
||||||
</NTabPane>
|
</div>
|
||||||
</NTabs>
|
<div class="flex items-center">
|
||||||
</div>
|
<NInput v-model:value="searchValue" style="width: 100%" />
|
||||||
</NModal>
|
</div>
|
||||||
<NModal v-model:show="showModal" style="width: 90%; max-width: 600px;" preset="card">
|
</div>
|
||||||
<NSpace v-if="modalMode === 'add' || modalMode === 'modify'" vertical>
|
<NDataTable
|
||||||
{{ t('store.title') }}
|
v-if="!isMobile"
|
||||||
<NInput v-model:value="tempPromptKey" />
|
:max-height="400"
|
||||||
{{ t('store.description') }}
|
:columns="columns"
|
||||||
<NInput v-model:value="tempPromptValue" type="textarea" />
|
:data="dataSource"
|
||||||
<NButton
|
:pagination="pagination"
|
||||||
block
|
:bordered="false"
|
||||||
type="primary"
|
/>
|
||||||
:disabled="inputStatus"
|
<NList v-if="isMobile" style="max-height: 400px; overflow-y: auto;">
|
||||||
@click="() => { modalMode === 'add' ? addPromptTemplate() : modifyPromptTemplate() }"
|
<NListItem v-for="(item, index) of dataSource" :key="index">
|
||||||
>
|
<NThing :title="item.renderKey" :description="item.renderValue" />
|
||||||
{{ t('common.confirm') }}
|
<template #suffix>
|
||||||
</NButton>
|
<div class="flex flex-col items-center gap-2">
|
||||||
</NSpace>
|
<NButton tertiary size="small" type="info" @click="changeShowModal('modify', item)">
|
||||||
<NSpace v-if="modalMode === 'local_import'" vertical>
|
{{ t('common.edit') }}
|
||||||
<NInput
|
</NButton>
|
||||||
v-model:value="tempPromptValue"
|
<NButton tertiary size="small" type="error" @click="deletePromptTemplate(item)">
|
||||||
:placeholder="t('store.importPlaceholder')"
|
{{ t('common.delete') }}
|
||||||
:autosize="{ minRows: 3, maxRows: 15 }"
|
</NButton>
|
||||||
type="textarea"
|
</div>
|
||||||
/>
|
</template>
|
||||||
<NButton
|
</NListItem>
|
||||||
block
|
</NList>
|
||||||
type="primary"
|
</NTabPane>
|
||||||
:disabled="inputStatus"
|
<NTabPane name="download" :tab="$t('store.online')">
|
||||||
@click="() => { importPromptTemplate() }"
|
<p class="mb-4">
|
||||||
>
|
{{ $t('store.onlineImportWarning') }}
|
||||||
{{ t('common.import') }}
|
</p>
|
||||||
</NButton>
|
<div class="flex items-center gap-4">
|
||||||
</NSpace>
|
<NInput v-model:value="downloadURL" placeholder="" />
|
||||||
</NModal>
|
<NButton
|
||||||
</NMessageProvider>
|
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" 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>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue