👽️ migrate to vuetify4

2026-03-21 04:49:46 +08:00 · 2026-02-25 19:13:58 +08:00
parent f42e6d4c8a
commit a4b4232671
16 changed files with 819 additions and 1369 deletions
--- a/package.json
+++ b/package.json
@@ -72,9 +72,9 @@
  "dependencies": {
    "@date-fns/tz": "^1.4.1",
    "@mdi/font": "7.4.47",
-    "@sentry/vite-plugin": "^4.9.1",
-    "@sentry/vue": "^10.39.0",
-    "@sentry/core": "^10.39.0",
+    "@sentry/core": "^10.40.0",
+    "@sentry/vite-plugin": "^5.1.0",
+    "@sentry/vue": "^10.40.0",
    "@skipperndt/plugin-machine-uid": "^0.1.3",
    "@tauri-apps/api": "^2.10.1",
    "@tauri-apps/plugin-cli": "^2.4.1",
@@ -104,16 +104,16 @@
    "sass-embedded": "^1.97.3",
    "swiper": "^12.1.2",
    "uuid": "^13.0.0",
-    "vue": "^3.5.28",
+    "vue": "^3.5.29",
    "vue-echarts": "^8.0.1",
    "vue-json-pretty": "^2.6.0",
    "vue-router": "^5.0.3",
-    "vuetify": "^3.12.0",
+    "vuetify": "^4.0.0",
    "wcag-color": "^1.1.1"
  },
  "devDependencies": {
    "@btmuli/stylelint-plugin-color": "^0.1.0",
-    "@eslint/eslintrc": "^3.3.3",
+    "@eslint/eslintrc": "^3.3.4",
    "@eslint/js": "9.39.2",
    "@microsoft/tsdoc": "^0.16.0",
    "@tauri-apps/cli": "2.10.0",
@@ -121,7 +121,7 @@
    "@types/js-md5": "^0.8.0",
    "@types/json-bigint": "^1.0.4",
    "@types/node": "^25.3.0",
-    "@typescript-eslint/parser": "^8.56.0",
+    "@typescript-eslint/parser": "^8.56.1",
    "@typescript/native-preview": "7.0.0-dev.20260222.1",
    "@vitejs/plugin-vue": "^6.0.4",
    "app-root-path": "^3.1.0",
@@ -129,17 +129,17 @@
    "envfile": "^7.1.0",
    "eslint": "9.39.2",
    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsonc": "^3.0.0",
+    "eslint-plugin-jsonc": "^3.1.0",
    "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-tsdoc": "^0.5.0",
+    "eslint-plugin-tsdoc": "^0.5.1",
    "eslint-plugin-vue": "^10.8.0",
-    "eslint-plugin-yml": "^3.2.1",
+    "eslint-plugin-yml": "^3.3.0",
    "fs-extra": "^11.3.3",
    "globals": "^17.3.0",
    "husky": "^9.1.7",
    "jsonc-eslint-parser": "^3.1.0",
    "lint-staged": "^16.2.7",
-    "oxlint": "^1.49.0",
+    "oxlint": "^1.50.0",
    "postcss-preset-env": "^11.2.0",
    "prettier": "3.8.1",
    "stylelint": "^17.3.0",
@@ -153,7 +153,7 @@
    "stylelint-scss": "^7.0.0",
    "tsx": "^4.21.0",
    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.56.0",
+    "typescript-eslint": "^8.56.1",
    "vite": "npm:rolldown-vite@^7.3.1",
    "vite-plugin-vue-devtools": "^8.0.6",
    "vite-plugin-vuetify": "^2.1.3",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/assets/index.scss
+++ b/src/assets/index.scss
@@ -1,6 +1,6 @@
 /**
 * 全局样式文件
- * @since Beta v0.9.1
+ * @since Beta v0.9.6
 */

@use "fonts/index";
@@ -57,15 +57,15 @@
  --tgi-snackbar: 9999;
 }

