初始化

easyflow-ui-admin/packages/effects/common-ui/src/ui/profile/password-setting.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { Recordable } from '@easyflow/types';
+
+import type { EasyFlowFormSchema } from '@easyflow-core/form-ui';
+
+import { computed, reactive } from 'vue';
+
+import { useEasyFlowForm } from '@easyflow-core/form-ui';
+import { EasyFlowButton } from '@easyflow-core/shadcn-ui';
+
+interface Props {
+  formSchema?: EasyFlowFormSchema[];
+  buttonText?: string;
+  buttonLoading?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  formSchema: () => [],
+  buttonText: '更新密码',
+  buttonLoading: false,
+});
+
+const emit = defineEmits<{
+  submit: [Recordable<any>];
+}>();
+
+const [Form, formApi] = useEasyFlowForm(
+  reactive({
+    commonConfig: {
+      // 所有表单项
+      componentProps: {
+        class: 'w-full',
+      },
+    },
+    layout: 'vertical',
+    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 class="mx-auto max-w-[360px] pt-12">
+    <Form />
+    <EasyFlowButton
+      :loading="buttonLoading"
+      type="submit"
+      class="mx-auto mt-4 block h-8 w-[106px] p-0"
+      @click="handleSubmit"
+    >
+      {{ buttonText }}
+    </EasyFlowButton>
+  </div>
+</template>