feat: 增加 UnoCSS 集成、input-number 样式文档优化、修复 vitepress 配置 ts 类型错误 #15
Conversation
WalkthroughUpdates documentation infrastructure and components: adds Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
vaebe
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
packages/docs/components/input-number/index.md (1)
16-20: Remove unuseddefineComponentimport.The
defineComponentfunction is imported but never used in any of the script setup blocks. This import is unnecessary with script setup syntax.Apply this pattern to all affected demo blocks:
<script setup> -import { defineComponent, ref } from 'vue' +import { ref } from 'vue' const value = ref(0) </script>Also applies to: 42-46, 62-66, 85-89, 108-112, 131-135, 155-159, 192-196
packages/docs/.vitepress/config.ts (1)
8-8: Consider more portable environment detection.The configuration now depends on
process.env.NETLIFYto determine production mode, which ties the build to Netlify-specific deployment. This reduces portability if you later deploy to other platforms (Vercel, GitHub Pages, etc.).Consider using Vite's standard
NODE_ENVorMODEfor better portability:-const prod = !!process.env.NETLIFY +const prod = process.env.NODE_ENV === 'production'Or accept a mode parameter if VitePress provides it:
export default defineConfig(({ mode }) => ({ base: mode === 'production' ? '/ccui/' : '/', // ... rest of config }))Also applies to: 11-11, 21-21
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
packages/ccui/ui/input-number/src/input-number.scss(1 hunks)packages/docs/.vitepress/config.ts(1 hunks)packages/docs/.vitepress/theme/index.ts(1 hunks)packages/docs/components/input-number/index.md(8 hunks)packages/docs/package.json(1 hunks)packages/docs/uno.config.ts(1 hunks)packages/docs/vite.config.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
packages/docs/vite.config.ts (1)
packages/cli/commands/build.js (1)
vueJsx(6-6)
🔇 Additional comments (6)
packages/ccui/ui/input-number/src/input-number.scss (1)
106-106: LGTM! Prevents visual overflow.The
overflow: hiddenproperty appropriately clips any content that extends beyond the input-number container boundaries, preventing potential layout issues.packages/docs/.vitepress/theme/index.ts (2)
1-1: LGTM! Improves TypeScript type safety.The type annotation for the
enhanceAppparameter and the import ofEnhanceAppContextenhance type safety and developer experience.Also applies to: 11-11
7-7: LGTM! Correctly integrates UnoCSS styles.The
virtual:uno.cssimport is correctly placed last in the import order, ensuring UnoCSS utility classes can override component styles as expected.packages/docs/vite.config.ts (1)
3-3: LGTM! Correctly integrates UnoCSS plugin.The UnoCSS Vite plugin is properly imported and added to the plugins array. The plugin order is appropriate with UnoCSS positioned last.
Also applies to: 9-9
packages/docs/components/input-number/index.md (1)
138-138: No verification needed—UnoCSS utility classes are supported by default.Standard UnoCSS presets (presetWind3/presetUno) include Tailwind CSS compatible utilities, so utilities like
flex,flex-col,gap-4, andmt-0!are automatically supported in any properly configured UnoCSS setup. The documentation uses standard Tailwind utilities that require no special configuration beyond including a basic preset.packages/docs/package.json (1)
38-38: UnoCSS ^66.5.10 is valid, current, and has no known vulnerabilities.The latest version of UnoCSS is 66.5.10, published 7 days ago. The specified version constraint is both valid and up-to-date. No known CVEs or security advisories affect UnoCSS at this version or any recent release in the 66.x series.
| [ | ||
| 'link', | ||
| { | ||
| rel: 'stylesheet', | ||
| href: 'https://unpkg.com/vue3-ccui/theme/darkTheme.css', | ||
| }, | ||
| ], |
There was a problem hiding this comment.
Pin version for external CDN stylesheet.
The external stylesheet link to unpkg uses an unpinned version, which could lead to unexpected style changes or breakage if the package is updated or unpkg experiences downtime.
Apply this diff to pin to a specific version:
[
'link',
{
rel: 'stylesheet',
- href: 'https://unpkg.com/vue3-ccui/theme/darkTheme.css',
+ href: 'https://unpkg.com/vue3-ccui@1.2.2/theme/darkTheme.css',
},
],Alternatively, consider bundling the dark theme CSS locally to avoid external dependencies:
[
'link',
{
rel: 'stylesheet',
- href: 'https://unpkg.com/vue3-ccui/theme/darkTheme.css',
+ href: `${prod ? '/ccui/' : '/'}darkTheme.css`,
},
],This would require copying the darkTheme.css to your public directory.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| [ | |
| 'link', | |
| { | |
| rel: 'stylesheet', | |
| href: 'https://unpkg.com/vue3-ccui/theme/darkTheme.css', | |
| }, | |
| ], | |
| [ | |
| 'link', | |
| { | |
| rel: 'stylesheet', | |
| href: 'https://unpkg.com/vue3-ccui@1.2.2/theme/darkTheme.css', | |
| }, | |
| ], |
🤖 Prompt for AI Agents
In packages/docs/.vitepress/config.ts around lines 23 to 29, the linked external
stylesheet uses an unpinned unpkg URL which can introduce breaking changes;
update the href to a specific versioned URL (for example include the
package@x.y.z path) so the CDN link is pinned to a release, or instead copy
darkTheme.css into the docs public/static assets and change the href to the
local relative path to serve the CSS from the repo; ensure whichever approach
you choose is reflected in the config and that the chosen version or local file
is committed.
| import { defineConfig } from 'unocss' | ||
|
|
||
| export default defineConfig({ | ||
| // ...UnoCSS options | ||
| }) |
There was a problem hiding this comment.
Add UnoCSS preset configuration.
The UnoCSS configuration is empty and lacks preset definitions. The utility classes used throughout the documentation (such as flex, gap-4, mt-0!) require a preset like @unocss/preset-uno or @unocss/preset-wind to function properly.
Apply this diff to add a default preset:
import { defineConfig } from 'unocss'
+import presetUno from '@unocss/preset-uno'
export default defineConfig({
- // ...UnoCSS options
+ presets: [
+ presetUno(),
+ ],
})Alternatively, if you prefer Tailwind-compatible utilities:
import { defineConfig } from 'unocss'
import presetWind from '@unocss/preset-wind'
export default defineConfig({
presets: [
presetWind(),
],
})Note: You may need to install the preset package if not already included with the main unocss package.
🤖 Prompt for AI Agents
In packages/docs/uno.config.ts around lines 1 to 5, the UnoCSS config is empty
and missing a preset, so utility classes like flex/gap-4/mt-0! won't work;
update the file to add a preset (e.g., @unocss/preset-uno or
@unocss/preset-wind) by importing the chosen preset and adding it to the presets
array in defineConfig, and if the preset package is not installed add it to
package.json/dev dependencies and run the installer before building.
Summary by CodeRabbit
New Features
Bug Fixes
Documentation
Chores
✏️ Tip: You can customize this high-level summary in your review settings.