💄 app-bar

src/pages/common/Announcements.vue

@@ -1,33 +1,40 @@
 <template>
   <ToLoading v-model="loading" :title="loadingTitle" />
+  <v-app-bar>
+    <template #prepend>
       <v-tabs v-model="tab" align-tabs="start" class="anno-tab">
         <v-tab v-for="(value, index) in tabValues" :key="index" :value="value">
           {{ AnnoType[value] }}
         </v-tab>
+      </v-tabs>
+      <div class="anno-selects">
         <v-select
           class="anno-select"
           :items="annoServerList"
           v-model="curRegionName"
           label="服务器"
-      dense
+          width="200px"
-      outlined
+          density="compact"
         />
         <v-select
           class="anno-select"
           :items="langList"
           v-model="curLangName"
           label="语言"
-      dense
+          width="200px"
-      outlined
+          density="compact"
         />
-    <v-spacer />
+      </div>
+    </template>
+    <template #append>
       <v-btn class="anno-switch-btn" @click="switchNews">
         <template #prepend>
           <v-icon>mdi-bullhorn</v-icon>
         </template>
         切换米游社咨讯
       </v-btn>
-  </v-tabs>
+    </template>
+  </v-app-bar>
   <v-window v-model="tab">
     <v-window-item v-for="(value, index) in tabValues" :key="index" :value="value">
       <div class="anno-grid">
@@ -257,14 +264,21 @@ async function createAnno(item: TGApp.App.Announcement.ListCard): Promise<void>
 
 <style lang="css" scoped>
 .anno-tab {
-  margin-bottom: 10px;
   color: var(--common-text-title);
   font-family: var(--font-title);
 }
 
+.anno-selects {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 25px;
+  margin: 0 10px;
+  gap: 10px;
+}
+
 .anno-select {
   width: 150px;
-  margin-left: 10px;
   color: var(--common-text-title);
   font-family: var(--font-title);
 }

src/pages/common/News.vue

@@ -1,10 +1,18 @@
-<!-- todo app-bar -->
 <template>
   <ToLoading v-model="loading" :title="loadingTitle" />
+  <v-app-bar density="compact">
+    <template #prepend>
       <v-tabs v-model="tab" align-tabs="start" class="news-tab">
-    <v-tab v-for="(value, index) in tabValues" :key="index" :value="value" @click="firstLoad(value)"
+        <v-tab
+          v-for="(value, index) in tabValues"
+          :key="index"
+          :value="value"
+          @click="firstLoad(value)"
           >{{ rawData[value].name }}
         </v-tab>
+      </v-tabs>
+    </template>
+    <template #title>
       <v-text-field
         v-model="search"
         class="news-search"
@@ -13,8 +21,10 @@
         :single-line="true"
         hide-details
         @keyup.enter="searchPost()"
+        @click:append="searchPost()"
       />
-    <v-spacer />
+    </template>
+    <template #append>
       <v-btn class="news-top-btn" @click="firstLoad(tab, true)">
         <v-icon>mdi-refresh</v-icon>
       </v-btn>
@@ -27,7 +37,8 @@
         </template>
         切换游戏内公告
       </v-btn>
-  </v-tabs>
+    </template>
+  </v-app-bar>
   <v-window v-model="tab">
     <v-window-item v-for="(value, index) in tabValues" :key="index" :value="value">
       <div class="news-grid">
@@ -225,7 +236,7 @@ async function searchPost(): Promise<void> {
 }
 
 .news-search {
-  margin-left: 10px;
+  margin: 0 10px;
   color: var(--box-text-1);
 }