@melt-js/comps-vben 0.0.0-stage → 2026.11.8-2

package/src/common-ui/components/json-viewer/index.vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { SetupContext } from 'vue';
+
+import type { Recordable } from '@melt-js/libs-vben/types';
+
+import type {
+  JsonViewerAction,
+  JsonViewerProps,
+  JsonViewerToggle,
+  JsonViewerValue,
+} from './types';
+
+import { computed, ref, useAttrs } from 'vue';
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import JsonBigint from 'json-bigint';
+
+defineOptions({ name: 'JsonViewer' });
+
+const props = withDefaults(defineProps<JsonViewerProps>(), {
+  expandDepth: 1,
+  copyable: false,
+  sort: false,
+  boxed: false,
+  theme: 'default-json-theme',
+  expanded: false,
+  previewMode: false,
+  showArrayIndex: true,
+  showDoubleQuotes: false,
+});
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+  copied: [event: JsonViewerAction];
+  keyClick: [key: string];
+  toggle: [param: JsonViewerToggle];
+  valueClick: [value: JsonViewerValue];
+}>();
+
+const attrs: SetupContext['attrs'] = useAttrs();
+
+const copiedPath = ref<null | string>(null);
+
+const copyConfig = computed(() => {
+  return {
+    copiedText: $t('ui.jsonViewer.copied'),
+    copyText: $t('ui.jsonViewer.copy'),
+    timeout: 2000,
+  };
+});
+
+function handleCopy(node: any, defaultCopy: () => void) {
+  defaultCopy();
+  copiedPath.value = node.path;
+  emit('copied', {
+    action: 'copy',
+    text: JSON.stringify(node.content),
+    trigger: node.el ?? document.body,
+  });
+  setTimeout(() => {
+    if (copiedPath.value === node.path) {
+      copiedPath.value = null;
+    }
+  }, copyConfig.value.timeout ?? 2000);
+}
+
+// 支持显示 bigint 数据，如较长的订单号
+const jsonData = computed<Record<string, any>>(() => {
+  if (typeof props.value !== 'string') {
+    return props.value || {};
+  }
+
+  try {
+    return JsonBigint({ storeAsString: true }).parse(props.value);
+  } catch (error) {
+    console.error('JSON parse error:', error);
+    return {};
+  }
+});
+
+const bindProps = computed<Recordable<any>>(() => {
+  const prettyTheme =
+    props.theme === 'dark' || props.theme === 'dark-json-theme'
+      ? 'dark'
+      : 'light';
+
+  return {
+    ...attrs,
+    data: jsonData.value,
+    deep: props.expanded ? Infinity : props.expandDepth,
+    showDoubleQuotes: props.showDoubleQuotes,
+    showLine: props.boxed,
+    showLength: true,
+    showIcon: true,
+    theme: prettyTheme,
+    collapsedNodeLength: props.previewMode ? 0 : Infinity,
+    renderNodeActions: !!props.copyable,
+  };
+});
+</script>
+<template>
+  <div :class="[props.theme, { boxed: props.boxed }]" class="vben-json-viewer">
+    <VueJsonPretty v-bind="bindProps">
+      <template #renderNodeActions="{ node, defaultActions }">
+        <slot name="copy" :node="node" :default-actions="defaultActions">
+          <span
+            v-if="props.copyable"
+            class="vben-json-copy-btn"
+            :class="[{ 'is-copied': copiedPath === node.path }]"
+            @click.stop="handleCopy(node, defaultActions.copy)"
+          >
+            {{
+              copiedPath === node.path
+                ? copyConfig.copiedText
+                : copyConfig.copyText
+            }}
+          </span>
+        </slot>
+      </template>
+    </VueJsonPretty>
+  </div>
+</template>
+<style lang="scss">
+@use './style.scss';
+</style>

package/src/common-ui/components/json-viewer/style.scss

