一些优化

Ben Lin

2025-03-08 858b9bccead46cdefc99325b7c956d50a2964309

 src/views/demo/page/account/center/index.vue

@@ -1,16 +1,16 @@
<template>
  <div :class="prefixCls">
    <a-row :class="`${prefixCls}-top`">
      <a-col :span="9" :class="`${prefixCls}-col`">
        <a-row>
          <a-col :span="8">
    <Row :class="`${prefixCls}-top`">
      <Col :span="9" :class="`${prefixCls}-col`">
        <Row>
          <Col :span="8">
            <div :class="`${prefixCls}-top__avatar`">
              <img width="70" :src="avatar" />
              <span>Vben</span>
              <div>海纳百川，有容乃大</div>
            </div>
          </a-col>
          <a-col :span="16">
          </Col>
          <Col :span="16">
            <div :class="`${prefixCls}-top__detail`">
              <template v-for="detail in details" :key="detail.title">
                <p>
@@ -19,32 +19,32 @@
                </p>
              </template>
            </div>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="7" :class="`${prefixCls}-col`">
        <CollapseContainer title="标签" :canExpan="false">
          </Col>
        </Row>
      </Col>
      <Col :span="7" :class="`${prefixCls}-col`">
        <CollapseContainer title="标签" :canExpand="false">
          <template v-for="tag in tags" :key="tag">
            <Tag class="mb-2">
              {{ tag }}
            </Tag>
          </template>
        </CollapseContainer>
      </a-col>
      <a-col :span="8" :class="`${prefixCls}-col`">
        <CollapseContainer :class="`${prefixCls}-top__team`" title="团队" :canExpan="false">
      </Col>
      <Col :span="8" :class="`${prefixCls}-col`">
        <CollapseContainer :class="`${prefixCls}-top__team`" title="团队" :canExpand="false">
          <div v-for="(team, index) in teams" :key="index" :class="`${prefixCls}-top__team-item`">
            <Icon :icon="team.icon" :color="team.color" />
            <span>{{ team.title }}</span>
          </div>
        </CollapseContainer>
      </a-col>
    </a-row>
      </Col>
    </Row>
    <div :class="`${prefixCls}-bottom`">
      <Tabs>
        <template v-for="item in achieveList" :key="item.key">
          <TabPane :tab="item.name">
            <component :is="item.component" />
            <component :is="tabs[item.component]" />
          </TabPane>
        </template>
      </Tabs>
@@ -52,45 +52,28 @@
  </div>
</template>

<script lang="ts">
  import { Tag, Tabs, Row, Col } from 'ant-design-vue';
  import { defineComponent, computed } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import Icon from '@/components/Icon/Icon.vue';
  import Article from './Article.vue';
  import { Col, Row, Tabs, Tag } from 'ant-design-vue';
  import { computed } from 'vue';
  import Application from './Application.vue';
  import Article from './Article.vue';
  import Project from './Project.vue';

  import headerImg from '/@/assets/images/header.jpg';
  import { tags, teams, details, achieveList } from './data';
  import { useUserStore } from '/@/store/modules/user';
  import headerImg from '@/assets/images/header.jpg';
  import { useUserStore } from '@/store/modules/user';
  import { achieveList, details, tags, teams } from './data';

  export default defineComponent({
    components: {
      CollapseContainer,
      Icon,
      Tag,
      Tabs,
      TabPane: Tabs.TabPane,
      Article,
      Application,
      Project,
      [Row.name]: Row,
      [Col.name]: Col,
    },
    setup() {
      const userStore = useUserStore();
      const avatar = computed(() => userStore.getUserInfo.avatar || headerImg);
      return {
        prefixCls: 'account-center',
        avatar,
        tags,
        teams,
        details,
        achieveList,
      };
    },
  });
  const userStore = useUserStore();
  const TabPane = Tabs.TabPane;
  const tabs = {
    Article,
    Application,
    Project,
  };
  const prefixCls = 'account-center';
  const avatar = computed(() => userStore.getUserInfo.avatar || headerImg);
</script>
<style lang="less" scoped>
  .account-center {