fix(theme): [anchor] Fixed the theme switch bug and the anchor line color under the default theme. (#1854)

* fix(theme): 修复主题切换bug

* fix(anchor): 修复锚点组件默认主题的线条颜色

* fix(theme): 修复主题切换bug，兼容单段式设置

packages/theme/src/anchor/index.less

@@ -128,6 +128,7 @@
         width: 1px;
         background-color: var(--ti-anchor-line-bg-color);
         position: absolute;
+        opacity: var(--ti-anchor-line-opacity);
         border-radius: 50%;
         left: 3.5px;
         top: 20px;

packages/theme/src/anchor/smb-theme.js

@@ -2,5 +2,6 @@ export const tinyAnchorSmbTheme = {
   'ti-anchor-width': 'var(--ti-common-size-40x)',
   'ti-anchor-text-color': 'var(--ti-common-color-text-secondary)',
   'ti-anchor-line-bg-color': 'var(--ti-common-scrollbar-thumb-bg-color)',
-  'ti-anchor-link-active-text-color': 'var(--ti-common-color-text-primary)'
+  'ti-anchor-link-active-text-color': 'var(--ti-common-color-text-primary)',
+  'ti-anchor-line-opacity': '1'
 }

packages/theme/src/anchor/vars.less

@@ -17,9 +17,11 @@
   --ti-anchor-width: 'auto';
   // 锚点默认文本色
   --ti-anchor-text-color: var(--ti-common-color-text-primary, #252b3a);
-  // dot类型线条背景色
+  // dot类型线条背景色(new)
   --ti-anchor-line-bg-color: var(--ti-common-color-text-primary, #252b3a);
-  // dot类型圆点边框色
+  // dot类型线条透明度(hide)
+  --ti-anchor-line-opacity: 0.08;
+  // dot类型圆点边框色(new)
   --ti-anchor-dot-border-color: var(--ti-common-color-line-normal, #adb0b8);
   // 锚点默认字号
   --ti-anchor-font-size: var(--ti-common-font-size-1, 14px);

packages/theme/src/theme-tool.js

@@ -83,13 +83,21 @@ export default class TinyThemeTool {
    * 示例1：输入：checkbox-button，输出：.tiny-checkbox-button[class*=tiny]
    * 示例2：输入：month-table，输出：.tiny-month-table[class*=tiny],.tiny-year-table[class*=tiny]
    */
-  getSelectorByKey(key) {
-    if (!definedComponents[key]) {
-      return '.tiny-' + key + '[class*=tiny]'
+  getSelectorByKey(compNameList) {
+    const threeKey = `${compNameList[1]}-${compNameList[2]}-${compNameList[3]}`
+    const twoKey = `${compNameList[1]}-${compNameList[2]}`
+    let key = compNameList[1]
+    let value = definedComponents[key] || key
+    if (definedComponents[threeKey]) {
+      key = threeKey
+      value = definedComponents[threeKey]
+    } else if (definedComponents[twoKey]) {
+      key = twoKey
+      value = definedComponents[twoKey]
     }
 
     let selector = ''
-    const keyItems = definedComponents[key].split(',')
+    const keyItems = value.split(',')
     keyItems.forEach((componentName, index) => {
       // 加上 [class*=tiny] 是为了提高权重，促使主题变换成功
       selector += '.tiny-' + componentName + '[class*=tiny]' + (index < keyItems.length - 1 ? ',' : '')
@@ -103,11 +111,9 @@ export default class TinyThemeTool {
     if (compNameList.length < 2) {
       return false
     }
-    const threeKey = `${compNameList[1]}-${compNameList[2]}-${compNameList[3]}`
-    const twoKey = `${compNameList[1]}-${compNameList[2]}`
 
     // 优先三段式命名的组件名，优先级从高到低为三段-二段-一段
-    return this.getSelectorByKey(threeKey) || this.getSelectorByKey(twoKey) || this.getSelectorByKey(compNameList[1])
+    return this.getSelectorByKey(compNameList)
   }
 
   formatCSSVariables(themeData) {