@peng_kai/kit 0.2.18 → 0.2.20

package/admin/components/settings/index.ts

@@ -1 +1,2 @@
 export { default as Settings } from './src/Settings.vue';
+export { default as SchemaForm, type IConfigDetail } from './src/SchemaForm.vue';

package/admin/components/settings/src/SchemaForm.vue

@@ -0,0 +1,283 @@
+<script lang="ts">
+import { cloneDeep, mapKeys, mapValues } from 'lodash-es';
+import { CheckboxGroup, DatePicker, type DatePickerProps, Form, FormItem, Input, InputNumber, RadioGroup, RangePicker, Select, Textarea } from 'ant-design-vue';
+import { computed, toRef } from 'vue';
+import dayjs from '../../../../libs/dayjs';
+import { type ItemSchema, useAntdForm } from '../../../../antd';
+
+export interface IConfigDetail {
+  category_id: number
+  data_type: string
+  form_type: number
+  key: string
+  label: string
+  options: any
+  required: number
+  sort: number
+  status: number
+  summary: string
+  value: any
+}
+
+enum FormTypes {
+  /** 数字输入框 */
+  NUMBER_INPUT = 0,
+  /** 文本输入框 */
+  TEXT_INPUT = 1,
+  /** 多行文本输入框 */
+  TEXTAREA = 2,
+  /** 开关 */
+  SWITCH = 3,
+  /** 单选框 */
+  RADIO = 4,
+  /** 多选框 */
+  CHECKBOX = 5,
+  /** 单选下拉选择器 */
+  SINGLE_SELECT = 6,
+  /** 多选下拉选择器 */
+  MULTIPLE_SELECT = 7,
+  /** 单一日期选择器 */
+  SINGLE_DATE_PICKER = 13,
+  /** 日期范围选择器 */
+  RANGE_DATE_PICKER = 14,
+}
+
+const antdPropsResolvers: Record<number, (config: IConfigDetail) => IConfigDetail> = {
+  [FormTypes.SWITCH](config) {
+    const props: any = {};
+
+    if (config.options) {
+      props.options = config.options.split(',').map((item: any) => {
+        const [label, value] = item.split(':');
+        return { value, label };
+      });
+    }
+    else {
+      props.options = [{ value: '1', label: '是' }, { value: '0', label: '否' }];
+    }
+
+    config.options = props;
+
+    return config;
+  },
+  [FormTypes.RADIO](config) {
+    return this[FormTypes.SWITCH](config);
+  },
+  [FormTypes.CHECKBOX](config) {
+    const props: any = {};
+    props.options = config.options.split(',').map((item: any) => {
+      const [label, value] = item.split(':');
+      return { value, label };
+    });
+
+    config.value = config.value.split(',');
+    config.options = props;
+
+    return config;
+  },
+  [FormTypes.SINGLE_SELECT](config) {
+    return this[FormTypes.SWITCH](config);
+  },
+  [FormTypes.MULTIPLE_SELECT](config) {
+    return this[FormTypes.CHECKBOX](config);
+  },
+  [FormTypes.SINGLE_DATE_PICKER](config) {
+    const props: DatePickerProps = {};
+
+    if (config.options) {
+      const [minDate, maxDate] = (config.options || '/').split('/').map(dayjs);
+      props.disabledDate = (current) => {
+        return current.isBefore(minDate) || current.isAfter(maxDate);
+      };
+    }
+
+    config.value = config.value === '' ? undefined : dayjs(config.value);
+    config.options = props;
+
+    return config;
+  },
+  [FormTypes.RANGE_DATE_PICKER](config) {
+    const props: DatePickerProps = {};
+
+    if (config.options) {
+      const [minDate, maxDate] = (config.options || '/').split('/').map(dayjs);
+      props.disabledDate = (current) => {
+        return current.isBefore(minDate) || current.isAfter(maxDate);
+      };
+    }
+
+    if (config.value === '')
+      config.value = [undefined, undefined];
+    else
+      config.value = (config.value || '/').split('/').map(dayjs);
+
+    config.options = props;
+
+    return config;
+  },
+};
+
+const antdValueResolvers: Record<number, (value: any) => any> = {
+  [FormTypes.NUMBER_INPUT](value) {
+    return String(value);
+  },
+  [FormTypes.CHECKBOX](value) {
+    if (Array.isArray(value))
+      return value.join(',');
+
+    return value;
+  },
+  [FormTypes.MULTIPLE_SELECT](value) {
+    if (Array.isArray(value))
+      return value.join(',');
+
+    return value;
+  },
+  [FormTypes.SINGLE_DATE_PICKER](value) {
+    if (dayjs.isDayjs(value))
+      return value.format('YYYY-MM-DD');
+
+    return value;
+  },
+  [FormTypes.RANGE_DATE_PICKER](value) {
+    if (dayjs.isDayjs(value[0]) && dayjs.isDayjs(value[1]))
+      return [value[0].format('YYYY-MM-DD'), value[1].format('YYYY-MM-DD')].join('/');
+
+    return value;
+  },
+};
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  formCofnig: IConfigDetail[]
+  disabled?: boolean
+}>(), {
+  disabled: false,
+});
+
+const configList = computed(() => {
+  const list = cloneDeep(props.formCofnig);
+
+  if (!list?.length)
+    return;
+
+  for (let i = 0; i < list.length; i++) {
+    const config = { ...list[i] };
+    list[i] = antdPropsResolvers[config.form_type]?.(config) ?? config;
+  }
+
+  return list;
+});
+const configMap = computed(() => mapKeys(cloneDeep(props.formCofnig ?? []), 'key'));
+function formSchema() {
+  const _configList = configList.value ?? [];
+  const entries = _configList.map(config => [
+    config.key,
+    {
+      value: cloneDeep(config.value),
+      rules: config.required ? [{ required: true }] : undefined,
+    },
+  ] as [string, ItemSchema]);
+  const schema = Object.fromEntries(entries);
+
+  return schema;
+}
+const settingForm = useAntdForm(formSchema, {
+  transform(state) {
+    return mapValues(state, (v, k) => {
+      const formType = configMap.value[k].form_type;
+      const resolver = antdValueResolvers[formType];
+
+      return resolver ? resolver(v) : v;
+    });
+  },
+});
+
+function reset() {
+  configList.value?.forEach(config => settingForm.state[config.key] = cloneDeep(config.value));
+  settingForm.$form.clearValidate?.();
+}
+
+async function validate() {
+  const data = await settingForm.$form.validate?.();
+  return data ? settingForm.stateTF : undefined;
+  // return undefined;
+}
+
+defineExpose({ reset, validate });
+</script>
+
+<template>
+  <Form
+    v-bind="settingForm.props"
+    class="ant-cover__col2-form"
+    :model="settingForm.state"
+    layout="vertical"
+    :disabled="props.disabled"
+  >
+    <template v-for="item of configList" :key="item.key">
+      <FormItem v-bind="settingForm.itemProps[item.key]" :label="item.label" :extra="item.summary">
+        <slot
+          v-if="$slots[item.key]"
+          :name="item.key"
+          :state="toRef(settingForm.state, item.key)"
+          :config="item"
+          :orginConfig="configMap[item.key]"
+        />
+        <template v-else>
+          <slot v-if="item.form_type === FormTypes.NUMBER_INPUT" :name="FormTypes.NUMBER_INPUT">
+            <InputNumber v-model:value="settingForm.state[item.key]" class="w-full" />
+          </slot>
+
+          <slot v-else-if="item.form_type === FormTypes.TEXT_INPUT" :name="FormTypes.TEXT_INPUT">
+            <Input v-model:value="settingForm.state[item.key]" allowClear />
+          </slot>
+
+          <slot v-else-if="item.form_type === FormTypes.TEXTAREA" :name="FormTypes.TEXTAREA">
+            <Textarea v-model:value="settingForm.state[item.key]" :rows="4" />
+          </slot>
+
+          <slot v-else-if="item.form_type === FormTypes.SWITCH" :name="FormTypes.SWITCH">
+            <RadioGroup
+              v-model:value="settingForm.state[item.key]"
+              v-bind="item.options"
+              buttonStyle="solid"
+              optionType="button"
+            />
+          </slot>
+
+          <slot v-else-if="item.form_type === FormTypes.RADIO" :name="FormTypes.RADIO">
+            <RadioGroup
+              v-model:value="settingForm.state[item.key]"
+              buttonStyle="solid"
+              v-bind="item.options"
+            />
+          </slot>
+
+          <slot v-else-if="item.form_type === FormTypes.CHECKBOX" :name="FormTypes.CHECKBOX">
+            <CheckboxGroup v-model:value="settingForm.state[item.key]" v-bind="item.options" />
+          </slot>
+
+          <slot v-else-if="item.form_type === FormTypes.SINGLE_SELECT" :name="FormTypes.SINGLE_SELECT">
+            <Select v-model:value="settingForm.state[item.key]" v-bind="item.options" />
+          </slot>
+
+          <slot v-else-if="item.form_type === FormTypes.MULTIPLE_SELECT" :name="FormTypes.MULTIPLE_SELECT">
+            <Select v-model:value="settingForm.state[item.key]" v-bind="item.options" mode="multiple" />
+          </slot>
+
+          <slot v-else-if="item.form_type === FormTypes.SINGLE_DATE_PICKER" :name="FormTypes.SINGLE_DATE_PICKER">
+            <DatePicker v-model:value="settingForm.state[item.key]" v-bind="item.options" />
+          </slot>
+
+          <slot v-else-if="item.form_type === FormTypes.RANGE_DATE_PICKER" :name="FormTypes.RANGE_DATE_PICKER">
+            <RangePicker v-model:value="settingForm.state[item.key]" v-bind="item.options" />
+          </slot>
+
+          <span v-else class="text-red">没有找到预设 form_type:{{ item.form_type }}，可以通过 {{ item.key }} 插槽自定义</span>
+        </template>
+      </FormItem>
+    </template>
+  </Form>
+</template>

