💄 app-bar

src/pages/common/Announcements.vue

@@ -1,33 +1,40 @@
 <template>
   <ToLoading v-model="loading" :title="loadingTitle" />
-  <v-tabs v-model="tab" align-tabs="start" class="anno-tab">
+  <v-app-bar>
-    <v-tab v-for="(value, index) in tabValues" :key="index" :value="value">
+    <template #prepend>
-      {{ AnnoType[value] }}
+      <v-tabs v-model="tab" align-tabs="start" class="anno-tab">
-    </v-tab>
+        <v-tab v-for="(value, index) in tabValues" :key="index" :value="value">
-    <v-select
+          {{ AnnoType[value] }}
-      class="anno-select"
+        </v-tab>
-      :items="annoServerList"
+      </v-tabs>
-      v-model="curRegionName"
+      <div class="anno-selects">
-      label="服务器"
+        <v-select
-      dense
+          class="anno-select"
-      outlined
+          :items="annoServerList"
-    />
+          v-model="curRegionName"
-    <v-select
+          label="服务器"
-      class="anno-select"
+          width="200px"
-      :items="langList"
+          density="compact"
-      v-model="curLangName"
+        />
-      label="语言"
+        <v-select
-      dense
+          class="anno-select"
-      outlined
+          :items="langList"
-    />
+          v-model="curLangName"
-    <v-spacer />
+          label="语言"
-    <v-btn class="anno-switch-btn" @click="switchNews">
+          width="200px"
-      <template #prepend>
+          density="compact"
-        <v-icon>mdi-bullhorn</v-icon>
+        />
-      </template>
+      </div>
-      切换米游社咨讯
+    </template>
-    </v-btn>
+    <template #append>
-  </v-tabs>
+      <v-btn class="anno-switch-btn" @click="switchNews">
+        <template #prepend>
+          <v-icon>mdi-bullhorn</v-icon>
+        </template>
+        切换米游社咨讯
+      </v-btn>
+    </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,33 +1,44 @@
-<!-- todo app-bar -->
 <template>
   <ToLoading v-model="loading" :title="loadingTitle" />
-  <v-tabs v-model="tab" align-tabs="start" class="news-tab">
+  <v-app-bar density="compact">
-    <v-tab v-for="(value, index) in tabValues" :key="index" :value="value" @click="firstLoad(value)"
+    <template #prepend>
-      >{{ rawData[value].name }}
+      <v-tabs v-model="tab" align-tabs="start" class="news-tab">
-    </v-tab>
+        <v-tab
-    <v-text-field
+          v-for="(value, index) in tabValues"
-      v-model="search"
+          :key="index"
-      class="news-search"
+          :value="value"
-      append-icon="mdi-magnify"
+          @click="firstLoad(value)"
-      label="请输入帖子 ID 或搜索词"
+          >{{ rawData[value].name }}
-      :single-line="true"
+        </v-tab>
-      hide-details
+      </v-tabs>
-      @keyup.enter="searchPost()"
+    </template>
-    />
+    <template #title>
-    <v-spacer />
+      <v-text-field
-    <v-btn class="news-top-btn" @click="firstLoad(tab, true)">
+        v-model="search"
-      <v-icon>mdi-refresh</v-icon>
+        class="news-search"
-    </v-btn>
+        append-icon="mdi-magnify"
-    <v-btn class="news-top-btn" @click="showList = true">
+        label="请输入帖子 ID 或搜索词"
-      <v-icon>mdi-view-list</v-icon>
+        :single-line="true"
-    </v-btn>
+        hide-details
-    <v-btn class="news-top-btn" @click="switchAnno" v-if="gid === '2'">
+        @keyup.enter="searchPost()"
-      <template #prepend>
+        @click:append="searchPost()"
-        <v-icon>mdi-bullhorn</v-icon>
+      />
-      </template>
+    </template>
-      切换游戏内公告
+    <template #append>
-    </v-btn>
+      <v-btn class="news-top-btn" @click="firstLoad(tab, true)">
-  </v-tabs>
+        <v-icon>mdi-refresh</v-icon>
+      </v-btn>
+      <v-btn class="news-top-btn" @click="showList = true">
+        <v-icon>mdi-view-list</v-icon>
+      </v-btn>
+      <v-btn class="news-top-btn" @click="switchAnno" v-if="gid === '2'">
+        <template #prepend>
+          <v-icon>mdi-bullhorn</v-icon>
+        </template>
+        切换游戏内公告
+      </v-btn>
+    </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);
 }