@peng_kai/kit 0.2.36 → 0.2.38

package/admin/components/text/src/Datetime.vue

@@ -38,14 +38,22 @@ const text = computed(() => {
 
   return props.utc ? ts.utc().format(props.template) : ts.format(props.template);
 });
+
+window.dayjs = dayjs;
 </script>
 
 <template>
   <ATooltip destroyTooltipOnHide>
     <template v-if="timestamp" #title>
       <div>{{ dayjs(timestamp).fromNow?.() }}</div>
-      <div><span class="inline-block w-2em">本地</span> {{ dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss') }}</div>
-      <div><span class="inline-block w-2em">UTC</span> {{ dayjs(timestamp).utc().format('YYYY-MM-DD HH:mm:ss') }}</div>
+      <div>
+        {{ dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss') }}
+        <span class="op-50">本地</span>
+      </div>
+      <div v-if="dayjs().utc">
+        {{ dayjs(timestamp).utc?.().format('YYYY-MM-DD HH:mm:ss') }}
+        <span class="op-50">UTC</span>
+      </div>
     </template>
     <span v-bind="$attrs" class="text">{{ text }}</span>
   </ATooltip>

package/libs/dayjs.ts

@@ -8,12 +8,12 @@ import tz from 'dayjs/esm/plugin/timezone';
 import 'dayjs/esm/locale/zh';
 import 'dayjs/esm/locale/en';
 
-export type { Dayjs, PluginFunc, UnitType, UnitTypeLong, UnitTypeLongPlural, UnitTypeShort, QUnitType, ConfigType, ConfigTypeMap, OpUnitType, OptionType, ManipulateType } from 'dayjs';
-export default dayjs;
-
 dayjs.locale('zh');
 dayjs.extend(relativeTime);
 dayjs.extend(weekday);
 dayjs.extend(localeData);
 dayjs.extend(utc);
 dayjs.extend(tz);
+
+export type { Dayjs, PluginFunc, UnitType, UnitTypeLong, UnitTypeLongPlural, UnitTypeShort, QUnitType, ConfigType, ConfigTypeMap, OpUnitType, OptionType, ManipulateType } from 'dayjs';
+export default dayjs;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.2.36",
+  "version": "0.2.38",
   "description": "",
   "author": "",
   "license": "ISC",

package/utils/date.ts

@@ -29,7 +29,7 @@ export function endOfDay(day: dayjs.ConfigType) {
  */
 export function rangeOf<F extends string>(
   range: [dayjs.ConfigType, dayjs.ConfigType],
-  fields: [F, F],
+  fields: [F, F] = ['start_time', 'end_time'] as [F, F],
   unit: dayjs.OpUnitType = 'day',
   utc = true,
 ) {

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { useResizeObserver } from '@vueuse/core';
+import { useEventListener, useResizeObserver } from '@vueuse/core';
 import * as echarts from 'echarts';
 import { ref, shallowRef, toRef, watchEffect } from 'vue';
 import { useIsDark } from '../../../hooks/useIsDark';
@@ -33,17 +33,23 @@ watchEffect(() => {
  * 考虑到性能问题，所以当尺寸变化时隐藏图表，避免浏览器反复绘制。
  */
 let sizeResponsiveTimer = 0;
-useResizeObserver(toRef(() => $chartEle.value?.parentElement), () => {
+function resetHanlder() {
+  // $chartEle.value && ($chartEle.value.hidden = true);
   $chartEle.value?.style.setProperty('width', '0px');
   $chartEle.value?.style.setProperty('overflow', 'hidden');
+  $chartEle.value?.style.setProperty('visibility', 'hidden');
   clearTimeout(sizeResponsiveTimer);
 
   sizeResponsiveTimer = window.setTimeout(() => {
     $chartEle.value?.style.removeProperty('width');
     $chartEle.value?.style.removeProperty('overflow');
+    $chartEle.value?.style.removeProperty('visibility');
+    // $chartEle.value && ($chartEle.value.hidden = false);
     echartInst.value?.resize({ width: 'auto' });
-  }, 200);
-});
+  }, 100);
+}
+useResizeObserver(toRef(() => $chartEle.value?.parentElement), resetHanlder);
+useEventListener(window, 'resize', resetHanlder);
 </script>
 
 <template>