🌱 角色 wiki 材料组件化，命座样式草创

src/components/wiki/twc-constellations.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="twc-constellations-box">
+    <div class="twc-constellations-title">命座</div>
+    <div class="twc-constellation" v-for="item in props.data" :key="item.Id">
+      <div class="twc-constellation-top">
+        <!-- todo 换成本地资源 -->
+        <img :src="`https://api.ambr.top/assets/UI/${item.Icon}.png`" alt="icon" />
+        <span>{{ item.Name }}</span>
+      </div>
+      <div class="twc-constellation-bottom">
+        <span v-html="parseDesc(item.Description)"></span>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+interface TwcConstellationProps {
+  data: TGApp.Plugins.Hutao.Character.RhisdTalent[];
+}
+const props = defineProps<TwcConstellationProps>();
+
+function parseDesc(desc: string): string {
+  const reg = /<color=(.*?)>(.*?)<\/color>/g;
+  let match = reg.exec(desc);
+  while (match !== null) {
+    const color = match[1];
+    const text = match[2];
+    desc = desc.replace(
+      match[0],
+      `<span title="${text}" style="color: ${color};font-weight: bold;">${text}</span>`,
+    );
+    match = reg.exec(desc);
+  }
+  desc = desc.replace(/\\n/g, "<br />");
+  return desc;
+}
+</script>
+<style lang="css" scoped>
+.twc-constellations-box {
+  display: flex;
+  flex-direction: column;
+  row-gap: 5px;
+}
+
+.twc-constellations-title {
+  color: var(--common-text-title);
+  font-family: var(--font-title);
+  font-size: 18px;
+}
+
+.twc-constellation {
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+  border: 1px solid var(--common-shadow-1);
+  border-radius: 5px;
+  row-gap: 5px;
+}
+
+.twc-constellation-top {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-start;
+  gap: 5px;
+}
+
+.twc-constellation-top img {
+  width: 30px;
+  height: 30px;
+  padding: 2px;
+  border-radius: 5px;
+  background: var(--common-shadow-4);
+}
+
+.twc-constellation-top span {
+  border-bottom: 1px solid var(--common-shadow-4);
+  font-weight: bold;
+}
+
+.twc-constellation-bottom {
+  white-space: pre-wrap;
+}
+</style>

src/components/wiki/twc-materials.vue

@@ -0,0 +1,77 @@
+<template>
+  <!-- todo 点击展开 overlay -->
+  <div class="twc-materials-grid">
+    <div class="twc-material-box" v-for="(item, index) in props.data" :key="index">
+      <div class="twc-material-left">
+        <div class="twc-material-bg">
+          <img :src="item.bg" alt="bg" />
+        </div>
+        <div class="twc-material-icon">
+          <img :src="item.icon" alt="icon" />
+        </div>
+      </div>
+      <div class="twc-material-right">
+        {{ item.name }}
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+interface TwcMaterialsProp {
+  data: TGApp.App.Calendar.Material[];
+}
+
+const props = defineProps<TwcMaterialsProp>();
+</script>
+<style lang="css" scoped>
+.twc-materials-grid {
+  display: grid;
+  width: 100%;
+  grid-gap: 5px;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.twc-material-box {
+  position: relative;
+  display: flex;
+  height: 45px;
+  border: 1px solid var(--common-shadow-1);
+  border-radius: 5px;
+  background: var(--box-bg-1);
+  gap: 10px;
+}
+
+.twc-material-left {
+  width: 45px;
+  height: 45px;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+}
+
+.twc-material-bg,
+.twc-material-icon {
+  position: absolute;
+  top: 0;
+  width: 45px;
+  height: 45px;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+}
+
+.twc-material-bg img,
+.twc-material-icon img {
+  width: 100%;
+  height: 100%;
+  border-bottom-left-radius: 5px;
+  border-top-left-radius: 5px;
+  object-fit: cover;
+}
+
+.twc-material-right {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--box-text-2);
+  font-size: 14px;
+}
+</style>

src/pages/WIKI/Character.vue

@@ -23,15 +23,15 @@ const cardsInfo = computed(() => AppCharacterData);
 const appStore = useAppStore();
 
 function toOuter(item: TGApp.App.Character.WikiBriefInfo): void {
-  if (item.contentId === 0) {
-    snackbar.value = true;
-    return;
-  }
   // 如果是调试环境，打开 wiki 页面
   if (appStore.devMode) {
     createWiki("Character", item.id.toString());
     return;
   }
+  if (item.contentId === 0) {
+    snackbar.value = true;
+    return;
+  }
   const url = Mys.Api.Obc.replace("{contentId}", item.contentId.toString());
   createTGWindow(url, "Sub_window", `Content_${item.contentId} ${item.name}`, 1200, 800, true);
 }

src/views/tw-character.vue

@@ -43,11 +43,10 @@
         </div>
       </div>
     </div>
-    <div class="twc-material-grid">
-      <!-- todo 换个组件或者组件样式优化 -->
-      <TibCalendarMaterial v-for="(item, index) in data.materials" :key="index" :item="item" />
-    </div>
+    <TwcMaterials :data="data.materials" />
+    <!--    <div class="twc-text-item">{{data?.skills}}</div>-->
     <!-- todo 等级，天赋，命座 -->
+    <TwcConstellations :data="data.constellation" />
     <div class="twc-text">
       <div class="twc-text-title">资料</div>
       <div class="twc-text-item" v-for="(item, index) in data?.talks" :key="index">
@@ -71,9 +70,10 @@ import { useRoute } from "vue-router";
 
 import TSwitchTheme from "../components/app/t-switchTheme.vue";
 import showSnackbar from "../components/func/snackbar";
-import TibCalendarMaterial from "../components/itembox/tib-calendar-material.vue";
 import TItembox from "../components/main/t-itembox.vue";
 import ToLoading from "../components/overlay/to-loading.vue";
+import TwcConstellations from "../components/wiki/twc-constellations.vue";
+import TwcMaterials from "../components/wiki/twc-materials.vue";
 import { getWikiData } from "../data";
 
 // 路由数据
@@ -191,13 +191,6 @@ onMounted(async () => {
   font-weight: bold;
 }
 
-.twc-material-grid {
-  display: grid;
-  width: 100%;
-  grid-template-columns: repeat(3, 1fr);
-  row-gap: 5px;
-}
-
 .twc-text {
   display: flex;
   flex-direction: column;