init

src/components/advanced/table-base.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue';
+import type { DataTableColumns, PaginationProps } from 'naive-ui';
+
+const props = defineProps<{
+  fetchData: (pagination: PaginationProps) => Promise<{ data: any[]; itemCount: number }>;
+  columns: DataTableColumns;
+  pagination: PaginationProps;
+}>();
+
+const data = ref<any[]>([]);
+const headerColumns = computed(() => {
+  return props.columns
+    .filter(col => {
+      return !col.fixed;
+    })
+    .map(col => {
+      return {
+        key: col.key,
+        title: col.title,
+        checked: true,
+        visible: true
+      };
+    });
+});
+
+async function loadData() {
+  const result = await props.fetchData(props.pagination);
+  data.value = result.data;
+  props.pagination!.itemCount = result.itemCount;
+}
+
+onMounted(() => {
+  loadData();
+});
+</script>
+
+<template>
+  <div class="space-y-5">
+    <TableHeaderOperation :columns="headerColumns" />
+    <NDataTable :columns="columns" :data="data!" :pagination="pagination" :bordered="false" />
+  </div>
+</template>
+
+<style lang="css" scoped></style>

src/components/advanced/table-column-setting.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts" generic="T extends Record<string, unknown>, K = never">
+import { VueDraggable } from 'vue-draggable-plus';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'TableColumnSetting'
+});
+
+const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
+  required: true
+});
+</script>
+
+<template>
+  <NPopover placement="bottom-end" trigger="click">
+    <template #trigger>
+      <NButton size="small">
+        <template #icon>
+          <icon-ant-design-setting-outlined class="text-icon" />
+        </template>
+        {{ $t('common.columnSetting') }}
+      </NButton>
+    </template>
+    <VueDraggable v-model="columns" :animation="150" filter=".none_draggable">
+      <div
+        v-for="item in columns"
+        :key="item.key"
+        class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)"
+        :class="{ hidden: !item.visible }"
+      >
+        <icon-mdi-drag class="mr-8px h-full cursor-move text-icon" />
+        <NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
+          <template v-if="typeof item.title === 'function'">
+            <component :is="item.title" />
+          </template>
+          <template v-else>{{ item.title }}</template>
+        </NCheckbox>
+      </div>
+    </VueDraggable>
+  </NPopover>
+</template>
+
+<style scoped></style>

src/components/advanced/table-header-operation.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'TableHeaderOperation'
+});
+
+interface Props {
+  itemAlign?: NaiveUI.Align;
+  disabledDelete?: boolean;
+  loading?: boolean;
+}
+
+defineProps<Props>();
+
+interface Emits {
+  (e: 'add'): void;
+  (e: 'delete'): void;
+  (e: 'refresh'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
+  default: () => []
+});
+
+function add() {
+  emit('add');
+}
+
+function batchDelete() {
+  emit('delete');
+}
+
+function refresh() {
+  emit('refresh');
+}
+</script>
+
+<template>
+  <NSpace :align="itemAlign" wrap justify="end" class="lt-sm:w-200px">
+    <slot name="prefix"></slot>
+    <slot name="default">
+      <NButton size="small" ghost type="primary" @click="add">
+        <template #icon>
+          <icon-ic-round-plus class="text-icon" />
+        </template>
+        {{ $t('common.add') }}
+      </NButton>
+      <NPopconfirm @positive-click="batchDelete">
+        <template #trigger>
+          <NButton size="small" ghost type="error" :disabled="disabledDelete">
+            <template #icon>
+              <icon-ic-round-delete class="text-icon" />
+            </template>
+            {{ $t('common.batchDelete') }}
+          </NButton>
+        </template>
+        {{ $t('common.confirmDelete') }}
+      </NPopconfirm>
+    </slot>
+    <NButton size="small" @click="refresh">
+      <template #icon>
+        <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
+      </template>
+      {{ $t('common.refresh') }}
+    </NButton>
+    <TableColumnSetting v-model:columns="columns" />
+    <slot name="suffix"></slot>
+  </NSpace>
+</template>
+
+<style scoped></style>

