feat(ui-tars): widget window displays a border on Windows systems (#594)

Author: skychx

apps/ui-tars/src/main/window/ScreenMarker.ts

@@ -158,7 +158,6 @@ class ScreenMarker {
       resizable: false,
       type: 'toolbar',
       visualEffectState: 'active', // macOS only
-      backgroundColor: '#00000000', // 透明背景
       webPreferences: {
         preload: path.join(__dirname, '../preload/index.js'),
         sandbox: false,

apps/ui-tars/src/renderer/src/pages/widget/index.tsx

@@ -23,6 +23,11 @@ import { api } from '@renderer/api';
 import './widget.css';
 import { StatusEnum } from '@ui-tars/sdk';
 
+// https://developer.mozilla.org/en-US/docs/Web/API/Navigator/platform
+// chrome 93 support
+// @ts-ignore
+const isWin = navigator.userAgentData.platform === 'Windows';
+
 interface Action {
   action: string;
   type: string;
@@ -139,7 +144,10 @@ const Widget = () => {
   }, []);
 
   return (
-    <div className="w-100 h-100 overflow-hidden p-4 bg-white/90 dark:bg-gray-800/90">
+    <div
+      className="w-100 h-100 overflow-hidden p-4 bg-white/90 dark:bg-gray-800/90 rounded-[10px] border-gray-300"
+      style={{ borderWidth: isWin ? '1px' : '0' }}
+    >
       <div className="flex draggable-area">
         {/* Logo */}
         <img src={logo} alt="logo" className="-ml-2 h-6 mr-auto" />