docs: update docs

docs/.vuepress/themes/components/CanIUseConfig.vue

@@ -9,25 +9,25 @@ interface Feature {
   value: string
 }
 
-const api = 'https://api.caniuse.bitsofco.de/features'
+const api = 'https://api.pengzhanbo.cn/caniuse/features'
 
 const features = useLocalStorage('caniuse-features', [] as Feature[])
 onMounted(async () => {
   const res = await fetch(api)
   const data = await res.json()
-  features.value = data?.map((item: any) => ({ label: item.title, value: item.id })) || []
+  features.value = data || features.value || []
 })
 
 const browserVersionList = ref([
-  { label: '未来版本 （当前版本 + 3）', value: 3, checked: false },
+  { label: '新版本（当前版本 + 3）', value: 3, checked: false },
-  { label: '未来版本 （当前版本 + 2）', value: 2, checked: false },
+  { label: '新版本（当前版本 + 2）', value: 2, checked: false },
-  { label: '未来版本 （当前版本 + 1）', value: 1, checked: false },
+  { label: '新版本（当前版本 + 1）', value: 1, checked: false },
   { label: '当前版本', value: 0, disabled: true, checked: true },
-  { label: '过去版本 （当前版本 - 1）', value: -1, checked: false },
+  { label: '旧版本（当前版本 - 1）', value: -1, checked: false },
-  { label: '过去版本 （当前版本 - 2）', value: -2, checked: false },
+  { label: '旧版本（当前版本 - 2）', value: -2, checked: false },
-  { label: '过去版本 （当前版本 - 3）', value: -3, checked: false },
+  { label: '旧版本（当前版本 - 3）', value: -3, checked: false },
-  { label: '过去版本 （当前版本 - 4）', value: -4, checked: false },
+  { label: '旧版本（当前版本 - 4）', value: -4, checked: false },
-  { label: '过去版本 （当前版本 - 5）', value: -5, checked: false },
+  { label: '旧版本（当前版本 - 5）', value: -5, checked: false },
 ])
 
 const input = ref('')
