docs: update docs

packages/docs/.vitepress/config.mts

@@ -7,7 +7,7 @@ export default defineConfig({
   title: 'vue-create-print',
   description: 'web print for Vue2 and Vue3',
   head: [
-    ['link', { rel: 'icon', type: 'image/x-icon', href: '/vue-create-print/logo.svg' }],
+    ['link', { rel: 'icon', type: 'image/x-icon', href: './logo.svg' }],
   ],
   locales: {
     root: {
@@ -50,5 +50,5 @@ export default defineConfig({
       md.use(componentPreview)
     },
   },
-  vite: viteConfig as any,
+  vite: viteConfig,
 })

packages/docs/.vitepress/config/viteConfig.ts

@@ -1,7 +1,6 @@
 import UnoCSS from 'unocss/vite'
-import type { UserConfig } from 'vite'
 /** vite配置在vitepress存在类型对不上, 暂时采用any解决 */
-const config: UserConfig = {
+const config: any = {
   plugins: [
     UnoCSS(),
   ],

packages/docs/.vitepress/theme/index.ts

@@ -2,8 +2,8 @@ import type { App } from 'vue'
 import DefaultTheme from 'vitepress/theme'
 import { ElementPlusContainer } from '@vitepress-demo-preview/component'
 import '@vitepress-demo-preview/component/dist/style.css'
-import svgLogo from './Components/svgLogo.vue'
 import 'virtual:uno.css'
+import './styles/var.css'
 
 interface EnhanceApp {
   app: App
@@ -12,6 +12,5 @@ export default {
   ...DefaultTheme,
   enhanceApp({ app }: EnhanceApp) {
     app.component('demoPreview', ElementPlusContainer)
-    app.component('svgLogo', svgLogo)
   },
 }

packages/docs/.vitepress/theme/styles/var.css

@@ -0,0 +1,33 @@
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-c-brand-1: rgb(8, 168, 97);
+  --vp-c-brand-2: rgba(8, 168, 97, .8);
+  --vp-c-brand-3: rgba(8, 168, 97, .6);
+  --vp-c-brand-soft: rgba(8, 168, 97, .2);
+  --vp-c-default-3: rgba(8, 168, 97, .2);
+  --vp-c-default-2: rgba(8, 168, 97, .1);
+}
+
+:root {
+  --vp-button-brand-border: var(--vp-c-brand-soft);
+  --vp-button-brand-text: var(--vp-c-text-dark-1);
+  --vp-button-brand-bg: var(--vp-c-brand-1);
+  --vp-button-brand-hover-border: var(--vp-c-brand-soft);
+  --vp-button-brand-hover-text: var(--vp-c-text-dark-1);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-soft);
+  --vp-button-brand-active-border: var(--vp-c-brand-soft);
+  --vp-button-brand-active-text: var(--vp-c-text-dark-1);
+  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+}
+
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #35495e -80%, #08a861);
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #41b88380 30%, #ccf3e1);
+  --vp-home-hero-image-filter: blur(100px);
+}
+

packages/docs/api/index.md

@@ -18,7 +18,7 @@
 | **`onBeforePrint?`** | `() => Promise<any>` | 在打印前触发的回调函数。这可用于在打印之前更改页面上的内容，作为打印查询的替代方法，或与 `@media print` 查询结合使用 |
 | **`onPrintError?`** | `(errorLocation: 'onBeforePrint' \| 'print', error: Error) => void` | 如果打印错误严重到足以导致打印无法继续，则调用。目前仅限于 `onBeforePrint` 和 `print` 中的 **Promise** 拒绝。使用此选项可尝试再次打印。`errorLocation` 会显示处于那个回调函数内 |
 | **`pageStyle?`** | `string` | `vue-create-print` 设置了一些基本样式来帮助改进页面打印，特别是删除大多数浏览器添加的页眉和页脚。使用它来覆盖这些样式并提供您自己的样式 |
-| **`preserveAfterPrint?`** | `boolean` | 打印后删除 iframe,**`onAfterPrint`** 将在删除 iframe 之前运行  |
+| **`preserveAfterPrint?`** | `boolean` | 打印后删除 iframe,**`preserveAfterPrint`** 将在删除 iframe 之前运行  |
 | **`print?`** | `(iframe: HTMLIFrameElement) => Promise<void>` | 使用此函数代替 `window.print` 来打印内容。使用它在非浏览器环境（如 Electron）中打印 |
 | **`suppressErrors?`** | `boolean` | 默认值为 `false`, 传 `true`将阻止`console`记录错误 |
 

packages/docs/demo/component.demo.vue

@@ -28,7 +28,7 @@ function handlePrintError(errorLocation: 'onBeforePrint' | 'print', err: Error)
     >
       <template #default="{ handlePrint }">
         <div>
-          <button class=" px-2 bg-blue-7 hover:bg-blue-5  text-white rounded mb-2" @click="handlePrint">
+          <button class=" px-2 bg-green-5 hover:bg-green-3 rounded mb-2" @click="handlePrint">
             打 印
           </button>
         </div>
@@ -39,10 +39,10 @@ function handlePrintError(errorLocation: 'onBeforePrint' | 'print', err: Error)
           <img alt="vue-create-print logo" src="/logo.svg" width="200">
           <div>{{ num }}</div>
           <div class="flex">
-            <button class="px-2 bg-blue-7 hover:bg-blue-5  text-white rounded" @click="num++">
+            <button class="px-2 bg-green-5 hover:bg-green-3 rounded" @click="num++">
               +
             </button>
-            <button class="ml-2 px-2 bg-blue-7 hover:bg-blue-5  text-white rounded" @click="num--">
+            <button class="ml-2 px-2 bg-green-5 hover:bg-green-3 rounded" @click="num--">
               -
             </button>
           </div>

packages/docs/demo/fnc.demo.vue

@@ -26,7 +26,7 @@ const handlePrint = createPrint({
 <template>
   <div>
     <div>
-      <button class="px-2 bg-blue-7 hover:bg-blue-5  text-white rounded mb-2" @click="handlePrint">
+      <button class="px-2 bg-green-5 hover:bg-green-3 rounded mb-2" @click="handlePrint">
         打 印
       </button>
     </div>
@@ -35,10 +35,10 @@ const handlePrint = createPrint({
       <img alt="vue-create-print logo" src="/logo.svg" width="200">
       <div>{{ num }}</div>
       <div class="flex">
-        <button class="px-2 bg-blue-7 hover:bg-blue-5  text-white rounded" @click="num++">
+        <button class="px-2 bg-green-5 hover:bg-green-3 rounded" @click="num++">
           +
         </button>
-        <button class="ml-2 px-2 bg-blue-7 hover:bg-blue-5  text-white rounded" @click="num--">
+        <button class="ml-2 px-2 bg-green-5 hover:bg-green-3 rounded" @click="num--">
           -
         </button>
       </div>

packages/docs/en/api/index.md

@@ -16,7 +16,7 @@ The API for function-based and component-based usage have the same parameters, b
 | **`onBeforePrint?`** | `() => Promise<void>` | Callback function that triggers before print. This can be used to change the content on the page before printing as an alternative to, or in conjunction with `@media print` queries |
 | **`onPrintError?`** | `(errorLocation: 'onBeforePrint' \| 'print', error: Error) => void` | Called if there is a printing error serious enough that printing cannot continue. Currently limited to Promise rejections in `onBeforePrint`, and `print`. Use this to attempt to print again. `errorLocation` will tell you where the Promise was rejected |
 | **`pageStyle?`** | `string` | `react-to-print` sets some basic styles to help improve page printing, notably, removing the header and footer that most browsers add. Use this to override these styles and provide your own |
-| **`preserveAfterPrint?`** | `boolean` | Remove the iframe after printing. NOTE: `onAfterPrint` will run before the iframe is removed |
+| **`preserveAfterPrint?`** | `boolean` | Remove the iframe after printing. NOTE: `preserveAfterPrint` will run before the iframe is removed |
 | **`print?`** | `(iframe: HTMLIFrameElement) => Promise<void>` | If passed, this function will be used instead of `window.print` to print the content. Use this to print in non-browser environments such as Electron |
 | **`suppressErrors?`** | `boolean` | When passed, prevents `console` logging of errors |
 

packages/docs/en/demo/component.demo.vue

@@ -28,7 +28,7 @@ function handlePrintError(errorLocation: 'onBeforePrint' | 'print', err: Error)
     >
       <template #default="{ handlePrint }">
         <div>
-          <button class=" px-2  bg-blue-7 hover:bg-blue-5  text-white rounded mb-2" @click="handlePrint">
+          <button class=" px-2 bg-green-5 hover:bg-green-3 rounded mb-2" @click="handlePrint">
             print
           </button>
         </div>
@@ -39,10 +39,10 @@ function handlePrintError(errorLocation: 'onBeforePrint' | 'print', err: Error)
           <img alt="vue-create-print logo" src="/logo.svg" width="200">
           <div>{{ num }}</div>
           <div class="flex">
-            <button class="px-2 bg-blue-7 hover:bg-blue-5  text-white rounded" @click="num++">
+            <button class="px-2 bg-green-5 hover:bg-green-3 rounded" @click="num++">
               +
             </button>
-            <button class="ml-2 px-2 bg-blue-7 hover:bg-blue-5  text-white rounded" @click="num--">
+            <button class="ml-2 px-2 bg-green-5 hover:bg-green-3 rounded" @click="num--">
               -
             </button>
           </div>

packages/docs/en/demo/fnc.demo.vue

@@ -26,7 +26,7 @@ const handlePrint = createPrint({
 <template>
   <div>
     <div>
-      <button class="px-2 bg-blue-7 hover:bg-blue-5  text-white rounded mb-2" @click="handlePrint">
+      <button class="px-2 bg-green-5 hover:bg-green-3 rounded mb-2" @click="handlePrint">
         print
       </button>
     </div>
@@ -35,10 +35,10 @@ const handlePrint = createPrint({
       <img alt="vue-create-print logo" src="/logo.svg" width="200">
       <div>{{ num }}</div>
       <div class="flex">
-        <button class="px-2 bg-blue-7 hover:bg-blue-5  text-white rounded" @click="num++">
+        <button class="px-2 bg-green-5 hover:bg-green-3 rounded" @click="num++">
           +
         </button>
-        <button class="ml-2 px-2 bg-blue-7 hover:bg-blue-5  text-white rounded" @click="num--">
+        <button class="ml-2 px-2 bg-green-5 hover:bg-green-3 rounded" @click="num--">
           -
         </button>
       </div>