feat: anchor

JasKang · Nov 17, 2023 · 2edee7d · 2edee7d
1 parent bedfaaa
commit 2edee7d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 39 deletions.
diff --git a/packages/docs-vue/core/config.ts b/packages/docs-vue/core/config.ts
@@ -27,6 +27,7 @@ export default {
         {
           key: '/docs/array/boil',
           title: 'boil',
+          children: [{ key: 'asdfasdf' }, { key: 'asdfasd23f' }, { key: 'asd2323fasd23f' }],
         },
         {
           key: '/docs/array/cluster',
@@ -35,6 +36,7 @@ export default {
         {
           key: '/docs/array/counting',
           title: 'counting',
+          children: [{ key: 'asd12fasdf' }, { key: 'as233dfasd23f' }, { key: 'asd232323fasd23f' }],
         },
         {
           key: '/docs/array/diff',

diff --git a/packages/style/src/anchor.ts b/packages/style/src/anchor.ts
@@ -1,7 +1,7 @@
 import { tw } from './utils/tw'
 
 const anchorItemCss = tw(
-  'relative mb-1 block overflow-hidden text-ellipsis whitespace-nowrap only:mb-0',
+  'relative py-1.5 block overflow-hidden text-ellipsis whitespace-nowrap only:mb-0',
   {
     variants: {
       disabled: {
@@ -14,7 +14,7 @@ const anchorItemCss = tw(
 
 export function createAnchorItemStyle() {
   return {
-    css: 'cursor-pointer px-4 py-1.5',
+    css: 'cursor-pointer pl-4',
     itemStyler: (disabled: boolean) => anchorItemCss({ disabled }),
   }
 }
@@ -25,6 +25,8 @@ export function createAnchorStyle() {
     css: "before:content-[' '] relative ps-[2px] text-sm before:absolute before:start-0 before:top-0 before:h-full before:border-s-2 before:border-s-gray-100",
     cursor:
       'bg-primary-500 absolute start-0 top-1 inline-block h-6 w-[2px] transition-transform z-10',
+    group: 'z-anchor-group mb-12 lg:mb-8',
+    groupTitle: 'mb-8 text-sm font-semibold text-slate-900 dark:text-slate-200 lg:mb-3',
     itemWarper: 'cursor-pointer px-4 py-1.5',
     itemCreator: (disabled: boolean) => anchorItemCss({ disabled }),
   }

diff --git a/packages/vue/src/Anchor/index.tsx b/packages/vue/src/Anchor/index.tsx
@@ -15,30 +15,6 @@ export type AnchorProps = {
   selectedKey?: string
   items: IAnchorItem[]
 }
-function findItemPathByKey(
-  items: IAnchorItem[],
-  key: string,
-  path: number[] = []
-): number[] | undefined {
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i]
-    // 当前路径
-    const currentPath = path.concat(i)
-    // 如果找到了键，返回路径
-    if (item.key === key) {
-      return currentPath
-    }
-    // 如果存在子项，递归搜索子项
-    if (item.children) {
-      const childPath = findItemPathByKey(item.children, key, currentPath)
-      if (childPath) {
-        return childPath
-      }
-    }
-  }
-  // 如果没有找到，返回undefined
-  return undefined
-}
 
 function calculateTranslateY(
   items: IAnchorItem[],
@@ -51,19 +27,14 @@ function calculateTranslateY(
 
     let itemHeight = 2
     // 计算当前项的高度（基础高度 + 子项额外高度，根据是否是第一层来调整）
-    if (item.children) {
-      if (isGroup) {
-        itemHeight = i === 0 ? 2 : 4
-      } else {
-        itemHeight = 2.25
-      }
+    if (isGroup && item.children) {
+      itemHeight = i === 0 ? 2 : 4
     }
 
     // 如果找到了键，返回累积的高度
     if (item.key === key) {
       return accumulatedHeight // 直接返回累积的rem值
     }
-
     // 累加当前项的高度
     accumulatedHeight += itemHeight
 
@@ -148,21 +119,19 @@ export const Anchor = defineComponent({
       emit('change', val)
     }
 
-    const { css, warper, cursor } = createAnchorStyle()
+    const { css, warper, cursor, group: groupCss, groupTitle } = createAnchorStyle()
     return () => (
       <div class={warper}>
         {props.isGroup ? (
           props.items.map(group => (
-            <div class="z-anchor-group mb-12 lg:mb-8">
-              <div class="mb-8 text-sm font-semibold text-slate-900 dark:text-slate-200 lg:mb-3">
-                {group.title || group.key}
-              </div>
+            <div class={groupCss}>
+              <div class={groupTitle}>{group.title || group.key}</div>
               <div class={css}>
                 <AnchorItems
                   items={group.children || []}
                   selectedKey={state.value}
                   onChange={onChange}
-                />{' '}
+                />
               </div>
             </div>
           ))