From e0546f040c5b59ec9399453df3fa7fc38500ab12 Mon Sep 17 00:00:00 2001
From: EstrellaXD <estrellaxd05@gmail.com>
Date: Mon, 11 Sep 2023 20:08:49 +0800
Subject: [PATCH] =?UTF-8?q?webui:=20finish=20bottombar=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webui/src/components/layout/ab-bottombar.vue | 126 ++++++++++++++++---
 webui/src/pages/index.vue                    |  18 ++-
 2 files changed, 122 insertions(+), 22 deletions(-)

diff --git a/webui/src/components/layout/ab-bottombar.vue b/webui/src/components/layout/ab-bottombar.vue
index 6c357071..0dc712e6 100644
--- a/webui/src/components/layout/ab-bottombar.vue
+++ b/webui/src/components/layout/ab-bottombar.vue
@@ -1,25 +1,119 @@
 <script lang="ts" setup>
-import { Home } from "@icon-park/vue-next";
+import {
+  Home,
+  Log,
+  Search,
+  SettingTwo,
+} from '@icon-park/vue-next';
+import InlineSvg from "vue-inline-svg";
+
+const props = withDefaults(
+    defineProps<{
+      open?: boolean;
+    }>(),
+    {
+      open: false,
+    }
+);
+
+const show = ref(props.open);
+const route = useRoute();
+
+const RSS = h(
+    'span',
+    {class: ['rel', 'left-2px']},
+    h(InlineSvg, {src: '/images/RSS.svg'})
+);
+
+const items1 = [
+  {
+    id: 1,
+    icon: Home,
+    path: '/bangumi',
+  },
+  {
+    id: 2,
+    icon: RSS,
+    path: '/rss',
+  },
+]
+
+const items2 = [
+  {
+    id: 3,
+    icon: Log,
+    path: '/log',
+  },
+  {
+    id: 4,
+    icon: SettingTwo,
+    path: '/config',
+  },
+]
 </script>
 
 <template>
-  <div class="flex w-full bg-white shadow">
-    <div class="flex-1 flex justify-center items-center">
-      <router-link to="/bangumi">
-        <Home size={24} />
-      </router-link>
-    </div>
-    <div class="flex-1 flex justify-center items-center">
-      <router-link to="/setting">
-        <Home size={24} />
-      </router-link>
-    </div>
-    <div class="flex-1 flex justify-center items-center">
-      <router-link to="/about">
-        <Home size={24} />
-      </router-link>
+  <div>
+    <div flex w-full justify-between class="bottom-bar">
+      <RouterLink
+          v-for="i in items1"
+          :key="i.id"
+          :to="i.path"
+          f-cer
+          h-56px
+          w-full
+          is-btn
+          bg-white
+          shadow="primary"
+          :class="[
+          route.path === i.path && 'bg-theme-row text-white rounded-8px',
+        ]"
+      >
+        <Component :is="i.icon" size="24px"/>
+      </RouterLink>
+      <div f-cer bg-white shadow-primary class="search-outside">
+        <div f-cer wh-60px rounded-30px bg-theme-row>
+          <div f-cer wh-54px rounded-30px bg-white>
+            <div wh-48px f-cer rounded-24px bg-theme-row text-white shadow-primary>
+              <Component :is="Search" size="24px"/>
+            </div>
+          </div>
+        </div>
+      </div>
+      <RouterLink
+          v-for="i in items2"
+          :key="i.id"
+          :to="i.path"
+          f-cer
+          h-56px
+          bg-white
+          w-full
+          is-btn
+          shadow="primary"
+          :class="[
+          route.path === i.path && 'rounded-8px bg-theme-row text-white',
+        ]"
+      >
+        <Component :is="i.icon" size="24px"/>
+      </RouterLink>
     </div>
   </div>
 </template>
 
 
+<style lang="scss">
+.bottom-bar {
+  display: flex;
+  align-items: flex-end;
+  align-self: stretch;
+}
+
+.search-outside {
+  display: flex;
+  padding: 8px 8px 24px 8px;
+  align-items: flex-start;
+  gap: 8px;
+  border-radius: 40px 40px 0 0;
+}
+</style>
+
diff --git a/webui/src/pages/index.vue b/webui/src/pages/index.vue
index b92c134e..39d5f00a 100644
--- a/webui/src/pages/index.vue
+++ b/webui/src/pages/index.vue
@@ -28,14 +28,20 @@ const mobile = isMobile();
     </main>
   </div>
   <div v-else wh-screen bg-page>
-<!--    <RouterView v-slot="{ Component }">-->
-<!--      <KeepAlive>-->
-<!--        <component :is="Component"/>-->
-<!--      </KeepAlive>-->
-<!--    </RouterView>-->
-    <div flex-col justify-between>
+    <!--    <RouterView v-slot="{ Component }">-->
+    <!--      <KeepAlive>-->
+    <!--        <component :is="Component"/>-->
+    <!--      </KeepAlive>-->
+    <!--    </RouterView>-->
+    <div abs flex-col wh-full inline-flex z-10 justify-between class="mobile-component">
       <ab-topbar :mobile="true"/>
       <ab-bottombar/>
     </div>
   </div>
 </template>
+
+<style lang="scss">
+.mobile-component {
+  position: fixed;
+}
+</style>