feat(indexbar): 增加索引组件

src/index-bar-anchor/index.js

@@ -0,0 +1,4 @@
+export default {
+  "tiny-mobile-index-bar-anchor-bg-color": "#f5f5f5",
+  "tiny-mobile-index-bar-anchor-text-color": "#999",
+};

src/index-bar-anchor/index.less

@@ -0,0 +1,26 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../custom.less';
+@import './vars.less';
+
+@index-bar-prefix-cls: ~'@{css-prefix}mobile-index-bar-anchor';
+
+.@{index-bar-prefix-cls} {
+  background: var(--ti-mobile-index-bar-anchor-bg-color);
+  &__label {
+    margin-left: 16px;
+    line-height: 32px;
+    font-size: 12px;
+    color: var(--ti-mobile-index-bar-anchor-text-color);
+  }
+}

src/index-bar-anchor/vars.less

@@ -0,0 +1,4 @@
+:root {
+  --ti-mobile-index-bar-anchor-bg-color: var(--ti-mobile-common-bg-color-dark-gray, #f5f5f5);
+  --ti-mobile-index-bar-anchor-text-color: var(--ti-mobile-common-color-text-weaken-dark, #999);
+}

src/index-bar/index.js

@@ -0,0 +1,6 @@
+export default {
+  "tiny-mobile-index-bar-bg-color-active": "#4a79fe",
+  "tiny-mobile-index-bar-text-color": "#595959",
+  "tiny-mobile-index-bar-text-color-active": "#fff",
+  "tiny-mobile-index-bar-side-bg-color": "rgba(80, 227, 194, 0.12)",
+};

src/index-bar/index.less

@@ -0,0 +1,52 @@
+/**
+* Copyright (c) 2022 - present TinyVue Authors.
+* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+*
+* Use of this source code is governed by an MIT-style license.
+*
+* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+*
+*/
+
+@import '../mixins/button.less';
+@import '../custom.less';
+@import './vars.less';
+
+@index-bar-prefix-cls: ~'@{css-prefix}mobile-index-bar';
+
+.@{index-bar-prefix-cls} {
+  &__side {
+    position: fixed;
+    right: 0;
+    top: 50%;
+    width: 22px;
+    padding: 4px 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+    transform: translateY(-50%);
+    z-index: 2;
+    background: var(--ti-mobile-index-bar-side-bg-color);
+  }
+
+  &__label {
+    width: 100%;
+    font-size: 10px;
+    line-height: 16px;
+    font-weight: 500;
+    color: var(--ti-mobile-index-bar-text-color);
+  }
+
+  &__label--active {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    color: var(--ti-mobile-index-bar-text-color-active);
+    background: var(--ti-mobile-index-bar-bg-color-active);
+  }
+}

src/index-bar/vars.less

@@ -0,0 +1,6 @@
+:root {
+  --ti-mobile-index-bar-bg-color-active: var(--ti-mobile-common-bg-color-main, #4a79fe);
+  --ti-mobile-index-bar-text-color: var(--ti-mobile-common-color-text-secondary, #595959);
+  --ti-mobile-index-bar-text-color-active: var(--ti-mobile-common-color-text-white, #fff);
+  --ti-mobile-index-bar-side-bg-color: rgba(80, 227, 194, 0.12);
+}