From 359206630ddff92cf24d582a9256d5da327c1cc4 Mon Sep 17 00:00:00 2001
From: Gabe <yugang2002@gmail.com>
Date: Sat, 11 Oct 2025 12:01:36 +0800
Subject: [PATCH] feat: add default styles example

---
 src/config/i18n.js         |  5 +++++
 src/libs/style.js          | 10 +++++++---
 src/views/Options/Rules.js | 30 +++++++++++++++++++++++++++++-
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/config/i18n.js b/src/config/i18n.js
index df9f5da..f3984af 100644
--- a/src/config/i18n.js
+++ b/src/config/i18n.js
@@ -1588,4 +1588,9 @@ export const I18N = {
     en: `2. The plug-in has built-in basic segmentation logic. If it is not ideal, you can enable AI intelligent segmentation. However, you need to consider the video length and the processing power of the AI ​​interface. The waiting time may be very long or even fail.`,
     zh_TW: `2.插件內建基礎斷句邏輯，如不理想，可以啟用AI智能斷句，但需考慮視訊長度與AI介面的處理能力，可能等待的時間會很長，甚至失敗。`,
   },
+  default_styles_example: {
+    zh: `默认样式参考：`,
+    en: `Default styles reference:`,
+    zh_TW: `認樣式參考：`,
+  },
 };
diff --git a/src/libs/style.js b/src/libs/style.js
index 9770572..12f7f65 100644
--- a/src/libs/style.js
+++ b/src/libs/style.js
@@ -33,10 +33,10 @@ const genLineStyle = (style, color) => `
   }
 `;
 
-export const genStyles = ({
+const genStyles = ({
   textDiyStyle = DEFAULT_DIY_STYLE,
   bgColor = DEFAULT_COLOR,
-}) => ({
+} = {}) => ({
   // 无样式
   [OPT_STYLE_NONE]: ``,
   // 下划线
@@ -82,7 +82,9 @@ export const genStyles = ({
     }
   `,
   // 自定义
-  [OPT_STYLE_DIY]: textDiyStyle,
+  [OPT_STYLE_DIY]: `
+${textDiyStyle}
+`,
 });
 
 export const genTextClass = ({ textDiyStyle, bgColor = DEFAULT_COLOR }) => {
@@ -103,3 +105,5 @@ export const genTextClass = ({ textDiyStyle, bgColor = DEFAULT_COLOR }) => {
   });
   return [textClass, textStyles];
 };
+
+export const defaultStyles = genStyles();
diff --git a/src/views/Options/Rules.js b/src/views/Options/Rules.js
index 1a7b9d2..cc7809e 100644
--- a/src/views/Options/Rules.js
+++ b/src/views/Options/Rules.js
@@ -63,6 +63,7 @@ import { kissLog } from "../../libs/log";
 import { useApiList } from "../../hooks/Api";
 import ShowMoreButton from "./ShowMoreButton";
 import { useConfirm } from "../../hooks/Confirm";
+import { defaultStyles } from "../../libs/style";
 
 const calculateInitialValues = (rule) => {
   const base = rule?.pattern === "*" ? GLOBLA_RULE : DEFAULT_RULE;
@@ -128,6 +129,13 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
     return JSON.stringify(initialFormValues) !== JSON.stringify(formValues);
   }, [initialFormValues, formValues]);
 
+  const stylesExample = useMemo(() => {
+    return Object.entries(defaultStyles)
+      .filter(([_, v]) => v)
+      .map(([k, v]) => `${i18n(k)}:${v}`)
+      .join("\n");
+  }, [i18n]);
+
   const hasSamePattern = (str) => {
     for (const item of rules.list) {
       if (item.pattern === str && rule?.pattern !== str) {
@@ -484,7 +492,27 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
           <TextField
             size="small"
             label={i18n("diy_style")}
-            helperText={i18n("diy_style_helper")}
+            FormHelperTextProps={{
+              component: "div",
+            }}
+            helperText={
+              <Box>
+                <Box component="div">{i18n("default_styles_example")}</Box>
+                <Box
+                  component="pre"
+                  sx={{
+                    overflowX: "auto",
+                    height: 200,
+                    resize: "vertical",
+                    minHeight: 100,
+                    margin: 0,
+                    // border: "1px solid #ccc",
+                  }}
+                >
+                  {stylesExample}
+                </Box>
+              </Box>
+            }
             name="textDiyStyle"
             value={textDiyStyle}
             disabled={disabled}