@@ -0,0 +1,91 @@
+.vben-json-viewer {
+  font-family: Consolas, Menlo, Courier, monospace;
+  font-size: 14px;
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+
+  &.boxed {
+    padding: 10px;
+    border: 1px solid hsl(var(--border));
+    border-radius: 4px;
+  }
+
+  .vjs-key {
+    color: hsl(var(--heavy-foreground));
+  }
+
+  .vjs-value-null,
+  .vjs-value-undefined {
+    color: hsl(var(--secondary-foreground));
+  }
+
+  .vjs-value-boolean {
+    color: hsl(var(--red-400));
+  }
+
+  .vjs-value-number {
+    color: hsl(var(--info-foreground));
+  }
+
+  .vjs-value-string {
+    color: hsl(var(--primary));
+    overflow-wrap: break-word;
+    white-space: normal;
+  }
+
+  .vjs-tree-brackets {
+    color: hsl(var(--heavy-foreground));
+  }
+
+  .vjs-comment {
+    color: hsl(var(--secondary-foreground));
+  }
+
+  .vjs-tree-node {
+    &.is-highlight {
+      background-color: hsl(var(--accent));
+    }
+  }
+
+  .vjs-carets {
+    cursor: pointer;
+
+    &:hover {
+      color: hsl(var(--primary));
+    }
+  }
+
+  .vjs-indent-unit {
+    &.has-line {
+      border-left: 1px solid hsl(var(--border));
+    }
+  }
+
+  .vben-json-copy-btn {
+    display: inline-block;
+    padding: 0 6px;
+    margin-left: 8px;
+    font-size: 12px;
+    line-height: 20px;
+    color: hsl(var(--primary));
+    cursor: pointer;
+    user-select: none;
+    background-color: hsl(var(--secondary));
+    border-radius: 3px;
+    opacity: 0;
+    transition: opacity 0.2s;
+
+    &:hover {
+      background-color: hsl(var(--accent));
+    }
+
+    &.is-copied {
+      color: hsl(var(--success-foreground, var(--primary)));
+      opacity: 1;
+    }
+  }
+
+  .vjs-tree-node:hover .vben-json-copy-btn {
+    opacity: 1;
+  }
+}

package/src/common-ui/components/json-viewer/types.ts

@@ -0,0 +1,44 @@
+export interface JsonViewerProps {
+  /** 要展示的结构数据 */
+  value: any;
+  /** 展开深度 */
+  expandDepth?: number;
+  /** 是否可复制 */
+  copyable?: boolean;
+  /** 是否排序 */
+  sort?: boolean;
+  /** 显示边框 */
+  boxed?: boolean;
+  /** 主题 */
+  theme?: string;
+  /** 是否展开 */
+  expanded?: boolean;
+  /** 时间格式化函数 */
+  timeformat?: (time: Date | number | string) => string;
+  /** 预览模式 */
+  previewMode?: boolean;
+  /** 显示数组索引 */
+  showArrayIndex?: boolean;
+  /** 显示双引号 */
+  showDoubleQuotes?: boolean;
+}
+
+export interface JsonViewerAction {
+  action: string;
+  text: string;
+  trigger: HTMLElement;
+}
+
+export interface JsonViewerValue {
+  value: any;
+  path: string;
+  depth: number;
+  el: HTMLElement;
+}
+
+export interface JsonViewerToggle {
+  /** 鼠标事件 */
+  event: MouseEvent;
+  /** 当前展开状态 */
+  open: boolean;
+}

package/src/common-ui/components/loading/directive.ts