src/components/common/app-provider.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { createTextVNode, defineComponent } from 'vue';
+import { useDialog, useLoadingBar, useMessage, useNotification } from 'naive-ui';
+
+defineOptions({
+  name: 'AppProvider'
+});
+
+const ContextHolder = defineComponent({
+  name: 'ContextHolder',
+  setup() {
+    function register() {
+      window.$loadingBar = useLoadingBar();
+      window.$dialog = useDialog();
+      window.$message = useMessage();
+      window.$notification = useNotification();
+    }
+
+    register();
+
+    return () => createTextVNode();
+  }
+});
+</script>
+
+<template>
+  <NLoadingBarProvider>
+    <NDialogProvider>
+      <NNotificationProvider>
+        <NMessageProvider>
+          <ContextHolder />
+          <slot></slot>
+        </NMessageProvider>
+      </NNotificationProvider>
+    </NDialogProvider>
+  </NLoadingBarProvider>
+</template>
+
+<style scoped></style>

src/components/common/dark-mode-container.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineOptions({ name: 'DarkModeContainer' });
+
+interface Props {
+  inverted?: boolean;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <div class="bg-container text-base-text transition-300" :class="{ 'bg-inverted text-#1f1f1f': inverted }">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped></style>

src/components/common/exception-base.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useRouterPush } from '@/hooks/common/router';
+import { $t } from '@/locales';
+
+defineOptions({ name: 'ExceptionBase' });
+
+type ExceptionType = '403' | '404' | '500';
+
+interface Props {
+  /**
+   * Exception type
+   *
+   * - 403: no permission
+   * - 404: not found
+   * - 500: service error
+   */
+  type: ExceptionType;
+}
+
+const props = defineProps<Props>();
+
+const { routerPushByKey } = useRouterPush();
+
+const iconMap: Record<ExceptionType, string> = {
+  '403': 'no-permission',
+  '404': 'not-found',
+  '500': 'service-error'
+};
+
+const icon = computed(() => iconMap[props.type]);
+</script>
+
+<template>
+  <div class="size-full min-h-520px flex-col-center gap-24px overflow-hidden">
+    <div class="flex text-400px text-primary">
+      <SvgIcon :local-icon="icon" />
+    </div>
+    <NButton type="primary" @click="routerPushByKey('root')">{{ $t('common.backToHome') }}</NButton>
+  </div>
+</template>
+
+<style scoped></style>

src/components/common/full-screen.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'FullScreen'
+});
+
+interface Props {
+  full?: boolean;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <ButtonIcon :key="String(full)" :tooltip-content="full ? $t('icon.fullscreenExit') : $t('icon.fullscreen')">
+    <icon-gridicons-fullscreen-exit v-if="full" />
+    <icon-gridicons-fullscreen v-else />
+  </ButtonIcon>
+</template>
+
+<style scoped></style>

src/components/common/icon-tooltip.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { computed, useSlots } from 'vue';
+import type { PopoverPlacement } from 'naive-ui';
+
+defineOptions({ name: 'IconTooltip' });
+
+interface Props {
+  icon?: string;
+  localIcon?: string;
+  desc?: string;
+  placement?: PopoverPlacement;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  icon: 'mdi-help-circle',
+  localIcon: '',
+  desc: '',
+  placement: 'top'
+});
+
+const slots = useSlots();
+const hasCustomTrigger = computed(() => Boolean(slots.trigger));
+
+if (!hasCustomTrigger.value && !props.icon && !props.localIcon) {
+  throw new Error('icon or localIcon is required when no custom trigger slot is provided');
+}
+</script>
+
+<template>
+  <NTooltip :placement="placement">
+    <template #trigger>
+      <slot name="trigger">
+        <div class="cursor-pointer">
+          <SvgIcon :icon="icon" :local-icon="localIcon" />
+        </div>
+      </slot>
+    </template>
+    <slot>
+      <span>{{ desc }}</span>
+    </slot>
+  </NTooltip>
+</template>

src/components/common/lang-switch.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'LangSwitch'
+});
+
+interface Props {
+  /** Current language */
+  lang: App.I18n.LangType;
+  /** Language options */
+  langOptions: App.I18n.LangOption[];
+  /** Show tooltip */
+  showTooltip?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showTooltip: true
+});
+
+type Emits = {
+  (e: 'changeLang', lang: App.I18n.LangType): void;
+};
+
+const emit = defineEmits<Emits>();
+
+const tooltipContent = computed(() => {
+  if (!props.showTooltip) return '';
+
+  return $t('icon.lang');
+});
+
+/** Add bottom margin to all options except the last one for proper visual separation */
+const dropdownOptions = computed(() => {
+  const lastIndex = props.langOptions.length - 1;
+
+  return props.langOptions.map((option, index) => ({
+    ...option,
+    props: {
+      class: index < lastIndex ? 'mb-1' : undefined
+    }
+  }));
+});
+
+function changeLang(lang: App.I18n.LangType) {
+  emit('changeLang', lang);
+}
+</script>
+
+<template>
+  <NDropdown :value="lang" :options="dropdownOptions" trigger="hover" @select="changeLang">
+    <div>
+      <ButtonIcon :tooltip-content="tooltipContent" tooltip-placement="left">
+        <SvgIcon icon="heroicons:language" />
+      </ButtonIcon>
+    </div>
+  </NDropdown>
+</template>
+
+<style scoped></style>

