remix图标本地化

app/routes/contract-template.detail.$id.tsx

@@ -3,97 +3,14 @@ import { useLoaderData, useNavigate } from '@remix-run/react';
 import { getContractTemplate } from '~/api/contract-template/templates';
 import type { ContractTemplate } from '~/api/contract-template/templates';
 import styles from '~/styles/pages/contract-template.css?url';
+import filePreviewStyles from '~/styles/components/file-preview-isolation.css?url';
 
 // 导入FilePreview组件
 import { FilePreview } from '~/components/reviews';
 
 export const links = () => [
   { rel: 'stylesheet', href: styles },
-  // 添加专门的样式隔离
-  { 
-    rel: 'stylesheet', 
-    href: 'data:text/css;base64,' + btoa(`
-      .file-preview-isolation {
-        all: unset !important;
-        display: block !important;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
-        font-size: 14px !important;
-        line-height: 1.5 !important;
-        color: #333 !important;
-        background: #fff !important;
-        width: 100% !important;
-        min-height: 600px !important;
-        position: relative !important;
-        isolation: isolate !important;
-        contain: layout style !important;
-      }
-      .file-preview-isolation * {
-        font-family: inherit !important;
-        box-sizing: border-box !important;
-      }
-      .file-preview-isolation .file-preview-header {
-        display: flex !important;
-        justify-content: space-between !important;
-        align-items: center !important;
-        padding: 8px 16px !important;
-        background: #f8f9fa !important;
-        border-bottom: 1px solid #dee2e6 !important;
-        font-size: 14px !important;
-        line-height: 1.5 !important;
-        max-width: none !important;
-        width: 100% !important;
-        text-overflow: unset !important;
-        white-space: nowrap !important;
-        overflow: visible !important;
-      }
-      .file-preview-isolation .file-preview-actions {
-        display: flex !important;
-        align-items: center !important;
-        gap: 8px !important;
-      }
-      .file-preview-isolation button,
-      .file-preview-isolation .ant-btn {
-        padding: 4px 8px !important;
-        margin: 0 2px !important;
-        border: 1px solid #d9d9d9 !important;
-        border-radius: 4px !important;
-        background: white !important;
-        color: #333 !important;
-        font-size: 12px !important;
-        line-height: 1.4 !important;
-        cursor: pointer !important;
-        display: inline-flex !important;
-        align-items: center !important;
-        justify-content: center !important;
-        min-height: 24px !important;
-        text-decoration: none !important;
-        white-space: nowrap !important;
-        vertical-align: middle !important;
-      }
-      .file-preview-isolation input,
-      .file-preview-isolation .ant-input {
-        padding: 4px 8px !important;
-        border: 1px solid #d9d9d9 !important;
-        border-radius: 4px !important;
-        background: white !important;
-        color: #333 !important;
-        font-size: 12px !important;
-        line-height: 1.4 !important;
-        min-height: 24px !important;
-        width: auto !important;
-        max-width: 40px !important;
-        text-align: center !important;
-        outline: none !important;
-      }
-      .file-preview-isolation .file-preview-content {
-        max-height: calc(100vh - 150px) !important;
-        overflow: auto !important;
-        background: #f8f9fa !important;
-        padding: 0 !important;
-        margin: 0 !important;
-      }
-    `)
-  }
+  { rel: 'stylesheet', href: filePreviewStyles },
 ];
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {

app/styles/components/file-preview-isolation.css

@@ -0,0 +1,102 @@
+/* 文件预览样式隔离 */
+.file-preview-isolation {
+  all: unset !important;
+  display: block !important;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+  color: #333 !important;
+  background: #fff !important;
+  width: 100% !important;
+  min-height: 600px !important;
+  position: relative !important;
+  isolation: isolate !important;
+  contain: layout style !important;
+}
+
+.file-preview-isolation * {
+  font-family: inherit !important;
+  box-sizing: border-box !important;
+}
+
+/* 为RemixIcon图标添加字体例外规则 */
+.file-preview-isolation [class^="ri-"],
+.file-preview-isolation [class*=" ri-"],
+.file-preview-isolation i[class^="ri-"],
+.file-preview-isolation i[class*=" ri-"] {
+  font-family: 'remixicon' !important;
+  font-style: normal !important;
+  font-weight: normal !important;
+  font-variant: normal !important;
+  text-transform: none !important;
+  line-height: 1 !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  speak: none !important;
+}
+
+.file-preview-isolation .file-preview-header {
+  display: flex !important;
+  justify-content: space-between !important;
+  align-items: center !important;
+  padding: 8px 16px !important;
+  background: #f8f9fa !important;
+  border-bottom: 1px solid #dee2e6 !important;
+  font-size: 14px !important;
+  line-height: 1.5 !important;
+  max-width: none !important;
+  width: 100% !important;
+  text-overflow: unset !important;
+  white-space: nowrap !important;
+  overflow: visible !important;
+}
+
+.file-preview-isolation .file-preview-actions {
+  display: flex !important;
+  align-items: center !important;
+  gap: 8px !important;
+}
+
+.file-preview-isolation button,
+.file-preview-isolation .ant-btn {
+  padding: 4px 8px !important;
+  margin: 0 2px !important;
+  border: 1px solid #d9d9d9 !important;
+  border-radius: 4px !important;
+  background: white !important;
+  color: #333 !important;
+  font-size: 12px !important;
+  line-height: 1.4 !important;
+  cursor: pointer !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  min-height: 24px !important;
+  text-decoration: none !important;
+  white-space: nowrap !important;
+  vertical-align: middle !important;
+}
+
+.file-preview-isolation input,
+.file-preview-isolation .ant-input {
+  padding: 4px 8px !important;
+  border: 1px solid #d9d9d9 !important;
+  border-radius: 4px !important;
+  background: white !important;
+  color: #333 !important;
+  font-size: 12px !important;
+  line-height: 1.4 !important;
+  min-height: 24px !important;
+  width: auto !important;
+  max-width: 40px !important;
+  text-align: center !important;
+  outline: none !important;
+}
+
+.file-preview-isolation .file-preview-content {
+  max-height: calc(100vh - 150px) !important;
+  overflow: auto !important;
+  background: #f8f9fa !important;
+  padding: 0 !important;
+  margin: 0 !important;
+} 

app/styles/main.css

@@ -256,4 +256,29 @@
   .dark .content-container {
     @apply bg-gray-900 text-gray-200;
   }
+}
+
+/* RemixIcon 图标保护规则 - 防止被样式隔离覆盖 */
+[class^="ri-"]:before,
+[class*=" ri-"]:before,
+i[class^="ri-"]:before,
+i[class*=" ri-"]:before {
+  font-family: 'remixicon' !important;
+  font-style: normal !important;
+  font-weight: normal !important;
+  font-variant: normal !important;
+  text-transform: none !important;
+  line-height: 1 !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+  speak: none !important;
+}
+
+/* 确保RemixIcon元素本身也使用正确的字体 */
+[class^="ri-"],
+[class*=" ri-"],
+i[class^="ri-"],
+i[class*=" ri-"] {
+  font-family: 'remixicon' !important;
+  font-style: normal !important;
 }