@peng_kai/kit 0.1.2 → 0.1.4

package/request/request.ts

@@ -1,4 +1,5 @@
 import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+import { isSSR } from '../utils';
 
 export { createRequest };
 
@@ -17,6 +18,9 @@ function createRequest<Req, OResp, Resp = Api.TransformPageResult<OResp>>(
   // 返回 API 数据中的 data 字段值，默认
   async function request(reqData: Req, config?: ReqConfig): Promise<Api.GetDataField<Resp>>;
   async function request(reqData: Req, config?: ReqConfig): Promise<any> {
+    // if (isSSR())
+    //   return null;
+
     const params = paramBuilder(reqData);
     const serviceName = params.headers?.['Service-Name'] ?? '';
     const service = createRequest.services[serviceName]?.server;

package/request/type.d.ts

@@ -1,5 +1,8 @@
 declare namespace Api {
-  type Request = ((reqData: any, options?: Options) => Promise<any>) & { id: string };
+  type Request = ((reqData: any, options?: Options) => Promise<any>) & {
+    id: string
+    setDefaultConfig: (config: Partial<import('axios').AxiosRequestConfig>) => Request
+  };
   // type RequestPagination = (reqData: Partial<PageParam>, options?: Options) => Promise<PaginationData<any>>;
   interface PageParam {
     page: number

package/tsconfig.json

@@ -20,9 +20,12 @@
     /* Linting */
     "strict": true,
     "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": false,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noEmit": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "isolatedModules": true,
     "skipLibCheck": true
   },

package/uno.config.ts

@@ -0,0 +1 @@
+export default {};

package/utils/index.ts

@@ -30,6 +30,10 @@ export function hasToken() {
   return document.cookie.includes('has_token=1');
 }
 
+export function isSSR() {
+  return typeof window === 'undefined';
+}
+
 export function fixed() {
 
   // return (12).toFixed
@@ -90,6 +94,10 @@ export function getScanBrowser(chain: string, hash: string, type: 'transaction'
       return `https://suiexplorer.com/${_type}/${hash}`;
     },
     ZKSYNC: () => `https://explorer.zksync.io/${evmType()}/${hash}`,
+    SOLANA: () => {
+      const _type = (<TypeMap>{ address: 'account' })[type] ?? type;
+      return `https://solscan.io/${_type}/${hash}`;
+    },
   }[_chain] ?? (() => '');
 
   return urlFn();

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

@@ -2,15 +2,30 @@
 import { computed, ref, unref } from 'vue';
 import type { UseInfiniteQueryReturnType } from '@tanstack/vue-query';
 import { useCreateTrigger } from './useCreateTrigger';
+
+export type { ISlotProvide };
+
+interface ISlotProvide {
+  isInitialLoading: boolean
+  isInitialLoadingError: boolean
+  isEmpty: boolean
+  isMoreLoading: boolean
+  isMoreLoadingError: boolean
+  isNoMore: boolean
+  refetch: () => void
+}
 </script>
 
 <script setup lang="ts" generic="T extends UseInfiniteQueryReturnType<any, any>">
 type TPage = T extends UseInfiniteQueryReturnType<infer P, any> ? NonNullable<P> : any;
 type TRecord = TPage extends { list: Array<infer I> } ? I : any;
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   queryier: T
-}>();
+  distance?: string
+}>(), {
+  distance: '50px',
+});
 
 const { queryier } = props;
 const pages = computed(() => queryier.data.value?.pages);
