添加初始化工程

public/favicon.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file

src/App.vue

+<template>
+  <a-config-provider :locale="localeVal">
+    <router-view />
+    <global-setting />
+  </a-config-provider>
+</template>
+
+<script setup lang="ts">
+import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
+import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
+
+import GlobalSetting from '@/components/global-setting/index.vue';
+
+import useLocale from '@/hooks/locale';
+import useAppStore from '@/store/app/index';
+
+import { activedTheme } from '../project.ui.config';
+import config from '../project.app.config';
+
+const { changeTheme } = useAppStore();
+
+// 国际化
+const { currentLocale, changeLocale } = useLocale();
+const localeVal = computed(() => {
+  switch (currentLocale.value) {
+    case 'zh-CN':
+      return zhCN;
+    case 'en-US':
+      return enUS;
+    default:
+      return zhCN;
+  }
+});
+
+onMounted(() => {
+  changeTheme(activedTheme.value)
+  setTimeout(() => {
+    changeLocale('en-US')
+  }, 3000)
+})
+
+watch(activedTheme, (newVal) => {
+  changeTheme(newVal)
+})
+
+const router = useRouter()
+
+// @ts-ignore
+router.beforeEach(async (to, from, next) => {
+  // 动态标题
+  let pageTitle = !to.meta.hideBaseTitle ? config.baseTitle + ' - ' : ''
+  if(to.meta.title != '') pageTitle += to.meta.title
+  window.document.title = pageTitle
+  next()
+})
+
+</script>
\ No newline at end of file

src/api/alova-instance.ts

+import { createAlova } from "alova";
+import vueHook from "alova/vue";
+import GlobalFetch from "alova/GlobalFetch";
+import { API_URL, ApiConfig } from "../../project.app.config";
+
+import { createAlovaMockAdapter } from '@alova/mock';
+import mock from './mock';
+
+// 创建模拟请求适配器
+const mockAdapter = createAlovaMockAdapter([mock], {
+  enable: true,
+  delay: ApiConfig.MOCK_DELAY,
+  httpAdapter: GlobalFetch(), // 无适配使用接口请求
+  mockRequestLogger: true,  // 是否打印mock接口请求信息
+});
+
+// 创建实例
+export const alova = createAlova({
+  baseURL: API_URL,
+  statesHook: vueHook,
+  shareRequest: true,
+
+  // 通过环境变量控制生产环境下，不会将mock相关代码打包进去
+  requestAdapter: process.env.NODE_ENV === 'development' ? mockAdapter : GlobalFetch(),
+
+  // 请求拦截器
+  beforeRequest(method) {
+    // 设置请求头
+    method.config.headers = {
+      "Content-Type": "application/json;charset=UTF-8",
+    }
+    // method.config.headers.Authorization = `Bearer ${localStorage.getItem("token")}`;
+  },
+
+  // 响应拦截器
+  responded: {
+    // 当使用GlobalFetch请求适配器时，第一个参数接收Response对象
+    onSuccess: async (response) => {
+      if(response.status >= 400){
+        throw new Error(response.statusText);
+      }
+      const json = await response.json();
+      if(json.code === 200) {
+        return json["data"];
+      } else {
+        return json;
+      }
+    },
+    // 请求错误时将会进入该拦截器
+    onError(error) {
+      console.log(error);
+      throw error;
+    },
+    // 当你需要在请求不论是成功、失败、还是命中缓存都需要执行的逻辑时，可以在创建alova实例时指定全局的`onComplete`拦截器，例如关闭请求 loading 状态。
+    onComplete:async () => {
+      // 处理响应完成后的逻辑
+      // console.log("执行完成");
+    }
+  }
+});
\ No newline at end of file

src/api/mock.ts

+import { defineMock } from '@alova/mock';
+
+// 模似数据
+export default defineMock({
+  '[get]/api/user': { code: 200, data:{ name: '张三', age: 18 } },
+  '[post]/api/login': ({ data }) => {
+    if(data.uName === 'admin' && data.pwd === '123456') return { code: 200, data:{ token: 'SvSDfa9sdf8gfA' } };
+    else return { code: 401, msg: '用户名或密码错误' };
+  }
+})
\ No newline at end of file