-/*
- * @description 根 html 样式
- * @since Beta v0.3.0
+/**
+ * 根 html 样式
+ * @since Beta v0.9.6
 */

 html {
  overflow: auto;
  background: var(--app-page-bg);
-  font-family: var(--font-text);
+  font-family: var(--font-text) !important;
  font-size: 16px;
 }

--- a/src/components/app/t-sidebar.vue
+++ b/src/components/app/t-sidebar.vue
@@ -9,7 +9,7 @@
      />
      <div class="mid-menu">
        <!-- 菜单项 -->
-        <v-list-item :link="true" :title.attr="'首页'" href="/">
+        <v-list-item :link="true" :title.attr="'首页'" class="thin-spacer" href="/">
          <template #title>首页</template>
          <template #prepend>
            <img alt="homeIcon" class="side-icon paimon" src="/UI/nav/paimon.webp" />
@@ -206,7 +206,7 @@
        <!-- 用户菜单 -->
        <v-menu :open-on-click="true" location="end">
          <template #activator="{ props }">
-            <v-list-item :title.attr="userInfo.nickname" v-bind="props">
+            <v-list-item :title.attr="userInfo.nickname" class="thin-spacer" v-bind="props">
              <template #title>{{ userInfo.nickname }}</template>
              <template #prepend>
                <img :src="userInfo.avatar" alt="userIcon" class="side-icon paimon" />
