🎈 perf(newbee): add components

LittleSkinChina · Feb 1, 2024 · fb2440c · fb2440c
1 parent 65c42e5
commit fb2440c
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 20 deletions.
diff --git a/components/BSButton.vue b/components/BSButton.vue
@@ -0,0 +1,24 @@
+<template>
+    <span class="bs-btn primary">
+        <slot></slot>
+    </span>
+</template>
+
+<style scope>
+.bs-btn {
+  box-shadow: none;
+  color: #fff;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  text-align: center;
+  margin: 0 0.4rem;
+  padding: 0.25rem 0.65rem;
+  display: inline-block;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  vertical-align: middle;
+}
+.primary {
+  background-color: #007bff;
+}
+</style>
diff --git a/components/BSSection.vue b/components/BSSection.vue
@@ -0,0 +1,22 @@
+<template>
+    <span class="bs-section">
+        <slot></slot>
+    </span>
+</template>
+
+<style scope>
+.bs-section {
+  background-color: var(--vp-c-bg);
+  box-shadow: none;
+  color: var(--vp-c-text-1);
+  border: 1px solid var(--vp-c-text-1);
+  border-radius: 0.25rem;
+  text-align: center;
+  margin: 0 0.4rem;
+  padding: 0.25rem 0.65rem;
+  display: inline-block;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  vertical-align: middle;
+}
+</style>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -1,5 +1,5 @@
 // @ts-ignore: 2307
-import { h } from 'vue' 
+import { h } from 'vue'
 import DefaultTheme from 'vitepress/theme'
 import type { Theme as ThemeConfig } from 'vitepress'
 
@@ -19,6 +19,9 @@ import {
 } from '@nolebase/vitepress-plugin-highlight-targeted-heading'
 import '@nolebase/vitepress-plugin-highlight-targeted-heading/dist/style.css'
 
+import BSButton from '../../../components/BSButton.vue'
+import BSSection from '../../../components/BSSection.vue'
+
 
 export const Theme: ThemeConfig = {
     extends: DefaultTheme,
@@ -31,15 +34,17 @@ export const Theme: ThemeConfig = {
             // vitepress-plugin-highlight-targeted-heading
             'layout-top': () => [
                 h(NolebaseHighlightTargetedHeading),
-            ], 
+            ],
         })
     },
     enhanceApp({ app }) {
         app.provide(InjectionKey, {
             spotlight: {
                 defaultToggle: true,
             }
-        } as Options) 
+        } as Options)
+            .component('BSButton', BSButton)
+            .component('BSSection', BSSection)
     }
 }
 export default Theme
diff --git a/docs/newbee/player.md b/docs/newbee/player.md
@@ -12,13 +12,13 @@ LittleSkin 支持的皮肤 Mod 都是通过角色名来识别玩家身份并加
 在创建角色前请确保你的积分足够，否则你将无法创建角色。
 :::
 
-你可以在用户中心的「角色管理」页面创建和管理你的角色：
+你可以在用户中心的<BSSection>角色管理</BSSection>页面创建和管理你的角色：
 
-1. 点击用户中心左侧菜单栏中的「角色管理」，在打开的页面中点击「添加新角色」：
+1. 点击用户中心左侧菜单栏中的<BSSection>角色管理</BSSection>，在打开的页面中点击<BSButton>+  添加新角色</BSButton>
 
     ![open-page](./assets/player/1-add-player.webp)
 
-2. 在弹出的窗口中输入你的角色名，点击「提交」按钮：
+2. 在弹出的窗口中输入你的角色名，点击<BSButton>确定</BSButton>按钮：
 
     ::: tip 提示
     角色名可使用中日韩统一表意文字（中文、日文、韩文）、大小写英文字母、阿拉伯数字及以下特殊符号：
@@ -41,9 +41,9 @@ LittleSkin 支持的皮肤 Mod 都是通过角色名来识别玩家身份并加
 
 如果你拥有正版 Minecraft，你可以将其绑定至你的 LittleSkin 账号。
 
-你可以在角色管理的下方找到「正版验证 & 绑定」一栏（如果没有这一栏，请尝试刷新页面），点击下方的「验证并绑定」按钮。此时页面会跳转到 Microsoft 的 OAuth 登录页面，在其中登录你的 Microsoft 账号并授权即可完成绑定。
+你可以在角色管理的下方找到<BSSection>正版验证 & 绑定</BSSection>一栏（如果没有这一栏，请尝试刷新页面），点击下方的<BSButton>验证并绑定</BSButton>按钮。此时页面会跳转到 Microsoft 的 OAuth 登录页面，在其中登录你的 Microsoft 账号并授权即可完成绑定。
 
-绑定后会自动在你的账号中添加和你的正版 Minecraft 账号同名的角色（如果站内已有同名角色，则该角色将会被强制转移至你的账户下），并可以获得积分奖励。同时，若需取回最新的正版角色名或是删除角色后需要重建角色，可点击下方的「更新绑定角色」来完成。
+绑定后会自动在你的账号中添加和你的正版 Minecraft 账号同名的角色（如果站内已有同名角色，则该角色将会被强制转移至你的账户下），并可以获得积分奖励。同时，若需取回最新的正版角色名或是删除角色后需要重建角色，可点击下方的<BSButton>更新绑定角色</BSButton>来完成。
 
 每个 LittleSkin 账户只能绑定一个正版 Minecraft 账号，且绑定后不允许解绑正版 Minecraft 账号，除非删除 LittleSkin 账号。
 