@@ -20,8 +35,9 @@ const isInitialLoadingError = computed(() => queryier.isLoadingError.value && !i
 const isMoreLoading = computed(
   () => (queryier.isFetchingNextPage.value || queryier.isFetching.value) && !isInitialLoading.value,
 );
+const isEmpty = computed(() => queryier.isSuccess.value && !pages.value?.[0].list?.length);
 const isMoreLoadingError = computed(() => queryier.isRefetchError.value && !isMoreLoading.value);
-const noMore = computed(
+const isNoMore = computed(
   () =>
     !queryier.hasNextPage?.value
     && !isInitialLoading.value
@@ -43,10 +59,6 @@ const containerCssVars = computed(() => {
   };
 });
 
-function refetch() {
-  queryier.refetch();
-}
-
 function refetchLastPage() {
   queryier.refetch({
     refetchPage(lastPage: any, _index, allPages: any[]) {
@@ -65,6 +77,15 @@ function fetchNextPage() {
   queryier.fetchNextPage();
 }
 
+function refetch() {
+  if (isNoMore.value)
+    refetchLastPage();
+  else if (isMoreLoadingError.value)
+    fetchNextPage();
+  else
+    queryier.refetch();
+}
+
 function triggerFetchNextPage() {
   if (queryier.isError.value)
     return;
@@ -72,34 +93,70 @@ function triggerFetchNextPage() {
   fetchNextPage();
 }
 
-useCreateTrigger($container, triggerFetchNextPage);
+useCreateTrigger($container, triggerFetchNextPage, props.distance);
+
+const slotProvide = computed<ISlotProvide>(() => ({
+  isInitialLoading: isInitialLoading.value,
+  isInitialLoadingError: isInitialLoadingError.value,
+  isMoreLoading: isMoreLoading.value,
+  isMoreLoadingError: isMoreLoadingError.value,
+  isNoMore: isNoMore.value,
+  isEmpty: isEmpty.value,
+  refetch,
+}));
 </script>
 
 <template>
   <div ref="$container" class="infinite-query-wrapper" :style="containerCssVars">
-    <div v-if="isInitialLoading" class="initial-loading">
-      <i class="i-svg-spinners:180-ring-with-bg loading-icon" />
-    </div>
-    <div v-if="isInitialLoadingError" class="initial-loading-error" @click="refetch()">
-      <span>加载失败，点击重试</span>
-    </div>
-
-    <div v-for="(page, i) of pages" :key="i">
-      <template v-for="record of page.list">
-        <slot :record="record as TRecord" />
+    <div class="list">
+      <template v-for="(page) of pages">
+        <template v-for="record of page.list">
+          <!-- eslint-disable-next-line vue/no-extra-parens -->
+          <slot name="default" :record="(record as TRecord)" />
+        </template>
       </template>
     </div>
 
-    <div v-if="isMoreLoading" class="more-loading">
-      <i class="i-svg-spinners:180-ring-with-bg loading-icon" />
-      <span class="ml-1 text">加载中...</span>
-    </div>
-    <div v-if="isMoreLoadingError" class="more-loading-error" @click="fetchNextPage()">
-      <span class="text">加载失败，点击重试</span>
-    </div>
-    <div v-if="noMore" class="no-more" @click="refetchLastPage()">
-      <span class="text">暂无更多</span>
-    </div>
+    <slot
+      name="status" v-bind="slotProvide"
+    >
+      <slot name="initialLoading">
+        <div v-if="isInitialLoading" class="initial-loading">
+          <i class="i-svg-spinners:180-ring-with-bg loading-icon" />
+        </div>
+      </slot>
+
+      <slot name="initialLoadingError">
+        <div v-if="isInitialLoadingError" class="initial-loading-error" @click="refetch()">
+          <span>加载失败，点击重试</span>
+        </div>
+      </slot>
+
+      <slot name="empty">
+        <div v-if="isEmpty" class="empty">
+          <span>暂无数据</span>
+        </div>
+      </slot>
+
+      <slot name="oreLoading">
+        <div v-if="isMoreLoading" class="more-loading">
+          <i class="i-svg-spinners:180-ring-with-bg loading-icon" />
+          <span class="ml-1 text">加载中...</span>
+        </div>
+      </slot>
+
+      <slot name="moreLoadingError">
+        <div v-if="isMoreLoadingError" class="more-loading-error" @click="refetch()">
+          <span class="text">加载失败，点击重试</span>
+        </div>
+      </slot>
+
+      <slot name="noMore">
+        <div v-if="isNoMore" class="no-more" @click="refetch()">
+          <span class="text">暂无更多</span>
+        </div>
+      </slot>
+    </slot>
   </div>
 </template>
 
@@ -117,6 +174,7 @@ useCreateTrigger($container, triggerFetchNextPage);
 
 .initial-loading,
 .initial-loading-error,
+.empty,
 .more-loading,
 .more-loading-error,
 .no-more {

package/vue/components/infinite-query/src/useCreateTrigger.ts

@@ -1,15 +1,15 @@
-import { watch } from 'vue';
+import { onUnmounted, watch } from 'vue';
 import type { Ref } from 'vue';
 import { useIntersectionObserver, useIntervalFn } from '@vueuse/core';
 
-export function useCreateTrigger(containerEle: Ref<HTMLElement | undefined>, callback: Function) {
+export function useCreateTrigger(containerEle: Ref<HTMLElement | undefined>, callback: Function, distance: string) {
   const triggerEl = document.createElement('div');
 
   Object.assign(triggerEl.style, {
     position: 'relative',
     zIndex: '5',
-    marginTop: '-150px',
-    marginBottom: '150px',
+    marginTop: `-${distance}`,
+    marginBottom: distance,
     width: '5px',
     height: '5px',
     // background: 'red',
@@ -32,4 +32,8 @@ export function useCreateTrigger(containerEle: Ref<HTMLElement | undefined>, cal
     if (ele)
       ele.append(triggerEl);
   });
+
+  onUnmounted(() => {
+    triggerEl.remove();
+  });
 }