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

package/src/common-ui/ui/profile/base-setting.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { Recordable } from '@melt-js/libs-vben/types';
+
+import type { VbenFormSchema } from '@melt-js/comps-vben/form-ui';
+
+import { computed, reactive } from 'vue';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import { useVbenForm } from '@melt-js/comps-vben/form-ui';
+import { VbenButton } from '@melt-js/comps-vben/shadcn-ui';
+
+interface Props {
+  formSchema?: VbenFormSchema[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  formSchema: () => [],
+});
+
+const emit = defineEmits<{
+  submit: [Recordable<any>];
+}>();
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      // 所有表单项
+      componentProps: {
+        class: 'w-full',
+      },
+    },
+    layout: 'horizontal',
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
+  if (valid) {
+    emit('submit', values);
+  }
+}
+
+defineExpose({
+  getFormApi: () => formApi,
+});
+</script>
+<template>
+  <div @keydown.enter.prevent="handleSubmit">
+    <Form />
+    <VbenButton type="submit" class="mt-4" @click="handleSubmit">
+      {{ $t('profile.updateBasicProfile') }}
+    </VbenButton>
+  </div>
+</template>

package/src/common-ui/ui/profile/index.ts

@@ -0,0 +1,6 @@
+export { default as ProfileBaseSetting } from './base-setting.vue';
+export { default as ProfileNotificationSetting } from './notification-setting.vue';
+export { default as ProfilePasswordSetting } from './password-setting.vue';
+export { default as Profile } from './profile.vue';
+export { default as ProfileSecuritySetting } from './security-setting.vue';
+export type * from './types';

package/src/common-ui/ui/profile/notification-setting.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { Recordable } from '@melt-js/libs-vben/types';
+
+import type { SettingProps } from './types';
+
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  Switch,
+} from '@melt-js/comps-vben/shadcn-ui';
+
+withDefaults(defineProps<SettingProps>(), {
+  formSchema: () => [],
+});
+
+const emit = defineEmits<{
+  change: [Recordable<any>];
+}>();
+
+function handleChange(fieldName: string, value: boolean) {
+  emit('change', { fieldName, value });
+}
+</script>
+<template>
+  <form class="space-y-8">
+    <div class="space-y-4">
+      <template v-for="item in formSchema" :key="item.fieldName">
+        <FormField type="checkbox" :name="item.fieldName">
+          <FormItem
+            class="flex flex-row items-center justify-between rounded-lg border p-4"
+          >
+            <div class="space-y-0.5">
+              <FormLabel class="text-base"> {{ item.label }} </FormLabel>
+              <FormDescription>
+                {{ item.description }}
+              </FormDescription>
+            </div>
+            <FormControl>
+              <Switch
+                :model-value="item.value"
+                @update:model-value="handleChange(item.fieldName, $event)"
+              />
+            </FormControl>
+          </FormItem>
+        </FormField>
+      </template>
+    </div>
+  </form>
+</template>

package/src/common-ui/ui/profile/password-setting.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { Recordable } from '@melt-js/libs-vben/types';
+
+import type { VbenFormSchema } from '@melt-js/comps-vben/form-ui';
+
+import { computed, reactive } from 'vue';
+
+import { $t } from '@melt-js/libs-vben/locales';
+
+import { useVbenForm } from '@melt-js/comps-vben/form-ui';
+import { VbenButton } from '@melt-js/comps-vben/shadcn-ui';
+
+interface Props {
+  formSchema?: VbenFormSchema[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  formSchema: () => [],
+});
+
+const emit = defineEmits<{
+  submit: [Recordable<any>];
+}>();
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      labelWidth: 130,
+      // 所有表单项
+      componentProps: {
+        class: 'w-full',
+      },
+    },
+    layout: 'horizontal',
+    schema: computed(() => props.formSchema),
+    showDefaultActions: false,
+  }),
+);
+
+async function handleSubmit() {
+  const { valid } = await formApi.validate();
+  const values = await formApi.getValues();
+  if (valid) {
+    emit('submit', values);
+  }
+}
+
+defineExpose({
+  getFormApi: () => formApi,
+});
+</script>
+<template>
+  <div>
+    <Form />
+    <VbenButton type="submit" class="mt-4" @click="handleSubmit">
+      {{ $t('profile.updatePassword') }}
+    </VbenButton>
+  </div>
+</template>

