@peng_kai/kit 0.1.17 → 0.2.0-beta.0

package/antd/hooks/useAntdForm.ts

@@ -1,28 +1,45 @@
-import { reactiveComputed } from '@vueuse/core';
+/**
+ * TODO:
+ * 1. 分组表单排序
+ */
+
 import type { FormInstance, FormItemProps, RuleObject } from 'ant-design-vue/es/form';
 import type { FormProps } from 'ant-design-vue';
-import { computed, ref } from 'vue';
-import type { ComputedRef, UnwrapRef } from 'vue';
-import { GROUP_SEP, buildGroupFieldName, getGroupIndex } from './useAntdForm.helpers';
+import { type MaybeRefOrGetter, computed, reactive, ref, toRef, watch, watchEffect } from 'vue';
+import { mapValues } from 'lodash-es';
+import { GROUP_SEP, buildGroupField, getGroupIndex } from './useAntdForm.helpers';
 
 export { useAntdForm };
-export type { TField, RecordToSchemas };
+export type { SchemaConfig, ItemSchema };
+
+type SchemaConfig<T> = {
+  [P in keyof T]: {
+    value: MaybeRefOrGetter<T[P]>
+    show?: (state: T) => boolean
+    rules?: RuleObject[] | ((state: T) => Array<RuleObject | undefined> | undefined)
+  }
+};
+type ItemSchema = SchemaConfig<any>[string];
+
+interface Options<S, TS> {
+  transform?: (state: S) => TS
+}
+
+function useAntdForm<S extends Record<string, any>, TS = S>(schemas: MaybeRefOrGetter<SchemaConfig<S>>, options?: Options<S, TS>) {
+  const schemasR = toRef(schemas);
 
-function useAntdForm<
-  F extends Record<string, TField>,
-  S extends GetFormState<F>,
-  STF = S,
->(
-  schemas: F,
-  _options?: {
-    transform?: (state: S) => STF
-  },
-) {
+  const state = ref({} as S);
+  const stateTF = computed<TS>(() => options?.transform?.(<any>state.value) ?? <any>state.value);
+  const show = computed(() => mapValues(state.value, (_, k): boolean => schemasR.value[k].show?.(state.value) ?? true));
+  const props = computed<FormProps>(() => ({ model: state.value, ref: (c: any) => (formRef.value = c) }));
+  const itemProps = computed(() => mapValues(state.value, (_, k): FormItemProps => {
+    const r = schemasR.value[k].rules;
+    const rules = typeof r === 'function' ? r(state.value)?.filter((i: any) => !!i) : r;
+
+    return { name: k, rules };
+  }));
   const formRef = ref<FormInstance>();
   const $form = {
-    get clearValidate() {
-      return formRef.value?.clearValidate;
-    },
     get getFieldsValue() {
       return formRef.value?.getFieldsValue;
     },
@@ -38,64 +55,39 @@ function useAntdForm<
     get validateFields() {
       return formRef.value?.validateFields;
     },
-    setField(name: string, schema: TField) {
-      (schemas as any)[name] = schema;
+    get clearValidate() {
+      return formRef.value?.clearValidate;
     },
-    addGroup(groupName: string, groupSchemas: Record<string, TField>) {
-      const i = getGroupIndex(groupName, schemas) + 1;
+    addGroup(groupName: string, groupSchemas: Record<string, ItemSchema>) {
+      const i = getGroupIndex(groupName, schemasR.value) + 1;
 
       Object.keys(groupSchemas).forEach((key) => {
-        const name = buildGroupFieldName(groupName, i, key);
-        (schemas as any)[name] = groupSchemas[key];
+        const name = buildGroupField(groupName, i, key);
+        schemasR.value[name] = groupSchemas[key];
       });
     },
     removeGroup(groupName: string, index?: number) {
-      const i = index ?? getGroupIndex(groupName, schemas);
+      const i = index ?? getGroupIndex(groupName, schemasR.value);
 
-      Object.keys(schemas).forEach((key) => {
+      Object.keys(schemasR.value).forEach((key) => {
         if (key.startsWith(groupName + GROUP_SEP + i))
-          Reflect.deleteProperty(schemas, key);
+          Reflect.deleteProperty(schemasR.value, key);
       });
     },
   };
-  const state = reactiveComputed(() => {
-    return Object.fromEntries(Object.entries(schemas).map(([k, v]) => [k, v.value])) as S;
-  });
-  const props = reactiveComputed<FormProps>(() => {
-    return {
-      model: state,
-      ref: (c: any) => (formRef.value = c),
-    };
-  });
-  const itemProps = reactiveComputed(() => {
-    const propsTuple = Object.entries(schemas).map(([key, value]): [string, FormItemProps] => [
-      key,
-      { name: key, rules: value.rules },
-    ]);
-    const props = Object.fromEntries(propsTuple) as Record<keyof S, FormItemProps>;
 
-    return props;
-  });
-  const stateTF = _options?.transform ? computed(() => _options.transform!(state)) : computed(() => state);
+  watch(itemProps, () => $form.clearValidate?.(), { flush: 'post', deep: true });
 
-  return {
-    $form,
-    state,
-    stateTF: stateTF as ComputedRef<STF>,
-    props,
-    itemProps,
-  };
-}
+  watchEffect(() => {
+    const _state: any = {};
 
-interface TField<V = any> {
-  value: V
-  rules?: RuleObject[]
-}
+    for (const k in schemasR.value) {
+      const item = schemasR.value[k];
+      _state[k] = (k in state.value) ? toRef(state.value, k) : toRef(item, 'value');
+    }
 
-type RecordToSchemas<T extends Record<string, unknown>> = {
-  [K in keyof T]: TField<T[K]>
-};
+    state.value = _state;
+  });
 
-type GetFormState<C extends Record<string, TField>> = {
-  [K in keyof C]: UnwrapRef<C[K]['value']>;
-};
+  return reactive({ state, stateTF, show, props, itemProps, $form });
+}

package/antd/hooks/useAntdTable.ts

@@ -10,6 +10,8 @@ interface ISorter {
   order?: string
 }
 
+const defaultPageSizeOptions = ['10', '20', '50', '100'];
+
 export function useAntdTable<
   UQRR extends UseQueryReturnType<any, any>,
   QP extends Partial<{ page?: string | number, page_size?: string | number }>,
@@ -24,6 +26,15 @@ export function useAntdTable<
   const sorter = ref<ISorter>();
   const sorters = ref<ISorter[]>();
 
+  /* pageSizeOptions 初始化 */
+  const pageSizeOptions = [...defaultPageSizeOptions];
+  const initPageSize = String(queryParams?.page_size ?? '10');
+
+  if (!pageSizeOptions.includes(initPageSize)) {
+    pageSizeOptions.push(initPageSize);
+    pageSizeOptions.sort((p, n) => Number(p) - Number(n));
+  }
+
   const onChange: ComponentProps<typeof Table>['onChange'] = (_pagination, _filters, _sorter, extra) => {
     if (extra.action === 'paginate') {
       const page = queryParams.page_size !== _pagination.pageSize ? 1 : _pagination.current;
@@ -65,6 +76,7 @@ export function useAntdTable<
         total: pagination?.total ?? 0,
         showSizeChanger: true,
         showQuickJumper: true,
+        pageSizeOptions,
         showTotal: total => `共 ${total} 条`,
       },
       loading: isLoading.value,

package/antd/index.ts

@@ -5,4 +5,4 @@ export { useAntdForm } from './hooks/useAntdForm';
 export { useAntdTheme } from './hooks/useAntdTheme';
 export { createAntdModal } from './hooks/createAntdModal';
 export { default as InputNumberRange } from './components/InputNumberRange.vue';
-export type { TField, RecordToSchemas } from './hooks/useAntdForm.ts';
+export type { SchemaConfig, ItemSchema } from './hooks/useAntdForm.ts';

package/libs/a-calc.ts

@@ -0,0 +1 @@
+export * from 'a-calc';

package/libs/axios.ts

@@ -0,0 +1,2 @@
+export { default } from 'axios';
+export * from 'axios';

package/libs/bignumber.ts

@@ -0,0 +1,2 @@
+export { default } from 'bignumber.js';
+export { BigNumber } from 'bignumber.js';

package/libs/dayjs.ts

@@ -0,0 +1,5 @@
+import dayjs from 'dayjs';
+
+export { isDayjs, unix, locale, extend } from 'dayjs';
+export type { Dayjs, PluginFunc, UnitType, UnitTypeLong, UnitTypeLongPlural, UnitTypeShort, QUnitType, ConfigType, ConfigTypeMap, OpUnitType, OptionType, ManipulateType } from 'dayjs';
+export default dayjs;

package/libs/echarts.ts

@@ -0,0 +1,5 @@
+import echarts from 'echarts';
+
+export type * from 'echarts/types/dist/echarts';
+
+export default echarts;

package/libs/localstorage-slim.ts

@@ -0,0 +1,2 @@
+export { default } from 'localstorage-slim';
+export * from 'localstorage-slim';

package/libs/lodash-es.ts

@@ -0,0 +1 @@
+export * from 'lodash-es';

package/libs/pinia.ts

@@ -0,0 +1 @@
+export * from 'pinia';

package/libs/vue-query.ts

@@ -0,0 +1 @@
+export * from '@tanstack/vue-query';

package/libs/vueuse.ts

@@ -0,0 +1,3 @@
+export * from '@vueuse/components';
+export * from '@vueuse/core';
+export * from '@vueuse/router';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.1.17",
+  "version": "0.2.0-beta.0",
   "description": "",
   "author": "",
   "license": "ISC",
@@ -13,45 +13,84 @@
     "lint:fix": "eslint . --fix"
   },
   "peerDependencies": {
-    "@tanstack/vue-query": "4.37.1",
+    "@tanstack/vue-query": "5.20.1",
     "@vueuse/core": "10.7.2",
-    "ant-design-vue": "4.1.1",
-    "axios": "1.6.5",
+    "ant-design-vue": "4.1.2",
+    "axios": "1.6.7",
     "bignumber.js": "9.1.2",
     "dayjs": "1.11.10",
     "lodash-es": "4.17.21",
-    "vue": "3.4.15",
+    "vue": "3.4.18",
     "vue-router": "4.2.5"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.511.0",
+    "@aws-sdk/lib-storage": "^3.511.0",
     "@babel/generator": "^7.23.6",
-    "@babel/parser": "^7.23.6",
-    "@babel/traverse": "^7.23.7",
-    "@babel/types": "^7.23.6",
-    "@tanstack/vue-query": "^4.37.1",
+    "@babel/parser": "^7.23.9",
+    "@babel/traverse": "^7.23.9",
+    "@babel/types": "^7.23.9",
+    "@ckeditor/ckeditor5-adapter-ckfinder": "^41.0.0",
+    "@ckeditor/ckeditor5-alignment": "^41.0.0",
+    "@ckeditor/ckeditor5-autoformat": "^41.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^41.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^41.0.0",
+    "@ckeditor/ckeditor5-build-classic": "^41.0.0",
+    "@ckeditor/ckeditor5-code-block": "^41.0.0",
+    "@ckeditor/ckeditor5-document-outline": "^41.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^41.0.0",
+    "@ckeditor/ckeditor5-essentials": "^41.0.0",
+    "@ckeditor/ckeditor5-font": "^41.0.0",
+    "@ckeditor/ckeditor5-heading": "^41.0.0",
+    "@ckeditor/ckeditor5-highlight": "^41.0.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^41.0.0",
+    "@ckeditor/ckeditor5-html-embed": "^41.0.0",
+    "@ckeditor/ckeditor5-html-support": "^41.0.0",
+    "@ckeditor/ckeditor5-image": "^41.0.0",
+    "@ckeditor/ckeditor5-import-word": "^41.0.0",
+    "@ckeditor/ckeditor5-indent": "^41.0.0",
+    "@ckeditor/ckeditor5-link": "^41.0.0",
+    "@ckeditor/ckeditor5-list": "^41.0.0",
+    "@ckeditor/ckeditor5-media-embed": "^41.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^41.1.0",
+    "@ckeditor/ckeditor5-remove-format": "^41.0.0",
+    "@ckeditor/ckeditor5-show-blocks": "^41.0.0",
+    "@ckeditor/ckeditor5-source-editing": "^41.0.0",
+    "@ckeditor/ckeditor5-table": "^41.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^41.0.0",
+    "@ckeditor/ckeditor5-typing": "^41.0.0",
+    "@ckeditor/ckeditor5-upload": "^41.0.0",
+    "@ckeditor/ckeditor5-vue": "^5.1.0",
+    "@ckeditor/ckeditor5-word-count": "^41.0.0",
+    "@tanstack/vue-query": "^5.20.1",
+    "@vueuse/components": "^10.7.2",
     "@vueuse/core": "^10.7.2",
+    "@vueuse/router": "^10.7.2",
     "a-calc": "^1.3.8",
-    "ant-design-vue": "^4.1.1",
+    "ant-design-vue": "^4.1.2",
     "archiver": "^6.0.1",
-    "axios": "^1.6.5",
+    "axios": "^1.6.7",
     "bignumber.js": "^9.1.2",
-    "chokidar": "^3.5.3",
+    "chokidar": "^3.6.0",
     "dayjs": "^1.11.10",
+    "echarts": "^5.4.3",
     "execa": "^8.0.1",
     "fast-glob": "^3.3.2",
+    "localstorage-slim": "^2.7.0",
     "lodash-es": "^4.17.21",
     "nprogress": "^0.2.0",
-    "tsx": "^4.7.0",
-    "vue": "^3.4.15",
+    "pinia": "^2.1.7",
+    "tsx": "^4.7.1",
+    "vue": "^3.4.18",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@peng_kai/lint": "^0.1.0",
     "@types/archiver": "^6.0.2",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "18",
+    "@types/node": "18.19.15",
     "@types/nprogress": "^0.2.3",
-    "type-fest": "^4.9.0",
+    "type-fest": "^4.10.2",
     "typescript": "^5.3.3",
     "vue-component-type-helpers": "^1.8.27"
   }

package/request/helpers.ts

@@ -1,6 +1,6 @@
 import type { AxiosInstance } from 'axios';
 
-export { isTimeout, getServices, ApiCode, ApiError };
+export { isTimeout, getServices, getBaseUrlByEnv, ApiCode, ApiError };
 
 enum ApiCode {
   NORMAL = 0, // 正常
@@ -27,6 +27,25 @@ function isTimeout(error: any) {
   return error?.message?.toLowerCase().includes('timeout');
 }
 
+function getBaseUrlByEnv(service: string, env: Record<string, string>) {
+  let serviceName = '';
+
+  if (/^https?:\/\//.test(service)) {
+    const fileName = service.split('/').pop();
+    serviceName = fileName?.split('.').shift() ?? '';
+  }
+  else {
+    serviceName = service;
+  }
+
+  if (!serviceName)
+    return '';
+
+  const [prefix, target] = env[`VITE_HTTP_PREFIX_${serviceName}`]?.split(' => ') ?? ['', ''];
+
+  return (prefix && target) ? prefix : '';
+}
+
 class ApiError<TResp = any> extends Error {
   public static is<ErrorResp = any>(error: any): error is ApiError<ErrorResp> {
     return !!error?.isApiError;

package/request/queryClient.ts

@@ -1,8 +1,11 @@
 import type { QueryClientConfig, QueryObserverOptions } from '@tanstack/vue-query';
 import { ApiCode } from './helpers';
 
+export { keepPreviousData } from '@tanstack/vue-query';
+export { ignoreRetryCodes, buildRetryFn, presetOptions, getNextPageParam, getPreviousPageParam };
+
 /** 不需要重试的 api code */
-export const ignoreRetryCodes = [
+const ignoreRetryCodes = [
   ApiCode.UNKNOWN,
   11000, // 操作失败
   11001, // 操作过于频繁
@@ -21,7 +24,7 @@ export const ignoreRetryCodes = [
  * @param additionPresetIgnore 一个布尔值，指示是否包括额外的预设忽略代码。默认为 true。
  * @returns 根据失败计数和错误代码确定是否重试的重试函数。
  */
-export function buildRetryFn(ignoreList: Array<number | string | RegExp>, additionPresetIgnore = true): NonNullable<QueryObserverOptions['retry']> {
+function buildRetryFn(ignoreList: Array<number | string | RegExp>, additionPresetIgnore = true): NonNullable<QueryObserverOptions['retry']> {
   const _ignoreList = [...ignoreList, ...(additionPresetIgnore ? ignoreRetryCodes : [])];
   return (failureCount, error: any) => {
     if (error?.code === undefined)
@@ -38,29 +41,39 @@ export function buildRetryFn(ignoreList: Array<number | string | RegExp>, additi
   };
 }
 
-export const presetOptions: QueryClientConfig = {
+const presetOptions: QueryClientConfig = {
   defaultOptions: {
     queries: {
       refetchOnWindowFocus: false,
       retry: buildRetryFn(ignoreRetryCodes),
-      getNextPageParam: (lastPage: any) => {
-        const { pagination } = lastPage ?? {};
-
-        if (pagination?.has_more) {
-          return {
-            page: (pagination.page ?? 0) + 1,
-            page_size: pagination?.page_size ?? 10,
-          };
-        }
-      },
-      getPreviousPageParam: (lastPage: any) => {
-        const { pagination } = lastPage ?? {};
-
-        return {
-          page: (pagination.page ?? 1) - 1,
-          page_size: pagination?.page_size ?? 10,
-        };
-      },
     },
   },
 };
+
+/**
+ * useInfiniteQuery 中的 getNextPageParam 预设
+ */
+function getNextPageParam(lastPage: any) {
+  const { pagination } = lastPage ?? {};
+
+  if (pagination?.has_more) {
+    return {
+      page: (pagination.page ?? 0) + 1,
+      page_size: pagination?.page_size ?? 10,
+    };
+  }
+}
+
+/**
+ * useInfiniteQuery 中的 getPreviousPageParam 预设
+ */
+function getPreviousPageParam(firstPage: any) {
+  const { pagination } = firstPage ?? {};
+
+  if (pagination?.has_more) {
+    return {
+      page: (pagination.page ?? 0) + 1,
+      page_size: pagination?.page_size ?? 10,
+    };
+  }
+}

package/utils/upload/AwsS3.ts

@@ -0,0 +1,76 @@
+import { S3Client } from '@aws-sdk/client-s3';
+import { Upload } from '@aws-sdk/lib-storage';
+import type { FileHandler } from './fileHandlers';
+
+export type TGetParams = () => Promise<{
+  domain: string
+  bucket: string
+  region: string
+  accessKeyId: string
+  secretAccessKey: string
+  sessionToken: string
+}>;
+
+export class AwsS3 {
+  public domain = '';
+  public bucket = '';
+  public region = '';
+
+  private s3Client: S3Client | undefined = undefined;
+  private lastRefreshParams = 0;
+
+  public constructor(private getParams: TGetParams, private fileHandler?: FileHandler) {
+  }
+
+  public async upload(file: File, root?: string) {
+    const s3Client = await this.refreshClient();
+    const filePath = await this.genFilePath(root || 'unclassified');
+    const fileName = await (this.fileHandler?.genFileName(file) ?? this.genFileName(file));
+    const fullPath = `${filePath}/${fileName}`;
+
+    const uploader = new Upload({
+      client: s3Client!,
+      params: { Bucket: this.bucket, Key: fullPath, Body: file },
+      leavePartsOnError: false,
+    });
+
+    return { uploader, fileURL: `${this.domain}/${fullPath}` };
+  }
+
+  private genFilePath(root: string) {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = (now.getMonth() + 1).toString().padStart(2, '0');
+    const day = now.getDate().toString().padStart(2, '0');
+    const filePath = `${root}/${year}/${month}/${day}`;
+
+    return filePath;
+  }
+
+  private genFileName(file: File) {
+    return file.name;
+  }
+
+  private async refreshClient() {
+    const needRefresh = (Date.now() - this.lastRefreshParams) > 5 * 60 * 1000;
+
+    if (!needRefresh)
+      return this.s3Client;
+
+    const params = await this.getParams();
+    this.domain = params.domain;
+    this.bucket = params.bucket;
+    this.region = params.region;
+    this.s3Client = new S3Client({
+      region: this.region,
+      credentials: {
+        accessKeyId: params.accessKeyId,
+        secretAccessKey: params.secretAccessKey,
+        sessionToken: params.sessionToken,
+      },
+    });
+    this.lastRefreshParams = Date.now();
+
+    return this.s3Client;
+  }
+}

package/utils/upload/fileHandlers.ts

@@ -0,0 +1,27 @@
+export abstract class FileHandler {
+  abstract genFileName(file: File): Promise<string>;
+}
+
+export class ImageHandler implements FileHandler {
+  public genFileName(file: File) {
+    const fileNameParts = file.name.split('.');
+    const ext = fileNameParts.pop() ?? '';
+    const fileName = fileNameParts.join('.');
+    const now = new Date();
+    const timestamp = now.getTime().toString(36);
+    const randomStr = [...Array(5)].map(() => Math.random().toString(36)[2]).join('');
+
+    return new Promise<string>((resolve, reject) => {
+      const img = new Image();
+      const imgUrl = URL.createObjectURL(file);
+
+      img.onload = () => {
+        URL.revokeObjectURL(imgUrl);
+        resolve(`${fileName}_${randomStr}@${timestamp}@${img.width}x${img.height}.${ext}`);
+      };
+
+      img.onerror = reject;
+      img.src = imgUrl;
+    });
+  }
+}

package/utils/upload/index.ts

@@ -0,0 +1,2 @@
+export { AwsS3, type TGetParams } from './AwsS3';
+export { ImageHandler, type FileHandler } from './fileHandlers';

package/vite/index.d.ts

@@ -0,0 +1 @@
+export function getProxy(env: Record<string, string>): Record<string, any>;

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