src/components/common/menu-toggler.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { $t } from '@/locales';
+
+defineOptions({ name: 'MenuToggler' });
+
+interface Props {
+  /** Show collapsed icon */
+  collapsed?: boolean;
+  /** Arrow style icon */
+  arrowIcon?: boolean;
+  zIndex?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  arrowIcon: false,
+  zIndex: 98
+});
+
+type NumberBool = 0 | 1;
+
+const icon = computed(() => {
+  const icons: Record<NumberBool, Record<NumberBool, string>> = {
+    0: {
+      0: 'line-md:menu-fold-left',
+      1: 'line-md:menu-fold-right'
+    },
+    1: {
+      0: 'ph-caret-double-left-bold',
+      1: 'ph-caret-double-right-bold'
+    }
+  };
+
+  const arrowIcon = Number(props.arrowIcon || false) as NumberBool;
+
+  const collapsed = Number(props.collapsed || false) as NumberBool;
+
+  return icons[arrowIcon][collapsed];
+});
+</script>
+
+<template>
+  <ButtonIcon
+    :key="String(collapsed)"
+    :tooltip-content="collapsed ? $t('icon.expand') : $t('icon.collapse')"
+    tooltip-placement="bottom-start"
+    :z-index="zIndex"
+  >
+    <SvgIcon :icon="icon" />
+  </ButtonIcon>
+</template>
+
+<style scoped></style>

src/components/common/pin-toggler.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { $t } from '@/locales';
+
+defineOptions({ name: 'PinToggler' });
+
+interface Props {
+  pin?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const icon = computed(() => (props.pin ? 'mdi-pin-off' : 'mdi-pin'));
+</script>
+
+<template>
+  <ButtonIcon
+    :tooltip-content="pin ? $t('icon.unpin') : $t('icon.pin')"
+    tooltip-placement="bottom-start"
+    :z-index="100"
+  >
+    <SvgIcon :icon="icon" />
+  </ButtonIcon>
+</template>
+
+<style scoped></style>

src/components/common/reload-button.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'ReloadButton'
+});
+
+interface Props {
+  loading?: boolean;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <ButtonIcon :tooltip-content="$t('icon.reload')">
+    <icon-ant-design-reload-outlined :class="{ 'animate-spin animate-duration-750': loading }" />
+  </ButtonIcon>
+</template>
+
+<style scoped></style>

src/components/common/system-logo.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+defineOptions({ name: 'SystemLogo' });
+</script>
+
+<template>
+  <icon-local-logo />
+</template>
+
+<style scoped></style>

src/components/common/theme-schema-switch.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { PopoverPlacement } from 'naive-ui';
+import { $t } from '@/locales';
+
+defineOptions({ name: 'ThemeSchemaSwitch' });
+
+interface Props {
+  /** Theme schema */
+  themeSchema: UnionKey.ThemeScheme;
+  /** Show tooltip */
+  showTooltip?: boolean;
+  /** Tooltip placement */
+  tooltipPlacement?: PopoverPlacement;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showTooltip: true,
+  tooltipPlacement: 'bottom'
+});
+
+interface Emits {
+  (e: 'switch'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+function handleSwitch() {
+  emit('switch');
+}
+
+const icons: Record<UnionKey.ThemeScheme, string> = {
+  light: 'material-symbols:sunny',
+  dark: 'material-symbols:nightlight-rounded',
+  auto: 'material-symbols:hdr-auto'
+};
+
+const icon = computed(() => icons[props.themeSchema]);
+
+const tooltipContent = computed(() => {
+  if (!props.showTooltip) return '';
+
+  return $t('icon.themeSchema');
+});
+</script>
+
+<template>
+  <ButtonIcon
+    :icon="icon"
+    :tooltip-content="tooltipContent"
+    :tooltip-placement="tooltipPlacement"
+    @click="handleSwitch"
+  />
+</template>
+
+<style scoped></style>

src/components/custom/better-scroll.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useElementSize } from '@vueuse/core';
+import BScroll from '@better-scroll/core';
+import type { Options } from '@better-scroll/core';
+
+defineOptions({ name: 'BetterScroll' });
+
+interface Props {
+  /**
+   * BetterScroll options
+   *
+   * @link https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html
+   */
+  options: Options;
+}
+
+const props = defineProps<Props>();
+
+const bsWrapper = ref<HTMLElement>();
+const bsContent = ref<HTMLElement>();
+const { width: wrapWidth } = useElementSize(bsWrapper);
+const { width, height } = useElementSize(bsContent);
+
+const instance = ref<BScroll>();
+const isScrollY = computed(() => Boolean(props.options.scrollY));
+
+function initBetterScroll() {
+  if (!bsWrapper.value) return;
+  instance.value = new BScroll(bsWrapper.value, props.options);
+}
+
+// refresh BS when scroll element size changed
+watch([() => wrapWidth.value, () => width.value, () => height.value], () => {
+  instance.value?.refresh();
+});
+
+onMounted(() => {
+  initBetterScroll();
+});
+
+defineExpose({ instance });
+</script>
+
+<template>
+  <div ref="bsWrapper" class="h-full text-left">
+    <div ref="bsContent" class="inline-block" :class="{ 'h-full': !isScrollY }">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/components/custom/button-icon.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { PopoverPlacement } from 'naive-ui';
+import { twMerge } from 'tailwind-merge';
+
+defineOptions({
+  name: 'ButtonIcon',
+  inheritAttrs: false
+});
+
+interface Props {
+  /** Button class */
+  class?: string;
+  /** Iconify icon name */
+  icon?: string;
+  /** Tooltip content */
+  tooltipContent?: string;
+  /** Tooltip placement */
+  tooltipPlacement?: PopoverPlacement;
+  zIndex?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  class: '',
+  icon: '',
+  tooltipContent: '',
+  tooltipPlacement: 'bottom',
+  zIndex: 98
+});
+
+const DEFAULT_CLASS = 'h-[36px] text-icon';
+</script>
+
+<template>
+  <NTooltip :placement="tooltipPlacement" :z-index="zIndex" :disabled="!tooltipContent">
+    <template #trigger>
+      <NButton quaternary :class="twMerge(DEFAULT_CLASS, props.class)" v-bind="$attrs">
+        <div class="flex-center gap-8px">
+          <slot>
+            <SvgIcon :icon="icon" />
+          </slot>
+        </div>
+      </NButton>
+    </template>
+    {{ tooltipContent }}
+  </NTooltip>
+</template>
+
+<style scoped></style>