package/admin/components/settings/src/Settings.vue

@@ -1,156 +1,15 @@
 <script lang="ts">
-import { cloneDeep, mapKeys, mapValues } from 'lodash-es';
-import { Button, Card, CheckboxGroup, DatePicker, type DatePickerProps, Form, FormItem, Input, InputNumber, RadioGroup, RangePicker, Select, Textarea } from 'ant-design-vue';
-import { computed, ref, toRef } from 'vue';
+import { Button, Card } from 'ant-design-vue';
+import { computed, ref } from 'vue';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
-import dayjs from '../../../../libs/dayjs';
-import { type ItemSchema, useAntdForm } from '../../../../antd';
-
-interface IConfigDetail {
-  category_id: number
-  data_type: string
-  form_type: number
-  key: string
-  label: string
-  options: any
-  required: number
-  sort: number
-  status: number
-  summary: string
-  value: any
-}
-
-enum FormTypes {
-  /** 数字输入框 */
-  NUMBER_INPUT = 0,
-  /** 文本输入框 */
-  TEXT_INPUT = 1,
-  /** 多行文本输入框 */
-  TEXTAREA = 2,
-  /** 开关 */
-  SWITCH = 3,
-  /** 单选框 */
-  RADIO = 4,
-  /** 多选框 */
-  CHECKBOX = 5,
-  /** 单选下拉选择器 */
-  SINGLE_SELECT = 6,
-  /** 多选下拉选择器 */
-  MULTIPLE_SELECT = 7,
-  /** 单一日期选择器 */
-  SINGLE_DATE_PICKER = 13,
-  /** 日期范围选择器 */
-  RANGE_DATE_PICKER = 14,
-}
-
-const antdPropsResolvers: Record<number, (config: IConfigDetail) => IConfigDetail> = {
-  [FormTypes.SWITCH](config) {
-    const props: any = {};
-
-    if (config.options) {
-      props.options = config.options.split(',').map((item: any) => {
-        const [label, value] = item.split(':');
-        return { value, label };
-      });
-    }
-    else {
-      props.options = [{ value: '1', label: '是' }, { value: '0', label: '否' }];
-    }
-
-    config.options = props;
-
-    return config;
-  },
-  [FormTypes.RADIO](config) {
-    return this[FormTypes.SWITCH](config);
-  },
-  [FormTypes.CHECKBOX](config) {
-    const props: any = {};
-    props.options = config.options.split(',').map((item: any) => {
-      const [label, value] = item.split(':');
-      return { value, label };
-    });
-
-    config.value = config.value.split(',');
-    config.options = props;
-
-    return config;
-  },
-  [FormTypes.SINGLE_SELECT](config) {
-    return this[FormTypes.SWITCH](config);
-  },
-  [FormTypes.MULTIPLE_SELECT](config) {
-    return this[FormTypes.CHECKBOX](config);
-  },
-  [FormTypes.SINGLE_DATE_PICKER](config) {
-    const props: DatePickerProps = {};
-
-    if (config.options) {
-      const [minDate, maxDate] = (config.options || '/').split('/').map(dayjs);
-      props.disabledDate = (current) => {
-        return current.isBefore(minDate) || current.isAfter(maxDate);
-      };
-    }
-
-    config.value = config.value === '' ? undefined : dayjs(config.value);
-    config.options = props;
-
-    return config;
-  },
-  [FormTypes.RANGE_DATE_PICKER](config) {
-    const props: DatePickerProps = {};
-
-    if (config.options) {
-      const [minDate, maxDate] = (config.options || '/').split('/').map(dayjs);
-      props.disabledDate = (current) => {
-        return current.isBefore(minDate) || current.isAfter(maxDate);
-      };
-    }
-
-    if (config.value === '')
-      config.value = [undefined, undefined];
-    else
-      config.value = (config.value || '/').split('/').map(dayjs);
-
-    config.options = props;
-
-    return config;
-  },
-};
-const antdValueResolvers: Record<number, (value: any) => any> = {
-  [FormTypes.NUMBER_INPUT](value) {
-    return String(value);
-  },
-  [FormTypes.CHECKBOX](value) {
-    if (Array.isArray(value))
-      return value.join(',');
-
-    return value;
-  },
-  [FormTypes.MULTIPLE_SELECT](value) {
-    if (Array.isArray(value))
-      return value.join(',');
-
-    return value;
-  },
-  [FormTypes.SINGLE_DATE_PICKER](value) {
-    if (dayjs.isDayjs(value))
-      return value.format('YYYY-MM-DD');
-
-    return value;
-  },
-  [FormTypes.RANGE_DATE_PICKER](value) {
-    if (dayjs.isDayjs(value[0]) && dayjs.isDayjs(value[1]))
-      return [value[0].format('YYYY-MM-DD'), value[1].format('YYYY-MM-DD')].join('/');
-
-    return value;
-  },
-};
+import { useTemplateRefs } from '../../../../vue';
+import type SchemaForm from './SchemaForm.vue';
+import type { IConfigDetail } from './SchemaForm.vue';
 </script>
 
 <script setup lang="ts">
 const props = withDefaults(defineProps<{
-  categoryApi: Api.Request
+  categoryApi?: Api.Request
   configApi: Api.Request
   updateApi: Api.Request
   readonly?: boolean
@@ -159,35 +18,25 @@ const props = withDefaults(defineProps<{
 });
 
 const queryClient = useQueryClient();
+const [refs, setRefs] = useTemplateRefs<{
+  form: typeof SchemaForm
+}>();
 
 /* 配置分类 */
 const categoryId = ref(1);
 const categoryQuerier = useQuery({
-  queryKey: [props.categoryApi.id],
-  queryFn: () => props.categoryApi(undefined),
+  queryKey: [props.categoryApi?.id, 'system-setting-category'],
+  queryFn: () => props.categoryApi?.(undefined) ?? null,
 });
 const categoryList = computed(() => categoryQuerier.data.value?.map((item: any) => ({ key: String(item.type), tab: item.label })));
 
 /* 当前分类下的配置 */
+const configQuerierEnabled = computed(() => categoryQuerier.data.value !== undefined);
 const configQuerier = useQuery<IConfigDetail[] | undefined>({
-  enabled: computed(() => !!categoryQuerier.data.value),
+  enabled: configQuerierEnabled,
   queryKey: [props.configApi.id, categoryId],
   queryFn: () => props.configApi({ category_id: categoryId.value }),
 });
-const configList = computed(() => {
-  const list = cloneDeep(configQuerier.data.value);
-
-  if (!list?.length)
-    return;
-
-  for (let i = 0; i < list.length; i++) {
-    const config = { ...list[i] };
-    list[i] = antdPropsResolvers[config.form_type]?.(config) ?? config;
-  }
-
-  return list;
-});
-const configMap = computed(() => mapKeys(cloneDeep(configQuerier.data.value ?? []), 'key'));
 
 /* 配置表单 */
 const settingMutator = useMutation({
@@ -198,42 +47,12 @@ const settingMutator = useMutation({
     queryClient.invalidateQueries({ queryKey: [props.configApi.id], exact: false });
   },
 });
-const formSchema = computed(() => {
-  const _configList = configList.value ?? [];
-  const entries = _configList.map(config => [
-    config.key,
-    {
-      value: cloneDeep(config.value),
-      rules: config.required ? [{ required: true }] : undefined,
-    },
-  ] as [string, ItemSchema]);
-  const schema = Object.fromEntries(entries);
-
-  return schema;
-});
-const settingForm = useAntdForm(formSchema, {
-  transform(state) {
-    return mapValues(state, (v, k) => {
-      const formType = configMap.value[k].form_type;
-      const resolver = antdValueResolvers[formType];
-
-      return resolver ? resolver(v) : v;
-    });
-  },
-});
 
 /** 提交表单内容 */
 async function submitSetting() {
-  const body = await settingForm.$form.validate?.().catch(() => {});
+  const body = await refs.form?.validate();
 
-  if (body)
-    await settingMutator.mutateAsync({ requestBody: settingForm.stateTF });
-}
-
-/** 重置表单内容 */
-function resetSetting() {
-  configList.value?.forEach(config => settingForm.state[config.key] = cloneDeep(config.value));
-  settingForm.$form.clearValidate?.();
+  body && await settingMutator.mutateAsync({ requestBody: body });
 }
 </script>
 
@@ -245,79 +64,16 @@ function resetSetting() {
     :loading="configQuerier.isPending.value"
     @tabChange="key => categoryId = Number(key)"
   >
-    <Form
-      v-bind="settingForm.props"
-      class="ant-cover__col2-form"
-      layout="vertical"
-      :disabled="settingMutator.isPending.value || props.readonly"
-    >
-      <template v-for="item of configList" :key="item.key">
-        <FormItem v-bind="settingForm.itemProps[item.key]" :label="item.label" :extra="item.summary">
-          <slot
-            v-if="$slots[item.key]"
-            :name="item.key"
-            :state="toRef(settingForm.state, item.key)"
-            :config="item"
-            :orginConfig="configMap[item.key]"
-          />
-          <template v-else>
-            <slot v-if="item.form_type === FormTypes.NUMBER_INPUT" :name="FormTypes.NUMBER_INPUT">
-              <InputNumber v-model:value="settingForm.state[item.key]" class="w-full" />
-            </slot>
-
-            <slot v-else-if="item.form_type === FormTypes.TEXT_INPUT" :name="FormTypes.TEXT_INPUT">
-              <Input v-model:value="settingForm.state[item.key]" allowClear />
-            </slot>
-
-            <slot v-else-if="item.form_type === FormTypes.TEXTAREA" :name="FormTypes.TEXTAREA">
-              <Textarea v-model:value="settingForm.state[item.key]" :rows="4" />
-            </slot>
-
-            <slot v-else-if="item.form_type === FormTypes.SWITCH" :name="FormTypes.SWITCH">
-              <RadioGroup
-                v-model:value="settingForm.state[item.key]"
-                v-bind="item.options"
-                buttonStyle="solid"
-                optionType="button"
-              />
-            </slot>
-
-            <slot v-else-if="item.form_type === FormTypes.RADIO" :name="FormTypes.RADIO">
-              <RadioGroup
-                v-model:value="settingForm.state[item.key]"
-                buttonStyle="solid"
-                v-bind="item.options"
-              />
-            </slot>
-
-            <slot v-else-if="item.form_type === FormTypes.CHECKBOX" :name="FormTypes.CHECKBOX">
-              <CheckboxGroup v-model:value="settingForm.state[item.key]" v-bind="item.options" />
-            </slot>
-
-            <slot v-else-if="item.form_type === FormTypes.SINGLE_SELECT" :name="FormTypes.SINGLE_SELECT">
-              <Select v-model:value="settingForm.state[item.key]" v-bind="item.options" />
-            </slot>
-
-            <slot v-else-if="item.form_type === FormTypes.MULTIPLE_SELECT" :name="FormTypes.MULTIPLE_SELECT">
-              <Select v-model:value="settingForm.state[item.key]" v-bind="item.options" mode="multiple" />
-            </slot>
-
-            <slot v-else-if="item.form_type === FormTypes.SINGLE_DATE_PICKER" :name="FormTypes.SINGLE_DATE_PICKER">
-              <DatePicker v-model:value="settingForm.state[item.key]" v-bind="item.options" />
-            </slot>
-
-            <slot v-else-if="item.form_type === FormTypes.RANGE_DATE_PICKER" :name="FormTypes.RANGE_DATE_PICKER">
-              <RangePicker v-model:value="settingForm.state[item.key]" v-bind="item.options" />
-            </slot>
-
-            <span v-else class="text-red">没有找到预设 form_type:{{ item.form_type }}，可以通过 {{ item.key }} 插槽自定义</span>
-          </template>
-        </FormItem>
-      </template>
-    </Form>
+    <component
+      :is="$slots.default?.({
+        formCofnig: configQuerier.data.value ?? [],
+        disabled: settingMutator.isPending.value || props.readonly,
+      })[0]"
+      :ref="setRefs.form"
+    />
 
     <template v-if="!props.readonly" #actions>
-      <Button :disabled="settingMutator.isPending.value" @click="resetSetting()">
+      <Button :disabled="settingMutator.isPending.value" @click="refs.form?.reset()">
         重置
       </Button>
       <Button type="primary" :loading="settingMutator.isPending.value" @click="submitSetting()">
@@ -326,10 +82,3 @@ function resetSetting() {
     </template>
   </Card>
 </template>
-
-<style lang="scss" scoped>
-.ant-cover__col2-form :deep(.ant-form-item-label > label) {
-  // padding-left: 0.5em;
-  // border-left: 2px solid #2361d0;
-}
-</style>

package/antd/hooks/useAntdForm.ts

@@ -87,7 +87,7 @@ function useAntdForm<S extends Record<string, unknown>, TS = S>(schemas: MaybeRe
 
     for (const k in schemasR.value) {
       const item = schemasR.value[k];
-      _state[k] = (k in state.value) ? toRef(state.value, k) : toRef(item, 'value');
+      _state[k] = (k in state.value) ? toRef(state.value, k) : ref(item.value);
     }
 
     state.value = _state;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "description": "",
   "author": "",
   "license": "ISC",

package/utils/number.ts

@@ -1,4 +1,6 @@
 import { calc } from 'a-calc';
+import type { BigNumber } from 'bignumber.js';
+import bn from 'bignumber.js';
 
 export { default as bn } from 'bignumber.js';
 export { calc } from 'a-calc';
@@ -47,3 +49,21 @@ export function toAmount(amount: any, decimal: string | number = 0) {
 
   return fmt;
 }
+
+/**
+ * 乘以精度，即将小数金额转换为整数金额
+ * @param value 数值
+ * @param precision 精度
+ */
+export function mulPrecision(value: BigNumber.Value, precision: number) {
+  return bn(value).times(bn(10).pow(precision));
+}
+
+/**
+ * 除以精度，即将整数金额转换为小数金额
+ * @param value 数值
+ * @param precision 精度
+ */
+export function divPrecision(value: BigNumber.Value, precision: number) {
+  return bn(value).div(bn(10).pow(precision));
+}

package/vue/components/nav-manager/NavManager.vue

@@ -1,5 +1,7 @@
 <script lang="ts">
 import { computed, reactive, ref, toValue, watch } from 'vue';
+import { useElementBounding, useMutationObserver } from '@vueuse/core';
+import { useTemplateRefs } from '../../hooks/useTemplateRefs';
 import { type IProvide as INavManagerProvide, useNavManagerRouter } from './useNavManager';
 
 function useHistory(initialValue: string[] = []) {
@@ -49,10 +51,26 @@ const emits = defineEmits<{
   (e: 'close'): void
 }>();
 
+const [refs, setRefs] = useTemplateRefs<{
+  header: HTMLDivElement
+}>();
 const viewMap = reactive<Record<string, Parameters<INavManagerProvide['addView']>[0]>>({});
 const history = useHistory([props.indexName]);
 const currentView = computed(() => viewMap[history.current]);
 const transitionName = computed(() => `view-${history.lastOperation}`);
+const { height: headerHeight } = useElementBounding(() => refs.header);
+const cssVars = computed(() => ({
+  '--header-height-neg': `-${headerHeight.value}px`,
+  '--header-height': `${headerHeight.value}px`,
+}));
+// 检查 header 中是否从外部插入了DOM（例如通过Teleport），如果有插入则将header中的所有需要隐藏的本地DOM都隐藏
+const isCoverHeader = ref(false);
+const headerNeedCoverClasses = ['nav-back-btn', 'nav-title', 'nav-close-btn'].map(cls => `.${cls}.need-cover`);
+const headerNeedCoverSelector = `:scope > :not(${headerNeedCoverClasses.join(',')})`;
+useMutationObserver(() => refs.header, () => {
+  const children = refs.header?.querySelectorAll(headerNeedCoverSelector);
+  isCoverHeader.value = !!children?.length;
+}, { childList: true });
 
 watch(currentView, (view, oldView) => {
   oldView?.hide();
@@ -71,33 +89,37 @@ useNavManagerRouter(navManager);
 </script>
 
 <template>
-  <div class="tt-nav-manager box-border flex flex-col px-3 py-5">
-    <div class="nav-header mb-3 min-h6 flex items-center">
-      <Transition name="back-btn">
-        <div
-          v-if="!history.isFirst"
-          class="nav-back-btn mr-2 size-6 flex cursor-pointer items-center justify-center"
-          @click="navManager.back()"
-        >
-          <i class="i-ri:arrow-left-s-line text-6" />
-        </div>
-      </Transition>
-
-      <div class="nav-title flex-1">
-        {{ toValue(currentView?.title) }}
+  <div class="tt-nav-manager box-border" :class="[currentView?.name]" :style="cssVars">
+    <div class="relative h-full overflow-x-hidden bg-inherit">
+      <div :ref="setRefs.header" class="nav-header min-h6 flex items-center sticky z-5 bg-inherit">
+        <slot name="header" />
+        <template v-if="!isCoverHeader || (!isCoverHeader && !$slots.header)">
+          <Transition name="back-btn">
+            <div
+              v-if="!history.isFirst"
+              class="nav-back-btn need-cover mr-2 size-6 flex cursor-pointer items-center justify-center"
+              @click="navManager.back()"
+            >
+              <i class="i-ri:arrow-left-s-line text-6" />
+            </div>
+          </Transition>
+
+          <div class="nav-title need-cover flex-1">
+            {{ toValue(currentView?.title) }}
+          </div>
+
+          <div
+            class="nav-close-btn need-cover size-6 flex cursor-pointer items-center justify-center"
+            @click="navManager.close()"
+          >
+            <i class="i-ri:close-line text-6" />
+          </div>
+        </template>
       </div>
 
-      <div
-        class="nav-close-btn size-6 flex cursor-pointer items-center justify-center"
-        @click="navManager.close()"
-      >
-        <i class="i-ri:close-line text-6" />
-      </div>
-    </div>
-
-    <div class="relative flex-1 overflow-x-hidden">
       <Transition :name="transitionName">
-        <div :key="currentView?.name" class="absolute left-0 top-0 h-full w-full overflow-x-hidden overflow-y-auto" :class="$props.viewClass">
+        <div :key="currentView?.name" class="scroll-container absolute left-0 top-0 h-full w-full overflow-y-auto overflow-x-hidden" :class="$props.viewClass">
+          <div class="h-$header-height" />
           <slot />
         </div>
       </Transition>