v1.3.0: UI打磨 — 全局动画(slideIn/scaleIn/shimmer) + 面板入场动画 + 微交互 + 视觉一致性 | 10 files +112/-24 | tsc零错误 构建成功

src/components/ConnectionPanel.tsx

@@ -274,7 +274,7 @@ export default function ConnectionPanel() {
     <>
       {/* Backdrop */}
       <div
-        className="fixed inset-0 bg-black/30 z-40"
+        className="fixed inset-0 bg-black/30 z-40 animate-fade-in"
         onClick={close}
       />
 
@@ -282,7 +282,7 @@ export default function ConnectionPanel() {
       <div
         className="fixed top-0 right-0 bottom-0 w-[360px] z-50
                     bg-dark-800/95 backdrop-blur border-l border-dark-700
-                    flex flex-col shadow-xl"
+                    flex flex-col shadow-xl animate-slide-in-right"
       >
         {/* Header */}
         <div className="flex items-center justify-between px-4 h-12 border-b border-dark-700 shrink-0">

src/components/Sidebar.tsx

@@ -279,8 +279,9 @@ export default function Sidebar({ onNewSession, onQuickConnect, onEditSession }:
         className={`
           absolute top-0 right-0 bottom-0 w-1 cursor-col-resize
           hover:bg-accent-blue/50 active:bg-accent-blue/70
-          transition-colors duration-150
+          hover:w-1.5 hover:shadow-[0_0_6px_rgba(59,130,246,0.4)]
-          ${isResizing ? 'bg-accent-blue/70' : ''}
+          transition-all duration-150
+          ${isResizing ? 'bg-accent-blue/70 w-1.5 shadow-[0_0_6px_rgba(59,130,246,0.5)]' : ''}
         `}
       />
     </div>

src/components/StatusBar.tsx

@@ -169,15 +169,17 @@ export default function StatusBar() {
         type="button"
         onClick={togglePanel}
         className={`flex items-center gap-1.5 rounded px-1 py-0.5 -ml-1
-                     hover:bg-dark-700/60 transition-colors cursor-pointer
+                     hover:bg-dark-700/60 transition-colors cursor-pointer group
                      ${statusCfg.colorClass} ${statusCfg.animateClass}`}
         title="点击打开连接管理面板"
       >
-        {statusCfg.icon}
+        {statusCfg.icon && (
-        <span>{statusCfg.label}</span>
+          <span className="transition-colors duration-300">{statusCfg.icon}</span>
+        )}
+        <span className="transition-colors duration-300">{statusCfg.label}</span>
         {hostLabel && (
           <>
-            <span className="text-dark-500 mx-0.5">·</span>
+            <span className="text-gray-500 mx-0.5">·</span>
             <span className="text-gray-300">{hostLabel}</span>
           </>
         )}
@@ -186,7 +188,7 @@ export default function StatusBar() {
             {totalConnections}
           </span>
         )}
-        <ChevronUp className="w-3 h-3 text-gray-500" />
+        <ChevronUp className="w-3 h-3 text-gray-500 transition-transform duration-200 group-hover:rotate-180" />
       </button>
 
       {/* Center: Transfer stats */}
@@ -202,11 +204,11 @@ export default function StatusBar() {
 
       {/* Right: Clock + version */}
       <div className="flex items-center gap-4">
-        <div className="flex items-center gap-1 text-gray-400">
+        <div className="flex items-center gap-1 text-gray-400 tabular-nums">
           <Clock className="w-3 h-3" />
           <span>{formatTime(currentTime)}</span>
         </div>
-        <span className="text-dark-500">OpsXShell v{version}</span>
+        <span className="text-gray-500">OpsXShell v{version}</span>
       </div>
     </div>
   )

src/components/common/CommandPalette.tsx

@@ -305,11 +305,11 @@ export function CommandPalette({
       onKeyDown={handleKeyDown}
     >
       {/* Backdrop */}
-      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm animate-fade-in" />
 
       {/* Palette container */}
       <div
-        className="relative w-[600px] max-h-[460px] bg-dark-800 border border-dark-700 rounded-lg shadow-2xl overflow-hidden flex flex-col animate-in fade-in slide-in-from-top-4 duration-150"
+        className="relative w-[600px] max-h-[460px] bg-dark-800 border border-dark-700 rounded-lg shadow-2xl overflow-hidden flex flex-col animate-scale-in"
         role="dialog"
         aria-modal="true"
         aria-label="命令面板"

src/components/common/EmptyState.tsx

@@ -38,10 +38,10 @@ export default function EmptyState({
       </div>
 
       {/* 标题 */}
-      <h3 className="text-dark-300 font-medium mb-1">{title}</h3>
+      <h3 className="text-gray-300 font-medium mb-1">{title}</h3>
 
       {/* 描述 */}
-      <p className="text-dark-500 text-sm mb-4 text-center max-w-xs">{description}</p>
+      <p className="text-gray-500 text-sm mb-4 text-center max-w-xs">{description}</p>
 
       {/* 操作按钮 */}
       {action && (

src/components/sidebar/SearchBox.tsx

@@ -19,7 +19,7 @@ export function SearchBox({ value, onChange, placeholder = '搜索...' }: Search
         placeholder={placeholder}
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="w-full pl-9 pr-3 py-2 bg-dark-900 border border-dark-700 rounded text-sm focus:outline-none focus:border-accent-blue"
+        className="w-full pl-9 pr-3 py-2 bg-dark-900 border border-dark-700 rounded text-sm focus:outline-none focus:border-accent-blue transition-colors duration-150"
       />
     </div>
   )

src/components/sidebar/SessionTree.tsx

@@ -91,7 +91,7 @@ export function SessionTree({
                       onContextMenu={(e) => onContextMenu(e, session)}
                       className={`
                         group flex items-center gap-2 px-4 py-2 text-sm cursor-pointer
-                        transition-colors pl-10
+                        transition-colors duration-150 pl-10
                         ${selectedSessionId === session.id 
                           ? 'bg-dark-700 border-l-2 border-accent-blue' 
                           : 'hover:bg-dark-700'

src/components/snippets/SnippetPanel.tsx

@@ -304,13 +304,13 @@ function SnippetItem({ snippet, copied, canInsert, onInsert, onCopy, onEdit, onD
   const preview = snippet.content.split('\n')[0].slice(0, 60) + (snippet.content.length > 60 ? '…' : '')
 
   return (
-    <div className="group rounded-lg border border-dark-700 hover:border-dark-600 bg-dark-850 p-2.5 transition-colors">
+    <div className="group rounded-lg border border-dark-700 hover:border-dark-600 bg-dark-800 p-2.5 transition-colors duration-150">
       {/* 名称行 */}
       <div className="flex items-start justify-between gap-2 mb-1">
         <span className="text-sm font-medium text-gray-200 truncate flex-1" title={snippet.name}>
           {snippet.name}
         </span>
-        <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
+        <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity duration-150 flex-shrink-0">
           {/* 插入 */}
           <button
             onClick={() => onInsert(snippet.content)}
@@ -327,7 +327,7 @@ function SnippetItem({ snippet, copied, canInsert, onInsert, onCopy, onEdit, onD
             className="p-1 rounded hover:bg-dark-600 text-gray-400 transition-colors"
           >
             {copied ? (
-              <span className="text-xs text-green-400 px-1">✓</span>
+              <span className="text-xs text-green-400 px-1 animate-scale-in">✓</span>
             ) : (
               <Copy className="w-3.5 h-3.5" />
             )}

src/components/tabbar/TabItem.tsx

@@ -107,10 +107,14 @@ export function TabItem({
         <X className="w-3.5 h-3.5" />
       </button>
 
-      {/* Active tab bottom indicator */}
+      {/* Active tab bottom indicator — always rendered for width transition */}
-      {isActive && (
+      <div
-        <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent-blue" />
+        className={`
-      )}
+          absolute bottom-0 left-0 right-0 h-0.5 bg-accent-blue
+          transition-[opacity,transform] duration-150 origin-left
+          ${isActive ? 'opacity-100 scale-x-100' : 'opacity-0 scale-x-0'}
+        `}
+      />
     </div>
   )
 }

src/index.css

@@ -136,3 +136,84 @@ body {
 .animate-fade-in {
   animation: fadeIn 0.2s ease-in-out;
 }
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.6);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.15s ease-out;
+}
+
+/* Slide animations */
+@keyframes slideInRight {
+  from { transform: translateX(100%); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slideOutRight {
+  from { transform: translateX(0); opacity: 1; }
+  to { transform: translateX(100%); opacity: 0; }
+}
+
+@keyframes slideInUp {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes scaleIn {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+
+@keyframes pulse-subtle {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+.animate-slide-in-right { animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
+.animate-slide-out-right { animation: slideOutRight 0.2s ease-in forwards; }
+.animate-slide-in-up { animation: slideInUp 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
+.animate-scale-in { animation: scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
+.animate-pulse-subtle { animation: pulse-subtle 2s ease-in-out infinite; }
+
+/* Focus ring */
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+  outline: 2px solid var(--color-accent-blue);
+  outline-offset: 2px;
+}
+
+button:focus:not(:focus-visible),
+a:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* Button press feedback */
+button:active:not(:disabled) {
+  transform: scale(0.97);
+}
+button {
+  transition: all 0.15s ease;
+}
+
+/* Skeleton shimmer */
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+.animate-shimmer {
+  background: linear-gradient(90deg, var(--color-dark-800) 25%, var(--color-dark-700) 50%, var(--color-dark-800) 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+}