初始化项目

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

@@ -0,0 +1,39 @@
+<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<AntDesign.TableColumnCheck[]>('columns', {
+  required: true
+});
+</script>
+
+<template>
+  <APopover placement="bottomRight" trigger="click">
+    <AButton size="small">
+      <div class="flex-y-center gap-8px">
+        <icon-ant-design-setting-outlined class="text-icon" />
+        <span>{{ $t('common.columnSetting') }}</span>
+      </div>
+    </AButton>
+    <template #content>
+      <VueDraggable v-model="columns">
+        <div
+          v-for="item in columns"
+          :key="item.key"
+          class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)"
+        >
+          <icon-mdi-drag class="mr-8px cursor-move text-icon" />
+          <ACheckbox v-model:checked="item.checked">
+            {{ item.title }}
+          </ACheckbox>
+        </div>
+      </VueDraggable>
+    </template>
+  </APopover>
+</template>
+
+<style scoped></style>

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

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { isShowBtn } from '@/utils/permission';
+
+defineOptions({
+  name: 'TableHeaderOperation'
+});
+
+interface Props {
+  disabledDelete?: boolean;
+  loading?: boolean;
+  tableType?: string;
+  showDelete?: boolean;
+}
+
+defineProps<Props>();
+
+interface Emits {
+  (e: 'add'): void;
+  (e: 'delete'): void;
+  (e: 'refresh'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const columns = defineModel<AntDesign.TableColumnCheck[]>('columns', {
+  default: () => []
+});
+
+function add() {
+  emit('add');
+}
+
+function batchDelete() {
+  emit('delete');
+}
+
+function refresh() {
+  emit('refresh');
+}
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-end gap-x-12px gap-y-8px lt-sm:(w-200px py-12px)">
+    <slot name="prefix"></slot>
+    <slot name="default">
+      <AButton v-if="isShowBtn(`system:${tableType}:add`)" size="small" ghost type="primary" @click="add">
+        <div class="flex-y-center gap-8px">
+          <icon-ic-round-plus class="text-icon" />
+          <span>{{ $t('common.add') }}</span>
+        </div>
+      </AButton>
+      <APopconfirm
+        v-if="isShowBtn(`system:${tableType}:remove`) && showDelete"
+        :title="$t('common.confirmDelete')"
+        :disabled="disabledDelete"
+        @confirm="batchDelete"
+      >
+        <AButton size="small" danger :disabled="disabledDelete">
+          <div class="flex-y-center gap-8px">
+            <icon-ic-round-delete class="text-icon" />
+            <span>{{ $t('common.batchDelete') }}</span>
+          </div>
+        </AButton>
+      </APopconfirm>
+    </slot>
+    <AButton size="small" @click="refresh">
+      <div class="flex-y-center gap-8px">
+        <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
+        <span>{{ $t('common.refresh') }}</span>
+      </div>
+    </AButton>
+    <TableColumnSetting v-model:columns="columns" />
+    <slot name="suffix"></slot>
+  </div>
+</template>
+
+<style scoped></style>

src/components/common/app-loading.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { getRgbOfColor } from '@sa/utils';
+import { $t } from '@/locales';
+import { localStg } from '@/utils/storage';
+
+const loadingClasses = [
+  'left-0 top-0',
+  'left-0 bottom-0 animate-delay-500',
+  'right-0 top-0 animate-delay-1000',
+  'right-0 bottom-0 animate-delay-1500'
+];
+
+function addThemeColorCssVars() {
+  const themeColor = localStg.get('themeColor') || '#646cff';
+
+  const { r, g, b } = getRgbOfColor(themeColor);
+
+  const cssVars = `--primary-color: ${r} ${g} ${b}`;
+  document.documentElement.style.cssText = cssVars;
+}
+
+addThemeColorCssVars();
+</script>
+
+<template>
+  <div class="fixed-center flex-col">
+    <SystemLogo class="text-128px text-primary" />
+    <div class="w-56px h-56px my-36px">
+      <div class="relative h-full animate-spin">
+        <div
+          v-for="(item, index) in loadingClasses"
+          :key="index"
+          class="absolute w-16px h-16px bg-primary rounded-8px animate-pulse"
+          :class="item"
+        ></div>
+      </div>
+    </div>
+    <h2 class="text-28px font-500 text-#646464">{{ $t('system.title') }}</h2>
+  </div>
+</template>
+
+<style scoped></style>

src/components/common/app-provider.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { createTextVNode, defineComponent } from 'vue';
+import { App } from 'ant-design-vue';
+
+defineOptions({
+  name: 'AppProvider'
+});
+
+const ContextHolder = defineComponent({
+  name: 'ContextHolder',
+  setup() {
+    return () => createTextVNode();
+  }
+});
+</script>
+
+<template>
+  <App class="h-full">
+    <ContextHolder />
+    <slot></slot>
+  </App>
+</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 { $t } from '@/locales';
+import { useRouterPush } from '@/hooks/common/router';
+
+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>
+    <AButton type="primary" @click="routerPushByKey('root')">{{ $t('common.backToHome') }}</AButton>
+  </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/lang-switch.vue

@@ -0,0 +1,54 @@
+<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');
+});
+
+function changeLang(lang: App.I18n.LangType) {
+  emit('changeLang', lang);
+}
+</script>
+
+<template>
+  <ADropdown placement="bottom">
+    <ButtonIcon :tooltip-content="tooltipContent" tooltip-placement="left">
+      <SvgIcon icon="heroicons:language" />
+    </ButtonIcon>
+    <template #overlay>
+      <AMenu :selected-keys="[lang]">
+        <AMenuItem v-for="option in langOptions" :key="option.key" @click="changeLang(option.key)">
+          {{ option.label }}
+        </AMenuItem>
+      </AMenu>
+    </template>
+  </ADropdown>
+</template>
+
+<style scoped></style>

