From 9f411b6bbb7972d1fe435293ddbe165fe83108a5 Mon Sep 17 00:00:00 2001
From: QIWEI <davidmaeew@gmail.com>
Date: Sun, 30 Mar 2025 23:54:11 +0800
Subject: [PATCH] feat: update components

---
 MyCompHub/CommunityAnnouncement/main.vue |  91 +++++
 MyCompHub/EventList/main.vue             | 444 +++++++++++++++++++++++
 MyCompHub/HeaderSection/main.vue         | 201 ++++++++++
 MyCompHub/main.vue                       |  30 ++
 4 files changed, 766 insertions(+)
 create mode 100644 MyCompHub/CommunityAnnouncement/main.vue
 create mode 100644 MyCompHub/EventList/main.vue
 create mode 100644 MyCompHub/HeaderSection/main.vue
 create mode 100644 MyCompHub/main.vue

diff --git a/MyCompHub/CommunityAnnouncement/main.vue b/MyCompHub/CommunityAnnouncement/main.vue
new file mode 100644
index 0000000..17c8910
--- /dev/null
+++ b/MyCompHub/CommunityAnnouncement/main.vue
@@ -0,0 +1,91 @@
+<template>
+  <div :class="$style['container-wrapper']">
+    <div :class="$style['image-container']">
+      <img src="https://weavefox.alipay.com/assets/29651620-1f7a-412a-af73-04eacca8b932.png" :class="$style['announcement-image']" />
+    </div>
+    <div :class="$style['content-section']">
+      <div :class="$style['title-section']">
+        <span :class="$style['community-title']">
+          ModelScope
+        </span>
+        <ElTag color="rgb(241,241,252)" :class="$style['tag-label']">
+          社区公告
+        </ElTag>
+      </div>
+      <span :class="$style['latest-announcement']">
+        最新公告
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+};
+</script>
+
+<style module>
+.container-wrapper {
+  background-color: #ffffff;
+  width: 408px;
+  align-self: flex-start;
+  margin-left: 2px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 20px 28px 12px 28px;
+}
+
+.image-container {
+  border-radius: 10px;
+  background-color: #f7f9fd;
+  width: 60px;
+  height: 60px;
+  padding: 10px 12px 16px 12px;
+}
+
+.announcement-image {
+  flex-shrink: 0;
+  border-radius: 3px;
+  width: 34px;
+  height: 34px;
+  margin-left: 2px;
+  margin-top: 2px;
+  margin-right: 2px;
+}
+
+.content-section {
+  margin-left: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.title-section {
+  margin-left: 2px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.community-title {
+  color: #272549;
+  font-size: 18px;
+  font-weight: bold;
+  white-space: nowrap;
+}
+
+.tag-label {
+  color: #5e4bf6;
+  font-size: 18px;
+  font-weight: bold;
+  margin-left: 12px;
+}
+
+.latest-announcement {
+  color: #8284a1;
+  font-size: 14px;
+  margin-top: 6px;
+}
+</style>
\ No newline at end of file
diff --git a/MyCompHub/EventList/main.vue b/MyCompHub/EventList/main.vue
new file mode 100644
index 0000000..1da3539
--- /dev/null
+++ b/MyCompHub/EventList/main.vue
@@ -0,0 +1,444 @@
+<template>
+  <div :class="$style['event-container']">
+    <div :class="$style['event-header']">
+      <img src="https://weavefox.alipay.com/assets/1ff06ae3-3ddc-4504-a074-21515cb6a41b.png" :class="$style['featured-image']" />
+      <div :class="$style['event-body']">
+        <div :class="$style['event-item']">
+          <span :class="$style['event-title']">
+            “同西游， 见万相” 主题LoRA风格挑战赛来袭！ 万元奖金池+猫超卡+限...
+          </span>
+          <span :class="$style['event-description']">
+            在通义万相Wan2.1的文生视频模型的基础上训练LoRA模型、以《西游记》的经典人物或故事为...
+          </span>
+        </div>
+        <div :class="$style['event-item']">
+          <ElTag color="rgb(234,254,255)" :class="$style['event-tag']">
+            活动动态
+          </ElTag>
+          <div :class="$style['date-container']">
+            <img src="https://weavefox.alipay.com/assets/10a7f786-45cb-48e9-beae-f202abfbf36f.png" :class="$style['date-icon']" />
+            <span :class="$style['event-date']">
+              2025-03-13
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div :class="$style['event-details']">
+      <div :class="$style['related-event']">
+        <img src="https://weavefox.alipay.com/assets/2120dba3-676f-4c48-93c9-ecafdcc9a2dd.png" :class="$style['thumbnail-image']" />
+        <div :class="$style['related-content']">
+          <div :class="$style['related-info']">
+            <span :class="$style['related-title']">
+              欧莱雅集团首届美妆科技黑客松大赛
+            </span>
+            <span :class="$style['related-subtitle']">
+              科技大FUN颂 BEAUTY TECHATHON
+            </span>
+          </div>
+          <img src="https://weavefox.alipay.com/assets/d5003336-aa7a-4512-b7e7-d9a79c2951ce.png" :class="$style['secondary-thumbnail']" />
+          <div :class="$style['related-footer']">
+            <ElTag color="rgb(234,254,255)" :class="$style['event-tag-2']">
+              活动动态
+            </ElTag>
+            <span :class="$style['update-item-date']">
+              2025-03-11
+            </span>
+          </div>
+        </div>
+      </div>
+      <div :class="$style['additional-info']">
+        <div :class="$style['additional-content']">
+          <div :class="$style['community-update']">
+            <img src="https://weavefox.alipay.com/assets/8acd76e2-f72f-4f6a-a2e9-b9533ab6ca28.png" :class="$style['community-update-image']" />
+            <span :class="$style['update-title']">
+              魔搭社区模型速递(3.2-3.8）
+            </span>
+          </div>
+          <ElTag color="rgb(232,229,253)" :class="$style['product-news-tag']">
+            产品动态
+          </ElTag>
+        </div>
+        <div :class="$style['update-footer']">
+          <span :class="$style['update-description']">
+            @魔搭ModelScope本期社区进展: 1340个模型,220个数据集, 91个创新应用, 8篇内容
+          </span>
+          <div :class="$style['community-update']">
+            <img src="https://weavefox.alipay.com/assets/0abac4c5-c7d3-497b-ad57-5dfe1b8a2f49.png" :class="$style['update-date-icon']" />
+            <span :class="$style['event-date']">
+              2025-03-10
+            </span>
+          </div>
+        </div>
+      </div>
+      <div :class="$style['update-date-container']">
+        <img src="https://weavefox.alipay.com/assets/a16d0b38-ca03-465a-94b5-29d6168345ae.png" :class="$style['video-model-image']" />
+        <div :class="$style['update-item']">
+          <div :class="$style['event-item']">
+            <span :class="$style['update-item-title']">
+              通义万相Wan2.1视频模型开源！视频生成模型新标杆，支持中文字效+...
+            </span>
+            <span :class="$style['event-description']">
+              2025年1月， 阿里通义万相Wan2.1模型登顶Vbench榜首第一，超越Sora、HunyuanVideo、 Mini..
+            </span>
+          </div>
+          <div :class="$style['event-item']">
+            <ElTag color="rgb(232,229,253)" :class="$style['product-news-tag-2']">
+              产品动态
+            </ElTag>
+            <div :class="$style['date-container']">
+              <img src="https://weavefox.alipay.com/assets/8487dcbf-9f02-4c3e-a778-6ae3e94b6532.png" :class="$style['update-date-icon']" />
+              <span :class="$style['event-date']">
+                2025-02-26
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div :class="$style['community-highlight-container']">
+        <img src="https://weavefox.alipay.com/assets/6cf2b8ec-ffa7-43b6-adc3-97ae746718af.png" :class="$style['thumbnail-image']" />
+        <div :class="$style['update-item']">
+          <div :class="$style['event-item']">
+            <span :class="$style['highlight-title']">
+              Kimi开源Moonlight-16B-A3B:基于Muon优化器的高效大模型，性能...
+            </span>
+            <span :class="$style['highlight-description']">
+              最近，Muon优化器在训练小规模语言模型方面展示了强大的效果，但其在大规模模型上的可扩...
+            </span>
+          </div>
+          <div :class="$style['event-item']">
+            <ElTag color="rgb(232,229,253)" :class="$style['product-news-tag-2']">
+              产品动态
+            </ElTag>
+            <div :class="$style['date-container']">
+              <img src="https://weavefox.alipay.com/assets/7c33c503-241b-4b7a-9054-175914da4795.png" :class="$style['update-date-icon']" />
+              <span :class="$style['event-date']">
+                2025-02-25
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+};
+</script>
+
+<style module>
+.event-container {
+  background-color: #ffffff;
+  margin-right: 2px;
+  display: flex;
+  flex-direction: column;
+  padding: 8px 28px 10px 30px;
+}
+
+.event-header {
+  border-radius: 14px;
+  background-color: #f7f9fd;
+  border-color: #5e4bf6;
+  border-style: solid;
+  border-width: 2px;
+  margin-right: 2px;
+  display: flex;
+  flex-direction: row;
+  padding: 16px 16px 28px 18px;
+}
+
+.featured-image {
+  border-radius: 2px;
+  flex-shrink: 0;
+  width: 110px;
+  height: 62px;
+}
+
+.event-body {
+  flex: 1;
+  margin-left: 14px;
+  align-self: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.event-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.event-title {
+  color: #272549;
+  font-size: 14px;
+  margin-left: 2px;
+  white-space: nowrap;
+  display: box;
+  overflow: hidden;
+  webkit-line-clamp: 1;
+  webkit-box-orient: vertical;
+}
+
+.event-description {
+  color: #8284a1;
+  font-size: 14px;
+  margin-top: 15px;
+  white-space: nowrap;
+  display: box;
+  overflow: hidden;
+  webkit-line-clamp: 1;
+  webkit-box-orient: vertical;
+}
+
+.event-tag {
+  color: #53a2a5;
+  font-size: 14px;
+  align-self: flex-end;
+  margin-right: 2px;
+}
+
+.date-container {
+  margin-top: 22px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.date-icon {
+  border-radius: 3px;
+  flex-shrink: 0;
+  width: 10px;
+  height: 10px;
+}
+
+.event-date {
+  color: #8284a1;
+  font-size: 14px;
+  margin-left: 10px;
+  white-space: nowrap;
+}
+
+.event-details {
+  margin-top: 12px;
+  margin-right: 2px;
+  display: flex;
+  flex-direction: column;
+  gap: 12;
+}
+
+.related-event {
+  border-radius: 13px;
+  background-color: #f7f9fd;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 16px 18px 16px 18px;
+}
+
+.thumbnail-image {
+  border-radius: 2px;
+  flex-shrink: 0;
+  width: 108px;
+  height: 82px;
+}
+
+.related-content {
+  flex: 1;
+  margin-left: 16px;
+  display: flex;
+  flex-direction: row;
+}
+
+.related-info {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.related-title {
+  color: #272549;
+  font-size: 14px;
+  font-weight: bold;
+  margin-left: 2px;
+  white-space: nowrap;
+}
+
+.related-subtitle {
+  color: #8284a1;
+  font-size: 14px;
+  margin-top: 15px;
+}
+
+.secondary-thumbnail {
+  border-radius: 3px;
+  flex-shrink: 0;
+  width: 10px;
+  margin-left: 795px;
+  height: 10px;
+  align-self: flex-end;
+  margin-bottom: 6px;
+}
+
+.related-footer {
+  margin-left: 12px;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.event-tag-2 {
+  color: #53a2a5;
+  font-size: 14px;
+  margin-left: 2px;
+}
+
+.update-item-date {
+  color: #8284a1;
+  font-size: 14px;
+  margin-top: 16px;
+  white-space: nowrap;
+}
+
+.additional-info {
+  border-radius: 13px;
+  background-color: #f7f9fd;
+  display: flex;
+  flex-direction: column;
+  padding: 18px 18px 28px 18px;
+}
+
+.additional-content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.community-update {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.community-update-image {
+  flex-shrink: 0;
+  border-radius: 3px;
+  width: 110px;
+  height: 48px;
+}
+
+.update-title {
+  color: #272549;
+  font-size: 14px;
+  font-weight: bold;
+  margin-left: 12px;
+  white-space: nowrap;
+}
+
+.product-news-tag {
+  color: #5e4bf6;
+  font-size: 14px;
+}
+
+.update-footer {
+  margin-top: 2px;
+  margin-left: 124px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.update-description {
+  color: #8284a1;
+  font-size: 14px;
+  white-space: nowrap;
+}
+
+.update-date-icon {
+  border-radius: 4px;
+  flex-shrink: 0;
+  width: 10px;
+  height: 10px;
+}
+
+.update-date-container {
+  border-radius: 14px;
+  background: linear-gradient(0deg, #f7f9fd, #dfe1fc);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 16px 18px 16px 18px;
+}
+
+.video-model-image {
+  border-radius: 2px;
+  flex-shrink: 0;
+  width: 108px;
+  height: 80px;
+}
+
+.update-item {
+  flex: 1;
+  margin-left: 16px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.update-item-title {
+  color: #272549;
+  font-size: 14px;
+  font-weight: bold;
+  white-space: nowrap;
+  display: box;
+  overflow: hidden;
+  webkit-line-clamp: 1;
+  webkit-box-orient: vertical;
+}
+
+.product-news-tag-2 {
+  color: #5e4bf6;
+  font-size: 14px;
+  align-self: flex-end;
+  margin-right: 2px;
+}
+
+.community-highlight-container {
+  border-radius: 23px;
+  background-color: #f7f9fd;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 16px 18px 18px 18px;
+}
+
+.highlight-title {
+  color: #272549;
+  font-size: 14px;
+  font-weight: bold;
+  margin-left: 2px;
+  white-space: nowrap;
+  display: box;
+  overflow: hidden;
+  webkit-line-clamp: 1;
+  webkit-box-orient: vertical;
+}
+
+.highlight-description {
+  color: #8284a1;
+  font-size: 14px;
+  margin-top: 14px;
+  white-space: nowrap;
+  display: box;
+  overflow: hidden;
+  webkit-line-clamp: 1;
+  webkit-box-orient: vertical;
+}
+</style>
\ No newline at end of file
diff --git a/MyCompHub/HeaderSection/main.vue b/MyCompHub/HeaderSection/main.vue
new file mode 100644
index 0000000..658a3bf
--- /dev/null
+++ b/MyCompHub/HeaderSection/main.vue
@@ -0,0 +1,201 @@
+<template>
+  <div :class="$style['header-container']">
+    <div :class="$style['navigation-bar']">
+      <img src="https://weavefox.alipay.com/assets/cdf12d0c-7bb1-497b-839e-fd8bc3db7888.png" :class="$style['logo-image']" />
+      <span :class="$style['site-title']">
+        10de15cope
+      </span>
+      <span :class="$style['home-link']">
+        首页
+      </span>
+      <span :class="$style['category-link']">
+        模型库
+      </span>
+      <span :class="$style['category-link']">
+        数据集
+      </span>
+      <span :class="$style['category-link']">
+        创空间
+      </span>
+      <span :class="$style['special-zone']">
+        AIGC专区
+      </span>
+      <span :class="$style['doc-center']">
+        文档中心
+      </span>
+      <span :class="$style['category-link']">
+        社区
+      </span>
+      <img src="https://weavefox.alipay.com/assets/3039eb80-a1da-47b2-bb7b-cb3043d39b01.png" :class="$style['user-profile']" />
+      <div :class="$style['auth-section']">
+        <div :class="$style['auth-divider']" />
+        <ElIconAntd :iconData="GithubOutlined" :class="$style['github-icon']" />
+      </div>
+      <span :class="$style['github-text']">
+        GitHub
+      </span>
+    </div>
+    <div :class="$style['navigation-bar']">
+      <img src="https://weavefox.alipay.com/assets/3c43c218-05c8-4f4d-a1f8-33464745a68d.png" :class="$style['feature-image-one']" />
+      <img src="https://weavefox.alipay.com/assets/cdbf8f67-10fe-4407-b467-b1291ecaf978.png" :class="$style['feature-image-two']" />
+      <ElInput placeholder="搜索您感" v-model="searchPlaceholderValue" :class="$style['search-input']">
+        <template #prepend="prepend">
+          <ElIconAntd :iconData="ZoomOutOutlined" :class="$style['search-icon']" />
+        </template>
+      </ElInput>
+      <ElButton @onClick="onAuthActionClick" :class="$style['auth-button']">
+        登录/注册
+      </ElButton>
+    </div>
+  </div>
+</template>
+
+<script>
+import { GithubOutlined, ZoomOutOutlined } from '@ant-design/icons-svg';
+
+export default {
+  data () {
+    return {
+      searchPlaceholderValue: '',
+      GithubOutlined,
+      ZoomOutOutlined
+    };
+  },
+  methods: {
+    onAuthActionClick () {}
+  },
+};
+</script>
+
+<style module>
+.header-container {
+  background-color: #ffffff;
+  margin-left: 2px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6px 6px 10px 5px;
+}
+
+.navigation-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.logo-image {
+  flex-shrink: 0;
+  border-radius: 3px;
+  width: 38px;
+  height: 26px;
+}
+
+.site-title {
+  color: #272549;
+  font-size: 14px;
+  font-weight: bold;
+  margin-left: 8px;
+  white-space: nowrap;
+}
+
+.home-link {
+  color: #8284a1;
+  font-size: 14px;
+  margin-left: 50px;
+  white-space: nowrap;
+}
+
+.category-link {
+  color: #8284a1;
+  font-size: 14px;
+  margin-left: 32px;
+  white-space: nowrap;
+}
+
+.special-zone {
+  color: #8284a1;
+  font-size: 14px;
+  margin-left: 60px;
+  white-space: nowrap;
+}
+
+.doc-center {
+  color: #8284a1;
+  font-size: 14px;
+  margin-left: 36px;
+  white-space: nowrap;
+}
+
+.user-profile {
+  border-radius: 2px;
+  flex-shrink: 0;
+  width: 8px;
+  margin-left: 6px;
+  height: 6px;
+}
+
+.auth-section {
+  margin-left: 18px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.auth-divider {
+  background-color: #ecedf1;
+  width: 3px;
+  height: 13px;
+}
+
+.github-icon {
+  color: #8284a1;
+  font-size: 16px;
+  width: 16px;
+  margin-left: 15px;
+  height: 16px;
+}
+
+.github-text {
+  color: #8284a1;
+  font-size: 14px;
+  margin-left: 5px;
+  white-space: nowrap;
+}
+
+.feature-image-one {
+  flex-shrink: 0;
+  border-radius: 3px;
+  width: 16px;
+  height: 18px;
+}
+
+.feature-image-two {
+  border-radius: 6px;
+  flex-shrink: 0;
+  width: 16px;
+  margin-left: 20px;
+  height: 16px;
+}
+
+.search-input {
+  width: 128px;
+  margin-left: 15px;
+}
+
+.search-icon {
+  color: #8284a1;
+  font-size: 16px;
+  width: 16px;
+  height: 16px;
+}
+
+.auth-button {
+  border-radius: 11px;
+  background-color: #474d5a;
+  border: none;
+  color: #ffffff;
+  margin-left: 18px;
+  height: 32px;
+}
+</style>
\ No newline at end of file
diff --git a/MyCompHub/main.vue b/MyCompHub/main.vue
new file mode 100644
index 0000000..0a373e3
--- /dev/null
+++ b/MyCompHub/main.vue
@@ -0,0 +1,30 @@
+<template>
+  <div :class="$style['container-wrapper']">
+    <div :class="$style['inner-container']">
+      <HeaderSection />
+      <CommunityAnnouncement />
+      <EventList />
+    </div>
+  </div>
+</template>
+
+<script>
+import HeaderSection from './HeaderSection/main.vue';
+import CommunityAnnouncement from './CommunityAnnouncement/main.vue';
+import EventList from './EventList/main.vue';
+
+export default {
+  components: { HeaderSection, CommunityAnnouncement, EventList }
+};
+</script>
+
+<style module>
+.container-wrapper {
+  padding: 2px 2px 2px 0px;
+}
+
+.inner-container {
+  display: flex;
+  flex-direction: column;
+}
+</style>
\ No newline at end of file