feat: init

src/App.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <router-view></router-view>
+</template>
+
+<style scoped lang="scss">
+@import "@/style/global.module.scss";
+</style>

src/api/main/index.ts

@@ -0,0 +1,15 @@
+import request from '@/api/request';
+export function getData(params: any) {
+  return request({
+    url: '/getData',
+    method: 'get',
+    params,
+  });
+}
+export function postData(data: any) {
+  return request({
+    url: '/postData',
+    method: 'post',
+    data,
+  });
+}

src/api/request.ts

@@ -0,0 +1,61 @@
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+import type { InternalAxiosRequestConfig } from 'axios';
+class Request {
+  private instance: AxiosInstance;
+
+  constructor(config: AxiosRequestConfig) {
+    this.instance = axios.create({
+      baseURL: '/api',
+      timeout: 10000,
+      ...config,
+    });
+
+    // 添加请求拦截器
+    this.instance.interceptors.request.use(
+      (config: InternalAxiosRequestConfig) => {
+        // 在发送请求之前做些什么
+        console.log('请求拦截器被触发');
+
+        return config;
+      },
+      (error: any) => {
+        // 对请求错误做些什么
+        console.error('请求拦截器发生错误：', error);
+
+        return Promise.reject(error);
+      }
+    );
+
+    // 添加响应拦截器
+    this.instance.interceptors.response.use(
+      (response: AxiosResponse) => {
+        // 对响应数据做些什么
+        console.log('响应拦截器被触发');
+        const reponseData = response.data;
+
+        return reponseData;
+      },
+      (error: any) => {
+        // 对响应错误做些什么
+        console.error('响应拦截器发生错误：', error);
+
+        return Promise.reject(error);
+      }
+    );
+  }
+
+  public async request<T>(config: AxiosRequestConfig): Promise<T> {
+    const response: AxiosResponse<T> = await this.instance.request(config);
+
+    return response.data;
+  }
+}
+
+// 函数
+function request<T>(config: AxiosRequestConfig): Promise<T> {
+  const instance = new Request(config);
+
+  return instance.request(config);
+}
+
+export default request;

src/assets/vue.svg

@@ -0,0 +1 @@
+<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>

src/auto-imports.d.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+
+}

src/components.d.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
+    Table: typeof import('./components/Table/index.vue')['default']
+  }
+}

src/components/HelloWorld.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineProps<{ msg: string }>();
+
+const count = ref(0);
+const addCount = () => {
+  count.value++;
+};
+</script>
+
+<template>
+  <div>
+    <h1 class="text-4xl font-bold py-6">{{ msg }}</h1>
+
+    <div class="card w-1200px">
+      <button
+        class="w-32 py-2 px-3 rounded-lg mx-auto my-3"
+        type="button"
+        @click="addCount"
+      >
+        count is {{ count }}
+      </button>
+      <p>
+        Edit
+        <code>components/HelloWorld.vue</code> to test HMR
+      </p>
+    </div>
+
+    <p>
+      Check out
+      <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+        >create-vue</a
+      >, the official Vue + Vite starter
+    </p>
+    <p>
+      Install
+      <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+      in your IDE for a better DX
+    </p>
+    <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+  </div>
+</template>
+
+<style scoped lang="scss">
+// @import "@/style/global.scss";
+.read-the-docs {
+  color: #888;
+}
+button {
+  background-color: cornflowerblue;
+}
+</style>

