收敛许可证信息面板样式

components/LicenseInfo.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import ActivationModal from './ui/ActivationModal';
+import { cn } from '@/lib/ui-styles';
 
 interface LicenseData {
   type: 'FREE' | 'STANDARD' | 'PRO';
@@ -22,7 +23,7 @@ interface LicenseData {
 }
 
 const LICENSE_TYPE_NAMES = {
-  FREE: '免费版',
+  FREE: '基础版',
   STANDARD: '标准版',
   PRO: '专业版',
 };
@@ -33,6 +34,18 @@ const STATUS_NAMES = {
   grace: '宽限期',
 };
 
+const LICENSE_TYPE_BADGE_CLASSES: Record<LicenseData['type'], string> = {
+  FREE: 'border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300',
+  STANDARD: 'border-slate-300 bg-white text-slate-800 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200',
+  PRO: 'border-slate-400 bg-slate-100 text-slate-900 dark:border-slate-500 dark:bg-slate-700 dark:text-slate-100',
+};
+
+const STATUS_BADGE_CLASSES: Record<LicenseData['status'], string> = {
+  active: 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-300',
+  expired: 'border-red-200 bg-red-50 text-red-700 dark:border-red-900/70 dark:bg-red-950/40 dark:text-red-300',
+  grace: 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/70 dark:bg-amber-950/40 dark:text-amber-300',
+};
+
 export default function LicenseInfo() {
   const [license, setLicense] = useState<LicenseData | null>(null);
   const [loading, setLoading] = useState(true);
@@ -100,24 +113,18 @@ export default function LicenseInfo() {
           </div>
           <div className="flex items-center gap-2">
             <span
-              className={`px-3 py-1 rounded-full text-sm font-medium ${
-                license.type === 'PRO'
-                  ? 'bg-purple-100 text-purple-700'
-                  : license.type === 'STANDARD'
-                  ? 'bg-blue-100 text-blue-700'
-                  : 'bg-gray-100 text-gray-700'
-              }`}
+              className={cn(
+                'rounded-md border px-2.5 py-1 text-sm font-medium',
+                LICENSE_TYPE_BADGE_CLASSES[license.type]
+              )}
             >
               {LICENSE_TYPE_NAMES[license.type]}
             </span>
             <span
-              className={`px-3 py-1 rounded-full text-sm font-medium ${
-                license.status === 'active'
-                  ? 'bg-green-100 text-green-700'
-                  : license.status === 'grace'
-                  ? 'bg-yellow-100 text-yellow-700'
-                  : 'bg-red-100 text-red-700'
-              }`}
+              className={cn(
+                'rounded-md border px-2.5 py-1 text-sm font-medium',
+                STATUS_BADGE_CLASSES[license.status]
+              )}
             >
               {STATUS_NAMES[license.status]}
             </span>
@@ -129,7 +136,7 @@ export default function LicenseInfo() {
       {isExpiringSoon && license.expiresAt && (
         <div className="px-6 py-3 bg-yellow-50 dark:bg-yellow-900/20 border-b border-yellow-100 dark:border-yellow-800">
           <p className="text-sm text-yellow-700 dark:text-yellow-400">
-            ⚠️ 许可证将于 {new Date(license.expiresAt).toLocaleDateString()} 到期，请及时续期
+            许可证将于 {new Date(license.expiresAt).toLocaleDateString()} 到期，请联系管理员处理续期
           </p>
         </div>
       )}
@@ -147,12 +154,12 @@ export default function LicenseInfo() {
               </span>
             </div>
             {license.usage.users.max !== -1 && (
-              <div className="h-2 bg-gray-100 dark:bg-slate-700 rounded-full overflow-hidden">
+              <div className="h-2 bg-gray-100 dark:bg-slate-700 rounded-sm overflow-hidden">
                 <div
-                  className={`h-full rounded-full ${
+                  className={`h-full ${
                     license.usage.users.current / license.usage.users.max > 0.9
                       ? 'bg-red-500'
-                      : 'bg-blue-500'
+                      : 'bg-slate-500'
                   }`}
                   style={{
                     width: `${Math.min(100, (license.usage.users.current / license.usage.users.max) * 100)}%`,
@@ -171,12 +178,12 @@ export default function LicenseInfo() {
               </span>
             </div>
             {license.usage.materials.max !== -1 && (
-              <div className="h-2 bg-gray-100 dark:bg-slate-700 rounded-full overflow-hidden">
+              <div className="h-2 bg-gray-100 dark:bg-slate-700 rounded-sm overflow-hidden">
                 <div
-                  className={`h-full rounded-full ${
+                  className={`h-full ${
                     license.usage.materials.current / license.usage.materials.max > 0.9
                       ? 'bg-red-500'
-                      : 'bg-blue-500'
+                      : 'bg-slate-500'
                   }`}
                   style={{
                     width: `${Math.min(100, (license.usage.materials.current / license.usage.materials.max) * 100)}%`,
@@ -203,16 +210,13 @@ export default function LicenseInfo() {
         <div className="px-6 pb-6 space-y-3">
           <button
             onClick={() => setShowActivationModal(true)}
-            className="w-full py-2.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors font-medium"
+            className="w-full rounded-lg bg-slate-900 py-2.5 font-medium text-white transition-colors hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white"
           >
             输入激活码
           </button>
-          <button
-            onClick={() => window.open('https://www.flnxi.com/pricing', '_blank')}
-            className="w-full py-2.5 bg-white dark:bg-slate-700 text-indigo-600 dark:text-indigo-400 border border-indigo-200 dark:border-indigo-800 rounded-lg hover:bg-indigo-50 dark:hover:bg-slate-600 transition-colors font-medium"
-          >
-            购买授权 →
-          </button>
+          <p className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400">
+            如需调整授权范围，请联系系统管理员或交付人员。
+          </p>
         </div>
       )}
 
@@ -231,9 +235,9 @@ function FeatureItem({ label, enabled }: { label: string; enabled: boolean }) {
     <div className="flex items-center justify-between py-1">
       <span className="text-sm text-gray-600 dark:text-slate-400">{label}</span>
       {enabled ? (
-        <span className="text-green-600 dark:text-green-400">✓</span>
+        <span className="rounded-md border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:border-emerald-900/70 dark:bg-emerald-950/40 dark:text-emerald-300">已启用</span>
       ) : (
-        <span className="text-gray-300 dark:text-slate-600">✗</span>
+        <span className="rounded-md border border-slate-200 bg-slate-50 px-2 py-0.5 text-xs font-medium text-slate-500 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-400">未启用</span>
       )}
     </div>
   );

docs/商业化地基排查问题清单_20260524.md

@@ -1133,6 +1133,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
 - `components/ui/RestrictedToggle.tsx`：受限开关提示已改为“当前许可证未包含此功能”。
 - `components/ui/ActivationModal.tsx`：手动激活弹窗已移除“前往购买”官网跳转，改为联系系统交付人员或管理员；弹窗和输入控件同步收为普通圆角、轻阴影和中性色按钮。
 - `components/ui/StorageEditConfirmModal.tsx`：对象存储编辑二次确认弹窗已从大圆角、重阴影和蓝紫焦点态收为普通安全确认表单。
+- `components/LicenseInfo.tsx`：许可证信息面板已去掉紫色/蓝色胶囊标签、emoji 到期提醒和“购买授权”官网外链，改为中性状态标签、矩形使用量条和“联系系统管理员或交付人员”的私有化交付口径。
 - `lib/license/check-limits.ts`：用户数和素材数超限提示已改为联系管理员处理授权。
 - `app/api/admin/upload-templates/route.ts`、`app/api/admin/upload-templates/[id]/route.ts`、`app/api/admin/upload-templates/[id]/migrate/route.ts`、`app/api/departments/route.ts`、`app/api/system-settings/route.ts`：授权不足错误已统一成私有化口径。
 - `components/ui/ProBadge.tsx`：PRO 徽章已改为中性许可证标签，不再使用胶囊圆角、阴影或渐变展示感。
@@ -1144,6 +1145,7 @@ NAS 私有化系统可能在平板或窄屏浏览器里使用。模板编辑器
 - 已完成：通用授权弹窗不再展示营销化“升级好处”。
 - 已完成：手动激活入口不再引导客户跳官网购买。
 - 已完成：PRO 徽章改为中性许可证标签，不用紫蓝渐变、胶囊圆角和阴影。
+- 已完成：许可证信息面板不再提供“购买授权”跳转，授权调整统一提示联系系统管理员或交付人员。
 
 ### P2-12 登录、激活、回调页风格和后台不统一