Merge pull request #32 from nbtca/feature-adjust-join-layout

Feat: update layout
This commit is contained in:
clas 2024-09-25 08:38:55 +08:00 committed by GitHub
commit 3e4948188a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 719 additions and 164 deletions

View file

@ -0,0 +1,583 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="444" height="444" viewBox="0 0 444 444" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="444" height="444" fill="#ffffff"/>
<defs>
<rect id="p" width="12" height="12" />
</defs>
<g>
<use x="24" y="24" xlink:href="#p" fill="#000000" />
<use x="36" y="24" xlink:href="#p" fill="#000000" />
<use x="48" y="24" xlink:href="#p" fill="#000000" />
<use x="60" y="24" xlink:href="#p" fill="#000000" />
<use x="72" y="24" xlink:href="#p" fill="#000000" />
<use x="84" y="24" xlink:href="#p" fill="#000000" />
<use x="96" y="24" xlink:href="#p" fill="#000000" />
<use x="120" y="24" xlink:href="#p" fill="#000000" />
<use x="168" y="24" xlink:href="#p" fill="#000000" />
<use x="216" y="24" xlink:href="#p" fill="#000000" />
<use x="288" y="24" xlink:href="#p" fill="#000000" />
<use x="300" y="24" xlink:href="#p" fill="#000000" />
<use x="312" y="24" xlink:href="#p" fill="#000000" />
<use x="336" y="24" xlink:href="#p" fill="#000000" />
<use x="348" y="24" xlink:href="#p" fill="#000000" />
<use x="360" y="24" xlink:href="#p" fill="#000000" />
<use x="372" y="24" xlink:href="#p" fill="#000000" />
<use x="384" y="24" xlink:href="#p" fill="#000000" />
<use x="396" y="24" xlink:href="#p" fill="#000000" />
<use x="408" y="24" xlink:href="#p" fill="#000000" />
<use x="24" y="36" xlink:href="#p" fill="#000000" />
<use x="96" y="36" xlink:href="#p" fill="#000000" />
<use x="168" y="36" xlink:href="#p" fill="#000000" />
<use x="180" y="36" xlink:href="#p" fill="#000000" />
<use x="192" y="36" xlink:href="#p" fill="#000000" />
<use x="204" y="36" xlink:href="#p" fill="#000000" />
<use x="216" y="36" xlink:href="#p" fill="#000000" />
<use x="228" y="36" xlink:href="#p" fill="#000000" />
<use x="240" y="36" xlink:href="#p" fill="#000000" />
<use x="252" y="36" xlink:href="#p" fill="#000000" />
<use x="300" y="36" xlink:href="#p" fill="#000000" />
<use x="336" y="36" xlink:href="#p" fill="#000000" />
<use x="408" y="36" xlink:href="#p" fill="#000000" />
<use x="24" y="48" xlink:href="#p" fill="#000000" />
<use x="48" y="48" xlink:href="#p" fill="#000000" />
<use x="60" y="48" xlink:href="#p" fill="#000000" />
<use x="72" y="48" xlink:href="#p" fill="#000000" />
<use x="96" y="48" xlink:href="#p" fill="#000000" />
<use x="132" y="48" xlink:href="#p" fill="#000000" />
<use x="144" y="48" xlink:href="#p" fill="#000000" />
<use x="168" y="48" xlink:href="#p" fill="#000000" />
<use x="180" y="48" xlink:href="#p" fill="#000000" />
<use x="216" y="48" xlink:href="#p" fill="#000000" />
<use x="300" y="48" xlink:href="#p" fill="#000000" />
<use x="312" y="48" xlink:href="#p" fill="#000000" />
<use x="336" y="48" xlink:href="#p" fill="#000000" />
<use x="360" y="48" xlink:href="#p" fill="#000000" />
<use x="372" y="48" xlink:href="#p" fill="#000000" />
<use x="384" y="48" xlink:href="#p" fill="#000000" />
<use x="408" y="48" xlink:href="#p" fill="#000000" />
<use x="24" y="60" xlink:href="#p" fill="#000000" />
<use x="48" y="60" xlink:href="#p" fill="#000000" />
<use x="60" y="60" xlink:href="#p" fill="#000000" />
<use x="72" y="60" xlink:href="#p" fill="#000000" />
<use x="96" y="60" xlink:href="#p" fill="#000000" />
<use x="120" y="60" xlink:href="#p" fill="#000000" />
<use x="156" y="60" xlink:href="#p" fill="#000000" />
<use x="168" y="60" xlink:href="#p" fill="#000000" />
<use x="216" y="60" xlink:href="#p" fill="#000000" />
<use x="228" y="60" xlink:href="#p" fill="#000000" />
<use x="240" y="60" xlink:href="#p" fill="#000000" />
<use x="288" y="60" xlink:href="#p" fill="#000000" />
<use x="312" y="60" xlink:href="#p" fill="#000000" />
<use x="336" y="60" xlink:href="#p" fill="#000000" />
<use x="360" y="60" xlink:href="#p" fill="#000000" />
<use x="372" y="60" xlink:href="#p" fill="#000000" />
<use x="384" y="60" xlink:href="#p" fill="#000000" />
<use x="408" y="60" xlink:href="#p" fill="#000000" />
<use x="24" y="72" xlink:href="#p" fill="#000000" />
<use x="48" y="72" xlink:href="#p" fill="#000000" />
<use x="60" y="72" xlink:href="#p" fill="#000000" />
<use x="72" y="72" xlink:href="#p" fill="#000000" />
<use x="96" y="72" xlink:href="#p" fill="#000000" />
<use x="132" y="72" xlink:href="#p" fill="#000000" />
<use x="156" y="72" xlink:href="#p" fill="#000000" />
<use x="204" y="72" xlink:href="#p" fill="#000000" />
<use x="240" y="72" xlink:href="#p" fill="#000000" />
<use x="252" y="72" xlink:href="#p" fill="#000000" />
<use x="288" y="72" xlink:href="#p" fill="#000000" />
<use x="312" y="72" xlink:href="#p" fill="#000000" />
<use x="336" y="72" xlink:href="#p" fill="#000000" />
<use x="360" y="72" xlink:href="#p" fill="#000000" />
<use x="372" y="72" xlink:href="#p" fill="#000000" />
<use x="384" y="72" xlink:href="#p" fill="#000000" />
<use x="408" y="72" xlink:href="#p" fill="#000000" />
<use x="24" y="84" xlink:href="#p" fill="#000000" />
<use x="96" y="84" xlink:href="#p" fill="#000000" />
<use x="132" y="84" xlink:href="#p" fill="#000000" />
<use x="144" y="84" xlink:href="#p" fill="#000000" />
<use x="180" y="84" xlink:href="#p" fill="#000000" />
<use x="192" y="84" xlink:href="#p" fill="#000000" />
<use x="204" y="84" xlink:href="#p" fill="#000000" />
<use x="228" y="84" xlink:href="#p" fill="#000000" />
<use x="252" y="84" xlink:href="#p" fill="#000000" />
<use x="276" y="84" xlink:href="#p" fill="#000000" />
<use x="288" y="84" xlink:href="#p" fill="#000000" />
<use x="300" y="84" xlink:href="#p" fill="#000000" />
<use x="312" y="84" xlink:href="#p" fill="#000000" />
<use x="336" y="84" xlink:href="#p" fill="#000000" />
<use x="408" y="84" xlink:href="#p" fill="#000000" />
<use x="24" y="96" xlink:href="#p" fill="#000000" />
<use x="36" y="96" xlink:href="#p" fill="#000000" />
<use x="48" y="96" xlink:href="#p" fill="#000000" />
<use x="60" y="96" xlink:href="#p" fill="#000000" />
<use x="72" y="96" xlink:href="#p" fill="#000000" />
<use x="84" y="96" xlink:href="#p" fill="#000000" />
<use x="96" y="96" xlink:href="#p" fill="#000000" />
<use x="120" y="96" xlink:href="#p" fill="#000000" />
<use x="144" y="96" xlink:href="#p" fill="#000000" />
<use x="168" y="96" xlink:href="#p" fill="#000000" />
<use x="192" y="96" xlink:href="#p" fill="#000000" />
<use x="216" y="96" xlink:href="#p" fill="#000000" />
<use x="240" y="96" xlink:href="#p" fill="#000000" />
<use x="264" y="96" xlink:href="#p" fill="#000000" />
<use x="288" y="96" xlink:href="#p" fill="#000000" />
<use x="312" y="96" xlink:href="#p" fill="#000000" />
<use x="336" y="96" xlink:href="#p" fill="#000000" />
<use x="348" y="96" xlink:href="#p" fill="#000000" />
<use x="360" y="96" xlink:href="#p" fill="#000000" />
<use x="372" y="96" xlink:href="#p" fill="#000000" />
<use x="384" y="96" xlink:href="#p" fill="#000000" />
<use x="396" y="96" xlink:href="#p" fill="#000000" />
<use x="408" y="96" xlink:href="#p" fill="#000000" />
<use x="132" y="108" xlink:href="#p" fill="#000000" />
<use x="144" y="108" xlink:href="#p" fill="#000000" />
<use x="156" y="108" xlink:href="#p" fill="#000000" />
<use x="168" y="108" xlink:href="#p" fill="#000000" />
<use x="192" y="108" xlink:href="#p" fill="#000000" />
<use x="204" y="108" xlink:href="#p" fill="#000000" />
<use x="216" y="108" xlink:href="#p" fill="#000000" />
<use x="228" y="108" xlink:href="#p" fill="#000000" />
<use x="252" y="108" xlink:href="#p" fill="#000000" />
<use x="276" y="108" xlink:href="#p" fill="#000000" />
<use x="288" y="108" xlink:href="#p" fill="#000000" />
<use x="300" y="108" xlink:href="#p" fill="#000000" />
<use x="48" y="120" xlink:href="#p" fill="#000000" />
<use x="72" y="120" xlink:href="#p" fill="#000000" />
<use x="84" y="120" xlink:href="#p" fill="#000000" />
<use x="96" y="120" xlink:href="#p" fill="#000000" />
<use x="120" y="120" xlink:href="#p" fill="#000000" />
<use x="180" y="120" xlink:href="#p" fill="#000000" />
<use x="192" y="120" xlink:href="#p" fill="#000000" />
<use x="216" y="120" xlink:href="#p" fill="#000000" />
<use x="252" y="120" xlink:href="#p" fill="#000000" />
<use x="264" y="120" xlink:href="#p" fill="#000000" />
<use x="276" y="120" xlink:href="#p" fill="#000000" />
<use x="288" y="120" xlink:href="#p" fill="#000000" />
<use x="324" y="120" xlink:href="#p" fill="#000000" />
<use x="372" y="120" xlink:href="#p" fill="#000000" />
<use x="408" y="120" xlink:href="#p" fill="#000000" />
<use x="24" y="132" xlink:href="#p" fill="#000000" />
<use x="72" y="132" xlink:href="#p" fill="#000000" />
<use x="108" y="132" xlink:href="#p" fill="#000000" />
<use x="132" y="132" xlink:href="#p" fill="#000000" />
<use x="144" y="132" xlink:href="#p" fill="#000000" />
<use x="156" y="132" xlink:href="#p" fill="#000000" />
<use x="168" y="132" xlink:href="#p" fill="#000000" />
<use x="192" y="132" xlink:href="#p" fill="#000000" />
<use x="204" y="132" xlink:href="#p" fill="#000000" />
<use x="228" y="132" xlink:href="#p" fill="#000000" />
<use x="240" y="132" xlink:href="#p" fill="#000000" />
<use x="252" y="132" xlink:href="#p" fill="#000000" />
<use x="312" y="132" xlink:href="#p" fill="#000000" />
<use x="336" y="132" xlink:href="#p" fill="#000000" />
<use x="384" y="132" xlink:href="#p" fill="#000000" />
<use x="396" y="132" xlink:href="#p" fill="#000000" />
<use x="408" y="132" xlink:href="#p" fill="#000000" />
<use x="24" y="144" xlink:href="#p" fill="#000000" />
<use x="36" y="144" xlink:href="#p" fill="#000000" />
<use x="48" y="144" xlink:href="#p" fill="#000000" />
<use x="72" y="144" xlink:href="#p" fill="#000000" />
<use x="84" y="144" xlink:href="#p" fill="#000000" />
<use x="96" y="144" xlink:href="#p" fill="#000000" />
<use x="108" y="144" xlink:href="#p" fill="#000000" />
<use x="120" y="144" xlink:href="#p" fill="#000000" />
<use x="132" y="144" xlink:href="#p" fill="#000000" />
<use x="144" y="144" xlink:href="#p" fill="#000000" />
<use x="156" y="144" xlink:href="#p" fill="#000000" />
<use x="192" y="144" xlink:href="#p" fill="#000000" />
<use x="204" y="144" xlink:href="#p" fill="#000000" />
<use x="216" y="144" xlink:href="#p" fill="#000000" />
<use x="240" y="144" xlink:href="#p" fill="#000000" />
<use x="276" y="144" xlink:href="#p" fill="#000000" />
<use x="312" y="144" xlink:href="#p" fill="#000000" />
<use x="336" y="144" xlink:href="#p" fill="#000000" />
<use x="360" y="144" xlink:href="#p" fill="#000000" />
<use x="372" y="144" xlink:href="#p" fill="#000000" />
<use x="396" y="144" xlink:href="#p" fill="#000000" />
<use x="408" y="144" xlink:href="#p" fill="#000000" />
<use x="24" y="156" xlink:href="#p" fill="#000000" />
<use x="72" y="156" xlink:href="#p" fill="#000000" />
<use x="108" y="156" xlink:href="#p" fill="#000000" />
<use x="120" y="156" xlink:href="#p" fill="#000000" />
<use x="132" y="156" xlink:href="#p" fill="#000000" />
<use x="156" y="156" xlink:href="#p" fill="#000000" />
<use x="168" y="156" xlink:href="#p" fill="#000000" />
<use x="204" y="156" xlink:href="#p" fill="#000000" />
<use x="216" y="156" xlink:href="#p" fill="#000000" />
<use x="228" y="156" xlink:href="#p" fill="#000000" />
<use x="240" y="156" xlink:href="#p" fill="#000000" />
<use x="252" y="156" xlink:href="#p" fill="#000000" />
<use x="312" y="156" xlink:href="#p" fill="#000000" />
<use x="24" y="168" xlink:href="#p" fill="#000000" />
<use x="36" y="168" xlink:href="#p" fill="#000000" />
<use x="60" y="168" xlink:href="#p" fill="#000000" />
<use x="72" y="168" xlink:href="#p" fill="#000000" />
<use x="96" y="168" xlink:href="#p" fill="#000000" />
<use x="108" y="168" xlink:href="#p" fill="#000000" />
<use x="120" y="168" xlink:href="#p" fill="#000000" />
<use x="168" y="168" xlink:href="#p" fill="#000000" />
<use x="180" y="168" xlink:href="#p" fill="#000000" />
<use x="204" y="168" xlink:href="#p" fill="#000000" />
<use x="228" y="168" xlink:href="#p" fill="#000000" />
<use x="240" y="168" xlink:href="#p" fill="#000000" />
<use x="264" y="168" xlink:href="#p" fill="#000000" />
<use x="312" y="168" xlink:href="#p" fill="#000000" />
<use x="324" y="168" xlink:href="#p" fill="#000000" />
<use x="336" y="168" xlink:href="#p" fill="#000000" />
<use x="348" y="168" xlink:href="#p" fill="#000000" />
<use x="360" y="168" xlink:href="#p" fill="#000000" />
<use x="372" y="168" xlink:href="#p" fill="#000000" />
<use x="408" y="168" xlink:href="#p" fill="#000000" />
<use x="36" y="180" xlink:href="#p" fill="#000000" />
<use x="108" y="180" xlink:href="#p" fill="#000000" />
<use x="132" y="180" xlink:href="#p" fill="#000000" />
<use x="180" y="180" xlink:href="#p" fill="#000000" />
<use x="192" y="180" xlink:href="#p" fill="#000000" />
<use x="216" y="180" xlink:href="#p" fill="#000000" />
<use x="228" y="180" xlink:href="#p" fill="#000000" />
<use x="240" y="180" xlink:href="#p" fill="#000000" />
<use x="264" y="180" xlink:href="#p" fill="#000000" />
<use x="312" y="180" xlink:href="#p" fill="#000000" />
<use x="336" y="180" xlink:href="#p" fill="#000000" />
<use x="360" y="180" xlink:href="#p" fill="#000000" />
<use x="384" y="180" xlink:href="#p" fill="#000000" />
<use x="396" y="180" xlink:href="#p" fill="#000000" />
<use x="408" y="180" xlink:href="#p" fill="#000000" />
<use x="36" y="192" xlink:href="#p" fill="#000000" />
<use x="48" y="192" xlink:href="#p" fill="#000000" />
<use x="60" y="192" xlink:href="#p" fill="#000000" />
<use x="72" y="192" xlink:href="#p" fill="#000000" />
<use x="84" y="192" xlink:href="#p" fill="#000000" />
<use x="96" y="192" xlink:href="#p" fill="#000000" />
<use x="120" y="192" xlink:href="#p" fill="#000000" />
<use x="156" y="192" xlink:href="#p" fill="#000000" />
<use x="168" y="192" xlink:href="#p" fill="#000000" />
<use x="180" y="192" xlink:href="#p" fill="#000000" />
<use x="192" y="192" xlink:href="#p" fill="#000000" />
<use x="216" y="192" xlink:href="#p" fill="#000000" />
<use x="276" y="192" xlink:href="#p" fill="#000000" />
<use x="312" y="192" xlink:href="#p" fill="#000000" />
<use x="360" y="192" xlink:href="#p" fill="#000000" />
<use x="372" y="192" xlink:href="#p" fill="#000000" />
<use x="384" y="192" xlink:href="#p" fill="#000000" />
<use x="396" y="192" xlink:href="#p" fill="#000000" />
<use x="408" y="192" xlink:href="#p" fill="#000000" />
<use x="24" y="204" xlink:href="#p" fill="#000000" />
<use x="36" y="204" xlink:href="#p" fill="#000000" />
<use x="60" y="204" xlink:href="#p" fill="#000000" />
<use x="72" y="204" xlink:href="#p" fill="#000000" />
<use x="84" y="204" xlink:href="#p" fill="#000000" />
<use x="132" y="204" xlink:href="#p" fill="#000000" />
<use x="144" y="204" xlink:href="#p" fill="#000000" />
<use x="168" y="204" xlink:href="#p" fill="#000000" />
<use x="216" y="204" xlink:href="#p" fill="#000000" />
<use x="228" y="204" xlink:href="#p" fill="#000000" />
<use x="252" y="204" xlink:href="#p" fill="#000000" />
<use x="264" y="204" xlink:href="#p" fill="#000000" />
<use x="276" y="204" xlink:href="#p" fill="#000000" />
<use x="288" y="204" xlink:href="#p" fill="#000000" />
<use x="312" y="204" xlink:href="#p" fill="#000000" />
<use x="360" y="204" xlink:href="#p" fill="#000000" />
<use x="396" y="204" xlink:href="#p" fill="#000000" />
<use x="36" y="216" xlink:href="#p" fill="#000000" />
<use x="72" y="216" xlink:href="#p" fill="#000000" />
<use x="84" y="216" xlink:href="#p" fill="#000000" />
<use x="96" y="216" xlink:href="#p" fill="#000000" />
<use x="120" y="216" xlink:href="#p" fill="#000000" />
<use x="132" y="216" xlink:href="#p" fill="#000000" />
<use x="156" y="216" xlink:href="#p" fill="#000000" />
<use x="192" y="216" xlink:href="#p" fill="#000000" />
<use x="204" y="216" xlink:href="#p" fill="#000000" />
<use x="216" y="216" xlink:href="#p" fill="#000000" />
<use x="252" y="216" xlink:href="#p" fill="#000000" />
<use x="276" y="216" xlink:href="#p" fill="#000000" />
<use x="288" y="216" xlink:href="#p" fill="#000000" />
<use x="300" y="216" xlink:href="#p" fill="#000000" />
<use x="324" y="216" xlink:href="#p" fill="#000000" />
<use x="336" y="216" xlink:href="#p" fill="#000000" />
<use x="348" y="216" xlink:href="#p" fill="#000000" />
<use x="372" y="216" xlink:href="#p" fill="#000000" />
<use x="24" y="228" xlink:href="#p" fill="#000000" />
<use x="36" y="228" xlink:href="#p" fill="#000000" />
<use x="120" y="228" xlink:href="#p" fill="#000000" />
<use x="132" y="228" xlink:href="#p" fill="#000000" />
<use x="156" y="228" xlink:href="#p" fill="#000000" />
<use x="180" y="228" xlink:href="#p" fill="#000000" />
<use x="204" y="228" xlink:href="#p" fill="#000000" />
<use x="216" y="228" xlink:href="#p" fill="#000000" />
<use x="252" y="228" xlink:href="#p" fill="#000000" />
<use x="264" y="228" xlink:href="#p" fill="#000000" />
<use x="324" y="228" xlink:href="#p" fill="#000000" />
<use x="336" y="228" xlink:href="#p" fill="#000000" />
<use x="372" y="228" xlink:href="#p" fill="#000000" />
<use x="384" y="228" xlink:href="#p" fill="#000000" />
<use x="408" y="228" xlink:href="#p" fill="#000000" />
<use x="24" y="240" xlink:href="#p" fill="#000000" />
<use x="36" y="240" xlink:href="#p" fill="#000000" />
<use x="60" y="240" xlink:href="#p" fill="#000000" />
<use x="84" y="240" xlink:href="#p" fill="#000000" />
<use x="96" y="240" xlink:href="#p" fill="#000000" />
<use x="108" y="240" xlink:href="#p" fill="#000000" />
<use x="168" y="240" xlink:href="#p" fill="#000000" />
<use x="180" y="240" xlink:href="#p" fill="#000000" />
<use x="204" y="240" xlink:href="#p" fill="#000000" />
<use x="216" y="240" xlink:href="#p" fill="#000000" />
<use x="228" y="240" xlink:href="#p" fill="#000000" />
<use x="276" y="240" xlink:href="#p" fill="#000000" />
<use x="336" y="240" xlink:href="#p" fill="#000000" />
<use x="348" y="240" xlink:href="#p" fill="#000000" />
<use x="384" y="240" xlink:href="#p" fill="#000000" />
<use x="408" y="240" xlink:href="#p" fill="#000000" />
<use x="84" y="252" xlink:href="#p" fill="#000000" />
<use x="108" y="252" xlink:href="#p" fill="#000000" />
<use x="120" y="252" xlink:href="#p" fill="#000000" />
<use x="132" y="252" xlink:href="#p" fill="#000000" />
<use x="144" y="252" xlink:href="#p" fill="#000000" />
<use x="156" y="252" xlink:href="#p" fill="#000000" />
<use x="216" y="252" xlink:href="#p" fill="#000000" />
<use x="228" y="252" xlink:href="#p" fill="#000000" />
<use x="264" y="252" xlink:href="#p" fill="#000000" />
<use x="276" y="252" xlink:href="#p" fill="#000000" />
<use x="288" y="252" xlink:href="#p" fill="#000000" />
<use x="324" y="252" xlink:href="#p" fill="#000000" />
<use x="360" y="252" xlink:href="#p" fill="#000000" />
<use x="396" y="252" xlink:href="#p" fill="#000000" />
<use x="408" y="252" xlink:href="#p" fill="#000000" />
<use x="24" y="264" xlink:href="#p" fill="#000000" />
<use x="72" y="264" xlink:href="#p" fill="#000000" />
<use x="96" y="264" xlink:href="#p" fill="#000000" />
<use x="108" y="264" xlink:href="#p" fill="#000000" />
<use x="132" y="264" xlink:href="#p" fill="#000000" />
<use x="156" y="264" xlink:href="#p" fill="#000000" />
<use x="168" y="264" xlink:href="#p" fill="#000000" />
<use x="180" y="264" xlink:href="#p" fill="#000000" />
<use x="204" y="264" xlink:href="#p" fill="#000000" />
<use x="216" y="264" xlink:href="#p" fill="#000000" />
<use x="228" y="264" xlink:href="#p" fill="#000000" />
<use x="252" y="264" xlink:href="#p" fill="#000000" />
<use x="264" y="264" xlink:href="#p" fill="#000000" />
<use x="276" y="264" xlink:href="#p" fill="#000000" />
<use x="312" y="264" xlink:href="#p" fill="#000000" />
<use x="336" y="264" xlink:href="#p" fill="#000000" />
<use x="348" y="264" xlink:href="#p" fill="#000000" />
<use x="372" y="264" xlink:href="#p" fill="#000000" />
<use x="408" y="264" xlink:href="#p" fill="#000000" />
<use x="48" y="276" xlink:href="#p" fill="#000000" />
<use x="60" y="276" xlink:href="#p" fill="#000000" />
<use x="84" y="276" xlink:href="#p" fill="#000000" />
<use x="108" y="276" xlink:href="#p" fill="#000000" />
<use x="120" y="276" xlink:href="#p" fill="#000000" />
<use x="132" y="276" xlink:href="#p" fill="#000000" />
<use x="144" y="276" xlink:href="#p" fill="#000000" />
<use x="168" y="276" xlink:href="#p" fill="#000000" />
<use x="180" y="276" xlink:href="#p" fill="#000000" />
<use x="192" y="276" xlink:href="#p" fill="#000000" />
<use x="216" y="276" xlink:href="#p" fill="#000000" />
<use x="240" y="276" xlink:href="#p" fill="#000000" />
<use x="252" y="276" xlink:href="#p" fill="#000000" />
<use x="276" y="276" xlink:href="#p" fill="#000000" />
<use x="300" y="276" xlink:href="#p" fill="#000000" />
<use x="312" y="276" xlink:href="#p" fill="#000000" />
<use x="324" y="276" xlink:href="#p" fill="#000000" />
<use x="384" y="276" xlink:href="#p" fill="#000000" />
<use x="396" y="276" xlink:href="#p" fill="#000000" />
<use x="408" y="276" xlink:href="#p" fill="#000000" />
<use x="24" y="288" xlink:href="#p" fill="#000000" />
<use x="72" y="288" xlink:href="#p" fill="#000000" />
<use x="84" y="288" xlink:href="#p" fill="#000000" />
<use x="96" y="288" xlink:href="#p" fill="#000000" />
<use x="108" y="288" xlink:href="#p" fill="#000000" />
<use x="120" y="288" xlink:href="#p" fill="#000000" />
<use x="132" y="288" xlink:href="#p" fill="#000000" />
<use x="156" y="288" xlink:href="#p" fill="#000000" />
<use x="180" y="288" xlink:href="#p" fill="#000000" />
<use x="240" y="288" xlink:href="#p" fill="#000000" />
<use x="252" y="288" xlink:href="#p" fill="#000000" />
<use x="264" y="288" xlink:href="#p" fill="#000000" />
<use x="288" y="288" xlink:href="#p" fill="#000000" />
<use x="300" y="288" xlink:href="#p" fill="#000000" />
<use x="312" y="288" xlink:href="#p" fill="#000000" />
<use x="336" y="288" xlink:href="#p" fill="#000000" />
<use x="372" y="288" xlink:href="#p" fill="#000000" />
<use x="384" y="288" xlink:href="#p" fill="#000000" />
<use x="408" y="288" xlink:href="#p" fill="#000000" />
<use x="36" y="300" xlink:href="#p" fill="#000000" />
<use x="48" y="300" xlink:href="#p" fill="#000000" />
<use x="72" y="300" xlink:href="#p" fill="#000000" />
<use x="84" y="300" xlink:href="#p" fill="#000000" />
<use x="120" y="300" xlink:href="#p" fill="#000000" />
<use x="144" y="300" xlink:href="#p" fill="#000000" />
<use x="156" y="300" xlink:href="#p" fill="#000000" />
<use x="192" y="300" xlink:href="#p" fill="#000000" />
<use x="204" y="300" xlink:href="#p" fill="#000000" />
<use x="276" y="300" xlink:href="#p" fill="#000000" />
<use x="312" y="300" xlink:href="#p" fill="#000000" />
<use x="324" y="300" xlink:href="#p" fill="#000000" />
<use x="360" y="300" xlink:href="#p" fill="#000000" />
<use x="372" y="300" xlink:href="#p" fill="#000000" />
<use x="24" y="312" xlink:href="#p" fill="#000000" />
<use x="96" y="312" xlink:href="#p" fill="#000000" />
<use x="120" y="312" xlink:href="#p" fill="#000000" />
<use x="132" y="312" xlink:href="#p" fill="#000000" />
<use x="144" y="312" xlink:href="#p" fill="#000000" />
<use x="168" y="312" xlink:href="#p" fill="#000000" />
<use x="204" y="312" xlink:href="#p" fill="#000000" />
<use x="216" y="312" xlink:href="#p" fill="#000000" />
<use x="252" y="312" xlink:href="#p" fill="#000000" />
<use x="264" y="312" xlink:href="#p" fill="#000000" />
<use x="276" y="312" xlink:href="#p" fill="#000000" />
<use x="288" y="312" xlink:href="#p" fill="#000000" />
<use x="300" y="312" xlink:href="#p" fill="#000000" />
<use x="312" y="312" xlink:href="#p" fill="#000000" />
<use x="324" y="312" xlink:href="#p" fill="#000000" />
<use x="336" y="312" xlink:href="#p" fill="#000000" />
<use x="348" y="312" xlink:href="#p" fill="#000000" />
<use x="360" y="312" xlink:href="#p" fill="#000000" />
<use x="396" y="312" xlink:href="#p" fill="#000000" />
<use x="120" y="324" xlink:href="#p" fill="#000000" />
<use x="168" y="324" xlink:href="#p" fill="#000000" />
<use x="192" y="324" xlink:href="#p" fill="#000000" />
<use x="204" y="324" xlink:href="#p" fill="#000000" />
<use x="216" y="324" xlink:href="#p" fill="#000000" />
<use x="228" y="324" xlink:href="#p" fill="#000000" />
<use x="240" y="324" xlink:href="#p" fill="#000000" />
<use x="276" y="324" xlink:href="#p" fill="#000000" />
<use x="288" y="324" xlink:href="#p" fill="#000000" />
<use x="312" y="324" xlink:href="#p" fill="#000000" />
<use x="360" y="324" xlink:href="#p" fill="#000000" />
<use x="372" y="324" xlink:href="#p" fill="#000000" />
<use x="408" y="324" xlink:href="#p" fill="#000000" />
<use x="24" y="336" xlink:href="#p" fill="#000000" />
<use x="36" y="336" xlink:href="#p" fill="#000000" />
<use x="48" y="336" xlink:href="#p" fill="#000000" />
<use x="60" y="336" xlink:href="#p" fill="#000000" />
<use x="72" y="336" xlink:href="#p" fill="#000000" />
<use x="84" y="336" xlink:href="#p" fill="#000000" />
<use x="96" y="336" xlink:href="#p" fill="#000000" />
<use x="132" y="336" xlink:href="#p" fill="#000000" />
<use x="156" y="336" xlink:href="#p" fill="#000000" />
<use x="192" y="336" xlink:href="#p" fill="#000000" />
<use x="204" y="336" xlink:href="#p" fill="#000000" />
<use x="240" y="336" xlink:href="#p" fill="#000000" />
<use x="264" y="336" xlink:href="#p" fill="#000000" />
<use x="288" y="336" xlink:href="#p" fill="#000000" />
<use x="312" y="336" xlink:href="#p" fill="#000000" />
<use x="336" y="336" xlink:href="#p" fill="#000000" />
<use x="360" y="336" xlink:href="#p" fill="#000000" />
<use x="372" y="336" xlink:href="#p" fill="#000000" />
<use x="384" y="336" xlink:href="#p" fill="#000000" />
<use x="396" y="336" xlink:href="#p" fill="#000000" />
<use x="408" y="336" xlink:href="#p" fill="#000000" />
<use x="24" y="348" xlink:href="#p" fill="#000000" />
<use x="96" y="348" xlink:href="#p" fill="#000000" />
<use x="120" y="348" xlink:href="#p" fill="#000000" />
<use x="132" y="348" xlink:href="#p" fill="#000000" />
<use x="144" y="348" xlink:href="#p" fill="#000000" />
<use x="156" y="348" xlink:href="#p" fill="#000000" />
<use x="168" y="348" xlink:href="#p" fill="#000000" />
<use x="180" y="348" xlink:href="#p" fill="#000000" />
<use x="204" y="348" xlink:href="#p" fill="#000000" />
<use x="216" y="348" xlink:href="#p" fill="#000000" />
<use x="228" y="348" xlink:href="#p" fill="#000000" />
<use x="240" y="348" xlink:href="#p" fill="#000000" />
<use x="276" y="348" xlink:href="#p" fill="#000000" />
<use x="288" y="348" xlink:href="#p" fill="#000000" />
<use x="312" y="348" xlink:href="#p" fill="#000000" />
<use x="360" y="348" xlink:href="#p" fill="#000000" />
<use x="372" y="348" xlink:href="#p" fill="#000000" />
<use x="408" y="348" xlink:href="#p" fill="#000000" />
<use x="24" y="360" xlink:href="#p" fill="#000000" />
<use x="48" y="360" xlink:href="#p" fill="#000000" />
<use x="60" y="360" xlink:href="#p" fill="#000000" />
<use x="72" y="360" xlink:href="#p" fill="#000000" />
<use x="96" y="360" xlink:href="#p" fill="#000000" />
<use x="120" y="360" xlink:href="#p" fill="#000000" />
<use x="132" y="360" xlink:href="#p" fill="#000000" />
<use x="144" y="360" xlink:href="#p" fill="#000000" />
<use x="168" y="360" xlink:href="#p" fill="#000000" />
<use x="180" y="360" xlink:href="#p" fill="#000000" />
<use x="240" y="360" xlink:href="#p" fill="#000000" />
<use x="252" y="360" xlink:href="#p" fill="#000000" />
<use x="264" y="360" xlink:href="#p" fill="#000000" />
<use x="288" y="360" xlink:href="#p" fill="#000000" />
<use x="312" y="360" xlink:href="#p" fill="#000000" />
<use x="324" y="360" xlink:href="#p" fill="#000000" />
<use x="336" y="360" xlink:href="#p" fill="#000000" />
<use x="348" y="360" xlink:href="#p" fill="#000000" />
<use x="360" y="360" xlink:href="#p" fill="#000000" />
<use x="396" y="360" xlink:href="#p" fill="#000000" />
<use x="24" y="372" xlink:href="#p" fill="#000000" />
<use x="48" y="372" xlink:href="#p" fill="#000000" />
<use x="60" y="372" xlink:href="#p" fill="#000000" />
<use x="72" y="372" xlink:href="#p" fill="#000000" />
<use x="96" y="372" xlink:href="#p" fill="#000000" />
<use x="132" y="372" xlink:href="#p" fill="#000000" />
<use x="144" y="372" xlink:href="#p" fill="#000000" />
<use x="156" y="372" xlink:href="#p" fill="#000000" />
<use x="168" y="372" xlink:href="#p" fill="#000000" />
<use x="180" y="372" xlink:href="#p" fill="#000000" />
<use x="204" y="372" xlink:href="#p" fill="#000000" />
<use x="228" y="372" xlink:href="#p" fill="#000000" />
<use x="252" y="372" xlink:href="#p" fill="#000000" />
<use x="288" y="372" xlink:href="#p" fill="#000000" />
<use x="300" y="372" xlink:href="#p" fill="#000000" />
<use x="312" y="372" xlink:href="#p" fill="#000000" />
<use x="360" y="372" xlink:href="#p" fill="#000000" />
<use x="24" y="384" xlink:href="#p" fill="#000000" />
<use x="48" y="384" xlink:href="#p" fill="#000000" />
<use x="60" y="384" xlink:href="#p" fill="#000000" />
<use x="72" y="384" xlink:href="#p" fill="#000000" />
<use x="96" y="384" xlink:href="#p" fill="#000000" />
<use x="120" y="384" xlink:href="#p" fill="#000000" />
<use x="144" y="384" xlink:href="#p" fill="#000000" />
<use x="180" y="384" xlink:href="#p" fill="#000000" />
<use x="228" y="384" xlink:href="#p" fill="#000000" />
<use x="240" y="384" xlink:href="#p" fill="#000000" />
<use x="300" y="384" xlink:href="#p" fill="#000000" />
<use x="312" y="384" xlink:href="#p" fill="#000000" />
<use x="324" y="384" xlink:href="#p" fill="#000000" />
<use x="348" y="384" xlink:href="#p" fill="#000000" />
<use x="360" y="384" xlink:href="#p" fill="#000000" />
<use x="384" y="384" xlink:href="#p" fill="#000000" />
<use x="408" y="384" xlink:href="#p" fill="#000000" />
<use x="24" y="396" xlink:href="#p" fill="#000000" />
<use x="96" y="396" xlink:href="#p" fill="#000000" />
<use x="132" y="396" xlink:href="#p" fill="#000000" />
<use x="144" y="396" xlink:href="#p" fill="#000000" />
<use x="168" y="396" xlink:href="#p" fill="#000000" />
<use x="180" y="396" xlink:href="#p" fill="#000000" />
<use x="228" y="396" xlink:href="#p" fill="#000000" />
<use x="252" y="396" xlink:href="#p" fill="#000000" />
<use x="288" y="396" xlink:href="#p" fill="#000000" />
<use x="300" y="396" xlink:href="#p" fill="#000000" />
<use x="312" y="396" xlink:href="#p" fill="#000000" />
<use x="324" y="396" xlink:href="#p" fill="#000000" />
<use x="348" y="396" xlink:href="#p" fill="#000000" />
<use x="384" y="396" xlink:href="#p" fill="#000000" />
<use x="396" y="396" xlink:href="#p" fill="#000000" />
<use x="24" y="408" xlink:href="#p" fill="#000000" />
<use x="36" y="408" xlink:href="#p" fill="#000000" />
<use x="48" y="408" xlink:href="#p" fill="#000000" />
<use x="60" y="408" xlink:href="#p" fill="#000000" />
<use x="72" y="408" xlink:href="#p" fill="#000000" />
<use x="84" y="408" xlink:href="#p" fill="#000000" />
<use x="96" y="408" xlink:href="#p" fill="#000000" />
<use x="132" y="408" xlink:href="#p" fill="#000000" />
<use x="144" y="408" xlink:href="#p" fill="#000000" />
<use x="168" y="408" xlink:href="#p" fill="#000000" />
<use x="180" y="408" xlink:href="#p" fill="#000000" />
<use x="204" y="408" xlink:href="#p" fill="#000000" />
<use x="228" y="408" xlink:href="#p" fill="#000000" />
<use x="240" y="408" xlink:href="#p" fill="#000000" />
<use x="252" y="408" xlink:href="#p" fill="#000000" />
<use x="264" y="408" xlink:href="#p" fill="#000000" />
<use x="276" y="408" xlink:href="#p" fill="#000000" />
<use x="288" y="408" xlink:href="#p" fill="#000000" />
<use x="312" y="408" xlink:href="#p" fill="#000000" />
<use x="324" y="408" xlink:href="#p" fill="#000000" />
<use x="336" y="408" xlink:href="#p" fill="#000000" />
<use x="348" y="408" xlink:href="#p" fill="#000000" />
<use x="360" y="408" xlink:href="#p" fill="#000000" />
<use x="396" y="408" xlink:href="#p" fill="#000000" />
<use x="408" y="408" xlink:href="#p" fill="#000000" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 411 KiB

