@peng_kai/kit 0.2.0-beta.3 → 0.2.0-beta.30

package/admin/components/rich-text/src/editorConfig.ts

@@ -0,0 +1,126 @@
+export const defaultConfig: Record<string, any> = {
+  language: {
+    ui: 'zh-cn',
+  },
+  removePlugins: ['ImportWord', 'ExportWord', 'RevisionHistory', 'RealTimeCollaborativeEditing', 'RealTimeCollaborativeComments', 'RealTimeCollaborativeRevisionHistory', 'RealTimeCollaborativeTrackChanges', 'PresenceList', 'WProofreader', 'DocumentOutline', 'Comments', 'TrackChanges', 'TrackChangesData', 'TableOfContents', 'SlashCommand', 'PasteFromOfficeEnhanced', 'ContentTemplates', 'FormatPainter', 'Mentions', 'PageBreak', 'Pagination', 'AIAssistant', 'CaseChange', 'Template'],
+  toolbar: {
+    items: [
+      'undo',
+      'redo',
+      '|',
+      'showBlocks',
+      'selectAll',
+      '|',
+      'heading',
+      '|',
+      'fontSize',
+      'fontFamily',
+      'fontColor',
+      'fontBackgroundColor',
+      '|',
+      'bold',
+      'italic',
+      'underline',
+      {
+        label: 'Formatting',
+        icon: 'text',
+        items: ['strikethrough', 'subscript', 'superscript', 'code', 'horizontalLine', '|', 'removeFormat'],
+      },
+      '|',
+      'link',
+      'uploadImage',
+      'insertTable',
+      {
+        label: 'Insert',
+        icon: 'plus',
+        items: ['highlight', 'blockQuote', 'mediaEmbed', 'codeBlock', 'htmlEmbed'],
+      },
+      '|',
+      'alignment',
+      '|',
+      'bulletedList',
+      'numberedList',
+      'todoList',
+      'outdent',
+      'indent',
+      '|',
+      'sourceEditing',
+    ],
+    shouldNotGroupWhenFull: true,
+  },
+  htmlSupport: {
+    allow: [
+      {
+        name: /^.*$/,
+        styles: true,
+        attributes: true,
+        classes: true,
+      },
+    ],
+  },
+  fontSize: {
+    options: [10, 12, 14, 'default', 18, 20, 22],
+    supportAllValues: true,
+  },
+  image: {
+    styles: [
+      'alignCenter',
+      'alignLeft',
+      'alignRight',
+    ],
+    resizeOptions: [
+      { name: 'resizeImage:original', label: 'Original', value: null },
+      { name: 'resizeImage:25', label: '25%', value: '25' },
+      { name: 'resizeImage:50', label: '50%', value: '50' },
+      { name: 'resizeImage:75', label: '75%', value: '75' },
+    ],
+    toolbar: [
+      'imageTextAlternative',
+      'toggleImageCaption',
+      '|',
+      'imageStyle:inline',
+      'imageStyle:wrapText',
+      'imageStyle:breakText',
+      'imageStyle:side',
+      '|',
+      'resizeImage',
+    ],
+    resizeUnit: 'px',
+  },
+  list: {
+    properties: {
+      styles: true,
+      startIndex: true,
+      reversed: true,
+    },
+  },
+  link: {
+    addTargetToExternalLinks: true,
+    defaultProtocol: 'https://',
+    decorators: {
+      toggleDownloadable: {
+        mode: 'manual',
+        label: 'Downloadable',
+        attributes: {
+          download: 'file',
+        },
+      },
+    },
+  },
+  table: {
+    contentToolbar: [
+      'tableColumn',
+      'tableRow',
+      'mergeTableCells',
+      'tableProperties',
+      'tableCellProperties',
+      'toggleTableCaption',
+    ],
+  },
+  htmlEmbed: {
+    showPreviews: true,
+  },
+  wordCount: {
+    displayWords: true,
+  },
+};

package/admin/components/rich-text/src/imageUploader.ts

