feat: 添加锤子SVG图标替换编译按钮的emoji

- 创建HammerIcon组件,使用倾斜25度的锤子SVG图标
- 更新ToolbarButton支持ReactNode类型的label(支持图标+文字)
- 工具栏按钮增加flex布局和gap间距
- 主题切换按钮文案优化
- 默认面板宽度调整为300px

🤖 Generated with Claude Code

Author: xlorne

apps/app-pc/src/pages/home.tsx

@@ -12,7 +12,7 @@ const sampleCode = `def run(request){
 `;
 
 const HomePage = () => {
-  const [theme, setTheme] = useState<'dark' | 'light'>('dark');
+  const [theme, setTheme] = useState<'dark' | 'light'>('light');
 
   return (
     <div

packages/script-engine/src/components/toolbar-button.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 export interface ToolbarButtonProps {
-  label: string;
+  label: React.ReactNode;
   title: string;
   bg: string;
   hoverBg: string;
@@ -18,6 +18,9 @@ export const ToolbarButton: React.FC<ToolbarButtonProps> = ({ label, title, bg,
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
       style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 4,
         background: hovered ? hoverBg : bg,
         border: `1px solid ${border}`,
         color,

packages/script-engine/src/components/toolbar.tsx

@@ -1,6 +1,33 @@
 import React from 'react';
 import { ToolbarButton } from './toolbar-button';
 
+// 锤子图标（编译/构建）
+const HammerIcon: React.FC<{ color: string }> = ({ color }) => (
+  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
+    {/* 锤头（倾斜） */}
+    <rect
+      x="3"
+      y="6"
+      width="12"
+      height="5"
+      rx="1"
+      fill={color}
+      transform="rotate(-25 9 8.5)"
+    />
+    {/* 锤柄 */}
+    <rect
+      x="11"
+      y="9"
+      width="2.5"
+      height="11"
+      rx="1"
+      fill={color}
+      opacity={0.8}
+      transform="rotate(-25 12.25 14.5)"
+    />
+  </svg>
+);
+
 export interface ToolbarProps {
   title?: string;
   theme: 'dark' | 'light';
@@ -57,7 +84,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
       {!title && <span style={{ marginRight: 'auto' }} />}
 
       <ToolbarButton
-        label={isDark ? '☀ 浅色' : '🌙 深色'}
+        label={isDark ? '🌞 浅色模式' : '🌙 深色模式'}
         title={isDark ? '切换到浅色主题' : '切换到深色主题'}
         bg={btnBg}
         hoverBg={btnHoverBg}
@@ -68,7 +95,12 @@ export const Toolbar: React.FC<ToolbarProps> = ({
 
       {onCompile && (
         <ToolbarButton
-          label="✔ 编译验证"
+          label={
+            <>
+              <HammerIcon color={isDark ? '#98c379' : '#389e0d'} />
+              编译验证
+            </>
+          }
           title="编译并验证脚本"
           bg={isDark ? '#2d5a27' : '#e6f4e5'}
           hoverBg={isDark ? '#3a7033' : '#d4ecd3'}

packages/script-engine/src/script-code.tsx

@@ -155,7 +155,7 @@ export const ScriptCodeEditor: React.FC<ScriptCodeEditorProps> = (props) => {
   const [sidebarOpen, setSidebarOpen] = useState(
     defaultSidebarOpen ?? (metadata != null)
   );
-  const [panelWidth, setPanelWidth] = useState(260);
+  const [panelWidth, setPanelWidth] = useState(300);
 
   // ── 创建编辑器（仅在首次挂载和布局属性变化时） ──────────
   useEffect(() => {

packages/script-engine/src/type-panel/type-panel.tsx

@@ -23,7 +23,7 @@ export interface TypePanelProps {
 
 // ── 宽度约束 ──────────────────────────────────────────────────
 
-const DEFAULT_WIDTH = 260;
+const DEFAULT_WIDTH = 300;
 const MIN_WIDTH = 180;
 const MAX_WIDTH = 600;