@ikun2274/spiritechoui 0.1.34

package/dist/spiritechoui.es.js

@@ -0,0 +1,140 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createElementVNode, toDisplayString } from "vue";
+class MyUI {
+  /**
+   * 支持 app.use(MyUI) 注册的静态方法
+   * @param {import('vue').App} app Vue 应用实例
+   * @param {Object} options 可选配置（如自定义组件前缀等）
+   */
+  static install(app, options = {}) {
+    Object.keys(this).forEach((category) => {
+      const components = this[category];
+      Object.keys(components).forEach((componentName) => {
+        const component = components[componentName]();
+        const kebabCaseName = componentName.replace(/[A-Z]/g, "-$&").toLowerCase();
+        app.component(kebabCaseName, component);
+      });
+    });
+  }
+}
+class ComponentInjector {
+  constructor(target) {
+    // 可选：保留原 register 方法，兼容之前的调用习惯（本质和 registerAsSubMethod 一致）
+    __publicField(this, "register", this.registerAsSubMethod);
+    this.target = target;
+  }
+  /**
+   * 核心方法：注册组件为「分类的下属函数」
+   * @param {string} category 分类名称（如 'form'，作为主类的属性）
+   * @param {string} subMethodName 下属函数名（如 'myButton'，作为分类的下属函数）
+   * @param {Object} component 组件定义（.vue 文件）
+   * @param {Object} defaultOptions 组件默认配置
+   */
+  registerAsSubMethod(category, subMethodName, component, defaultOptions = {}) {
+    if (!this.target[category]) {
+      this.target[category] = {};
+    }
+    this.target[category][subMethodName] = (registerOptions = {}) => {
+      const mergedConfig = { ...defaultOptions, ...registerOptions };
+      return {
+        ...component,
+        props: {
+          ...component.props,
+          default: () => mergedConfig
+        }
+      };
+    };
+  }
+}
+const Button_vue_vue_type_style_index_0_lang = "";
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main = {
+  props: {
+    // 文本样式类型
+    textType: {
+      type: String,
+      default: "default",
+      validator: (val) => ["default", "primary", "success", "danger", "warning"].includes(val)
+    },
+    // 手动注入文本样式
+    textStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    // 自定义按钮整体样式
+    customStyle: {
+      type: Object,
+      default: () => ({})
+    },
+    // 按钮类型（控制背景色）
+    type: {
+      type: String,
+      default: "default",
+      validator: (val) => ["default", "primary", "success", "danger", "warning"].includes(val)
+    },
+    // 按钮尺寸
+    size: {
+      type: String,
+      default: "large",
+      validator: (val) => ["small", "medium", "large"].includes(val)
+    },
+    // 是否圆角
+    round: {
+      type: Boolean,
+      default: false
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // 默认文本（无插槽时显示）
+    text: {
+      type: String,
+      default: "按钮"
+    }
+  }
+};
+const _hoisted_1 = ["disabled"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("button", {
+    class: normalizeClass(["SpiritEchoBtn", [
+      `SpiritEchoBtn--${$props.type}`,
+      `SpiritEchoBtn--${$props.size}`,
+      { "SpiritEchoBtn--round": $props.round },
+      { "SpiritEchoBtn--disabled": $props.disabled }
+    ]]),
+    style: normalizeStyle($props.customStyle),
+    disabled: $props.disabled
+  }, [
+    renderSlot(_ctx.$slots, "default", {}, () => [
+      createElementVNode("span", {
+        class: normalizeClass(["SpiritEchoBtn__text", `SpiritEchoBtn__text--${$props.textType}`]),
+        style: normalizeStyle($props.textStyle)
+      }, toDisplayString($props.text), 7)
+    ])
+  ], 14, _hoisted_1);
+}
+const myButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const injector = new ComponentInjector(MyUI);
+injector.register("form", "myButton", myButton, {
+  type: "default",
+  size: "medium"
+});
+MyUI.install = (app) => {
+  app.component("MyButton", MyUI.form.myButton({}));
+};
+export {
+  MyUI
+};

package/dist/spiritechoui.umd.js

@@ -0,0 +1,143 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vue")) : typeof define === "function" && define.amd ? define(["exports", "vue"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.MyCustomUI = {}, global.Vue));
+})(this, function(exports2, vue) {
+  "use strict";var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+  class MyUI {
+    /**
+     * 支持 app.use(MyUI) 注册的静态方法
+     * @param {import('vue').App} app Vue 应用实例
+     * @param {Object} options 可选配置（如自定义组件前缀等）
+     */
+    static install(app, options = {}) {
+      Object.keys(this).forEach((category) => {
+        const components = this[category];
+        Object.keys(components).forEach((componentName) => {
+          const component = components[componentName]();
+          const kebabCaseName = componentName.replace(/[A-Z]/g, "-$&").toLowerCase();
+          app.component(kebabCaseName, component);
+        });
+      });
+    }
+  }
+  class ComponentInjector {
+    constructor(target) {
+      // 可选：保留原 register 方法，兼容之前的调用习惯（本质和 registerAsSubMethod 一致）
+      __publicField(this, "register", this.registerAsSubMethod);
+      this.target = target;
+    }
+    /**
+     * 核心方法：注册组件为「分类的下属函数」
+     * @param {string} category 分类名称（如 'form'，作为主类的属性）
+     * @param {string} subMethodName 下属函数名（如 'myButton'，作为分类的下属函数）
+     * @param {Object} component 组件定义（.vue 文件）
+     * @param {Object} defaultOptions 组件默认配置
+     */
+    registerAsSubMethod(category, subMethodName, component, defaultOptions = {}) {
+      if (!this.target[category]) {
+        this.target[category] = {};
+      }
+      this.target[category][subMethodName] = (registerOptions = {}) => {
+        const mergedConfig = { ...defaultOptions, ...registerOptions };
+        return {
+          ...component,
+          props: {
+            ...component.props,
+            default: () => mergedConfig
+          }
+        };
+      };
+    }
+  }
+  const Button_vue_vue_type_style_index_0_lang = "";
+  const _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+  const _sfc_main = {
+    props: {
+      // 文本样式类型
+      textType: {
+        type: String,
+        default: "default",
+        validator: (val) => ["default", "primary", "success", "danger", "warning"].includes(val)
+      },
+      // 手动注入文本样式
+      textStyle: {
+        type: Object,
+        default: () => ({})
+      },
+      // 自定义按钮整体样式
+      customStyle: {
+        type: Object,
+        default: () => ({})
+      },
+      // 按钮类型（控制背景色）
+      type: {
+        type: String,
+        default: "default",
+        validator: (val) => ["default", "primary", "success", "danger", "warning"].includes(val)
+      },
+      // 按钮尺寸
+      size: {
+        type: String,
+        default: "large",
+        validator: (val) => ["small", "medium", "large"].includes(val)
+      },
+      // 是否圆角
+      round: {
+        type: Boolean,
+        default: false
+      },
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 默认文本（无插槽时显示）
+      text: {
+        type: String,
+        default: "按钮"
+      }
+    }
+  };
+  const _hoisted_1 = ["disabled"];
+  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("button", {
+      class: vue.normalizeClass(["SpiritEchoBtn", [
+        `SpiritEchoBtn--${$props.type}`,
+        `SpiritEchoBtn--${$props.size}`,
+        { "SpiritEchoBtn--round": $props.round },
+        { "SpiritEchoBtn--disabled": $props.disabled }
+      ]]),
+      style: vue.normalizeStyle($props.customStyle),
+      disabled: $props.disabled
+    }, [
+      vue.renderSlot(_ctx.$slots, "default", {}, () => [
+        vue.createElementVNode("span", {
+          class: vue.normalizeClass(["SpiritEchoBtn__text", `SpiritEchoBtn__text--${$props.textType}`]),
+          style: vue.normalizeStyle($props.textStyle)
+        }, vue.toDisplayString($props.text), 7)
+      ])
+    ], 14, _hoisted_1);
+  }
+  const myButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+  const injector = new ComponentInjector(MyUI);
+  injector.register("form", "myButton", myButton, {
+    type: "default",
+    size: "medium"
+  });
+  MyUI.install = (app) => {
+    app.component("MyButton", MyUI.form.myButton({}));
+  };
+  exports2.MyUI = MyUI;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});

