♻️ 路径优化

This commit is contained in:
BTMuli
2023-07-26 12:12:11 +08:00
parent eab72c1503
commit 709f210cea
7 changed files with 80 additions and 87 deletions

View File

@@ -1,5 +0,0 @@
<template>
<h1>测试页</h1>
</template>
<script lang="ts" setup></script>
<style lang="css" scoped></style>

View File

@@ -18,7 +18,7 @@
<v-btn prepend-icon="mdi-export" class="ms-2 top-btn" @click="exportJson"> 导出 </v-btn> <v-btn prepend-icon="mdi-export" class="ms-2 top-btn" @click="exportJson"> 导出 </v-btn>
</template> </template>
</v-app-bar> </v-app-bar>
<TOLoading v-model="loading" :title="loadingTitle" /> <ToLoading v-model="loading" :title="loadingTitle" />
<div class="wrap"> <div class="wrap">
<!-- 左侧菜单 --> <!-- 左侧菜单 -->
<div class="left-wrap"> <div class="left-wrap">
@@ -117,26 +117,26 @@
<script lang="ts" setup> <script lang="ts" setup>
// vue // vue
import { onMounted, ref, onBeforeMount, computed } from "vue"; import { onMounted, ref, onBeforeMount, computed } from "vue";
import TOLoading from "../components/overlay/to-loading.vue"; import ToLoading from "../../components/overlay/to-loading.vue";
// tauri // tauri
import { dialog, fs } from "@tauri-apps/api"; import { dialog, fs } from "@tauri-apps/api";
// Store // Store
import { useAchievementsStore } from "../store/modules/achievements"; import { useAchievementsStore } from "../../store/modules/achievements";
// Utils // Utils
import { createTGWindow } from "../utils/TGWindow"; import { createTGWindow } from "../../utils/TGWindow";
import { getUiafHeader, readUiafData, verifyUiafData } from "../utils/UIAF"; import { getUiafHeader, readUiafData, verifyUiafData } from "../../utils/UIAF";
import TGSqlite from "../plugins/Sqlite"; import TGSqlite from "../../plugins/Sqlite";
// Store // Store
const achievementsStore = useAchievementsStore(); const achievementsStore = useAchievementsStore();
// loading // loading
const loading = ref(true as boolean); const loading = ref<boolean>(true);
const loadingTitle = ref("正在加载数据" as string); const loadingTitle = ref<string>("正在加载数据");
// data // data
const title = ref(achievementsStore.title as string); const title = ref(achievementsStore.title);
const getCardInfo = ref({} as TGApp.Sqlite.NameCard.SingleTable); const getCardInfo = ref<TGApp.Sqlite.NameCard.SingleTable>(<TGApp.Sqlite.NameCard.SingleTable>{});
const getCardImg = computed(() => { const getCardImg = computed(() => {
return { return {
profile: `/source/nameCard/profile/${getCardInfo.value.name}.webp`, profile: `/source/nameCard/profile/${getCardInfo.value.name}.webp`,
@@ -145,26 +145,26 @@ const getCardImg = computed(() => {
}; };
}); });
// series // series
const seriesList = ref([] as TGApp.Sqlite.Achievement.SeriesTable[]); const seriesList = ref<TGApp.Sqlite.Achievement.SeriesTable[]>([]);
const selectedSeries = ref(-1 as number); const selectedSeries = ref<number>(-1);
const selectedAchievement = ref([] as TGApp.Sqlite.Achievement.SingleTable[]); const selectedAchievement = ref<TGApp.Sqlite.Achievement.SingleTable[]>([]);
const renderAchievement = computed(() => { const renderAchievement = computed(() => {
return selectedAchievement.value.slice(start.value, start.value + itemCount.value + 1); return selectedAchievement.value.slice(start.value, start.value + itemCount.value + 1);
}); });
// virtual list // virtual list
const start = ref(0 as number); const start = ref<number>(0);
const itemCount = computed(() => { const itemCount = computed(() => {
return Math.ceil((window.innerHeight - 100) / 76); return Math.ceil((window.innerHeight - 100) / 76);
}); });
const emptyHeight = computed(() => { const emptyHeight = computed(() => {
return selectedAchievement.value.length * 76; return selectedAchievement.value.length * 76;
}); });
const translateY = ref("0px" as string); const translateY = ref<string>("0px");
// render // render
const search = ref("" as string); const search = ref<string>("");
const snackbar = ref(false as boolean); const snackbar = ref<boolean>(false);
const snackbarText = ref("" as string); const snackbarText = ref<string>("");
const snackbarColor = ref("#F5810A" as string); const snackbarColor = ref<string>("#F5810A");
onBeforeMount(async () => { onBeforeMount(async () => {
const { total, fin } = await TGSqlite.getAchievementsOverview(); const { total, fin } = await TGSqlite.getAchievementsOverview();
@@ -181,12 +181,10 @@ onMounted(async () => {
loading.value = false; loading.value = false;
}); });
function handleScroll(e: Event) { function handleScroll(e: Event): void {
const target: HTMLElement = <HTMLElement>e.target;
// scrollTop // scrollTop
if ( if (target.scrollTop + target.offsetHeight >= target.scrollHeight) {
(e.target as HTMLElement).scrollTop + (e.target as HTMLElement).offsetHeight >=
(e.target as HTMLElement).scrollHeight
) {
// selectedAchievement itemCount // selectedAchievement itemCount
if (selectedAchievement.value.length <= itemCount.value) { if (selectedAchievement.value.length <= itemCount.value) {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
@@ -201,9 +199,9 @@ function handleScroll(e: Event) {
}); });
return; return;
} }
const scrollTop = target.scrollTop;
if (selectedSeries.value !== 0 && selectedSeries.value !== 17 && selectedSeries.value !== -1) { if (selectedSeries.value !== 0 && selectedSeries.value !== 17 && selectedSeries.value !== -1) {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
const { scrollTop } = e.target as HTMLElement;
if (scrollTop < 86.8) { if (scrollTop < 86.8) {
start.value = 0; start.value = 0;
translateY.value = "0px"; translateY.value = "0px";
@@ -214,7 +212,6 @@ function handleScroll(e: Event) {
}); });
} else { } else {
window.requestAnimationFrame(() => { window.requestAnimationFrame(() => {
const { scrollTop } = e.target as HTMLElement;
start.value = Math.floor(scrollTop / 76); start.value = Math.floor(scrollTop / 76);
translateY.value = `${scrollTop}px`; translateY.value = `${scrollTop}px`;
}); });
@@ -222,7 +219,7 @@ function handleScroll(e: Event) {
} }
// //
async function selectSeries(index: number) { async function selectSeries(index: number): Promise<void> {
// //
if (selectedSeries.value === index) { if (selectedSeries.value === index) {
snackbarText.value = "已经选中该系列"; snackbarText.value = "已经选中该系列";
@@ -241,11 +238,11 @@ async function selectSeries(index: number) {
} }
// //
function openImg() { function openImg(): void {
createTGWindow(getCardImg.value.profile, "nameCard", getCardInfo.value.name, 840, 400, false); createTGWindow(getCardImg.value.profile, "nameCard", getCardInfo.value.name, 840, 400, false);
} }
async function searchCard() { async function searchCard(): Promise<void> {
if (search.value === "") { if (search.value === "") {
snackbarColor.value = "#F5810A"; snackbarColor.value = "#F5810A";
snackbarText.value = "请输入搜索内容"; snackbarText.value = "请输入搜索内容";
@@ -264,7 +261,7 @@ async function searchCard() {
loading.value = false; loading.value = false;
} }
// UIAF // UIAF
async function importJson() { async function importJson(): Promise<void> {
const selectedFile = await dialog.open({ const selectedFile = await dialog.open({
multiple: false, multiple: false,
filters: [ filters: [
@@ -293,7 +290,7 @@ async function importJson() {
} }
// //
async function exportJson() { async function exportJson(): Promise<void> {
// //
if (achievementsStore.finAchievements === 0) { if (achievementsStore.finAchievements === 0) {
snackbarColor.value = "#F5810A"; snackbarColor.value = "#F5810A";

View File

@@ -34,7 +34,7 @@
</v-card-subtitle> </v-card-subtitle>
<v-card-subtitle v-show="appStore.devMode"> id: {{ item.id }} </v-card-subtitle> <v-card-subtitle v-show="appStore.devMode"> id: {{ item.id }} </v-card-subtitle>
<v-btn v-show="appStore.devMode" class="anno-dev-btn" @click="toJson(item)"> <v-btn v-show="appStore.devMode" class="anno-dev-btn" @click="toJson(item)">
<img src="../assets/icons/arrow-right.svg" alt="right" /> <img src="../../assets/icons/arrow-right.svg" alt="right" />
<span>查看数据</span> <span>查看数据</span>
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
@@ -61,7 +61,7 @@
</v-card-subtitle> </v-card-subtitle>
<v-card-subtitle v-show="appStore.devMode"> id: {{ item.id }} </v-card-subtitle> <v-card-subtitle v-show="appStore.devMode"> id: {{ item.id }} </v-card-subtitle>
<v-btn v-show="appStore.devMode" class="anno-dev-btn" @click="toJson(item)"> <v-btn v-show="appStore.devMode" class="anno-dev-btn" @click="toJson(item)">
<img src="../assets/icons/arrow-right.svg" alt="right" /> <img src="../../assets/icons/arrow-right.svg" alt="right" />
<span>查看数据</span> <span>查看数据</span>
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
@@ -75,13 +75,13 @@
// vue // vue
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import ToLoading from "../components/overlay/to-loading.vue"; import ToLoading from "../../components/overlay/to-loading.vue";
// store // store
import { useAppStore } from "../store/modules/app"; import { useAppStore } from "../../store/modules/app";
// utils // utils
import TGRequest from "../web/request/TGRequest"; import TGRequest from "../../web/request/TGRequest";
import TGUtils from "../web/utils/TGUtils"; import TGUtils from "../../web/utils/TGUtils";
import { createTGWindow } from "../utils/TGWindow"; import { createTGWindow } from "../../utils/TGWindow";
// store // store
const appStore = useAppStore(); const appStore = useAppStore();
@@ -95,10 +95,10 @@ const router = useRouter();
// //
const tab = ref<string>(""); const tab = ref<string>("");
const annoCards = ref({ const annoCards = ref({
activity: [] as TGApp.App.Announcement.ListCard[], activity: <TGApp.App.Announcement.ListCard[]>[],
game: [] as TGApp.App.Announcement.ListCard[], game: <TGApp.App.Announcement.ListCard[]>[],
}); });
const annoData = ref<TGApp.BBS.Announcement.ListData>({} as TGApp.BBS.Announcement.ListData); const annoData = ref<TGApp.BBS.Announcement.ListData>(<TGApp.BBS.Announcement.ListData>{});
onMounted(async () => { onMounted(async () => {
loadingTitle.value = "正在获取公告数据"; loadingTitle.value = "正在获取公告数据";
@@ -119,26 +119,24 @@ onMounted(async () => {
loading.value = false; loading.value = false;
}); });
async function switchNews() { async function switchNews(): Promise<void> {
await router.push("/news/2"); await router.push("/news/2");
} }
async function toPost(item: TGApp.App.Announcement.ListCard) { async function toPost(item: TGApp.App.Announcement.ListCard): Promise<void> {
const path = router.resolve({ const path = router.resolve({
name: "游戏内公告", name: "游戏内公告",
params: { params: {
// eslint-disable-next-line camelcase
anno_id: item.id, anno_id: item.id,
}, },
}).href; }).href;
createTGWindow(path, "游戏内公告", item.title, 960, 720, false, false); createTGWindow(path, "游戏内公告", item.title, 960, 720, false, false);
} }
async function toJson(item: TGApp.App.Announcement.ListCard) { async function toJson(item: TGApp.App.Announcement.ListCard): Promise<void> {
const path = router.resolve({ const path = router.resolve({
name: "游戏内公告JSON", name: "游戏内公告JSON",
params: { params: {
// eslint-disable-next-line camelcase
anno_id: item.id, anno_id: item.id,
}, },
}).href; }).href;

View File

@@ -31,7 +31,7 @@
</v-list-item> </v-list-item>
<v-list-item title="成就版本"> <v-list-item title="成就版本">
<template #prepend> <template #prepend>
<img class="config-icon" src="../assets/icons/achievements.svg" alt="Achievements" /> <img class="config-icon" src="../../assets/icons/achievements.svg" alt="Achievements" />
</template> </template>
<template #append> <template #append>
<v-list-item-subtitle>{{ achievementsStore.lastVersion }}</v-list-item-subtitle> <v-list-item-subtitle>{{ achievementsStore.lastVersion }}</v-list-item-subtitle>
@@ -50,7 +50,7 @@
<template #append> <template #append>
<v-btn class="card-btn" @click="tryConfirm('refreshUser')"> <v-btn class="card-btn" @click="tryConfirm('refreshUser')">
<template #prepend> <template #prepend>
<img src="../assets/icons/circle-check.svg" alt="check" /> <img src="../../assets/icons/circle-check.svg" alt="check" />
刷新数据 刷新数据
</template> </template>
</v-btn> </v-btn>
@@ -112,7 +112,7 @@
<template #append> <template #append>
<v-btn class="card-btn" @click="submitHome"> <v-btn class="card-btn" @click="submitHome">
<template #prepend> <template #prepend>
<img src="../assets/icons/circle-check.svg" alt="check" /> <img src="../../assets/icons/circle-check.svg" alt="check" />
确定 确定
</template> </template>
</v-btn> </v-btn>
@@ -194,21 +194,21 @@
<script lang="ts" setup> <script lang="ts" setup>
// vue // vue
import { computed, onMounted, ref } from "vue"; import { computed, onMounted, ref } from "vue";
import ToLoading from "../components/overlay/to-loading.vue"; import ToLoading from "../../components/overlay/to-loading.vue";
import ToConfirm from "../components/overlay/to-confirm.vue"; import ToConfirm from "../../components/overlay/to-confirm.vue";
// tauri // tauri
import { app, fs, os } from "@tauri-apps/api"; import { app, fs, os } from "@tauri-apps/api";
// store // store
import { useAppStore } from "../store/modules/app"; import { useAppStore } from "../../store/modules/app";
import { useHomeStore } from "../store/modules/home"; import { useHomeStore } from "../../store/modules/home";
import { useAchievementsStore } from "../store/modules/achievements"; import { useAchievementsStore } from "../../store/modules/achievements";
import { useUserStore } from "../store/modules/user"; import { useUserStore } from "../../store/modules/user";
// utils // utils
import { backupUiafData, restoreUiafData } from "../utils/UIAF"; import { backupUiafData, restoreUiafData } from "../../utils/UIAF";
import { backupAbyssData, backupCookieData } from "../web/utils/backupData"; import { backupAbyssData, backupCookieData } from "../../web/utils/backupData";
import { restoreAbyssData, restoreCookieData } from "../web/utils/restoreData"; import { restoreAbyssData, restoreCookieData } from "../../web/utils/restoreData";
import TGSqlite from "../plugins/Sqlite"; import TGSqlite from "../../plugins/Sqlite";
import TGRequest from "../web/request/TGRequest"; import TGRequest from "../../web/request/TGRequest";
// Store // Store
const appStore = useAppStore(); const appStore = useAppStore();

View File

@@ -6,33 +6,33 @@
<script lang="ts" setup> <script lang="ts" setup>
// vue // vue
import { markRaw, onBeforeMount, onMounted, onUnmounted, onUpdated, ref } from "vue"; import { markRaw, onBeforeMount, onMounted, onUnmounted, onUpdated, ref } from "vue";
import ToLoading from "../components/overlay/to-loading.vue"; import ToLoading from "../../components/overlay/to-loading.vue";
import TPool from "../components/main/t-pool.vue"; import TPool from "../../components/main/t-pool.vue";
import TPosition from "../components/main/t-position.vue"; import TPosition from "../../components/main/t-position.vue";
import TCalendar from "../components/main/t-calendar.vue"; import TCalendar from "../../components/main/t-calendar.vue";
// store // store
import { useHomeStore } from "../store/modules/home"; import { useHomeStore } from "../../store/modules/home";
import { useAppStore } from "../store/modules/app"; import { useAppStore } from "../../store/modules/app";
import { useUserStore } from "../store/modules/user"; import { useUserStore } from "../../store/modules/user";
// utils // utils
import { getBuildTime } from "../utils/TGBuild"; import { getBuildTime } from "../../utils/TGBuild";
import TGSqlite from "../plugins/Sqlite"; import TGSqlite from "../../plugins/Sqlite";
// store // store
const appStore = useAppStore(); const appStore = useAppStore();
const homeStore = useHomeStore(); const homeStore = useHomeStore();
// loading // loading
const loading = ref(true as boolean); const loading = ref<boolean>(true);
const loadingTitle = ref("正在加载首页"); const loadingTitle = ref<string>("正在加载首页");
const loadingSubtitle = ref(""); const loadingSubtitle = ref<string>("");
// data // data
const components = ref([] as any[]); const components = ref<any[]>([]);
const itemRefs = ref([] as any[]); const itemRefs = ref<any[]>([]);
// //
const timer = ref(null as any); const timer = ref<any>(null);
function readLoading(): void { function readLoading(): void {
if (!loading.value) return; if (!loading.value) return;
@@ -82,7 +82,7 @@ onMounted(async () => {
timer.value = setInterval(readLoading, 100); timer.value = setInterval(readLoading, 100);
}); });
function setItemRef(item: any) { function setItemRef(item: any): void {
if (itemRefs.value.includes(item)) return; if (itemRefs.value.includes(item)) return;
itemRefs.value.push(item); itemRefs.value.push(item);
} }

View File

@@ -0,0 +1,3 @@
<template>
<h1>测试页</h1>
</template>

View File

@@ -2,18 +2,18 @@
* @file router modules main.ts * @file router modules main.ts
* @description 主路由模块 * @description 主路由模块
* @author BTMuli<bt-muli@outlook.com> * @author BTMuli<bt-muli@outlook.com>
* @since Alpha v0.1.6 * @since Alpha v0.2.2
*/ */
// 信息展示 // 信息展示
import Announcements from "../../pages/Announcements.vue"; import Announcements from "../../pages/common/Announcements.vue";
import Home from "../../pages/Home.vue"; import Home from "../../pages/common/Home.vue";
// 数据交互 // 数据交互
import Achievements from "../../pages/Achievements.vue"; import Achievements from "../../pages/common/Achievements.vue";
// 应用配置相关 // 应用配置相关
import Config from "../../pages/Config.vue"; import Config from "../../pages/common/Config.vue";
// 测试页 // 测试页
import Test from "../../pages/Test.vue"; import Test from "../../pages/common/Test.vue";
const mainRoutes = [ const mainRoutes = [
{ {