docs: 📖 更新 集成 相关文档和部分 Style

docs/.vitepress/config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'vitepress'
 import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
 
 import { qq } from '../public/icon'
+import { version } from '../../package.json'
 import vite from './vite.config'
 
 const GUIDES: DefaultTheme.NavItemWithLink[] = [
@@ -18,6 +19,11 @@ const FEATURE: DefaultTheme.NavItemWithLink[] = [
   { text: '组合变量(CombosVars)', link: '/feature/combosVars' },
 ]
 
+const VERSION: DefaultTheme.NavItemWithLink[] = [
+  { text: '发布日志', link: 'https://github.com/claxjs/ucv/releases' },
+  { text: '参与贡献', link: 'https://github.com/claxjs/ucv/blob/main/.github/CONTRIBUTING.md' },
+]
+
 const INTEGRATION: DefaultTheme.NavItemWithLink[] = [
   { text: 'Uno', link: '/integration/uno' },
   { text: 'Tailwind', link: '/integration/tailwind' },
@@ -27,6 +33,7 @@ const Nav: DefaultTheme.NavItem[] = [
   { text: '指南', items: GUIDES },
   { text: '功能', items: FEATURE },
   { text: '集成', items: INTEGRATION },
+  { text: `v${version}`, items: VERSION },
 ]
 
 const SidebarGuide: DefaultTheme.SidebarItem[] = [
@@ -54,15 +61,29 @@ export default defineConfig({
 
   themeConfig: {
     logo: '/logo.svg',
+
     search: {
       provider: 'local',
       options: {
         translations: {
           button: {
             buttonText: '搜索文档',
+            buttonAriaLabel: '搜索文档',
+          },
+          modal: {
+            resetButtonTitle: '清除查询',
+            noResultsText: '找不到结果',
+            backButtonTitle: '返回',
+            displayDetails: '显示详情',
+            footer: {
+              selectText: '选择',
+              navigateText: '切换',
+              closeText: '关闭',
+            },
           },
         },
       },
+
     },
 
     nav: Nav,
@@ -72,13 +93,31 @@ export default defineConfig({
       { icon: { svg: qq }, link: 'https://qm.qq.com/q/4c3Sn0R98Y' },
     ],
 
+    returnToTopLabel: '回到顶部',
+    sidebarMenuLabel: '菜单',
+    darkModeSwitchLabel: '主题',
+    lightModeSwitchTitle: '切换到浅色模式',
+    darkModeSwitchTitle: '切换到深色模式',
+
+    outline: {
+      label: '页面导航',
+    },
+
     sidebar: Sidebar,
 
     editLink: {
       pattern: 'https://github.com/claxjs/ucv/edit/main/docs/:path',
       text: '对本页提出修改建议',
     },
 
+    lastUpdated: {
+      text: '最后更新于',
+      formatOptions: {
+        dateStyle: 'short',
+        timeStyle: 'medium',
+      },
+    },
+
     docFooter: {
       prev: '上一页',
       next: '下一页',

docs/.vitepress/theme/styles.css

@@ -17,12 +17,3 @@
   --vp-c-brand-soft: var(--vp-u-green-soft);
 }
 
-/**
- * Component: Home
- * -------------------------------------------------------------------------- */
-:root {
-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: linear-gradient(292deg, var(--vp-u-green-1), var(--vp-u-green-2));
-  --vp-home-hero-image-background-image: linear-gradient(to right, #4CAF50 10%, #8BC34A);
-  --vp-home-hero-image-filter: blur(100px);
-}

docs/integration/tailwind.md

@@ -1,3 +1,25 @@
 # Tailwind
 
+配合 `TailwindCSS` 使用 `ucv`
+
+## 安装
+
+::: code-group
+
+```sh [pnpm]
+pnpm add @claxjs/ucv
+```
+
+```sh [npm]
+npm install @claxjs/ucv
+```
+
+```sh [yarn]
+yarn add @claxjs/ucv
+```
+
+:::
+
+## 使用
+
 😍 无需做任何配置，无论什么文件下都可以使用

docs/integration/uno.md

@@ -1,17 +1,39 @@
 # Uno
 
+配合 `UnoCSS` 使用 `ucv`
+
+## 安装
+
+::: code-group
+
+```sh [pnpm]
+pnpm add @claxjs/ucv
+```
+
+```sh [npm]
+npm install @claxjs/ucv
+```
+
+```sh [yarn]
+yarn add @claxjs/ucv
+```
+
+:::
+
+## 使用
+
 由于 `uno` 是经过构建工具来提取工具类的，默认只支持 `.jsx`, `.tsx`, `.vue`, `.md`, `.html`, `.svelte`, `.astro`
 
 若你想在 `ts` 或者 `js` 文件中使用 `ucv`，有两种方法，局部或全局设定，选择你觉得舒服的😁
 
-## 局部(😋推荐)
+### 局部(😋推荐)
 
 在单个文件中使用 `@unocss-include` 注释，可以让 `uno` 自动识别工具类
 
 在 `当前文件内`，只需要注释一次，任意位置的 `工具类` 都会生效
 
 ```ts{3}
-// 文件名: button.(ts|js|任意类型)
+// 文件: *.(ts|js|任意类型)
 
 // @unocss-include
 export const ButtonClax = ucv({
@@ -21,18 +43,21 @@ export const ButtonClax = ucv({
 })
 ```
 
-## 全局
+OK，在你想要的位置添加 `@unocss-include` 注释，然后使用 `ucv` 测试一下吧！
+
+### 全局
 
 如果你觉得手动注释太麻烦，可以通过修改 `uno.config.*` 来让指定文件接受识别
 
-```ts{8,11}
-// 文件名: uno.config.*
+```ts{9,12}
+// 文件: uno.config.*
 
 export default defineConfig({
   content: {
     pipeline: {
       include: [
-        // 这一行是默认值，我不太能理解为什么要这么设计，与默认值合并不是更好的做法？
+        // 这一行必须填入！
+        // PS: 我不太能理解为什么要这么设计，与默认值合并不是更好的做法？
         /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
 
         // 使 src 文件夹下的所有 js | ts 文件都接受识别
@@ -42,3 +67,5 @@ export default defineConfig({
   },
 })
 ```
+
+现在你可以在任意 `js` 或 `ts` 内使用 `ucv` 了，enjoy 💜