feat(anchor): [anchor] 增加anchor锚点新规范额外特性，并修改文档发现的图标等文档问题 (#2313)

chenxi-20 · web-flow · commit df0caba11d03 · 2024-10-19T16:35:08.000+08:00
diff --git a/examples/sites/demos/apis/anchor.js b/examples/sites/demos/apis/anchor.js
@@ -84,7 +84,7 @@ export default {
         },
         {
           name: 'link-click',
-          type: '(event: Event, currentLink: {link: string, title: string}) => void',
+          type: '(event: Event, currentLink: { link: string, title: string } ) => void',
           defaultValue: '',
           desc: {
             'zh-CN': '锚点点击事件',
@@ -93,18 +93,6 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'set-container',
           mfDemo: 'set-container'
-        },
-        {
-          name: 'on-change',
-          type: '(hash: string) => void',
-          defaultValue: '',
-          desc: {
-            'zh-CN': '使用 change 代替；[deprecated v3.12.0 废弃，v3.17.0 移除；移除原因：命名规范]',
-            'en-US':
-              'use change instead [deprecated v3.12.0 abandoned, v3.17.0 removed; reason for removal: naming convention]'
-          },
-          mode: ['pc'],
-          pcDemo: 'change'
         }
       ],
       methods: [],
diff --git a/examples/sites/demos/pc/app/icon/show-title-composition-api.vue b/examples/sites/demos/pc/app/icon/show-title-composition-api.vue
diff --git a/examples/sites/demos/pc/app/icon/show-title.spec.ts b/examples/sites/demos/pc/app/icon/show-title.spec.ts
diff --git a/examples/sites/demos/pc/app/icon/show-title.vue b/examples/sites/demos/pc/app/icon/show-title.vue
diff --git a/examples/sites/demos/pc/app/icon/webdoc/icon.js b/examples/sites/demos/pc/app/icon/webdoc/icon.js
@@ -15,19 +15,6 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
-    {
-      demoId: 'show-title',
-      name: {
-        'zh-CN': '显示 Title',
-        'en-US': 'Display Title'
-      },
-      desc: {
-        'zh-CN': '通过其父元素的 <code>title</code> 属性，实现给图标增加 <code>Title</code> 的功能。',
-        'en-US':
-          'By using the <code>title</code> attribute of its parent element, the function of adding <code>Title</code> to the icon is implemented.'
-      },
-      codeFiles: ['show-title.vue']
-    },
     {
       demoId: 'list',
       name: {
diff --git a/packages/theme/src/anchor/index.less b/packages/theme/src/anchor/index.less
@@ -32,7 +32,6 @@
   }
 
   &-link {
-    margin: 0 0 0 var(--tv-Anchor-link-margin-left);
     line-height: 22px;
     cursor: pointer;
 
@@ -43,13 +42,13 @@
     &-title {
       display: block;
       max-width: 100%;
-      padding: 1px var(--tv-Anchor-link-title-padding-right) 1px 10px;
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
       color: var(--tv-Anchor-text-color);
+
       &&--active {
         color: var(--tv-Anchor-link-text-color-active);
       }
@@ -61,10 +60,32 @@
       margin-top: 0.5em;
     }
 
+    .@{anchor-prefix-cls} {
+      & > .@{anchor-prefix-cls}-link {
+        margin-left: var(--tv-Anchor-link-margin-left);
+
+        & > .@{anchor-prefix-cls}-link {
+          & > .@{anchor-prefix-cls}-link-title {
+            padding-left: 32px;
+          }
+        }
+      }
+
+      &-link-title {
+        padding: 7px 8px 7px 16px;
+        font-size: 12px;
+        line-height: 1.5;
+
+        &--active {
+          background-color: var(--tv-Anchor-link-bg-color-active);
+        }
+      }
+    }
+
     .@{anchor-prefix-cls}-link-mask {
       position: absolute;
       max-width: 0;
-      left: var(--tv-Anchor-orbit-width / 2);
+      left: calc(var(--tv-Anchor-orbit-width) / 2);
       width: 100%;
       border-top-right-radius: 10px;
       border-bottom-right-radius: 10px;
@@ -77,15 +98,14 @@
       top: 0;
       bottom: 0;
       width: var(--tv-Anchor-orbit-width);
-      border-radius: calc(var(--tv-Anchor-orbit-width / 2));
       background-color: var(--tv-Anchor-orbit-bg-color);
       &-skid {
         position: absolute;
         left: 0;
         width: var(--tv-Anchor-orbit-skid-width);
         background-color: var(--tv-Anchor-orbit-bg-color);
         &--active {
-          background-color: var(--tv-Anchor-link-bg-color-active);
+          background-color: var(--tv-Anchor-link-skid-bg-color-active);
         }
       }
     }
@@ -102,11 +122,11 @@
       position: relative;
       padding-left: 10px;
       margin-bottom: 16px;
+      margin-left: 8px;
     }
 
     .@{anchor-prefix-cls}-link-title {
-      padding-left: 16px;
-      padding-right: 0;
+      padding: 1px 0 1px 16px;
       -webkit-line-clamp: 2;
 
       &:before {
diff --git a/packages/theme/src/anchor/vars.less b/packages/theme/src/anchor/vars.less
@@ -22,23 +22,23 @@
   // 选中锚点项默认文本色
   --tv-Anchor-link-text-color-active: var(--tv-color-text, #191919);
   // 锚点项左默认外边距
-  --tv-Anchor-link-margin-left: var(--tv-space-md, 8px);
+  --tv-Anchor-link-margin-left: var(--tv-space-sm, 4px);
   // 悬浮锚点项默认文本色
   --tv-Anchor-link-text-color-hover: var(--tv-color-text-secondary, #595959);
+  // 选中锚点背景色
+  --tv-Anchor-link-bg-color-active: var(--tv-color-bg-active, #f5f5f5);
+  // 选中锚点滑块背景色
+  --tv-Anchor-link-skid-bg-color-active: var(--tv-color-bg-active-primary, #191919);
 
   // line类型
   // 竖向轨道宽度
   --tv-Anchor-orbit-width: var(--tv-size-base, 4px);
   // 选中锚点蒙层背景色
-  --tv-Anchor-link-mask-bg-color: rgba(80, 115, 229, 0.15);
+  --tv-Anchor-link-mask-bg-color: transparent;
   // 锚点竖向轨道背景色
   --tv-Anchor-orbit-bg-color: var(--tv-color-border-divider-short, #dbdbdb);
   // 选中锚点竖向轨道滑块宽度
   --tv-Anchor-orbit-skid-width: var(--tv-size-base, 4px);
-  // 选中锚点竖向轨道滑块背景色
-  --tv-Anchor-link-bg-color-active: var(--tv-color-bg, #f5f5f5);
-  // 锚点标题右外边距
-  --tv-Anchor-link-title-padding-right: var(--tv-space-md, 8px);
 
   // dot类型
   // dot类型圆点边框色
diff --git a/packages/theme/src/tabs/index.less b/packages/theme/src/tabs/index.less
@@ -227,10 +227,6 @@
       }
     }
 
-    &:hover {
-      font-weight: var(--tv-Tabs-item-card-hover-font-weight);
-    }
-
     &.is-disabled {
       cursor: not-allowed;
       color: var(--tv-Tabs-item-disabled-text-color);
diff --git a/packages/theme/src/tabs/vars.less b/packages/theme/src/tabs/vars.less
@@ -77,8 +77,6 @@
   --tv-Tabs-item-card-active-bg-color: var(--tv-color-act-primary-bg-white, #ffffff);
   // card类型标签项默认上|右边框色
   --tv-Tabs-item-card-border-color: transparent;
-  // card类型标签项悬浮字重
-  --tv-Tabs-item-card-hover-font-weight: var(--tv-font-weight-bold, 600);
   // bordercard类型选中项圆角
   --tv-Tabs-dark-border-radius: var(--tv-border-radius-md, 6px) var(--tv-border-radius-md, 6px) 0 0;
   // bordercard类型选中项文本色
@@ -98,7 +96,7 @@
   // bordercard类型标签栏边框厚度
   --tv-Tabs-dark-border-weight: 0px;
   // bordercard类型默认背景色
-  --tv-Tabs-header-dark-bg-color: var(--tv-color-bg-secondary, #ffffff);
+  --tv-Tabs-header-dark-bg-color: var(--tv-color-bg-primary, #191919);
   // bordercard类型标签项高度
   --tv-Tabs-dark-item-height: calc(var(--tv-size-base, 4px) * 11.75);
   // 标签项超出时上下按钮尺寸

Original file line number	Diff line number	Diff line change
`@@ -227,10 +227,6 @@`
`227`	`227`	`}`
`228`	`228`	`}`
`229`	`229`
`230`		`- &:hover {`
`231`		`- font-weight: var(--tv-Tabs-item-card-hover-font-weight);`
`232`		`- }`
`233`		`-`
`234`	`230`	`&.is-disabled {`
`235`	`231`	`cursor: not-allowed;`
`236`	`232`	`color: var(--tv-Tabs-item-disabled-text-color);`