src/assets/css/arco.style.css

+body {
+  background-color: var(--color-bg-1);
+  color: var(--color-text-1);
+}

src/assets/css/style.css

+html,body,#app{width:100%;height:100%;overflow:hidden;}
+div{box-sizing:border-box;}
\ No newline at end of file

src/assets/css/tailwind.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 适配主题 */
+/* 主题背景 */
+.bg-primary{@apply bg-primary-light dark:bg-primary-dark}
+.bg-primary-hover{@apply bg-primary-hover-light dark:bg-primary-hover-dark}
+.bg-primary-pressed{@apply bg-primary-pressed-light dark:bg-primary-pressed-dark}
+.bg-primary-activated{@apply bg-primary-activated-light dark:bg-primary-activated-dark}
+.bg-primary-disable{@apply bg-primary-disable-light dark:bg-primary-disable-dark}
+.bg-theme-bg1{@apply bg-theme-bg1-light dark:bg-theme-bg1-dark}
+.bg-theme-bg2{@apply bg-theme-bg2-light dark:bg-theme-bg2-dark}
+.bg-theme-bg3{@apply bg-theme-bg3-light dark:bg-theme-bg3-dark}
+.bg-theme-bg4{@apply bg-theme-bg4-light dark:bg-theme-bg4-dark}
+.bg-theme-bg5{@apply bg-theme-bg5-light dark:bg-theme-bg5-dark}
+/* 主题文本色 */
+.text-primary{@apply text-primary-light dark:text-primary-dark}
+.text-primary-hover{@apply text-primary-hover-light dark:text-primary-hover-dark}
+.text-primary-pressed{@apply text-primary-pressed-light dark:text-primary-pressed-dark}
+.text-primary-activated{@apply text-primary-activated-light dark:text-primary-activated-dark}
+.text-primary-disable{@apply text-primary-disable-light dark:text-primary-disable-dark}
+.text-theme-text1{@apply text-theme-text1-light dark:text-theme-text1-dark}
+.text-theme-text2{@apply text-theme-text2-light dark:text-theme-text2-dark}
+.text-theme-text3{@apply text-theme-text3-light dark:text-theme-text3-dark}
+.text-theme-text4{@apply text-theme-text4-light dark:text-theme-text4-dark}
+.text-theme-text5{@apply text-theme-text5-light dark:text-theme-text5-dark}

src/auto-import.d.ts

+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useLink: typeof import('vue-router')['useLink']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

src/components/global-setting/index.vue

+<template>
+
+</template>
+
+<script lang="ts" setup>
+  
+</script>
+
+<style scoped lang="less">
+
+</style>

src/components/locale/localeText.vue

+<template>
+  <div class="flex items-center">
+    <div class="pr-2 border-solid border-0 border-r-xs border-theme-text1/20" :class="currentLocale=='zh-CN' ? 'text-primary' : 'cursor-pointer'" @click="changeLocale('zh-CN')">中文</div>
+    <div class="ml-2" :class="currentLocale=='en-US' ? 'text-primary' : 'cursor-pointer'" @click="changeLocale('en-US')">English</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import useLocale from '@/hooks/locale';
+  const { currentLocale, changeLocale } = useLocale();
+</script>
\ No newline at end of file

src/components/theme/changeThemeText.vue

+<template>
+  <div class="flex items-center">
+    <div class="pr-2 border-solid border-0 border-r-xs border-theme-text1/20" :class="activedTheme=='light' ? 'text-primary' : 'cursor-pointer'" @click="activedTheme='light'">{{$t('app.theme.light')}}</div>
+    <div class="ml-2" :class="activedTheme=='dark' ? 'text-primary' : 'cursor-pointer'" @click="activedTheme='dark'">{{$t('app.theme.dark')}}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { activedTheme } from '../../../project.ui.config';
+</script>
\ No newline at end of file