diff --git a/docs/newbee/textures.md b/docs/newbee/textures.md
@@ -22,7 +22,7 @@ LittleSkin 支持上传以下材质
 若将其他格式的图片通过简单地重命名，将会导致无法正常使用。
 :::
 
-::: tip 提示
+::: tip 关于积分
 上传材质需要花费积分，而花费的积分数量按照材质文件的体积来计算。公开材质被他人收藏后，你可以获得奖励积分。
 
 对于公开材质，每 KB 存储空间需要花费 1 积分；而对于私密材质，每 KB 存储空间需要花费 20 积分。删除材质时会返还积分。
@@ -34,13 +34,13 @@ LittleSkin 支持上传以下材质
 材质上传页面显示的预估积分消耗仅供参考，实际积分消耗将按材质文件的实际大小计算。
 :::
 
-1. 进入皮肤库，点击页面顶部菜单栏中的 「上传新皮肤」
+![open-page](./assets/textures/1-open-page.webp)
 
-    ![open-page](./assets/textures/1-open-page.webp)
+1. 进入皮肤库，点击页面顶部菜单栏中的<BSSection>上传新皮肤</BSSection>
 
 2. 在打开的页面中设置材质名称，选择材质类型，选择材质文件，选择是否设置为私密。
     你可以在右侧查看你的材质的预览。
-    材质信息设置完成后，点击「确认上传」按钮。
+    材质信息设置完成后，点击<BSButton>确认上传</BSButton>按钮。
 
     ::: danger 谨记
     LittleSkin 不允许上传包括但不限于如下内容的敏感材质（包括含有争议性的材质）：
@@ -55,7 +55,7 @@ LittleSkin 支持上传以下材质
 你的材质就上传完成啦~
 
 材质上传完成后，会自动跳转到你刚刚上传的材质的详情页面。  
-你上传的材质会被自动添加到你的衣柜，你可以直接前往「我的衣柜」页面查看并设置到你的角色上。
+你上传的材质会被自动添加到你的衣柜，你可以直接前往<BSSection>我的衣柜</BSSection>页面查看并设置到你的角色上。
 
 ## 从皮肤库中添加材质到衣柜
 
@@ -67,9 +67,9 @@ LittleSkin 支持上传以下材质
 
 ![add-to-closet](./assets/textures/2-add-to-closet.webp)
 
-1. 进入材质详情页面，点击材质预览下方左侧的「添加至衣柜」按钮
+1. 进入材质详情页面，点击材质预览下方左侧的<BSButton>添加至衣柜</BSButton>
 
-2. 在弹出的对话框中设置衣柜物品的名字，点击「确定」
+2. 在弹出的对话框中设置衣柜物品的名字，点击<BSButton>确定</BSButton>
 
 材质就被成功添加到衣柜啦~
 添加完成后，你也可以直接在材质详情页面将材质设置到角色。
@@ -78,15 +78,15 @@ LittleSkin 支持上传以下材质
 
 将材质添加到衣柜后，就可以将材质设置到角色上了。
 
-你可以在用户中心的「我的衣柜」页面管理衣柜物品和将材质设置到角色上。
+你可以在用户中心的<BSSection>我的衣柜</BSSection>页面管理衣柜物品和将材质设置到角色上。
 
 ![set-to-player](./assets/textures/3-set-to-player.webp)
 
-1. 点击用户中心左侧菜单栏中的「我的衣柜」
+1. 点击用户中心左侧菜单栏中的<BSSection>我的衣柜</BSSection>
 
-2. 在打开的页面的左侧上方选择材质的分类（皮肤 / 披风），选择你要使用的材质，点击右侧材质预览下方左侧的「使用」按钮
+2. 在打开的页面的左侧上方选择材质的分类<BSSection>皮肤</BSSection><BSSection>披风</BSSection>，选择你要使用的材质，点击右侧材质预览下方左侧的<BSButton>使用...</BSButton>
 
-3. 在弹出的窗口中选择需要设置材质的角色，单击右下角的「提交」
+3. 在弹出的窗口中选择需要设置材质的角色
 
 4. 材质已经被设置到角色啦~
 
@@ -96,6 +96,6 @@ LittleSkin 支持上传以下材质
 
 你可以将衣柜中的皮肤的面部设置为你在 LittleSkin 的头像。
 
-在衣柜中选择「皮肤」分类，点击衣柜物品底端右侧的齿轮按钮，再点击「设为头像」即可。会自动裁剪皮肤的面部作为头像。
+在衣柜中选择<BSSection>皮肤</BSSection>分类，点击衣柜物品底端右侧的齿轮按钮，再点击<BSButton>设为头像</BSButton>即可。会自动裁剪皮肤的面部作为头像。
 
 ![set-avatar](./assets/textures/4-set-avatar.webp)