package/dist/style.css

@@ -0,0 +1,85 @@
+.SpiritEchoBtn {
+  width: 100%;
+  height: 48px;
+  border-radius: 2px;
+  border: 1px solid #e6d4d4;
+  transition: all 0.2s ease;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.SpiritEchoBtn__text {
+  transition: all 0.2s ease;
+}
+.SpiritEchoBtn__text--default {
+  color: #541414;
+  font-size: 12px;
+  font-weight: 500;
+}
+.SpiritEchoBtn__text--primary {
+  color: #4b96d7;
+  font-size: 14px;
+  font-weight: 600;
+}
+.SpiritEchoBtn__text--success {
+  color: #67c23a;
+  font-size: 14px;
+  font-weight: 600;
+}
+.SpiritEchoBtn__text--danger {
+  color: #f56c6c;
+  font-size: 14px;
+  font-weight: 600;
+}
+.SpiritEchoBtn__text--warning {
+  color: #e6a23c;
+  font-size: 14px;
+  font-weight: 600;
+}
+.SpiritEchoBtn--default {
+  background: #fff;
+  border-color: #ddd;
+}
+.SpiritEchoBtn--primary {
+  background: #4b96d7;
+}
+.SpiritEchoBtn--success {
+  background: #67c23a;
+}
+.SpiritEchoBtn--danger {
+  background: #f56c6c;
+}
+.SpiritEchoBtn--warning {
+  background: #e6a23c;
+}
+.SpiritEchoBtn--small {
+  height: 36px;
+  padding: 0 16px;
+  font-size: 12px;
+}
+.SpiritEchoBtn--medium {
+  height: 42px;
+  padding: 0 16px;
+  font-size: 12px;
+}
+.SpiritEchoBtn--large {
+  height: 48px;
+  padding: 0 16px;
+  font-size: 12px;
+}
+.SpiritEchoBtn--round {
+  border-radius: 20px;
+}
+.SpiritEchoBtn--disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+.SpiritEchoBtn:not(.SpiritEchoBtn--disabled):hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+.SpiritEchoBtn:not(.SpiritEchoBtn--disabled):active {
+  transform: translateY(0);
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@ikun2274/spiritechoui",
+  "version": "0.1.34",
+  "main": "dist/spiritechoui.umd.cjs",
+  "module": "dist/spiritechoui.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/spiritechoui.es.js",
+      "require": "./dist/spiritechoui.umd.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "vite": "^4.4.9",
+    "vue": "^3.3.4"
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@ikun2274/spiritechoui": "^0.1.2"
+  }
+}

