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

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/FilterDrawer.vue

@@ -1,153 +1,153 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-import { Button as AButton, Drawer as ADrawer, Dropdown as ADropdown } from 'ant-design-vue';
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-const props = withDefaults(defineProps<{
-  loading?: boolean
-  filterQuery?: any
-  filterParams?: any
-  filterForm?: any
-}>(), {
-  loading: undefined,
-});
-const emits = defineEmits<{
-  (e: 'filter'): void
-  (e: 'reset', value: number): void
-}>();
-
-const filterVisible = ref(false);
-const loading = computed(() => {
-  const _loading1 = props.loading;
-  const _loading2: boolean = props.filterQuery?.isFetching.value;
-
-  if (_loading1 === undefined && _loading2 === undefined)
-    return false;
-
-  if (_loading1 !== undefined)
-    return _loading1;
-
-  return _loading2;
-});
-
-function filter() {
-  props.filterParams?.update?.();
-  emits('filter');
-  filterVisible.value = false;
-}
-
-function reset() {
-  props.filterForm?.$form.resetFields?.();
-  props.filterParams?.update?.();
-  emits('reset', 1);
-  filterVisible.value = false;
-}
-</script>
-
-<template>
-  <div class="p-3 bg-$antd-colorBgContainer text-14px rounded-2" v-bind="$attrs">
-    <!-- .filter-params 为空时显示 .filter-params-tips -->
-
-    <div class="m--3 p-3" @click="filterVisible = true">
-      <div class="filter-params">
-        <slot name="params" />
-      </div>
-      <div class="filter-params-tips">
-        条件筛选，点击打开
-      </div>
-    </div>
-
-    <!-- 操作区 -->
-    <div v-if="$slots.actions || $slots.moreActions" class="actions">
-      <slot name="actions" />
-
-      <ADropdown v-if="$slots.moreActions" trigger="click" destroyPopupOnHide>
-        <AButton type="link" size="small">
-          更多
-        </AButton>
-        <template #overlay>
-          <slot name="moreActions" />
-        </template>
-      </ADropdown>
-    </div>
-  </div>
-
-  <ADrawer
-    v-model:open="filterVisible" class="filter-drawer" placement="bottom"
-    height="50vh"
-  >
-    <template #extra>
-      <AButton class="mr-3 my--3" :disabled="loading" @click="reset()">
-        重置
-      </AButton>
-      <AButton class="my--3" type="primary" :loading="loading" @click="filter()">
-        筛选
-      </AButton>
-    </template>
-    <template #default>
-      <slot />
-    </template>
-  </ADrawer>
-</template>
-
-<style scoped lang="scss">
-.filter-params {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  gap: 5px 15px;
-}
-
-// .filter-params 为空时显示 .filter-params-tips
-.filter-params-tips {
-  display: none;
-  color: theme('colors.gray.DEFAULT');
-}
-
-.filter-params:empty {
-  display: none;
-}
-
-.filter-params:empty + .filter-params-tips {
-  display: block;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  border-top: 1px solid var(--antd-colorBorderSecondary);
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
-}
-</style>
-
-<style lang="scss">
-.filter-drawer {
-  .ant-drawer-header {
-    padding: 16px;
-
-    .ant-drawer-close {
-      --expand: 5px;
-
-      padding: var(--expand);
-      margin: calc(var(--expand) * -1) var(--expand) calc(var(--expand) * -1) 0;
-    }
-  }
-
-  .ant-drawer-body {
-    padding: 16px;
-  }
-
-  .ant-form-item {
-    margin-bottom: 0;
-
-    .ant-form-item-label {
-      padding-bottom: 0;
-    }
-  }
-}
-</style>
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { Button as AButton, Drawer as ADrawer, Dropdown as ADropdown } from 'ant-design-vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<{
+  loading?: boolean
+  filterQuery?: any
+  filterParams?: any
+  filterForm?: any
+}>(), {
+  loading: undefined,
+});
+const emits = defineEmits<{
+  (e: 'filter'): void
+  (e: 'reset', value: number): void
+}>();
+
+const filterVisible = ref(false);
+const loading = computed(() => {
+  const _loading1 = props.loading;
+  const _loading2: boolean = props.filterQuery?.isFetching.value;
+
+  if (_loading1 === undefined && _loading2 === undefined)
+    return false;
+
+  if (_loading1 !== undefined)
+    return _loading1;
+
+  return _loading2;
+});
+
+function filter() {
+  props.filterParams?.update?.();
+  emits('filter');
+  filterVisible.value = false;
+}
+
+function reset() {
+  props.filterForm?.$form.resetFields?.();
+  props.filterParams?.update?.();
+  emits('reset', 1);
+  filterVisible.value = false;
+}
+</script>
+
+<template>
+  <div class="p-3 bg-$antd-colorBgContainer text-14px rounded-2" v-bind="$attrs">
+    <!-- .filter-params 为空时显示 .filter-params-tips -->
+
+    <div class="m--3 p-3" @click="filterVisible = true">
+      <div class="filter-params">
+        <slot name="params" />
+      </div>
+      <div class="filter-params-tips">
+        条件筛选，点击打开
+      </div>
+    </div>
+
+    <!-- 操作区 -->
+    <div v-if="$slots.actions || $slots.moreActions" class="actions">
+      <slot name="actions" />
+
+      <ADropdown v-if="$slots.moreActions" trigger="click" destroyPopupOnHide>
+        <AButton type="link" size="small">
+          更多
+        </AButton>
+        <template #overlay>
+          <slot name="moreActions" />
+        </template>
+      </ADropdown>
+    </div>
+  </div>
+
+  <ADrawer
+    v-model:open="filterVisible" class="filter-drawer" placement="bottom"
+    height="50vh"
+  >
+    <template #extra>
+      <AButton class="mr-3 my--3" :disabled="loading" @click="reset()">
+        重置
+      </AButton>
+      <AButton class="my--3" type="primary" :loading="loading" @click="filter()">
+        筛选
+      </AButton>
+    </template>
+    <template #default>
+      <slot />
+    </template>
+  </ADrawer>
+</template>
+
+<style scoped lang="scss">
+.filter-params {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 5px 15px;
+}
+
+// .filter-params 为空时显示 .filter-params-tips
+.filter-params-tips {
+  display: none;
+  color: theme('colors.gray.DEFAULT');
+}
+
+.filter-params:empty {
+  display: none;
+}
+
+.filter-params:empty + .filter-params-tips {
+  display: block;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  border-top: 1px solid var(--antd-colorBorderSecondary);
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+}
+</style>
+
+<style lang="scss">
+.filter-drawer {
+  .ant-drawer-header {
+    padding: 16px;
+
+    .ant-drawer-close {
+      --expand: 5px;
+
+      padding: var(--expand);
+      margin: calc(var(--expand) * -1) var(--expand) calc(var(--expand) * -1) 0;
+    }
+  }
+
+  .ant-drawer-body {
+    padding: 16px;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+
+    .ant-form-item-label {
+      padding-bottom: 0;
+    }
+  }
+}
+</style>

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

@@ -2,7 +2,7 @@
 import isNil from 'lodash-es/isNil';
 import isFinite from 'lodash-es/isFinite';
 import bignumber from 'bignumber.js';
-import { dayjs } from '../../../../utils/date';
+import dayjs from '../../../../libs/dayjs';
 
 export const paramTypes = { numberRange, datetimeRange, options };
 

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>