将错误报告组件样式迁移至 Tailwind

错误提示改用内联 Tailwind 类

错误报告对话框改用内联 Tailwind 类

移除对应全局 CSS 规则

apps/ai-game-creator-shell/src/components/error-report/ErrorReportDialog.tsx

@@ -95,25 +95,34 @@ export function ErrorReportDialog({
       open={open}
       ariaLabel="报告问题"
       onClose={onClose}
-      panelClassName="error-report-dialog"
+      panelClassName="w-[min(560px,calc(100vw-2rem))] max-h-[min(760px,calc(100vh-2rem))] overflow-auto rounded-[18px] p-5 shadow-[0_24px_80px_rgb(36_20_12_/_22%)]"
     >
-      <header className="error-report-dialog__header">
+      <header className="flex items-center justify-between gap-3">
         <div>
-          <h2>报告问题</h2>
+          <h2 className="m-0">报告问题</h2>
         </div>
-        <button type="button" onClick={onClose} aria-label="关闭">
+        <button
+          className="min-h-10 w-10 cursor-pointer rounded-[10px] border-0 bg-transparent text-2xl"
+          type="button"
+          onClick={onClose}
+          aria-label="关闭"
+        >
           ×
         </button>
       </header>
-      <div className="error-report-dialog__body">
+      <div className="my-5 grid gap-4">
         <section>
           <strong>错误事件（{events.length}）</strong>
           {events.length ? (
-            <ul className="error-report-dialog__events">
+            <ul className="m-0 mt-2 grid list-none gap-2 p-0">
               {events.map((event) => (
-                <li key={event.fingerprint}>
-                  <label className="error-report-dialog__event-select">
+                <li
+                  className="grid gap-[3px] rounded-[10px] border border-[var(--platform-border-subtle)] p-2.5"
+                  key={event.fingerprint}
+                >
+                  <label className="flex items-start gap-2 text-[13px] font-semibold">
                     <input
+                      className="mt-[3px]"
                       type="checkbox"
                       checked={selectedFingerprints.has(event.fingerprint)}
                       onChange={() =>
@@ -128,7 +137,7 @@ export function ErrorReportDialog({
                     />
                     <span>{event.message}</span>
                   </label>
-                  <small>
+                  <small className="text-[var(--platform-text-soft)]">
                     {event.source} · {event.count} 次
                   </small>
                 </li>
@@ -138,16 +147,17 @@ export function ErrorReportDialog({
             <p>当前没有待报告的错误。</p>
           )}
         </section>
-        <label>
+        <label className="grid gap-1.5 text-[13px] font-semibold">
           补充说明（可选）
           <textarea
+            className="min-h-[100px] resize-y rounded-[10px] border border-[var(--platform-border-subtle)] p-2.5 font-[inherit]"
             maxLength={2000}
             value={description}
             onChange={(event) => setDescription(event.target.value)}
             placeholder="刚刚做了什么？"
           />
         </label>
-        <label className="error-report-dialog__logs">
+        <label className="flex items-center gap-1.5 text-[13px] font-semibold">
           <input
             type="checkbox"
             checked={includeLogs}
@@ -161,16 +171,22 @@ export function ErrorReportDialog({
               : '正在读取应用诊断日志…'}
           </span>
         </label>
-        <p className="error-report-dialog__consent">
+        <p className="m-0 mt-1 text-[13px] text-[var(--platform-text-soft)]">
           将上传选中的脱敏错误信息、可选的应用诊断日志和你填写的说明；不包含截图或项目文件。
         </p>
         {status ? <p role="status">{status}</p> : null}
       </div>
-      <footer className="error-report-dialog__actions">
-        <button type="button" onClick={onClose} disabled={busy}>
+      <footer className="flex items-center justify-end gap-3">
+        <button
+          className="cursor-pointer rounded-[9px] border-0 px-3.5 py-[9px]"
+          type="button"
+          onClick={onClose}
+          disabled={busy}
+        >
           取消
         </button>
         <button
+          className="cursor-pointer rounded-[9px] border-0 bg-[var(--platform-button-primary-fill)] px-3.5 py-[9px] text-[var(--platform-button-primary-text)]"
           type="button"
           onClick={() => void submit()}
           disabled={

apps/ai-game-creator-shell/src/components/error-report/ErrorReportNotice.tsx

@@ -71,12 +71,23 @@ export function ErrorReportNotice() {
   return (
     <>
       {notificationEvents.length ? (
-        <aside className="error-report-notice" role="status" aria-live="polite">
-          <span>发现 {notificationEvents.length} 个问题</span>
-          <button type="button" onClick={openReport}>
+        <aside
+          className="fixed top-[calc(var(--window-chrome-height)+14px)] right-4 z-40 flex max-w-[min(420px,calc(100vw-2rem))] items-center gap-2.5 rounded-xl border border-[var(--platform-surface-border)] bg-[var(--platform-subpanel-fill)] px-3.5 py-3 text-[var(--platform-text-strong)] shadow-[0_12px_30px_rgb(36_20_12_/_18%)] max-[560px]:top-[calc(var(--window-chrome-height)+8px)] max-[560px]:right-2 max-[560px]:left-2 max-[560px]:max-w-none"
+          role="status"
+          aria-live="polite"
+        >
+          <span className="flex-[1_1_auto]">
+            发现 {notificationEvents.length} 个问题
+          </span>
+          <button
+            className="min-h-9 cursor-pointer rounded-lg border-0 bg-[var(--platform-button-primary-fill)] px-2.5 text-[var(--platform-button-primary-text)] last:w-9 last:bg-transparent last:px-0 last:text-xl last:text-[var(--platform-text-soft)]"
+            type="button"
+            onClick={openReport}
+          >
             查看并报告
           </button>
           <button
+            className="min-h-9 cursor-pointer rounded-lg border-0 bg-[var(--platform-button-primary-fill)] px-2.5 text-[var(--platform-button-primary-text)] last:w-9 last:bg-transparent last:px-0 last:text-xl last:text-[var(--platform-text-soft)]"
             type="button"
             onClick={() => setNotificationEvents([])}
             aria-label="忽略"

apps/ai-game-creator-shell/src/styles.css

@@ -815,47 +815,6 @@ textarea {
   overflow-wrap: anywhere;
 }
 
-.error-report-dialog {
-  width: min(560px, calc(100vw - 2rem));
-  max-height: min(760px, calc(100vh - 2rem));
-  overflow: auto;
-  border-radius: 18px;
-  padding: 20px;
-  box-shadow: 0 24px 80px rgb(36 20 12 / 22%);
-}
-
-.error-report-dialog__header,
-.error-report-dialog__actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.error-report-dialog__header h2 { margin: 0; }
-.error-report-dialog__consent { margin: 4px 0 0; color: var(--platform-text-soft); font-size: 13px; }
-.error-report-dialog__header > button { width: 40px; min-height: 40px; border: 0; border-radius: 10px; background: transparent; font-size: 24px; cursor: pointer; }
-.error-report-dialog__body { display: grid; gap: 16px; margin: 20px 0; }
-.error-report-dialog__events { display: grid; gap: 8px; padding: 0; margin: 8px 0 0; list-style: none; }
-.error-report-dialog__events li { display: grid; gap: 3px; border: 1px solid var(--platform-border-subtle); border-radius: 10px; padding: 10px; }
-.error-report-dialog__events small { color: var(--platform-text-soft); }
-.error-report-dialog__body label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
-.error-report-dialog__body textarea { min-height: 100px; resize: vertical; border: 1px solid var(--platform-border-subtle); border-radius: 10px; padding: 10px; font: inherit; }
-.error-report-dialog__logs { display: flex !important; align-items: center; }
-.error-report-dialog__actions { justify-content: flex-end; }
-.error-report-dialog__actions button { border: 0; border-radius: 9px; padding: 9px 14px; cursor: pointer; }
-.error-report-dialog__actions button:last-child { background: var(--platform-button-primary-fill); color: var(--platform-button-primary-text); }
-.error-report-dialog__event-select { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 8px; }
-.error-report-dialog__event-select input { margin-top: 3px; }
-.error-report-notice { position: fixed; top: calc(var(--window-chrome-height) + 14px); right: 16px; z-index: 40; display: flex; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 2rem)); padding: 12px 14px; border: 1px solid var(--platform-surface-border); border-radius: 12px; background: var(--platform-subpanel-fill); color: var(--platform-text-strong); box-shadow: 0 12px 30px rgb(36 20 12 / 18%); }
-.error-report-notice span { flex: 1 1 auto; }
-.error-report-notice button { min-height: 36px; border: 0; border-radius: 8px; padding: 0 10px; background: var(--platform-button-primary-fill); color: var(--platform-button-primary-text); }
-.error-report-notice button:last-child { width: 36px; padding: 0; background: transparent; color: var(--platform-text-soft); font-size: 20px; }
-
-@media (max-width: 560px) {
-  .error-report-notice { top: calc(var(--window-chrome-height) + 8px); right: 8px; left: 8px; max-width: none; }
-}
-
 @media (max-width: 480px) {
   .client-auth-shell {
     padding: 16px;