package/readme.md

@@ -0,0 +1,21 @@
+#  我的第一个UI组件库 SpiritEchoUI
+
+
+## 安装组件
+
+```
+ npm install @ikun2274/spiritechoui
+```
+ npm uninstall @ikun2274/spiritechoui
+## 更新日志
+
+#### 0.1.3 (2025-11-06-13:25)
+
+
+
+## 后续规划
+
+
+#### v0.2.x：新增表单组件（输入框、选择器等），完善按钮与表单的联动。
+#### v0.3.x：补充布局工具类，支持更灵活的响应式场景。
+#### v0.4.x：还不知道

package/src/ComponentInjector.js

@@ -0,0 +1,37 @@
+// src/ComponentInjector.js
+export default class ComponentInjector {
+  constructor(target) {
+    this.target = target; // 接收主类 MyUI
+  }
+
+  /**
+   * 核心方法：注册组件为「分类的下属函数」
+   * @param {string} category 分类名称（如 'form'，作为主类的属性）
+   * @param {string} subMethodName 下属函数名（如 'myButton'，作为分类的下属函数）
+   * @param {Object} component 组件定义（.vue 文件）
+   * @param {Object} defaultOptions 组件默认配置
+   */
+  registerAsSubMethod(category, subMethodName, component, defaultOptions = {}) {
+    // 1. 确保主类下存在该分类（不存在则自动创建分类对象）
+    if (!this.target[category]) {
+      this.target[category] = {}; // 如：MyUI.form = {}
+    }
+
+    // 2. 将组件方法挂载为「分类的下属函数」
+    this.target[category][subMethodName] = (registerOptions = {}) => {
+      // 合并默认配置和注册时的自定义配置
+      const mergedConfig = { ...defaultOptions, ...registerOptions };
+      // 返回带配置的组件（供 Vue 注册使用）
+      return {
+        ...component,
+        props: {
+          ...component.props,
+          default: () => mergedConfig
+        }
+      };
+    };
+  }
+
+  // 可选：保留原 register 方法，兼容之前的调用习惯（本质和 registerAsSubMethod 一致）
+  register = this.registerAsSubMethod;
+}

