Merge pull request #41 from os-checker/ui/topbar

feat(TopBar): 顶部栏 - 按钮 - 主页、问题文件树、使用说明、主题切换
os-checker · Aug 12, 2024 · 5c8052f · 5c8052f
2 parents 8732066 + a9da39c
commit 5c8052f
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 91 deletions.
diff --git a/os-checks/app.vue b/os-checks/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <NuxtLayout>
     <NuxtPage />
-  </div>
+  </NuxtLayout>
 </template>
diff --git a/os-checks/assets/style.css b/os-checks/assets/style.css
@@ -1,32 +1,3 @@
-.container {
-    display: flex;
-    flex-wrap: wrap;
-    /* 允许子元素换行 */
-    justify-content: space-between;
-}
-
-.left-to-right,
-.right-to-left {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    /* 允许子元素在必要时换行 */
-}
-
-.left-to-right {
-    justify-content: flex-start;
-    /* 子元素从左往右排列 */
-}
-
-.right-to-left {
-    justify-content: flex-end;
-    /* 子元素在容器内靠右对齐 */
-    margin-left: auto;
-    /* 将第二个 div 推到容器的右侧 */
-    gap: 0.5rem;
-    /* 容器内部的元素间隔为 0.5rem */
-}
-
 /* 媒体查询：对于较小的屏幕 */
 /* @media (max-width: 600px) {} */
 

diff --git a/os-checks/components/DarkMode.vue b/os-checks/components/DarkMode.vue
@@ -1,7 +1,7 @@
 <template>
   <ClientOnly>
     <span>
-      <Button @click="toggleDarkMode" severity="contrast" :icon="darkMode ? 'pi pi-sun' : 'pi pi-moon'" />
+      <Button title="主题切换" @click="toggleDarkMode" severity="contrast" :icon="darkMode ? 'pi pi-sun' : 'pi pi-moon'" />
     </span>
   </ClientOnly>
 </template>

diff --git a/os-checks/components/NavigationBreadcrumb.vue b/os-checks/components/NavigationBreadcrumb.vue
diff --git a/os-checks/components/TopBar.vue b/os-checks/components/TopBar.vue
@@ -0,0 +1,59 @@
+<template>
+  <div style="display: flex;">
+
+    <div class="topBarLeft">
+
+      <NuxtLink to="/">
+        <Button title="主页" icon="pi pi-home" />
+      </NuxtLink>
+
+      <NuxtLink to="/file-tree">
+        <Button title="问题文件树" icon="pi pi-sitemap" />
+      </NuxtLink>
+
+    </div>
+
+    <div class="topBarRight">
+
+      <Button title="使用说明" icon="pi pi-question" severity="info" as="a" target="_blank" rel="noopener"
+        href="https://github.com/os-checker/os-checker.github.io/wiki/%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E" />
+
+      <DarkMode />
+
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+.topBarLeft,
+.topBarRight {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.25rem 0.8rem;
+  /* 允许子元素换行 */
+  justify-content: space-between;
+  /* 允许项目换行 */
+  flex-wrap: wrap;
+  /* 指定项目之间的间隔 */
+  gap: 0.5rem;
+  /* 垂直居中所有子元素 */
+  height: 55px;
+  /* 容器的高度 */
+  --p-button-sm-padding-x: 0.8rem;
+}
+
+.topBarLeft {
+  justify-content: flex-start;
+  /* 子元素从左往右排列 */
+}
+
+.topBarRight {
+  display: flex;
+  /* 子元素在容器内靠右对齐 */
+  justify-content: flex-end;
+  /* 子元素在容器内靠右对齐 */
+  margin-left: auto;
+}
+</style>
diff --git a/os-checks/layouts/default.vue b/os-checks/layouts/default.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <TopBar />
+
+    <slot />
+  </div>
+</template>
diff --git a/os-checks/pages/file-tree.vue b/os-checks/pages/file-tree.vue
@@ -161,7 +161,6 @@ const tabs = reactive<CheckerResult[]>([
   <div class="fileViewPanel">
 
     <div class="fileViewNavi">
-      <NavigationBreadcrumb />
       <ScrollPanel class="fileViewMenu">
         <PackageFileMenu style="padding-right: 0.8rem;" :nodes="nodes" :selectedKey="selectedKey"
           @update:selectedKey="selectedKey = $event" />

diff --git a/os-checks/pages/index.vue b/os-checks/pages/index.vue
@@ -51,29 +51,20 @@ const selectedKey = ref();
     scrollable scrollHeight="92vh" v-model:selectionKeys="selectedKey" selectionMode="single">
 
     <template #header>
-      <div class="container">
-        <div class="left-to-right">
+      <div class="header">
+
+        <div>
           <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="dataColumns"
             optionLabel="header" class="w-full sm:w-64" display="chip" />
         </div>
-        <div class="right-to-left">
-
-          <span>
-            <NuxtLink to="/file-tree">
-              <Button title="文件树" icon="pi pi-sitemap" />
-            </NuxtLink>
-          </span>
-
-          <DarkMode />
-
-          <span style="display: inline-block;">
-            <IconField>
-              <InputIcon class="pi pi-search" />
-              <InputText v-model="filters['global']" placeholder="Global Search" />
-            </IconField>
-          </span>
 
+        <div>
+          <IconField>
+            <InputIcon class="pi pi-search" />
+            <InputText v-model="filters['global']" placeholder="Global Search" />
+          </IconField>
         </div>
+
       </div>
     </template>
 
@@ -106,3 +97,12 @@ const selectedKey = ref();
   </TreeTable>
 
 </template>
+
+<style scoped>
+.header {
+  display: flex;
+  flex-wrap: wrap;
+  /* 允许子元素换行 */
+  justify-content: space-between;
+}
+</style>