package/src/common-ui/ui/profile/profile.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { Props } from './types';
+
+import { preferences } from '@melt-js/libs-vben/core-preferences';
+import {
+  Card,
+  Separator,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  VbenAvatar,
+} from '@melt-js/comps-vben/shadcn-ui';
+
+import { Page } from '../../components';
+
+defineOptions({
+  name: 'ProfileUI',
+});
+
+withDefaults(defineProps<Props>(), {
+  title: '关于项目',
+  tabs: () => [],
+});
+
+const tabsValue = defineModel<string | undefined>('modelValue', {
+  default: undefined,
+});
+</script>
+<template>
+  <Page auto-content-height>
+    <div class="flex size-full">
+      <Card class="w-1/6 flex-none">
+        <div class="mt-4 flex-col-center h-40 gap-4">
+          <VbenAvatar
+            :src="userInfo?.avatar ?? preferences.app.defaultAvatar"
+            class="size-20"
+          />
+          <span class="text-lg font-semibold">
+            {{ userInfo?.realName ?? '' }}
+          </span>
+          <span class="text-sm text-foreground/80">
+            {{ userInfo?.username ?? '' }}
+          </span>
+        </div>
+        <Separator class="my-4" />
+        <Tabs v-model="tabsValue" orientation="vertical" class="m-4">
+          <TabsList class="grid w-full grid-cols-1 bg-card">
+            <TabsTrigger
+              v-for="tab in tabs"
+              :key="tab.value"
+              :value="tab.value"
+              class="h-12 justify-start data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
+            >
+              {{ tab.label }}
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </Card>
+      <Card class="ml-4 w-5/6 flex-auto p-8">
+        <slot name="content"></slot>
+      </Card>
+    </div>
+  </Page>
+</template>

package/src/common-ui/ui/profile/security-setting.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { Recordable } from '@melt-js/libs-vben/types';
+
+import type { SettingProps } from './types';
+
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  Switch,
+} from '@melt-js/comps-vben/shadcn-ui';
+
+withDefaults(defineProps<SettingProps>(), {
+  formSchema: () => [],
+});
+
+const emit = defineEmits<{
+  change: [Recordable<any>];
+}>();
+
+function handleChange(fieldName: string, value: boolean) {
+  emit('change', { fieldName, value });
+}
+</script>
+<template>
+  <form class="space-y-8">
+    <div class="space-y-4">
+      <template v-for="item in formSchema" :key="item.fieldName">
+        <FormField type="checkbox" :name="item.fieldName">
+          <FormItem
+            class="flex flex-row items-center justify-between rounded-lg border p-4"
+          >
+            <div class="space-y-0.5">
+              <FormLabel class="text-base"> {{ item.label }} </FormLabel>
+              <FormDescription>
+                {{ item.description }}
+              </FormDescription>
+            </div>
+            <FormControl>
+              <Switch
+                :model-value="item.value"
+                @update:model-value="handleChange(item.fieldName, $event)"
+              />
+            </FormControl>
+          </FormItem>
+        </FormField>
+      </template>
+    </div>
+  </form>
+</template>

package/src/common-ui/ui/profile/types.ts

@@ -0,0 +1,21 @@
+import type { BasicUserInfo } from '@melt-js/libs-vben/types';
+
+export interface Props {
+  title?: string;
+  userInfo: BasicUserInfo | null;
+  tabs: {
+    label: string;
+    value: string;
+  }[];
+}
+
+export interface FormSchemaItem {
+  description: string;
+  fieldName: string;
+  label: string;
+  value: boolean;
+}
+
+export interface SettingProps {
+  formSchema: FormSchemaItem[];
+}

package/src/configs/subApp.ts

@@ -0,0 +1 @@
+export const LIB_NAME = 'comps-vben';

package/src/entrance/libProperties.ts

@@ -0,0 +1,34 @@
+/*
+ * 远程组件对外能力。
+ *
+ * comps-vben 体量较大，按子路径拆成命名空间导出，避免 shadcn-ui / common-ui
+ * 里同名组件在扁平对象里互相覆盖；宿主通过 window.__COMPS_VBEN__ 读取。
+ */
+import * as commonUi from '../common-ui';
+import * as commonUiTippy from '../common-ui/components/tippy';
+import * as layouts from '../layouts';
+import * as pluginsEcharts from '../plugins/echarts';
+import * as pluginsMotion from '../plugins/motion';
+import * as pluginsVxeTable from '../plugins/vxe-table';
+import { LIB_NAME } from '../configs/subApp';
+
+export { LIB_NAME };
+
+export {
+  commonUi,
+  commonUiTippy,
+  layouts,
+  pluginsEcharts,
+  pluginsMotion,
+  pluginsVxeTable,
+};
+
+export default {
+  LIB_NAME,
+  commonUi,
+  commonUiTippy,
+  layouts,
+  pluginsEcharts,
+  pluginsMotion,
+  pluginsVxeTable,
+};

package/src/entrance/libTypes.js

@@ -0,0 +1,9 @@
+import { exposeLib } from 'hel-lib-proxy';
+import { LIB_NAME } from '../configs/subApp.ts';
+
+/**
+ * hel 消费方 npm 安装本包后 import 到的空壳代理，真正实现由 preFetchLib 注入。
+ */
+export const dtlib = exposeLib(LIB_NAME);
+
+export default dtlib;

