feat: 更新插件市场设置对话框和订阅页面

src/components/dialog/PluginMarketSettingDialog.vue

@@ -2,11 +2,6 @@
 import api from '@/api'
 import { useToast } from 'vue-toast-notification'
 
-// 输入参数
-const props = defineProps({
-  title: String,
-})
-
 const $toast = useToast()
 
 // 插件仓库设置字符串
@@ -47,8 +42,14 @@ onMounted(() => {
 
 <template>
   <VDialog width="50rem" scrollable max-height="85vh">
-    <VCard title="插件仓库设置" class="rounded-t">
-      <DialogCloseBtn @click="emit('close')" />
+    <VCard class="rounded-t">
+      <VCardItem>
+        <VCardTitle>
+          <VIcon icon="mdi-store-cog" class="me-2" />
+          插件仓库设置
+        </VCardTitle>
+        <DialogCloseBtn @click="emit('close')" />
+      </VCardItem>
       <VCardText class="pt-2">
         <VTextarea
           v-model="repoString"

src/pages/recommend.vue

@@ -305,11 +305,6 @@ watch(currentCategory, () => {
   max-inline-size: 100%;
 }
 
-.settings-icon-button {
-  flex-shrink: 0;
-  min-inline-size: auto;
-}
-
 .recommend-content {
   padding-block: 0;
   padding-inline: 16px;

src/pages/subscribe.vue

@@ -2,8 +2,9 @@
 import SubscribeListView from '@/views/subscribe/SubscribeListView.vue'
 import SubscribePopularView from '@/views/subscribe/SubscribePopularView.vue'
 import SubscribeShareView from '@/views/subscribe/SubscribeShareView.vue'
+import SubscribeEditDialog from '@/components/dialog/SubscribeEditDialog.vue'
+
 import { SubscribeMovieTabs, SubscribeTvTabs } from '@/router/menu'
-import router from '@/router'
 
 const route = useRoute()
 
@@ -11,52 +12,41 @@ const subType = route.meta.subType?.toString()
 const subId = ref(route.query.id as string)
 const activeTab = ref(route.query.tab)
 
-function jumpTab(tab: string) {
-  router.push('/subscribe/movie?tab=' + tab)
-}
+// 弹窗
+const subscribeEditDialog = ref(false)
 </script>
 
 <template>
   <div>
-    <VTabs v-model="activeTab" show-arrows stacked>
-      <VTab
-        v-if="subType == '电影'"
-        v-for="item in SubscribeMovieTabs"
-        :value="item.tab"
-        @to="jumpTab(item.tab)"
-        class="px-10 rounded-t-lg"
-      >
-        <VIcon size="x-large" start :icon="item.icon" />
-        {{ item.title }}
-      </VTab>
-      <VTab
-        v-if="subType == '电视剧'"
-        v-for="item in SubscribeTvTabs"
-        :value="item.tab"
-        @to="jumpTab(item.tab)"
-        class="px-10 rounded-t-lg"
-      >
-        <VIcon size="x-large" start :icon="item.icon" />
-        {{ item.title }}
-      </VTab>
-    </VTabs>
+    <VHeaderTab :items="subType == '电影' ? SubscribeMovieTabs : SubscribeTvTabs" v-model="activeTab">
+      <template #append>
+        <VBtn
+          icon="mdi-clipboard-edit"
+          variant="text"
+          color="primary"
+          size="default"
+          class="settings-icon-button"
+          @click="subscribeEditDialog = true"
+        />
+      </template>
+    </VHeaderTab>
 
     <VWindow v-model="activeTab" class="disable-tab-transition" :touch="false">
-      <VWindowItem value="mysub">
+      <VWindowItem value="我的订阅">
         <transition name="fade-slide" appear>
           <div class="mt-4">
             <SubscribeListView :type="subType" :subid="subId" />
           </div>
         </transition>
       </VWindowItem>
-      <VWindowItem value="popular">
+      <VWindowItem value="热门订阅">
         <transition name="fade-slide" appear>
           <div>
             <SubscribePopularView :type="subType" />
           </div>
         </transition>
       </VWindowItem>
-      <VWindowItem value="share">
+      <VWindowItem value="订阅分享">
         <transition name="fade-slide" appear>
           <div>
             <SubscribeShareView />
@@ -64,5 +54,15 @@ function jumpTab(tab: string) {
         </transition>
       </VWindowItem>
     </VWindow>
+
+    <!-- 订阅编辑弹窗 -->
+    <SubscribeEditDialog
+      v-if="subscribeEditDialog"
+      v-model="subscribeEditDialog"
+      :default="true"
+      :type="subType"
+      @save="subscribeEditDialog = false"
+      @close="subscribeEditDialog = false"
+    />
   </div>
 </template>

src/styles/styles.scss

@@ -314,3 +314,8 @@ html.v-overlay-scroll-blocked body {
 .v-bottom-sheet > .v-bottom-sheet__content.v-overlay__content > .v-card {
   padding-block-end: env(safe-area-inset-bottom);
 }
+
+.settings-icon-button {
+  flex-shrink: 0;
+  min-inline-size: auto;
+}

src/views/plugin/PluginCardListView.vue

@@ -21,7 +21,7 @@ const display = useDisplay()
 const appMode = inject('pwaMode') && display.mdAndDown.value
 
 // 当前标签
-const activeTab = ref(route.query.tab)
+const activeTab = ref('我的插件')
 
 // 插件ID参数
 const pluginId = ref(route.query.id)
@@ -397,16 +397,22 @@ onMounted(async () => {
 
 <template>
   <div>
-    <VTabs v-model="activeTab" show-arrows stacked>
-      <VTab v-for="item in PluginTabs" :value="item.tab" class="px-10 rounded-t-lg">
-        <VIcon size="x-large" start :icon="item.icon" />
-        {{ item.title }}
-      </VTab>
-    </VTabs>
+    <VHeaderTab :items="PluginTabs" v-model="activeTab">
+      <template #append>
+        <VBtn
+          icon="mdi-store-cog"
+          variant="text"
+          color="primary"
+          size="default"
+          class="settings-icon-button"
+          @click="MarketSettingDialog = true"
+        />
+      </template>
+    </VHeaderTab>
 
     <VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
       <!-- 我的插件 -->
-      <VWindowItem value="installed">
+      <VWindowItem value="我的插件">
         <transition name="fade-slide" appear>
           <div>
             <LoadingBanner v-if="!isRefreshed" class="mt-12" />
@@ -440,7 +446,7 @@ onMounted(async () => {
         </transition>
       </VWindowItem>
       <!-- 插件市场 -->
-      <VWindowItem value="market">
+      <VWindowItem value="插件市场">
         <transition name="fade-slide" appear>
           <div>
             <LoadingBanner v-if="!isAppMarketLoaded" class="mt-12" />
@@ -519,18 +525,6 @@ onMounted(async () => {
       app
       appear
       @click="SearchDialog = true"
-      :class="appMode ? 'mb-28' : 'mb-16'"
-    />
-    <!-- 插件市场设置图标 -->
-    <VFab
-      icon="mdi-store-cog"
-      color="warning"
-      location="bottom"
-      size="x-large"
-      fixed
-      app
-      appear
-      @click="MarketSettingDialog = true"
       :class="{ 'mb-12': appMode }"
     />
   </div>

src/views/subscribe/SubscribeListView.vue

@@ -4,7 +4,6 @@ import api from '@/api'
 import type { Subscribe } from '@/api/types'
 import NoDataFound from '@/components/NoDataFound.vue'
 import SubscribeCard from '@/components/cards/SubscribeCard.vue'
-import SubscribeEditDialog from '@/components/dialog/SubscribeEditDialog.vue'
 import SubscribeHistoryDialog from '@/components/dialog/SubscribeHistoryDialog.vue'
 import { useUserStore } from '@/stores'
 import { useDisplay } from 'vuetify'
@@ -35,9 +34,6 @@ const loading = ref(false)
 // 数据列表
 const dataList = ref<Subscribe[]>([])
 
-// 弹窗
-const subscribeEditDialog = ref(false)
-
 // 历史记录弹窗
 const historyDialog = ref(false)
 
@@ -165,23 +161,12 @@ onActivated(async () => {
   />
   <!-- 底部操作按钮 -->
   <div v-if="isRefreshed">
-    <VFab
-      v-if="userStore.superUser"
-      icon="mdi-clipboard-edit"
-      location="bottom"
-      size="x-large"
-      fixed
-      app
-      appear
-      @click="subscribeEditDialog = true"
-      :class="{ 'mb-12': appMode }"
-    />
     <VFab
       v-if="userStore.superUser"
       icon="mdi-history"
       color="info"
       location="bottom"
-      :class="appMode ? 'mb-28' : 'mb-16'"
+      :class="{ 'mb-12': appMode }"
       size="x-large"
       fixed
       app
@@ -189,15 +174,6 @@ onActivated(async () => {
       @click="historyDialog = true"
     />
   </div>
-  <!-- 订阅编辑弹窗 -->
-  <SubscribeEditDialog
-    v-if="subscribeEditDialog"
-    v-model="subscribeEditDialog"
-    :default="true"
-    :type="props.type"
-    @save="subscribeEditDialog = false"
-    @close="subscribeEditDialog = false"
-  />
   <!-- 历史记录弹窗 -->
   <SubscribeHistoryDialog
     v-if="historyDialog"