feat: 自定义标题栏

.gitignore

@@ -23,4 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 
-dist-electron
+dist-electron
+release

electron/win/mainWin.ts

@@ -30,7 +30,7 @@ const createWindow = (): BrowserWindow => {
     y,
     width: winWidth,
     height: winHeight,
-    frame: true,
+    frame: false,
     show: false,
     // transparent: true,
     backgroundColor: "#fff",

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "rimraf dist-electron && vite build && electron-builder",
+    "build:win": "rimraf dist-electron && vite build && electron-builder --win",
     "tscBuild": "tsc && rimraf dist-electron && vite build && electron-builder",
     "vitebuild": "vite build",
     "serve": "vite preview"

src/components/MessageModal/MessageModal.tsx

@@ -85,6 +85,7 @@ const MessageModal: React.FC<MessageModalProps> = ({
       onCancel={onClose}
       footer={null}
       width={600}
+      style={{ top: 10 }}
     >
       <div className="flex flex-col">
         <Tabs
@@ -95,7 +96,7 @@ const MessageModal: React.FC<MessageModalProps> = ({
             setActiveKey(key);
           }}
         />
-        <div className="space-y-4 max-h-[60vh] overflow-auto">
+        <div className="space-y-4 max-h-[70vh] overflow-auto">
           {notifications
             .filter(
               (notification) =>

src/hooks/useWebSocket.ts

@@ -13,7 +13,7 @@ interface UseWebSocketReturn {
 
 const useWebSocket = (url: string): UseWebSocketReturn => {
   const [socket, setSocket] = useState<WebSocket | null>(null);
-  const { notifications, changeNotification } = useNotificationStore();
+  const { changeNotification } = useNotificationStore();
   useEffect(() => {
     const ws = new WebSocket(url);
 

src/index.css

@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.drag {
+  -webkit-app-region: drag;
+}
+
+.no-drag {
+  -webkit-app-region: no-drag;
+}

src/layouts/Header/index.tsx

@@ -34,10 +34,16 @@ const LayoutHeader = (props) => {
   };
 
   return (
-    <header className="header bg-[#ffffff]">
-      <div className="content flex">
-        <div className="header-menu flex-1 h-full"></div>
-        <div className="opt flex items-center py-2 px-6">
+    <header className="py-6 px-2 flex justify-between items-center bg-[#ffffff] h-8 drag">
+      <div>
+        <div className="flex items-center gap-2">
+          <img src="./logo.ico" className="w-4 h-4" alt="logo" />
+          <div>菁苗健康</div>
+        </div>
+      </div>
+      <div className="flex">
+        <div className="flex-1 h-full"></div>
+        <div className="flex items-center py-2 no-drag">
           <div
             onClick={() => setMessageModalVisible(true)}
             className="relative cursor-pointer p-2 hover:bg-gray-100 rounded-lg"
@@ -45,7 +51,7 @@ const LayoutHeader = (props) => {
             <Bell className="text-gray-600 hover:bg-gray-5002" size={16} />
             {!!notifications.length && (
               <span className="absolute top-0 right-0 w-4 h-4 flex justify-center items-center text-xs bg-red-500 text-white rounded-full">
-                {notifications.length}
+                {notifications.length > 9 ? "9+" : notifications.length}
               </span>
             )}
           </div>
@@ -71,7 +77,7 @@ const LayoutHeader = (props) => {
             className="cursor-pointer p-2 hover:bg-gray-100 rounded-lg"
             onClick={(event) => handleTitleClick(event, "close")}
           >
-            <X className="cursor-pointer text-gray-600 " size={16} />
+            <X className="cursor-pointer text-gray-600" size={16} />
           </div>
         </div>
       </div>