feat: 合并代码

src/renderer/components/HeaderBar/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <header class="title-bar flex items-start justify-between h-[40px]">
+    <div class="title-bar-main flex-auto">
+      <slot>{{ title ?? '' }}</slot>
+    </div>
+
+    <div class="title-bar-controls w-[168px] flex items-center justify-end text-tx-secondary">
+      <native-tooltip :content="t('window.minimize')">
+        <button v-show="isMinimizable" class="flex items-center justify-center cursor-pointer w-[40px] h-[40px]"
+          @click="minimizeWindow">
+          <iconify-icon icon="material-symbols:check-indeterminate-small" color="#ffffff" :width="btnSize"
+            :height="btnSize" />
+        </button>
+      </native-tooltip>
+      <native-tooltip :content="isMaximized ? t('window.restore') : t('window.maximize')">
+        <button v-show="isMaximizable" class="flex items-center justify-center cursor-pointer w-[40px] h-[40px]"
+          @click="maximizeWindow">
+          <iconify-icon icon="material-symbols:chrome-maximize-outline-sharp" color="#ffffff" :width="btnSize"
+            :height="btnSize" v-show="!isMaximized" />
+          <iconify-icon icon="material-symbols:chrome-restore-outline-sharp" color="#ffffff" :width="btnSize"
+            :height="btnSize" v-show="isMaximized" />
+        </button>
+      </native-tooltip>
+      <native-tooltip :content="t('window.close')">
+        <button v-show="isClosable" class="flex items-center justify-center cursor-pointer w-[40px] h-[40px]"
+          @click="handleClose">
+          <iconify-icon icon="material-symbols:close" color="#ffffff" :width="btnSize" :height="btnSize" />
+        </button>
+      </native-tooltip>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { Icon as IconifyIcon } from '@iconify/vue'
+import { useWinManager } from '@hooks/useWinManager'
+
+import NativeTooltip from '@components/NativeTooltip/index.vue'
+
+interface HeaderBarProps {
+  title?: string;
+  isMaximizable?: boolean;
+  isMinimizable?: boolean;
+  isClosable?: boolean;
+}
+
+defineOptions({ name: 'HeaderBar' })
+
+withDefaults(defineProps<HeaderBarProps>(), {
+  isMaximizable: true,
+  isMinimizable: true,
+  isClosable: true,
+})
+const emit = defineEmits(['close']);
+const { t } = useI18n();
+
+const btnSize = 16;
+
+const {
+  isMaximized,
+  closeWindow,
+  minimizeWindow,
+  maximizeWindow
+} = useWinManager();
+
+function handleClose() {
+  emit('close');
+  closeWindow();
+}
+</script>
+
+<style scoped>
+.title-bar {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+</style>

src/renderer/components/NativeTooltip/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <template v-if="slots.default()[0].el">
+    <slot></slot>
+  </template>
+  <template v-else>
+    <span :title="content">
+      <slot></slot>
+    </span>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { logger } from '@utils/logger'
+
+interface Props {
+  content: string;
+}
+
+defineOptions({ name: 'NativeTooltip' });
+
+const props = defineProps<Props>();
+const slots = defineSlots()
+
+if (slots?.default?.().length > 1) {
+  logger.warn('NativeTooltip only support one slot.')
+}
+
+const updateTooltipContent = (content: string) => {
+  const defaultSlot = slots?.default?.();
+
+  if (defaultSlot) {
+    const slotElement = defaultSlot[0]?.el
+
+    if (slotElement && slotElement instanceof HTMLElement) {
+      slotElement.title = content;
+    }
+  }
+}
+
+onMounted(() => updateTooltipContent(props.content))
+
+watch(() => props.content, (val: string) => updateTooltipContent(val));
+</script>