@@ -0,0 +1,132 @@
+import type { App, Directive, DirectiveBinding } from 'vue';
+
+import { h, render } from 'vue';
+
+import { VbenLoading, VbenSpinner } from '@melt-js/comps-vben/shadcn-ui';
+import { isString } from '@melt-js/libs-vben/shared/utils';
+
+const LOADING_INSTANCE_KEY = Symbol('loading');
+const SPINNER_INSTANCE_KEY = Symbol('spinner');
+
+const CLASS_NAME_RELATIVE = 'spinner-parent--relative';
+
+const loadingDirective: Directive = {
+  mounted(el, binding) {
+    const instance = h(VbenLoading, getOptions(binding));
+    render(instance, el);
+
+    el.classList.add(CLASS_NAME_RELATIVE);
+    el[LOADING_INSTANCE_KEY] = instance;
+  },
+  unmounted(el) {
+    const instance = el[LOADING_INSTANCE_KEY];
+    el.classList.remove(CLASS_NAME_RELATIVE);
+    render(null, el);
+    instance.el.remove();
+
+    el[LOADING_INSTANCE_KEY] = null;
+  },
+
+  updated(el, binding) {
+    const instance = el[LOADING_INSTANCE_KEY];
+    const options = getOptions(binding);
+    if (options && instance?.component) {
+      try {
+        Object.keys(options).forEach((key) => {
+          instance.component.props[key] = options[key];
+        });
+        instance.component.update();
+      } catch (error) {
+        console.error(
+          'Failed to update loading component in directive:',
+          error,
+        );
+      }
+    }
+  },
+};
+
+function getOptions(binding: DirectiveBinding) {
+  if (binding.value === undefined) {
+    return { spinning: true };
+  } else if (typeof binding.value === 'boolean') {
+    return { spinning: binding.value };
+  } else {
+    return { ...binding.value };
+  }
+}
+
+const spinningDirective: Directive = {
+  mounted(el, binding) {
+    const instance = h(VbenSpinner, getOptions(binding));
+    render(instance, el);
+
+    el.classList.add(CLASS_NAME_RELATIVE);
+    el[SPINNER_INSTANCE_KEY] = instance;
+  },
+  unmounted(el) {
+    const instance = el[SPINNER_INSTANCE_KEY];
+    el.classList.remove(CLASS_NAME_RELATIVE);
+    render(null, el);
+    instance.el.remove();
+
+    el[SPINNER_INSTANCE_KEY] = null;
+  },
+
+  updated(el, binding) {
+    const instance = el[SPINNER_INSTANCE_KEY];
+    const options = getOptions(binding);
+    if (options && instance?.component) {
+      try {
+        Object.keys(options).forEach((key) => {
+          instance.component.props[key] = options[key];
+        });
+        instance.component.update();
+      } catch (error) {
+        console.error(
+          'Failed to update spinner component in directive:',
+          error,
+        );
+      }
+    }
+  },
+};
+
+type loadingDirectiveParams = {
+  /** 是否注册loading指令。如果提供一个string，则将指令注册为指定的名称 */
+  loading?: boolean | string;
+  /** 是否注册spinning指令。如果提供一个string，则将指令注册为指定的名称 */
+  spinning?: boolean | string;
+};
+
+/**
+ * 注册loading指令
+ * @param app
+ * @param params
+ */
+export function registerLoadingDirective(
+  app: App,
+  params?: loadingDirectiveParams,
+) {
+  // 注入一个样式供指令使用，确保容器是相对定位
+  const style = document.createElement('style');
+  style.id = CLASS_NAME_RELATIVE;
+  style.innerHTML = `
+    .${CLASS_NAME_RELATIVE} {
+      position: relative !important;
+    }
+  `;
+  document.head.append(style);
+  if (params?.loading !== false) {
+    app.directive(
+      isString(params?.loading) ? params.loading : 'loading',
+      loadingDirective,
+    );
+  }
+  if (params?.spinning !== false) {
+    app.directive(
+      isString(params?.spinning) ? params.spinning : 'spinning',
+      spinningDirective,
+    );
+  }
+}

package/src/common-ui/components/loading/index.ts

@@ -0,0 +1,3 @@
+export * from './directive';
+export { default as Loading } from './loading.vue';
+export { default as Spinner } from './spinner.vue';

package/src/common-ui/components/loading/loading.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { VbenLoading } from '@melt-js/comps-vben/shadcn-ui';
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+interface LoadingProps {
+  class?: string;
+  /**
+   * @zh_CN 最小加载时间
+   * @en_US Minimum loading time
+   */
+  minLoadingTime?: number;
+
+  /**
+   * @zh_CN loading状态开启
+   */
+  spinning?: boolean;
+  /**
+   * @zh_CN 文字
+   */
+  text?: string;
+}
+
+defineOptions({ name: 'Loading' });
+const props = defineProps<LoadingProps>();
+</script>
+<template>
+  <div :class="cn('relative min-h-20', props.class)">
+    <slot></slot>
+    <VbenLoading
+      :min-loading-time="props.minLoadingTime"
+      :spinning="props.spinning"
+      :text="props.text"
+    >
+      <template v-if="$slots.icon" #icon>
+        <slot name="icon"></slot>
+      </template>
+    </VbenLoading>
+  </div>
+</template>

