@peng_kai/kit 0.1.16 → 0.2.0-beta.0

package/vite/index.mjs

@@ -0,0 +1,27 @@
+/**
+ * 获取 vite 的代理配置对象
+ * @param env 环境变量对象
+ * @returns 代理配置对象
+ */
+export function getProxy(env) {
+  const keyRE = /^VITE_(HTTP|WS)_PREFIX/;
+  const valueRE = /^.+? => .+?$/;
+  const proxys = {};
+
+  for (const [k, v] of Object.entries(env)) {
+    if (!(keyRE.test(k) && valueRE.test(v)))
+      continue;
+
+    const isWs = k.includes('_WS');
+    const [prefix, target] = v.split(' => ').map(i => i.trim());
+
+    proxys[prefix] = {
+      target,
+      changeOrigin: true,
+      ws: isWs,
+      rewrite: path => path.replace(new RegExp(`^${prefix}`), ''),
+    };
+  }
+
+  return proxys;
+}

package/vue/components/echarts/index.ts

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

package/vue/components/echarts/src/ECharts.vue

@@ -0,0 +1,48 @@
+<script lang="ts">
+import { useResizeObserver } from '@vueuse/core';
+import * as echarts from 'echarts';
+import { ref, shallowRef, toRef, watchEffect } from 'vue';
+import { useIsDark } from '../../../hooks/useIsDark';
+</script>
+
+<script setup lang="ts">
+const props = defineProps<{
+  echartOption: any
+}>();
+
+const $chartEle = ref<HTMLElement>();
+const echartInst = shallowRef<echarts.ECharts>();
+const isDark = useIsDark();
+
+watchEffect(() => {
+  if (!$chartEle.value) {
+    echartInst.value = undefined;
+    return;
+  }
+
+  echartInst.value?.dispose();
+  echartInst.value = echarts.init($chartEle.value, isDark.value ? 'dark' : 'light');
+  echartInst.value.setOption(props.echartOption ?? {});
+});
+
+/**
+ * 当图表的尺寸变化时，图表响应式变化。
+ * 考虑到性能问题，所以当尺寸变化时隐藏图表，避免浏览器反复绘制。
+ */
+let sizeResponsiveTimer = 0;
+useResizeObserver(toRef(() => $chartEle.value?.parentElement), () => {
+  $chartEle.value?.style.setProperty('width', '0px');
+  $chartEle.value?.style.setProperty('overflow', 'hidden');
+  clearTimeout(sizeResponsiveTimer);
+
+  sizeResponsiveTimer = window.setTimeout(() => {
+    $chartEle.value?.style.removeProperty('width');
+    $chartEle.value?.style.removeProperty('overflow');
+    echartInst.value?.resize({ width: 'auto' });
+  }, 200);
+});
+</script>
+
+<template>
+  <div ref="$chartEle" />
+</template>

package/vue/components/index.ts

@@ -1 +1,2 @@
 export { InfiniteQuery } from './infinite-query';
+export { ECharts } from './echarts';

package/vue/components/infinite-query/src/InfiniteQuery.vue

@@ -29,8 +29,7 @@ const props = withDefaults(defineProps<{
 
 const { queryier } = props;
 const pages = computed(() => queryier.data.value?.pages);
-// TODO: 状态之间的互斥仍有问题
-const isInitialLoading = computed(() => queryier.isInitialLoading.value);
+const isInitialLoading = computed(() => queryier.isPending.value);
 const isInitialLoadingError = computed(() => queryier.isLoadingError.value && !isInitialLoading.value);
 const isMoreLoading = computed(
   () => (queryier.isFetchingNextPage.value || queryier.isFetching.value) && !isInitialLoading.value,
@@ -60,12 +59,7 @@ const containerCssVars = computed(() => {
 });
 
 function refetchLastPage() {
-  queryier.refetch({
-    refetchPage(lastPage: any, _index, allPages: any[]) {
-      const lastIndex = allPages?.length - 1;
-      return lastPage?.pagination?.page === allPages?.[lastIndex]?.pagination?.page;
-    },
-  });
+  queryier.refetch();
 }
 
 function fetchNextPage() {

package/vue/components/test/KitTest.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { useTestStore } from './testStore';
+
+useTestStore();
+</script>
+
+<template>
+  <div>123</div>
+</template>

package/vue/components/test/testStore.ts

@@ -0,0 +1,11 @@
+import { useQueryClient } from '@tanstack/vue-query';
+import { defineStore } from 'pinia';
+import { useRouter } from 'vue-router';
+
+export const useTestStore = defineStore('test-store', () => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  console.log('🤡 / router:', router);
+  console.log('🤡 / queryClient:', queryClient);
+  return {};
+});

package/admin/hooks/index.ts

@@ -1,5 +0,0 @@
-export { usePage } from './usePage';
-export type { TPageState, IBreadcrumb } from './usePage';
-export { useMenu } from './useMenu';
-export type { TMenu } from './useMenu';
-export { usePageTab } from './usePageTab';

package/admin/hooks/usePageTab.ts

@@ -1,35 +0,0 @@
-import { createGlobalState } from '@vueuse/core';
-import { computed, ref, watch } from 'vue';
-import { usePage } from './usePage';
-
-export { usePageTab };
-
-const usePageTab = createGlobalState(() => {
-  const { currentPageKey, pageStateMap, openPage, closePage } = usePage();
-  const tabKeyList = ref<string[]>([]);
-  const tabList = computed(() => tabKeyList.value.map((key) => {
-    const state = pageStateMap.get(key);
-
-    return state ? { key, title: state.title, icon: state.icon } : undefined!;
-  }).filter(tab => !!tab));
-
-  const closeTab = (key: string) => {
-    const i = tabKeyList.value.indexOf(key);
-
-    if (i > -1) {
-      closePage(key);
-      setTimeout(() => tabKeyList.value.splice(i, 1));
-    }
-  };
-
-  watch(
-    currentPageKey,
-    (key) => {
-      if (!tabKeyList.value.includes(key))
-        tabKeyList.value.push(key);
-    },
-    { immediate: true },
-  );
-
-  return { activeTab: currentPageKey, tabList, closeTab, openTab: openPage };
-});

package/kitDependencies.ts

@@ -1,43 +0,0 @@
-import type dayjs from 'dayjs';
-import type { useRoute, useRouter } from 'vue-router';
-import type { useMenu, usePage, usePageTab } from './admin/hooks';
-import type { TRole, usePermission } from './admin/permission/usePermission';
-
-const KEY = '__PK_KIT_DEPENDENCIES__';
-
-interface Dependencies {
-  dayjs: typeof dayjs
-  appName: string
-  appId: string
-  roles: Record<string, TRole>
-  useRoute: typeof useRoute
-  useRouter: typeof useRouter
-  useMenu: typeof useMenu
-  usePage: typeof usePage
-  usePageTab: typeof usePageTab
-  usePermission: typeof usePermission
-}
-
-export function setDependencies(deps: Partial<Dependencies>) {
-  window[KEY] = { ...window[KEY], ...deps };
-}
-
-export function getDependencies() {
-  if (window[KEY]) {
-    return new Proxy(window[KEY], {
-      get(target, prop: keyof Dependencies) {
-        if (prop in target)
-          return target[prop];
-        else
-          throw new Error(`未发现 kit 依赖 ${prop}`);
-      },
-    });
-  }
-  else { throw new Error('未发现 kit 依赖'); };
-}
-
-declare global {
-  interface Window {
-    [KEY]: Dependencies
-  }
-}