src/configs/arco.ui.config.ts

+import projectUiConfig from '../../project.ui.config'
+
+// 改变ArcoUI框架的主题
+export function changeArcoTheme(themeName:string) {
+  if(themeName === 'dark') {
+    document.body.setAttribute('arco-theme', themeName)
+  } else {
+    document.body.removeAttribute('arco-theme')
+  }
+}
+
+// Arco的变量设置
+export const arcoUiConfig = {
+  // 白底主色 ==================
+  'primary-7': projectUiConfig.colors.primaryPressed,
+  'primary-6': projectUiConfig.colors.primary,
+  'primary-5': projectUiConfig.colors.primaryHover,
+  'primary-4': projectUiConfig.colors.primary,
+  'primary-3': projectUiConfig.colors.primaryDisable,
+  'primary-2': projectUiConfig.colors.primaryDisable,
+  'primary-1': projectUiConfig.colors.primaryDisable,
+  'color-bg-1': projectUiConfig.colors.themeBg1,
+  'color-bg-2': projectUiConfig.colors.themeBg2,
+  'color-bg-3': projectUiConfig.colors.themeBg3,
+  'color-bg-4': projectUiConfig.colors.themeBg4,
+  'color-bg-5': projectUiConfig.colors.themeBg5,
+  'color-text-1': projectUiConfig.colors.themeText1,
+  'color-text-2': projectUiConfig.colors.themeText2,
+  'color-text-3': projectUiConfig.colors.themeText3,
+  'color-text-4': projectUiConfig.colors.themeText4,
+  // 深底主色 ==================
+  'dark-primary-7': projectUiConfig.colors.darkPrimaryPressed,
+  'dark-primary-6': projectUiConfig.colors.darkPrimary,
+  'dark-primary-5': projectUiConfig.colors.darkPrimaryHover,
+  'dark-primary-4': projectUiConfig.colors.darkPrimary,
+  'dark-primary-3': projectUiConfig.colors.darkPrimaryDisable,
+  'dark-primary-2': projectUiConfig.colors.darkPrimaryDisable,
+  'dark-primary-1': projectUiConfig.colors.darkPrimaryDisable,
+  'dark-color-bg-1': projectUiConfig.colors.darkThemeBg1,
+  'dark-color-bg-2': projectUiConfig.colors.darkThemeBg2,
+  'dark-color-bg-3': projectUiConfig.colors.darkThemeBg3,
+  'dark-color-bg-4': projectUiConfig.colors.darkThemeBg4,
+  'dark-color-bg-5': projectUiConfig.colors.darkThemeBg5,
+  'dark-color-text-1': projectUiConfig.colors.darkThemeText1,
+  'dark-color-text-2': projectUiConfig.colors.darkThemeText2,
+  'dark-color-text-3': projectUiConfig.colors.darkThemeText3,
+  'dark-color-text-4': projectUiConfig.colors.darkThemeText4,
+  // 边框宽度 =================
+  'border-1': projectUiConfig.borderWidth.xs,
+  'border-2': projectUiConfig.borderWidth.sm,
+  'border-3': projectUiConfig.borderWidth.md,
+  // 边框圆角 ================
+  'border-radius-small': projectUiConfig.borderRadius.sm,
+  'border-radius-medium': projectUiConfig.borderRadius.md,
+  'border-radius-large': projectUiConfig.borderRadius.lg,
+}

src/configs/tailwind.ui.config.ts

