fix:(tiny-vue): modify ui style

[James-9696]

Summary by CodeRabbit

• Style
  • Refined typography across the home page: new title/subtitle variants and tightened title metrics
  • Added spacing utility classes for consistent margins and padding
  • Updated card visuals: lighter shadows, reduced hover scale, and smoother interactions
  • Reworked section layouts and alignment for clearer hierarchy and spacing
  • Improved responsive behaviour including an intermediate image-scaling breakpoint and consolidated mobile typography adjustments

[coderabbitai]

Warning

Review limit reached

@James-9696, we couldn't start this review because you've used your available PR reviews for now.

Your plan includes 1 review of capacity. Refill in 6 minutes and 41 seconds.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more review capacity refills, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than trial, open-source, and free plans. In all cases, review capacity refills continuously over time.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 25a167d3-ef7b-4df2-89ef-35e8984ccda4

📥 Commits

Reviewing files that changed from the base of the PR and between 321eb17 and 45933c0.

📒 Files selected for processing (2)

• genui-sdk
• packages/home/src/views/tiny-vue-home/common.less

Walkthrough

Updates typography styles and spacing utilities in the common stylesheet, then refactors six view components to use standardized CSS classes for consistent feature titles, descriptions, layout, and responsive behavior across the Tiny-Vue home page.

Changes

Typography & Utilities Foundation

Layer / File(s)	Summary
Typography & spacing utilities packages/home/src/views/tiny-vue-home/common.less	Introduces .feature-title, .feature-text-description, .feature-desc-title and spacing helpers (.mt-*, .mb-*, .pd-space*, .pb-*).
Feature layout & title metrics packages/home/src/views/tiny-vue-home/common.less	Refines .feature-sub-title, adjusts .feature-header/.feature-content layout, updates .feature-text/.feature-visual spacing, and retunes .title-logo, .title-logo-text, .title-number metrics.
Responsive alignment packages/home/src/views/tiny-vue-home/common.less	Unifies responsive selectors so both .feature-sub-title and .feature-desc-title receive the same adjustments at 768px and 480px breakpoints.

Component Styling Refactors

Layer / File(s)	Summary
ComponentShowcase adjustments packages/home/src/views/tiny-vue-home/components/ComponentShowcase.vue	Switch hero title to .feature-title, apply feature-sub-title for subtitle, add section padding, reduce card hover scale and adjust shadows, tighten demo title typography.
ConfigArchitecture updates packages/home/src/views/tiny-vue-home/components/ConfigArchitecture.vue	Replace description with feature-sub-title text-center, add pb-130, remove gap-30 from items, lighten card shadow and use hover scale transform; adjust image sizing/margins.
CrossPlatformFeature markup changes packages/home/src/views/tiny-vue-home/components/CrossPlatformFeature.vue	Change top <h2> to feature-title, item titles to feature-desc-title, and item descriptions to feature-text-description.
Section redesigns packages/home/src/views/tiny-vue-home/components/McpSection.vue, packages/home/src/views/tiny-vue-home/components/ThemeCustomization.vue	Update header class assignments, add vertical spacing utilities, restyle buttons and cards (remove heavy shadows, add borders/scale hover), adjust image padding/borders and add an intermediate responsive zoom breakpoint.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~35 minutes

Possibly related PRs

• opentiny/opentiny.design#123: Overlaps edits to packages/home/src/views/tiny-vue-home/common.less affecting homepage typography and feature styles.

Poem

🐰 Hopping through pixels, I tweak and I tune,

New titles and gaps make the layout sing soon.
Spacing aligned, breakpoints in line,
Components now dress in a cleaner design.
Cheers from a rabbit—styles look divine!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'fix:(tiny-vue): modify ui style' is vague and non-descriptive. While it mentions the component and that UI styles are being modified, it does not convey meaningful information about what specific changes were made or which aspects of the UI were improved.	Revise the title to be more specific about the UI changes, such as 'fix:(tiny-vue): refactor typography and spacing styles' or 'refactor layout and visual styling across home components' to better communicate the scope of changes.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-vue-ui

---

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: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/home/src/views/tiny-vue-home/components/ComponentShowcase.vue (1)

122-122: ⚠️ Potential issue | 🟡 Minor

feature-text-title is an undefined class — remove it from both locations.

The feature-text-title class is referenced at lines 122 and 129 but has no CSS definition anywhere in the codebase. It should be removed:

Suggested fix