src/components/SvgIcon/index.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+const props = defineProps({
+  prefix: {
+    type: String,
+    default: 'icon',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  color: {
+    type: String,
+    default: '#242424',
+  },
+  size: {
+    type: String,
+    default: '24px',
+  },
+});
+
+const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+</script>
+<template>
+  <svg
+    aria-hidden="true"
+    class="svg-icon"
+    :width="props.size"
+    :height="props.size"
+  >
+    <use :xlink:href="symbolId" />
+  </svg>
+</template>
+<style scoped>
+.svg-icon {
+  width: 24px;
+  height: 24px;
+  fill: currentColor;
+}
+</style>

src/components/Table/index.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import { TableItemType } from '@/types/table';
+const props = defineProps({
+  tableHeader: {
+    type: Array as PropType<TableItemType[]>,
+    default: () => [],
+  },
+  tableData: {
+    type: Array,
+    default: () => [],
+  },
+  listLoading: {
+    type: Boolean,
+    default: false,
+  },
+  pagination: {
+    type: Boolean,
+    default: true,
+  },
+  pageSize: {
+    type: Number,
+    default: 10,
+  },
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  total: {
+    type: Number,
+    default: 100,
+  },
+});
+const emit = defineEmits(['handelSelect', 'handlePagination']);
+// 选择
+const handleSelectionChange = (val: []) => {
+  emit('handelSelect', val);
+};
+// 改变分页
+const handleSizeChange = (val: number) => {
+  emit('handlePagination', { pageSize: val, currentPage: props.currentPage });
+};
+const handleCurrentChange = (val: number) => {
+  emit('handlePagination', {
+    pageSize: props.pageSize,
+    currentPage: val,
+  });
+};
+</script>
+
+<template>
+  <el-table
+    :data="tableData"
+    :header-cell-style="{
+      background: '#f5f6fa',
+      color: '#555',
+      fontWeight: 'normal',
+      fontSize: '12px',
+    }"
+    :cell-style="{ fontSize: '12px' }"
+    @selection-change="handleSelectionChange"
+  >
+    <!-- 复选框 -->
+    <el-table-column type="selection" width="55" />
+    <!-- 数据 -->
+    <template v-for="(item, index) in tableHeader" :key="index">
+      <!-- 编辑按钮 -->
+      <el-table-column
+        v-if="item.actions"
+        :prop="item.prop"
+        :label="item.label"
+        :width="item.width"
+        fixed="right"
+      >
+        <template #default="scope">
+          <!-- 操作按钮 -->
+          <div>
+            <el-button
+              text
+              size="small"
+              v-for="(action, index) in item.actions"
+              :key="index"
+              :type="action.type"
+              @click="action.func(scope.row)"
+              >{{ action.name }}</el-button
+            >
+          </div>
+        </template>
+      </el-table-column>
+      <!-- 图片展示 -->
+      <el-table-column
+        v-else-if="item.image"
+        :label="item.label"
+        :width="item.width"
+      >
+        <template #default="{ row }">
+          <div v-if="row[item.prop]">
+            <el-image
+              preview-teleported
+              :hide-on-click-modal="true"
+              :preview-src-list="[row[item.prop!]]"
+              :src="row[item.prop!]"
+              fit="cover"
+              style="width: 40px; height: 40px; border-radius: 8px"
+            />
+          </div>
+          <div v-else>暂无图片</div>
+        </template>
+      </el-table-column>
+      <!--  formatter信息展示-->
+      <el-table-column
+        v-else-if="item.formatter"
+        :label="item.label"
+        :width="item.width"
+        :align="item.aligen || 'center'"
+      >
+        <template #default="{ row }">
+          <el-tag :type="item.getType!(row)"> {{ item.formatter(row) }}</el-tag>
+        </template></el-table-column
+      >
+      <!--普通信息展示  -->
+      <el-table-column
+        v-else
+        :label="item.label"
+        :prop="item.prop"
+        :width="item.width"
+        :align="item.aligen || 'center'"
+      ></el-table-column>
+    </template>
+  </el-table>
+  <div v-if="pagination" class="float-right">
+    <el-pagination
+      background
+      :small="true"
+      layout="sizes,prev, pager, next"
+      :total="total"
+      :currentPage="currentPage"
+      :page-size="pageSize"
+      :page-sizes="[10, 20, 30, 50]"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<style></style>

src/components/index.ts

@@ -0,0 +1,5 @@
+/**
+ *title: 自动导出组件
+ */
+export { default as Header } from './Header/index.vue';
+export { default as Footer } from './Footer/index.vue';

src/hooks/useTheme.ts

@@ -0,0 +1,19 @@
+import { useStorage } from '@vueuse/core';
+import { ref } from 'vue';
+export const useTheme = (theme?: string) => {
+  const StorageTheme = useStorage('data-theme', theme) || ref('default');
+  const setTheme = (theme: string) => {
+    StorageTheme.value = theme;
+    const body = document.getElementsByTagName('body')[0];
+    if (body) {
+      body.setAttribute('data-theme', StorageTheme.value);
+    }
+  };
+  if (theme) {
+    setTheme(theme);
+  } else {
+    setTheme(StorageTheme.value as string);
+  }
+
+  return { StorageTheme, setTheme };
+};

