@kk-2004/ui-components

Appearance

Element Plus 主题组件 ​

从 KFile (mcp-support) 项目中提取的红色品牌主题可复用组件库。

组件本身框架无关（不依赖 element-plus），样式围绕 Element Plus 的常见搭配设计；右侧的按钮、用户信息等内容由使用者通过默认插槽注入。

依赖 ​

bash
# 组件库本身仅需 Vue 3；若在插槽中使用 Element Plus 组件，再按需安装
npm install element-plus @element-plus/icons-vue

引入 ​

js
// main.js
import 'ui-components/element-plus/index.css'
import { HeadBar } from 'ui-components/element-plus'

主题配色 ​

品牌红 #ef4444 为主色，白底 + 灰色文字 + 阴影。所有颜色通过 CSS 自定义属性控制，可在任意层级覆盖：

css
:root {
  --kh-accent: #ef4444;          /* 主色 */
  --kh-accent-hover-bg: #fef2f2; /* 悬停背景 */
  --kh-title-color: #1f2937;     /* 标题色 */
  --kh-text-color: #4b5563;      /* 文字色 */
  --kh-height: 64px;             /* 栏高 */
}

组件 ​