feat: 调整界面

src/components/common/PromptStore/index.vue

@@ -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">
-        <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 items-center justify-between">
+              class="flex items-center justify-between"
-                <div class="flex items-center justify-end space-x-4">
+              :class="isMobile ? 'flex-col gap-2' : 'flex-row'"
-                  <NButton
+            >
-                    type="primary"
+              <div class="flex items-center justify-end space-x-4">
-                    size="small"
+                <NButton
-                    @click="changeShowModal('add')"
+                  type="primary"
-                  >
+                  size="small"
-                    {{ $t('common.add') }}
+                  @click="changeShowModal('add')"
-                  </NButton>
+                >
-                  <NButton
+                  {{ $t('common.add') }}
-                    size="small"
+                </NButton>
-                    @click="changeShowModal('local_import')"
+                <NButton
-                  >
+                  size="small"
-                    {{ $t('common.import') }}
+                  @click="changeShowModal('local_import')"
-                  </NButton>
+                >
-                  <NButton
+                  {{ $t('common.import') }}
-                    size="small"
+                </NButton>
-                    :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="" />
                 <NButton
-                  strong
+                  size="small"
-                  secondary
+                  :loading="exportLoading"
-                  :disabled="downloadDisabled"
+                  @click="exportPromptTemplate()"
-                  :loading="importLoading"
-                  @click="downloadPromptTemplate()"
                 >
-                  {{ $t('common.download') }}
+                  {{ $t('common.export') }}
                 </NButton>
+                <NPopconfirm @positive-click="clearPromptTemplate">
+                  <template #trigger>
+                    <NButton size="small">
+                      {{ $t('common.clear') }}
+                    </NButton>
+                  </template>
+                  {{ $t('store.clearStoreConfirm') }}
+                </NPopconfirm>
               </div>
-              <NDivider />
+              <div class="flex items-center space-x-4">
-              <NLayoutContent
+                <NInput v-model:value="searchValue" style="width: 100%" />
-                style="height: 360px"
+              </div>
-                content-style="background: none;"
+            </div>
-                :native-scrollbar="false"
+            <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"
               >
-                <NCard
+                <p
-                  v-for="info in promptRecommendList"
+                  class="overflow-hidden text-ellipsis whitespace-nowrap"
-                  :key="info.key" :title="info.key"
+                  :title="info.desc"
-                  style="margin: 5px;"
-                  embedded
-                  :bordered="true"
                 >
-                  <p
+                  {{ info.desc }}
-                    class="overflow-hidden text-ellipsis whitespace-nowrap"
+                </p>
-                    :title="info.desc"
+                <template #footer>
-                  >
+                  <div class="flex items-center justify-end space-x-4">
-                    {{ info.desc }}
+                    <NButton text>
-                  </p>
+                      <a
-                  <template #footer>
+                        :href="info.url"
-                    <div class="flex items-center justify-end space-x-4">
+                        target="_blank"
-                      <NButton text>
+                      >
-                        <a
+                        <SvgIcon class="text-xl" icon="ri:link" />
-                          :href="info.url"
+                      </a>
-                          target="_blank"
+                    </NButton>
-                        >
+                    <NButton text @click="setDownloadURL(info.downloadUrl) ">
-                          <SvgIcon class="text-xl" icon="ri:link" />
+                      <SvgIcon class="text-xl" icon="ri:add-fill" />
-                        </a>
+                    </NButton>
-                      </NButton>
+                  </div>
-                      <NButton text @click="setDownloadURL(info.downloadUrl) ">
+                </template>
-                        <SvgIcon class="text-xl" icon="ri:add-fill" />
+              </NCard>
-                      </NButton>
+            </NLayoutContent>
-                    </div>
+          </NTabPane>
-                  </template>
+        </NTabs>
-                </NCard>
+      </div>
-              </NLayoutContent>
-            </NTabPane>
-          </NTabs>
-        </div>
-      </NCard>
     </NModal>
-    <NModal v-model:show="showModal">
+    <NModal v-model:show="showModal" style="width: 90%; max-width: 600px;" preset="card">
-      <NCard
+      <NSpace v-if="modalMode === 'add' || modalMode === 'modify'" vertical>
-        style="width: 600px"
+        {{ t('store.title') }}
-        :bordered="false"
+        <NInput v-model:value="tempPromptKey" />
-        size="huge"
+        {{ t('store.description') }}
-        role="dialog"
+        <NInput v-model:value="tempPromptValue" type="textarea" />
-        aria-modal="true"
+        <NButton
-      >
+          block
-        <NSpace v-if="modalMode === 'add' || modalMode === 'modify'" vertical>
+          type="primary"
-          {{ t('store.title') }}
+          :disabled="inputStatus"
-          <NInput v-model:value="tempPromptKey" />
+          @click="() => { modalMode === 'add' ? addPromptTemplate() : modifyPromptTemplate() }"
-          {{ t('store.description') }}
+        >
-          <NInput v-model:value="tempPromptValue" type="textarea" />
+          {{ t('common.confirm') }}
-          <NButton
+        </NButton>
-            strong
+      </NSpace>
-            secondary
+      <NSpace v-if="modalMode === 'local_import'" vertical>
-            :style="{ width: '100%' }"
+        <NInput
-            :disabled="inputStatus"
+          v-model:value="tempPromptValue"
-            @click="() => { modalMode === 'add' ? addPromptTemplate() : modifyPromptTemplate() }"
+          :placeholder="t('store.importPlaceholder')"
-          >
+          :autosize="{ minRows: 3, maxRows: 15 }"
-            {{ t('common.confirm') }}
+          type="textarea"
-          </NButton>
+        />
-        </NSpace>
+        <NButton
-        <NSpace v-if="modalMode === 'local_import'" vertical>
+          block
-          <NInput
+          type="primary"
-            v-model:value="tempPromptValue"
+          :disabled="inputStatus"
-            :placeholder="t('store.importPlaceholder')"
+          @click="() => { importPromptTemplate() }"
-            :autosize="{ minRows: 3, maxRows: 15 }"
+        >
-            type="textarea"
+          {{ t('common.import') }}
-          />
+        </NButton>
-          <NButton
+      </NSpace>
-            strong
-            secondary
-            :style="{ width: '100%' }"
-            :disabled="inputStatus"
-            @click="() => { importPromptTemplate() }"
-          >
-            {{ t('common.import') }}
-          </NButton>
-        </NSpace>
-      </NCard>
     </NModal>
   </NMessageProvider>
 </template>

src/locales/zh-TW.ts

@@ -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: '設定',