src/components/common/menu-toggler.vue

@@ -0,0 +1,48 @@
+<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;
+}
+
+const props = defineProps<Props>();
+
+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
+    :tooltip-content="collapsed ? $t('icon.expand') : $t('icon.collapse')"
+    tooltip-placement="bottomLeft"
+    trigger-parent
+  >
+    <SvgIcon :icon="icon" />
+  </ButtonIcon>
+</template>
+
+<style scoped></style>

src/components/common/pin-toggler.vue

@@ -0,0 +1,22 @@
+<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.pin') : $t('icon.unpin')" tooltip-placement="bottomLeft" trigger-parent>
+    <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 { TooltipPlacement } from 'ant-design-vue/es/tooltip';
+import { $t } from '@/locales';
+
+defineOptions({ name: 'ThemeSchemaSwitch' });
+
+interface Props {
+  /** Theme schema */
+  themeSchema: UnionKey.ThemeScheme;
+  /** Show tooltip */
+  showTooltip?: boolean;
+  /** Tooltip placement */
+  tooltipPlacement?: TooltipPlacement;
+}
+
+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,87 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { createReusableTemplate } from '@vueuse/core';
+import type { TooltipPlacement } from 'ant-design-vue/es/tooltip';
+
+defineOptions({
+  name: 'ButtonIcon',
+  inheritAttrs: false
+});
+
+interface Props {
+  /** Button class */
+  class?: string;
+  /** Iconify icon name */
+  icon?: string;
+  /** Tooltip content */
+  tooltipContent?: string;
+  /** Tooltip placement */
+  tooltipPlacement?: TooltipPlacement;
+  /** Trigger tooltip on parent */
+  triggerParent?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  class: 'h-36px text-icon',
+  icon: '',
+  tooltipContent: '',
+  tooltipPlacement: 'bottom',
+  triggerParent: false
+});
+
+interface ButtonProps {
+  className: string;
+}
+
+const [DefineButton, Button] = createReusableTemplate<ButtonProps>();
+
+const cls = computed(() => {
+  let clsStr = props.class;
+
+  if (!clsStr.includes('h-')) {
+    clsStr += ' h-36px';
+  }
+
+  if (!clsStr.includes('text-')) {
+    clsStr += ' text-icon';
+  }
+
+  return clsStr;
+});
+
+function getPopupContainer(triggerNode: HTMLElement) {
+  return props.triggerParent ? triggerNode.parentElement! : document.body;
+}
+</script>
+
+<template>
+  <!-- define component start: Button -->
+  <DefineButton v-slot="{ $slots, className }">
+    <AButton type="text" :class="className">
+      <div class="flex-center gap-8px">
+        <component :is="$slots.default" />
+      </div>
+    </AButton>
+  </DefineButton>
+  <!-- define component end: Button -->
+
+  <ATooltip
+    v-if="tooltipContent"
+    :placement="tooltipPlacement"
+    :get-popup-container="getPopupContainer"
+    :title="tooltipContent"
+  >
+    <Button :class-name="cls" v-bind="$attrs">
+      <slot>
+        <SvgIcon :icon="icon" />
+      </slot>
+    </Button>
+  </ATooltip>
+  <Button v-else :class-name="cls" v-bind="$attrs">
+    <slot>
+      <SvgIcon :icon="icon" />
+    </slot>
+  </Button>
+</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,59 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getColorPalette } from '@sa/utils';
+
+interface Props {
+  /** Theme color */
+  themeColor: string;
+}
+
+const props = defineProps<Props>();
+
+const lightColor = computed(() => getColorPalette(props.themeColor, 3));
+const darkColor = computed(() => getColorPalette(props.themeColor, 6));
+</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>