src/icons/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1664981520920" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1055" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M806.4 263.2l-45.6-45.6L512 467.2 263.2 217.6l-45.6 45.6L467.2 512 217.6 760.8l45.6 45.6L512 557.6l248.8 248.8 45.6-45.6L557.6 512z" p-id="1056"></path></svg>

src/icons/github.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1666148264992" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1367" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M498.894518 100.608396c-211.824383 0-409.482115 189.041494-409.482115 422.192601 0 186.567139 127.312594 344.783581 295.065226 400.602887 21.13025 3.916193 32.039717-9.17701 32.039717-20.307512 0-10.101055 1.176802-43.343157 1.019213-78.596056-117.448946 25.564235-141.394311-49.835012-141.394311-49.835012-19.225877-48.805566-46.503127-61.793368-46.503127-61.793368-38.293141-26.233478 3.13848-25.611308 3.13848-25.611308 42.361807 2.933819 64.779376 43.443441 64.779376 43.443441 37.669948 64.574714 98.842169 45.865607 122.912377 35.094286 3.815909-27.262924 14.764262-45.918819 26.823925-56.431244-93.796246-10.665921-192.323237-46.90017-192.323237-208.673623 0-46.071292 16.498766-83.747379 43.449581-113.332185-4.379751-10.665921-18.805298-53.544497 4.076852-111.732757 0 0 35.46063-11.336186 116.16265 43.296085 33.653471-9.330506 69.783343-14.022365 105.654318-14.174837 35.869952 0.153496 72.046896 4.844332 105.753579 14.174837 80.606853-54.631248 116.00813-43.296085 116.00813-43.296085 22.935362 58.18826 8.559956 101.120049 4.180206 111.732757 27.052123 29.584806 43.443441 67.260893 43.443441 113.332185 0 162.137751-98.798167 197.850114-192.799074 208.262254 15.151072 13.088086 28.65155 38.804794 28.65155 78.17957 0 56.484456-0.459464 101.94381-0.459464 115.854635 0 11.235902 7.573489 24.381293 29.014824 20.2543C825.753867 867.330798 933.822165 709.10924 933.822165 522.700713c0-233.155201-224.12657-422.192601-434.927647-422.192601L498.894518 100.608396z" p-id="1368"></path></svg>

src/icons/menu.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1664946129387" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="830" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M212 338c-24.852 0-45-20.148-45-45S187.148 248 212 248h600c24.852 0 45 20.148 45 45S836.852 338 812 338H212z m0 220c-24.852 0-45-20.148-45-45S187.148 468 212 468h600c24.852 0 45 20.148 45 45S836.852 558 812 558H212z m0 220c-24.852 0-45-20.148-45-45S187.148 688 212 688h600c24.852 0 45 20.148 45 45S836.852 778 812 778H212z" p-id="831"></path></svg>

src/icons/open.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1673227601112" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2635" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M896 768c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666666H128c-25.6 0-42.666667-17.066667-42.666667-42.666666s17.066667-42.666667 42.666667-42.666667h768z m0-298.666667c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667H128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667h768z m0-298.666666c25.6 0 42.666667 17.066667 42.666667 42.666666s-17.066667 42.666667-42.666667 42.666667H128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666666h768z" p-id="2636"></path></svg>

src/layout/Footer/config.ts

@@ -0,0 +1,10 @@
+export const footerList = {
+  data: [
+    {
+      id: 0,
+      name: 'Github',
+      url: 'https://github.com/LOG1997',
+      icon: 'github',
+    },
+  ],
+};

src/layout/Footer/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { footerList } from './config';
+const skip = (url: string) => {
+  window.open(url);
+};
+</script>
+<template>
+  <div class="footer-container">
+    <ul class="flex justify-center">
+      <li
+        v-for="item in footerList.data"
+        :key="item.id"
+        @click="skip(item.url)"
+        class="flex items-center gap-1 cursor-pointer"
+      >
+        <svg-icon :name="item.icon"></svg-icon>
+        <p>{{ item.name }}</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/layout/Header/config.ts

