baai-components 1.0.0

package/README.md

@@ -0,0 +1,201 @@
+# baai-components
+
+基于 Vue 3 和 TypeScript 的业务组件库，提供高质量、可复用的 UI 组件。
+
+## 功能特点
+
+- 基于 Vue 3 和 TypeScript 开发
+- 集成 UnoCSS 原子化 CSS 框架
+- 支持 Tree Shaking，按需引入
+- 包含丰富的业务组件
+- 提供组件演示和调试环境
+
+## 安装
+
+```bash
+# 使用 npm
+npm install baai-components
+
+# 使用 yarn
+yarn add baai-components
+
+# 使用 pnpm
+pnpm add baai-components
+```
+
+## 使用方法
+
+### 全量引入
+
+```javascript
+import { createApp } from 'vue';
+import BaaiComponents from 'baai-components';
+import 'baai-components/dist/style.css';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(BaaiComponents);
+app.mount('#app');
+```
+
+### 按需引入
+
+```javascript
+import { createApp } from 'vue';
+import { MyButton, MyTable } from 'baai-components';
+import 'baai-components/dist/style.css';
+import App from './App.vue';
+
+const app = createApp(App);
+app.component('MyButton', MyButton);
+app.component('MyTable', MyTable);
+app.mount('#app');
+```
+
+## 组件列表
+
+### MyButton
+
+按钮组件，支持多种类型和状态。
+
+```vue
+<template>
+  <MyButton type="primary">主要按钮</MyButton>
+  <MyButton type="success">成功按钮</MyButton>
+  <MyButton type="warning">警告按钮</MyButton>
+  <MyButton type="danger">危险按钮</MyButton>
+  <MyButton type="info">信息按钮</MyButton>
+  <MyButton disabled>禁用按钮</MyButton>
+  <MyButton loading>加载中</MyButton>
+</template>
+```
+
+#### 属性
+
+| 属性名   | 类型    | 默认值    | 说明         |
+|----------|---------|-----------|--------------|
+| type     | string  | 'default' | 按钮类型     |
+| disabled | boolean | false     | 是否禁用     |
+| loading  | boolean | false     | 是否加载中   |
+
+#### 事件
+
+| 事件名 | 说明           | 回调参数 |
+|--------|----------------|----------|
+| click  | 点击按钮时触发 | event    |
+
+### MyTable
+
+表格组件，用于展示结构化数据。
+
+```vue
+<template>
+  <MyTable :columns="columns" :data="data" row-key="id">
+    <!-- 自定义列内容 -->
+    <template #action="{ row }">
+      <MyButton @click="handleEdit(row)">编辑</MyButton>
+      <MyButton type="danger" @click="handleDelete(row)">删除</MyButton>
+    </template>
+  </MyTable>
+</template>
+
+<script>
+export default {
+  setup() {
+    const columns = [
+      { key: 'name', title: '姓名' },
+      { key: 'age', title: '年龄' },
+      { key: 'address', title: '地址' },
+      { key: 'action', title: '操作', width: '150px' }
+    ];
+    
+    const data = [
+      { id: 1, name: '张三', age: 25, address: '北京市朝阳区' },
+      { id: 2, name: '李四', age: 30, address: '上海市浦东新区' }
+    ];
+    
+    const handleEdit = (row) => {
+      console.log('编辑', row);
+    };
+    
+    const handleDelete = (row) => {
+      console.log('删除', row);
+    };
+    
+    return {
+      columns,
+      data,
+      handleEdit,
+      handleDelete
+    };
+  }
+};
+</script>
+```
+
+#### 属性
+
+| 属性名  | 类型  | 默认值 | 说明           |
+|---------|-------|--------|----------------|
+| columns | array | []     | 表格列配置     |
+| data    | array | []     | 表格数据       |
+| rowKey  | string| ''     | 行唯一标识的键名 |
+
+## 开发指南
+
+### 项目结构
+
+```
+components/
+├── demo/               # 组件演示和调试环境
+│   ├── src/            # 演示代码
+│   │   ├── App.vue     # 演示主页面
+│   │   └── main.ts     # 演示入口
+│   └── index.html      # 演示 HTML
+├── src/
+│   ├── components/     # 组件源码
+│   │   ├── Button/     # 按钮组件
+│   │   └── Table/      # 表格组件
+│   ├── types.d.ts      # 类型声明
+│   └── index.ts        # 入口文件
+├── vite.config.ts      # 组件库 Vite 配置
+├── vite.demo.config.ts # 演示环境 Vite 配置
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+### UnoCSS 集成
+
+组件库使用 [UnoCSS](https://unocss.dev/) 作为 CSS 解决方案，这是一个原子化 CSS 引擎，可以让组件样式更加灵活和高效。
+
+主要特性：
+- 原子化 CSS 类（类似 Tailwind CSS）
+- 支持属性化模式
+- 内置图标支持
+- 可自定义颜色主题和规则
+
+### 开发与调试
+
+```bash
+# 安装依赖
+npm install
+
+# 运行演示环境（用于调试组件）
+npm run demo
+
+# 开发模式
+npm run dev
+
+# 构建
+npm run build
+```
+
+#### 使用演示环境
+
+演示环境提供了一个完整的页面，展示了所有组件的使用方式和效果。这对于组件的开发和调试非常有帮助。
+
+1. 运行 `npm run demo` 启动演示环境
+2. 在浏览器中访问 http://localhost:3000
+3. 修改 `src/components` 下的组件代码，演示页面会自动热更新
+4. 需要添加新组件时，先在 `src/components` 下开发，然后在 `demo/src/App.vue` 中添加演示代码 

package/dist/Icon/Down.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/Icon/Header.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Button/index.vue.d.ts

@@ -0,0 +1,39 @@
+import { PropType } from 'vue';
+type ButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'default';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    type: {
+        type: PropType<ButtonType>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    typeClasses: import("vue").ComputedRef<"bg-primary hover:bg-blue-500 text-white border-transparent" | "bg-success hover:bg-green-500 text-white border-transparent" | "bg-warning hover:bg-yellow-500 text-white border-transparent" | "bg-danger hover:bg-red-500 text-white border-transparent" | "bg-info hover:bg-gray-500 text-white border-transparent" | "bg-white hover:bg-gray-100 text-gray-700 border border-gray-300">;
+    handleClick: (e: MouseEvent) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: PropType<ButtonType>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    type: ButtonType;
+    disabled: boolean;
+    loading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Header/src/Avatar.vue.d.ts

@@ -0,0 +1,16 @@
+interface Props {
+    userNickName: string;
+    currentPath: string;
+    logout: () => void;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/Header/src/Header.vue.d.ts

@@ -0,0 +1,27 @@
+import { LocaleTypeEnum } from './constants/locale';
+import type { NavMenuItem, NavChildItem } from './config/menus';
+import 'uno.css';
+interface Props {
+    routePath: string;
+    menuList: NavMenuItem[];
+    isWhiteTheme: boolean;
+    isScrolledTheme: boolean;
+    currentLocale: LocaleTypeEnum;
+    userName?: string;
+    userNickName: string;
+    onLogoClick: () => void;
+    onJumpPage: (menu: NavMenuItem, childMenu?: NavChildItem) => void;
+    onChangeLanguage: (locale: LocaleTypeEnum) => void;
+    onLogout: () => void;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

package/dist/components/Header/src/Locale.vue.d.ts

@@ -0,0 +1,48 @@
+import { LocaleTypeEnum } from './constants/locale';
+interface LocaleOption {
+    value: LocaleTypeEnum;
+    label: string;
+}
+interface Props {
+    isWhiteTheme?: boolean;
+    currentLocale: LocaleTypeEnum;
+    localeOptions?: LocaleOption[];
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    isWhiteTheme: boolean;
+    localeOptions: () => {
+        value: LocaleTypeEnum;
+        label: string;
+    }[];
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "change-language": (locale: LocaleTypeEnum) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    isWhiteTheme: boolean;
+    localeOptions: () => {
+        value: LocaleTypeEnum;
+        label: string;
+    }[];
+}>>> & Readonly<{
+    "onChange-language"?: ((locale: LocaleTypeEnum) => any) | undefined;
+}>, {
+    isWhiteTheme: boolean;
+    localeOptions: LocaleOption[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/Header/src/Login.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Header/src/config/locale.d.ts

@@ -0,0 +1,8 @@
+import { LocaleTypeEnum } from '../constants/locale';
+export declare const NAV_LOCALE_OPTIONS: {
+    value: LocaleTypeEnum;
+    label: string;
+}[];
+export declare const NAV_LOCALE_TO_LANG: Record<LocaleTypeEnum, string>;
+export declare const NAV_LANG_TO_LOCALE: Record<string, LocaleTypeEnum>;
+export declare const NAV_WIKI_LANG_BY_LOCALE: Record<LocaleTypeEnum, string>;

package/dist/components/Header/src/config/menus.d.ts

@@ -0,0 +1,29 @@
+import { LocaleTypeEnum } from '../constants/locale';
+export interface NavChildItem {
+    id: string;
+    label: string;
+    path: string;
+    desc?: string;
+    type: 'route' | 'link' | 'unopen';
+}
+export interface NavDropdownGroup {
+    id: string;
+    label: string;
+    list: NavChildItem[];
+}
+export interface NavMenuItem {
+    id: string;
+    label: string;
+    path?: string;
+    active?: boolean;
+    /** flat items (tools / learn) */
+    dropdownList?: NavChildItem[];
+    /** grouped items (projects) */
+    dropdownGroups?: NavDropdownGroup[];
+}
+/**
+ * Fetch nav menu by lang.
+ * Replace the mock body with a real HTTP call when the backend is ready:
+ *   return request({ method: 'get', url: '/nav/menus', params: { lang } }).then(res => res.data);
+ */
+export declare const getNavMenuApi: (lang: LocaleTypeEnum) => NavMenuItem[];

package/dist/components/Header/src/config/texts.d.ts

@@ -0,0 +1,8 @@
+import type { InjectionKey, ComputedRef } from 'vue';
+import { LocaleTypeEnum } from '../constants/locale';
+export interface NavTexts {
+    loginText: string;
+    logoutText: string;
+}
+export declare const NAV_TEXTS_KEY: InjectionKey<ComputedRef<NavTexts>>;
+export declare const buildNavTexts: (lang: LocaleTypeEnum) => NavTexts;

package/dist/components/Header/src/constants/locale.d.ts

@@ -0,0 +1,4 @@
+export declare enum LocaleTypeEnum {
+    English = "en",
+    Chinese = "zh-CN"
+}

package/dist/components/Header/src/hooks/useHeaderMenu.d.ts

@@ -0,0 +1,56 @@
+import type { Ref } from 'vue';
+import type { LocaleTypeEnum } from '../constants/locale';
+import { type NavMenuItem, type NavChildItem } from '../config/menus';
+export declare function useHeaderMenu(currentLocale: Ref<LocaleTypeEnum>, route: any, router: any, 
+/** String shown when user clicks an unavailable item (e.g. t('projects.unopentip')) */
+unopenTip: Ref<string> | string): {
+    menuList: Ref<{
+        id: string;
+        label: string;
+        path?: string | undefined;
+        active?: boolean | undefined;
+        dropdownList?: {
+            id: string;
+            label: string;
+            path: string;
+            desc?: string | undefined;
+            type: "link" | "route" | "unopen";
+        }[] | undefined;
+        dropdownGroups?: {
+            id: string;
+            label: string;
+            list: {
+                id: string;
+                label: string;
+                path: string;
+                desc?: string | undefined;
+                type: "link" | "route" | "unopen";
+            }[];
+        }[] | undefined;
+    }[], NavMenuItem[] | {
+        id: string;
+        label: string;
+        path?: string | undefined;
+        active?: boolean | undefined;
+        dropdownList?: {
+            id: string;
+            label: string;
+            path: string;
+            desc?: string | undefined;
+            type: "link" | "route" | "unopen";
+        }[] | undefined;
+        dropdownGroups?: {
+            id: string;
+            label: string;
+            list: {
+                id: string;
+                label: string;
+                path: string;
+                desc?: string | undefined;
+                type: "link" | "route" | "unopen";
+            }[];
+        }[] | undefined;
+    }[]>;
+    syncActiveMenu: () => void;
+    handleJumpPage: (menu: NavMenuItem, childMenu?: NavChildItem) => any;
+};

package/dist/components/Header/src/hooks/useHeaderTheme.d.ts

@@ -0,0 +1,8 @@
+export declare function useHeaderTheme(route: any): {
+    lastScrollTop: import("vue").Ref<number, number>;
+    isWhiteTheme: import("vue").Ref<boolean, boolean>;
+    isScrolledTheme: import("vue").Ref<boolean, boolean>;
+    bindByRoute: () => void;
+    handleScroll: import("lodash").DebouncedFuncLeading<() => void>;
+    handleEventsScroll: import("lodash").DebouncedFuncLeading<() => void>;
+};

package/dist/components/Header/src/index.d.ts

@@ -0,0 +1,11 @@
+export { default as NavHeader } from './Header.vue';
+export { default as NavAvatar } from './Avatar.vue';
+export { default as NavLogin } from './Login.vue';
+export { default as NavLocale } from './Locale.vue';
+export * from './constants/locale';
+export * from './config/locale';
+export * from './config/texts';
+export * from './config/menus';
+export * from './utils/path';
+export * from './hooks/useHeaderMenu';
+export * from './hooks/useHeaderTheme';

package/dist/components/Header/src/utils/openLink.d.ts

@@ -0,0 +1 @@
+export declare const openLink: (url: string) => void;

package/dist/components/Header/src/utils/path.d.ts

@@ -0,0 +1,2 @@
+export declare const matchPath: (path: string, targetPath: string) => boolean;
+export declare const matchAnyPath: (path: string, targetPaths: string[]) => boolean;

package/dist/components/Table/index.vue.d.ts

@@ -0,0 +1,37 @@
+import { PropType } from 'vue';
+export interface TableColumn {
+    key: string;
+    title: string;
+    width?: string;
+}
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    columns: {
+        type: PropType<TableColumn[]>;
+        required: true;
+    };
+    data: {
+        type: PropType<Record<string, any>[]>;
+        default: () => never[];
+    };
+    rowKey: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    columns: {
+        type: PropType<TableColumn[]>;
+        required: true;
+    };
+    data: {
+        type: PropType<Record<string, any>[]>;
+        default: () => never[];
+    };
+    rowKey: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    data: Record<string, any>[];
+    rowKey: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue';
+import MyTable from './components/Table/index.vue';
+import MyButton from './components/Button/index.vue';
+import Header from './components/Header/src/Header.vue';
+export * from './components/Header/src/index';
+export { MyTable, MyButton, Header };
+declare const _default: {
+    install(app: App): void;
+};
+export default _default;