refactor(ui): ui 替换，从 antdv 换成 vuetify

2025-12-06 08:32:51 +08:00 · 2023-03-06 16:17:17 +08:00
parent b76b11f099
commit 5e5c84f596
10 changed files with 385 additions and 1708 deletions
--- a/README.md
+++ b/README.md
@@ -2,12 +2,12 @@
 Author: 目棃
 Date: 2023-03-05
 Description: 说明文档
-Update: 2023-03-05
+Update: 2023-03-06
 ---

 > 本文档 [`Front-matter`](https://github.com/BTMuli/Mucli#FrontMatter) 由 [MuCli](https://github.com/BTMuli/Mucli) 自动生成于`2023-03-05 14:41:55`
 > 
-> 更新于 `2023-03-05 17:10:10`
+> 更新于 `2023-03-06 16:14:02`

 # Tauri.Genshin

@@ -19,7 +19,7 @@ Tauri 练手项目
 - [Vue3](https://v3.cn.vuejs.org/)
 - [Vite](https://cn.vitejs.dev/)
 - [TypeScript](https://www.typescriptlang.org/)
- [Ant Design Vue](https://www.antdv.com/docs/vue/introduce-cn/)
+- [Vuetify](https://vuetifyjs.com/en/)

 ## 开发

--- a/components.d.ts
+++ b/components.d.ts
@@ -1,25 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
-export {};
-
-declare module "@vue/runtime-core" {
-	export interface GlobalComponents {
-		ACard: typeof import("ant-design-vue/es")["Card"];
-		ACardMeta: typeof import("ant-design-vue/es")["CardMeta"];
-		ALayout: typeof import("ant-design-vue/es")["Layout"];
-		ALayoutContent: typeof import("ant-design-vue/es")["LayoutContent"];
-		ALayoutSider: typeof import("ant-design-vue/es")["LayoutSider"];
-		AMenu: typeof import("ant-design-vue/es")["Menu"];
-		AMenuItem: typeof import("ant-design-vue/es")["MenuItem"];
-		ATabPane: typeof import("ant-design-vue/es")["TabPane"];
-		ATabs: typeof import("ant-design-vue/es")["Tabs"];
-		RouterLink: typeof import("vue-router")["RouterLink"];
-		RouterView: typeof import("vue-router")["RouterView"];
-		TSidebar: typeof import("./src/components/t-sidebar.vue")["default"];
-	}
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
 	"description": "A Tauri App Demo",
 	"private": true,
 	"version": "0.0.0",
+	"author": "BTMuli <bt-muli@outlook.com>",
 	"scripts": {
 		"format": "prettier --write .",
 		"dev": "vite",
@@ -10,29 +11,30 @@
 		"preview": "vite preview",
 		"tauri": "tauri"
 	},
+	"bugs": {
+		"url": "https://github.com/BTMuli/Tauri.Genshin/issues"
+	},
 	"directories": {
 		"doc": "docs"
 	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/BTMuli/Tauri.Genshin.git"
-	},
+	"homepage": "https://github.com/BTMuli/Tauri.Genshin#readme",
 	"keywords": [
 		"Tauri",
 		"Node",
 		"Typescript",
 		"Vite"
 	],
-	"author": "BTMuli <bt-muli@outlook.com>",
 	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/BTMuli/Tauri.Genshin/issues"
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/BTMuli/Tauri.Genshin.git"
 	},
-	"homepage": "https://github.com/BTMuli/Tauri.Genshin#readme",
 	"dependencies": {
+		"@mdi/font": "5.9.55",
 		"@tauri-apps/api": "^1.2.0",
 		"ant-design-vue": "^3.2.15",
-		"vue": "^3.2.45"
+		"vue": "^3.2.45",
+		"vuetify": "npm:@vuetify/nightly@next"
 	},
 	"devDependencies": {
 		"@tauri-apps/cli": "^1.2.2",
@@ -42,9 +44,10 @@
 		"pinia-plugin-persistedstate": "^3.1.0",
 		"prettier": "^2.8.4",
 		"typescript": "^4.6.4",
-		"unplugin-vue-components": "^0.24.0",
 		"vite": "^4.0.0",
+		"vite-plugin-vuetify": "^1.0.2",
 		"vue-router": "^4.1.6",
-		"vue-tsc": "^1.0.11"
+		"vue-tsc": "^1.0.11",
+		"vuetify": "^3.1.7"
 	}
 }
--- a/src/App.vue
+++ b/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>
--- a/src/components/t-sidebar.vue
+++ b/src/components/t-sidebar.vue
@@ -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);
+			}
 		},
 	},
 });
--- a/src/main.ts
+++ b/src/main.ts
@@ -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");
--- a/src/pages/News.vue
+++ b/src/pages/News.vue
@@ -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>
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -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;
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,16 +1,11 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import Components from "unplugin-vue-components/vite";
-import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
+// Vuetify
+import vuetify from "vite-plugin-vuetify";

 // https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [
-		vue(),
-		Components({
-			resolvers: [AntDesignVueResolver()],
-		}),
-	],
+	plugins: [vue(), vuetify()],

 	// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
 	// prevent vite from obscuring rust errors