+import projectUiConfig from '../../project.ui.config'
+
+// 改变ArcoUI框架的主题
+export function changeTailwindTheme(themeName:string) {
+  document.body.setAttribute('class', themeName)
+}
+
+// tailwind的UI变量设置
+export const tailwindUiConfig = {
+  // 定义主色，这里简化一点，就直接动态改变
+  colors: {
+    'primary-light': projectUiConfig.colors.primary,
+    'primary-hover-light': projectUiConfig.colors.primaryHover,
+    'primary-pressed-light': projectUiConfig.colors.primaryPressed,
+    'primary-activated-light': projectUiConfig.colors.primaryActivated,
+    'primary-disable-light': projectUiConfig.colors.primaryDisable,
+    'theme-bg1-light': projectUiConfig.colors.themeBg1,
+    'theme-bg2-light': projectUiConfig.colors.themeBg2,
+    'theme-bg3-light': projectUiConfig.colors.themeBg3,
+    'theme-bg4-light': projectUiConfig.colors.themeBg4,
+    'theme-bg5-light': projectUiConfig.colors.themeBg5,
+    'theme-text1-light': projectUiConfig.colors.themeText1,
+    'theme-text2-light': projectUiConfig.colors.themeText2,
+    'theme-text3-light': projectUiConfig.colors.themeText3,
+    'theme-text4-light': projectUiConfig.colors.themeText4,
+    'theme-text5-light': projectUiConfig.colors.themeText5,
+
+    'primary-dark': projectUiConfig.colors.darkPrimary,
+    'primary-hover-dark': projectUiConfig.colors.darkPrimaryHover,
+    'primary-pressed-dark': projectUiConfig.colors.darkPrimaryPressed,
+    'primary-activated-dark': projectUiConfig.colors.darkPrimaryActivated,
+    'primary-disable-dark': projectUiConfig.colors.darkPrimaryDisable,
+    'theme-bg1-dark': projectUiConfig.colors.darkThemeBg1,
+    'theme-bg2-dark': projectUiConfig.colors.darkThemeBg2,
+    'theme-bg3-dark': projectUiConfig.colors.darkThemeBg3,
+    'theme-bg4-dark': projectUiConfig.colors.darkThemeBg4,
+    'theme-bg5-dark': projectUiConfig.colors.darkThemeBg5,
+    'theme-text1-dark': projectUiConfig.colors.darkThemeText1,
+    'theme-text2-dark': projectUiConfig.colors.darkThemeText2,
+    'theme-text3-dark': projectUiConfig.colors.darkThemeText3,
+    'theme-text4-dark': projectUiConfig.colors.darkThemeText4,
+    'theme-text5-dark': projectUiConfig.colors.darkThemeText5,
+  },
+  // 定义间距
+  spacing: {
+    'xxs': projectUiConfig.spacing.xxs,
+    'xs': projectUiConfig.spacing.xs,
+    'sm': projectUiConfig.spacing.sm,
+    'md': projectUiConfig.spacing.md,
+    'lg': projectUiConfig.spacing.lg,
+    'xl': projectUiConfig.spacing.xl,
+    '2xl': projectUiConfig.spacing.x2l,
+    '3xl': projectUiConfig.spacing.x3l,
+    '4xl': projectUiConfig.spacing.x4l,
+    '5xl': projectUiConfig.spacing.x5l,
+    '6xl': projectUiConfig.spacing.x6l,
+    '7xl': projectUiConfig.spacing.x7l,
+    '8xl': projectUiConfig.spacing.x8l,
+    '9xl': projectUiConfig.spacing.x9l,
+  },
+  // 定义圆角
+  borderRadius: {
+    'xs': projectUiConfig.borderRadius.xs,
+    'sm': projectUiConfig.borderRadius.sm,
+    'md': projectUiConfig.borderRadius.md,
+    'lg': projectUiConfig.borderRadius.lg,
+    'xl': projectUiConfig.borderRadius.xl,
+  },
+  borderWidth: {
+    'xs': projectUiConfig.borderWidth.xs,
+    'sm': projectUiConfig.borderWidth.sm,
+    'md': projectUiConfig.borderWidth.md,
+    'lg': projectUiConfig.borderWidth.lg,
+    'xl': projectUiConfig.borderWidth.xl,
+  },
+  // 新加的角度
+  rotate: {
+    '30': '30deg',
+    '60': '60deg',
+  },
+  // 新加的缩放
+  scale: {
+    '20': '.2',
+    '25': '.25',
+    '30': '.3',
+    '66': '.66',
+    '80': '.8',
+    '200': '.2',
+  },
+  // 动画延时
+  transitionDelay: {
+    '1250': '1250ms',
+    '1500': '1500ms',
+    '1750': '1750ms',
+    '2000': '2000ms',
+    '2250': '2250ms',
+    '2500': '2500ms',
+    '2750': '2750ms',
+    '3000': '3000ms',
+  },
+  // 动画周期
+  transitionDuration: {
+    '1250': '1250ms',
+    '1500': '1500ms',
+    '1750': '1750ms',
+    '2000': '2000ms',
+    '2250': '2250ms',
+    '2500': '2500ms',
+    '2750': '2750ms',
+    '3000': '3000ms',
+  },
+  // 层级
+  zIndex: {
+    '60': '60',
+    '70': '70',
+    '80': '80',
+    '90': '90',
+    '100': '100',
+    '200': '200',
+    '300': '300',
+    '400': '400',
+    '500': '500',
+    '600': '600',
+    '700': '700',
+    '800': '800',
+    '900': '900',
+    '1000': '1000',
+    '1100': '1100',
+  },
+}
\ No newline at end of file

