diff options
| author | 2024-09-03 07:41:34 +0800 | |
|---|---|---|
| committer | 2024-09-03 07:41:34 +0800 | |
| commit | a1a20e51d6c9efea406cf18facf707ea50e3d18c (patch) | |
| tree | f8516f5ce30efa59189c78a1cdfaf5614acb7d58 /site/src/components | |
| parent | d77828d97ee98792e50a034f905cd3894807d5ff (diff) | |
| download | HydroRoll-a1a20e51d6c9efea406cf18facf707ea50e3d18c.tar.gz HydroRoll-a1a20e51d6c9efea406cf18facf707ea50e3d18c.zip | |
refactor: Optimize the structure of the code
Diffstat (limited to 'site/src/components')
| -rw-r--r-- | site/src/components/ChangeLog.vue | 61 | ||||
| -rw-r--r-- | site/src/components/Left.vue | 84 | ||||
| -rw-r--r-- | site/src/components/Right.vue | 203 | ||||
| -rw-r--r-- | site/src/components/RightPage1.vue | 65 | ||||
| -rw-r--r-- | site/src/components/TheWelcome.vue | 88 | ||||
| -rw-r--r-- | site/src/components/WelcomeItem.vue | 87 |
6 files changed, 0 insertions, 588 deletions
diff --git a/site/src/components/ChangeLog.vue b/site/src/components/ChangeLog.vue deleted file mode 100644 index e58ee39..0000000 --- a/site/src/components/ChangeLog.vue +++ /dev/null @@ -1,61 +0,0 @@ -<script lang="ts"> -import axios from 'axios'; - -export default { - data() { - return { - ChangeLogMessage: 'testChangeLogMessage', - } - }, - props: { - msg: { - type: String, - require: true - }, - date: { - type: Date, - default: new Date('2024-07-14T12:00:00Z') - } - }, - methods: { - getChangeLog() { - axios.get('https://api.github.com/repos/HydroRoll-Team/HydroRoll/releases/latest').then(res => { - - this.ChangeLogMessage ="## "+ res.data['tag_name']+"\n"+res.data['body']; - console.log(res.data); - }) - } - }, - beforeMount() { - this.getChangeLog() - } - -} -</script> - - -<template> - <div class="details" style="overflow-y:scroll;overflow-x:hidden;height:100%"> - <h3> - ChangeLog - </h3> - <v-md-preview :text="ChangeLogMessage"></v-md-preview> - </div> -</template> - - -<style scoped> - - -h3 { - font-size: 1.2rem; - font-weight: 500; - margin-bottom: 0.4rem; - color: var(--color-heading); -} - -.details { - flex: 1; - margin-left: 1rem; -} -</style> diff --git a/site/src/components/Left.vue b/site/src/components/Left.vue deleted file mode 100644 index 672ba36..0000000 --- a/site/src/components/Left.vue +++ /dev/null @@ -1,84 +0,0 @@ -<script lang="ts"> -export default { - data(){ - return{ - day:0, - hour:0, - min:0, - sec:0, - timer:0 - } - }, - props:{ - msg:{ - type:String, - require:true - }, - date:{ - type:Date, - default:new Date('2024-07-14T12:00:00Z') - } - }, - methods:{ - getTime(){ - this.timer=window.setTimeout(()=>{ - const date1 = new Date(); - const date2 = new Date(this.date); - const timeDiff = Math.abs(date2.getTime() - date1.getTime()); - this.day = Math.floor(timeDiff / (1000 * 60 * 60 * 24)); - this.hour = Math.floor(timeDiff / (1000 * 60 * 60)%24); - this.min = Math.floor((timeDiff / (1000 * 60)) % 60); - this.sec = Math.floor((timeDiff / 1000) % 60); - this.getTime() - },1000) - } - }, - beforeMount() { - this.getTime() - } - -} -</script> - -<template> - <div class="greetings"> - <h1 class="green">{{ msg }}</h1> - <h3> - 距离水系公测还有 - </h3> - <h2> - {{ day }} 天 {{ hour }} 时 {{ min }} 分 {{ sec }} 秒 - </h2> - </div> -</template> - -<style scoped> -h1 { - font-weight: 500; - font-size: 2.6rem; - position: relative; - top: -10px; -} - -h3 { - font-size: 1.2rem; -} - -.greetings h1, -.greetings h2 { - text-align: center; -} -.greetings h3 { - text-align: center; -} - -@media (min-width: 1024px) { - .greetings h1, - .greetings h2 { - text-align: left; - } - .greetings h3 { - text-align: left; - } -} -</style> diff --git a/site/src/components/Right.vue b/site/src/components/Right.vue deleted file mode 100644 index 055d11b..0000000 --- a/site/src/components/Right.vue +++ /dev/null @@ -1,203 +0,0 @@ -<script lang="ts"> -import ChangeLog from './ChangeLog.vue' -import RightPage1 from './RightPage1.vue' -import DocumentationIcon from './icons/IconDocumentation.vue' - -export default { - data() { - return { - mainPage: 1, - changelogDisplay: "", - page2Display: "none", - page3Display: "none", - page4Display: "none", - icon1Back: "var(--icon-highlight)", - icon2Back: "", - icon3Back: "", - icon4Back: "", - } - }, - components: { - ChangeLog, - RightPage1, - DocumentationIcon - }, - methods: { - control_page(type: string, n: number) { - if (type == "over") { - this.mainPage = n - this.change_page(n) - } - if (type == "click") { - this.mainPage = n - this.change_page(n) - } - if (type == "out") { - this.change_page(this.mainPage) - } - }, - change_page(n: number) { - if (n == 1) { - this.changelogDisplay = ""; - this.page2Display = "none"; - this.page3Display = "none"; - this.page4Display = "none"; - this.icon1Back = "var(--icon-highlight)"; - this.icon2Back = "var(--color-border)"; - this.icon3Back = "var(--color-border-hover)"; - this.icon4Back = "var(--color-border-hover)"; - } else if (n == 2) { - this.changelogDisplay = "none"; - this.page2Display = ""; - this.page3Display = "none"; - this.page4Display = "none"; - this.icon1Back = "var(--color-border)"; - this.icon2Back = "var(--icon-highlight)"; - this.icon3Back = "var(--color-border-hover)"; - this.icon4Back = "var(--color-border-hover)"; - } else if (n == 3) { - this.changelogDisplay = "none"; - this.page2Display = "none"; - this.page3Display = ""; - this.page4Display = "none"; - this.icon1Back = "var(--color-border)"; - this.icon2Back = "var(--color-border)"; - this.icon3Back = "var(--color-border-hover)"; - this.icon4Back = "var(--color-border-hover)"; - } else if (n == 4) { - this.changelogDisplay = "none"; - this.page2Display = "none"; - this.page3Display = "none"; - this.page4Display = ""; - this.icon1Back = "var(--color-border)"; - this.icon2Back = "var(--color-border)"; - this.icon3Back = "var(--color-border-hover)"; - this.icon4Back = "var(--color-border-hover)"; - } - - } - } -} - -</script> - -<template> - <div class="item"> - <el-tooltip content="ChangeLog" placement="left"> - <i :style="{background:icon1Back}" @mouseover="control_page('over',1)" @click="control_page('click',1)" - @mouseout="control_page('out',1)"> - <DocumentationIcon/> - </i> - </el-tooltip> - <el-tooltip content="Page2" placement="left"> - <i :style="{background:icon2Back}" @mouseover="control_page('over',2)" @click="control_page('click',2)" - @mouseout="control_page('out',2)"> - <DocumentationIcon/> - </i> - </el-tooltip> - <el-tooltip content="敬请期待" placement="left"> - <i :style="{background:icon3Back}" @mouseover="control_page('over',3)" @click="control_page('click',3)" - @mouseout="control_page('out',3)"> - <DocumentationIcon/> - </i> - </el-tooltip> - <el-tooltip content="敬请期待" placement="left"> - <i :style="{background:icon4Back}" @mouseover="control_page('over',4)" @click="control_page('click',4)" - @mouseout="control_page('out',4)"> - <DocumentationIcon/> - </i> - </el-tooltip> - <div> - <ChangeLog :style="{display:changelogDisplay}"/> - <RightPage1 title="Test Page 2" :style="{display:page2Display}"/> - <RightPage1 title="Test Page 3" :style="{display:page3Display}"/> - <RightPage1 title="Test Page 4" :style="{display:page4Display}"/> - </div> - </div> - -</template> - -<style> - -.item { - height: 600px; - margin-top: 2rem; - display: flex; - position: relative; -} - - -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 { - left: -26px; - position: absolute; - border-radius: 8px; - width: 50px; - height: 50px; - } - - div i:nth-child(1) { - top: calc(20% - 25px); - } - - div i:nth-child(2) { - top: calc(40% - 25px); - } - - div i:nth-child(3) { - top: calc(60% - 25px); - } - - div i:nth-child(4) { - top: calc(80% - 25px); - } - - .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> diff --git a/site/src/components/RightPage1.vue b/site/src/components/RightPage1.vue deleted file mode 100644 index 5b93ea8..0000000 --- a/site/src/components/RightPage1.vue +++ /dev/null @@ -1,65 +0,0 @@ -<script lang="ts"> -import axios from "axios"; - -export default { - data() { - return { - ChangeLogTagName: "beta", - ChangeLogMessage: 'testChangeLogMessage', - } - }, - props: { - title: { - type: String, - default: "1", - }, - msg: { - type: String, - require: true - }, - date: { - type: Date, - default: new Date('2024-07-14T12:00:00Z') - } - }, - methods: { - getChangeLog() { - axios.get('https://api.github.com/repos/HydroRoll-Team/HydroRoll/releases/latest').then(res => { - this.ChangeLogTagName = res.data['tag_name']; - this.ChangeLogMessage = res.data['body']; - console.log(res.data); - }) - } - }, - beforeMount() { - this.getChangeLog() - } -} -</script> - - -<template> - <div class="details" style="overflow-y:scroll;overflow-x:hidden;height:100%"> - <h3> - {{ title }} - </h3> - <v-md-preview :text="ChangeLogMessage"></v-md-preview> - </div> -</template> - - -<style scoped> - - -h3 { - font-size: 1.2rem; - font-weight: 500; - margin-bottom: 0.4rem; - color: var(--color-heading); -} - -.details { - flex: 1; - margin-left: 1rem; -} -</style> diff --git a/site/src/components/TheWelcome.vue b/site/src/components/TheWelcome.vue deleted file mode 100644 index 49d8f73..0000000 --- a/site/src/components/TheWelcome.vue +++ /dev/null @@ -1,88 +0,0 @@ -<script setup lang="ts"> -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> diff --git a/site/src/components/WelcomeItem.vue b/site/src/components/WelcomeItem.vue deleted file mode 100644 index 6d7086a..0000000 --- a/site/src/components/WelcomeItem.vue +++ /dev/null @@ -1,87 +0,0 @@ -<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> |
