refactor: 重构 QrCode 页面为声明式响应架构并统一 shadcn 样式

pages/QrCode/components/GeneratePanel.tsx

@@ -2,26 +2,50 @@ import TextInputArea from '@/components/TextInputArea';
 import QrCodePreview from '@/components/QrCodePreview';
 import { useLazyTranslation } from '@/utils/useLazyTranslation';
 import { useQrCodeContext } from '../contexts/QrCodeContext';
+import { Label } from '@/components/ui/label';
+import { cn } from '@/lib/utils';
 
 export default function GeneratePanel() {
   const { t } = useLazyTranslation('qrCode');
   const { generatorState, setTextToEncode, downloadQrCode, copyQrCode } = useQrCodeContext();
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-      <div>
-        <TextInputArea
-          title={t('qrCode:urlInputLabel')}
-          value={generatorState.textToEncode}
-          onChange={setTextToEncode}
-          placeholder={t('qrCode:urlInputPlaceholder')}
-          showCount
-          showClear
-          allowCopy
-          externalError={generatorState.inputError}
-        />
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full items-stretch select-none p-0.5 animate-in fade-in duration-300">
+      {/* 左翼：高性能受控输入翼终端 */}
+      <div
+        className={cn(
+          'border border-border rounded-xl bg-card text-card-foreground shadow-sm flex flex-col p-4 transition-all duration-200',
+          'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
+        )}
+      >
+        {/* 💡 2. 独立外置标签架（A11y 无障碍对齐）：
+           - 彻底删掉 TextInputArea 上引发崩溃的违规属性。
+           - 改用正统的 <Label />，并注入标准的高度无障碍样式，间距比例极度平滑。
+        */}
+        <div className="flex flex-col space-y-2.5 h-full">
+          <Label className="text-[10px] font-bold text-muted-foreground/90 uppercase tracking-wider select-none pl-0.5">
+            {t('qrCode:urlInputLabel')}
+          </Label>
+
+          <div className="flex-1 min-h-0">
+            <TextInputArea
+              value={generatorState.textToEncode}
+              onChange={setTextToEncode}
+              placeholder={t('qrCode:urlInputPlaceholder')}
+              showCount={true}
+              showClear={true}
+              allowCopy={true}
+              minRows={6}
+              maxRows={12}
+              externalError={generatorState.inputError || undefined}
+              onClear={() => setTextToEncode('')}
+            />
+          </div>
+        </div>
       </div>
-      <div>
+
+      {/* 右翼：活态二维码高精生成区 */}
+      <div className="flex flex-col h-full">
         <QrCodePreview
           qrCodeDataUrl={generatorState.qrCodeDataUrl}
           onDownload={downloadQrCode}