-        <div class="title feature-text-title title-number">130+</div>
+        <div class="title title-number">130+</div>
...
-        <div class="title feature-text-title title-number">30+</div>
+        <div class="title title-number">30+</div>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/home/src/views/tiny-vue-home/components/ComponentShowcase.vue` at
line 122, The class name "feature-text-title" is unused/undefined; remove it
from the two JSX/HTML elements that reference it (the div with class "title
feature-text-title title-number" and the other occurrence at the second title
block) so they only use the remaining valid classes (e.g., "title" and
"title-number"/other existing classes) and update any tests or snapshots if they
depend on that exact class name; search for "feature-text-title" to ensure both
occurrences are removed.

🧹 Nitpick comments (3)

packages/home/src/views/tiny-vue-home/common.less (2)

125-127: Minor formatting nit on .mb-40.

The selector .mb-40 has a stray leading space and lost one indent level relative to its siblings (.mb-60, .mb-70, .mb-100). Functionally harmless, but worth aligning for consistency.

♻️ Suggested tweak

- .mb-40 {
+  .mb-40 {
     margin-bottom: 40px;
   }

While here, you may also want to clean up a couple of small whitespace inconsistencies introduced in this file:

• Line 13: line-height:54px; — missing space after the colon.
• Lines 134 and 138: padding: 16px 32px 40px; / padding: 0px 32px; — double space after the colon.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/home/src/views/tiny-vue-home/common.less` around lines 125 - 127,
Remove the stray leading space and restore the same indentation for the .mb-40
selector so it matches its sibling selectors (.mb-60, .mb-70, .mb-100); also
normalize whitespace in this stylesheet by adding a space after the colon in the
line-height declaration (change line-height:54px; to line-height: 54px;) and by
collapsing the double spaces after the colon in the padding declarations
(padding:  16px 32px 40px; and padding:  0px 32px; should be padding: 16px 32px
40px; and padding: 0px 32px;).

---

97-147: Optional: consider a consistent spacing scale rather than ad‑hoc utilities.

You're growing a small set of one‑off margin/padding utilities (mt-20/40/60/70/100, mb-40/60/70/100, pb-100/130, pd-space*). It works, but if these end up referenced from many components it can quickly drift. A simple Less mixin or a small spacing scale (@space-1: 20px; @SpACE-2: 40px; …) would be easier to keep consistent across responsive breakpoints. Non‑blocking.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/home/src/views/tiny-vue-home/common.less` around lines 97 - 147, The
file defines many ad-hoc spacing utilities (.mt-20/.mt-40/.mt-60/.mt-70/.mt-100,
.mb-40/.mb-60/.mb-70/.mb-100, .pb-100/.pb-130, .pd-space, .pd-space-title) which
should be consolidated into a consistent spacing scale; introduce Less variables
(e.g. `@space-1`: 8px; `@space-2`: 16px; `@space-3`: 24px; `@space-4`: 40px; `@space-5`:
100px) or a mixin (e.g. .space(`@top`; `@right`; `@bottom`; `@left`) { margin: `@top`
`@right` `@bottom` `@left`; }) and replace the literal values in the classes (.mt-*,
.mb-*, .pb-*, .pd-space, .pd-space-title) to use those variables/mixins so
spacing is consistent and easier to update across components.

packages/home/src/views/tiny-vue-home/components/CrossPlatformFeature.vue (1)

30-32: Drop the legacy description class on the header <p>.

You've introduced feature-sub-title as the new style, but the header <p> still carries the old description class. They mostly conflict (font‑size, line‑height, color, padding, letter‑spacing) and feature-sub-title happens to win because it's defined later in common.less, but description's responsive rules still leak through — e.g. @media (max-width: 480px) in common.less adds padding-left/right: 15px and a font-size: 16px to .description, which competes with the new .feature-sub-title 480px rule. Easy to clean up:

♻️ Suggested change

-      <p class="description feature-sub-title text-center">
+      <p class="feature-sub-title text-center">
         相同的组件代码可在不同的Vue版本和设备平台上运行，显著降低了企业应用的维护成本，无需重复开发，大幅提升开发效率
       </p>

Same pattern exists on:

• ThemeCustomization.vue line 17
• ComponentShowcase.vue line 115
• McpSection.vue line 71

