@keqi.gress/plugin-ui 1.0.0

package/README.md

@@ -0,0 +1,155 @@
+# @gress/plugin-ui
+
+Gress 插件 UI 组件和样式包 - 提供统一的设计系统和通用组件
+
+## 📦 安装
+
+```bash
+npm install @gress/plugin-ui @gress/plugin-bridge
+```
+
+## 🚀 快速开始
+
+### 导入样式
+
+在你的插件入口文件中导入样式：
+
+```typescript
+import '@gress/plugin-ui/dist/style.css'
+```
+
+### 使用 Composables
+
+```typescript
+import { useLoadingState, useResponsive } from '@gress/plugin-ui'
+
+// 加载状态管理
+const { loading, error, isEmpty, execute } = useLoadingState()
+
+await execute(async () => {
+  const data = await fetchData()
+  return data
+}, {
+  checkEmpty: (data) => data.length === 0
+})
+
+// 响应式工具
+const { isMobile, isTablet, isDesktop } = useResponsive()
+```
+
+### 使用组件
+
+```vue
+<template>
+  <LoadingState v-if="loading" />
+  <EmptyState v-else-if="isEmpty" title="暂无数据" />
+  <ErrorState v-else-if="error" :error="error" />
+  <div v-else>
+    <!-- 你的内容 -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { LoadingState, EmptyState, ErrorState } from '@gress/plugin-ui'
+</script>
+```
+
+## 📚 API 文档
+
+### Composables
+
+#### `useLoadingState(options?)`
+
+统一管理加载、错误和空状态。
+
+**参数：**
+- `options.initialLoading` - 初始加载状态
+- `options.onError` - 错误回调
+
+**返回值：**
+- `loading` - 加载状态
+- `error` - 错误对象
+- `isEmpty` - 空状态
+- `execute(fn, options?)` - 执行异步操作
+
+#### `useResponsive()`
+
+响应式断点检测。
+
+**返回值：**
+- `isMobile` - 是否移动端 (< 768px)
+- `isTablet` - 是否平板 (768px - 1280px)
+- `isDesktop` - 是否桌面端 (>= 1280px)
+- `width` - 窗口宽度
+- `height` - 窗口高度
+
+### 组件
+
+#### `<LoadingState />`
+
+加载状态组件。
+
+#### `<EmptyState />`
+
+空状态组件。
+
+**Props：**
+- `title` - 标题
+- `description` - 描述
+
+#### `<ErrorState />`
+
+错误状态组件。
+
+**Props：**
+- `error` - 错误对象或字符串
+- `title` - 标题
+
+## 🎨 CSS 变量
+
+包提供了完整的 CSS 变量系统，与主应用保持一致：
+
+```css
+/* 颜色 */
+--primary
+--success
+--warning
+--error
+--info
+
+/* 文本颜色 */
+--text-primary
+--text-secondary
+--text-tertiary
+
+/* 背景颜色 */
+--bg-primary
+--bg-secondary
+
+/* 间距 */
+--spacing-xs
+--spacing-sm
+--spacing-md
+--spacing-lg
+--spacing-xl
+
+/* 圆角 */
+--radius-sm
+--radius-md
+--radius-lg
+
+/* 阴影 */
+--shadow-sm
+--shadow-md
+--shadow-lg
+
+/* 字体 */
+--font-size-xs
+--font-size-sm
+--font-size-md
+--font-size-lg
+```
+
+## 📄 License
+
+MIT

package/dist/composables/useLoadingState.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 加载状态管理 Composable
+ * 统一管理加载、错误和空状态
+ */
+export interface LoadingState {
+    loading: boolean;
+    error: Error | null;
+    isEmpty: boolean;
+}
+export interface UseLoadingStateOptions {
+    initialLoading?: boolean;
+    onError?: (error: Error) => void;
+}
+export declare function useLoadingState(options?: UseLoadingStateOptions): {
+    loading: import("vue").Ref<boolean, boolean>;
+    error: import("vue").Ref<Error | null, Error | null>;
+    isEmpty: import("vue").Ref<boolean, boolean>;
+    isLoading: import("vue").ComputedRef<boolean>;
+    hasError: import("vue").ComputedRef<boolean>;
+    isEmptyState: import("vue").ComputedRef<boolean>;
+    startLoading: () => void;
+    stopLoading: () => void;
+    setError: (err: Error | string) => void;
+    clearError: () => void;
+    setEmpty: (empty: boolean) => void;
+    reset: () => void;
+    execute: <T>(fn: () => Promise<T>, options?: {
+        checkEmpty?: (result: T) => boolean;
+        onSuccess?: (result: T) => void;
+        onError?: (error: Error) => void;
+    }) => Promise<T | null>;
+};
+//# sourceMappingURL=useLoadingState.d.ts.map

package/dist/composables/useLoadingState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLoadingState.d.ts","sourceRoot":"","sources":["../../src/composables/useLoadingState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,sBAAsB;IACrC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACjC;AAED,wBAAgB,eAAe,CAAC,OAAO,GAAE,sBAA2B;;;;;;;;;oBA8B3C,KAAK,GAAG,MAAM;;sBAmBZ,OAAO;;cAgBT,CAAC,MAClB,MAAM,OAAO,CAAC,CAAC,CAAC,YACV;QACR,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,OAAO,CAAA;QACnC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAA;QAC/B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;KACjC,KACA,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC;EAmDrB"}

package/dist/composables/useResponsive.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 响应式设计 Composable
+ * 提供断点检测和响应式工具
+ */
+import { type ComputedRef, type Ref } from 'vue';
+export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface BreakpointValues {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+}
+export declare const breakpoints: BreakpointValues;
+export interface UseResponsiveReturn {
+    windowWidth: Ref<number>;
+    currentBreakpoint: ComputedRef<Breakpoint>;
+    isMobile: ComputedRef<boolean>;
+    isTablet: ComputedRef<boolean>;
+    isDesktop: ComputedRef<boolean>;
+    isSmaller: (breakpoint: Breakpoint) => ComputedRef<boolean>;
+    isLarger: (breakpoint: Breakpoint) => ComputedRef<boolean>;
+    isBetween: (min: Breakpoint, max: Breakpoint) => ComputedRef<boolean>;
+    responsive: <T>(values: Partial<Record<Breakpoint, T>>, defaultValue: T) => T;
+    getResponsiveColumns: (config?: {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        '2xl'?: number;
+    }) => number;
+    getResponsiveSpacing: (config?: {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+    }) => number;
+    breakpoints: BreakpointValues;
+}
+export declare function useResponsive(): UseResponsiveReturn;
+//# sourceMappingURL=useResponsive.d.ts.map

package/dist/composables/useResponsive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsive.d.ts","sourceRoot":"","sources":["../../src/composables/useResponsive.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAyC,KAAK,WAAW,EAAE,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAEvF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAA;AAEjE,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,WAAW,EAAE,gBAOzB,CAAA;AAED,MAAM,WAAW,mBAAmB;IAElC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACxB,iBAAiB,EAAE,WAAW,CAAC,UAAU,CAAC,CAAA;IAG1C,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC9B,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC9B,SAAS,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAG/B,SAAS,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,CAAA;IAC3D,QAAQ,EAAE,CAAC,UAAU,EAAE,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,CAAA;IAC1D,SAAS,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,GAAG,EAAE,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,CAAA;IACrE,UAAU,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,KAAK,CAAC,CAAA;IAC7E,oBAAoB,EAAE,CAAC,MAAM,CAAC,EAAE;QAC9B,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,KAAK,MAAM,CAAA;IACZ,oBAAoB,EAAE,CAAC,MAAM,CAAC,EAAE;QAC9B,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,EAAE,CAAC,EAAE,MAAM,CAAA;QACX,EAAE,CAAC,EAAE,MAAM,CAAA;KACZ,KAAK,MAAM,CAAA;IAGZ,WAAW,EAAE,gBAAgB,CAAA;CAC9B;AAED,wBAAgB,aAAa,IAAI,mBAAmB,CAuInD"}