@@ -0,0 +1,17 @@
+export const navList = [
+    {
+        id: 0,
+        name: '首页',
+        url: 'home',
+    },
+    {
+        id: 1,
+        name: '项目',
+        url: 'project',
+    },
+    {
+        id: 2,
+        name: '关于',
+        url: 'about',
+    },
+]

src/layout/Header/index.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { navList } from './config';
+const skip = (url: string) => {
+  window.open(url, '_self');
+};
+</script>
+
+<template>
+    <div class="h-full header-container">
+        <div class="p-0 navbar bg-base-100">
+            <div class="navbar-start max-lg:w-full">
+                <div class="dropdown">
+                    <label tabindex="0" class="btn btn-ghost lg:hidden">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M4 6h16M4 12h8m-8 6h16" />
+                        </svg>
+                    </label>
+                    <ul tabindex="0"
+                        class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 text-lg flex flex-col gap-2">
+                        <li class="cursor-pointer hover:text-gray-100 hover:bg-base-200" v-for="item in navList" :key="item.id" @click="skip(item.url)">{{ item.name }}</li>
+                    </ul>
+                </div>
+                <a class="text-xl lg:pl-12 max-lg:mx-auto" href="https://vitejs.dev" target="_blank">
+                    <img src="/vite.svg" class="logo" alt="Vite logo" />
+                </a>
+            </div>
+            <div class="hidden navbar-center lg:flex">
+                <ul class="flex gap-10 px-1 text-lg cursor-pointer menu menu-horizontal">
+                    <li class="hover:text-gray-100"  v-for="item in navList" :key="item.id" @click="skip(item.url)">{{ item.name }}</li>
+                </ul>
+        </div>
+        <div class="navbar-end max-lg:w-0">
+            <a class="btn">Button</a>
+        </div>
+    </div>
+    </div>
+</template>
+
+<style scoped lang="scss"></style>

src/layout/index.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import Header from './Header/index.vue';
+import Footer from './Footer/index.vue';
+</script>
+
+<template>
+  <div class="w-screen">
+    <header class="shadow-2xl head-container h-14">
+      <Header></Header>
+    </header>
+    <main class="main-container w-screen box-content min-h-[calc(100vh-10rem)]">
+      <router-view class="main-container-content"></router-view>
+    </main>
+    <footer class="w-screen footer-container">
+      <Footer></Footer>
+    </footer>
+  </div>
+</template>
+<style scoped lang="scss">
+
+</style>

src/main.ts

@@ -0,0 +1,19 @@
+import { createApp } from 'vue';
+import './style.css';
+
+import App from './App.vue';
+
+const app = createApp(App);
+// 全局svg组件
+import 'virtual:svg-icons-register';
+import svgIcon from '@/components/SvgIcon/index.vue';
+// svg全局组件// 路由
+import router from '@/router';
+// pinia
+import { createPinia } from 'pinia';
+// pinia持久化
+import piniaPluginPersist from 'pinia-plugin-persist';
+const pinia = createPinia();
+pinia.use(piniaPluginPersist);
+app.component('svg-icon', svgIcon);
+app.use(router).use(pinia).mount('#app');

src/router/index.ts