src/directive/index.ts

+// import { App } from 'vue';
+// import permission from './permission';
+
+export default {
+  // install(Vue: App) {
+    // Vue.directive('permission', permission);
+  // },
+};

src/hooks/loading.ts

+import { ref } from 'vue';
+
+export default function useLoading(initValue = false) {
+  const loading = ref(initValue);
+  const setLoading = (value: boolean) => {
+    loading.value = value;
+  };
+  const toggle = () => {
+    loading.value = !loading.value;
+  };
+  return {
+    loading,
+    setLoading,
+    toggle,
+  };
+}

src/hooks/locale.ts

+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Message } from '@arco-design/web-vue';
+
+export default function useLocale() {
+  const i18 = useI18n();
+  const currentLocale = computed(() => {
+    return i18.locale.value;
+  });
+  const changeLocale = (value: string) => {
+    if (i18.locale.value === value) {
+      return;
+    }
+    i18.locale.value = value;
+    localStorage.setItem('arco-locale', value);
+    Message.success(i18.t('action.locale'));
+  };
+  return {
+    currentLocale,
+    changeLocale,
+  };
+}

src/hooks/visible.ts

+import { ref } from 'vue';
+
+export default function useVisible(initValue = false) {
+  const visible = ref(initValue);
+  const setVisible = (value: boolean) => {
+    visible.value = value;
+  };
+  const toggle = () => {
+    visible.value = !visible.value;
+  };
+  return {
+    visible,
+    setVisible,
+    toggle,
+  };
+}

src/locale/en-US.ts

+// 不同的翻译文件都放在对应的模块里，可以在views里
+
+import localeApp from './en-US/app';
+
+export default {
+  'action.locale': 'Switch to English',
+  ...localeApp,
+};

src/locale/en-US/app.ts

+export default {
+  'app.title': 'APP Title',
+  'app.theme.light': 'Light',
+  'app.theme.dark': 'Dark',
+};

src/locale/index.ts

+import { createI18n } from 'vue-i18n';
+import en from './en-US';
+import cn from './zh-CN';
+
+// 定义多语言
+export const LOCALE_OPTIONS = [
+  { label: '中文', value: 'zh-CN' },
+  { label: 'English', value: 'en-US' },
+];
+
+// 默认语言
+const defaultLocale = localStorage.getItem('arco-locale') || 'zh-CN';
+
+const i18n = createI18n({
+  locale: defaultLocale,
+  fallbackLocale: 'en-US',
+  legacy: false,
+  allowComposition: true,
+  messages: {
+    'en-US': en,
+    'zh-CN': cn,
+  },
+});
+
+export default i18n;

src/locale/zh-CN.ts

+// 不同的翻译文件都放在对应的模块里，可以在views里
+
+import localeApp from './zh-CN/app';
+
+export default {
+  'action.locale': '切换为中文',
+  ...localeApp,
+};