View file

@ -1,22 +1,31 @@
---
import BaseLayout from "../../layouts/BaseLayout.astro"
import ReactChild from "./react/join.tsx"
import logo from "./_assets/nbtca.gif";
---
<BaseLayout title="加入我们">
<main>
<div style="margin: -30px;display:flex; justify-content: center;">
<img src={logo.src} style="max-width: 450px;" />
<div class="section-content box-border flex flex-col gap-4 pb-20">
<div class="text-xs sm:text-sm bg-[#f5f5f7] p-4 rounded-2xl mt-6">
<li>
本页面仅作计算机协会新人信息登记使用,原则上登记即可加入。
</li>
<li>
入社后可能仍需要在学校平台登记,后续请留意通知。
</li>
<li>
允许多次提交表单,通常以最后一次提交为准。
</li>
</div>
<div style="display:flex; justify-content: center;font-size: large;">
加入计算机协会
<div
class="my-4"
>
<div class="text-2xl lg:text-3xl leading-[1.125] font-bold ">
加入计算机协会
</div>
<div class="mt-2 text-sm text-gray-500">
在加入协会前,我们需要收集一些你的个人信息,用于满足学校相关规定和后续的社团管理。
</div>
</div>
<ReactChild client:only="react" />
<div style="display:flex; justify-content: center;margin-left: 20px;margin-right: 20px;">
1.本页面仅作计算机协会新人信息登记使用,原则上登记即可加入。但入社后可能仍需要在学校的平台登记,后续请留意群内通知。
<br />
2.允许多次提交表单,通常以最后一次提交为准。
</div>
</main>
</div>
</BaseLayout>

