perf: 优化移动端 prompt 商店样式 (#608)

* feat: 修改移动端 prompt 商店样式

* add: 修改移动端 prompt 商店样式

* perf: 清理代码

---------

Co-authored-by: ChenZhaoYu <790348264@qq.com>

src/components/common/PromptStore/index.vue

@@ -1,7 +1,7 @@
 <script setup lang='ts'>
 import type { DataTableColumns } from 'naive-ui'
 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 { SvgIcon } from '..'
 import { usePromptStore } from '@/store'
@@ -238,7 +238,7 @@ const downloadPromptTemplate = async () => {
 
 // 移动端自适应相关
 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 {
@@ -325,13 +325,12 @@ const dataSource = computed(() => {
 </script>
 
 <template>
-  <NMessageProvider>
   <NModal v-model:show="show" style="width: 90%; max-width: 900px;" preset="card">
     <div class="space-y-4">
       <NTabs type="segment">
         <NTabPane name="local" :tab="$t('store.local')">
           <div
-              class="flex gap-3"
+            class="flex gap-3 mb-4"
             :class="[isMobile ? 'flex-col' : 'flex-row justify-between']"
           >
             <div class="flex items-center space-x-4">
@@ -368,14 +367,29 @@ const dataSource = computed(() => {
               <NInput v-model:value="searchValue" style="width: 100%" />
             </div>
           </div>
-            <br>
           <NDataTable
+            v-if="!isMobile"
             :max-height="400"
             :columns="columns"
             :data="dataSource"
             :pagination="pagination"
             :bordered="false"
           />
+          <NList v-if="isMobile" style="max-height: 400px; overflow-y: auto;">
+            <NListItem v-for="(item, index) of dataSource" :key="index">
+              <NThing :title="item.renderKey" :description="item.renderValue" />
+              <template #suffix>
+                <div class="flex flex-col items-center gap-2">
+                  <NButton tertiary size="small" type="info" @click="changeShowModal('modify', item)">
+                    {{ t('common.edit') }}
+                  </NButton>
+                  <NButton tertiary size="small" type="error" @click="deletePromptTemplate(item)">
+                    {{ t('common.delete') }}
+                  </NButton>
+                </div>
+              </template>
+            </NListItem>
+          </NList>
         </NTabPane>
         <NTabPane name="download" :tab="$t('store.online')">
           <p class="mb-4">
@@ -433,6 +447,7 @@ const dataSource = computed(() => {
       </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') }}
@@ -465,5 +480,4 @@ const dataSource = computed(() => {
       </NButton>
     </NSpace>
   </NModal>
-  </NMessageProvider>
 </template>