fix: resolve the issue of token style in the example

[wuyiping0628]

PR

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

Summary by CodeRabbit

• Documentation

  • Updated component docs layout: added a fixed-width catalog sidebar with its own scrollbar, ellipsis styling for long links, and improved scrollability (including hover-enabled vertical scrolling) for the anchor area.

• Style

  • Refined anchor presentation with cleaner structure and scoped styles, improving readability and consistency without altering behavior.

• Refactor

  • Simplified anchor component usage by rendering it directly and removing unnecessary wrappers; no changes to public APIs or events.

[coderabbitai]

Walkthrough

Refactored the anchor component to render TinyAnchor directly and removed its scoped CSS. Updated the docs view to wrap the anchor in a catalog container and added scoped CSS for layout, scroll behavior, and styling. No public APIs or exports changed.

Changes

Cohort / File(s)	Summary of Changes
Anchor component template/style simplification examples/sites/src/components/anchor.vue	Replaced wrapper div with direct TinyAnchor usage under v-if; preserved props/events; removed prior scoped CSS and left an empty scoped style block; no script/public API changes.
Docs layout and catalog styling examples/sites/src/views/components-doc/common.vue	Wrapped aside-anchor in a div.cmp-page-anchor.catalog; added scoped CSS for scrollable affix area, condensed link styles, fixed-width catalog column, and custom scrollbar; no changes to component props/events.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

In catalogs I hop, neat and spry,
Anchors trimmed, no extra tie.
Scrolling lanes where links align,
A tidy warren, clean design.
With CSS whiskers, light and quick,
I twitch—then ship the perfect click.
(_/) ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The PR title claims to fix "token style" in an example; the changeset makes template and scoped-CSS edits in example components (examples/sites/src/components/anchor.vue and examples/sites/src/views/components-doc/common.vue) which are stylistic and plausibly related to example appearance, but the diffs do not explicitly reference a "token" or token-specific selectors, so the title is only partially specific to the visible changes.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch wyp/token-style-0922

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (3)

examples/sites/src/components/anchor.vue (1)

70-70: Remove empty scoped style block

An empty scoped block adds noise and a data‑v attribute without benefit. Safe to drop.

-<style scoped lang="less"></style>
+/* styles moved to the docs view (common.vue) */

examples/sites/src/views/components-doc/common.vue (2)

78-89: Wrap is fine; add nav semantics for accessibility

Annotate the catalog as navigation to improve landmarks and screen‑reader discovery.

-        <div class="cmp-page-anchor catalog">
+        <div class="cmp-page-anchor catalog" role="navigation" aria-label="Page catalog">

---

573-581: Scrollbar colors: prefer tokens/vars and dark‑mode aware values

Hard‑coded #f5f5f5/#c1c1c1 won’t adapt to themes. Use design tokens or CSS vars with fallbacks.

-  .catalog::-webkit-scrollbar {
-    width: 10px;
-    background-color: #f5f5f5;
-  }
+  .catalog::-webkit-scrollbar {
+    width: 10px;
+    background-color: var(--docs-scrollbar-track, #f5f5f5);
+  }
 
-  .catalog::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    background-color: #c1c1c1;
-  }
+  .catalog::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: var(--docs-scrollbar-thumb, #c1c1c1);
+  }

Optional (outside this hunk): define themeable defaults near the top of this style block:

.docs-content { --docs-scrollbar-track: var(--docs-color-bg-2); --docs-scrollbar-thumb: var(--docs-color-border); }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5522749 and de2aee7.

📒 Files selected for processing (2)

• examples/sites/src/components/anchor.vue (2 hunks)
• examples/sites/src/views/components-doc/common.vue (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Parse Affected Components

🔇 Additional comments (2)

examples/sites/src/components/anchor.vue (1)

2-13: Direct TinyAnchor usage looks good; verify prop casing against TinyAnchor API

Nice simplification. Please double‑check prop names/casing expected by TinyAnchor (e.g., tiny_mode vs tiny-mode, container-id vs containerId) to avoid silent no‑ops across versions. Keeping id="anchor" is important for the height calc in common.vue.

examples/sites/src/views/components-doc/common.vue (1)

531-538: Affix override may negate is-affix logic—confirm intent

top: unset !important effectively disables sticky/affix behavior, even when :is-affix is true. If this is intended (scrollable sidebar only), consider setting :anchor-affix="false" to avoid unnecessary measurements and state churn.