feat: add icon page and router

services/notice.json

@@ -1,29 +1,39 @@
 {
   "all": {},
-  "site": {},
+  "site": {
+    "title": "🎨 新图标资源发布，支持可变粗细和多色填充，欢迎使用体验",
+    "type": "primary",
+    "actionUrl": "https://tdesign.tencent.com/icons",
+    "closeable": true
+  },
   "vue": {
-    "title": "🗓 新增单组件的更新日志，进入任意组件页后，点击更新日志按钮即可查看",
+    "title": "🎨 图标新版本 0.4.0 发布，支持可变粗细和多色填充的图标资源，欢迎使用体验",
     "type": "primary",
+    "actionUrl": "https://tdesign.tencent.com/icons",
     "closeable": true
   },
   "react": {
-    "title": "🗓 新增单组件的更新日志，进入任意组件页后，点击更新日志按钮即可查看",
+    "title": "🎨 图标新版本 0.6.0 发布，支持可变粗细和多色填充的图标资源，欢迎使用体验",
     "type": "primary",
+    "actionUrl": "https://tdesign.tencent.com/icons",
     "closeable": true
   },
   "vue-next": {
-    "title": "🗓 新增单组件的更新日志，进入任意组件页后，点击更新日志按钮即可查看",
+    "title": "🎨 图标新版本 0.4.0 发布，支持可变粗细和多色填充的图标资源，欢迎使用体验",
     "type": "primary",
+    "actionUrl": "https://tdesign.tencent.com/icons",
     "closeable": true
   },
   "vue-mobile": {
-    "title": "🗓 新增单组件的更新日志，进入任意组件页后，点击更新日志按钮即可查看",
+    "title": "🎨 图标新版本 0.4.0 发布，支持可变粗细和多色填充的图标资源，欢迎使用体验",
     "type": "primary",
+    "actionUrl": "https://tdesign.tencent.com/icons",
     "closeable": true
   },
   "react-mobile": {
-    "title": "📢 站点接入主题生成器，支持自定义CSS 变量",
+    "title": "🎨 图标新版本 0.6.0 发布，支持可变粗细和多色填充的图标资源，欢迎使用体验",
     "type": "primary",
+    "actionUrl": "https://tdesign.tencent.com/icons",
     "closeable": true
   },
   "miniprogram": {

site/package.json

@@ -17,7 +17,7 @@
     "markdown-it": "^12.3.2",
     "markdown-it-link-attributes": "^4.0.0",
     "prismjs": "^1.29.0",
-    "tdesign-icons-view": "^0.3.5",
+    "tdesign-icons-view": "~0.4.0",
     "tdesign-icons-vue": "^0.1.4",
     "tdesign-vue": "1.9.8-naruto",
     "three": "0.127.0",

site/src/App.vue

@@ -8,9 +8,9 @@
 <script>
 export default {
   computed: {
-    headerStyle () {
-      const { name } = this.$route
-      const fixedHeaderList = ['home', 'home-en', 'source', 'source-en', 'trade']
+    headerStyle() {
+      const { name } = this.$route;
+      const fixedHeaderList = ['home', 'home-en', 'source', 'source-en', 'trade', 'icons', 'icons-en'];
       if (fixedHeaderList.includes(name)) {
         return {
           position: 'fixed',
@@ -20,46 +20,46 @@ export default {
           zIndex: 1200,
           '--bg-color-secondarypage': 'var(--bg-color-navigation)',
           '--bg-color-secondarypage-hover': 'var(--bg-color-navigation-hover)',
-          '--bg-color-secondarypage-select': 'var(--bg-color-navigation-select)'
-        }
+          '--bg-color-secondarypage-select': 'var(--bg-color-navigation-select)',
+        };
       }
-      return { display: 'none' }
-    }
+      return { display: 'none' };
+    },
   },
 
-  mounted () {
-    window.addEventListener('load', this.handleHashScroll)
+  mounted() {
+    window.addEventListener('load', this.handleHashScroll);
   },
 
-  beforeDestroy () {
-    window.removeEventListener('load', this.handleHashScroll)
+  beforeDestroy() {
+    window.removeEventListener('load', this.handleHashScroll);
   },
 
   watch: {
     $route: {
       immediate: true,
-      handler (route) {
+      handler(route) {
         if (route.meta) {
-          document.title = route.meta.documentTitle || 'TDesign'
+          document.title = route.meta.documentTitle || 'TDesign';
         }
-      }
-    }
+      },
+    },
   },
 
   methods: {
-    handleHashScroll () {
-      const { $route } = this
-      const hash = decodeURIComponent($route.hash)
+    handleHashScroll() {
+      const { $route } = this;
+      const hash = decodeURIComponent($route.hash);
       requestAnimationFrame(() => {
-        const id = hash.slice(1)
-        const anchorEl = document.getElementById(id)
-        if (!anchorEl) return
+        const id = hash.slice(1);
+        const anchorEl = document.getElementById(id);
+        if (!anchorEl) return;
 
         requestAnimationFrame(() => {
-          window.scrollTo({ top: anchorEl.offsetTop - 88 })
-        })
-      })
-    }
-  }
-}
+          window.scrollTo({ top: anchorEl.offsetTop - 88 });
+        });
+      });
+    },
+  },
+};
 </script>

site/src/pages/design/icon.vue

@@ -214,7 +214,9 @@
 
     <h3>Breaks</h3>
     <p>
-      Breaks mostly appear on composite icons, and their width should be analyzed according to the specific style of the icon and aim to balance the visual weight.</p>
+      Breaks mostly appear on composite icons, and their width should be analyzed according to the specific style of the
+      icon and aim to balance the visual weight.
+    </p>
     <img src="./assets/icon/fracture.png" alt="" />
 
     <h3>Simplicity</h3>
@@ -257,17 +259,28 @@
       </div>
     </div>
 
-    <h3>Download Icon</h3>
-    <all-icons />
+    <h3>All Icons</h3>
+    <div
+      style="
+        background: #ecf2fe;
+        display: flex;
+        align-items: center;
+        line-height: 20px;
+        padding: 14px 24px;
+        border-radius: 3px;
+        color: #555a65;
+        margin: 16px 0;
+      "
+    >
+      Visit <a href="/icons-en"> TDesign Icons </a> to view and experience all supported icons.
+    </div>
   </div>
 </template>
 
 <script>
-import AllIcons from '@/components/all-icons.vue';
 import anchorMixin from '../mixins/anchor';
 
 export default {
-  components: { AllIcons },
   mixins: [anchorMixin],
 };
 </script>