package/src/form-ui/components/form-actions.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { computed, toRaw, unref, watch } from 'vue';
+
+import { useSimpleLocale } from '@melt-js/libs-vben/composables';
+import { VbenExpandableArrow } from '@melt-js/comps-vben/shadcn-ui';
+import { cn, isFunction, triggerWindowResize } from '@melt-js/libs-vben/shared/utils';
+
+import { COMPONENT_MAP } from '../config';
+import { injectFormProps } from '../use-form-context';
+
+const { $t } = useSimpleLocale();
+
+const [rootProps, form] = injectFormProps();
+
+const collapsed = defineModel({ default: false });
+
+const resetButtonOptions = computed(() => {
+  return {
+    content: `${$t.value('reset')}`,
+    show: true,
+    ...unref(rootProps).resetButtonOptions,
+  };
+});
+
+const submitButtonOptions = computed(() => {
+  return {
+    content: `${$t.value('submit')}`,
+    show: true,
+    ...unref(rootProps).submitButtonOptions,
+  };
+});
+
+async function handleSubmit(e: Event) {
+  e?.preventDefault();
+  e?.stopPropagation();
+  const props = unref(rootProps);
+  if (!props.formApi) {
+    return;
+  }
+
+  await props.formApi.validateAndSubmit();
+}
+
+async function handleReset(e: Event) {
+  e?.preventDefault();
+  e?.stopPropagation();
+  const props = unref(rootProps);
+
+  const values = toRaw(await props.formApi?.getValues()) ?? {};
+
+  if (isFunction(props.handleReset)) {
+    await props.handleReset?.(values);
+  } else {
+    form.reset();
+  }
+}
+
+watch(
+  () => collapsed.value,
+  () => {
+    const props = unref(rootProps);
+    if (props.collapseTriggerResize) {
+      triggerWindowResize();
+    }
+  },
+);
+
+const actionWrapperClass = computed(() => {
+  const props = unref(rootProps);
+  const actionLayout = props.actionLayout || 'rowEnd';
+  const actionPosition = props.actionPosition || 'right';
+
+  const cls = [
+    'flex',
+    'items-center',
+    'gap-3',
+    props.compact ? 'pb-2' : 'pb-4',
+    props.layout === 'vertical' ? 'self-end' : 'self-center',
+    props.layout === 'inline' ? '' : 'w-full',
+    props.actionWrapperClass,
+  ];
+
+  switch (actionLayout) {
+    case 'newLine': {
+      cls.push('col-span-full');
+      break;
+    }
+    case 'rowEnd': {
+      cls.push('col-[-2/-1]');
+      break;
+    }
+    // 'inline' 不需要额外类名，保持默认
+  }
+
+  switch (actionPosition) {
+    case 'center': {
+      cls.push('justify-center');
+      break;
+    }
+    case 'left': {
+      cls.push('justify-start');
+      break;
+    }
+    default: {
+      // case 'right': 默认右对齐
+      cls.push('justify-end');
+      break;
+    }
+  }
+
+  return cls.join(' ');
+});
+
+defineExpose({
+  handleReset,
+  handleSubmit,
+});
+</script>
+<template>
+  <div :class="cn(actionWrapperClass)">
+    <template v-if="rootProps.actionButtonsReverse">
+      <!-- 提交按钮前 -->
+      <slot name="submit-before"></slot>
+
+      <component
+        :is="COMPONENT_MAP.PrimaryButton"
+        v-if="submitButtonOptions.show"
+        type="button"
+        @click="handleSubmit"
+        v-bind="submitButtonOptions"
+      >
+        {{ submitButtonOptions.content }}
+      </component>
+    </template>
+
+    <!-- 重置按钮前 -->
+    <slot name="reset-before"></slot>
+
+    <component
+      :is="COMPONENT_MAP.DefaultButton"
+      v-if="resetButtonOptions.show"
+      type="button"
+      @click="handleReset"
+      v-bind="resetButtonOptions"
+    >
+      {{ resetButtonOptions.content }}
+    </component>
+
+    <template v-if="!rootProps.actionButtonsReverse">
+      <!-- 提交按钮前 -->
+      <slot name="submit-before"></slot>
+
+      <component
+        :is="COMPONENT_MAP.PrimaryButton"
+        v-if="submitButtonOptions.show"
+        type="button"
+        @click="handleSubmit"
+        v-bind="submitButtonOptions"
+      >
+        {{ submitButtonOptions.content }}
+      </component>
+    </template>
+
+    <!-- 展开按钮前 -->
+    <slot name="expand-before"></slot>
+
+    <VbenExpandableArrow
+      class="ml-[-0.3em]"
+      v-if="rootProps.showCollapseButton"
+      v-model:model-value="collapsed"
+    >
+      <span>{{ collapsed ? $t('expand') : $t('collapse') }}</span>
+    </VbenExpandableArrow>
+
+    <!-- 展开按钮后 -->
+    <slot name="expand-after"></slot>
+  </div>
+</template>