组件库开发文档

组件库预览

https://unpkg.com/@serverless-cd/goat-ui/example/dist/index.html

开发

组件库结构

src/ 组件开发目录 src/ui 普通组件 src/widgets 业务组件 example/ 组件测试与预览目录

开发规范

以 src/ui/Test 下组件为例

1. src/ui（widgets）/目录下新建目录，如src/ui/Test/
2. 使用index.ts导出需要被导出的组件
3. 使用xxx.mdx测试组件
4. 启动 demo：npm run demo
5. 在src/index.ts中导出组件

注意事项： src 下新增目录（文件）需要重新启动npm run demo

注意事项：删除 src 下目录（文件）需要检查example/src/content/docs/ui或example/src/content/docs/widgets下是否有对应的xxx.mdx一并删除

使用

组件库

1. astro.config.js中配置：

import { autoImportComponents } from "@serverless-cd/goat-ui/src/utils";
import icon from "astro-icon";
export default defineConfig({
  integrations: [
    starlight(),
    autoImportComponents(), //必须在starlight()后面注入
    icon(),
  ],
});

2. 在任意.mdx 文件中使用组件 <Test />

goatUIPlugin

提供默认 goat ui 主题

1. 按照官方文档配置 tailwind
2. 在tailwind.config.js中配置：

• 使用 goat UI 默认主题配置：

import { goatuiPlugins } from "@serverless-cd/goat-ui/src/plugins";
import { GOAT_UI_CONTENT_PATH } from "@serverless-cd/goat-ui/src/common";
/** @type {import('tailwindcss').Config} */
export default {
  content: [GOAT_UI_CONTENT_PATH],
  plugins: [...goatuiPlugins],
};

• 自定义主题配置

其中 accent 和 gray 支持按照字符串和对象格式配置

import {
  goatuiPlugins,
} from "@serverless-cd/goat-ui/src/plugins";
import {GOAT_UI_CONTENT_PATH} from '@serverless-cd/goat-ui/src/common'
const accent = {
  200: "#BEFFB3",
  600: "#36FF39",
  900: "#187559",
  950: "#134F33",
};
const gray = {
  100: "#F9AEA4",
  200: "#F68787",
  300: "#F65D5D",
  400: "#F83D3D",
  500: "#F73838",
  700: "#F52323",
  800: "#F64538",
  900: "#F02D2D",
};
/** @type {import('tailwindcss').Config} */
export default {
  content: [GOAT_UI_CONTENT_PATH],
  plugins: [...goatuiPlugins],
  daisyui: {
    themes: [
      {
        light: {
          gray: "#cccccc",
          accent: "#00ffff",
          primary: "#ff00ff",
          secondary: "#ff00ff",
          neutral: "#ff00ff",
          "base-100": "#ffffff",
          info: "#0000ff",
          success: "#00ff00",
          warning: "#00ff00",
          error: "#ff0000",
        },
      },
      {
        dark: {
          accent : {
  200: "#BEFFB3",
  600: "#36FF39",
  900: "#187559",
  950: "#134F33",
};
          gray:{
  100: "#F9AEA4",
  200: "#F68787",
  300: "#F65D5D",
  400: "#F83D3D",
  500: "#F73838",
  700: "#F52323",
  800: "#F64538",
  900: "#F02D2D",
}
        },
      },
    ],
  },
};

组件开发规范

1. 组件开发中避免使用 script 标签 （需要存在的话，要拿出来讨论）

如果组件中存在 script 标签，并且设置 is:inline 指令，则会在使用该组件的页面中，自动将 script 标签中的内容插入到页面中，多次使用时会生成重复的 script 内容。 如果组件中存在 script 标签，不设置 is:inline 指令，则会在使用该组件的页面中，自动将 script 标签中的内容插入到页面中，多次使用时不会生成重复的 script 内容。

2. 组件开发中避免使用 style 标签 （以 tailwindcss 为主）

如果组件中存在 style 标签，则会在使用该组件的页面中，自动将 style 标签中的内容插入到页面中，多次使用时会生成重复的style内容。