It would be worth applying the same simplification there for consistency.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/home/src/views/tiny-vue-home/components/CrossPlatformFeature.vue`
around lines 30 - 32, Remove the legacy "description" class from the header <p>
in CrossPlatformFeature.vue so only the new "feature-sub-title" class is applied
(this prevents conflicting responsive rules like .description `@media` overrides).
Locate the paragraph element with class="description feature-sub-title" and
change it to only class="feature-sub-title"; repeat the same cleanup in
ThemeCustomization.vue (header <p> at the noted spot), ComponentShowcase.vue
(the paragraph around line where "feature-sub-title" appears), and
McpSection.vue to ensure no .description class remains alongside
.feature-sub-title.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/home/src/views/tiny-vue-home/components/ConfigArchitecture.vue`:
- Around line 84-90: The img rule uses width: stretch which has inconsistent
support; make it defensive by providing fallbacks and/or feature-detection: set
a baseline width (e.g., 100%) first, then add vendor-prefixed fallback
(-webkit-fill-available) and finally width: stretch, or wrap the
-webkit-fill-available/ stretch assignments inside `@supports` blocks; update the
CSS rule for the img selector in ConfigArchitecture.vue so the order/@supports
ensures Safari and older browsers get the fallback while modern browsers use
stretch.

---

Outside diff comments:
In `@packages/home/src/views/tiny-vue-home/components/ComponentShowcase.vue`:
- Line 122: The class name "feature-text-title" is unused/undefined; remove it
from the two JSX/HTML elements that reference it (the div with class "title
feature-text-title title-number" and the other occurrence at the second title
block) so they only use the remaining valid classes (e.g., "title" and
"title-number"/other existing classes) and update any tests or snapshots if they
depend on that exact class name; search for "feature-text-title" to ensure both
occurrences are removed.

---

Nitpick comments:
In `@packages/home/src/views/tiny-vue-home/common.less`:
- Around line 125-127: Remove the stray leading space and restore the same
indentation for the .mb-40 selector so it matches its sibling selectors (.mb-60,
.mb-70, .mb-100); also normalize whitespace in this stylesheet by adding a space
after the colon in the line-height declaration (change line-height:54px; to
line-height: 54px;) and by collapsing the double spaces after the colon in the
padding declarations (padding:  16px 32px 40px; and padding:  0px 32px; should
be padding: 16px 32px 40px; and padding: 0px 32px;).
- Around line 97-147: The file defines many ad-hoc spacing utilities
(.mt-20/.mt-40/.mt-60/.mt-70/.mt-100, .mb-40/.mb-60/.mb-70/.mb-100,
.pb-100/.pb-130, .pd-space, .pd-space-title) which should be consolidated into a
consistent spacing scale; introduce Less variables (e.g. `@space-1`: 8px;
`@space-2`: 16px; `@space-3`: 24px; `@space-4`: 40px; `@space-5`: 100px) or a mixin
(e.g. .space(`@top`; `@right`; `@bottom`; `@left`) { margin: `@top` `@right` `@bottom` `@left`;
}) and replace the literal values in the classes (.mt-*, .mb-*, .pb-*,
.pd-space, .pd-space-title) to use those variables/mixins so spacing is
consistent and easier to update across components.

In `@packages/home/src/views/tiny-vue-home/components/CrossPlatformFeature.vue`:
- Around line 30-32: Remove the legacy "description" class from the header <p>
in CrossPlatformFeature.vue so only the new "feature-sub-title" class is applied
(this prevents conflicting responsive rules like .description `@media` overrides).
Locate the paragraph element with class="description feature-sub-title" and
change it to only class="feature-sub-title"; repeat the same cleanup in
ThemeCustomization.vue (header <p> at the noted spot), ComponentShowcase.vue
(the paragraph around line where "feature-sub-title" appears), and
McpSection.vue to ensure no .description class remains alongside
.feature-sub-title.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 689faa5d-99d3-47b5-8424-36aa6aceff55

📥 Commits

Reviewing files that changed from the base of the PR and between b87298d and 321eb17.

📒 Files selected for processing (6)

• packages/home/src/views/tiny-vue-home/common.less
• packages/home/src/views/tiny-vue-home/components/ComponentShowcase.vue
• packages/home/src/views/tiny-vue-home/components/ConfigArchitecture.vue
• packages/home/src/views/tiny-vue-home/components/CrossPlatformFeature.vue
• packages/home/src/views/tiny-vue-home/components/McpSection.vue
• packages/home/src/views/tiny-vue-home/components/ThemeCustomization.vue