feat: 添加标题栏组件，调整主题颜色，优化主应用布局

2061360308 · Jan 28, 2025 · 078a6b9 · 078a6b9
1 parent 94da15a
commit 078a6b9
Show file tree

Hide file tree

Showing 6 changed files with 197 additions and 10 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -50,6 +50,7 @@ declare module 'vue' {
     SearchManager: typeof import('./src/components/SearchManager.vue')['default']
     SettingsPanel: typeof import('./src/components/SettingsPanel.vue')['default']
     StatusBar: typeof import('./src/components/StatusBar.vue')['default']
+    TitleBar: typeof import('./src/components/TitleBar.vue')['default']
     WorkSpace: typeof import('./src/components/WorkSpace.vue')['default']
   }
   export interface ComponentCustomProperties {

diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>InkStone</title>
     <meta name="description" content="最好的Markdown编辑器，不止是编辑器！" />
-    <meta name="theme-color" content="#ffffff" />
+    <meta name="theme-color" content="#dde3e9" />
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/components/MainApplication.vue b/src/components/MainApplication.vue
@@ -9,6 +9,7 @@ import SearchManager from "./SearchManager.vue";
 import DiffManager from "./DiffManager.vue";
 import EditingManager from "./EditingManager.vue";
 import AboutApp from "./AboutApp.vue";
+import TitleBar from "./TitleBar.vue";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import api from "@/utils/api";
 import { useTabsStore, useSettingsStore } from "@/stores";
@@ -23,6 +24,36 @@ const leftPaneSize = ref(20);
 const activeMenu = ref("files");
 const aboutDialogVisible = ref(false);
 
+const isOverlayVisible = ref(false);
+
+const debounce = (
+  func: { (e: any): void; (arg0: any): void },
+  wait: number | undefined
+) => {
+  let timeout: string | number | NodeJS.Timeout | undefined;
+  return function executedFunction(...args: [any]) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+if ("windowControlsOverlay" in navigator) {
+  (navigator as any).windowControlsOverlay.addEventListener(
+    "geometrychange",
+    debounce((e: { titlebarAreaRect: any }) => {
+      // Detect if the Window Controls Overlay is visible.
+      isOverlayVisible.value = (navigator as any).windowControlsOverlay.visible;
+
+      // Get the size and position of the title bar area.
+      // const titleBarRect = e.titlebarAreaRect;
+    }, 200)
+  );
+}
+
 const pingGitHub = async (): Promise<boolean> => {
   try {
     const response = await fetch("https://api.github.com/");
@@ -37,9 +68,12 @@ const pingGitHub = async (): Promise<boolean> => {
 onMounted(async () => {
   if (!api.ready) {
     // 判断是否是跳过登录的情况(已经启用离线模式或之前没有登录过，没有loginMethod标识)
-    if (!localStorage.getItem("jumpLogin") && localStorage.getItem("loginMethod")) {
+    if (
+      !localStorage.getItem("jumpLogin") &&
+      localStorage.getItem("loginMethod")
+    ) {
       // 这里检查是否能够正常访问Github【只检查api.github.com】
-      if ((await pingGitHub())) {
+      if (await pingGitHub()) {
         router.push({ name: "login" });
       } else {
         ElNotification({
@@ -138,7 +172,16 @@ if (
 </script>
 
 <template>
-  <div class="main">
+  <TitleBar v-if="isOverlayVisible" />
+  <div
+    class="main"
+    :style="{
+      top: isOverlayVisible ? 'env(titlebar-area-height, 33px)' : 0,
+      height: isOverlayVisible
+        ? 'calc(100vh - env(titlebar-area-height, 33px))'
+        : '100vh',
+    }"
+  >
     <el-menu
       class="slider-menu-bar"
       :default-active="activeMenu"
@@ -212,9 +255,10 @@ if (
 
 <style scoped>
 .main {
+  position: fixed;
+  left: 0;
   display: flex;
   width: 100%;
-  height: 100vh;
 }
 
 .splitpanes {

diff --git a/src/components/TitleBar.vue b/src/components/TitleBar.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import {
+  ContextMenu,
+  ContextMenuGroup,
+  ContextMenuSeparator,
+  ContextMenuItem,
+} from "@imengyu/vue3-context-menu";
+
+const menuVisible = ref(false);
+const optionsComponent = ref({
+  x: 500,
+  y: 200,
+});
+
+const onFileMenu = (event: {
+  preventDefault: () => void;
+  clientX: any;
+  clientY: any;
+}) => {
+  console.log("onFileMenu", event);
+  event.preventDefault();
+
+  optionsComponent.value = {
+    x: event.clientX,
+    y: event.clientY,
+  };
+  menuVisible.value = !menuVisible.value;
+};
+</script>
+
+<template>
+  <div class="title-bar">
+    <div class="logo">
+      <el-image src="/favicon.ico" alt="logo" class="logo-img" />
+    </div>
+    <span class="title">砚台 Inkstone</span>
+    <div class="bar-menu" @click="onFileMenu">文件</div>
+    <div class="opened-file-tip">这是打开的文件</div>
+  </div>
+  <context-menu v-model:show="menuVisible" :options="optionsComponent">
+    <context-menu-group label="新建" icon="fas fa-plus">
+      <context-menu-item
+        label="新建文章"
+        :clickClose="true"
+        data-filetype="post"
+      >
+        <template #icon>
+          <font-awesome-icon :icon="['fas', 'square-pen']" />
+        </template>
+      </context-menu-item>
+      <context-menu-item
+        label="新建草稿"
+        :clickClose="true"
+        data-filetype="draft"
+      >
+        <template #icon>
+          <font-awesome-icon :icon="['fas', 'pen-ruler']" />
+        </template>
+      </context-menu-item>
+
+      <ContextMenuSeparator />
+
+      <context-menu-item label="文件" :clickClose="true" data-filetype="file">
+        <template #icon>
+          <font-awesome-icon :icon="['fas', 'file']" />
+        </template>
+      </context-menu-item>
+    </context-menu-group>
+
+    <context-menu-item label="重命名" :clickClose="false">
+      <template #icon>
+        <font-awesome-icon :icon="['fas', 'i-cursor']" />
+      </template>
+    </context-menu-item>
+    <context-menu-item label="复制" :clickClose="false">
+      <template #icon> <font-awesome-icon :icon="['fas', 'copy']" /> </template
+    ></context-menu-item>
+    <context-menu-item label="删除" :clickClose="false">
+      <template #icon>
+        <font-awesome-icon
+          :icon="['fas', 'trash']"
+          style="color: var(--el-color-danger)"
+        />
+      </template>
+    </context-menu-item>
+  </context-menu>
+</template>
+
+<style scoped>
+.title-bar {
+  padding: 0 10px;
+  position: fixed;
+  left: env(titlebar-area-x, 0);
+  top: env(titlebar-area-y, 0);
+  height: env(titlebar-area-height, 33px);
+  width: env(titlebar-area-width, 100%);
+  -webkit-app-region: drag;
+  display: flex;
+  gap: 10px;
+  justify-content: left;
+  align-items: center;
+  white-space: nowrap;
+  background-color: #dde3e9;
+}
+
+.logo-img {
+  width: env(titlebar-area-height, 33px);
+  height: env(titlebar-area-height, 33px);
+  border-radius: 50%;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.bar-menu {
+  padding: 4px 6px;
+  border-radius: 4px;
+  -webkit-app-region: no-drag;
+}
+
+.bar-menu:hover {
+  background-color: var(--el-color-primary-light-8);
+}
+
+.opened-file-tip {
+  font-size: 14px;
+  color: #666;
+  z-index: -1;
+  margin: auto;
+}
+</style>
diff --git a/src/main.ts b/src/main.ts
@@ -8,14 +8,21 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import fontAwesomeLibrary from "./utils/fontAwesomeLibrary";
 fontAwesomeLibrary();
 
-// import { listS3Objects } from "./imagehosting/test";
-
-// console.log(listS3Objects);
-// listS3Objects("blog-image-1303709080", "/system_images");
-
 const app = createApp(App);
 const pinia = createPinia();
 app.use(pinia);
 app.use(router);
 app.component("FontAwesomeIcon", FontAwesomeIcon);
+
+if ("windowControlsOverlay" in navigator) {
+  navigator.windowControlsOverlay.addEventListener(
+    "geometrychange",
+    (event) => {
+      const { titlebarAreaRect } = event;
+      // 根据 titlebarAreaRect 调整布局
+      console.log("Titlebar area:", titlebarAreaRect);
+    }
+  );
+}
+
 app.mount("#app");
diff --git a/vite.config.ts b/vite.config.ts
@@ -27,6 +27,7 @@ export default defineConfig({
         display: "standalone",
         scope: "/",
         start_url: "/",
+        display_override: ["window-controls-overlay"],
         icons: [
           {
             "src": "/pwa-192x192.png",