@peng_kai/kit 0.2.0-beta.9 → 0.2.0

package/admin/adminPlugin.ts

@@ -1,3 +1,4 @@
+import { inject } from 'vue';
 import type { App } from 'vue';
 import type { Router } from 'vue-router';
 import type { TUseMenuStore } from './stores/createUseMenuStore';
@@ -5,7 +6,7 @@ import type { TUsePageStore } from './stores/createUsePageStore';
 import type { TUsePageTabStore } from './stores/createUsePageTabStore';
 import type { TRole, TUsePermissionStore } from './stores/createUsePermissionStore';
 
-interface IOtions {
+export interface IOtions {
   meta: {
     appId: string
     appName: string
@@ -20,6 +21,7 @@ interface IOtions {
   }
 }
 
+const PROVIDE_KEY = 'TT_ADMIN';
 let _meta: IOtions['meta'];
 let _deps: IOtions['deps'];
 
@@ -27,6 +29,10 @@ export const adminPlugin = {
   install(_app: App, options: IOtions) {
     _meta = options.meta;
     _deps = options.deps;
+    _app.provide(PROVIDE_KEY, {
+      meta: this.meta,
+      deps: this.deps,
+    });
   },
   meta: new Proxy({} as IOtions['meta'], {
     get(_, p) {
@@ -45,3 +51,7 @@ export const adminPlugin = {
     },
   }),
 };
+
+export function injectTTAdmin() {
+  return inject<IOtions>(PROVIDE_KEY);
+}

package/admin/components/filter/src/FilterReset.vue

@@ -41,21 +41,24 @@ function reset() {
 </script>
 
 <template>
-  <div class="flex-none flex w-min ml-auto">
-    <AButton class="filter-btn mr2" type="primary" htmlType="submit" :loading="loading" @click="filter()">
-      查询
-    </AButton>
-    <AButton :disabled="loading" @click="reset()">
-      重置
-    </AButton>
+  <div class="btns flex-none flex w-min ml-auto gap-2">
+    <slot :loading="loading" :filter="filter" :reset="reset">
+      <AButton class="filter-btn" type="primary" htmlType="submit" :loading="loading" @click="filter()">
+        查询
+      </AButton>
+      <AButton :disabled="loading" @click="reset()">
+        重置
+      </AButton>
+    </slot>
   </div>
 </template>
 
 <style scoped lang="scss">
-.filter-btn {
+.filter-btn,
+:slotted(.filter-btn) {
   position: relative;
 
-  :deep(.ant-btn-loading-icon) {
+  .ant-btn-loading-icon{
     position: absolute;
     left: 50%;
     transform: translateX(-50%);

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

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

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

@@ -0,0 +1,164 @@
+<script lang="ts">
+import { useIntervalFn } from '@vueuse/core';
+import CKEditor from '@ckeditor/ckeditor5-vue';
+import { shallowRef } from 'vue';
+import { useInjectDisabled } from 'ant-design-vue/es/config-provider/DisabledContext';
+import { defaultConfig } from './editorConfig';
+import 'https://cdn.ckeditor.com/ckeditor5/41.1.0/super-build/ckeditor.js';
+import 'https://cdn.ckeditor.com/ckeditor5/41.1.0/super-build/translations/zh-cn.js';
+
+function useClassicEditor() {
+  const ClassicEditor = shallowRef();
+
+  const { pause } = useIntervalFn(() => {
+    ClassicEditor.value = (window as any).CKEDITOR?.ClassicEditor;
+    ClassicEditor.value && pause();
+  }, 500);
+
+  return ClassicEditor;
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps(['modelValue', 'disabled', 'plugins']);
+const emits = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>();
+
+const ClassicEditor = useClassicEditor();
+const disabled = useInjectDisabled();
+const editorConfig = { ...defaultConfig };
+editorConfig.extraPlugins = props.plugins;
+</script>
+
+<template>
+  <div class="editor-wrapper">
+    <CKEditor.component
+      v-if="ClassicEditor"
+      :modelValue="props.modelValue"
+      :editor="ClassicEditor"
+      :config="editorConfig"
+      :disabled="props.disabled ?? disabled"
+      @update:modelValue="v => emits('update:modelValue', v)"
+    />
+    <div v-else class="flex justify-center">
+      <i class="i-svg-spinners:180-ring-with-bg block text-5 text-$loading-color" />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.editor-wrapper {
+  --loading-color: var(--antd-colorPrimary);
+
+  :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/RichText.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { useVModel } from '@vueuse/core';
+import { defineModel, defineProps, withDefaults } from 'vue';
 import CKEditor from '@ckeditor/ckeditor5-vue';
 import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
 import { Alignment } from '@ckeditor/ckeditor5-alignment';
@@ -212,18 +212,15 @@ const props = withDefaults(defineProps<{
   modelValue: '',
   plugins: () => [],
 });
-const emits = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-}>();
 
-const editorData = useVModel(props, 'modelValue', emits);
+const modelValue = defineModel({ default: '' });
 const localeEditorConfig = { ...editorConfig };
 localeEditorConfig.extraPlugins = [...props.plugins];
 </script>
 
 <template>
   <div class="editor-wrapper">
-    <CKEditor.component v-model="editorData" :editor="ClassicEditor" :config="localeEditorConfig" />
+    <CKEditor.component v-model="modelValue" :editor="ClassicEditor" :config="localeEditorConfig" />
   </div>
 </template>
 

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/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';