src/locale/zh-CN/app.ts

+export default {
+  'app.title': '网站名称',
+  'app.theme.light': '亮色',
+  'app.theme.dark': '暗黑',
+};

src/main.ts

+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import { createPinia } from 'pinia';
+import i18n from './locale';
+
+// import directive from './directive';
+
+// 加载Css
+import './assets/css/arco.style.css'
+import './assets/css/style.css'
+import './assets/css/tailwind.css'
+
+const app = createApp(App)
+
+app.use(router)
+app.use(createPinia())
+app.use(i18n)
+// app.use(directive);
+app.mount('#app')

src/router/index.ts

+import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    component: () => import('../views/home.vue'),
+    meta: {
+      // hideBaseTitle: true,
+      title: '首页',
+    }
+  },
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+})
+
+export default router
\ No newline at end of file

src/store/app/index.ts

+import { defineStore } from 'pinia';
+import { AppState } from './types'; 
+import { changeArcoTheme } from '@/configs/arco.ui.config';
+import { changeTailwindTheme } from '@/configs/tailwind.ui.config';
+
+const useAppStore = defineStore('app', {
+  state: (): AppState => {
+    return {
+      theme: 'light',
+    }
+  },
+
+  getters: {},
+
+  actions: {
+    changeTheme(themeName: string) {
+      this.theme = 'dark';
+      changeArcoTheme(themeName);
+      changeTailwindTheme(themeName);
+    },
+  },
+});
+
+export default useAppStore;

src/store/app/types.ts

+export interface AppState {
+  theme: string;
+}

src/store/index.ts

+import { createPinia } from 'pinia';
+import useAppStore from './app';
+
+const pinia = createPinia();
+
+export { useAppStore };
+export default pinia;

src/utils/auth.ts

+const TOKEN_KEY = 'token';
+
+const isLogin = () => {
+  return !!localStorage.getItem(TOKEN_KEY);
+};
+
+const getToken = () => {
+  return localStorage.getItem(TOKEN_KEY);
+};
+
+const setToken = (token: string) => {
+  localStorage.setItem(TOKEN_KEY, token);
+};
+
+const clearToken = () => {
+  localStorage.removeItem(TOKEN_KEY);
+};
+
+export { isLogin, getToken, setToken, clearToken };

src/utils/event.ts

+export function addEventListen(
+  target: Window | HTMLElement,
+  event: string,
+  handler: EventListenerOrEventListenerObject,
+  capture = false
+) {
+  if (
+    target.addEventListener &&
+    typeof target.addEventListener === 'function'
+  ) {
+    target.addEventListener(event, handler, capture);
+  }
+}
+
+export function removeEventListen(
+  target: Window | HTMLElement,
+  event: string,
+  handler: EventListenerOrEventListenerObject,
+  capture = false
+) {
+  if (
+    target.removeEventListener &&
+    typeof target.removeEventListener === 'function'
+  ) {
+    target.removeEventListener(event, handler, capture);
+  }
+}

src/utils/index.ts

+type TargetContext = '_self' | '_parent' | '_blank' | '_top';
+
+export const openWindow = (
+  url: string,
+  opts?: { target?: TargetContext; [key: string]: any }
+) => {
+  const { target = '_blank', ...others } = opts || {};
+  window.open(
+    url,
+    target,
+    Object.entries(others)
+      .reduce((preValue: string[], curValue) => {
+        const [key, value] = curValue;
+        return [...preValue, `${key}=${value}`];
+      }, [])
+      .join(',')
+  );
+};
+
+export const regexUrl = new RegExp(
+  '^(?!mailto:)(?:(?:http|https|ftp)://)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$',
+  'i'
+);
+
+export default null;

src/utils/is.ts

