@peng_kai/kit 0.1.17 → 0.2.0-beta.1

package/admin/components/filter/src/useFilterQuery.ts

@@ -1,30 +1,46 @@
 import { useInfiniteQuery, useQuery } from '@tanstack/vue-query';
-import { useFilterParams } from './useFilterParams';
+import { getNextPageParam, keepPreviousData } from '../../../../request/queryClient';
+import { type ShcemeConfig, useFilterParams } from './useFilterParams';
 
 /**
-
+ * 函数用于创建一个带有过滤参数的分页查询。
+ *
+ * @param apiFn - API函数
+ * @param params - 过滤参数的配置
+ * @returns 返回一个元组，包含查询对象和过滤参数
  */
-export function useFilterPaginationQuery<Api extends Api.Request, P extends Api.GetParam<Api>>(apiFn: Api, paramsFn: () => P) {
-  type Data = Api.GetData<Api>;
-
-  const filterParams = useFilterParams(apiFn, paramsFn);
+export function useFilterPaginationQuery<
+  Api extends Api.Request,
+  P extends Api.GetParam<Api>,
+>(apiFn: Api, params: ShcemeConfig<P>) {
+  const filterParams = useFilterParams<Api.GetParam<Api>>(params);
   const filterQuery = useQuery({
-    keepPreviousData: true,
-    queryKey: [apiFn.id, 'pagination', filterParams],
-    queryFn: () => (apiFn(filterParams) as Promise<Data>),
+    queryKey: [apiFn.id, 'pagination', filterParams.$params],
+    queryFn: () => apiFn(filterParams.$params) as Promise<Api.GetData<Api>>,
+    placeholderData: keepPreviousData,
   });
 
   return [filterQuery, filterParams] as const;
 }
 
-export function useFilterInfiniteQuery<Api extends Api.Request, P extends Api.GetParam<Api>>(apiFn: Api, paramsFn: () => P) {
-  type Data = Api.GetData<Api>;
-
-  const filterParams = useFilterParams(apiFn, paramsFn);
+/**
+ * 函数用于创建一个带有过滤参数的无限滚动查询。
+ *
+ * @param apiFn - API函数
+ * @param params - 过滤参数的配置
+ * @returns 返回一个数组，包含查询对象和过滤参数
+ */
+export function useFilterInfiniteQuery<
+  Api extends Api.Request,
+  P extends Api.GetParam<Api>,
+>(apiFn: Api, params: ShcemeConfig<P>) {
+  const filterParams = useFilterParams<Api.GetParam<Api>>(params);
   const filterQuery = useInfiniteQuery({
-    keepPreviousData: true,
-    queryKey: [apiFn.id, 'infinite', filterParams],
-    queryFn: ctx => (apiFn({ ...filterParams, ...ctx.pageParam }) as Promise<Data>),
+    queryKey: [apiFn.id, 'infinite', filterParams.$params],
+    queryFn: ctx => (apiFn({ ...filterParams.$params, ...ctx.pageParam }) as Promise<Api.GetData<Api>>),
+    initialPageParam: { page: 1, page_size: 10 },
+    placeholderData: keepPreviousData,
+    getNextPageParam,
   });
 
   return [filterQuery, filterParams] as const;

package/admin/components/rich-text/index.ts

@@ -0,0 +1,2 @@
+export { default as RichText } from './src/RichText.vue';
+export { createImageUploaderForAws3 } from './src/imageUploader';

package/admin/components/rich-text/src/RichText.vue

@@ -0,0 +1,342 @@
+<script lang="ts">
+import { useVModel } from '@vueuse/core';
+import CKEditor from '@ckeditor/ckeditor5-vue';
+import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
+import { Alignment } from '@ckeditor/ckeditor5-alignment';
+import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
+import { Bold, Code, Italic, Strikethrough, Subscript, Superscript, Underline } from '@ckeditor/ckeditor5-basic-styles';
+import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
+import { CodeBlock } from '@ckeditor/ckeditor5-code-block';
+import { Essentials } from '@ckeditor/ckeditor5-essentials';
+import { Font } from '@ckeditor/ckeditor5-font';
+import { Heading } from '@ckeditor/ckeditor5-heading';
+import { Highlight } from '@ckeditor/ckeditor5-highlight';
+import { HorizontalLine } from '@ckeditor/ckeditor5-horizontal-line';
+import { GeneralHtmlSupport } from '@ckeditor/ckeditor5-html-support';
+import { HtmlEmbed } from '@ckeditor/ckeditor5-html-embed';
+import { AutoImage, Image, ImageCaption, ImageInsert, ImageResize, ImageStyle, ImageToolbar, ImageUpload, PictureEditing } from '@ckeditor/ckeditor5-image';
+import { Indent, IndentBlock } from '@ckeditor/ckeditor5-indent';
+import { AutoLink, Link, LinkImage } from '@ckeditor/ckeditor5-link';
+import { List, ListProperties, TodoList } from '@ckeditor/ckeditor5-list'; import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
+import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
+import { RemoveFormat } from '@ckeditor/ckeditor5-remove-format';
+import { Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar } from '@ckeditor/ckeditor5-table';
+import { TextTransformation } from '@ckeditor/ckeditor5-typing';
+import { WordCount } from '@ckeditor/ckeditor5-word-count';
+import { SourceEditing } from '@ckeditor/ckeditor5-source-editing';
+import { ShowBlocks } from '@ckeditor/ckeditor5-show-blocks';
+import type { CKEditorConfig, PluginConstructor } from './type';
+
+import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn';
+import '@ckeditor/ckeditor5-html-embed/build/translations/zh-cn';
+
+const editorConfig: CKEditorConfig = {
+  plugins: [
+    Alignment,
+    Autoformat,
+    AutoImage,
+    AutoLink,
+    BlockQuote,
+    Bold,
+    Code,
+    CodeBlock,
+    Essentials,
+    Font,
+    GeneralHtmlSupport,
+    HtmlEmbed,
+    Heading,
+    Highlight,
+    HorizontalLine,
+    Image,
+    ImageCaption,
+    ImageInsert,
+    ImageResize,
+    ImageStyle,
+    ImageToolbar,
+    ImageUpload,
+    Indent,
+    IndentBlock,
+    Italic,
+    Link,
+    LinkImage,
+    List,
+    ListProperties,
+    TodoList,
+    MediaEmbed,
+    Paragraph,
+    PictureEditing,
+    RemoveFormat,
+    Strikethrough,
+    Subscript,
+    Superscript,
+    Table,
+    TableCaption,
+    TableCellProperties,
+    TableColumnResize,
+    TableProperties,
+    TableToolbar,
+    TextTransformation,
+    Underline,
+    WordCount,
+    SourceEditing,
+    ShowBlocks,
+  ],
+  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',
+      'insertImage',
+      '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',
+    ] as any,
+    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,
+  },
+};
+</script>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  modelValue?: string
+  plugins?: PluginConstructor[]
+}>(), {
+  modelValue: '',
+  plugins: () => [],
+});
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>();
+
+const editorData = useVModel(props, 'modelValue', emits);
+const localeEditorConfig = { ...editorConfig };
+localeEditorConfig.extraPlugins = [...props.plugins];
+</script>
+
+<template>
+  <div class="editor-wrapper">
+    <CKEditor.component v-model="editorData" :editor="ClassicEditor" :config="localeEditorConfig" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.editor-wrapper {
+  :deep(.ck-editor__main > .ck-content) {
+    height: 500px;
+    overflow: auto;
+  }
+}
+
+:root.dark .editor-wrapper {
+  /* Overrides the border radius setting in the theme. */
+  // --ck-border-radius: 4px;
+
+  /* Overrides the default font size in the theme. */
+  // --ck-font-size-base: 14px;
+
+  /* Helper variables to avoid duplication in the colors. */
+  --ck-custom-background: hsl(270deg 1% 29%);
+  --ck-custom-foreground: hsl(255deg 3% 18%);
+  --ck-custom-border: hsl(300deg 1% 22%);
+  --ck-custom-white: hsl(0deg 0% 100%);
+
+  /* -- Overrides generic colors. ------------------------------------------------------------- */
+
+  --ck-color-base-foreground: var(--ck-custom-background);
+  --ck-color-focus-border: hsl(208deg 90% 62%);
+  --ck-color-text: hsl(0deg 0% 98%);
+  --ck-color-shadow-drop: hsl(0deg 0% 0% / 20%);
+  --ck-color-shadow-inner: hsl(0deg 0% 0% / 10%);
+
+  /* -- Overrides the default .ck-button class colors. ---------------------------------------- */
+
+  --ck-color-button-default-background: var(--ck-custom-background);
+  --ck-color-button-default-hover-background: hsl(270deg 1% 22%);
+  --ck-color-button-default-active-background: hsl(270deg 2% 20%);
+  --ck-color-button-default-active-shadow: hsl(270deg 2% 23%);
+  --ck-color-button-default-disabled-background: var(--ck-custom-background);
+  --ck-color-button-on-background: var(--ck-custom-foreground);
+  --ck-color-button-on-hover-background: hsl(255deg 4% 16%);
+  --ck-color-button-on-active-background: hsl(255deg 4% 14%);
+  --ck-color-button-on-active-shadow: hsl(240deg 3% 19%);
+  --ck-color-button-on-disabled-background: var(--ck-custom-foreground);
+  --ck-color-button-action-background: hsl(168deg 76% 42%);
+  --ck-color-button-action-hover-background: hsl(168deg 76% 38%);
+  --ck-color-button-action-active-background: hsl(168deg 76% 36%);
+  --ck-color-button-action-active-shadow: hsl(168deg 75% 34%);
+  --ck-color-button-action-disabled-background: hsl(168deg 76% 42%);
+  --ck-color-button-action-text: var(--ck-custom-white);
+  --ck-color-button-save: hsl(120deg 100% 46%);
+  --ck-color-button-cancel: hsl(15deg 100% 56%);
+
+  /* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
+
+  --ck-color-dropdown-panel-background: var(--ck-custom-background);
+  --ck-color-dropdown-panel-border: var(--ck-custom-foreground);
+
+  /* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */
+
+  --ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
+  --ck-color-split-button-hover-border: var(--ck-custom-foreground);
+
+  /* -- Overrides the default .ck-input class colors. ----------------------------------------- */
+
+  --ck-color-input-background: var(--ck-custom-background);
+  --ck-color-input-border: hsl(257deg 3% 43%);
+  --ck-color-input-text: hsl(0deg 0% 98%);
+  --ck-color-input-disabled-background: hsl(255deg 4% 21%);
+  --ck-color-input-disabled-border: hsl(250deg 3% 38%);
+  --ck-color-input-disabled-text: hsl(0deg 0% 78%);
+
+  /* -- Overrides the default .ck-labeled-field-view class colors. ---------------------------- */
+
+  --ck-color-labeled-field-label-background: var(--ck-custom-background);
+
+  /* -- Overrides the default .ck-list class colors. ------------------------------------------ */
+
+  --ck-color-list-background: var(--ck-custom-background);
+  --ck-color-list-button-hover-background: var(--ck-custom-foreground);
+  --ck-color-list-button-on-background: hsl(208deg 88% 52%);
+  --ck-color-list-button-on-text: var(--ck-custom-white);
+
+  /* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
+
+  --ck-color-panel-background: var(--ck-custom-background);
+  --ck-color-panel-border: var(--ck-custom-border);
+
+  /* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
+
+  --ck-color-toolbar-background: var(--ck-custom-background);
+  --ck-color-toolbar-border: var(--ck-custom-border);
+
+  /* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
+
+  --ck-color-tooltip-background: hsl(252deg 7% 14%);
+  --ck-color-tooltip-text: hsl(0deg 0% 93%);
+
+  /* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
+
+  --ck-color-image-caption-background: hsl(0deg 0% 97%);
+  --ck-color-image-caption-text: hsl(0deg 0% 20%);
+
+  /* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
+
+  --ck-color-widget-blurred-border: hsl(0deg 0% 87%);
+  --ck-color-widget-hover-border: hsl(43deg 100% 68%);
+  --ck-color-widget-editable-focus-background: var(--ck-custom-white);
+
+  /* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
+
+  --ck-color-link-default: hsl(190deg 100% 75%);
+  --ck-color-base-background: #141414;
+  --ck-color-base-border: #424242;
+}
+</style>

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

@@ -0,0 +1,34 @@
+import type { AwsS3 } from '../../../../utils/upload';
+import type { PluginConstructor } from './type';
+
+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;
+
+          if (file) {
+            const { uploader, fileURL } = await awsS3.upload(file, rootDir);
+
+            uploader.on('httpUploadProgress', (progress) => {
+              loader.uploadTotal = progress.total ?? null;
+              loader.uploaded = progress.loaded ?? 0;
+            });
+
+            await uploader.done();
+
+            return { default: fileURL };
+          }
+
+          return {};
+        },
+        abort() {
+
+        },
+      };
+    };
+  };
+}

package/admin/components/rich-text/src/type.d.ts

@@ -0,0 +1,7 @@
+import type CKEditor from '@ckeditor/ckeditor5-vue';
+import type { RequiredDeep } from 'type-fest';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+export type CKEditorProps = NonNullable<ComponentProps<typeof CKEditor['component']>>;
+export type CKEditorConfig = NonNullable<CKEditorProps['config']>;
+export type PluginConstructor = NonNullable<CKEditorConfig['extraPlugins']>[number];

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

@@ -1,59 +1,59 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useElementSize } from '@vueuse/core';
-
-const props = defineProps<{
-  selector: string
-}>();
-
-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);
-
-function scrollTo(top: number) {
-  $contentParent?.scrollTo({ top });
-}
-</script>
-
-<template>
-  <div v-if="visible" class="wrapper">
-    <div class="btn" @click="scrollTo(0)">
-      <i class="i-fluent:arrow-previous-24-filled rotate-90" />
-    </div>
-    <div class="btn" @click="scrollTo($contentParent?.scrollHeight ?? Infinity)">
-      <i class="i-fluent:arrow-previous-24-filled rotate-270" />
-    </div>
-    <!-- <div v-if="showReturn" class="btn" @click="toLastY()">
-      <i class="i-fluent:arrow-hook-down-left-24-filled rotate-270" />
-    </div> -->
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.wrapper {
-  font-size: 18px;
-}
-
-.btn {
-  display: flex;
-  width: 2em;
-  height: 2em;
-  align-items: center;
-  justify-content: center;
-  border-radius: 2px;
-  background: #bcbcbc;
-  color: #000;
-  cursor: pointer;
-  opacity: 0.5;
-
-  &:active {
-    transform: scale(0.9);
-  }
-
-  & + & {
-    margin-top: 1px;
-  }
-}
-</style>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useElementSize } from '@vueuse/core';
+
+const props = defineProps<{
+  selector: string
+}>();
+
+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);
+
+function scrollTo(top: number) {
+  $contentParent?.scrollTo({ top });
+}
+</script>
+
+<template>
+  <div v-if="visible" class="wrapper">
+    <div class="btn" @click="scrollTo(0)">
+      <i class="i-fluent:arrow-previous-24-filled rotate-90" />
+    </div>
+    <div class="btn" @click="scrollTo($contentParent?.scrollHeight ?? Infinity)">
+      <i class="i-fluent:arrow-previous-24-filled rotate-270" />
+    </div>
+    <!-- <div v-if="showReturn" class="btn" @click="toLastY()">
+      <i class="i-fluent:arrow-hook-down-left-24-filled rotate-270" />
+    </div> -->
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.wrapper {
+  font-size: 18px;
+}
+
+.btn {
+  display: flex;
+  width: 2em;
+  height: 2em;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+  background: #bcbcbc;
+  color: #000;
+  cursor: pointer;
+  opacity: 0.5;
+
+  &:active {
+    transform: scale(0.9);
+  }
+
+  & + & {
+    margin-top: 1px;
+  }
+}
+</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,
+};