mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-12 09:18:14 +08:00
refactor(ui): ui 替换，从 antdv 换成 vuetify
This commit is contained in:
BTMuli
31
src/App.vue
31
src/App.vue
@@ -1,13 +1,19 @@
|
||||
<template>
|
||||
<a-layout style="min-height: 100vh">
|
||||
<!-- 侧边栏 -->
|
||||
<t-sidebar />
|
||||
<!-- 内容区 -->
|
||||
<a-layout-content class="app-content">
|
||||
<!-- 路由组件 -->
|
||||
<router-view></router-view>
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
<v-card>
|
||||
<v-layout>
|
||||
<!-- 顶部导航栏 -->
|
||||
<!-- todo 写个组件 -->
|
||||
<v-app-bar title="App Bar" />
|
||||
<!-- 侧边栏菜单 -->
|
||||
<t-sidebar />
|
||||
<!-- 主体内容 -->
|
||||
<v-main>
|
||||
<v-container fluid>
|
||||
<router-view />
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-layout>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -21,10 +27,3 @@ export default defineComponent({
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="css">
|
||||
.app-content {
|
||||
padding: 10px;
|
||||
min-height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,51 +1,62 @@
|
||||
<template>
|
||||
<a-layout-sider v-model:collapsed="collpased" collapsible :theme="theme">
|
||||
<a-menu
|
||||
v-model:selected-keys="selectedKeys"
|
||||
:theme="theme"
|
||||
mode="inline"
|
||||
@select="selectMenu"
|
||||
>
|
||||
<a-menu-item key="home">
|
||||
<HomeOutlined />
|
||||
<span>首页</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="news">
|
||||
<ScheduleOutlined />
|
||||
<span>咨讯</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="config">
|
||||
<SettingOutlined />
|
||||
<span>设置</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-layout-sider>
|
||||
<v-navigation-drawer permanent :rail="rail">
|
||||
<v-list>
|
||||
<!-- 第一个图标，负责收缩侧边栏 -->
|
||||
<v-list-item @click="collapse">
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-menu</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<!-- 菜单项 -->
|
||||
<v-list-subheader>
|
||||
<v-icon>mdi-bug-outline</v-icon>
|
||||
<span v-show="!rail"> 测试功能 </span>
|
||||
</v-list-subheader>
|
||||
<v-list-item @click="toPage('/news')">
|
||||
<template v-slot:prepend>
|
||||
<v-icon>mdi-calendar-text-outline</v-icon>
|
||||
</template>
|
||||
<v-list-item-title v-show="!rail"> 咨讯 </v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-subheader>
|
||||
<v-icon>mdi-cog-outline</v-icon>
|
||||
<span v-show="!rail"> 开发功能 </span>
|
||||
</v-list-subheader>
|
||||
<v-list-item @click="toPage('/config')">
|
||||
<template v-slot:prepend>
|
||||
<v-icon>mdi-cog-outline</v-icon>
|
||||
</template>
|
||||
<v-list-item-title v-show="!rail"> 设置 </v-list-item-title>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-subheader>
|
||||
<v-icon>mdi-rocket-outline</v-icon>
|
||||
<span v-show="!rail"> 预期功能 </span>
|
||||
</v-list-subheader>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { HomeOutlined, ScheduleOutlined, SettingOutlined } from "@ant-design/icons-vue";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
export default defineComponent({
|
||||
name: "TSidebar",
|
||||
components: {
|
||||
HomeOutlined,
|
||||
ScheduleOutlined,
|
||||
SettingOutlined,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
rail: true,
|
||||
router: useRouter(),
|
||||
collpased: false,
|
||||
selectedKeys: ["home"],
|
||||
theme: "dark",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selectMenu({ key }: { key: string }) {
|
||||
this.selectedKeys = [key];
|
||||
this.router.push(key);
|
||||
collapse() {
|
||||
this.rail = !this.rail;
|
||||
},
|
||||
toPage(path: string) {
|
||||
if (this.router.currentRoute.path !== path) {
|
||||
this.router.push(path);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -2,7 +2,10 @@ import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
// 路由
|
||||
import router from "./router";
|
||||
// Pinia
|
||||
import { pinia } from "./store";
|
||||
import store from "./store";
|
||||
// Vuetify
|
||||
import "@mdi/font/css/materialdesignicons.css";
|
||||
import "vuetify/styles";
|
||||
import { createVuetify } from "vuetify";
|
||||
|
||||
createApp(App).use(router).use(pinia).mount("#app");
|
||||
createApp(App).use(router).use(store).use(createVuetify()).mount("#app");
|
||||
|
||||
@@ -1,48 +1,84 @@
|
||||
<template>
|
||||
<a-tabs v-model:active-key="activeKey" type="card">
|
||||
<!-- todo 专门写一个卡片组件来展示数据 -->
|
||||
<a-tab-pane key="activity" tab="活动">
|
||||
<!-- 遍历渲染活动卡片 -->
|
||||
<v-tabs v-model="tab" align-tabs="start" stacked>
|
||||
<v-tab value="activity">活动</v-tab>
|
||||
<v-tab value="news">新闻</v-tab>
|
||||
<v-tab value="notice">公告</v-tab>
|
||||
</v-tabs>
|
||||
<v-window v-model="tab">
|
||||
<v-window-item value="activity">
|
||||
<div v-show="postData.activity === {}">暂无活动</div>
|
||||
<div class="cards-grid" v-show="postData.activity !== {}">
|
||||
<a-card v-for="item in postData.activity" @click="toPost(item.post_id)">
|
||||
<template #cover>
|
||||
<img :src="item.cover" alt="cover" class="card-cover" />
|
||||
</template>
|
||||
<a-card-meta :title="item.title" :description="item.post_id" />
|
||||
</a-card>
|
||||
<v-card
|
||||
v-for="item in postData.activity"
|
||||
class="justify-space-between flex-nowrap"
|
||||
width="320"
|
||||
>
|
||||
<v-img :src="item.cover" class="post-cover"></v-img>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
@click="toPost(item.post_id)"
|
||||
prepend-icon="mdi-arrow-right-circle"
|
||||
class="ms-2 bg-blue-accent-2"
|
||||
>查看</v-btn
|
||||
>
|
||||
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="news" tab="新闻">
|
||||
</v-window-item>
|
||||
<v-window-item value="news">
|
||||
<div v-show="postData.news === {}">暂无新闻</div>
|
||||
<div class="cards-grid" v-show="postData.news !== {}">
|
||||
<a-card v-for="item in postData.news" @click="toPost(item.post_id)">
|
||||
<template #cover>
|
||||
<img :src="item.cover" alt="cover" class="card-cover" />
|
||||
</template>
|
||||
<a-card-meta :title="item.title" :description="item.post_id" />
|
||||
</a-card>
|
||||
<v-card
|
||||
v-for="item in postData.news"
|
||||
class="justify-space-between flex-nowrap"
|
||||
width="320"
|
||||
>
|
||||
<v-img :src="item.cover" class="post-cover"></v-img>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
@click="toPost(item.post_id)"
|
||||
prepend-icon="mdi-arrow-right-circle"
|
||||
class="ms-2 bg-blue-accent-2"
|
||||
>查看</v-btn
|
||||
>
|
||||
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="notice" tab="公告">
|
||||
<div v-show="postData.notice === {}">暂无公告</div>
|
||||
<div class="cards-grid" v-show="postData.notice !== {}">
|
||||
<a-card v-for="item in postData.notice" @click="toPost(item.post_id)">
|
||||
<template #cover>
|
||||
<img :src="item.cover" alt="cover" class="card-cover" />
|
||||
</template>
|
||||
<a-card-meta :title="item.title" :description="item.post_id" />
|
||||
</a-card>
|
||||
</v-window-item>
|
||||
<v-window-item value="notice">
|
||||
<div v-show="postData.news === {}">暂无新闻</div>
|
||||
<div class="cards-grid" v-show="postData.news !== {}">
|
||||
<v-card
|
||||
v-for="item in postData.notice"
|
||||
class="justify-space-between flex-nowrap"
|
||||
width="320"
|
||||
>
|
||||
<!-- todo: 优化图片显示 -->
|
||||
<v-img :src="item.cover" class="post-cover"></v-img>
|
||||
<v-card-title>{{ item.title }}</v-card-title>
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
@click="toPost(item.post_id)"
|
||||
prepend-icon="mdi-arrow-right-circle"
|
||||
class="ms-2 bg-blue-accent-2"
|
||||
>查看</v-btn
|
||||
>
|
||||
<v-card-subtitle>id:{{ item.post_id }}</v-card-subtitle>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</v-window-item>
|
||||
</v-window>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { MysPostType, ResponseListType, ResponseType } from "../interface/MysPost";
|
||||
import { http } from "@tauri-apps/api";
|
||||
import { ResponseType as TauriResponseType } from "@tauri-apps/api/http";
|
||||
|
||||
const MysApi = "https://bbs-api.mihoyo.com/post/wapi/getNewsList?gids=2&type=";
|
||||
const enum MysType {
|
||||
@@ -59,7 +95,7 @@ export default defineComponent({
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeKey: "activity",
|
||||
tab: "activity",
|
||||
postData: {
|
||||
activity: {},
|
||||
news: {},
|
||||
@@ -151,10 +187,9 @@ export default defineComponent({
|
||||
grid-gap: 20px;
|
||||
}
|
||||
|
||||
.card-cover {
|
||||
.post-cover {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
object-fit: contain;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 150px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { createPinia } from "pinia";
|
||||
import { createPersistedState } from "pinia-plugin-persistedstate";
|
||||
|
||||
const pinia = createPinia();
|
||||
const store = createPinia();
|
||||
|
||||
pinia.use(createPersistedState());
|
||||
store.use(createPersistedState());
|
||||
|
||||
export { pinia };
|
||||
export default store;
|
||||
|
||||
Reference in New Issue
Block a user