新增：界面顶部优化：类似Tabby #18

ui/public/resource/loading.js

@@ -3,7 +3,7 @@
  * @param {string} id - 元素id
  */
 function initSvgLogo(id) {
-  const svgStr = `<svg width="128px" height="128px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	const svgStr1 = `<svg width="128px" height="128px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 	y="0px" viewBox="0 0 158.9 158.9" style="enable-background:new 0 0 158.9 158.9;" xml:space="preserve">
 	<path style="fill:none" d="M0,158.9C0,106.3,0,53.7,0,1.1C0,0.2,0.2,0,1.1,0c52.2,0,104.5,0,156.7,0c0.9,0,1.1,0.2,1.1,1.1
 	c0,52.2,0,104.5,0,156.7c0,0.9-0.2,1.1-1.1,1.1C105.2,158.8,52.6,158.8,0,158.9z" />
@@ -23,20 +23,21 @@ function initSvgLogo(id) {
 	c-3.6-2.6-4.3-7.6-1.7-11.2c0.1-0.1,0.2-0.3,0.3-0.4c4.1-5.2,9.3-9.6,15.1-12.8c4.4-2.5,9.1-4.2,14-5.1
 	C73.3,117.7,77.9,121.3,77.9,126.6z" />
 	</svg>`;
-  const appEl = document.querySelector(id);
-  const div = document.createElement('div');
-  div.innerHTML = svgStr;
-  if (appEl) {
-    appEl.appendChild(div);
-  }
+	const svgStr = `<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><rect x="0" y="0" width="24" height="24" fill="none" stroke="none" /><g fill="none"><path d="M24 0v24H0V0h24ZM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018Zm.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022Zm-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01l-.184-.092Z"/><path fill="currentColor" d="M20 16.5a1.5 1.5 0 0 1 .145 2.993L20 19.5h-8a1.5 1.5 0 0 1-.144-2.993L12 16.5h8ZM3.283 5.283A1.5 1.5 0 0 1 5.29 5.18l.114.103l5.657 5.657a1.5 1.5 0 0 1 .103 2.007l-.103.114l-5.657 5.657A1.5 1.5 0 0 1 3.18 16.71l.103-.114L7.879 12L3.283 7.404a1.5 1.5 0 0 1 0-2.121Z"/></g></svg>`
+	const appEl = document.querySelector(id);
+	const div = document.createElement('div');
+	div.innerHTML = svgStr;
+	if (appEl) {
+		appEl.appendChild(div);
+	}
 }
 
 function addThemeColorCssVars() {
-  const key = '__THEME_COLOR__';
-  const defaultColor = '#1890ff';
-  const themeColor = window.localStorage.getItem(key) || defaultColor;
-  const cssVars = `--primary-color: ${themeColor}`;
-  document.documentElement.style.cssText = cssVars;
+	const key = '__THEME_COLOR__';
+	const defaultColor = '#1890ff';
+	const themeColor = window.localStorage.getItem(key) || defaultColor;
+	const cssVars = `--primary-color: ${themeColor}`;
+	document.documentElement.style.cssText = cssVars;
 }
 
 addThemeColorCssVars();

ui/src/layouts/BasicLayout/index.vue

@@ -30,7 +30,6 @@
     </template>-->
   </admin-layout>
   <global-back-top />
-  <setting-drawer />
 	<ai-chat/>
 </template>
 
@@ -40,7 +39,6 @@ import { useAppStore, useThemeStore } from '@/store';
 import { useBasicLayout } from '@/composables';
 import { useBoolean } from '@/hooks';
 import {
-  SettingDrawer,
   GlobalHeader,
   GlobalTab,
   GlobalSider,

ui/src/layouts/common/GlobalTab/components/SettingButton/index.vue

@@ -0,0 +1,26 @@
+<template>
+	<hover-container class="w-64px h-full" tooltip-content="设置" placement="bottom-end" @click="toSettingView">
+		<Icon icon="icon-park-outline:setting-two" class="text-18px"/>
+	</hover-container>
+</template>
+
+<script setup lang="ts">
+import {Icon} from "@iconify/vue";
+import {routeName} from "@/router";
+import {useRouterPush} from "@/composables";
+
+defineOptions({name: 'ProjectSettingButton'});
+
+const {routerPush} = useRouterPush();
+
+const toSettingView = () => {
+	routerPush({
+		name: routeName('project_setting'),
+		hash: '#DEMO_HASH'
+	});
+}
+
+
+</script>
+
+<style scoped></style>

ui/src/layouts/common/GlobalTab/components/WindowButton/index.vue

@@ -0,0 +1,55 @@
+<template>
+	<hover-container class="w-64px h-full" tooltip-content="缩小" placement="bottom-end" @click="minimize">
+		<Icon icon="clarity:window-min-line" class="text-18px"/>
+	</hover-container>
+	<hover-container v-if="!isMaximized" class="w-64px h-full" tooltip-content="最大化" placement="bottom-end" @click="maximize">
+		<Icon icon="typcn:arrow-maximise" class="text-18px"/>
+	</hover-container>
+	<hover-container v-else class="w-64px h-full" tooltip-content="还原" placement="bottom-end" @click="maximize">
+		<Icon icon="material-symbols:close-fullscreen" class="text-18px"/>
+	</hover-container>
+	<hover-container class="w-64px h-full" tooltip-content="关闭" placement="bottom-end" @click="close">
+		<Icon icon="material-symbols:close" class="text-18px"/>
+	</hover-container>
+</template>
+
+<script setup lang="ts">
+import {appWindow} from "@tauri-apps/api/window";
+import { Icon } from '@iconify/vue';
+import {useAppStore} from '@/store';
+import {useLoading} from '@/hooks';
+import {ref} from "vue";
+
+
+defineOptions({name: 'ReloadButton'});
+
+const isMaximized=ref(false);
+
+const app = useAppStore();
+const {loading, startLoading, endLoading} = useLoading();
+
+
+const minimize = () => {
+	appWindow.minimize();
+}
+
+const maximize = async () => {
+	await appWindow.toggleMaximize();
+	isMaximized.value=await appWindow.isMaximized();
+}
+
+const close = () => {
+	appWindow.close();
+}
+
+
+function handleRefresh() {
+	startLoading();
+	app.reloadPage();
+	setTimeout(() => {
+		endLoading();
+	}, 1000);
+}
+</script>
+
+<style scoped></style>

ui/src/layouts/common/GlobalTab/components/index.ts

@@ -1,4 +1,5 @@
 import TabDetail from './TabDetail/index.vue';
-import ReloadButton from './ReloadButton/index.vue';
+import ProjectSettingButton from './SettingButton/index.vue';
+import WindowButton from './WindowButton/index.vue';
 
-export { TabDetail, ReloadButton };
+export { TabDetail, ProjectSettingButton,WindowButton };

ui/src/layouts/common/GlobalTab/index.vue

@@ -1,20 +1,23 @@
 <template>
-  <dark-mode-container class="global-tab flex-y-center w-full pl-16px" :style="{ height: theme.tab.height + 'px' }">
-    <div ref="bsWrapper" class="flex-1-hidden h-full">
-      <better-scroll ref="bsScroll" :options="{ scrollX: true, scrollY: false}">
-        <tab-detail @scroll="handleScroll" />
+	<div>
+  <dark-mode-container  class="global-tab flex-y-center w-full pl-16px" :style="{ height: theme.tab.height + 'px' }">
+    <div ref="bsWrapper"  class="flex-1-hidden h-full">
+      <better-scroll data-tauri-drag-region  ref="bsScroll" :options="{ scrollX: true, scrollY: false}">
+        <tab-detail  @scroll="handleScroll" />
       </better-scroll>
     </div>
-    <reload-button />
+		<ProjectSettingButton/>
+		<WindowButton/>
   </dark-mode-container>
+	</div>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useElementBounding } from '@vueuse/core';
 import { useThemeStore, useTabStore } from '@/store';
-import { TabDetail, ReloadButton } from './components';
+import { TabDetail,WindowButton,ProjectSettingButton } from './components';
 
 defineOptions({ name: 'GlobalTab' });