Skip to content

Commit

Permalink
'autouno'
Browse files Browse the repository at this point in the history
  • Loading branch information
@LarryZhu-dev
LarryZhu-dev committed Nov 9, 2024
1 parent 2709be0 commit f2949de
Show file tree
Hide file tree
Showing 3 changed files with 357 additions and 0 deletions.
119 changes: 119 additions & 0 deletions autouno/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Autouno Online</title>
<link rel="icon" href="./logo.svg" />
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4625537_gaze6osuyhw.css">
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

input {
outline: none;
box-shadow: none;
border: none;
}

#logo {
width: 100px;
height: 100px;
margin-bottom: 10px;
}

#app {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1f1f1f;
}

.body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
color: #fff;
}

.title {
font-size: 24px;
}

.subtitle {
font-size: 14px;
color: #ffffff88;
}

#searchMarch {
padding: 10px;
width: 200px;
border-radius: 6px;
outline: none;
background-color: #313131;
border: none;
box-shadow: none;
color: #fff;
font-size: 26px;
}

.class {
display: flex;
align-items: center;
font-size: 26px;
}

.result {
display: flex;
gap: 20px;
}

.subtitle {
display: flex;
align-items: center;
gap: 10px;
}

.subtitle a {
font-size: 18px;
color: #fff;
text-decoration: none;
}
</style>
</head>

<body>
<div id="app">
<div class="body">
<img id="logo" src="./logo.svg" alt="" class="widh100px hei100px marbot10px">
<span class="title">autoUno</span>
<span class="subtitle">直觉的 UnoCss 预设
<a href="https://github.com/LarryZhu-dev/autouno" target="_blank" class="iconfont icon-github"></a>
</span>
<div class="class">
<span>class="</span>
<input type="text" id="searchMarch" autocomplete="off"
class="colo#fff padd10 wid200px brrr6px outl:n bgc#313131 bxs:n" placeholder="输入以尝试">
<span>"</span>
</div>
<div class="result">
<div class="padd10px minhei100px" id="property">属性：null</div>
<div class="padd10px minhei100px" id="unit">单位：null</div>
</div>
</div>
</div>
</body>

</html>
</script>
<script src="./src/index.js">
</script>

</script>
34 changes: 34 additions & 0 deletions autouno/logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
204 changes: 204 additions & 0 deletions autouno/src/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
const propertyWithUnit = [
'animation-delay$ms',
'animation-duration$ms',
'border-radius$px',
'border-bottom-width$px',
'border-left-width$px',
'border-right-width$px',
'border-top-width$px',
'border-width$px',
'bottom$px',
'box-shadow$px',
'clip$px',
'column-gap$px',
'column-rule-width$px',
'column-span$px',
'column-width$px',
'columns$px',
'flex-grow$px',
'height$px',
'left$px',
'letter-spacing$px',
'line-height$px',
'margin$px',
'margin-bottom$px',
'margin-left$px',
'margin-right$px',
'margin-top$px',
'max-height$px',
'max-width$px',
'min-height$px',
'min-width$px',
'padding$px',
'padding-bottom$px',
'padding-left$px',
'padding-right$px',
'padding-top$px',
'right$px',
'text-indent$px',
'top$px',
'transform$px',
'transform-origin$px',
'transition-delay$ms',
'transition-duration$ms',
'transition-timing-function$px',
'width$px',
'word-spacing$px',
'z-index$px',
'color',
'background-color',
'border-color',
'font-size$px'
]