package/src/common-ui/components/loading/spinner.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { VbenSpinner } from '@melt-js/comps-vben/shadcn-ui';
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+interface SpinnerProps {
+  class?: string;
+  /**
+   * @zh_CN 最小加载时间
+   * @en_US Minimum loading time
+   */
+  minLoadingTime?: number;
+  /**
+   * @zh_CN loading状态开启
+   */
+  spinning?: boolean;
+}
+defineOptions({ name: 'Spinner' });
+const props = defineProps<SpinnerProps>();
+</script>
+<template>
+  <div :class="cn('relative min-h-20', props.class)">
+    <slot></slot>
+    <VbenSpinner
+      :min-loading-time="props.minLoadingTime"
+      :spinning="props.spinning"
+    />
+  </div>
+</template>

package/src/common-ui/components/page/index.ts

@@ -0,0 +1,2 @@
+export { default as Page } from './page.vue';
+export * from './types';

package/src/common-ui/components/page/page.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import type { StyleValue } from 'vue';
+
+import type { PageProps } from './types';
+
+import { computed } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+defineOptions({
+  name: 'Page',
+});
+
+const {
+  autoContentHeight = false,
+  heightOffset = 0,
+  footerFixed = false,
+} = defineProps<PageProps>();
+
+const contentStyle = computed<StyleValue>(() => {
+  if (!autoContentHeight) {
+    return {};
+  }
+
+  return {
+    '--page-content-height-offset': `${heightOffset}px`,
+    // In auto-content-height mode the content region manages its own scrolling.
+    // Size containment prevents the inner content's min-content height from
+    // feeding back into the outer flex layout, which would clamp the content
+    // region taller than the available space and push the layout footer below
+    // the viewport (see https://github.com/vbenjs/vue-vben-admin/issues/5677).
+    contain: 'size',
+    marginBlockEnd: 'var(--page-content-height-offset)',
+  };
+});
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'relative flex h-full min-h-0 flex-col',
+        autoContentHeight && 'overflow-hidden',
+      )
+    "
+  >
+    <div
+      v-if="
+        description ||
+        $slots.description ||
+        title ||
+        $slots.title ||
+        $slots.extra
+      "
+      :class="
+        cn(
+          'relative flex shrink-0 items-end border-b border-border bg-card px-6 py-4',
+          headerClass,
+        )
+      "
+    >
+      <div class="flex-auto">
+        <slot name="title">
+          <div v-if="title" class="mb-2 flex text-lg font-semibold">
+            {{ title }}
+          </div>
+        </slot>
+
+        <slot name="description">
+          <p v-if="description" class="text-muted-foreground">
+            {{ description }}
+          </p>
+        </slot>
+      </div>
+
+      <div v-if="$slots.extra">
+        <slot name="extra"></slot>
+      </div>
+    </div>
+
+    <div
+      data-layout-region="page-content"
+      :class="
+        cn(
+          autoContentHeight ? 'min-h-0 flex-1 overflow-y-auto' : 'flex-1',
+          'p-4',
+          contentClass,
+        )
+      "
+      :style="contentStyle"
+    >
+      <slot></slot>
+    </div>
+    <div
+      v-if="$slots.footer"
+      :class="
+        cn(
+          'align-center flex bg-card px-6 py-4',
+          footerFixed ? 'mt-auto shrink-0' : 'shrink-0',
+          footerClass,
+        )
+      "
+    >
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>

package/src/common-ui/components/page/types.ts

@@ -0,0 +1,23 @@
+export interface PageProps {
+  title?: string;
+  description?: string;
+  contentClass?: string;
+  /**
+   * 根据content可见高度自适应
+   */
+  autoContentHeight?: boolean;
+  headerClass?: string;
+  footerClass?: string;
+  /**
+   * Custom height offset value (in pixels) to adjust content area sizing
+   * when used with autoContentHeight
+   * @default 0
+   */
+  heightOffset?: number;
+  /**
+   * Whether the footer is anchored to the bottom of the page layout.
+   * The footer remains in flow so it cannot obscure page content.
+   * @default false
+   */
+  footerFixed?: boolean;
+}

package/src/common-ui/components/resize/index.ts

@@ -0,0 +1 @@
+export { default as VResize } from './resize.vue';