package/src/MyUI.js

@@ -0,0 +1,24 @@
+// src/MyUI.js
+// 主类：对外暴露组件方法的入口（如MyUI.button()、MyUI.dialog()）
+export default class MyUI {
+  /**
+   * 支持 app.use(MyUI) 注册的静态方法
+   * @param {import('vue').App} app Vue 应用实例
+   * @param {Object} options 可选配置（如自定义组件前缀等）
+   */
+  static install(app, options = {}) {
+    // 遍历所有已注册的分类（如 'form'、'feedback' 等）
+    Object.keys(this).forEach(category => {
+      const components = this[category];
+      // 遍历分类下的所有组件方法
+      Object.keys(components).forEach(componentName => {
+        // 执行组件方法获取带配置的组件（使用默认配置）
+        const component = components[componentName]();
+        // 转换组件名为 kebab-case（如 myButton → my-button）
+        const kebabCaseName = componentName.replace(/[A-Z]/g, '-$&').toLowerCase();
+        // 全局注册组件
+        app.component(kebabCaseName, component);
+      });
+    });
+  }
+}

package/src/components/Button.vue

@@ -0,0 +1,187 @@
+<template>
+  <button
+    class="SpiritEchoBtn"
+    :class="[
+      `SpiritEchoBtn--${type}`,
+      `SpiritEchoBtn--${size}`,
+      { 'SpiritEchoBtn--round': round },
+      { 'SpiritEchoBtn--disabled': disabled },
+    ]"
+    :style="customStyle"
+    :disabled="disabled"
+  >
+    <!-- 主要内容插槽（支持HTML标签） -->
+    <slot>
+      <!-- 默认文本（当无插槽内容时显示） -->
+      <span
+        class="SpiritEchoBtn__text"
+        :class="`SpiritEchoBtn__text--${textType}`"
+        :style="textStyle"
+      >
+        {{ text }}
+      </span>
+    </slot>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    // 文本样式类型
+    textType: {
+      type: String,
+      default: "default",
+      validator: (val) =>
+        ["default", "primary", "success", "danger", "warning"].includes(val),
+    },
+    // 手动注入文本样式
+    textStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 自定义按钮整体样式
+    customStyle: {
+      type: Object,
+      default: () => ({}),
+    },
+    // 按钮类型（控制背景色）
+    type: {
+      type: String,
+      default: "default",
+      validator: (val) =>
+        ["default", "primary", "success", "danger", "warning"].includes(val),
+    },
+    // 按钮尺寸
+    size: {
+      type: String,
+      default: "large",
+      validator: (val) => ["small", "medium", "large"].includes(val),
+    },
+    // 是否圆角
+    round: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    // 默认文本（无插槽时显示）
+    text: {
+      type: String,
+      default: "按钮",
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+  @use 'sass:map';
+
+// 核心变量（精简且可维护）
+$btn-height: (
+  small: 36px,
+  medium: 42px,
+  large: 48px
+);
+$btn-border-radius: (
+  default: 2px,
+  round: 20px
+);
+$btn-border-color: #e6d4d4;
+$btn-transition: all 0.2s ease;
+$hover-opacity: 0.9;
+$disabled-opacity: 0.7;
+
+// 文本颜色变量
+$text-colors: (
+  default: #541414,
+  primary: #4b96d7,
+  success: #67c23a,
+  danger: #f56c6c,
+  warning: #e6a23c
+);
+
+// 按钮背景色变量
+$bg-colors: (
+  default: #fff,
+  primary: #4b96d7,
+  success: #67c23a,
+  danger: #f56c6c,
+  warning: #e6a23c
+);
+
+
+.SpiritEchoBtn {
+
+
+  // 基础样式
+  width: 100%;
+  height: map-get($btn-height, large); 
+  border-radius: map-get($btn-border-radius, default);
+  border: 1px solid $btn-border-color;
+  transition: $btn-transition;
+  cursor: pointer;
+  display: inline-flex; // 支持内部元素对齐
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box; // 盒模型统一（避免宽度溢出）
+
+  // 文本样式
+  &__text {
+    transition: $btn-transition;
+  }
+
+  // 文本主题颜色（循环生成，精简代码）
+  @each $key, $color in $text-colors {
+    &__text--#{$key} {
+      color: $color;
+      font-size: if($key == default, 12px, 14px); // 基础文本稍小
+      font-weight: if($key == default, 500, 600);
+    }
+  }
+
+  // 按钮类型背景色（循环生成）
+  @each $key, $color in $bg-colors {
+    &--#{$key} {
+      background: $color;
+      // 默认类型单独处理边框
+      @if $key == default {
+        border-color: #ddd;
+      }
+    }
+  }
+
+  // 尺寸样式（循环生成）
+  @each $key, $height in $btn-height {
+    &--#{$key} {
+      height: $height;
+      padding: 0 16px; // 统一内边距，避免内容挤压
+      font-size: 12px;
+    }
+  }
+
+  // 圆角样式
+  &--round {
+    border-radius: map-get($btn-border-radius, round);
+  }
+
+  // 禁用状态
+  &--disabled {
+    cursor: not-allowed;
+    opacity: $disabled-opacity;
+  }
+
+  // 交互效果（排除禁用状态）
+  &:not(&--disabled) {
+    &:hover {
+      opacity: $hover-opacity;
+      transform: translateY(-1px);
+    }
+    &:active {
+      transform: translateY(0);
+    }
+  }
+}
+</style>

