leiyun
/
yzx_tool
1
0
Forkuj 0
Kod Zgłoszenia 0 Oczekujące zmiany 0 Wydania 0 Wiki Aktywność
Przeglądaj źródła

升级为Vue3 + Vite5.2

master
leiyun 1 rok temu
rodzic
44a160ef73
commit
e59f8ddbba
43 zmienionych plików z 1092 dodań i 11620 usunięć
Zunifikowany widok
Opcje porównania
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania
  1. +14
    -0
      .eslintrc.cjs
  2. +18
    -11
      .gitignore
  3. +8
    -0
      .prettierrc.json
  4. +26
    -10
      README.md
  5. +0
    -5
      babel.config.js
  6. +16
    -0
      index.html
  7. +8
    -0
      jsconfig.json
  8. +0
    -10727
      package-lock.json
  9. +27
    -26
      package.json
  10. +0
    -0
      public/code.txt
  11. BIN
      public/favicon.ico
  12. +0
    -0
      public/img/cszxy.jpg
  13. +0
    -0
      public/img/logo-blue.png
  14. +0
    -17
      public/index.html
  15. +130
    -38
      src/App.vue
  16. +106
    -0
      src/assets/base.css
  17. BIN
      src/assets/logo.png
  18. +1
    -0
      src/assets/logo.svg
  19. +23
    -0
      src/assets/main.css
  20. +44
    -0
      src/components/HelloWorld.vue
  21. +0
    -138
      src/components/Layout.vue
  22. +88
    -0
      src/components/TheWelcome.vue
  23. +86
    -0
      src/components/WelcomeItem.vue
  24. +7
    -0
      src/components/icons/IconCommunity.vue
  25. +7
    -0
      src/components/icons/IconDocumentation.vue
  26. +7
    -0
      src/components/icons/IconEcosystem.vue
  27. +7
    -0
      src/components/icons/IconSupport.vue
  28. +19
    -0
      src/components/icons/IconTooling.vue
  29. +17
    -13
      src/main.js
  30. +24
    -92
      src/router/index.js
  31. +0
    -15
      src/store/index.js
  32. +12
    -0
      src/stores/counter.js
  33. +4
    -3
      src/utils/excelExport.js
  34. +15
    -0
      src/views/AboutView.vue
  35. +3
    -4
      src/views/Regular.vue
  36. +13
    -0
      src/views/RemoveBG.vue
  37. +3
    -3
      src/views/Rgb.vue
  38. +118
    -125
      src/views/Timestamp.vue
  39. +168
    -200
      src/views/UserAuto.vue
  40. +0
    -96
      src/views/UserInfo.vue
  41. +41
    -40
      src/views/Utc.vue
  42. +32
    -0
      vite.config.js
  43. +0
    -57
      vue.config.js

+ 14
- 0
.eslintrc.cjs Wyświetl plik

@@ -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'
}
}

+ 18
- 11
.gitignore Wyświetl plik

@@ -1,23 +1,30 @@
.DS_Store
node_modules
/dist

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

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

node_modules
.DS_Store
dist
dist-ssr
coverage
*.local

/cypress/videos/
/cypress/screenshots/


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

*.tsbuildinfo

+ 8
- 0
.prettierrc.json Wyświetl plik

@@ -0,0 +1,8 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}

+ 26
- 10
README.md Wyświetl plik

@@ -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 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 npm run build
``` ```


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

```sh
npm run lint
```

+ 0
- 5
babel.config.js Wyświetl plik

@@ -1,5 +0,0 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

+ 16
- 0
index.html Wyświetl plik

@@ -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>

+ 8
- 0
jsconfig.json Wyświetl plik

@@ -0,0 +1,8 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
},
"exclude": ["node_modules", "dist"]
}

+ 0
- 10727
package-lock.json
Plik diff jest za duży
Wyświetl plik


+ 27
- 26
package.json Wyświetl plik

@@ -1,36 +1,37 @@
{ {
"name": "yzx_tool",
"version": "0.1.0",
"name": "v2test2",
"version": "0.0.0",
"private": true, "private": true,
"type": "module",
"scripts": { "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": { "dependencies": {
"clipboard": "^2.0.11", "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", "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": { "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"
}
} }

public/static/code.txt → public/code.txt Wyświetl plik


BIN
public/favicon.ico Wyświetl plik

Przed Po

src/assets/cszxy.jpg → public/img/cszxy.jpg Wyświetl plik


src/assets/logo-blue.png → public/img/logo-blue.png Wyświetl plik


+ 0
- 17
public/index.html Wyświetl plik

@@ -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>

+ 130
- 38
src/App.vue Wyświetl plik

@@ -1,48 +1,140 @@


<template> <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> </div>

</template> </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> </style>

+ 106
- 0
src/assets/base.css Wyświetl plik

@@ -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;
}

BIN
src/assets/logo.png Wyświetl plik

Przed Po
Szerokość: 200  |  Wysokość: 200  |  Rozmiar: 6.7 KiB

+ 1
- 0
src/assets/logo.svg Wyświetl plik

@@ -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>

+ 23
- 0
src/assets/main.css Wyświetl plik

@@ -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);
}
}

