chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(directory): performance and style optimization

Browse Source
This commit is contained in:
Haoyu Xu
2023-02-26 13:45:49 -05:00
parent 81ee2d2170
commit 5c80834c30
9 changed files with 103 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
directory/src/routes/path/home.css
View File

@@ -24,8 +24,16 @@
background-image: repeating-linear-gradient(90deg, var(--home-item-background-linear-gradient-color) 0, var(--home-item-background-linear-gradient-color) 1px, transparent 1px, transparent 5px);
}
.home .item-group .item .item-background-filler {
border-right: 1px solid var(--home-item-background-linear-gradient-color);
position: absolute;
top: 0;
left: 0;
right: -1px;
bottom: 0;
}
.home .item-group .item .item-outline {
content: "";
display: block;
position: absolute;
opacity: 0;
@@ -94,20 +102,23 @@
font-weight: bold;
}
.home .item-group .item .item-info .item-title-container .item-title,
.home .item-group .item .item-info .item-text-wrapper {
.home .item-group .item .item-info .item-title-container .item-title {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.home .item-group .item .item-info .item-title-container .item-title {
line-height: 1.1em;
height: 1.25rem;
}
.home .item-group .item .item-info .item-title-container .item-type {
width: 1.5rem;
fill: var(--text-color)
}
.home .item-group .item .item-info .item-text {
color: var(--text-color);
font-size: 0.75rem;
font-family: "Geometos";
margin-top: 1rem;
@@ -123,4 +134,10 @@
visibility: hidden;
transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
background-image: linear-gradient(70deg, transparent 40%, currentColor 150%);
}
.home .item-group .item .item-info .item-text-wrapper {
overflow: hidden;
text-overflow: ellipsis;
color: var(--secondary-text-color);
}

116
directory/src/routes/path/home.jsx
View File

@@ -19,7 +19,7 @@ export default function Home() {
const _trackEvt = useUmami('/')
const {
setTitle,
setTabs,
tabs, setTabs,
currentTab, setCurrentTab } = useContext(HeaderContext)
const { config } = useContext(ConfigContext)
const {
@@ -28,6 +28,7 @@ export default function Home() {
alternateLang,
i18n
} = useContext(LanguageContext)
const [content, setContent] = useState([])
useEffect(() => {
setTitle('dynamic_compile')
@@ -46,70 +47,63 @@ export default function Home() {
setCurrentTab('all')
}, [])
const renderContent = () => {
const list = config?.filter((v) => currentTab === 'all' || currentTab === v.type)
const content = []
if (list) {
console.log(list)
let items = {}
list.forEach(element => {
if (items[element.date]) {
items[element.date].push(toItemEl(element))
} else {
items[element.date] = [toItemEl(element)]
}
});
items = Object.keys(items).sort().reverse().reduce((r, k) => {
r[k] = items[k]
return r
}, {})
for (const [date, group] of Object.entries(items)) {
content.push(
<section className="item-group-wrapper" key={date}>
<section className="item-group">
{group.map((v) => v)}
<section className='item-group-date'>{date}</section>
</section>
<MainBorder />
</section>
)
useEffect(() => {
const value = config.reduce((acc, cur) => {
const date = cur.date
if (acc[date]) {
acc[date].push(cur)
} else {
acc[date] = [cur]
}
}
return content
}
const toItemEl = (item) => {
return (
<Link reloadDocument to={`/${item.link}`} className="item" key={item.link}>
<section className="item-outline"/>
<section className="item-img">
<img src={`/${item.link}/assets/${item.fallback_name.replace("#", "%23")}_portrait.png`} alt={item.codename[language]} />
</section>
<section className="item-info">
<section className="item-title-container">
<section className="item-title">{item.codename[language]}</section>
<section className="item-type">
<CharIcon
type={item.type}
viewBox={
item.type === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
} />
</section>
</section>
<section className="item-text-wrapper">
<span className='item-text'>{item.codename[language.startsWith("en") ? alternateLang : textDefaultLang]}</span>
</section>
<section className="item-info-background" style={{
color: item.color
}} />
</section>
</Link>
)
}
const content = useMemo(() => renderContent(), [currentTab, config, language])
return acc
}, {})
setContent(Object.values(value).sort((a, b) => new Date(b[0].date) - new Date(a[0].date)))
}, [config])
const isShown = (type) => currentTab === 'all' || currentTab === type
return (
<section className="home">
{content}
{
content.map((v) => {
const length = v.filter((v) => isShown(v.type)).length
return (
<section className="item-group-wrapper" key={v[0].date} hidden={length === 0}>
<section className="item-group">
{v.map(item => {
return (<Link reloadDocument to={`/${item.link}`} className="item" key={item.link} hidden={!isShown(item.type)}>
<section className="item-background-filler" />
<section className="item-outline" />
<section className="item-img">
<img src={`/${item.link}/assets/${item.fallback_name.replace("#", "%23")}_portrait.png`} alt={item.codename[language]} />
</section>
<section className="item-info">
<section className="item-title-container">
<section className="item-title">{item.codename[language]}</section>
<section className="item-type">
<CharIcon
type={item.type}
viewBox={
item.type === 'operator' ? '0 0 88.969 71.469' : '0 0 94.563 67.437'
} />
</section>
</section>
<section className="item-text-wrapper">
<span className='item-text'>{item.codename[language.startsWith("en") ? alternateLang : textDefaultLang]}</span>
</section>
<section className="item-info-background" style={{
color: item.color
}} />
</section>
</Link>)
})}
<section className='item-group-date'>{v[0].date}</section>
</section>
<MainBorder />
</section>
)
})
}
</section>
)
}