View file

@ -1,7 +1,8 @@
---
import BaseLayout from "../../layouts/BaseLayout.astro"
import ReactChild from "./react/qrcode.tsx"
import qrcode from "./_assets/qrcode_1727189194077.jpg";
// import qrcode from "./_assets/qrcode_1727189194077.jpg";
import qrcode from "./_assets/qq_group_qr_code.svg";
---
<BaseLayout title="QRCode">

View file

@ -1,10 +1,9 @@
import { useState } from "react"
import { Button, Input, Card, CardBody, CardFooter } from "@nextui-org/react"
import { Button, Input, Textarea } from "@nextui-org/react"
import { activeClient } from "../../../utils/client"
export default function JoinForm() {
const [formData, setFormData] = useState({
name: "",
const [formData, setFormData] = useState({ name: "",
class: "",
number: "",
major: "",
@ -13,10 +12,10 @@ export default function JoinForm() {
email: "",
memo: "",
})
function saveToLocalStorge() {
function saveToLocalStorage() {
localStorage.setItem("formData", JSON.stringify(formData))
}
function loadFromLocalStorge() {
function loadFromLocalStorage() {
const data = localStorage.getItem("formData")
if (data) {
setFormData(JSON.parse(data))
@ -25,7 +24,7 @@ export default function JoinForm() {
const [firstRender, setFirstRender] = useState(true)
if (firstRender) {
setFirstRender(false)
loadFromLocalStorge()
loadFromLocalStorage()
}
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target
@ -35,7 +34,7 @@ export default function JoinForm() {
}))
setTimeout(() => {
try {
saveToLocalStorge()
saveToLocalStorage()
}
catch (error) {
console.error("Failed to save form data to local storage", error)
@ -56,91 +55,80 @@ export default function JoinForm() {
}
}
return (
<div
style={{
justifyContent: "center",
alignItems: "center",
display: "flex",
}}
>
<form>
<Card>
<CardBody
style={{
maxWidth: "700px",
display: "grid",
gridTemplateColumns: "1fr 1fr",
gap: "1rem",
}}
>
<Input
name="name"
placeholder="姓名"
value={formData.name}
onChange={handleChange}
required
/>
<Input
name="class"
placeholder="班级"
value={formData.class}
onChange={handleChange}
required
/>
<Input
name="number"
placeholder="学号"
value={formData.number}
onChange={handleChange}
required
/>
<Input
name="major"
placeholder="专业"
value={formData.major}
onChange={handleChange}
required
/>
<Input
name="phone"
placeholder="电话"
value={formData.phone}
onChange={handleChange}
required
/>
<Input
name="qq"
placeholder="QQ"
value={formData.qq}
onChange={handleChange}
required
/>
<Input
name="email"
placeholder="邮箱"
value={formData.email}
onChange={handleChange}
required
/>
<Input
name="memo"
placeholder="备注"
value={formData.memo}
onChange={handleChange}
required
/>
</CardBody>
<CardFooter
style={{
justifyContent: "center",
alignItems: "center",
display: "flex",
}}
>
<Button onClick={handleSubmit}></Button>
</CardFooter>
</Card>
<div>
<form className="flex flex-col gap-8">
<div className="flex flex-col md:grid grid-cols-2 gap-4">
<div className="text-sm text-gray-500 col-span-2">
</div>
<Input
name="name"
placeholder="姓名"
value={formData.name}
onChange={handleChange}
required
/>
<Input
name="class"
placeholder="班级"
value={formData.class}
onChange={handleChange}
required
/>
<Input
name="number"
placeholder="学号"
value={formData.number}
onChange={handleChange}
required
/>
<Input
name="major"
placeholder="专业"
value={formData.major}
onChange={handleChange}
required
/>
</div>
<div className="flex flex-col gap-4">
<div className="text-sm text-gray-500">
便
</div>
<Input
name="phone"
placeholder="电话"
className=""
value={formData.phone}
onChange={handleChange}
required
/>
<Input
name="qq"
placeholder="QQ"
className=""
value={formData.qq}
onChange={handleChange}
required
/>
<Input
name="email"
placeholder="邮箱"
className=""
value={formData.email}
onChange={handleChange}
required
/>
</div>
<Textarea
label="备注"
name="memo"
placeholder=""
className="col-span-2"
value={formData.memo}
onChange={handleChange}
/>
</form>
<Button className="mt-12" type="submit" color="primary" fullWidth onClick={handleSubmit}></Button>
</div>
)
}

View file

@ -1,66 +1,20 @@
import { Button, Input } from "@nextui-org/react"
import { Button, Link, Code } from "@nextui-org/react"
function QrCodeContent({ qrcode }: { qrcode: string }) {
return (
<>
<div className="box-border flex flex-col items-center gap-4 pb-20 mt-6">
<div
style={{
display: "flex",
justifyContent: "center",
marginTop: "20px",
}}
className="my-4 text-center"
>
QQ
</div>
<div
style={{
display: "flex",
justifyContent: "center",
}}
>
<img
src={qrcode}
style={{
maxWidth: "320px",
padding: "20px",
}}
/>
</div>
<div
style={{
display: "flex",
justifyContent: "center",
// flexDirection: "column",
textAlign: "center",
}}
>
<div
style={{
display: "flex",
justifyContent: "center",
}}
>
<div
style={{
textAlign: "center",
width: "120px",
display: "flex",
justifyContent: "center",
}}
>
<Input readOnly={true} value="906370401" />
</div>
<div className="text-2xl lg:text-3xl leading-[1.125] font-bold ">
</div>
<div
style={{
display: "flex",
justifyContent: "center",
}}
>
<Button
style={{
maxWidth: "320px",
}}
<div className="mt-2 text-sm text-gray-500">
QQ
</div>
<div className="mt-2 text-sm text-gray-500 flex items-center justify-center gap-1">
<Code
className="flex items-center gap-2 cursor-pointer p-2 sm:p-1 "
onClick={() => {
const inputElement = document.querySelector(
"input[value=\"906370401\"]",
@ -71,11 +25,31 @@ function QrCodeContent({ qrcode }: { qrcode: string }) {
}
}}
>
</Button>
<span>
906370401
</span>
<svg aria-hidden="true" fill="none" focusable="false" height="1em" role="presentation" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="1em" class="">
<path d="M16 17.1c0 3.5-1.4 4.9-4.9 4.9H6.9C3.4 22 2 20.6 2 17.1v-4.2C2 9.4 3.4 8 6.9 8h4.2c3.5 0 4.9 1.4 4.9 4.9Z"></path><path d="M8 8V6.9C8 3.4 9.4 2 12.9 2h4.2C20.6 2 22 3.4 22 6.9v4.2c0 3.5-1.4 4.9-4.9 4.9H16"></path><path d="M16 12.9C16 9.4 14.6 8 11.1 8"></path>
</svg>
</Code>
</div>
</div>
</>
<img
src={qrcode}
className="w-64 aspect-square"
/>
<Link
href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=paWMZsf3D_x1ToAjFArynzSEXcRXej8h&authKey=BwD40LqNZNYLGgsI%2B1zIo0AyAh0vVRdhCUDzazeZr2RMWDPKHOMQtiHEKLzOw5Nz&noverify=0&group_code=906370401"
showAnchorIcon={false}
>
<Button
className="w-64"
>
</Button>
</Link>
</div>
)
}