升级为Vue3 + Vite5.2

1 年之前 · e59f8ddbba
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -0,0 +1,14 @@
 /* eslint-env node */
 require('@rushstack/eslint-patch/modern-module-resolution')

 module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier/skip-formatting'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  }
 }
--- a/.gitignore
+++ b/.gitignore
@@ -1,23 +1,30 @@
 .DS_Store
 node_modules
 /dist

 # local env files
 .env.local
 .env.*.local

 # Log files
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*

 node_modules
 .DS_Store
 dist
 dist-ssr
 coverage
 *.local

 /cypress/videos/
 /cypress/screenshots/

 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
 /.vs

 *.tsbuildinfo
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -0,0 +1,8 @@
 {
  "$schema": "https://json.schemastore.org/prettierrc",
  "semi": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 100,
  "trailingComma": "none"
 }
--- a/README.md
+++ b/README.md
@@ -1,19 +1,35 @@
 # yzx_tool
 # 云智学工具集Vue3版本

 ## Project setup
 ```
 This template should help get you started developing with Vue 3 in Vite.

 ## Recommended IDE Setup

 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).

 ## Customize configuration

 See [Vite Configuration Reference](https://vitejs.dev/config/).

 ## Project Setup

 ```sh
 npm install
 ```

 ### Compiles and hot-reloads for development
 ```
 npm run serve
 ```
 ### Compile and Hot-Reload for Development

 ### Compiles and minifies for production
 ```sh
 npm run dev
 ```

 ### Compile and Minify for Production

 ```sh
 npm run build
 ```

 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
 ### Lint with [ESLint](https://eslint.org/)

 ```sh
 npm run lint
 ```
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +0,0 @@
 module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
 }
--- a/index.html
+++ b/index.html
@@ -0,0 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">

 <head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>云智学工具集</title>
 </head>

 <body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
 </body>

 </html>
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -0,0 +1,8 @@
 {
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,36 +1,37 @@
 {
  "name": "yzx_tool",
  "version": "0.1.0",
  "name": "v2test2",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "clipboard": "^2.0.11",
    "core-js": "^3.6.5",
    "dayjs": "^1.11.5",
    "element-ui": "^2.13.2",
    "dayjs": "^1.11.11",
    "element-plus": "^2.7.2",
    "hex-rgb": "^5.0.0",
    "mockjs": "^1.1.0",
    "moment": "^2.27.0",
    "rgb-hex": "^4.0.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0",
    "xlsx": "^0.16.5"
    "i": "^0.3.7",
    "npm": "^10.7.0",
    "pinia": "^2.1.7",
    "rgb-hex": "^4.1.0",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@faker-js/faker": "^8.0.1",
    "@vue/cli-plugin-babel": "~4.4.0",
    "@vue/cli-plugin-router": "~4.4.0",
    "@vue/cli-plugin-vuex": "~4.4.0",
    "@vue/cli-service": "~4.4.0",
    "vue-template-compiler": "^2.6.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
    "@rushstack/eslint-patch": "^1.8.0",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/eslint-config-prettier": "^9.0.0",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.23.0",
    "prettier": "^3.2.5",
    "sass": "^1.77.0",
    "vite": "^5.2.8",
    "vite-plugin-vue-devtools": "^7.0.25"
  }
 }
--- a/public/static/code.txt
+++ b/public/static/code.txt
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/img/cszxy.jpg
+++ b/public/img/cszxy.jpg
--- a/public/img/logo-blue.png
+++ b/public/img/logo-blue.png
--- a/public/index.html
+++ b/public/index.html
@@ -1,17 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,48 +1,140 @@


 <template>
  <div id="app">
    <!--<div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>-->
    <router-view/>
  <div class="common-layout">
    <el-container class="container">
      <el-header class="header">
        <div class="header-wrap">
          <img class="logo"
               src="/img/logo-blue.png"
               alt="">
          <div class="title">云智学工具集合</div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px"
                  class="aside">
          <el-menu :default-active="active"
                   class="el-menu-vertical"
                   ref="myMenu"
                   router
                   @open="handleOpen"
                   @close="handleClose">
            <el-menu-item index="/">
              <el-icon>
                <HomeFilled />
              </el-icon>
              <span>学生信息生成</span>
            </el-menu-item>
            <el-menu-item index="/timestamp">
              <el-icon>
                <AlarmClock />
              </el-icon>
              <span>时间戳</span>
            </el-menu-item>
            <el-menu-item index="/color">
              <el-icon>
                <BrushFilled />
              </el-icon>
              <span>颜色转换</span>
            </el-menu-item>
            <el-menu-item index="/regular">
              <el-icon>
                <List />
              </el-icon>
              <span>正则大全</span>
            </el-menu-item>
            <el-menu-item index="/utc">
              <el-icon>
                <AlarmClock />
              </el-icon>
              <span>时区时间转化</span>
            </el-menu-item>
            <el-menu-item index="/removebg">
              <el-icon>
                <PictureFilled />
              </el-icon>
              <span>消除背景</span>
            </el-menu-item>
          </el-menu>
          <img class="qr"
               src="/img/cszxy.jpg"
               alt="">
        </el-aside>
        <el-main class="main">
          <el-scrollbar height="calc(100vh - 100px)">
            <RouterView />
          </el-scrollbar>

        </el-main>
      </el-container>
    </el-container>
  </div>

 </template>
 <script setup>
 import { useRouter } from 'vue-router'
 import HelloWorld from './components/HelloWorld.vue'
 import { onMounted, ref } from 'vue'
 const router = useRouter();
 const active = ref('/');
 let oldActice = "/";

 <style>
 #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
 const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
 }

 #nav {
  padding: 30px;
 const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
 }

 #nav a {
  font-weight: bold;
  color: #2c3e50;
 }

 #nav a.router-link-exact-active {
  color: #42b983;
 }
 body,html{
    margin:0;
    padding:0;
 }
 .base-page{
  padding: 30px;
  background-color: #fff;
  border-radius: 4px;
  min-height: 600px;
 }
 .ml30 {
  margin-left: 30px;
 }
 .mt20 {
  margin-top: 20px;


 onMounted(() => {
  active.value = window.location.pathname;
 })
 </script>

 <style scoped lang="scss">
 .common-layout {
  width: 100%;
  height: 100%;
  .el-menu-vertical,
  .container {
    height: 100%;
  }
  .header {
    background-color: #79bbff;
  }
  .aside {
    background-color: #42b983;
    position: relative;
    .qr {
      width: calc(100% - 20px);
      position: absolute;
      bottom: 10px;
      left: 10px;
    }
  }
  .header-wrap {
    display: flex;
    align-items: center;
    height: 100%;
    .logo {
      height: 30px;
    }
    .title {
      font-size: 20px;
      color: #fff;
      margin-left: 10px;
    }
  }
  .main {
    margin: 20px;
    background: #fff;
    border-radius: 6px;
    height: calc(100vh - 100px);
    overflow-y: auto;
  }
 }
 </style>
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -0,0 +1,106 @@
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
  --vt-c-white: #ffffff;
  --vt-c-white-soft: #f8f8f8;
  --vt-c-white-mute: #f2f2f2;

  --vt-c-black: #181818;
  --vt-c-black-soft: #222222;
  --vt-c-black-mute: #282828;

  --vt-c-indigo: #2c3e50;

  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

  --vt-c-text-light-1: var(--vt-c-indigo);
  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
  --vt-c-text-dark-1: var(--vt-c-white);
  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
 }

 /* semantic color variables for this project */
 :root {
  --color-background: var(--vt-c-white);
  --color-background-soft: var(--vt-c-white-soft);
  --color-background-mute: var(--vt-c-white-mute);

  --color-border: var(--vt-c-divider-light-2);
  --color-border-hover: var(--vt-c-divider-light-1);

  --color-heading: var(--vt-c-text-light-1);
  --color-text: var(--vt-c-text-light-1);

  --section-gap: 160px;
 }

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--vt-c-black);
    --color-background-soft: var(--vt-c-black-soft);
    --color-background-mute: var(--vt-c-black-mute);

    --color-border: var(--vt-c-divider-dark-2);
    --color-border-hover: var(--vt-c-divider-dark-1);

    --color-heading: var(--vt-c-text-dark-1);
    --color-text: var(--vt-c-text-dark-2);
  }
 }

 *,
 *::before,
 *::after {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
 }

 body {
  min-height: 100vh;
  color: var(--color-text);
  background: var(--color-background);
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

 .ml10 {
  margin-left: 10px;
 }

 .ml20 {
  margin-left: 20px;
 }

 .ml30 {
  margin-left: 30px;
 }

 .mt10 {
  margin-top: 10px;
 }

 .mt20 {
  margin-top: 20px;
 }
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -0,0 +1,23 @@
@import './base.css';

 #app {
  margin: 0;
  padding: 0;
  font-weight: normal;
  height: 100vh;
  background-color: #f5f5f5;
 }

 a,
 .green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
 }

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
 }
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,44 @@
 <script setup>
 defineProps({
  msg: {
    type: String,
    required: true
  }
 })
 </script>

 <template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
    </h3>
  </div>
 </template>

 <style scoped>
 h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
 }

 h3 {
  font-size: 1.2rem;
 }

 .greetings h1,
 .greetings h3 {
  text-align: center;
 }

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
 }
 </style>
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@@ -1,138 +0,0 @@
 <!--  -->
 <template>
  <div class="layout">
    <el-container>
      <el-header>
        <div class="header">
          <img src="@/assets/logo-blue.png"
               alt=""
               class="logo">
          <span class="sys-name">云智学工具集合</span>
        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu :default-active="active"
                   :router="true"
                   class="el-menu-vertical-demo">
            <el-menu-item :index="getPath(item)"
                          v-for="item in menu">
              <i :class="item.meta.icon"></i>
              <span slot="title">{{item.meta.title}}</span>
            </el-menu-item>
          </el-menu>
          <img src="@/assets/cszxy.jpg" alt="" class="qr">
        </el-aside>
        <el-container>
          <el-main>
            <router-view :key="key" />
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
 </template>

 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》 from '《组件路径》';
 import path from 'path'
 export default {
  name: "Layout",
  props: {},
  //import引入的组件需要注入到对象中才能使用
  components: {
    //defaultPage ,
  },
  data () {
    return {
      active: this.$route.path,
      menu: []
    }
  },
  //监听属性 类似于data概念
  computed: {
    key () {
      return this.$route.fullPath
    }
  },
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  async created () {
    this.menu = this.$router.options.routes;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted () {
    let routes = this.$router.options.routes;
    console.log("------>", routes)
  },
  //方法集合
  methods: {
    getPath (item) {
      return path.resolve(item.path, item.children[0].path);
    }
  },
  //当前页面的filter
  filters: {}
 }
 </script>
 <!-- 单页私有css -->
 <style scoped>
 .el-menu {
  height: calc(100% - 190px);
 }
 .el-header {
  background-color: rgba(60,126,246, 0.7);
  color: #fff;
  text-align: center;
  line-height: 60px;
 }

 .el-aside {
  background-color: #fff;
  color: #333;
  text-align: left;
  height: calc(100vh - 60px);
  overflow: hidden;
 }

 .el-main {
  background-color: #f5f5f5;
  color: #333;
  text-align: left;
  height: calc(100vh - 60px);
  overflow: auto;
 }

 body > .el-container {
  margin-bottom: 40px;
 }

 .el-container:nth-child(5) .el-aside,
 .el-container:nth-child(6) .el-aside {
  line-height: 260px;
 }

 .el-container:nth-child(7) .el-aside {
  line-height: 320px;
 }
 .header{
    display: flex;
    align-items: center;
 }
 .header .sys-name{
    margin-left: 15px;
    font-size: 18px;
 }
 .logo{
    height: 20px;
 }
 .qr{
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
 }
 </style>
 <style>
 </style>
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
@@ -0,0 +1,88 @@
 <script setup>
 import WelcomeItem from './WelcomeItem.vue'
 import DocumentationIcon from './icons/IconDocumentation.vue'
 import ToolingIcon from './icons/IconTooling.vue'
 import EcosystemIcon from './icons/IconEcosystem.vue'
 import CommunityIcon from './icons/IconCommunity.vue'
 import SupportIcon from './icons/IconSupport.vue'
 </script>

 <template>
  <WelcomeItem>
    <template #icon>
      <DocumentationIcon />
    </template>
    <template #heading>Documentation</template>

    Vue’s
    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
    provides you with all information you need to get started.
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <ToolingIcon />
    </template>
    <template #heading>Tooling</template>

    This project is served and bundled with
    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
    recommended IDE setup is
    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
    you need to test your components and web pages, check out
    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
    <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
      >Cypress Component Testing</a
    >.

    <br />

    More instructions are available in <code>README.md</code>.
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <EcosystemIcon />
    </template>
    <template #heading>Ecosystem</template>

    Get official tools and libraries for your project:
    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
    you need more resources, we suggest paying
    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
    a visit.
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <CommunityIcon />
    </template>
    <template #heading>Community</template>

    Got stuck? Ask your question on
    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
    Discord server, or
    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
      >StackOverflow</a
    >. You should also subscribe to
    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
    the official
    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
    twitter account for latest news in the Vue world.
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <SupportIcon />
    </template>
    <template #heading>Support Vue</template>

    As an independent project, Vue relies on community backing for its sustainability. You can help
    us by
    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
  </WelcomeItem>
 </template>
--- a/src/components/WelcomeItem.vue
+++ b/src/components/WelcomeItem.vue
@@ -0,0 +1,86 @@
 <template>
  <div class="item">
    <i>
      <slot name="icon"></slot>
    </i>
    <div class="details">
      <h3>
        <slot name="heading"></slot>
      </h3>
      <slot></slot>
    </div>
  </div>
 </template>

 <style scoped>
 .item {
  margin-top: 2rem;
  display: flex;
  position: relative;
 }

 .details {
  flex: 1;
  margin-left: 1rem;
 }

 i {
  display: flex;
  place-items: center;
  place-content: center;
  width: 32px;
  height: 32px;
  color: var(--color-text);
 }

 h3 {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--color-heading);
 }

@media (min-width: 1024px) {
  .item {
    margin-top: 0;
    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
  }

  i {
    top: calc(50% - 25px);
    left: -26px;
    position: absolute;
    border: 1px solid var(--color-border);
    background: var(--color-background);
    border-radius: 8px;
    width: 50px;
    height: 50px;
  }

  .item:before {
    content: ' ';
    border-left: 1px solid var(--color-border);
    position: absolute;
    left: 0;
    bottom: calc(50% + 25px);
    height: calc(50% - 25px);
  }

  .item:after {
    content: ' ';
    border-left: 1px solid var(--color-border);
    position: absolute;
    left: 0;
    top: calc(50% + 25px);
    height: calc(50% - 25px);
  }

  .item:first-of-type:before {
    display: none;
  }

  .item:last-of-type:after {
    display: none;
  }
 }
 </style>
--- a/src/components/icons/IconCommunity.vue
+++ b/src/components/icons/IconCommunity.vue
@@ -0,0 +1,7 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
    <path
      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
    />
  </svg>
 </template>
--- a/src/components/icons/IconDocumentation.vue
+++ b/src/components/icons/IconDocumentation.vue
@@ -0,0 +1,7 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
    <path
      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
    />
  </svg>
 </template>
--- a/src/components/icons/IconEcosystem.vue
+++ b/src/components/icons/IconEcosystem.vue
@@ -0,0 +1,7 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
    <path
      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
    />
  </svg>
 </template>
--- a/src/components/icons/IconSupport.vue
+++ b/src/components/icons/IconSupport.vue
@@ -0,0 +1,7 @@
 <template>
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
    <path
      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
    />
  </svg>
 </template>
--- a/src/components/icons/IconTooling.vue
+++ b/src/components/icons/IconTooling.vue
@@ -0,0 +1,19 @@
 <!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
 <template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    aria-hidden="true"
    role="img"
    class="iconify iconify--mdi"
    width="24"
    height="24"
    preserveAspectRatio="xMidYMid meet"
    viewBox="0 0 24 24"
  >
    <path
      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
      fill="currentColor"
    ></path>
  </svg>
 </template>
--- a/src/main.js
+++ b/src/main.js
@@ -1,17 +1,21 @@
 import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
 import store from './store';
 import './assets/main.css'

 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'

 Vue.use(ElementUI);
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'

 Vue.config.productionTip = false
 import App from './App.vue'
 import router from './router'

 new Vue({
  router,
  store,
  render: h => h(App)
 }).$mount('#app')
 const app = createApp(App)

 app.use(createPinia())
 app.use(router)
 app.use(ElementPlus)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 	app.component(key, component)
 }
 app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,108 +1,40 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/Timestamp.vue'

 import Layout from "@/components/Layout.vue";

 Vue.use(VueRouter)

 const routes = [
 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
        path: '/',
        component: Layout,
        redirect: '/userauto',
        meta: {
            title: "生成学生信息",
            icon:"el-icon-s-open"
        },
        children: [
            {
                path: 'userauto',
                name: 'UserAuto',
                component: () => import('@/views/UserAuto.vue'),
            }
        ]
      path: '/',
      name: 'home',
      component: () => import('@/views/UserAuto.vue')
    },
    {
        path: '/timestamp',
        component: Layout,
        meta: {
            title: "时间戳",
            icon: "el-icon-alarm-clock"
        },
        children: [
            {
                path: 'index',
                name: 'Timestamp',
                component: () => import('@/views/Timestamp.vue'),
            }
        ]
      path: '/timestamp',
      name: 'timestamp',
      component: () => import('@/views/Timestamp.vue')
    },
    {
        path: '/rgb',
        component: Layout,
        meta: {
            title: "颜色转化",
            icon: "el-icon-orange"
        },
        children: [
            {
                path: 'index',
                name: 'RGB',
                component: () => import('@/views/Rgb.vue'),
            }
        ]
      path: '/color',
      name: 'color',
      component: () => import('@/views/Rgb.vue')
    },
    {
        path: '/regular',
        component: Layout,
        meta: {
            title: "正则大全",
            icon: "el-icon-s-opportunity"
        },
        children: [
            {
                path: 'index',
                name: 'Regular',
                component: () => import('@/views/Regular.vue'),
            }
        ]
      path: '/regular',
      name: 'regular',
      component: () => import('@/views/Regular.vue')
    },
    {
        path: '/about',
        component: Layout,
        meta: {
            title: "时间格式化",
            icon: "el-icon-info"
        },
        children: [
            {
                path: 'index',
                name: 'Abuout',
                component: () => import('@/views/About.vue'),
            }
        ]
      path: '/utc',
      name: 'utc',
      component: () => import('@/views/Utc.vue')
    },
    {
        path: '/user',
        component: Layout,
        meta: {
            title: "生成用户信息",
            icon: "el-icon-s-custom"
        },
        children: [
            {
                path: 'index',
                name: 'Abuout',
                component: () => import('@/views/UserInfo.vue'),
            }
        ]
      path: '/removebg',
      name: 'removebg',
      component: () => import('@/views/RemoveBG.vue')
    }
 ]

 const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
  ]
 })

 export default router
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,15 +0,0 @@
 import Vue from 'vue'
 import Vuex from 'vuex'

 Vue.use(Vuex)

 export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
 })
--- a/src/stores/counter.js
+++ b/src/stores/counter.js
@@ -0,0 +1,12 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'

 export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
 })
--- a/src/utils/excelExport.js
+++ b/src/utils/excelExport.js
@@ -2,8 +2,9 @@
 * Created by admin on 2018/02/08.
 * author maw
 */
 import XLSX from "xlsx";
 //import xlsxStyle from 'xlsx-style'
 // import XLSX from "xlsx";
 import * as XLSX from "xlsx";


 /* eslint-disable */
 export default function (_headers, _data, _file) {
@@ -36,7 +37,7 @@ export default function (_headers, _data, _file) {
        continue;
      }
      if (!isNaN(parseInt(temp[j].toString()))) {
        objectMaxLength[index] = objectMaxLength[index] >= temp[j].length*1.5 ? objectMaxLength[index] : temp[j].length*1.5;
        objectMaxLength[index] = objectMaxLength[index] >= temp[j].length * 1.5 ? objectMaxLength[index] : temp[j].length * 1.5;
      } else {
        objectMaxLength[index] = objectMaxLength[index] >= temp[j].length * 3 ? objectMaxLength[index] : temp[j].length * 3;
      }
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -0,0 +1,15 @@
 <template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
 </template>

 <style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
 }
 </style>
--- a/src/views/Regular.vue
+++ b/src/views/Regular.vue
@@ -7,7 +7,9 @@
              @input="onInput"
              v-model="ketword"></el-input>
    <el-table :data="list"
              style="width: 100%">
              style="width: 100%"
              class="mt20"
              border>
      <el-table-column prop="title"
                       label="名称"
                       min-width="180">
@@ -31,8 +33,6 @@
 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》 from '《组件路径》';
 import moment from "moment";
 import excelExport from "@/utils/excelExport";
 import * as RULE from "@/utils/rule.js";
 export default {
  name: "UserAuto",
@@ -108,7 +108,6 @@ export default {
 <!-- 单页私有css -->
 <style scoped>
 .user-auto {
  padding: 30px;
  background-color: #fff;
  border-radius: 4px;
  min-height: 600px;
--- a/src/views/RemoveBG.vue
+++ b/src/views/RemoveBG.vue
@@ -0,0 +1,13 @@
 <template>

  <a href="https://www.remove.bg/zh"
     target="_blank">去remove.bg消除</a>

 </template>
 <script setup>
 "tpKGB8mDzZtuRaGGffSWUC1G"
 import { ref } from "vue";



 </script>
--- a/src/views/Rgb.vue
+++ b/src/views/Rgb.vue
@@ -9,7 +9,7 @@
                class="input-box"
                size="mini"></el-input>
      <el-button type="danger"
                 icon="el-icon-d-arrow-right"
                 icon="ArrowRight"
                 size="mini"
                 class="t-btn"
                 @click="t1">转换</el-button>
@@ -44,7 +44,7 @@
                class="input-box"
                size="mini"></el-input>
      <el-button type="danger"
                 icon="el-icon-d-arrow-right"
                 icon="ArrowRight"
                 size="mini"
                 class="t-btn"
                 @click="t2">转换</el-button>
@@ -189,7 +189,7 @@ export default {
  margin-right: 20px;
 }

 .color-block{
 .color-block {
  display: inline-block;
  width: 80px;
  height: 40px;
--- a/src/views/Timestamp.vue
+++ b/src/views/Timestamp.vue
@@ -1,126 +1,123 @@
 <!--  -->


 <template>
  <div class="timestamp base-page">
    <div>时间戳转换</div>
    <div class="mt20">现在：
      <span>{{timestamp}}</span>
      <span class="ml30">{{dateStr}}</span>
    </div>
    <div class="mt20">
      <el-button type="danger"
                 size="mini"
                 @click="stopOrStartNowTime">停止/开始</el-button>
      <el-button type="primary"
                 size="mini"
                 id="copy-timestamp"
                 :data-clipboard-text="timestamp"
                 @click="copyText('copy-timestamp')">复制时间戳</el-button>
      <el-button type="primary"
                 size="mini"
                 id="copy-dateStr"
                 :data-clipboard-text="dateStr"
                 @click="copyText('copy-dateStr')">复制时间</el-button>
    </div>
    <el-divider></el-divider>
    <div class="mt20">
      时间戳：
      <el-input v-model="timestamp1"
                placeholder="请输入"
                class="input-box"
                size="mini"></el-input>
      <el-button type="danger"
                 icon="el-icon-d-arrow-right"
                 size="mini"
                 class="t-btn"
                 @click="t1">转换</el-button>
      <el-input v-model="dateStr1"
                placeholder="请输入"
                class="input-box"
                size="mini"></el-input>
    </div>
    <div class="mt20">
      <el-button type="primary"
                 size="mini"
                 id="copy-timestamp1"
                 :data-clipboard-text="timestamp1"
                 @click="copyText('copy-timestamp1')">复制时间戳</el-button>
      <el-button type="primary"
                 size="mini"
                 id="copy-dateStr1"
                 :data-clipboard-text="dateStr1"
                 @click="copyText('copy-dateStr1')">复制时间</el-button>
    </div>
    <el-divider></el-divider>
    <div class="mt20">
      时间：
      <el-input v-model="dateStr2"
                placeholder="请输入"
                class="input-box"
                size="mini"></el-input>
      <el-button type="danger"
                 icon="el-icon-d-arrow-right"
                 size="mini"
                 class="t-btn"
                 @click="t2">转换</el-button>
      <el-input v-model="timestamp2"
                placeholder="请输入"
                class="input-box"
                size="mini"></el-input>
    </div>
    <div class="mt20">
      <el-button type="primary"
                 size="mini"
                 id="copy-dateStr2"
                 :data-clipboard-text="dateStr2"
                 @click="copyText('copy-dateStr2')">复制时间</el-button>
      <el-button type="primary"
                 size="mini"
                 id="copy-timestamp2"
                 :data-clipboard-text="timestamp2"
                 @click="copyText('copy-timestamp2')">复制时间戳</el-button>
  <div>时间戳转换</div>
  <div class="mt20">现在：
    <span>{{timestamp}}</span>
    <span class="ml20">{{dateStr}}</span>
  </div>
  <div class="mt20">
    <el-button type="danger"
               size="mini"
               @click="stopOrStartNowTime">停止/开始</el-button>
    <el-button type="primary"
               size="mini"
               id="copy-timestamp"
               :data-clipboard-text="timestamp"
               @click="copyText('copy-timestamp')">复制时间戳</el-button>
    <el-button type="primary"
               size="mini"
               id="copy-dateStr"
               :data-clipboard-text="dateStr"
               @click="copyText('copy-dateStr')">复制时间</el-button>
  </div>
  <el-divider></el-divider>
  <div class="mt20">
    时间戳：
    <el-input v-model="timestamp1"
              placeholder="请输入"
              class="input-box"
              size="mini"></el-input>
    <el-button type="danger"
               icon="ArrowRight"
               size="mini"
               class="t-btn"
               @click="t1">转换</el-button>
    <el-input v-model="dateStr1"
              placeholder="请输入"
              class="input-box"
              size="mini"></el-input>
  </div>
  <div class="mt20">
    <el-button type="primary"
               size="mini"
               id="copy-timestamp1"
               :data-clipboard-text="timestamp1"
               @click="copyText('copy-timestamp1')">复制时间戳</el-button>
    <el-button type="primary"
               size="mini"
               id="copy-dateStr1"
               :data-clipboard-text="dateStr1"
               @click="copyText('copy-dateStr1')">复制时间</el-button>
  </div>
  <el-divider></el-divider>
  <div class="mt20">
    时间：
    <el-input v-model="dateStr2"
              placeholder="请输入"
              class="input-box"
              size="mini"></el-input>
    <el-button type="danger"
               icon="ArrowRight"
               size="mini"
               class="t-btn"
               @click="t2">转换</el-button>
    <el-input v-model="timestamp2"
              placeholder="请输入"
              class="input-box"
              size="mini"></el-input>
  </div>
  <div class="mt20">
    <el-button type="primary"
               size="mini"
               id="copy-dateStr2"
               :data-clipboard-text="dateStr2"
               @click="copyText('copy-dateStr2')">复制时间</el-button>
    <el-button type="primary"
               size="mini"
               id="copy-timestamp2"
               :data-clipboard-text="timestamp2"
               @click="copyText('copy-timestamp2')">复制时间戳</el-button>

    </div>
    <el-divider></el-divider>
    <div class="mt20">
      时间转化：
      <el-input v-model="time"
                placeholder="请输入"
                class="input-box"
                size="mini"
                maxlength="13"
                :style="{width:'150px'}"></el-input>
      <el-select v-model="timeType"
                 size="mini"
                 :style="{width:'100px'}">
        <el-option label="毫秒"
                   value="1"></el-option>
        <el-option label="秒"
                   value="2"></el-option>
        <el-option label="分"
                   value="3"></el-option>
        <el-option label="时"
                   value="4"></el-option>
        <el-option label="天"
                   value="5"></el-option>
      </el-select>
      <el-button type="primary"
                 size="mini"
                 class="ml20"
                 @click="transformClick">转化</el-button>
    </div>
    <div class="mt20">
      <div>毫秒：{{timeObj.ms}}</div>
      <div>秒：{{timeObj.s}}</div>
      <div>分：{{timeObj.min}}</div>
      <div>时：{{timeObj.hour}}</div>
      <div>天：{{timeObj.day}}</div>
    </div>
  </div>
  <el-divider></el-divider>
  <div class="mt20">
    时间转化：
    <el-input v-model="time"
              placeholder="请输入"
              class="input-box"
              size="mini"
              maxlength="13"
              :style="{width:'150px'}"></el-input>
    <el-select v-model="timeType"
               size="mini"
               :style="{width:'100px'}">
      <el-option label="毫秒"
                 value="1"></el-option>
      <el-option label="秒"
                 value="2"></el-option>
      <el-option label="分"
                 value="3"></el-option>
      <el-option label="时"
                 value="4"></el-option>
      <el-option label="天"
                 value="5"></el-option>
    </el-select>
    <el-button type="primary"
               size="mini"
               class="ml20"
               @click="transformClick">转化</el-button>
  </div>
  <div class="mt20">
    <div>毫秒：{{timeObj.ms}}</div>
    <div>秒：{{timeObj.s}}</div>
    <div>分：{{timeObj.min}}</div>
    <div>时：{{timeObj.hour}}</div>
    <div>天：{{timeObj.day}}</div>
  </div>
 </template>

 <script>
 //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 //例如：import 《组件名称》 from '《组件路径》';

 import dayjs from "dayjs";
 import ClipboardJS from "clipboard";
 export default {
@@ -141,7 +138,7 @@ export default {
      dateStr2: "",
      time: 86400,
      timeType: "2",
      timeObj:{},
      timeObj: {},
    }
  },
  //监听属性 类似于data概念
@@ -159,7 +156,7 @@ export default {
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted () {
    this.nowTime();
    this.transformClick ();
    this.transformClick();
    let curr = dayjs();
    this.timestamp1 = curr.unix();
    this.timestamp2 = curr.unix();
@@ -265,11 +262,9 @@ export default {
      this.timeObj = timeObj;
    }
  },
  //当前页面的filter
  filters: {}
 }
 </script>
 <!-- 单页私有css -->

 <style scoped>
 .about {
  padding: 30px;
@@ -289,6 +284,4 @@ export default {
 .ml20 {
  margin-left: 20px;
 }
 </style>
 <style>
 </style>
--- a/src/views/UserAuto.vue
+++ b/src/views/UserAuto.vue
--- a/src/views/UserInfo.vue
+++ b/src/views/UserInfo.vue
@@ -1,96 +0,0 @@
 <!--  -->
 <template>
  <div class="user-info">
    <div>
      <el-radio-group v-model="radio1">
        <el-radio-button label="zh_CN">中文</el-radio-button>
        <el-radio-button label="en">英文</el-radio-button>
      </el-radio-group>
      <el-button type="primary"
                 class="ml30"
                 @click="getUserList">生成数据</el-button>
    </div>
    <el-table :data="list"
              style="width: 100%">
      <el-table-column prop="name"
                       label="姓名"
                       width="280">
      </el-table-column>
      <el-table-column prop="email"
                       label="邮箱"
                       width="280">
      </el-table-column>
      <el-table-column prop="address"
                       label="地址信息">
      </el-table-column>
      <el-table-column prop="desc"
                       label="个人简介">
      </el-table-column>
    </el-table>
  </div>
 </template>
 <script>
 import {fakerEN_US,fakerZH_CN} from '@faker-js/faker';
 import Mock from "mockjs";
 console.log("FA_CN",fakerZH_CN)
 export default {
  name: "UserInfo",
  props: {},
  components: {},
  data () {
    return {
      radio1: "zh_CN",
      list: []
    }
  },
  computed: {},
  watch: {},
  async created () { },
  async mounted () { },
  methods: {
    getUserList () {
      let list = [];
      for (let index = 0; index < 100; index++) {
        if (this.radio1 == 'zh_CN') {
          let address = `${Mock.Random.county(true).replaceAll(' ', '')}${fakerZH_CN.location.streetAddress()}`
          let item = {
            name: Mock.Random.cname(),
            email: fakerZH_CN.internet.email(),
            address: address,
 						desc:Mock.Random.cparagraph( 2, 5 )
          }
          list.push(item)
        } else {
          let address = `${fakerEN_US.location.streetAddress()}`
          let item = {
            name: Mock.Random.name(true),
            email: fakerEN_US.internet.email(),
            address: address,
 						desc:fakerEN_US.lorem.paragraph({ min: 2, max: 5 })
          }
          list.push(item)
        }

      }

      this.list = list;
    }
  },
  filters: {}
 }
 </script>
 <!-- 单页私有css -->
 <style scoped>
 .user-info {
  padding: 30px;
  background-color: #fff;
  border-radius: 4px;
  min-height: 600px;
 }
 .ml30 {
  margin-left: 30px;
 }
 </style>
 <!-- 页面css，单页应用时谨防css覆盖问题 -->
 <style>
 </style>
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -6,17 +6,21 @@
    <el-input placeholder="请输入内容"
              v-model="time"
              class="input-with-select mt10">
      <el-select v-model="select"
                 slot="prepend"
                 placeholder="请选择">
        <el-option :label="item.label"
                   :value="item.diff"
                   v-for="item of utcList"
                   :key="item.lable"></el-option>
      </el-select>
      <el-button slot="append"
                 icon="el-icon-search"
                 @click="showList">转化</el-button>
      <template v-slot:prepend>
        <el-select v-model="select"
                   :style="{width:'100px'}"
                   placeholder="请选择">
          <el-option :label="item.label"
                     :value="item.diff"
                     v-for="item of utcList"
                     :key="item.lable"></el-option>
        </el-select>
      </template>
      <template v-slot:append>
        <el-button icon="search"
                   @click="showList">转化</el-button>
      </template>

    </el-input>
    <div class="mt10">时间戳为：{{ currTime }} {{ nowStr }}</div>
    <div class="mt10">所有时区时间戳为：</div>
@@ -31,17 +35,20 @@
    <el-input placeholder="请输入内容"
              v-model="time2"
              class="input-with-select mt10">
      <el-select v-model="select2"
                 slot="prepend"
                 placeholder="请选择">
        <el-option :label="item.label"
                   :value="item.diff"
                   v-for="item of utcList"
                   :key="item.lable"></el-option>
      </el-select>
      <el-button slot="append"
                 icon="el-icon-search"
                 @click="showList2">转化</el-button>
      <template v-slot:prepend>
        <el-select v-model="select2"
                   :style="{width:'100px'}"
                   placeholder="请选择">
          <el-option :label="item.label"
                     :value="item.diff"
                     v-for="item of utcList"
                     :key="item.lable"></el-option>
        </el-select>
      </template>
      <template v-slot:append>
        <el-button icon="search"
                   @click="showList2">转化</el-button>
      </template>
    </el-input>
    <div class="mt10">时间为：{{ currTime2 }}</div>
    <div class="mt10">所有时区时间为：</div>
@@ -55,12 +62,12 @@
    <div class="mt10">时间格式化：</div>
    <div v-for="item of list"
         :key="item"
         class="mt10">{{ item|friendlyTimeFilter }}</div>
         class="mt10">{{ friendlyTimeFilter(item) }}</div>

    <div class="mt10">
      <el-button class=""
                 type="primary"
                 icon="el-icon-view"
                 icon="view"
                 size="mini"
                 @click="downloadClick">查看代码</el-button>
    </div>
@@ -91,8 +98,8 @@ export default {

      select2: 0,
      time2: "",
      timeStrList:[],
      currTime2:"",
      timeStrList: [],
      currTime2: "",
    }
  },
  //监听属性 类似于data概念
@@ -131,8 +138,8 @@ export default {
          label: item.label,
          unix: timeStr,
        })
        if(diff == 0){
            this.currTime2 = timeStr;
        if (diff == 0) {
          this.currTime2 = timeStr;
        }
      }
      this.timeStrList = list;
@@ -208,12 +215,9 @@ export default {
      this.list = list;
    },
    downloadClick () {
      window.open("/static/code.txt")
      window.open("/code.txt")
      // window.location.href = "/code.txt"
    }
  },
  //当前页面的filter
  filters: {
    },
    friendlyTimeFilter (val) {
      if (!val) {
        return "--";
@@ -243,27 +247,24 @@ export default {
      }
      return valObj.format("MMM DD")
    }
  }
  },
 }
 </script>
 <!-- 单页私有css -->
 <style scoped>
 .about {
  padding: 30px;
  background-color: #fff;
  border-radius: 4px;
  min-height: 600px;
  padding-bottom: 100px;
 }
 .mt10 {
  margin-top: 10px;
 }
 .about /deep/ .el-select .el-input {
 .about :deep() .el-select .el-input {
  width: 130px;
 }
 .input-with-select {
  width: 500px;
 }
 .input-with-select /deep/ .el-input-group__prepend {
 .input-with-select :deep() .el-input-group__prepend {
  background-color: #fff;
 }
 .time-item {
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,32 @@
 import { fileURLToPath, URL } from 'node:url'

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import VueDevTools from 'vite-plugin-vue-devtools'

 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [
    vue(),
    VueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    host: '0.0.0.0',
    port: 5173,
    strictPort: true,
    https: false,
    open: true,
    proxy: {
      '/cdn': {
        target: 'https://oa-edu-1259243469.cos.ap-chengdu.myqcloud.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/cdn/, '')
      }
    }
  }
 })
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,57 +0,0 @@
 'use strict'
 const path = require('path')

 function resolve(dir) {
  return path.join(__dirname, dir)
 }

 const name = 'YzxTool' // page title
 // If your port is set to 80,
 // use administrator privileges to execute the command line.
 // For example, Mac: sudo npm run
 const port = 9999 // dev port

 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
  /**a
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        //target: process.env.VUE_APP_BASE_API_TARGET,
        target: "/apppp",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      },
    },
  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    },
  },
 }