初始化

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

@@ -0,0 +1,68 @@
+<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"
+    @keydown.enter.prevent="handleSubmit"
+  >
+    <Form />
+    <EasyFlowButton
+      :loading="buttonLoading"
+      type="submit"
+      class="mx-auto mt-4 block h-8 w-[106px] p-0"
+      @click="handleSubmit"
+    >
+      {{ buttonText }}
+    </EasyFlowButton>
+  </div>
+</template>

easyflow-ui-admin/packages/effects/common-ui/src/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';

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { Recordable } from '@easyflow/types';
+
+import type { SettingProps } from './types';
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  Switch,
+} from '@easyflow-core/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>

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>

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { Props } from './types';
+
+import { preferences } from '@easyflow-core/preferences';
+import {
+  EasyFlowAvatar,
+  Card,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+} from '@easyflow-core/shadcn-ui';
+
+import { Page } from '../../components';
+
+defineOptions({
+  name: 'ProfileUI',
+});
+
+withDefaults(defineProps<Props>(), {
+  title: '关于项目',
+  tabs: () => [],
+});
+
+const tabsValue = defineModel<string>('modelValue');
+</script>
+<template>
+  <Page auto-content-height>
+    <div class="flex h-full w-full">
+      <Card class="w-[200px]">
+        <div class="mt-4 flex h-40 flex-col items-center justify-center gap-4">
+          <EasyFlowAvatar
+            :src="userInfo?.avatar ?? preferences.app.defaultAvatar"
+            class="size-20"
+          />
+          <span class="text-lg font-semibold">
+            {{ userInfo?.realName ?? '' }}
+          </span>
+          <span class="text-foreground/80 text-sm">
+            {{ userInfo?.username ?? '' }}
+          </span>
+        </div>
+        <!-- <Separator class="my-4" /> -->
+        <Tabs v-model="tabsValue" orientation="vertical" class="mx-4">
+          <TabsList class="bg-card grid w-full grid-cols-1 gap-2">
+            <TabsTrigger
+              v-for="tab in tabs"
+              :key="tab.value"
+              :value="tab.value"
+              class="data-[state=active]:text-primary justify-start px-3 py-2.5 font-normal hover:bg-[hsl(var(--accent))] data-[state=active]:bg-[hsl(var(--primary)/15%)] data-[state=active]:shadow-none"
+            >
+              {{ tab.label }}
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </Card>
+      <Card class="ml-4 flex-1 p-8">
+        <slot name="content"></slot>
+      </Card>
+    </div>
+  </Page>
+</template>

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { Recordable } from '@easyflow/types';
+
+import type { SettingProps } from './types';
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  Switch,
+} from '@easyflow-core/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>

easyflow-ui-admin/packages/effects/common-ui/src/ui/profile/types.ts

@@ -0,0 +1,21 @@
+import type { BasicUserInfo } from '@easyflow/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[];
+}