+const opt = Object.prototype.toString;
+
+export function isArray(obj: any): obj is any[] {
+  return opt.call(obj) === '[object Array]';
+}
+
+export function isObject(obj: any): obj is { [key: string]: any } {
+  return opt.call(obj) === '[object Object]';
+}
+
+export function isString(obj: any): obj is string {
+  return opt.call(obj) === '[object String]';
+}
+
+export function isNumber(obj: any): obj is number {
+  return opt.call(obj) === '[object Number]' && obj === obj; // eslint-disable-line
+}
+
+export function isRegExp(obj: any) {
+  return opt.call(obj) === '[object RegExp]';
+}
+
+export function isFile(obj: any): obj is File {
+  return opt.call(obj) === '[object File]';
+}
+
+export function isBlob(obj: any): obj is Blob {
+  return opt.call(obj) === '[object Blob]';
+}
+
+export function isUndefined(obj: any): obj is undefined {
+  return obj === undefined;
+}
+
+export function isNull(obj: any): obj is null {
+  return obj === null;
+}
+
+export function isFunction(obj: any): obj is (...args: any[]) => any {
+  return typeof obj === 'function';
+}
+
+export function isEmptyObject(obj: any): boolean {
+  return isObject(obj) && Object.keys(obj).length === 0;
+}
+
+export function isExist(obj: any): boolean {
+  return obj || obj === 0;
+}
+
+export function isWindow(el: any): el is Window {
+  return el === window;
+}

src/views/home.vue

+<template>
+  <div id="app" class="absolute p-md">
+    <div class="relative wrapper bg-theme-bg2 w-full h-10 rounded-sm">
+      {{$t('action.locale')}}
+      <div class="absolute right-3 flex items-center">
+        <locale-text class="mr-md w-24" />
+        <change-theme-text class="w-24 "/>
+      </div>
+    </div>
+    <div class="flex items-center justify-between px-md bg-theme-bg3 mt-sm h-14 rounded-sm">
+      {{$t('app.title')}}
+      <a-date-picker style="width: 200px;" />
+    </div>
+    <div class="w-full bg-theme-bg4 mt-md rounded-sm grid md:grid-cols-6 sm:grid-cols-2 gap-sm p-md">
+      <div class="bg-theme-bg3 text-theme-text3">col3</div>
+      <div class="col-span-2 bg-red-600/50">col3</div>
+      <div class="col-span-1 bg-theme-bg2">col3</div>
+      <div class="bg-theme-bg2">col3</div>
+      <div class="bg-theme-bg2">col3</div>
+      <div class="bg-theme-bg2">col3</div>
+      <div class="bg-theme-bg2">col3</div>
+    </div>
+    <a-button type="primary" size="large" class="px-md mt-md">
+      <template #icon><icon-plus/></template>
+      <template #default>Delete</template>
+    </a-button>
+    <a-row class="mt-md">
+      <a-col class="grid-item bg-slate-700" :span="12">
+        <div class="text-white">12 - 50%</div>
+      </a-col>
+      <a-col class="grid-item bg-slate-500" :span="12">
+        <div class="text-white">12 - 50%</div>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { IconPlus } from "@arco-design/web-vue/es/icon"
+  import { alova } from '@/api/alova-instance'
+
+  onMounted(() => {
+    console.log('进入首页')
+
+    alova
+    // .Get('/tibetmuseum/TMServer/api.php?fun_name=statisticsUserAccess&pageName=radio&timeStart=2024-02-21&timeEnd=2024-02-21')
+    .Get('/tibetmuseum/TMServer/api.php?fun_name=statisticsUserAccess&pageName=radio')
+    .then((res:any) => {
+      console.log(res)
+    })
+
+    alova
+    .Get('/api/user')
+    .then((res:any) => {
+      console.log(res)
+    })
+
+    alova
+    .Post('/api/login', { uName: 'admin', pwd: '123456' })
+    .then((res:any) => {
+      console.log(res)
+    })
+  })
+
+</script>
+
+<style>
+.wrapper{
+  @apply flex items-center justify-center flex-wrap;
+}
+.grid-item{
+  @apply h-28 flex items-center justify-center
+}
+
+</style>

src/vite-env.d.ts

+/// <reference types="vite/client" />