feat: add app icon on title bar on desktop window (casibase#1375)

Author: gaosen1

web/src/OsDesktop.css

@@ -186,32 +186,125 @@
 }
 
 .window-header {
-  height: 30px;
+  height: 32px;
   background-color: #f0f0f0;
   display: flex;
   align-items: center;
-  padding: 0 10px;
+  justify-content: space-between;
+  padding-left: 12px;
+  padding-right: 0;
   cursor: move;
   user-select: none;
+  border-bottom: 1px solid #e5e5e5;
 }
 
-.window-navigation {
+.window-header-left {
   display: flex;
-  gap: 5px;
-  margin-right: 10px;
+  align-items: center;
+  gap: 12px;
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.window-app-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.window-app-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
 }
 
 .window-title {
-  flex-grow: 1;
   font-size: 14px;
+  font-weight: 400;
+  color: #323130;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.window-navigation {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.window-navigation .ant-btn {
+  border: none;
+  background-color: transparent;
+  box-shadow: none;
+  color: #605e5c;
+  border-radius: 4px;
+  width: 32px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
+
+.window-controls .ant-btn {
+  border: none;
+  background-color: transparent;
+  box-shadow: none;
+  color: #605e5c;
+  border-radius: 0;
+  width: 46px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  font-size: 12px;
+}
+
+.window-navigation .ant-btn:disabled {
+  color: #d2d0ce;
+  background-color: transparent;
+}
+
+.window-navigation .ant-btn:hover:not(:disabled) {
+  background-color: #f3f2f1;
+  color: #323130;
+}
+
+.window-navigation .ant-btn:active:not(:disabled) {
+  background-color: #edebe9;
 }
 
 .window-controls {
   display: flex;
-  gap: 5px;
+  gap: 0;
+  flex-shrink: 0;
+}
+
+.window-controls .ant-btn:hover:not(.ant-btn-dangerous) {
+  background-color: #f3f2f1;
+  color: #323130;
+}
+
+.window-controls .ant-btn:active:not(.ant-btn-dangerous) {
+  background-color: #edebe9;
+}
+
+.window-controls .ant-btn-dangerous:hover {
+  background-color: #e81123;
+  color: white;
+}
+
+.window-controls .ant-btn-dangerous:active {
+  background-color: #c50e1f;
+  color: white;
+}
+
+.window-controls .ant-btn .anticon {
+  font-size: 12px;
 }
 
 .window-content {

web/src/OsDesktop.js

@@ -25,7 +25,7 @@ import {
 import {Button} from "antd";
 import i18next from "i18next";
 import "./OsDesktop.css";
-import {LeftOutlined, RightOutlined} from "@ant-design/icons";
+import {CloseOutlined, LeftOutlined, MinusOutlined, RightOutlined} from "@ant-design/icons";
 import {useHistory} from "react-router-dom";
 import routeManager, {DynamicRouteComponent} from "./component/AppRouteManager";
 import {StaticBaseUrl} from "./Conf";
@@ -133,40 +133,49 @@ const Window = ({id, title, isMaximized, isMinimized, zIndex, position, onClose,
           onMaximize();
         }}
       >
-        <div className="window-navigation">
-          <Button
-            icon={<LeftOutlined />}
-            size="small"
-            disabled={!canGoBack}
-            onClick={(e) => {
-              e.stopPropagation();
-              onGoBack();
-            }}
-          />
-          <Button
-            icon={<RightOutlined />}
-            size="small"
-            disabled={!canGoForward}
-            onClick={(e) => {
-              e.stopPropagation();
-              onGoForward();
-            }}
-          />
+        <div className="window-header-left">
+          <div className="window-app-info">
+            <img
+              src={`${StaticBaseUrl}/apps/${appConfig?.iconPath}`}
+              alt={title}
+              className="window-app-icon"
+            />
+            <div className="window-title">{i18next.t(`${appConfig?.i18nNamespace || "general"}:${title}`)}</div>
+          </div>
+          <div className="window-navigation">
+            <Button
+              icon={<LeftOutlined />}
+              size="small"
+              disabled={!canGoBack}
+              onClick={(e) => {
+                e.stopPropagation();
+                onGoBack();
+              }}
+            />
+            <Button
+              icon={<RightOutlined />}
+              size="small"
+              disabled={!canGoForward}
+              onClick={(e) => {
+                e.stopPropagation();
+                onGoForward();
+              }}
+            />
+          </div>
         </div>
-        <div className="window-title">{i18next.t(`${appConfig?.i18nNamespace || "general"}:${title}`)}</div>
         <div className="window-controls">
-          <Button size="small" onClick={(e) => {
+          <Button size="small" danger icon={<MinusOutlined />} onClick={(e) => {
             e.stopPropagation();
             onMinimize();
-          }}>_</Button>
-          <Button size="small" onClick={(e) => {
+          }} />
+          <Button size="small" danger onClick={(e) => {
             e.stopPropagation();
             onMaximize();
-          }}>{isMaximized ? "❐" : "□"}</Button>
-          <Button size="small" danger onClick={(e) => {
+          }} >{isMaximized ? "❐" : "□"}</Button>
+          <Button size="small" danger icon={<CloseOutlined />} onClick={(e) => {
             e.stopPropagation();
             onClose();
-          }}>×</Button>
+          }} />
         </div>
       </div>
       <div className="window-content">
@@ -189,7 +198,7 @@ const DockItem = ({window, onClick, isActive}) => {
       className={`dock-item ${isActive ? "active" : ""} ${window.isMinimized ? "minimized" : ""}`}
       onClick={() => onClick(window.id)}
       style={{"--icon-gradient": window.gradient}}
-      title={i18next.t(`general:${window.title}`)}
+      title={i18next.t(`${window.appConfig?.i18nNamespace || "general"}:${window.title}`)}
     >
       <img
         src={`${StaticBaseUrl}/apps/${window.iconPath}`}