添加关于页面

<script setup lang="ts">
import { computed } from 'vue';
// 导入外部数据
import { creativityData } from '~/creativity';

// 从 creativityData 中提取技能数据（假设取第一个分类）
const skills = computed(() => {
  const firstCategory = creativityData?.[0];
  if (!firstCategory?.creativity_list) return null;
  
  // 补充原始代码中需要的字段（根据实际数据结构调整）
  return {
    ...firstCategory,
    title: firstCategory.class_name,  // 映射 class_name 到 title
    subtitle: firstCategory.subtitle  // 直接使用 subtitle
  };
});

// 计算属性：技能标签分组（每两个一组）- 使用 reduce 重构
const skillTagGroups = computed(() => {
  if (!skills.value?.creativity_list) return [];
  
  return skills.value.creativity_list.reduce((groups, currentTag) => {
    // 取最后一个分组（可能未填满）
    const lastGroup = groups[groups.length - 1];
    
    if (lastGroup?.length === 2) {
      // 当前分组已满，创建新分组
      groups.push([currentTag]);
    } else {
      // 当前分组未满，添加到最后一个分组
      lastGroup ? lastGroup.push(currentTag) : groups.push([currentTag]);
    }
    
    return groups;
  }, []); // 初始值为空数组
});
</script>
<template>
    <div v-if="skills" class="author-content-item skills">
      <div class="card-content">
        <div class="author-content-item-tips">{{ skills.class_name }}</div>
        <span class="author-content-item-title">{{ skills.subtitle }}</span>
        
        <div class="skills-style-group">
          <!-- 标签分组展示（每两个一组） -->
          <div class="tags-group-all">
            <div class="tags-group-wrapper">
              <div 
                v-for="(group, groupIdx) in skillTagGroups" 
                :key="groupIdx" 
                class="tags-group-icon-pair"
              >
                <div 
                  v-for="(tag, tagIdx) in group" 
                  :key="tagIdx" 
                  class="tags-group-icon" 
                  :style="{ background: tag.color }"
                >
                  <img 
                    class="entered loading"
                    :src="tag.icon" 
                    :title="tag.name"
                    :style="{ color: tag.icon_color || '' }"
                    alt=""
                  >
                </div>
              </div>
            </div>
          </div>

          <!-- 全部技能列表 -->
          <!-- <div class="skills-list">
            <div 
              v-for="(tag, tagIdx) in skills.creativity_list" 
              :key="tagIdx" 
              class="skill-info"
            >
              <div 
                class="skill-icon" 
                :style="{ background: tag.color }"
              >
                <img 
                  v-if="tag.img" 
                  :src="tag.icon" 
                  :title="tag.name"
                  :style="{ color: tag.icon_color || '' }"
                  alt=""
                >
              </div>
              <div class="skill-name">
                <span>{{ tag.name }}</span>
              </div>
            </div>
            <div class="etc ...">...</div>
          </div> -->
        </div>
      </div>
    </div>
</template>

export interface aboutConnect {
    author: author[]; //头像数据
    large: string; //标题数据
    myinfo: myinfo[]; //个人介绍数据
    hello: string; //Hello there数据
    maxim: maxim[]; //左右铭数据
    technology: technology[]; //偏好数据
    game: game[]; //游戏数据
    single: single[]; //历程数据
}

// 头像数据
export interface author {
    left: left[];
    logo: string;
    // box: box[];
    right: right[];
}

export interface left {
    tag1: string;
    tag2: string;
    tag3: string;
    tag4: string;
}

export interface box {
    logo: string;
}

export interface right {
    tag1: string;
    tag2: string;
    tag3: string;
    tag4: string;
}

//个人介绍数据
export interface myinfo {
    title1: string;
    title2: string;
    inlineword1: string;
    title3: string;
    inlineword2: string;
    card: card[];
}

export interface card {
    tips: string;
    conect1: string;
    conect2: string;
    inlineword: string;
    mask: mask[];
}

export interface mask {
    firstTips: string;
    span: string;
    up: string;
    show: string;
}

//左右铭数据
export interface maxim {
    tip: string;
    title1: string;
    title2: string;
}

//偏好数据
export interface technology {
    tip: string;
    title: string;
    bottomTip: string;
}

//游戏数据
export interface game {
    tip: string;
    title: string;
    uid: string;
    image: string;
}

//历程数据
export interface single {
    tip: string;
    conect1: string;
    strong1: string;
    conect2: string;
    strong2: string;
    conect3: string
}

export const aboutPage: aboutConnect[] = [
    {
        author: [
            {
                left: [{
                    tag1: "💻 Like数码科技",
                    tag2: "🥣 干饭魂 干饭人",
                    tag3: "🕊 咕咕咕咕咕咕~",
                    tag4: "🧱 CV工程师"
                }],
                logo: "https://blog.myxz.top/img/avatar.avif",
                right: [{
                    tag1: "吃饭不如碎觉 💤",
                    tag2: "乐观 积极 向上 🤝",
                    tag3: "专攻各种困难 🔨",
                    tag4: "人不狠话超多 💢"
                }]
            }
        ],
        large: "关于本站",
        myinfo: [{
            title1: "你好，很高兴认识你👋",
            title2: "我叫",
            inlineword1: "渊",
            title3: "是一名 前端工程师、学生、",
            inlineword2: "博主",
            card: [{
                tips: "追求",
                conect1: "源于",
                conect2: "热爱而去",
                inlineword: "感受",
                mask: [{
                    firstTips: "学习",
                    span: "生活",
                    up: "程序",
                    show: "体验"
                }]
            }]
        }],
        hello: "Main Dis My Blogs",
        maxim: [{
            tip: "座右铭",
            title1: "生活明朗，",
            title2: "万物可爱。",
        }],
        technology: [{
            tip: "关注偏好",
            title: "数码科技",
            bottomTip: "手机、电脑软硬件"
        }],
        game: [{
            tip: "爱好游戏",
            title: "暂时未公开",
            uid: "暂时未公开",
            image: ""
        }],
        single: [{
            tip: "",
            conect1: "",
            strong1: "",
            conect2: "",
            strong2: "",
            conect3: ""
        }]
    }
]