feat: vuetify, genshin initial

DrAugus · Dec 19, 2022 · 898f728 · 898f728
1 parent 9cc4659
commit 898f728
Show file tree

Hide file tree

Showing 13 changed files with 2,241 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # [App](https://github.com/DrAugus/augus-tauri/)
 
-My first app generated by Vue 3 + TypeScript + Vite + Rust.
+My first app generated by Vue 3 + TypeScript + Vite + Rust + Vuetify.
 
 ## FAQ
 

diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>AUGUS</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "@tauri-apps/api": "1.2.0",
-    "vue": "3.2.45"
+    "vue": "3.2.45",
+    "vuetify": "^3.0.5"
   },
   "devDependencies": {
     "@tauri-apps/cli": "1.2.2",

diff --git a/src/App.vue b/src/App.vue
@@ -2,11 +2,18 @@
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
 import HelloWorld from './components/HelloWorld.vue'
+import HomeSider from './components/HomeSider.vue';
 </script>
 
 <template>
-  <img alt="logo" width="160" src="./assets/logo.jpg" />
-  <HelloWorld msg="Augus" />
+
+  <HomeSider>
+    <template v-slot>
+      <img alt="logo" width="160" src="./assets/logo.jpg" />
+      <HelloWorld msg="AUGUS" />
+    </template>
+  </HomeSider>
+
 </template>
 
 <style>

diff --git a/src/components/BannerList.vue b/src/components/BannerList.vue
@@ -0,0 +1,51 @@
+
+<template>
+
+    <v-list lines="two">
+
+        <v-list-item v-for="(v, i) in WISH.characters" :key="imgName(v)" :title="v.name" :subtitle="v.shortName"
+            :prepend-avatar="combineCharImage(v.wish5star)" :value="imgName(v)"
+            :active-color="colorCharEle(v.wish5star)" rounded="xl"
+
+            ></v-list-item>
+
+            <!-- @click="showBannerPage(combineWishImage(imgName(v.name)))" -->
+
+    </v-list>
+
+    <BannerPage :img="combineCharImage('klee')"></BannerPage>
+
+</template>
+
+<script setup lang="ts">
+import { WISH } from '../script/genshin/wish'
+import { replaceAndLow, ElementColor } from '../script/genshin/utils'
+import { CHARACTER, Characters } from '../script/genshin/characters'
+
+import BannerPage from './BannerPage.vue';
+
+const imgName = (value: any) => value.name.concat('_' + value.image + '.jpg').toLowerCase().replace(/ /g, '_')
+
+const combineCharImage = (v: string) => 'https://github.com/DrAugus/data/blob/master/game/genshin/characters/' + v + '.png?raw=true'
+
+const combineWishImage = (v:string )  => 'https://github.com/DrAugus/data/blob/master/game/genshin/wish/' + v + '?raw=true'
+
+const colorCharEle = (v: string) => {
+    const index_ele = Object.values(CHARACTER)[Object.keys(CHARACTER).indexOf(v)].ele;
+    return ElementColor[index_ele]
+}
+
+// https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits
+// type-based
+const emit = defineEmits<{
+  (e: 'showBannerPage', value: string): {
+    
+  }
+}>()
+
+
+
+
+
+
+</script>
diff --git a/src/components/BannerPage.vue b/src/components/BannerPage.vue
@@ -0,0 +1,12 @@
+<template>
+    <v-img class="bg-white" width="300" :aspect-ratio="1" :src="img" cover></v-img>
+</template>
+
+<script setup lang="ts">
+defineProps({
+    img: {
+        type: String,
+        default: ''
+    },
+})
+</script>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -12,10 +12,13 @@ const count = ref(0)
   <a href="https://tauri.app/v1/guides/getting-started/setup/vite">TAURI GUIDE</a>
 
   <p>
-    <a href="https://draugus.github.io/">Blog</a> | <a href="https://draugus.github.io/game/genshin/timeline">Genshin</a>
+    <a href="https://draugus.github.io/">Genshin</a>
   </p>
 
-  <p>第一个多平台软件（当前处于测试开发期）</p>
+  <p>第一个多平台软件</p>
+
+  <p>当前处于测试开发期...摸鱼...咕咕咕</p>
+
 
 </template>
 

diff --git a/src/components/HomeSider.vue b/src/components/HomeSider.vue
@@ -0,0 +1,49 @@
+<template>
+    <v-card>
+        <v-layout>
+            <v-navigation-drawer theme="auto" rail permanent>
+                <v-list-item nav prepend-avatar="../assets/logo.jpg"></v-list-item>
+
+                <v-divider></v-divider>
+
+                <v-list density="compact" nav>
+                    <v-list-item prepend-icon="mdi-view-dashboard" value="dashboard"></v-list-item>
+
+                    <v-list-item prepend-icon="mdi-forum" value="messages"></v-list-item>
+                </v-list>
+            </v-navigation-drawer>
+
+            <v-navigation-drawer permanent>
+
+                <BannerList @on-click=""></BannerList>
+            </v-navigation-drawer>
+
+            <v-main>
+                <slot></slot>
+            </v-main>
+        </v-layout>
+    </v-card>
+</template>
+
+
+<script setup lang="ts">
+
+import BannerList from './BannerList.vue'
+import BannerPage from './BannerPage.vue'
+import HelloWorld from './HelloWorld.vue';
+defineProps({
+    icon: {
+        type: String,
+        default: ''
+    },
+    iconClass: {
+        type: String,
+        default: ''
+    },
+    blurry: {
+        type: Boolean,
+        default: true,
+        required: false
+    }
+})
+</script>
diff --git a/src/main.ts b/src/main.ts
@@ -1,4 +1,15 @@
 import {createApp} from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+// Vuetify
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
+
+createApp(App).use(vuetify).mount('#app')