feat(desktop): embed BoosAPI Desktop client as a subproject
Vendor the rebranded BoosAPI Desktop client (Tauri + Vue) into metapi as a monorepo subdirectory under desktop/. Source only — node_modules, dist, Cargo target and the upstream .git history are excluded. desktop/ keeps its own independent Cargo workspace (desktop/src-tauri with crates/*); it is not part of the backend boosapi crate, so a `cargo check` at the metapi root still compiles only the backend. Build the desktop app from desktop/src-tauri per desktop/README.md. Note: app icons are still placeholder assets pending the final BoosAPI logo. The updater signing keys live outside the repo and are not included.
This commit is contained in:
@@ -0,0 +1,99 @@
|
||||
---
|
||||
description: 解决 markstream-vue 与 Tailwind、shadcn 以及 CSS layer 顺序相关的样式覆盖问题。
|
||||
---
|
||||
|
||||
# Tailwind 集成与样式顺序
|
||||
|
||||
如果你的项目使用 Tailwind 或基于 Tailwind 的组件库(如 shadcn),可能会遇到样式覆盖问题。推荐将 `markstream-vue` 的 CSS 导入置于 `@layer components { ... }` 中以控制样式优先级。
|
||||
|
||||
另外,`markstream-vue` 的打包 CSS 会限定在内部 `.markstream-vue` 容器下以降低全局冲突;来自 `markstream-vue/index.css` 的 Tailwind 工具类只会在该容器内生效。
|
||||
|
||||
示例:
|
||||
|
||||
```css
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer components {
|
||||
@import 'markstream-vue/index.css';
|
||||
}
|
||||
```
|
||||
|
||||
更多替代方案:使用 `prefix` 配置以避免类名冲突,或在应用层覆盖样式。
|
||||
|
||||
## 在 Tailwind 中避免重复生成 CSS
|
||||
|
||||
为了在使用 Tailwind 的项目中减少重复的 utility CSS,推荐优先使用本包提供的 "tailwind-ready" 输出,而不是完整的预编译 `index.css`。
|
||||
|
||||
- Tailwind v3(推荐流程):
|
||||
- 在应用中引入 `index.tailwind.css`,这样只会引入组件样式而不会把 Tailwind 的工具类重复打包进去。
|
||||
- 在 `tailwind.config.js` 的 `content` 中加入本包生成的类列表,使 Tailwind 能识别并避免重新生成相同的类。
|
||||
|
||||
示例(Tailwind v3 / `tailwind.config.js`):
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
content: [
|
||||
'./src/**/*.{js,ts,vue}',
|
||||
// 包安装后可以使用:require('markstream-vue/tailwind')
|
||||
require('markstream-vue/tailwind'),
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
示例 CSS 导入(应用入口):
|
||||
|
||||
```css
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import 'markstream-vue/index.tailwind.css';
|
||||
```
|
||||
|
||||
- Tailwind v4:可以直接包含 `index.tailwind.css`,使用 v4 的扫描器发现类名,无需额外的 `tailwind.ts` 辅助文件。
|
||||
|
||||
- 非 Tailwind 项目:继续使用预编译好的 `index.css`:
|
||||
|
||||
```css
|
||||
@import 'markstream-vue/index.css';
|
||||
```
|
||||
|
||||
说明:
|
||||
- 本包导出 `./tailwind` 条目(`./dist/tailwind.ts`),导出的是提取出的 class 列表。发布到 npm 后可以在 `tailwind.config.js` 中通过 `require('markstream-vue/tailwind')` 引入该列表。
|
||||
- 在本地开发时也可以直接引用生成文件(例如 `./dist/tailwind.ts`)。
|
||||
|
||||
## UnoCSS 集成
|
||||
|
||||
UnoCSS 遵循相同规则:先导入 reset,再将库的 CSS 放到受控 layer 中,避免被 `utilities` 覆盖。
|
||||
|
||||
1. 在 `uno.config.ts` 中注入 `preflights`:
|
||||
|
||||
```ts
|
||||
import { defineConfig, presetUno, presetWind } from 'unocss'
|
||||
|
||||
export default defineConfig({
|
||||
presets: [presetUno(), presetWind()],
|
||||
preflights: [
|
||||
{
|
||||
layer: 'preflights',
|
||||
getCSS: () => '@import "markstream-vue/index.css";',
|
||||
},
|
||||
],
|
||||
})
|
||||
```
|
||||
|
||||
2. 或者手动在样式表中声明:
|
||||
|
||||
```css
|
||||
@import '@unocss/reset/tailwind.css';
|
||||
|
||||
@layer components {
|
||||
@import 'markstream-vue/index.css';
|
||||
}
|
||||
```
|
||||
|
||||
3. 当类名与 Uno/Tailwind 冲突时,可以在配置中设置 prefix(如 Tailwind `prefix: 'tw-'`,Uno 通过 `shortcutsPrefix` 或自定义规则),或者将 `MarkdownRender` 包裹在 `custom-id` 上下文中再进行覆盖。
|
||||
|
||||
调试技巧:在浏览器 DevTools 中打开 “Cascade Layers” 面板,确认 `markstream-vue` 的样式位于 utilities 之上。如果不在正确层级,请调整导入位置或 `preflights` 顺序。
|
||||
Reference in New Issue
Block a user