src/components/custom/count-to.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
+import { TransitionPresets, useTransition } from '@vueuse/core';
+
+defineOptions({
+  name: 'CountTo'
+});
+
+interface Props {
+  startValue?: number;
+  endValue?: number;
+  duration?: number;
+  autoplay?: boolean;
+  decimals?: number;
+  prefix?: string;
+  suffix?: string;
+  separator?: string;
+  decimal?: string;
+  useEasing?: boolean;
+  transition?: keyof typeof TransitionPresets;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  startValue: 0,
+  endValue: 2021,
+  duration: 1500,
+  autoplay: true,
+  decimals: 0,
+  prefix: '',
+  suffix: '',
+  separator: ',',
+  decimal: '.',
+  useEasing: true,
+  transition: 'linear'
+});
+
+const source = ref(props.startValue);
+
+const transition = computed(() => (props.useEasing ? TransitionPresets[props.transition] : undefined));
+
+const outputValue = useTransition(source, {
+  disabled: false,
+  duration: props.duration,
+  transition: transition.value
+});
+
+const value = computed(() => formatValue(outputValue.value));
+
+function formatValue(num: number) {
+  const { decimals, decimal, separator, suffix, prefix } = props;
+
+  let number = num.toFixed(decimals);
+  number = String(number);
+
+  const x = number.split('.');
+  let x1 = x[0];
+  const x2 = x.length > 1 ? decimal + x[1] : '';
+  const rgx = /(\d+)(\d{3})/;
+  if (separator) {
+    while (rgx.test(x1)) {
+      x1 = x1.replace(rgx, `$1${separator}$2`);
+    }
+  }
+
+  return prefix + x1 + x2 + suffix;
+}
+
+async function start() {
+  await nextTick();
+  source.value = props.endValue;
+}
+
+watch(
+  [() => props.startValue, () => props.endValue],
+  () => {
+    if (props.autoplay) {
+      start();
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <span>{{ value }}</span>
+</template>
+
+<style scoped></style>

src/components/custom/look-forward.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+
+defineOptions({
+  name: 'LookForward'
+});
+</script>
+
+<template>
+  <div class="size-full min-h-520px flex-col-center gap-24px overflow-hidden">
+    <div class="flex text-400px text-primary">
+      <SvgIcon local-icon="expectation" />
+    </div>
+    <slot>
+      <h3 class="text-28px text-primary font-500">{{ $t('common.lookForward') }}</h3>
+    </slot>
+  </div>
+</template>
+
+<style scoped></style>

src/components/custom/soybean-avatar.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'SoybeanAvatar'
+});
+</script>
+
+<template>
+  <div class="size-72px overflow-hidden rd-1/2">
+    <img src="@/assets/imgs/soybean.jpg" class="size-full" />
+  </div>
+</template>
+
+<style scoped></style>

src/components/custom/svg-icon.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+import { Icon } from '@iconify/vue';
+
+defineOptions({ name: 'SvgIcon', inheritAttrs: false });
+
+/**
+ * Props
+ *
+ * - Support iconify and local svg icon
+ * - If icon and localIcon are passed at the same time, localIcon will be rendered first
+ */
+interface Props {
+  /** Iconify icon name */
+  icon?: string;
+  /** Local svg icon name */
+  localIcon?: string;
+}
+
+const props = defineProps<Props>();
+
+const attrs = useAttrs();
+
+const bindAttrs = computed<{ class: string; style: string }>(() => ({
+  class: (attrs.class as string) || '',
+  style: (attrs.style as string) || ''
+}));
+
+const symbolId = computed(() => {
+  const { VITE_ICON_LOCAL_PREFIX: prefix } = import.meta.env;
+
+  const defaultLocalIcon = 'no-icon';
+
+  const icon = props.localIcon || defaultLocalIcon;
+
+  return `#${prefix}-${icon}`;
+});
+
+/** If localIcon is passed, render localIcon first */
+const renderLocalIcon = computed(() => props.localIcon || !props.icon);
+</script>
+
+<template>
+  <template v-if="renderLocalIcon">
+    <svg aria-hidden="true" width="1em" height="1em" v-bind="bindAttrs">
+      <use :xlink:href="symbolId" fill="currentColor" />
+    </svg>
+  </template>
+  <template v-else>
+    <Icon v-if="icon" :icon="icon" v-bind="bindAttrs" />
+  </template>
+</template>
+
+<style scoped></style>

src/components/custom/wave-bg.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getPaletteColorByNumber } from '@sa/color';
+
+defineOptions({ name: 'WaveBg' });
+
+interface Props {
+  /** Theme color */
+  themeColor: string;
+}
+
+const props = defineProps<Props>();
+
+const lightColor = computed(() => getPaletteColorByNumber(props.themeColor, 200));
+const darkColor = computed(() => getPaletteColorByNumber(props.themeColor, 500));
+</script>
+
+<template>
+  <div class="absolute-lt z-1 size-full overflow-hidden">
+    <div class="absolute -right-300px -top-900px lt-sm:(-right-100px -top-1170px)">
+      <svg height="1337" width="1337">
+        <defs>
+          <path
+            id="path-1"
+            opacity="1"
+            fill-rule="evenodd"
+            d="M1337,668.5 C1337,1037.455193874239 1037.455193874239,1337 668.5,1337 C523.6725684305388,1337 337,1236 370.50000000000006,1094 C434.03835568300906,824.6732385973953 6.906089672974592e-14,892.6277623047779 0,668.5000000000001 C0,299.5448061257611 299.5448061257609,1.1368683772161603e-13 668.4999999999999,0 C1037.455193874239,0 1337,299.544806125761 1337,668.5Z"
+          />
+          <linearGradient id="linearGradient-2" x1="0.79" y1="0.62" x2="0.21" y2="0.86">
+            <stop offset="0" :stop-color="lightColor" stop-opacity="1" />
+            <stop offset="1" :stop-color="darkColor" stop-opacity="1" />
+          </linearGradient>
+        </defs>
+        <g opacity="1">
+          <use xlink:href="#path-1" fill="url(#linearGradient-2)" fill-opacity="1" />
+        </g>
+      </svg>
+    </div>
+    <div class="absolute -bottom-400px -left-200px lt-sm:(-bottom-760px -left-100px)">
+      <svg height="896" width="967.8852157128662">
+        <defs>
+          <path
+            id="path-2"
+            opacity="1"
+            fill-rule="evenodd"
+            d="M896,448 C1142.6325445712241,465.5747656464056 695.2579309733121,896 448,896 C200.74206902668806,896 5.684341886080802e-14,695.2579309733121 0,448.0000000000001 C0,200.74206902668806 200.74206902668791,5.684341886080802e-14 447.99999999999994,0 C695.2579309733121,0 475,418 896,448Z"
+          />
+          <linearGradient id="linearGradient-3" x1="0.5" y1="0" x2="0.5" y2="1">
+            <stop offset="0" :stop-color="darkColor" stop-opacity="1" />
+            <stop offset="1" :stop-color="lightColor" stop-opacity="1" />
+          </linearGradient>
+        </defs>
+        <g opacity="1">
+          <use xlink:href="#path-2" fill="url(#linearGradient-3)" fill-opacity="1" />
+        </g>
+      </svg>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/components/table/index.ts