@@ -5,30 +5,32 @@ export { createImageUploaderForAws3 };
 
 function createImageUploaderForAws3(awsS3: AwsS3, rootDir?: string): PluginConstructor {
   return function (editor) {
-    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
-      return {
-        async upload() {
-          const file = await loader.file;
+    setTimeout(() => {
+      editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
+        return {
+          async upload() {
+            const file = await loader.file;
 
-          if (file) {
-            const { uploader, fileURL } = await awsS3.upload(file, rootDir);
+            if (file) {
+              const { uploader, fileURL } = await awsS3.upload(file, rootDir);
 
-            uploader.on('httpUploadProgress', (progress) => {
-              loader.uploadTotal = progress.total ?? null;
-              loader.uploaded = progress.loaded ?? 0;
-            });
+              uploader.on('httpUploadProgress', (progress) => {
+                loader.uploadTotal = progress.total ?? null;
+                loader.uploaded = progress.loaded ?? 0;
+              });
 
-            await uploader.done();
+              await uploader.done();
 
-            return { default: fileURL };
-          }
+              return { default: fileURL };
+            }
 
-          return {};
-        },
-        abort() {
+            return {};
+          },
+          abort() {
 
-        },
+          },
+        };
       };
-    };
+    });
   };
 }

package/admin/components/scroll-nav/index.ts

@@ -1 +1 @@
-export { default as ScrollNav } from './src/ScrollNav.vue';
+export { default as ScrollNav } from './src/ScrollNav.vue';

package/admin/components/scroll-nav/src/ScrollNav.vue

@@ -10,7 +10,7 @@ const $content = document.querySelector(props.selector) as HTMLElement;
 const $contentParent = $content.parentElement;
 const { height: contentParentH } = useElementSize($contentParent);
 const { height: contentH } = useElementSize($content);
-const visible = computed(() => contentParentH.value * 2 < contentH.value);
+const visible = computed(() => contentParentH.value * 1.5 < contentH.value);
 
 function scrollTo(top: number) {
   $contentParent?.scrollTo({ top });

package/admin/components/settings/index.ts

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

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

@@ -0,0 +1,333 @@
+<script lang="ts">
+import { reactiveComputed } from '@vueuse/core';
+import { cloneDeep, mapKeys, mapValues } from 'lodash-es';
+import dayjs from 'dayjs';
+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 { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query';
+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;
+  },
+};
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+  categoryApi: Api.Request
+  configApi: Api.Request
+  updateApi: Api.Request
+}>();
+
+const queryClient = useQueryClient();
+
+/* 配置分类 */
+const categoryId = ref(1);
+const categoryQuerier = useQuery({
+  queryKey: [props.categoryApi.id],
+  queryFn: () => props.categoryApi(undefined),
+});
+const categoryList = computed(() => categoryQuerier.data.value?.map((item: any) => ({ key: String(item.type), tab: item.label })));
+
+/* 当前分类下的配置 */
+const configQuerier = useQuery<IConfigDetail[] | undefined>({
+  enabled: computed(() => !!categoryQuerier.data.value),
+  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({
+  mutationKey: [props.updateApi.id],
+  mutationFn: props.updateApi.setDefaultConfig({ successMessage: '更新成功' }),
+  onSuccess() {
+    configQuerier.refetch();
+    queryClient.invalidateQueries({ queryKey: [props.configApi.id], exact: false });
+  },
+});
+const formSchema = reactiveComputed(() => {
+  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(() => {});
+
+  if (body)
+    await settingMutator.mutateAsync({ requestBody: settingForm.stateTF });
+}
+
+/** 重置表单内容 */
+function resetSetting() {
+  configList.value?.forEach(config => settingForm.state[config.key] = cloneDeep(config.value));
+  settingForm.$form.clearValidate?.();
+}
+</script>
+
+<template>
+  <Card
+    class="antd-cover__actions-right-align"
+    :activeTabKey="String(categoryId)"
+    :tabList="categoryList"
+    :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"
+    >
+      <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 #actions>
+      <Button :disabled="settingMutator.isPending.value" @click="resetSetting()">
+        重置
+      </Button>
+      <Button type="primary" :loading="settingMutator.isPending.value" @click="submitSetting()">
+        提交
+      </Button>
+    </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/admin/components/text/index.ts

@@ -1,13 +1,13 @@
-import Hash from './src/Hash.vue';
-import Amount from './src/Amount.vue';
-import Datetime from './src/Datetime.vue';
-import Duration from './src/Duration.vue';
-
-export { createTagGetter } from './src/createTagGetter';
-
-export const Text = {
-  Hash,
-  Amount,
-  Datetime,
-  Duration,
-};
+import Hash from './src/Hash.vue';
+import Amount from './src/Amount.vue';
+import Datetime from './src/Datetime.vue';
+import Duration from './src/Duration.vue';
+
+export { createTagGetter } from './src/createTagGetter';
+
+export const Text = {
+  Hash,
+  Amount,
+  Datetime,
+  Duration,
+};