Vue 3 + Element Plus 组件库，面向 Tauri 桌面应用，提供设置对话框、自动更新、外观管理、字体注册等开箱即用的能力。
- 设置对话框：带侧边导航的标签式设置面板，内置"数据库 / 外观 / 关于"三个 tab，支持自定义 tab 和细粒度设置项控制
- 自动更新：基于
@tauri-apps/plugin-updater的更新对话框，状态机驱动，支持 Markdown 更新日志渲染 - 外观管理：主题模式（浅色/深色/跟随系统）、字体配置（单词/注音/UI）、CSS 变量注入
- 字体注册：内置
gebinee字体，支持消费项目注册自定义字体 - GitHub 风格：按钮采用 GitHub 绿色主题（
#2da44e），样式 scoped 无全局侵入 - 自包含：Element Plus 组件样式打包进
dist/style.css，消费项目无需额外引入
npm install @gebinee/components
# 或
pnpm add @gebinee/components消费项目需自行安装以下依赖：
npm install vue element-plus @element-plus/icons-vue marked
npm install @tauri-apps/api @tauri-apps/plugin-process @tauri-apps/plugin-updater// main.ts
import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "@gebinee/components/style.css";
import App from "./App.vue";
const app = createApp(App);
app.use(ElementPlus);
app.mount("#app");<!-- App.vue -->
<script setup lang="ts">
import { ref } from "vue";
import { SettingsDialog, type AppearanceSettings, type DatabaseConfig } from "@gebinee/components";
const visible = ref(false);
const appearance = ref<AppearanceSettings>({ theme: "auto", font_size: 16 });
const database = ref<DatabaseConfig>({ db_path: "" });
</script>
<template>
<SettingsDialog
v-model:visible="visible"
v-model:appearance="appearance"
v-model:database="database"
:show-database-tab="true"
:show-appearance-tab="true"
app-name="我的应用"
@save="() => visible = false"
/>
</template>| 组件 | 说明 | 文档 |
|---|---|---|
GebineeButton |
ElButton 封装，固定高度 38px，配合 .gebinee--btn-green 实现 GitHub 绿色按钮 |
文档 |
GebineeInput |
ElInput 封装，字号 18px / placeholder 16px，透传全部插槽 | 文档 |
AppearanceTab |
外观设置表单：主题模式、字体选择、上传字体 | 文档 |
DatabaseTab |
数据库路径设置表单 | 文档 |
SettingsDialog |
标签式设置对话框，支持自定义 tab 和细粒度设置项控制 | 文档 |
UpdateDialog |
Tauri 自动更新对话框，支持 Markdown 更新日志 | 文档 |
| 函数 | 说明 | 文档 |
|---|---|---|
errorMessage |
通用错误信息提取，兼容 Tauri AppError | 文档 |
applyAppearance |
应用外观配置到 CSS 变量与主题 | 文档 |
isSystemFontName |
判断是否为系统/内置字体 | 文档 |
registerFontLoader |
注册字体文件加载器 | 文档 |
registerCustomFont |
注册单个自定义字体 | 文档 |
registerCustomFonts |
批量注册自定义字体 | 文档 |
组件库样式打包在 dist/style.css 中，包含：
:rootCSS 变量声明（--gebinee-font-size、--gebinee-word-font等）.gebinee作用域样式（字体、滚动条）.gebinee--btn-green/.gebinee--btn-success-hover按钮颜色类.gebinee--app-layout/.gebinee--app-header/.gebinee--app-main布局类- Element Plus 组件样式（Button、Input、Dialog 等）
注意：组件库不包含全局 reset（
* { box-sizing }/html, body { height: 100% }）。若消费项目需要全高度布局，请自行添加。
# 启动 playground 预览
npm run playground
# 库模式打包
npm run build
# 监听模式打包
npm run dev@gebinee/components 是一款采用 MIT 许可证的开源 vue3 组件库。