@@ -0,0 +1,50 @@
+import { h } from 'vue';
+import type { ButtonProps, DataTableColumns } from 'naive-ui';
+import { NButton, NSpace } from 'naive-ui';
+import type { TableColumn } from 'naive-ui/es/data-table/src/interface';
+import type { safeClient } from '@/service/api';
+import type TableBase from './table-base.vue';
+
+export type TableBaseColumns<T = any> = Array<
+  TableColumn<T> & {
+    operations?: (row: T) => Array<Partial<ButtonProps> & { contentText: string }>;
+    key: string;
+    title: string;
+  }
+>;
+
+export type TableInst = InstanceType<typeof TableBase>;
+
+export interface Pagination {
+  limit: number;
+  offset: number;
+}
+
+export type TableFetchData = (page: Pagination) => ReturnType<typeof safeClient>;
+
+export function transformColumns<T = any>(columns: TableBaseColumns<T>): DataTableColumns<T> {
+  return columns.map(col => {
+    return {
+      ...col,
+      render: col.operations
+        ? (row: T) =>
+            h(NSpace, null, {
+              default: () => col.operations!(row).map(item => h(NButton, item, { default: () => item.contentText }))
+            })
+        : undefined
+    } as TableColumn<T>;
+  });
+}
+
+export function transformHeaderColumns<T = any>(columns: TableBaseColumns<T>): NaiveUI.TableColumnCheck[] {
+  return columns
+    .filter(col => {
+      return !col.fixed;
+    })
+    .map(col => ({
+      key: col.key,
+      title: col.title,
+      checked: true,
+      visible: true
+    }));
+}

