收敛上传和授权提示界面

components/UploadModal.tsx

@@ -1255,11 +1255,11 @@ const isVideoFile = (file: File) => {
         >
 
           <div className="flex-shrink-0 px-6 py-3 border-b border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 z-10">
-            <div className="flex items-center justify-between">
-              <div className="flex-1">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              <div className="min-w-0 flex-1">
                 <h2 className="text-lg font-bold text-slate-900 dark:text-white">上传素材</h2>
                 <div className="space-y-0 mt-1">
-                  <p className="text-[10px] text-slate-500 dark:text-slate-400">
+                  <p className="hidden text-[10px] text-slate-500 dark:text-slate-400 sm:block">
                     提示：可拖拽文件到对应区域上传
                   </p>
                   {uploading && (
@@ -1269,18 +1269,18 @@ const isVideoFile = (file: File) => {
                   )}
                 </div>
               </div>
-              <div className="flex items-center gap-3 ml-4">
+              <div className="grid grid-cols-2 gap-2 sm:flex sm:items-center sm:gap-3 sm:ml-4">
                 <button
                   type="button"
                   onClick={handleCancelUpload}
-                  className="px-4 py-2 text-base font-medium rounded-lg border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
+                  className="px-3 py-2 text-sm font-medium rounded-lg border border-slate-300 dark:border-slate-700 text-slate-700 dark:text-slate-300 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
                 >
                   {uploading ? '取消上传' : '取消'}
                 </button>
                 <button
                   type="submit"
                   form="upload-form"
-                  className="px-4 py-2 text-base font-medium rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 hover:bg-slate-800 dark:hover:bg-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="px-3 py-2 text-sm font-medium rounded-lg bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 hover:bg-slate-800 dark:hover:bg-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                   disabled={uploading}
                 >
                   {submitButtonLabel}

components/ui/Card.tsx

@@ -2,7 +2,8 @@
  * Card 组件
  * 
  * 统一的卡片容器组件，遵循三层架构设计
- * 提供多种变体样式（base、hover、large、flat、rainbow、glass、neon）
+ * 提供多种变体样式（base、hover、large、flat）
+ * rainbow / glass / neon 是历史兼容名，样式已降级，不建议新增调用
  * 支持自定义内边距和样式类名
  * 
  * @created 2025-11-22
@@ -16,6 +17,7 @@ import { useThemeStyles, cn } from '@/lib/ui-styles'
 
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode
+  /** rainbow / glass / neon 仅保留兼容旧调用，新增界面优先使用 base / flat / hover。 */
   variant?: 'base' | 'hover' | 'large' | 'flat' | 'rainbow' | 'glass' | 'neon'
   padding?: 'none' | 'sm' | 'md' | 'lg'
   className?: string

components/ui/UpgradeModal.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 /**
- * UpgradeModal 组件
+ * 授权提示弹窗
  *
  * 授权提示弹窗，当当前许可证不包含某个功能时显示
- * 基于现有 Modal 组件构建，显示功能名称和限制说明
+ * 基于现有 Modal 组件构建，显示功能名称和处理入口
  *
  * @created 2025-12-16
  * @component
@@ -38,7 +38,7 @@ export default function UpgradeModal({
   const feature = getFeatureDescription(featureKey)
 
   const displayName = featureName || feature.name
-  const displayDescription = featureDescription || feature.description
+  const displayDescription = featureDescription?.trim() || ''
 
   const handleContactAdminClick = () => {
     // 目前先关闭弹窗，后续可接入客户自己的授权处理入口。
@@ -52,7 +52,7 @@ export default function UpgradeModal({
       size="small"
       showCloseButton={true}
     >
-      <div className="p-5 space-y-5" data-testid="upgrade-modal">
+      <div className="p-5 space-y-4" data-testid="upgrade-modal">
         <div className="flex items-start gap-3">
           <div className={cn(
             'h-10 w-10 flex-shrink-0 rounded-lg flex items-center justify-center',
@@ -86,15 +86,11 @@ export default function UpgradeModal({
           </div>
         </div>
 
-        <div className={cn(
-          'p-3 rounded-lg',
-          'bg-slate-50 dark:bg-slate-800/50',
-          'border border-slate-200 dark:border-slate-700'
-        )}>
-          <p className="text-sm text-slate-600 dark:text-slate-400">
+        {displayDescription && (
+          <p className="rounded-lg border border-slate-200 bg-slate-50 p-3 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-800/50 dark:text-slate-400">
             {displayDescription}
           </p>
-        </div>
+        )}
 
         <div className="flex justify-end gap-2 pt-1">
           <button

components/ui/__tests__/UpgradeModal.test.tsx

@@ -120,7 +120,7 @@ describe('UpgradeModal 组件', () => {
       expect(screen.getByTestId('upgrade-modal-feature-name')).toHaveTextContent(customName)
     })
 
-    it('应该显示功能描述', () => {
+    it('默认不展示功能描述，避免授权弹窗变成功能介绍页', () => {
       render(
         <UpgradeModal
           isOpen={true}
@@ -129,7 +129,7 @@ describe('UpgradeModal 组件', () => {
         />
       )
       const expectedDescription = FEATURE_DESCRIPTIONS.customTemplates.description
-      expect(screen.getByText(expectedDescription)).toBeInTheDocument()
+      expect(screen.queryByText(expectedDescription)).not.toBeInTheDocument()
     })
 
     it('应该允许自定义功能描述覆盖默认值', () => {