feat: release OpsXShell 2.1.0 native Tauri edition

2026-07-30 23:32:51 +08:00
1 parent e9a0d21758
commit a3dba0c6ed
@@ -0,0 +1,133 @@
+import { Terminal, Plus, Zap, Clock, Server, ChevronRight } from 'lucide-react'
+import { useSessionStore } from '../../stores'
+import { useTabStore } from '../../stores/tabStore'
+import EmptyState from '../common/EmptyState'
+import LocalShellMenu from '../layout/sidebar/LocalShellMenu'
+
+interface WelcomeViewProps {
+  onNewSession?: () => void
+  onQuickConnect?: () => void
+}
+
+export default function WelcomeView({ onNewSession, onQuickConnect }: WelcomeViewProps) {
+  const { addTab } = useTabStore()
+  const sessions = useSessionStore((s) => s.sessions)
+  const recentSessions = sessions.slice(-6).reverse()
+
+  const handleSessionClick = (session: (typeof sessions)[number]) => {
+    addTab({
+      title: session.name || session.host,
+      type: 'terminal',
+      sessionId: session.id,
+    })
+  }
+
+  return (
+    <div className="h-full flex flex-col items-center bg-dark-900 overflow-y-auto">
+      <div className="w-full max-w-3xl px-6 py-10 sm:py-12">
+        {/* Hero — 短文案 */}
+        <div className="flex items-center gap-4 mb-8">
+          <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-accent-blue/30 to-accent-purple/20 border border-dark-600/60 flex items-center justify-center shadow-lg shadow-black/20 flex-shrink-0">
+            <Terminal className="w-7 h-7 text-content-primary" />
+          </div>
+          <div className="min-w-0">
+            <h1 className="text-2xl font-semibold text-content-primary tracking-tight">OpsXShell</h1>
+            <p className="text-sm text-txt-muted mt-0.5">SSH / SFTP 跨平台运维工作台</p>
+          </div>
+        </div>
+
+        {/* 主路径：快速连接 */}
+        <button
+          type="button"
+          onClick={() => onQuickConnect?.()}
+          className="
+            group w-full flex items-center gap-4 p-5 mb-3 rounded-2xl text-left
+            bg-accent-blue hover:bg-blue-500 border border-blue-400/30
+            shadow-lg shadow-accent-blue/10 transition-all duration-150
+          "
+        >
+          <div className="w-12 h-12 rounded-xl bg-white/15 flex items-center justify-center flex-shrink-0">
+            <Zap className="w-6 h-6 text-white" />
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="font-semibold text-white text-base">快速连接</div>
+            <div className="text-sm text-blue-100/80 mt-0.5">粘贴 user@host:port，一步连上</div>
+          </div>
+          <ChevronRight className="w-5 h-5 text-white/70 group-hover:text-white group-hover:translate-x-0.5 transition-all flex-shrink-0" />
+        </button>
+
+        {/* 次路径：保存常用会话 */}
+        <div className="mb-3">
+          <button
+            type="button"
+            onClick={() => onNewSession?.()}
+            className="
+              group flex items-center gap-3 p-4 rounded-2xl text-left
+              bg-dark-800/70 border border-dark-700/50 hover:border-accent-green/40
+              hover:bg-dark-800 transition-all duration-150
+            "
+          >
+            <div className="w-10 h-10 rounded-xl bg-accent-green/15 border border-accent-green/20 flex items-center justify-center flex-shrink-0 group-hover:bg-accent-green/25">
+              <Plus className="w-5 h-5 text-accent-green" />
+            </div>
+            <div className="min-w-0">
+              <div className="font-medium text-content-primary text-sm">新建会话</div>
+              <div className="text-xs text-txt-muted mt-0.5">保存后侧栏双击即开终端</div>
+            </div>
+          </button>
+
+        </div>
+
+        {/* 本地 Shell — 降级为次要入口 */}
+        <div className="mb-10 opacity-90">
+          <LocalShellMenu />
+        </div>
+
+        {/* 最近会话 */}
+        <div>
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-2">
+              <Clock className="w-3.5 h-3.5 text-txt-faint" />
+              <h3 className="text-xs font-semibold uppercase tracking-wider text-txt-faint">最近会话</h3>
+            </div>
+            {recentSessions.length > 0 && (
+              <span className="text-[11px] text-txt-faint">{recentSessions.length} 个</span>
+            )}
+          </div>
+          {recentSessions.length === 0 ? (
+            <div className="rounded-2xl border border-dashed border-dark-600/60 bg-dark-800/30 p-6">
+              <EmptyState icon={Server} title="暂无会话" description="创建会话或快速连接开始运维" />
+            </div>
+          ) : (
+            <div className="rounded-2xl border border-dark-700/50 bg-dark-800/40 overflow-hidden divide-y divide-dark-700/40">
+              {recentSessions.map((session) => (
+                <button
+                  key={session.id}
+                  type="button"
+                  onClick={() => handleSessionClick(session)}
+                  className="w-full flex items-center gap-3 px-4 py-3 hover:bg-dark-700/40 transition-colors text-left group"
+                >
+                  <div className="w-8 h-8 rounded-lg bg-dark-700 flex items-center justify-center flex-shrink-0 group-hover:bg-accent-blue/20">
+                    <Server className="w-4 h-4 text-accent-blue" />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="text-sm font-medium text-content-primary truncate">
+                      {session.name}
+                    </div>
+                    <div className="text-xs text-txt-faint font-mono truncate">
+                      {session.username}@{session.host}:{session.port || 22}
+                    </div>
+                  </div>
+                  {session.group && (
+                    <span className="ui-chip flex-shrink-0">{session.group}</span>
+                  )}
+                  <ChevronRight className="w-4 h-4 text-txt-faint opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" />
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}