src/components/table/table-base.vue

@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import type { PaginationProps } from 'naive-ui';
+import { type TableBaseColumns, type TableFetchData, transformColumns, transformHeaderColumns } from '.';
+
+const props = defineProps<{
+  fetchData: TableFetchData;
+  columns: TableBaseColumns;
+  showHeaderOperation?: boolean;
+}>();
+const emit = defineEmits<{
+  (e: 'add'): void;
+  (e: 'refresh'): void;
+  (e: 'delete'): void;
+}>();
+
+const tableData = ref<any[]>([]);
+const dataTableColumns = transformColumns(props.columns);
+const headerTableColumns = transformHeaderColumns(props.columns);
+const pagination = ref<PaginationProps>({
+  page: 1,
+  pageSize: 10,
+  itemCount: 0,
+  showSizePicker: true,
+  pageSizes: [10, 20, 50, 100]
+});
+
+async function loadData() {
+  const page = pagination.value.page || 1;
+  const pageSize = pagination.value.pageSize || 10;
+  const { data } = await props.fetchData({
+    limit: pageSize,
+    offset: (page - 1) * pageSize
+  });
+
+  tableData.value = (data.value as any).data;
+  pagination.value.itemCount = (data.value as any).pagination.total;
+}
+
+function handlePageChange(curPage: number) {
+  pagination.value.page = curPage;
+  loadData();
+}
+
+onMounted(() => {
+  loadData();
+});
+
+defineExpose({
+  reload: loadData
+});
+</script>
+
+<template>
+  <div class="space-y-5">
+    <TableHeaderOperation
+      v-if="showHeaderOperation"
+      :columns="headerTableColumns"
+      @add="emit('add')"
+      @refresh="emit('refresh')"
+      @delete="emit('delete')"
+    />
+    <NDataTable
+      :columns="dataTableColumns"
+      :data="tableData"
+      :pagination="pagination"
+      :bordered="false"
+      :on-update:page="handlePageChange"
+    />
+  </div>
+</template>
+
+<style lang="css" scoped></style>