package/src/index.js

@@ -0,0 +1,6 @@
+// 导出已注册组件的MyUI类
+import MyUI from './registerComponents';
+
+export { MyUI };
+// 若需按需导出单个方法，可添加：
+// export const myButton = MyUI.myButton;

package/src/registerComponents.js

@@ -0,0 +1,30 @@
+// 组件库内部的 registerComponents.js 示例
+import MyUI from './MyUI';
+import ComponentInjector from './ComponentInjector';
+import myButton from './components/Button.vue';
+
+const injector = new ComponentInjector(MyUI);
+injector.register('form', 'myButton', myButton, {
+  type: 'default',
+  size: 'medium'
+});
+
+//假设有第二个组件
+
+/*
+injector.register('form', 'mytext', mytext, {
+type: 'default',
+size: 'medium'
+});
+
+ 
+*/
+
+
+MyUI.install = (app) => {
+  app.component('MyButton', MyUI.form.myButton({}));
+  //假设有第二个组件
+  //app.component('MyText', MyUI.form.mytext({}));
+};
+
+export default MyUI;

package/vite.config.js

@@ -0,0 +1,31 @@
+// 组件库的 vite.config.js
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+    plugins: [vue()],
+    build: {
+        lib: {
+            entry: './src/index.js',
+            name: 'MyCustomUI',
+            fileName: (format) => `spiritechoui.${format}.js`
+        },
+        rollupOptions: {
+            external: ['vue'],
+            output: {
+                globals: {
+                    vue: 'Vue'
+                }
+            }
+        },
+        css: {
+            extract: {
+                filename: 'style.css', // 编译后样式文件名
+            },
+        },
+        cssCodeSplit: false,
+
+        minify: false
+        // 可选：关闭压缩方便调试
+    }
+});