优化功能体验

frontend/src/components/ContainerCard.tsx

@@ -56,7 +56,7 @@ export default function ContainerCard({ container, onRefresh }: ContainerCardPro
       {/* Header */}
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
+          <div className="w-10 h-10 flex items-center justify-center">
             <Server className="w-5 h-5 text-gray-700" />
           </div>
           <div>

frontend/src/components/Sidebar.tsx

@@ -83,14 +83,14 @@ export default function Sidebar({ collapsed, onToggle }: SidebarProps) {
       <div className="flex items-center justify-between h-14 px-4 border-b border-gray-200 dark:border-gray-700">
         {!collapsed && (
           <div className="flex items-center gap-2">
-            <div className="w-7 h-7 bg-gray-100 rounded flex items-center justify-center dark:bg-gray-800">
+            <div className="w-7 h-7 flex items-center justify-center">
               <AppIcon className="w-5 h-5" />
             </div>
             <span className="font-bold text-black text-sm dark:text-white">CLICD</span>
           </div>
         )}
         {collapsed && (
-          <div className="w-7 h-7 bg-gray-100 rounded flex items-center justify-center mx-auto dark:bg-gray-800">
+          <div className="w-7 h-7 flex items-center justify-center mx-auto">
             <AppIcon className="w-5 h-5" />
           </div>
         )}

frontend/src/pages/ContainerDetail.tsx

@@ -144,6 +144,10 @@ export default function ContainerDetail() {
   const [resourceEdit, setResourceEdit] = useState({ vcpu: 1, ramMb: 512, ioMbps: 500, bwMbps: 100 })
   const [savingResource, setSavingResource] = useState(false)
   const [showPassword, setShowPassword] = useState(false)
+  const [showResetPassword, setShowResetPassword] = useState(false)
+  const [resetPasswordDraft, setResetPasswordDraft] = useState('')
+  const [resetPasswordResult, setResetPasswordResult] = useState('')
+  const [resetPasswordSaving, setResetPasswordSaving] = useState(false)
   const [showSnapshots, setShowSnapshots] = useState(false)
   const [snapshots, setSnapshots] = useState<Snapshot[]>([])
   const [snapshotQuota, setSnapshotQuota] = useState(3)
@@ -443,20 +447,58 @@ export default function ContainerDetail() {
     }
   }
 
+  const generateResetPassword = () => {
+    const letters = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz'
+    const digits = '23456789'
+    const symbols = '!@#$%*-_+='
+    const all = letters + digits + symbols
+    const pick = (chars: string) => chars[Math.floor(Math.random() * chars.length)]
+    let password = pick(letters) + pick(digits)
+    while (password.length < 16) password += pick(all)
+    setResetPasswordDraft(password.split('').sort(() => Math.random() - 0.5).join(''))
+    setResetPasswordResult('')
+  }
+
+  const resetPasswordError = (password: string) => {
+    if (password.length < 8 || password.length > 64) return '密码长度必须为 8-64 位'
+    if (/\s/.test(password)) return '密码不能包含空白字符'
+    if (!/[A-Za-z]/.test(password)) return '密码至少需要包含字母'
+    if (!/\d/.test(password)) return '密码至少需要包含数字'
+    return ''
+  }
+
   const handleResetPassword = async () => {
-    if (!containerIdentifier || !(await dialog.confirm('重置密码', `确定要重置容器 ${container?.name} 的 SSH 密码吗？`))) return
+    if (!containerIdentifier) return
+    const password = resetPasswordDraft.trim()
+    const validationError = resetPasswordError(password)
+    if (validationError) {
+      await dialog.alert('密码格式不正确', validationError)
+      return
+    }
+    setResetPasswordSaving(true)
     try {
-      const res = await resetSSHPassword(containerIdentifier)
+      const res = await resetSSHPassword(containerIdentifier, password)
       if (res.data.success) {
-        await dialog.alert('密码已重置', `新密码: ${(res.data.data as { password: string })?.password}`)
+        const nextPassword = (res.data.data as { password: string })?.password || password
+        setResetPasswordResult(nextPassword)
+        setResetPasswordDraft(nextPassword)
         await fetchContainer()
       }
-    } catch (err) {
+    } catch (err: unknown) {
       console.error(err)
-      dialog.alert('密码重置失败', '请稍后重试')
+      const error = err as { response?: { data?: { message?: string } } }
+      dialog.alert('密码重置失败', error.response?.data?.message || '请稍后重试')
+    } finally {
+      setResetPasswordSaving(false)
     }
   }
 
+  const openResetPassword = () => {
+    setResetPasswordDraft('')
+    setResetPasswordResult('')
+    setShowResetPassword(true)
+  }
+
   const handleAssignIPv6 = async () => {
     if (!containerIdentifier) return
     setActionLoading('ipv6')
@@ -782,7 +824,7 @@ export default function ContainerDetail() {
       <div className="bg-white border border-gray-200 rounded-lg p-5">
         <div className="flex items-start justify-between gap-4">
           <div className="flex items-start gap-4">
-            <div className="w-14 h-14 bg-slate-100 rounded-lg flex items-center justify-center">
+            <div className="w-14 h-14 flex items-center justify-center">
               {getTemplateIcon(container.template || '') || <Cpu className="w-7 h-7 text-slate-700" />}
             </div>
             <div>
@@ -874,7 +916,18 @@ export default function ContainerDetail() {
       )}
 
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
-        <Panel title="连接信息">
+        <Panel
+          title="连接信息"
+          extra={!isSubUser && !isWindows && !isSubUserPolicyBlocked ? (
+            <button
+              onClick={openResetPassword}
+              className="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs text-gray-600 hover:bg-gray-100 hover:text-black"
+            >
+              <Key className="w-3.5 h-3.5" />
+              重置 SSH 密码
+            </button>
+          ) : undefined}
+        >
           {isSubUserPolicyBlocked ? (
             <div className="rounded-md border border-red-100 bg-red-50 px-3 py-2 text-sm text-red-700">
               虚拟机被策略临时封禁，连接信息暂不可用。
@@ -925,12 +978,6 @@ export default function ContainerDetail() {
                   )}
                 </div>
               </div>
-              {!isSubUser && (
-                <button onClick={handleResetPassword} className="inline-flex items-center gap-1.5 text-xs text-gray-600 hover:text-black">
-                  <Key className="w-3 h-3" />
-                  重置 SSH 密码
-                </button>
-              )}
             </>
           )}
         </Panel>
@@ -1083,6 +1130,60 @@ export default function ContainerDetail() {
 
       <ResourceStatsPanel range={range} onRangeChange={setRange} onRefresh={() => { fetchContainer(); fetchUsage() }} charts={charts} />
 
+      {showResetPassword && (
+        <Modal title="重置 SSH 密码" onClose={() => setShowResetPassword(false)}>
+          <div className="space-y-4">
+            <div>
+              <label className="block text-xs text-gray-500 mb-1">新 SSH 密码</label>
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={resetPasswordDraft}
+                  onChange={(e) => { setResetPasswordDraft(e.target.value); setResetPasswordResult('') }}
+                  placeholder="请输入 8-64 位，至少包含字母和数字"
+                  className={inputClass}
+                />
+                <button
+                  type="button"
+                  onClick={generateResetPassword}
+                  className="px-3 py-2 border border-gray-300 rounded-md text-gray-600 hover:bg-gray-50 hover:text-black"
+                  title="生成随机密码"
+                >
+                  <RefreshCw className="w-4 h-4" />
+                </button>
+              </div>
+              {resetPasswordDraft && resetPasswordError(resetPasswordDraft) && (
+                <p className="mt-1 text-xs text-red-600">{resetPasswordError(resetPasswordDraft)}</p>
+              )}
+            </div>
+            {resetPasswordResult && (
+              <div className="p-3 bg-green-50 border border-green-200 rounded-md">
+                <div className="text-xs text-green-700 mb-1">密码已修改成功</div>
+                <div className="flex items-center justify-between gap-2">
+                  <span className="font-mono text-sm text-green-900 break-all">{resetPasswordResult}</span>
+                  <button onClick={() => copyText(resetPasswordResult)} className="p-1 text-green-700 hover:text-green-900 rounded" title="复制">
+                    <Copy className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            )}
+            <p className="text-xs text-gray-500 leading-relaxed">
+              Linux LXC/KVM 修改 root SSH 密码通常无需重启；KVM 需要虚拟机运行且 guest agent 或 SSH 可用。
+            </p>
+            <div className="flex justify-end gap-2 pt-2">
+              <button onClick={() => setShowResetPassword(false)} className="px-4 py-2 text-sm text-gray-600 border border-gray-200 rounded-md hover:bg-gray-50">取消</button>
+              <button
+                onClick={handleResetPassword}
+                disabled={resetPasswordSaving || !resetPasswordDraft || !!resetPasswordError(resetPasswordDraft)}
+                className="px-4 py-2 text-sm bg-black text-white rounded-md hover:bg-gray-800 disabled:opacity-50"
+              >
+                {resetPasswordSaving ? '修改中...' : '确认修改'}
+              </button>
+            </div>
+          </div>
+        </Modal>
+      )}
+
       {showSSH && (
         <Modal title={`WebSSH - ${container.name}`} onClose={() => setShowSSH(false)} wide>
           <div className="h-[70vh] min-h-[520px]">

frontend/src/pages/ImageManagement.tsx

@@ -9,8 +9,9 @@ import {
   ToggleRight,
   Loader2,
   AlertCircle,
+  X,
 } from 'lucide-react'
-import { getImages, downloadImage, deleteImage, toggleImage, ImageInfo } from '../services/api'
+import { getImages, downloadImage, cancelImageDownload, deleteImage, toggleImage, ImageInfo } from '../services/api'
 import { useDialog } from '../components/Dialog'
 
 export default function ImageManagement() {
@@ -34,10 +35,14 @@ export default function ImageManagement() {
 
   useEffect(() => {
     fetchImages()
-    const interval = setInterval(fetchImages, 5000)
-    return () => clearInterval(interval)
   }, [fetchImages])
 
+  useEffect(() => {
+    const hasDownloads = images.some((img) => img.downloading)
+    const interval = setInterval(fetchImages, hasDownloads ? 1500 : 5000)
+    return () => clearInterval(interval)
+  }, [fetchImages, images])
+
   const handleDownload = async (templateId: string) => {
     setActionLoading(templateId)
     setError('')
@@ -51,6 +56,19 @@ export default function ImageManagement() {
     }
   }
 
+  const handleCancelDownload = async (templateId: string) => {
+    setActionLoading(templateId)
+    setError('')
+    try {
+      await cancelImageDownload(templateId)
+      await fetchImages()
+    } catch (err: unknown) {
+      setError(apiErrorMessage(err, '取消失败'))
+    } finally {
+      setActionLoading(null)
+    }
+  }
+
   const handleDelete = async (templateId: string) => {
     if (!(await dialog.confirm('删除镜像', '确定要删除该镜像缓存吗？删除后需要重新下载才能使用。'))) return
     setActionLoading(templateId)
@@ -125,6 +143,7 @@ export default function ImageManagement() {
         downloadedCount={lxcImages.filter((img) => img.downloaded).length}
         totalCount={lxcImages.length}
         onDownload={handleDownload}
+        onCancelDownload={handleCancelDownload}
         onDelete={handleDelete}
         onToggle={handleToggle}
       />
@@ -136,6 +155,7 @@ export default function ImageManagement() {
         downloadedCount={kvmImages.filter((img) => img.downloaded).length}
         totalCount={kvmImages.length}
         onDownload={handleDownload}
+        onCancelDownload={handleCancelDownload}
         onDelete={handleDelete}
         onToggle={handleToggle}
       />
@@ -150,6 +170,7 @@ function ImageTable({
   downloadedCount,
   totalCount,
   onDownload,
+  onCancelDownload,
   onDelete,
   onToggle,
 }: {
@@ -159,6 +180,7 @@ function ImageTable({
   downloadedCount: number
   totalCount: number
   onDownload: (id: string) => void
+  onCancelDownload: (id: string) => void
   onDelete: (id: string) => void
   onToggle: (id: string, enabled: boolean) => void
 }) {
@@ -202,7 +224,7 @@ function ImageTable({
                   <tr key={img.id} className="hover:bg-gray-50 transition-colors">
                     <td className="px-4 py-3">
                       <div className="flex items-center gap-3">
-                        <span className="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
+                        <span className="w-8 h-8 flex items-center justify-center flex-shrink-0">
                           {getTemplateIcon(img.id)}
                         </span>
                         <div>
@@ -242,13 +264,18 @@ function ImageTable({
                         )}
 
                         {img.downloading && (
-                          <span className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-amber-50 border border-amber-200 rounded-md text-amber-700 text-xs font-medium">
-                            <Loader2 className="w-3.5 h-3.5 animate-spin" />
-                            下载中...
-                          </span>
+                          <button
+                            onClick={() => onCancelDownload(img.id)}
+                            disabled={isBusy}
+                            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md border border-red-200 text-red-600 hover:bg-red-50 transition-colors text-xs font-medium disabled:opacity-50"
+                            title="取消下载并清理临时文件"
+                          >
+                            {isBusy ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <X className="w-3.5 h-3.5" />}
+                            {isBusy ? '取消中...' : '取消'}
+                          </button>
                         )}
 
-                        {img.downloaded && (
+                        {img.downloaded && !img.downloading && (
                           <>
                             <button
                               onClick={() => onToggle(img.id, img.enabled)}
@@ -287,10 +314,33 @@ function ImageTable({
 
 function StatusBadge({ img }: { img: ImageInfo }) {
   if (img.downloading) {
+    const progress = Math.max(0, Math.min(100, img.progress || 0))
+    const showProgress = img.stage === 'downloading' && progress > 0
     return (
-      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium bg-amber-50 text-amber-700">
-        <span className="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse" />
-        下载中
+      <div className="inline-flex flex-col gap-1">
+        <span
+          className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium bg-amber-50 text-amber-700"
+          title={downloadStatusTitle(img)}
+        >
+          <span className="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse" />
+          {downloadStatusLabel(img)}
+        </span>
+        {showProgress && (
+          <span className="block h-1 w-24 overflow-hidden rounded-full bg-amber-100">
+            <span className="block h-full rounded-full bg-amber-500 transition-all" style={{ width: `${progress}%` }} />
+          </span>
+        )}
+      </div>
+    )
+  }
+  if (img.error) {
+    return (
+      <span
+        className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium bg-red-50 text-red-600"
+        title={img.error}
+      >
+        <AlertCircle className="w-3 h-3" />
+        下载失败
       </span>
     )
   }
@@ -318,6 +368,23 @@ function StatusBadge({ img }: { img: ImageInfo }) {
   )
 }
 
+function downloadStatusLabel(img: ImageInfo) {
+  if (img.stage === 'canceling') return '取消中'
+  if (img.stage === 'converting') return '转换中'
+  if (img.stage === 'lxc-create') return '下载中'
+  if (img.progress > 0) return `下载中 ${Math.min(100, img.progress)}%`
+  return '下载中'
+}
+
+function downloadStatusTitle(img: ImageInfo) {
+  const parts = [downloadStatusLabel(img)]
+  if (img.stage) parts.push(`阶段：${img.stage}`)
+  if (img.downloaded_bytes > 0 || img.total_bytes > 0) {
+    parts.push(`${formatSize(img.downloaded_bytes)} / ${formatSize(img.total_bytes)}`)
+  }
+  return parts.join('，')
+}
+
 function isWindowsImage(img: ImageInfo) {
   return img.distro === 'windows' || img.id.toLowerCase().includes('windows')
 }

frontend/src/pages/Login.tsx

@@ -40,7 +40,7 @@ export default function Login() {
       <div className="w-full max-w-md">
         <div className="bg-white rounded-lg border border-gray-200 shadow-sm p-8">
             <div className="flex flex-col items-center mb-8">
-              <div className="w-16 h-16 rounded-lg border border-gray-200 bg-gray-50 flex items-center justify-center mb-4">
+              <div className="w-16 h-16 flex items-center justify-center mb-4">
                 <AppIcon className="w-10 h-10" />
               </div>
               <h1 className="text-2xl font-bold text-gray-950">CLICD</h1>

frontend/src/services/api.ts

@@ -245,8 +245,8 @@ export const restartContainer = (id: ContainerIdentifier) =>
 export const reinstallContainer = (id: ContainerIdentifier, templateId: string) =>
   api.post<APIResponse>(`/containers/${id}/reinstall`, { template_id: templateId })
 
-export const resetSSHPassword = (id: ContainerIdentifier) =>
-  api.post<APIResponse<{ password: string }>>(`/containers/${id}/reset-password`)
+export const resetSSHPassword = (id: ContainerIdentifier, password?: string) =>
+  api.post<APIResponse<{ password: string }>>(`/containers/${id}/reset-password`, password ? { password } : {})
 
 export const getContainerUsage = (id: ContainerIdentifier) =>
   api.get<APIResponse<ContainerUsage>>(`/containers/${id}/usage`)
@@ -358,6 +358,11 @@ export interface ImageInfo {
   downloaded: boolean
   enabled: boolean
   downloading: boolean
+  progress: number
+  downloaded_bytes: number
+  total_bytes: number
+  stage?: string
+  error?: string
   size_bytes: number
   manual_path?: string
   desktop?: string
@@ -367,7 +372,10 @@ export const getImages = () =>
   api.get<APIResponse<ImageInfo[]>>('/images')
 
 export const downloadImage = (templateId: string) =>
-  api.post<APIResponse>('/images/download', { template_id: templateId }, { timeout: 1800000 }) // 30min timeout
+  api.post<APIResponse>('/images/download', { template_id: templateId })
+
+export const cancelImageDownload = (templateId: string) =>
+  api.post<APIResponse>('/images/cancel', { template_id: templateId })
 
 export const deleteImage = (templateId: string) =>
   api.delete<APIResponse>('/images/delete', { data: { template_id: templateId } })