Skip to content

feat: 增加 UnoCSS 集成、input-number 样式文档优化、修复 vitepress 配置 ts 类型错误 #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vaebe merged 5 commits into from
Dec 16, 2025
Merged

feat: 增加 UnoCSS 集成、input-number 样式文档优化、修复 vitepress 配置 ts 类型错误 #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e24310e
feat(docs): 集成 UnoCSS
vaebe Dec 16, 2025
830116a
style(input-number): 组件样式优化
vaebe Dec 16, 2025
e262352
docs(input-number): 文档优化
vaebe Dec 16, 2025
d491c1e
docs: 修复 vitepress/theme/index.ts ts 类型错误
vaebe Dec 16, 2025
22fd854
docs: 修复 vitepress/theme/index.ts 类型错误
vaebe Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/ccui/ui/input-number/src/input-number.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@
border: 1px solid $ccui-form-control-line;
border-radius: $ccui-border-radius;
transition: all 0.3s;
overflow: hidden;

&:hover {
border-color: $ccui-primary;
Expand Down
90 changes: 45 additions & 45 deletions packages/docs/.vitepress/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,55 @@
import process from 'node:process'
import { fileURLToPath } from 'node:url'
import { demoPreviewPlugin } from '@vitepress-code-preview/plugin'
import { defineConfig } from 'vitepress'
import nav from './config/nav'
import sidebar from './config/sidebar'

export default ({ mode }) => {
const basePath = mode === 'development' ? '/' : '/ccui/'
const prod = !!process.env.NETLIFY

return {
base: basePath,
lang: 'zh-CN',
title: 'vue3-ccui',
description: 'vue3-ccui 组件库',
lastUpdated: true,
ignoreDeadLinks: true, // 忽略死链接
head: [
// 这里的路径没有被自动更改 手动更改路径
[
'link',
{ rel: 'icon', type: 'image/svg+xml', href: `${basePath}logo.svg` },
],
[
'link',
{
rel: 'stylesheet',
href: 'https://unpkg.com/vue3-ccui/theme/darkTheme.css',
},
],
export default defineConfig({
base: prod ? '/ccui/' : '/',
lang: 'zh-CN',
title: 'vue3-ccui',
description: 'vue3-ccui 组件库',
lastUpdated: true,
ignoreDeadLinks: true, // 忽略死链接
head: [
// 这里的路径没有被自动更改 手动更改路径
[
'link',
{ rel: 'icon', type: 'image/svg+xml', href: `${prod ? '/ccui/' : '/'}logo.svg` },
],
markdown: {
config(md) {
const docRoot = fileURLToPath(new URL('../', import.meta.url))
md.use(demoPreviewPlugin, { docRoot })
[
'link',
{
rel: 'stylesheet',
href: 'https://unpkg.com/vue3-ccui/theme/darkTheme.css',
},
],
Comment on lines +23 to +29
Copy link

@coderabbitai coderabbitai bot Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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.

Suggested change
[
'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.

],
markdown: {
config(md) {
const docRoot = fileURLToPath(new URL('../', import.meta.url))
md.use(demoPreviewPlugin, { docRoot })
},
themeConfig: {
sidebar,
nav,
logo: '/logo.svg',
algolia: {
appId: 'K0NNJA38K6',
apiKey: '0b6d20552d2073390d2bbb0a84fb49dd',
indexName: 'ccui',
},
socialLinks: [
{ icon: 'github', link: 'https://github.com/vaebe/ccui.git' },
],
outlineTitle: '快速前往',
footer: {
message: 'Released under the MIT License.',
copyright: 'Copyright © 2022-present vaebe',
},
},
themeConfig: {
sidebar,
nav,
logo: '/logo.svg',
algolia: {
appId: 'K0NNJA38K6',
apiKey: '0b6d20552d2073390d2bbb0a84fb49dd',
indexName: 'ccui',
},
socialLinks: [
{ icon: 'github', link: 'https://github.com/vaebe/ccui.git' },
],
outlineTitle: '快速前往',
footer: {
message: 'Released under the MIT License.',
copyright: 'Copyright © 2022-present vaebe',
},
}
}
},
})
4 changes: 3 additions & 1 deletion packages/docs/.vitepress/theme/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import type { EnhanceAppContext } from 'vitepress'
import DemoPreview, { useComponents } from '@vitepress-code-preview/container'
import DefaultTheme from 'vitepress/theme'
import ccui from 'vue3-ccui/ui/vue-ccui'
import './styles/index.css'
import '@vitepress-code-preview/container/dist/style.css'
import 'virtual:uno.css'

export default {
...DefaultTheme,
enhanceApp(ctx) {
enhanceApp(ctx: EnhanceAppContext) {
DefaultTheme.enhanceApp(ctx)

ctx.app.use(ccui)
Expand Down
158 changes: 47 additions & 111 deletions packages/docs/components/input-number/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,33 +13,20 @@
:::demo

```vue
<script>
<script setup>
import { defineComponent, ref } from 'vue'

export default defineComponent({
setup() {
const value1 = ref(0)

return {
value1
}
}
})
const value = ref(0)
</script>

<template>
<div class="input-number-demo">
<c-input-number v-model="value1" placeholder="请输入数字" />
<p>当前值：{{ value1 }}</p>
<div>
<c-input-number v-model="value" placeholder="请输入数字" />
<p>当前值：{{ value }}</p>
</div>
</template>

<style>
.input-number-demo {
display: flex;
flex-direction: column;
gap: 10px;
}
</style>
```

Expand All @@ -52,24 +39,14 @@ export default defineComponent({
:::demo

```vue
<script>
<script setup>
import { defineComponent, ref } from 'vue'

export default defineComponent({
setup() {
const value2 = ref(10)

return {
value2
}
}
})
const value = ref(10)
</script>

<template>
<div class="input-number-demo">
<c-input-number v-model="value2" disabled />
</div>
<c-input-number v-model="value" disabled />
</template>
```

Expand All @@ -82,23 +59,15 @@ export default defineComponent({
:::demo

```vue
<script>
<script setup>
import { defineComponent, ref } from 'vue'

export default defineComponent({
setup() {
const value3 = ref(1)

return {
value3
}
}
})
const value = ref(1)
</script>

<template>
<div class="input-number-demo">
<c-input-number v-model="value3" :min="1" :max="10" />
<div>
<c-input-number v-model="value" :min="1" :max="10" />
<p>范围：1 - 10</p>
</div>
</template>
Expand All @@ -113,23 +82,15 @@ export default defineComponent({
:::demo

```vue
<script>
<script setup>
import { defineComponent, ref } from 'vue'

export default defineComponent({
setup() {
const value4 = ref(0)

return {
value4
}
}
})
const value = ref(0)
</script>

<template>
<div class="input-number-demo">
<c-input-number v-model="value4" :step="2" />
<div>
<c-input-number v-model="value" :step="2" />
<p>步长：2</p>
</div>
</template>
Expand All @@ -144,23 +105,15 @@ export default defineComponent({
:::demo

```vue
<script>
<script setup>
import { defineComponent, ref } from 'vue'

export default defineComponent({
setup() {
const value5 = ref(1.00)

return {
value5
}
}
})
const value = ref(1.00)
</script>

<template>
<div class="input-number-demo">
<c-input-number v-model="value5" :precision="2" :step="0.1" />
<div>
<c-input-number v-model="value" :precision="2" :step="0.1" />
<p>精度：2 位小数</p>
</div>
</template>
Expand All @@ -175,25 +128,17 @@ export default defineComponent({
:::demo

```vue
<script>
<script setup>
import { defineComponent, ref } from 'vue'

export default defineComponent({
setup() {
const value6 = ref(0)

return {
value6
}
}
})
const value = ref(0)
</script>

<template>
<div class="input-number-demo">
<c-input-number v-model="value6" size="lg" placeholder="大尺寸" />
<c-input-number v-model="value6" size="md" placeholder="中等尺寸" />
<c-input-number v-model="value6" size="sm" placeholder="小尺寸" />
<div class="flex flex-col gap-4">
<c-input-number v-model="value" size="lg" placeholder="大尺寸" />
<c-input-number v-model="value" size="md" placeholder="中等尺寸" />
<c-input-number v-model="value" size="sm" placeholder="小尺寸" />
</div>
</template>
```
Expand All @@ -207,31 +152,30 @@ export default defineComponent({
:::demo

```vue
<script>
<script setup>
import { defineComponent, ref } from 'vue'

export default defineComponent({
setup() {
const value7 = ref(0)

return {
value7
}
}
})
const value = ref(0)
</script>

<template>
<div class="input-number-demo">
<c-input-number v-model="value7" controls-position="both" placeholder="两侧控制" />
<div>
<c-input-number v-model="value7" size="lg" controls-position="right" placeholder="右侧控制" />
<div>
<p class="mt-0!">
两侧控制
</p>
<c-input-number v-model="value" controls-position="both" placeholder="两侧控制" />

<p>右侧控制</p>
<div class="flex gap-4">
<c-input-number v-model="value" size="lg" controls-position="right" placeholder="右侧控制" />

<c-input-number v-model="value7" controls-position="right" placeholder="右侧控制" />
<c-input-number v-model="value" controls-position="right" placeholder="右侧控制" />

<c-input-number v-model="value7" size="sm" controls-position="right" placeholder="右侧控制" />
<c-input-number v-model="value" size="sm" controls-position="right" placeholder="右侧控制" />
</div>
<c-input-number v-model="value7" :controls="false" placeholder="无控制按钮" />

<p>无控制按钮</p>
<c-input-number v-model="value" :controls="false" placeholder="无控制按钮" />
</div>
</template>
```
Expand All @@ -245,24 +189,16 @@ export default defineComponent({
:::demo

```vue
<script>
<script setup>
import { defineComponent, ref } from 'vue'

export default defineComponent({
setup() {
const value8 = ref(undefined)

return {
value8
}
}
})
const value = ref(undefined)
</script>

<template>
<div class="input-number-demo">
<c-input-number v-model="value8" allow-empty placeholder="允许空值" />
<p>当前值：{{ value8 }}</p>
<div>
<c-input-number v-model="value" allow-empty placeholder="允许空值" />
<p>当前值：{{ value }}</p>
</div>
</template>
```
Expand Down
1 change: 1 addition & 0 deletions packages/docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.1",
"@vitejs/plugin-vue-jsx": "^5.1.1",
"unocss": "^66.5.10",
"vite": "^7.1.12",
"vite-svg-loader": "^5.1.0",
"vitepress": "^1.6.4"
Expand Down
5 changes: 5 additions & 0 deletions packages/docs/uno.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { defineConfig } from 'unocss'

export default defineConfig({
// ...UnoCSS options
})
Comment on lines +1 to +5
Copy link

@coderabbitai coderabbitai bot Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

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.

Loading