const propertyCommon = [
'display: flex',
'display: block',
'display: inline',
'display: inline-block',
'display: grid',
'display: none',
'position: relative',
'position: absolute',
'position: fixed',
'position: sticky',
'float: left',
'float: right',
'clear: both',
'outline: none',
'overflow: hidden',
'overflow: scroll',
'overflow: auto',
'visibility: visible',
'visibility: hidden',
'text-align: left',
'text-align: center',
'text-align: right',
'font-weight: bold',
'font-style: italic',
'line-height: normal',
'letter-spacing: normal',
'text-transform: uppercase',
'background-position: center',
'background-repeat: no-repeat',
'border: solid',
'box-sizing: border-box',
'cursor: pointer',
'cursor: not-allowed',
'cursor: move',
'text-decoration: none',
'text-decoration: underline',
'word-wrap: break-word',
'white-space: nowrap',
'visibility: visible',
'transform-origin: center',
'justify-content: center',
'justify-content: space-between',
'align-items: center',
'align-self: flex-start',
'grid-template-rows: auto',
'list-style-type: none',
'list-style-position: inside',
'resize: both',
'user-select: none',
'pointer-events: none',
'transform-style: preserve-3d',
'backface-visibility: hidden',
'scroll-behavior: smooth',
'text-align-last: center',
'border-collapse: collapse',
'table-layout: fixed',
'word-break: break-all',
'box-decoration-break: clone',
'vertical-align: middle',
'white-space: normal',
'writing-mode: vertical-rl',
'pointer-events: auto'
]
const randomKeyWord = ['padd10px', 'marg10px', 'borde10px', 'd:fl', 'd:in', 'd:gr', 'hei100vh', 'wid100vh', 'left10%']
function findBestMatch(input, customproperty = []) {
// 将输入字符串转换为字符数组
const inputChars = input.split('')

let bestMatch = null
let maxMatches = 0

// 遍历所有目标字符串
for (let keywordOrigin of customproperty.concat(propertyWithUnit.concat(propertyCommon))) {
const keyword = keywordOrigin.split('$')[0]
// 用来记录目标字符串的字符序列是否匹配
let matchCount = 0
let inputIndex = 0
// 遍历目标字符串
for (let i = 0; i < keyword.length; i++) {
// 如果第一个字符就不匹配，直接跳过
if (i === 0 && keyword[i] !== inputChars[0]) {
break
}
if (inputIndex < inputChars.length && keyword[i] === inputChars[inputIndex] && ((input.includes(':') && keyword.includes(':')) || !input.includes(':'))) {
matchCount++
inputIndex++
}
}
// 如果找到的匹配字符数大于等于 2，且比当前最大匹配数多
if (matchCount >= 2 && matchCount > maxMatches) {
maxMatches = matchCount
bestMatch = keywordOrigin
}
}
let unit = ''
// 用正则匹配单位，最后一个数字的后面的字符
const unitMatch = input.match(/(\d+)([a-zA-Z%]+)/)
unit = unitMatch && unitMatch[2]
if (!unit && bestMatch && bestMatch.split('$')[1]) {
unit = bestMatch.split('$')[1]
}
return [bestMatch && bestMatch.split('$')[0], unit]
}
let interval = null
let timeout = null
let timeout1 = null
const searchMarch = document.getElementById('searchMarch')
autoType()
const propertyEl = document.getElementById('property')
const unitEl = document.getElementById('unit')
const result = document.querySelector('.result')
searchMarch.addEventListener('input', function (e) {
const value = e.target.value
const [property, unit] = findBestMatch(value)
propertyEl.innerText = `属性: ${property}`
unitEl.innerText = `单位: ${unit}`
})

const set = new Set()
searchMarch.addEventListener('blur', async function (e) {
autoType()
})
searchMarch.addEventListener('focus', function (e) {
clearInterval(interval)
clearTimeout(timeout)
clearTimeout(timeout1)
})
function autoType() {
timeout1 = setTimeout(() => {
searchMarch.value = ''
propertyEl.innerText = `属性: null`
unitEl.innerText = `单位: null`
}, 1000)
timeout = setTimeout(() => {
let randomKeyWordNow = randomKeyWord[Math.floor(Math.random() * randomKeyWord.length)]
let index = 0
interval = setInterval(() => {
if (index === randomKeyWordNow.length) {
clearInterval(interval)
autoType()
return
}
searchMarch.value += randomKeyWordNow[index]
const [property, unit] = findBestMatch(searchMarch.value)
propertyEl.innerText = `属性: ${property}`
unitEl.innerText = `单位: ${unit}`
index++
}, randomKeyWordNow.length * 50)
}, 3000)
}

0 comments on commit f2949de

Please sign in to comment.