@@ -77,7 +77,7 @@ const output = computed(() => {
   if (embedType.value)
     content += ` ${embedType.value}`
 
-  if (browserVersion.value)
+  if (browserVersion.value && !embedType.value)
     content += `{${browserVersion.value}}`
 
   content += ']('
@@ -131,7 +131,7 @@ function render() {
           </label>
         </div>
       </div>
-      <div class="caniuse-form-item">
+      <div v-if="!embedType" class="caniuse-form-item">
         <label for="browserVersion">浏览器版本：</label>
         <div class="caniuse-browser-version">
           <label v-for="item in browserVersionList" :key="item.value">
@@ -143,16 +143,16 @@ function render() {
           </label>
         </div>
       </div>
+      <div class="caniuse-render">
+        <button class="caniuse-render-button" type="button" :disabled="!selected" @click="render">
+          生成预览
+        </button>
+      </div>
     </form>
     <div class="caniuse-output">
       <h4>输出：</h4>
       <CodeViewer lang="md" :content="output" />
     </div>
-    <div class="caniuse-render">
-      <button class="caniuse-render-button" type="button" :disabled="!selected" @click="render">
-        生成预览
-      </button>
-    </div>
     <div v-html="rendered" />
   </div>
 </template>
@@ -160,8 +160,18 @@ function render() {
 <style scoped>
 .caniuse-config-wrapper form {
   padding: 20px;
+  margin: 0 -16px;
+  background-color: var(--vp-c-bg-safe);
   border: solid 1px var(--vp-c-divider);
   border-radius: 5px;
+  transition: var(--t-color);
+  transition-property: background border;
+}
+
+@media(min-width: 768px) {
+  .caniuse-config-wrapper form {
+    margin: 0;
+  }
 }
 
 .caniuse-form-item {
@@ -171,6 +181,10 @@ function render() {
   margin-bottom: 16px;
 }
 
+.caniuse-form-item:nth-child(3) {
+  align-items: baseline;
+}
+
 .feature-input {
   position: relative;
   flex: 1;
@@ -187,7 +201,11 @@ function render() {
 .feature-input__input {
   width: 100%;
   padding: 3px 40px 3px 16px;
+  font-size: 1em;
+  background-color: var(--vp-c-bg);
   border: solid 1px var(--vp-c-divider);
+  transition: var(--t-color);
+  transition-property: border background;
 }
 
 .feature-input__input:focus {
@@ -232,18 +250,31 @@ function render() {
 }
 
 .caniuse-browser-version {
-  display: flex;
   flex: 1;
   flex-wrap: wrap;
-  gap: 10px 30px;
   margin-left: 10px;
 }
 
+.caniuse-browser-version label {
+  display: block;
+  width: 100%;
+  cursor: pointer;
+}
+
+@media (min-width: 768px) {
+  .caniuse-browser-version {
+    display: flex;
+    gap: 10px 0;
+  }
+
+  .caniuse-browser-version label {
+    width: 50%;
+  }
+}
+
 .caniuse-render {
   display: flex;
   justify-content: flex-end;
-  padding-right: 20px;
-  padding-bottom: 20px;
 }
 
 .caniuse-render-button {
@@ -252,7 +283,7 @@ function render() {
   color: var(--vp-c-bg);
   background-color: var(--vp-c-brand-1);
   border-radius: 8px;
-  transition: background-color var(--t-color);
+  transition: background-color var(--t-color), color var(--t-color);
 }
 
 .caniuse-render-button:hover {
@@ -261,7 +292,6 @@ function render() {
 
 .caniuse-render-button[disabled] {
   cursor: not-allowed;
-  background-color: var(--vp-c-brand-1);
+  background-color: var(--vp-c-gray-1);
-  opacity: 0.5;
 }
 </style>

docs/.vuepress/themes/components/CodeViewer.vue

@@ -6,8 +6,20 @@ defineProps<{
 </script>
 
 <template>
-  <div :class="`language-${lang}`" :data-ext="lang">
+  <div :class="`code-viewer language-${lang}`" :data-ext="lang">
     <button class="copy-code-button" :data-lang="lang" />
     <pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code>{{ content }}</code></pre>
   </div>
 </template>
+
+<style>
+.code-viewer .copy-code-button {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .code-viewer .copy-code-button {
+    display: block;
+  }
+}
+</style>

docs/notes/theme/guide/markdown/进阶.md

@@ -108,6 +108,96 @@ github: :[tdesign:logo-github-filled]:
 修改大小：:[tdesign:logo-github-filled 36px]:
 修改大小颜色：:[tdesign:logo-github-filled 36px/#f00]:
 
+## “隐秘”文本
+
+有时候，你不想直接把文本内容毫无保留的展示出来，想要保留一些 隐秘性，
+可能是为了引起读者的好奇心，也可能纯粹是故意增加点阅读障碍，让文章变得更加有趣。
+
+为了满足这种小小的心思，主题提供了一个 **“隐秘”文本** 的有趣小功能。它看起来像这样：
+
+:::demo-wrapper
+你知道吗， =|鲁迅|= 曾说过：“ =|我没说过这句话！|= ” 令我醍醐灌顶，深受启发，浑身迸发出无可匹敌的
+力量！于是，=|我在床上翻了个身|= ！
+:::
+
+读者不能直接阅读到完整的内容，部分的内容被 “遮住”，需要鼠标悬停到内容上，才能看到被遮住的内容。
+
+### 配置
+
+该功能默认不启用，你需要在 `theme` 配置中启用。
+
+::: code-tabs
+@tab .vuepress/config.ts
+
+```ts
+export default defineUserConfig({
+  theme: plumeTheme({
+    plugins: {
+      markdownPower: {
+        plot: true,
+      },
+    }
+  })
+})
+```
+
+:::
+
+`markdownPower.plot` 支持传入 `boolean | PlotOptions` 类型
+
+```ts
+interface PlotOptions {
+  /**
+   * 是否启用 `=| |=`  markdown （该标记为非标准标记，脱离插件将不生效）
+   * 如果设置为 false， 则表示不启用该标记，只能使用 <Plot /> 组件
+   * @default true
+   */
+  tag?: boolean
+
+  /**
+   * 遮罩层颜色
+   */
+  mask?: string | { light: string, dark: string }
+
+  /**
+   * 文本颜色
+   */
+  color?: string | { light: string, dark: string }
+
+  /**
+   * 触发方式
+   *
+   * @default 'hover'
+   */
+  trigger?: 'hover' | 'click'
+}
+```
+
+### 语法
+
+```md
+=|需要隐秘的内容|=
+```
+
+如果不想使用 非标准的 `=||=` 标记语法，你可以将 `plot.tag` 设置为 `false` ，
+然后使用 [`<Plot />`](/guide/features/component/#plot) 组件替代。
+
+### 示例
+
+输入：
+
+```md
+你知道吗， =|鲁迅|= 曾说过：“ =|我没说过这句话！|= ” 令我醍醐灌顶，深受启发，浑身迸发出无可匹敌的
+力量！于是，=|我在床上翻了个身|= ！
+```
+
+输出：
+
+:::demo-wrapper
+你知道吗， =|鲁迅|= 曾说过：“ =|我没说过这句话！|= ” 令我醍醐灌顶，深受启发，浑身迸发出无可匹敌的
+力量！于是，=|我在床上翻了个身|= ！
+:::
+
 ## 选项组
 
 让你的 Markdown 文件支持选项卡。

docs/notes/theme/guide/介绍.md

@@ -17,7 +17,10 @@ VuePress 是一个 [静态站点生成器](https://en.wikipedia.org/wiki/Static_
 ::: tip
 本主题 基于 [vuepress-next](https://github.com/vuepress/vuepress-next), 目前处于 RC 阶段。
 
-功能和API 趋于稳定，但在未来的更新中仍有小概率出现破坏更改。
+当前主题 功能和 API 趋于稳定，但在未来的更新中仍有小概率出现破坏更改。
+
+如果您在使用过程中遇到问题，或者有新的想法，请在 [Issues](https://github.com/pengzhanbo/vuepress-theme-plume/issues) 里提出，
+也欢迎 通过 [PR](https://github.com/pengzhanbo/vuepress-theme-plume/pulls) 帮助完善主题。
 :::
 
 ## 优势

docs/notes/theme/guide/功能/组件.md

@@ -70,3 +70,55 @@ permalink: /guide/features/component/
 - home - <Iconify name="material-symbols:home" color="currentColor" size="1em" />
 - vscode - <Iconify name="skill-icons:vscode-dark" size="2em" />
 - twitter - <Iconify name="skill-icons:twitter" size="2em" />
+
+## `<Plot />`
+
+[“隐秘”文本](/guide/markdown/advance/#隐秘-文本) 组件。
+
+该组件默认不启用，你需要在 theme 配置中启用。
+
+::: code-tabs
+@tab .vuepress/config.ts
+
+```ts
+export default defineUserConfig({
+  theme: plumeTheme({
+    plugins: {
+      markdownPower: {
+        plot: true,
+      },
+    }
+  })
+})
+```
+
+:::
+
+### Props
+
+- `trigger`
+  - 类型：`'hover' | 'click'`
+  - 默认值：`'hover'`
+  - 描述：鼠标悬停触发，或者点击触发
+
+- `mask`
+  - 类型：`string | { light: string, dark: string }`
+  - 默认值：`#000`
+  - 描述：遮罩颜色
+
+- `color`
+  - 类型：`string | { light: string, dark: string }`
+  - 默认值：`#fff`
+  - 描述：文本颜色
+
+输入：
+
+```md
+- 鼠标悬停 - <Plot>悬停时可见</Plot>
+- 点击 - <Plot trigger="click">点击时可见</Plot>
+```
+
+输出：
+
+- 鼠标悬停 - <Plot>悬停时可见</Plot>
+- 点击 - <Plot trigger="click">点击时可见</Plot>

plugins/plugin-md-power/src/client/config.ts

@@ -7,6 +7,7 @@ import Bilibili from './components/Bilibili.vue'
 import Youtube from './components/Youtube.vue'
 import Replit from './components/Replit.vue'
 import CodeSandbox from './components/CodeSandbox.vue'
+import Plot from './components/Plot.vue'
 
 import '@internal/md-power/icons.css'
 
@@ -29,6 +30,9 @@ export default defineClientConfig({
     if (pluginOptions.codeSandbox)
       app.component('CodeSandboxViewer', CodeSandbox)
 
+    if (pluginOptions.plot)
+      app.component('Plot', Plot)
+
     if (__VUEPRESS_SSR__)
       return
 

plugins/plugin-md-power/src/node/plugin.ts

@@ -10,6 +10,7 @@ import { codepenPlugin } from './features/codepen.js'
 import { replitPlugin } from './features/replit.js'
 import { codeSandboxPlugin } from './features/codeSandbox.js'
 import { jsfiddlePlugin } from './features/jsfiddle.js'
+import { plotPlugin } from './features/plot.js'
 
 const __dirname = getDirname(import.meta.url)
 
@@ -76,6 +77,14 @@ export function markdownPowerPlugin(options: MarkdownPowerPluginOptions = {}): P
           // @[jsfiddle](user/id)
           md.use(jsfiddlePlugin)
         }
+
+        if (
+          options.plot === true
+          || (typeof options.plot === 'object' && options.plot.tag !== false)
+        ) {
+          // =|plot|=
+          md.use(plotPlugin)
+        }
       },
     }
   }

theme/src/client/components/Home/HomeBanner.vue

@@ -8,7 +8,7 @@ import VButton from '../VButton.vue'
 
 const props = defineProps<PlumeThemeHomeBanner>()
 
-const DEFAULT_BANNER = 'http://file.mo7.cc/api/public/bz'
+const DEFAULT_BANNER = 'https://api.pengzhanbo.cn/wallpaper/bing'
 
 const matter = usePageFrontmatter<PlumeThemeHomeFrontmatter>()
 const isDark = useDarkMode()