@@ -0,0 +1,39 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import Layout from '@/layout/index.vue';
+import Home from '@/views/Home/index.vue';
+const routes = [
+  {
+    path: '/',
+    component: Layout,
+    redirect: '/home',
+    children: [
+      {
+        path: '/home',
+        name: 'Home',
+        component: Home,
+      },
+      {
+        path: '/guide',
+        name: 'Guide',
+        component: () => import('@/views/Guide/index.vue'),
+      },
+      {
+        path: '/doc',
+        name: 'Doc',
+        component: () => import('@/views/Doc/index.vue'),
+      },
+      {
+        path: '/about',
+        name: 'About',
+        component: () => import('@/views/About/index.vue'),
+      },
+    ],
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;

src/store/index.ts

@@ -0,0 +1,7 @@
+import { useUserStore } from './user';
+
+export default function useStore() {
+  return {
+    user: useUserStore(),
+  };
+}

src/store/user.ts

@@ -0,0 +1,34 @@
+import { defineStore } from 'pinia';
+import { IUser } from '@/types/user';
+
+export const useUserStore = defineStore('user', {
+  state() {
+    return {
+      userList: [] as IUser[],
+    };
+  },
+  getters: {
+    getUserList(state) {
+      return state.userList;
+    },
+  },
+  actions: {
+    setUserList() {
+      const resList: IUser[] = [
+        { name: '张三', age: 18 },
+        { name: '李四', age: 19 },
+      ];
+      this.userList = resList;
+    },
+  },
+  persist: {
+    enabled: true,
+    strategies: [
+      {
+        // 如果要存储在localStorage中
+        // storage: localStorage,
+        paths: ['userList'],
+      },
+    ],
+  },
+});

src/style.css

@@ -0,0 +1,55 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body,
+html {
+    margin: 0;
+    padding: 0;
+    overflow-y: overlay;
+    overflow: hidden;
+}
+
+ul {
+    list-style: none;
+}
+
+/* 优化滚动条 */
+::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    height: 10px;
+    width: 10px;
+    background: rgba(12, 9, 9, 0.1);
+    float: right;
+}
+
+::-webkit-scrollbar:hover {
+    background: rgba(0, 0, 0, 0.2);
+}
+
+/* .tables::-webkit-scrollbar-track {
+    background: rgb(239, 239, 239);
+    border-radius: 2px;
+  } */
+::-webkit-scrollbar-thumb {
+    /* 滚动条 */
+    background: #909399;
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    -ms-border-radius: 6px;
+    -o-border-radius: 6px;
+    border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+    /* Webkit browsers */
+    -moz-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+    /* Firefox */
+    -ms-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+    /* IE9 */
+    -o-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+    /* Opera(Old) */
+    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+    /* IE9+, News */
+}

src/style/_blue_theme.scss

@@ -0,0 +1,22 @@
+$theme-color: #2e1f78;
+$important-color: #02e5f6;
+$font-color: #fbfbfb;
+$light-color: #fd5913;
+$normal-color: #15115d;
+$dark-card-color: #fbfbfb;
+
+$blue_theme: (
+    theme-bg-color: $theme-color,
+    font-color: $font-color,
+    font-color-second: darken($font-color, 20%),
+    light-bg-color: $light-color,
+    normal-color: $normal-color,
+    header-bg-color: lighten($theme-color, 10%),
+    header-bg-color-hover: lighten($theme-color, 20%),
+    shawdow-color: darken($theme-color, 5%),
+    shawdow-color-hover: darken($theme-color, 15%),
+    border-color: lighten($theme-color, 20%),
+    important-color: lighten($important-color, 20%),
+    important-bg-color: transparentize($important-color, 0.9),
+    dark-card-color: $dark-card-color,
+);

src/style/_dark_theme.scss

@@ -0,0 +1,22 @@
+$theme-color: #1e1f25;
+$important-color: #ff864d;
+$font-color: #fbfbfb;
+$light-color: #00e6f6;
+$normal-color: #183561;
+$dark-card-color: #fbfbfb;
+
+$dark_theme: (
+    theme-bg-color: $theme-color,
+    font-color: $font-color,
+    font-color-second: darken($font-color, 20%),
+    light-bg-color: $light-color,
+    normal-color: $normal-color,
+    header-bg-color: lighten($theme-color, 10%),
+    header-bg-color-hover: lighten($theme-color, 20%),
+    shawdow-color: darken($theme-color, 5%),
+    shawdow-color-hover: darken($theme-color, 15%),
+    border-color: lighten($theme-color, 20%),
+    important-color: lighten($important-color, 20%),
+    important-bg-color: transparentize($important-color, 0.9),
+    dark-card-color: $dark-card-color,
+);

src/style/_default.scss

@@ -0,0 +1,22 @@
+$theme-color: #fbfbfb;
+$important-color: #6a47bb;
+$font-color: #030303;
+$light-color: #409eff;
+$normal-color: #fbfbfb;
+$dark-card-color: #fbfbfb;
+
+$default: (
+    theme-bg-color: $theme-color,
+    font-color: $font-color,
+    font-color-second: darken($font-color, 20%),
+    light-bg-color: $light-color,
+    normal-color: $normal-color,
+    header-bg-color: lighten($theme-color, 10%),
+    header-bg-color-hover: lighten($theme-color, 20%),
+    shawdow-color: darken($theme-color, 5%),
+    shawdow-color-hover: darken($theme-color, 15%),
+    border-color: lighten($theme-color, 20%),
+    important-color: lighten($important-color, 20%),
+    important-bg-color: transparentize($important-color, 0.9),
+    dark-card-color: $dark-card-color,
+);

src/style/_purple_theme.scss

@@ -0,0 +1,22 @@
+$theme-color: #0a142e;
+$important-color: #8c5ff6;
+$font-color: #fbfbfb;
+$light-color: #c678fd;
+$normal-color: #0a142e;
+$dark-card-color: #fbfbfb;
+
+$purple_theme: (
+    theme-bg-color: $theme-color,
+    font-color: $font-color,
+    font-color-second: darken($font-color, 20%),
+    light-bg-color: $light-color,
+    normal-color: $normal-color,
+    header-bg-color: lighten($theme-color, 10%),
+    header-bg-color-hover: lighten($theme-color, 20%),
+    shawdow-color: darken($theme-color, 5%),
+    shawdow-color-hover: darken($theme-color, 15%),
+    border-color: lighten($theme-color, 20%),
+    important-color: lighten($important-color, 20%),
+    important-bg-color: transparentize($important-color, 0.9),
+    dark-card-color: $dark-card-color,
+);

src/style/changeTheme.ts

@@ -0,0 +1 @@
+import './global.scss';

src/style/global.module.scss

@@ -0,0 +1,14 @@
+:root {
+    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-text-size-adjust: 100%;
+}
+body {
+    // background: $theme-bg-color;
+}

src/style/global.scss

@@ -0,0 +1,11 @@
+// global.scss
+@import "./theme/index.scss";
+// variables.scss
+$primary-color: #fe4e5e;
+$background-color: #fefefe;
+$padding: 124px;
+// :export {
+//     primaryColor: $primary-color;
+//     backgroundColor: $background-color;
+//     padding: $padding;
+// }

src/style/index.scss

@@ -0,0 +1,50 @@
+@import "./default.scss"; //默认主题颜色
+@import "./dark_theme.scss"; // 红色主题颜色
+@import "./blue_theme.scss"; // 灰色主题颜色
+@import "./purple_theme.scss"; // 灰色主题颜色
+//生成对应元素的主题样式代码
+//主题参数
+$themes: (
+    default: $default,
+    blue_theme: $blue_theme,
+    dark_theme: $dark_theme,
+    purple_theme: $purple_theme,
+);
+// 生成body的主题样式
+@mixin themeify {
+    @each $themes-key, $themes-map in $themes {
+        $themes-map: $themes-map !global;
+        &[data-theme="#{$themes-key}"] {
+            @content;
+        }
+    }
+}
+// 生成子元素样式
+@mixin themeChildify {
+    @each $themes-key, $themes-map in $themes {
+        $themes-map: $themes-map !global;
+        [data-theme="#{$themes-key}"] & {
+            @content;
+        }
+    }
+}
+// 获取主题对应的theme-color
+@function getThemeColor($key) {
+    $currentTheme: map-get($themes, $key);
+    @return map-get($currentTheme, "theme-bg-color");
+}
+@function themed($key) {
+    @if map-get($themes-map, $key) {
+        @return map-get($themes-map, $key);
+    } @else {
+        @return $key;
+    }
+}
+// 随机数颜色
+@function themedRandom($key) {
+    @if map-get($themes-map, $key) {
+        @return map-get($themes-map, $key);
+    } @else {
+        @return $key;
+    }
+} ;

src/style/theme/_blue_theme.scss

@@ -0,0 +1,22 @@
+$theme-color: #2e1f78;
+$important-color: #02e5f6;
+$font-color: #fbfbfb;
+$light-color: #fd5913;
+$normal-color: #15115d;
+$dark-card-color: #fbfbfb;
+
+$blue_theme: (
+    theme-bg-color: $theme-color,
+    font-color: $font-color,
+    font-color-second: darken($font-color, 20%),
+    light-bg-color: $light-color,
+    normal-color: $normal-color,
+    header-bg-color: lighten($theme-color, 10%),
+    header-bg-color-hover: lighten($theme-color, 20%),
+    shawdow-color: darken($theme-color, 5%),
+    shawdow-color-hover: darken($theme-color, 15%),
+    border-color: lighten($theme-color, 20%),
+    important-color: lighten($important-color, 20%),
+    important-bg-color: transparentize($important-color, 0.9),
+    dark-card-color: $dark-card-color,
+);

src/style/theme/_dark_theme.scss

@@ -0,0 +1,22 @@
+$theme-color: #1e1f25;
+$important-color: #ff864d;
+$font-color: #fbfbfb;
+$light-color: #00e6f6;
+$normal-color: #183561;
+$dark-card-color: #fbfbfb;
+
+$dark_theme: (
+    theme-bg-color: $theme-color,
+    font-color: $font-color,
+    font-color-second: darken($font-color, 20%),
+    light-bg-color: $light-color,
+    normal-color: $normal-color,
+    header-bg-color: lighten($theme-color, 10%),
+    header-bg-color-hover: lighten($theme-color, 20%),
+    shawdow-color: darken($theme-color, 5%),
+    shawdow-color-hover: darken($theme-color, 15%),
+    border-color: lighten($theme-color, 20%),
+    important-color: lighten($important-color, 20%),
+    important-bg-color: transparentize($important-color, 0.9),
+    dark-card-color: $dark-card-color,
+);

src/style/theme/_default.scss

@@ -0,0 +1,22 @@
+$theme-color: #fbfbfb;
+$important-color: #6a47bb;
+$font-color: #030303;
+$light-color: #409eff;
+$normal-color: #fbfbfb;
+$dark-card-color: #fbfbfb;
+
+$default: (
+    theme-bg-color: $theme-color,
+    font-color: $font-color,
+    font-color-second: darken($font-color, 20%),
+    light-bg-color: $light-color,
+    normal-color: $normal-color,
+    header-bg-color: lighten($theme-color, 10%),
+    header-bg-color-hover: lighten($theme-color, 20%),
+    shawdow-color: darken($theme-color, 5%),
+    shawdow-color-hover: darken($theme-color, 15%),
+    border-color: lighten($theme-color, 20%),
+    important-color: lighten($important-color, 20%),
+    important-bg-color: transparentize($important-color, 0.9),
+    dark-card-color: $dark-card-color,
+);

src/style/theme/_purple_theme.scss

@@ -0,0 +1,22 @@
+$theme-color: #0a142e;
+$important-color: #8c5ff6;
+$font-color: #fbfbfb;
+$light-color: #c678fd;
+$normal-color: #0a142e;
+$dark-card-color: #fbfbfb;
+
+$purple_theme: (
+    theme-bg-color: $theme-color,
+    font-color: $font-color,
+    font-color-second: darken($font-color, 20%),
+    light-bg-color: $light-color,
+    normal-color: $normal-color,
+    header-bg-color: lighten($theme-color, 10%),
+    header-bg-color-hover: lighten($theme-color, 20%),
+    shawdow-color: darken($theme-color, 5%),
+    shawdow-color-hover: darken($theme-color, 15%),
+    border-color: lighten($theme-color, 20%),
+    important-color: lighten($important-color, 20%),
+    important-bg-color: transparentize($important-color, 0.9),
+    dark-card-color: $dark-card-color,
+);

src/style/theme/index.scss

@@ -0,0 +1,50 @@
+@import "./default.scss"; //默认主题颜色
+@import "./dark_theme.scss"; // 红色主题颜色
+@import "./blue_theme.scss"; // 灰色主题颜色
+@import "./purple_theme.scss"; // 灰色主题颜色
+//生成对应元素的主题样式代码
+//主题参数
+$themes: (
+    default: $default,
+    blue_theme: $blue_theme,
+    dark_theme: $dark_theme,
+    purple_theme: $purple_theme,
+);
+// 生成body的主题样式
+@mixin themeify {
+    @each $themes-key, $themes-map in $themes {
+        $themes-map: $themes-map !global;
+        &[data-theme="#{$themes-key}"] {
+            @content;
+        }
+    }
+}
+// 生成子元素样式
+@mixin themeChildify {
+    @each $themes-key, $themes-map in $themes {
+        $themes-map: $themes-map !global;
+        [data-theme="#{$themes-key}"] & {
+            @content;
+        }
+    }
+}
+// 获取主题对应的theme-color
+@function getThemeColor($key) {
+    $currentTheme: map-get($themes, $key);
+    @return map-get($currentTheme, "theme-bg-color");
+}
+@function themed($key) {
+    @if map-get($themes-map, $key) {
+        @return map-get($themes-map, $key);
+    } @else {
+        @return $key;
+    }
+}
+// 随机数颜色
+@function themedRandom($key) {
+    @if map-get($themes-map, $key) {
+        @return map-get($themes-map, $key);
+    } @else {
+        @return $key;
+    }
+} ;

src/types/table.ts

@@ -0,0 +1,18 @@
+export interface TableItemType {
+  prop: string;
+  label: string;
+  width: number;
+  image?: boolean;
+  actions?: actionsItemType[];
+  aligen?: string;
+  formatter?: ItemFuncType;
+  getType?: ItemFuncType;
+}
+interface ItemFuncType {
+  (row: any): any;
+}
+interface actionsItemType {
+  name: string;
+  func: any;
+  type?: any;
+}

src/types/user.ts

@@ -0,0 +1,6 @@
+// 用户的类型声明文件
+export interface IUser {
+  name: string;
+  age: number;
+}
+// ...

src/utils/auth.ts

@@ -0,0 +1,3 @@
+export function getToken() {
+  return window.localStorage.getItem('userToken');
+}

src/views/About/index.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { reactive } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const skip = (url: string) => {
+  router.push({
+    path: url,
+  });
+};
+
+const formInline = reactive({
+  user: '',
+  region: '',
+});
+
+const onSubmit = () => {
+  console.log('submit!');
+};
+</script>
+
+<template>
+  <h2>About</h2>
+  <button @click="skip('/home')">to Home</button>
+  <el-form :inline="true" :model="formInline" class="demo-form-inline">
+    <el-form-item label="Approved by">
+      <el-input v-model="formInline.user" placeholder="Approved by" />
+    </el-form-item>
+    <el-form-item label="Activity zone">
+      <el-select v-model="formInline.region" placeholder="Activity zone">
+        <el-option label="Zone one" value="shanghai" />
+        <el-option label="Zone two" value="beijing" />
+      </el-select>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="onSubmit">Query</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<style scoped></style>

src/views/Doc/index.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+</script>
+
+<template>Doc</template>
+
+<style scoped></style>

src/views/Guide/index.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+</script>
+
+<template>project</template>
+
+<style scoped></style>

src/views/Home/index.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import HelloWorld from '../../components/HelloWorld.vue';
+import useStore from '@/store/index';
+import { useRouter } from 'vue-router';
+import { IUser } from '@/types/user';
+
+import { getData } from '@/api/main';
+const store = useStore();
+const router = useRouter();
+const data = ref<any>(null);
+const fetchData = async () => {
+  const res = await getData({});
+  data.value = res;
+  console.log('😊data.value:', data.value);
+};
+store.user.setUserList();
+// eslint-disable-next-line no-undef
+let user = ref<IUser[]>([]);
+const getUser = () => {
+  user.value = store.user.getUserList;
+  console.log('😊user.value:', user.value);
+};
+const skip = (url: string) => {
+  router.push({
+    path: url,
+    query: { id: 1 },
+  });
+};
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <!-- <svg-icon :name="'menu'" class="cursor-pointer svgMenu"></svg-icon> -->
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="/vite.svg" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://vuejs.org/" target="_blank">
+      <img src="../../assets/vue.svg" class="logo vue" alt="Vue logo" />
+    </a>
+  </div>
+  <div class="flex justify-center gap-6">
+    <button class="btn btn-primary" @click="getUser">pinia test</button>
+    <button class="btn btn-outline btn-secondary" @click="skip('about')"> router test</button>
+    <button class="btn glass" @click="fetchData">fetch</button>
+
+  </div>
+  <HelloWorld
+    class="flex flex-col items-center mx-auto text-center flex-column"
+    msg="Vite + Vue"
+  />
+</template>
+
+<style scoped lang="scss">
+
+
+.logo {
+  height: 10em;
+  padding: 1.5em;
+  will-change: filter;
+  z-index: 0;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+
+
+</style>

src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}