+ 44
- 0
src/components/HelloWorld.vue Wyświetl plik

@@ -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>

+ 0
- 138
src/components/Layout.vue Wyświetl plik

@@ -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>

+ 88
- 0
src/components/TheWelcome.vue Wyświetl plik

@@ -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>

+ 86
- 0
src/components/WelcomeItem.vue Wyświetl plik

@@ -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>

+ 7
- 0
src/components/icons/IconCommunity.vue Wyświetl plik

@@ -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>

+ 7
- 0
src/components/icons/IconDocumentation.vue Wyświetl plik

@@ -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>

+ 7
- 0
src/components/icons/IconEcosystem.vue Wyświetl plik

@@ -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>

+ 7
- 0
src/components/icons/IconSupport.vue Wyświetl plik

@@ -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>

+ 19
- 0
src/components/icons/IconTooling.vue Wyświetl plik

@@ -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>

+ 17
- 13
src/main.js Wyświetl plik

@@ -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')

+ 24
- 92
src/router/index.js Wyświetl plik

@@ -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 export default router

+ 0
- 15
src/store/index.js Wyświetl plik

@@ -1,15 +0,0 @@
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})

+ 12
- 0
src/stores/counter.js Wyświetl plik

@@ -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 }
})

+ 4
- 3
src/utils/excelExport.js Wyświetl plik

@@ -2,8 +2,9 @@
* Created by admin on 2018/02/08. * Created by admin on 2018/02/08.
* author maw * author maw
*/ */
import XLSX from "xlsx";
//import xlsxStyle from 'xlsx-style'
// import XLSX from "xlsx";
import * as XLSX from "xlsx";



/* eslint-disable */ /* eslint-disable */
export default function (_headers, _data, _file) { export default function (_headers, _data, _file) {
@@ -36,7 +37,7 @@ export default function (_headers, _data, _file) {
continue; continue;
} }
if (!isNaN(parseInt(temp[j].toString()))) { 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 { } else {
objectMaxLength[index] = objectMaxLength[index] >= temp[j].length * 3 ? objectMaxLength[index] : temp[j].length * 3; objectMaxLength[index] = objectMaxLength[index] >= temp[j].length * 3 ? objectMaxLength[index] : temp[j].length * 3;
} }


+ 15
- 0
src/views/AboutView.vue Wyświetl plik

@@ -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>

+ 3
- 4
src/views/Regular.vue Wyświetl plik

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


+ 13
- 0
src/views/RemoveBG.vue Wyświetl plik

@@ -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>

+ 3
- 3
src/views/Rgb.vue Wyświetl plik

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


.color-block{
.color-block {
display: inline-block; display: inline-block;
width: 80px; width: 80px;
height: 40px; height: 40px;


+ 118
- 125
src/views/Timestamp.vue Wyświetl plik

@@ -1,126 +1,123 @@
<!-- -->


<template> <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> </div>
</template> </template>

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

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

+ 168
- 200
src/views/UserAuto.vue
Plik diff jest za duży
Wyświetl plik


+ 0
- 96
src/views/UserInfo.vue Wyświetl plik

@@ -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>

src/views/About.vue → src/views/Utc.vue Wyświetl plik

@@ -6,17 +6,21 @@
<el-input placeholder="请输入内容" <el-input placeholder="请输入内容"
v-model="time" v-model="time"
class="input-with-select mt10"> 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> </el-input>
<div class="mt10">时间戳为：{{ currTime }} {{ nowStr }}</div> <div class="mt10">时间戳为：{{ currTime }} {{ nowStr }}</div>
<div class="mt10">所有时区时间戳为：</div> <div class="mt10">所有时区时间戳为：</div>
@@ -31,17 +35,20 @@
<el-input placeholder="请输入内容" <el-input placeholder="请输入内容"
v-model="time2" v-model="time2"
class="input-with-select mt10"> 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> </el-input>
<div class="mt10">时间为：{{ currTime2 }}</div> <div class="mt10">时间为：{{ currTime2 }}</div>
<div class="mt10">所有时区时间为：</div> <div class="mt10">所有时区时间为：</div>
@@ -55,12 +62,12 @@
<div class="mt10">时间格式化：</div> <div class="mt10">时间格式化：</div>
<div v-for="item of list" <div v-for="item of list"
:key="item" :key="item"
class="mt10">{{ item|friendlyTimeFilter }}</div>
class="mt10">{{ friendlyTimeFilter(item) }}</div>


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


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

+ 32
- 0
vite.config.js Wyświetl plik

@@ -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/, '')
}
}
}
})

+ 0
- 57
vue.config.js Wyświetl plik

@@ -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')
}
},
},
}

Napisz Podgląd
Ładowanie…
Anuluj
Zapisz