@@ -812,8 +812,10 @@ async function tryLaunchGame(): Promise<void> {
  }
 }
 </script>
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .tsb-box {
+  --v-list-prepend-gap: 24px;
+
  position: relative;
  background: var(--app-side-bg);
  color: var(--app-side-content);
@@ -841,8 +843,8 @@ async function tryLaunchGame(): Promise<void> {
  width: 100%;
 }

-:deep(.side-icon.paimon + .v-list-item__spacer) {
-  width: 24px;
+.thin-spacer {
+  --v-list-prepend-gap: 16px;
 }

 .side-icon {
--- a/src/components/pageBag/pbo-material.vue
+++ b/src/components/pageBag/pbo-material.vue
@@ -5,7 +5,7 @@
      <slot name="left"></slot>
      <div class="pbom-box">
        <div class="pbom-share">
-          {{ dbInfo.updated }} | UID {{ props.uid }} | TeyvatGuide v{{ version }}
+          ID {{ props.data.info.id }} | UID {{ props.uid }} | TeyvatGuide v{{ version }}
        </div>
        <div class="pbom-top">
          <div class="pbom-icon">
@@ -81,7 +81,7 @@ const showRecord = computed<boolean>(() => !SKIP_BAG_TYPES.includes(props.data.i
 onMounted(async () => (version.value = await getVersion()));

 const dbInfo = shallowRef<TGApp.Sqlite.UserBag.MaterialTable>(props.data.tb);
-
+console.log(dbInfo.value);
 watch(
  () => props.data.info,
  async () => await refreshDb(),
--- a/src/components/userAvatar/tua-avatar-box.vue
+++ b/src/components/userAvatar/tua-avatar-box.vue
@@ -62,7 +62,7 @@ import { computed } from "vue";

 import TuaRelicBox from "./tua-relic-box.vue";

-import { AppCharacterData } from "@/data/index.js";
+import { AppCalendarData, AppCharacterData } from "@/data/index.js";

 type fixedLenArr<T, N extends number> = [T, ...Array<T>] & { length: N };
 type AvatarRelics = fixedLenArr<TGApp.Game.Avatar.Relic | false, 5>;
@@ -74,7 +74,9 @@ const userStore = useUserStore();
 const avatarIcon = computed<string>(() => {
  const costume = getCostume();
  if (costume) return `/WIKI/costume/${costume.id}.webp`;
-  return `/WIKI/character/${props.role.avatar.id}.webp`;
+  const findA = AppCalendarData.find((a) => a.id === props.role.avatar.id);
+  if (findA) return `/WIKI/character/${props.role.avatar.id}.webp`;
+  return props.role.avatar.icon;
 });
 const avatarBox = computed<TItemBoxData>(() => ({
  size: "100px",
@@ -90,20 +92,25 @@ const avatarBox = computed<TItemBoxData>(() => ({
  display: "inner",
  clickable: true,
 }));
-const weaponBox = computed<TItemBoxData>(() => ({
-  size: "65px",
-  height: "65px",
-  bg: `/icon/bg/${props.role.weapon.rarity}-Star.webp`,
-  icon: `/WIKI/weapon/${props.role.weapon.id}.webp`,
-  lt: `/icon/weapon/${props.role.weapon.type_name}.webp`,
-  ltSize: "20px",
-  rt: props.role.weapon.affix_level.toString(),
-  rtSize: "20px",
-  innerText: props.role.weapon.name,
-  innerHeight: 20,
-  display: "inner",
-  clickable: true,
-}));
+const weaponBox = computed<TItemBoxData>(() => {
+  let icon = props.role.weapon.icon;
+  const findW = AppCalendarData.find((w) => w.id === props.role.weapon.id);
+  if (findW) icon = `/WIKI/weapon/${props.role.weapon.id}.webp`;
+  return {
+    size: "65px",
+    height: "65px",
+    bg: `/icon/bg/${props.role.weapon.rarity}-Star.webp`,
+    icon: icon,
+    lt: `/icon/weapon/${props.role.weapon.type_name}.webp`,
+    ltSize: "20px",
+    rt: props.role.weapon.affix_level.toString(),
+    rtSize: "20px",
+    innerText: props.role.weapon.name,
+    innerHeight: 20,
+    display: "inner",
+    clickable: true,
+  };
+});
 const relicsBox = computed<AvatarRelics>(() => {
  const relics = props.role.relics;
  return [
@@ -146,7 +153,7 @@ function getWeaponTitle(): string {
  title.push(`${weapon.rarity}星 精炼${weapon.affix_level} Lv.${weapon.level}`);
  const propMain = userStore.getProp(weapon.main_property.property_type);
  title.push(`${propMain !== false ? propMain.name : "未知属性"} - ${weapon.main_property.final}`);
-  if (weapon.sub_property !== null) {
+  if (weapon.sub_property !== undefined && weapon.sub_property !== null) {
    const propSub = userStore.getProp(weapon.sub_property.property_type);
    title.push(`${propSub !== false ? propSub.name : "未知属性"} - ${weapon.sub_property.final}`);
  }
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,11 +1,13 @@
 /**
 * 应用入口
- * @since Beta v0.9.2
+ * @since Beta v0.9.6
 */

 import * as Sentry from "@sentry/vue";
 import { createApp, defineCustomElement } from "vue";
 import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";

 import App from "./App.vue";
 import TLink from "./components/web/t-link.vue";
@@ -17,6 +19,8 @@ import "vuetify/styles";
 import "./assets/index.scss";

 const app = createApp(App);
+const vuetify = createVuetify({ components, directives });
+
 customElements.define("t-link", defineCustomElement(TLink));

 Sentry.init({
@@ -45,4 +49,4 @@ Sentry.init({
 Sentry.setTag("commitHash", import.meta.env.VITE_COMMIT_HASH);
 Sentry.setTag("buildTime", import.meta.env.VITE_BUILD_TIME);

-app.use(router).use(store).use(createVuetify()).mount("#app");
+app.use(router).use(store).use(vuetify).mount("#app");
--- a/src/pages/User/Scripts.vue
+++ b/src/pages/User/Scripts.vue
@@ -18,19 +18,19 @@
        >
          <template #selection="{ item }">
            <div class="select-main">
-              <img :src="item.raw.brief.avatar" alt="icon" />
+              <img :src="item.brief.avatar" alt="icon" />
              <div class="content">
-                <span>{{ item.raw.brief.nickname }}</span>
-                <span>UID:{{ item.raw.uid }}</span>
+                <span>{{ item.brief.nickname }}</span>
+                <span>UID:{{ item.uid }}</span>
              </div>
            </div>
          </template>
          <template #item="{ props, item }">
            <div class="select-item" v-bind="props">
-              <img :src="item.raw.brief.avatar" alt="icon" />
+              <img :src="item.brief.avatar" alt="icon" />
              <div class="content">
-                <span>{{ item.raw.brief.nickname }}</span>
-                <span>UID:{{ item.raw.uid }}</span>
+                <span>{{ item.brief.nickname }}</span>
+                <span>UID:{{ item.uid }}</span>
              </div>
            </div>
          </template>
--- a/src/pages/WIKI/Material.vue
+++ b/src/pages/WIKI/Material.vue
@@ -21,7 +21,7 @@
          <template #item="{ props, item }">
            <v-list-item v-bind="props">
              <template #append>
-                <v-chip>{{ item.raw.number }}</v-chip>
+                <v-chip>{{ item.number }}</v-chip>
              </template>
            </v-list-item>
          </template>
--- a/src/pages/WIKI/NameCard.vue
+++ b/src/pages/WIKI/NameCard.vue
@@ -20,7 +20,7 @@
          <template #item="{ props, item }">
            <v-list-item v-bind="props">
              <template #append>
-                <v-chip>{{ item.raw.number }}</v-chip>
+                <v-chip>{{ item.number }}</v-chip>
              </template>
            </v-list-item>
          </template>
--- a/src/pages/common/PageBagMaterial.vue
+++ b/src/pages/common/PageBagMaterial.vue
@@ -64,7 +64,7 @@
          <template #item="{ props, item }">
            <v-list-item v-bind="props">
              <template #append>
-                <v-chip>{{ item.raw.number }}</v-chip>
+                <v-chip>{{ item.number }}</v-chip>
              </template>
            </v-list-item>
          </template>
--- a/src/pages/common/PageHome.vue
+++ b/src/pages/common/PageHome.vue
@@ -16,30 +16,30 @@
          <template #selection="{ item }">
            <div class="select-item main">
              <TMiImg
-                v-if="item.raw.icon"
-                :alt="item.raw.title"
+                v-if="item.icon"
+                :alt="item.title"
                :ori="true"
-                :src="item.raw.icon"
-                :title="item.raw.title"
+                :src="item.icon"
+                :title="item.title"
                class="icon"
              />
-              <span>{{ item.raw.title }}</span>
+              <span>{{ item.title }}</span>
            </div>
          </template>
          <template #item="{ props, item }">
            <div
-              :class="item.raw.gid === curGid ? 'selected' : ''"
+              :class="item.gid === curGid ? 'selected' : ''"
              class="select-item sub"
              v-bind="props"
            >
              <TMiImg
-                v-if="item.raw.icon"
-                :alt="item.raw.title"
-                :src="item.raw.icon"
-                :title="item.raw.title"
+                v-if="item.icon"
+                :alt="item.title"
+                :src="item.icon"
+                :title="item.title"
                class="icon"
              />
-              <span>{{ item.raw.title }}</span>
+              <span>{{ item.title }}</span>
            </div>
          </template>
        </v-select>
--- a/src/pages/common/PostCollect.vue
+++ b/src/pages/common/PostCollect.vue
@@ -16,7 +16,7 @@
        variant="outlined"
      >
        <template v-slot:item="{ props, item }">
-          <v-list-item :subtitle="item.raw.desc" :title="item.raw.title" v-bind="props" />
+          <v-list-item :subtitle="item.desc" :title="item.title" v-bind="props" />
        </template>
      </v-select>
    </div>
--- a/src/pages/common/PostForum.vue
+++ b/src/pages/common/PostForum.vue
@@ -21,30 +21,20 @@
        <template #selection="{ item }">
          <div class="select-item main">
            <TMiImg
-              v-if="item.raw.icon"
-              :alt="item.raw.text"
+              v-if="item.icon"
+              :alt="item.text"
              :ori="true"
-              :src="item.raw.icon"
-              :title="item.raw.text"
+              :src="item.icon"
+              :title="item.text"
              class="icon"
            />
-            <span>{{ item.raw.text }}</span>
+            <span>{{ item.text }}</span>
          </div>
        </template>
        <template #item="{ props, item }">
-          <div
-            :class="{ selected: item.raw.gid === curGid }"
-            class="select-item sub"
-            v-bind="props"
-          >
-            <TMiImg
-              v-if="item.raw.icon"
-              :alt="item.raw.text"
-              :ori="true"
-              :src="item.raw.icon"
-              class="icon"
-            />
-            <span>{{ item.raw.text }}</span>
+          <div :class="{ selected: item.gid === curGid }" class="select-item sub" v-bind="props">
+            <TMiImg v-if="item.icon" :alt="item.text" :ori="true" :src="item.icon" class="icon" />
+            <span>{{ item.text }}</span>
          </div>
        </template>
      </v-select>
@@ -59,25 +49,19 @@
      >
        <template #selection="{ item }">
          <div class="select-item main">
-            <TMiImg
-              :alt="item.raw.text"
-              :ori="true"
-              :src="item.raw.icon"
-              :title="item.raw.text"
-              class="icon"
-            />
-            <span>{{ item.raw.text }}</span>
+            <TMiImg :alt="item.text" :ori="true" :src="item.icon" :title="item.text" class="icon" />
+            <span>{{ item.text }}</span>
          </div>
        </template>
        <template #item="{ props, item }">
          <div
-            :class="{ selected: item.raw.value === selectedForum?.value }"
+            :class="{ selected: item.value === selectedForum?.value }"
            class="select-item sub"
            v-bind="props"
-            @click="selectedForum = item.raw"
+            @click="() => (selectedForum = item)"
          >
-            <TMiImg :alt="item.raw.text" :ori="true" :src="item.raw.icon" class="icon" />
-            <span>{{ item.raw.text }}</span>
+            <TMiImg :alt="item.text" :ori="true" :src="item.icon" class="icon" />
+            <span>{{ item.text }}</span>
          </div>
        </template>
      </v-select>
--- a/src/pages/common/PostTopic.vue
+++ b/src/pages/common/PostTopic.vue
@@ -32,25 +32,25 @@
        <template #selection="{ item }">
          <div class="select-item main">
            <img
-              v-if="item.raw.icon"
-              :alt="item.raw.name"
-              :src="item.raw.icon"
-              :title="item.raw.name"
+              v-if="item.icon"
+              :alt="item.name"
+              :src="item.icon"
+              :title="item.name"
              class="icon"
            />
-            <span>{{ item.raw.name }}</span>
+            <span>{{ item.name }}</span>
          </div>
        </template>
        <template #item="{ props, item }">
-          <div :class="{ selected: item.raw.id === curGid }" class="select-item sub" v-bind="props">
+          <div :class="{ selected: item.id === curGid }" class="select-item sub" v-bind="props">
            <img
-              v-if="item.raw.icon"
-              :alt="item.raw.name"
-              :src="item.raw.icon"
-              :title="item.raw.name"
+              v-if="item.icon"
+              :alt="item.name"
+              :src="item.icon"
+              :title="item.name"
              class="icon"
            />
-            <span>{{ item.raw.name }}</span>
+            <span>{{ item.name }}</span>
          </div>
        </template>
      </v-select>
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,7 +5,7 @@

 import { sentryVitePlugin } from "@sentry/vite-plugin";
 import vue from "@vitejs/plugin-vue";
-import postcssPresetEnv from "postcss-preset-env";
+// import postcssPresetEnv from "postcss-preset-env";
 import { defineConfig } from "vite";
 import VueDevtools from "vite-plugin-vue-devtools";
 import vuetify from "vite-plugin-vuetify";
@@ -57,7 +57,17 @@ export default defineConfig({
    chunkSizeWarningLimit: 8192,
    sourcemap: true,
  },
-  css: {
-    postcss: { plugins: [postcssPresetEnv({ stage: 1, features: { "color-function": true } })] },
-  },
+  // css: {
+  //   postcss: {
+  //     plugins: [
+  //       postcssPresetEnv({
+  //         stage: 2,
+  //         features: {
+  //           "color-function": true,
+  //           "cascade-layers": true,
+  //         },
+  //       }),
+  //     ],
+  //   },
+  // },
 });