feat: 首页适配移动端，新增工具：随机密码生成
This commit is contained in:
taoran
@@ -27,13 +27,13 @@ onMounted(() => {
|
||||
<template>
|
||||
<div>
|
||||
<!-- card -->
|
||||
<div class="mr-3 flex justify-between flex-wrap self-card-div" :gutter="10">
|
||||
<router-link v-for="(item, index) in toolsStore.list" :key="index" :to="item.url" class="flex flex-col mt-3 border-solid rounded border-gray w-[32.5%] p-2 bg-gray-100 hover:shadow-md">
|
||||
<div class="mr-3 flex justify-between flex-wrap self-card-div c-xs:ml-3" :gutter="10">
|
||||
<router-link v-for="(item, index) in toolsStore.list" :key="index" :to="item.url" class="flex flex-col mt-3 border-solid rounded border-gray w-[32.5%] p-2 bg-gray-100 hover:shadow-md c-xs:w-[99.5%]">
|
||||
<div class="flex items-center border-b pb-2">
|
||||
<el-image :src="item.logo" class="w-10 h-10 min-h-[2.5rem] min-w-[2.5rem] rounded-full"></el-image>
|
||||
<div class="flex flex-col ml-2 w-full">
|
||||
<div class="flex">
|
||||
<div class="font-semibold text-lg ">{{ item.title }}</div>
|
||||
<div class="font-semibold text-lg line-clamp-1">{{ item.title }}</div>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<el-text size="small">{{ item.cate }}</el-text>
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { Search } from '@element-plus/icons-vue';
|
||||
import { Search,MoreFilled } from '@element-plus/icons-vue';
|
||||
import { useToolsStore } from '@/store/modules/tools'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import 'element-plus/theme-chalk/display.css'
|
||||
|
||||
const appName = ref(import.meta.env.VITE_APP_TITLE || '工具坊')
|
||||
const appNet = ref('tools.ranblogs.com')
|
||||
const isNavDrawer = ref(false)
|
||||
//store
|
||||
const toolsStore = useToolsStore()
|
||||
//查询参数
|
||||
@@ -52,10 +54,10 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<header class="">
|
||||
<nav class="h-28 w-full leading-10 flex flex-col justify-between pt-2 pb-2">
|
||||
<nav class="h-28 w-full leading-10 flex flex-col justify-between pt-2 pb-2 c-xs:h-16 c-xs:border-b-[1px]">
|
||||
<el-row>
|
||||
<el-col :xl="4" :md="1"></el-col>
|
||||
<el-col :xl="16" :md="22">
|
||||
<el-col :lg="4" :sm="1"></el-col>
|
||||
<el-col :lg="16" :sm="22">
|
||||
<div class="flex items-center justify-between">
|
||||
<!-- left -->
|
||||
<router-link class="ml-4 flex flex-row" to="/">
|
||||
@@ -67,7 +69,7 @@ onMounted(() => {
|
||||
</router-link>
|
||||
|
||||
<!-- right -->
|
||||
<div class=" w-full md:w-auto flex hidden md:block">
|
||||
<div class=" w-full md:w-auto flex c-xs:hidden md:block">
|
||||
<ul class="flex mt-4 flex-col md:flex-row md:mt-0 justify-end items-center">
|
||||
<li class="hover:text-blue-500">
|
||||
<el-button link size="large" @click="collect">收藏本站</el-button>
|
||||
@@ -77,10 +79,54 @@ onMounted(() => {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- h5: 搜索、导航 -->
|
||||
<div class="c-lg:hidden c-sm:hidden">
|
||||
<div class="mr-3 leading-3">
|
||||
<!-- <el-icon size="25"><Search /></el-icon> -->
|
||||
<el-icon size="25" class="ml-2" style="transform:rotate(90deg)" @click="isNavDrawer == false ? isNavDrawer = true : isNavDrawer = false"><MoreFilled /></el-icon>
|
||||
</div>
|
||||
<!-- 抽屉 -->
|
||||
<el-drawer v-model="isNavDrawer" direction="rtl" class="" size="70%">
|
||||
<div>
|
||||
<!-- search -->
|
||||
<div>
|
||||
<el-input
|
||||
v-model="searchParam.title"
|
||||
placeholder="搜索工具"
|
||||
class="w-full max-w-xl h-10"
|
||||
@keyup.enter.native="search">
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="search"/>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<!-- cates -->
|
||||
<div class="mt-3 text-center">
|
||||
<ul class="flex flex-col rounded items-center">
|
||||
<li class="flex items-center w-full text-center mb-2">
|
||||
<div
|
||||
class="hover:text-blue-400 text-xl w-full hover:bg-gray-200 hover:rounded-md h-10 leading-10" :class="searchParam.cateId == 0 ? 'text-blue-400 bg-gray-200 rounded-md' : ''"
|
||||
@click="chooseCate(0)"
|
||||
>全部工具</div>
|
||||
</li>
|
||||
<li v-for="(item, index) in toolsStore.cates" :key="index" class="flex items-center mb-2 w-full">
|
||||
<!-- <el-text>{{ index != 0 ? ' ' : '' }} </el-text> -->
|
||||
<div
|
||||
class="hover:text-blue-400 text-xl w-full hover:bg-gray-200 hover:rounded-md h-10 leading-10" :class="searchParam.cateId == item.id ? 'text-blue-400 bg-gray-200 rounded-md' : ''"
|
||||
@click="chooseCate(item.id)"
|
||||
>{{ item.title }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-row class="mt-3">
|
||||
<el-col :xl="19" :md="19">
|
||||
<!-- pc/pad:搜索、导航 -->
|
||||
<el-row class="mt-3 hidden-xs-only">
|
||||
<el-col :lg="19" :sm="19">
|
||||
<!-- cates -->
|
||||
<div class="mr-3">
|
||||
<ul class="flex bg-gray-100 h-10 rounded leading-10 pl-3">
|
||||
@@ -100,7 +146,7 @@ onMounted(() => {
|
||||
</ul>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xl="5" :md="5">
|
||||
<el-col :lg="5" :sm="5">
|
||||
<!-- search -->
|
||||
<div>
|
||||
<el-input
|
||||
@@ -116,7 +162,7 @@ onMounted(() => {
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :xl="4" :md="1" class="flex"></el-col>
|
||||
<el-col :lg="4" :sm="1" class="flex"></el-col>
|
||||
</el-row>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
@@ -32,7 +32,7 @@ const info = reactive({
|
||||
|
||||
|
||||
<!-- hot tools -->
|
||||
<div class="mt-3 border-solid rounded border-gray border p-3">
|
||||
<div class="mt-3 border-solid rounded border-gray border p-3 c-xs:mr-3 c-xs:ml-3">
|
||||
<div class="text-xl text-gray-400 font-bold">热门工具</div>
|
||||
<ul class="mt-3">
|
||||
<li class="flex items-center hover:bg-gray-200 p-1 rounded" v-for="(item, index) in info.hotTools" :key="index">
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive } from 'vue'
|
||||
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
|
||||
import { copy, genRandomStrByChars } from '@/utils/string'
|
||||
import { ElMessage } from 'element-plus'
|
||||
const info = reactive({
|
||||
title: "随机密码生成",
|
||||
char: '',
|
||||
pwLen: 10,
|
||||
pwNum: 5,
|
||||
resStr: '',
|
||||
autosize: {
|
||||
minRows: 5
|
||||
},
|
||||
checkedUpper: true,
|
||||
checkedLower: true,
|
||||
checkedNum: true,
|
||||
checkedSign: false,
|
||||
charNum: '0123456789',
|
||||
charUpper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
|
||||
charLower: 'abcdefghijklmnopqrstuvwxyz',
|
||||
cahrSign: '~!@#$%^&*()_+',
|
||||
})
|
||||
|
||||
//生成密码
|
||||
const gen = () => {
|
||||
//包含字符验证
|
||||
if (info.char == '') {
|
||||
ElMessage({
|
||||
message: "包含字符不能为空",
|
||||
type: "warning",
|
||||
duration: 1500
|
||||
})
|
||||
}
|
||||
|
||||
//生成长度验证
|
||||
if (info.pwLen > 100) {
|
||||
ElMessage({
|
||||
message: "生成长度范围在1~100",
|
||||
type: "warning",
|
||||
duration: 1500
|
||||
})
|
||||
}
|
||||
|
||||
//生成数量验证
|
||||
if (info.pwNum > 100) {
|
||||
ElMessage({
|
||||
message: "生成数量范围在1~100",
|
||||
type: "warning",
|
||||
duration: 1500
|
||||
})
|
||||
}
|
||||
|
||||
//清空旧数据
|
||||
info.resStr = ''
|
||||
|
||||
//按数量生成密码
|
||||
for (let i = 1; i <= info.pwNum; i++) {
|
||||
let ext = '\n'
|
||||
if (i == info.pwNum) {
|
||||
ext = ''
|
||||
}
|
||||
info.resStr += genRandomStrByChars(info.char, info.pwLen) + ext
|
||||
}
|
||||
}
|
||||
|
||||
const changeCheckBox = (val: any, type: number) => {
|
||||
switch(type) {
|
||||
case 0:
|
||||
//设置数字字符
|
||||
setChar(val, /\d+/g, info.charNum)
|
||||
break;
|
||||
case 1:
|
||||
//设置小写字母字符
|
||||
setChar(val, /[a-z]/g, info.charLower)
|
||||
break;
|
||||
case 2:
|
||||
//设置大写字母字符
|
||||
setChar(val, /[A-Z]/g, info.charUpper)
|
||||
break;
|
||||
case 3:
|
||||
//设置特殊符号字符
|
||||
setChar(val, /[~!@#$%^&*()_+]/g, info.cahrSign)
|
||||
break;
|
||||
default:
|
||||
info.char = ''
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
//设置字符
|
||||
const setChar = (val: boolean, reg: RegExp, charType: string) => {
|
||||
if (val == true) {
|
||||
//添加
|
||||
info.char += charType
|
||||
} else {
|
||||
//清除
|
||||
info.char = info.char.replace(reg, "")
|
||||
}
|
||||
}
|
||||
|
||||
//copy
|
||||
const copyRes = async (resStr: string) => {
|
||||
copy(resStr)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
//设置初始字符
|
||||
changeCheckBox(info.checkedNum, 0)
|
||||
changeCheckBox(info.checkedLower, 1)
|
||||
changeCheckBox(info.checkedUpper, 2)
|
||||
changeCheckBox(info.checkedSign, 3)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
|
||||
<DetailHeader :title="info.title"></DetailHeader>
|
||||
|
||||
<div>
|
||||
<el-text>密码组合</el-text>
|
||||
<div>
|
||||
<el-checkbox v-model="info.checkedNum" label="数字(0-9)" @change="(val: any) => (changeCheckBox(val, 0))"/>
|
||||
<el-checkbox v-model="info.checkedLower" label="小写字母(a-z)" @change="(val: any) => (changeCheckBox(val, 1))"/>
|
||||
<el-checkbox v-model="info.checkedUpper" label="大写字母(A-Z)" @change="(val: any) => (changeCheckBox(val, 2))"/>
|
||||
<el-checkbox v-model="info.checkedSign" label="其他符号(~!@#$%^&*()-+_=,.)" @change="(val: any) => (changeCheckBox(val, 3))"/>
|
||||
</div>
|
||||
<div>
|
||||
<el-input class="" v-model="info.char">
|
||||
<template #prepend>包含字符:</template>
|
||||
</el-input>
|
||||
<el-input v-model="info.pwLen" placeholder="长度范围1~100" class="mt-3" max="100" type="number">
|
||||
<template #prepend>生成长度:</template>
|
||||
</el-input>
|
||||
<el-input v-model="info.pwNum" placeholder="长度范围1~100" class="mt-3" max="100" type="number">
|
||||
<template #prepend>生成数量:</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="mt-3 mb-3">
|
||||
<el-button type="primary" @click="gen">生成密码</el-button>
|
||||
<el-button type="primary" @click="copyRes(info.resStr)">复制全部</el-button>
|
||||
</div>
|
||||
<!-- res -->
|
||||
<div>
|
||||
<el-input type="textarea" :autosize="info.autosize" v-model="info.resStr"></el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user