package/dist/index.cjs

@@ -0,0 +1,327 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+function useLoadingState(options = {}) {
+  const { initialLoading = false, onError } = options;
+  const loading = vue.ref(initialLoading);
+  const error = vue.ref(null);
+  const isEmpty = vue.ref(false);
+  const isLoading = vue.computed(() => loading.value);
+  const hasError = vue.computed(() => error.value !== null);
+  const isEmptyState = vue.computed(() => isEmpty.value && !loading.value && !error.value);
+  const startLoading = () => {
+    loading.value = true;
+    error.value = null;
+    isEmpty.value = false;
+  };
+  const stopLoading = () => {
+    loading.value = false;
+  };
+  const setError = (err) => {
+    loading.value = false;
+    error.value = err instanceof Error ? err : new Error(err);
+    if (onError && error.value) {
+      onError(error.value);
+    }
+  };
+  const clearError = () => {
+    error.value = null;
+  };
+  const setEmpty = (empty) => {
+    isEmpty.value = empty;
+  };
+  const reset = () => {
+    loading.value = false;
+    error.value = null;
+    isEmpty.value = false;
+  };
+  const execute = async (fn, options2) => {
+    try {
+      startLoading();
+      const result = await fn();
+      if (options2 == null ? void 0 : options2.checkEmpty) {
+        isEmpty.value = options2.checkEmpty(result);
+      }
+      if (options2 == null ? void 0 : options2.onSuccess) {
+        options2.onSuccess(result);
+      }
+      return result;
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error(String(err));
+      setError(errorObj);
+      if (options2 == null ? void 0 : options2.onError) {
+        options2.onError(errorObj);
+      }
+      return null;
+    } finally {
+      stopLoading();
+    }
+  };
+  return {
+    // 状态
+    loading,
+    error,
+    isEmpty,
+    // 计算属性
+    isLoading,
+    hasError,
+    isEmptyState,
+    // 方法
+    startLoading,
+    stopLoading,
+    setError,
+    clearError,
+    setEmpty,
+    reset,
+    execute
+  };
+}
+const breakpoints = {
+  xs: 480,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function useResponsive() {
+  const windowWidth = vue.ref(typeof window !== "undefined" ? window.innerWidth : 1024);
+  const updateWidth = () => {
+    windowWidth.value = window.innerWidth;
+  };
+  vue.onMounted(() => {
+    window.addEventListener("resize", updateWidth);
+  });
+  vue.onUnmounted(() => {
+    window.removeEventListener("resize", updateWidth);
+  });
+  const currentBreakpoint = vue.computed(() => {
+    const width = windowWidth.value;
+    if (width < breakpoints.xs) return "xs";
+    if (width < breakpoints.sm) return "xs";
+    if (width < breakpoints.md) return "sm";
+    if (width < breakpoints.lg) return "md";
+    if (width < breakpoints.xl) return "lg";
+    if (width < breakpoints["2xl"]) return "xl";
+    return "2xl";
+  });
+  const isMobile = vue.computed(() => windowWidth.value < breakpoints.md);
+  const isTablet = vue.computed(
+    () => windowWidth.value >= breakpoints.md && windowWidth.value < breakpoints.lg
+  );
+  const isDesktop = vue.computed(() => windowWidth.value >= breakpoints.lg);
+  const isSmaller = (breakpoint) => {
+    return vue.computed(() => windowWidth.value < breakpoints[breakpoint]);
+  };
+  const isLarger = (breakpoint) => {
+    return vue.computed(() => windowWidth.value >= breakpoints[breakpoint]);
+  };
+  const isBetween = (min, max) => {
+    return vue.computed(
+      () => windowWidth.value >= breakpoints[min] && windowWidth.value < breakpoints[max]
+    );
+  };
+  const responsive = (values, defaultValue) => {
+    const bp = currentBreakpoint.value;
+    const breakpointOrder = ["2xl", "xl", "lg", "md", "sm", "xs"];
+    const currentIndex = breakpointOrder.indexOf(bp);
+    for (let i = currentIndex; i < breakpointOrder.length; i++) {
+      const key = breakpointOrder[i];
+      if (values[key] !== void 0) {
+        return values[key];
+      }
+    }
+    return defaultValue;
+  };
+  const getResponsiveColumns = (config) => {
+    const defaultConfig = {
+      xs: 1,
+      sm: 1,
+      md: 2,
+      lg: 3,
+      xl: 4,
+      "2xl": 4
+    };
+    const finalConfig = { ...defaultConfig, ...config };
+    return responsive(finalConfig, 1);
+  };
+  const getResponsiveSpacing = (config) => {
+    const defaultConfig = {
+      xs: 8,
+      sm: 12,
+      md: 16,
+      lg: 24
+    };
+    const finalConfig = { ...defaultConfig, ...config };
+    return responsive(finalConfig, 16);
+  };
+  return {
+    // 状态
+    windowWidth,
+    currentBreakpoint,
+    // 计算属性
+    isMobile,
+    isTablet,
+    isDesktop,
+    // 方法
+    isSmaller,
+    isLarger,
+    isBetween,
+    responsive,
+    getResponsiveColumns,
+    getResponsiveSpacing,
+    // 断点值
+    breakpoints
+  };
+}
+const _hoisted_1$2 = { class: "loading-container" };
+const _hoisted_2$2 = {
+  key: 0,
+  class: "loading-message"
+};
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  __name: "LoadingState",
+  props: {
+    message: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
+        _cache[0] || (_cache[0] = vue.createElementVNode("div", { class: "loading-spinner" }, null, -1)),
+        __props.message ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2$2, vue.toDisplayString(__props.message), 1)) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const LoadingState = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-88be2f1a"]]);
+const _hoisted_1$1 = { class: "empty-state" };
+const _hoisted_2$1 = { class: "empty-icon" };
+const _hoisted_3$1 = { class: "empty-title" };
+const _hoisted_4$1 = {
+  key: 0,
+  class: "empty-description"
+};
+const _hoisted_5$1 = {
+  key: 1,
+  class: "empty-action"
+};
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "EmptyState",
+  props: {
+    title: { default: "暂无数据" },
+    description: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+        vue.createElementVNode("div", _hoisted_2$1, [
+          vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+            _cache[0] || (_cache[0] = vue.createElementVNode("svg", {
+              width: "64",
+              height: "64",
+              viewBox: "0 0 64 64",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg"
+            }, [
+              vue.createElementVNode("path", {
+                d: "M32 8C18.745 8 8 18.745 8 32s10.745 24 24 24 24-10.745 24-24S45.255 8 32 8zm0 44c-11.028 0-20-8.972-20-20s8.972-20 20-20 20 8.972 20 20-8.972 20-20 20z",
+                fill: "currentColor",
+                opacity: "0.3"
+              }),
+              vue.createElementVNode("path", {
+                d: "M32 24c-1.105 0-2 .895-2 2v12c0 1.105.895 2 2 2s2-.895 2-2V26c0-1.105-.895-2-2-2zm0 20c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2z",
+                fill: "currentColor"
+              })
+            ], -1))
+          ], true)
+        ]),
+        vue.createElementVNode("h3", _hoisted_3$1, vue.toDisplayString(__props.title), 1),
+        __props.description ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_4$1, vue.toDisplayString(__props.description), 1)) : vue.createCommentVNode("", true),
+        _ctx.$slots.action ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [
+          vue.renderSlot(_ctx.$slots, "action", {}, void 0, true)
+        ])) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const EmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-12ee016f"]]);
+const _hoisted_1 = { class: "error-container" };
+const _hoisted_2 = { class: "error-icon" };
+const _hoisted_3 = { class: "error-title" };
+const _hoisted_4 = { class: "error-message" };
+const _hoisted_5 = {
+  key: 0,
+  class: "error-action"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "ErrorState",
+  props: {
+    error: {},
+    title: { default: "出错了" },
+    showRetry: { type: Boolean, default: false }
+  },
+  emits: ["retry"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const errorMessage = vue.computed(() => {
+      if (!props.error) return "发生了未知错误";
+      if (typeof props.error === "string") return props.error;
+      return props.error.message || "发生了未知错误";
+    });
+    const handleRetry = () => {
+      emit("retry");
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+            _cache[0] || (_cache[0] = vue.createElementVNode("svg", {
+              width: "64",
+              height: "64",
+              viewBox: "0 0 64 64",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg"
+            }, [
+              vue.createElementVNode("path", {
+                d: "M32 8C18.745 8 8 18.745 8 32s10.745 24 24 24 24-10.745 24-24S45.255 8 32 8zm0 44c-11.028 0-20-8.972-20-20s8.972-20 20-20 20 8.972 20 20-8.972 20-20 20z",
+                fill: "currentColor",
+                opacity: "0.3"
+              }),
+              vue.createElementVNode("path", {
+                d: "M38.828 22.172a2 2 0 00-2.828 0L32 26.172l-4-4a2 2 0 10-2.828 2.828L29.172 29l-4 4a2 2 0 102.828 2.828L32 31.828l4 4a2 2 0 102.828-2.828L34.828 29l4-4a2 2 0 000-2.828z",
+                fill: "currentColor"
+              })
+            ], -1))
+          ], true)
+        ]),
+        vue.createElementVNode("h3", _hoisted_3, vue.toDisplayString(__props.title), 1),
+        vue.createElementVNode("p", _hoisted_4, vue.toDisplayString(errorMessage.value), 1),
+        _ctx.$slots.action || __props.showRetry ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+          vue.renderSlot(_ctx.$slots, "action", {}, () => [
+            __props.showRetry ? (vue.openBlock(), vue.createElementBlock("button", {
+              key: 0,
+              onClick: handleRetry,
+              class: "error-retry-btn"
+            }, " 重试 ")) : vue.createCommentVNode("", true)
+          ], true)
+        ])) : vue.createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const ErrorState = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9bbae138"]]);
+exports.EmptyState = EmptyState;
+exports.ErrorState = ErrorState;
+exports.LoadingStateComponent = LoadingState;
+exports.breakpoints = breakpoints;
+exports.useLoadingState = useLoadingState;
+exports.useResponsive = useResponsive;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/composables/useLoadingState.ts","../src/composables/useResponsive.ts","../src/components/LoadingState.vue","../src/components/EmptyState.vue","../src/components/ErrorState.vue"],"sourcesContent":["/**\n * 加载状态管理 Composable\n * 统一管理加载、错误和空状态\n */\n\nimport { ref, computed } from 'vue'\n\nexport interface LoadingState {\n  loading: boolean\n  error: Error | null\n  isEmpty: boolean\n}\n\nexport interface UseLoadingStateOptions {\n  initialLoading?: boolean\n  onError?: (error: Error) => void\n}\n\nexport function useLoadingState(options: UseLoadingStateOptions = {}) {\n  const { initialLoading = false, onError } = options\n\n  const loading = ref(initialLoading)\n  const error = ref<Error | null>(null)\n  const isEmpty = ref(false)\n\n  const isLoading = computed(() => loading.value)\n  const hasError = computed(() => error.value !== null)\n  const isEmptyState = computed(() => isEmpty.value && !loading.value && !error.value)\n\n  /**\n   * 开始加载\n   */\n  const startLoading = () => {\n    loading.value = true\n    error.value = null\n    isEmpty.value = false\n  }\n\n  /**\n   * 停止加载\n   */\n  const stopLoading = () => {\n    loading.value = false\n  }\n\n  /**\n   * 设置错误\n   */\n  const setError = (err: Error | string) => {\n    loading.value = false\n    error.value = err instanceof Error ? err : new Error(err)\n    \n    if (onError && error.value) {\n      onError(error.value)\n    }\n  }\n\n  /**\n   * 清除错误\n   */\n  const clearError = () => {\n    error.value = null\n  }\n\n  /**\n   * 设置空状态\n   */\n  const setEmpty = (empty: boolean) => {\n    isEmpty.value = empty\n  }\n\n  /**\n   * 重置所有状态\n   */\n  const reset = () => {\n    loading.value = false\n    error.value = null\n    isEmpty.value = false\n  }\n\n  /**\n   * 执行异步操作并自动管理状态\n   */\n  const execute = async <T>(\n    fn: () => Promise<T>,\n    options?: {\n      checkEmpty?: (result: T) => boolean\n      onSuccess?: (result: T) => void\n      onError?: (error: Error) => void\n    }\n  ): Promise<T | null> => {\n    try {\n      startLoading()\n      const result = await fn()\n      \n      // 检查是否为空\n      if (options?.checkEmpty) {\n        isEmpty.value = options.checkEmpty(result)\n      }\n      \n      // 成功回调\n      if (options?.onSuccess) {\n        options.onSuccess(result)\n      }\n      \n      return result\n    } catch (err) {\n      const errorObj = err instanceof Error ? err : new Error(String(err))\n      setError(errorObj)\n      \n      // 错误回调\n      if (options?.onError) {\n        options.onError(errorObj)\n      }\n      \n      return null\n    } finally {\n      stopLoading()\n    }\n  }\n\n  return {\n    // 状态\n    loading,\n    error,\n    isEmpty,\n    \n    // 计算属性\n    isLoading,\n    hasError,\n    isEmptyState,\n    \n    // 方法\n    startLoading,\n    stopLoading,\n    setError,\n    clearError,\n    setEmpty,\n    reset,\n    execute\n  }\n}\n","/**\n * 响应式设计 Composable\n * 提供断点检测和响应式工具\n */\n\nimport { ref, computed, onMounted, onUnmounted, type ComputedRef, type Ref } from 'vue'\n\nexport type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n\nexport interface BreakpointValues {\n  xs: number\n  sm: number\n  md: number\n  lg: number\n  xl: number\n  '2xl': number\n}\n\nexport const breakpoints: BreakpointValues = {\n  xs: 480,\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  '2xl': 1536\n}\n\nexport interface UseResponsiveReturn {\n  // 状态\n  windowWidth: Ref<number>\n  currentBreakpoint: ComputedRef<Breakpoint>\n\n  // 计算属性\n  isMobile: ComputedRef<boolean>\n  isTablet: ComputedRef<boolean>\n  isDesktop: ComputedRef<boolean>\n\n  // 方法\n  isSmaller: (breakpoint: Breakpoint) => ComputedRef<boolean>\n  isLarger: (breakpoint: Breakpoint) => ComputedRef<boolean>\n  isBetween: (min: Breakpoint, max: Breakpoint) => ComputedRef<boolean>\n  responsive: <T>(values: Partial<Record<Breakpoint, T>>, defaultValue: T) => T\n  getResponsiveColumns: (config?: {\n    xs?: number\n    sm?: number\n    md?: number\n    lg?: number\n    xl?: number\n    '2xl'?: number\n  }) => number\n  getResponsiveSpacing: (config?: {\n    xs?: number\n    sm?: number\n    md?: number\n    lg?: number\n  }) => number\n\n  // 断点值\n  breakpoints: BreakpointValues\n}\n\nexport function useResponsive(): UseResponsiveReturn {\n  const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1024)\n\n  const updateWidth = () => {\n    windowWidth.value = window.innerWidth\n  }\n\n  onMounted(() => {\n    window.addEventListener('resize', updateWidth)\n  })\n\n  onUnmounted(() => {\n    window.removeEventListener('resize', updateWidth)\n  })\n\n  // 当前断点\n  const currentBreakpoint = computed<Breakpoint>(() => {\n    const width = windowWidth.value\n    \n    if (width < breakpoints.xs) return 'xs'\n    if (width < breakpoints.sm) return 'xs'\n    if (width < breakpoints.md) return 'sm'\n    if (width < breakpoints.lg) return 'md'\n    if (width < breakpoints.xl) return 'lg'\n    if (width < breakpoints['2xl']) return 'xl'\n    return '2xl'\n  })\n\n  // 是否为移动设备\n  const isMobile = computed(() => windowWidth.value < breakpoints.md)\n\n  // 是否为平板设备\n  const isTablet = computed(() => \n    windowWidth.value >= breakpoints.md && windowWidth.value < breakpoints.lg\n  )\n\n  // 是否为桌面设备\n  const isDesktop = computed(() => windowWidth.value >= breakpoints.lg)\n\n  // 是否小于指定断点\n  const isSmaller = (breakpoint: Breakpoint) => {\n    return computed(() => windowWidth.value < breakpoints[breakpoint])\n  }\n\n  // 是否大于指定断点\n  const isLarger = (breakpoint: Breakpoint) => {\n    return computed(() => windowWidth.value >= breakpoints[breakpoint])\n  }\n\n  // 是否在指定断点范围内\n  const isBetween = (min: Breakpoint, max: Breakpoint) => {\n    return computed(() => \n      windowWidth.value >= breakpoints[min] && windowWidth.value < breakpoints[max]\n    )\n  }\n\n  // 根据断点返回不同的值\n  const responsive = <T>(values: Partial<Record<Breakpoint, T>>, defaultValue: T): T => {\n    const bp = currentBreakpoint.value\n    \n    // 从当前断点向下查找\n    const breakpointOrder: Breakpoint[] = ['2xl', 'xl', 'lg', 'md', 'sm', 'xs']\n    const currentIndex = breakpointOrder.indexOf(bp)\n    \n    for (let i = currentIndex; i < breakpointOrder.length; i++) {\n      const key = breakpointOrder[i]\n      if (values[key] !== undefined) {\n        return values[key] as T\n      }\n    }\n    \n    return defaultValue\n  }\n\n  // 获取响应式列数\n  const getResponsiveColumns = (config?: {\n    xs?: number\n    sm?: number\n    md?: number\n    lg?: number\n    xl?: number\n    '2xl'?: number\n  }): number => {\n    const defaultConfig = {\n      xs: 1,\n      sm: 1,\n      md: 2,\n      lg: 3,\n      xl: 4,\n      '2xl': 4\n    }\n    \n    const finalConfig = { ...defaultConfig, ...config }\n    return responsive(finalConfig, 1)\n  }\n\n  // 获取响应式间距\n  const getResponsiveSpacing = (config?: {\n    xs?: number\n    sm?: number\n    md?: number\n    lg?: number\n  }): number => {\n    const defaultConfig = {\n      xs: 8,\n      sm: 12,\n      md: 16,\n      lg: 24\n    }\n    \n    const finalConfig = { ...defaultConfig, ...config }\n    return responsive(finalConfig, 16)\n  }\n\n  return {\n    // 状态\n    windowWidth,\n    currentBreakpoint,\n    \n    // 计算属性\n    isMobile,\n    isTablet,\n    isDesktop,\n    \n    // 方法\n    isSmaller,\n    isLarger,\n    isBetween,\n    responsive,\n    getResponsiveColumns,\n    getResponsiveSpacing,\n    \n    // 断点值\n    breakpoints\n  }\n}\n","<template>\n  <div class=\"loading-container\">\n    <div class=\"loading-spinner\"></div>\n    <p v-if=\"message\" class=\"loading-message\">{{ message }}</p>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\ndefineProps<{\n  message?: string\n}>()\n</script>\n\n<style scoped>\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 200px;\n  padding: var(--spacing-4xl, 40px);\n}\n\n.loading-spinner {\n  width: 40px;\n  height: 40px;\n  border: 3px solid var(--border-secondary, #f0f2f5);\n  border-top-color: var(--primary, #6366f1);\n  border-radius: var(--radius-full, 9999px);\n  animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-message {\n  margin-top: var(--spacing-lg, 16px);\n  font-size: var(--font-size-sm, 12px);\n  color: var(--text-secondary, #4e5969);\n}\n</style>\n","<template>\n  <div class=\"empty-state\">\n    <div class=\"empty-icon\">\n      <slot name=\"icon\">\n        <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M32 8C18.745 8 8 18.745 8 32s10.745 24 24 24 24-10.745 24-24S45.255 8 32 8zm0 44c-11.028 0-20-8.972-20-20s8.972-20 20-20 20 8.972 20 20-8.972 20-20 20z\" fill=\"currentColor\" opacity=\"0.3\"/>\n          <path d=\"M32 24c-1.105 0-2 .895-2 2v12c0 1.105.895 2 2 2s2-.895 2-2V26c0-1.105-.895-2-2-2zm0 20c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2z\" fill=\"currentColor\"/>\n        </svg>\n      </slot>\n    </div>\n    <h3 class=\"empty-title\">{{ title }}</h3>\n    <p v-if=\"description\" class=\"empty-description\">{{ description }}</p>\n    <div v-if=\"$slots.action\" class=\"empty-action\">\n      <slot name=\"action\"></slot>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nwithDefaults(defineProps<{\n  title?: string\n  description?: string\n}>(), {\n  title: '暂无数据'\n})\n</script>\n\n<style scoped>\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-5xl, 48px) var(--spacing-2xl, 24px);\n  text-align: center;\n}\n\n.empty-icon {\n  font-size: 48px;\n  color: var(--text-quaternary, #c9cdd4);\n  margin-bottom: var(--spacing-lg, 16px);\n}\n\n.empty-title {\n  font-size: var(--font-size-lg, 16px);\n  font-weight: var(--font-weight-medium, 500);\n  color: var(--text-secondary, #4e5969);\n  margin-bottom: var(--spacing-sm, 8px);\n}\n\n.empty-description {\n  font-size: var(--font-size-sm, 12px);\n  color: var(--text-tertiary, #86909c);\n  max-width: 400px;\n  margin: 0;\n}\n\n.empty-action {\n  margin-top: var(--spacing-lg, 16px);\n}\n</style>\n","<template>\n  <div class=\"error-container\">\n    <div class=\"error-icon\">\n      <slot name=\"icon\">\n        <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M32 8C18.745 8 8 18.745 8 32s10.745 24 24 24 24-10.745 24-24S45.255 8 32 8zm0 44c-11.028 0-20-8.972-20-20s8.972-20 20-20 20 8.972 20 20-8.972 20-20 20z\" fill=\"currentColor\" opacity=\"0.3\"/>\n          <path d=\"M38.828 22.172a2 2 0 00-2.828 0L32 26.172l-4-4a2 2 0 10-2.828 2.828L29.172 29l-4 4a2 2 0 102.828 2.828L32 31.828l4 4a2 2 0 102.828-2.828L34.828 29l4-4a2 2 0 000-2.828z\" fill=\"currentColor\"/>\n        </svg>\n      </slot>\n    </div>\n    <h3 class=\"error-title\">{{ title }}</h3>\n    <p class=\"error-message\">{{ errorMessage }}</p>\n    <div v-if=\"$slots.action || showRetry\" class=\"error-action\">\n      <slot name=\"action\">\n        <button v-if=\"showRetry\" @click=\"handleRetry\" class=\"error-retry-btn\">\n          重试\n        </button>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst props = withDefaults(defineProps<{\n  error?: Error | string\n  title?: string\n  showRetry?: boolean\n}>(), {\n  title: '出错了',\n  showRetry: false\n})\n\nconst emit = defineEmits<{\n  retry: []\n}>()\n\nconst errorMessage = computed(() => {\n  if (!props.error) return '发生了未知错误'\n  if (typeof props.error === 'string') return props.error\n  return props.error.message || '发生了未知错误'\n})\n\nconst handleRetry = () => {\n  emit('retry')\n}\n</script>\n\n<style scoped>\n.error-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-4xl, 40px) var(--spacing-2xl, 24px);\n  text-align: center;\n}\n\n.error-icon {\n  font-size: 48px;\n  color: var(--error, #ef4444);\n  margin-bottom: var(--spacing-lg, 16px);\n}\n\n.error-title {\n  font-size: var(--font-size-lg, 16px);\n  font-weight: var(--font-weight-semibold, 600);\n  color: var(--error, #ef4444);\n  margin-bottom: var(--spacing-sm, 8px);\n}\n\n.error-message {\n  font-size: var(--font-size-sm, 12px);\n  color: var(--text-secondary, #4e5969);\n  max-width: 500px;\n  margin: 0 0 var(--spacing-lg, 16px);\n}\n\n.error-action {\n  margin-top: var(--spacing-lg, 16px);\n}\n\n.error-retry-btn {\n  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);\n  font-size: var(--font-size-sm, 12px);\n  color: white;\n  background-color: var(--primary, #6366f1);\n  border: none;\n  border-radius: var(--radius-md, 8px);\n  cursor: pointer;\n  transition: opacity var(--transition-fast, 0.15s) ease;\n}\n\n.error-retry-btn:hover {\n  opacity: 0.8;\n}\n\n.error-retry-btn:active {\n  opacity: 0.6;\n}\n</style>\n"],"names":["ref","computed","options","onMounted","onUnmounted","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_toDisplayString","_renderSlot","_hoisted_3","_hoisted_4","$slots","_hoisted_5"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @gress/plugin-ui
+ *
+ * Gress 插件 UI 组件和样式包
+ * 提供统一的设计系统和通用组件
+ */
+export { useLoadingState } from './composables/useLoadingState';
+export type { LoadingState, UseLoadingStateOptions } from './composables/useLoadingState';
+export { useResponsive, breakpoints } from './composables/useResponsive';
+export type { UseResponsiveReturn, Breakpoint, BreakpointValues } from './composables/useResponsive';
+export { default as LoadingStateComponent } from './components/LoadingState.vue';
+export { default as EmptyState } from './components/EmptyState.vue';
+export { default as ErrorState } from './components/ErrorState.vue';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAC/D,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAA;AAEzF,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAA;AACxE,YAAY,EAAE,mBAAmB,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AAKpG,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,+BAA+B,CAAA;AAChF,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAA"}

package/dist/index.js

@@ -0,0 +1,327 @@
+import { ref, computed, onMounted, onUnmounted, defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, renderSlot } from "vue";
+function useLoadingState(options = {}) {
+  const { initialLoading = false, onError } = options;
+  const loading = ref(initialLoading);
+  const error = ref(null);
+  const isEmpty = ref(false);
+  const isLoading = computed(() => loading.value);
+  const hasError = computed(() => error.value !== null);
+  const isEmptyState = computed(() => isEmpty.value && !loading.value && !error.value);
+  const startLoading = () => {
+    loading.value = true;
+    error.value = null;
+    isEmpty.value = false;
+  };
+  const stopLoading = () => {
+    loading.value = false;
+  };
+  const setError = (err) => {
+    loading.value = false;
+    error.value = err instanceof Error ? err : new Error(err);
+    if (onError && error.value) {
+      onError(error.value);
+    }
+  };
+  const clearError = () => {
+    error.value = null;
+  };
+  const setEmpty = (empty) => {
+    isEmpty.value = empty;
+  };
+  const reset = () => {
+    loading.value = false;
+    error.value = null;
+    isEmpty.value = false;
+  };
+  const execute = async (fn, options2) => {
+    try {
+      startLoading();
+      const result = await fn();
+      if (options2 == null ? void 0 : options2.checkEmpty) {
+        isEmpty.value = options2.checkEmpty(result);
+      }
+      if (options2 == null ? void 0 : options2.onSuccess) {
+        options2.onSuccess(result);
+      }
+      return result;
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error(String(err));
+      setError(errorObj);
+      if (options2 == null ? void 0 : options2.onError) {
+        options2.onError(errorObj);
+      }
+      return null;
+    } finally {
+      stopLoading();
+    }
+  };
+  return {
+    // 状态
+    loading,
+    error,
+    isEmpty,
+    // 计算属性
+    isLoading,
+    hasError,
+    isEmptyState,
+    // 方法
+    startLoading,
+    stopLoading,
+    setError,
+    clearError,
+    setEmpty,
+    reset,
+    execute
+  };
+}
+const breakpoints = {
+  xs: 480,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function useResponsive() {
+  const windowWidth = ref(typeof window !== "undefined" ? window.innerWidth : 1024);
+  const updateWidth = () => {
+    windowWidth.value = window.innerWidth;
+  };
+  onMounted(() => {
+    window.addEventListener("resize", updateWidth);
+  });
+  onUnmounted(() => {
+    window.removeEventListener("resize", updateWidth);
+  });
+  const currentBreakpoint = computed(() => {
+    const width = windowWidth.value;
+    if (width < breakpoints.xs) return "xs";
+    if (width < breakpoints.sm) return "xs";
+    if (width < breakpoints.md) return "sm";
+    if (width < breakpoints.lg) return "md";
+    if (width < breakpoints.xl) return "lg";
+    if (width < breakpoints["2xl"]) return "xl";
+    return "2xl";
+  });
+  const isMobile = computed(() => windowWidth.value < breakpoints.md);
+  const isTablet = computed(
+    () => windowWidth.value >= breakpoints.md && windowWidth.value < breakpoints.lg
+  );
+  const isDesktop = computed(() => windowWidth.value >= breakpoints.lg);
+  const isSmaller = (breakpoint) => {
+    return computed(() => windowWidth.value < breakpoints[breakpoint]);
+  };
+  const isLarger = (breakpoint) => {
+    return computed(() => windowWidth.value >= breakpoints[breakpoint]);
+  };
+  const isBetween = (min, max) => {
+    return computed(
+      () => windowWidth.value >= breakpoints[min] && windowWidth.value < breakpoints[max]
+    );
+  };
+  const responsive = (values, defaultValue) => {
+    const bp = currentBreakpoint.value;
+    const breakpointOrder = ["2xl", "xl", "lg", "md", "sm", "xs"];
+    const currentIndex = breakpointOrder.indexOf(bp);
+    for (let i = currentIndex; i < breakpointOrder.length; i++) {
+      const key = breakpointOrder[i];
+      if (values[key] !== void 0) {
+        return values[key];
+      }
+    }
+    return defaultValue;
+  };
+  const getResponsiveColumns = (config) => {
+    const defaultConfig = {
+      xs: 1,
+      sm: 1,
+      md: 2,
+      lg: 3,
+      xl: 4,
+      "2xl": 4
+    };
+    const finalConfig = { ...defaultConfig, ...config };
+    return responsive(finalConfig, 1);
+  };
+  const getResponsiveSpacing = (config) => {
+    const defaultConfig = {
+      xs: 8,
+      sm: 12,
+      md: 16,
+      lg: 24
+    };
+    const finalConfig = { ...defaultConfig, ...config };
+    return responsive(finalConfig, 16);
+  };
+  return {
+    // 状态
+    windowWidth,
+    currentBreakpoint,
+    // 计算属性
+    isMobile,
+    isTablet,
+    isDesktop,
+    // 方法
+    isSmaller,
+    isLarger,
+    isBetween,
+    responsive,
+    getResponsiveColumns,
+    getResponsiveSpacing,
+    // 断点值
+    breakpoints
+  };
+}
+const _hoisted_1$2 = { class: "loading-container" };
+const _hoisted_2$2 = {
+  key: 0,
+  class: "loading-message"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "LoadingState",
+  props: {
+    message: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        _cache[0] || (_cache[0] = createElementVNode("div", { class: "loading-spinner" }, null, -1)),
+        __props.message ? (openBlock(), createElementBlock("p", _hoisted_2$2, toDisplayString(__props.message), 1)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const LoadingState = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-88be2f1a"]]);
+const _hoisted_1$1 = { class: "empty-state" };
+const _hoisted_2$1 = { class: "empty-icon" };
+const _hoisted_3$1 = { class: "empty-title" };
+const _hoisted_4$1 = {
+  key: 0,
+  class: "empty-description"
+};
+const _hoisted_5$1 = {
+  key: 1,
+  class: "empty-action"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "EmptyState",
+  props: {
+    title: { default: "暂无数据" },
+    description: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createElementVNode("div", _hoisted_2$1, [
+          renderSlot(_ctx.$slots, "icon", {}, () => [
+            _cache[0] || (_cache[0] = createElementVNode("svg", {
+              width: "64",
+              height: "64",
+              viewBox: "0 0 64 64",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg"
+            }, [
+              createElementVNode("path", {
+                d: "M32 8C18.745 8 8 18.745 8 32s10.745 24 24 24 24-10.745 24-24S45.255 8 32 8zm0 44c-11.028 0-20-8.972-20-20s8.972-20 20-20 20 8.972 20 20-8.972 20-20 20z",
+                fill: "currentColor",
+                opacity: "0.3"
+              }),
+              createElementVNode("path", {
+                d: "M32 24c-1.105 0-2 .895-2 2v12c0 1.105.895 2 2 2s2-.895 2-2V26c0-1.105-.895-2-2-2zm0 20c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2z",
+                fill: "currentColor"
+              })
+            ], -1))
+          ], true)
+        ]),
+        createElementVNode("h3", _hoisted_3$1, toDisplayString(__props.title), 1),
+        __props.description ? (openBlock(), createElementBlock("p", _hoisted_4$1, toDisplayString(__props.description), 1)) : createCommentVNode("", true),
+        _ctx.$slots.action ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
+          renderSlot(_ctx.$slots, "action", {}, void 0, true)
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const EmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-12ee016f"]]);
+const _hoisted_1 = { class: "error-container" };
+const _hoisted_2 = { class: "error-icon" };
+const _hoisted_3 = { class: "error-title" };
+const _hoisted_4 = { class: "error-message" };
+const _hoisted_5 = {
+  key: 0,
+  class: "error-action"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ErrorState",
+  props: {
+    error: {},
+    title: { default: "出错了" },
+    showRetry: { type: Boolean, default: false }
+  },
+  emits: ["retry"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const errorMessage = computed(() => {
+      if (!props.error) return "发生了未知错误";
+      if (typeof props.error === "string") return props.error;
+      return props.error.message || "发生了未知错误";
+    });
+    const handleRetry = () => {
+      emit("retry");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "icon", {}, () => [
+            _cache[0] || (_cache[0] = createElementVNode("svg", {
+              width: "64",
+              height: "64",
+              viewBox: "0 0 64 64",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg"
+            }, [
+              createElementVNode("path", {
+                d: "M32 8C18.745 8 8 18.745 8 32s10.745 24 24 24 24-10.745 24-24S45.255 8 32 8zm0 44c-11.028 0-20-8.972-20-20s8.972-20 20-20 20 8.972 20 20-8.972 20-20 20z",
+                fill: "currentColor",
+                opacity: "0.3"
+              }),
+              createElementVNode("path", {
+                d: "M38.828 22.172a2 2 0 00-2.828 0L32 26.172l-4-4a2 2 0 10-2.828 2.828L29.172 29l-4 4a2 2 0 102.828 2.828L32 31.828l4 4a2 2 0 102.828-2.828L34.828 29l4-4a2 2 0 000-2.828z",
+                fill: "currentColor"
+              })
+            ], -1))
+          ], true)
+        ]),
+        createElementVNode("h3", _hoisted_3, toDisplayString(__props.title), 1),
+        createElementVNode("p", _hoisted_4, toDisplayString(errorMessage.value), 1),
+        _ctx.$slots.action || __props.showRetry ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          renderSlot(_ctx.$slots, "action", {}, () => [
+            __props.showRetry ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              onClick: handleRetry,
+              class: "error-retry-btn"
+            }, " 重试 ")) : createCommentVNode("", true)
+          ], true)
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const ErrorState = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9bbae138"]]);
+export {
+  EmptyState,
+  ErrorState,
+  LoadingState as LoadingStateComponent,
+  breakpoints,
+  useLoadingState,
+  useResponsive
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/composables/useLoadingState.ts","../src/composables/useResponsive.ts","../src/components/LoadingState.vue","../src/components/EmptyState.vue","../src/components/ErrorState.vue"],"sourcesContent":["/**\n * 加载状态管理 Composable\n * 统一管理加载、错误和空状态\n */\n\nimport { ref, computed } from 'vue'\n\nexport interface LoadingState {\n  loading: boolean\n  error: Error | null\n  isEmpty: boolean\n}\n\nexport interface UseLoadingStateOptions {\n  initialLoading?: boolean\n  onError?: (error: Error) => void\n}\n\nexport function useLoadingState(options: UseLoadingStateOptions = {}) {\n  const { initialLoading = false, onError } = options\n\n  const loading = ref(initialLoading)\n  const error = ref<Error | null>(null)\n  const isEmpty = ref(false)\n\n  const isLoading = computed(() => loading.value)\n  const hasError = computed(() => error.value !== null)\n  const isEmptyState = computed(() => isEmpty.value && !loading.value && !error.value)\n\n  /**\n   * 开始加载\n   */\n  const startLoading = () => {\n    loading.value = true\n    error.value = null\n    isEmpty.value = false\n  }\n\n  /**\n   * 停止加载\n   */\n  const stopLoading = () => {\n    loading.value = false\n  }\n\n  /**\n   * 设置错误\n   */\n  const setError = (err: Error | string) => {\n    loading.value = false\n    error.value = err instanceof Error ? err : new Error(err)\n    \n    if (onError && error.value) {\n      onError(error.value)\n    }\n  }\n\n  /**\n   * 清除错误\n   */\n  const clearError = () => {\n    error.value = null\n  }\n\n  /**\n   * 设置空状态\n   */\n  const setEmpty = (empty: boolean) => {\n    isEmpty.value = empty\n  }\n\n  /**\n   * 重置所有状态\n   */\n  const reset = () => {\n    loading.value = false\n    error.value = null\n    isEmpty.value = false\n  }\n\n  /**\n   * 执行异步操作并自动管理状态\n   */\n  const execute = async <T>(\n    fn: () => Promise<T>,\n    options?: {\n      checkEmpty?: (result: T) => boolean\n      onSuccess?: (result: T) => void\n      onError?: (error: Error) => void\n    }\n  ): Promise<T | null> => {\n    try {\n      startLoading()\n      const result = await fn()\n      \n      // 检查是否为空\n      if (options?.checkEmpty) {\n        isEmpty.value = options.checkEmpty(result)\n      }\n      \n      // 成功回调\n      if (options?.onSuccess) {\n        options.onSuccess(result)\n      }\n      \n      return result\n    } catch (err) {\n      const errorObj = err instanceof Error ? err : new Error(String(err))\n      setError(errorObj)\n      \n      // 错误回调\n      if (options?.onError) {\n        options.onError(errorObj)\n      }\n      \n      return null\n    } finally {\n      stopLoading()\n    }\n  }\n\n  return {\n    // 状态\n    loading,\n    error,\n    isEmpty,\n    \n    // 计算属性\n    isLoading,\n    hasError,\n    isEmptyState,\n    \n    // 方法\n    startLoading,\n    stopLoading,\n    setError,\n    clearError,\n    setEmpty,\n    reset,\n    execute\n  }\n}\n","/**\n * 响应式设计 Composable\n * 提供断点检测和响应式工具\n */\n\nimport { ref, computed, onMounted, onUnmounted, type ComputedRef, type Ref } from 'vue'\n\nexport type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n\nexport interface BreakpointValues {\n  xs: number\n  sm: number\n  md: number\n  lg: number\n  xl: number\n  '2xl': number\n}\n\nexport const breakpoints: BreakpointValues = {\n  xs: 480,\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  '2xl': 1536\n}\n\nexport interface UseResponsiveReturn {\n  // 状态\n  windowWidth: Ref<number>\n  currentBreakpoint: ComputedRef<Breakpoint>\n\n  // 计算属性\n  isMobile: ComputedRef<boolean>\n  isTablet: ComputedRef<boolean>\n  isDesktop: ComputedRef<boolean>\n\n  // 方法\n  isSmaller: (breakpoint: Breakpoint) => ComputedRef<boolean>\n  isLarger: (breakpoint: Breakpoint) => ComputedRef<boolean>\n  isBetween: (min: Breakpoint, max: Breakpoint) => ComputedRef<boolean>\n  responsive: <T>(values: Partial<Record<Breakpoint, T>>, defaultValue: T) => T\n  getResponsiveColumns: (config?: {\n    xs?: number\n    sm?: number\n    md?: number\n    lg?: number\n    xl?: number\n    '2xl'?: number\n  }) => number\n  getResponsiveSpacing: (config?: {\n    xs?: number\n    sm?: number\n    md?: number\n    lg?: number\n  }) => number\n\n  // 断点值\n  breakpoints: BreakpointValues\n}\n\nexport function useResponsive(): UseResponsiveReturn {\n  const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1024)\n\n  const updateWidth = () => {\n    windowWidth.value = window.innerWidth\n  }\n\n  onMounted(() => {\n    window.addEventListener('resize', updateWidth)\n  })\n\n  onUnmounted(() => {\n    window.removeEventListener('resize', updateWidth)\n  })\n\n  // 当前断点\n  const currentBreakpoint = computed<Breakpoint>(() => {\n    const width = windowWidth.value\n    \n    if (width < breakpoints.xs) return 'xs'\n    if (width < breakpoints.sm) return 'xs'\n    if (width < breakpoints.md) return 'sm'\n    if (width < breakpoints.lg) return 'md'\n    if (width < breakpoints.xl) return 'lg'\n    if (width < breakpoints['2xl']) return 'xl'\n    return '2xl'\n  })\n\n  // 是否为移动设备\n  const isMobile = computed(() => windowWidth.value < breakpoints.md)\n\n  // 是否为平板设备\n  const isTablet = computed(() => \n    windowWidth.value >= breakpoints.md && windowWidth.value < breakpoints.lg\n  )\n\n  // 是否为桌面设备\n  const isDesktop = computed(() => windowWidth.value >= breakpoints.lg)\n\n  // 是否小于指定断点\n  const isSmaller = (breakpoint: Breakpoint) => {\n    return computed(() => windowWidth.value < breakpoints[breakpoint])\n  }\n\n  // 是否大于指定断点\n  const isLarger = (breakpoint: Breakpoint) => {\n    return computed(() => windowWidth.value >= breakpoints[breakpoint])\n  }\n\n  // 是否在指定断点范围内\n  const isBetween = (min: Breakpoint, max: Breakpoint) => {\n    return computed(() => \n      windowWidth.value >= breakpoints[min] && windowWidth.value < breakpoints[max]\n    )\n  }\n\n  // 根据断点返回不同的值\n  const responsive = <T>(values: Partial<Record<Breakpoint, T>>, defaultValue: T): T => {\n    const bp = currentBreakpoint.value\n    \n    // 从当前断点向下查找\n    const breakpointOrder: Breakpoint[] = ['2xl', 'xl', 'lg', 'md', 'sm', 'xs']\n    const currentIndex = breakpointOrder.indexOf(bp)\n    \n    for (let i = currentIndex; i < breakpointOrder.length; i++) {\n      const key = breakpointOrder[i]\n      if (values[key] !== undefined) {\n        return values[key] as T\n      }\n    }\n    \n    return defaultValue\n  }\n\n  // 获取响应式列数\n  const getResponsiveColumns = (config?: {\n    xs?: number\n    sm?: number\n    md?: number\n    lg?: number\n    xl?: number\n    '2xl'?: number\n  }): number => {\n    const defaultConfig = {\n      xs: 1,\n      sm: 1,\n      md: 2,\n      lg: 3,\n      xl: 4,\n      '2xl': 4\n    }\n    \n    const finalConfig = { ...defaultConfig, ...config }\n    return responsive(finalConfig, 1)\n  }\n\n  // 获取响应式间距\n  const getResponsiveSpacing = (config?: {\n    xs?: number\n    sm?: number\n    md?: number\n    lg?: number\n  }): number => {\n    const defaultConfig = {\n      xs: 8,\n      sm: 12,\n      md: 16,\n      lg: 24\n    }\n    \n    const finalConfig = { ...defaultConfig, ...config }\n    return responsive(finalConfig, 16)\n  }\n\n  return {\n    // 状态\n    windowWidth,\n    currentBreakpoint,\n    \n    // 计算属性\n    isMobile,\n    isTablet,\n    isDesktop,\n    \n    // 方法\n    isSmaller,\n    isLarger,\n    isBetween,\n    responsive,\n    getResponsiveColumns,\n    getResponsiveSpacing,\n    \n    // 断点值\n    breakpoints\n  }\n}\n","<template>\n  <div class=\"loading-container\">\n    <div class=\"loading-spinner\"></div>\n    <p v-if=\"message\" class=\"loading-message\">{{ message }}</p>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\ndefineProps<{\n  message?: string\n}>()\n</script>\n\n<style scoped>\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 200px;\n  padding: var(--spacing-4xl, 40px);\n}\n\n.loading-spinner {\n  width: 40px;\n  height: 40px;\n  border: 3px solid var(--border-secondary, #f0f2f5);\n  border-top-color: var(--primary, #6366f1);\n  border-radius: var(--radius-full, 9999px);\n  animation: spin 0.8s linear infinite;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-message {\n  margin-top: var(--spacing-lg, 16px);\n  font-size: var(--font-size-sm, 12px);\n  color: var(--text-secondary, #4e5969);\n}\n</style>\n","<template>\n  <div class=\"empty-state\">\n    <div class=\"empty-icon\">\n      <slot name=\"icon\">\n        <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M32 8C18.745 8 8 18.745 8 32s10.745 24 24 24 24-10.745 24-24S45.255 8 32 8zm0 44c-11.028 0-20-8.972-20-20s8.972-20 20-20 20 8.972 20 20-8.972 20-20 20z\" fill=\"currentColor\" opacity=\"0.3\"/>\n          <path d=\"M32 24c-1.105 0-2 .895-2 2v12c0 1.105.895 2 2 2s2-.895 2-2V26c0-1.105-.895-2-2-2zm0 20c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2z\" fill=\"currentColor\"/>\n        </svg>\n      </slot>\n    </div>\n    <h3 class=\"empty-title\">{{ title }}</h3>\n    <p v-if=\"description\" class=\"empty-description\">{{ description }}</p>\n    <div v-if=\"$slots.action\" class=\"empty-action\">\n      <slot name=\"action\"></slot>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nwithDefaults(defineProps<{\n  title?: string\n  description?: string\n}>(), {\n  title: '暂无数据'\n})\n</script>\n\n<style scoped>\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-5xl, 48px) var(--spacing-2xl, 24px);\n  text-align: center;\n}\n\n.empty-icon {\n  font-size: 48px;\n  color: var(--text-quaternary, #c9cdd4);\n  margin-bottom: var(--spacing-lg, 16px);\n}\n\n.empty-title {\n  font-size: var(--font-size-lg, 16px);\n  font-weight: var(--font-weight-medium, 500);\n  color: var(--text-secondary, #4e5969);\n  margin-bottom: var(--spacing-sm, 8px);\n}\n\n.empty-description {\n  font-size: var(--font-size-sm, 12px);\n  color: var(--text-tertiary, #86909c);\n  max-width: 400px;\n  margin: 0;\n}\n\n.empty-action {\n  margin-top: var(--spacing-lg, 16px);\n}\n</style>\n","<template>\n  <div class=\"error-container\">\n    <div class=\"error-icon\">\n      <slot name=\"icon\">\n        <svg width=\"64\" height=\"64\" viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M32 8C18.745 8 8 18.745 8 32s10.745 24 24 24 24-10.745 24-24S45.255 8 32 8zm0 44c-11.028 0-20-8.972-20-20s8.972-20 20-20 20 8.972 20 20-8.972 20-20 20z\" fill=\"currentColor\" opacity=\"0.3\"/>\n          <path d=\"M38.828 22.172a2 2 0 00-2.828 0L32 26.172l-4-4a2 2 0 10-2.828 2.828L29.172 29l-4 4a2 2 0 102.828 2.828L32 31.828l4 4a2 2 0 102.828-2.828L34.828 29l4-4a2 2 0 000-2.828z\" fill=\"currentColor\"/>\n        </svg>\n      </slot>\n    </div>\n    <h3 class=\"error-title\">{{ title }}</h3>\n    <p class=\"error-message\">{{ errorMessage }}</p>\n    <div v-if=\"$slots.action || showRetry\" class=\"error-action\">\n      <slot name=\"action\">\n        <button v-if=\"showRetry\" @click=\"handleRetry\" class=\"error-retry-btn\">\n          重试\n        </button>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst props = withDefaults(defineProps<{\n  error?: Error | string\n  title?: string\n  showRetry?: boolean\n}>(), {\n  title: '出错了',\n  showRetry: false\n})\n\nconst emit = defineEmits<{\n  retry: []\n}>()\n\nconst errorMessage = computed(() => {\n  if (!props.error) return '发生了未知错误'\n  if (typeof props.error === 'string') return props.error\n  return props.error.message || '发生了未知错误'\n})\n\nconst handleRetry = () => {\n  emit('retry')\n}\n</script>\n\n<style scoped>\n.error-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: var(--spacing-4xl, 40px) var(--spacing-2xl, 24px);\n  text-align: center;\n}\n\n.error-icon {\n  font-size: 48px;\n  color: var(--error, #ef4444);\n  margin-bottom: var(--spacing-lg, 16px);\n}\n\n.error-title {\n  font-size: var(--font-size-lg, 16px);\n  font-weight: var(--font-weight-semibold, 600);\n  color: var(--error, #ef4444);\n  margin-bottom: var(--spacing-sm, 8px);\n}\n\n.error-message {\n  font-size: var(--font-size-sm, 12px);\n  color: var(--text-secondary, #4e5969);\n  max-width: 500px;\n  margin: 0 0 var(--spacing-lg, 16px);\n}\n\n.error-action {\n  margin-top: var(--spacing-lg, 16px);\n}\n\n.error-retry-btn {\n  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);\n  font-size: var(--font-size-sm, 12px);\n  color: white;\n  background-color: var(--primary, #6366f1);\n  border: none;\n  border-radius: var(--radius-md, 8px);\n  cursor: pointer;\n  transition: opacity var(--transition-fast, 0.15s) ease;\n}\n\n.error-retry-btn:hover {\n  opacity: 0.8;\n}\n\n.error-retry-btn:active {\n  opacity: 0.6;\n}\n</style>\n"],"names":["options","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_toDisplayString","_renderSlot","_hoisted_3","_hoisted_4","$slots","_hoisted_5"],"mappings":"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"}

package/dist/style.css

@@ -0,0 +1,101 @@
+
+.loading-container[data-v-88be2f1a] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 200px;
+  padding: var(--spacing-4xl, 40px);
+}
+.loading-spinner[data-v-88be2f1a] {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--border-secondary, #f0f2f5);
+  border-top-color: var(--primary, #6366f1);
+  border-radius: var(--radius-full, 9999px);
+  animation: spin-88be2f1a 0.8s linear infinite;
+}
+@keyframes spin-88be2f1a {
+to {
+    transform: rotate(360deg);
+}
+}
+.loading-message[data-v-88be2f1a] {
+  margin-top: var(--spacing-lg, 16px);
+  font-size: var(--font-size-sm, 12px);
+  color: var(--text-secondary, #4e5969);
+}
+
+.empty-state[data-v-12ee016f] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-5xl, 48px) var(--spacing-2xl, 24px);
+  text-align: center;
+}
+.empty-icon[data-v-12ee016f] {
+  font-size: 48px;
+  color: var(--text-quaternary, #c9cdd4);
+  margin-bottom: var(--spacing-lg, 16px);
+}
+.empty-title[data-v-12ee016f] {
+  font-size: var(--font-size-lg, 16px);
+  font-weight: var(--font-weight-medium, 500);
+  color: var(--text-secondary, #4e5969);
+  margin-bottom: var(--spacing-sm, 8px);
+}
+.empty-description[data-v-12ee016f] {
+  font-size: var(--font-size-sm, 12px);
+  color: var(--text-tertiary, #86909c);
+  max-width: 400px;
+  margin: 0;
+}
+.empty-action[data-v-12ee016f] {
+  margin-top: var(--spacing-lg, 16px);
+}
+
+.error-container[data-v-9bbae138] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-4xl, 40px) var(--spacing-2xl, 24px);
+  text-align: center;
+}
+.error-icon[data-v-9bbae138] {
+  font-size: 48px;
+  color: var(--error, #ef4444);
+  margin-bottom: var(--spacing-lg, 16px);
+}
+.error-title[data-v-9bbae138] {
+  font-size: var(--font-size-lg, 16px);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--error, #ef4444);
+  margin-bottom: var(--spacing-sm, 8px);
+}
+.error-message[data-v-9bbae138] {
+  font-size: var(--font-size-sm, 12px);
+  color: var(--text-secondary, #4e5969);
+  max-width: 500px;
+  margin: 0 0 var(--spacing-lg, 16px);
+}
+.error-action[data-v-9bbae138] {
+  margin-top: var(--spacing-lg, 16px);
+}
+.error-retry-btn[data-v-9bbae138] {
+  padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
+  font-size: var(--font-size-sm, 12px);
+  color: white;
+  background-color: var(--primary, #6366f1);
+  border: none;
+  border-radius: var(--radius-md, 8px);
+  cursor: pointer;
+  transition: opacity var(--transition-fast, 0.15s) ease;
+}
+.error-retry-btn[data-v-9bbae138]:hover {
+  opacity: 0.8;
+}
+.error-retry-btn[data-v-9bbae138]:active {
+  opacity: 0.6;
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@keqi.gress/plugin-ui",
+  "version": "1.0.0",
+  "description": "Gress 插件 UI 组件和样式包 - 提供统一的设计系统和通用组件",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "gress",
+    "plugin",
+    "ui",
+    "components",
+    "design-system"
+  ],
+  "author": "Gress Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "@keqi.gress/plugin-bridge": "file:../plugin-bridge",
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "sass": "^1.69.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.7.0",
+    "vue": "^3.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/gress.git",
+    "directory": "packages/plugin-ui"
+  }
+}