feat(主题): 添加自定义主题和Mica效果支持

实现自定义主题配置功能，支持设置Mica、Acrylic等窗口效果
添加多个预设主题配置文件
修改侧边栏样式以适配透明效果
扩展主题服务以处理自定义主题配置

src/renderer/src/assets/main.css

@@ -99,10 +99,10 @@ html[theme-mode='dark'] .ss-sidebar .t-menu__item.t-is-active svg:not([fill='non
 
 /* Global Sidebar Toggle Button */
 .global-sidebar-toggle {
-  width: 24px;
-  height: 60px;
-  background-color: var(--ss-card-bg);
-  border-radius: 8px 0 0 8px;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--ss-bg-color);
+  border-radius: 0px 0 0 0px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -126,7 +126,7 @@ html[theme-mode='dark'] .ss-sidebar .t-menu__item.t-is-active svg:not([fill='non
 .sidebar-content-area {
   display: flex;
   flex-direction: column;
-  backgroundColor: var(--ss-card-bg);
+  background-color: var(--ss-card-bg);
   border-radius: 12px 0 0 12px;
   box-shadow: -4px 0 16px rgba(0,0,0,0.15);
   border: 1px solid var(--ss-border-color);

src/renderer/src/components/GlobalSidebar.tsx

@@ -55,10 +55,11 @@ export const GlobalSidebar: React.FC = () => {
     // 1. 先隐藏三角
     setShowToggle(false)
 
+
     // 2. 稍后扩大窗口
     setTimeout(() => {
       if ((window as any).api) {
-        const width = Math.round(84 * zoom)
+        const width = Math.round(60 * zoom)
         const height = Math.round(300 * zoom)
         ;(window as any).api.windowResize(width, height)
       }
@@ -77,7 +78,7 @@ export const GlobalSidebar: React.FC = () => {
     setTimeout(() => {
       if ((window as any).api) {
         const width = Math.round(24 * zoom)
-        const height = Math.round(300 * zoom)
+        const height = Math.round(58 * zoom)
         ;(window as any).api.windowResize(width, height)
       }
       // 3. 最后重新显示三角（等待透明度动画完成）
@@ -99,7 +100,7 @@ export const GlobalSidebar: React.FC = () => {
         width: `84px`,
         display: 'flex',
         alignItems: 'center',
-        justifyContent: 'flex-end',
+        justifyContent: 'flex-start',
         overflow: 'hidden',
         background: 'transparent'
       }}
@@ -110,9 +111,10 @@ export const GlobalSidebar: React.FC = () => {
         className={`global-sidebar-toggle ${!showToggle ? 'hidden' : ''}`}
         style={{
           willChange: 'opacity, transform',
-          width: `24px`,
-          height: `60px`
+          width: `${!expanded ? '100vw' : '0px'}`,
+          height: `100vh`
         }}
+        hidden={!expanded}
       >
         <ChevronLeftIcon />
       </div>
@@ -121,11 +123,10 @@ export const GlobalSidebar: React.FC = () => {
       <div
         className={`sidebar-content-area ${expanded ? 'visible' : 'hidden'}`}
         style={{
-          backgroundColor: 'var(--ss-card-bg)',
+          backgroundColor: 'var(--ss-bg-color)',
           height: 'fit-content',
           willChange: 'opacity, transform',
           width: `60px`,
-          padding: `12px 8px`,
           gap: `12px`
         }}
       >